/* OVRA Science v2 — formulation science, Sydney.
   Editorial Didone display (Bodoni Moda) + Plex for text and data. Porcelain, ink, one rouge accent; one night section. */
:root{
  --paper:#F3EEE6; --paper-hi:#FAF7F1; --paper-lo:#E8E0D3;
  --ink:#1D1A16; --ink-2:#4B453D; --ink-3:#857D71; --ink-4:#ADA597;
  --rule:rgba(29,26,22,.15); --rule-2:rgba(29,26,22,.075);
  --rouge:#A2583A; --rouge-2:rgba(162,88,58,.10);
  --sage:#7D876A; --sage-2:rgba(125,135,106,.14);
  --mist:#9FB1B8; --sand:#C9B38F; --leaf:#4F6B48; --leaf-2:rgba(79,107,72,.13);
  --night:#1B1D17; --night-2:#23261E; --bone:#EDE7DC; --bone-2:#BDB6A8; --bone-3:#857F72; --nrule:rgba(237,231,220,.14);
  --serif:'Bodoni Moda','Didot','Bodoni 72',Georgia,serif;
  --sans:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1280px; --gut:clamp(20px,4vw,48px);
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
body{background:var(--paper);color:var(--ink);font:400 17px/1.62 var(--sans)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--rouge)}
:focus-visible{outline:2px solid var(--rouge);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:8px 14px;z-index:100}
.skip:focus{left:12px;top:12px}

/* type scale */
.label{font:500 11.5px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.display{font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 96;letter-spacing:-.02em;line-height:.98}
.h2{font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 72;letter-spacing:-.015em;line-height:1.04;font-size:clamp(34px,4.2vw,62px)}
.h3{font:500 18px/1.35 var(--sans);letter-spacing:-.005em}
.lede{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--ink-2)}
.body{color:var(--ink-2)}
.small{font-size:14px;line-height:1.55;color:var(--ink-3)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* nav */
.nav{position:sticky;top:0;z-index:30;background:rgba(243,238,230,.86);backdrop-filter:saturate(1.2) blur(12px);-webkit-backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.nav.is-stuck{border-bottom-color:var(--rule)}
.nav__in{display:flex;align-items:center;justify-content:space-between;height:70px}
.mark{display:flex;align-items:baseline;gap:12px;text-decoration:none;color:var(--ink)}
.mark:hover{color:var(--ink)}
.mark__o{font:500 23px/1 var(--serif);font-variation-settings:"opsz" 36;letter-spacing:.2em}
.mark__s{font:500 10.5px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--ink-3)}
.nav__links{display:flex;align-items:center;gap:32px;list-style:none;font-size:14.5px}
.nav__links a{text-decoration:none;color:var(--ink-2)}
.nav__links a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 24px;border:1px solid var(--ink);border-radius:999px;font:500 15px/1 var(--sans);text-decoration:none;color:var(--ink);background:transparent;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:var(--rouge);border-color:var(--rouge);color:var(--paper)}
.btn--sm{height:38px;padding:0 17px;font-size:14px}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}

/* background: emulsion micrograph */
.field{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.field::before{content:"";position:absolute;inset:-4% -2%;background:url(emulsion.svg) center/cover no-repeat;opacity:.12;
  -webkit-mask-image:radial-gradient(ellipse 48% 60% at 92% 18%,#000 15%,rgba(0,0,0,.45) 50%,transparent 80%);mask-image:radial-gradient(ellipse 48% 60% at 92% 18%,#000 15%,rgba(0,0,0,.45) 50%,transparent 80%);
  transform:translate3d(0,var(--drift,0px),0)}

/* hero */
.hero{position:relative;padding:clamp(48px,7vw,104px) 0 0}
.hero>.wrap{position:relative;z-index:1}
.hero__top{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:26px}
.hero__title{font-size:clamp(44px,6.05vw,92px)}
.hero__title .ln{display:block}
.hero__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:28px;margin-top:clamp(36px,4vw,56px);align-items:start}
.hero__lede{grid-column:1/span 5}
.hero__lede .lede+.lede{margin-top:14px}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero__spec{grid-column:6/span 4;margin-top:-6px}
.facts{grid-column:10/span 3;border-top:1px solid var(--rule);font-size:13.5px}
.facts div{display:grid;grid-template-columns:84px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule-2)}
.facts dt{color:var(--ink-3)}
.facts dd{color:var(--ink)}

/* specimen (molecule plate) */
.spec{color:var(--ink)}
.spec__fig{position:relative;aspect-ratio:16/11;border:1px solid var(--rule);background:var(--paper-hi);display:grid;place-items:center;padding:8%}
.spec__fig .mol{width:100%;height:100%;color:var(--ink)}
.spec__fig::before,.spec__fig::after{content:"";position:absolute;width:9px;height:9px;border-color:var(--ink-3);border-style:solid}
.spec__fig::before{top:8px;left:8px;border-width:1px 0 0 1px}
.spec__fig::after{bottom:8px;right:8px;border-width:0 1px 1px 0}
.spec__cap{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-size:13px}
.spec__cap b{font:400 20px/1.15 var(--serif);font-variation-settings:"opsz" 24}
.spec__cap span{font-family:var(--mono);font-size:12px;color:var(--ink-3);text-align:right;line-height:1.5}
.mol path[class^='bond-']{stroke-width:2px!important}
.mol path[class^='atom-']{stroke:none}

/* formula strip (signature) */
.strip{margin-top:clamp(56px,6vw,84px);border-top:1px solid var(--ink);padding-top:16px}
.strip__head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-2);margin-bottom:46px}
.strip__head strong{font-weight:500;color:var(--ink)}
.strip__bar{position:relative;display:flex;height:56px;gap:2px}
.seg{position:relative;flex:0 0 var(--w);height:100%;background:var(--c);transform-origin:left center}
.seg--A{--c:#B7C5CA}.seg--B{--c:#D2BF9F}.seg--C{--c:#B4523C}.seg--D{--c:#3A3631}
.seg--aqua{--c:transparent;background:repeating-linear-gradient(135deg,#B7C5CA 0 1px,transparent 1px 6px);border:1px solid #B7C5CA}
.seg__lab{position:absolute;bottom:calc(100% + 8px);left:0;white-space:nowrap;max-width:calc(100% - 4px);overflow:hidden;text-overflow:ellipsis;font:400 11.5px/1.2 var(--mono);color:var(--ink-2);pointer-events:none}
.seg__lab{border-left:1px solid var(--ink-3);padding-left:5px}
.seg:hover{filter:brightness(.92)}
.seg__tip{position:absolute;top:calc(100% + 10px);left:0;z-index:5;white-space:nowrap;background:var(--ink);color:var(--paper);font:400 12px/1 var(--mono);padding:7px 9px;opacity:0;transform:translateY(-3px);transition:opacity .15s,transform .15s;pointer-events:none}
.seg:hover .seg__tip,.seg:focus .seg__tip{opacity:1;transform:none}
.strip__break{position:absolute;top:-6px;bottom:-6px;width:10px;background:var(--paper);transform:skewX(-14deg)}
.strip__legend{display:flex;gap:26px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:var(--ink-2)}
.strip__legend i{display:inline-block;width:10px;height:10px;margin-right:8px;vertical-align:-1px;background:var(--c)}
.strip__legend .mono{color:var(--ink-3);margin-left:6px}

/* formula sheet (product UI) */
.sheet{background:var(--paper-hi);border:1px solid var(--rule);border-radius:2px;box-shadow:0 1px 0 rgba(20,18,16,.04),0 40px 80px -56px rgba(20,18,16,.35)}
.sheet__head{display:flex;justify-content:space-between;gap:24px;align-items:baseline;padding:16px 22px;border-bottom:1px solid var(--rule);font-size:13.5px}
.sheet__brief{color:var(--ink-2)}
.sheet__k{font:500 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--rouge);margin-right:12px}
.sheet__id{font-weight:500;white-space:nowrap}
.sheet__id span{font-weight:400;color:var(--ink-3);margin-left:8px}
.sheet__body{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.sheet__main{padding:6px 22px 14px;border-right:1px solid var(--rule);overflow-x:auto}
.formula{width:100%;border-collapse:collapse;font-size:13.5px}
.formula th{font:500 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:14px 10px 10px 0;border-bottom:1px solid var(--rule)}
.formula td{padding:6px 10px 6px 0;border-bottom:1px solid var(--rule-2);vertical-align:middle}
.formula tr.is-phase td{border-top:1px solid var(--rule)}
.formula tbody tr:first-child td{border-top:0}
.formula__phase{width:122px;color:var(--ink-3);font-size:12px;white-space:nowrap}
.formula__phase span{display:inline-grid;place-items:center;width:19px;height:19px;border:1px solid var(--rule);border-radius:50%;font:500 10.5px/1 var(--mono);color:var(--ink-2);margin-right:6px}
.formula__pct{width:146px;text-align:right;white-space:nowrap}
th.formula__pct{text-align:right}
.formula__pct .bar{display:inline-block;vertical-align:middle;width:68px;height:3px;background:var(--rule-2);margin-right:12px;position:relative;overflow:hidden}
.formula__pct .bar::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--rouge)}
.formula__pct .num{font:400 12.5px/1 var(--mono);font-variant-numeric:tabular-nums;display:inline-block;min-width:42px}
.formula__fn{color:var(--ink-3);font-size:12.5px;width:146px}
.formula tfoot td{border-bottom:0;padding-top:12px;font-weight:500}
.sheet__aside{padding:4px 22px 18px}
.sheet__block{padding:15px 0;border-bottom:1px solid var(--rule-2)}
.sheet__block:last-child{border-bottom:0}
.sheet__block h3{font:500 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:11px}
.kv div{display:flex;justify-content:space-between;gap:14px;font-size:13.5px;padding:3px 0}
.kv dt{color:var(--ink-3)}
.kv dd{text-align:right;font-variant-numeric:tabular-nums}
.cost{display:flex;align-items:baseline;gap:8px}
.cost__n{font:400 36px/1 var(--serif);font-variation-settings:"opsz" 48;font-variant-numeric:lining-nums tabular-nums}
.cost__u{font-size:12.5px;color:var(--ink-3)}
.gauge{height:3px;background:var(--rule-2);margin:13px 0 8px;position:relative;overflow:hidden}
.gauge span{position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--leaf)}
.gauge.is-over span{background:var(--rouge)}
.cost__t{font-size:12.5px;color:var(--ink-3)}
.checks,.notes{list-style:none;font-size:13px;line-height:1.5}
.check{display:grid;grid-template-columns:30px 1fr;gap:10px;padding:5px 0}
.check__m{font:500 10.5px/19px var(--mono);color:var(--ink-2);text-align:center;border:1px solid var(--rule);border-radius:2px;height:20px}
.check__t strong{font-weight:500}
.check__t em{display:block;font-style:normal;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.check__t em::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:0;border:1px solid var(--ink-3)}
.check--pass .check__t em::before{background:var(--leaf);border-color:var(--leaf)}
.check--over .check__t em::before,.check--flag .check__t em::before{background:var(--rouge);border-color:var(--rouge)}
.notes li{padding:4px 0 4px 16px;position:relative;color:var(--ink-2)}
.notes li::before{content:"";position:absolute;left:0;top:12px;width:7px;height:1px;background:var(--ink-3)}
.sheet__foot{padding:12px 22px;border-top:1px solid var(--rule);font-size:12px;color:var(--ink-3)}
/* scrolly focus states */
.sheet [data-zone]{transition:opacity .45s var(--ease),background-color .45s var(--ease)}
.sheet[data-active] [data-zone]{opacity:.28}
.sheet[data-active="brief"] [data-zone="brief"],.sheet[data-active="formula"] [data-zone="formula"],.sheet[data-active="checks"] [data-zone="checks"],
.sheet[data-active="cost"] [data-zone="cost"],.sheet[data-active="predict"] [data-zone="predict"],.sheet[data-active="predict"] [data-zone="notes"]{opacity:1}
.sheet[data-active="brief"] [data-zone="brief"]{background:var(--rouge-2)}

/* sections */
.sec{padding:clamp(96px,11vw,160px) 0 0;position:relative}
.sec__head{display:grid;grid-template-columns:repeat(12,1fr);gap:28px;margin-bottom:clamp(44px,5vw,72px)}
.sec__head .label{grid-column:1/-1;margin-bottom:4px}
.sec__head .h2{grid-column:1/span 7}
.sec__head .lede{grid-column:8/span 5;align-self:end}

/* statement */
.statement{display:grid;grid-template-columns:repeat(12,1fr);gap:28px;padding-top:clamp(96px,11vw,160px)}
.statement__q{grid-column:1/span 11;font:400 clamp(30px,3.5vw,52px)/1.16 var(--serif);font-variation-settings:"opsz" 60;letter-spacing:-.012em}
.statement__q .mute{color:var(--ink-4)}
.statement__src{grid-column:1/span 6;margin-top:30px;font-size:14px;color:var(--ink-3)}

/* scrolly: read the formula */
.scrolly{display:grid;grid-template-columns:repeat(12,1fr);gap:28px;align-items:start}
.scrolly__sheet{grid-column:1/span 9;position:sticky;top:92px}
.scrolly__steps{grid-column:10/span 3}
.scrolly .sheet__body{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
.scrolly .formula__phase{width:30px;font-size:0}
.scrolly .formula__phase span{font-size:10.5px;margin:0}
.scrolly .formula__fn{width:120px;white-space:nowrap;font-size:12px}
.scrolly .formula__pct{width:108px}
.scrolly .formula__pct .bar{width:42px;margin-right:10px}
.scrolly .formula td{padding:5px 8px 5px 0}
.scrolly .formula__inci{white-space:nowrap}
.sstep{min-height:40vh;display:flex;flex-direction:column;justify-content:center;padding:24px 0;border-top:1px solid var(--rule);opacity:.35;transition:opacity .5s var(--ease)}
.sstep:first-child{min-height:26vh}
.sstep:last-child{min-height:50vh}
.sstep.is-on{opacity:1}
.sstep .label{margin-bottom:12px;color:var(--rouge)}
.sstep h3{font:400 27px/1.14 var(--serif);font-variation-settings:"opsz" 36;margin-bottom:12px}
.sstep p{color:var(--ink-2);font-size:16px}
.sstep .mono{display:block;margin-top:14px;font-size:12.5px;color:var(--ink-3)}

/* specimens */
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.5vw,36px)}
.specs .spec__meta{margin-top:10px;border-top:1px solid var(--rule-2);font-size:13px}
.specs .spec__meta div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--rule-2)}
.specs .spec__meta dt{color:var(--ink-3)}
.specs .spec__meta dd{text-align:right}
.specs .spec__note{margin-top:10px;font-size:13px;color:var(--ink-2)}

/* chemical space map */
.space{border-top:1px solid var(--ink);padding-top:20px}
.space svg{width:100%;height:auto;overflow:visible}
.space .ax{stroke:var(--rule);stroke-width:1}
.space .grid{stroke:var(--rule-2);stroke-width:1}
.space .tick{font:400 11px var(--mono);fill:var(--ink-3)}
.space .axt{font:500 10.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;fill:var(--ink-3)}
.space .band{fill:var(--ink);opacity:.028}
.space .bandt{font:400 15px var(--serif);fill:var(--ink-2);font-variation-settings:"opsz" 24}
.space .pt{stroke-width:1.2;transition:r .2s}
.space .pt--ref{fill:var(--paper);stroke:var(--ink-4)}
.space .pt--A{fill:#8FA5AD;stroke:#6E868F}.space .pt--B{fill:#C2A77C;stroke:#9C8259}.space .pt--C{fill:var(--rouge);stroke:var(--rouge)}
.space .pt.is-hot{stroke:var(--ink);stroke-width:1.6}
.space .lab{font:400 12px var(--sans);fill:var(--ink)}
.space .lab--ref{fill:var(--ink-3);font-size:11px}
.space .lead{stroke:var(--ink-4);stroke-width:.8}
.space g.p{cursor:default}
.space g.p:hover .pt{stroke:var(--ink);stroke-width:2}
.space__foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:18px;font-size:13px;color:var(--ink-3)}
.space__legend{display:flex;gap:22px;flex-wrap:wrap}
.space__legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:0}
.tip{position:fixed;z-index:50;pointer-events:none;background:var(--ink);color:var(--paper);font:400 12px/1.45 var(--mono);padding:8px 10px;opacity:0;transition:opacity .12s;max-width:260px}
.tip.is-on{opacity:1}

/* modules */
.mods{border-top:1px solid var(--ink)}
.mod{display:grid;grid-template-columns:repeat(12,1fr);gap:28px;padding:24px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.mod__name{grid-column:1/span 3;font:400 30px/1.1 var(--serif);font-variation-settings:"opsz" 40}
.mod__desc{grid-column:4/span 6;color:var(--ink-2);font-size:16px}
.mod__state{grid-column:10/span 3;justify-self:end;font-size:13px;color:var(--ink-2);display:flex;align-items:center;gap:9px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.dot--live{background:var(--leaf)}.dot--dev{background:var(--rouge)}.dot--plan{border:1px solid var(--ink-3)}

/* bench chart */
.chartwrap{display:grid;grid-template-columns:repeat(12,1fr);gap:28px;align-items:center}
.chart{grid-column:1/span 8;border-top:1px solid var(--ink);padding-top:22px}
.chart svg{width:100%;height:auto;overflow:visible}
.chart .axis{stroke:var(--rule);stroke-width:1}
.chart .tick{font:400 11px var(--mono);fill:var(--ink-3)}
.chart .band{fill:var(--rouge-2)}
.chart .edge{fill:none;stroke:var(--rouge);stroke-width:1;opacity:.45}
.chart .mid{fill:none;stroke:var(--rouge);stroke-width:1.5}
.chart .meas{fill:var(--paper-hi);stroke:var(--ink);stroke-width:1.2}
.chart .ann{font:400 12px var(--sans);fill:var(--ink-2)}
.chart__cap{margin-top:14px;font-size:13px;color:var(--ink-3)}
.chartwrap__text{grid-column:9/span 4}
.chartwrap__text p+p{margin-top:16px}

/* night section: science */
.night{background:var(--night);color:var(--bone);margin-top:clamp(110px,12vw,170px);padding:clamp(96px,11vw,150px) 0;position:relative;overflow:hidden}
.night .label{color:var(--bone-3)}
.night .lede,.night .body{color:var(--bone-2)}
.night a{color:var(--bone)}
.pipe{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--bone-2)}
.pipe__col{padding:22px 20px 26px 0;position:relative}
.pipe__col+.pipe__col{padding-left:20px;border-left:1px solid var(--nrule)}
.pipe__col+.pipe__col::before{content:"";position:absolute;left:-5px;top:28px;width:9px;height:9px;border-top:1px solid var(--bone-2);border-right:1px solid var(--bone-2);transform:rotate(45deg);background:var(--night)}
.pipe__col h3{font:500 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--bone-3);margin-bottom:14px}
.pipe__col p.t{font:400 23px/1.15 var(--serif);font-variation-settings:"opsz" 30;margin-bottom:12px;color:var(--bone)}
.pipe__col ul{list-style:none;font-size:14px;color:var(--bone-2)}
.pipe__col li{padding:4px 0}
.tag{display:inline-block;font:500 10px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:4px 7px;border-radius:2px;margin-left:6px;vertical-align:1px;white-space:nowrap}
.tag--today{background:rgba(120,170,135,.16);color:#9CC6A7}
.tag--plan{border:1px solid var(--nrule);color:var(--bone-3)}
.lab3d{display:grid;grid-template-columns:repeat(12,1fr);gap:28px;margin-top:clamp(72px,8vw,110px);align-items:center}
.viewer{grid-column:1/span 7;position:relative;aspect-ratio:7/5;border:1px solid var(--nrule);background:var(--night-2)}
.viewer__gl{position:absolute;inset:0}
.viewer__fallback{position:absolute;inset:12%;color:var(--bone-2)}
.viewer__fallback .mol{width:100%;height:100%}
.viewer.is-live .viewer__fallback{display:none}
.viewer__cap{position:absolute;left:18px;bottom:16px;font:400 12px/1.5 var(--mono);color:var(--bone-3)}
.viewer__tabs{position:absolute;right:14px;top:14px;display:flex;gap:6px}
.viewer__tabs button{font:500 12px/1 var(--sans);color:var(--bone-2);background:transparent;border:1px solid var(--nrule);border-radius:999px;padding:8px 12px;cursor:pointer}
.viewer__tabs button[aria-pressed="true"]{background:var(--bone);color:var(--night);border-color:var(--bone)}
.nvlist{grid-column:9/span 4}
.nvlist .label{margin-bottom:22px}
.nv{padding:18px 0;border-top:1px solid var(--nrule)}
.nv h3{font:400 25px/1.15 var(--serif);font-variation-settings:"opsz" 30;margin-bottom:8px;color:var(--bone)}
.nv p{font-size:15px;color:var(--bone-2)}
.nv .tag{margin-left:0;margin-top:10px}
.workloads{margin-top:20px;font:400 12.5px/1.6 var(--mono);color:var(--bone-3)}

/* principles + company */
.princ{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;border-top:1px solid var(--ink)}
.princ>div{padding-top:22px}
.princ h3{font:400 28px/1.12 var(--serif);font-variation-settings:"opsz" 36;margin-bottom:12px}
.princ p{color:var(--ink-2);font-size:16px}
.co{display:grid;grid-template-columns:repeat(12,1fr);gap:28px}
.co__text{grid-column:1/span 6}
.co__text p+p{margin-top:16px}
.co__facts{grid-column:8/span 5}
.co__facts .facts{grid-column:auto;font-size:14px}
.co__facts .facts div{grid-template-columns:110px 1fr}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:60px;border-top:1px solid var(--rule)}
.person{padding-top:20px}
.person__name{font:400 26px/1.15 var(--serif);font-variation-settings:"opsz" 30}
.person__role{font-size:13.5px;color:var(--ink-3);margin-top:5px}
.person__bio{font-size:15px;color:var(--ink-2);margin-top:12px}
.tbc [data-tbc]{background:rgba(156,58,40,.07);outline:1px dashed rgba(156,58,40,.4);outline-offset:2px}

/* faq */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:22px 0;font:400 23px/1.3 var(--serif);font-variation-settings:"opsz" 30}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 26px/1 var(--sans);color:var(--ink-3);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 24px;max-width:74ch;color:var(--ink-2)}

/* close + footer */
.close{position:relative;margin-top:clamp(110px,12vw,170px);padding:clamp(80px,10vw,140px) 0;border-top:1px solid var(--rule);overflow:hidden}
.close>.wrap{position:relative;z-index:1}
.close .field::before{-webkit-mask-image:radial-gradient(ellipse 50% 80% at 92% 70%,#000 15%,transparent 75%);mask-image:radial-gradient(ellipse 50% 80% at 92% 70%,#000 15%,transparent 75%);opacity:.11}
.close .label{margin-bottom:22px}
.close__t{font-size:clamp(56px,8vw,128px);max-width:12ch}
.close__row{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;margin-top:40px}
.close__mail{font:400 clamp(22px,2.4vw,34px)/1.2 var(--serif);text-decoration:none;border-bottom:1px solid var(--ink)}
.foot{border-top:1px solid var(--rule);padding:30px 0 40px;font-size:13px;color:var(--ink-3)}
.foot__in{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot a{color:var(--ink-3)}
.foot__legal strong{color:var(--ink-2);font-weight:500}

/* demo page */
.page-head{padding:clamp(48px,7vw,96px) 0 0}
.page-head .label{margin-bottom:18px}
.page-head .display{font-size:clamp(44px,6vw,92px);max-width:15ch}
.page-head .lede{max-width:62ch;margin-top:24px}
.demo{display:grid;grid-template-columns:330px minmax(0,1fr);gap:36px;align-items:start;margin-top:52px}
.brief{position:sticky;top:94px;border-top:1px solid var(--ink);padding-top:18px}
.brief fieldset{border:0;padding:0 0 20px;margin:0 0 18px;border-bottom:1px solid var(--rule-2)}
.brief legend{font:500 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-block;padding:8px 13px;border:1px solid var(--rule);border-radius:999px;font-size:14px;cursor:pointer;transition:all .15s;background:var(--paper-hi)}
.chip input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip input:focus-visible+span{outline:2px solid var(--rouge);outline-offset:2px}
.chip span:hover{border-color:var(--ink)}
.field-row{display:flex;align-items:center;gap:10px;font-size:14px}
.field-row input[type=number]{width:110px;height:40px;border:1px solid var(--rule);border-radius:2px;background:var(--paper-hi);padding:0 10px;font:400 15px var(--mono)}
.brief .hint{font-size:12.5px;color:var(--ink-3);margin-top:8px}
.demo__out{min-height:600px}
.demo .sheet__body{grid-template-columns:1fr}
.demo .sheet__main{border-right:0;border-bottom:1px solid var(--rule)}
.demo .sheet__aside{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px;padding-top:4px}
.demo .sheet__block{border-bottom:0}
.demo .sheet__block--notes{grid-column:1/-1;border-top:1px solid var(--rule-2)}
.demo .notes{columns:2;column-gap:32px}
.demo .notes li{break-inside:avoid}
.demo__note{margin-top:18px;font-size:13.5px;color:var(--ink-3);max-width:80ch}
.legal{max-width:760px;padding:clamp(48px,7vw,96px) 0 40px}
.legal h1{margin-bottom:28px}
.legal h2{font:400 26px/1.2 var(--serif);margin:36px 0 10px}
.legal p,.legal li{color:var(--ink-2);margin-bottom:10px}

/* motion hooks: hidden only when JS + motion allowed */
.motion .rv{opacity:0;transform:translateY(16px)}
.motion .hero__title .ln{overflow:hidden}
@media (prefers-reduced-motion:reduce){.field::before{transform:none!important}}

/* responsive */
@media (max-width:1100px){
  .sheet__body{grid-template-columns:1fr}
  .sheet__main{border-right:0;border-bottom:1px solid var(--rule)}
  .sheet__aside{display:grid;grid-template-columns:repeat(2,1fr);column-gap:28px}
  .pipe{grid-template-columns:repeat(2,1fr)}
  .pipe__col:nth-child(odd){padding-left:0;border-left:0}
  .pipe__col:nth-child(odd)::before{display:none}
  .pipe__col{border-bottom:1px solid var(--nrule)}
  .hero__spec{grid-column:6/span 7}
  .facts{grid-column:1/-1}
}
@media (max-width:860px){
  .nav__links li:not(:last-child){display:none}
  .hero__grid,.sec__head,.statement,.chartwrap,.co,.scrolly,.lab3d{grid-template-columns:1fr}
  .hero__lede,.hero__spec,.facts,.sec__head .label,.sec__head .h2,.sec__head .lede,.statement__q,.statement__src,.chart,.chartwrap__text,.co__text,.co__facts,.scrolly__sheet,.scrolly__steps,.viewer,.nvlist{grid-column:auto}
  .hero__top{flex-direction:column;gap:6px}
  .hero__spec{max-width:360px}
  .scrolly__sheet{position:relative;top:auto}
  .sstep,.sstep:first-child,.sstep:last-child{min-height:0;opacity:1}
  .sheet[data-active] [data-zone]{opacity:1}
  .strip__bar{height:44px}
  .seg__lab{display:none}
  .strip__head{margin-bottom:18px}
  .specs{grid-template-columns:1fr 1fr}
  .mod{grid-template-columns:1fr;gap:6px}
  .mod__name,.mod__desc,.mod__state{grid-column:auto;justify-self:start}
  .princ,.team{grid-template-columns:1fr}
  .pipe{grid-template-columns:1fr}
  .pipe__col,.pipe__col+.pipe__col{padding-left:0;border-left:0}
  .pipe__col+.pipe__col::before{display:none}
  .sheet__aside{grid-template-columns:1fr}
  .sheet__head{flex-direction:column;gap:6px}
  .formula__fn{display:none}
  .formula__phase{width:auto;font-size:0}
  .formula__phase span{font-size:10.5px;margin:0}
  .formula__pct{width:auto}
  .formula__pct .bar{width:40px;margin-right:8px}
  .space,.chart{overflow-x:auto}
  .space svg{min-width:720px}
  .chart svg{min-width:620px}
  .viewer{aspect-ratio:1/1}
  .demo{grid-template-columns:1fr}
  .brief{position:static}
  .demo .sheet__aside{grid-template-columns:1fr}
  .demo .notes{columns:1}
}
@media (max-width:520px){.specs{grid-template-columns:1fr}}
.strip{overflow-x:clip}
.seg:nth-last-child(-n+8) .seg__tip{left:auto;right:0}
.scrolly__sheet,.scrolly__steps,.hero__lede,.hero__spec{min-width:0}
@media (max-width:860px){.scrolly .formula__inci{white-space:normal}.scrolly .sheet__body{grid-template-columns:1fr}.strip__bar{overflow:hidden}}

/* ===== v3: brand + nature ===== */
.seg--C{--c:#B26A4A}
.hero--photo{position:relative;height:min(92svh,900px);min-height:600px;padding:0;overflow:hidden;background:#E6DFD3}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 55%}
.hero--photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(243,238,230,.62) 0%,rgba(243,238,230,.18) 46%,rgba(243,238,230,0) 70%),linear-gradient(0deg,rgba(243,238,230,.35) 0%,rgba(243,238,230,0) 30%)}
.hero--photo .hero__inner{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(44px,7vh,92px)}
.hero--photo .label{margin-bottom:22px;color:var(--ink-2)}
.hero--photo .hero__title{font-size:clamp(64px,10vw,156px);line-height:.9;letter-spacing:-.03em}
.hero--photo .hero__title .ln{display:block}
.hero__sub{margin-top:24px;font:400 clamp(20px,1.9vw,27px)/1.3 var(--serif);font-variation-settings:"opsz" 30;color:var(--ink-2);max-width:28ch}
.intro{display:grid;grid-template-columns:repeat(12,1fr);gap:28px;padding-top:clamp(72px,8vw,120px);align-items:start}
.intro__text{grid-column:1/span 7}
.intro__lead{font:400 clamp(28px,3vw,44px)/1.15 var(--serif);font-variation-settings:"opsz" 48;letter-spacing:-.01em;margin-bottom:22px}
.intro__text .lede{margin-bottom:14px}
.intro__text .body{max-width:62ch}
.intro .facts{grid-column:9/span 4;margin-top:8px}
/* botanicals */
.bots{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,28px)}
.bot__img{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--paper-lo)}
.bot__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.bot:hover .bot__img img{transform:scale(1.035)}
.bot__img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(243,238,230,.97) 0%,rgba(243,238,230,.86) 26%,rgba(243,238,230,0) 52%);pointer-events:none}
.bot__mol{position:absolute;z-index:1;left:8%;right:8%;bottom:4%;height:30%;display:grid;place-items:center;color:var(--ink)}
.bot__mol .mol{width:100%;height:100%}
.bot figcaption{padding-top:16px}
.bot__plant{font-size:13px;color:var(--ink-3)}
.bot__active{font:400 30px/1.1 var(--serif);font-variation-settings:"opsz" 36;margin:6px 0 10px}
.bot__text{font-size:15px;color:var(--ink-2);min-height:4.8em}
.bot__meta{margin-top:12px;border-top:1px solid var(--rule-2);font-size:12.5px}
.bot__meta div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--rule-2)}
.bot__meta dt{color:var(--ink-3)}
/* formula cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,28px)}
.card__img{aspect-ratio:4/5;overflow:hidden;background:var(--paper-lo);margin-bottom:16px}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.card:hover .card__img img{transform:scale(1.035)}
.card__fmt{font:400 12px/1.5 var(--mono);color:var(--ink-3)}
.card__name{font:400 28px/1.1 var(--serif);font-variation-settings:"opsz" 36;margin:8px 0 10px}
.card__actives{font-size:14px;color:var(--ink-2);min-height:4.5em}
.card__foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--rule-2);font-size:13px}
.card__state{display:flex;align-items:center;gap:8px;color:var(--ink-2)}
.card__foot a{text-decoration:none;color:var(--ink)}
.card__foot a:hover{color:var(--rouge)}
/* photo band (statement) */
.band{position:relative;margin-top:clamp(110px,12vw,170px);padding:clamp(110px,13vw,190px) 0;overflow:hidden}
.band__img{position:absolute;inset:-12% 0 0 0;width:100%;height:112%;object-fit:cover;object-position:50% 100%}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(243,238,230,.88) 0%,rgba(243,238,230,.72) 48%,rgba(243,238,230,.25) 100%)}
.band .statement{position:relative;z-index:1;padding-top:0}
.band .statement__q .mute{color:var(--ink-3)}
.band .statement__src{color:var(--ink-2)}
/* studio image in company */
.studio{margin:0 0 clamp(48px,6vw,80px);aspect-ratio:21/9;overflow:hidden;background:var(--paper-lo)}
.studio img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.co+.princ{margin-top:clamp(56px,6vw,88px)}
.princ{margin-top:clamp(56px,6vw,88px)}
/* night: olive black, sage accents */
.tag--today{background:rgba(160,180,140,.16);color:#AFC39C}
.viewer{background:var(--night-2)}
@media (max-width:1100px){.bots,.cards{grid-template-columns:repeat(2,1fr)}.intro__text{grid-column:1/span 8}.intro .facts{grid-column:1/-1}}
@media (max-width:860px){
  .intro{grid-template-columns:1fr}.intro__text,.intro .facts{grid-column:auto}
  .hero--photo{height:86svh;min-height:520px}
  .hero__img{object-position:68% 50%}
  .hero--photo::after{background:linear-gradient(0deg,rgba(243,238,230,.85) 0%,rgba(243,238,230,.35) 45%,rgba(243,238,230,0) 70%)}
  .studio{aspect-ratio:4/3}
}
@media (max-width:560px){.bots,.cards{grid-template-columns:1fr}}