/* ============================================================
   SHEBA BERRY  ·  Design system
   Tokens and rules trace to soul.md. Bright base, strawberry as
   the color, forest + gold as heritage accents. One accent per
   page, one radius system, no pure black, no em-dashes in copy.
   ============================================================ */:root {
  /* Palette (soul.md §3) */
  --cream:   #FBFAF6;   /* primary background */
  --ivory:   #F4EFE3;   /* secondary band */
  --crimson: #C0392B;   /* the fruit, the one accent */
  --crimson-deep: #9E2B20;
  --forest:  #1E3A2B;   /* nav, footer, dark band, structure */
  --forest-soft: #2C5240;
  --gold:    #C8962F;   /* motif + hairlines, lines not fills */
  --teal:    #1FB6A6;   /* reserved, technology only */
  --ink:     #16201A;   /* body text, never pure black */
  --ink-60:  rgba(22, 32, 26, 0.62);
  --ink-40:  rgba(22, 32, 26, 0.40);
  --line:    rgba(22, 32, 26, 0.12);

  /* Type */
  --display: "Playfair Display", "Times New Roman", Georgia, serif;
  --sans: "Satoshi", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ethiopic: "Noto Serif Ethiopic", var(--display);

  /* One radius system (soft) */
  --radius: 14px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --shadow-lg: 0 30px 70px rgba(6, 12, 8, 0.4);
  --radius-lg: 22px;

  /* Type scale (locked; every heading maps to one of these) */
  --t-h1: clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem);
  --t-h2: clamp(1.8rem, 1.2rem + 2vw, 2.7rem);
  --t-h3: 1.25rem;
  --t-lede: clamp(1.02rem, 0.98rem + 0.3vw, 1.18rem);

  /* Small-text scale (v57): all sub-1rem sizes map here, nowhere else */
  --t-micro: 0.58rem;
  --t-mini: 0.63rem;
  --t-tag: 0.7rem;
  --t-tiny: 0.75rem;
  --t-label: 0.78rem;
  --t-small: 0.82rem;
  --t-note: 0.85rem;
  --t-meta: 0.9rem;
  --t-body-s: 0.95rem;

  /* Rhythm (tightened: the 9rem gaps read cheap and unconsidered) */
  --section-y: clamp(4rem, 6vw, 6rem);
  --head-gap: clamp(2rem, 4vw, 3rem);
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --maxw: 1240px;

  --shadow: 0 18px 50px -22px rgba(30, 58, 43, 0.35);
  --shadow-soft: 0 10px 30px -18px rgba(30, 58, 43, 0.30);
}

/* ---------- Reset ---------- */*, *::before, *::after { box-sizing: border-box; }* { margin: 0; }html { -webkit-text-size-adjust: 100%; }html { overflow-x: clip; }body {
  overflow-x: clip;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  -webkit-font-smoothing: antialiased;
}img, picture, canvas, svg, video { display: block; max-width: 100%; }a { color: inherit; text-decoration: none; }button { font: inherit; cursor: pointer; border: 0; background: none; }ul { list-style: none; padding: 0; }

/* ---------- Type ---------- */h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; line-height: 1.08; letter-spacing: -0.005em; text-wrap: balance; }p, .lede, .lead { text-wrap: pretty; }.display {
  font-size: clamp(2.4rem, 1.5rem + 4vw, 4.8rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  font-weight: 500;
}h2.section-title { font-size: var(--t-h2); letter-spacing: -0.012em; }h3 { font-size: var(--t-h3); }.lead, .lede { font-size: var(--t-lede); color: var(--ink-60); line-height: 1.65; max-width: 56ch; }.eyebrow {
  font-family: var(--sans); font-weight: 600; font-size: var(--t-label);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--crimson);
}.eyebrow.on-dark { color: var(--gold); }
/* Emphasis: color only, no italic. Playfair's italic is theatrical and reads
   as a sales page when combined with crimson; quotes keep italic by design. */em { font-style: normal; color: var(--crimson); }.ethiopic { font-family: var(--ethiopic); font-style: normal; }

/* ---------- Layout ---------- */.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }.wrap-wide { width: min(100% - 2 * var(--gutter), 1440px); margin-inline: auto; }.wrap-narrow { width: min(100% - 2 * var(--gutter), 940px); margin-inline: auto; }section { padding-block: var(--section-y); position: relative; }.band-ivory { background: var(--ivory); }

/* ---------- Buttons (pill style per the approved hero mock) ---------- */.btn {
  display: inline-flex; align-items: center; gap: 0.65em;
  padding: 1em 1.65em; border-radius: 999px;
  font-weight: 600; font-size: var(--t-small); letter-spacing: 0.1em; text-transform: uppercase;
  transition: transform 0.18s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  will-change: transform;
}.btn svg { width: 1.3em; height: 1.3em; }.btn:active { transform: scale(0.98); }.btn-primary { background: var(--forest); color: var(--cream); border: 1px solid var(--forest); box-shadow: var(--shadow-soft); }.btn-primary:hover { background: var(--forest-soft); border-color: var(--forest-soft); transform: translateY(-1px); }.btn-ghost { background: transparent; color: var(--forest); border: 1.5px solid rgba(30, 58, 43, 0.35); }.btn-ghost:hover { border-color: var(--forest); background: rgba(30, 58, 43, 0.05); transform: translateY(-1px); }.btn:hover .btn-arrow svg { transform: translateX(3px); }

/* ---------- Motif divider ---------- */

/* ============================================================
   NAV
   ============================================================ */.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem var(--gutter); height: 72px;
  transition: background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}.nav.solid {
  background: rgba(251, 250, 246, 0.92);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 10px 30px rgba(22, 32, 26, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.5),
              inset 0 -1px 0 rgba(22, 32, 26, 0.06);
}.brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--display); font-size: 1.35rem; font-weight: 600; color: var(--forest); letter-spacing: -0.01em; }.brand-logo { height: 48px; width: auto; display: block; }@media (max-width: 700px) { .brand-logo { height: 38px; } }.brand .mark { width: 30px; height: 30px; }.brand small { display: block; font-family: var(--sans); font-size: var(--t-micro); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-40); font-weight: 600; margin-top: 2px; }.nav-links { display: flex; align-items: center; gap: clamp(0.65rem, 1.4vw, 2rem); }.nav-links a { position: relative; white-space: nowrap; font-size: var(--t-label); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--forest); opacity: 0.85; transition: opacity 0.2s; padding-bottom: 0.3em; }.nav-links a:hover { opacity: 1; }.nav-links a.active { opacity: 1; }.nav-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--crimson); }.nav-cta, .nav-links a.nav-cta { background: var(--forest); color: var(--cream) !important; opacity: 1 !important; padding: 0.65rem 1.25rem; border-radius: 999px; font-size: var(--t-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; display: inline-flex; align-items: center; }.nav-cta:hover { background: var(--forest-soft); }.nav-toggle { display: none; width: 30px; height: 30px; color: var(--forest); }
@media (max-width: 1150px) {
  /* V72: breakpoint raised 900 -> 1150; with Insights + the About dropdown the
     desktop row wraps into the logo below ~1080px, so the drawer starts earlier.
     V70 fix: backdrop-filter on the header makes it the containing block for
     fixed-position descendants, so the drawer's box collapsed to the header
     strip and its cream background never painted (menu text floated naked over
     the page). No blur on mobile; a near-opaque bar covers the difference. */
  .nav.solid { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(251, 250, 246, 0.97); }
  .nav-links {
    position: fixed; inset: 0 0 0 auto; width: min(80vw, 340px); height: 100dvh;
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 1.4rem; padding: 2rem; background: var(--cream);
    transform: translateX(100%); transition: transform 0.4s cubic-bezier(.4,0,.1,1);
    box-shadow: var(--shadow);
  }.nav-links.open { transform: translateX(0); }.nav-links a { font-size: 1.3rem; font-family: var(--display); }.nav-toggle { display: block; }
}

/* ============================================================
   HERO  (pinned scroll-scrub stage)
   ============================================================ */.hero { height: 100dvh; min-height: 600px; position: relative; overflow: hidden; background: var(--ivory); }.hero-bg { position: absolute; inset: 0; z-index: 0; }.hero-bg picture { display: block; width: 100%; height: 100%; }.hero-bg img, .hero-bg canvas { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; display: block; }
/* That display:block outranks the UA [hidden] rule, so the canvas painted a
   blank layer over the poster from first byte and, with JS off, forever. */
.hero-bg canvas[hidden] { display: none; }.hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  linear-gradient(90deg, rgba(251,250,246,0.97) 0%, rgba(251,250,246,0.82) 24%, rgba(251,250,246,0.32) 46%, transparent 62%); }.hero-inner { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; }
@media (max-width: 700px) {.hero-bg img, .hero-bg canvas { object-position: 74% 30%; }.hero-scrim { background: linear-gradient(0deg, rgba(251,250,246,0.97) 10%, rgba(251,250,246,0.7) 40%, rgba(251,250,246,0.15) 72%, transparent); }.hero-inner { align-items: flex-end; padding-bottom: 11vh; }
}.hero-copy { position: relative; z-index: 3; text-align: left; max-width: 38rem; }.hero .display { font-size: clamp(2rem, 1rem + 3vw, 3.7rem); line-height: 1.06; }.hero-copy .display .line { display: block; }.hero-copy .display .line span { display: block; }.hero-sub { margin: 1.4rem 0 0; max-width: 42ch; color: var(--ink-60); font-size: clamp(1rem,0.95rem + 0.4vw,1.18rem); }.hero-actions { margin-top: 1.8rem; display: flex; gap: 0.8rem; justify-content: flex-start; flex-wrap: wrap; }.hero-callouts { position: absolute; inset: 0; pointer-events: none; z-index: 4; }.callout {
  position: absolute; display: flex; align-items: center; gap: 0.5rem;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.5rem 0.85rem; font-size: var(--t-note); font-weight: 600; color: var(--forest);
  box-shadow: var(--shadow-soft); opacity: 0; will-change: transform, opacity;
}.callout b { color: var(--crimson); }
@keyframes scrolldot {0%, 100% {opacity:0; transform:translate(-50%,0)}50% {opacity:1; transform:translate(-50%,8px)} }

/* ============================================================
   COMPONENTS / SECTIONS
   ============================================================ */.section-head { max-width: 60ch; margin-bottom: var(--head-gap); display: grid; gap: 1.15rem; justify-items: start; }.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }.section-head .eyebrow { margin-bottom: 0; }.section-head p { margin-top: 0; }


/* Value columns */.value { }.value .ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--radius-sm); background: rgba(192,57,43,0.08); color: var(--crimson); margin-bottom: 1rem; }.value h3 { font-family: var(--sans); font-weight: 700; font-size: 1.08rem; letter-spacing: 0; margin-bottom: 0.4rem; }.value p { color: var(--ink-60); font-size: var(--t-body-s); }

/* Seedance frame player (the fruit ripens in place, like the hero) */.band-soft { background: var(--ivory); }   /* matches the brightened photo background -> berry floats, no card */.play-box { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 480px; margin-inline: auto; overflow: hidden; border-radius: var(--radius-lg); background: transparent; }.play-box .play-poster, .play-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; filter: brightness(1.14); }.play-box.arc { aspect-ratio: 3 / 4; max-width: 460px; }.play-box.arc .play-poster, .play-box.arc canvas { object-position: center; }
/* Epic pinned arc (journey page) */.play-box.arc-big { width: min(82vw, 480px); max-width: none; }.play-box canvas { z-index: 1; will-change: transform; }

/* Split feature */.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }.split.reverse > .split-media { order: 2; }.split-media { position: relative; }.split-media img { width: 100%; object-fit: contain; }
@media (max-width: 820px) {.split { grid-template-columns: 1fr; }.split.reverse > .split-media { order: 0; } }

/* Icon row */

/* Stat strip */.stat .num { font-family: var(--display); font-size: clamp(2.6rem, 1.6rem + 3vw, 4.2rem); color: var(--cream); line-height: 1; }.stat .num .unit { color: var(--gold); }.stat .lab { margin-top: 0.6rem; font-size: var(--t-meta); letter-spacing: 0.04em; color: rgba(244,239,227,0.7); }

/* Pull quote */

/* Badges row */

/* Trust / scatter band */

/* Comparison table (contained card, tinted Us column) */.compare { width: 100%; border-collapse: collapse; font-size: var(--t-body-s); }.compare th, .compare td { padding: 1.05rem 1.4rem; text-align: left; border-bottom: 1px solid var(--line); }.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }.compare thead th { font-family: var(--sans); font-weight: 700; color: var(--forest); background: var(--ivory); font-size: var(--t-small); letter-spacing: 0.08em; text-transform: uppercase; }.compare thead th.us { color: #fff; background: var(--forest); }.compare td.us { font-weight: 700; color: var(--crimson-deep); background: rgba(192, 57, 43, 0.05); }.compare tbody th { font-weight: 600; color: var(--ink-60); }.compare tbody tr:hover td:not(.us) { background: rgba(30, 58, 43, 0.025); }

/* CTA band */

/* Form */.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 2.5rem; }.form .full { grid-column: 1 / -1; }.field label { display: block; font-size: var(--t-small); font-weight: 600; color: var(--ink-60); margin-bottom: 0.4rem; letter-spacing: 0.02em; }.field input, .field select, .field textarea {
  width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--ink); font: inherit; transition: border-color 0.2s, box-shadow 0.2s;
}.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--crimson); box-shadow: 0 0 0 3px rgba(192,57,43,0.12); }.field textarea { min-height: 130px; resize: vertical; }.hp { position: absolute; left: -9999px; }
@media (max-width: 640px){.form { grid-template-columns: 1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */.footer { background: var(--forest); color: rgba(244,239,227,0.8); padding-block: clamp(3.5rem,7vw,5.5rem) 2rem; }.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }.footer .brand { color: var(--cream); }.footer h4 { font-family: var(--sans); font-size: var(--t-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }.footer a { display: block; padding: 0.3rem 0; opacity: 0.8; font-size: var(--t-body-s); }.footer a:hover { opacity: 1; color: var(--cream); }.footer-bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(244,239,227,0.14); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: var(--t-note); opacity: 0.7; }
@media (max-width: 760px){.footer-top { grid-template-columns: 1fr 1fr; }.footer .col-brand { grid-column: 1 / -1; } }

/* ============================================================
   PAGE HEADER (interior pages)
   ============================================================ */

/* Editorial page hero: eyebrow + serif heading left, framed real photo right.
   Replaces the "sales page" bold centered head. */.page-hero { padding: clamp(7.5rem, 13vh, 10rem) 0 clamp(2.5rem, 5vw, 4rem); }.page-hero .grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }.page-hero h1 { font-size: var(--t-h1); color: var(--ink); line-height: 1.1; letter-spacing: -0.015em; max-width: 17ch; margin-top: 1rem; }.page-hero .lede { margin-top: 1.2rem; }.page-hero .ph { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 3; }.page-hero .ph img { width: 100%; height: 100%; object-fit: cover; }.page-hero .ph::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(200, 150, 47, 0.45); border-radius: calc(var(--radius-lg) - 8px); pointer-events: none; }.page-hero.center { text-align: center; }.page-hero.center h1 { margin-inline: auto; }.page-hero.center .lede { margin-inline: auto; }
@media (max-width: 860px) {.page-hero .grid { grid-template-columns: 1fr; }.page-hero h1 { max-width: none; } }

/* Chapter header: full-bleed graded photo, cream panel overlapping upward.
   Interior pages read as chapters of one story. */.page-hero2 { padding: 0 0 clamp(2.5rem, 4vw, 3.5rem); }.ph2-media { height: clamp(320px, 52vh, 560px); position: relative; overflow: hidden; }.ph2-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
/* Our Farms header: crop sits low in the frame so the picker's legs stay out of view */
body[data-page="our-farms"] .ph2-media img { object-position: center 100%; }.ph2-media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14, 24, 18, 0.72), rgba(14, 24, 18, 0.42) 45%, rgba(14, 24, 18, 0.78)); }.ph2-panel {
  position: relative; z-index: 2;
  background: linear-gradient(165deg, rgba(39, 73, 59, 0.96), rgba(22, 40, 29, 0.97)); border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  max-width: 840px; margin-top: -110px;
  padding: clamp(1.6rem, 3.5vw, 2.6rem) clamp(1.5rem, 3.5vw, 2.8rem);
  box-shadow: 0 -18px 50px -28px rgba(22, 32, 26, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}.ph2-panel .tibeb-hairline { margin-bottom: 1.2rem; }.ph2-panel h1 { font-size: var(--t-h1); color: #fff; line-height: 1.1; letter-spacing: -0.015em; margin-top: 0.8rem; max-width: 22ch; }.ph2-panel .eyebrow { color: var(--gold); }.ph2-panel .lede { color: rgba(244, 239, 227, 0.75); }.ph2-panel .lede { margin-top: 1.1rem; }.chno { font-family: var(--display); color: var(--gold); font-size: 1.15em; letter-spacing: 0; margin-right: 0.4em; }
@media (max-width: 700px) {.ph2-panel { margin-top: -70px; }.ph2-media { height: 42vh; } }

/* Next chapter navigator (replaces same-CTA-everywhere page endings) */.next-chapter { padding: 0; border-top: 1px solid var(--line); }.next-chapter a { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: clamp(1.4rem, 3vw, 2.5rem); padding: clamp(2rem, 5vw, 3.2rem) 0; }.next-chapter .eyebrow { color: var(--ink-40); }.next-chapter h2 { font-size: var(--t-h2); color: var(--forest); margin-top: 0.5rem; transition: color 0.25s ease; }.next-chapter p { color: var(--ink-60); margin-top: 0.4rem; max-width: 44ch; }.next-chapter a:hover h2 { color: var(--crimson); }.nc-ph { width: clamp(120px, 16vw, 200px); aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); }.nc-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }.next-chapter a:hover .nc-ph img { transform: scale(1.05); }.nc-arrow { width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid var(--forest); display: grid; place-items: center; color: var(--forest); transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease; }.next-chapter a:hover .nc-arrow { background: var(--forest); color: var(--cream); transform: translateX(6px); }
@media (max-width: 640px) {.nc-ph { display: none; }.next-chapter a { grid-template-columns: 1fr auto; } }

/* Customisation demo (products) */.custom-demo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; margin-top: clamp(2.4rem,5vw,3.6rem); }.custom-stage { position: relative; display: grid; place-items: center; min-height: 320px;
  background: radial-gradient(circle at 50% 45%, #fff, var(--ivory) 70%); border-radius: var(--radius-lg); }.custom-stage img { width: clamp(180px, 26vw, 300px); filter: drop-shadow(0 24px 36px rgba(30,58,43,.25)); transition: filter 0.18s ease; }.custom-controls label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; color: var(--forest); margin: 1.4rem 0 0.5rem; }.custom-controls label:first-child { margin-top: 0; }.custom-controls output { font-family: var(--sans); font-weight: 600; color: var(--crimson); font-size: var(--t-meta); }.custom-controls input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--ivory), var(--crimson)); outline: none; }.custom-controls input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--crimson); box-shadow: var(--shadow-soft); cursor: pointer; }.custom-controls input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--crimson); cursor: pointer; }.custom-note { margin-top: 1.4rem; color: var(--ink-40); font-size: var(--t-small); }
@media (max-width: 760px){.custom-demo { grid-template-columns: 1fr; } }

/* QR card (traceability) */.trace-card { max-width: 520px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow); }.trace-row { display: flex; justify-content: space-between; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }.trace-row:last-child { border: 0; }.trace-row .k { color: var(--ink-60); }.trace-row .v { font-weight: 700; color: var(--forest); }.pill { display: inline-block; padding: 0.2rem 0.7rem; border-radius: 999px; font-size: var(--t-label); font-weight: 700; }.pill.ok { background: rgba(31,182,166,0.14); color: #0e7d70; }

/* ---------- Reveal animation base ---------- */.reveal { opacity: 0; transform: translateY(26px); }.is-ready .reveal { opacity: 0; } /* JS will animate; if no JS, see fallback below */

/* ---------- No-JS / reduced motion fallback ---------- */
@media (prefers-reduced-motion: reduce) {* { animation: none !important; transition: none !important; }.reveal { opacity: 1 !important; transform: none !important; }.hero-copy .display .line span { opacity: 1 !important; transform: translate(-50%, -50%) !important; }.hero-copy .display .line span { transform: none !important; }.callout { opacity: 1 !important; transform: none !important; }
}.no-js .reveal { opacity: 1; transform: none; }.no-js .hero-fruit, .no-js .hero-glow { opacity: 1; }.no-js .hero-copy .display .line span { opacity: 1; }

/* ============================================================
   V11 · Heritage design system (per brand/references/
   homepage-direction.png). Tibeb pattern bands, ring badges,
   forest feature panel, quote card, provenance stamp.
   ============================================================ */

/* ---------- Hero refinements (scrub untouched) ---------- */.hero .display .line-accent span { color: var(--crimson); }.hero-callouts { position: absolute; inset: 0; pointer-events: none; z-index: 4; }.hero .callout { opacity: 0; }.hero .c1 { top: 20%; right: 16%; }.hero .c2 { top: 44%; right: 6%; }.hero .c3 { top: 66%; right: 20%; }
@media (max-width: 900px) {.hero-callouts { display: none; } }

/* ---------- Tibeb pattern bands (Ethiopian woven border) ---------- */.tibeb {
  height: 26px; width: 100%;
  background-color: var(--forest);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='26'%3E%3Cpath d='M0 3.5h36M0 22.5h36' stroke='%23C8962F' stroke-width='1' opacity='.65'/%3E%3Cpath d='M18 7l6 6-6 6-6-6z M0 7l6 6-6 6 M36 7l-6 6 6 6' fill='none' stroke='%23C8962F' stroke-width='1.2'/%3E%3Cpath d='M18 10.5l2.5 2.5-2.5 2.5-2.5-2.5z' fill='%23C0392B'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
}.tibeb-hairline {
  height: 12px; width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 8L6 4l6 4 6-4 6 4' fill='none' stroke='%23C8962F' stroke-width='1.1' opacity='.55'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: center;
}

/* ---------- Ring badges (trust row under hero) ---------- */


/* ---------- Forest feature panel (values + farm photo) ---------- */



/* ---------- Heritage quote card + stamp ---------- */


/* ---------- Ornament title + icon row ---------- */.orn-title { display: flex; align-items: center; justify-content: center; gap: 1.2rem; }.orn-title h2 {
  font-family: var(--sans); font-weight: 700; font-size: clamp(0.9rem, 0.8rem + 0.5vw, 1.05rem);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--forest); text-align: center;
}.orn-title::before, .orn-title::after {
  content: ""; flex: 1; max-width: 160px; height: 7px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='7'%3E%3Cpath d='M0 3.5h24' stroke='%23C8962F' stroke-width='1' opacity='.6'/%3E%3Cpath d='M12 0.5l3 3-3 3-3-3z' fill='%23C8962F'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: center;
}

/* ---------- Wide farm photo band ---------- */

/* ---------- Stats band with tibeb edges + emblem ---------- */


/* ---------- Selection + focus polish ---------- */::selection { background: var(--crimson); color: #fff; }:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; border-radius: 4px; }

/* ============================================================
   V19 · Interior-page components (content ported from the
   approved reference structure; brand palette + type)
   ============================================================ */.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
@media (max-width: 980px) {.grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) {.grid-3, .grid-4 { grid-template-columns: 1fr; } }.card .ic { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 1.2rem; background: var(--ivory); color: var(--forest); }.card.berry .ic { background: rgba(192, 57, 43, 0.09); color: var(--crimson); }.card h3 { font-family: var(--display); font-weight: 500; font-size: var(--t-h3); margin-bottom: 0.6rem; }.card p { color: var(--ink-60); font-size: var(--t-body-s); }.check-list { display: grid; gap: 0.9rem; margin-top: 1.5rem; }.check-list li { display: flex; gap: 0.9rem; align-items: flex-start; color: var(--ink-60); }.check-list li b { color: var(--ink); }.check-list .ck { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--ivory); color: var(--forest); display: grid; place-items: center; font-size: var(--t-label); font-weight: 700; margin-top: 2px; }.page-cta {
  background: linear-gradient(120deg, var(--forest), var(--forest-soft)); color: var(--cream);
  border-radius: var(--radius-lg); padding: clamp(2rem, 3.5vw, 2.8rem) clamp(1.8rem, 4vw, 3.5rem);
  display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center;
  position: relative; overflow: hidden;
  width: min(100%, 960px); margin-inline: auto;
}.page-cta::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='8'%3E%3Cpath d='M10 0l4 4-4 4-4-4z' fill='%23C8962F' opacity='.5'/%3E%3C/svg%3E");
  background-repeat: repeat-x; }.page-cta h2 { font-family: var(--display); font-weight: 500; font-size: var(--t-h2); line-height: 1.15; }.page-cta p { margin-top: 0.8rem; color: rgba(244, 239, 227, 0.78); max-width: 46ch; }.btn-white { background: #fff; color: var(--forest); border: 1px solid #fff; }.btn-white:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
@media (max-width: 760px) {.page-cta { grid-template-columns: 1fr; } }.use-case { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 320px; display: flex; align-items: flex-end; padding: 1.8rem; color: var(--cream); box-shadow: var(--shadow-soft); transition: transform 0.25s ease, box-shadow 0.25s ease; }.use-case:hover { transform: translateY(-6px); box-shadow: var(--shadow); }.use-case .bg { position: absolute; inset: 0; }.use-case .bg img { width: 100%; height: 100%; object-fit: cover; }.use-case .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 32, 26, 0.05) 25%, rgba(22, 32, 26, 0.88)); }.use-case .inner { position: relative; }.use-case h3 { font-family: var(--display); font-size: 1.4rem; font-weight: 500; margin-bottom: 0.35rem; }.use-case p { font-size: var(--t-meta); opacity: 0.85; }.fineprint { margin-top: 1.1rem; font-size: var(--t-small); color: var(--ink-40); font-style: italic; }.spec-pill { margin: 1.1rem auto 0; display: table; background: var(--forest); color: var(--cream); border-radius: 999px; padding: 0.6rem 1.3rem; font-size: var(--t-note); font-weight: 600; letter-spacing: 0.03em; }.partner-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.2rem; align-items: start; }
@media (max-width: 900px) {.partner-grid { grid-template-columns: 1fr; } }.form-card { background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow); padding: clamp(1.8rem, 4vw, 2.8rem); }.contact-card { background: var(--forest); color: var(--cream); border-radius: var(--radius-lg); padding: clamp(1.8rem, 3.5vw, 2.5rem); display: grid; gap: 1.4rem; }.contact-card h3 { font-family: var(--display); font-weight: 500; font-size: 1.35rem; }.contact-line { display: flex; gap: 0.9rem; align-items: center; font-size: var(--t-body-s); }.contact-line .ic { width: 42px; height: 42px; border-radius: var(--radius-sm); background: rgba(244, 239, 227, 0.1); color: var(--gold); display: grid; place-items: center; flex: none; }.contact-line small { display: block; font-size: var(--t-tag); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; }.contact-card .note { font-size: var(--t-meta); opacity: 0.7; border-top: 1px solid rgba(244, 239, 227, 0.14); padding-top: 1.2rem; }

/* Wide real-photo band with caption tag (interior pages) */.photo-band { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }.photo-band img { width: 100%; height: auto; display: block; }.photo-band .tag { position: absolute; bottom: 1rem; left: 1rem; background: rgba(251, 250, 246, 0.92); backdrop-filter: blur(6px); border-radius: 999px; padding: 0.5rem 1rem; font-size: var(--t-tiny); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--forest); }

/* ---------- Widescreen ---------- */
@media (min-width: 1800px) {:root { --maxw: 1360px; --section-y: clamp(6rem, 8vw, 11rem); }.wrap-wide { width: min(100% - 2 * var(--gutter), 1640px); }
}

/* ============================================================
   V12 · Cohesion pass: woven-page construction per the
   homepage-direction reference. Overlapping panels, photo
   bleeds, arch frames, hero pattern rail. No more flat bands.
   ============================================================ */

/* (v14) Watermark texture removed: it read as noise at scale and broke the
   Apple-calm restraint. Cream stays clean; pattern lives only in the tibeb bands. */

/* ---------- Hero: pattern rail + AI circuit accent ---------- */.hero-rail {
  position: absolute; top: 0; bottom: 0; right: 0; width: 62px; z-index: 3;
  background-color: var(--forest);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='62' height='96'%3E%3Cpath d='M10 0v96M52 0v96' stroke='%23C8962F' stroke-width='1' opacity='.5'/%3E%3Cpath d='M31 10l9 9-9 9-9-9z' fill='none' stroke='%23C8962F' stroke-width='1.1'/%3E%3Cpath d='M31 16l3 3-3 3-3-3z' fill='%23C0392B'/%3E%3Cpath d='M31 52l6 6-6 6-6-6z' fill='none' stroke='%23C8962F' stroke-width='1'/%3E%3Cpath d='M31 78l4 4-4 4-4-4z' fill='%23C8962F' opacity='.8'/%3E%3C/svg%3E");
  background-repeat: repeat-y; background-position: center top;
}.hero-rail .rail-label {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: var(--t-mini); font-weight: 700; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold); background: var(--forest); padding: 1rem 0.35rem;
  white-space: nowrap;
}
@media (max-width: 1100px) {.hero-rail { display: none; } }.hero-circuit {
  position: absolute; z-index: 2; pointer-events: none;
  top: 9%; right: 7%; width: clamp(320px, 37vw, 580px); opacity: 0.55;
}.hero-circuit circle, .hero-circuit path { stroke: var(--gold); fill: none; }.hero-circuit .node { fill: var(--gold); stroke: none; }
@media (max-width: 1100px) {.hero-circuit { display: none; } }

/* ---------- Values band: forest panel over photo bleed ---------- */



/* ---------- Heritage: copy · arch stage · quote card ---------- */.arch {
  position: relative; border-radius: 999px 999px var(--radius-lg) var(--radius-lg);
  background: radial-gradient(circle at 50% 34%, var(--forest-soft), var(--forest) 76%);
  aspect-ratio: 3 / 4.1; display: grid; place-items: center; overflow: hidden;
  box-shadow: var(--shadow);
}.arch::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(200, 150, 47, 0.4);
  border-radius: 999px 999px calc(var(--radius-lg) - 7px) calc(var(--radius-lg) - 7px); pointer-events: none; }.arch::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='10'%3E%3Cpath d='M0 7L6 3l6 4 6-4 6 4' fill='none' stroke='%23C8962F' stroke-width='1' opacity='.5'/%3E%3C/svg%3E");
  background-repeat: repeat-x; }.arch img { width: 74%; filter: drop-shadow(0 30px 34px rgba(10, 18, 13, 0.5)); }

@media (max-width: 640px) {.arch { max-width: 300px; margin-inline: auto; }
}

/* ---------- Premium: icons + berry stage ---------- */


/* ---------- Ripen visual: melt the white studio ground into the band ---------- */.play-box .play-poster, .play-box canvas { mix-blend-mode: multiply; }

/* ============================================================
   V17 · The Growing Cycle: pinned photoreal journey
   (flower -> ripe -> split), scroll-scrubbed Higgsfield frames.
   Section bg matches the generated footage bg exactly.
   ============================================================ */
/* bg = exact tone sampled from the extracted footage frames (rgb 240,230,218).
   Sticky (not GSAP pin): geometry-proof, no pin-spacer measurement drift.
   z-index below .vband2 so the berry passes UNDER the green card at the seam. */.journey { padding: 0; background: var(--cream); position: relative; z-index: 1; height: 340vh; }.vband2 { z-index: 4; }.journey-pin { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {.journey { height: auto; }.journey-pin { position: relative; height: auto; padding-block: 4rem; } }.no-js .journey { height: auto; }.no-js .journey-pin { position: relative; height: auto; padding-block: 4rem; }.journey-grid { display: grid; grid-template-columns: minmax(300px, 430px) minmax(320px, 540px); justify-content: center; align-items: center; gap: clamp(2rem, 5vw, 5.5rem); width: min(100% - 2 * var(--gutter), 1240px); }.j-copy { display: grid; gap: 0.85rem; align-content: center; }.j-label { font-size: var(--t-tiny); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--crimson); }.j-title { font-family: var(--display); font-weight: 500; font-size: var(--t-h2); line-height: 1.12; min-height: 2.5em; color: var(--ink); }.j-sub { color: var(--ink-60); max-width: 32ch; min-height: 3.4em; }.j-copy .swap { transition: opacity 0.3s ease, transform 0.3s ease; }.j-copy .swap.out { opacity: 0; transform: translateY(10px); }.ripeness { display: grid; gap: 0.55rem; margin-top: 0.7rem; max-width: 250px; }.ripeness .bar { height: 6px; border-radius: 99px; background: rgba(30, 58, 43, 0.12); overflow: hidden; }.ripeness .fill { height: 100%; width: 0%; border-radius: 99px; background: linear-gradient(90deg, #7FA86B, var(--gold), var(--crimson)); }.ripeness .pct { font-size: var(--t-label); font-weight: 700; letter-spacing: 0.1em; color: var(--ink-60); }.j-stage { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 1; }.j-stage .j-poster, .j-stage canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  -webkit-mask-image: radial-gradient(ellipse 74% 74% at 50% 50%, #000 44%, transparent 86%);
          mask-image: radial-gradient(ellipse 74% 74% at 50% 50%, #000 44%, transparent 86%);
}.j-callout { position: absolute; display: flex; align-items: center; gap: 0.6rem; opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; z-index: 2; }.j-callout.show { opacity: 1; transform: none; }.j-callout .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--crimson); box-shadow: 0 0 0 5px rgba(192, 57, 43, 0.15); flex: none; }.j-callout .txt { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-soft); border-radius: var(--radius-sm); padding: 0.55rem 0.9rem; font-size: var(--t-small); line-height: 1.35; color: var(--ink-60); text-align: left; }.j-callout .txt b { display: block; color: var(--forest); font-size: var(--t-note); }.journey .scroll-cue { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); }
@media (max-width: 900px) {.journey-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 0.8rem; padding-block: 3.5rem 7.5rem; }.j-copy { order: 2; justify-items: center; }.j-title { min-height: 0; }.j-sub { min-height: 0; }.j-stage { max-width: 330px; }.j-callout { display: none; }.ripeness { margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  /* Static fallback: green poster + stage-01 copy; motion-bound UI hidden. */.journey .ripeness, .j-callout { display: none; }.j-stage canvas { display: none; }
}.no-js .journey .ripeness, .no-js .j-callout { display: none; }

/* ---------- Hero stats (ring icons under the CTAs, per the mock) ---------- */.hero-stats { display: flex; gap: clamp(1rem, 2.2vw, 2.4rem); margin-top: clamp(1.7rem, 2.6vw, 2.7rem); }.hero-stats .stat { display: flex; flex-direction: column; align-items: center; text-align: center; }.hero-stats b, .hero-stats span { white-space: nowrap; }.hero-stats .ic {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1.5px solid rgba(160, 140, 90, 0.55);
  display: grid; place-items: center; margin-bottom: 0.55rem; color: var(--forest);
}.hero-stats .ic svg { width: 22px; height: 22px; }.hero-stats b { font-size: var(--t-mini); letter-spacing: 0.06em; color: var(--forest); font-weight: 700; text-transform: uppercase; }.hero-stats span { font-size: var(--t-mini); color: var(--ink-40); margin-top: 0.15em; }
/* Never hide the stats row: compact it instead so it fits short windows */
@media (max-height: 700px) and (min-width: 701px) {
  .hero-stats { margin-top: 1.1rem; gap: clamp(1rem, 2vw, 2rem); }
  .hero-stats .ic { width: 40px; height: 40px; margin-bottom: 0.35rem; }
  .hero-stats .ic svg { width: 17px; height: 17px; }
  .hero .display { font-size: clamp(2rem, 1rem + 2.6vw, 3.2rem); }
  .hero-sub { margin-top: 1rem; }
  .hero-actions { margin-top: 1.3rem; }
}
@media (max-width: 700px) {
  .hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem 0.6rem; margin-top: 1.25rem; max-width: 350px; }
  .hero-stats .stat { width: auto; display: grid; grid-template-columns: 36px auto; grid-template-rows: auto auto; column-gap: 0.55rem; align-items: center; text-align: left; }
  .hero-stats .ic { grid-row: 1 / 3; width: 36px; height: 36px; margin-bottom: 0; }
  .hero-stats .ic svg { width: 15px; height: 15px; }
  .hero-stats b { align-self: end; white-space: normal; }
  .hero-stats span { align-self: start; margin-top: 0; white-space: normal; }
}


/* ============================================================
   V13 · Clean concept adoption (from the approved Gemini
   mock): single-row values card on a photo band, and the
   story · photo · quote magazine strip. Brand palette only.
   ============================================================ */

/* ---------- Values card: heading left, 4 hairline columns right ---------- */.vband2 { position: relative; padding: clamp(3.5rem, 7vw, 6.5rem) 0; background: var(--forest); overflow: hidden; }.vband2 .bg { position: absolute; inset: 0; }.vband2 .bg img { width: 100%; height: 100%; object-fit: cover; }.vband2 .bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(24, 44, 33, 0.94) 0%, rgba(24, 44, 33, 0.8) 52%, rgba(22, 32, 26, 0.22) 88%, rgba(22, 32, 26, 0.3) 100%); }.vcard {
  position: relative; z-index: 2;
  width: min(100%, 1080px);
  background: rgba(30, 58, 43, 0.86); backdrop-filter: blur(10px);
  border: 1px solid rgba(200, 150, 47, 0.4); border-radius: var(--radius-lg);
  padding: clamp(2rem, 3.5vw, 3.4rem);
  display: flex; gap: clamp(2rem, 3.5vw, 3.4rem); align-items: center;
  box-shadow: 0 26px 55px rgba(10, 18, 13, 0.45);
  transition: border-color 0.4s ease;
}.vcard:hover { border-color: rgba(200, 150, 47, 0.65); }.vcard-left { flex: 0 0 34%; }.vcard-left .tri { font-family: var(--display); font-size: clamp(1.7rem, 1.1rem + 1.5vw, 2.4rem); line-height: 1.16; letter-spacing: -0.015em; color: var(--cream); white-space: nowrap; }
@media (max-width: 1199px) {.vcard-left .tri { white-space: normal; } }.vcard-left .tri .g { color: var(--gold); }.vcard-left .tri .r { color: var(--crimson); }.vcard-left .tri::after { content: ""; display: block; width: 34px; height: 2px; background: var(--gold); margin-top: 1.1rem; border-radius: 1px; }.vcard-left p { margin-top: 1.2rem; color: rgba(244, 239, 227, 0.72); font-size: 0.98rem; max-width: 34ch; }.vcard-cols { flex: 1; display: flex; }.vcol { flex: 1; padding: 0 clamp(1rem, 1.8vw, 1.7rem); border-left: 1px solid rgba(244, 239, 227, 0.12); transition: transform 0.35s ease; }.vcol:first-child { border-left: 0; padding-left: 0; }.vcol:hover { transform: translateY(-4px); }.vcol .ic { color: var(--gold); margin-bottom: 1.1rem; }.vcol h3 { font-family: var(--sans); font-size: var(--t-tiny); letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 0.65rem; white-space: nowrap; }.vcol p { color: rgba(244, 239, 227, 0.75); font-size: var(--t-meta); line-height: 1.7; }
@media (max-width: 1100px) {.vcard { flex-direction: column; align-items: flex-start; }.vcard-left { flex: none; }.vcard-cols { flex-wrap: wrap; gap: 1.6rem 0; width: 100%; }.vcol { flex: 0 0 50%; border-left: 0; padding: 0 1.5rem 0 0; }
}
@media (max-width: 600px) {.vcol { flex: 0 0 100%; padding: 0; } }

/* ---------- Heritage magazine strip: story · photo · quote ---------- */.heritage-strip {
  display: grid; grid-template-columns: 1.1fr 0.85fr 360px;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow); background: var(--ivory);
}.h-story { padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.8rem, 3.5vw, 3.2rem); display: flex; flex-direction: column; justify-content: center; }.h-sub { font-size: var(--t-tiny); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 1.5rem; }.h-sub .g { color: var(--forest); display: block; margin-bottom: 0.3rem; }.h-sub .r { color: var(--crimson); display: block; }.h-story .desc { margin: 1.3rem 0 2.2rem; color: var(--ink-60); max-width: 44ch; }.btn-link {
  display: inline-flex; align-items: center; gap: 0.9rem;
  color: var(--forest); font-weight: 700; font-size: var(--t-small); letter-spacing: 0.16em; text-transform: uppercase;
  align-self: flex-start;
}.btn-link .arrow {
  width: 34px; height: 34px; border: 1px solid var(--forest); border-radius: 50%;
  display: grid; place-items: center; position: relative; overflow: hidden;
  transition: transform 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}.btn-link .arrow::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--forest); transform: scale(0); transition: transform 0.35s ease; z-index: -1; }.btn-link:hover .arrow { color: var(--cream); transform: translateX(4px); }.btn-link:hover .arrow::before { transform: scale(1); }.h-photo { position: relative; min-height: 440px; background: #fff; }.h-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 25%; }.h-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--ivory), transparent 16%, transparent 84%, rgba(30, 58, 43, 0.45) 100%); }.h-quote { background: var(--forest); color: var(--cream); padding: clamp(2.5rem, 4vw, 3.5rem) clamp(1.8rem, 2.5vw, 2.5rem); display: flex; flex-direction: column; justify-content: center; }.h-quote .qmark { font-family: var(--display); font-size: 5.5rem; line-height: 0; color: var(--gold); opacity: 0.85; margin-bottom: 2.2rem; }.h-quote blockquote { font-family: var(--display); font-style: italic; font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem); line-height: 1.42; }.h-quote .sig { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(244, 239, 227, 0.14); }.h-quote .sig .am { font-family: var(--ethiopic); color: rgba(244, 239, 227, 0.88); font-size: 1.15rem; display: block; margin-bottom: 0.5rem; }.h-quote .sig .en { font-size: var(--t-tag); letter-spacing: 0.24em; color: var(--gold); text-transform: uppercase; font-weight: 700; }.heritage-outer { position: relative; }.heritage-outer .stamp { top: -2.2rem; right: 1.6rem; }
@media (max-width: 1100px) {.heritage-strip { grid-template-columns: 1fr 1fr; }.h-quote { grid-column: 1 / -1; }
}
@media (max-width: 720px) {.heritage-strip { grid-template-columns: 1fr; }.h-photo { min-height: 320px; }.heritage-outer .stamp { right: 0.6rem; }
}

/* V70: heritage strip, highlands portrait behind the copy (client mock).
   Desktop only: the photo spans the story + photo columns and the story sits
   on top with a cream fade, so the landscape flows behind the headline.
   Below 1100px the grid reverts to plain stacked columns (mobile stays safe). */
@media (min-width: 1101px) {
  .heritage-strip > * { grid-row: 1; }
  .h-photo { grid-column: 1 / 3; }
  .h-story { grid-column: 1 / 2; position: relative; z-index: 2;
    /* must reach alpha 0 AT the box edge: overshooting past 100% leaves a
       visible vertical seam where the overlay is clipped mid-fade */
    background: linear-gradient(90deg, #F4EFE3 0%, #F4EFE3 42%, rgba(244, 239, 227, 0.85) 64%, rgba(244, 239, 227, 0) 100%); }
  .h-quote { grid-column: 3 / 4; }
  .h-photo img { object-position: 78% 30%; }
  .h-photo::after { background: linear-gradient(90deg, transparent 84%, rgba(30, 58, 43, 0.35) 100%); }
}


/* ============================================================
   V25 · Spacing DNA from the client's Tailwind reference
   ============================================================ */

/* Offset-shadow photo frames (the "stacked paper" device) */.photo-band, .nc-ph { position: relative; }.photo-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(30, 58, 43, 0.1); border-radius: var(--radius-lg);
  transform: translate(12px, 12px); transition: transform 0.3s ease;
}.photo-band:hover::before { transform: translate(6px, 6px); }

/* Stat cards: aligned numeral zones, giant serif numerals, hover lift */.eco-stat { transition: transform 0.3s ease, box-shadow 0.3s ease; }.eco-stat:hover { transform: translateY(-8px); box-shadow: var(--shadow); }.eco-stat .big { font-size: clamp(3rem, 2.4rem + 1.6vw, 3.8rem); color: var(--crimson); min-height: 4.6rem; display: flex; align-items: center; justify-content: center; }.eco-stat .big.red { color: var(--crimson); }.eco-stat .lbl { font-size: var(--t-small); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0.9rem; }.eco-stat p { font-size: var(--t-note); color: var(--ink-40); max-width: 30ch; margin-inline: auto; }

/* Card hover lift consistency */.card { transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }.card:hover { border-color: rgba(192, 57, 43, 0.12); }

/* ============================================================
   V26 · Seed-style curved sheets + the "alive" glass showcase
   ============================================================ */
/* Big rounded sheet corners where home sections change background */.curve-top {
  border-top-left-radius: clamp(28px, 4vw, 48px);
  border-top-right-radius: clamp(28px, 4vw, 48px);
  margin-top: calc(-1 * clamp(28px, 4vw, 48px));
  position: relative; z-index: 2;
}

/* The alive showcase: atmospheric full-bleed bg, frosted glass panel,
   self-animating arc (runs regardless of scroll), dotted tag callouts */.alive { position: relative; overflow: hidden; background: var(--forest); padding-block: clamp(4rem, 7vw, 6.5rem); }.alive-bg { position: absolute; inset: -4%; }.alive-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); }.alive-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(10, 17, 12, 0.62), rgba(10, 17, 12, 0.34)); }.alive-glass {
  position: relative; z-index: 2;
  background: rgba(251, 250, 246, 0.6);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 30px 70px rgba(10, 18, 13, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  border-radius: clamp(28px, 4vw, 48px);
  padding: clamp(2rem, 4vw, 3.6rem);
  display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(2rem, 4vw, 4rem); align-items: center;
}.alive-copy h2 { font-size: var(--t-h2); color: var(--ink); }.alive-chip {
  margin-top: 1.6rem; display: inline-flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  max-width: 100%;
  background: rgba(255, 255, 255, 0.65); border: 1px solid rgba(22, 32, 26, 0.1);
  border-radius: 16px; padding: 0.9rem 1.2rem; font-size: var(--t-body-s); color: var(--ink-60);
}.alive-chip b { font-family: var(--display); font-size: 1.9rem; color: var(--crimson); line-height: 1; }.alive-stage { position: relative; padding: clamp(0.5rem, 2vw, 1.5rem); }.alive-stage .arc { width: 100%; will-change: transform; animation: arc-float 7s ease-in-out infinite; filter: drop-shadow(0 26px 30px rgba(10, 18, 13, 0.3)); }
@keyframes arc-float {0%, 100% { transform: translateY(0) rotate(0deg); }50% { transform: translateY(-12px) rotate(-1.2deg); } }.a-tag {
  position: absolute; max-width: 23ch; font-size: var(--t-label); line-height: 1.35; color: var(--ink-60);
  background: rgba(251, 250, 246, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5); border-radius: var(--radius-sm); padding: 0.55rem 0.8rem;
  box-shadow: 0 6px 18px rgba(10, 18, 13, 0.12);
}.a-tag b { display: block; font-size: var(--t-tag); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest); margin-bottom: 0.2rem; }.a-tag::after { content: ""; position: absolute; width: clamp(30px, 4vw, 60px); border-top: 2px dotted rgba(30, 58, 43, 0.45); top: 1.1em; }.a-tag.t1 { left: 18%; bottom: -2%; text-align: left; }.a-tag.t1::after { right: 100%; margin-right: 10px; width: clamp(12px, 1.5vw, 18px); }.a-tag.t2 { right: 27%; top: 4%; text-align: left; }.a-tag.t2::after { left: 100%; margin-left: 8px; }
@media (max-width: 900px) {.alive-glass { grid-template-columns: 1fr; } }
/* Desktop: wrapper is transparent so the two tags float as absolute callouts */
.a-legend { display: contents; }
/* Tablet/phone: tags stay floating and keep pointing at their berry, just smaller and tucked into the empty corners */
@media (max-width: 900px) {
  .a-tag { font-size: var(--t-tag); padding: 0.42rem 0.6rem; max-width: 44vw; box-shadow: 0 4px 12px rgba(10, 18, 13, 0.14); }
  .a-tag b { font-size: var(--t-micro); letter-spacing: 0.1em; }
  .a-tag.t1 { left: 30%; bottom: 1%; }
  .a-tag.t2 { right: 30%; top: 1%; }
  .a-tag::after { width: clamp(16px, 5vw, 40px); }
}
@media (max-width: 520px) {
  .a-tag { font-size: var(--t-mini); max-width: 46vw; padding: 0.38rem 0.55rem; }
  .a-tag b { font-size: var(--t-micro); }
  .a-tag.t1 { left: 33%; bottom: 0%; }
  .a-tag.t2 { right: 33%; top: 0%; }
}
@media (prefers-reduced-motion: reduce) {.alive-stage .arc { animation: none; } }

/* ============================================================
   V33: GLASS COMPARISON (blur over photo), ABOUT EDITORIAL, MOTION
   ============================================================ */

/* Comparison table floating on a blurred photograph of the growing hall */.compare-hero { position: relative; overflow: hidden; }.compare-hero .ch-bg { position: absolute; inset: 0; }.compare-hero .ch-bg img { width: 100%; height: 100%; object-fit: cover; scale: 1.12; }
/* Parallaxed media oversizes via the scale property so GSAP translate never exposes edges */.photo-band img[data-parallax], .ph2-media img[data-parallax] { scale: 1.16; }.compare-hero .ch-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14, 24, 18, 0.86), rgba(14, 24, 18, 0.58) 45%, rgba(14, 24, 18, 0.88)); }.compare-hero .wrap-narrow { position: relative; z-index: 1; }.compare-hero .section-title { color: #fff; }.compare-hero .lead { color: rgba(244, 239, 227, 0.72); }.compare-hero .eyebrow { color: var(--gold); }.compare-hero .fineprint { color: rgba(244, 239, 227, 0.42); }.glass-table {
  border-radius: var(--radius-lg); border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(251, 250, 246, 0.07);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 34px 70px rgba(6, 12, 8, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  overflow: hidden; overflow-x: auto;
}.glass-table .compare th, .glass-table .compare td { border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(244, 239, 227, 0.82); background: none; }.glass-table .compare thead th { background: rgba(255, 255, 255, 0.06); color: rgba(244, 239, 227, 0.6); border-bottom: 1px solid rgba(255, 255, 255, 0.3); }.glass-table .compare thead th.us { background: rgba(200, 150, 47, 0.22); color: #F0D9A8; }.glass-table .compare td.us { background: rgba(255, 255, 255, 0.055); color: #fff; font-weight: 700; box-shadow: inset 1px 0 0 rgba(255,255,255,.14), inset -1px 0 0 rgba(255,255,255,.14); }.glass-table .compare tbody th { color: rgba(244, 239, 227, 0.58); font-weight: 600; }.glass-table .compare tbody tr:hover td:not(.us) { background: rgba(255, 255, 255, 0.03); }.glass-table .compare tr:last-child th, .glass-table .compare tr:last-child td { border-bottom: 0; }

/* About: large serif manifesto */.manifesto { text-align: center; }.manifesto .big { font-family: var(--display); font-weight: 500; font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3rem);
  line-height: 1.3; color: var(--forest); text-wrap: balance; max-width: 30ch; margin-inline: auto; }.manifesto .big em { font-style: italic; color: inherit; }.manifesto .tibeb-hairline { margin: 0 auto 1.6rem; }

/* About: the story in four hairline chapters (echoes the values card language) */.story-cols { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: var(--head-gap); border-top: 1px solid var(--line); }.story-col { padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.2rem, 2vw, 1.8rem) 0.4rem; border-left: 1px solid var(--line); }.story-col:first-child { border-left: 0; padding-left: 0; }.story-col .ph { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: 1.3rem; box-shadow: var(--shadow-soft); }.story-col .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }.story-col:hover .ph img { transform: scale(1.04); }.story-col .no { font-family: var(--display); font-style: italic; font-size: 1.6rem; color: var(--gold); line-height: 1; }.story-col h3 { margin-top: 0.9rem; font-family: var(--display); font-weight: 500; font-size: 1.25rem; color: var(--forest); }.story-col p { margin-top: 0.6rem; font-size: var(--t-body-s); line-height: 1.65; color: var(--ink-60); }
@media (max-width: 980px) {.story-cols { grid-template-columns: 1fr 1fr; border-top: 0; }.story-col { border-top: 1px solid var(--line); }.story-col:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) {.story-cols { grid-template-columns: 1fr; }.story-col { border-left: 0; padding-left: 0; }
}

/* About: forest quote band */.quote-band { background: var(--forest); color: var(--cream); text-align: center; position: relative; overflow: hidden; padding-block: clamp(5rem, 9vw, 8rem); }.quote-band .qb-bg { position: absolute; inset: 0; }.quote-band .qb-bg img { width: 100%; height: 100%; object-fit: cover; scale: 1.1; }.quote-band .qb-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16, 28, 21, 0.88), rgba(16, 28, 21, 0.72) 50%, rgba(16, 28, 21, 0.9)); }.quote-band::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(60% 90% at 50% 110%, rgba(200, 150, 47, 0.12), transparent 70%); }.quote-band .wrap { position: relative; z-index: 2; }.quote-band blockquote { font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.7rem); line-height: 1.35; max-width: 24ch; margin-inline: auto; text-wrap: balance; }.quote-band blockquote .g { color: var(--gold); }.quote-band .who { margin-top: 1.4rem; letter-spacing: 0.16em; text-transform: uppercase; font-size: var(--t-tiny); font-weight: 700; color: var(--gold); }.quote-band .ethiopic { margin-top: 0.5rem; color: rgba(244, 239, 227, 0.5); font-size: var(--t-body-s); }


/* ============ V35: review fix batch ============ */
/* Spacing lives in the system, not inline */.eyebrow + .section-title, .eyebrow + h1, .section-head .eyebrow + .section-title { margin-top: 0.9rem; }

/* Home premium cards */.premium-cards { margin-top: var(--head-gap); }.premium-cards .card p { font-size: var(--t-body-s); }

/* Stats band: tighter, structured, no floating emblem */


/* About arch: glossed, lit, centered */.arch { background: radial-gradient(60% 42% at 50% 40%, rgba(200, 150, 47, 0.16), transparent 68%), linear-gradient(165deg, #27493B, #142218);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), var(--shadow); display: grid; place-items: center; }

/* (growing-cycle labels now stay floating + pointing at all sizes; see the .a-tag rules above) */


/* Technology: the control-layer glass panel (dark ground, live metrics) */
.glass-section { padding-block: clamp(4rem, 7vw, 6.5rem); }
.glass-section .glass-panel { border-radius: var(--radius-lg); border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(251, 250, 246, 0.07); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.22); padding: clamp(1.6rem, 3.5vw, 2.6rem); }
.ctrl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.4vw, 2rem); }
.ctrl-cell { text-align: center; display: grid; justify-items: center; gap: 0.45rem; padding: 0.4rem 0.2rem; }
.ctrl-cell + .ctrl-cell { position: relative; }
.ctrl-ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--gold);
  border: 1px solid rgba(200, 150, 47, 0.5); background: rgba(200, 150, 47, 0.08); }
.ctrl-ic svg { width: 20px; height: 20px; }
.ctrl-val { font-family: var(--display); font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1; color: #fff; font-weight: 500; }
.ctrl-val .unit { font-family: var(--sans); font-size: 0.5em; font-weight: 600; color: rgba(244, 239, 227, 0.7); margin-left: 0.15em; }
.ctrl-lbl { font-size: var(--t-label); letter-spacing: 0.04em; color: rgba(244, 239, 227, 0.66); text-transform: uppercase; }
.ctrl-foot { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; align-items: center; justify-content: center; gap: 0.6rem; font-size: var(--t-note); color: rgba(244, 239, 227, 0.66); }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #6FCF7F; box-shadow: 0 0 0 0 rgba(111, 207, 127, 0.6); animation: live-pulse 2s ease-out infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(111, 207, 127, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(111, 207, 127, 0); } 100% { box-shadow: 0 0 0 0 rgba(111, 207, 127, 0); } }
@media (max-width: 720px) { .ctrl-grid { grid-template-columns: 1fr 1fr; gap: 1.4rem 1rem; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* Sustainability: light-ground glass with footprint-saving bars */
.glass-section.light .ch-bg::after { background: linear-gradient(180deg, rgba(251, 250, 246, 0.72), rgba(251, 250, 246, 0.5) 45%, rgba(251, 250, 246, 0.78)); }
.glass-section.light .section-title { color: var(--forest); text-shadow: 0 1px 0 rgba(251, 250, 246, 0.5); }
.glass-section.light .lead { color: var(--ink-60); }
.glass-section.light .eyebrow { color: var(--crimson); }
.glass-section.light .glass-panel { background: rgba(251, 250, 246, 0.5); border-color: rgba(255, 255, 255, 0.6); }
.fp-list { display: grid; gap: clamp(1.2rem, 2.6vw, 1.8rem); }
.fp-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.5rem; }
.fp-name { font-weight: 700; color: var(--forest); font-size: var(--t-body-s); }
.fp-fig { font-family: var(--display); font-style: italic; color: var(--crimson); font-size: 1.02rem; }
.fp-track { height: 12px; border-radius: 999px; background: rgba(30, 58, 43, 0.1); overflow: hidden; }
.fp-fill { height: 100%; border-radius: 999px; transform-origin: left center; transform: scaleX(0);
  background: linear-gradient(90deg, #7FA86B, var(--gold)); }
.fp-foot { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid rgba(30, 58, 43, 0.12);
  text-align: center; font-size: var(--t-small); color: var(--ink-40); }
.no-js .fp-fill, .glass-section.light .fp-fill.filled { transform: scaleX(var(--fp, 1)); transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1); }

/* ============ V38: glass customiser, premium sliders, CTA gloss, step form ============ */

/* Customiser on glass over photo (same language as the comparison) */
.custom-hero .glass-panel {
  border-radius: var(--radius-lg); border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(251, 250, 246, 0.07);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  padding: clamp(1.6rem, 3.5vw, 2.8rem);
}
.custom-hero .custom-demo { margin-top: 0; }
.custom-hero .custom-controls label { color: var(--cream); display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.custom-hero .custom-controls output { color: var(--gold); font-weight: 700; }
.custom-hero .custom-note { color: rgba(244, 239, 227, 0.62); }
.custom-hero .custom-stage { background: none; }
.custom-hero .spec-pill { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); color: var(--cream); }

/* Premium range sliders (visible, clean, brand colors) */
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 26px; background: none; cursor: pointer; margin: 0.5rem 0 1.3rem;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 7px; border-radius: 99px;
  background: linear-gradient(90deg, #7FA86B, var(--gold), var(--crimson));
  box-shadow: inset 0 1px 2px rgba(10, 18, 13, 0.25);
}
input[type="range"]::-moz-range-track {
  height: 7px; border-radius: 99px;
  background: linear-gradient(90deg, #7FA86B, var(--gold), var(--crimson));
  box-shadow: inset 0 1px 2px rgba(10, 18, 13, 0.25);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; margin-top: -8.5px;
  background: var(--cream); border: 2px solid var(--forest);
  box-shadow: 0 3px 10px rgba(10, 18, 13, 0.35), inset 0 1px 0 #fff;
  transition: transform 0.15s ease;
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--cream); border: 2px solid var(--forest);
  box-shadow: 0 3px 10px rgba(10, 18, 13, 0.35);
}
input[type="range"]:hover::-webkit-slider-thumb, input[type="range"]:focus-visible::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 99px; }

/* The closer: gloss on the CTA band */
.page-cta { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), var(--shadow-lg); }
.page-cta::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 120% at 12% -20%, rgba(255, 255, 255, 0.14), transparent 55%); }

/* Step form (partner) */
.form-progress { display: flex; gap: 0.5rem; margin-bottom: 1.6rem; }
.form-progress span { flex: 1; height: 3px; border-radius: 99px; background: rgba(30, 58, 43, 0.12); transition: background 0.3s ease; }
.form-progress span.on { background: var(--gold); }
/* Wizard steps are direct children of the 2-col .form grid: span it, then grid the fields inside */
.form > .form-progress, .form > .form-step, .form > .form-success, .form > .hp { grid-column: 1 / -1; }
.form-step { display: none; }
.form-step.on { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; animation: stepin 0.35s ease; }
.form-step .full, .form-step .step-nav, .form-step [data-form-status] { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-step.on { grid-template-columns: 1fr; } }
@keyframes stepin { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.step-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.6rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chips label { cursor: pointer; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips .chip {
  display: inline-block; padding: 0.6rem 1.1rem; border-radius: 999px; font-size: var(--t-meta); font-weight: 600;
  border: 1.5px solid rgba(30, 58, 43, 0.25); color: var(--forest); background: #fff;
  transition: all 0.2s ease;
}
.chips input:checked + .chip { background: var(--forest); color: var(--cream); border-color: var(--forest); }
.chips input:focus-visible + .chip { outline: 2px solid var(--gold); outline-offset: 2px; }
.chips .chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.form-success { display: none; text-align: center; padding: 2.5rem 1.5rem; }
.form-success.on { display: block; animation: stepin 0.4s ease; }
.form-success .ck-circle {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 1.2rem; display: grid; place-items: center;
  background: var(--ivory); color: var(--forest); border: 1.5px solid rgba(30, 58, 43, 0.2);
}
.form-success h3 { font-family: var(--display); font-weight: 500; font-size: 1.7rem; color: var(--forest); }
.form-success p { margin-top: 0.7rem; color: var(--ink-60); max-width: 40ch; margin-inline: auto; }


/* Customiser rides the light sage backdrop: dark text, brighter glass */
.custom-hero .ch-bg::after { background: linear-gradient(180deg, rgba(251, 250, 246, 0.25), rgba(30, 58, 43, 0.12)); }
.custom-hero .section-title { color: var(--forest); }
.custom-hero .lead { color: var(--ink-60); }
.custom-hero .eyebrow { color: var(--crimson); }
.custom-hero .glass-panel { background: rgba(251, 250, 246, 0.5); border-color: rgba(255, 255, 255, 0.55); }
.custom-hero .custom-controls label { color: var(--ink); }
.custom-hero .custom-controls output { color: var(--crimson); }
.custom-hero .custom-note { color: var(--ink-60); }
.custom-hero .spec-pill { background: var(--forest); border: 0; color: var(--cream); }


/* Customiser header on the bright farm image: legible, one eyebrow language */
.custom-hero .ch-bg::after { background: linear-gradient(180deg, rgba(251, 250, 246, 0.82), rgba(251, 250, 246, 0.35) 45%, rgba(251, 250, 246, 0.15)); }
.custom-hero .section-title { color: var(--forest); text-shadow: 0 1px 0 rgba(251, 250, 246, 0.6); }
.custom-hero .lead { color: var(--ink); }


/* Legal prose */
.legal h3 { font-family: var(--display); font-weight: 500; font-size: 1.3rem; color: var(--forest); margin-top: 2.2rem; }
.legal h3:first-child { margin-top: 0; }
.legal p { margin-top: 0.7rem; color: var(--ink-60); }
.legal a { color: var(--crimson); text-decoration: underline; text-underline-offset: 3px; }


/* Products gallery + lightbox */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.8rem, 1.6vw, 1.4rem); }
.g-item { position: relative; display: block; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); aspect-ratio: 4 / 3; }
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
.g-item:hover img { transform: scale(1.05); }
.g-item .g-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem 1rem 0.8rem; font-size: var(--t-small); color: var(--cream);
  background: linear-gradient(transparent, rgba(22, 32, 26, 0.75)); opacity: 0; transition: opacity 0.3s ease; }
.g-item:hover .g-cap { opacity: 1; }
@media (max-width: 900px) { .gallery-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .gallery-grid { grid-template-columns: 1fr; } .g-item .g-cap { opacity: 1; } }

.lightbox { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; padding: 3vmin;
  background: rgba(16, 24, 18, 0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lightbox.on { display: grid; }
.lightbox img { max-width: 94vw; max-height: 88vh; border-radius: var(--radius-sm); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5); }
.lightbox .lb-close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255, 255, 255, 0.08); color: var(--cream); font-size: 1.3rem; cursor: pointer; display: grid; place-items: center; }
.lightbox .lb-cap { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(244, 239, 227, 0.8); font-size: var(--t-meta); }

/* Customiser: real berry states crossfade */
.custom-stage { position: relative; }
.custom-stage .state-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(0.985); transform-origin: 50% 52%; transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); will-change: opacity, transform; }
.custom-stage .state-img.on { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .custom-stage .state-img { transition: opacity 0.2s linear; transform: none; } .custom-stage .state-img.on { transform: none; } }

/* Live flavour readout: sweetness raises a real gloss on the berry, meters mirror the spec */
.custom-stage .berry-sheen { position: absolute; left: 50%; top: 43%; width: 44%; height: 30%; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none; opacity: 0.2; transition: opacity 0.5s ease; filter: blur(7px); mix-blend-mode: screen;
  background: radial-gradient(ellipse at 44% 32%, rgba(255, 252, 240, 0.95), rgba(255, 240, 214, 0.35) 52%, transparent 72%); }
@media (prefers-reduced-motion: reduce) { .custom-stage .berry-sheen { transition: none; } }
.flavour-meters { margin-top: 1.1rem; display: grid; gap: 0.75rem; max-width: 360px; }
.custom-hero .flavour-meters { margin-inline: auto; }
.fmeter-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.32rem; }
.fmeter-top span { font-size: var(--t-small); font-weight: 700; color: var(--forest); letter-spacing: 0.02em; }
.fmeter-top b { font-family: var(--display); font-style: italic; font-weight: 500; color: var(--crimson); font-size: var(--t-meta); }
.fmeter-track { height: 8px; border-radius: 999px; background: rgba(30, 58, 43, 0.12); overflow: hidden; }
.fmeter-fill { display: block; height: 100%; width: 50%; border-radius: 999px; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.fmeter-fill.sugar { background: linear-gradient(90deg, #EBD08A, var(--gold), var(--crimson)); }
.fmeter-fill.bite { background: linear-gradient(90deg, #9DBE86, #5E8C4E, var(--forest)); }


/* Four-across gallery on wide farms page */
@media (min-width: 901px) { .gallery-grid.four { grid-template-columns: repeat(4, 1fr); } }


/* ---------- Anatomy: the annotated berry (products, v58) ----------
   Glass chips + gold leaders that draw in on scroll. Distinct from the
   journey a-tags (dotted, dark) and the customiser: frosted rectangles,
   solid gradient leaders, floating berry with a breathing gloss. */
.anatomy .an-stage { position: relative; max-width: 1080px; margin: clamp(2.5rem, 5vw, 4rem) auto 0; padding: clamp(0.5rem, 2vw, 1.5rem) 0; }
.an-berry { position: relative; width: min(38%, 360px); margin: 0 auto; animation: anFloat 8s ease-in-out infinite alternate; }
.an-berry img { width: 100%; filter: drop-shadow(0 34px 44px rgba(30, 58, 43, 0.22)); }
.an-gloss { position: absolute; left: 20%; top: 24%; width: 32%; height: 26%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%); mix-blend-mode: screen; filter: blur(10px); opacity: 0.35; animation: anGloss 5.5s ease-in-out infinite alternate; pointer-events: none; }
@keyframes anFloat { from { transform: translateY(-5px); } to { transform: translateY(7px); } }
@keyframes anGloss { from { opacity: 0.2; transform: scale(0.95); } to { opacity: 0.5; transform: translate(5%, 4%) scale(1.06); } }
.an-tag { position: absolute; display: flex; align-items: center; z-index: 2; }
.an-tag.right { flex-direction: row-reverse; }
.an-chip { display: flex; flex-direction: column; gap: 2px; padding: 0.6rem 0.85rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5); border: 1px solid rgba(200, 150, 47, 0.35); box-shadow: var(--shadow-soft); max-width: 23ch; }
.an-chip b { font-size: var(--t-small); color: var(--forest); letter-spacing: 0.01em; }
.an-chip span { font-size: var(--t-tag); color: var(--ink-60); line-height: 1.45; }
.an-line { flex: none; width: clamp(36px, 6.5vw, 110px); height: 1.5px; position: relative; background: linear-gradient(90deg, rgba(200, 150, 47, 0.2), var(--gold)); transform-origin: left center; }
.an-tag.right .an-line { background: linear-gradient(270deg, rgba(200, 150, 47, 0.2), var(--gold)); transform-origin: right center; }
.an-line::after { content: ""; position: absolute; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); transform: translateY(-50%); }
.an-tag.left .an-line::after { right: -2px; }
.an-tag.right .an-line::after { left: -2px; }
.an-tag.l1 { left: 4%; top: 6%; }
.an-tag.l2 { left: 0; top: 42%; }
.an-tag.l3 { left: 5%; top: 78%; }
.an-tag.r1 { right: 4%; top: 12%; }
.an-tag.r2 { right: 0; top: 46%; }
.an-tag.r3 { right: 5%; top: 80%; }
@media (max-width: 900px) {
  .an-chip { max-width: 19ch; padding: 0.5rem 0.7rem; }
  .an-line { width: clamp(22px, 4.5vw, 60px); }
}
@media (max-width: 640px) {
  .an-berry { width: 48%; }
  .an-chip { max-width: 12ch; padding: 0.4rem 0.55rem; border-radius: var(--radius-xs); }
  .an-chip b { font-size: var(--t-tag); }
  .an-chip span { display: none; } /* phone: label-only pills, subs return at tablet */
  .an-line { width: clamp(12px, 4vw, 26px); }
  /* labels sit in the fruit's empty zones: above the shoulders, beside the taper */
  .an-tag.l1 { left: 0; top: 2%; }
  .an-tag.l2 { left: 0; top: 44%; }
  .an-tag.l3 { left: 0; top: 78%; }
  .an-tag.r1 { right: 0; top: 7%; }
  .an-tag.r2 { right: 0; top: 58%; }
  .an-tag.r3 { right: 0; top: 90%; }
}
@media (prefers-reduced-motion: reduce) { .an-berry, .an-gloss { animation: none; } }

/* ---------- V63: About commitment arch, alive berry ----------
   Same life as the products anatomy berry: float + breathing gloss,
   plus a stronger gold halo so the cutout sits IN the arch, not on it. */
.arch { background: radial-gradient(58% 44% at 50% 42%, rgba(200, 150, 47, 0.28), transparent 70%), linear-gradient(165deg, #27493B, #142218); }
.arch img { animation: anFloat 8s ease-in-out infinite alternate; }
.arch-gloss { position: absolute; left: 33%; top: 28%; width: 26%; height: 20%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 70%); mix-blend-mode: screen; filter: blur(9px); opacity: 0.35; animation: anGloss 5.5s ease-in-out infinite alternate; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .arch img, .arch-gloss { animation: none; } }

/* Footprint panel: sliced growth arc above the bars (v67) */
.fp-arc { display: flex; justify-content: center; margin-bottom: clamp(1.2rem, 3vw, 2rem); }
.fp-arc img { width: min(46%, 300px); filter: drop-shadow(0 18px 26px rgba(30, 58, 43, 0.25)); animation: anFloat 9s ease-in-out infinite alternate; }
@media (max-width: 640px) { .fp-arc img { width: 62%; } }
@media (prefers-reduced-motion: reduce) { .fp-arc img { animation: none; } }

/* ---------- V68/V69: About commitment, hand-held berries (arch retired) ----------
   The drop shadow and wrist fade are BAKED INTO hand-berries.webp (NOTES v69).
   Any filter/mask/animation on this img forces a composited layer, and Chromium
   brightens a composited layer's bounding box when it sits above a backdrop-filter
   element (faint white veil). Keep this img plain. */
.hand-hold { display: flex; justify-content: center; align-items: center; }
.hand-hold img { width: min(100%, 524px); }
@media (max-width: 640px) { .hand-hold img { width: 95%; } }

/* ---------- V70: Our Farms, the growing cycle (annotated spiral) ----------
   Same annotation discipline as the products anatomy berry: chips + leaders live
   in % coordinates over a fixed-aspect stage, so labels float and point at the
   fruit at EVERY width (v54 lesson, no dead legends). The img is painted BELOW
   the chips' backdrop-filter, so the veil bug does not apply here (v69 lesson
   only bites when the composited img sits above a backdrop-filter element). */
.gc-band { position: relative; overflow: hidden; background:
  radial-gradient(52% 46% at 50% 38%, rgba(200, 150, 47, 0.14), transparent 70%),
  linear-gradient(168deg, #24443A 0%, #16281E 55%, #101D15 100%); }
.gc-band .section-head .eyebrow { color: var(--gold); }
.gc-band .section-title { color: #F7F3E8; }
.gc-band .lead { color: rgba(244, 239, 227, 0.72); }
.gc-stage { position: relative; width: min(100%, 860px); aspect-ratio: 1374 / 1053;
  margin: clamp(2rem, 5vw, 3.4rem) auto 0; }
.gc-stage > img { width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 26px 34px rgba(5, 10, 7, 0.55));
  animation: anFloat 10s ease-in-out infinite alternate; }
.gc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.gc-svg line { stroke: rgba(200, 150, 47, 0.65); stroke-width: 1.1px; }
.gc-svg circle { fill: var(--gold); }
.gc-gloss { position: absolute; left: 61%; top: 62%; width: 15%; height: 13%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 70%);
  mix-blend-mode: screen; filter: blur(10px); opacity: 0.3; pointer-events: none;
  animation: anGloss 6s ease-in-out infinite alternate; }
.gc-chip { position: absolute; transform: translate(-50%, -50%); max-width: 17ch;
  background: rgba(12, 21, 15, 0.55); border: 1px solid rgba(200, 150, 47, 0.35);
  border-radius: 12px; padding: 0.5rem 0.75rem; backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  box-shadow: 0 10px 26px rgba(4, 8, 5, 0.4); animation: gcBob 7s ease-in-out infinite alternate; }
.gc-chip:nth-child(odd) { animation-delay: -3.5s; }
.gc-chip i { display: block; font-family: var(--font-serif); font-style: italic;
  font-size: var(--t-micro); color: var(--gold); line-height: 1; }
.gc-chip b { display: block; font-size: var(--t-body-s); color: #FBFAF6; font-weight: 600; margin-top: 0.15rem; }
.gc-chip span { display: block; font-size: var(--t-micro); color: rgba(244, 239, 227, 0.62);
  line-height: 1.35; margin-top: 0.15rem; }
@keyframes gcBob { from { transform: translate(-50%, calc(-50% - 4px)); } to { transform: translate(-50%, calc(-50% + 4px)); } }
@media (max-width: 640px) {
  .gc-chip { padding: 0.35rem 0.55rem; border-radius: 9px; max-width: 15ch; }
  .gc-chip span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .gc-stage > img, .gc-gloss, .gc-chip { animation: none; } }

/* V71: nav dropdown (About Us > Our Story / Meet the Team) */
.nav-item.has-sub { position: relative; display: flex; align-items: center; }
.nav-item.has-sub > a { display: inline-flex; align-items: center; gap: 0.35rem; }
.nav-item .caret { opacity: 0.55; transition: transform 0.25s ease; }
.nav-item.has-sub:hover .caret, .nav-item.has-sub:focus-within .caret { transform: rotate(180deg); }
.sub-menu { position: absolute; top: calc(100% + 12px); left: 50%; min-width: 185px;
  transform: translateX(-50%) translateY(6px);
  background: rgba(251, 250, 246, 0.98); border: 1px solid rgba(30, 58, 43, 0.1);
  border-radius: 14px; box-shadow: 0 18px 44px rgba(22, 32, 26, 0.16);
  padding: 0.5rem; display: flex; flex-direction: column; gap: 0.1rem;
  opacity: 0; visibility: hidden; transition: opacity 0.22s ease, transform 0.22s ease; }
.sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-item.has-sub:hover .sub-menu, .nav-item.has-sub:focus-within .sub-menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.sub-menu a { padding: 0.55rem 0.85rem; border-radius: 9px; white-space: nowrap; }
.sub-menu a:hover { background: var(--ivory); }
@media (max-width: 1150px) {
  .nav-item.has-sub { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .nav-item .caret { display: none; }
  .sub-menu { position: static; transform: none; opacity: 1; visibility: visible;
    box-shadow: none; border: 0; background: none; padding: 0 0 0 1.1rem; gap: 0.6rem; }
  .sub-menu::before { display: none; }
}

/* V73: meet the team, arch-editorial rows (client reference design) ----------
   Arch-topped portrait with an offset gold outline arch + hover zoom; a glass
   card overlaps the photo horizontally and carries role, serif name, monogram,
   italic pull-quote, dashed rule and a two-column body. Row 2 mirrors.
   Paint order keeps the img BELOW the card's backdrop-filter (veil-safe). */
.leader { display: flex; align-items: center; justify-content: center; }
.leader + .leader { margin-top: clamp(3rem, 8vw, 6.5rem); }
.ld-ph { width: min(100%, 390px); flex: 0 0 auto; position: relative; z-index: 1; }
.ld-ph::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(200, 150, 47, 0.5);
  border-radius: 12rem 12rem 0.6rem 0.6rem; transform: translate(16px, -16px); transition: transform 0.5s ease; }
.ld-ph:hover::before { transform: translate(23px, -23px); }
.leader.rev .ld-ph::before { transform: translate(-16px, -16px); }
.leader.rev .ld-ph:hover::before { transform: translate(-23px, -23px); }
.ld-arch { position: relative; border-radius: 12rem 12rem 0.6rem 0.6rem; overflow: hidden;
  aspect-ratio: 4 / 5; box-shadow: 0 25px 50px -12px rgba(22, 32, 26, 0.3); }
.ld-arch img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.ld-ph:hover .ld-arch img { transform: scale(1.05); }
.ld-card { position: relative; z-index: 2; max-width: 640px; margin-left: -72px;
  background: rgba(252, 251, 248, 0.95); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid #fff; border-radius: 24px; padding: clamp(1.8rem, 4vw, 3.4rem);
  box-shadow: 0 20px 40px -15px rgba(30, 58, 43, 0.18); }
.leader.rev { flex-direction: row-reverse; }
.leader.rev .ld-card { margin-left: 0; margin-right: -72px; text-align: right; }
.ld-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.2rem; margin-bottom: 1.5rem; }
.leader.rev .ld-top { flex-direction: row-reverse; }
.ld-role { font-size: var(--t-tiny); font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold); display: block; margin-bottom: 0.65rem; }
.ld-card h2 { font-family: var(--display); font-size: clamp(2rem, 1.5rem + 1.8vw, 2.9rem);
  color: var(--forest); line-height: 1.05; }
.ld-mono { width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(30, 58, 43, 0.13);
  display: grid; place-items: center; font-family: var(--display); font-style: italic;
  font-size: 1.5rem; color: rgba(30, 58, 43, 0.25); flex: none; }
.ld-quote { position: relative; font-family: var(--display); font-style: italic;
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem); color: var(--forest); line-height: 1.45; margin-bottom: 1.7rem; }
.ld-quote::before { content: "\201C"; position: absolute; top: -0.5em; left: -0.3em; font-size: 3.4em;
  color: rgba(200, 150, 47, 0.15); line-height: 1; z-index: -1; }
.leader.rev .ld-quote::before { left: auto; right: -0.3em; }
.ld-dash { height: 1px; background-image: linear-gradient(to right, rgba(200, 150, 47, 0.9) 50%, transparent 50%);
  background-size: 8px 1px; background-repeat: repeat-x; opacity: 0.4; margin-bottom: 1.7rem; }
.ld-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; text-align: left; }
.ld-cols p { font-size: var(--t-body-s); color: var(--ink-60, rgba(22, 32, 26, 0.62)); line-height: 1.7; }
@media (max-width: 980px) {
  .leader, .leader.rev { flex-direction: column; }
  .ld-ph { width: min(100%, 340px); }
  .ld-card, .leader.rev .ld-card { margin: 1.6rem 0 0; text-align: left; }
  .leader.rev .ld-top { flex-direction: row; }
  .leader.rev .ld-quote::before { right: auto; left: -0.3em; }
  .ld-cols { grid-template-columns: 1fr; }
}

/* V71: meet the team, placeholder profiles */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem; }
.tm-card { background: #fff; border: 1px solid rgba(30, 58, 43, 0.12); border-radius: var(--radius-lg, 16px);
  padding: 2rem 1.4rem 1.7rem; text-align: center; }
.tm-ava { width: 92px; height: 92px; border-radius: 50%; margin: 0 auto 1.1rem;
  background: var(--ivory); border: 2px solid rgba(200, 150, 47, 0.55); color: rgba(30, 58, 43, 0.55);
  display: grid; place-items: center; overflow: hidden; }
.tm-ava.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-ava.photo { width: 116px; height: 116px; }
.tm-name { font-family: var(--display); font-size: 1.2rem; color: var(--forest); }
.tm-role { font-size: var(--t-tiny); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); margin: 0.35rem 0 0.7rem; }
.tm-bio { font-size: var(--t-body-s); color: var(--ink-60, rgba(22, 32, 26, 0.65)); line-height: 1.55; max-width: 30ch; margin: 0 auto; }

/* V71: insights listing + article */
.ins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.2rem; }
.ins-card { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(30, 58, 43, 0.12);
  border-radius: var(--radius-lg, 16px); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.ins-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(22, 32, 26, 0.12); }
.ins-ph { aspect-ratio: 16 / 10; overflow: hidden; }
.ins-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.ins-card:hover .ins-ph img { transform: scale(1.04); }
.ins-body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.55rem; }
.ins-date { font-size: var(--t-tiny); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold); }
.ins-body h3 { font-family: var(--display); font-size: 1.25rem; line-height: 1.3; color: var(--forest); }
.ins-body p { font-size: var(--t-body-s); color: var(--ink-60, rgba(22, 32, 26, 0.65)); line-height: 1.55; }
.ins-more { font-size: var(--t-tiny); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--crimson); margin-top: 0.3rem; }
.article figure { margin: 0 0 2rem; }
.article figure img { width: 100%; border-radius: var(--radius-lg, 16px); display: block; }
.article figcaption { font-size: var(--t-tiny); color: var(--ink-40, rgba(22, 32, 26, 0.45)); margin-top: 0.7rem; text-align: center; }
.article p { margin-bottom: 1.35rem; line-height: 1.75; color: var(--ink-70, rgba(22, 32, 26, 0.78)); }

/* V70: traceability, how-it-works steps */
.tr-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: clamp(2rem, 5vw, 3rem); }
.tr-step { background: #fff; border: 1px solid rgba(30, 58, 43, 0.12); border-radius: var(--radius-lg, 16px);
  padding: 1.4rem 1.3rem; }
.tr-step i { font-family: var(--display); font-style: italic; font-size: 1.1rem; color: var(--gold); }
.tr-step h3 { font-family: var(--display); font-size: 1.15rem; color: var(--forest); margin: 0.35rem 0 0.45rem; }
.tr-step p { font-size: var(--t-body-s); color: var(--ink-60, rgba(22, 32, 26, 0.65)); line-height: 1.55; }

/* ============================================================
   V77 · HERO COMPOSITION — chosen by MEASUREMENT, not by breakpoint

   Which composition the hero can use is not a function of any device size we
   can enumerate. It depends on how tall the copy actually renders (wrapping,
   font fallback, user font scaling) against how much height the browser
   actually gives us (URL bar, gesture bar, split screen, desktop-site mode).
   Guessing that with min-width/min-height thresholds was wrong on real
   hardware every time we tried.

   So js/hero.js measures it and stamps <html data-hero-layout>:
     stacked  photo across the top, copy below on the extended table
     overlay  copy over the scene, berry to the side (not enough height)
     wide     desktop composition, untouched
   The media query below is only the no-JS fallback.
   ============================================================ */

/* Never let the hero grow past the viewport: it is PINNED, so anything past
   the fold is unreachable rather than merely below. */
@media (max-height: 620px) { .hero { min-height: 0; } }

/* ---------- STACKED: photo top, copy below ---------- */
html[data-hero-layout="stacked"] .hero { padding-block: 0; }
html[data-hero-layout="stacked"] .hero-bg img { object-fit: cover; object-position: center top; }
html[data-hero-layout="stacked"] .hero-scrim {
  background: linear-gradient(0deg,
    rgba(251, 250, 246, 0.96) 0%,
    rgba(251, 250, 246, 0.88) 40%,
    rgba(251, 250, 246, 0.42) 55%,
    rgba(251, 250, 246, 0.06) 66%,
    transparent 74%);
}
html[data-hero-layout="stacked"] .hero-inner { align-items: flex-end; padding-bottom: 5vh; }
/* 100dvh tracks the mobile URL bar, but a PINNED hero keeps the height it was
   pinned at, so when the bar returns the bottom of the hero (and the last stats
   row) is off screen. Holding the copy inside the SMALL viewport means there is
   nothing down there to lose. Resolves to 4vh where no bar overlays. */
@supports (height: 100svh) {
  html[data-hero-layout="stacked"] .hero-inner { padding-bottom: calc(4vh + 100dvh - 100svh); }
}
html[data-hero-layout="stacked"] .hero-copy { max-width: none; }
html[data-hero-layout="stacked"] .hero .display { font-size: clamp(1.7rem, 7.2vw, 2.35rem); line-height: 1.06; }
html[data-hero-layout="stacked"] .hero-sub {
  margin-top: 0.7rem; font-size: 0.97rem; line-height: 1.5;
  max-width: 40ch; color: var(--ink-70, rgba(22, 32, 26, 0.72));
}
html[data-hero-layout="stacked"] .hero-actions { margin-top: 0.85rem; gap: 0.55rem; }
html[data-hero-layout="stacked"] .hero-actions .btn {
  font-size: 0.72rem; padding: 0.95em 1.35em; gap: 0.5em; max-width: 100%; justify-content: center;
}
html[data-hero-layout="stacked"] .hero-actions .btn svg { width: 1.2em; height: 1.2em; flex: none; }
html[data-hero-layout="stacked"] .hero-stats { margin-top: 0.85rem; max-width: none; gap: 0.5rem; }

/* Stacked on a short viewport: trim, do not re-layout. */
@media (max-height: 780px) {
  html[data-hero-layout="stacked"] .hero .display { font-size: clamp(1.5rem, 6.4vw, 2rem); }
  html[data-hero-layout="stacked"] .hero-sub { margin-top: 0.55rem; font-size: 0.9rem; line-height: 1.45; }
  html[data-hero-layout="stacked"] .hero-actions { margin-top: 0.7rem; }
  html[data-hero-layout="stacked"] .hero-actions .btn { font-size: 0.68rem; padding: 0.85em 1.15em; }
  html[data-hero-layout="stacked"] .hero-stats { margin-top: 0.7rem; gap: 0.4rem 0.5rem; }
  html[data-hero-layout="stacked"] .hero-stats .stat { grid-template-columns: 30px auto; column-gap: 0.45rem; }
  html[data-hero-layout="stacked"] .hero-stats .ic { width: 30px; height: 30px; }
  html[data-hero-layout="stacked"] .hero-stats .ic svg { width: 13px; height: 13px; }
}

/* ---------- OVERLAY: copy over the scene (height too tight to stack) ---------- */
@media (max-width: 1100px) {
  html[data-hero-layout="overlay"] .hero { padding-block: 0; }
  /* Centre inside the space the fixed header leaves, not the whole hero, or the
     first headline line sits behind the bar. */
  html[data-hero-layout="overlay"] .hero-inner { align-items: center; padding: 4.5rem 0 0; }
  html[data-hero-layout="overlay"] .hero-copy { max-width: 26rem; }
  html[data-hero-layout="overlay"] .hero-bg img { object-fit: cover; object-position: 72% center; }
  html[data-hero-layout="overlay"] .hero-scrim {
    background: linear-gradient(90deg,
      rgba(251, 250, 246, 0.97) 0%,
      rgba(251, 250, 246, 0.9) 42%,
      rgba(251, 250, 246, 0.5) 64%,
      transparent 84%);
  }
  html[data-hero-layout="overlay"] .hero .display { font-size: clamp(1.35rem, 5.2vw, 1.9rem); line-height: 1.12; }
  html[data-hero-layout="overlay"] .hero-sub {
    margin-top: 0.55rem; font-size: 0.84rem; line-height: 1.45; max-width: 34ch;
    color: var(--ink-70, rgba(22, 32, 26, 0.72));
  }
  html[data-hero-layout="overlay"] .hero-actions { margin-top: 0.75rem; gap: 0.5rem; }
  html[data-hero-layout="overlay"] .hero-actions .btn {
    font-size: 0.66rem; padding: 0.8em 1.1em; gap: 0.45em; max-width: 100%;
  }
  html[data-hero-layout="overlay"] .hero-actions .btn svg { width: 1.15em; height: 1.15em; flex: none; }
  /* Four ring-icon stats cannot fit a viewport this short without pushing the
     CTAs off screen, and half a row of them reads as breakage. */
  html[data-hero-layout="overlay"] .hero-stats { display: none; }
}

/* ---------- WIDE: desktop composition. Only trimmed when the window is short. ---------- */
@media (min-width: 701px) and (max-height: 520px) {
  html[data-hero-layout="wide"] .hero-inner { align-items: center; padding-top: 4.5rem; }
  html[data-hero-layout="wide"] .hero .display { font-size: clamp(1.6rem, 1rem + 1.8vw, 2.4rem); }
  html[data-hero-layout="wide"] .hero-sub { margin-top: 0.6rem; font-size: 0.92rem; line-height: 1.5; max-width: 46ch; }
  html[data-hero-layout="wide"] .hero-actions { margin-top: 0.9rem; }
  html[data-hero-layout="wide"] .hero-actions .btn { font-size: 0.72rem; padding: 0.85em 1.25em; }
  html[data-hero-layout="wide"] .hero-stats { display: none; }
}

/* ---------- No-JS fallback: approximate the stacked call with a media query ---------- */
@media (max-aspect-ratio: 100/100) and (max-width: 1100px) and (min-height: 700px) {
  html:not([data-hero-layout]) .hero { padding-block: 0; }
  html:not([data-hero-layout]) .hero-bg img { object-fit: cover; object-position: center top; }
  html:not([data-hero-layout]) .hero-scrim {
    background: linear-gradient(0deg, rgba(251, 250, 246, 0.96) 0%, rgba(251, 250, 246, 0.88) 40%,
      rgba(251, 250, 246, 0.42) 55%, rgba(251, 250, 246, 0.06) 66%, transparent 74%);
  }
  html:not([data-hero-layout]) .hero-inner { align-items: flex-end; padding-bottom: 5vh; }
  html:not([data-hero-layout]) .hero .display { font-size: clamp(1.7rem, 7.2vw, 2.35rem); line-height: 1.06; }
  html:not([data-hero-layout]) .hero-sub { margin-top: 0.7rem; font-size: 0.97rem; line-height: 1.5; max-width: 40ch; }
  html:not([data-hero-layout]) .hero-actions { margin-top: 0.85rem; gap: 0.55rem; }
  html:not([data-hero-layout]) .hero-actions .btn { font-size: 0.72rem; padding: 0.95em 1.35em; max-width: 100%; }
  html:not([data-hero-layout]) .hero-stats { margin-top: 0.85rem; max-width: none; gap: 0.5rem; }
}

/* ============================================================
   V78 · INQUIRY INTENT — the ask, pre-chosen and up front
   Step one now opens with what the visitor wants rather than who they are.
   The default option is the most useful one for both sides, and the whole
   control is one <select>, so changing the menu is an edit to the option
   list and nothing else.
   ============================================================ */
.intent {
  /* .form-step is a two-column grid; without this the panel takes one column
     and the select clips its own label. */
  grid-column: 1 / -1;
  display: block; background: var(--forest); color: var(--cream);
  border-radius: var(--radius-lg, 16px); padding: clamp(1.1rem, 2.6vw, 1.5rem) clamp(1.2rem, 3vw, 1.7rem);
  margin-bottom: clamp(1.4rem, 3vw, 1.9rem); cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.25s ease;
}
.intent:hover { box-shadow: var(--shadow); }
.intent:focus-within { box-shadow: 0 0 0 2px var(--gold), var(--shadow); }
.intent-lead {
  display: block; font-size: var(--t-tiny, 0.72rem); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 0.55rem;
}
.intent-pick {
  position: relative; display: block;
  border-bottom: 1px solid rgba(200, 150, 47, 0.5);
  transition: border-color 0.25s ease;
}
.intent:focus-within .intent-pick { border-bottom-color: var(--gold); }
.intent select {
  appearance: none; -webkit-appearance: none;
  width: 100%; max-width: 100%; padding: 0.15em 2rem 0.5rem 0;
  text-overflow: ellipsis;
  background: transparent; border: 0; outline: none; cursor: pointer;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem); line-height: 1.25;
  color: var(--cream);
  /* Native menus paint on the OS surface, so the options need readable colours
     of their own: inheriting cream-on-forest leaves them invisible on Windows. */
}
.intent select option { color: #16201A; background: #fff; font-family: var(--sans); font-size: 1rem; }
.intent-caret {
  position: absolute; right: 0; top: 0.35em; width: 20px; height: 20px;
  color: var(--gold); pointer-events: none;
}
@media (max-width: 640px) {
  .intent select { font-size: 1.02rem; }
}