/* ═══════════════════════════════════════════════════════════════
   Agricultural Technologies — agritechvertical.com
   Design system v18 · Brand Book v1.0 palette · TZ v6.0 motion
   ═══════════════════════════════════════════════════════════════ */

:root{
  --forest:#1B4D3E;        /* primary green — headings, dark chapters */
  --forest-deep:#143830;   /* deep green — reserve dark */
  --berry:#8B2942;         /* bordeaux accent — CTA, lines, data */
  --cream:#FAF7F0;         /* page background, text on dark */
  --cream-warm:#F4EFE3;    /* zebra rhythm, soft product sections */
  --gold:#F0D9A8;          /* accent text on dark sections only */
  --surface:#FFFFFF;
  --ink:#1A1A1A;
  --sage:#5A5A5A;
  --line:#E5DFD3;
  --line-dark:rgba(250,247,240,.14);
  --shadow-s:0 6px 20px rgba(8,25,18,.06);
  --shadow-m:0 18px 46px rgba(8,25,18,.11);
  --r:24px;
  --ease:cubic-bezier(.25,.1,.25,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* ═══ TYPE SCALE — seven steps; no other sizes are used on the site ═══
   52  clamp(38→52)  H1, one per page
   38  clamp(29→38)  H2, section headings + year on timeline cards
   24                H3, large statements, pull quotes, form headings
   20                lead paragraphs, hero subheading, key words in cards
   17                body copy, form inputs (17px prevents iOS zoom on focus)
   15                secondary copy, cards, navigation, buttons, captions
   12                kickers, status chips, labels, footnotes
   Two display figures sit outside the scale: .bignum (60) and .big404 (150).
   Rule: do not add a new size. For emphasis use weight, colour or space. */
body{font-family:'DM Sans',system-ui,-apple-system,sans-serif;background:var(--cream);color:var(--ink);line-height:1.6;font-size:17px;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
button{font-family:inherit}
.mono{font-family:'IBM Plex Mono',monospace}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:880px;margin:0 auto;padding:0 24px}

::selection{background:rgba(139,41,66,.16)}
:focus-visible{outline:2.5px solid var(--berry);outline-offset:3px;border-radius:4px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--forest);color:#fff;padding:12px 20px;border-radius:0 0 12px 0;text-decoration:none;font-weight:600}
.skip-link:focus{left:0}

/* ── sections & rhythm ── */
.section{padding:104px 0}
.section.tight{padding:76px 0}
.section.warm{background:var(--cream-warm)}
.section.white{background:var(--surface)}
.section.dark{background:var(--forest);color:var(--cream)}
.section.deep{background:var(--forest-deep);color:var(--cream)}

/* ── kicker / headings / type scale (Brand Book) ── */
.kicker{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--berry);display:inline-flex;align-items:center;gap:10px;margin-bottom:18px}
.kicker::before{content:'';width:22px;height:2px;background:var(--berry);border-radius:2px}
.dark .kicker,.deep .kicker{color:var(--gold)}
.dark .kicker::before,.deep .kicker::before{background:var(--gold)}

h1,h2,h3{line-height:1.16;letter-spacing:-.01em;color:var(--forest);font-weight:600}
.dark h1,.deep h1,.dark h2,.deep h2,.dark h3,.deep h3{color:var(--cream)}
h1{font-size:clamp(38px,5.2vw,52px)}
h2{font-size:clamp(29px,3.4vw,38px);max-width:860px}
h3{font-size:24px}
.lead{margin-top:18px;font-size:20px;color:var(--sage);max-width:660px;line-height:1.5}
.dark .lead,.deep .lead{color:rgba(250,247,240,.76)}
.accent{color:var(--berry)}
.dark .accent,.deep .accent{color:var(--gold)}

.status-note{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.03em;color:var(--sage);line-height:1.6}
.dark .status-note,.deep .status-note{color:rgba(250,247,240,.68)}

.chip{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px;border:1px solid var(--line);color:var(--sage);background:var(--surface)}
.chip.hist{border-color:rgba(27,77,62,.35);color:var(--forest)}
.chip.now{background:var(--forest);border-color:var(--forest);color:var(--cream)}
.chip.target{border-color:rgba(139,41,66,.45);color:var(--berry)}
.chip.amb{border-style:dashed}
.dark .chip,.deep .chip{background:transparent;border-color:var(--line-dark);color:rgba(250,247,240,.7)}

/* ── refrain (technology context only — Decision Gate D-01) ── */
.refrain{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--sage)}
.refrain b{font-weight:600;color:var(--forest)}
.dark .refrain,.deep .refrain{color:rgba(250,247,240,.72)}
.dark .refrain b,.deep .refrain b{color:var(--gold)}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:16px 28px;border-radius:999px;font-weight:700;font-size:15px;letter-spacing:-.005em;text-decoration:none;transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease);cursor:pointer;border:1.5px solid transparent}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-berry{background:var(--berry);color:var(--cream);box-shadow:var(--shadow-s)}
.btn-berry:hover{background:#7A2439;box-shadow:var(--shadow-m)}
.btn-forest{background:var(--forest);color:var(--cream);box-shadow:var(--shadow-s)}
.btn-forest:hover{background:#16412F;box-shadow:var(--shadow-m)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--forest)}
.btn-ghost:hover{border-color:var(--forest)}
.dark .btn-ghost,.deep .btn-ghost{border-color:var(--line-dark);color:var(--cream)}
.dark .btn-ghost:hover,.deep .btn-ghost:hover{border-color:var(--cream)}
.link-more{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--forest);text-decoration:none;border-bottom:1.5px solid transparent;transition:border-color .2s}
.link-more:hover{border-bottom-color:var(--berry)}
.link-more::after{content:'→';transition:transform .25s var(--ease)}
.link-more:hover::after{transform:translateX(4px)}
.dark .link-more,.deep .link-more{color:var(--cream)}

/* ── header ── */
.hdr{position:fixed;inset:0 0 auto 0;z-index:60;background:rgba(250,247,240,.82);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:border-color .25s,background .25s}
.hdr.scrolled{border-bottom-color:var(--line);background:rgba(250,247,240,.92)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;height:72px;gap:18px}
.brand{display:flex;align-items:center;gap:13px;min-width:0;text-decoration:none}
.brand-mark{height:48px;width:auto;max-width:min(240px,32vw);object-fit:contain;display:block}
.brand-note{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.18em;color:var(--sage);text-transform:uppercase;white-space:nowrap}
.nav{display:flex;align-items:center;gap:24px}
.nav a{text-decoration:none;font-weight:500;font-size:15px;color:var(--ink);opacity:.82;transition:opacity .2s;white-space:nowrap}
.nav a:hover{opacity:1}
.nav a[aria-current="page"]{opacity:1;color:var(--forest);font-weight:600}
.nav .btn{padding:11px 20px;font-size:15px;opacity:1}
/* HARD RULE: text on the berry button is always light (cream-white).
   .nav a used to win on specificity and paint it ink — never allowed. */
.nav a.btn{opacity:1}
.nav a.btn-berry,a.btn-berry,button.btn-berry,.nav a.btn-berry:hover,a.btn-berry:hover{color:var(--cream)}
.nav a.btn-forest,a.btn-forest,button.btn-forest{color:var(--cream)}
.burger{display:none;background:none;border:none;cursor:pointer;padding:10px}
.burger span{display:block;width:22px;height:2px;background:var(--forest);margin:5px 0;border-radius:2px;transition:.25s var(--ease)}

/* ═══ HERO (Product Hero — full-bleed) ═══ */
.hero{position:relative;min-height:min(92vh,860px);display:flex;align-items:flex-end;overflow:clip;padding:150px 0 72px}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg picture{display:block;position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:62% 42%}
/* v25: hero video layer. The clip is vertical (1080x1920); on desktop it would
   need a 1.8x upscale, so the photo stays there. JS injects the video only on
   narrow screens, and only when motion is allowed. */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;z-index:1}
.hero-veil{position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(250,247,240,.9) 0%,rgba(250,247,240,.62) 30%,rgba(250,247,240,.1) 58%,rgba(250,247,240,0) 78%),
  linear-gradient(180deg,rgba(250,247,240,.16) 0%,rgba(250,247,240,0) 38%,rgba(250,247,240,.58) 74%,rgba(250,247,240,.96) 100%)}
.hero-in{position:relative;z-index:2;width:100%}
.hero .kicker{background:rgba(250,247,240,.72);padding:8px 14px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero h1{max-width:760px;text-wrap:balance}
.hero .sub{margin-top:20px;font-size:20px;color:#3D3D3D;max-width:600px;line-height:1.65;font-weight:500}
.hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.hero-promise{margin-top:38px;padding-top:20px;border-top:1px solid rgba(26,26,26,.14);display:flex;align-items:center;gap:12px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.05em;color:var(--berry);font-weight:600}
.hero-promise::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--berry);flex-shrink:0}
.scroll-cue{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:2;width:26px;height:40px;border:1.5px solid rgba(26,26,26,.25);border-radius:14px;display:flex;justify-content:center;padding-top:7px}
.scroll-cue::after{content:'';width:3px;height:8px;border-radius:2px;background:var(--berry);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:1}55%{transform:translateY(10px);opacity:.2}}

/* ═══ Why Now — two states + chain schema ═══ */
.states{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:48px}
.state{border-radius:var(--r);padding:34px 32px;border:1px solid var(--line);background:var(--surface)}
.state.bad{background:transparent}
.state .tag{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sage)}
.state.good .tag{color:var(--berry)}
.state h3{margin:14px 0 10px;font-size:24px}
.state p{font-size:17px;color:var(--sage);line-height:1.65}
.chain{margin-top:26px}
.chain svg{width:100%;height:auto;display:block}

/* ── supply-chain schema (Why Now) ── */
.chainbox{margin-top:22px;display:flex;flex-direction:column;gap:14px}
.chain-lane{border:1px solid var(--line);border-radius:18px;padding:20px 22px;background:var(--surface)}
.chain-lane.new{border-color:rgba(139,41,66,.4);background:linear-gradient(180deg,rgba(139,41,66,.05),var(--surface) 70%)}
.lane-tag{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sage)}
.chain-lane.new .lane-tag{color:var(--berry)}
/* v27: supply routes. The axis is drawn as SEGMENTS between adjacent nodes —
   each node draws the line to the next one. The line therefore cannot fall
   short of a dot or run past it, at any label length or viewport width.
   Vertical on every screen: the horizontal version could not hold long words
   ("DISTRIBUTION" collided with "SHELF").
   The "six links vs two" contrast is carried by column length, line weight,
   node size and label weight. */
.path{list-style:none;position:relative;margin-top:20px;padding-inline-start:26px;
  display:flex;flex-direction:column;gap:13px}
.path li{position:relative;min-height:12px}
.path li::before{content:'';position:absolute;inset-inline-start:-26px;top:3px;
  width:11px;height:11px;border-radius:50%;background:var(--surface);
  border:1.5px solid #CFC6B4;box-sizing:border-box}
.path li:not(:last-child)::after{content:'';position:absolute;inset-inline-start:-21px;
  top:16px;bottom:-16px;width:1px;background:#CFC6B4}
.path li span{display:block;font-family:'IBM Plex Mono',monospace;font-size:12px;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sage);line-height:1.45}

.path.direct{padding-inline-start:30px;gap:18px}
.path.direct li{min-height:16px}
.path.direct li::before{inset-inline-start:-30px;top:2px;width:15px;height:15px;
  background:var(--berry);border-color:var(--berry)}
.path.direct li:not(:last-child)::after{inset-inline-start:-23.5px;top:19px;bottom:-20px;
  width:2px;background:var(--berry)}
.path.direct li span{font-family:inherit;font-size:17px;font-weight:600;letter-spacing:-.01em;
  text-transform:none;color:var(--forest);line-height:1.4}
.chain-lane em{display:block;margin-top:12px;font-style:normal;font-size:12px;color:var(--sage)}
.chain-lane.new em{color:var(--berry);font-weight:500}

/* ═══ Ultra-Fresh Experience ═══ */
.xp-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;margin-top:14px}
.crops{margin-top:30px}
.crop{display:flex;gap:18px;padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline}
.crop:last-child{border-bottom:none}
.crop b{font-size:20px;color:var(--forest);min-width:230px;letter-spacing:-.012em;font-weight:600}
.crop span{font-size:15px;color:var(--sage);line-height:1.55}
.thesis{font-family:'IBM Plex Mono',monospace;font-size:15px;color:var(--forest);line-height:1.7;padding:16px 20px;border-inline-start:2px solid var(--berry);background:var(--cream-warm);border-radius:0 14px 14px 0;margin:28px 0 0;max-width:540px}

/* Media cards: aspect-ratio tokens instead of fixed pixel heights.
   Reserves layout space before the image loads (no CLS) and keeps the
   crop proportional at every viewport width. */
.media-card{--ar:4/3;position:relative;overflow:hidden;border-radius:var(--r);
  border:1px solid var(--line);box-shadow:var(--shadow-s);background:#0a140f;aspect-ratio:var(--ar)}
.media-card.ar-portrait{--ar:3/4}
.media-card.ar-square{--ar:1/1}
.media-card.ar-wide{--ar:16/9}
.media-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.media-card.focus-left img{object-position:38% 40%}
.media-card.focus-low img{object-position:center 78%}
.media-card.focus-high img{object-position:center 22%}
/* Vertical video band (desktop). The clip is 1080x1920: shown at its native
   aspect ratio it stays sharp; stretching it into a wide hero would upscale 1.8x.
   Hidden on narrow screens — there the same clip already plays in the hero. */
.video-band{margin-top:64px;display:grid;grid-template-columns:320px 1fr;gap:48px;align-items:center}
.video-panel{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow-m);background:#0a140f;aspect-ratio:9/16}
.video-panel__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.video-band__text{max-width:520px}
.video-band__text h3{margin-top:14px;color:var(--forest)}
.video-band__text p{margin-top:16px;font-size:17px;color:var(--sage);line-height:1.65}
@media (max-width:880px){ .video-band{display:none} }
@media (prefers-reduced-motion: reduce){ .video-band{display:none} }
.media-cap{position:absolute;left:16px;right:16px;bottom:16px;padding:13px 16px;border-radius:16px;background:linear-gradient(180deg,rgba(5,12,9,.1),rgba(5,12,9,.78));color:#fff;z-index:1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.media-cap strong{display:block;font-size:15px;margin-bottom:3px;letter-spacing:-.01em;font-weight:600}
.media-cap span{font-size:12px;color:rgba(255,255,255,.78);line-height:1.5}

/* ── Same-day journey ── */
.journey-wrap{margin-top:64px}
.journey{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;counter-reset:jstep}
/* v27: previously a single line with 9% side insets guessed by eye — it started
   after the first node and ran past the last. Each node now draws a segment to
   its neighbour, so the line can neither fall short nor overshoot. */
.jstep:not(:last-child)::before{content:'';position:absolute;top:9px;inset-inline-start:20px;
  width:calc(100% - 20px);height:2px;background:var(--line)}
.jstep{position:relative;padding:0 16px 0 0;transition:opacity .5s var(--ease)}
.jstep .dot{display:block;width:20px;height:20px;border-radius:50%;background:var(--cream);border:2.5px solid var(--line);margin-bottom:16px;position:relative;z-index:1;transition:border-color .4s,background .4s}
.jstep.on .dot{border-color:var(--berry);background:var(--berry);box-shadow:0 0 0 5px rgba(139,41,66,.14)}
.jstep .t{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;color:var(--berry);letter-spacing:.05em}
.jstep b{display:block;margin-top:6px;font-size:17px;color:var(--forest);letter-spacing:-.012em;line-height:1.35;font-weight:600}
.jstep p{margin-top:6px;font-size:15px;color:var(--sage);line-height:1.55}
.journey-note{margin-top:26px}

/* ═══ Since 2012 — timeline ═══ */
.tl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.tl-nav{display:flex;gap:10px}
.tl-btn{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;display:grid;place-items:center;transition:border-color .2s,transform .2s}
.tl-btn:hover{border-color:var(--forest);transform:translateY(-2px)}
.tl-btn svg{width:18px;height:18px;stroke:var(--forest)}
.tl-btn:disabled{opacity:.35;cursor:default;transform:none}
.tl-scroll{display:flex;gap:16px;margin-top:44px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 22px;scrollbar-width:none}
.tl-scroll::-webkit-scrollbar{display:none}
.tl-card{flex:0 0 320px;scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;display:flex;flex-direction:column;gap:12px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.tl-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.tl-card .y{font-family:'IBM Plex Mono',monospace;font-size:clamp(29px,3.4vw,38px);font-weight:600;color:var(--forest);letter-spacing:-.02em;line-height:1}
.tl-card h3{font-size:20px;line-height:1.3}
.tl-card p{font-size:15px;color:var(--sage);line-height:1.6}
.tl-card .learn{font-size:15px;color:var(--forest);line-height:1.55;padding-top:10px;border-top:1px solid var(--line);margin-top:auto}
.tl-card .learn b{font-weight:600}
.tl-proof{margin-top:56px;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.tl-proof .media-card{--ar:5/4}
.proof-quote{font-size:24px;font-weight:500;color:var(--forest);line-height:1.5;letter-spacing:-.01em}

/* ═══ The System Behind the Berry ═══ */
.layers{margin-top:52px}
.layers-tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--line-dark);padding-bottom:0}
.layers-tab{background:none;border:none;border-bottom:2.5px solid transparent;color:rgba(250,247,240,.72);font-size:15px;font-weight:600;padding:12px 18px 14px;cursor:pointer;transition:color .2s,border-color .2s;letter-spacing:-.005em;display:inline-flex;gap:10px;align-items:center}
.layers-tab .n{font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(250,247,240,.55)}
.layers-tab:hover{color:var(--cream)}
.layers-tab[aria-selected="true"]{color:var(--cream);border-bottom-color:var(--gold)}
.layers-tab[aria-selected="true"] .n{color:var(--gold)}
.layers-panel{padding:38px 0 8px;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.js-tabs .layers-panel[hidden]{display:none}
.layers-panel .phrase{font-size:24px;font-weight:500;color:var(--cream);line-height:1.42;letter-spacing:-.01em}
.layers-panel .fact{margin-top:18px;font-size:17px;color:rgba(250,247,240,.78);line-height:1.65}
.layers-panel .outcome{margin-top:22px;display:flex;gap:12px;align-items:baseline;font-size:15px}
.layers-panel .outcome .k{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.layers-panel .outcome span{color:rgba(250,247,240,.85)}
/* v26: layer panel. The outline drawings are gone — they read as a free icon
   pack. Layer parameters take their place: what an engineering company
   should actually put on the page. */
.spec{border-top:1px solid rgba(240,217,168,.28)}
.spec-row{display:grid;grid-template-columns:minmax(120px,.42fr) 1fr;gap:20px;
  padding:15px 0;border-bottom:1px solid rgba(240,217,168,.18)}
.spec dt{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);line-height:1.5;padding-top:2px}
.spec dd{font-size:17px;color:var(--cream);line-height:1.45;letter-spacing:-.01em}
/* min-height (not a fixed height): the panel holds text, not media — it grows with content */
.layer-visual{border-radius:var(--r);border:1px solid var(--line-dark);background:rgba(250,247,240,.04);padding:30px;min-height:280px;display:flex;align-items:center;justify-content:center}
.layer-visual svg{width:100%;max-width:380px;height:auto}

/* ── chamber hotspots ── */
.chamber{margin-top:72px;display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:center}
.chamber-fig{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-dark);aspect-ratio:5/6}
.chamber-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.spot{position:absolute;z-index:2;width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;background:rgba(250,247,240,.92);display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.35);transition:transform .2s var(--ease),background .2s}
.spot::after{content:'';position:absolute;inset:-7px;border-radius:50%;border:1.5px solid rgba(250,247,240,.5);animation:pulse 2.6s var(--ease) infinite}
.spot span{width:10px;height:10px;border-radius:50%;background:var(--berry);transition:transform .2s}
.spot:hover,.spot[aria-expanded="true"]{transform:scale(1.12);background:var(--gold)}
@keyframes pulse{0%{transform:scale(.8);opacity:.9}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
.chamber-list{list-style:none;display:flex;flex-direction:column;gap:6px}
.chamber-item{border:1px solid var(--line-dark);border-radius:18px;padding:18px 22px;transition:background .25s,border-color .25s;cursor:pointer}
.chamber-item.on{background:rgba(250,247,240,.06);border-color:rgba(240,217,168,.4)}
.chamber-item b{display:flex;gap:12px;align-items:baseline;font-size:17px;color:var(--cream);font-weight:600;letter-spacing:-.01em}
.chamber-item b .n{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--gold)}
.chamber-item p{margin-top:7px;font-size:15px;color:rgba(250,247,240,.74);line-height:1.6}
.chamber-note{margin-top:18px}

/* ═══ Partnership ═══ */
.roles{margin-top:50px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.role-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:32px 28px;transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.role-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-m)}
.role-card.together{background:linear-gradient(180deg,var(--cream-warm),var(--surface) 70%);border-color:rgba(139,41,66,.35)}
.role-card .who{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--berry);margin-bottom:16px}
.role-card ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.role-card li{font-size:15px;color:var(--ink);line-height:1.55;padding-inline-start:20px;position:relative}
.role-card li::before{content:'';position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--berry);opacity:.55}
.role-note{margin-top:22px}
/* v26: stages. The marker was a <span> without display:block, so width and
   height never applied and the "dot" collapsed into a vertical tick.
   Markers removed entirely: a hairline and a short rule carry the axis. */
.stages{margin-top:60px;display:grid;grid-template-columns:repeat(5,1fr);gap:0 32px}
.stage{position:relative;padding:20px 8px 0 0;border-top:1px solid var(--line)}
.stage::before{content:'';position:absolute;top:-1px;left:0;width:36px;height:2px;background:var(--berry)}
.stage .k{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--berry)}
.stage b{display:block;margin-top:6px;font-size:17px;color:var(--forest);line-height:1.35;letter-spacing:-.01em;font-weight:600}
.stage p{margin-top:5px;font-size:15px;color:var(--sage);line-height:1.5}

/* ═══ Network / roadmap ═══ */
.miles{margin-top:52px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;display:flex;flex-direction:column;gap:12px}
.mile b{font-size:17px;color:var(--forest);letter-spacing:-.012em;line-height:1.35;font-weight:600}
.mile p{font-size:15px;color:var(--sage);line-height:1.55}
.mile .chip{align-self:flex-start}
.net-note{margin-top:30px;max-width:720px}

/* ═══ Investor route ═══ */
.tracks{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:48px}
.track{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:36px 32px;transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.section.white .track{background:var(--cream)}
.track:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.track .tag{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--berry)}
.track h3{font-size:24px;margin:14px 0 10px}
.track p{font-size:17px;color:var(--sage);line-height:1.62}
.inv-note{margin-top:28px;max-width:760px}
.inv-cta{margin-top:32px;display:flex;gap:22px;align-items:center;flex-wrap:wrap}

/* ═══ Founder & Team ═══ */
.founder{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center}
.founder .media-card{--ar:4/5}
.f-quote{font-size:24px;font-weight:500;color:var(--forest);line-height:1.5;letter-spacing:-.01em;margin-top:24px}
.f-name{margin-top:28px}
.f-name b{display:block;font-size:17px;color:var(--forest);font-weight:600}
.f-name span{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--sage);letter-spacing:.03em}
.team{margin-top:64px;border-top:1px solid var(--line);padding-top:44px}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.tm{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px 22px}
.tm b{display:block;font-size:17px;color:var(--forest);letter-spacing:-.01em;font-weight:600}
.tm span{display:block;margin-top:7px;font-size:15px;color:var(--sage);line-height:1.55}

/* ═══ Final invitation ═══ */
.final-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.final-grid h2{max-width:560px}
.final-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;align-items:center}
.final-links{margin-top:26px;display:flex;gap:28px;flex-wrap:wrap}
.final-media .media-card{--ar:5/4;border-color:var(--line-dark)}

/* ═══ Route pages (partners / investors / buyers) ═══ */
.route-hero{padding:170px 0 72px;position:relative;overflow:clip}
.route-hero h1{max-width:780px;text-wrap:balance}
.route-hero .lead{max-width:680px}
.route-hero.on-dark{background:var(--forest);color:var(--cream)}
/* v22 FIX: .on-dark was missing from the .dark/.deep set — the heading was
   painted forest on a forest background and was invisible (technology,
   investors). Pairing restored. */
.on-dark .kicker{color:var(--gold)}
.on-dark h1,.on-dark h2,.on-dark h3{color:var(--cream)}
.on-dark .lead{color:rgba(250,247,240,.76)}
.on-dark .refrain{color:rgba(250,247,240,.72)}
.on-dark .refrain b{color:var(--gold)}
.on-dark .btn-ghost{border-color:var(--line-dark);color:var(--cream)}
.on-dark .btn-ghost:hover{border-color:var(--cream)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.split .media-card{--ar:5/4}
.plist{margin-top:34px;display:flex;flex-direction:column;gap:0}
.prow{display:grid;grid-template-columns:54px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline}
.prow:last-child{border-bottom:none}
.prow .m{font-family:'IBM Plex Mono',monospace;font-size:20px;font-weight:600;color:var(--berry);letter-spacing:-.02em}
.prow b{font-size:17px;color:var(--forest);font-weight:600;letter-spacing:-.012em}
.prow p{margin-top:5px;font-size:15px;color:var(--sage);line-height:1.6}
.dark .prow,.deep .prow{border-color:var(--line-dark)}
.dark .prow b,.deep .prow b{color:var(--cream)}
.dark .prow p,.deep .prow p{color:rgba(250,247,240,.7)}

/* ═══ Forms (inline route forms + modals) ═══ */
.form-shell{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:44px;box-shadow:var(--shadow-s);max-width:720px}
.form-shell h3{font-size:24px;margin-bottom:8px}
.form-shell .form-sub{font-size:15px;color:var(--sage);line-height:1.6;margin-bottom:26px}
.field{margin-bottom:16px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--forest);margin-bottom:6px;letter-spacing:.01em}
.field label .req{color:var(--berry)}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:13px;font-family:inherit;font-size:17px;color:var(--ink);background:#fff;transition:border-color .2s,box-shadow .2s;box-sizing:border-box}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--berry);box-shadow:0 0 0 3px rgba(139,41,66,.1)}
.field textarea{resize:vertical;min-height:90px}
.field.err input,.field.err select,.field.err textarea{border-color:#B23A2E}
.field .field-msg{font-size:12px;color:#B23A2E;margin-top:5px;display:none}
.field.err .field-msg{display:block}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent-field{display:flex;gap:10px;align-items:flex-start;margin:10px 0 22px}
.consent-field input{width:auto;margin-top:3px;flex-shrink:0;accent-color:var(--berry)}
.consent-field label{font-size:12px;color:var(--sage);font-weight:400;line-height:1.5}
.consent-field a{color:var(--forest);text-decoration:underline;text-underline-offset:2px}
/* v22 FIX: an unticked consent box had no error state — submission failed
   silently and the visitor assumed the form was broken. */
.consent-field.err input{outline:2px solid #B23A2E;outline-offset:2px;border-radius:3px}
.consent-field.err label{color:#B23A2E}
.btn-submit{width:100%;justify-content:center;padding:15px;font-size:15px}
.btn-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
.form-status{margin-top:14px;padding:12px 14px;border-radius:12px;font-size:15px;line-height:1.5;display:none}
.form-status.error{display:block;background:#FDECEA;color:#9C3428;border:1px solid #F5C6C0}
.form-success{display:none;text-align:center;padding:28px 0}
.form-success.show{display:block}
.form-success .tick{width:64px;height:64px;margin:0 auto 20px;border-radius:50%;background:var(--cream-warm);display:flex;align-items:center;justify-content:center}
.form-success .tick svg{width:30px;height:30px;stroke:var(--forest)}
.form-success h3{margin-bottom:10px}
.form-success p{font-size:17px;color:var(--sage);line-height:1.65;max-width:420px;margin:0 auto}

/* ── sustainability figures ── */
.fig-row{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start;padding:44px 0;border-top:1px solid var(--line)}
.fig-row:last-of-type{border-bottom:1px solid var(--line)}
.bignum{font-family:'IBM Plex Mono',monospace;font-size:clamp(38px,5.6vw,60px);font-weight:600;color:var(--forest);letter-spacing:-.03em;line-height:1.05}
.bignum .u{font-size:.45em;color:var(--berry);letter-spacing:0}
.fig-row h3{margin-top:10px}
.fig-row .fig-body p{font-size:17px;color:var(--sage);line-height:1.65;margin-top:12px}
.fig-row .fig-body p:first-child{margin-top:0;color:var(--ink)}
.fig-scope{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:880px){.fig-row{grid-template-columns:1fr;gap:18px;padding:34px 0}}

/* ── modal ── */
.modal-overlay{position:fixed;inset:0;z-index:300;background:rgba(7,20,14,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto}
.modal-overlay.open{display:flex}
.modal{background:var(--cream);border-radius:26px;max-width:560px;width:100%;padding:38px 36px 32px;box-shadow:0 30px 80px rgba(8,25,18,.4);position:relative;margin:auto}
.modal-close{position:absolute;top:18px;right:18px;width:38px;height:38px;border:none;background:rgba(27,77,62,.08);border-radius:50%;cursor:pointer;font-size:20px;line-height:1;color:var(--forest);transition:background .2s}
.modal-close:hover{background:rgba(27,77,62,.16)}
.modal h3{font-size:24px;margin-bottom:6px}
.modal .form-sub{font-size:15px;color:var(--sage);line-height:1.55;margin-bottom:22px}

/* ═══ Utility / legal pages ═══ */
.legal-meta{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--sage);letter-spacing:.03em;margin-top:14px}
.legal-body{max-width:760px}
.legal-body h2{font-size:24px;margin:40px 0 12px;max-width:none}
.legal-body p,.legal-body li{font-size:17px;color:var(--ink);line-height:1.7}
.legal-body p{margin:10px 0}
.legal-body ul{padding-inline-start:22px;margin:10px 0}
.legal-body li{margin:8px 0}
.legal-body a{color:var(--forest);text-decoration:underline;text-underline-offset:2px}
.legal-body .muted{color:var(--sage);font-size:15px}
.legal-note{background:var(--cream-warm);border-inline-start:2px solid var(--berry);border-radius:0 14px 14px 0;padding:22px 24px;margin-bottom:6px}
.legal-note p{margin:0}
.big404{font-family:'IBM Plex Mono',monospace;font-size:clamp(84px,14vw,150px);font-weight:600;color:var(--forest);letter-spacing:-.04em;line-height:1}
.state-hero{padding:180px 0 100px}
.state-hero h1{margin-top:18px}
.state-hero p{margin-top:14px;font-size:20px;color:var(--sage);max-width:520px;line-height:1.65}
.state-cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}

/* ═══ Footer ═══ */
.footer{background:var(--forest-deep);color:rgba(250,247,240,.68);padding:52px 0 36px}
.f-top{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid var(--line-dark)}
.footer-logo{height:84px;width:auto;display:block}
.f-cat{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.f-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding:32px 0}
.f-col{display:flex;flex-direction:column;gap:9px}
.f-col b{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(250,247,240,.5);margin-bottom:4px}
.f-col a{color:rgba(250,247,240,.78);text-decoration:none;font-size:15px;transition:color .2s}
.f-col a:hover{color:#fff}
.f-col button.f-link{background:none;border:none;padding:0;text-align:left;color:rgba(250,247,240,.78);font-size:15px;cursor:pointer;transition:color .2s;font-family:inherit}
.f-col button.f-link:hover{color:#fff}
.f-col.f-contact span{font-size:15px;color:rgba(250,247,240,.62);line-height:1.5}
.f-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line-dark);font-size:12px;color:rgba(250,247,240,.55)}
.f-bottom a{color:rgba(250,247,240,.78);text-decoration:none}
.f-bottom a:hover{color:#fff}

/* ═══ Cookie banner ═══ */
#cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;max-width:560px;margin:0 auto;background:var(--forest-deep);color:#fff;border-radius:20px;padding:22px 24px;box-shadow:0 18px 46px rgba(8,25,18,.35);transform:translateY(150%);transition:transform .45s var(--ease-out);visibility:hidden}
#cookie-banner.show{transform:none;visibility:visible}
#cookie-banner p{font-size:15px;line-height:1.6;color:rgba(255,255,255,.82);margin:0 0 16px}
#cookie-banner a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-actions button{padding:11px 20px;border-radius:999px;font-weight:700;font-size:15px;cursor:pointer;border:1.5px solid transparent;transition:transform .2s,background .2s}
.cookie-actions button:hover{transform:translateY(-2px)}
.ck-accept{background:var(--cream);color:var(--forest-deep)}
.ck-decline{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}

/* ═══ Reveal on scroll (once, fade + rise ≤24px — TZ 5.4) ═══ */
.anim-on .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.anim-on .reveal.in{opacity:1;transform:none}
.anim-on .reveal.d1{transition-delay:.08s}
.anim-on .reveal.d2{transition-delay:.16s}
.anim-on .reveal.d3{transition-delay:.24s}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .anim-on .reveal{opacity:1;transform:none;transition:none}
  .scroll-cue::after{animation:none}
  .spot::after{animation:none}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}
@media print{
  .anim-on .reveal{opacity:1;transform:none}
}

/* ═══ Responsive ═══ */
@media (max-width:1020px){
  .roles{grid-template-columns:1fr}
  .miles{grid-template-columns:1fr 1fr}
  .stages{grid-template-columns:1fr 1fr;gap:26px 24px}
  .spec-row{grid-template-columns:1fr;gap:4px;padding:13px 0}
  .team-grid{grid-template-columns:1fr}
  .journey{grid-template-columns:repeat(5,1fr)}
}
@media (max-width:880px){
  .section{padding:76px 0}
  .section.tight{padding:60px 0}
  .hero{padding:130px 0 64px;min-height:78vh}
  .hero-veil{background:linear-gradient(180deg,rgba(250,247,240,.3) 0%,rgba(250,247,240,.12) 30%,rgba(250,247,240,.78) 66%,rgba(250,247,240,.98) 100%)}
  .brand-mark{height:40px;max-width:190px}
  .brand-note{display:none}
  .xp-grid,.tl-proof,.founder,.split,.final-grid,.layers-panel,.chamber{grid-template-columns:1fr;gap:36px}
  .states,.tracks{grid-template-columns:1fr}
  .journey{grid-template-columns:1fr;gap:0}
  .jstep:not(:last-child)::before{top:20px;inset-inline-start:9px;width:2px;height:calc(100% - 20px)}
  .jstep{display:grid;grid-template-columns:20px 1fr;gap:0 18px;padding:0 0 30px}
  .jstep .dot{margin-bottom:0}
  .jstep .t,.jstep b,.jstep p{grid-column:2}
  .media-card{--ar:4/3}
  .chamber-fig{aspect-ratio:4/3}
  .founder .media-card{--ar:4/3}
  .route-hero{padding:130px 0 56px}
  .form-shell{padding:32px 24px}
  .nav{position:fixed;inset:72px 0 auto 0;background:var(--cream);flex-direction:column;align-items:stretch;padding:16px 24px 26px;gap:2px;border-bottom:1px solid var(--line);transform:translateY(-130%);transition:transform .3s var(--ease);max-height:calc(100vh - 72px);overflow-y:auto}
  .nav.open{transform:none}
  .nav a{padding:13px 4px;font-size:17px;border-bottom:1px solid var(--line);opacity:1}
  .nav .btn{margin-top:14px;justify-content:center;border-bottom:none;font-size:15px}
  .burger{display:block}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media (max-width:560px){
  body{font-size:17px}
  .brand-mark{height:36px;max-width:170px}
  .media-card{--ar:5/4}
  .chamber-fig{aspect-ratio:5/4}
  .media-cap{left:12px;right:12px;bottom:12px;padding:11px 13px}
  .crop{flex-direction:column;gap:4px}
  .crop b{min-width:0}
  .hero-cta .btn,.final-cta .btn{width:100%}
  .tl-card{flex-basis:280px}
  .miles{grid-template-columns:1fr}
  .stages{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr;gap:0}
  .modal{padding:30px 22px 26px;border-radius:22px}
  .layers-tab{padding:10px 12px 12px;font-size:15px}
  .f-cols{grid-template-columns:1fr 1fr;gap:22px}
}
@media (max-width:400px){
  .f-cols{grid-template-columns:1fr}
}