/* ==========================================================================
   MEADOWS AGRI EXPORTS. Single page.

   The hero background is a photograph, blurred and left vibrant: sunrise over
   crop rows. It is 17 KB at 1700px, because a heavily blurred image compresses
   to almost nothing. The scrim is BAKED INTO THE FILE as a soft centre band, so
   the corners keep their colour while the type still has a ground. A flat CSS
   overlay heavy enough for legibility would have killed the image, which is
   what went wrong the first two times.

   Layer order in the hero is set with explicit z-index. Do not remove it: an
   absolutely positioned ::before is painted BEFORE later children, so the
   photograph would cover the overlay.

   Rules this file enforces:
   1. GOLD NEVER CARRIES SMALL TEXT on paper. #A9761E is 3.4:1 there, so it is
      for rules, borders and type above 24px. Small gold text on light uses
      --gold-ink. On night, --gold-lit.
   2. NO SCROLL-DRIVEN STATE, and no reveal. Content is visible at first paint,
      always. The marquee is autonomous and pauses for reduced motion.
   3. 18px body floor. Nothing under 13px anywhere.
   4. Mobile is designed, not inherited: its own type scale, its own rhythm.
   ========================================================================== */

@import url("fonts.css");

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  --paper:      #F6EFDD;
  --paper-2:    #EFE6CF;
  --cream:      #FFFFF6;
  --ink:        #221E14;   /* 14.3:1 on paper */
  --ink-soft:   #6A6250;   /* 5.2:1 on paper */
  --green:      #1B5900;   /* 7.2:1 on paper */
  --green-deep: #123D00;
  --gold:       #A9761E;   /* rules, borders, large type */
  --gold-ink:   #8A5E16;   /* small gold text on light: 4.9 / 4.6 / 5.7 */
  --gold-lit:   #D8A94E;   /* on night: 8.7:1 */

  --night:      #14100A;
  --on-night:   #FBF6E7;   /* 18.7:1 */
  --on-night-2: #C9BFA4;   /* 9.4:1 */

  --rule:       #DCD2B6;
  --rule-firm:  #C0B393;
  --rule-night: rgba(216, 169, 78, .34);

  --f-disp: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-text: 'Fraunces', Georgia, serif;
  --f-ui:   'Inter', system-ui, -apple-system, sans-serif;

  /* A deliberately steep hero curve: small screens need a big vw factor to
     avoid a timid headline, large ones need a hard cap to stay elegant. */
  --t-hero:  clamp(2.35rem, 8.8vw, 5.1rem);
  --t-h2:    clamp(1.75rem, 4.4vw, 3.2rem);
  --t-h3:    clamp(1.22rem, 2.4vw, 1.55rem);
  --t-quote: clamp(1.4rem, 4vw, 2.5rem);
  --t-lead:  clamp(1.12rem, 2.1vw, 1.38rem);
  --t-body:  1.125rem;
  --t-small: 1rem;
  --t-ui:    .8125rem;

  --edge: clamp(18px, 5vw, 86px);
  --max:  1280px;
  --gut:  clamp(18px, 2.2vw, 40px);
  --pad:  clamp(50px, 7.4vw, 152px);
  --measure: 33rem;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: 1.66;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 14;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -.014em;
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 110;
  text-wrap: balance;
}
h1 em, h2 em, h3 em { font-style: italic; font-weight: 500; color: var(--gold); }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
::selection { background: var(--gold-lit); color: var(--ink); }

.skip {
  position: absolute; left: -9999px; z-index: 300;
  padding: 14px 20px; background: var(--green-deep); color: var(--on-night);
  font-family: var(--f-ui); font-size: var(--t-ui);
  letter-spacing: .1em; text-transform: uppercase;
}
.skip:focus { left: 14px; top: 14px; }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.wrap { width: min(100% - (var(--edge) * 2), var(--max)); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gut); }
.sec { padding-block: var(--pad); }
.sec--s { padding-block: clamp(46px, 5.6vw, 100px); }

.band--paper2 { background: var(--paper-2); }
.band--cream  { background: var(--cream); }
.band--night  { background: var(--night); color: var(--on-night); }
.band--tex {
  background:
    linear-gradient(rgba(20, 16, 10, .82), rgba(20, 16, 10, .92)),
    url("../img/tex-fibre-1200.webp") center / cover no-repeat,
    var(--night);
}
.band--green  { background: var(--green-deep); color: var(--on-night); }

.c1-5 { grid-column: 1 / span 5; }
.c1-6 { grid-column: 1 / span 6; }
.c1-7 { grid-column: 1 / span 7; }
.c7-12 { grid-column: 7 / span 6; }
.c8-12 { grid-column: 8 / span 5; }

/* --------------------------------------------------------------------------
   4. TYPE COMPONENTS
   -------------------------------------------------------------------------- */
.eye {
  display: flex; align-items: center; gap: 15px;
  font-family: var(--f-ui); font-size: var(--t-ui); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink);
}
.eye::after { content: ""; flex: 0 0 48px; height: 1px; background: var(--gold); opacity: .85; }
.eye--mid { justify-content: center; }
.eye--mid::before { content: ""; flex: 0 0 48px; height: 1px; background: var(--gold); opacity: .85; }

.open { margin-bottom: clamp(24px, 3vw, 48px); }
.open__n { font-family: var(--f-disp); font-weight: 600; font-variation-settings: 'opsz' 14; letter-spacing: .1em; color: var(--gold-ink); margin-right: 4px; }
.open__h { font-size: var(--t-h2); color: var(--green); max-width: 26ch; margin-top: 16px; }
.open--mid { text-align: center; }
.open--mid .open__h { margin-inline: auto; }

.lead { max-width: var(--measure); font-size: var(--t-lead); line-height: 1.55; }
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.05em; }
.prose strong { font-weight: 600; }
.note { max-width: 46rem; font-family: var(--f-ui); font-size: var(--t-small); line-height: 1.6; color: var(--ink-soft); }
.label { font-family: var(--f-ui); font-size: var(--t-ui); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }

.quote {
  max-width: 28ch; margin-inline: auto;
  font-family: var(--f-disp); font-size: var(--t-quote); font-weight: 500; font-style: italic;
  line-height: 1.22; font-variation-settings: 'opsz' 90, 'WONK' 1; text-align: center;
}

/* Dark contexts, grouped. MUST stay after section 4: :where() adds no
   specificity, so if these sit above the base rules the base rules win and
   night bands go back to ink and green. That shipped once as a dark green
   heading on near-black. */
/* Dark contexts in one place, so nothing inherits ink onto night again. */
:where(.band--night, .band--green, .hero, .bleed__body, .foot) .eye { color: var(--gold-lit); }
:where(.band--night, .band--green, .hero, .bleed__body, .foot) .open__h { color: var(--on-night); }
:where(.band--night, .band--green, .hero, .bleed__body, .foot) .open__n { color: var(--gold-lit); }
:where(.band--night, .band--green, .hero, .bleed__body, .foot) .lead,
:where(.band--night, .band--green, .hero, .bleed__body, .foot) .prose { color: var(--on-night); }
:where(.band--night, .band--green, .hero, .bleed__body, .foot) .note { color: var(--on-night-2); }
:where(.band--night, .band--green, .hero, .bleed__body, .foot) :is(h1, h2, h3) em { color: var(--gold-lit); }
:where(.band--night, .band--green, .hero, .bleed__body, .foot) :focus-visible { outline-color: var(--gold-lit); }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 16px 26px; border: 1px solid transparent;
  font-family: var(--f-ui); font-size: var(--t-ui); font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; cursor: pointer;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.btn__x { opacity: .75; }
.btn--gold { background: var(--gold); border-color: var(--gold); color: var(--night); }
.btn--gold:hover { background: var(--gold-lit); border-color: var(--gold-lit); }
.btn--ghost { border-color: var(--on-night-2); color: var(--on-night); }
.btn--ghost:hover { background: var(--on-night); color: var(--night); }
.btn--green { background: var(--green-deep); border-color: var(--green-deep); color: var(--on-night); }
.btn--green:hover { background: var(--green); border-color: var(--green); }
.btn--line { border-color: var(--ink); color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--paper); }
.btns { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; }
.btns--mid { justify-content: center; }

/* --------------------------------------------------------------------------
   6. THE ONE ORNAMENT: a gold hairline inset over a photograph
   -------------------------------------------------------------------------- */
.plate { position: relative; }
.plate img { width: 100%; }
.plate::after {
  content: ""; position: absolute; inset: clamp(9px, 1.1vw, 16px);
  border: 1px solid rgba(216, 169, 78, .6); pointer-events: none;
}
.plate__chip {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  padding: 8px 14px; background: var(--cream); color: var(--ink);
  font-family: var(--f-ui); font-size: var(--t-ui); font-weight: 500; letter-spacing: .18em;
}

/* --------------------------------------------------------------------------
   7. NAV. Solid by default; transparent only over the hero, and even then it
   carries a scrim, so cream links can never sit on a light ground.
   -------------------------------------------------------------------------- */
/* LONGHANDS ONLY in both nav states, deliberately.
   The nav has a 1px bottom border. A gradient background is sized to the
   PADDING box and tiles by default, so the leftover 1px border strip paints the
   gradient's FIRST stop at full alpha: a hard dark line across the top of the
   hero that vanished on scroll, because the scrolled state is a flat colour
   with nothing to tile. background-origin and background-repeat fix it, but a
   `background:` shorthand in either state silently resets both, which is how
   this bug survived its first fix. Do not reintroduce the shorthand here.
   border-color is also kept out of the transition: transitioned, it paints gold
   on the first frame before fading out. */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 200;
  background-color: color-mix(in srgb, var(--night) 94%, transparent);
  background-image: none;
  background-origin: border-box;
  background-repeat: no-repeat;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule-night);
  transition: background-color .35s ease;
}
.nav--top {
  background-color: transparent;
  background-image: linear-gradient(to bottom, rgba(20, 16, 10, .66), rgba(20, 16, 10, .22) 60%, rgba(20, 16, 10, 0));
  background-origin: border-box;
  background-repeat: no-repeat;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: transparent;
}
.nav__in {
  display: flex; align-items: center; gap: clamp(14px, 3vw, 46px);
  width: min(100% - (var(--edge) * 2), 1460px); margin-inline: auto;
  min-height: 68px;
}
.nav--top .nav__in { min-height: 82px; }
.wm { display: inline-flex; align-items: center; padding-block: 10px; }
.wm img { height: 42px; width: auto; transition: height .35s ease; }
.nav--top .wm img { height: 50px; }

.nav__links { display: flex; align-items: center; gap: clamp(13px, 1.9vw, 32px); margin-left: auto; }
.nav__links a:not(.btn) {
  padding-block: 13px; font-family: var(--f-ui); font-size: var(--t-ui); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--on-night);
  border-bottom: 1px solid transparent;
}
.nav__links a:not(.btn):hover { border-bottom-color: var(--gold-lit); }
.nav__links a[aria-current="true"] { color: var(--gold-lit); border-bottom-color: var(--gold-lit); }

.nav__burger {
  display: none; margin-left: auto; padding: 12px 0 12px 14px;
  background: none; border: 0; color: var(--on-night);
  font-family: var(--f-ui); font-size: var(--t-ui); font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; cursor: pointer;
}
.nav__panel {
  position: fixed; inset: 0; z-index: 199;
  display: flex; flex-direction: column; justify-content: center;
  padding: 96px var(--edge) 40px; background: var(--night);
  transform: translateY(-100%); visibility: hidden;
  transition: transform .44s cubic-bezier(.5, 0, .1, 1), visibility 0s .44s;
}
.nav__panel[data-open="true"] {
  transform: none; visibility: visible;
  transition: transform .44s cubic-bezier(.5, 0, .1, 1), visibility 0s 0s;
}
.nav__panel a:not(.btn) {
  padding: 15px 0; border-bottom: 1px solid var(--rule-night);
  font-family: var(--f-disp); font-size: 1.6rem; font-weight: 500; color: var(--on-night);
}
.nav__panel .btn { margin-top: 26px; align-self: start; }

/* --------------------------------------------------------------------------
   8. HERO. Typographic. No media.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: clamp(120px, 17vh, 190px) 0 clamp(56px, 8vh, 104px);
  background: var(--night);
  color: var(--on-night);
  overflow: hidden;
  text-align: center;
}
/* The pool of light, drawn rather than photographed. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
/* Light, because the file already carries its own centre scrim. Top keeps the
   nav readable, the soft radial gives the headline a ground, the bottom seats
   the facts row. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(20, 16, 10, .58) 0%, rgba(20, 16, 10, .12) 24%, rgba(20, 16, 10, 0) 46%),
    radial-gradient(62% 46% at 50% 52%, rgba(20, 16, 10, .40), rgba(20, 16, 10, .12) 62%, transparent 78%),
    linear-gradient(to top, rgba(20, 16, 10, .66) 0%, rgba(20, 16, 10, .18) 22%, rgba(20, 16, 10, 0) 40%);
  pointer-events: none;
}
/* No frame and no plate behind the eyebrow. Both were removed: a solid patch
   over a photograph reads as a sticker, and a hairline box around a full-bleed
   image fights it. The eyebrow sits in the flow between two rules instead. */
.hero__in { position: relative; z-index: 2; }
.hero__eye {
  justify-content: center;
  margin-bottom: clamp(18px, 2.4vw, 28px);
  color: var(--gold-lit);
}
.hero__eye::before, .hero__eye::after { background: var(--gold-lit); opacity: .7; }
.hero__h {
  font-size: var(--t-hero);
  max-width: 20ch;
  margin-inline: auto;
  color: var(--on-night);
}
.hero__sub {
  max-width: 34rem;
  margin: clamp(20px, 2.4vw, 30px) auto 0;
  font-size: var(--t-lead);
  line-height: 1.54;
  color: var(--on-night-2);
}
.hero__btns { margin-top: clamp(26px, 3vw, 40px); }
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px clamp(18px, 3vw, 46px);
  margin-top: clamp(34px, 4.6vw, 66px);
  padding-top: clamp(18px, 2.2vw, 26px);
  border-top: 1px solid var(--rule-night);
  font-family: var(--f-ui);
  font-size: var(--t-ui);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-night-2);
}
.hero__facts b { color: var(--gold-lit); font-weight: 500; }

/* A visual break in a run of text. Image-forward, one caption, no headline. */
.strip { position: relative; }
.strip img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.strip figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: 13px clamp(14px, 1.8vw, 22px);
  background: var(--cream);
  font-family: var(--f-ui);
  font-size: var(--t-ui);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   9. MARQUEE. Autonomous, seamless, pausable. The old site's moving banner.
   The track holds the list twice and slides exactly half its width.
   -------------------------------------------------------------------------- */
.marq {
  overflow: hidden;
  background: var(--cream);
  border-block: 1px solid var(--rule);
}
.marq__track {
  display: flex;
  width: max-content;
  animation: marq 42s linear infinite;
}
.marq:hover .marq__track,
.marq:focus-within .marq__track { animation-play-state: paused; }
.marq ul {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: clamp(22px, 3.2vw, 54px);
  padding: clamp(15px, 1.8vw, 22px) clamp(11px, 1.6vw, 27px);
  min-width: 100vw;          /* keeps the -50% loop seamless at any width */
}
.marq li {
  display: flex;
  align-items: center;
  gap: clamp(22px, 3.2vw, 54px);
  font-family: var(--f-disp);
  font-style: italic;
  font-size: clamp(1.05rem, 1.9vw, 1.32rem);
  font-weight: 500;
  color: var(--green);
  white-space: nowrap;
}
.marq li::after { content: "\25C6"; font-style: normal; font-size: .46em; color: var(--gold); }
@keyframes marq { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   10. WHY. Education first: what it does, why it beats the alternative.
   -------------------------------------------------------------------------- */
.why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 46px); }
.why__i { padding-top: 20px; border-top: 2px solid var(--gold); }
.why__h { font-family: var(--f-disp); font-size: var(--t-h3); font-weight: 600; color: var(--green); }
.why__t { margin-top: 10px; font-family: var(--f-ui); font-size: var(--t-small); line-height: 1.6; color: var(--ink-soft); }

/* Uses: a plain ruled list, no boxes */
.uses { border-top: 1px solid var(--rule-firm); }
.uses__i {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: 6px clamp(20px, 3vw, 48px);
  padding: clamp(14px, 1.6vw, 20px) 0;
  border-bottom: 1px solid var(--rule);
}
.uses__k { font-family: var(--f-disp); font-size: var(--t-h3); font-weight: 600; }
.uses__t { font-family: var(--f-ui); font-size: var(--t-small); color: var(--ink-soft); max-width: 48ch; }

/* Against the alternative: two columns, no table */
.vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gut); }
.vs--stack { grid-template-columns: 1fr; gap: 18px; }
.vs__c { padding: clamp(22px, 2.6vw, 34px); background: var(--cream); border-top: 3px solid var(--green); }
.vs__c--other { border-top-color: var(--rule-firm); background: transparent; }
.vs__h { font-size: var(--t-h3); margin-bottom: 14px; }
.vs__l > li { position: relative; padding-left: 26px; margin-top: 11px; font-family: var(--f-ui); font-size: var(--t-small); }
.vs__l > li::before { content: ""; position: absolute; left: 0; top: .6em; width: 13px; height: 2px; background: var(--green); }
.vs__c--other .vs__l > li::before { background: var(--rule-firm); }

/* --------------------------------------------------------------------------
   11. RISK. Three things that decide a container. No table, no promises.
   -------------------------------------------------------------------------- */
.risk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 40px); }
.risk__i { padding: clamp(22px, 2.5vw, 32px); border: 1px solid var(--rule-night); }
.risk__n { font-family: var(--f-disp); font-size: 1.5rem; font-weight: 600; color: var(--gold-lit); font-variation-settings: 'opsz' 60; }
.risk__h { font-size: var(--t-h3); margin: 10px 0 10px; color: var(--on-night); }
.risk__t { font-family: var(--f-ui); font-size: var(--t-small); line-height: 1.58; color: var(--on-night-2); }

/* --------------------------------------------------------------------------
   12. RANGE. A selector, not a spreadsheet.
   -------------------------------------------------------------------------- */
.range { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 3.4vw, 58px); align-items: start; }
.range__b { align-self: center; }
.picks { border-top: 1px solid var(--rule-firm); }
.pick {
  display: grid; grid-template-columns: 52px 1fr auto; align-items: center;
  gap: clamp(13px, 1.8vw, 24px); width: 100%; padding: 14px 0;
  border: 0; border-bottom: 1px solid var(--rule); background: none;
  text-align: left; cursor: pointer;
  transition: padding-inline .22s ease, background .22s ease;
}
.pick:hover { background: var(--paper-2); padding-inline: 10px; }
.pick img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.pick__n { font-family: var(--f-disp); font-size: 1.15rem; font-weight: 600; }
.pick__u { font-family: var(--f-ui); font-size: var(--t-ui); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-soft); }
.pick[aria-selected="true"] { background: var(--paper-2); }
.pick[aria-selected="true"] .pick__n { color: var(--green); }
.pick[aria-selected="true"] .pick__u { color: var(--gold-ink); }

/* --------------------------------------------------------------------------
   13. STATES, chosen by the reader
   -------------------------------------------------------------------------- */
.tabs { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 24px; }
.tab {
  padding: 12px 20px; background: none; border: 1px solid var(--rule-firm);
  font-family: var(--f-ui); font-size: var(--t-ui); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.tab:hover { border-color: var(--green); }
.tab[aria-selected="true"] { background: var(--green-deep); border-color: var(--green-deep); color: var(--on-night); }
.tab__n { opacity: .7; margin-right: 8px; }
.panel__in { display: grid; grid-template-columns: 1.1fr 1fr; }
.panel__fig img { width: 100%; height: 100%; aspect-ratio: 3/2; object-fit: cover; }
.panel__b { padding: clamp(22px, 2.8vw, 42px); background: var(--cream); align-self: center; }
.panel__h { font-size: var(--t-h3); margin: 11px 0; color: var(--green); }
html.js .panel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   14. STEPS
   -------------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 68px); }
.steps--one { grid-template-columns: 1fr; }
.steps__i { display: grid; grid-template-columns: 3.4rem 1fr; gap: clamp(13px, 1.6vw, 24px); padding: clamp(18px, 2.2vw, 28px) 0; border-top: 1px solid var(--rule); }
.steps__n { font-family: var(--f-disp); font-size: 1.5rem; font-weight: 600; line-height: 1; color: var(--gold-ink); font-variation-settings: 'opsz' 60; }
.steps__h { font-size: var(--t-h3); margin-bottom: 6px; }
.steps__t { font-family: var(--f-ui); font-size: var(--t-small); color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   15. PROOF
   -------------------------------------------------------------------------- */
.proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); }
.proof figcaption { margin-top: 15px; }
.proof__h { font-family: var(--f-disp); font-size: var(--t-h3); font-weight: 600; color: var(--gold-lit); }
.proof__t { margin-top: 6px; font-family: var(--f-ui); font-size: var(--t-small); color: var(--on-night-2); }
.proof__i img { aspect-ratio: 4/5; object-fit: cover; }
.candid { margin-top: clamp(36px, 4.2vw, 66px); padding-left: clamp(18px, 2.4vw, 32px); border-left: 2px solid var(--gold); }
.candid__h { font-size: var(--t-h3); margin-bottom: 11px; color: var(--on-night); }

/* --------------------------------------------------------------------------
   16. FULL-BLEED BAND
   -------------------------------------------------------------------------- */
.bleed { position: relative; min-height: min(56vh, 480px); display: flex; align-items: center; background: var(--night); overflow: hidden; }
.bleed__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bleed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(18, 14, 6, .56), rgba(18, 14, 6, .42) 45%, rgba(18, 14, 6, .70)); }
.bleed__body { position: relative; z-index: 1; width: 100%; padding-block: clamp(48px, 6vw, 84px); color: var(--on-night); }
.bleed .quote { color: var(--on-night); }

/* --------------------------------------------------------------------------
   17. CLOSE and FOOTER
   -------------------------------------------------------------------------- */
.ask { margin-top: clamp(20px, 2.4vw, 32px); padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--rule-night); }
.ask__l > li { padding: 11px 0; border-bottom: 1px solid var(--rule-night); font-family: var(--f-ui); font-size: var(--t-small); color: var(--on-night-2); }
.ask__l > li:last-child { border-bottom: 0; }
.ask__l b { color: var(--on-night); font-weight: 600; }

.foot { background: var(--green-deep); color: var(--on-night); border-top: 2px solid var(--gold); }
.foot__top { padding-block: clamp(42px, 5vw, 78px); }
.foot .wm img { height: 62px; }
.foot__h { font-family: var(--f-disp); font-size: 1.32rem; font-style: italic; font-weight: 500; max-width: 20ch; margin-top: 20px; color: var(--on-night); }
.foot__k { display: block; margin-bottom: 13px; font-family: var(--f-ui); font-size: var(--t-ui); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-lit); }
.foot__nav { display: grid; gap: 3px; }
.foot__nav a { padding-block: 7px; font-family: var(--f-ui); font-size: var(--t-small); color: var(--on-night); }
.foot__nav a:hover { color: var(--gold-lit); }
.foot__bar { display: flex; flex-wrap: wrap; gap: 9px clamp(18px, 3vw, 42px); padding-block: 20px; border-top: 1px solid var(--rule-night); font-family: var(--f-ui); font-size: var(--t-small); color: var(--on-night-2); }
.foot__bar p { margin: 0; }
.foot__end { margin-left: auto; }

/* --------------------------------------------------------------------------
   18. MOTION. No reveal, no scroll-driven state. See the note in section 19
   of the previous build: hiding content behind a script broke the live site.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marq__track { animation: none; }
  .marq ul:last-child { display: none; }        /* one copy is enough when still */
  .marq { overflow: auto; }
  .nav, .nav__panel, .wm img, .tab, .pick, .btn { transition: none; }
}

/* --------------------------------------------------------------------------
   19. RESPONSIVE. Mobile is designed here, not left to inherit.
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .c1-5, .c1-6, .c1-7, .c7-12, .c8-12 { grid-column: 1 / span 12; }
  .why { grid-template-columns: 1fr 1fr; }
  .risk { grid-template-columns: 1fr; }
  .range { grid-template-columns: 1fr; }
  .panel__in { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .nav__in, .nav--top .nav__in { min-height: 64px; }
  html { scroll-padding-top: 72px; }
  .vs { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  /* the page was too long to scroll on a phone: tighten every rhythm */
  :root { --pad: 44px; --gut: 16px; }
  .open { margin-bottom: 20px; }
  .why { gap: 22px; }
  .uses__i { padding-block: 12px; }
  .steps__i { padding-block: 15px; }
  .risk__i { padding: 18px; }
  .vs__c { padding: 20px; }
  /* the hero's frame tightens and the tag needs room to breathe */
  .hero { padding-top: clamp(104px, 15vh, 140px); }
  .hero__h { max-width: 16ch; }
  /* Three pairs on two wrapped lines read as one run-on string. One per line. */
  .hero__facts { flex-direction: column; gap: 7px; }
  /* The flanking rules pushed "coir" onto a second line on its own */
  .hero__eye { font-size: .67rem; letter-spacing: .11em; }
  .hero__eye::before, .hero__eye::after { display: none; }
  .why { grid-template-columns: 1fr; }
  .proof { grid-template-columns: 1fr; }
  .uses__i { grid-template-columns: 1fr; gap: 4px; }
  .steps__i { grid-template-columns: 2.6rem 1fr; }
  .marq li { font-size: 1.02rem; }
  .strip img { aspect-ratio: 16 / 10; }

  /* A 4:5 photograph at full width is most of a phone screen on its own, and
     there are three of them down the page. Crop them shorter here. */
  #why .plate img,
  #how .plate img { aspect-ratio: 4 / 3; object-fit: cover; }

  /* Uses: two compact columns rather than five full-width rows */
  .uses { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; border-top: 0; }
  .uses__i { padding-block: 13px; border-top: 1px solid var(--rule-firm); border-bottom: 0; }
  .uses__k { font-size: 1.04rem; }

  /* Formats: two columns, and the trailing index is redundant at this size */
  .picks { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; border-top: 0; }
  .pick {
    grid-template-columns: 44px 1fr; gap: 11px; padding: 11px 0;
    border-top: 1px solid var(--rule-firm); border-bottom: 0;
  }
  .pick:hover { padding-inline: 0; }
  .pick__n { font-size: 1rem; }
  .pick > :last-child { display: none; }

  /* Proof: a swipeable rail. Stacked, these three portraits ran to three and a
     half screens between the section head and the candid note. */
  .proof {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%;
    gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .proof::-webkit-scrollbar { display: none; }
  .proof:focus-visible { outline: 2px solid var(--gold-lit); outline-offset: 6px; }
  .proof__i { scroll-snap-align: start; }
  .proof__i img { aspect-ratio: 1 / 1; }
  .proof figcaption { margin-top: 11px; }
}

@media (max-width: 420px) {
  .btn { padding: 15px 20px; }
  .btns { gap: 10px; }
}