/* Groove Life — "The Loadout": one ground, gear laid on top as plates. No section bands, no gradients. */
@font-face{font-family:"Inter";src:url("fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("fonts/barlow-condensed-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("fonts/barlow-condensed-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --ground:#22201d;      /* measured on the brand's own topo artwork */
  --ink:#1a0d09;         /* --dark-primary */
  --olive:#2f362e;       /* logo green, --rivo-aw-* */
  --cream:#f2ebe4;       /* --light-secondary */
  --orange:#ff7700;      /* --orange-primary */
  --brown:#766453;       /* --dark-secondary */
  --studio:#e4e4e2;      /* product photo backdrop */
  --on-ground:#f2ebe4;
  --on-ground-2:#cdc4b9;
  --on-cream-2:#5b4d41;
  --rule:#4a4640;
  --rule-cream:#cfc4b8;
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Inter",system-ui,sans-serif;
  --gutter:clamp(16px,4vw,48px);
  --r:6px;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='18'%3E%3Cg stroke='%23f2ebe4' stroke-opacity='.55'%3E%3Cpath d='M.5 0v18M10.5 10v8M20.5 10v8M30.5 10v8M40.5 5v13M50.5 10v8M60.5 10v8M70.5 10v8'/%3E%3C/g%3E%3C/svg%3E");
  --tick-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='18'%3E%3Cg stroke='%231a0d09' stroke-opacity='.7'%3E%3Cpath d='M.5 0v18M10.5 10v8M20.5 10v8M30.5 10v8M40.5 5v13M50.5 10v8M60.5 10v8M70.5 10v8'/%3E%3C/g%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--on-ground);font:400 17px/1.55 var(--body);font-feature-settings:"tnum" 1,"cv11" 1;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-underline-offset:.18em}
::selection{background:var(--orange);color:var(--ink)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:2px}
.plate-orange :focus-visible{outline-color:var(--ink)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
table{border-collapse:collapse;width:100%}
th{text-align:left;font-weight:600}

h1,h2{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.92;letter-spacing:.004em;text-wrap:balance}
h2{font-size:clamp(38px,4.6vw,64px)}
h3{font:600 17px/1.3 var(--body)}
.fine{font-size:14px;line-height:1.5}

/* ---------- package chrome ---------- */
.pular{position:absolute;left:12px;top:-60px;z-index:20;background:var(--cream);color:var(--ink);padding:10px 16px;font-weight:600}
.pular:focus{top:12px}
.rascunho{background:var(--orange);color:var(--ink);text-align:center;font-size:14px;line-height:1.4;padding:7px 16px;font-weight:600}
.pacote{background:var(--ink);color:var(--cream);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px var(--gutter)}
.pacote-abas{display:flex;flex-wrap:wrap;gap:4px}
.pacote-abas a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;color:var(--cream);text-decoration:none;font-size:15px;line-height:1.2;border-radius:var(--r);transition:background-color .16s ease}
.pacote-abas a[aria-current="page"]{background:var(--cream);color:var(--ink);font-weight:600}
.pacote-abas .curto{display:none}
.chat{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;background:var(--orange);color:var(--ink);font-weight:600;font-size:15px;text-decoration:none;border-radius:var(--r);white-space:nowrap;transition:background-color .16s ease}
@media (hover:hover) and (pointer:fine){
  .pacote-abas a:not([aria-current="page"]):hover{background:var(--olive)}
  .chat:hover,.rodape-chat:hover{background:#ff9233}
}
.rodape{background:var(--ink);color:var(--cream);text-align:center;padding:40px var(--gutter) 48px;font-size:15px;line-height:1.5}
.rodape p{max-width:68ch;margin:0 auto 12px}
.rodape-chat{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;background:var(--orange);color:var(--ink);font-weight:600;text-decoration:none;border-radius:var(--r)}
.rodape-fontes{color:var(--on-ground-2);font-size:14px}

/* ---------- shared pieces ---------- */
main>section{position:relative;padding-block:clamp(28px,3.4vw,48px);overflow-x:clip}
.wrap{width:100%;max-width:1336px;margin-inline:auto;padding-inline:var(--gutter)}
.plate{border-radius:var(--r);padding:clamp(22px,3.4vw,48px)}
.plate-cream{background:var(--cream);color:var(--ink)}
.plate-studio{background:var(--studio);color:var(--ink)}
.plate-olive{background:var(--olive);color:var(--cream)}
.plate-orange{background:var(--orange);color:var(--ink)}
.tape{height:18px;background:var(--tick) repeat-x left bottom}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:var(--r);font-weight:600;font-size:16px;text-decoration:none;transition:background-color .16s ease,transform .12s var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn-orange{background:var(--orange);color:var(--ink)}
.btn-line{box-shadow:inset 0 0 0 1.5px var(--cream);color:var(--cream)}
@media (hover:hover) and (pointer:fine){
  .btn-orange:hover{background:#ff9233}
  .btn-line:hover{background:var(--olive)}
}
.price,.colorways b,.knives b,.bands-row b,.disc-items b{font-weight:600;white-space:nowrap}
.ticks{display:grid;gap:8px}
.ticks li{position:relative;padding-left:22px}
.ticks li::before{content:"";position:absolute;left:0;top:.72em;width:12px;height:2px;background:var(--orange)}
.plate-cream .ticks li::before{background:var(--ink)}

/* ---------- surfaces: the table changes material in a hard cut, never a fade ---------- */
main>section.s-cream{background:var(--cream);color:var(--ink)}
main>section.s-olive{background:var(--olive);color:var(--cream)}
main>section.s-brown{background:var(--brown);color:var(--cream)}
main>section.s-orange{background:var(--orange);color:var(--ink)}
main>section[class*=" s-"]{padding-block:clamp(36px,4.6vw,64px)}
section[class*=" s-"] .plate:not(.tag-plate){background:transparent;padding:0;border-radius:0}
.s-cream :focus-visible,.s-orange :focus-visible{outline-color:var(--ink)}
.btn-ink{background:var(--ink);color:var(--cream)}
.btn-line-ink{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .btn-ink:hover{background:var(--olive)}
  .btn-line-ink:hover{background:#ff9233}
}

/* ---------- 1 · hero ---------- */
main>.hero{padding-block:0;background:var(--ground) url("img/topo-wide.webp") right center/cover no-repeat}
.hero-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);gap:clamp(20px,3vw,44px);align-items:center;padding-block:clamp(28px,4vw,56px) clamp(28px,3.4vw,44px)}
.hero-title{grid-column:1/-1;font-size:clamp(58px,10.6vw,154px);line-height:.84;letter-spacing:-.006em}
.lede{font-size:clamp(18px,1.5vw,21px);line-height:1.4;max-width:30ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.hero-ring{background:var(--studio);color:var(--ink);border-radius:var(--r);padding:clamp(18px,2.4vw,34px) clamp(18px,2.4vw,34px) 14px}
.hero-ring img{width:100%;filter:drop-shadow(0 18px 14px rgba(26,13,9,.34))}
.hero-ring figcaption{margin-top:16px;padding-top:24px;font-size:14px;color:#3b332d;text-align:left;background:var(--tick-ink) repeat-x left top}
.callouts{display:grid;gap:18px}
.callout{position:relative;padding:0 0 18px 0;border-bottom:1px solid var(--rule)}
.callout:last-child{border-bottom:0;padding-bottom:0}
.callout strong{display:block;font:600 22px/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--orange);margin-bottom:6px}
.callout span{display:block;font-size:15.5px;line-height:1.5;color:var(--on-ground)}
.callout::before{content:"";position:absolute;right:calc(100% + 12px);top:11px;width:clamp(24px,3.4vw,52px);height:1px;background:var(--orange);transform-origin:right center}
.callout::after{content:"";position:absolute;right:calc(100% + 12px + clamp(24px,3.4vw,52px));top:8px;width:7px;height:7px;border-radius:50%;background:var(--orange)}
@keyframes cota{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.com-js .callout::before{animation:cota .9s var(--ease-out) both}
.com-js .callout:nth-child(2)::before{animation-delay:.08s}
.com-js .callout:nth-child(3)::before{animation-delay:.16s}

/* ---------- 2 · origin ---------- */
.origin-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px clamp(24px,4vw,64px);align-items:stretch}
.origin-photo{grid-row:1/3;display:grid;grid-template-rows:minmax(0,1fr) auto;height:100%}
.origin-photo img{width:100%;height:100%;min-height:320px;object-fit:cover;border-radius:var(--r)}
.origin-photo figcaption{margin-top:10px;font-size:14px;color:var(--on-ground-2);padding-top:10px;background:var(--tick) repeat-x left top;padding-top:26px}
.origin-text h2{margin-bottom:20px}
.origin-text p{max-width:46ch;margin-bottom:14px;color:var(--on-ground)}
.origin-quote{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule)}
.origin-quote p{font:600 clamp(22px,2vw,28px)/1.12 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--orange);max-width:24ch}
.origin-quote footer{font-size:14px;color:var(--on-ground-2)}
.origin-ridge{width:100%;height:132px;object-fit:cover;border-radius:var(--r)}

/* ---------- 3 · problems ---------- */
.problems-plate{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:28px clamp(24px,3vw,44px)}
.problems-head h2{font-size:clamp(34px,4vw,56px)}
.problems-head{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(24px,3vw,44px);align-items:end}
.problems-head blockquote p{font-size:18px;line-height:1.4;font-weight:600}
.problems-head blockquote footer{font-size:14px;color:var(--on-cream-2);margin-top:6px}
.ledger-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,3vw,40px);padding:13px 0;border-top:1px solid var(--rule-cream)}
.ledger-cols{border-top:2px solid var(--ink);padding:8px 0;font-size:14px;font-weight:600}
.ledger-row h3{font:700 clamp(21px,1.9vw,26px)/1.05 var(--display);text-transform:uppercase;letter-spacing:.01em;margin-bottom:6px}
.ledger-row s{text-decoration-thickness:2px;text-decoration-color:var(--orange);color:var(--on-cream-2)}
.ledger-row p{font-size:15.5px;line-height:1.5}
.problems-photo{width:100%;height:100%;min-height:220px;object-fit:cover;border-radius:var(--r)}

/* ---------- 4 · rack ---------- */
.rack-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 40px;margin-bottom:22px}
.rack-head p{max-width:44ch;font-size:15.5px;color:#3b332d}
.shelf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px clamp(18px,2.4vw,36px)}
.shelf li{display:grid;grid-template-rows:118px auto auto auto;align-content:start}
.shelf img{height:104px;width:auto;max-width:86%;object-fit:contain;align-self:end;margin-bottom:0;filter:drop-shadow(0 8px 6px rgba(26,13,9,.22))}
.shelf h3{border-top:2px solid var(--ink);padding-top:10px;font-size:16px}
.shelf p{font-size:14.5px;line-height:1.45;color:#3b332d;margin-top:4px}
.shelf .price{margin-top:8px;font:700 24px/1 var(--display)}

/* ---------- 5 · ring size ---------- */
.sizes-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px clamp(24px,4vw,64px);align-items:start}
.sizes-lead p{margin-top:16px;max-width:46ch;color:var(--on-ground-2)}
.scale-row{display:flex;align-items:flex-end;justify-content:space-between;gap:4px;padding-bottom:14px;background:var(--tick) repeat-x left bottom}
.scale-row li{flex:0 1 auto;width:calc(18px + var(--d) * 4.2px);aspect-ratio:1;border:3px solid var(--on-ground-2);border-radius:50%;display:grid;place-items:center;margin-bottom:14px}
.scale-row li span{font:700 clamp(13px,1.3vw,19px)/1 var(--display)}
.scale-row .common{border-color:var(--orange);border-width:5px;color:var(--orange)}
.scale figcaption{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:12px;font-size:15px;color:var(--on-ground-2)}
.scale-common{color:var(--orange)}
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.sizes-grid .ways{grid-column:2/3;grid-row:2}
.ways li{border-top:1px solid var(--rule);padding-top:12px}
.ways h3{color:var(--on-ground)}
.ways p{font-size:15px;line-height:1.5;color:var(--on-ground-2);margin-top:6px}
.sizes-notes{grid-column:1/2;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 18px;align-items:start}
.sizes-notes img{grid-column:1/-1;width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:var(--r)}
.sizes-notes p{font-size:14.5px;line-height:1.5;color:var(--on-ground-2)}
.sizes-notes strong{display:block;color:var(--on-ground)}

/* ---------- 6 · the snap ---------- */
.snap-plate{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px clamp(24px,3vw,48px);align-items:stretch}
.snap-text h2{margin-bottom:18px}
.snap-big{font:600 clamp(22px,2vw,28px)/1.14 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--orange);margin-bottom:16px}
.snap-text p{max-width:44ch;margin-bottom:12px}
.snap-claim{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-top:18px;padding-top:14px;border-top:1px solid #56604f}
.snap-claim strong{font:700 24px/1 var(--display);letter-spacing:.02em}
.snap-claim span{font-size:15px;color:#d6d9cf}
.snap-photo img{width:100%;height:100%;min-height:260px;object-fit:cover;object-position:68% 50%;border-radius:var(--r)}
.cotes{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid #56604f;padding-top:26px;background:var(--tick) repeat-x left top}
.cotes div{padding-right:16px}
.cotes dt{font-size:14px;color:#d6d9cf}
.cotes dd{font:700 clamp(34px,3.8vw,54px)/1 var(--display);white-space:nowrap}
.cotes small{font:400 15px/1 var(--body);color:#d6d9cf}

/* ---------- 7 · belt sizer ---------- */
.sizer-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,48px);align-items:end;margin-bottom:26px}
.sizer-head p{font-size:16px;line-height:1.5}
.sizer-tool{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr) minmax(0,300px);gap:clamp(18px,2.6vw,40px);align-items:center;background:var(--ink);color:var(--cream);border-radius:var(--r);padding:clamp(18px,2.4vw,30px)}
.sizer-belt{width:100%;filter:drop-shadow(0 10px 10px rgba(0,0,0,.5))}
.sizer-range label{display:block;font-weight:600;margin-bottom:10px}
.sizer-track{position:relative;padding-bottom:26px}
.sizer-track input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:52px;margin:0;background:var(--olive) var(--tick) repeat-x left bottom;border-radius:var(--r);cursor:ew-resize;touch-action:pan-y}
.sizer-track input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:52px;border-radius:5px;background:var(--orange);border:2px solid var(--cream);box-shadow:0 4px 8px rgba(0,0,0,.45)}
.sizer-track input::-moz-range-thumb{width:26px;height:48px;border-radius:5px;background:var(--orange);border:2px solid var(--cream);box-shadow:0 4px 8px rgba(0,0,0,.45)}
.sizer-track input::-moz-range-track{background:transparent}
.sizer-ticks{position:absolute;left:15px;right:15px;bottom:0;height:18px;font-size:12.5px;color:var(--on-ground-2)}
.sizer-ticks span{position:absolute;transform:translateX(-50%)}
.sizer-ticks span:nth-child(1){left:0}.sizer-ticks span:nth-child(2){left:13.5%}.sizer-ticks span:nth-child(3){left:27%}.sizer-ticks span:nth-child(4){left:37.8%}.sizer-ticks span:nth-child(5){left:48.6%}.sizer-ticks span:nth-child(6){left:75.7%}.sizer-ticks span:nth-child(7){left:100%}
.sizer-out{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"letter waist" "letter len";gap:2px 16px;align-items:center}
.sizer-letter{grid-area:letter;min-width:112px;padding:10px 14px;text-align:center;background:var(--orange);color:var(--ink);border-radius:var(--r);font:700 64px/1 var(--display);transition:transform .16s var(--ease-out)}
.sizer-out.snap .sizer-letter{transform:scale(.94)}
.sizer-waist{grid-area:waist;align-self:end;font-size:15px;color:var(--on-ground-2)}
.sizer-len{grid-area:len;align-self:start;font-size:15px}
.sizer-out b{font:700 26px/1 var(--display);color:var(--cream)}
.sizer-table{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:14px}
.sizer-table li{padding:10px 12px;border:1.5px solid var(--ink);border-radius:var(--r);font-size:14px;line-height:1.35;transition:background-color .16s ease,color .16s ease}
.sizer-table li.on{background:var(--ink);color:var(--cream)}
.sizer-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,36px);margin-top:22px;font-size:15px;line-height:1.5}
.sizer-notes strong{display:block}

/* ---------- 8 · belts spec sheet ---------- */
.belts-plate h2{margin-bottom:18px}
.spec thead th{font-size:13.5px;font-weight:600;color:var(--on-cream-2);padding:0 14px 8px 0;border-bottom:2px solid var(--ink)}
.spec tbody th,.spec td{padding:14px 14px 14px 0;border-bottom:1px solid var(--rule-cream);vertical-align:middle;font-size:15px;line-height:1.4}
.spec tbody th{width:25%}
.spec tbody th img{width:132px;display:inline-block;vertical-align:middle;margin-right:14px;filter:drop-shadow(0 6px 5px rgba(26,13,9,.25))}
.spec tbody th span{display:inline-block;vertical-align:middle;max-width:calc(100% - 152px);font:700 21px/1.05 var(--display);text-transform:uppercase}
.spec td:nth-child(2){width:27%}
.spec td.price{font:700 26px/1 var(--display);padding-right:0;text-align:right}
.spec thead th:last-child{text-align:right;padding-right:0}
.colorways{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin-top:22px}
.colorways img{width:78%;filter:drop-shadow(0 6px 5px rgba(26,13,9,.25))}
.colorways span{display:block;margin-top:8px;font-size:14px;line-height:1.35}

/* ---------- 9 · three straps ---------- */
.straps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px clamp(16px,2vw,28px);align-items:start}
.straps-grid h2{grid-column:1/-1;margin-bottom:4px}
.strap img{width:100%;aspect-ratio:5/6;object-fit:cover;border-radius:var(--r)}
.strap:nth-of-type(1) img{object-position:62% 50%}
.strap:nth-of-type(2){margin-top:44px}
.strap:nth-of-type(2) img{object-position:38% 50%}
.strap:nth-of-type(3){margin-top:88px}
.strap:nth-of-type(3) img{object-position:44% 50%}
.strap figcaption{margin-top:12px}
.strap strong{display:block;font:700 clamp(24px,2.4vw,32px)/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.strap span{display:block;margin-top:4px;font-size:15px}

/* ---------- 10 · pocket ---------- */
.pocket-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px clamp(24px,4vw,56px);align-items:center}
.pocket-photo img{width:100%;aspect-ratio:1200/1000;object-fit:cover;border-radius:var(--r)}
.pocket-text p{margin-top:14px;max-width:56ch;color:var(--on-ground-2)}
.pocket-text .ticks{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 24px;margin-top:16px;font-size:15.5px}
.pricelist{margin-top:18px;border-top:1px solid var(--rule)}
.pricelist div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9px 0;border-bottom:1px solid var(--rule)}
.pricelist dt{font-size:15.5px}
.pricelist small{display:block;font-size:13.5px;color:var(--on-ground-2)}
.pricelist dd{font:700 24px/1 var(--display);white-space:nowrap}
.knives{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.15fr);gap:clamp(14px,2vw,28px);align-items:end;padding-block:clamp(18px,2vw,26px)}
.knives img{height:56px;width:auto;object-fit:contain;filter:drop-shadow(0 6px 5px rgba(26,13,9,.25))}
.knives span{display:block;margin-top:10px;font-size:14px;line-height:1.35}
.knives-note{font-size:14px;line-height:1.45;color:#3b332d;align-self:center}

/* ---------- 11 · trace ---------- */
.trace-plate{padding-block:clamp(22px,2.8vw,38px);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,2.4fr) minmax(0,3.6fr);gap:22px clamp(20px,3vw,44px);align-items:center}
.trace-lead p{margin-top:14px;max-width:48ch}
.trace-price{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.trace-price b{font:700 30px/1 var(--display)}
.trace-img{width:100%;max-width:250px;justify-self:center;filter:drop-shadow(0 12px 10px rgba(26,13,9,.28))}
.steps{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,36px);padding-top:26px;background:var(--tick-ink) repeat-x left top}
.steps h3{font:700 22px/1.05 var(--display);text-transform:uppercase}
.steps p{font-size:15px;line-height:1.5;margin-top:6px}
.trace-qa{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2.4vw,36px);border-top:1px solid var(--rule-cream);padding-top:16px}
.trace-qa dt{font-weight:600}
.trace-qa dd{font-size:15px;line-height:1.5;margin-top:4px}

/* ---------- 12 · wrist ---------- */
.wrist-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:24px clamp(24px,4vw,56px);align-items:center}
.wrist-text>p{margin-top:12px;color:var(--on-cream-2)}
.bands{margin-top:16px}
.bands th,.bands td{padding:9px 12px 9px 0;border-bottom:1px solid var(--rule-cream);font-size:16px}
.bands thead th{font-size:13.5px;color:var(--on-cream-2);border-bottom:2px solid var(--ink)}
.bands td{font:700 24px/1 var(--display)}
.bands-len{font-size:14px;line-height:1.5}
.bands-len strong{display:block}
.bands-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.bands-row li{background:var(--studio);color:var(--ink);border-radius:var(--r);padding:16px 14px 14px;box-shadow:inset 0 0 0 1px var(--rule-cream)}
.bands-row img{height:150px;width:auto;margin-inline:auto;object-fit:contain}
.bands-row span{display:block;margin-top:10px;font-size:14px;line-height:1.35}
.bands-row small{display:block;color:#3b332d}
.wrist-photo{grid-column:1/-1;width:100%;aspect-ratio:1400/330;object-fit:cover;border-radius:var(--r)}

/* ---------- 13 · warranty ---------- */
.warranty-plate{background:var(--ground) url("img/topo-wide.webp") right center/cover no-repeat;box-shadow:inset 0 0 0 1px var(--rule);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:18px clamp(24px,3vw,48px);align-items:center}
.warranty-num{font:700 clamp(150px,22vw,330px)/.74 var(--display);color:var(--orange);letter-spacing:-.02em}
.warranty-text h2{margin-bottom:16px}
.warranty-text p{max-width:60ch;margin-bottom:10px}
.cover{grid-column:1/-1;background:var(--cream);color:var(--ink);border-radius:var(--r)}
.cover th,.cover td{padding:14px 18px;vertical-align:top;font-size:15px;line-height:1.45;border-bottom:1px solid var(--rule-cream)}
.cover thead th{font-size:13.5px;color:var(--on-cream-2);border-bottom:2px solid var(--ink)}
.cover tbody tr:last-child th,.cover tbody tr:last-child td{border-bottom:0}
.cover tbody th{width:24%;font:700 20px/1.08 var(--display);text-transform:uppercase}
.warranty-notes{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,36px);font-size:15px;line-height:1.5}
.warranty-notes li{border-top:1px solid var(--rule);padding-top:10px}

/* ---------- 14 · who wears ---------- */
.wears-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:clamp(140px,13.4vw,192px) clamp(140px,13.4vw,192px) clamp(210px,21vw,300px);gap:10px}
.wears-head{grid-column:1/3;grid-row:1/3;align-self:center;padding-right:clamp(8px,2vw,28px)}
.wears-head p{margin-top:16px;font-size:16px;color:var(--on-ground-2)}
.w{position:relative;overflow:hidden;border-radius:var(--r)}
.w img{width:100%;height:100%;object-fit:cover}
.w figcaption{position:absolute;left:0;right:0;bottom:0;background:var(--ink);color:var(--on-ground-2);padding:7px 10px;font-size:12.5px;line-height:1.3}
.w figcaption b{display:block;color:var(--cream);font:700 17px/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.w1{grid-column:3/5;grid-row:1/3}
.w6,.w7,.w8{grid-column:span 2}
.w6 img{object-position:50% 20%}.w7 img{object-position:50% 40%}.w8 img{object-position:50% 20%}

/* ---------- 15 · review counts ---------- */
.counts-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,48px);align-items:end;margin-bottom:22px}
.counts-head p{font-size:15px;color:#d6d9cf}
.bars{display:grid;gap:0}
.bars li{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr) 150px;gap:16px;align-items:center;padding:7px 0;border-top:1px solid #56604f}
.bar-name{font-size:15px}
.bar-track{display:block;height:16px}
.bar-track i{display:block;height:100%;width:var(--w);min-width:3px;background:var(--orange);border-radius:2px}
.bars b{font:700 22px/1 var(--display);text-align:right;white-space:nowrap}

/* ---------- 16 · field notes ---------- */
.notes-plate h2{margin-bottom:20px;max-width:30ch;font-size:clamp(34px,4vw,56px)}
.notes-plate h2 span{white-space:nowrap}
.notes-cols{columns:3;column-gap:clamp(20px,3vw,44px)}
.note{break-inside:avoid;padding:14px 0 16px;border-top:2px solid var(--ink)}
.note h3{font:700 20px/1.05 var(--display);text-transform:uppercase;letter-spacing:.01em;margin-bottom:6px}
.note p{font-size:15.5px;line-height:1.5}
.note-l p{font-size:19px;line-height:1.4;font-weight:600}
.note-xl p{font:600 clamp(23px,2vw,27px)/1.1 var(--display);text-transform:uppercase}
.note footer{margin-top:8px;font-size:14px;color:var(--on-cream-2)}

/* ---------- 17 · hq ---------- */
.hq-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:24px clamp(20px,3vw,48px);align-items:start}
.hq-photo{grid-column:1/-1}
.hq-photo img{width:100%;aspect-ratio:1600/430;object-fit:cover;object-position:50% 62%;border-radius:var(--r)}
.hq-text h2{margin-bottom:16px}
.hq-text p{margin-bottom:12px;color:var(--on-ground-2)}
.hq-text .hq-mission{font:600 clamp(21px,1.9vw,26px)/1.12 var(--display);text-transform:uppercase;color:var(--orange)}
.beliefs li{padding:10px 0;border-top:1px solid var(--rule);font-size:15px;line-height:1.5}
.crew{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.crew img{width:100%;aspect-ratio:1/1.12;object-fit:cover;object-position:50% 18%;border-radius:var(--r)}

/* ---------- 18 · service discount ---------- */
.disc-plate{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px clamp(24px,4vw,56px);align-items:center}
.disc-text h2{margin-bottom:16px}
.disc-text p{margin-bottom:12px;max-width:52ch}
.disc-items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start}
.disc-items li{display:grid;grid-template-rows:112px auto}
.disc-items img{max-height:104px;width:auto;max-width:100%;align-self:end;object-fit:contain;filter:drop-shadow(0 8px 6px rgba(26,13,9,.22))}
.disc-items span{display:block;margin-top:10px;border-top:2px solid var(--ink);padding-top:8px;font-size:14px;line-height:1.35}
.disc-items b{display:block;font:700 22px/1.1 var(--display)}

/* ---------- 19 · exchange tag ---------- */
.tag-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:24px clamp(20px,3vw,48px);align-items:center}
.tag-plate{position:relative;clip-path:polygon(34px 0,100% 0,100% 100%,0 100%,0 34px);padding-left:clamp(28px,4vw,60px)}
.tag-plate::before{content:"";position:absolute;left:26px;top:26px;width:16px;height:16px;border-radius:50%;background:var(--olive)}
.tag-plate h2{margin-bottom:14px}
.tag-list li{padding:9px 0;border-top:1px dashed #a89a8b;font-size:16px;font-weight:600}
.tag-plate .fine{margin-top:12px;color:var(--on-cream-2)}
.tag-side h3{font:700 24px/1 var(--display);text-transform:uppercase;margin-bottom:6px}
.tag-side p{font-size:15px;line-height:1.5;color:#dfe2d8;margin-bottom:20px}
.tag-photo{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 70%;border-radius:var(--r)}

/* ---------- 20 · questions ---------- */
.faq h2{margin-bottom:22px;max-width:20ch}
.qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,64px)}
.qa div{padding:14px 0 16px;border-top:1px solid var(--rule)}
.qa dt{font-weight:600;font-size:17px}
.qa dd{margin-top:5px;font-size:15.5px;line-height:1.5;color:var(--on-ground-2);max-width:62ch}

/* ---------- 21 · close ---------- */
main>section.close{padding-top:0}
.close-photo img{width:100%;aspect-ratio:1600/420;object-fit:cover;object-position:50% 30%}
.close-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px clamp(24px,4vw,56px);align-items:end;padding-top:clamp(24px,3vw,40px)}
.close-grid h2{font-size:clamp(56px,9vw,132px);line-height:.84}
.close-grid blockquote p{font-size:19px;line-height:1.45}
.close-grid blockquote footer{margin-top:8px;font-size:14px}
.close-actions{display:flex;flex-wrap:wrap;gap:10px}
.close-logo{justify-self:end;display:block;width:132px;background:var(--cream);border-radius:var(--r);padding:14px 16px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .hero-grid{grid-template-columns:minmax(0,5fr) minmax(0,5fr)}
  .hero-say{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center}
  .hero-actions{margin-top:0}
  .sizes-grid{grid-template-columns:minmax(0,1fr)}
  .sizes-grid .ways,.sizes-notes{grid-column:auto;grid-row:auto}
  .sizer-tool{grid-template-columns:minmax(0,200px) minmax(0,1fr)}
  .sizer-out{grid-column:1/-1}
  .sizer-table{grid-template-columns:repeat(3,minmax(0,1fr))}
  .spec tbody th img{display:block;margin:0 0 8px}
  .spec tbody th span{max-width:none}
  .trace-plate{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .trace-ticks{grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hq-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .crew{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr))}
  .tag-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .tag-photo{grid-column:1/-1;aspect-ratio:16/7}
  .bars li{grid-template-columns:minmax(0,220px) minmax(0,1fr) 130px}
}
@media (max-width:860px){
  body{font-size:16px}
  .hero-grid,.origin-grid,.problems-plate,.problems-head,.snap-plate,.sizer-head,.pocket-grid,.trace-plate,.wrist-grid,.warranty-plate,.counts-head,.disc-plate,.close-grid,.hq-grid,.tag-grid{grid-template-columns:minmax(0,1fr)}
  .hero-ring{max-width:440px;margin-inline:auto}
  .callout{padding-left:34px}
  .callout::before{right:auto;left:8px;top:11px;width:18px}
  .callout::after{right:auto;left:0;top:8px}
  .origin-photo{grid-row:auto}
  .problems-photo{height:180px;min-height:0}
  .shelf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ways{grid-template-columns:minmax(0,1fr)}
  .cotes{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}
  .sizer-tool{grid-template-columns:minmax(0,1fr)}
  .sizer-belt{max-width:220px;margin-inline:auto}
  .sizer-table{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sizer-notes,.warranty-notes,.steps,.trace-qa,.qa{grid-template-columns:minmax(0,1fr)}
  .spec thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .spec,.spec tbody,.spec tr,.spec th,.spec td{display:block;width:auto}
  .spec tbody th{width:auto;border-bottom:0;padding:18px 0 6px;border-top:2px solid var(--ink)}
  .spec tbody th img{width:150px}
  .spec td{border-bottom:0;padding:3px 0;width:auto}
  .spec td:nth-child(2){width:auto}
  .spec td::before{content:attr(data-l) ": ";font-weight:600}
  .spec td:nth-child(2)::before{content:""}
  .spec td.price{text-align:left;padding:6px 0 16px}
  .spec td.price::before{content:""}
  .colorways{grid-template-columns:repeat(2,minmax(0,1fr))}
  .straps-grid{grid-template-columns:minmax(0,1fr)}
  .strap:nth-of-type(n){margin-top:0}
  .strap img{aspect-ratio:16/9}
  .knives{grid-template-columns:repeat(2,minmax(0,1fr))}
  .knives-note{grid-column:1/-1}
  .trace-img{max-width:200px}
  .trace-ticks,.pocket-text .ticks{grid-template-columns:minmax(0,1fr)}
  .wrist-photo{aspect-ratio:16/7}
  .bands-row img{height:104px}
  .bands-row li{padding:12px 8px 10px}
  .bands-row span{font-size:12.5px}
  .warranty-plate{background-image:none}
  .cover,.cover tbody,.cover tr,.cover th,.cover td{display:block;width:auto}
  .cover thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .cover tbody th{width:auto;border-bottom:0;padding-bottom:4px}
  .cover td{border-bottom:0;padding-top:4px;padding-bottom:8px}
  .cover tbody tr{border-bottom:1px solid var(--rule-cream);padding-bottom:6px}
  .wears-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
  .wears-head{grid-column:1/-1;grid-row:auto;padding:0 0 8px}
  .w,.w1,.w6,.w7,.w8{grid-column:auto;grid-row:auto;aspect-ratio:1/1.05}
  .w1{grid-column:1/-1;aspect-ratio:16/11}
  .bars li{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
  .bar-track{grid-column:1/-1;grid-row:2;height:12px}
  .notes-cols{columns:1}
  .tag-plate{padding-top:56px}
  .w.w8{grid-column:1/-1;aspect-ratio:16/11}
  .hq-photo img{aspect-ratio:16/9}
  .wears-grid{grid-template-rows:none}
  .sizer-ticks span:nth-child(4){display:none}
  .origin-photo{height:auto}
  .disc-items{grid-template-columns:repeat(2,minmax(0,1fr))}
  .close-logo{justify-self:start}
  .scale-row li{border-width:2px;margin-bottom:10px;width:calc(9px + var(--d) * 1.9px)}
  .scale-row .common{border-width:3px}
  .scale-row li span{font-size:11px}
  .scale figcaption{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .com-js .callout::before{animation:none}
  .btn,.sizer-letter,.sizer-table li{transition:none}
}

@media (max-width:600px){
  .ledger-row{grid-template-columns:minmax(0,1fr);gap:10px}
  .ledger-cols span:first-child{display:none}
  .ledger-row div:last-child{padding-left:14px;border-left:2px solid var(--ink)}
}