/* Millhouse International · website stylesheet
   Built on the brand book v1.2 (2 October 2026): Night and Stone, Slate for the mark, Neue Montreal, one easing curve.
   The grammar is statement, number, proof: one statement per screen, the number that backs it, the proof one click deep. */

/* ---------- fonts ----------
   Neue Montreal (Pangram Pangram) is the brand face. Its webfont licence is roadmap Asset 3; until the licensed woff2 files are
   added here, the stack names the family (it renders where the face is installed) and falls back to Geist, the open face the
   brand book itself ships as the fallback. To switch on the licensed face, drop the files in assets/fonts/ and uncomment:
@font-face{font-family:"Neue Montreal";src:url(/assets/fonts/NeueMontreal-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Neue Montreal";src:url(/assets/fonts/NeueMontreal-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"PP Neue Montreal Mono";src:url(/assets/fonts/PPNeueMontrealMono-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
*/
@font-face{font-family:"Geist";src:url(/assets/fonts/geist-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist";src:url(/assets/fonts/geist-medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/assets/fonts/geist-mono-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/assets/fonts/geist-mono-medium.woff2) format("woff2");font-weight:500;font-display:swap}
/* While Geist loads, the system face is drawn to Geist's measure (3.1 % wider than Arial and Helvetica, Geist's ascent and descent),
   so the swap does not move the layout. tools/cls.mjs measures it. */
@font-face{font-family:"Geist Fallback";src:local("Arial"),local("Helvetica"),local("Roboto");size-adjust:103.1%;ascent-override:97.5%;descent-override:28.6%;line-gap-override:0%}
@font-face{font-family:"Geist Mono Fallback";src:local("Menlo"),local("Courier New"),local("Roboto Mono");size-adjust:99.7%;ascent-override:100.8%;descent-override:29.6%;line-gap-override:0%}

/* ---------- tokens ---------- */
:root{
  --night:#0F1A24; --night2:#16222E; --stone:#F3F4F2; --stone2:#E7E9E7; --slate:#B3C0CC; --slate2:#8A9AA8; --graphite:#3C3C3C; --taupe:#8A8378;
  --wheat:#6B5B49; --maize:#786443; --cane:#4E6660; --oil:#4F5236;
  --ink:var(--night); --bg:var(--stone);
  --rule:rgba(15,26,36,.16); --rule-strong:rgba(15,26,36,.5); --dim:rgba(15,26,36,.64); --dim2:rgba(15,26,36,.4); --panel:var(--stone2);
  --measure:40ch; /* the book: under 65 characters a line, never justified, never hyphenated. Measured in Geist with tools/measure.mjs: 42ch let the longest lines reach 72; at 40ch the median line is 52 characters and the longest 66 */
  --text:"Neue Montreal","Geist","Geist Fallback","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"PP Neue Montreal Mono","Geist Mono","Geist Mono Fallback",ui-monospace,"SF Mono",Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --gutter:clamp(20px,3vw,40px); --container:85rem; --gap:clamp(1rem,2vw,2rem);
  --sec:clamp(4.5rem,10vw,10rem); --sec-s:clamp(3rem,6vw,6rem);
  --navh:4.5rem;
  --fs-statement:clamp(2.75rem,5.9vw,5.5rem); --fs-h2:clamp(2rem,3.8vw,3.5rem); --fs-h3:clamp(1.5rem,2.5vw,2.25rem);
  --fs-sub:clamp(1.125rem,1.7vw,1.5rem); --fs-lead:clamp(1.0625rem,1.3vw,1.25rem); --fs-body:1rem; --fs-small:.9375rem; --fs-tiny:.8125rem; --fs-label:.75rem;
  color-scheme:light;
}

.night{--ink:var(--stone);--bg:var(--night);--rule:rgba(243,244,242,.16);--rule-strong:rgba(243,244,242,.5);--dim:rgba(243,244,242,.62);--dim2:rgba(243,244,242,.42);--panel:var(--night2)}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--navh) + 1.5rem)} /* a focused or linked element stops below the sticky bar */
body{margin:0;background:var(--stone);color:var(--night);font-family:var(--text);font-size:var(--fs-body);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"kern" 1;overflow-x:clip}
body.nav-open{overflow:hidden}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
h1,h2,h3,h4{font-weight:400;font-size:inherit;line-height:inherit}
ul,ol{padding:0;list-style:none}
strong,b{font-weight:500}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tn,.num,.v,.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"kern" 1}
.skip{position:absolute;left:var(--gutter);top:-3rem;background:var(--night);color:var(--stone);padding:.6rem 1rem;border-radius:999px;z-index:100}
.skip:focus{top:.75rem}
main:focus{outline:none}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--container);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.sec{padding-top:var(--sec);padding-bottom:var(--sec);background:var(--bg);color:var(--ink)}
.sec.stone,.stone{--ink:var(--night);--bg:var(--stone);--rule:rgba(15,26,36,.16);--rule-strong:rgba(15,26,36,.5);--dim:rgba(15,26,36,.64);--dim2:rgba(15,26,36,.4);--panel:var(--stone2)}
.sec.s{padding-top:var(--sec-s);padding-bottom:var(--sec-s)}
.sec.pt0{padding-top:0} .sec.pb0{padding-bottom:0}
.sec.rule>.wrap::before{content:"";display:block;border-top:1px solid var(--rule);margin-bottom:clamp(2rem,4vw,3rem)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.grid.end{align-items:end} .grid.center{align-items:center} .grid.start{align-items:start}
.c1{grid-column-end:span 1}.c2{grid-column-end:span 2}.c3{grid-column-end:span 3}.c4{grid-column-end:span 4}.c5{grid-column-end:span 5}.c6{grid-column-end:span 6}.c7{grid-column-end:span 7}.c8{grid-column-end:span 8}.c9{grid-column-end:span 9}.c10{grid-column-end:span 10}.c12{grid-column-end:span 12}
.s2{grid-column-start:2}.s3{grid-column-start:3}.s4{grid-column-start:4}.s5{grid-column-start:5}.s6{grid-column-start:6}.s7{grid-column-start:7}.s8{grid-column-start:8}.s9{grid-column-start:9}
.hair{border:0;border-top:1px solid var(--rule);margin:0;width:100%}
.hair.strong{border-top-color:var(--rule-strong)}
.stack{display:flex;flex-direction:column;gap:1rem} .stack.g2{gap:2rem} .stack.g3{gap:3rem} .stack.g05{gap:.5rem}
.mt1{margin-top:1rem}.mt2{margin-top:2rem}.mt3{margin-top:3rem}.mt4{margin-top:4rem}.mt6{margin-top:6rem}
.mb1{margin-bottom:1rem}.mb2{margin-bottom:2rem}.mb3{margin-bottom:3rem}.mb4{margin-bottom:4rem}
.row{display:flex;gap:var(--gap);align-items:center;flex-wrap:wrap} .row.between{justify-content:space-between}
@media (max-width:900px){.grid>[class*=" c"],.grid>[class^="c"]{grid-column:1/-1}.t-c6{grid-column:span 6!important}}
@media (max-width:600px){.t-c6{grid-column:1/-1!important}}

/* ---------- type ---------- */
.eyebrow{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);line-height:1.4;font-weight:500}
.night .eyebrow{color:var(--slate)}
.eyebrow .dash{margin:0 .5em;opacity:.6}
.statement{font-size:var(--fs-statement);line-height:1.02;letter-spacing:-.025em;text-wrap:balance}
.statement.long{font-size:clamp(2.5rem,5vw,4.5rem)} /* a long one-sentence statement at the foot of the book's 72 to 96 px range, so it keeps to two lines */
.h2{font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
.h3{font-size:var(--fs-h3);line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
.sub{font-size:var(--fs-sub);line-height:1.3;letter-spacing:-.012em;text-wrap:pretty;max-width:var(--measure)}
.lead{font-size:var(--fs-lead);line-height:1.45;letter-spacing:-.005em;text-wrap:pretty;max-width:var(--measure)}
.p,.prose p{font-size:var(--fs-body);line-height:1.55;max-width:var(--measure);text-wrap:pretty}
.prose p+p{margin-top:1em}
.small{font-size:var(--fs-small);line-height:1.5}
.tiny{font-size:var(--fs-tiny);line-height:1.5}
p.tiny,p.small{max-width:var(--measure)}
.dim{color:var(--dim)} .dim2{color:var(--dim2)}
.mono{font-family:var(--mono);letter-spacing:.02em}
.measure{max-width:34ch} .measure-w,.measure-p{max-width:var(--measure)}
.balance{text-wrap:balance}
.nw{white-space:nowrap} /* tools/build.py wraps "48-hour" in it: neither face has a non-breaking hyphen */
.caption{font-size:var(--fs-tiny);color:var(--dim);line-height:1.5;margin-top:.75rem}
.caption b{font-weight:500;color:var(--ink)}

/* ---------- the mark and the wordmark ---------- */
.wm{height:1.375rem;width:9.6rem;flex:none}
.wm .wm-wheel{transform-box:fill-box;transform-origin:center}
.turn .wm .wm-wheel,.wheel.turn{animation:turn 1.2s var(--ease) 1 both}
@keyframes turn{from{transform:rotate(0deg)}to{transform:rotate(60deg)}}
.wheel{width:2rem;height:2rem}
.draw{display:block;pointer-events:none}

/* ---------- buttons and links ---------- */
.btn{display:inline-flex;align-items:center;gap:.7em;border-radius:999px;background:var(--night);color:var(--stone);font-weight:500;font-size:var(--fs-small);line-height:1;padding:.95em 1.5em 1em;white-space:nowrap;transition:background .25s var(--ease),color .25s var(--ease),transform .4s var(--ease)}
.btn:hover{opacity:.84}
.night .btn{background:var(--stone);color:var(--night)}
.btn .arr{width:.85em;height:.6em;transition:transform .4s var(--ease)} .btn:hover .arr{transform:translateX(.2em)}
.link{display:inline-flex;align-items:center;gap:.5em;font-size:var(--fs-small);font-weight:500;border-bottom:1px solid var(--rule-strong);padding-bottom:.15em;transition:border-color .25s}
.link:hover{border-bottom-color:currentColor}
.link .arr{width:.85em;height:.6em;transition:transform .4s var(--ease)} .link:hover .arr{transform:translateX(.2em)}
.arr{display:inline-block;flex:none}

/* ---------- navigation ---------- */
.nav{position:sticky;top:0;z-index:60;background:var(--stone);color:var(--night);height:var(--navh);border-bottom:1px solid var(--rule)}
.nav .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.nav-brand{display:inline-flex;align-items:center;color:var(--night)}
.nav-links{display:flex;align-items:center;gap:clamp(1.25rem,2.4vw,2.25rem)}
.nav-links a{font-size:var(--fs-small);padding:.4rem 0;border-bottom:1px solid transparent;transition:border-color .25s}
.nav-links a:hover,.nav-links a[aria-current=page]{border-bottom-color:currentColor}
.nav-cta{display:flex;align-items:center;gap:1rem}
.burger{display:none;width:2.75rem;height:2.75rem;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--rule-strong)}
.burger span{display:block;width:1.1rem;height:1px;background:currentColor;position:relative;transition:transform .4s var(--ease),background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .4s var(--ease),top .4s var(--ease)}
.burger span::before{top:-5px} .burger span::after{top:5px}
.nav-open .burger span{background:transparent} .nav-open .burger span::before{top:0;transform:rotate(45deg)} .nav-open .burger span::after{top:0;transform:rotate(-45deg)}
@media (max-width:900px){
  .burger{display:inline-flex}
  .nav-menu{position:fixed;inset:var(--navh) 0 0 0;background:var(--night);color:var(--stone);display:flex;flex-direction:column;justify-content:space-between;padding:2.5rem var(--gutter) 2rem;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s .5s}
  .nav-open .nav-menu{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .nav-links{flex-direction:column;align-items:flex-start;gap:0}
  .nav-links a{font-size:clamp(2rem,8vw,3rem);letter-spacing:-.025em;line-height:1.1;padding:.35em 0;border:0}
  .nav-links a[aria-current=page]{color:var(--slate)}
  .nav-cta .btn{background:var(--stone);color:var(--night)}
  .nav-menu .nav-foot{color:var(--slate);font-size:var(--fs-tiny)}
}
@media (min-width:901px){.nav-menu{display:contents}.nav-menu .nav-foot{display:none}}

/* ---------- hero (home) ---------- */
.hero{background:var(--stone);color:var(--night);padding-top:clamp(3rem,7vw,7rem)}
.hero .statement{max-width:12ch}
.hero-grid{align-items:start;margin-top:1.5rem}
.hero-sub{padding-top:clamp(.2rem,1vw,1rem)}
.hero-band{background:var(--night);color:var(--stone);margin-top:clamp(2.5rem,5vw,4rem);padding:clamp(2.5rem,5vw,4.5rem) 0 0;position:relative;overflow:clip}
.hero-band .wrap{position:relative}
.hero-list{display:flex;flex-direction:column;gap:0;align-self:end}
.hero-list .lbl{font-size:var(--fs-small);line-height:1.4;margin-bottom:2rem;max-width:22ch}
.hero-list li{border-top:1px solid var(--rule);padding:.8rem 0 .9rem;font-size:var(--fs-small);line-height:1.35;max-width:22ch}
.hero-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--night2)}
.hero-media video,.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(var(--s,1));transform-origin:50% 50%;will-change:transform}
.hero-band .grid{align-items:end;padding-bottom:clamp(2.5rem,5vw,4.5rem)}
.hero-band .hero-drawing{position:absolute;right:-20%;bottom:-70%;width:min(80vw,900px);height:min(80vw,900px);color:var(--slate);z-index:0}
@media (max-width:900px){.hero .statement{max-width:none}.hero-list{order:2;margin-top:2rem}.hero-media{order:1}.hero-grid{margin-top:1rem}.hero-sub{padding-top:0}}

/* page heroes: a statement over Night or Stone, a photograph or clip beneath */
.phero{padding-top:clamp(3rem,7vw,7rem);padding-bottom:0;position:relative;overflow:clip}
.phero .statement{max-width:none}
.phero .media{margin:clamp(2.5rem,6vw,5rem) calc(50% - 50vw) 0;width:100vw;position:relative;aspect-ratio:21/9;overflow:hidden;background:var(--night2)}
.phero .media.tall{aspect-ratio:16/9}
.phero .media video,.phero .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(var(--s,1));transform-origin:50% 50%}
.phero-art{position:relative;height:clamp(13rem,34vw,32rem);overflow:hidden;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.phero.night{padding-top:0}
.phero-art .phero-drawing{position:absolute;left:50%;top:50%;width:min(118vw,1380px);height:min(118vw,1380px);transform:translate(-50%,-55%);color:var(--slate)}
.phero.night .wrap{position:relative;z-index:1}
.phero .pad{padding-bottom:clamp(3.5rem,9vw,8rem)}
@media (max-width:900px){.phero .statement{max-width:none}.phero .media{aspect-ratio:4/3}.phero-art{height:62vw}.phero-art .phero-drawing{width:150vw;height:150vw;transform:translate(-50%,-56%)}}

/* ---------- numbers ---------- */
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:2.25rem 0}
.num .v{font-size:clamp(2.5rem,5.2vw,4.75rem);line-height:1;letter-spacing:-.04em}
.num .v small{font-size:.38em;letter-spacing:0;margin-left:.15em;color:var(--dim)}
.num{cursor:default}
.num .k{margin-top:.9rem;font-size:var(--fs-small);line-height:1.4;color:var(--dim);max-width:24ch}
.source{font-size:var(--fs-tiny);color:var(--dim);margin-top:1rem;max-width:var(--measure)}
@media (max-width:900px){.nums{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.5rem}}

/* ---------- clients: the logos in one tone, drifting slowly (the founder's ask, 6 October 2026); still under reduced motion ---------- */
.logos{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1rem clamp(2rem,4vw,4rem);padding:2.25rem 0;border-bottom:1px solid var(--rule)}
.marquee{overflow:hidden;min-width:0}
.track{display:flex;align-items:center;width:max-content;animation:drift 48s linear infinite}
.track li{flex:none;margin-right:clamp(2.5rem,5vw,5rem)}
.track img{height:2rem;width:auto;opacity:.72}
.logos:hover .track{animation-play-state:paused}
@keyframes drift{to{transform:translateX(-50%)}}
@media (max-width:900px){.logos{grid-template-columns:1fr}.track img{height:1.6rem}}
@media (prefers-reduced-motion:reduce){.track{animation:none;flex-wrap:wrap;width:auto;row-gap:1rem}.track li[aria-hidden=true]{display:none}}

/* ---------- photographs: flat corners, no shadows, no frames ---------- */
.ph{position:relative;overflow:hidden;background:var(--stone2);aspect-ratio:var(--ar,3/2)}
.ph img,.ph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.night .ph{background:var(--night2)}
.ph.r45{--ar:4/5}.ph.r43{--ar:4/3}.ph.r11{--ar:1/1}.ph.r169{--ar:16/9}.ph.r219{--ar:21/9}.ph.r32{--ar:3/2}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start}
.band{background:var(--stone);color:var(--night)}
.band .bleed{position:relative;overflow:hidden;aspect-ratio:21/9;background:var(--night2)}
.band img,.band video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band .pcap{display:block;text-align:right;padding:.9rem var(--gutter) 1rem;font-size:.6875rem;color:var(--dim);font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase}
@media (max-width:900px){.band .bleed{aspect-ratio:4/3}}

/* ---------- the idea (statement + two photographs + a paragraph) ---------- */
.idea-head{display:flex;flex-direction:column;justify-content:flex-end}
.idea-body{border-top:1px solid var(--rule);margin-top:clamp(3rem,6vw,6rem);padding-top:clamp(2rem,4vw,3rem)}

/* ---------- stacked Night panels: the promise hierarchy ---------- */
.panels{position:relative}
.panel{position:sticky;top:var(--navh);min-height:calc(100vh - var(--navh));background:var(--bg);color:var(--ink);display:flex;flex-direction:column;justify-content:space-between;padding:clamp(2.5rem,5vw,4.5rem) 0 0;overflow:clip}
.panel+.panel{border-top:1px solid var(--rule)}
.panel .wrap{display:flex;flex-direction:column;flex:1}
.panel-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);flex:1;align-items:start}
.panel-title{grid-column:span 6;display:flex;flex-direction:column;justify-content:space-between;min-height:100%}
.panel-title h2{font-size:clamp(3rem,6.4vw,6rem);line-height:1;letter-spacing:-.03em}
.panel-title .sub-k{font-size:var(--fs-small);line-height:1.35;color:var(--dim);margin-top:3rem;max-width:22ch}
.panel-visual{grid-column:8/span 5;align-self:stretch;display:flex;flex-direction:column;gap:.9rem}
.vis-frame{flex:1;min-height:min(44vh,28rem);border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:clamp(1.5rem,3vw,2.75rem)}
.vis-note{display:flex;justify-content:space-between;gap:1rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);line-height:1.5}
.panel-bottom{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);border-top:1px solid var(--rule);padding:clamp(1.5rem,3vw,2.5rem) 0 clamp(2rem,4vw,3.5rem);margin-top:clamp(2rem,4vw,3.5rem)}
.panel-bottom p{grid-column:span 6;font-size:var(--fs-lead);line-height:1.4;max-width:var(--measure)}
.panel-bottom .act{grid-column:8/span 5;display:flex;align-items:flex-start}
@media (max-width:900px){.panel{position:relative;top:auto;min-height:0}.panel-title{grid-column:1/-1}.panel-title .sub-k{margin-top:1.5rem}.panel-visual{grid-column:1/-1}.vis-frame{min-height:17rem}.panel-bottom p,.panel-bottom .act{grid-column:1/-1}}

/* the three visuals: a trace against a target, the drawing, a certificate. Night on Stone for figures; Slate for the grid. */
.trace{width:100%;color:var(--stone)}
.trace .big{font-size:clamp(3rem,6vw,5.5rem);line-height:1;letter-spacing:-.04em}
.trace .big small{font-size:.32em;letter-spacing:0;margin-left:.2em;color:var(--slate)}
.trace svg{width:100%;height:auto;margin-top:1.5rem}
.coords{position:absolute;inset:0;color:var(--slate)}
.coords .draw{width:100%;height:100%}
.cert{width:100%;background:var(--stone);color:var(--night);padding:1.5rem;font-size:var(--fs-tiny);line-height:1.5;max-width:30rem;margin:0 auto 1.25rem}
.cert .ch{display:flex;justify-content:space-between;align-items:center;padding-bottom:1rem;border-bottom:1px solid rgba(15,26,36,.5)}
.cert .ch .wm{height:1rem;width:7rem}
.cert dl{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.5rem;margin-top:1rem}
.cert dt{color:rgba(15,26,36,.64)} .cert dd{font-family:var(--mono);font-size:.75rem;word-break:break-word}
.cert .ch .mono{font-size:.6875rem;letter-spacing:.06em;text-align:right}
.cert .res{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(15,26,36,.16);font-size:var(--fs-sub);letter-spacing:-.01em;line-height:1.2}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.step{border-top:1px solid var(--rule-strong);padding-top:1.25rem;display:flex;flex-direction:column;gap:1rem}
.step .n{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;color:var(--dim)}
.step h3{font-size:var(--fs-h3);line-height:1.1;letter-spacing:-.02em;max-width:10ch}
.step p{font-size:var(--fs-small);line-height:1.5;color:var(--ink);max-width:28ch}
.steps.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.steps.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps.six{grid-template-columns:repeat(6,minmax(0,1fr))}
.steps.six .step h3{font-size:var(--fs-sub)}
.grid.two{grid-template-columns:1fr 1fr}
.lgrid.two{grid-template-columns:1fr 1fr}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
@media (max-width:1100px){.steps.six{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.steps,.steps.three,.steps.six{grid-template-columns:repeat(2,minmax(0,1fr))}.steps .step p,.steps .step h3{max-width:none}}
@media (max-width:600px){.steps,.steps.two,.steps.three,.steps.six{grid-template-columns:1fr}.grid.two{grid-template-columns:1fr}.lgrid.two{grid-template-columns:1fr}.trio{grid-template-columns:1fr 1fr}.trio .ph:last-child{grid-column:1/-1;--ar:3/2}}

/* stacked rows: a title, a description and a photograph, as the practice page lists them */
.rows .rowi{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);border-top:1px solid var(--rule);padding:clamp(1.75rem,3.5vw,3rem) 0;align-items:start}
.rows .rowi:last-child{border-bottom:1px solid var(--rule)}
.rows .n{grid-column:span 1;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;color:var(--dim);padding-top:.5rem}
.rows h3{grid-column:span 4;font-size:var(--fs-h3);letter-spacing:-.02em;line-height:1.1;max-width:12ch}
.rows .d{grid-column:span 4;font-size:var(--fs-small);line-height:1.5;max-width:40ch}
.rows .ph{grid-column:10/span 3;--ar:4/3}
.rows.two h3{grid-column:span 5;font-size:clamp(1.25rem,1.9vw,1.75rem);max-width:none}.rows.two .d{grid-column:span 6}
@media (max-width:900px){.rows .n{grid-column:span 2}.rows h3,.rows.two h3{grid-column:span 10}.rows .d,.rows.two .d{grid-column:3/span 10}.rows .ph{grid-column:3/span 10}}

/* ---------- product cards: the staple tone as ground, nothing lifts ---------- */
.cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap)}
.card{position:relative;aspect-ratio:1/1.15;padding:1.4rem;display:flex;flex-direction:column;color:var(--stone);background:var(--night);min-width:0}
.card .k{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.card .t{margin-top:auto;font-size:clamp(1.25rem,1.9vw,1.75rem);line-height:1.1;letter-spacing:-.02em;text-wrap:balance;text-decoration:underline transparent;text-underline-offset:.14em;text-decoration-thickness:1px;transition:text-decoration-color .3s}
.card:hover .t{text-decoration-color:currentColor}
.card.wheat{background:var(--wheat)}.card.maize{background:var(--maize)}.card.cane{background:var(--cane)}.card.oil{background:var(--oil)}.card.lab{background:var(--night)}
.cards.big .card{aspect-ratio:auto;min-height:20rem;padding:1.75rem}
.cards.big .card .t{font-size:clamp(1.5rem,2.2vw,2.25rem)}
/* the longest word on a card, "Fortifications", is 5.75 em: the title never exceeds 16 % of the card's inner width (container units),
   so it fits in either face at every width; min() keeps the sizes above wherever they already fit */
@supports (width:1cqi){.card{container-type:inline-size}.card .t{font-size:min(clamp(1.25rem,1.9vw,1.75rem),16cqi)}.cards.big .card .t{font-size:min(clamp(1.5rem,2.2vw,2.25rem),16cqi)}}
@media (max-width:1100px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.card:last-child:nth-child(odd){grid-column:1/-1}.cards:not(.big) .card:last-child:nth-child(odd){aspect-ratio:2/1}
  .cards.big .card{padding:1.4rem;min-height:15rem}}  /* phones: a big card keeps the small card's padding, and no aspect ratio (Chromium turned its min-height into a 640 px min-width) */

/* ---------- work list ---------- */
.work li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);border-top:1px solid var(--rule);padding:clamp(1.5rem,3vw,2.5rem) 0}
.work li:last-child{border-bottom:1px solid var(--rule)}
.work .y{grid-column:span 2;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;color:var(--dim);padding-top:.5rem}
.work h3{grid-column:span 4;font-size:var(--fs-h3);letter-spacing:-.02em;line-height:1.1}
.work h3 small{display:block;font-size:var(--fs-small);letter-spacing:0;color:var(--dim);margin-top:.5rem}
.work p{grid-column:7/span 6;font-size:var(--fs-small);line-height:1.5;max-width:var(--measure)}
@media (max-width:900px){.work .y{grid-column:span 3}.work h3{grid-column:span 9}.work p{grid-column:4/span 9}}
/* the press list: the work list with a body of several paragraphs, a quote in the founder's words and one link per article */
.press .d{grid-column:7/span 6;font-size:var(--fs-small);line-height:1.5}
.press .d p{max-width:var(--measure)} .press .d p+p{margin-top:1em}
.press h3{max-width:none;font-size:clamp(1.25rem,1.9vw,1.75rem)}  /* quoted article titles run long; the sub size keeps them to two or three lines */
@media (max-width:900px){.press .d{grid-column:4/span 9}}
@media (max-width:600px){.work .y,.work h3,.work p,.press .d{grid-column:1/-1}.work .y{padding-top:0}.work h3{margin-top:-.5rem}}  /* phones: the label sits above the title instead of wrapping word by word in a three-column gutter */

/* ---------- faq ---------- */
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:2rem;padding:1.25rem 0;font-size:var(--fs-sub);letter-spacing:-.012em;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;width:1.75rem;height:1.75rem;position:relative;align-self:center}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:.9rem;height:1px;background:currentColor;transform:translate(-50%,-50%);transition:transform .35s var(--ease)}
.faq summary .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary .pm::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq .a{padding:0 0 1.5rem;font-size:var(--fs-small);line-height:1.55;max-width:var(--measure);color:var(--ink)}
.faq .a a{border-bottom:1px solid var(--rule-strong)}

/* ---------- tables: hairlines only ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-small);line-height:1.45}
.tbl th{text-align:left;font-weight:500;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:0 1rem .75rem 0;border-bottom:1px solid var(--rule-strong);vertical-align:bottom}
.tbl td{padding:.9rem 1rem .9rem 0;border-bottom:1px solid var(--rule);vertical-align:top}
.tbl td:last-child,.tbl th:last-child{padding-right:0}
.tbl .r{text-align:right}
.tbl.lg td{font-size:var(--fs-body)}

/* key-value list */
.kv{display:grid;grid-template-columns:minmax(8rem,auto) 1fr;gap:.9rem 2rem;font-size:var(--fs-small);line-height:1.45}
.kv dt{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding-top:.2em}
.kv dd{max-width:var(--measure)}
.kv.hair>*{border-top:1px solid var(--rule);padding-top:.9rem}
@media (max-width:600px){.kv{grid-template-columns:1fr;gap:.4rem 0}.kv dd{padding-bottom:.9rem}.kv.hair>dd{border-top:0;padding-top:0}}

/* value rows (NOURISH) */
.vals li{display:grid;grid-template-columns:4rem 1fr 2fr;gap:var(--gap);align-items:baseline;border-top:1px solid var(--rule);padding:1.5rem 0}
.vals li:last-child{border-bottom:1px solid var(--rule)}
.vals .l{font-size:clamp(2rem,4vw,3.5rem);letter-spacing:-.03em;line-height:1;color:var(--slate)}
.vals .w{font-size:var(--fs-h3);letter-spacing:-.02em;line-height:1.1}
.vals .b{font-size:var(--fs-small);line-height:1.5;color:var(--dim);max-width:var(--measure)}
@media (max-width:700px){.vals li{grid-template-columns:3rem 1fr}.vals .b{grid-column:2}}

/* micronutrients / list grid */
.lgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.lgrid li{background:var(--stone);padding:1.25rem 1.25rem 1.4rem;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-size:var(--fs-lead);letter-spacing:-.01em}
.lgrid li span{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.12em;color:var(--dim)}
@media (max-width:700px){.lgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.lgrid li:last-child:nth-child(odd){grid-column:1/-1}}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips li{border:1px solid var(--rule-strong);border-radius:999px;padding:.45rem .9rem;font-size:var(--fs-tiny);letter-spacing:.02em}

/* ---------- the fortification monitor (illustrative data) ---------- */
.monitor{background:var(--stone);color:var(--night);border:1px solid var(--rule);padding:clamp(1.25rem,2.5vw,2rem);display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(1.5rem,3vw,3rem);position:relative}
.monitor .bar{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.6875rem;color:var(--dim);font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;padding-bottom:1rem;border-bottom:1px solid var(--rule)}
.monitor .bar .wm{height:.95rem;width:6.65rem;color:var(--night)}
.monitor .big{font-size:clamp(3.5rem,7vw,7rem);line-height:1;letter-spacing:-.045em}
.monitor .big small{font-size:.3em;letter-spacing:0;margin-left:.2em;color:var(--dim)}
.monitor .target{font-size:var(--fs-small);color:var(--dim);margin-top:.5rem}
.monitor svg{width:100%;height:auto;margin-top:1.5rem;color:var(--slate)}
.monitor .list{border-top:1px solid var(--rule-strong);padding-top:.75rem;font-size:var(--fs-small)}
.monitor .list .h{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:.5rem}
.monitor .list .rw{display:grid;grid-template-columns:1fr auto auto;gap:1rem;padding:.6rem 0;border-top:1px solid var(--rule);align-items:baseline}
.monitor .list .rw .m{font-family:var(--mono);font-size:var(--fs-tiny);color:var(--dim)}
.monitor .foot{grid-column:1/-1;display:flex;justify-content:space-between;font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);border-top:1px solid var(--rule);padding-top:.75rem}
@media (max-width:700px){.monitor{grid-template-columns:1fr}}
/* batch, dose and status hold one line each (WebKit otherwise breaks "In specification" even at 1440); a size smaller where the column narrows */
.monitor .list .rw{white-space:nowrap}
@media (max-width:1100px){.monitor .list .rw{font-size:var(--fs-tiny);gap:.75rem}}

/* ---------- closing call ---------- */
.cta{position:relative;overflow:clip}
.cta .cta-drawing{position:absolute;right:-22%;top:50%;transform:translateY(-50%);width:min(68vw,900px);height:min(68vw,900px);color:var(--slate);z-index:0}
.cta .wrap{position:relative;z-index:1}
@media (max-width:900px){.cta .cta-drawing{display:none}}

/* ---------- forms ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 2rem}
.field{display:flex;flex-direction:column;gap:.5rem}
.field.full{grid-column:1/-1}
.field label{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.field input,.field textarea,.field select{width:100%;background:transparent;border:0;border-bottom:1px solid var(--rule-strong);border-radius:0;padding:.75rem 0;font:inherit;font-size:var(--fs-lead);color:inherit;outline:none;transition:border-color .25s;-webkit-appearance:none;appearance:none}
.field select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 12px) 55%,calc(100% - 7px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:2rem}
.field input:focus,.field textarea:focus,.field select:focus{border-bottom-color:var(--ink)}
.field textarea{min-height:8rem;resize:vertical}
.field ::placeholder{color:var(--dim);opacity:1} /* one tint in every engine (WebKit's default is fainter) */
.form .act{grid-column:1/-1;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-top:.5rem}
.form .note{font-size:var(--fs-tiny);color:var(--dim)}
.form-ok{display:none;border-top:1px solid var(--rule);padding-top:1.5rem}
.form.sent,.form.mailed{display:none} .form.sent~.form-ok[data-for=sent],.form.mailed~.form-ok[data-for=mailed]{display:block}
.form-ok .h3:focus{outline:none}
.field .err{font-size:var(--fs-tiny);line-height:1.4;color:var(--ink)}
.field [aria-invalid=true]{border-bottom-color:var(--ink);border-bottom-width:2px}
@media (max-width:600px){.form{grid-template-columns:1fr}}
@media (max-width:900px){.aside{margin-top:3rem}}

/* ---------- footer ---------- */
.footer{background:var(--night);color:var(--stone);padding:clamp(4rem,8vw,7rem) 0 2rem}
.footer .top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:start}
.footer .brand{grid-column:span 4}
.footer .brand .wm{height:1.5rem;width:10.5rem;color:var(--stone)}
.footer nav{grid-column:span 2}
.footer nav ul{display:flex;flex-direction:column;gap:.55rem}
.footer nav a{font-size:var(--fs-small);border-bottom:1px solid transparent;transition:border-color .25s} .footer nav a:hover{border-bottom-color:currentColor}
.footer .sites{grid-column:9/span 4;display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.footer .site{font-size:var(--fs-tiny);line-height:1.6;color:var(--slate)}
.footer .site b{display:block;font-weight:400;color:var(--stone);font-size:var(--fs-small);margin-bottom:.25rem}
.footer .site .co{font-family:var(--mono);letter-spacing:.08em;display:block;margin-top:.4rem}
.footer .contact{grid-column:span 4;font-size:var(--fs-small);line-height:1.6;color:var(--slate);margin-top:3rem}
.footer .contact a{color:var(--stone)}
.footer .certs{grid-column:5/span 8;margin-top:3rem;display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--slate);align-self:end}
.footer .legal{border-top:1px solid var(--rule);margin-top:clamp(3rem,6vw,5rem);padding-top:1.5rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;font-size:var(--fs-tiny);color:var(--slate)}
.footer .legal a{border-bottom:1px solid var(--rule-strong)}
.footer .legal .tag{color:var(--stone)}
@media (max-width:900px){.footer .brand,.footer nav,.footer .sites,.footer .contact,.footer .certs{grid-column:1/-1}.footer nav{margin-top:1.5rem}.footer .sites{margin-top:2rem}.footer .contact,.footer .certs{margin-top:2rem}}

/* ---------- motion: the reveal, once, on the one curve ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*.12s)}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .turn .wm .wm-wheel,.wheel.turn{animation:none}
  .hero-media video,.hero-media img,.phero .media video,.phero .media img{transform:none!important}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------- 404 ---------- */
.lost{min-height:calc(100vh - var(--navh));display:flex;align-items:center;position:relative;overflow:clip}
.lost .cta-drawing{right:-6%;width:min(60vw,820px);height:min(60vw,820px)}