/* ==========================================================================
   FORKS & FOUNDERS — design system v2
   ========================================================================== */

/* --- 0. FONTS ----------------------------------------------------------
   Self-hosted. Fraunces is the variable "full" cut, which carries all four
   axes (opsz, wght, SOFT, WONK) — the WONK axis draws the brand's italic f,
   so a wght-only cut would quietly break the logo and every headline em.
   ---------------------------------------------------------------------- */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/fraunces-normal.woff2?v=2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/fraunces-normal-ext.woff2?v=2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url("../fonts/fraunces-italic.woff2?v=2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url("../fonts/fraunces-italic-ext.woff2?v=2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-normal.woff2?v=2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-normal-ext.woff2?v=2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/plexmono-400.woff2?v=2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/plexmono-400-ext.woff2?v=2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/plexmono-500.woff2?v=2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/plexmono-500-ext.woff2?v=2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}


/* --- 1. TOKENS --------------------------------------------------------- */
:root{
  --fig:#1E1815; --fig-88:rgba(30,24,21,.88); --fig-72:rgba(30,24,21,.72);
  --fig-52:rgba(30,24,21,.70); --fig-32:rgba(30,24,21,.64);
  --bone:#F5F0E6; --bone-2:#EFE8DA; --bone-3:#E7DECD;
  --sundried:#A83A25; --sundried-d:#8E3020;
  --apricot:#D89A3C; --brine:#6B7058; --clay:#C8B9A4;
  --slate:#4A4E52;
  --i-88:rgba(245,240,230,.88); --i-64:rgba(245,240,230,.64);
  --i-40:rgba(245,240,230,.40); --i-18:rgba(245,240,230,.18);
  --i-52:rgba(245,240,230,.52);

  --hair:1px solid rgba(30,24,21,.13);
  --rule:1px solid var(--fig);
  --hair-i:1px solid rgba(245,240,230,.18);

  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:160px;
  --max:1440px; --gutter:clamp(24px,5vw,80px); --hdr:84px;
  --dur:200ms; --dur-s:420ms; --ease:cubic-bezier(.2,0,0,1);
}
@media (max-width:900px){:root{--hdr:64px}}

/* --- 2. RESET ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 24px)}
body{margin:0;background:var(--bone);color:var(--fig);overflow-wrap:break-word;font-family:var(--sans);
  font-size:17px;line-height:1.65;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit}
button{font:inherit}
h1,h2,h3,h4{margin:0;font-weight:400}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
::selection{background:var(--apricot);color:var(--fig)}
:focus-visible{outline:2px solid var(--sundried);outline-offset:3px}
.skip{position:absolute;left:-9999px;z-index:300;background:var(--fig);color:var(--bone);padding:var(--s2) var(--s3);font-family:var(--mono);font-size:12px}
.skip:focus{left:var(--s2);top:var(--s2)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- 3. TYPE ----------------------------------------------------------- */
.t-hero{font-family:var(--serif);font-variation-settings:"opsz" 144,"SOFT" 20,"WONK" 0;
  font-weight:400;font-size:clamp(44px,7.2vw,90px);line-height:.99;letter-spacing:-.036em}
.t-1{font-family:var(--serif);font-variation-settings:"opsz" 120,"SOFT" 18,"WONK" 0;
  font-weight:400;font-size:clamp(33px,4.4vw,58px);line-height:1.06;letter-spacing:-.03em}
.t-2{font-family:var(--serif);font-variation-settings:"opsz" 72,"SOFT" 16,"WONK" 0;
  font-weight:400;font-size:clamp(25px,2.9vw,38px);line-height:1.13;letter-spacing:-.024em}
.t-3{font-family:var(--serif);font-variation-settings:"opsz" 36,"SOFT" 14,"WONK" 0;
  font-weight:500;font-size:clamp(20px,1.7vw,24px);line-height:1.24;letter-spacing:-.016em}
.t-hero em,.t-1 em,.t-2 em,.t-3 em{font-style:italic;
  font-variation-settings:"opsz" 144,"SOFT" 44,"WONK" 1;color:var(--sundried)}

.lede{font-size:clamp(17px,1.45vw,20.5px);line-height:1.56;color:var(--fig-88);max-width:48ch;letter-spacing:-.014em}
.body{font-size:16.5px;line-height:1.7;color:var(--fig-72);max-width:62ch}
.body-s{font-size:14.5px;line-height:1.64;color:var(--fig-72);max-width:58ch}

.eyebrow{display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--sundried)}
.eyebrow--slate{color:var(--slate)}
.eyebrow--apricot{color:var(--apricot)}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em}

/* --- 4. LAYOUT --------------------------------------------------------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:clamp(80px,10vw,var(--s7))}
.sec--sm{padding-block:clamp(48px,6vw,88px)}
.sec--hair{border-top:var(--hair)}
/* Pathways sit below the full-bleed proof rail. The rail is page furniture and
   stays attached to the hero; the pathways are a content module and need air
   above them, or the two grids fuse into one and read as a broken layout.
   No bottom padding — the section that follows brings its own. */
.sec--after-rail{padding-top:clamp(56px,7vw,104px)}

.shead{margin-bottom:clamp(48px,6vw,88px)}
.shead__top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--s4);
  align-items:end;padding-bottom:var(--s4);border-bottom:var(--rule)}
.shead .eyebrow{margin-bottom:var(--s3)}
.shead__meta{font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--slate);
  text-align:right;max-width:30ch;justify-self:end}
@media (max-width:860px){
  .shead__top{grid-template-columns:1fr;gap:var(--s3)}
  .shead__meta{text-align:left;justify-self:start}
}

.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,var(--s6));align-items:start}
.split--55{grid-template-columns:1fr 1fr}
.split--offset{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
/* minmax(0,1fr), not 1fr: a bare 1fr track is minmax(auto,1fr), so a child
   holding a min-width item (the 420px tables) refuses to shrink and pushes
   the page into horizontal scroll on phones. */
@media (max-width:900px){.split,.split--55,.split--offset{grid-template-columns:minmax(0,1fr);gap:var(--s4)}}

.stack-2>*+*{margin-top:var(--s2)}
.stack-3>*+*{margin-top:var(--s3)}
.stack-4>*+*{margin-top:var(--s4)}
.divided>*+*{margin-top:var(--s5);padding-top:var(--s5);border-top:var(--hair)}

.dark{background:var(--fig);color:var(--bone)}
.dark h1,.dark h2,.dark h3{color:var(--bone)}
.dark .lede{color:var(--i-88)}
.dark .body,.dark .body-s{color:var(--i-64)}
.dark .shead__top{border-bottom-color:rgba(245,240,230,.18)}
.dark .shead__meta{color:var(--i-52)}
.dark .divided>*+*{border-top-color:rgba(245,240,230,.18)}

/* --- 5. BUTTONS -------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:17px 32px;border:1px solid transparent;border-radius:0;cursor:pointer;white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.btn::after{content:"→";font-size:12px;transition:transform var(--dur) var(--ease)}
.btn:hover::after{transform:translateX(3px)}
.btn--primary{background:var(--sundried);color:var(--bone)}
.btn--primary:hover{background:var(--sundried-d)}
.btn--secondary{background:transparent;color:var(--fig);border-color:var(--fig)}
.btn--secondary:hover{background:var(--fig);color:var(--bone)}
.btn--invert{background:var(--bone);color:var(--fig)}
.btn--invert:hover{background:var(--apricot)}
.btn--ghost{background:transparent;color:var(--bone);border-color:var(--i-40)}
.btn--ghost:hover{background:var(--bone);color:var(--fig)}
.btn--sm{padding:12px 22px;font-size:10.5px}
.btn--plain::after{content:none}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s2)}

.alink{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;color:var(--fig);
  border-bottom:1px solid var(--apricot);padding-bottom:4px;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.alink:hover{color:var(--sundried);border-bottom-color:var(--sundried)}
.dark .alink{color:var(--bone)}
.dark .alink:hover{color:var(--apricot)}

/* --- 6. HEADER --------------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:100;background:var(--bone);
  border-bottom:1px solid rgba(30,24,21,.1);transition:box-shadow var(--dur) var(--ease)}
.hdr[data-scrolled="true"]{box-shadow:0 1px 0 rgba(30,24,21,.07),0 14px 30px rgba(30,24,21,.05)}
.hdr__in{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);height:var(--hdr);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}

.logo{display:inline-flex;align-items:center;text-decoration:none;flex:none}
.logo__tag{
  position:relative;display:inline-flex;align-items:center;gap:15px;
  background:var(--fig);border-radius:9px;
  padding:13px 24px 13px 32px;
  transition:background var(--dur) var(--ease);
}
.logo__hole{
  position:absolute;left:-9px;top:50%;transform:translateY(-50%);
  width:19px;height:19px;border-radius:50%;background:var(--bone);
}
.logo__tines{display:flex;gap:5px;flex:none}
.logo__tines i{display:block;width:4px;height:25px;background:var(--apricot);
  transition:background var(--dur) var(--ease)}
.logo__word{
  font-family:var(--serif);
  font-variation-settings:"opsz" 48,"SOFT" 10,"WONK" 0;
  font-weight:600;font-size:23px;line-height:1;letter-spacing:-.012em;
  color:var(--bone);white-space:nowrap;
}
.logo__word em{font-style:normal;color:var(--apricot)}
.logo:hover .logo__tag{background:#26201C}

/* Footer: the tag sits on the dark band, so the punch shows the band through it.
   Tag lifts away from the footer ground; hole drops back to it. */
.logo--ftr .logo__tag{background:#332C27}
.logo--ftr .logo__hole{background:var(--fig)}
.logo--ftr:hover .logo__tag{background:#3D352F}

@media (max-width:1180px){
  .logo__tag{gap:12px;padding:10px 18px 10px 26px;border-radius:8px}
  .logo__hole{width:16px;height:16px;left:-8px}
  .logo__tines i{width:3px;height:20px}
  .logo__word{font-size:19px}
}
@media (max-width:420px){
  .logo__tag{gap:10px;padding:9px 15px 9px 22px}
  .logo__word{font-size:17px}
  .logo__tines i{height:18px}
}

.nav{display:flex;align-items:center;gap:var(--s4)}
.nav__list{display:flex;align-items:center;gap:var(--s4)}
.nav__item{position:relative}
.nav__link{font-size:14.5px;font-weight:500;color:var(--fig);text-decoration:none;
  background:none;border:0;padding:8px 0;cursor:pointer;position:relative}
.nav__link::after{content:"";position:absolute;left:0;bottom:2px;height:1px;width:0;
  background:var(--sundried);transition:width var(--dur) var(--ease)}
.nav__link:hover::after,.nav__link[aria-expanded="true"]::after{width:100%}
.nav__link[aria-current="page"]{color:var(--sundried)}
.nav__caret{font-size:7px;color:var(--fig-32);margin-left:6px;display:inline-block;
  transition:transform var(--dur) var(--ease)}
.nav__link[aria-expanded="true"] .nav__caret{transform:rotate(180deg)}

.mega{position:absolute;top:calc(100% + 22px);left:50%;transform:translateX(-50%) translateY(-6px);
  background:var(--bone);border:var(--rule);padding:var(--s4);min-width:660px;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);opacity:0;visibility:hidden;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
  box-shadow:0 24px 56px rgba(30,24,21,.10)}
.mega[data-open="true"]{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega__title{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--slate);padding-bottom:var(--s2);border-bottom:var(--hair);margin-bottom:var(--s2)}
.mega__link{display:block;text-decoration:none;padding:11px 0;border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease)}
.mega__link:hover{border-bottom-color:rgba(30,24,21,.13)}
.mega__link b{display:block;font-size:15.5px;font-weight:500;transition:color var(--dur) var(--ease)}
.mega__link span{display:block;font-size:13px;color:var(--fig-52);line-height:1.45;margin-top:3px}
.mega__link:hover b{color:var(--sundried)}

.nav__phone{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--fig-52);
  text-decoration:none;white-space:nowrap}
.nav__phone:hover{color:var(--sundried)}

.burger{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--fig)}
@media (max-width:1180px){.nav__list,.nav__phone,.hdr .btn{display:none}.burger{display:block}}
/* Between the burger breakpoint and ~1380px the full bar does not fit: the email
   link is the one item duplicated in the footer and on the contact page, so it is
   the one to drop. 1280px laptops keep real navigation instead of a burger. */
@media (max-width:1380px){.nav__phone{display:none}}

.drawer{display:none;border-top:var(--hair);background:var(--bone);
  padding:var(--s3) var(--gutter) var(--s5);max-height:calc(100vh - var(--hdr));overflow-y:auto}
.drawer[data-open="true"]{display:block}
.drawer__grp+.drawer__grp{margin-top:var(--s4);padding-top:var(--s4);border-top:var(--hair)}
.drawer__title{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--slate);margin-bottom:var(--s3)}
.drawer a{display:block;padding:12px 0;font-size:17px;text-decoration:none;border-bottom:var(--hair)}
.drawer a:last-child{border-bottom:0}
.drawer .btn{margin-top:var(--s4);width:100%;justify-content:center}

.talkbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:var(--fig);border-top:1px solid rgba(245,240,230,.18);
  transform:translateY(100%);transition:transform var(--dur-s) var(--ease)}
.talkbar[data-show="true"]{transform:translateY(0)}
.talkbar .btn{width:100%;justify-content:center}
@media (max-width:1180px){.talkbar{display:block}body{padding-bottom:74px}}

/* --- 7. HERO ----------------------------------------------------------- */
.hero{display:grid;grid-template-columns:minmax(0,53fr) minmax(0,47fr);border-bottom:var(--rule)}
.hero__text{padding:clamp(72px,12vh,164px) var(--gutter) clamp(56px,8vh,104px);
  display:flex;flex-direction:column;justify-content:center}
.hero__title{max-width:8.26em;margin-block:var(--s4)}
.hero__lede{max-width:27.76em;margin-bottom:clamp(32px,4vw,var(--s5))}
.hero__media{position:relative;overflow:hidden;min-height:clamp(340px,62vh,760px);background:var(--fig)}
.hero__media img{width:100%;height:100%;object-fit:cover}
@media (max-width:1000px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero__media{min-height:300px;order:-1}
  .hero__text{padding-block:var(--s5)}
}

.rail{border-bottom:var(--hair);background:var(--bone-2)}
/* Equal columns, uniform internal padding, aligned baselines.
   Flex with min-width produced ragged column widths. */
.rail ul{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border-top:var(--hair);
}
.rail li{
  border-right:var(--hair);
  padding:var(--s4) clamp(16px,2.2vw,32px);
  display:flex;flex-direction:column;justify-content:flex-start;
  min-width:0;
}
.rail li:last-child{border-right:0}
.rail b{
  display:block;
  font-family:var(--serif);font-variation-settings:"opsz" 36,"SOFT" 14,"WONK" 0;
  font-weight:500;font-size:clamp(17px,1.55vw,23px);
  line-height:1.12;letter-spacing:-.022em;color:var(--fig);
  hyphens:none;
}
.rail span{
  display:block;margin-top:auto;padding-top:var(--s3);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate);line-height:1.5;
}
@media (max-width:1180px){
  .rail ul{grid-template-columns:repeat(3,1fr)}
  .rail li:nth-child(-n+3){border-bottom:var(--hair)}
}
@media (max-width:760px){
  .rail ul{grid-template-columns:repeat(2,1fr)}
  .rail li{padding:var(--s3) var(--s2)}
  .rail li:nth-child(-n+4){border-bottom:var(--hair)}
  .rail li:last-child{grid-column:1 / -1}
}

.phero{padding-block:clamp(64px,9vw,132px) clamp(48px,6vw,88px);border-bottom:var(--rule)}
/* Wide enough that the heading breaks identically in Fraunces and in the
   fallback, so the swap does not change the line count and shove the page. */
.phero h1{margin-block:var(--s4);max-width:10.5em}
.phero .lede{max-width:56ch}

/* --- 8. PATHWAYS ------------------------------------------------------- */
.paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:1px;background:rgba(30,24,21,.13);border:var(--hair)}
.path{background:var(--bone);padding:var(--s4) var(--s3);text-decoration:none;
  display:flex;flex-direction:column;gap:8px;transition:background var(--dur) var(--ease)}
.path:hover{background:var(--bone-2)}
.path__q{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sundried);margin-bottom:var(--s1)}
.path__t{font-family:var(--serif);font-variation-settings:"opsz" 36,"SOFT" 14,"WONK" 0;
  font-weight:500;font-size:22px;line-height:1.18;letter-spacing:-.018em}
.path__d{font-size:14px;color:var(--fig-52);line-height:1.55}
.path__go{margin-top:auto;padding-top:var(--s4);font-family:var(--mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fig-52)}
.path:hover .path__go{color:var(--sundried)}
@media (max-width:900px){
  .path{padding:var(--s3)}
}

/* --- 9. CARDS ---------------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:1px;
  background:rgba(30,24,21,.13);border:var(--hair)}
.card{background:var(--bone);text-decoration:none;display:flex;flex-direction:column;
  transition:background var(--dur) var(--ease)}
.card:hover{background:var(--bone-2)}
.card__media{aspect-ratio:5/4;overflow:hidden;background:var(--bone-3)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform 620ms var(--ease)}
.card__media--contain{background:#fff}
.card__media--contain img{object-fit:contain;padding:var(--s4)}
.card:hover .card__media img{transform:scale(1.035)}
.card__body{padding:var(--s4) var(--s3);display:flex;flex-direction:column;gap:6px;flex:1}
.card__code{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate)}
.card__t{font-family:var(--serif);font-variation-settings:"opsz" 42,"SOFT" 14,"WONK" 0;
  font-weight:500;font-size:25px;line-height:1.14;letter-spacing:-.022em;margin-top:4px}
.card__d{font-size:14.5px;color:var(--fig-52);line-height:1.6;margin-top:6px}
.card__go{margin-top:auto;padding-top:var(--s4);font-family:var(--mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fig-52)}
.card:hover .card__go{color:var(--sundried)}

/* Format line inside a card — compact alternative to tag pills. */
.card__fmt{display:block;margin-top:var(--s3);font-family:var(--mono);
  font-size:12px;line-height:1.75;color:var(--fig-52)}
.card__fmt em{display:block;font-style:normal;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sundried);margin-bottom:6px}

/* Text-only tile grid — five across at desktop, no media block. */
.cards--text{grid-template-columns:repeat(auto-fit,minmax(min(228px,100%),1fr))}
.cards--text .card__body{padding:var(--s3)}
.cards--text .card__t{margin-top:0}

/* Static variant — informational tile, not a link. */
.card--static{cursor:default}
.card--static:hover{background:var(--bone)}
.card--static:hover .card__media img{transform:none}

/* Enquiry tile — closes the fruit grid. Same shell, fig media block. */
.card--ask{background:var(--bone-2)}
.card--ask:hover{background:var(--bone-3)}
.card__media--ask{display:flex;align-items:center;justify-content:center;background:var(--fig)}
.ask__mark{width:64px;height:46px}
.ask__mark *{fill:none;stroke:var(--apricot);stroke-width:1.4;
  stroke-linecap:square;stroke-linejoin:miter;transition:stroke var(--dur) var(--ease)}
.card--ask:hover .ask__mark *{stroke:var(--bone)}
.card--ask .card__go{color:var(--sundried)}

/* --- 10. CAPABILITY TILES ---------------------------------------------- */
.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:1px;
  background:rgba(245,240,230,.18);border:1px solid rgba(245,240,230,.18)}
.cap{background:var(--fig);padding:var(--s4) var(--s3);text-decoration:none;
  display:flex;flex-direction:column;gap:var(--s3);transition:background var(--dur) var(--ease)}
.cap:hover{background:#26201C}
.cap__mark{width:52px;height:38px}
.cap__mark *{fill:none;stroke:var(--apricot);stroke-width:1.4;stroke-linecap:square;stroke-linejoin:miter}
.cap__t{font-family:var(--serif);font-variation-settings:"opsz" 30,"SOFT" 14,"WONK" 0;
  font-weight:500;font-size:19px;color:var(--bone);line-height:1.2;letter-spacing:-.014em}
.cap__d{font-size:13.5px;color:var(--i-64);line-height:1.55}

/* --- 11. SPEC ---------------------------------------------------------- */
.spec{border:var(--hair);background:var(--bone-2)}
.spec__h{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--slate);padding:var(--s3);border-bottom:var(--hair)}
.spec__l{padding:var(--s2) var(--s3) var(--s3)}
.spec__r{display:grid;grid-template-columns:145px minmax(0,1fr);gap:var(--s2);padding-block:11px;
  border-bottom:var(--hair);font-family:var(--mono);font-size:11.5px;letter-spacing:.05em}
.spec__r:last-child{border-bottom:0}
.spec__r dt{color:var(--slate);text-transform:uppercase;font-size:10px;letter-spacing:.13em;padding-top:1px}
.spec__r dd{margin:0;color:var(--fig)}
.spec__b{padding:var(--s3)}
.ask{color:var(--slate)}
@media (max-width:520px){.spec__r{grid-template-columns:1fr;gap:3px}}

/* --- 12. STEPS --------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  gap:1px;background:rgba(30,24,21,.13);border:var(--hair)}
.step{background:var(--bone);padding:var(--s4) var(--s3)}
.step__n{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.2em;
  color:var(--sundried);margin-bottom:var(--s3)}
.step h3{font-family:var(--serif);font-variation-settings:"opsz" 30,"SOFT" 14,"WONK" 0;
  font-weight:500;font-size:21px;margin-bottom:var(--s2);letter-spacing:-.016em}
.dark .steps{background:rgba(245,240,230,.18);border-color:rgba(245,240,230,.18)}
.dark .step{background:var(--fig)}
.dark .step__n{color:var(--apricot)}
@media (max-width:900px){
  .step{padding:var(--s3)}
}

/* --- 13. ROW LINKS ----------------------------------------------------- */
.rows{border-top:var(--rule)}
.rowl{display:grid;grid-template-columns:48px minmax(0,4fr) minmax(0,6fr) 28px;gap:var(--s4);
  align-items:baseline;padding-block:var(--s4);border-bottom:var(--hair);text-decoration:none;
  transition:padding-left var(--dur) var(--ease)}
.rowl:hover{padding-left:var(--s2)}
.rowl__n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--fig-32)}
.rowl__t{font-family:var(--serif);font-variation-settings:"opsz" 42,"SOFT" 14,"WONK" 0;
  font-weight:500;font-size:clamp(21px,2vw,26px);line-height:1.16;letter-spacing:-.02em}
.rowl:hover .rowl__t{color:var(--sundried)}
.rowl__d{font-size:14.5px;color:var(--fig-52);line-height:1.6}
.rowl__go{font-family:var(--mono);font-size:14px;color:var(--fig-32);text-align:right}
.rowl:hover .rowl__go{color:var(--sundried)}
/* Static variant — no link, no arrow, no hover shift. */
.rowl--static{grid-template-columns:48px minmax(0,4fr) minmax(0,6fr)}
.rowl--static:hover{padding-left:0}
.rowl--static:hover .rowl__t{color:var(--fig)}
@media (max-width:860px){
  .rowl{grid-template-columns:36px 1fr;gap:var(--s2) var(--s3)}
  .rowl__d{grid-column:2}.rowl__go{display:none}
  .rowl--static{grid-template-columns:36px 1fr}
}

/* --- 14. APPLICATIONS -------------------------------------------------- */
.apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:1px;
  background:rgba(245,240,230,.18);border:1px solid rgba(245,240,230,.18)}
.app{background:var(--fig);padding:var(--s5) var(--s4)}
.app__q{font-family:var(--serif);font-variation-settings:"opsz" 60,"SOFT" 44,"WONK" 1;
  font-style:italic;font-weight:400;font-size:clamp(22px,2.2vw,29px);line-height:1.22;
  letter-spacing:-.022em;color:var(--apricot);margin-bottom:var(--s3);max-width:20ch}
.app__a{font-size:15px;line-height:1.66;color:var(--i-64);max-width:46ch}

/* --- 15. CERTS --------------------------------------------------------- */
.certs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(110px,100%),1fr));gap:1px;
  background:rgba(30,24,21,.13);border:var(--hair);
  max-width:980px;margin-inline:auto}
.cert{background:var(--bone);padding:var(--s4) var(--s2);text-align:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fig-72)}

/* --- 16. IMAGERY ------------------------------------------------------- */
.frame{overflow:hidden;background:var(--bone-3)}
.frame img{width:100%;height:100%;object-fit:cover}
.frame--contain{background:#fff}
/* Bone-ground variant — for shots whose background is tinted to match the page. */
.frame--bone{background:var(--bone);border:var(--hair)}
/* The shot's own ground is already the bone token — the global grade would
   push it off the frame colour and show a seam, so it is exempt. */
.frame--bone img{filter:none}
.frame--contain img{object-fit:contain;padding:var(--s4)}
.r43{aspect-ratio:4/3}.r32{aspect-ratio:3/2}.r11{aspect-ratio:1/1}.r169{aspect-ratio:16/9}.r54{aspect-ratio:5/4}
.cap-txt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);margin-top:var(--s2)}
.dark .cap-txt{color:var(--i-52)}

.fband{position:relative;background:var(--fig)}
.fband img{width:100%;height:clamp(320px,52vh,620px);object-fit:cover}
.fband__cap{position:absolute;left:var(--gutter);bottom:var(--s4);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bone);background:rgba(30,24,21,.82);padding:11px 18px}

.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:1px;
  background:rgba(30,24,21,.13);border:var(--hair)}
.fgrid figure{margin:0;background:var(--bone)}
.fgrid img{width:100%;aspect-ratio:4/3;object-fit:cover}
.fgrid figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate);padding:var(--s3) var(--s2)}
.dark .fgrid{background:rgba(245,240,230,.18);border-color:rgba(245,240,230,.18)}
.dark .fgrid figure{background:var(--fig)}
.dark .fgrid figcaption{color:var(--i-52)}

.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:var(--s3)}

/* Placeholder — tonal, deliberate */
.ph{position:relative;background:var(--bone-3);display:flex;align-items:flex-end;overflow:hidden}
.ph::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,rgba(30,24,21,.03) 0 2px,transparent 2px 10px)}
.ph__l{position:relative;padding:var(--s3);font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;line-height:1.9;color:var(--slate);text-transform:uppercase}
.ph__l b{display:block;color:var(--fig);font-weight:500;letter-spacing:.2em;margin-bottom:7px}
.ph__l i{display:block;font-style:normal;color:var(--fig-32);text-transform:none;
  letter-spacing:.03em;font-size:10px;margin-top:4px}
.dark .ph{background:#26201C}
.dark .ph__l{color:var(--i-52)}
.dark .ph__l b{color:var(--i-64)}

.frame img,.fgrid img,.fband img,.hero__media img,.card__media img{filter:saturate(.94) contrast(1.03)}

/* --- 17. TABLES -------------------------------------------------------- */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%}
.tbl{font-size:14px;min-width:420px}
.tbl th{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--slate);text-align:left;padding:12px 18px 12px 0;border-bottom:var(--rule);
  font-weight:500;white-space:nowrap}
.tbl td{padding:14px 18px 14px 0;border-bottom:var(--hair);color:var(--fig-88)}
.tbl td.m{font-family:var(--mono);font-size:11.5px;color:var(--slate);white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}

/* --- 18. TAGS / LISTS -------------------------------------------------- */
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 12px;border:1px solid rgba(30,24,21,.18);color:var(--fig-72)}
.dark .tag{border-color:rgba(245,240,230,.18);color:var(--i-64)}
.cols{columns:2;column-gap:var(--s5);font-size:14.5px;line-height:2.1;color:var(--fig-72)}
.cols li{break-inside:avoid}
@media (max-width:620px){.cols{columns:1}}
.facts{border-top:var(--hair)}
.facts li{display:grid;grid-template-columns:20px 1fr;gap:var(--s2);padding-block:13px;
  border-bottom:var(--hair);font-size:15px;color:var(--fig-88)}
.facts li::before{content:"—";font-family:var(--mono);color:var(--apricot)}
.note{border-left:2px solid var(--apricot);padding:var(--s2) 0 var(--s2) var(--s3);
  font-size:14.5px;color:var(--fig-72);max-width:60ch}
.note--warn{border-left-color:var(--sundried)}
.dark .note{color:var(--i-64)}

/* --- 19. CTA ----------------------------------------------------------- */
.cta{padding-block:clamp(80px,10vw,148px);text-align:center}
.cta h2{max-width:10.04em;margin-inline:auto;margin-block:var(--s4) var(--s3)}
.cta .lede{margin-inline:auto;margin-bottom:var(--s5);max-width:54ch}
.cta .btn-row{justify-content:center}

.cta-inline{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4);
  align-items:center;padding:var(--s5) 0;border-block:var(--rule)}
.cta-inline h3{margin-bottom:var(--s2)}
@media (max-width:760px){.cta-inline{grid-template-columns:1fr}}

/* --- 20. FORMS --------------------------------------------------------- */
.fgrid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:var(--s3)}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field label{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate)}
.field input,.field select,.field textarea{font-family:var(--sans);font-size:15.5px;padding:15px var(--s2);
  border:1px solid rgba(30,24,21,.28);border-radius:0;background:var(--bone);color:var(--fig);
  width:100%;transition:border-color var(--dur) var(--ease)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--fig)}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--sundried);
  outline-offset:-2px;border-color:var(--sundried)}
.hint{font-size:13px;color:var(--fig-52)}

.capture{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,420px);gap:var(--s5);
  align-items:center;padding:var(--s5) 0;border-block:var(--rule)}
.capture-form{display:flex}
.capture-form input{flex:1;min-width:0;border-right:0}
@media (max-width:820px){.capture{grid-template-columns:1fr;gap:var(--s3)}}

/* --- 21. FOOTER -------------------------------------------------------- */
.ftr{background:var(--fig);color:var(--bone);padding-block:clamp(64px,7vw,104px) var(--s4)}
.ftr__grid{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(auto-fit,minmax(min(135px,100%),1fr));
  gap:var(--s5) var(--s4);padding-bottom:clamp(48px,6vw,88px)}
.ftr__about{font-size:14px;color:var(--i-64);max-width:32ch;margin-top:var(--s3);line-height:1.65}
.ftr__legal{font-family:var(--mono);font-size:11px;line-height:2.1;color:var(--i-52);
  margin-top:var(--s4);letter-spacing:.04em}
.ftr__legal a{color:var(--i-64);text-decoration:none}
.ftr__legal a:hover{color:var(--apricot)}
.ftr__col h2{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--apricot);margin-bottom:var(--s3)}
.ftr__col a{display:block;padding:6px 0;font-size:14.5px;color:var(--i-64);text-decoration:none;
  transition:color var(--dur) var(--ease)}
.ftr__col a:hover{color:var(--bone)}

/* The footer had no responsive rules: auto-fit kept squeezing six columns into
   a phone, leaving the brand paragraph in a 167px track where long words like
   "manufacturers" overflowed and collided with the next column. Below 760px the
   brand block takes the full width and the link lists sit two up; break-word is
   the backstop so no single long word can ever run outside its column again. */
.ftr__grid > *{min-width:0}

@media (max-width:760px){
  .ftr__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s3)}
  .ftr__grid > :first-child{grid-column:1 / -1}
  .ftr__about{max-width:46ch}
}
@media (max-width:360px){
  .ftr__grid{grid-template-columns:minmax(0,1fr)}
}
.ftr__certs{display:flex;flex-wrap:wrap;gap:var(--s4);padding-block:var(--s4);
  border-top:var(--hair-i);font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--i-52)}
.ftr__btm{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between;
  padding-top:var(--s4);border-top:var(--hair-i);font-family:var(--mono);font-size:10.5px;color:var(--i-52)}
.ftr__btm a{text-decoration:none}
.ftr__btm a:hover{color:var(--apricot)}

/* --- 22. BREADCRUMB ---------------------------------------------------- */
.crumb{padding-block:var(--s3);border-bottom:var(--hair);font-family:var(--mono);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fig-32)}
.crumb a{text-decoration:none;color:var(--fig-32)}
.crumb a:hover{color:var(--sundried)}
.crumb [aria-current]{color:var(--fig-72)}

/* --- 23. MOTION -------------------------------------------------------- */
/* Content is visible by default. Only once the head script has confirmed that
   scripting is live do these become reveal-on-scroll, so a failed or blocked
   script leaves a readable page rather than a blank one. */
[data-js] .rv{opacity:0;transform:translateY(14px);transition:opacity var(--dur-s) var(--ease),transform var(--dur-s) var(--ease)}
[data-js] .rv.in{opacity:1;transform:none}
.draw{transform:scaleX(0);transform-origin:left;transition:transform 640ms var(--ease)}
.draw.in{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  [data-js] .rv{opacity:1;transform:none}
  .talkbar{transform:none}
}

/* --- 24. CREDIBILITY STRIP --------------------------------------------- */
.lstrip{padding-block:var(--s5);border-block:var(--hair)}
.lstrip .eyebrow{margin-bottom:var(--s4)}
.lstrip__row{display:flex;flex-wrap:wrap;align-items:center;gap:0}
.lmark{font-family:var(--serif);font-variation-settings:"opsz" 36,"SOFT" 12,"WONK" 0;
  font-weight:500;font-size:clamp(17px,1.9vw,23px);letter-spacing:-.018em;color:var(--fig-72);
  padding:var(--s2) var(--s4) var(--s2) 0;margin-right:var(--s4);
  border-right:var(--hair);white-space:nowrap;line-height:1.2}
.lmark:last-child{border-right:0;margin-right:0;padding-right:0}
.dark .lstrip{border-color:rgba(245,240,230,.18)}
.dark .lmark{color:var(--i-64);border-right-color:rgba(245,240,230,.18)}
@media (max-width:760px){
  .lmark{font-size:16px;padding:10px var(--s3) 10px 0;margin-right:var(--s3)}
}

/* --- 25. PEOPLE -------------------------------------------------------- */

/* --- 26. PLACEHOLDER (quiet) ------------------------------------------- */
.ph{position:relative;background:var(--bone-2);display:flex;align-items:center;justify-content:center;
  overflow:hidden;border:1px solid rgba(30,24,21,.10)}
.ph::before{content:none}
.ph__l{position:relative;padding:var(--s3);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.2em;color:var(--fig-32);text-transform:lowercase}
.dark .ph{background:#26201C;border-color:rgba(245,240,230,.12)}
.dark .ph__l{color:var(--i-52)}

/* --- 26b. ASK BOX (open invitation) ------------------------------------ */
.askbox{background:var(--bone-2);border:1px solid rgba(30,24,21,.10);
  padding:var(--s4);display:flex;flex-wrap:wrap;gap:var(--s3);
  align-items:center;justify-content:space-between}
.askbox__l{max-width:46ch;font-size:clamp(17px,1.5vw,20px);line-height:1.45;
  color:var(--fig);margin:0}
.askbox .alink{flex:none}
@media (max-width:600px){.askbox{padding:var(--s3);flex-direction:column;align-items:flex-start}}
.dark .askbox{background:#26201C;border-color:rgba(245,240,230,.12)}
.dark .askbox__l{color:var(--bone)}

/* --- 26b1. MANDATE DIAGRAM ---------------------------------------------- */
.mdl{background:var(--fig);padding:clamp(28px,3.4vw,48px)}
.mdl__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4);align-items:center}

/* The dashed frame is the manufacturer's boundary. We sit inside it, which is
   the point of the picture, so the label sits ON the border like a legend. */
.mdl__frame{position:relative;border:1px dashed var(--i-40);
  padding:clamp(30px,3vw,40px) clamp(20px,2.4vw,32px) clamp(22px,2.4vw,30px)}
.mdl__cap{position:absolute;top:0;left:clamp(18px,2vw,28px);transform:translateY(-50%);
  margin:0;padding:0 12px;background:var(--fig);
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--apricot)}
.mdl__inner{display:grid;grid-template-columns:minmax(0,1fr) clamp(56px,6vw,84px) minmax(0,1.05fr);
  align-items:center;gap:0}

.mdl__plants{display:flex;flex-direction:column;gap:10px}
.mdl__chips{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.mdl__chips li{border:1px solid var(--i-18);padding:9px 13px;font-size:13.5px;
  line-height:1.3;color:var(--i-88)}

/* Bracket: five plants, one route out. */
.mdl__merge{position:relative;align-self:stretch;min-height:130px}
.mdl__merge::before{content:"";position:absolute;left:22%;top:8%;bottom:8%;width:1.4px;
  background:var(--apricot)}
.mdl__merge::after{content:"";position:absolute;left:22%;right:6px;top:50%;height:1.4px;
  background:var(--apricot);transform:translateY(-50%)}
.mdl__merge span{position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-top:1.4px solid var(--apricot);border-right:1.4px solid var(--apricot);
  transform:translate(0,-50%) rotate(45deg)}

.mdl__half{border:1px solid var(--i-18);padding:var(--s3);display:flex;flex-direction:column;gap:6px}
.mdl__half--us{border-color:var(--apricot);background:rgba(216,154,60,.07)}
.mdl__k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--i-52)}
.mdl__half--us .mdl__k{color:var(--apricot)}
.mdl__h{font-family:var(--serif);font-variation-settings:"opsz" 42,"SOFT" 14,"WONK" 0;
  font-weight:500;font-size:clamp(20px,2vw,26px);line-height:1.15;letter-spacing:-.02em;
  color:var(--i-88);margin-top:2px}
.mdl__half--us .mdl__h{color:var(--bone)}
.mdl__d{font-size:13.5px;line-height:1.55;color:var(--i-52)}
.mdl__half--us .mdl__d{color:var(--i-64)}

.mdl__you{display:flex;flex-direction:column;gap:6px;max-width:210px}
.mdl__you .mdl__k{color:var(--i-64)}
.mdl__you .mdl__h{color:var(--bone)}
.mdl__arrow{position:relative;height:1.4px;background:var(--i-40);margin-bottom:var(--s2)}
.mdl__arrow::after{content:"";position:absolute;right:0;top:50%;width:9px;height:9px;
  border-top:1.4px solid var(--i-40);border-right:1.4px solid var(--i-40);
  transform:translateY(-50%) rotate(45deg)}

@media (max-width:860px){
  .mdl__row{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .mdl__inner{grid-template-columns:minmax(0,1fr)}
  .mdl__merge{min-height:0;height:52px;margin-block:var(--s2)}
  .mdl__merge::before{left:50%;top:0;bottom:auto;height:100%;width:1.4px}
  .mdl__merge::after{display:none}
  .mdl__merge span{left:50%;right:auto;top:auto;bottom:0;
    transform:translate(-50%,0) rotate(135deg)}
  .mdl__you{max-width:none}
  .mdl__arrow{height:34px;width:1.4px;margin:var(--s2) auto var(--s2)}
  .mdl__arrow::after{left:50%;right:auto;top:auto;bottom:0;
    transform:translate(-50%,0) rotate(135deg)}
}

/* --- 26b2. FAQ ---------------------------------------------------------- */
.faq{border-top:var(--rule)}
.faq__i{border-bottom:var(--hair)}
.faq__q{display:grid;grid-template-columns:52px minmax(0,1fr) 28px;gap:var(--s3);
  align-items:baseline;padding-block:var(--s4);cursor:pointer;list-style:none;
  transition:padding-left var(--dur) var(--ease)}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{padding-left:var(--s2)}
.faq__n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--fig-32)}
.faq__t{font-family:var(--serif);font-variation-settings:"opsz" 42,"SOFT" 14,"WONK" 0;
  font-weight:500;font-size:clamp(18px,1.6vw,22px);line-height:1.22;letter-spacing:-.018em}
.faq__i[open] .faq__t,.faq__q:hover .faq__t{color:var(--sundried)}
.faq__m{position:relative;justify-self:end;width:14px;height:14px;align-self:center}
.faq__m::before,.faq__m::after{content:"";position:absolute;background:var(--fig-52);
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease)}
.faq__m::before{left:0;top:6px;width:14px;height:1.5px}
.faq__m::after{left:6px;top:0;width:1.5px;height:14px}
.faq__i[open] .faq__m::after{transform:scaleY(0)}
.faq__i[open] .faq__m::before,.faq__q:hover .faq__m::before,
.faq__q:hover .faq__m::after{background:var(--sundried)}
.faq__a{grid-column:2;padding:0 var(--s4) var(--s4) calc(52px + var(--s3))}
.faq__a p{font-size:16px;line-height:1.72;color:var(--fig-72);margin:0 0 var(--s2);max-width:64ch}
.faq__a p:last-child{margin-bottom:0}
.faq__a ul{margin:0 0 var(--s2);padding:0;list-style:none;max-width:64ch}
.faq__a li{display:grid;grid-template-columns:18px 1fr;gap:var(--s2);padding-block:6px;
  font-size:15.5px;line-height:1.6;color:var(--fig-72)}
.faq__a li::before{content:"\2014";font-family:var(--mono);color:var(--apricot)}
.faq__a a{color:var(--sundried)}
.faq__a b{color:var(--fig);font-weight:500}
@media (max-width:640px){
  .faq__q{grid-template-columns:38px minmax(0,1fr) 20px;gap:var(--s2);padding-block:var(--s3)}
  .faq__a{padding:0 0 var(--s3) calc(38px + var(--s2))}
}
@media print{.faq__a{display:block !important}}

/* --- 26c. LEGAL PAGES --------------------------------------------------- */
.lgl{max-width:74ch}
.lgl__body{margin-top:clamp(48px,6vw,80px);border-top:var(--rule)}
.lgl__s{padding-block:clamp(32px,4vw,44px);border-bottom:var(--hair);
  display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 var(--s3);align-items:baseline}
.lgl__s:last-child{border-bottom:0}
.lgl__n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--sundried)}
.lgl__b{grid-column:2}
.lgl__b p{font-size:16px;line-height:1.72;color:var(--fig-72);margin:var(--s2) 0 0;max-width:62ch}
.lgl__b p:first-child{margin-top:var(--s2)}
.lgl__b ul{margin:var(--s2) 0 0;padding:0;list-style:none;max-width:62ch}
.lgl__b li{display:grid;grid-template-columns:18px 1fr;gap:var(--s2);padding-block:7px;
  font-size:15.5px;line-height:1.6;color:var(--fig-72)}
.lgl__b li::before{content:"\2014";font-family:var(--mono);color:var(--apricot)}
.lgl__b a{color:var(--sundried)}
.lgl__b dl{margin:var(--s2) 0 0;font-size:15.5px;line-height:1.7;color:var(--fig-72)}
@media (max-width:640px){
  .lgl__s{grid-template-columns:1fr;gap:var(--s1)}
  .lgl__b{grid-column:1}
}

/* --- 27. CASE BLURB ---------------------------------------------------- */
.blurb{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,var(--s6));
  align-items:center;padding-block:clamp(64px,8vw,120px)}
@media (max-width:900px){.blurb{grid-template-columns:1fr;gap:var(--s4)}}

/* --- 28. GROUP HEADING (fruit / vegetable) ----------------------------- */
.grouphead{display:flex;align-items:baseline;gap:var(--s3);padding-bottom:var(--s3);
  margin-bottom:var(--s4);border-bottom:2px solid var(--fig)}
.grouphead__n{font-family:var(--serif);font-variation-settings:"opsz" 60,"SOFT" 16,"WONK" 0;
  font-weight:500;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.026em;line-height:1}
.grouphead__c{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--slate);margin-left:auto}
.dark .grouphead{border-bottom-color:var(--bone)}
.dark .grouphead__c{color:var(--i-52)}

/* --- 29. TECHNIQUE BLOCK ----------------------------------------------- */
.tech{padding-block:clamp(48px,6vw,80px);border-bottom:var(--hair)}
.tech:last-child{border-bottom:0}

/* --- 30. CASE CALLOUTS ------------------------------------------------- */
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:1px;
  background:rgba(30,24,21,.13);border:var(--hair)}
.case{background:var(--bone);padding:var(--s4) var(--s3)}
.case__n{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  color:var(--sundried);margin-bottom:var(--s3)}
.case__t{font-family:var(--serif);font-variation-settings:"opsz" 30,"SOFT" 14,"WONK" 0;
  font-weight:500;font-size:18px;line-height:1.26;letter-spacing:-.016em}
.case__d{font-size:13.5px;color:var(--fig-52);line-height:1.55;margin-top:var(--s2)}



/* --- 31. PEOPLE -------------------------------------------------------- */
.people{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,var(--s5)) clamp(40px,6vw,var(--s6))}
@media (max-width:840px){.people{grid-template-columns:1fr;gap:var(--s5)}}

.person{display:grid;grid-template-columns:184px minmax(0,1fr);gap:var(--s4);align-items:start}
.person__txt .body-s{font-size:16px;line-height:1.68}
.person__pic{aspect-ratio:1/1;overflow:hidden;background:var(--bone-2);border:var(--hair)}
.person__pic img{width:100%;height:100%;object-fit:cover;object-position:center center;
  transition:transform 600ms var(--ease)}
.person:hover .person__pic img{transform:scale(1.03)}
.person__txt .body-s{max-width:46ch}
@media (max-width:520px){
  .person{grid-template-columns:132px minmax(0,1fr);gap:var(--s3)}
}

/* Homepage founder pair — smaller again */
.people-mini{display:flex;gap:var(--s4);flex-wrap:wrap}
.people-mini figure{margin:0;display:flex;gap:var(--s2);align-items:center}
.people-mini .person__pic{width:88px;aspect-ratio:1/1;flex:none}
.people-mini figcaption b{display:block;font-family:var(--serif);
  font-variation-settings:"opsz" 30,"SOFT" 14,"WONK" 0;font-weight:500;
  font-size:17px;letter-spacing:-.012em;line-height:1.2}
.people-mini figcaption span{display:block;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--slate);margin-top:6px;line-height:1.5}

/* --- 33. HERO AUDIENCE LINE -------------------------------------------- */
.hero__aud{margin-top:var(--s4);padding-top:var(--s3);border-top:var(--hair);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate);line-height:1.9;max-width:44ch}

/* Honeypot field: off-canvas rather than display:none, which some bots detect. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Eyebrows inherit the light-background red, which is unreadable on the fig panel. */
.dark .eyebrow{color:var(--apricot)}
.dark .eyebrow--slate{color:var(--i-64)}
.dark .eyebrow--apricot{color:var(--apricot)}

/* Focus rings need 3:1 against what surrounds them. The red reads 2.8:1 on the
   fig panel and footer, so those contexts get the apricot ring (7.2:1). */
.dark :focus-visible,.ftr :focus-visible,footer :focus-visible,.mdl :focus-visible,
.talkbar :focus-visible{outline:2px solid var(--apricot);outline-offset:3px}

/* "All products" under the vegetable column of the mega menu. */
.mega__all{display:inline-block;margin-top:var(--s3);font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sundried);text-decoration:none}
.mega__all:hover{text-decoration:underline}