/* ============================================================================
   GlobAgri Solutions, homepage PASS 1 (faithful clone)
   Structure + motion: Supernormal Greens (supernormalgreens.com), captured to
   viz/supernormal-ref. Skeleton, section order, hero composition, ONE signature
   motion move (grow-then-pill scrub), and editorial reveals reproduced faithfully.
   Palette: GlobAgri's OWN logo colours (forest / emerald / gold on warm cream).
   Every :root brand hue traces to the GlobAgri logo (gate-taste). No borrowed
   lab-green, no borrowed mint. FLAT: zero box-shadows anywhere (reference is flat).
   Type: Hanken Grotesk (self-hosted), the flagged free twin for Moderat.
   ========================================================================== */

/* ---------- Hanken Grotesk (self-hosted twin for Moderat; row_type:font, flagged) ---------- */
@font-face{ font-family:"Hanken Grotesk"; font-weight:400; font-style:normal; font-display:swap;
  src:url("../fonts/hanken-400.woff2") format("woff2"); }
@font-face{ font-family:"Hanken Grotesk"; font-weight:500; font-style:normal; font-display:swap;
  src:url("../fonts/hanken-500.woff2") format("woff2"); }
@font-face{ font-family:"Hanken Grotesk"; font-weight:600; font-style:normal; font-display:swap;
  src:url("../fonts/hanken-600.woff2") format("woff2"); }
@font-face{ font-family:"Hanken Grotesk"; font-weight:700; font-style:normal; font-display:swap;
  src:url("../fonts/hanken-700.woff2") format("woff2"); }

/* ---------- Brand tokens (every non-neutral hue traces to the GlobAgri logo) ---------- */
:root{
  --cream:#FCF9ED;         /* warm cream canvas; matches reference canvas #fcf9ed exactly (tokens.json canvas, neutral) */
  --surface:#FFFFFF;       /* white surface (tokens.json surface #ffffff) */
  --surface-alt:#F0EDE6;   /* warm-gray flat cards (tokens.json surfaceAlt #f0ede6) */
  --line:#E4DECB;          /* warm hairline on cream (globagri.md, logo-traced warm) */
  --ink:#1C201B;           /* charcoal-green ink = GlobAgri logo wordmark; body + small heads (globagri.md) */
  --forest:#0E3D24;        /* deep forest green = logo G-disc; feature panels + display heads (globagri.md) */
  --forest-2:#14512F;      /* second forest for panel depth / gradients (globagri.md) */
  --cream-on-dark:#F3EFE0; /* cream text/marks on the forest panels (globagri.md) */
  --green:#1E7A46;         /* primary brand green = logo G-disc; links, active, CTA fill (globagri.md) */
  --emerald:#52B07A;       /* leaf blade = lighter accent, highlights, illustration key (globagri.md) */
  --gold:#C6A44E;          /* logo gold outline = the one warm highlight; eyebrows, marks (globagri.md) */
  --gold-bright:#DDBF6A;   /* brighter gold for gradients on the forest panels (globagri.md) */

  /* derived rgba (not brand tokens; the taste gate reads only :root hex) */
  --ink-70:rgba(28,32,27,.70);
  --ink-55:rgba(28,32,27,.55);
  --cream-70:rgba(243,239,224,.72);
  --cream-45:rgba(243,239,224,.45);
  --line-dark:rgba(243,239,224,.14);

  /* shape: radii 4 / 6 / pill 560 (CAPTURE LOCK); spacing base 8; shadows NONE */
  --r-xs:4px;
  --r-card:6px;
  --pill:560px;
  --shadow:none;          /* reference is FLAT; recorded explicitly, never invented */

  --nav-h:70px;           /* reference hairline bar height */
  --pad:clamp(20px,5vw,80px);
  --maxw:1360px;
}

/* ---------- reset + base ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html,body{ overflow-x:clip; }              /* clip, not hidden: keeps anchors + ScrollTrigger correct (no Lenis) */
body{
  background:var(--cream);
  color:var(--ink);
  font-family:"Hanken Grotesk",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:400;
  font-size:clamp(16px,1.02vw,18px);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
::selection{ background:var(--emerald); color:var(--forest); }
:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:var(--r-xs); }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
section{ position:relative; }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--forest); color:var(--cream-on-dark);
  padding:12px 18px; border-radius:var(--r-card);
}
.skip-link:focus{ left:12px; top:12px; }

/* html.is-loading is removed by app.js after window.load + rAF (reference gate) */
html.is-loading [data-header],
html.is-loading [data-para],
html.is-loading [data-img]{ opacity:0; }

/* ---------- type scale ---------- */
.eyebrow{
  font-size:13px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); margin-bottom:18px;
}
.eyebrow--onDark{ color:var(--gold-bright); }

.sec-title{
  font-weight:600; letter-spacing:-.02em; line-height:1.08; color:var(--forest);
  font-size:clamp(27px,3vw,40px); max-width:20ch;   /* ch resolves at the heading's OWN size, not body */
  text-wrap:balance;
}
.sec-head{ margin-bottom:clamp(32px,4.5vw,56px); }

/* ---------- buttons: fully-rounded pill; green fill takes cream text (CAPTURE LOCK) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:600; font-size:15px; letter-spacing:.005em;
  padding:13px 26px; border-radius:var(--pill); border:none;
  box-shadow:var(--shadow); cursor:pointer;
  transition:background-color .25s ease, color .25s ease, transform .25s ease;
}
.btn--lg{ padding:16px 32px; font-size:16px; }
.btn--block{ display:flex; width:100%; }
.btn--green{ background:var(--green); color:var(--cream-on-dark); }
.btn--green:hover{ background:var(--forest); }
.btn--gold{ background:var(--gold); color:var(--forest); }
.btn--gold:hover{ background:var(--gold-bright); }
.btn[aria-disabled="true"]{ opacity:.62; cursor:not-allowed; }

/* ---------- NAV (hairline top bar; wordmark left, links, pill right) ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:1px solid var(--line);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; min-height:var(--nav-h); gap:24px; }
.nav__links ul{ display:flex; gap:30px; }
.nav__links a{ font-size:15px; font-weight:500; color:var(--ink); transition:color .2s ease; }
.nav__links a:hover{ color:var(--green); }
.nav__right{ display:flex; align-items:center; gap:14px; }

.brand{ display:inline-flex; align-items:center; gap:10px; }
.brand__mark{
  display:grid; place-items:center; width:32px; height:32px; border-radius:8px;
  background:var(--forest); color:var(--cream-on-dark); font-weight:700; font-size:18px;
}
.brand__word{ font-weight:700; font-size:20px; letter-spacing:-.01em; color:var(--ink); }
.brand--onDark .brand__word{ color:var(--cream-on-dark); }
.brand--onDark .brand__mark{ background:var(--emerald); color:var(--forest); }

.nav__burger{ display:none; flex-direction:column; gap:5px; width:40px; height:40px;
  align-items:center; justify-content:center; background:transparent; border:none; cursor:pointer; }
.nav__burger span{ display:block; width:22px; height:2px; background:var(--ink); transition:transform .25s ease, opacity .2s ease; }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:var(--nav-h) 0 auto 0; z-index:99;
  background:var(--cream); border-bottom:1px solid var(--line);
  padding:22px var(--pad) 30px; transform:translateY(-8px); opacity:0;
  transition:opacity .25s ease, transform .25s ease;
}
.mobile-nav[hidden]{ display:none; }
.mobile-nav.is-open{ opacity:1; transform:translateY(0); }
.mobile-nav ul{ display:flex; flex-direction:column; gap:4px; margin-bottom:18px; }
.mobile-nav a{ display:block; padding:12px 4px; font-size:19px; font-weight:600; color:var(--forest); border-bottom:1px solid var(--line); }

/* ---------- 0. HERO ---------- */
.hero{
  min-height:calc(100svh - var(--nav-h));
  display:flex; flex-direction:column;
  padding:clamp(16px,2.4vw,28px) var(--pad) clamp(28px,4vw,52px);
  gap:clamp(20px,3vw,40px);
}
.hero__media{
  flex:1 1 auto; min-height:34vh; position:relative;
  border-radius:12px; overflow:hidden;
  /* poster as bg: shows instantly while the loop loads, and is the reduced-motion/no-JS fallback */
  background:var(--surface-alt) url("../img/hero-poster.webp") center/cover no-repeat;
}
.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero__foot{ flex:0 0 auto; }
.hero .eyebrow{ margin-bottom:14px; }
.hero__title{
  font-weight:600; color:var(--forest);
  font-size:clamp(44px,8.2vw,104px); line-height:.98; letter-spacing:-.035em;
}
.hero__row{
  display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap;
  margin-top:clamp(20px,2.6vw,32px);
}
.hero__lead{ max-width:52ch; font-size:clamp(16px,1.15vw,19px); color:var(--ink-70); }

/* ---------- 1. INTRO / WHAT WE DO (offset single column, reference intro-statement) ---------- */
.intro{ padding:clamp(72px,11vw,150px) var(--pad); }
.intro__col{ max-width:640px; margin-left:auto; margin-right:clamp(0px,8vw,120px); }
.intro__title{
  font-weight:600; color:var(--forest); letter-spacing:-.02em; line-height:1.1;
  font-size:clamp(26px,3.1vw,42px); margin-bottom:30px; text-wrap:balance;
}
.intro__col p{ font-size:clamp(16px,1.15vw,19px); color:var(--ink-70); margin-bottom:20px; max-width:56ch; }

/* ---------- 2. SERVICE PILLARS (flat warm-gray cards; 6px radius; no shadow) ---------- */
.services{ padding:clamp(56px,8vw,110px) 0; }
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.svc-card{
  background:var(--surface-alt); border-radius:var(--r-card); box-shadow:var(--shadow);
  padding:clamp(26px,2.4vw,38px); display:flex; flex-direction:column; gap:12px;
}
.svc-card__num{ font-size:13px; font-weight:600; letter-spacing:.14em; color:var(--gold); }
.svc-card__title{ font-size:clamp(19px,1.5vw,23px); font-weight:600; letter-spacing:-.01em; color:var(--forest); }
.svc-card p{ font-size:15.5px; color:var(--ink-70); line-height:1.5; }

/* ---------- 3. SIGNATURE: value-chain grow-then-pill scrub ---------- */
.vc{ background:var(--cream); }
.vc-wrap{ position:relative; height:340vh; }               /* tall trigger; panel reads pinned while it morphs */
.vc-sticky{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; align-items:center; justify-content:flex-end;
  padding:0 var(--pad);
}
.vc-panel{
  position:relative; width:100%; height:0;                  /* GSAP: height 0 -> 100vh, then width -> 30vw pill */
  border-radius:12px; overflow:hidden; background:var(--forest);
  will-change:height,width,border-radius;
}
.vc-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vc-panel__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,61,36,.30), rgba(14,61,36,.62)); }

.vc-intro{
  position:absolute; left:var(--pad); right:var(--pad); top:50%; transform:translateY(-50%);
  z-index:3; color:var(--cream-on-dark); max-width:none; pointer-events:none;
}
.vc-intro__line{ font-weight:600; letter-spacing:-.02em; line-height:1.05; font-size:clamp(30px,5vw,68px); }

.vc-stages{
  position:absolute; left:var(--pad); top:50%; transform:translateY(-50%);
  z-index:2; width:min(52vw,640px); opacity:0; display:flex; flex-direction:column; gap:2px;
}
.vc-stages li{
  display:grid; grid-template-columns:minmax(120px,26%) 1fr; gap:18px; align-items:baseline;
  padding:16px 0; border-top:1px solid var(--line);
}
.vc-stages li:last-child{ border-bottom:1px solid var(--line); }
.vc-stages__k{ font-weight:600; font-size:clamp(17px,1.5vw,22px); color:var(--forest); letter-spacing:-.01em; }
.vc-stages__v{ font-size:15px; color:var(--ink-70); line-height:1.45; }

/* reduced-motion (desktop): no scrub runs, so render the value chain STATIC and readable
   (panel visible, intro over it, stages listed below) instead of the JS start-state blank. */
@media (prefers-reduced-motion: reduce) and (min-width:768px){
  .vc-wrap{ height:auto; }
  .vc-sticky{ position:relative; height:auto; display:block; padding:clamp(48px,8vw,90px) var(--pad); }
  .vc-panel{ height:56vh; width:100%; border-radius:16px; }
  .vc-intro{ position:absolute; left:var(--pad); right:var(--pad); bottom:36px; top:auto; transform:none; }
  .vc-stages{ position:static; opacity:1; width:100%; transform:none; margin-top:32px; }
  .vc-stages li{ opacity:1; transform:none; }
}

/* ---------- 4. WHO WE WORK WITH (image-topped cards) ---------- */
.audience{ padding:clamp(56px,8vw,110px) 0; }
.aud-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.aud-card__media{ border-radius:var(--r-card); overflow:hidden; margin-bottom:18px; aspect-ratio:4/3; background:var(--surface-alt); }
.aud-card__media img{ width:100%; height:100%; object-fit:cover; }
.aud-card__title{ font-size:clamp(18px,1.4vw,21px); font-weight:600; color:var(--forest); letter-spacing:-.01em; margin-bottom:8px; }
.aud-card p{ font-size:15px; color:var(--ink-70); line-height:1.5; }

/* ---------- 5. ABOUT (split: text + checklist / tall photo) ---------- */
.about{ padding:clamp(56px,8vw,120px) 0; }
.about__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,80px); align-items:start; }
.about__text .sec-title{ margin-bottom:26px; }
.about__text p{ font-size:clamp(16px,1.1vw,18px); color:var(--ink-70); margin-bottom:18px; max-width:54ch; }
.about__vm strong{ color:var(--forest); font-weight:600; }
.checklist{ display:grid; gap:12px; margin-top:26px; }
.checklist li{ position:relative; padding-left:32px; font-size:16px; color:var(--ink); font-weight:500; }
.checklist li::before{
  content:""; position:absolute; left:0; top:2px; width:20px; height:20px; border-radius:var(--r-xs);
  background:var(--emerald);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.55 17.6 4 12.05l1.4-1.4 4.15 4.14 9-9L20 7.2z'/%3E%3C/svg%3E") center/70% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.55 17.6 4 12.05l1.4-1.4 4.15 4.14 9-9L20 7.2z'/%3E%3C/svg%3E") center/70% no-repeat;
}
.checklist--two{ grid-template-columns:1fr 1fr; }
.about__media{ border-radius:var(--r-card); overflow:hidden; background:var(--surface-alt); }
.about__media img{ width:100%; height:100%; object-fit:cover; }

/* ---------- 6. LEADERSHIP ---------- */
.leadership{ padding:clamp(56px,8vw,110px) 0; }
.lead__grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(30px,4vw,60px); align-items:start; }
.lead__person{ display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:start; }
.lead__mono{
  width:118px; height:118px; border-radius:var(--r-card); flex:0 0 auto;
  display:grid; place-items:center; background:var(--forest); color:var(--cream-on-dark);
  font-weight:700; font-size:40px; letter-spacing:.02em;
}
.lead__name{ font-size:clamp(21px,1.8vw,26px); font-weight:600; color:var(--forest); letter-spacing:-.01em; }
.lead__role{ font-size:15px; font-weight:600; color:var(--gold); margin:4px 0 14px; }
.lead__bio{ font-size:16px; color:var(--ink-70); line-height:1.55; max-width:52ch; }
.lead__board{ background:var(--surface-alt); border-radius:var(--r-card); padding:clamp(24px,2.2vw,34px); }
.lead__board-title{ font-size:18px; font-weight:600; color:var(--forest); margin-bottom:12px; }
.lead__board p{ font-size:15.5px; color:var(--ink-70); line-height:1.55; }
.lead__facts{ margin-top:22px; display:grid; gap:0; }
.lead__facts > div{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--line); }
.lead__facts dt{ font-size:14px; color:var(--ink-55); }
.lead__facts dd{ font-size:15px; font-weight:600; color:var(--forest); text-align:right; }

/* ---------- 7. SUSTAINABILITY (photo + text split) ---------- */
.sustain{ padding:clamp(56px,8vw,120px) 0; }
.sustain__grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(32px,5vw,80px); align-items:center; }
.sustain__media{ border-radius:var(--r-card); overflow:hidden; background:var(--surface-alt); }
.sustain__media img{ width:100%; height:100%; object-fit:cover; }
.sustain__text .sec-title{ margin-bottom:24px; }
.sustain__text p{ font-size:clamp(16px,1.1vw,18px); color:var(--ink-70); max-width:52ch; }

/* ---------- 8. CONTACT (forest feature panel) ---------- */
.contact{ padding:clamp(40px,6vw,90px) var(--pad); }
.contact__grid{
  background:var(--forest); border-radius:var(--r-card); color:var(--cream-on-dark);
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,72px);
  padding:clamp(38px,5vw,80px);
}
.contact__title{ font-weight:600; letter-spacing:-.02em; line-height:1.08; color:var(--cream-on-dark);
  font-size:clamp(28px,3.2vw,44px); margin-bottom:22px; max-width:18ch; text-wrap:balance; }
.contact__text p{ color:var(--cream-70); font-size:clamp(16px,1.1vw,18px); max-width:44ch; }
.contact__details{ margin-top:30px; display:grid; gap:0; max-width:420px; }
.contact__details > div{ display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-top:1px solid var(--line-dark); }
.contact__details dt{ font-size:15px; color:var(--cream-70); }
.contact__details dd{ font-size:15px; font-weight:600; color:var(--cream-on-dark); }
.contact__details .is-pending{ color:var(--gold-bright); font-weight:500; }
.contact__panel{ background:var(--forest-2); border-radius:var(--r-card); padding:clamp(26px,2.6vw,38px); display:flex; flex-direction:column; gap:16px; justify-content:center; }
.contact__panel-lead{ font-size:17px; font-weight:600; color:var(--cream-on-dark); }
.chat-mount{ min-height:0; }
.chat-mount:empty{ min-height:0; }
.contact__note{ font-size:13px; color:var(--cream-45); }

/* ---------- FOOTER ---------- */
.foot{ background:var(--forest); color:var(--cream-on-dark); padding:clamp(48px,6vw,80px) 0 40px; }
.foot__top{ display:grid; grid-template-columns:1.1fr 1.9fr; gap:clamp(32px,5vw,64px); padding-bottom:44px; border-bottom:1px solid var(--line-dark); }
.foot__tag{ margin-top:16px; color:var(--cream-70); font-size:15px; }
.foot__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.foot__col h3{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-bright); margin-bottom:16px; font-weight:600; }
.foot__col li{ margin-bottom:10px; }
.foot__col a{ font-size:15px; color:var(--cream-70); transition:color .2s ease; }
.foot__col a:hover{ color:var(--cream-on-dark); }
.foot__legal{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-top:28px; }
.foot__reg p{ font-size:13.5px; color:var(--cream-70); line-height:1.6; }
.foot__reg strong{ color:var(--cream-on-dark); }
.foot__copy{ font-size:13px; color:var(--cream-45); align-self:flex-end; }

/* ---------- reveal masks (M2 SplitText); base states set by JS ---------- */
.mask-wrap{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.14em; margin-bottom:-.14em; }
[data-para] .line-mask{ display:block; overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em; }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .aud-grid{ grid-template-columns:repeat(2,1fr); }
  .about__grid,.sustain__grid,.lead__grid,.contact__grid{ grid-template-columns:1fr; }
  .about__media{ max-width:520px; }
  .sustain__grid .sustain__media{ order:-1; }
  .lead__board{ margin-top:8px; }
}
@media (max-width:820px){
  .nav__links{ display:none; }
  .nav__right .btn--green{ display:none; }
  .nav__burger{ display:flex; }
  .foot__top{ grid-template-columns:1fr; }
  .foot__cols{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:640px){
  .svc-grid{ grid-template-columns:1fr; }
  .aud-grid{ grid-template-columns:1fr; }
  .checklist--two{ grid-template-columns:1fr; }
  .intro__col{ margin-right:0; }
  .lead__person{ grid-template-columns:1fr; }
  .hero__row{ flex-direction:column; align-items:flex-start; }
  .foot__cols{ grid-template-columns:1fr 1fr; }
  .foot__legal{ flex-direction:column; }
  .foot__copy{ align-self:flex-start; }
}

/* ---------- MOBILE value-chain: grow-only, intro as heading, stages stacked (M1 mobile branch) ---------- */
@media (max-width:767px){
  .vc-wrap{ height:auto; }
  .vc-sticky{ position:relative; height:auto; display:flex; flex-direction:column; padding:clamp(40px,8vw,64px) var(--pad); }
  .vc-intro{ position:static; order:-1; transform:none; left:auto; right:auto; top:auto; bottom:auto; margin-bottom:26px; }
  .vc-intro .eyebrow--onDark{ color:var(--gold); }
  .vc-intro__line{ color:var(--forest); font-size:clamp(26px,7vw,34px); }
  .vc-panel{ order:0; width:100%; height:56vh; border-radius:16px; }  /* JS overrides start-height for the grow scrub */
  .vc-stages{ order:1; position:static; transform:none; opacity:1; width:100%; margin-top:28px; }
  .vc-stages li{ grid-template-columns:1fr; gap:4px; }
}

/* ---------- reduced motion: final states, no scrub, no reveal offset ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  html.is-loading [data-header],
  html.is-loading [data-para],
  html.is-loading [data-img]{ opacity:1; }
  .vc-wrap{ height:auto; }
  .vc-stages{ position:static; transform:none; opacity:1; width:100%; margin-top:32px; }
  .hero__video{ display:none; }         /* poster bg (on .hero__media) shows instead */
}
/* desktop reduced: panel rests at a fixed height, intro over its lower edge */
@media (prefers-reduced-motion:reduce) and (min-width:768px){
  .vc-sticky{ position:relative; height:auto; display:block; padding:clamp(48px,8vw,90px) var(--pad); }
  .vc-panel{ width:100%; height:64vh; border-radius:16px; }
  .vc-intro{ position:absolute; left:32px; right:32px; bottom:32px; top:auto; transform:none; }
}

/* ============================================================================
   INNER PAGES (P2, multi-page routes) — APPENDED primitives.
   Reuses every homepage token, type scale, colour, spacing, and the FLAT
   zero-shadow rule. These are the NEW layout primitives the inner routes need:
   a page header band (in place of the video hero), an image+text split, the
   expanded service-detail rows, a STATIC value-chain spine (no scrub), a
   closing CTA band, and the 404. No homepage rule is forked or overridden;
   the shared nav / mobile-nav / footer markup is byte-identical to index.html.
   ========================================================================== */

/* ---------- page header band (stands in for the video hero on inner routes) ---------- */
.page-head{ padding:clamp(48px,8vw,104px) var(--pad) clamp(26px,4vw,44px); }
.page-head__inner{ max-width:var(--maxw); margin-inline:auto; }
.page-head__title{
  font-weight:600; color:var(--forest); letter-spacing:-.03em; line-height:1.03;
  font-size:clamp(36px,5.6vw,62px); max-width:20ch; text-wrap:balance;
}
.page-head__lead{
  margin-top:clamp(16px,2vw,26px); max-width:60ch;
  font-size:clamp(16px,1.15vw,19px); color:var(--ink-70);
}

/* ---------- image + text split band (who-we-serve rows, services bands) ---------- */
.split-sec{ padding:clamp(44px,6vw,96px) 0; }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:center; }
.split--rev .split__media{ order:-1; }               /* image to the left on desktop */
.split__media{ border-radius:var(--r-card); overflow:hidden; background:var(--surface-alt); aspect-ratio:4/3; }
.split__media img{ width:100%; height:100%; object-fit:cover; }
.split__text > .eyebrow{ margin-bottom:14px; }
.split__text .sec-title{ margin-bottom:18px; }
.split__text p{ font-size:clamp(16px,1.1vw,18px); color:var(--ink-70); max-width:52ch; margin-bottom:16px; }
.split__text .checklist{ margin-top:22px; }

/* ---------- expanded service-detail rows ---------- */
.svc-detail{ padding:clamp(32px,4.5vw,58px) 0; border-top:1px solid var(--line); }
.svc-detail__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,5vw,72px); align-items:start; }
.svc-detail__title{ font-size:clamp(23px,2.4vw,34px); font-weight:600; letter-spacing:-.02em; color:var(--forest); line-height:1.12; text-wrap:balance; }
.svc-detail__lead{ margin-top:16px; font-size:clamp(16px,1.1vw,18px); color:var(--ink-70); max-width:48ch; }

/* ---------- STATIC value-chain spine (echoes the signature, no scrub) ---------- */
.spine{ display:flex; flex-direction:column; }
.spine__item{ display:grid; grid-template-columns:minmax(140px,30%) 1fr; gap:20px; align-items:baseline; padding:20px 0; border-top:1px solid var(--line); }
.spine__item:last-child{ border-bottom:1px solid var(--line); }
.spine__k{ font-weight:600; font-size:clamp(18px,1.6vw,23px); color:var(--forest); letter-spacing:-.01em; }
.spine__v{ font-size:15.5px; color:var(--ink-70); line-height:1.5; }
.spine-summary{ margin-top:clamp(28px,3.5vw,44px); font-size:clamp(18px,1.7vw,24px); font-weight:600; color:var(--forest); letter-spacing:-.01em; max-width:36ch; text-wrap:balance; }

/* ---------- closing CTA band (forest feature panel) ---------- */
.cta-band{ padding:clamp(40px,6vw,96px) var(--pad); }
.cta-band__inner{
  max-width:var(--maxw); margin-inline:auto;
  background:var(--forest); border-radius:var(--r-card); color:var(--cream-on-dark);
  padding:clamp(38px,6vw,80px); display:flex; flex-direction:column; align-items:flex-start; gap:20px;
}
.cta-band__title{ font-weight:600; letter-spacing:-.02em; line-height:1.08; color:var(--cream-on-dark); font-size:clamp(27px,3.1vw,42px); max-width:20ch; text-wrap:balance; }
.cta-band p{ color:var(--cream-70); font-size:clamp(16px,1.1vw,18px); max-width:54ch; }

/* ---------- 404 ---------- */
.nf{ min-height:52vh; display:flex; align-items:center; }
.nf__links{ margin-top:clamp(24px,3vw,38px); display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- inner-page responsive (mirrors the homepage breakpoints) ---------- */
@media (max-width:1024px){
  .split{ grid-template-columns:1fr; }
  .split--rev .split__media{ order:0; }
  .svc-detail__grid{ grid-template-columns:1fr; gap:16px; }
}
@media (max-width:640px){
  .spine__item{ grid-template-columns:1fr; gap:6px; }
}