:root{
  --bone:#f8fafb; --paper:#eef2f5; --card:#ffffff;
  --ink:#1a2530; --ink-mid:#243140; --ink-soft:#4a5563;
  --grey-50:#eef2f5; --grey-100:#e6ebef; --grey-200:#ccd5dc; --grey-300:#a8b2bc;
  --grey-400:#859098; --grey-500:#65737f; --grey-600:#4a5563; --grey-700:#3d4955;
  --hairline:rgb(26 37 48 / 0.08); --hairline-strong:rgb(26 37 48 / 0.14);
  --ox-50:#edf4f9; --ox-100:#d6e4f0; --ox-200:#aac6e0; --ox-300:#7aabd1;
  --ox-500:#2a6aae; --ox-600:#205994; --ox-700:#1a4a7d; --ox-900:#112e52;
  --vessel:#2f5d44; --vessel-dark:#244a36; --wine:#c98a3c;
  --sg-50:#eef3ed; --sg-100:#d8e3d6; --sg-300:#87ad85; --sg-500:#4f8240; --sg-700:#335e26;
  --amber-50:#faf1de; --amber-100:#f6e6bd; --amber-500:#b07a22; --amber-700:#815818;
  --coral-50:#faeae8; --coral-100:#f4d2cd; --coral-500:#b04a44; --coral-700:#823633;
  --oak:#8a6a4a; --oak-dark:#5f4630;
  --radius:8px;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --shadow-2:0 4px 14px -8px rgb(26 37 48 / 0.18), 0 0 0 1px rgb(26 37 48 / 0.07);
  --shadow-3:0 24px 60px -12px rgb(26 37 48 / 0.36), 0 0 0 1px rgb(26 37 48 / 0.10);
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{font-family:var(--sans); font-weight:400; color:var(--ink); line-height:1.55;
  background:var(--bone); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; overflow-x:hidden;}
body::before{content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgb(26 37 48 / 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(26 37 48 / 0.035) 1px, transparent 1px);
  background-size:26px 26px;}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px; position:relative; z-index:1}

.mono{font-family:var(--mono)} .tnum{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}
h1,h2,h3,h4{margin:0; font-weight:600}
.eyebrow{font:600 10.5px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--grey-500)}
.display{font-weight:600; letter-spacing:-.018em; line-height:1.05}

/* reveal-on-scroll (only when JS is active) */
.js .reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s cubic-bezier(.16,.8,.3,1)}
.js .reveal.in{opacity:1; transform:none}

/* pulses */
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgb(79 130 64 / .5)}70%{box-shadow:0 0 0 8px rgb(79 130 64 / 0)}100%{box-shadow:0 0 0 0 rgb(79 130 64 / 0)}}
.pulse{animation:pulseDot 2.6s ease-out infinite}
@keyframes fermPulse{0%,100%{opacity:1}50%{opacity:.5}}
.ferm-chip{animation:fermPulse 1.9s ease-in-out infinite}

/* animated sparkline + gauge (JS-gated so no-JS still shows them) */
.js .spark path{stroke-dasharray:140; stroke-dashoffset:140; transition:stroke-dashoffset 1.1s ease .15s}
.js .reveal.in .spark path{stroke-dashoffset:0}
.js .so2 .fill{transform:scaleX(0); transform-origin:left; transition:transform 1.05s cubic-bezier(.16,.8,.3,1) .2s}
.js .reveal.in .so2 .fill{transform:scaleX(1)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:500 14px/1 var(--sans); padding:0 18px; height:42px; border-radius:var(--radius);
  border:1px solid transparent; cursor:pointer; transition:background .14s, border-color .14s, color .14s, transform .14s, box-shadow .14s}
.btn-primary{background:var(--ox-500); color:#fff}
.btn-primary:hover{background:var(--ox-600); transform:translateY(-1px); box-shadow:0 6px 16px -8px rgb(42 106 174 / .7)}
.btn-outline{background:var(--card); color:var(--ink); border-color:var(--hairline-strong)}
.btn-outline:hover{background:var(--paper); border-color:var(--grey-300); transform:translateY(-1px)}
.btn-arrow svg{transition:transform .15s ease}
.btn-arrow:hover svg{transform:translateX(3px)}

header.nav{position:sticky; top:0; z-index:50; background:rgb(248 250 251 / .82);
  backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--hairline)}
.nav-inner{max-width:var(--maxw); margin:0 auto; padding:11px 28px; display:flex; align-items:center; gap:20px}
.brand{display:flex; align-items:center; gap:10px}
.brand .name{font:600 18px/1 var(--sans); letter-spacing:-.01em; color:var(--ink)}
.brand .sub{font:500 8.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--grey-500); margin-top:4px}
.nav-links{display:flex; align-items:center; gap:26px; margin-left:auto}
.nav-links a{position:relative; font:500 13px/1 var(--sans); color:var(--ink-soft); transition:color .14s; padding:4px 0}
.nav-links a::after{content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1.5px; background:var(--ox-500); transition:right .2s ease}
.nav-links a:hover{color:var(--ink)} .nav-links a:hover::after{right:0}
.pre-badge{display:inline-flex; align-items:center; gap:6px; font:500 9.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--vessel);
  background:var(--sg-50); border:1px solid var(--sg-100); padding:5px 9px; border-radius:6px}
.pre-badge .d{width:6px; height:6px; border-radius:50%; background:var(--sg-500)}
.nav-cta{display:flex; align-items:center; gap:13px}
.btn-sm{height:36px; padding:0 14px; font-size:13px}
.menu-btn{display:none; background:none; border:1px solid var(--hairline-strong); border-radius:8px; padding:8px 10px; cursor:pointer}
.menu-btn svg{stroke:var(--ink)}

.hero{padding:64px 0 38px}
.hero-grid{display:grid; grid-template-columns:1.02fr 1fr; gap:54px; align-items:center}
.hero h1{font-size:54px; color:var(--ink)}
.hero h1 .ox{color:var(--ox-600)}
.hero .lede{font-size:17.5px; line-height:1.6; color:var(--ink-soft); margin:22px 0 0; max-width:33em}
.hero-cta{display:flex; gap:12px; align-items:center; margin-top:28px; flex-wrap:wrap}
.coming{display:inline-flex; align-items:center; gap:9px; margin-top:20px; font:400 13px/1.45 var(--sans); color:var(--grey-500)}
.coming .dot{width:8px; height:8px; border-radius:50%; background:var(--sg-500)}

.specimen{margin-top:30px; border:1px solid var(--hairline-strong); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow-2); overflow:hidden}
.specimen .sh{display:flex; align-items:center; gap:10px; padding:11px 15px; border-bottom:1px solid var(--hairline); background:var(--grey-50)}
.specimen .sh .lbl{font:600 9.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--grey-500)}
.specimen .sh .lc{font:500 19px/1 var(--mono); letter-spacing:.04em; color:var(--ink)}
.specimen .sh .lc .hy{color:var(--grey-300)}
.specimen .sh .rev{margin-left:auto; font:500 10px/1 var(--mono); color:var(--ox-600); background:var(--ox-50); border:1px solid var(--ox-100); padding:4px 7px; border-radius:5px}
.specimen .kv{display:grid; grid-template-columns:repeat(4,1fr)}
.specimen .kv .cell{padding:11px 15px; border-right:1px solid var(--hairline)}
.specimen .kv .cell:last-child{border-right:none}
.specimen .kv .k{font:600 8.5px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--grey-400)}
.specimen .kv .v{font:500 13px/1 var(--mono); color:var(--ink-mid); margin-top:7px}

.frame{background:var(--card); border:1px solid var(--hairline-strong); border-radius:12px; box-shadow:var(--shadow-3); overflow:hidden}
.frame-bar{display:flex; align-items:center; gap:11px; padding:10px 14px; border-bottom:1px solid var(--hairline); background:var(--grey-50)}
.frame-bar .dots{display:flex; gap:6px}
.frame-bar .dots i{width:9px; height:9px; border-radius:50%; background:var(--grey-200)}
.frame-bar .title{font:500 12px/1 var(--mono); letter-spacing:.01em; color:var(--ink-soft)}
.frame-bar .title .crumb{color:var(--grey-300)}
.frame-bar .pill{margin-left:auto; font:500 10px/1 var(--sans); color:var(--ink-soft); border:1px solid var(--hairline-strong); border-radius:6px; padding:5px 9px}

.cellar{position:relative; padding:18px 16px 20px;
  background:radial-gradient(var(--grey-200) .9px, transparent .9px) 0 0/17px 17px, var(--card)}
.cellar-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px 4px; position:relative}
.vessel{display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px; border-radius:8px; transition:background .14s, transform .14s}
.vessel:hover{background:var(--ox-50); transform:translateY(-2px)}
.vessel .code{font:600 11px/1 var(--mono); color:var(--ink); letter-spacing:.02em}
.vessel .lot{font:400 9px/1 var(--mono); color:var(--grey-400)}
.vessel .vsvg{position:relative}
.ferm-chip{position:absolute; top:-4px; right:-6px; background:var(--amber-500); color:#fff;
  font:600 7.5px/1 var(--sans); letter-spacing:.04em; padding:3px 4px; border-radius:4px; box-shadow:0 1px 2px rgb(0 0 0 / .18)}
.cellar-foot{display:flex; gap:14px; align-items:center; margin-top:13px; padding-top:11px; border-top:1px solid var(--hairline); flex-wrap:wrap}
.legend{display:flex; align-items:center; gap:6px; font:400 10.5px/1 var(--sans); color:var(--grey-500)}
.legend i{width:9px; height:9px; border-radius:2px}

section{position:relative; z-index:1}
.band{padding:82px 0}
.band-line{border-top:1px solid var(--hairline)}
.sec-head{max-width:740px}
.sec-head .eyebrow{margin-bottom:15px}
.sec-head h2{font-size:37px; line-height:1.1; letter-spacing:-.018em; color:var(--ink)}
.sec-head p{font-size:16.5px; color:var(--ink-soft); margin:15px 0 0; line-height:1.6}

/* replace-the-spreadsheets */
.spread-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:54px; align-items:center}
.spread-copy h2{font-size:35px; line-height:1.1; letter-spacing:-.018em; color:var(--ink)}
.spread-copy p{font-size:16px; color:var(--ink-soft); margin:16px 0 0; line-height:1.62}
.replaces{display:flex; flex-direction:column; gap:12px}
.replaces .old{display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-flex; align-items:center; gap:7px; font:500 12.5px/1 var(--sans); color:var(--grey-500);
  background:var(--card); border:1px solid var(--hairline-strong); border-radius:8px; padding:9px 12px; position:relative}
.chip.struck{text-decoration:line-through; text-decoration-color:var(--coral-500); text-decoration-thickness:1.5px; opacity:.85}
.chip svg{color:var(--grey-400)}
.replaces .arrow{display:flex; align-items:center; gap:8px; color:var(--grey-400); font:500 11px/1 var(--mono); text-transform:uppercase; letter-spacing:.12em; padding:2px 0}
.chip.one{color:#fff; background:var(--ox-500); border-color:var(--ox-500); font-weight:600; font-size:13.5px; padding:11px 15px}
.chip.one svg{color:rgb(255 255 255 / .85)}

.what-grid{display:grid; grid-template-columns:1.15fr 1fr; gap:54px; align-items:start}
.statement{font-size:25px; line-height:1.35; color:var(--ink); max-width:20em; font-weight:500; letter-spacing:-.01em}
.statement em{font-style:normal; color:var(--ox-600)}
.truths{display:grid; margin-top:4px}
.truth{display:flex; gap:16px; padding:15px 0; border-top:1px solid var(--hairline)}
.truth:last-child{border-bottom:1px solid var(--hairline)}
.truth .k{font:600 10px/1.5 var(--mono); color:var(--ox-700); letter-spacing:.08em; white-space:nowrap; min-width:78px; text-transform:uppercase}
.truth .v{font-size:14px; color:var(--ink-soft); line-height:1.55}
.truth .v b{color:var(--ink); font-weight:600}

.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:12px; overflow:hidden}
.feat{background:var(--bone); padding:25px 23px 26px; transition:background .18s}
.feat:hover{background:var(--card)}
.feat .ic{width:30px; height:30px; color:var(--ox-500); margin-bottom:15px; transition:transform .18s ease}
.feat:hover .ic{transform:translateY(-2px) scale(1.06)}
.feat h3{font:600 15.5px/1.3 var(--sans); color:var(--ink); margin-bottom:7px; letter-spacing:-.005em}
.feat p{font-size:13.3px; line-height:1.55; color:var(--ink-soft); margin:0}

.dive{display:grid; grid-template-columns:1fr 1.06fr; gap:54px; align-items:center}
.dive.rev .dive-copy{order:2}
.dive-copy .eyebrow{margin-bottom:13px}
.dive-copy h3{font-size:29px; line-height:1.12; letter-spacing:-.018em; color:var(--ink)}
.dive-copy p{font-size:15.5px; color:var(--ink-soft); margin:14px 0 0; line-height:1.6}
.checks{margin:21px 0 0; padding:0; display:grid; gap:10px}
.checks li{list-style:none; display:flex; gap:11px; align-items:flex-start; font-size:14px; color:var(--ink-mid)}
.checks svg{flex:0 0 auto; margin-top:2px; color:var(--sg-500)}

.fp{padding:16px}
.fp .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-bottom:14px}
.fp .stat{border:1px solid var(--hairline); border-radius:8px; padding:10px 12px; background:var(--card)}
.fp .stat .l{font:600 8.5px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--grey-400)}
.fp .stat .n{font:500 22px/1 var(--mono); color:var(--ink); margin-top:7px}
table.tbl{width:100%; border-collapse:collapse; font-size:11.5px}
table.tbl th{font:600 8.5px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--grey-400); text-align:left; padding:9px 9px; border-bottom:1px solid var(--hairline-strong)}
table.tbl td{padding:9px 9px; border-bottom:1px solid var(--hairline); color:var(--ink-soft)}
table.tbl td.m{font-family:var(--mono); color:var(--ink)}
table.tbl tr:last-child td{border-bottom:none}
.tag{display:inline-flex; align-items:center; font:500 10px/1 var(--sans); letter-spacing:.02em; padding:4px 8px; border-radius:5px}
.tag.ok{color:var(--sg-700); background:var(--sg-50)}
.tag.warn{color:var(--amber-700); background:var(--amber-50)}
.tag.bad{color:var(--coral-700); background:var(--coral-50)}
.spark{vertical-align:middle}

.lotcard{padding:18px}
.lotcard .lh{display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; padding-bottom:13px; border-bottom:1px solid var(--hairline)}
.lotcard .lh .lc{font:500 20px/1 var(--mono); letter-spacing:.03em; color:var(--ink)}
.lotcard .lh .lc .hy{color:var(--grey-300)}
.lotcard .lh .meta{font:400 12px/1 var(--mono); color:var(--grey-500)}
.lotcard .lh .meta b{color:var(--ink-soft); font-weight:500}
.addrow{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--hairline)}
.addrow .ai{width:30px; height:30px; border-radius:7px; background:var(--ox-50); color:var(--ox-600); display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.addrow .at{flex:1; min-width:0}
.addrow .at .n{font:500 13px/1.2 var(--sans); color:var(--ink)}
.addrow .at .s{font:400 10.5px/1.3 var(--mono); color:var(--grey-500); margin-top:3px}
.addrow .q{font:500 12.5px/1 var(--mono); color:var(--ink-soft); white-space:nowrap}
.flag{display:inline-flex; align-items:center; gap:6px; font:500 11px/1.3 var(--sans); color:var(--coral-700); background:var(--coral-50); border:1px solid var(--coral-100); padding:6px 10px; border-radius:7px}
.so2{margin-top:15px}
.so2 .top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px}
.so2 .top .l{font:600 10px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--grey-500)}
.so2 .top .v{font:500 12px/1 var(--mono); color:var(--ink)}
.so2 .track{height:8px; border-radius:5px; background:var(--grey-100); position:relative; overflow:hidden}
.so2 .fill{position:absolute; inset:0 22% 0 0; background:linear-gradient(90deg,var(--sg-500),var(--amber-500))}
.so2 .mark{position:absolute; top:-3px; bottom:-3px; left:80%; width:2px; background:var(--coral-500)}
.so2 .note{font:400 11px/1.45 var(--sans); color:var(--grey-500); margin-top:8px}

/* day-lighter wins (numbered) */
.wins{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:12px; overflow:hidden}
.win{background:var(--bone); padding:23px 21px; transition:background .18s}
.win:hover{background:var(--card)}
.win .n{font:600 10px/1 var(--mono); color:var(--ox-700); letter-spacing:.08em}
.win h4{font:600 14.5px/1.3 var(--sans); margin:12px 0 7px; color:var(--ink); letter-spacing:-.005em}
.win p{font-size:13px; line-height:1.55; color:var(--ink-soft); margin:0}

.roles{display:grid; grid-template-columns:repeat(5,1fr); gap:11px}
.role{border:1px solid var(--hairline); border-radius:11px; padding:19px 17px; background:var(--card); transition:transform .15s ease, box-shadow .15s ease, border-color .15s}
.role:hover{transform:translateY(-3px); box-shadow:var(--shadow-2); border-color:var(--hairline-strong)}
.role .ic{width:24px; height:24px; color:var(--vessel); margin-bottom:13px}
.role h4{font:600 13.5px/1.25 var(--sans); margin:0 0 6px; color:var(--ink)}
.role p{font-size:12px; line-height:1.5; color:var(--ink-soft); margin:0}

.sa-grid{display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center}
.sa-list{display:grid; gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:11px; overflow:hidden}
.sa-item{background:var(--bone); padding:15px 19px; display:flex; gap:15px; align-items:center; transition:background .15s}
.sa-item:hover{background:var(--card)}
.sa-item .code{font:600 11px/1 var(--mono); color:var(--ox-700); min-width:64px; letter-spacing:.04em}
.sa-item .t{font-size:13.3px; color:var(--ink-soft)}
.sa-item .t b{color:var(--ink); font-weight:600}

.rep-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:11px}
.rep{border:1px solid var(--hairline); border-radius:10px; padding:17px 17px; background:var(--card); transition:border-color .15s, box-shadow .15s, transform .15s}
.rep:hover{border-color:var(--hairline-strong); box-shadow:var(--shadow-2); transform:translateY(-3px)}
.rep .h{display:flex; align-items:center; gap:9px; margin-bottom:7px}
.rep .h svg{color:var(--ox-500)}
.rep .h .nm{font:600 13px/1.2 var(--sans); color:var(--ink)}
.rep p{font-size:11.7px; line-height:1.5; color:var(--ink-soft); margin:0}

.road{display:grid; grid-template-columns:repeat(4,1fr); gap:11px}
.rd{border:1px dashed var(--grey-300); border-radius:11px; padding:19px 17px; background:rgb(255 255 255 / .45); transition:border-color .15s, background .15s}
.rd:hover{border-color:var(--ox-300); background:var(--card)}
.rd .badge{font:500 8.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--grey-500); border:1px solid var(--grey-200); border-radius:5px; padding:3px 6px; display:inline-block; margin-bottom:13px}
.rd h4{font:600 14px/1.25 var(--sans); margin:0 0 6px; color:var(--ink-mid)}
.rd p{font-size:12.3px; line-height:1.5; color:var(--grey-500); margin:0}

.watch{background:linear-gradient(180deg,var(--card),var(--grey-50)); border:1px solid var(--hairline-strong); border-radius:16px; padding:54px 48px; position:relative; overflow:hidden; box-shadow:var(--shadow-2)}
.watch::after{content:""; position:absolute; right:-90px; top:-90px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle,rgb(42 106 174 / .08),transparent 70%)}
.watch-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:46px; align-items:center; position:relative; z-index:1}
.watch h2{font-size:36px; line-height:1.1; letter-spacing:-.018em; color:var(--ink)}
.watch p{font-size:15.5px; color:var(--ink-soft); margin:15px 0 0; line-height:1.6}
.watch .mailto{display:inline-flex; align-items:center; gap:8px; margin-top:18px; font:500 13.5px/1 var(--mono); color:var(--ox-700)}
form.notify{display:flex; flex-direction:column; gap:11px}
form.notify .row{display:flex; gap:10px}
form.notify label{font:600 9.5px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--grey-500)}
form.notify input{flex:1; min-width:0; font:400 14.5px/1 var(--sans); color:var(--ink); padding:13px 14px; border:1px solid var(--hairline-strong); border-radius:8px; background:var(--card); transition:border-color .14s, box-shadow .14s}
form.notify input:focus{outline:none; border-color:var(--ox-500); box-shadow:0 0 0 3px var(--ox-50)}
form.notify .btn-primary{height:auto; padding:0 20px}
form.notify .fineprint{font:400 11.5px/1.5 var(--sans); color:var(--grey-500); margin-top:2px}
.thanks{display:none; background:var(--card); border:1px solid var(--sg-500); border-radius:11px; padding:22px 24px; align-items:center; gap:14px}
.thanks.show{display:flex}
.thanks .ck{width:34px; height:34px; flex:0 0 auto; color:var(--sg-500)}
.thanks h4{font:600 16px/1.2 var(--sans); color:var(--ink); margin:0 0 3px}
.thanks p{font-size:12.5px; color:var(--ink-soft); margin:0}

footer.ft{border-top:1px solid var(--hairline); margin-top:36px; padding:22px 0; background:rgb(248 250 251 / .6)}
.ft-inner{max-width:var(--maxw); margin:0 auto; padding:0 28px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font:400 11.5px/1.5 var(--sans); color:var(--ink-soft)}
.ft-inner .av{display:flex; align-items:center; gap:7px; color:var(--ink); font-weight:600}
.ft-inner .sep{color:var(--grey-300)}
.ft-inner .reg{font:500 10.5px/1 var(--mono); color:var(--grey-500); letter-spacing:.02em}
.ft-inner .links{margin-left:auto; display:flex; gap:14px; align-items:center}
.ft-inner .links a{position:relative; transition:color .14s} .ft-inner .links a:hover{color:var(--ink)}
.ft-inner .dbd{font:500 10.5px/1 var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--grey-500)}

.mobile-panel{display:none; flex-direction:column; gap:2px; padding:8px 28px 16px; border-bottom:1px solid var(--hairline); background:var(--bone)}
.mobile-panel a{padding:11px 4px; font:500 15px/1 var(--sans); color:var(--ink-mid); border-bottom:1px solid var(--hairline)}
.mobile-panel a:last-of-type{border-bottom:none}
.mobile-panel .btn-primary{margin-top:10px; height:44px}

@media (max-width:980px){
  .hero h1{font-size:42px}
  .hero-grid,.what-grid,.dive,.dive.rev,.sa-grid,.watch-grid,.spread-grid{grid-template-columns:1fr; gap:38px}
  .dive.rev .dive-copy{order:0}
  .feat-grid,.wins,.rep-grid{grid-template-columns:repeat(2,1fr)}
  .roles{grid-template-columns:repeat(3,1fr)}
  .road{grid-template-columns:repeat(2,1fr)}
  .hero-visual{max-width:560px}
}
@media (max-width:760px){
  .nav-links{display:none} .menu-btn{display:inline-flex}
  .hero{padding:38px 0 12px} .hero h1{font-size:33px} .hero .lede{font-size:16px}
  .specimen .kv{grid-template-columns:repeat(2,1fr)}
  .specimen .kv .cell:nth-child(2){border-right:none}
  .specimen .kv .cell:nth-child(1),.specimen .kv .cell:nth-child(2){border-bottom:1px solid var(--hairline)}
  .sec-head h2,.watch h2,.spread-copy h2{font-size:27px}
  .statement{font-size:21px}
  .band{padding:58px 0}
  .feat-grid,.wins,.rep-grid,.roles,.road{grid-template-columns:1fr}
  .fp .stats{grid-template-columns:repeat(2,1fr)}
  .watch{padding:34px 24px}
  form.notify .row{flex-direction:column}
  .cellar-grid{grid-template-columns:repeat(3,1fr)}
  .ft-inner .links{margin-left:0; width:100%; flex-wrap:wrap}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1; transform:none; transition:none}
  .js .spark path{stroke-dashoffset:0; transition:none}
  .js .so2 .fill{transform:scaleX(1); transition:none}
  .pulse,.ferm-chip{animation:none}
  *{transition:none !important}
}