/* ===================================================================
   ETHICAL HOLDINGS — Seed to Smoke
   v3 "Alive" pass (2026-07-12). Reference system: Phantom (captured,
   builds/sanctuary/reference/phantom-recapture-2026-07-11): color-world
   flips + pinned card-stack + headline glyphs. Onyx provenance data-tag
   device on pillar pages. ELT's own wrap-around hero, reverted per Alex.
   Type: Onest self-hosted (twin flagged for approval). Emerald + gold
   from the real EH emblem. Mobile-first.
   =================================================================== */

/* ---------- Satoshi (self-hosted, Fontshare; thin sleek premium — Alex round 3.
   Onest rejected as too heavy/playful; Instrument Serif rejected before it.) ---------- */
@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/satoshi-300.woff2") format("woff2");
  font-weight: 300; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/satoshi-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/satoshi-500.woff2") format("woff2");
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/satoshi-700.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* the single canvas */
  --paper:    #EEEBE2;
  --paper-2:  #E5E1D4;
  --card:     #F5F2EA;

  /* forest — dark surfaces (hero, STAR band, footer, nav-over-dark) */
  --forest:      #0A3220;
  --forest-2:    #08291A;
  --forest-deep: #051E12;

  /* text inks */
  --ink:      #101F15;
  --ink-soft: #45564C;
  --cream:    #EDEAE0;   /* text on forest */
  --cream-dim: rgba(245,242,233,0.68);

  /* brand — from the EH emblem itself */
  --emerald:      #03A550;
  --emerald-deep: #0B7A3E;
  --emerald-ink:  #0A5C30;   /* emerald legible at small sizes on paper */
  --gold:         #D9A441;
  --gold-deep:    #97771A;   /* gold legible on paper */

  /* hairlines */
  --line:      rgba(12,59,35,0.16);
  --line-soft: rgba(12,59,35,0.09);
  --line-dark: rgba(245,242,233,0.16);

  --maxw: 1440px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --nav-h: 4.6rem;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --snap: cubic-bezier(0.25, 1, 0.5, 1);

  /* fluid type scale */
  --t-hero: clamp(3rem, 9.5vw, 8.2rem);
  --t-100:  clamp(2.6rem, 7vw, 6rem);
  --t-72:   clamp(2.2rem, 5.4vw, 4.5rem);
  --t-56:   clamp(1.9rem, 4.4vw, 3.5rem);
  --t-42:   clamp(1.6rem, 3.4vw, 2.6rem);
  --t-32:   clamp(1.35rem, 2.6vw, 2rem);
  --t-24:   clamp(1.15rem, 2vw, 1.5rem);
  --t-20:   clamp(1.02rem, 1.6vw, 1.25rem);
  --t-18:   clamp(0.98rem, 1.3vw, 1.125rem);
  --t-16:   clamp(0.9rem, 1.1vw, 1rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: 5.2rem;
}

body {
  font-family: "Satoshi", system-ui, -apple-system, sans-serif;
  background: transparent; /* the WORLD paints on html (Phantom device) */
  color: var(--ink);
  line-height: 1.55;
  font-size: 16px;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* ---------- COLOR WORLDS (Phantom device: html paints the page bg,
   flips as flagged sections enter; sections stay transparent) ---------- */
html { transition: background-color 0.7s var(--ease-out); }
/* Thomas 2026-07-12: fade the world change so the flip reads as a wash, never a
   hard seam / "line breaking the page". */
html { transition: background-color 0.55s ease; }
html.world-paper  { background: var(--paper); }
html.world-forest { background: var(--forest-deep); }
html.world-gold   { background: #E0D2A6; }
html.world-forest body { color: var(--cream); }
@media (prefers-reduced-motion: reduce) { html { transition: none; } }
@media (prefers-reduced-motion: reduce) { html { transition: none; } }

html.scroll-locked { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }

.display {
  font-family: "Satoshi", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.display em, .display i { font-style: italic; }
.display .gold-i { font-style: italic; color: var(--gold); }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* caps label — the one eyebrow system: index number + spaced caps */
.label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.9em;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--emerald-ink);
}
.label .idx { color: var(--gold-deep); font-weight: 600; letter-spacing: 0.08em; }
.on-dark .label, .label.on-dark { color: var(--emerald); }
.on-dark .label .idx { color: var(--gold); }

/* lead paragraph */
.lead { font-size: var(--t-20); line-height: 1.55; color: var(--ink-soft); max-width: 60ch; }
.on-dark .lead { color: var(--cream-dim); }

/* reveal enhancement — visible at rest without JS */
html.js [data-reveal] { opacity: 0; transform: translateY(16px); }
html.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav-wrap {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem var(--gutter);
  color: var(--cream);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: color 0.35s var(--ease-out), background 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.nav-wrap.is-solid {
  background: rgba(247,244,236,0.92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--ink);
  border-bottom-color: var(--line-soft);
}
/* pages that open on a light canvas (no dark hero) force the solid state via .nav-light */

.brand-lockup { display: inline-flex; align-items: center; gap: 0.7rem; flex: none; }
.brand-lockup img { height: 52px; width: auto; display: block; }
.brand-lockup .bl-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-lockup .bl-name {
  font-family: "Satoshi", system-ui, sans-serif;
  font-size: 1.28rem; letter-spacing: 0.01em; white-space: nowrap;
}
.brand-lockup .bl-tag {
  font-size: 0.58rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.22em; opacity: 0.75; white-space: nowrap;
}

.nav-links { display: none; align-items: center; gap: 1.7rem; }
.nav-links a {
  font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  opacity: 0.85; transition: opacity 0.25s;
  position: relative; padding: 0.3rem 0;
}
.nav-links a:hover { opacity: 1; }
.nav-links a.is-current { opacity: 1; }
.nav-links a.is-current::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--gold);
}
@media (min-width: 1060px) { .nav-links { display: inline-flex; } }

.nav-right { display: flex; align-items: center; gap: 0.9rem; flex: none; }
.nav-cta {
  display: none;
  font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.62em 1.35em; border-radius: 999px;
  background: var(--gold); color: var(--forest-deep);
  transition: background 0.25s, transform 0.25s var(--ease-out);
}
.nav-cta:hover { background: #ffc61a; transform: translateY(-1px); }
@media (min-width: 640px) { .nav-cta { display: inline-flex; } }

.menu-btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
}
.menu-btn .bars { display: inline-flex; flex-direction: column; gap: 4px; }
.menu-btn .bars span { width: 20px; height: 2px; background: currentColor; border-radius: 2px; }

/* ============================================================
   SIDE MENU
   ============================================================ */
.menu-side-bar {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1000;
  width: min(420px, 100vw);
  background: var(--forest-deep); color: var(--cream);
  display: flex; flex-direction: column;
  padding: 1.1rem var(--gutter) 2rem;
  transform: translateX(100%);
  transition: transform 0.5s var(--ease-out);
  overflow-y: auto;
}
.menu-side-bar.is-open { transform: none; box-shadow: -30px 0 80px rgba(6,39,23,0.4); }
.menu-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.2rem; }
.menu-top img { height: 46px; width: auto; }
.menu-close { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.8; }
.menu-close:hover { opacity: 1; }

.menu-nav { display: flex; flex-direction: column; }
.menu-heading {
  font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--emerald); margin: 1.6rem 0 0.5rem;
}
.menu-nav a.m-link {
  font-family: "Satoshi", system-ui, sans-serif;
  font-size: clamp(1.7rem, 5vw, 2.1rem);
  line-height: 1.25;
  padding: 0.18em 0;
  border-bottom: 1px solid var(--line-dark);
  display: flex; align-items: center; justify-content: space-between;
  transition: color 0.25s, padding-left 0.3s var(--ease-out);
}
.menu-nav a.m-link:hover { color: var(--gold); padding-left: 0.35em; }
.menu-nav a.m-link .arr { font-size: 1.1rem; opacity: 0.5; }
.menu-foot { margin-top: auto; padding-top: 2.4rem; display: flex; flex-direction: column; gap: 1.1rem; }
.menu-foot .tagline { font-family: "Satoshi", system-ui, sans-serif; font-style: italic; font-size: 1.05rem; color: var(--cream-dim); }

.menu-scrim {
  position: fixed; inset: 0; z-index: 990; background: rgba(6,39,23,0.45);
  opacity: 0; pointer-events: none; transition: opacity 0.4s;
}
.menu-scrim.is-on { opacity: 1; pointer-events: auto; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.95em 1.7em; border-radius: 999px;
  border: 1px solid transparent;
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s, transform 0.3s var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn .arrow { width: 1em; height: 1em; transition: transform 0.3s var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-primary { background: var(--emerald-deep); color: #fff; }
.btn-primary:hover { background: var(--emerald); }
.btn-gold { background: var(--gold); color: var(--forest-deep); }
.btn-gold:hover { background: #ffc61a; }
.btn-ghost { background: transparent; border-color: var(--line); color: inherit; }
.btn-ghost:hover { border-color: currentColor; }
.on-dark .btn-ghost { border-color: var(--line-dark); }

/* ============================================================
   SECTION SHELL — one canvas, hairline seams
   ============================================================ */
section { position: relative; }
.sec { padding: clamp(4.5rem, 9vw, 8rem) 0; }
.sec + .sec .sec-rule, .sec-rule { border-top: 1px solid var(--line); }
.sec-head { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: clamp(2.2rem, 5vw, 4rem); }
.sec-head .display { font-size: var(--t-72); max-width: 16ch; }
.sec-head.center { align-items: center; text-align: center; }
.sec-head.center .lead { margin: 0 auto; }

.dark { background: var(--forest-deep); color: var(--cream); }
.dark ::selection { background: var(--gold); color: var(--forest-deep); }

/* ============================================================
   HERO (home) — forest bookend, quiet and large
   ============================================================ */
.hero {
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(3,165,80,0.20), transparent 55%),
    radial-gradient(90% 70% at 12% 100%, rgba(242,177,0,0.10), transparent 50%),
    var(--forest-deep);
  color: var(--cream);
  min-height: 100svh;
  display: flex; flex-direction: column;
  padding-top: calc(var(--nav-h) + 2rem);
}
.hero-inner {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  gap: clamp(1.6rem, 3.5vw, 2.6rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: 0.8em;
  font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--emerald);
}
.hero-kicker::before { content: ""; width: 2.2em; height: 1px; background: var(--gold); }
.hero-title { font-size: var(--t-hero); max-width: 11ch; }
.hero-title .gold-i { font-style: italic; color: var(--gold); }
.hero-sub { font-size: var(--t-20); color: var(--cream-dim); max-width: 52ch; line-height: 1.6; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; }
.hero-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 0 1.3rem;
  border-top: 1px solid var(--line-dark);
  font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--cream-dim);
}
.hero-foot .shona { font-family: "Satoshi", system-ui, sans-serif; font-style: italic; text-transform: none; letter-spacing: 0.01em; font-size: 0.95rem; }
.hero-scroll { display: inline-flex; align-items: center; gap: 0.5em; }
.hero-scroll .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: dotfall 1.8s var(--ease-out) infinite; }
@keyframes dotfall { 0% { transform: translateY(-4px); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateY(6px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-scroll .dot { animation: none; } }

/* inner-page hero — light, editorial, no image backdrop */
.page-head { padding: calc(var(--nav-h) + clamp(3rem, 7vw, 5.5rem)) 0 clamp(2.6rem, 6vw, 4.4rem); }
.page-head .label { margin-bottom: 1.2rem; }
.page-head h1 { font-size: var(--t-100); max-width: 14ch; }
.page-head .lead { margin-top: 1.4rem; }
.page-head-rule { border-bottom: 1px solid var(--line); }
/* Thomas 2026-07-12: pillar pages open with an illustrated hero (copy + the
   bespoke illustration side by side) so the art lives IN the hero, not a
   back-to-back banner stacked under the intro. */
.pillar-hero .ph-grid { display: grid; gap: 1.8rem; align-items: center; }
@media (min-width: 900px) { .pillar-hero .ph-grid { grid-template-columns: minmax(0,1.02fr) minmax(0,0.98fr); gap: 3.2rem; } }
.pillar-hero .ph-copy { min-width: 0; }
.pillar-hero .ph-copy h1 { max-width: 18ch; }
.pillar-hero .ph-illo { margin: 0; border-radius: 18px; overflow: hidden; min-width: 0; box-shadow: 0 18px 50px rgba(6,39,23,0.16); }
.pillar-hero .ph-illo img { width: 100%; display: block; }

/* ============================================================
   INTRO STATEMENT (home 01)
   ============================================================ */
.intro-grid { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .intro-grid { grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: 5rem; align-items: start; } }
.intro-statement { font-family: "Satoshi", system-ui, sans-serif; font-size: var(--t-42); line-height: 1.22; letter-spacing: -0.01em; }
.intro-statement em { color: var(--emerald-deep); }
.intro-side { display: flex; flex-direction: column; gap: 1.4rem; font-size: var(--t-18); color: var(--ink-soft); }
.intro-side p { max-width: 46ch; }

/* stat band */
.stat-band { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); margin-top: clamp(2.6rem, 6vw, 4.5rem); }
@media (min-width: 860px) { .stat-band { grid-template-columns: repeat(4, 1fr); } }
.stat-cell { padding: 1.6rem 1.4rem 1.6rem 0; border-bottom: 1px solid var(--line); }
.stat-cell:nth-child(odd) { border-right: 1px solid var(--line); padding-left: 0; }
.stat-cell:nth-child(even) { padding-left: 1.4rem; }
@media (min-width: 860px) {
  .stat-cell { border-bottom: 0; border-right: 1px solid var(--line); padding: 1.9rem 1.6rem; }
  .stat-cell:first-child { padding-left: 0; }
  .stat-cell:last-child { border-right: 0; }
}
.stat-cell .v { font-family: "Satoshi", system-ui, sans-serif; font-size: var(--t-56); line-height: 1; color: var(--forest); }
.stat-cell .v small { font-size: 0.55em; color: var(--gold-deep); }
.stat-cell .l { margin-top: 0.5rem; font-size: 0.8rem; color: var(--ink-soft); max-width: 22ch; }

/* ============================================================
   PILLARS — catalog #077 Hover Image Gallery, ported
   Editorial title rows left, sliding image strip right.
   ============================================================ */
.pillars-wrap { display: grid; gap: 2.2rem; }
@media (min-width: 1020px) {
  .pillars-wrap { grid-template-columns: minmax(0, 1fr) 36%; gap: 3rem; align-items: center; }
}
.pillar-list { display: flex; flex-direction: column; }
.pillar-row {
  position: relative;
  display: block;
  padding: clamp(1rem, 2.4vw, 1.6rem) 0;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.pillar-row:first-child { border-top: 1px solid var(--line); }
/* row is a div now (Thomas: only Visit navigates); tap-to-open on mobile */
@media (max-width: 1019px) { .pillar-row { cursor: pointer; } }
.pillar-row .pr-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.pillar-row .pr-no {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em;
  color: var(--gold-deep);
  flex: none;
}
.pillar-row .pr-title {
  position: relative;
  font-family: "Satoshi", system-ui, sans-serif;
  font-size: clamp(1.9rem, 4.6vw, 3.9rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  flex: 1;
  color: var(--ink);
  opacity: 0.42;
  transition: opacity 0.4s var(--snap);
}
.pillar-row .pr-title .pr-ghost { display: block; }
.pillar-row .pr-title .pr-live {
  position: absolute; inset: 0; display: block;
  color: var(--forest);
  opacity: 0; transform: skewY(6deg) translateY(18%);
  transition: transform 0.4s var(--snap), opacity 0.4s var(--snap);
  pointer-events: none;
}
.pillar-row.is-active .pr-title { opacity: 1; }
.pillar-row.is-active .pr-title .pr-ghost { visibility: hidden; }
.pillar-row.is-active .pr-title .pr-live { opacity: 1; transform: none; }
.pillar-row .pr-desc {
  display: block;
  max-height: 0; overflow: hidden; opacity: 0;
  font-size: var(--t-16); color: var(--ink-soft); max-width: 58ch;
  transition: max-height 0.45s var(--snap), opacity 0.45s var(--snap), margin 0.45s var(--snap);
}
.pillar-row.is-active .pr-desc { max-height: 8em; opacity: 1; margin-top: 0.7rem; }
.pillar-row .pr-cta {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--emerald-ink);
  flex: none;
}
.pillar-row .pr-cta svg { width: 0.95em; height: 0.95em; transition: transform 0.3s var(--ease-out); }
.pillar-row:hover .pr-cta svg { transform: translateX(3px); }

.pillar-stage { position: relative; display: none; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--forest-2); }
@media (min-width: 1020px) { .pillar-stage { display: block; } }
.pillar-strip {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; flex-direction: column; gap: 0;
  transform: translateY(0);
  transition: transform 0.45s var(--snap);
  will-change: transform;
}
.pillar-strip figure { position: relative; height: 0; flex: none; overflow: hidden; }
.pillar-strip img { width: 100%; height: 100%; object-fit: cover; }
/* heights set inline by JS to match stage height */
.pillar-strip .ps-tag {
  position: absolute; left: 1rem; bottom: 1rem;
  font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--cream);
  background: rgba(6,39,23,0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 0.45em 0.9em; border-radius: 999px;
}
/* mobile: each pillar row shows a slim image under the description */
.pillar-row .pr-img { display: none; }
@media (max-width: 1019px) {
  .pillar-row.is-active .pr-img { display: block; margin-top: 0.9rem; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; }
  .pillar-row .pr-img img { width: 100%; height: 100%; object-fit: cover; }
}

/* ============================================================
   JOURNEY — seed to smoke (Splide, restyled minimal)
   ============================================================ */
.journey-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.4rem; margin-bottom: clamp(2rem, 4.5vw, 3.2rem); }
.journey-head .display { font-size: var(--t-72); max-width: 14ch; }
.journey-head p { max-width: 42ch; color: var(--ink-soft); }
.jcard {
  height: 100%;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2.6rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  padding: 1.6rem 1.5rem 1.5rem;
  min-height: 320px;
  transition: border-color 0.3s, transform 0.35s var(--ease-out);
}
.jcard:hover { border-color: var(--emerald-deep); transform: translateY(-3px); }
.jcard .jc-no {
  font-family: "Satoshi", system-ui, sans-serif;
  font-size: 2.1rem; color: var(--gold-deep); line-height: 1;
}
.jcard h3 { font-family: "Satoshi", system-ui, sans-serif; font-weight: 400; font-size: var(--t-24); margin: 0.65rem 0 0.55rem; }
.jcard p { font-size: 0.92rem; color: var(--ink-soft); }
.jcard .jc-tag {
  align-self: flex-start;
  font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--emerald-ink);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.5em 1em;
}
.jcard.is-dark { background: var(--forest-deep); color: var(--cream); border-color: var(--forest-deep); }
.jcard.is-dark p { color: var(--cream-dim); }
.jcard.is-dark .jc-tag { color: var(--gold); border-color: var(--line-dark); }
.splide__pagination { bottom: -2.2rem; }
.splide__pagination__page { background: var(--line); }
.splide__pagination__page.is-active { background: var(--emerald-deep); transform: scale(1.2); }
.splide__arrow { background: var(--card); border: 1px solid var(--line); opacity: 1; width: 2.6em; height: 2.6em; }
.splide__arrow svg { fill: var(--forest); width: 1em; height: 1em; }
.splide__arrow:hover:not(:disabled) { border-color: var(--emerald-deep); }
.splide--journey { padding-bottom: 0.5rem; }

/* ============================================================
   STAR band — the one dark moment mid-page
   ============================================================ */
.star-band {
  background:
    radial-gradient(100% 80% at 85% 0%, rgba(242,177,0,0.14), transparent 55%),
    var(--forest-deep);
  color: var(--cream);
  padding: clamp(4.5rem, 9vw, 8rem) 0;
}
.star-head { display: grid; gap: 2rem; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
@media (min-width: 960px) { .star-head { grid-template-columns: minmax(0,7fr) minmax(0,5fr); align-items: end; gap: 4rem; } }
.star-head .display { font-size: var(--t-100); }
.star-head .display .gold-i { font-style: italic; color: var(--gold); }
.star-head p { color: var(--cream-dim); max-width: 46ch; font-size: var(--t-18); }
.variant-grid { display: grid; gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); border-radius: 14px; overflow: hidden; }
@media (min-width: 760px) { .variant-grid { grid-template-columns: repeat(3, 1fr); } }
.variant {
  background: var(--forest-2);
  padding: 2rem 1.7rem 1.8rem;
  display: flex; flex-direction: column; gap: 2.8rem;
  transition: background 0.35s var(--ease-out);
}
.variant:hover { background: var(--forest); }
.variant .v-mark {
  font-family: "Satoshi", system-ui, sans-serif;
  font-size: 2.4rem; line-height: 1; color: var(--gold);
}
.variant h3 { font-family: "Satoshi", system-ui, sans-serif; font-weight: 400; font-size: var(--t-32); }
.variant p { color: var(--cream-dim); font-size: 0.92rem; margin-top: 0.5rem; }
.variant .v-band { height: 4px; border-radius: 2px; width: 4.5rem; }
.star-note { margin-top: 1.6rem; font-size: 0.74rem; letter-spacing: 0.06em; color: rgba(245,242,233,0.5); }

/* Thomas 2026-07-13: STAR pack imagery — real packs re-posed as cinematic hero
   shots (design + text kept true). Dark scenes sit on the STAR forest world. */
.pack-feature { display: grid; gap: clamp(1rem, 2.4vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 680px) { .pack-feature { grid-template-columns: 1fr 1fr; } }
@media (min-width: 940px) { .pack-feature { grid-template-columns: repeat(3, 1fr); } }
.pack-cine { margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-dark); position: relative; }
.pack-cine img { width: 100%; display: block; transition: transform 0.7s var(--ease-out); }
.pack-cine:hover img { transform: scale(1.03); }
.pack-cine figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 1.4rem 1.4rem 1.1rem; color: var(--cream);
  background: linear-gradient(180deg, transparent, rgba(3,14,8,0.82));
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.pack-cine figcaption b { color: var(--gold); font-weight: 700; }
/* contained cinematic pack shot on the home STAR section (framed feature, not a band) */
.star-pack-home { margin: clamp(1.6rem,3vw,2.4rem) auto clamp(1.8rem,3.5vw,2.8rem); max-width: 600px; border-radius: 18px; overflow: hidden; box-shadow: 0 22px 55px rgba(6,39,23,0.22); }
.star-pack-home img { width: 100%; display: block; }

/* Thomas 2026-07-13: the STAR page is its OWN premium cigarette-brand world —
   warm near-black + gold, distinct from the forest-green pillars. */
html.star-page { --forest-deep: #16100a; --forest-2: #221913; --forest: #2c2117; }
html.star-page.world-forest { background: #16100a; }
html.star-page .cta-band.on-dark { background: #0f0a06; }
html.star-page .pack-cine, html.star-page .cig-shot { border-color: rgba(217,164,65,0.2); }
/* cigarette imagery grids on the STAR page */
.cig-strip { display: grid; gap: clamp(0.8rem,2vw,1.3rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 820px) { .cig-strip { grid-template-columns: repeat(4, 1fr); } }
.cig-shot { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-dark); position: relative; }
.cig-shot img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 3/2; transition: transform 0.7s var(--ease-out); }
.cig-shot:hover img { transform: scale(1.05); }
/* full-bleed cigarette hero band */
.cig-hero { position: relative; margin: 0; border-radius: 0; overflow: hidden; min-height: min(58svh, 520px); display: grid; }
.cig-hero img { grid-area: 1/1; width: 100%; height: 100%; object-fit: cover; min-height: inherit; }
.cig-hero .cig-hero-cap { grid-area: 1/1; align-self: end; z-index: 1; padding: clamp(1.6rem,4vw,3rem) var(--gutter); background: linear-gradient(180deg, transparent, rgba(15,10,6,0.86)); }
/* a cigarette shot atop each blend's variant card */
.variant .v-cig { margin: -2rem -1.7rem 1.4rem; border-radius: 14px 14px 0 0; overflow: hidden; aspect-ratio: 16/10; background: #100b06; }
.variant .v-cig img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease-out); }
.variant:hover .v-cig img { transform: scale(1.05); }

/* Thomas 2026-07-12: home STAR flows on paper (no dark slab). Light variant cards.
   STAR carries its OWN paper bg (identical to the paper world, so no seam with the
   sections around it) so its dark text stays legible even mid world-flip, when the
   html is momentarily still forest as the dark journey scrolls out above it. */
#star { background: var(--paper); }
#star .star-head p { color: var(--ink-soft); }
.variant-grid.star-variants { background: var(--line); border-color: var(--line); }
.star-variants .variant { background: var(--card); color: var(--ink); }
.star-variants .variant:hover { background: var(--paper-2); }
.star-variants .variant h3 { color: var(--ink); }
.star-variants .variant p { color: var(--ink-soft); }
.star-variants .variant .v-mark { color: var(--gold-deep); }
#star .star-note { color: var(--ink-soft); opacity: 0.72; }

/* Thomas 2026-07-12: home leadership mini-section — motion-first portrait cards,
   different from the about page's overlapping avatars. Name/role over a strong
   scrim + shadow (text visibility rule). Ryan = monogram, no fabricated face. */
.lead-row { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px) { .lead-row { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1240px) { .lead-row { grid-template-columns: repeat(6, 1fr); } }
.lead-card {
  position: relative; border-radius: 16px; overflow: hidden;
  aspect-ratio: 3 / 4; background: var(--forest); color: var(--cream);
  box-shadow: 0 12px 30px rgba(6,39,23,0.14);
}
.lead-photo { margin: 0; width: 100%; height: 100%; }
.lead-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease-out); }
.lead-card:hover .lead-photo img { transform: scale(1.06); }
.lead-mono { display: grid; place-items: center; background: linear-gradient(160deg, var(--forest), var(--forest-deep)); }
.lead-initials { font-family: "Satoshi", system-ui, sans-serif; font-size: 2.6rem; font-weight: 400; color: var(--gold); }
.lead-meta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 1.6rem 1rem 1rem;
  background: linear-gradient(180deg, rgba(5,28,17,0) 0%, rgba(5,28,17,0.72) 54%, rgba(5,28,17,0.94) 100%);
  text-shadow: 0 1px 8px rgba(4,22,13,0.6);
}
.lead-meta h3 { font-size: 0.98rem; font-weight: 700; line-height: 1.2; color: var(--cream); }
.lead-meta p { font-size: 0.72rem; color: var(--gold); margin-top: 0.25rem; letter-spacing: 0.02em; }

/* ============================================================
   SUSTAINABILITY
   ============================================================ */
.sus-grid { display: grid; gap: 1.2rem; }
@media (min-width: 760px) { .sus-grid { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; } }
/* Thomas 2026-07-12: impact sustainability upgraded from a plain tilt grid to
   illustrated cards (its own fresh scenes, not the home ones) — an illustration
   header on a light card, text below and always legible. */
.sus-card {
  border: 1px solid var(--line); border-radius: 14px; background: var(--card);
  padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color 0.3s, transform 0.35s var(--ease-out);
}
.sus-card:hover { border-color: var(--emerald-deep); transform: translateY(-3px); }
.sus-illo { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--forest); }
.sus-illo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease-out); }
.sus-card:hover .sus-illo img { transform: scale(1.05); }
.sus-body { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; gap: 0.55rem; }
.sus-card .s-no { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; color: var(--gold-deep); }
.sus-card h3 { font-family: "Satoshi", system-ui, sans-serif; font-weight: 400; font-size: var(--t-24); }
.sus-card p { font-size: 0.92rem; color: var(--ink-soft); }

/* ============================================================
   PARTNERS — quiet institutional row
   ============================================================ */
.partner-row { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--line); }
.partner {
  flex: 1 1 240px;
  padding: 1.6rem 1.6rem 1.6rem 0;
  border-bottom: 1px solid var(--line);
}
.partner h4 { font-family: "Satoshi", system-ui, sans-serif; font-weight: 400; font-size: var(--t-24); line-height: 1.15; }
.partner p { margin-top: 0.4rem; font-size: 0.85rem; color: var(--ink-soft); max-width: 34ch; }

/* ============================================================
   GALLERY strips + masonry + lightbox
   ============================================================ */
.gstrip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
@media (min-width: 860px) { .gstrip { grid-template-columns: repeat(4, 1fr); } }
.gstrip figure { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 5; }
.gstrip figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.gstrip figure:hover img { transform: scale(1.04); }

.masonry { columns: 1; column-gap: 1rem; }
@media (min-width: 640px) { .masonry { columns: 2; } }
@media (min-width: 1024px) { .masonry { columns: 3; } }
.masonry figure {
  break-inside: avoid; margin: 0 0 1rem;
  border-radius: 12px; overflow: hidden; position: relative;
  cursor: zoom-in;
}
.masonry figure img { width: 100%; transition: transform 0.6s var(--ease-out); }
.masonry figure:hover img { transform: scale(1.03); }
.masonry figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.2rem 1.1rem 0.9rem;
  background: linear-gradient(transparent, rgba(6,39,23,0.72));
  color: var(--cream); font-size: 0.78rem; letter-spacing: 0.04em;
}

.lightbox {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(6,39,23,0.9);
  display: grid; place-items: center; padding: 4vmin;
  opacity: 0; pointer-events: none; transition: opacity 0.35s;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 92vw; max-height: 86vh; border-radius: 10px; }
.lightbox .lb-caption { position: fixed; left: 0; right: 0; bottom: 2vmin; text-align: center; color: var(--cream-dim); font-size: 0.85rem; }
.lightbox .lb-close {
  position: fixed; top: 1.2rem; right: 1.4rem; color: var(--cream);
  font-size: 2rem; line-height: 1; opacity: 0.8;
}
.lightbox .lb-close:hover { opacity: 1; }

/* ============================================================
   SERVICES grid (contract page) — clean cards, no image mask noise
   ============================================================ */
.svc-grid { display: grid; gap: 1.1rem; }
@media (min-width: 680px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
.svc-card {
  border: 1px solid var(--line); border-radius: 14px; background: var(--card);
  padding: 1.6rem 1.5rem;
  display: flex; flex-direction: column; gap: 0.6rem;
  transition: border-color 0.3s, transform 0.3s var(--ease-out);
}
.svc-card:hover { border-color: var(--emerald-deep); transform: translateY(-2px); }
.svc-card .svc-no { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; color: var(--gold-deep); }
.svc-card h3 { font-family: "Satoshi", system-ui, sans-serif; font-weight: 400; font-size: var(--t-24); }
.svc-card p { font-size: 0.9rem; color: var(--ink-soft); }

/* ============================================================
   TIERS (gold class)
   ============================================================ */
.tier-grid { display: grid; gap: 1.1rem; }
@media (min-width: 680px) { .tier-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tier-grid { grid-template-columns: repeat(4, 1fr); } }
.tier-card {
  border: 1px solid var(--line); border-radius: 14px; background: var(--card);
  padding: 1.8rem 1.6rem; display: flex; flex-direction: column; gap: 0.5rem;
}
.tier-card .tc-name { font-family: "Satoshi", system-ui, sans-serif; font-size: var(--t-32); line-height: 1; }
.tier-card .tc-kg { font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--emerald-ink); }
.tier-card .tc-desc { font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.5rem; }
.tier-card.gold { background: var(--forest-deep); color: var(--cream); border-color: var(--forest-deep); }
.tier-card.gold .tc-name { color: var(--gold); }
.tier-card.gold .tc-kg { color: var(--emerald); }
.tier-card.gold .tc-desc { color: var(--cream-dim); }

/* ============================================================
   CALC (gold class)
   ============================================================ */
.calc-wrap { display: grid; gap: 1.4rem; }
@media (min-width: 960px) { .calc-wrap { grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; } }
.calc-panel {
  border: 1px solid var(--line); border-radius: 16px; background: var(--card);
  padding: 1.8rem 1.6rem;
}
.calc-panel h3 { font-family: "Satoshi", system-ui, sans-serif; font-weight: 400; font-size: var(--t-32); margin-bottom: 0.4rem; }
.calc-intro { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 1.4rem; }
.calc-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.1rem; }
.calc-field label { font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); }
.calc-field input, .calc-field select, .calc-field textarea {
  padding: 0.85em 1em;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink);
  font: inherit; font-size: 0.95rem;
  width: 100%;
}
.calc-field input:focus, .calc-field select:focus, .calc-field textarea:focus {
  outline: 2px solid var(--emerald); outline-offset: 1px; border-color: var(--emerald);
}
.calc-note { font-size: 0.76rem; color: var(--ink-soft); }
.calc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.calc-result {
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--paper-2);
  min-height: 320px; padding: 1.8rem 1.6rem;
  display: flex; flex-direction: column;
}
.cr-empty { margin: auto; text-align: center; color: var(--ink-soft); font-size: 0.95rem; max-width: 34ch; display: flex; flex-direction: column; gap: 0.6rem; }
.cr-empty .cr-k { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold-deep); }
.cr-tier { font-family: "Satoshi", system-ui, sans-serif; font-size: var(--t-72); line-height: 1; color: var(--forest); }
.cr-label { font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--emerald-ink); margin-bottom: 0.4rem; }
.cr-list { margin: 1.1rem 0 1.4rem; display: flex; flex-direction: column; gap: 0.45rem; }
.cr-list li { display: flex; gap: 0.6em; font-size: 0.92rem; color: var(--ink-soft); }
.cr-list li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); margin-top: 0.5em; }
.cr-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 0.7rem; }
.wa-cta {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.9em 1.5em; border-radius: 999px;
  background: #1FAF38; color: #fff;
  transition: background 0.25s, transform 0.25s var(--ease-out);
}
.wa-cta:hover { background: #24c73f; transform: translateY(-1px); }
.wa-cta svg { width: 1.15em; height: 1.15em; }

/* ============================================================
   TEAM
   ============================================================ */
.team-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1240px) { .team-grid { grid-template-columns: repeat(6, 1fr); } }
.team-tile { border-radius: 12px; overflow: hidden; background: var(--card); border: 1px solid var(--line); }
.team-tile img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.team-tile .monogram {
  width: 100%; aspect-ratio: 4 / 5;
  display: grid; place-items: center;
  font-family: "Satoshi", system-ui, sans-serif; font-size: 2.6rem;
  color: var(--gold-deep); background: var(--paper-2);
}
.team-tile .meta { padding: 0.85rem 0.95rem 1rem; }
.team-tile .nm { font-weight: 600; font-size: 0.92rem; line-height: 1.25; }
.team-tile .rl { font-size: 0.76rem; color: var(--ink-soft); margin-top: 0.2rem; }

.bio-grid { display: grid; gap: 1.1rem; margin-top: 2rem; }
@media (min-width: 860px) { .bio-grid { grid-template-columns: 1fr 1fr; } }
.bio-card { border-left: 2px solid var(--gold); padding: 0.4rem 0 0.4rem 1.2rem; }
.bio-card h4 { font-family: "Satoshi", system-ui, sans-serif; font-weight: 400; font-size: var(--t-24); margin-bottom: 0.4rem; }
.bio-card p { font-size: 0.92rem; color: var(--ink-soft); max-width: 52ch; }

/* VMV */
.vmv-grid { display: grid; gap: 1.1rem; }
@media (min-width: 860px) { .vmv-grid { grid-template-columns: repeat(3, 1fr); } }
.vmv-card { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 1.7rem 1.6rem; }
.vmv-card h3 { font-family: "Satoshi", system-ui, sans-serif; font-weight: 400; font-size: var(--t-24); margin-bottom: 0.5rem; }
.vmv-card p { font-size: 0.95rem; color: var(--ink-soft); }
.vmv-card.green { background: var(--forest-deep); border-color: var(--forest-deep); color: var(--cream); }
.vmv-card.green p { color: var(--cream-dim); }
.vmv-card .es { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.95rem; color: var(--ink-soft); }
.vmv-card .es b { color: var(--emerald-deep); }

/* ============================================================
   TESTIMONIALS / NEWS
   ============================================================ */
.tmony-grid { display: grid; gap: 1.1rem; }
@media (min-width: 860px) { .tmony-grid { grid-template-columns: repeat(3, 1fr); } }
.tmony-card { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 1.7rem 1.6rem; display: flex; flex-direction: column; gap: 1.6rem; }
.tmony-card .tq { font-family: "Satoshi", system-ui, sans-serif; font-size: var(--t-24); line-height: 1.25; }
.tmony-card .tq::before { content: "\201C"; color: var(--gold-deep); }
.tmony-card .ta { font-size: 0.8rem; color: var(--ink-soft); margin-top: auto; }

.news-grid { display: grid; gap: 1.1rem; }
@media (min-width: 860px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }
.news-card { border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; display: flex; flex-direction: column; }
.news-card .nc-media { aspect-ratio: 16 / 10; overflow: hidden; }
.news-card .nc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.news-card:hover .nc-media img { transform: scale(1.04); }
.news-card .nc-body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.news-card .nc-date { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold-deep); }
.news-card .nc-title { font-family: "Satoshi", system-ui, sans-serif; font-weight: 400; font-size: var(--t-24); line-height: 1.15; }
.news-card .nc-excerpt { font-size: 0.9rem; color: var(--ink-soft); }

/* ============================================================
   ESF floor blocks
   ============================================================ */
.floor-media { display: grid; gap: 1rem; }
@media (min-width: 860px) { .floor-media { grid-template-columns: 3fr 2fr; } }
.floor-media figure { border-radius: 14px; overflow: hidden; position: relative; }
.floor-media img { width: 100%; height: 100%; object-fit: cover; }
.floor-media figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.2rem 1.2rem 1rem;
  background: linear-gradient(transparent, rgba(6,39,23,0.75));
  color: var(--cream); font-size: 0.8rem; letter-spacing: 0.03em;
}
.feat-list { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.feat-list span {
  font-size: 0.78rem; font-weight: 500;
  border: 1px solid var(--line); border-radius: 999px; padding: 0.55em 1.1em;
  color: var(--ink-soft); background: var(--card);
}

/* two-column editorial split */
.split { display: grid; gap: 2.2rem; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } }
/* Thomas 2026-07-12: grid items default to min-width:auto, so a wide nowrap
   child (the 127 flow-marquee, width:max-content) forced the copy column past
   the viewport and clipped the heading, text and image off-screen on mobile.
   min-width:0 lets the column shrink and the copy wrap. */
.split .sp-copy, .split .sp-media { min-width: 0; }
.split .sp-copy .flow-marquee { max-width: 100%; }
.split .sp-media { border-radius: 14px; overflow: hidden; }
.split .sp-media img { width: 100%; height: 100%; object-fit: cover; }
.split h2 { font-size: var(--t-72); }
.split .sp-copy { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.split .sp-copy p { color: var(--ink-soft); max-width: 52ch; }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band { background: var(--forest-deep); color: var(--cream); padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
.cta-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; }
.cta-inner .display { font-size: var(--t-100); max-width: 14ch; }
.cta-inner .display .gold-i { font-style: italic; color: var(--gold); }
.cta-inner p { color: var(--cream-dim); max-width: 52ch; }
.cta-buttons { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display: grid; gap: 2.4rem; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 5fr 7fr; gap: 4rem; } }
.ci-item { padding: 1.2rem 0; border-top: 1px solid var(--line); }
.ci-item h4 { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--emerald-ink); margin-bottom: 0.45rem; }
.ci-item p, .ci-item a { font-size: var(--t-18); line-height: 1.5; }
.ci-item a:hover { color: var(--emerald-deep); }

.map-frame { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 9; margin-top: 2.6rem; }
.map-frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  filter: grayscale(1) sepia(0.22) saturate(0.9) brightness(0.98);
}
.map-frame .map-tint { position: absolute; inset: 0; background: var(--emerald-deep); mix-blend-mode: soft-light; pointer-events: none; opacity: 0.5; }

.form-msg { display: none; margin-top: 1rem; padding: 0.9em 1.1em; border-radius: 10px; font-size: 0.9rem; }
.form-msg.is-on { display: block; }
.form-msg.ok { background: rgba(3,165,80,0.12); color: var(--emerald-ink); }
.form-msg.err { background: rgba(190,60,40,0.1); color: #8c3122; }

/* ============================================================
   APPLY MODAL
   ============================================================ */
.apply-form {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(6,39,23,0.55);
  display: grid; place-items: center; padding: 1rem;
  opacity: 0; pointer-events: none; transition: opacity 0.35s;
}
.apply-form.is-open { opacity: 1; pointer-events: auto; }
.apply-panel {
  width: min(680px, 100%); max-height: 88svh; overflow-y: auto;
  background: var(--paper); border-radius: 18px;
  padding: 1.9rem 1.7rem;
  transform: translateY(14px); transition: transform 0.4s var(--ease-out);
}
.apply-form.is-open .apply-panel { transform: none; }
.apply-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.apply-top h3 { font-family: "Satoshi", system-ui, sans-serif; font-weight: 400; font-size: var(--t-32); line-height: 1.1; }
.apply-intro { font-size: 0.88rem; color: var(--ink-soft); margin-top: 0.4rem; }
.apply-close { font-size: 1.7rem; line-height: 1; opacity: 0.6; }
.apply-close:hover { opacity: 1; }
.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.field label { font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); }
.field input, .field select {
  padding: 0.8em 1em; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink); font: inherit; font-size: 0.95rem;
}
.field input:focus, .field select:focus { outline: 2px solid var(--emerald); outline-offset: 1px; }
.field-row { display: grid; grid-template-columns: 2fr 1fr; gap: 0.9rem; }
.apply-disclaimer { font-size: 0.78rem; color: var(--ink-soft); margin: 0.4rem 0 1.1rem; }
.apply-msg { display: none; margin-top: 1rem; padding: 0.9em 1.1em; border-radius: 10px; font-size: 0.9rem; }
.apply-msg.is-on { display: block; }
#apply-success { background: rgba(3,165,80,0.12); color: var(--emerald-ink); }
#apply-error { background: rgba(190,60,40,0.1); color: #8c3122; }

/* ============================================================
   FOOTER — forest bookend
   ============================================================ */
footer#s-footer { background: var(--forest-deep); color: var(--cream); padding: clamp(3.5rem, 8vw, 6rem) 0 2rem; }
.footer-head { display: grid; gap: 2rem; padding-bottom: clamp(2.4rem, 5vw, 4rem); border-bottom: 1px solid var(--line-dark); }
@media (min-width: 960px) { .footer-head { grid-template-columns: minmax(0,7fr) minmax(0,5fr); align-items: end; } }
.footer-head .display { font-size: var(--t-72); max-width: 14ch; }
.footer-head .display .gold-i { font-style: italic; color: var(--gold); }
.footer-head .fh-side { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.footer-head .fh-side p { color: var(--cream-dim); font-size: 0.95rem; max-width: 40ch; }

.footer-cols { display: grid; gap: 2rem; padding: clamp(2.2rem, 5vw, 3.4rem) 0; }
@media (min-width: 760px) { .footer-cols { grid-template-columns: repeat(4, 1fr); } }
.footer-col h5 {
  font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--emerald); margin-bottom: 0.9rem;
}
.footer-col a, .footer-col p { display: block; font-size: 0.92rem; color: var(--cream-dim); padding: 0.22rem 0; }
.footer-col a:hover { color: var(--cream); }

.footer-brand { display: flex; align-items: center; gap: 1rem; padding: 1.4rem 0; border-top: 1px solid var(--line-dark); }
.footer-brand img { height: 60px; width: auto; }
.footer-brand .fb-name { font-family: "Satoshi", system-ui, sans-serif; font-size: clamp(1.5rem, 4vw, 2.2rem); }
.footer-brand .fb-tag { font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--cream-dim); margin-top: 0.25rem; }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.8rem; justify-content: space-between;
  padding-top: 1.3rem; border-top: 1px solid var(--line-dark);
  font-size: 0.74rem; color: rgba(245,242,233,0.5);
}

/* ============================================================
   RUKUDZO — chat widget (scripted first-line assistant)
   ============================================================ */
.ruk-launch {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 950;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--emerald-deep); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(6,39,23,0.35);
  transition: transform 0.3s var(--ease-out), background 0.3s;
}
.ruk-launch:hover { transform: translateY(-2px) scale(1.04); background: var(--emerald); }
.ruk-launch svg { width: 26px; height: 26px; }
.ruk-launch .ruk-x { display: none; font-size: 1.5rem; line-height: 1; }
.ruk-launch.is-open svg { display: none; }
.ruk-launch.is-open .ruk-x { display: block; }

.ruk-panel {
  position: fixed; right: 1.1rem; bottom: 5.4rem; z-index: 949;
  width: min(360px, calc(100vw - 2.2rem));
  max-height: min(560px, calc(100svh - 8rem));
  background: var(--paper); color: var(--ink);
  border-radius: 18px; border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(6,39,23,0.3);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(12px) scale(0.98); pointer-events: none;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.ruk-panel.is-open { opacity: 1; transform: none; pointer-events: auto; }
.ruk-head { background: var(--forest-deep); color: var(--cream); padding: 1rem 1.2rem; display: flex; align-items: center; gap: 0.8rem; }
.ruk-head .ruk-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--emerald-deep); display: grid; place-items: center;
  font-family: "Satoshi", system-ui, sans-serif; font-size: 1.15rem; color: #fff;
}
.ruk-head .ruk-name { font-weight: 600; font-size: 0.95rem; }
.ruk-head .ruk-sub { font-size: 0.72rem; color: var(--cream-dim); }
.ruk-body { flex: 1; overflow-y: auto; padding: 1rem 1rem 0.6rem; display: flex; flex-direction: column; gap: 0.55rem; }
.ruk-msg { max-width: 86%; padding: 0.7em 0.95em; border-radius: 14px; font-size: 0.88rem; line-height: 1.45; }
.ruk-msg.bot { background: var(--paper-2); border: 1px solid var(--line-soft); border-bottom-left-radius: 4px; align-self: flex-start; }
.ruk-msg.user { background: var(--emerald-deep); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.ruk-msg a { color: var(--emerald-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ruk-msg.bot .wa-inline { display: inline-flex; align-items: center; gap: 0.4em; margin-top: 0.5em; font-weight: 600; color: #128C3E; }
.ruk-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0.5rem 1rem 0.8rem; }
.ruk-chip {
  font-size: 0.76rem; font-weight: 600;
  border: 1px solid var(--line); border-radius: 999px; padding: 0.5em 0.95em;
  background: var(--card); color: var(--emerald-ink);
  transition: border-color 0.25s, background 0.25s;
}
.ruk-chip:hover { border-color: var(--emerald-deep); background: #fff; }
.ruk-input { display: flex; gap: 0.5rem; padding: 0.7rem 0.9rem 0.9rem; border-top: 1px solid var(--line-soft); }
.ruk-input input {
  flex: 1; padding: 0.7em 1em; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font: inherit; font-size: 0.88rem;
}
.ruk-input input:focus { outline: 2px solid var(--emerald); outline-offset: 1px; }
.ruk-input button {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: var(--emerald-deep); color: #fff; display: grid; place-items: center;
}
.ruk-input button svg { width: 18px; height: 18px; }

/* ============================================================
   MISC
   ============================================================ */
::selection { background: var(--emerald); color: #fff; }
.skip-note { font-size: 0.78rem; color: var(--ink-soft); }
.center { text-align: center; }

/* fine print under sections */
.foot-note { margin-top: 1.6rem; font-size: 0.76rem; color: var(--ink-soft); }
.on-dark .foot-note { color: rgba(245,242,233,0.5); }

@media (max-width: 640px) {
  .brand-lockup img { height: 42px; }
  .brand-lockup .bl-name { font-size: 1.05rem; }
  .brand-lockup .bl-tag { display: none; }
  .hero-foot { flex-direction: column; align-items: flex-start; gap: 0.45rem; padding-right: 4.5rem; }
  .hero-scroll { display: none; }
}

/* ===================================================================
   v3 "ALIVE" LAYER (2026-07-12)
   Reference: Phantom mechanics (captured) + ELT's own hero composition.
   =================================================================== */

/* ---------- Onest display tuning (the serif is dead) ---------- */
.display { font-weight: 400; letter-spacing: -0.02em; line-height: 1.0; }
.display em, .display i { font-style: normal; color: var(--emerald-deep); }
.display .gold-i { font-style: normal; color: var(--gold); }
.on-dark .display em { color: var(--emerald); }
.jcard h3, .svc-card h3, .sus-card h3, .vmv-card h3, .partner h4,
.news-card .nc-title, .tmony-card .tq, .bio-card h4, .calc-panel h3,
.apply-top h3, .footer-brand .fb-name, .menu-nav a.m-link,
.brand-lockup .bl-name, .cr-tier, .tier-card .tc-name, .variant h3,
.team-tile .monogram, .variant .v-mark, .jcard .jc-no {
  font-weight: 500; letter-spacing: -0.01em;
}
.intro-statement { font-weight: 400; letter-spacing: -0.015em; }
.hero-foot .shona, .menu-foot .tagline { font-style: normal; }

/* ---------- glyph slots (Phantom mascot device) ---------- */
.glyph-slot {
  display: inline-block; vertical-align: -0.12em;
  width: 1.5em; height: 1.15em; overflow: visible; position: relative;
}
.glyph-slot img {
  position: absolute; inset: 50% auto auto 50%;
  width: 1.6em; height: 1.6em; transform: translate(-50%, -50%);
  border-radius: 26%;
  animation: glyph-sway 6.5s ease-in-out infinite;
}
.glyph-chip {
  width: 3.2rem; height: 3.2rem; border-radius: 14px; overflow: hidden;
  flex: none; display: block;
}
.glyph-chip img { width: 100%; height: 100%; object-fit: cover; }
@keyframes glyph-sway {
  0%, 100% { transform: translate(-50%, -50%) rotate(-3deg); }
  50% { transform: translate(-50%, -52%) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) { .glyph-slot img { animation: none; } }

/* ---------- HERO v3: the reverted wrap-around composition ----------
   Corner-anchored copy around a grounded golden leaf cutout, on a quiet
   forest ground; cursor trail (catalog 079) is the hero interactivity. */
.hero-v3 {
  position: relative;
  background:
    radial-gradient(120% 90% at 76% 6%, rgba(3,165,80,0.16), transparent 55%),
    radial-gradient(80% 60% at 18% 100%, rgba(242,177,0,0.10), transparent 55%),
    var(--forest-deep);
  color: var(--cream);
  overflow: clip;
}
.hero-v3::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(125% 85% at 50% 44%, rgba(6,39,23,0.02) 0%, rgba(6,39,23,0.38) 64%, rgba(6,39,23,0.72) 100%);
}
.hero-v3 .trail-host { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero-comp {
  position: relative; z-index: 3;
  display: flex; flex-direction: column;
  padding: calc(var(--nav-h) + 3rem) var(--gutter) 3.4rem;
  min-height: 100svh;
  max-width: var(--maxw); margin: 0 auto;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.24em; color: var(--emerald); margin-bottom: 1.2rem;
}
/* Thomas 2026-07-12: dropped the gold rule beside the eyebrow (read as a stray line). */
.hero-title-v3 {
  font-family: "Satoshi", system-ui, sans-serif;
  font-weight: 330; letter-spacing: -0.02em;
  font-size: clamp(2.9rem, 9.4vw, 7.6rem); line-height: 0.94;
}
.hero-title-v3 .gold { color: var(--gold); }
.hero-kicker-v3 {
  font-size: 0.74rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em; line-height: 1.8; color: var(--cream); opacity: 0.72;
}
.hero-sub-v3 {
  font-weight: 400; font-size: var(--t-24); line-height: 1.25; color: var(--cream);
}
.hero-sub-v3 .cycle { color: var(--gold); }
.hero-desc-v3 {
  font-size: var(--t-16); line-height: 1.6; color: var(--cream); opacity: 0.74;
  max-width: 42ch; margin-top: 0.9rem;
}
.hero-shona-v3 {
  font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--gold); line-height: 1.7;
}
.hero-shona-v3 span { display: block; color: var(--cream); opacity: 0.55; letter-spacing: 0.16em; }
.divider-hero-line { width: 100%; height: 1px; background: var(--line-dark); }
.hero-top { order: 1; }
.hero-top-right { display: none; }
.hero-comp .divider-hero-line { order: 3; margin: 1.6rem 0 1.4rem; }
.hero-bottom-left { order: 4; }
.hero-bottom-right { order: 5; margin-top: 1.6rem; display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.hero-leaf {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  z-index: 2; pointer-events: none;
  width: min(62vw, 260px); height: min(38svh, 330px);
  display: grid; place-items: end center;
}
.hero-leaf-glow {
  position: absolute; inset: -6% -24% -8%; z-index: 0;
  background: radial-gradient(56% 58% at 50% 62%, rgba(255,205,74,0.42), rgba(242,177,0,0.16) 50%, transparent 74%);
  filter: blur(16px);
}
.hero-leaf-frame { position: relative; z-index: 1; width: 100%; height: 100%; display: grid; place-items: end center; }
.hero-leaf-frame img {
  width: 100%; height: 100%; object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 28px 40px rgba(0,0,0,0.5)) drop-shadow(0 0 34px rgba(255,205,74,0.28));
}
.hero-base-note {
  position: absolute; left: 0; right: 0; bottom: 2.5rem; z-index: 3;
  text-align: center; font-size: 0.6rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em; opacity: 0.55;
  padding: 0 var(--gutter);
}
@media (min-width: 900px) {
  .hero-comp {
    display: grid;
    grid-template-rows: auto 4rem 1fr;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "top    topright"
      "div    div"
      "bottomleft bottomright";
    padding: calc(var(--nav-h) + 3.4rem) var(--gutter) 5.4rem;
    column-gap: 2rem;
  }
  .hero-top { order: 0; grid-area: top; align-self: start; }
  .hero-top-right {
    order: 0; grid-area: topright; display: block;
    align-self: start; justify-self: end; text-align: right; max-width: 20ch;
    margin-top: 0.4rem;
  }
  .hero-comp .divider-hero-line {
    order: 0; grid-area: div; align-self: center; margin: 2.6rem 0;
    background: linear-gradient(90deg,
      var(--line-dark) 0%, var(--line-dark) 32%,
      transparent 40%, transparent 60%,
      var(--line-dark) 68%, var(--line-dark) 100%);
  }
  .hero-bottom-left { grid-area: bottomleft; align-self: end; max-width: 40ch; margin-top: 0; }
  .hero-bottom-right {
    grid-area: bottomright; align-self: end; justify-self: end;
    align-items: flex-end; text-align: right; gap: 1.3rem; margin-top: 0;
  }
  .hero-shona-v3 { text-align: right; }
  .hero-leaf {
    width: min(26vw, 360px); height: min(74svh, 680px);
  }
  .hero-leaf-glow {
    inset: 2% -30% -6%;
    background: radial-gradient(52% 56% at 50% 64%, rgba(255,205,74,0.38), rgba(242,177,0,0.14) 52%, transparent 74%);
    filter: blur(22px);
  }
}

/* Thomas 2026-07-12: on phones the absolute centre-bottom leaf sat under the
   copy + "Become a grower" CTA and its glow muddied the text. Below 900px the
   leaf becomes a grounded flow image at the base of the hero (copy above, leaf
   below) so nothing overlaps; margin-top:auto keeps it planted at the bottom. */
@media (max-width: 899px) {
  .hero-leaf {
    position: relative; left: auto; bottom: auto; transform: none;
    order: 6; z-index: 0; margin: auto auto 0; margin-top: auto;
    width: min(66vw, 232px); height: auto; aspect-ratio: 3 / 4;
  }
  .hero-leaf-glow { inset: 4% -18% -4%; filter: blur(13px); }
  .hero-base-note { position: relative; left: auto; right: auto; bottom: auto; margin-top: 0.8rem; }
  .hero-comp { padding-bottom: 2.2rem; }
}

/* ---------- JOURNEY: pinned card stack (Phantom mechanics, measured) ----------
   Sticky viewport; 7 stage cards rise and stack over a sticky headline whose
   opacity ramps 0.22 -> 1 on entry and dims on exit (mechanics-spec.md).
   Reduced motion / no JS: plain stacked list, everything visible. */
.jstack { position: relative; }
html.js .jstack-track { height: calc(var(--jsteps, 7) * 62vh + 100vh); }
.jstack-view { position: relative; }
html.js .jstack-view { position: sticky; top: 0; height: 100svh; overflow: clip; }
.jstack-head {
  position: absolute; top: calc(var(--nav-h) + 4.6rem); left: 0; right: 0; z-index: 1;
  text-align: center; padding: 0 var(--gutter);
}
.jstack-head .display { font-size: var(--t-72); }
.jstack-head p { margin-top: 0.6rem; color: inherit; opacity: 0.7; font-size: var(--t-16); }
.jstack-cards { position: relative; z-index: 2; height: 100%; }
/* Thomas 2026-08-06: journey cards are PREMIUM MINIMAL. White paper card, the
   heading and the paragraph alone; no illustration, no scrim, no stage pill,
   no tag chip. The 01/07 counter at the section head carries the progression. */
.jcard-v3 {
  position: relative; overflow: hidden;
  display: flex;
  background: var(--paper);
  border: 1px solid rgba(12,59,35,0.10);
  border-radius: 24px;
  padding: 0;
  box-shadow: 0 32px 90px rgba(3,18,10,0.5);
  color: var(--ink);
}
.jc-body {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; justify-content: center; gap: 0.8rem;
  padding: 2.5rem 2.7rem;
}
/* Thomas 2026-08-06: one small premium piece on the white card, a short
   emerald-to-gold accent line above the heading. CSS-only, no markup. */
.jc-body::before {
  content: ""; width: 52px; height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, var(--emerald) 0%, var(--emerald) 55%, var(--gold) 100%);
}
html.js .jstack-cards .jcard-v3 {
  position: absolute; left: 50%; top: 100%;
  width: min(88vw, 560px);
  min-height: min(42svh, 350px);
  transform: translate(-50%, 0);
  will-change: transform;
}
html.no-js .jstack-cards, .jstack.jstack-static .jstack-cards {
  display: grid; gap: 1rem; padding: 2rem var(--gutter);
}
html.no-js .jstack-cards .jcard-v3, .jstack.jstack-static .jstack-cards .jcard-v3 {
  position: static; transform: none; width: auto; min-height: 260px;
}
.jcard-v3 h3 { font-weight: 700; font-size: var(--t-32); letter-spacing: -0.02em; color: var(--ink); }
.jcard-v3 p { color: var(--ink-soft); font-size: var(--t-16); line-height: 1.65; max-width: 44ch; }
.jstack-chip {
  position: absolute; top: calc(var(--nav-h) + 1rem); left: var(--gutter); z-index: 3;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
  border: 1px solid currentColor; border-radius: 999px; padding: 0.5em 1em;
  opacity: 0.75;
}
.jstack-count {
  position: absolute; top: calc(var(--nav-h) + 1.1rem); right: var(--gutter); z-index: 3;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; opacity: 0.75;
}

/* ---------- NAV dropdown: Pillars (Phantom zero-gap device) ---------- */
.nav-drop { position: relative; }
.nav-drop-panel {
  position: absolute; top: 100%; left: -1rem;
  padding-top: 10px; /* the hover bridge: padding, never margin (measured fix) */
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.nav-drop:hover .nav-drop-panel,
.nav-drop:focus-within .nav-drop-panel { opacity: 1; transform: none; pointer-events: auto; }
.nav-drop-inner {
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-soft); border-radius: 16px;
  box-shadow: 0 22px 60px rgba(6,39,23,0.18);
  padding: 0.6rem; min-width: 280px;
  display: flex; flex-direction: column;
}
.nav-drop-inner a {
  display: flex; align-items: baseline; gap: 0.8rem;
  padding: 0.65rem 0.8rem; border-radius: 10px;
  font-size: 0.86rem; font-weight: 600; letter-spacing: 0.01em;
  text-transform: none; opacity: 1;
}
.nav-drop-inner a:hover { background: var(--paper-2); }
.nav-drop-inner a .dd-no {
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em; color: var(--gold-deep);
}
.nav-drop-inner a .dd-sub { display: block; font-size: 0.72rem; font-weight: 500; color: var(--ink-soft); }

/* ---------- Onyx provenance block (captured device, pillar pages) ---------- */
.prov { display: grid; gap: 2rem; }
@media (min-width: 960px) { .prov { grid-template-columns: minmax(0, 46%) 1fr; gap: 4rem; align-items: center; } }
.prov .prov-media { border-radius: 4px; overflow: hidden; aspect-ratio: 1; }
.prov .prov-media img { width: 100%; height: 100%; object-fit: cover; }
.prov .prov-name { font-weight: 780; letter-spacing: -0.03em; font-size: var(--t-72); line-height: 0.98; }
.prov .prov-tags {
  margin: 0.9rem 0 1.1rem;
  font-weight: 700; font-size: var(--t-16); letter-spacing: 0.01em;
}
.prov .prov-tags b { color: var(--emerald-ink); }
.prov .prov-tags .sep { color: var(--gold-deep); padding: 0 0.35em; }
.prov p { color: var(--ink-soft); max-width: 56ch; }
.prov .btn { margin-top: 1.4rem; }


/* ---------- dark-world section adaptation (STAR page lives in forest) ---------- */
.sec.on-dark { color: var(--cream); }
.sec.on-dark .sp-copy p, .sec.on-dark .intro-side p, .sec.on-dark p { color: var(--cream-dim); }
.sec.on-dark .display { color: var(--cream); }
.sec.on-dark .stat-cell .v { color: var(--cream); }
.sec.on-dark .stat-cell .v small { color: var(--gold); }
.sec.on-dark .stat-cell .l { color: var(--cream-dim); }
.sec.on-dark .stat-band, .sec.on-dark .stat-cell { border-color: var(--line-dark); }
.sec.on-dark.sec-rule { border-top-color: var(--line-dark); }
.sec.on-dark .foot-note { color: rgba(245,242,233,0.5); }
.sec.on-dark .btn-ghost { border-color: var(--line-dark); }

/* ---------- v3.1 MOOD LAYER (Alex round 3): darker, serious, mature ---------- */
/* buttons: rectangles over pills, lighter weight, wider tracking */
.btn, .nav-cta { border-radius: 10px; font-weight: 500; letter-spacing: 0.14em; }
.jcard-v3 { border-radius: 18px; }
.hero-v3 {
  background:
    radial-gradient(120% 90% at 76% 6%, rgba(3,165,80,0.10), transparent 55%),
    radial-gradient(80% 60% at 18% 100%, rgba(217,164,65,0.07), transparent 55%),
    var(--forest-deep);
}
/* label system: quieter emerald on light grounds */
.label { color: var(--emerald-ink); }
/* thin display needs a touch more optical size at small clamp floors */
.sec-head .display { font-weight: 400; }
.hero-eyebrow { color: #55B77E; }
/* glow counter / bright-gold micro accents stay lively on dark via a brighter micro token */
:root { --gold-bright: #F2B100; }
.scroll-progress .scroll-progress-fill, .scroll-progress-fill { background: var(--gold-bright); }

/* upright gold accents everywhere (kill the scoped italics; mature, consistent) */
.display .gold-i, .cta-inner .display .gold-i, .star-head .display .gold-i,
.footer-head .display .gold-i, .hero-title .gold-i { font-style: normal; }
/* glyph chips: hairline gold seal ring so they read on dark bands too */
.glyph-chip { border: 1px solid rgba(217,164,65,0.35); }