@import url("styles.css");

/* ─────────────────────────────────────────────────────────────
   FNQ Rum Co. — public site layer
   Chrome, layout primitives and the scroll-motion system.
   Consumes tokens/*.css via styles.css. No new colours.
   ───────────────────────────────────────────────────────────── */

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
img,svg,video{max-width:100%}
:where(h1,h2,h3){text-wrap:balance}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;top:-60px;left:var(--page-margin);z-index:200;background:var(--copper-500);color:var(--fnq-black);padding:12px 18px;border:0;font-family:var(--font-sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;transition:top var(--duration-fast) var(--ease-standard)}
.skip:focus{top:14px}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--copper-400);outline-offset:3px}
[id]{scroll-margin-top:104px}

/* ── Page shell ─────────────────────────────────────────────── */
.wrap{max-width:var(--content-max);margin:0 auto;padding-inline:var(--page-margin)}
.sec{padding-block:var(--section-y)}
.sec-tight{padding-block:var(--section-y-tight)}
.hair{border-top:1px solid var(--line-hairline)}
.lede{font-size:var(--size-lead);line-height:var(--lh-lead);color:var(--text-body);max-width:46ch}
.body{font-size:16px;line-height:1.78;color:var(--text-body);max-width:60ch}
.body-sm{font-size:14.5px;line-height:1.75;color:var(--text-body);max-width:62ch}
.fine{font-size:12px;line-height:1.7;color:var(--slate-500);max-width:76ch}
.d-xl{font-family:var(--font-display);font-weight:400;font-size:clamp(52px,7vw,124px);line-height:.88;letter-spacing:-.018em;color:var(--text-primary);margin:0}
.d-lg{font-family:var(--font-display);font-weight:400;font-size:var(--size-display-lg);line-height:.92;letter-spacing:-.015em;color:var(--text-primary);margin:0}
.d-md{font-family:var(--font-display);font-weight:400;font-size:var(--size-display-md);line-height:.96;letter-spacing:-.01em;color:var(--text-primary);margin:0}
.d-sm{font-family:var(--font-display);font-weight:400;font-size:var(--size-display-sm);line-height:1.04;letter-spacing:-.01em;color:var(--text-primary);margin:0}
.num{font-family:var(--font-display);font-weight:400;font-variant-numeric:tabular-nums;line-height:.86;letter-spacing:-.02em;color:var(--copper-300)}
.eb{font-family:var(--font-sans);font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--text-eyebrow);display:block}
.rm{font-family:var(--font-roman);letter-spacing:.18em;text-transform:uppercase}
.dt{font-family:var(--font-sans);font-variant-numeric:tabular-nums;letter-spacing:.12em;text-transform:uppercase;font-size:13px;font-weight:500;color:var(--text-primary)}
.dl{font-family:var(--font-sans);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted)}

/* Rule with an inline label — the system's signature divider. */
.rule{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:var(--space-5);margin-block:var(--space-6)}
.rule::after{content:"";height:1px;background:var(--line-hairline)}

/* ── Buttons ────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--control-h);padding:0 28px;border:1px solid var(--copper-500);background:var(--copper-500);color:var(--fnq-black);font-family:var(--font-sans);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;transition:color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)}
a.btn{border-bottom:1px solid var(--copper-500)}
.btn::before{content:"";position:absolute;inset:0;background:var(--bone-50);transform:translateY(101%);transition:transform var(--duration-base) var(--ease-out);z-index:-1}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:var(--fnq-black);border-color:var(--bone-50)}
.btn-ghost{background:transparent;color:var(--text-primary);border-color:var(--line-strong)}
a.btn-ghost{border-bottom-color:var(--line-strong)}
.btn-ghost:hover{color:var(--fnq-black);border-color:var(--bone-50)}
.btn-lg{min-height:var(--control-h-lg);padding:0 38px}
.btn-sm{min-height:var(--control-h-sm);padding:0 18px;font-size:11px}
.lnk{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-sans);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-link);border-bottom:1px solid var(--line-copper);padding-bottom:4px}
.lnk .ar{transition:transform var(--duration-base) var(--ease-out)}
.lnk:hover .ar{transform:translateX(6px)}

/* ── Scroll progress rail ───────────────────────────────────── */
.prog{position:fixed;inset:0 0 auto;height:2px;background:var(--copper-400);transform-origin:0 50%;transform:scaleX(0);z-index:120}
@supports (animation-timeline:scroll()){.prog{animation:progx linear both;animation-timeline:scroll(root block)}}
@keyframes progx{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── Header ─────────────────────────────────────────────────── */
.hdr{position:fixed;inset:0 0 auto;z-index:110;isolation:isolate;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-5);padding:18px var(--page-margin);view-transition-name:hdr;transition:background var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard),padding var(--duration-base) var(--ease-standard);border-bottom:1px solid transparent}
.hdr::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,9,11,.66) 0%,rgba(7,9,11,.28) 55%,rgba(7,9,11,0) 100%);z-index:-1;pointer-events:none;transition:opacity var(--duration-base) var(--ease-standard)}
.hdr.stuck::before{opacity:0}
.hdr.stuck{background:rgba(7,9,11,.82);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);border-bottom-color:var(--line-hairline);padding-block:12px}
.hdr.up{transform:translateY(-100%);transition:transform var(--duration-base) var(--ease-standard)}
.hdr-mark{display:inline-flex;align-items:center;gap:12px;border:0;color:var(--text-primary)}
.hdr-mark img{display:block;width:32px;height:32px;transition:transform var(--duration-slow) var(--ease-out)}
.hdr-mark:hover img{transform:rotate(24deg)}
.hdr-mark span{font-family:var(--font-roman);font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.hdr-nav{display:flex;justify-content:center;gap:var(--space-6)}
.hdr-nav a{position:relative;border:0;font-family:var(--font-sans);font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--text-body);padding-block:6px}
.hdr-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--copper-400);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--duration-base) var(--ease-out)}
.hdr-nav a:hover,.hdr-nav a[aria-current]{color:var(--text-primary)}
.hdr-nav a:hover::after,.hdr-nav a[aria-current]::after{transform:scaleX(1)}
.hdr-end{display:flex;justify-content:flex-end;align-items:center;gap:var(--space-4)}
.hdr-cart{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding-inline:4px;border:0;font-family:var(--font-sans);font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--text-body);transition:color var(--duration-fast) var(--ease-standard)}
.hdr-cart:hover{color:var(--text-primary)}
.hdr-cart span:not(:empty){color:var(--copper-300)}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:1px solid var(--line-hairline);color:var(--text-primary);cursor:pointer}
.burger span{display:block;width:18px;height:1px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1px;background:currentColor;transition:transform var(--duration-fast) var(--ease-standard)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.sheet{position:fixed;inset:0;z-index:115;background:var(--fnq-black);display:grid;align-content:center;gap:var(--space-4);padding:var(--space-9) var(--page-margin);transform:translateY(-100%);transition:transform var(--duration-slow) var(--ease-out);visibility:hidden}
.sheet[data-open]{transform:none;visibility:visible}
.sheet a{border:0;font-family:var(--font-display);font-size:clamp(34px,9vw,64px);line-height:1.06;color:var(--text-primary)}
.sheet a:hover{color:var(--copper-300)}

/* ── Hero ───────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:grid;align-items:center;overflow:hidden;padding:calc(var(--space-10) + 40px) var(--page-margin) var(--space-9)}
.hero-bg{position:absolute;inset:-8% 0;background-size:cover;background-position:center;will-change:transform}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,9,11,.86) 0%,rgba(7,9,11,.62) 14%,rgba(7,9,11,.38) 30%,rgba(7,9,11,.14) 44%,rgba(7,9,11,0) 56%),var(--scrim-bottom),var(--vignette)}
.hero-glow{position:absolute;inset:0;background:radial-gradient(70% 55% at 68% 42%,rgba(232,100,2,.16) 0%,rgba(7,9,11,0) 70%);pointer-events:none}
.hero-in{position:relative;display:grid;grid-template-columns:1.06fr .94fr;align-items:center;gap:var(--space-8);width:100%;max-width:var(--content-max);margin:0 auto}
.hero-bottle{justify-self:center;mix-blend-mode:screen;will-change:transform}
.hero .eb,.hero nav[aria-label="Breadcrumb"]{text-shadow:0 1px 14px rgba(7,9,11,.95),0 0 3px rgba(7,9,11,.85)}
.scrollcue{position:absolute;left:var(--page-margin);bottom:30px;display:flex;align-items:center;gap:12px;font-family:var(--font-sans);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--text-muted)}
.scrollcue i{display:block;width:1px;height:38px;background:linear-gradient(var(--copper-400),transparent);animation:cue 2.4s var(--ease-standard) infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:0 0;opacity:0}40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);transform-origin:0 100%;opacity:0}}

/* ── Reveal system ──────────────────────────────────────────── */
/* Elements are VISIBLE by default. The reveal is additive: if the script
   runs it animates them in from transparent; if it does not, they are simply
   there. Content visibility never depends on JavaScript. */
[data-rise]{opacity:1}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
[data-rise].pending{opacity:0}
[data-rise].in{animation:rise var(--duration-reveal) var(--ease-out) backwards;animation-delay:var(--d,0ms)}
/* Masked line-by-line display reveal */
.lines{display:grid}
.lines>span{display:block;overflow:hidden;padding-bottom:.06em}
.lines>span>i{display:block;font-style:normal;transform:translateY(110%);animation:lineup 1s var(--ease-out) forwards;animation-delay:calc(var(--i,0)*90ms + 120ms);animation-play-state:paused}
.lines.go>span>i{animation-play-state:running}
@keyframes lineup{to{transform:none}}
/* Wipe-in for full-bleed media */
[data-wipe]{clip-path:none}
@keyframes wipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
[data-wipe].pending{clip-path:inset(0 0 100% 0)}
[data-wipe].in{animation:wipe var(--duration-reveal) var(--ease-out) backwards}
/* Parallax on scroll — CSS driven where supported, JS fallback otherwise */
@supports (animation-timeline:scroll()){
  .hero-bg{animation:drift linear both;animation-timeline:scroll(root block);animation-range:0 90vh}
  .hero-bottle{animation:sink linear both;animation-timeline:scroll(root block);animation-range:0 100vh}
}
@keyframes drift{to{transform:translateY(var(--parallax-depth))}}
@keyframes sink{to{transform:translateY(-6%) scale(.94);opacity:.55}}

/* ── Sticky scrollytelling (Process) ────────────────────────── */
.scrolly{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:start}
.scrolly-media{position:sticky;top:0;height:100svh;overflow:hidden}
.scrolly-media figure{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.06);transition:opacity var(--duration-slow) var(--ease-standard),transform 1.6s var(--ease-out)}
.scrolly-media figure.on{opacity:1;transform:none}
.scrolly-media img{width:100%;height:100%;object-fit:cover;display:block}
.scrolly-media figcaption{position:absolute;left:20px;bottom:18px;font-family:var(--font-sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mist-300);background:rgba(7,9,11,.6);padding:7px 12px}
.scrolly-steps>article{min-height:92svh;display:grid;align-content:center;padding-block:var(--space-8)}
.step-n{font-family:var(--font-display);font-size:clamp(56px,7vw,104px);line-height:.8;color:var(--copper-600);display:block;margin-bottom:var(--space-4)}

/* ── Horizontal release gallery (native scroll + snap) ───────── */
.gal{display:grid;gap:var(--space-7)}
.gal-head{display:grid;grid-template-columns:1fr auto;gap:var(--space-6);align-items:end}
.gal-nav{display:flex;gap:10px}
.gal-nav button{width:46px;height:46px;display:grid;place-items:center;background:none;border:1px solid var(--line-hairline);color:var(--text-primary);cursor:pointer;font-size:15px;transition:border-color var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}
.gal-nav button:hover{border-color:var(--copper-500);background:rgba(168,119,88,.12)}
.galscroll{display:flex;gap:var(--space-5);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:2px}
.galscroll::-webkit-scrollbar{display:none}
.galscroll>*{flex:0 0 clamp(238px,23vw,306px);scroll-snap-align:start}
.galscroll .pcard-media{aspect-ratio:1/1}
@supports (animation-timeline:view()){
  .galscroll>*{animation:galin linear both;animation-timeline:view(inline);animation-range:entry 0% entry 92%}
}
@keyframes galin{from{opacity:.2;transform:scale(.93)}to{opacity:1;transform:none}}

/* ── Product card ───────────────────────────────────────────── */
.pcard{display:grid;border:1px solid var(--line-hairline);background:var(--surface-card);text-decoration:none;border-bottom:1px solid var(--line-hairline);overflow:hidden;transition:border-color var(--duration-base) var(--ease-standard)}
.pcard:hover{border-color:var(--line-strong)}
.pcard-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:radial-gradient(60% 50% at 50% 55%,rgba(168,119,88,.14),transparent 70%)}
.pcard-body .tag{justify-self:start;width:max-content;max-width:100%}
.pcard-media img{position:absolute;inset:4%;width:92%;height:92%;object-fit:contain;display:block;mix-blend-mode:screen;transition:transform var(--duration-slow) var(--ease-out)}
.pcard:hover .pcard-body .tag{justify-self:start;width:max-content;max-width:100%}
.pcard-media img{transform:translateY(-10px) scale(1.03)}
.pcard-body{padding:var(--space-5);display:grid;gap:10px;border-top:1px solid var(--line-hairline)}
.pcard h3{font-family:var(--font-display);font-size:26px;line-height:1;color:var(--text-primary);margin:0}
.pcard .meta{font-family:var(--font-sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.pcard .price{font-family:var(--font-sans);font-size:13px;letter-spacing:.1em;color:var(--text-primary)}
.tag{display:inline-block;font-family:var(--font-sans);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;padding:5px 10px;border:1px solid var(--line-copper);color:var(--copper-300)}
.tag-gold{border-color:rgba(201,162,39,.5);color:var(--gold-400)}
.tag-out{border-color:var(--line-hairline);color:var(--slate-400)}

/* ── Spec tables & data grids ───────────────────────────────── */
.spec{border-top:1px solid var(--line-hairline)}
.spec div{display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:var(--space-5);padding:14px 0;border-bottom:1px solid var(--line-hairline);align-items:baseline}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;background:var(--surface-page);border:1px solid var(--line-hairline)}
.stats>div{background:var(--surface-page);padding:var(--space-5) var(--space-5) var(--space-6);box-shadow:inset 1px 0 0 var(--line-hairline),inset 0 1px 0 var(--line-hairline)}
.stats .num{font-size:clamp(38px,4.4vw,60px);display:block;margin-bottom:14px}
.tblwrap{overflow-x:auto;overscroll-behavior-x:contain}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
table.tbl caption{text-align:left;font-family:var(--font-sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);padding-bottom:var(--space-4)}
table.tbl th,table.tbl td{text-align:left;padding:15px 18px 15px 0;border-bottom:1px solid var(--line-hairline);vertical-align:top;line-height:1.6}
table.tbl thead th{font-family:var(--font-sans);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);border-bottom-color:var(--line-strong)}
table.tbl tbody th{font-family:var(--font-sans);font-size:12.5px;font-weight:500;letter-spacing:.06em;color:var(--text-primary);width:26%}
table.tbl td{color:var(--text-body)}
td.yes{color:var(--copper-300)}
.mark{color:var(--copper-300)}

/* ── Editorial blocks ───────────────────────────────────────── */
.quote{display:grid;gap:var(--space-5);max-width:34ch}
.quote blockquote{font-family:var(--font-display);font-size:clamp(28px,3.4vw,52px);line-height:1.06;letter-spacing:-.01em;color:var(--text-primary);margin:0}
.quote cite{font-style:normal;font-family:var(--font-sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted)}
.two,.two-t{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:center}
.two-t{align-items:start}
.split{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);gap:var(--space-8)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;background:var(--surface-page);border:1px solid var(--line-hairline)}
.cards>*{background:var(--surface-page);padding:var(--space-6);box-shadow:inset 1px 0 0 var(--line-hairline),inset 0 1px 0 var(--line-hairline)}
figure.bleed{margin:0;position:relative;overflow:hidden}
figure.bleed img{width:100%;display:block}
.bottleplate{margin:0;display:grid;place-items:center;background:radial-gradient(58% 52% at 50% 52%,rgba(168,119,88,.16),transparent 72%)}
.bottleplate img{width:100%;max-width:460px;height:auto;aspect-ratio:1/1;object-fit:contain;mix-blend-mode:screen;display:block}
.placegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-5)}
.placegrid figure.bleed img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block}
figure.bleed figcaption{font-family:var(--font-sans);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);padding-top:14px}

/* Marquee — the Disclosure Standard clauses */
.marq{overflow:hidden;border-block:1px solid var(--line-hairline);padding-block:20px;display:flex;gap:var(--space-7);white-space:nowrap;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq>div{display:flex;gap:var(--space-7);animation:slide 46s linear infinite;flex:0 0 auto}
.marq span{font-family:var(--font-roman);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate-400)}
.marq span::before{content:"·";color:var(--copper-500);margin-right:var(--space-7)}
@keyframes slide{to{transform:translateX(-100%)}}
.marq:hover>div{animation-play-state:paused}

/* ── Accordion (FAQ) ────────────────────────────────────────── */
details.faq{border-bottom:1px solid var(--line-hairline)}
details.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:var(--space-5);align-items:center;padding:22px 0;font-family:var(--font-display);font-size:clamp(19px,2vw,26px);line-height:1.2;color:var(--text-primary);transition:color var(--duration-fast) var(--ease-standard)}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary:hover{color:var(--copper-300)}
details.faq summary i{width:14px;height:14px;position:relative;flex:0 0 auto}
details.faq summary i::before,details.faq summary i::after{content:"";position:absolute;background:var(--copper-400);transition:transform var(--duration-base) var(--ease-out)}
details.faq summary i::before{inset:6px 0 auto;height:1px}
details.faq summary i::after{inset:0 6px auto;width:1px;height:14px}
details.faq[open] summary i::after{transform:scaleY(0)}
details.faq .ans{padding:0 0 26px;max-width:64ch;font-size:15px;line-height:1.78;color:var(--text-body)}
details.faq .ans p{margin:0 0 12px}
details.faq .ans p:last-child{margin:0}

/* ── Footer ─────────────────────────────────────────────────── */
.ftr{border-top:1px solid var(--line-hairline);padding:var(--space-9) var(--page-margin) var(--space-6);view-transition-name:ftr}
.ftr-in{max-width:var(--content-max);margin:0 auto;display:grid;grid-template-columns:1.1fr 2fr;gap:var(--space-8)}
.ftr-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.ftr-cols h2{font-family:var(--font-sans);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);margin:0 0 var(--space-4)}
.ftr-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ftr-cols a{border:0;font-size:13.5px;color:var(--text-body)}
.ftr-cols a:hover{color:var(--copper-300)}
.ftr-legal{max-width:var(--content-max);margin:var(--space-8) auto 0;padding-top:var(--space-5);border-top:1px solid var(--line-hairline);display:flex;flex-wrap:wrap;gap:var(--space-5) var(--space-7);align-items:baseline;justify-content:space-between}
.ftr-legal p{margin:0;font-size:11.5px;line-height:1.7;color:var(--slate-500);max-width:64ch}
.ftr-legal nav{display:flex;flex-wrap:wrap;gap:var(--space-5)}
.ftr-legal a{border:0;font-size:11.5px;color:var(--slate-400)}
.newsletter{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--space-5)}
.newsletter input{flex:1 1 200px;min-height:var(--control-h);background:transparent;border:1px solid var(--line-hairline);color:var(--text-primary);padding:0 16px;font-family:var(--font-sans);font-size:13px;letter-spacing:.04em}
.newsletter input::placeholder{color:var(--slate-500)}
.newsletter input:focus{border-color:var(--copper-500);outline:none;box-shadow:none}
[data-lookup] input,.field{min-height:var(--control-h);background:transparent;border:1px solid var(--line-hairline);color:var(--text-primary);padding:0 16px;font-family:var(--font-sans);font-size:13px;letter-spacing:.02em}
[data-lookup] input::placeholder{color:var(--slate-500)}
[data-lookup] input:focus{border-color:var(--copper-500);outline:none}
[data-lookup] input::-webkit-search-cancel-button{filter:invert(1) opacity(.45)}

/* ── Age gate — overlay only, never blocks render or indexing ── */
.gate{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:var(--page-margin);background:rgba(7,9,11,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.gate[hidden]{display:none}
.gate-in{max-width:520px;text-align:center;display:grid;justify-items:center;gap:var(--space-5);animation:rise var(--duration-slow) var(--ease-out) both}
.gate-in img{width:64px;height:64px}
.gate-in h2{font-family:var(--font-display);font-size:clamp(30px,4vw,46px);line-height:1;margin:0}
.gate-in p{font-size:14px;line-height:1.7;color:var(--text-body);margin:0;max-width:42ch}
.gate-acts{display:flex;gap:var(--space-3);flex-wrap:wrap;justify-content:center;margin-top:var(--space-3)}
.gate-deny{font-size:12px;color:var(--slate-400);border:0;background:none;cursor:pointer;font-family:var(--font-sans);letter-spacing:.14em;text-transform:uppercase;padding:12px}

/* ── Toast ──────────────────────────────────────────────────── */
.toast{position:fixed;right:24px;bottom:24px;z-index:200;background:var(--ink-900);border:1px solid var(--line-copper);padding:18px 22px;display:grid;gap:6px;max-width:340px;box-shadow:var(--shadow-lift);animation:rise var(--duration-base) var(--ease-out) both}
.toast strong{font-family:var(--font-sans);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--copper-300)}
.toast span{font-size:13px;color:var(--text-body)}

/* ── View transitions between pages ─────────────────────────── */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut var(--duration-base) var(--ease-in) both}
::view-transition-new(root){animation:vtIn var(--duration-slow) var(--ease-out) both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(14px)}}

/* ── Light scope helper ─────────────────────────────────────── */
.paper{background:var(--bone-50)}
.paper a{border-bottom-color:rgba(117,76,56,.4)}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:1080px){
  .hero-in,.two,.two-t,.split,.scrolly,.ftr-in{grid-template-columns:1fr}
  .hero{min-height:auto;padding-top:calc(var(--space-10) + 30px)}
  .hero-bottle{max-width:340px;margin-top:var(--space-7)}
  .scrolly-media{position:relative;height:auto;display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none}
  .scrolly-media::-webkit-scrollbar{display:none}
  .scrolly-media figure{position:relative;flex:0 0 86%;aspect-ratio:4/3;opacity:1;transform:none;scroll-snap-align:center}
  .scrolly-steps>article{min-height:0;padding-block:var(--space-7)}
  .ftr-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .hdr{grid-template-columns:1fr auto}
  .hdr-nav{display:none}
  .hdr-end .btn-sm{display:none}
  .burger{display:inline-flex}
  .galscroll>*{flex-basis:70vw}
  .gal-nav{display:none}
  .spec div,table.tbl tbody th{grid-template-columns:1fr;width:auto}
  .ftr-cols{grid-template-columns:1fr}
  table.tbl{font-size:13px}
  .tblwrap table.tbl{min-width:520px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
  [data-rise],[data-wipe],[data-rise].pending,[data-wipe].pending{opacity:1;transform:none;clip-path:none;animation:none}
  .lines>span>i{transform:none}
  .galscroll>*{opacity:1;transform:none}
}
@media print{.hdr,.prog,.gate,.sheet,.scrollcue,.marq{display:none}}


/* ── Category chapter (Process) ─────────────────────────────── */
.spectrum{margin-top:var(--space-7)}
.spectrum-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-hairline)}
.spectrum-col{position:relative;padding:var(--space-6) var(--space-5) var(--space-6) 0}
.spectrum-col+.spectrum-col{padding-left:var(--space-5);box-shadow:inset 1px 0 0 var(--line-hairline)}
.spectrum-col::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--slate-600)}
.spectrum-col+.spectrum-col::before{left:var(--space-5)}
.spectrum-col.on{background:linear-gradient(180deg,rgba(168,119,88,.07),transparent 62%)}
.spectrum-col.on::before{background:var(--copper-400);box-shadow:0 0 0 5px rgba(168,119,88,.16)}
.spectrum-col h3{font-family:var(--font-roman);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-primary);margin:0 0 var(--space-4);font-weight:400}
.spectrum-col p{font-size:13.5px;line-height:1.72;color:var(--text-body);margin:0}
.spectrum-col .who{display:block;margin-top:var(--space-4);font-size:12px;line-height:1.6;color:var(--slate-500)}
.spectrum-ends{display:flex;justify-content:space-between;gap:var(--space-5);margin-top:var(--space-4)}
.tline{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));border-top:1px solid var(--line-hairline);margin-top:var(--space-8)}
.tline>div{position:relative;padding:var(--space-5) var(--space-5) 0 0}
.tline>div::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--slate-600)}
.tline>div:last-child::before{background:var(--copper-400);box-shadow:0 0 0 5px rgba(168,119,88,.16)}
.tline .num{font-size:30px;display:block;margin-bottom:10px;color:var(--text-primary)}
.tline>div:last-child .num{color:var(--copper-300)}
.tline p{font-size:12.5px;line-height:1.65;color:var(--text-body);margin:0;max-width:22ch}
.law-def{margin:0;padding-left:var(--space-5);border-left:1px solid var(--line-copper);font-family:var(--font-display);font-size:clamp(20px,1.9vw,26px);line-height:1.35;color:var(--text-primary)}
.law-def cite{display:block;margin-top:var(--space-4);font-style:normal;font-family:var(--font-sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted)}
.srcs{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--line-hairline)}
.srcs a{font-size:11.5px;letter-spacing:.04em;color:var(--slate-500);border-bottom:1px solid rgba(237,232,223,.14)}
.srcs a:hover{color:var(--text-accent)}
@media(max-width:860px){.spectrum-track{grid-template-columns:1fr}.spectrum-col+.spectrum-col{padding-left:0;box-shadow:none;border-top:1px solid var(--line-hairline)}.spectrum-col+.spectrum-col::before{left:0}}


/* ── Map (Visit) ────────────────────────────────────────────── */
.map{height:460px;border:1px solid var(--line-hairline);background:#0d1115}
.map .leaflet-tile-pane{filter:grayscale(1) invert(.93) brightness(.86) contrast(1.06) sepia(.22)}
.leaflet-container{background:#0d1115;font-family:var(--font-sans)}
.leaflet-control-attribution{background:rgba(7,9,11,.7)!important;color:var(--slate-500)!important;font-size:10px}
.leaflet-control-attribution a{color:var(--slate-400)!important;border:0}
.leaflet-bar a{background:#12171E;color:var(--text-body);border-bottom-color:var(--line-hairline)}
.leaflet-bar a:hover{background:#1a2129;color:var(--text-primary)}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--surface-page);color:var(--text-body);border:1px solid var(--line-hairline);border-radius:var(--radius-sm);box-shadow:none}
.leaflet-popup-content{font-size:12.5px;line-height:1.6}
.leaflet-popup-content strong{color:var(--text-primary)}
@media(max-width:860px){.map{height:340px}}


/* ── Process stages (replaces the sticky scrolly) ───────────── */
.stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-8);align-items:center;padding-block:var(--section-y-tight);border-top:1px solid var(--line-hairline)}
.stage:nth-child(even) .stage-media{order:-1}
.stage-media{margin:0}
.stage-media img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;border:1px solid var(--line-hairline)}
.stage-media figcaption{margin-top:var(--space-4)}
@media(max-width:860px){.stage{grid-template-columns:1fr;gap:var(--space-6)}.stage:nth-child(even) .stage-media{order:0}.stage-media img{aspect-ratio:3/2}}


/* ── Page tail: the last section's bottom padding doubles up with the
   footer's top padding, leaving a void. Halve it. ────────────────── */
main > section:last-child{padding-bottom:var(--section-y-tight)}


/* ── Touch targets: only on coarse pointers, so the desktop rhythm is
   untouched while thumbs get a 44px hit area. ─────────────────────── */
@media (pointer:coarse){
.hdr-nav a,.hdr-cart,.sheet a,.ftr-cols a,.ftr-legal nav a,.lnk,.faq summary,.gal-nav button,.srcs a{min-height:44px;display:inline-flex;align-items:center}
.ftr-cols li{margin:0}
.stage-media figcaption,.spectrum-col .who{min-height:0}
}


/* ── Release "from the shed" bands: one ratio for all five, so the
   photography reads as a set rather than five different crops. ───── */
.two figure.bleed img{aspect-ratio:3/2;height:auto;object-fit:cover}

/* Buttons whose label wraps on a phone were spilling past the min-height
   box; give them vertical padding so the box grows with the text. ─── */
.btn{padding-block:12px;height:auto;text-align:center;line-height:1.35}


/* ── Next steps: the standard end-of-page pathway module ─────────── */
.next{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:1px;background:var(--line-hairline);border:1px solid var(--line-hairline)}
.next>a{background:var(--surface-page);border:0;padding:var(--space-6) var(--space-5);display:grid;gap:12px;align-content:start;transition:background var(--duration-base) var(--ease-standard)}
.next>a:hover{background:rgba(168,119,88,.07)}
.next .dl{color:var(--copper-300)}
.next strong{font-family:var(--font-display);font-weight:400;font-size:25px;line-height:1.04;letter-spacing:-.01em;color:var(--text-primary)}
.next p{margin:0;font-size:13.5px;line-height:1.66;color:var(--text-body);max-width:34ch}
.next .ar{color:var(--copper-300);font-size:13px}
.next>a:hover .ar{color:var(--copper-200)}
.paper .next{background:var(--line-on-light);border-color:var(--line-on-light)}
.paper .next>a{background:var(--bone-50)}
.paper .next p{color:#2C3740}

/* Three-up statement row (homepage proposition) ─────────────────── */
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--space-7) var(--space-6)}
.trio h3{font-family:var(--font-roman);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-primary);font-weight:400;margin:0 0 var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--line-copper)}
.trio p{margin:0;font-size:15px;line-height:1.72;color:var(--text-body)}

/* Verdict ladder (process, release decision) ────────────────────── */
.ladder{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line-hairline);border:1px solid var(--line-hairline)}
.ladder li{background:var(--surface-page);padding:var(--space-5);display:grid;gap:8px}
.ladder .dl{color:var(--copper-300)}
.ladder p{margin:0;font-size:13.5px;line-height:1.66;color:var(--text-body)}


/* ── Phones: the hero was running to three viewport heights, and the
   data rows, stats and forms all wanted tightening. ─────────────── */
@media (max-width:640px){
  .hero{padding:calc(var(--space-8) + 26px) var(--page-margin) var(--space-7)}
  .hero-in{gap:var(--space-5)}
  .hero .lede{font-size:16.5px;line-height:1.62}
  .hero dl{gap:var(--space-4) var(--space-5)!important;margin-top:var(--space-6)!important}
  .d-xl{font-size:clamp(42px,12.5vw,58px)}
  .sec{padding-block:var(--space-8)}
  .spec div{grid-template-columns:1fr;gap:6px;padding:13px 0}
  .stats{grid-template-columns:1fr 1fr}
  .stats>div{padding:var(--space-5) var(--space-4)}
  .stats .num{font-size:32px;margin-bottom:10px}
  .quote blockquote{font-size:27px}
  .galscroll>*{flex-basis:80vw}
  .newsletter input{flex:1 1 100%}
  .newsletter .btn{width:100%}
  .next>a{padding:var(--space-5) var(--space-4)}
  .next strong{font-size:22px}
  .gate-in h2{font-size:28px}
  .marq{padding-block:14px}
  .marq span{font-size:11px}
  figure.bleed figcaption,.stage-media figcaption{padding-top:10px}
}
/* Below 560px the hero bottle costs more height than it earns; the
   photograph carries the hero and the range gallery is two screens away. */
@media (max-width:560px){
  .hero-bottle{display:none}
  .btn-lg{min-height:var(--control-h);padding-inline:22px;font-size:11.5px}
}

/* ── Photo-free product plate ─────────────────────────────────────────
   Used where no verified current packshot exists, so the page never shows a
   bottle that contradicts its own copy. Deliberate, not broken: charcoal
   ground, copper hairline seal, brand typography. No bottle silhouette.
   STAGING: the pending line is visible. Delete the .plate-pending rule
   below (one rule) before public production. */
.plate{display:grid;place-content:center;justify-items:center;gap:var(--space-4);width:100%;aspect-ratio:1/1;background:var(--surface-sunken);border:1px solid var(--line-hairline);padding:var(--space-6);text-align:center}
.plate-seal{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-copper);position:relative}
.plate-seal::after{content:"";position:absolute;inset:5px;border-radius:50%;border:1px solid var(--line-copper);opacity:.45}
.plate-nm{font-size:clamp(22px,2.4vw,34px);line-height:1.05}
.plate-sp{color:var(--text-muted)}
.plate-pending{display:block;color:var(--copper-300);opacity:.8}
.pcard-media .plate{aspect-ratio:1/1;border:0;background:transparent;gap:var(--space-3)}
.pcard-media .plate-seal{width:30px;height:30px}
.pcard-media .plate-nm{font-size:clamp(19px,2vw,24px)}
.plate-lg{max-width:440px;aspect-ratio:1/1;background:transparent;border:1px solid var(--line-hairline)}

/* ── Range chooser, added 23 Aug 2026 ─────────────────────────────── */
.chooser{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line-hairline);border:1px solid var(--line-hairline);margin-top:var(--space-7)}
@media(max-width:1080px){.chooser{grid-template-columns:repeat(2,1fr)}.chooser>a:last-child{grid-column:1/-1;min-height:96px}}
@media(max-width:520px){.chooser{grid-template-columns:1fr}}
.chooser>a{background:var(--surface-page);border:0;padding:var(--space-5);display:grid;gap:10px;align-content:space-between;min-height:118px;text-decoration:none;transition:background var(--duration-base) var(--ease-standard)}
.chooser>a:hover{background:var(--surface-card)}
.chooser>a strong{font-family:var(--font-display);font-weight:400;font-size:26px;line-height:1;color:var(--text-primary)}
.chooser .dl{line-height:1.6}
.notes{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:var(--space-5) 0 0;padding:0}
.notes li{font-family:var(--font-sans);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);border:1px solid var(--line-hairline);padding:5px 10px}
.bestfor{margin:var(--space-5) 0 0;font-size:14.5px;line-height:1.7;color:var(--text-body);max-width:46ch}
.bestfor .dl{display:block;margin-bottom:6px;color:var(--copper-300)}
/* Paired place photography */
.placepair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);padding:var(--section-y-tight) var(--page-margin) 0}
.placepair img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center;display:block}
.placepair figcaption{padding-top:var(--space-4);color:var(--text-eyebrow)}
@media(max-width:760px){.placepair{grid-template-columns:1fr}}
/* Long-form editorial */
.prose{max-width:66ch}
.prose h2{font-family:var(--font-display);font-weight:400;font-size:var(--size-display-sm);line-height:1.06;letter-spacing:-.01em;color:var(--text-primary);margin:var(--space-8) 0 var(--space-5)}
.prose h3{font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--copper-300);margin:var(--space-7) 0 var(--space-4)}
.prose p{font-size:16px;line-height:1.78;color:var(--text-body);margin:0 0 var(--space-5)}
.prose ul{margin:0 0 var(--space-5);padding-left:1.15em;font-size:16px;line-height:1.78;color:var(--text-body)}
.prose li{margin-bottom:10px}
.prose strong{color:var(--text-primary);font-weight:500}
.prose>p:last-child{margin-bottom:0}
.callout{border:1px solid var(--line-hairline);border-left:2px solid var(--copper-500);padding:var(--space-5) var(--space-6);margin:var(--space-7) 0}
.callout p{margin:0;font-size:15px}
/* Learn index + trade cards */
.artlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1px;background:var(--line-hairline);border:1px solid var(--line-hairline)}
.artlist>a,.artlist>div{background:var(--surface-page);border:0;padding:var(--space-6) var(--space-5);display:grid;gap:12px;align-content:start;text-decoration:none}
.artlist>a:hover{background:var(--surface-card)}
.artlist strong{font-family:var(--font-display);font-weight:400;font-size:23px;line-height:1.12;color:var(--text-primary)}
.artlist p{font-size:14px;line-height:1.7;color:var(--text-body);margin:0}
.artlist .soon{color:var(--slate-500)}
.artlist>div strong{color:var(--slate-400)}

/* Trade enquiry form */
.tradeform{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);max-width:760px}
.tradeform p{margin:0;display:grid;gap:8px}
.tradeform p[hidden]{display:none}
.tradeform p.full{grid-column:1/-1}
.tradeform label{color:var(--text-muted)}
.tradeform input,.tradeform textarea{width:100%;background:var(--surface-card);border:1px solid var(--line-hairline);color:var(--text-primary);font-family:var(--font-sans);font-size:15px;padding:13px 14px;min-height:var(--control-h);border-radius:0}
.tradeform textarea{min-height:132px;resize:vertical;line-height:1.6}
.tradeform input:focus-visible,.tradeform textarea:focus-visible{outline:2px solid var(--copper-500);outline-offset:1px;border-color:var(--copper-500)}
.tradeform input::placeholder,.tradeform textarea::placeholder{color:var(--slate-500)}
@media(max-width:640px){.tradeform{grid-template-columns:1fr}}


/* ── Cane comparison (light section) ────────────────────────── */
.canecmp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line-on-light);border:1px solid var(--line-on-light);margin-top:var(--space-8)}
.canecmp>div{background:var(--bone-50);padding:var(--space-6) var(--space-5);display:grid;gap:12px;align-content:start}
.canecmp>div.on{background:#FFFDF9;box-shadow:inset 0 2px 0 var(--copper-600)}
.canecmp h3{font-family:var(--font-roman);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-900);font-weight:400;margin:0}
.canecmp p{margin:0;font-size:13.5px;line-height:1.72;color:#2C3740}
.canecmp .use{font-family:var(--font-sans);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--copper-600)}
@media(max-width:860px){.canecmp{grid-template-columns:1fr}}

/* Product card: sensory line and application cue */
.pcard .sens{margin:0;font-size:13.5px;line-height:1.62;color:var(--text-body)}
.pcard .cue{margin:0;font-family:var(--font-sans);font-size:11.5px;line-height:1.55;letter-spacing:.02em;color:var(--copper-300)}
.pcard-body{align-content:start}
@media (max-width:640px){.pcard .sens{font-size:13px}}