/* ==========================================================================
   Farmologic — farmologic.com
   Site stylesheet. Implements the Farmologic Design System components
   (components/core, components/display, components/forms) as CSS classes.
   Every value resolves to a token from tokens.css — no raw hex outside tokens
   except where the design system itself specifies a literal (hover shades).
   ========================================================================== */

/* Site-derived value, NOT a design-system token.
   The brand gold (#C8A24A) measures 2.19:1 against ivory, so it fails contrast
   for text at any size on light grounds. Highlighted words, eyebrow labels and
   citations on light grounds therefore use a darkened derivation, 5.28:1 on
   ivory and 4.88:1 on the tint. Gold is unchanged on dark grounds (4.96:1) and
   unchanged everywhere it is used decoratively: rules, frames, seals, borders.
   Worth raising with the design system so the token set carries it. */
:root { --gold-text: #7E611F; }

/* --------------------------------------------------------------------------
   1. Reset & base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* sticky header height + breathing room */
  scroll-padding-top: 100px;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Subtle paper grain on the ivory canvas — permitted on ivory only. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

body > * { position: relative; z-index: 1; }

img,
svg,
video { max-width: 100%; display: block; }

img { height: auto; }

a { color: inherit; }

button { font: inherit; }

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

hr { border: 0; }

::selection {
  background: var(--gold);
  color: var(--forest);
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 200;
  background: var(--forest);
  color: var(--ivory);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label-tight);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus { top: var(--space-4); }

/* --- Preloader ------------------------------------------------------------
   Covers the first paint so the page does not assemble in front of the
   visitor. Removed on window load; never shown without JS, and skipped
   entirely under reduced motion.                                          */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-6);
  background: var(--surface-page);
  transition: opacity 420ms var(--ease-out), visibility 420ms var(--ease-out);
}

html:not(.js) .preloader { display: none; }

.preloader__mark {
  width: 72px;
  height: auto;
  animation: fm-pre-breathe 2.4s var(--ease-out) infinite;
}

.preloader__bar {
  display: block;
  width: 120px;
  height: 1px;
  background: var(--border-hairline);
  overflow: hidden;
}

.preloader__fill {
  display: block;
  height: 100%;
  width: 40%;
  background: var(--gold);
  animation: fm-pre-sweep 1.1s var(--ease-out) infinite;
}

.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

@keyframes fm-pre-breathe {
  0%, 100% { opacity: .45; transform: scale(.97); }
  50%      { opacity: 1;   transform: scale(1); }
}

@keyframes fm-pre-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(300%); }
}

/* --------------------------------------------------------------------------
   2. Layout primitives
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.shell--narrow { max-width: var(--content-narrow); }

/* Long-form sections span the page like every other section, and the running
   text runs the full line with them — no narrow reading column, no split into
   two. Heading, rule and body all share the same left and right edge. */
.shell--prose .stack,
.shell--prose .stack > *,
.shell--prose > p,
.shell--prose > ol,
.shell--prose > ul { max-width: none; }

/* Reading measure that sits inside a full-width shell, so the left edge stays
   on the same gutter as every other section instead of re-centring. */
.measure { max-width: 780px; }
.center .measure { margin-inline: auto; }

.section {
  padding-block: var(--section-pad);
  position: relative;
}

.section--tight { padding-block: var(--space-8); }

.section--flush-top { padding-top: 0; }

/* Dark "living lab" grounds. */
.section--dark {
  background: var(--gradient-dark);
  color: var(--text-on-dark);
  overflow: hidden;
}

.section--forest { background: var(--surface-dark); color: var(--text-on-dark); }

/* Photograph framed on a dark ground — glass border, no card chrome. */
.figure-dark {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--glass-bg);
}

.figure-dark img { width: 100%; display: block; }

.figure-dark__frame { display: block; position: relative; overflow: hidden; }

/* Optional green wash, kept for imagery that is off-palette. Not used on the
   cordyceps photography: the orange fruiting body is the product, and tinting
   it green would misrepresent the material. */
.figure-dark--tint img { filter: saturate(.7) brightness(.88) contrast(1.05); }

/* Green wash: `color` takes hue and saturation from the overlay and keeps the
   photograph's luminance, so the image stays legible instead of flooding. */
.figure-dark--tint .figure-dark__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--forest);
  mix-blend-mode: color;
  opacity: .82;
}

/* A light vertical fall-off so the caption edge settles into the ground. */
.figure-dark--tint .figure-dark__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(19, 42, 29, 0) 45%, rgba(19, 42, 29, .55) 100%);
}

/* Media that holds its position while a long column scrolls past it. */
.sticky-media { position: sticky; top: calc(84px + var(--space-6)); }

.figure-dark figcaption {
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-caption);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
  border-top: 1px solid var(--border-hairline-on-dark);
}

.section--tint { background: var(--surface-tint); }

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--forest h1,
.section--forest h2,
.section--forest h3 { color: var(--text-on-dark); }

.grid { display: grid; gap: var(--space-6); }

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.split {
  display: grid;
  /* minmax(0, …) so a wide child (a spec table with a min-width) cannot pin
     the track open and push the grid past the viewport. */
  grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
  gap: var(--space-9);
  align-items: center;
}

.split--reverse { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

.center { text-align: center; }
.center .fm-rule { margin-inline: auto; }

/* --------------------------------------------------------------------------
   3. Type
   -------------------------------------------------------------------------- */

.display-xl,
.display,
.h2,
.h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  color: var(--text-heading);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.display-xl { font-size: var(--text-display-xl); }
.display    { font-size: var(--text-display); }
.h2         { font-size: var(--text-h2); }
.h3         { font-size: var(--text-h3); line-height: 1.2; }

.h4 {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body-size);
  letter-spacing: .04em;
  color: var(--text-heading);
  line-height: 1.4;
}

.lead {
  font-size: var(--text-lead);
  line-height: 1.62;
  color: var(--text-muted);
  max-width: 58ch;
}

.body { max-width: 66ch; }

.small { font-size: var(--text-small); }
.caption {
  font-size: var(--text-caption);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.muted { color: var(--text-muted); }

/* On dark grounds */
.section--dark .lead,
.section--forest .lead,
.section--dark .muted,
.section--forest .muted,
.section--dark p,
.section--forest p { color: var(--text-on-dark-muted); }

.section--dark .caption,
.section--forest .caption { color: var(--text-on-dark-muted); }

/* The single highlighted word — gold on dark, olive on light. */
.hl { color: var(--gold-text); }
.hl-olive { color: var(--accent-botanical); }

/* Dark grounds keep the brand gold, which reads cleanly on forest. */
.section--dark .hl,
.section--forest .hl,
.hero .hl,
.page-hero .hl,
.cta-band .hl,
.fm-glass .hl,
.figure-dark .hl { color: var(--gold); }
.section--dark .hl-olive,
.section--forest .hl-olive { color: var(--accent-on-dark); }

em, .species { font-style: italic; }

/* --------------------------------------------------------------------------
   4. Design-system components
   -------------------------------------------------------------------------- */

/* --- SectionLabel --------------------------------------------------------- */
.fm-label {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 11px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold-text);
  display: block;
}

/* Dark grounds keep the brand gold. :not() so the leaf and forest modifiers
   are not outranked by this override. */
.section--dark .fm-label:not(.fm-label--leaf):not(.fm-label--forest),
.section--forest .fm-label:not(.fm-label--leaf):not(.fm-label--forest),
.hero .fm-label:not(.fm-label--leaf):not(.fm-label--forest),
.page-hero .fm-label:not(.fm-label--leaf):not(.fm-label--forest),
.cta-band .fm-label:not(.fm-label--leaf):not(.fm-label--forest),
.fm-glass .fm-label:not(.fm-label--leaf):not(.fm-label--forest) { color: var(--gold); }

.fm-label--forest { color: var(--forest); }
.fm-label--leaf   { color: var(--leaf-light); }

/* --- GoldRule ------------------------------------------------------------- */
.fm-rule {
  width: 64px;
  border-top: var(--rule-gold);
  margin-block: var(--space-5);
}

.fm-rule--short { width: 40px; }
.fm-rule--wide  { width: 96px; }

/* --- Button --------------------------------------------------------------- */
.fm-btn {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 14px 32px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.fm-btn--sm { padding: 10px 20px; font-size: 11px; }
.fm-btn--lg { padding: 18px 40px; }

.fm-btn:hover { transform: translateY(-1px); }
.fm-btn:active { transform: translateY(1px); }

.fm-btn--primary { background: var(--forest); color: var(--ivory); }
.fm-btn--primary:hover { background: #26492F; }

.fm-btn--gold { background: var(--gold); color: var(--forest); }
.fm-btn--gold:hover { background: #D4B05C; }

.fm-btn--outline { background: transparent; color: var(--forest); border-color: var(--forest); }
.fm-btn--outline:hover { background: var(--mist); }

.fm-btn--outline-dark {
  background: transparent;
  color: var(--ivory);
  border-color: rgba(246, 244, 238, .4);
}
.fm-btn--outline-dark:hover { background: rgba(246, 244, 238, .08); }

.fm-btn--ghost {
  background: transparent;
  color: var(--forest);
  padding: 6px 2px;
  text-underline-offset: 6px;
}
.fm-btn--ghost:hover { text-decoration: underline; }

.fm-btn[disabled],
.fm-btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* --- Badge ---------------------------------------------------------------- */
.fm-badge {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  display: inline-block;
  border: 1px solid var(--border-gold);
  color: var(--forest);
  background: transparent;
}

.fm-badge--solid { border-color: var(--forest); background: var(--forest); color: var(--ivory); }
.fm-badge--dark  { border-color: var(--border-gold); color: var(--gold); }
.fm-badge--tint  { border-color: transparent; background: var(--mist); color: var(--forest); }

/* --- Card / GlassCard ----------------------------------------------------- */
.fm-card {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  position: relative;
  transition: box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.fm-card--hover:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

.fm-card--gold-frame::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid var(--border-gold);
  pointer-events: none;
}

.fm-glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  padding: var(--space-5);
  color: var(--ivory);
}

.fm-glass--pad-lg { padding: var(--space-6); }

.fm-glass h3 + p,
.fm-glass p + p { margin-top: var(--space-3); }

/* --- Seal ----------------------------------------------------------------- */
.fm-seal {
  width: 132px;
  height: 132px;
  flex: 0 0 auto;
  position: relative;
  display: grid;
  place-items: center;
  color: var(--gold);
}

.fm-seal svg { width: 100%; height: 100%; display: block; }

.fm-seal text {
  font-family: var(--font-body);
  font-size: 7.4px;
  font-weight: var(--weight-semibold);
  letter-spacing: 2.4px;
  fill: currentColor;
}

.fm-seal .seal-sub { font-size: 6.2px; letter-spacing: 1.5px; }

.fm-seal--sm { width: 96px; height: 96px; }
.fm-seal--sm text { font-size: 8.4px; letter-spacing: 2.2px; }

/* --- SpecReadout / Stat --------------------------------------------------- */
.fm-readout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-7);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
}

.fm-readout__label {
  font-size: 10px;
  letter-spacing: .25em;
  font-weight: var(--weight-semibold);
  color: var(--olive);
  text-transform: uppercase;
}

.fm-readout__value {
  font-size: 20px;
  font-weight: var(--weight-medium);
  color: var(--forest);
  margin-top: var(--space-1);
  letter-spacing: .04em;
}

.section--dark .fm-readout__label,
.section--forest .fm-readout__label { color: var(--leaf-light); }

.section--dark .fm-readout__value,
.section--forest .fm-readout__value { color: var(--ivory); }

.fm-stat__value {
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 1;
  color: var(--forest);
}

.fm-stat__value sup,
.fm-stat__unit { font-size: 28px; }

.fm-stat__label {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-top: var(--space-2);
  color: var(--text-muted);
}

.section--dark .fm-stat__value,
.section--forest .fm-stat__value { color: var(--ivory); }

.section--dark .fm-stat__label,
.section--forest .fm-stat__label { color: var(--text-on-dark-muted); }

/* --- Icon in ring --------------------------------------------------------- */
.fm-ring {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border: 1px solid var(--accent-botanical);
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  color: var(--accent-botanical);
  /* Also used with a bare numeral for numbered steps. */
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  letter-spacing: .06em;
}

.fm-ring svg { width: 24px; height: 24px; stroke-width: 1.5; }

.fm-ring--sm { width: 40px; height: 40px; }
.fm-ring--sm svg { width: 18px; height: 18px; }

.fm-ring--gold { border-color: var(--border-gold); color: var(--gold); }

/* Filled variation — a solid disc so the glyph carries the section instead of
   sitting back in a hairline ring. Forest ground, ivory glyph, gold halo. */
.fm-ring--filled {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--ivory);
  box-shadow: 0 0 0 3px rgba(200, 162, 74, .18);
}

.fm-ring--filled svg { stroke-width: 1.9; }

.section--dark .fm-ring--filled,
.section--forest .fm-ring--filled {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--forest-deep);
  box-shadow: 0 0 0 3px rgba(200, 162, 74, .22);
}

.section--dark .fm-ring,
.section--forest .fm-ring { border-color: var(--border-gold); color: var(--gold); }

/* --- Benefit triad -------------------------------------------------------- */
.fm-triad {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-5);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label-tight);
  text-transform: uppercase;
  color: var(--forest);
}

.fm-triad li { display: flex; align-items: center; gap: var(--space-5); }

.fm-triad li:not(:last-child)::after {
  content: "|";
  color: var(--gold);
  font-weight: var(--weight-body);
}

.section--dark .fm-triad,
.section--forest .fm-triad { color: var(--text-on-dark); }

/* --- Quote band ----------------------------------------------------------- */
.fm-quote {
  border: 1px solid var(--border-gold);
  /* Spans its container; padding scales with the space available rather than
     sitting at a fixed 48/64, which was overweight inside narrow columns. */
  width: 100%;
  padding: var(--space-6) clamp(var(--space-5), 4vw, var(--space-7));
  position: relative;
  text-align: center;
}

.fm-quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.4vw, 30px);
  line-height: 1.3;
  color: var(--text-heading);
  text-wrap: balance;
  max-width: 34ch;
  margin-inline: auto;
}

.fm-quote cite {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-style: normal;
  font-size: 10px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold-text);
}

.section--dark .fm-quote cite,
.section--forest .fm-quote cite,
.cta-band .fm-quote cite { color: var(--gold); }

.section--dark .fm-quote blockquote,
.section--forest .fm-quote blockquote { color: var(--ivory); }

/* --- ProductCard ---------------------------------------------------------- */
.fm-product {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.fm-product:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }

/* ProductCard shot — set a background-image on the element when used. */
.fm-product__shot {
  height: 260px;
  background-size: cover;
  background-position: center;
  background-color: var(--forest-deep);
}

.fm-product__body { padding: var(--space-5) var(--space-5) var(--space-6); flex: 1; display: flex; flex-direction: column; }

.fm-product__name {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--weight-display);
  color: var(--forest);
  line-height: 1.15;
}

.fm-product__benefits {
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--olive);
  font-weight: var(--weight-semibold);
  margin-top: var(--space-2);
  text-transform: uppercase;
}

.fm-product__spec {
  font-size: var(--text-small);
  color: var(--text-muted);
  margin-top: var(--space-3);
  flex: 1;
}

.fm-product__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
  font-size: var(--text-small);
  color: var(--text-muted);
}

.fm-product__cta {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--forest);
  text-decoration: none;
  white-space: nowrap;
  text-underline-offset: 4px;
}

.fm-product:hover .fm-product__cta { text-decoration: underline; }

/* --- Forms ---------------------------------------------------------------- */

/* The enquiry card is the site's only conversion point, so it gets more
   presence than a plain card: gold hairline at the head, generous padding,
   and fields that read as considered rather than default. */
.form-card {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: var(--space-8);
  position: relative;
}

.form-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.form-card__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 30px;
  line-height: 1.1;
  color: var(--forest);
}

.form-card__intro {
  font-size: var(--text-small);
  color: var(--text-muted);
  margin-top: var(--space-3);
  max-width: 42ch;
}

.form-grid { display: grid; gap: var(--space-5); margin-top: var(--space-7); }
.form-grid--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.form-grid--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }

/* Full-width form: the fields breathe across the whole column, and the
   consent line sits beside the button rather than stacked above it. */
.form-card--wide { margin-top: var(--space-7); padding: var(--space-8) var(--space-8) var(--space-7); }

.form-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-hairline);
}

.form-card__foot .fm-checkbox { margin-top: 0; max-width: 46ch; }
.form-card__foot .fm-btn { margin-top: 0; flex: 0 0 auto; min-width: 220px; }

.fm-field { display: block; }

.fm-field__label {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: var(--space-3);
}

.fm-field__label .req { color: var(--gold-text); margin-left: 2px; }

.fm-input,
.fm-textarea,
.fm-select {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  padding: 15px 0 13px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--border-hairline);
  border-radius: 0;
  background: transparent;
  color: var(--charcoal);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.fm-input::placeholder,
.fm-textarea::placeholder { color: #A9A69C; }

.fm-input:hover,
.fm-textarea:hover,
.fm-select:hover { border-bottom-color: var(--olive); }

.fm-input:focus,
.fm-textarea:focus,
.fm-select:focus {
  outline: none;
  border-bottom-color: var(--gold);
  border-bottom-width: 2px;
  padding-bottom: 12px;
}

.fm-textarea { resize: vertical; min-height: 108px; padding-top: var(--space-3); }

.form-card .fm-btn { margin-top: var(--space-6); }

.form-card .fm-checkbox { margin-top: var(--space-6); }

.fm-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C8A24A' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  padding-right: 32px;
}

.fm-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-small);
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1.55;
}

.fm-checkbox input {
  width: 16px;
  height: 16px;
  margin: 4px 0 0;
  accent-color: var(--forest);
  flex: 0 0 auto;
}

.fm-field__error {
  display: none;
  margin-top: var(--space-2);
  font-size: var(--text-caption);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #A5442F;
}

.fm-field[data-invalid="true"] .fm-field__error { display: block; }
.fm-field[data-invalid="true"] .fm-input,
.fm-field[data-invalid="true"] .fm-textarea,
.fm-field[data-invalid="true"] .fm-select { border-color: #A5442F; }

/* Dark-ground variants */
.on-dark .fm-field__label { color: var(--leaf-light); }

.on-dark .fm-input,
.on-dark .fm-textarea,
.on-dark .fm-select {
  background: transparent;
  border-bottom-color: rgba(246, 244, 238, .28);
  color: var(--ivory);
}

.on-dark .fm-input::placeholder,
.on-dark .fm-textarea::placeholder { color: rgba(246, 244, 238, .38); }

.on-dark .fm-select option { color: var(--charcoal); }

.on-dark .fm-checkbox { color: var(--text-on-dark-muted); }

.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* --- Data table (spec sheets) -------------------------------------------- */
.fm-table-wrap { overflow-x: auto; min-width: 0; -webkit-overflow-scrolling: touch; }

.fm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
  min-width: 520px;
}

.fm-table caption {
  text-align: left;
  font-size: 10px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold-text);
  font-weight: var(--weight-semibold);
  padding-bottom: var(--space-4);
}

.section--dark .fm-table caption,
.section--forest .fm-table caption { color: var(--gold); }

.fm-table th,
.fm-table td {
  text-align: left;
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  border-bottom: 1px solid var(--border-hairline);
  vertical-align: top;
}

.fm-table thead th {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--weight-semibold);
  border-bottom-color: var(--forest);
}

.fm-table tbody th {
  font-weight: var(--weight-medium);
  color: var(--forest);
  width: 40%;
}

.section--dark .fm-table th,
.section--dark .fm-table td,
.section--forest .fm-table th,
.section--forest .fm-table td { border-bottom-color: var(--border-hairline-on-dark); color: var(--text-on-dark-muted); }

.section--dark .fm-table tbody th,
.section--forest .fm-table tbody th { color: var(--ivory); }

/* --------------------------------------------------------------------------
   5. Header & footer
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 244, 238, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-hairline);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}

.site-header.is-stuck { box-shadow: 0 1px 24px rgba(26, 26, 26, .07); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: 84px;
}

.site-header__logo { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; text-decoration: none; }

/* The lockup is composed, not baked: the mark is a transparent PNG and the
   wordmark is live text in the display face. Keeps it crisp at every size and
   lets the two halves size independently. */
.site-header__mark {
  height: 36px;
  width: auto;
  transition: height var(--dur-fast) var(--ease-out);
}

.site-header__word {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--weight-semibold);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--forest-deep);
  line-height: 1;
  white-space: nowrap;
  transition: font-size var(--dur-fast) var(--ease-out);
}

.site-header.is-stuck .site-header__mark { height: 30px; }
.site-header.is-stuck .site-header__word { font-size: 19px; }

.site-nav { display: flex; align-items: center; gap: var(--space-7); }

.site-nav__link {
  font-size: 12px;
  letter-spacing: .14em;
  font-weight: var(--weight-medium);
  color: var(--forest);
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
  padding-block: var(--space-2);
}

.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--gold);
  transition: width var(--dur-fast) var(--ease-out);
}

.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after { width: 100%; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  color: var(--forest);
}

.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }

.site-footer {
  background: var(--forest-deep);
  color: var(--text-on-dark-muted);
  padding: var(--space-8) 0 var(--space-7);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-7);
}

/* The logo is dark-on-light and never recoloured — on dark grounds it sits
   on a cream tile, per the design system's logo rules. */
.site-footer__lockup { display: flex; align-items: center; gap: 11px; }

.site-footer__mark { height: 38px; width: auto; }

.site-footer__word {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: var(--weight-semibold);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ivory);
  line-height: 1;
  white-space: nowrap;
}

.site-footer h2 {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: .28em;
  color: var(--leaf-light);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
}

.site-footer li { line-height: 2; font-size: 13px; }
.site-footer a { color: var(--text-on-dark-muted); text-decoration: none; }
.site-footer a:hover { color: var(--gold); }

/* Make in India — the official mark is dark on transparent, so on the forest
   footer it sits on a cream tile, the same treatment the logo gets. */
.made-in-india {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(246, 244, 238, .12);
}

.made-in-india__tile {
  background: var(--ivory);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  display: inline-flex;
  flex: 0 0 auto;
}

.made-in-india__tile img { height: 46px; width: auto; display: block; }

.made-in-india__text {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--text-on-dark-muted);
  line-height: 1.5;
}

.site-footer__base {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-hairline-on-dark);
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: 11px;
  letter-spacing: .12em;
  color: rgba(246, 244, 238, .4);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--gradient-dark);
  color: var(--text-on-dark);
  overflow: hidden;
  padding-block: var(--space-10) var(--space-9);
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../img/harvest-in-hand.jpeg");
  background-size: cover;
  background-position: center 55%;
  opacity: .9;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(19, 42, 29, .98) 0%, rgba(19, 42, 29, .95) 40%, rgba(19, 42, 29, .62) 66%, rgba(19, 42, 29, .18) 100%),
    linear-gradient(180deg, rgba(19, 42, 29, .74) 0%, rgba(19, 42, 29, .18) 42%, rgba(19, 42, 29, .82) 100%);
}

.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .55;
}

.hero__inner { max-width: 1140px; }

.hero .display-xl {
  color: var(--ivory);
  margin-top: var(--space-5);
  /* The headline is a full sentence. Sized so it sets in two lines on desktop
     with the explicit break after the species name, and stays above the fold. */
  font-size: clamp(30px, 3.9vw, 54px);
  text-wrap: normal;
  /* Cormorant is a light-stemmed serif and the hero sits on a photograph.
     Slightly looser tracking, a touch more leading and a soft shadow buy back
     the legibility without changing the brand typeface. */
  letter-spacing: .012em;
  line-height: 1.12;
  text-shadow: 0 1px 2px rgba(19, 42, 29, .45), 0 12px 40px rgba(19, 42, 29, .55);
}

.hero__sub {
  text-shadow: 0 1px 12px rgba(19, 42, 29, .6);
}

.hero__sub {
  font-size: var(--text-lead);
  line-height: 1.6;
  color: var(--text-on-dark-muted);
  max-width: 54ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

.hero__readout {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-hairline-on-dark);
}

.hero__seal {
  position: absolute;
  right: var(--space-8);
  bottom: var(--space-8);
  z-index: 2;
}

/* Compact hero for interior pages. */
.page-hero {
  background: var(--gradient-dark);
  color: var(--text-on-dark);
  padding-block: var(--space-9) var(--space-8);
  position: relative;
  overflow: hidden;
}

.page-hero .display { color: var(--ivory); margin-top: var(--space-4); }
.page-hero p { max-width: 60ch; }

.breadcrumb {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
  margin-bottom: var(--space-5);
}

.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span { color: rgba(246, 244, 238, .35); margin-inline: var(--space-2); }

/* The hero, the interior page hero and the CTA band are dark grounds too.
   They inherit the same on-dark component treatments as .section--dark. */
.hero p, .page-hero p, .cta-band p,
.hero .lead, .page-hero .lead, .cta-band .lead,
.hero .muted, .page-hero .muted, .cta-band .muted,
.hero .caption, .page-hero .caption, .cta-band .caption { color: var(--text-on-dark-muted); }

.hero h1, .hero h2, .hero h3,
.page-hero h1, .page-hero h2, .page-hero h3,
.cta-band h2 { color: var(--text-on-dark); }

.hero .fm-readout__label, .page-hero .fm-readout__label { color: var(--leaf-light); }
.hero .fm-readout__value, .page-hero .fm-readout__value { color: var(--ivory); }
.hero .fm-readout__value a, .page-hero .fm-readout__value a { color: inherit; }

.hero .fm-ring, .page-hero .fm-ring { border-color: var(--border-gold); color: var(--gold); }
.hero .fm-quote blockquote, .page-hero .fm-quote blockquote { color: var(--ivory); }
.hero .hl-olive, .page-hero .hl-olive, .cta-band .hl-olive { color: var(--accent-on-dark); }
.hero .fm-triad, .page-hero .fm-triad { color: var(--text-on-dark); }

/* --------------------------------------------------------------------------
   7. Grow timeline (scroll-driven)
   -------------------------------------------------------------------------- */

.timeline { position: relative; }

.timeline__track {
  position: absolute;
  left: 27px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--border-hairline-on-dark);
}

.timeline__progress {
  position: absolute;
  left: 27px;
  top: 8px;
  width: 1px;
  background: var(--gold);
  height: 0;
  transition: height 120ms linear;
}

.timeline__list { display: grid; gap: var(--space-8); }

.timeline__item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.timeline__marker {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-gold);
  display: grid;
  place-items: center;
  background: var(--forest-deep);
  color: var(--gold);
  font-size: 11px;
  letter-spacing: .12em;
  font-weight: var(--weight-semibold);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.timeline__item.is-active .timeline__marker { background: var(--gold); color: var(--forest-deep); }

.timeline__phase {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--ivory);
  line-height: 1.15;
  margin-top: var(--space-2);
}

.timeline__day {
  display: block;
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--leaf-light);
  font-weight: var(--weight-semibold);
}

.timeline__item p { margin-top: var(--space-3); max-width: 62ch; }

.timeline__params {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-4);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--text-on-dark-muted);
}

.timeline__params span { display: inline-flex; gap: var(--space-2); align-items: baseline; }
.timeline__params b { color: var(--ivory); font-weight: var(--weight-medium); }

/* --------------------------------------------------------------------------
   8. Editorial blocks
   -------------------------------------------------------------------------- */

.figure-panel {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}

.figure-panel img { width: 100%; display: block; }

.figure-panel figcaption {
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-caption);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-top: 1px solid var(--border-hairline);
}

/* --- Founder portrait (manifesto opening) --------------------------------- */
/* Full-width section, like the commitments below it. Two columns: a fixed-width
   portrait and the prose, capped so the measure stays close to the rest of the
   page rather than running the full shell. The studio background is knocked out
   to the page ground, so a hairline rule reads better than a card frame, and the
   bottom is faded so the crop does not end on a hard cut. */
.founder-intro {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

/* No cap: the column already sets the measure, and a cap here left the text
   short of the heading's right edge. */
.founder-intro .stack { max-width: none; }

.founder-portrait { margin: 0; }

.founder-portrait img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}

.founder-portrait figcaption {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-gold);
}

.founder-portrait__role,
.founder-portrait__place { display: block; font-family: var(--font-body); }

.founder-portrait__role {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--gold-text);
}

.founder-portrait__place {
  margin-top: var(--space-1);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--text-muted);
}

/* Below this the two columns leave the prose too narrow to read, so the
   portrait sits above the text instead. */
@media (max-width: 900px) {
  .founder-intro { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .founder-intro .stack { max-width: none; }
  .founder-portrait { width: 220px; }
}

.checklist { display: grid; gap: var(--space-5); }

.checklist li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-4); align-items: start; }

.checklist h3 {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--forest);
  margin-bottom: var(--space-1);
}

.checklist p { font-size: var(--text-small); color: var(--text-muted); margin: 0; }

.section--dark .checklist h3,
.section--forest .checklist h3 { color: var(--ivory); }

/* Journey rail — the five-step "quality is a journey" device. */
.journey {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
  position: relative;
  text-align: center;
}

.journey::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 10%;
  right: 10%;
  border-top: 1px dashed var(--border-gold);
  z-index: 0;
}

.journey li { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--space-3); }

.journey .fm-ring { background: var(--surface-page); }

.journey h3 {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--forest);
  line-height: 1.5;
}

/* CTA band */
.cta-band {
  background: var(--gradient-dark);
  padding-block: var(--space-9);
  text-align: center;
  position: relative;
  color: var(--ivory);
  overflow: hidden;
}

.cta-band::after {
  content: "";
  position: absolute;
  inset: var(--space-5) max(var(--space-5), calc((100% - var(--content-max)) / 2 + var(--space-5)));
  border: 1px solid var(--border-gold);
  opacity: .6;
  pointer-events: none;
}

.cta-band .display { color: var(--ivory); max-width: 660px; margin-inline: auto; }
.cta-band p { max-width: 52ch; margin-inline: auto; }

/* Journal cards */
.journal-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  height: 100%;
}

.journal-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }

.journal-card h2,
.journal-card h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: var(--weight-display);
  color: var(--forest);
  line-height: 1.18;
}

.journal-card p { font-size: var(--text-small); color: var(--text-muted); flex: 1; }

.journal-card__more {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--forest);
}

/* FAQ */
.faq { border-top: 1px solid var(--border-hairline); }

.faq details {
  border-bottom: 1px solid var(--border-hairline);
  padding: var(--space-5) 0;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--forest);
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  align-items: baseline;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  color: var(--gold-text);
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1;
}

.faq details[open] summary::after { content: "–"; }

.faq details p { margin-top: var(--space-4); font-size: var(--text-small); color: var(--text-muted); max-width: 70ch; }

/* Form status message */
.form-status {
  display: none;
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
}

.form-status.is-visible { display: block; }

/* --------------------------------------------------------------------------
   9. Motion — progressive enhancement only
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
}

.js .reveal {
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-in,
.no-js .reveal { opacity: 1; transform: none; }

/* Scroll-linked reveal. Where the browser supports scroll-driven animations
   the reveal is tied to scroll position rather than fired once by the
   IntersectionObserver, so cards rise as you scroll instead of snapping in.
   Everything else falls back to the observer above — no library needed. */
@supports (animation-timeline: view()) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
    animation: fm-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 22%;
  }

  @keyframes fm-reveal {
    from { opacity: 0; transform: translateY(34px) scale(.988); }
    to   { opacity: 1; transform: none; }
  }
}



/* Without JS nothing may stay hidden. */
html:not(.js) .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero__canvas { display: none; }
}

/* --------------------------------------------------------------------------
   10. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .split,
  .split--reverse { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .journey { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-6); }
  .journey::before { display: none; }
  .split--even { grid-template-columns: minmax(0, 1fr); }
  .sticky-media { position: static; }
  .form-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  :root { --section-pad: 72px; }

  .grid--3,
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .nav-toggle { display: block; }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-hairline);
    padding: var(--space-4) var(--space-6) var(--space-6);
    display: none;
    box-shadow: var(--shadow-card);
  }

  .site-nav.is-open { display: flex; }

  .site-nav__link { padding: var(--space-4) 0; border-bottom: 1px solid var(--border-hairline); }
  .site-nav__link::after { display: none; }
  .site-nav .fm-btn { margin-top: var(--space-5); }

  .hero__seal { display: none; }
  .hero { padding-block: var(--space-9) var(--space-8); }

  /* Narrow screens: the pack photograph has to sit further back so the
     copy keeps its contrast. */
  .hero__media { opacity: .38; background-position: 62% 55%; }
  .hero__scrim {
    background: linear-gradient(180deg, rgba(19, 42, 29, .93) 0%, rgba(19, 42, 29, .74) 50%, rgba(19, 42, 29, .96) 100%);
  }
}

@media (max-width: 720px) {
  .shell { padding-inline: var(--space-5); }

  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }

  .form-grid--2,
  .form-grid--3 { grid-template-columns: 1fr; }
  .form-card--wide { padding: var(--space-6); }
  .form-card__foot { flex-direction: column; align-items: stretch; }
  .form-card__foot .fm-btn { width: 100%; }

  .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-6); }

  .site-header__inner { height: 72px; }
  .site-header__mark { height: 34px; }
  .site-header__word { font-size: 21px; }
  .site-header.is-stuck .site-header__mark { height: 30px; }
  .site-header.is-stuck .site-header__word { font-size: 18px; }

  .fm-quote { padding: var(--space-6) var(--space-5); }

  .timeline__item { grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4); }
  .timeline__marker { width: 44px; height: 44px; font-size: 10px; }
  .timeline__track,
  .timeline__progress { left: 21px; }

  .hero__actions .fm-btn { flex: 1 1 100%; }
}

@media print {
  .site-header, .site-nav, .cta-band, .hero__canvas { display: none !important; }
  body { background: #fff; }
}

/* --------------------------------------------------------------------------
   11. Mobile refinement
   Phones get shorter rhythm, a calmer display scale, comfortable tap targets
   and no horizontal overflow anywhere.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  :root {
    --section-pad: 60px;
    --text-display-xl: clamp(32px, 9vw, 44px);
    --text-display: clamp(27px, 7.6vw, 36px);
    --text-h2: clamp(23px, 6.4vw, 30px);
    --text-h3: 21px;
    --text-lead: 17px;
  }

  .shell { padding-inline: var(--space-5); }

  .section--tight { padding-block: var(--space-6); }

  /* Tap targets: nothing interactive below 44px. */
  .fm-btn { padding: 15px 26px; min-height: 46px; }
  .fm-btn--sm { padding: 13px 20px; min-height: 44px; }
  .fm-btn--lg { padding: 17px 30px; }
  .nav-toggle { min-width: 46px; min-height: 46px; }
  .site-nav__link { padding: 15px 0; }
  .faq summary { padding-block: var(--space-2); }

  .hero { padding-block: var(--space-8) var(--space-7); }
  .hero .display-xl { text-wrap: pretty; }
  .hero__actions { gap: var(--space-3); margin-top: var(--space-6); }
  .hero__actions .fm-btn { flex: 1 1 100%; }

  .page-hero { padding-block: var(--space-8) var(--space-7); }

  .fm-card { padding: var(--space-5); }
  .fm-card--gold-frame::after { inset: 8px; }
  .fm-glass { padding: var(--space-5); }

  .fm-quote { padding: var(--space-5) var(--space-4); }
  .fm-quote blockquote { font-size: 19px; max-width: none; }

  /* Stacked on a phone, so the vertical bars would dangle at line ends. */
  .fm-triad { flex-direction: column; gap: var(--space-3); font-size: 11px; }
  .fm-triad li { gap: 0; }
  .fm-triad li:not(:last-child)::after { display: none; }

  .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
  .journey h3 { font-size: 10px; }

  .checklist li { grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); }
  .fm-ring--sm { width: 32px; height: 32px; font-size: 12px; }
  .fm-ring--sm svg { width: 15px; height: 15px; }

  .timeline__list { gap: var(--space-7); }
  .timeline__phase { font-size: 22px; }

  .cta-band { padding-block: var(--space-8); }
  .cta-band::after { inset: var(--space-4); }
  .cta-band .display { max-width: none; }

  .form-card { padding: var(--space-6) var(--space-5); }
  .form-card__title { font-size: 25px; }
  /* 16px minimum stops iOS Safari zooming the viewport on focus. */
  .fm-input,
  .fm-textarea,
  .fm-select { font-size: 16px; }

  .site-footer { padding-block: var(--space-7) var(--space-6); }
  .site-footer__mark { height: 32px; }
  .site-footer__word { font-size: 20px; }
  .site-footer__base { flex-direction: column; gap: var(--space-2); }

  .preloader__mark { width: 58px; }

  .founder-intro { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .founder-portrait { width: 190px; }

  /* Uppercase tracked captions read tight at 11px on a phone. */
  .caption { font-size: 12px; }

  /* Comfortable hit areas for the remaining small controls: 44px minimum. */
  .fm-checkbox { padding-block: var(--space-2); }
  .fm-checkbox input { width: 24px; height: 24px; margin-top: 0; }
  .site-footer li a,
  .fm-readout__value a { display: inline-block; padding-block: 9px; }
  /* Negative margin keeps the breadcrumb on its own baseline while the
     padding gives the link a thumb-sized target. */
  .breadcrumb a { display: inline-block; padding-block: 15px; margin-block: -15px; }

  .measure { max-width: none; }

  .fm-table { min-width: 380px; }
  .fm-table th,
  .fm-table td { padding-block: var(--space-3); }

  .figure-panel figcaption,
  .figure-dark figcaption { padding: var(--space-3) var(--space-4); }
}

@media (max-width: 420px) {
  :root { --section-pad: 52px; }
  .shell { padding-inline: var(--space-4); }
  .hero .display-xl { font-size: clamp(28px, 8.6vw, 36px); }
  .journey { grid-template-columns: 1fr; }
  .fm-seal { width: 108px; height: 108px; }
}

/* Landscape phones: don't let a tall hero swallow the viewport. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { padding-block: var(--space-7) var(--space-6); }
  .preloader__mark { width: 48px; }
}

/* Provenance note under a caption. The captions are uppercase and letterspaced;
   this deliberately is not — it should read as a quiet aside, not a second
   caption competing with the first. */
.fig-note {
  display: block;
  margin-top: 6px;
  font-size: 10.5px;
  letter-spacing: .02em;
  text-transform: none;
  font-style: italic;
  opacity: .55;
}

/* Inline source note. Sits directly under the claim it supports, set small and
   quiet so it reads as a footnote in place rather than interrupting the prose.
   Deliberately not a separate references section — the citation is most useful
   next to the sentence it backs. */
.src-note {
  margin-top: var(--space-2);
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--text-muted);
  opacity: .8;
  max-width: 68ch;
}

.src-note a { color: inherit; text-underline-offset: 2px; }
.src-note a:hover { color: var(--gold); }

/* Footer social. Sits under the About column, matching the link colour already
   used there rather than introducing a new accent. */
.social { margin-top: var(--space-4); }

.social__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-on-dark-muted);
  text-decoration: none;
  font-size: 13px;
  transition: color var(--dur-fast) var(--ease-out);
}

.social__link:hover { color: var(--ivory); }
.social__icon { width: 17px; height: 17px; flex: 0 0 auto; }