/* Granq Works. An apparel brand with a smart idea. Warm off-white, deep warm neutral, one loud orange.
   AA: ink/bg 15+, muted/bg 6+, orange-ink/bg 5+, ink/orange 4.6. Orange never carries text on off-white; text on orange is ink. */
@font-face{font-family:"Bricolage";src:url(/fonts/bricolage-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Figtree";src:url(/fonts/figtree.woff2) format("woff2");font-weight:400 600;font-display:swap}
:root{
  --bg:#F6F3EC;--card:#FFFDF8;--tint:#EAE5DA;--ink:#1E1915;--orange:#F0501E;--orange-ink:#B4380F;--muted:#60574D;--border:#847A6E;--line:rgba(30,25,21,.16);--cyan:#9FD8E3;
  --gut:16px;--head-h:60px;--r:18px;
  --disp:"Bricolage","Arial Black",Arial,sans-serif;--text:"Figtree",Arial,sans-serif;
  --sc-bg:var(--card);--sc-ink:var(--ink);--sc-muted:var(--muted);--sc-line:var(--line);--sc-accent:var(--orange);--sc-accent-ink:var(--ink);--sc-radius:999px;--sc-font:var(--text);--sc-title-font:var(--disp);--sc-width:480px;
}
@media (min-width:760px){:root{--gut:32px}}
@media (min-width:1200px){:root{--gut:56px;--head-h:68px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head-h) + 16px);scroll-padding-bottom:96px;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.5 var(--text);-webkit-font-smoothing:antialiased;overflow-x:clip}
@media (min-width:1200px){body{font-size:1.125rem}}
img,svg{max-width:100%}img{height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
strong{font-weight:600}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
::selection{background:var(--orange);color:var(--ink)}
h1,h2,h3,p,ol,ul,dl,dd,figure,fieldset,table{margin:0;padding:0}
ol,ul{list-style:none}fieldset{border:0;min-width:0}
h1,h2,.d{font-family:var(--disp);font-weight:800;letter-spacing:-.025em;line-height:.98;text-wrap:balance}
h1{font-size:clamp(2.9rem,7vw,6.5rem)}
h2{font-size:clamp(2.3rem,5.4vw,5.1rem)}
h3{font-size:1.25rem;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.h-m{font-size:clamp(1.9rem,3.2vw,3rem);margin-bottom:clamp(18px,2.4vw,30px)}
.h-s{font-size:clamp(1.5rem,2.4vw,2.2rem);margin-bottom:14px}
.lead{font-size:1.2rem;line-height:1.38}
@media (min-width:1200px){.lead{font-size:1.4rem}}
.small{font-size:.9375rem;line-height:1.45}
.muted{color:var(--muted)}
.lab,.kick{font-weight:600;font-size:.9375rem;letter-spacing:-.003em}
.kick{display:block;color:var(--orange-ink)}
.mw{max-width:19em}.lead.mw{max-width:32em}
.w{max-width:1600px;margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:8px;top:-60px;background:var(--ink);color:var(--bg);padding:12px 16px;z-index:100;border-radius:8px}
.skip:focus{top:8px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
.site-head{position:sticky;top:0;z-index:40;background:var(--bg);height:var(--head-h)}
.site-head .w{display:flex;align-items:center;justify-content:space-between;height:100%;gap:16px}
.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;min-height:44px}
.logo .mark{width:24px;height:24px;flex:none}
.wm{font:800 1.3rem/1 var(--disp);letter-spacing:-.025em;white-space:nowrap}
.mark-hot{fill:var(--orange)}.mark-cold{fill:currentColor}
.nav{display:none}
.nav a{font-weight:500;font-size:1rem;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.nav a:hover::after,.nav a[aria-current=page]::after{transform:scaleX(1)}
.head-r{display:flex;align-items:center;gap:6px}
.cart-btn,.menu-btn{font:500 1rem/1 var(--text);background:none;border:0;color:inherit;min-height:44px;min-width:44px;padding:0 8px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.cart-btn [data-cart-count]{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:99px;background:var(--tint);font-size:.8125rem;font-weight:600;padding:0 6px}
.cart-btn [data-cart-count].has-items{background:var(--orange)}
.mobile-nav{position:absolute;left:0;right:0;top:100%;background:var(--bg);padding:4px var(--gut) 16px;box-shadow:0 12px 24px rgba(30,25,21,.12)}
.mobile-nav[hidden]{display:none}
.mobile-nav a{display:flex;align-items:center;min-height:54px;border-bottom:1px solid var(--line);text-decoration:none;font:800 1.5rem/1 var(--disp);letter-spacing:-.02em}
@media (min-width:980px){.nav:not(.mobile-nav){display:flex;gap:30px}.menu-btn{display:none}.mobile-nav{display:none!important}}
.site-head .btn-head{display:none}
@media (min-width:1100px){.site-head .btn-head{display:inline-flex;margin-left:8px}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:14px 28px;background:var(--orange);color:var(--ink);border:0;border-radius:999px;font:600 1.0625rem/1.15 var(--text);text-decoration:none;cursor:pointer;transition:background .16s,color .16s,transform .16s;text-align:center}
.btn:hover{background:var(--ink);color:var(--bg);transform:translateY(-1px)}
.btn:active{transform:none}
.arrow{display:inline-block;width:22px;height:10px;flex:none;background:currentColor;clip-path:polygon(0 40%,74% 40%,74% 0,100% 50%,74% 100%,74% 60%,0 60%);transition:transform .18s}
.btn:hover .arrow,.link:hover .arrow{transform:translateX(3px)}
.btn-ink{background:var(--ink);color:var(--bg)}
.btn-ink:hover{background:var(--bg);color:var(--ink)}
.btn-sm{min-height:44px;padding:10px 20px;font-size:.9375rem}
.btn-full{width:100%}
.link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--orange);text-underline-offset:.28em}

/* hero */
.hero{background:var(--orange);overflow:hidden}
.hero-in{position:relative;display:grid;padding-block:18px 26px}
.hero-over{font-weight:600;font-size:.9375rem;margin-bottom:10px}
.hero h1{font-size:20.5vw;line-height:.86;letter-spacing:-.04em;position:relative;z-index:1}
.hero-fig{position:relative;z-index:2;width:86%;margin:2vw auto 0}
.hero-fig img{width:100%;filter:drop-shadow(0 22px 26px rgba(70,20,0,.34))}
.hero-fig figcaption{font-size:.75rem;text-align:center;margin-top:6px}
.h-bot{display:grid;gap:12px;margin-top:14px}
.hero-sub{font-size:1.125rem;line-height:1.32;order:3}
.hero-price{font-size:1.125rem;line-height:1.3}
.hero-price b{font:800 1.75rem/1 var(--disp);letter-spacing:-.025em}
.hero-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hero-cta .btn{flex:1 1 auto}
.hero-note{font-size:.9375rem;font-weight:500}
@media (min-width:640px){.hero h1{font-size:18vw}.hero-fig{width:62%}.hero-cta .btn{flex:0 0 auto}}
@media (min-width:1000px){
  .hero-in{min-height:calc(100svh - var(--head-h));max-height:1100px;grid-template-rows:auto 1fr;padding-block:clamp(12px,2.2vh,28px) clamp(24px,4vh,48px)}
  .hero h1{font-size:clamp(7rem,14.2vw,16.5rem)}
  .h-top{grid-row:1}
  .h-bot{grid-row:2;align-self:end;max-width:27em;gap:16px;margin-top:0}
  .hero-sub{order:0;font-size:1.3rem}
  .hero-price{font-size:1.25rem}.hero-price b{font-size:2.1rem}
  .hero-fig{position:absolute;right:calc(var(--gut) - 1vw);bottom:30px;width:min(45vw,calc((100svh - var(--head-h) - 40px) * .74),840px);margin:0}
  .hero-fig figcaption{position:absolute;right:1vw;bottom:-24px;margin:0;white-space:nowrap}
}
.ticker{background:var(--ink);color:var(--bg);overflow:hidden;white-space:nowrap}
.ticker-t{display:inline-flex;animation:tick 70s linear infinite}
.ticker span{font:800 1.15rem/1 var(--disp);letter-spacing:-.015em;padding:15px 0}
.ticker span::after{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--orange);margin:0 24px;vertical-align:.1em}
@keyframes tick{to{transform:translateX(-33.333%)}}

/* sections */
.sec{padding-block:clamp(64px,9vw,136px)}
.tint{background:var(--tint)}
.pic{border-radius:var(--r);overflow:hidden;background:var(--tint);position:relative}
.pic img{width:100%;height:100%;object-fit:cover}
.pic figcaption{position:absolute;left:12px;bottom:12px;background:var(--bg);padding:6px 12px;border-radius:99px;font-weight:600;font-size:.9375rem}
.split{display:grid;gap:32px}
.split-t>*+*{margin-top:1em}
.split-t h2{margin-bottom:clamp(18px,2vw,28px)}
.split-t .link,.split-t .btn{margin-top:1.1em}
@media (min-width:1000px){.split{grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,104px);align-items:center}.split.flip>.pic{order:2}}
.sec-head{display:grid;gap:18px;margin-bottom:clamp(28px,4vw,56px)}
@media (min-width:1000px){.sec-head{grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,104px);align-items:end}}
.joke{font:800 clamp(1.4rem,2.2vw,1.9rem)/1.08 var(--disp);letter-spacing:-.02em;padding-top:.4em}
.trio{display:grid;gap:36px 24px;margin-top:clamp(28px,4vw,56px)}
@media (min-width:800px){.trio{grid-template-columns:repeat(3,1fr)}}
.trio .pic{margin-bottom:16px}
.trio h3{font:800 clamp(1.4rem,2.1vw,1.85rem)/1.06 var(--disp);letter-spacing:-.02em;margin-bottom:8px}
.trio-t article{background:var(--bg);border-radius:var(--r);padding:22px}
.pair{display:grid;gap:16px}
@media (min-width:700px){.pair{grid-template-columns:1fr 1fr}}
.objs{margin-top:clamp(24px,3vw,44px)}
.obj{display:grid;gap:8px 24px;padding-block:20px 22px;border-top:1px solid var(--line)}
.obj h3{font:800 clamp(1.3rem,2.1vw,1.9rem)/1.06 var(--disp);letter-spacing:-.02em;text-wrap:balance}
.obj p{max-width:36em}
@media (min-width:900px){.obj{grid-template-columns:1fr 1fr;padding-block:28px 30px}}
.setups{display:grid;gap:16px;margin-top:clamp(24px,3vw,44px)}
@media (min-width:800px){.setups{grid-template-columns:1fr 1fr}}
.setup{background:var(--card);border-radius:calc(var(--r) + 6px);padding:12px 12px 16px;text-decoration:none;display:flex;flex-direction:column;gap:6px;transition:transform .2s}
.setup:hover{transform:translateY(-3px)}
.setup .pic{aspect-ratio:1/1;margin-bottom:8px}
.setup h3,.setup p{padding-inline:8px}
.setup h3{font:800 1.6rem/1.04 var(--disp);letter-spacing:-.02em}
.setup-b{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding:12px 8px 0}
.setup-b b{font:800 2.2rem/1 var(--disp);letter-spacing:-.03em}
.portrait{border-radius:var(--r);overflow:hidden;background:#EFEBDD}
.portrait img{width:100%}
.founder .portrait{max-width:520px;justify-self:center;width:100%}
.sig{font:800 1.7rem/1 var(--disp);letter-spacing:-.02em}
.page-h{padding-block:clamp(28px,5vw,72px) clamp(24px,3vw,44px)}
.page-h h1{font-size:clamp(3rem,8.4vw,8rem)}
.letter{padding-bottom:clamp(56px,8vw,112px);align-items:start}
.letter .portrait{position:sticky;top:calc(var(--head-h) + 16px)}
.orange{background:var(--orange);color:var(--ink)}
.name-sec{padding-block:clamp(48px,7vw,96px)}
.name-in{display:grid;gap:28px;align-items:center}
.mark-big{width:clamp(110px,16vw,220px);height:auto;color:var(--ink)}
.orange .mark-hot{fill:var(--bg)}
@media (min-width:800px){.name-in{grid-template-columns:1fr auto;gap:64px}.name-in .lead{max-width:30em}}
.two-col{display:grid;gap:56px}
@media (min-width:1000px){.two-col{grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,104px)}}
.checks li{padding-block:12px;border-top:1px solid var(--line)}
.checks:not(.plain) li{padding-left:28px;position:relative}
.checks:not(.plain) li::before{content:"";position:absolute;left:0;top:18px;width:14px;height:14px;border-radius:50%;background:var(--orange)}

/* pocket: the one nerdy bit */
.ink{background:var(--ink);color:var(--bg);--bg-line:rgba(246,243,236,.22)}
.ink .kick{color:var(--orange)}
.xp-head{padding-top:clamp(56px,8vw,112px);display:grid;gap:16px;padding-bottom:clamp(16px,2vw,32px)}
.xp-head h2{max-width:17em;font-size:clamp(2.2rem,4.8vw,4.6rem)}
.xp-svg{width:100%;height:auto;display:block;overflow:visible}
.xp-svg text{fill:currentColor;font-family:var(--text)}
.t-call{font-size:17px;font-weight:600}.t-sub{font-size:15px;opacity:.8}.t-side{font-size:18px;font-weight:600}
.l-lead{fill:none;stroke:currentColor;stroke-width:1;opacity:.55}.f-dot{fill:currentColor}
.p-shell{fill:#E6DFCC}.p-cotton{fill:#FBF8EE}.p-felt{fill:#B9B3A2}.p-felt-side{fill:#8F8A7B}
.p-pack{fill:var(--cyan)}.p-pack-side{fill:#6FB4C2}
.p-edge{fill:none;stroke:rgba(30,25,21,.55);stroke-width:1.2;stroke-linejoin:round;transition:stroke .2s,stroke-width .2s}
.p-edge-dark{fill:none;stroke:rgba(30,25,21,.55);stroke-width:1.2}
.p-tack{stroke:var(--orange);stroke-width:4;fill:none}
.hp-soft{stroke:#1E1915;opacity:.14}.hp-felt{fill:none;stroke:#3a382f;stroke-width:.7;opacity:.5}
.a-heat{fill:none;stroke:var(--orange);stroke-width:2.2}.f-heat{fill:var(--orange)}
.a-cold{fill:none;stroke:var(--cyan);stroke-width:2.2}.f-cold{fill:var(--cyan)}
.xp-grid{display:grid;gap:24px;padding-block:clamp(16px,2vw,28px) clamp(56px,8vw,112px)}
.xp-layer{transform:translateY(calc(var(--y) * 1px))}
.xp-caps li{border-top:1px solid var(--bg-line);padding-block:14px}
.xp-caps h3{font:800 1.5rem/1.05 var(--disp);letter-spacing:-.02em;margin:4px 0 6px}
.xp-prog{display:none}
[data-xp]:not(.xp-live) .xp-intro,.xp-stage:not(.xp-live .xp-stage) .xp-intro{display:none}
.xp-live .xp-intro{display:block}
@media (min-width:1000px){.xp-grid{grid-template-columns:7fr 5fr;align-items:start}}
@media (max-width:759px){.xp-svg .xp-lab{font-size:24px}.xp-svg .t-sub{font-size:21px}.xp-svg .t-side{font-size:24px}}
.xp-live .xp-track{height:calc(8 * 58svh + 100svh)}
.xp-live .xp-stage{position:sticky;top:var(--head-h);height:calc(100svh - var(--head-h));display:grid;grid-template-rows:minmax(0,1fr) 196px;gap:6px;padding-block:8px;overflow:hidden}
.xp-live .xp-figwrap{min-height:0;display:flex;justify-content:center;align-items:center}
.xp-live .xp-svg{height:100%;width:auto;max-width:100%}
.xp-live .xp-layer{transition:opacity .25s}
.xp-live .xp-layer.dim{opacity:.32}
.xp-live .xp-layer.active .p-edge,.xp-live .xp-layer.active .p-edge-dark{stroke:var(--orange);stroke-width:2.6}
.xp-live .xp-call{opacity:.45;transition:opacity .2s}.xp-live .active .xp-call{opacity:1}.xp-live.xp-closed .xp-call{opacity:0}
.xp-live .xp-heatg,.xp-live .xp-coldg{opacity:0;transition:opacity .35s}.xp-live.xp-arrows .xp-heatg,.xp-live.xp-arrows .xp-coldg{opacity:1}
.xp-live .xp-capswrap{position:relative;min-height:0}
.xp-live .xp-caps li{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(8px);transition:opacity .22s,transform .22s;pointer-events:none;border-top:0;padding-top:12px}
.xp-live .xp-caps li.on{opacity:1;transform:none}
.xp-live .xp-prog{display:flex;gap:4px;position:absolute;left:0;top:0;z-index:2}
.xp-prog i{display:block;width:18px;height:3px;border-radius:2px;background:var(--bg-line)}.xp-prog i.on{background:var(--orange)}
@media (min-width:1000px){
  .xp-live .xp-stage{grid-template-rows:none;grid-template-columns:7fr 5fr;gap:32px;align-items:center}
  .xp-live .xp-capswrap{height:320px}
  .xp-live .xp-caps h3{font-size:clamp(1.9rem,3vw,3rem);margin-bottom:14px}
  .xp-live .xp-caps p{font-size:1.25rem;line-height:1.35}
}

/* cold test */
.steps{display:grid;gap:16px;counter-reset:s;padding-bottom:clamp(40px,6vw,88px)}
@media (min-width:800px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps li{counter-increment:s;background:var(--tint);border-radius:var(--r);padding:20px}
.steps li::before{content:counter(s);display:block;font:800 3rem/1 var(--disp);color:var(--orange-ink);margin-bottom:18px}
.steps h3{font:800 1.45rem/1.06 var(--disp);letter-spacing:-.02em;margin-bottom:8px}
.chart-sec{padding-block:clamp(56px,8vw,112px)}
.chart-wrap{background:rgba(246,243,236,.06);border-radius:var(--r);padding:16px;position:relative;margin-top:clamp(24px,3vw,44px)}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart text{fill:currentColor;font-family:var(--text);font-weight:500;font-size:13px}
.chart .sub{opacity:.78;font-size:12.5px}
.chart .grid-l{stroke:currentColor;stroke-width:1;opacity:.1}
.chart .base{stroke:currentColor;stroke-width:1;opacity:.5}
.chart .track-l{stroke:currentColor;stroke-width:1;stroke-dasharray:3 5;opacity:.38}
.chart .data{fill:none;stroke:var(--cyan);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart .pt{fill:var(--cyan);stroke:var(--ink);stroke-width:2}
.chart .hit{fill:transparent;cursor:pointer}
.chart-tip{position:absolute;pointer-events:none;background:var(--bg);color:var(--ink);font-size:.8125rem;line-height:1.35;padding:7px 10px;border-radius:8px;transform:translate(-50%,-110%);white-space:nowrap;z-index:3}
.chart-tip[hidden]{display:none}
.ink .tbl{margin-top:28px}.ink .tbl th,.ink .tbl td{border-color:var(--bg-line)}
.ink .muted{color:#BDB5A8}.ink .tbl small{color:#BDB5A8}
.chart-signup{margin-top:36px;max-width:640px}
.ink .signup input[type=email]{border-color:var(--bg);color:var(--bg)}.ink .signup input[type=email]::placeholder{color:#BDB5A8}
.ink .btn-ink{background:var(--orange);color:var(--ink)}.ink .btn-ink:hover{background:var(--bg)}

/* tables */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:1rem;line-height:1.4}
.tbl th,.tbl td{text-align:left;padding:12px 14px 12px 0;border-top:1px solid var(--line);vertical-align:top}
.tbl thead th{font-weight:600;font-size:.9375rem;border-top:0}
.tbl tbody th{font-weight:600;white-space:nowrap;padding-right:22px}
.tbl small{display:block;font-weight:400;font-size:.875rem;color:var(--muted);white-space:normal}
.tbl-stack tbody th{white-space:normal}
.size-tbl th[scope=col],.size-tbl td{text-align:right}.size-tbl thead th:first-child,.size-tbl tbody th{text-align:left}
.size-tbl tbody th{white-space:normal}
.size-tbl td{font-weight:500;padding-right:0;padding-left:8px}
@media (max-width:759px){
  .tbl-stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl-stack tr{display:block;padding-block:12px;border-top:1px solid var(--bg-line)}
  .tbl-stack th,.tbl-stack td{display:block;border:0;padding:2px 0}
  .tbl-stack td[data-label]::before{content:attr(data-label) ": ";opacity:.75}
}

/* cta + forms */
.cta-band{padding-block:clamp(56px,8vw,120px)}
.cta-band h2{font-size:clamp(3rem,9vw,9rem);line-height:.9;letter-spacing:-.035em}
.cta-grid{display:grid;gap:32px;margin-top:clamp(28px,4vw,56px)}
@media (min-width:1000px){.cta-grid{grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,104px)}}
.signup{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;max-width:560px}
.signup label{flex:1 0 100%}
.signup input[type=email]{flex:1 1 220px;min-height:54px;border:1.5px solid var(--ink);border-radius:999px;background:transparent;padding:12px 20px;font:400 1rem var(--text);color:inherit}
.signup input[type=email]::placeholder{color:var(--muted);opacity:1}
.orange .signup input[type=email]::placeholder{color:var(--ink)}
.signup .btn{min-height:54px}
.signup-fine{font-size:.875rem;margin-top:10px;max-width:40em}
[data-signup-thanks]{font-weight:600}
.orange .sc-error,.ink .sc-error{color:inherit;font-weight:600}

/* footer */
.foot{padding-block:clamp(36px,5vw,64px) 28px;background:var(--tint);font-size:.9375rem}
.foot-big{font:800 clamp(3rem,11vw,11.5rem)/.9 var(--disp);letter-spacing:-.04em;margin-bottom:clamp(28px,4vw,56px)}
.foot-grid{display:grid;gap:32px}
@media (min-width:900px){.foot-grid{grid-template-columns:3fr 4fr 5fr;gap:40px}}
.foot .ft{font:600 .9375rem/1.3 var(--text);letter-spacing:0;margin-bottom:8px}
.foot ul a{display:inline-flex;align-items:center;min-height:32px;text-decoration:none}
.foot ul a:hover{text-decoration:underline}
@media (max-width:899px){.foot ul a{min-height:44px}}
.foot-links{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.fibers{font-size:.9375rem;line-height:1.45}

/* product page */
.pdp{display:grid;gap:20px 24px;padding-block:8px 56px}
.gal-main{border-radius:var(--r);overflow:hidden;background:var(--tint)}
.gal-frames{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gal-frames::-webkit-scrollbar{display:none}
.gal-frame{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:4/5;min-width:0}
.gal-frame img{width:100%;height:100%;object-fit:cover}
.gal-thumbs{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:8px}
.gal-thumbs button{border:0;padding:0;background:var(--tint);border-radius:10px;overflow:hidden;cursor:pointer;aspect-ratio:1/1;opacity:.72;transition:opacity .15s;min-height:44px}
.gal-thumbs button:hover{opacity:1}
.gal-thumbs button[aria-current=true]{opacity:1;outline:2px solid var(--ink);outline-offset:-2px}
.gal-thumbs img{width:100%;height:100%;object-fit:cover}
.gal-legal{margin-top:8px;font-size:.8125rem;color:var(--muted)}
@media (min-width:1000px){
  .pdp{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,4vw,72px);padding-block:12px 96px;align-items:start}
  .gal{position:sticky;top:calc(var(--head-h) + 8px);max-width:calc((100svh - var(--head-h) - 130px) * .8);width:100%;justify-self:end}
}
.buy h1{font-size:clamp(2.9rem,4.9vw,4.9rem);line-height:.94;letter-spacing:-.035em;margin-top:2px}
.buy .one{margin-top:12px;font-size:1.125rem;line-height:1.36}
.price-row{display:flex;align-items:baseline;gap:12px;margin-top:14px;flex-wrap:wrap}
.price-row .amt{font:800 2.6rem/1 var(--disp);letter-spacing:-.03em}
.fs{margin-top:20px}
.fs-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;min-height:24px}
.fs legend{font-weight:600;padding:0;float:left}
.fs-top + *{clear:both}
.fs-top a{font-size:.9375rem;min-height:44px;display:inline-flex;align-items:center;margin-block:-10px}
.setup-opts{display:grid;gap:8px}
.opt{position:relative;display:block}
.opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.opt .box{display:grid;grid-template-columns:20px 1fr auto;gap:0 12px;align-items:start;padding:13px 16px;border:1.5px solid var(--border);border-radius:14px;transition:background .12s,border-color .12s}
.opt .tick{width:18px;height:18px;border:1.5px solid var(--ink);border-radius:50%;margin-top:3px;grid-row:1/3;position:relative}
.opt input:checked+.box{background:var(--card);border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.opt input:checked+.box .tick{background:var(--orange)}
.opt input:checked+.box .tick::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--ink)}
.opt input:focus-visible+.box{outline:2px solid var(--ink);outline-offset:2px}
.opt:hover .box{background:var(--card)}
.opt b{font-weight:600;line-height:1.3}
.opt .p{font:800 1.2rem/1.2 var(--disp);letter-spacing:-.015em}
.opt small{grid-column:2/4;font-size:.9375rem;line-height:1.3;color:var(--muted)}
.opt.check .tick{border-radius:5px}
.opt.check input:checked+.box .tick::after{border-radius:2px}
.sizes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sz{position:relative}
.sz input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.sz>span{display:grid;place-items:center;min-height:52px;border:1.5px solid var(--border);border-radius:14px;font-weight:600;transition:background .12s,color .12s}
.sz:hover>span{background:var(--card)}
.sz input:checked+span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sz input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.size-note{font-size:.9375rem;color:var(--muted);margin-top:8px}
.add{margin-top:20px}
.buy [data-buy-error]{font-weight:600;color:var(--orange-ink);margin-top:8px;font-size:.9375rem}
.buy [data-buy-error][hidden]{display:none}
.assure{margin-top:14px;font-size:.9375rem;line-height:1.4}
.assure li{padding-block:8px;border-top:1px solid var(--line)}
.safety{margin-top:10px;padding:13px 16px;border-radius:14px;background:var(--tint);font-size:.9375rem;line-height:1.4}
.not-ready{margin-top:6px}
.not-ready summary{cursor:pointer;font-weight:600;font-size:.9375rem;min-height:44px;display:flex;align-items:center}
.sticky-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--card);box-shadow:0 -6px 20px rgba(30,25,21,.12);padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:14px;transform:translateY(110%);transition:transform .22s ease;visibility:hidden}
.sticky-bar.show{transform:none;visibility:visible}
.sticky-bar .sum{font-size:.875rem;line-height:1.25}
.sticky-bar .sum b{display:block;font:800 1.35rem/1.1 var(--disp);letter-spacing:-.02em}
@media (min-width:1000px){.sticky-bar{display:none}}
.spec-grid{display:grid;gap:40px 24px}
@media (min-width:1000px){.spec-grid{grid-template-columns:7fr 5fr;gap:clamp(40px,6vw,104px)}}
.spec-grid h3{margin-bottom:6px}

/* questions */
.faq-layout{display:grid;gap:32px 24px;padding-bottom:clamp(56px,8vw,112px)}
@media (min-width:1000px){.faq-layout{grid-template-columns:1fr 3fr}.faq-side{position:sticky;top:calc(var(--head-h) + 24px);align-self:start}}
.faq-side a{display:flex;min-height:44px;align-items:center;font-weight:600;text-decoration:none}
.faq-side a:hover{text-decoration:underline}
.faq-group{margin-bottom:clamp(36px,5vw,64px);scroll-margin-top:calc(var(--head-h) + 24px)}
.qa{border-top:1px solid var(--line)}
.qa:last-of-type{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 18px;gap:16px;align-items:center;padding-block:16px;font-weight:600;font-size:1.0625rem;line-height:1.3;min-height:56px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;justify-self:end;transition:transform .2s}
.qa[open] summary::after{transform:rotate(45deg)}
.qa p{padding-bottom:18px;max-width:42em}
.qa p+p{margin-top:-6px}

/* size guide */
.dialog{border:0;padding:0;background:var(--bg);color:var(--ink);width:min(760px,calc(100vw - 16px));max-height:calc(100dvh - 16px);border-radius:var(--r)}
.dialog::backdrop{background:rgba(30,25,21,.5)}
.dialog-head{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:8px 8px 8px 20px;background:var(--bg);z-index:2}
.dialog-head h2{font-size:1.6rem}
.dialog-x{background:none;border:0;min-width:44px;min-height:44px;font-size:28px;line-height:1;cursor:pointer;color:inherit}
.dialog-body{padding:4px 20px 20px}
.sec-t{padding-bottom:clamp(56px,8vw,112px)}
.split-sg{display:grid;gap:40px}
@media (min-width:1000px){.split-sg{grid-template-columns:5fr 7fr;gap:clamp(40px,6vw,104px)}}
.measure{width:100%;height:auto}
.m-body{fill:var(--tint)}.m-tape{fill:none;stroke:var(--orange);stroke-width:2.5;stroke-dasharray:7 5}
.m-t{font:600 17px var(--text);fill:var(--ink)}

/* policies */
.policy{max-width:760px;padding-bottom:clamp(40px,6vw,88px)}
.policy h2{font-size:1.7rem;letter-spacing:-.02em;margin-top:32px;margin-bottom:8px}
.policy p+p{margin-top:.8em}
.policy .plain{font-size:1.2rem;line-height:1.38;margin-top:20px}

/* the bag */
.sc-drawer{--bg-line:var(--line);border-radius:var(--r) 0 0 var(--r)}
.sc-head{padding:16px 20px;border-bottom:1px solid var(--line)}
.sc-title{font:800 1.6rem/1 var(--disp);letter-spacing:-.02em}
.sc-body{padding:4px 20px 20px}
.sc-thumb{object-fit:cover;background:var(--tint);border-radius:10px}
.sc-line{padding:14px 0;border-bottom:1px solid var(--line)}
.sc-line-price{font-weight:600}
.sc-qty button{min-width:44px;height:44px;border-color:var(--border);border-radius:50%}
.sc-qty .sc-remove{height:44px;border-radius:0}
.sc-qty span{min-width:18px;text-align:center;font-weight:600}
.sc-addons-title{font-weight:600}
.sc-addon{border-top:1px solid var(--line)}
.sc-addon-add{min-height:44px;min-width:64px;border-radius:99px;font-weight:600}
.sc-addon-add:hover{background:var(--ink);color:var(--bg)}
.sc-foot{padding:14px 20px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.sc-totals div:first-child{color:var(--ink);font-weight:600;font-size:1.0625rem}
.sc-totals .sc-due{font-size:.9375rem;font-weight:400;color:var(--muted);margin-top:0}
.sc-checkout{font-weight:600;font-size:1.0625rem}
.sc-checkout:hover:not(:disabled){background:var(--ink);color:var(--bg)}
.sc-note{color:var(--ink);font-size:.875rem;line-height:1.4;margin-top:10px}
.sc-hold-title{font:800 1.6rem/1.04 var(--disp);letter-spacing:-.02em}
.sc-hold-body{color:var(--ink)}
.sc-hold-form input{border:1.5px solid var(--border);border-radius:999px;padding-inline:20px}
.sc-hold-thanks{font-size:1.0625rem;line-height:1.4}
.sc-error{color:var(--orange-ink);font-weight:600}
.addon-hint{font-size:.875rem;margin:8px 0 0}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ticker-t{animation:none}*,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}}
@media print{.site-head,.sticky-bar,.foot,.ticker{display:none}}