/* ============================================================
   Aragonite Source — main.css
   Palette:
     #0E2342 navy-900   #12305C navy-800   #173D6F navy-700
     #78B3DF blue-300   #F4EFE6 cream
     #12294A ink        #FDFBF6 card       #081C30 hero-base
   ============================================================ */

/* ============================================================
   FONTS — self-hosted (latin subset). Archivo upright is a
   variable font: one file covers weights 300–600. Libre Caslon
   Display ships as a separate static face. Italic serif accents
   (.i-accent, .quote__text) are synthesized from the upright
   Caslon face — no dedicated italic file is shipped.
   ============================================================ */
@font-face {
  font-family: 'Libre Caslon Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/libre-caslon-display-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/archivo-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --navy-900: #0E2342;
  --navy-800: #12305C;
  --navy-700: #173D6F;
  --blue-300: #78B3DF;
  --cream:    #F4EFE6;
  --ink:      #12294A;
  --card:     #FDFBF6;
  --hero-base:#081C30;
  --label:    #3E6CA4;
  --serif: 'Libre Caslon Display', Georgia, serif;
  --sans:  'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pad-x: 48px;
  --maxw: 1200px;
}

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

/* scroll-padding-top keeps in-page nav targets clear of the fixed header
   (~99px tall on desktop). Mirrored down to ~90px at the <=600px breakpoint. */
html { scroll-behavior: smooth; scroll-padding-top: 110px; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--navy-900);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html.nav-open, body.nav-open { overflow: hidden; }

img { max-width: 100%; }

::selection { background: var(--blue-300); color: var(--navy-900); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bob    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
@keyframes shimmer{ 0%,100% { opacity: .35; } 50% { opacity: .8; } }

/* --- Focus visibility --- */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--blue-300);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Shared building blocks --- */
.container { max-width: var(--maxw); margin: 0 auto; width: 100%; }

.h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.h2--light { color: var(--cream); }

.i-accent { font-style: italic; color: var(--label); }
.i-accent--blue { color: var(--blue-300); }

.eyebrow {
  margin: 0 0 20px;
  font-size: 12px;
  letter-spacing: .34em;
  text-transform: uppercase;
}
.eyebrow--light { color: var(--label); }
.eyebrow--blue  { color: var(--blue-300); }

/* --- Buttons --- */
.btn {
  display: inline-block;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: .06em;
  padding: 15px 30px;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.btn--primary { background: var(--blue-300); color: var(--navy-900); font-weight: 600; }
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(120,179,223,.35); }
.btn--ghost { border: 1px solid rgba(244,239,230,.35); color: var(--cream); font-weight: 500; }
.btn--ghost:hover { border-color: var(--blue-300); background: rgba(120,179,223,.1); }
.btn--lg { padding: 17px 36px; font-size: 15px; letter-spacing: .04em; }

/* ============================================================
   NAV
   ============================================================ */
/* z-index sits ABOVE the mobile-nav overlay (60) so the toggle stays
   tappable to close the menu on touch devices. */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 70; }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--pad-x);
  background: rgba(14,35,66,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(120,179,223,.14);
  animation: fadeIn .9s ease .2s both;
}

.nav__logo { display: flex; align-items: center; text-decoration: none; }
.nav__logo-plate {
  display: flex; align-items: center; justify-content: center;
  background: var(--cream); border-radius: 9px; padding: 7px 14px;
}
.nav__logo-plate img { height: 48px; width: auto; display: block; }

.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__links > a {
  color: rgba(244,239,230,.78);
  text-decoration: none;
  font-size: 13.5px;
  letter-spacing: .06em;
  transition: color .25s ease;
}
.nav__links > a:hover { color: var(--blue-300); }
/* Scoped to out-specify `.nav__links > a`, so no !important needed. */
.nav__links > a.nav__cta {
  color: var(--navy-900);
  background: var(--blue-300);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 10px 22px;
  border-radius: 999px;
}
.nav__links > a.nav__cta:hover { background: var(--cream); color: var(--navy-900); transform: translateY(-2px); }

/* hamburger — hidden on desktop */
.nav__toggle {
  display: none;
  width: 46px; height: 46px;
  padding: 0;
  border: 1px solid rgba(120,179,223,.3);
  background: rgba(120,179,223,.08);
  border-radius: 10px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav__toggle-bars,
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  content: "";
  display: block;
  width: 22px; height: 2px;
  background: var(--cream);
  border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease;
}
.nav__toggle-bars { position: relative; }
.nav__toggle-bars::before { position: absolute; top: -7px; left: 0; }
.nav__toggle-bars::after  { position: absolute; top: 7px; left: 0; }

/* When the menu is open the toggle becomes a clear X (close affordance). */
body.nav-open .nav__toggle-bars { background: transparent; }
body.nav-open .nav__toggle-bars::before { top: 0; transform: rotate(45deg); }
body.nav-open .nav__toggle-bars::after  { top: 0; transform: rotate(-45deg); }

/* ============================================================
   MOBILE NAV OVERLAY
   ============================================================ */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(8,28,48,.98);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mobile-nav.is-open { display: flex; }
.mobile-nav__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 100%;
  padding: 0 24px;
}
.mobile-nav__inner > a {
  color: var(--cream);
  text-decoration: none;
  font-family: var(--serif);
  font-size: 30px;
  letter-spacing: .01em;
}
.mobile-nav__inner > a:hover { color: var(--blue-300); }
/* Scoped to out-specify `.mobile-nav__inner > a`, so no !important needed. */
.mobile-nav__inner > a.mobile-nav__cta {
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--navy-900);
  background: var(--blue-300);
  padding: 16px 34px;
  border-radius: 999px;
}

/* ============================================================
   HERO
   ============================================================ */
.hero-wrap { height: 200vh; }

.hero {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--hero-base);
  overflow: hidden;
  isolation: isolate;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(178deg, rgba(8,28,48,.25) 0%, rgba(8,28,48,0) 34%, rgba(8,28,48,.6) 100%);
  pointer-events: none;
}
.hero-glow {
  position: absolute;
  left: -10%; right: -10%; bottom: -30%;
  height: 60%;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(50% 100% at 50% 100%, rgba(120,179,223,.22) 0%, transparent 70%);
  animation: shimmer 7s ease-in-out infinite;
}

.hero-inner {
  position: relative;
  z-index: 3;
  padding: 160px var(--pad-x) 96px;
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
}

.hero-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 8.4vw, 118px);
  line-height: .98;
  letter-spacing: -0.015em;
  color: var(--cream);
}
.hero-title__l1 { display: block; }
.hero-title__l2 { display: block; font-style: italic; color: var(--blue-300); }

.hero-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-top: 42px;
  flex-wrap: wrap;
}
.hero-sub {
  margin: 0;
  max-width: 480px;
  font-size: 18px;
  line-height: 1.65;
  font-weight: 300;
  color: rgba(244,239,230,.82);
}
.hero-ctas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero-scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  color: rgba(244,239,230,.72);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.hero-scroll__arrow {
  display: inline-block;
  color: var(--blue-300);
  font-size: 15px;
  animation: bob 1.8s ease-in-out infinite;
}

/* ============================================================
   STORY
   ============================================================ */
.story {
  background: var(--cream);
  padding: 130px var(--pad-x);
  position: relative;
  z-index: 2;
}
.story__grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 72px;
  align-items: center;
}
.story__body {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.75;
  font-weight: 300;
  color: rgba(18,41,74,.85);
}
.story__body--last { margin-bottom: 0; }
.story .eyebrow { color: var(--label); }
.story__stats { display: flex; gap: 40px; margin-top: 40px; }
.story__stat { border-left: 1px solid rgba(18,41,74,.25); padding-left: 18px; }
.story__stat-num { font-family: var(--serif); font-size: 34px; color: var(--ink); }
.story__stat-label {
  font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--label); margin-top: 4px;
}
.story .h2 { margin-bottom: 28px; }
.story .eyebrow { margin-bottom: 22px; }

.story__imgwrap { overflow: hidden; border-radius: 4px; height: 560px; }
.story__img { height: 690px; }
.story__img img { width: 100%; height: 690px; object-fit: cover; display: block; }
.story__caption {
  margin: 12px 4px 0;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: rgba(18,41,74,.6);
}

/* ============================================================
   WHY — sticky stack
   ============================================================ */
.why {
  background: var(--cream);
  padding: 30px var(--pad-x) 140px;
  position: relative;
  z-index: 2;
}
.why__head { margin-bottom: 64px; }
.why .eyebrow { color: var(--label); }
.why__head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.why__intro {
  margin: 0;
  max-width: 380px;
  font-size: 15.5px;
  line-height: 1.65;
  font-weight: 300;
  color: rgba(18,41,74,.7);
}

.stack { display: flex; flex-direction: column; gap: 40px; }
.stack-card {
  position: sticky;
  top: var(--stick, 120px);
  background: var(--card);
  border: 1px solid rgba(18,41,74,.12);
  border-radius: 8px;
  padding: 56px 60px;
  min-height: 300px;
  box-shadow: 0 30px 60px rgba(18,41,74,.1);
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items: start;
}
.stack-card--dark {
  background: var(--ink);
  border-color: rgba(120,179,223,.25);
  box-shadow: 0 30px 60px rgba(18,41,74,.25);
}
.stack-card__num {
  font-family: var(--serif);
  font-size: 88px;
  line-height: 1;
  color: rgba(60,113,131,.25);
}
.stack-card__num--dark { color: rgba(120,179,223,.35); }
.stack-card__tag {
  font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--label); margin-top: 14px;
}
.stack-card__tag--dark { color: var(--blue-300); }
.stack-card__title {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 34px;
  color: var(--ink);
}
.stack-card__title--dark { color: var(--cream); }
.stack-card__text {
  margin: 0;
  max-width: 560px;
  font-size: 16.5px;
  line-height: 1.75;
  font-weight: 300;
  color: rgba(18,41,74,.78);
}
.stack-card__text--dark { color: rgba(244,239,230,.78); }

/* ============================================================
   STATS
   ============================================================ */
.stats {
  background: var(--navy-900);
  padding: 110px var(--pad-x);
  border-top: 1px solid rgba(120,179,223,.15);
  position: relative;
  z-index: 2;
}
.stats__eyebrow { margin: 0 0 56px; text-align: center; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.stat { text-align: center; }
.stat--divided { border-left: 1px solid rgba(120,179,223,.18); }
.stat__num {
  font-family: var(--serif);
  font-size: clamp(44px, 5vw, 72px);
  color: var(--blue-300);
  line-height: 1;
}
.stat__label {
  font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(244,239,230,.6); margin-top: 14px;
}

/* ============================================================
   RAIL — pinned horizontal markets
   ============================================================ */
.rail-wrap { position: relative; z-index: 2; }
.rail-section {
  background: var(--navy-900);
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 90px 0 40px;
  position: sticky;
  top: 0;
}
.rail-head { margin: 0 auto 44px; padding: 0 var(--pad-x); }
.rail-head .eyebrow { margin-bottom: 18px; }
.rail-head__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.rail-head__title {
  font-size: clamp(30px, 4vw, 54px);
  max-width: 680px;
}
.rail-head__hint {
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(244,239,230,.5);
}

/* Static default: the horizontal scrollbar stays visible so the market cards
   are always reachable by manual sideways scrolling — critical when JS is
   disabled. The animated scrub path opts into a hidden scrollbar via
   html.js-scrub (GSAP drives the x-motion instead). */
.rail { overflow-x: auto; overflow-y: hidden; padding: 0 var(--pad-x); }
.rail::-webkit-scrollbar { height: 10px; }
.rail::-webkit-scrollbar-thumb { background: rgba(120,179,223,.4); border-radius: 10px; }
html.js-scrub .rail { scrollbar-width: none; }
html.js-scrub .rail::-webkit-scrollbar { display: none; }
.rail-track { display: flex; gap: 20px; width: max-content; padding-bottom: 8px; }

.market {
  display: flex;
  flex-direction: column;
  width: clamp(400px, 32vw, 480px);
  height: clamp(420px, 52vh, 600px);
  text-decoration: none;
  background: var(--navy-800);
  border: 1px solid rgba(120,179,223,.2);
  border-radius: 8px;
  overflow: hidden;
  transition: background .35s ease, transform .35s ease;
}
.market:hover { background: var(--navy-700); transform: translateY(-6px); }
.market__media { position: relative; flex: 1 1 55%; min-height: 0; overflow: hidden; }
.market__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.market__media-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,35,66,.18) 0%, transparent 40%, rgba(18,48,92,.55) 100%);
}
.market__num {
  position: absolute; top: 18px; left: 22px;
  font-family: var(--serif); font-size: 40px;
  color: rgba(244,239,230,.85);
  text-shadow: 0 2px 14px rgba(14,35,66,.6);
}
.market__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 45%;
  padding: 26px 30px 30px;
}
.market__title {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.12;
  color: var(--cream);
}
.market__blurb {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 300;
  color: rgba(244,239,230,.65);
}
.market__arrow { font-size: 18px; color: var(--blue-300); align-self: flex-end; }

.market--cta {
  justify-content: space-between;
  background: var(--blue-300);
  border: none;
  padding: 36px 32px;
}
.market--cta:hover { transform: translateY(-6px); }
.market--cta__tag {
  font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(14,35,66,.6);
}
.market--cta__title {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.1;
  color: var(--navy-900);
}
.market--cta__text {
  margin: 0 0 22px;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(14,35,66,.75);
}
.market--cta__link {
  display: inline-block;
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy-900);
  border-bottom: 2px solid var(--navy-900);
  padding-bottom: 3px;
}

/* The scrubbed progress bar is meaningful only under the JS scrub; hidden by
   default so the static fallback doesn't show a dead, never-filling bar. */
.rail-progress-wrap { margin: 36px auto 0; padding: 0 var(--pad-x); display: none; }
html.js-scrub .rail-progress-wrap { display: block; }
.rail-progress-track { height: 2px; background: rgba(120,179,223,.15); border-radius: 2px; overflow: hidden; }
.rail-progress { height: 100%; background: var(--blue-300); transform: scaleX(0); transform-origin: left center; }

/* ============================================================
   SUPPLY
   ============================================================ */
.supply {
  background: var(--cream);
  padding: 130px var(--pad-x);
  position: relative;
  z-index: 2;
}
.supply__head { margin-bottom: 70px; }
.supply .eyebrow { color: var(--label); }
.supply__title { max-width: 760px; }

.supply__timeline { position: relative; }
.supply__rail-bg {
  position: absolute; top: 6px; left: 0; right: 0; height: 2px;
  background: rgba(18,41,74,.12);
}
.supply__rail-fill {
  position: absolute; top: 6px; left: 0; right: 0; height: 2px;
  background: var(--label);
  transform-origin: left center;
}
.supply__dot {
  position: absolute; top: 0; left: 0;
  width: 15px; height: 15px; margin-left: -7px;
  border-radius: 50%;
  background: var(--blue-300);
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 5px rgba(120,179,223,.25);
}
.supply__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding-top: 44px;
}
.supply__step-title {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 25px;
  color: var(--ink);
}
.supply__step-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  font-weight: 300;
  color: rgba(18,41,74,.75);
}

.supply__photos {
  margin-top: 90px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.supply__photo { overflow: hidden; border-radius: 4px; height: 340px; }
.supply__photo-inner { height: 440px; }
.supply__photo-inner img { width: 100%; height: 440px; object-fit: cover; display: block; }

/* ============================================================
   CONTACT + FOOTER
   ============================================================ */
.contact {
  background: var(--navy-900);
  padding: 140px var(--pad-x) 0;
  border-top: 1px solid rgba(120,179,223,.15);
  position: relative;
  z-index: 2;
}
.quote { margin: 0 auto 110px; max-width: 780px; text-align: center; }
.quote__text {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.4;
  color: rgba(244,239,230,.9);
}
.quote__by {
  margin-top: 24px;
  font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--blue-300);
}

.cta { text-align: center; padding-bottom: 110px; }
.cta__title {
  margin: 0 0 30px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1.02;
  color: var(--cream);
}
.cta__text {
  margin: 0 auto 40px;
  max-width: 460px;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 300;
  color: rgba(244,239,230,.7);
}
.cta__actions { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 30px 0 36px;
  border-top: 1px solid rgba(120,179,223,.15);
}
.footer__logo-plate {
  display: flex; align-items: center; justify-content: center;
  background: var(--cream); border-radius: 7px; padding: 6px 12px;
}
.footer__logo-plate img { height: 24px; width: auto; display: block; }
.footer__meta { font-size: 13px; font-weight: 300; color: rgba(244,239,230,.6); }

/* ============================================================
   SCROLL REVEALS (IntersectionObserver-driven)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal--fade { transform: none; }
.reveal.revealed { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ---- <= 900px : mobile nav, single-column layouts ---- */
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }

  .story__grid { grid-template-columns: 1fr; gap: 44px; }

  .stack-card {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px;
    min-height: 0;
    top: 88px;
  }
  .stack-card__num { font-size: 64px; }
  .stack-card__tag { margin-top: 8px; }

  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 28px; }
  .stat--divided { border-left: none; }

  .supply__steps { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
  .supply__photos { grid-template-columns: 1fr; gap: 22px; }
}

/* ---- <= 600px : tighter padding, narrower rail cards ---- */
@media (max-width: 600px) {
  :root { --pad-x: 24px; }
  html { scroll-padding-top: 90px; }

  .hero-inner { padding-top: 140px; padding-bottom: 72px; }

  .story { padding-top: 90px; padding-bottom: 90px; }
  .story__imgwrap { height: 360px; }
  .story__img { height: 460px; }
  .story__img img { height: 460px; }

  .why { padding-bottom: 100px; }

  .stats { padding-top: 80px; padding-bottom: 80px; }

  .supply { padding-top: 90px; padding-bottom: 90px; }
  .supply__steps { grid-template-columns: 1fr; gap: 34px; }
  .supply__photo { height: 300px; }

  .contact { padding-top: 100px; }
  .quote { margin-bottom: 80px; }

  .market { width: 85vw; height: clamp(400px, 62vh, 560px); }
  .market--cta { width: 85vw; }

  .footer { justify-content: center; text-align: center; gap: 14px; }
}

/* ---- <= 400px : keep everything inside a small viewport ---- */
@media (max-width: 400px) {
  .stack-card { padding: 22px; }
  .stack-card__num { font-size: 56px; }
  .stats__grid { gap: 32px 20px; }
  .story__stats { gap: 24px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-glow,
  .hero-scroll__arrow { animation: none !important; }
  .nav { animation: none !important; }
  *, *::before, *::after { transition-duration: .001ms !important; }
}

/* ============================================================
   JS-DRIVEN VISIBILITY GUARDS
   ============================================================ */
/* Hero copy is hidden pre-animation ONLY when GSAP will actually run it,
   so deferred JS can't flash the text before the intro fires. The inline
   <head> script adds .js-anim; the animating path removes it once GSAP owns
   the inline opacity, and every non-animating path adds .no-anim (disabling
   this rule) — so the copy can never stay permanently hidden. A 2.5s inline
   safety timer also clears .js-anim even if every script fails to load. */
html.js-anim:not(.no-anim) [data-hero-in] { opacity: 0; }

/* ============================================================
   NO-ANIM FALLBACK — reduced motion OR GSAP/ScrollTrigger absent.
   Undo the scroll-driven layout scaffolding so the page reads as a
   normal, fully static document. The rail's static presentation
   (visible scrollbar, static hint, hidden progress bar) is now the
   CSS DEFAULT — only html.js-scrub opts into the animated look — so
   no rail-specific no-anim rules are needed here (no-anim never gets
   js-scrub, so the defaults already apply).
   ============================================================ */
/* Kills the ~100vh of dead scroll the pinned hero scrub relies on. */
html.no-anim .hero-wrap { height: auto; }
/* The rail height is otherwise set by JS for the horizontal scrub. */
html.no-anim .rail-wrap { height: auto; }

/* Rail hint copy: the static "Scroll sideways →" shows by DEFAULT; the
   animated "Keep scrolling →" only appears once JS enables the scrub. */
.rail-head__hint-anim { display: none; }
html.js-scrub .rail-head__hint-anim { display: inline; }
html.js-scrub .rail-head__hint-static { display: none; }