/* Structural layout and responsive behaviour. Visual roles: design-system.css. */
@layer layout {
/* ============================================================
   INTEGRITY EARTH — design tokens
   The page is a sunrise: ink → bone → gold as the story heals.
   ============================================================ */
/* Shared tokens are defined in design-system.css. */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
}

body{
  font-family:var(--font-body);
  background:var(--bone);
  color:var(--ink);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
}
a,button{touch-action:manipulation}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold-bright);color:var(--ink);
  padding:12px 22px;font-weight:600;text-decoration:none;border-radius:0 0 10px 0;
}
.skip-link:focus{left:0}

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

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

section{scroll-margin-top:calc(var(--nav-h) + 8px)}

/* ---------- type scale ---------- */
.display-xl{
  font-family:var(--font-display);
  font-weight:300;
  font-variation-settings:"opsz" 144;
  font-size:clamp(2.9rem,6.6vw,6rem);
  line-height:1.08;
  letter-spacing:-0.02em;
  text-wrap:balance;
}
.display-l{
  font-family:var(--font-display);
  font-weight:300;
  font-variation-settings:"opsz" 136;
  font-size:clamp(2.8rem,6.2vw,5.3rem);
  line-height:1.1;
  letter-spacing:-0.015em;
  text-wrap:balance;
}
.eyebrow{
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold-ink);
  display:block;
  margin-bottom:var(--eyebrow-gap);
}
.lede{
  font-size:clamp(1.05rem,1.5vw,1.3rem);
  line-height:1.65;
  font-weight:400;
}
em.accent{font-style:italic;font-family:var(--font-display);color:var(--gold-ink)}
.on-bone em.accent,.on-bone-deep em.accent{color:var(--gold-ink)}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px max(clamp(20px,4vw,48px),env(safe-area-inset-left)) 20px max(clamp(20px,4vw,48px),env(safe-area-inset-right));
  padding-top:max(20px,env(safe-area-inset-top));
  /* padding is a layout property, and animating one is normally a thrash risk.
     Measured here because the nav is position:fixed: the change reflows only its
     own 23-element subtree, never the document. Worst forced-layout cost across
     eight state changes was 0.1ms against a 16.7ms frame. Intentional. */
  transition:background 700ms var(--ease-soft),box-shadow 700ms var(--ease-soft),padding 700ms var(--ease-soft),backdrop-filter 700ms var(--ease-soft);
}
.nav.scrolled{
  background:rgba(253,252,249,0.72);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  backdrop-filter:blur(20px) saturate(1.6);
  padding-top:14px;padding-bottom:14px;
  box-shadow:0 1px 0 rgba(38,51,43,0.06),0 10px 30px -18px rgba(38,51,43,0.16);
}
.nav.scrolled .nav-wordmark{color:var(--forest)}
.nav.scrolled .nav-links a{color:var(--stone)}
.nav.scrolled .nav-links a:hover{color:var(--gold-ink)}
.nav.scrolled .nav-links a[aria-current="page"]{color:var(--gold-ink)}
.nav.scrolled .nav-links a.nav-contact{color:var(--gold-ink);border-color:rgba(176,142,88,0.5)}
.nav.scrolled .nav-links a.nav-contact:hover{background:var(--gold-ink);color:var(--bone);border-color:var(--gold-ink)}
.nav-wordmark{
  font-family:var(--font-display);
  font-weight:500;
  font-variation-settings:"opsz" 34;
  font-size:1.18rem;
  color:var(--forest);
  text-decoration:none;
  letter-spacing:0.01em;
}
.nav-wordmark .earth{font-style:italic;color:var(--gold-ink)}
.nav-links{display:flex;gap:clamp(16px,2.6vw,36px);align-items:center;list-style:none}
.nav-links a{
  color:var(--stone);
  text-decoration:none;
  font-size:0.86rem;
  font-weight:500;
  letter-spacing:0.02em;
  transition:color 200ms var(--ease-soft);
  padding:10px 2px;
  display:inline-block;
}
.nav-links a:hover{color:var(--gold-ink)}
.nav-links a.nav-contact{
  color:var(--gold-ink);
  border:1px solid rgba(176,142,88,0.5);
  padding:8px 18px;border-radius:var(--r-pill);
  transition:background 250ms var(--ease-soft),color 250ms var(--ease-soft),border-color 250ms var(--ease-soft);
}
.nav-links a.nav-contact:hover{background:var(--forest);color:var(--bone);border-color:var(--forest)}
@media(max-width:820px){.nav-links li.hide-m{display:none}}

/* ---------- hero ---------- */
.hero{
  position:relative;height:100vh;height:100svh;min-height:640px;
  display:flex;align-items:flex-end;
  overflow:hidden;
}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
@media(max-width:700px){.hero-media img{object-position:58% 42%}}

/* ---------- ambient video loops ---------- */
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(253,252,249,0.40) 0%,rgba(253,252,249,0.07) 16%,rgba(253,252,249,0) 34%,rgba(253,252,249,0.40) 74%,rgba(253,252,249,0.69) 100%),
    linear-gradient(100deg,rgba(253,252,249,0.58) 0%,rgba(253,252,249,0.24) 32%,rgba(253,252,249,0) 56%);
}
@media(max-width:700px){
  .hero-scrim{
    background:
      linear-gradient(180deg,rgba(253,252,249,0.36) 0%,rgba(253,252,249,0.045) 20%,rgba(253,252,249,0) 40%,rgba(253,252,249,0.45) 72%,rgba(253,252,249,0.70) 100%);
  }
}
.hero-copy{
  position:relative;z-index:2;
  width:100%;
  max-width:var(--w-content);
  margin:0 auto;
  padding:0 clamp(20px,4vw,48px) clamp(56px,9vh,110px);
}
.hero-copy .eyebrow{color:var(--on-photo-label)}
.hero-copy h1{color:var(--forest);max-width:13ch}
.hero-copy h1 .pays{font-style:italic;color:var(--gold-ink)}
.hero-sub{
  margin-top:var(--lede-gap);
  max-width:52ch;
  color:var(--on-photo-body);
}
.scroll-cue{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  z-index:2;width:1px;height:52px;overflow:hidden;
}
.scroll-cue::after{
  content:"";position:absolute;left:0;top:-52px;width:1px;height:52px;
  background:linear-gradient(180deg,transparent,var(--gold));
  animation:cue 2.4s var(--ease-out) infinite;
}
@keyframes cue{0%{transform:translateY(0)}55%,100%{transform:translateY(104px)}}

/* ---------- shared section shells ---------- */
.shell{max-width:var(--w-content);margin:0 auto;padding-left:clamp(20px,4vw,48px);padding-right:clamp(20px,4vw,48px)}
.statement{
  max-width:var(--w-statement);
  margin:0 auto;
  text-align:center;
  padding:var(--section-y) clamp(20px,4vw,48px);
}
.statement .eyebrow{display:block}
.hero-copy h1,.split-copy h2,.ph-copy h1{margin-left:-0.035em}
.statement p.support{
  margin:var(--lede-gap) auto 0;
  max-width:46ch;
  font-size:clamp(1rem,1.4vw,1.22rem);
  line-height:1.7;
  text-wrap:pretty;
}
.on-dark{background:var(--mist);color:var(--ink)}
.on-dark h2,.on-dark h3{color:var(--forest)}
.on-dark .support{color:var(--stone)}
.on-forest{background:var(--sage-wash);color:var(--forest)}
.on-forest h2{color:var(--forest)}
.on-forest .eyebrow{color:var(--gold-ink)}
.on-forest .support{color:var(--stone)}
.on-bone{background:var(--bone);color:var(--ink)}
.on-bone .support{color:var(--stone)}
.on-bone-deep{background:var(--bone-deep);color:var(--ink)}
/* faint farmland texture behind the How it works band */
#how{
  background-color:var(--bone-deep);
  background-image:
    linear-gradient(180deg,rgba(247,243,235,0.975) 0%,rgba(247,243,235,0.950) 45%,rgba(247,243,235,0.972) 100%),
    url("../img/footer-texture.jpg");
  background-size:auto,cover;
  background-position:center,center 45%;
  background-repeat:no-repeat,no-repeat;
}
.on-bone-deep .support{color:var(--stone)}

/* ---------- full-bleed cinema panels ---------- */
.cinema{position:relative;overflow:hidden}
.cinema .media{position:relative;height:min(92vh,880px);min-height:520px}
.cinema .media img{width:100%;height:110%;object-fit:cover}
.cinema .scrim{position:absolute;inset:0}
.cinema .caption{
  position:absolute;left:0;right:0;z-index:2;
  text-shadow:0 1px 2px rgba(34,42,33,0.22),0 10px 48px rgba(34,42,33,0.30);
}
.cinema .caption .eyebrow{color:var(--gold-bright)}
#partners-image .eyebrow{color:var(--bone)}
.cinema .caption .inner{
  max-width:var(--w-content);margin:0 auto;
  padding:0 clamp(20px,4vw,48px);
}
.cinema.caption-bottom .caption{bottom:clamp(48px,8vh,96px)}
#problem .caption{text-shadow:none}
.cinema.caption-center .caption{top:50%;transform:translateY(-50%);text-align:center}
.cinema.caption-center .caption .inner > *{margin-left:auto;margin-right:auto}

/* ---------- problem ---------- */
#problem .scrim{background:linear-gradient(180deg,rgba(253,252,249,0.10) 0%,rgba(253,252,249,0.02) 36%,rgba(253,252,249,0.30) 58%,rgba(253,252,249,0.72) 78%,rgba(253,252,249,0.88) 100%)}
#problem h2{color:var(--ink);max-width:17ch;text-shadow:none}
#problem .support{color:var(--ink);max-width:44ch;margin-top:var(--lede-gap);font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.65}

/* ---------- trust split ---------- */
.split{
  display:grid;grid-template-columns:1fr 1fr;
}
.split .split-media{position:relative;overflow:hidden}
.split .split-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.split .split-copy{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(64px,9vh,140px) clamp(28px,5vw,96px);
}

.split .split-copy h2{max-width:14ch}
.split .split-copy p{margin-top:var(--lede-gap);max-width:42ch;color:var(--stone);font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.7}
@media(max-width:900px){
  .split{grid-template-columns:1fr}
  .split .split-media{height:67vw;min-height:384px}
  .split .split-media img{position:relative}
}

/* ---------- ritual band: measure/price/verify/trust ---------- */
.ritual{
  display:grid;grid-template-columns:repeat(4,1fr);
  max-width:var(--w-content);
  margin:0 auto;
  border-top:0;
  position:relative;
}
.ritual::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--hair) 12%,var(--hair) 88%,transparent);
}
.on-bone .ritual{border-color:var(--hair)}
.ritual-item{
  padding:38px 20px 46px;
  text-align:center;
  border-right:1px solid var(--hair);
  position:relative;
}
.ritual-item:last-child{border-right:none}
.ritual-item .num{
  font-family:var(--font-body);font-size:1.05rem;font-weight:600;
  letter-spacing:0.01em;font-variant-numeric:lining-nums tabular-nums;
  color:var(--gold);display:block;margin-bottom:12px;line-height:1;
}
.ritual-item .word{
  font-family:var(--font-display);
  font-size:clamp(1.3rem,2vw,1.7rem);
  font-weight:400;color:var(--forest);
}
@media(max-width:720px){
  .ritual{grid-template-columns:repeat(2,1fr)}
  .ritual-item:nth-child(2){border-right:none}
  .ritual-item:nth-child(1),.ritual-item:nth-child(2){border-bottom:1px solid var(--hair)}
}

/* ---------- steps ---------- */
.steps{
  max-width:var(--w-content);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,4vw,64px);
  padding:0 clamp(20px,4vw,48px) clamp(96px,13vh,170px);
}
.step h3{
  font-family:var(--font-display);font-weight:400;
  font-variation-settings:"opsz" 66;
  font-size:clamp(1.5rem,2.2vw,1.95rem);
  color:var(--forest);
  margin:18px 0 12px;
}
.step .step-num{
  font-family:var(--font-display);font-style:italic;font-weight:300;
  font-size:2.4rem;color:var(--gold-ink);line-height:1;
}
.step p{color:var(--stone);font-size:1rem;line-height:1.7;max-width:34ch}
@media(max-width:820px){.steps{grid-template-columns:1fr;gap:44px}}

/* ---------- product tiles ---------- */
.products{
  max-width:var(--w-content);margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,36px);
  padding:0 clamp(20px,4vw,48px) var(--section-y);
}
.product{
  background:var(--white);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--lift-2);
  transition:transform 700ms var(--ease-soft),box-shadow 700ms var(--ease-soft);
}
.product:hover{transform:translateY(-5px);box-shadow:0 2px 4px rgba(38,51,43,0.05),0 20px 48px -20px rgba(38,51,43,0.16),0 56px 100px -50px rgba(38,51,43,0.18)}
.product .p-media{aspect-ratio:16/10;overflow:hidden}
.product .p-media img{width:100%;height:100%;object-fit:cover;transition:transform 1200ms var(--ease-out)}
.product:hover .p-media img{transform:scale(1.035)}
.product .p-copy{padding:clamp(26px,3vw,42px)}
.product .p-copy .eyebrow{display:block}
.product h3{
  font-family:var(--font-display);font-weight:400;
  font-variation-settings:"opsz" 76;
  font-size:clamp(1.7rem,2.6vw,2.3rem);color:var(--forest);
  letter-spacing:-0.01em;
}
.product .p-tag{
  font-family:var(--font-display);font-style:italic;
  color:var(--gold-ink);font-size:1.06rem;margin-top:4px;
}
.product p.p-body{color:var(--stone);margin-top:14px;font-size:0.99rem;line-height:1.7}
@media(max-width:860px){.products{grid-template-columns:1fr}}

/* ---------- success + stats ---------- */
#success .scrim{background:radial-gradient(ellipse 56% 44% at 50% 50%,rgba(253,252,249,0.88) 0%,rgba(253,252,249,0.78) 40%,rgba(253,252,249,0.40) 72%,rgba(253,252,249,0.08) 100%)}
#success .caption{text-shadow:none}
#success .eyebrow{color:var(--on-photo-label)}
#success h2{color:var(--forest)}
#success .support{color:var(--ink);max-width:44ch;margin:var(--lede-gap) auto 0;font-size:clamp(1rem,1.4vw,1.2rem)}
/* ---------- opportunity ---------- */
#opportunity-image .scrim{background:linear-gradient(180deg,rgba(34,42,33,0.10) 0%,rgba(34,42,33,0.04) 42%,rgba(34,42,33,0.58) 84%,rgba(34,42,33,0.74) 100%)}
#partners-image .scrim{background:linear-gradient(180deg,rgba(28,36,28,0.22) 0%,rgba(28,36,28,0.10) 34%,rgba(28,36,28,0.62) 74%,rgba(28,36,28,0.80) 100%)}
#opportunity-image h2{color:var(--white);max-width:18ch}
#opportunity-image .support{color:rgba(250,247,240,1);margin-top:var(--lede-gap);max-width:46ch}

/* ---------- heroes (audience) ---------- */
.heroes-grid{
  max-width:var(--w-content);margin:0 auto;
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(18px,2.2vw,28px);
  padding:0 clamp(20px,4vw,48px) var(--section-y);
}
.hero-card{
  border:1px solid var(--hair);
  border-radius:var(--r-md);
  padding:clamp(28px,3.4vw,44px);
  background:rgba(255,255,255,0.62);
  box-shadow:var(--lift-1);
  transition:border-color 450ms var(--ease-soft),background 450ms var(--ease-soft),box-shadow 600ms var(--ease-soft),transform 600ms var(--ease-soft);
}
.hero-card:hover{border-color:rgba(176,142,88,0.45);background:var(--white);box-shadow:var(--lift-2);transform:translateY(-4px)}
.hero-card .eyebrow{display:block}
.hero-card h3{
  font-family:var(--font-display);font-weight:400;
  font-variation-settings:"opsz" 66;
  font-size:clamp(1.45rem,2.1vw,1.85rem);color:var(--forest);
  max-width:20ch;letter-spacing:-0.01em;
}
.hero-card p{color:var(--stone);margin-top:12px;font-size:0.98rem;line-height:1.7;max-width:44ch}
@media(max-width:820px){.heroes-grid{grid-template-columns:1fr}}
/* ---------- vision ---------- */
#vision .media{height:min(100vh,960px)}
#vision .scrim{background:radial-gradient(ellipse 58% 64% at 50% 50%,rgba(253,252,249,0.87) 0%,rgba(253,252,249,0.76) 40%,rgba(253,252,249,0.38) 72%,rgba(253,252,249,0.08) 100%)}
#vision .caption{text-shadow:none}
#vision .eyebrow{color:var(--on-photo-label)}
#vision h2{color:var(--forest);max-width:17ch}
#vision .founders{
  margin-top:var(--lede-gap);color:var(--ink);
  font-size:clamp(0.98rem,1.3vw,1.12rem);max-width:52ch;line-height:1.7;
}
#vision .founders strong{color:var(--gold-ink);font-weight:600}

/* ---------- close ---------- */
.close-section{
  /* the closing band sits a step deeper than the page, with the fade held to
     the top so the divide is felt rather than drawn */
  background:linear-gradient(180deg,var(--bone) 0,var(--bone-deep) clamp(96px,16vh,180px),var(--bone-deep) 100%);
  text-align:center;
  padding:var(--section-y) clamp(20px,4vw,48px);
}
.close-section h2{
  /* the closing CTA inherited display-xl on the homepage and display-l on inner
     pages — two sizes for the same moment, and both louder than anything they
     follow. One step down, applied to all eight closes. */
  font-size:clamp(2.3rem,4.9vw,4.35rem);
  font-variation-settings:"opsz" 120;
  letter-spacing:-0.013em;
  color:var(--forest);
}
.close-section h2 .line{display:block}
.close-section h2 .line em{font-style:italic;color:var(--gold-ink)}
.close-section .invite{
  margin-top:36px;color:var(--stone);font-size:clamp(1rem,1.4vw,1.2rem);
}
.close-section .email{
  display:inline-block;margin-top:18px;
  font-family:var(--font-display);font-style:italic;
  font-variation-settings:"opsz" 68;
  font-size:clamp(1.45rem,2.7vw,2.15rem);
  color:var(--forest);text-decoration:none;
  border-bottom:1px solid var(--gold);
  padding-bottom:4px;
  transition:color 250ms var(--ease-soft),border-color 250ms var(--ease-soft);
}
.close-section .email:hover{color:var(--gold-ink);border-color:var(--forest)}

/* ---------- footer ---------- */
footer{
  background-color:var(--deep);
  background-image:
    linear-gradient(180deg,rgba(30,42,34,0.78) 0%,rgba(30,42,34,0.87) 45%,rgba(30,42,34,0.94) 100%),
    url("../img/footer-texture.jpg");
  background-size:auto,cover;
  background-position:center,center 55%;
  background-repeat:no-repeat,no-repeat;
  padding:56px clamp(20px,4vw,48px) 48px;
}
.foot .foot-links{display:flex;gap:26px;list-style:none}
.foot .foot-links a:hover{color:var(--gold-bright)}

/* ---------- reveal animation (scoped to .js so content is never hidden without JS) ---------- */
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity 1100ms var(--ease-out),transform 1100ms var(--ease-out)}
html.js .reveal.in{opacity:1;transform:none}
html.js .display-xl.reveal,html.js .display-l.reveal{transform:translateY(30px);transition-duration:1400ms}
html.js .eyebrow.reveal{transform:translateY(9px);transition-duration:850ms}.reveal.d1{transition-delay:110ms}
.reveal.d2{transition-delay:220ms}
.reveal.d3{transition-delay:330ms}
@media (prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none}}
html.review .reveal{opacity:1 !important;transform:none !important;transition:none !important}
html.review{scroll-behavior:auto}

/* ---------- focus ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold-bright);
  outline-offset:3px;border-radius:4px;
}

/* ============================================================
   INTERIOR PAGES
   ============================================================ */
.page-hero{
  position:relative;overflow:hidden;
  min-height:50vh;display:flex;align-items:flex-end;
  background:var(--mist);
}
.page-hero .ph-media{position:absolute;inset:0}
.page-hero .ph-media img{width:100%;height:100%;object-fit:cover}
/* the field-day photo has faces high in the frame; a centred crop slices them */
.page-hero .ph-media img[src*="08-partners-fence"]{object-position:50% 18%}
.page-hero .ph-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(253,252,249,0.76) 0%,rgba(253,252,249,0.60) 34%,rgba(253,252,249,0.74) 74%,rgba(253,252,249,0.96) 100%)}
.page-hero .ph-copy{position:relative;z-index:2;width:100%;max-width:var(--w-content);margin:0 auto;padding:120px clamp(20px,4vw,48px) clamp(40px,7vh,72px)}
.page-hero .ph-copy .eyebrow{display:block;color:var(--on-photo-label)}
.page-hero h1{color:var(--forest);text-shadow:none}
.page-hero .ph-sub{margin-top:var(--lede-gap);color:var(--on-photo-body);max-width:54ch;font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.65}
.page-hero.compact{min-height:0;background:var(--mist-deep)}
.page-hero.compact h1{color:var(--forest);text-shadow:none}
.page-hero.compact .ph-sub{color:var(--stone);text-shadow:none}
.page-hero.compact .ph-copy{padding-top:140px}

.prose-section{padding:clamp(64px,9vh,120px) clamp(20px,4vw,48px)}
.prose{max-width:var(--w-prose);margin:0 auto}
.prose h2{font-family:var(--font-display);font-weight:400;font-variation-settings:"opsz" 76;font-size:clamp(1.9rem,3.2vw,2.7rem);color:var(--forest);letter-spacing:-0.01em;margin:2.2em 0 0.6em}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--font-display);font-weight:500;font-variation-settings:"opsz" 46;font-size:1.4rem;color:var(--forest);margin:1.8em 0 0.5em}
.prose p{color:var(--stone);line-height:1.75;margin:0 0 1.1em;text-wrap:pretty}
.prose ul{margin:0 0 1.2em 1.2em;color:var(--stone);line-height:1.75}
.prose li{margin-bottom:0.5em}
.prose strong{color:var(--forest);font-weight:600}
.prose .pull{font-family:var(--font-display);font-style:italic;font-size:clamp(1.25rem,2vw,1.6rem);color:var(--forest);line-height:1.4;border-left:2px solid var(--gold);padding-left:22px;margin:1.8em 0}
.prose a{color:var(--gold-ink);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--forest)}

.step-flow{max-width:var(--w-prose);margin:0 auto;counter-reset:sf}
.sf-item{display:flex;gap:22px;padding:26px 0;border-bottom:1px solid var(--hair)}
.sf-item:last-child{border-bottom:none}
.sf-num{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:2rem;color:var(--gold-ink);line-height:1;min-width:44px}
.sf-item h3{font-family:var(--font-display);font-weight:500;font-variation-settings:"opsz" 44;font-size:1.35rem;color:var(--forest);margin:0 0 6px}
.sf-item p{color:var(--stone);line-height:1.7;margin:0;max-width:56ch}
.page-inner .sf-item p{max-width:100%}

/* team */
.team-grid{max-width:var(--w-content);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px);padding:0 clamp(20px,4vw,48px) clamp(72px,10vh,120px)}
.team-card{background:var(--white);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--lift-2)}
.team-photo{aspect-ratio:4/3;background:linear-gradient(160deg,var(--sage-wash),var(--mist-deep));display:flex;align-items:center;justify-content:center;position:relative}
.team-photo .monogram{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:4rem;color:var(--gold);opacity:0.75}
.team-photo .photo-note{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:0.68rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--stone);opacity:0.7}
.team-card .t-copy{padding:clamp(24px,2.6vw,36px)}
.team-card h3{font-family:var(--font-display);font-weight:500;font-variation-settings:"opsz" 56;font-size:1.7rem;color:var(--forest)}
.team-card .t-role{font-family:var(--font-display);font-style:italic;color:var(--gold-ink);font-size:1.02rem;margin:4px 0 14px}
.team-card p{color:var(--stone);line-height:1.7;font-size:0.98rem}
@media(max-width:820px){.team-grid{grid-template-columns:1fr}}

/* contact */
.contact-grid{max-width:var(--w-content);margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.2vw,28px);padding:0 clamp(20px,4vw,48px) clamp(72px,10vh,120px)}
.contact-card{border:1px solid var(--hair);border-radius:var(--r-md);padding:clamp(26px,3vw,40px);background:rgba(255,255,255,0.62);box-shadow:var(--lift-1);transition:border-color 450ms var(--ease-soft),background 450ms var(--ease-soft),box-shadow 600ms var(--ease-soft),transform 600ms var(--ease-soft);display:block;text-decoration:none}
.contact-card:hover{border-color:rgba(176,142,88,0.45);background:var(--white);box-shadow:var(--lift-2);transform:translateY(-4px)}
.contact-card .eyebrow{display:block}
.contact-card h2{font-family:var(--font-display);font-weight:400;font-variation-settings:"opsz" 54;font-size:1.6rem;color:var(--forest)}
.contact-card p{color:var(--stone);margin-top:10px;font-size:0.96rem;line-height:1.65}
.contact-card .cc-mail{display:inline-block;margin-top:16px;font-family:var(--font-display);font-style:italic;color:var(--gold-ink);font-size:1.02rem;border-bottom:1px solid var(--gold)}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}

/* faq */
.faq-list{max-width:var(--w-prose);margin:0 auto;padding:0 0 clamp(72px,10vh,120px)}
.faq-list details{border-bottom:1px solid var(--hair)}
.faq-list summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:22px 0;font-family:var(--font-display);font-weight:400;font-variation-settings:"opsz" 54;font-size:clamp(1.2rem,1.9vw,1.5rem);color:var(--forest)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-family:var(--font-body);color:var(--gold-ink);font-size:1.3rem;font-weight:400;transition:transform 300ms var(--ease-out)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{color:var(--stone);line-height:1.75;padding:0 0 24px;max-width:60ch}
.page-inner .faq-list details p{max-width:100%}

/* sign-in gate */
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--mist);position:relative;overflow:hidden}
.gate .gate-media{position:absolute;inset:0;opacity:0.85}
.gate .gate-media img{width:100%;height:100%;object-fit:cover}
.gate .gate-scrim{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(253,252,249,0.55) 0%,rgba(253,252,249,0.88) 100%)}
.gate-card{position:relative;z-index:2;max-width:460px;width:calc(100% - 40px);background:rgba(255,255,255,0.72);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--lift-2);padding:clamp(32px,4vw,48px);text-align:center}
.gate-card .nav-wordmark{font-size:1.3rem}
.gate-card h1{font-family:var(--font-display);font-weight:300;font-variation-settings:"opsz" 74;font-size:2.2rem;color:var(--forest);margin:22px 0 12px;letter-spacing:-0.01em}
.gate-card p{color:var(--stone);font-size:0.98rem;line-height:1.7}
.gate-card .gate-badge{display:inline-block;margin:20px 0 4px;font-size:0.7rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold-ink);border:1px solid rgba(176,142,88,0.42);border-radius:var(--r-pill);padding:8px 18px}
.gate-card .gate-request{display:inline-block;margin-top:22px;color:var(--bone);background:var(--forest);border-radius:var(--r-pill);padding:13px 26px;text-decoration:none;font-weight:600;font-size:0.92rem;transition:background 300ms var(--ease-soft),transform 300ms var(--ease-soft)}
.gate-card .gate-request:hover{background:var(--ink);transform:translateY(-1px)}
.gate-card .gate-back{display:block;margin-top:18px;color:var(--stone);font-size:0.85rem;text-decoration:none}
.gate-card .gate-back:hover{color:var(--gold-ink)}

/* legal */
.legal-note{max-width:var(--w-prose);margin:0 auto 34px;padding:14px 20px;border:1px solid rgba(138,103,44,0.35);border-radius:var(--r-sm);background:rgba(217,174,102,0.08);color:var(--gold-ink);font-size:0.88rem}
.legal-meta{color:var(--stone);font-size:0.85rem;letter-spacing:0.04em;margin-bottom:8px}

/* extended footer */
.foot-grid{max-width:var(--w-content);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(24px,4vw,56px);padding-bottom:40px}
.foot-grid h3{font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold-pale);font-weight:600;margin-bottom:16px}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:0}
.foot-grid a{color:rgba(250,247,240,0.86);font-size:0.88rem;text-decoration:none;display:inline-block;padding-block:5px;transition:color 200ms var(--ease-soft)}
.foot-grid a:hover{color:var(--gold-bright)}
.foot-grid .foot-mission{color:rgba(250,247,240,0.84);font-size:0.9rem;line-height:1.7;max-width:34ch;margin-top:14px}
.foot-bottom{max-width:var(--w-content);margin:0 auto;border-top:0;position:relative;padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-bottom::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(250,247,240,0.24) 10%,rgba(250,247,240,0.24) 90%,transparent);
}
.foot-bottom small{color:rgba(250,247,240,0.82);font-size:0.78rem;letter-spacing:0.03em}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}

/* footer sits on forest — wordmark returns to light */
footer .nav-wordmark{color:var(--bone)}
footer .nav-wordmark .earth{color:var(--gold-pale)}

/* nav current page marker */
.nav-links a[aria-current="page"]{color:var(--gold-ink)}

/* cinema page-break band reuse on interior pages */
.band{position:relative;overflow:hidden;height:min(46vh,420px)}
.band img{width:100%;height:100%;object-fit:cover}
.band .band-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(34,42,33,0.10),rgba(34,42,33,0.24))}

/* ============================================================
   CRISP PASS (Aug 2026) — client direction: remove all white
   overlay fading; photographs run at full strength, type sits
   on clean solid ground. Measured rationale: dark type over
   these photographs fails WCAG everywhere except the sky band
   (hero mid 3.6:1, success mid 2.0:1), so no veil can be
   "tuned" — the type has to come off the image.
   ============================================================ */

/* --- kill every white wash --- */
.hero-scrim,
.cinema .scrim,
.page-hero .ph-scrim,
.gate .gate-scrim{display:none}

/* --- HERO: crisp image band, headline on clean ground --- */
.hero{height:auto;min-height:0;display:block;overflow:visible}
.hero-media{position:relative;inset:auto;height:clamp(420px,62vh,660px);overflow:hidden}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-copy{
  position:relative;z-index:2;background:var(--bone);
  max-width:var(--w-content);margin:0 auto;
  padding:clamp(52px,7vh,88px) clamp(20px,4vw,48px) clamp(56px,8vh,96px);
}
.hero-copy h1{color:var(--forest);max-width:15ch}
.hero-copy h1 .pays{color:var(--gold-ink)}
.hero-sub{color:var(--stone)}
.scroll-cue{display:none}

/* --- CINEMA PANELS: crisp image, caption below on solid ground --- */
.cinema{overflow:visible}
.cinema .media{height:clamp(360px,54vh,580px);overflow:hidden}
.cinema .media img,.cinema .media video{width:100%;height:100%;object-fit:cover}
/* parallax needs overscan: JS shifts +/-3.5%, so give images 8% of slack
   and anchor with top (inset:0 + explicit height makes `bottom` inert) */
.parallax img,.parallax video{height:108%;top:-4%}
.cinema .caption{
  position:static;transform:none;text-shadow:none;text-align:left;
  background:var(--bone);
}
.cinema.caption-center .caption{position:static;top:auto;transform:none;text-align:center}
.cinema .caption .inner{
  max-width:var(--w-content);margin:0 auto;
  padding:clamp(52px,7vh,88px) clamp(20px,4vw,48px);
}
.cinema.caption-center .caption .inner>*{margin-left:auto;margin-right:auto}
.cinema .caption .eyebrow{color:var(--gold-ink)}

/* per-panel ground tones so consecutive bands stay distinct */
#problem .caption{background:var(--bone)}
#success .caption{background:var(--bone-deep)}
#opportunity-image .caption{background:var(--forest)}
#partners-image .caption{background:var(--bone-deep)}
#vision .caption{background:var(--bone)}

/* text colours now that every caption sits on light ground */
#problem h2,#success h2,#vision h2{color:var(--forest)}
#problem .support,#success .support,#vision .support{color:var(--stone)}
#partners-image h2{color:var(--forest)}
#partners-image .support{color:var(--stone)}
#partners-image .eyebrow{color:var(--gold-ink)}
#opportunity-image h2{color:var(--bone)}
#opportunity-image .support{color:rgba(253,252,249,0.86)}
#opportunity-image .eyebrow{color:var(--gold-pale)}
#vision .media{height:clamp(380px,58vh,620px)}
#vision .founders{color:var(--stone)}

/* --- INTERIOR PAGE HEROES: crisp image, title on clean ground --- */
.page-hero{min-height:0;display:block;overflow:visible}
.page-hero .ph-media{position:relative;inset:auto;height:clamp(280px,40vh,440px);overflow:hidden}
.page-hero .ph-media img{width:100%;height:100%;object-fit:cover}
.page-hero .ph-copy{
  position:relative;z-index:2;background:var(--bone);
  max-width:var(--w-content);margin:0 auto;
  padding:clamp(48px,6vh,80px) clamp(20px,4vw,48px) clamp(40px,5vh,64px);
}
.page-hero h1{color:var(--forest);text-shadow:none}
.page-hero .ph-sub{color:var(--stone);text-shadow:none}
.page-hero .ph-copy .eyebrow{color:var(--gold-ink)}
/* compact (image-less) page heroes keep their solid forest ground */
.page-hero.compact .ph-copy{background:transparent;padding-top:clamp(132px,15vh,168px)}
.page-hero.compact h1{color:var(--bone)}
.page-hero.compact .ph-sub{color:rgba(253,252,249,0.86)}
.page-hero.compact .ph-copy .eyebrow{color:var(--gold-pale)}

/* --- HOW IT WORKS: drop the faint washed photo texture --- */
#how{background-image:none;background-color:var(--bone-deep)}

/* --- SIGN-IN GATE: crisp photograph, solid card, no frosting --- */
.gate .gate-media{opacity:1}
.gate-card{
  background:var(--bone);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border:1px solid var(--hair);box-shadow:var(--lift-2);
}
.gate-card h1{color:var(--forest)}
.gate-card p{color:var(--stone)}
.gate-card .gate-back{color:var(--stone)}

/* --- BAND (interior full-bleed strips): crisp, no tint --- */
.band .band-scrim{display:none}

/* --- NAV: solid header. No transparency over photography, no frosting. --- */
.nav{
  background:var(--bone);
  box-shadow:0 1px 0 var(--hair);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  padding-top:16px;padding-bottom:16px;
}
.nav.scrolled{
  background:var(--bone);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  padding-top:12px;padding-bottom:12px;
  box-shadow:0 1px 0 var(--hair),0 10px 30px -22px rgba(38,51,43,0.18);
}
.nav .nav-wordmark{color:var(--forest)}
.nav .nav-links a{color:var(--stone)}
.nav .nav-links a:hover,
.nav .nav-links a[aria-current="page"]{color:var(--gold-ink)}
.nav .nav-links a.nav-contact{color:var(--gold-ink);border-color:rgba(176,142,88,0.5)}
.nav .nav-links a.nav-contact:hover{background:var(--gold-ink);color:var(--bone);border-color:var(--gold-ink)}

/* fixed header now needs real clearance on every page */
.hero-media{margin-top:var(--nav-h)}
.page-hero .ph-media{margin-top:var(--nav-h)}
.page-hero.compact{padding-top:0}
.gate{padding-top:var(--nav-h)}

/* --- crisp-pass corrections --- */
/* compact page-heroes sit on --mist-deep (light), so type must be dark */
.page-hero.compact h1{color:var(--forest)}
.page-hero.compact .ph-sub{color:var(--stone)}
.page-hero.compact .ph-copy .eyebrow{color:var(--gold-ink)}
/* small gold text needs the ink-weight gold to clear 4.5:1 */
.ritual-item .num{color:var(--gold-ink)}

/* backgrounds belong to the full-bleed section, not the max-width copy block,
   otherwise the copy panel reads as a boxed rectangle with hard side edges */
.hero{background:var(--bone)}
.hero-copy{background:transparent}
.page-hero:not(.compact){background:var(--bone)}
.page-hero .ph-copy{background:transparent}

/* ============================================================
   REFINEMENT PASS — Editorial Luxury
   Vibe archetype: warm cream ground, high-contrast variable
   serif, physical paper tooth. Deliberately NOT Ethereal Glass:
   the client rejected dark treatments and backdrop-blur frosting,
   so depth here comes from nested enclosure and diffused ambient
   shadow, never from glass.
   ============================================================ */

/* Shared tokens are defined in design-system.css. */

/* --- paper tooth: fixed, non-interactive, never on a scroller --- */
body::after{
  content:"";position:fixed;inset:0;z-index:90;pointer-events:none;
  opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-contrast:more){body::after{opacity:0}}

/* --- DOUBLE-BEZEL: product + team cards (media/copy children form the core) --- */
.product,.team-card{
  background:var(--shell);
  padding:var(--bezel);
  border-radius:var(--r-lg);
  box-shadow:0 1px 2px rgba(38,51,43,0.04),0 18px 44px -26px rgba(38,51,43,0.16);
  overflow:visible;
}
.product .p-media,.team-card .team-photo{
  border-radius:var(--r-inner-lg) var(--r-inner-lg) 0 0;
  overflow:hidden;
}
.product .p-copy,.team-card .t-copy{
  background:var(--white);
  border-radius:0 0 var(--r-inner-lg) var(--r-inner-lg);
  box-shadow:var(--core-highlight);
}
.product:hover,.team-card:hover{
  box-shadow:0 1px 3px rgba(38,51,43,0.05),0 28px 64px -28px rgba(38,51,43,0.20);
}

/* --- DOUBLE-BEZEL: text cards get an inset core via ::before --- */
.hero-card,.contact-card{
  position:relative;isolation:isolate;
  background:var(--shell);
  border:none;
  border-radius:var(--r-md);
  padding:calc(clamp(26px,3vw,40px) + var(--bezel));
  box-shadow:0 1px 2px rgba(38,51,43,0.04),0 16px 40px -26px rgba(38,51,43,0.14);
  transition:transform 600ms var(--ease-soft),box-shadow 600ms var(--ease-soft);
}
.hero-card::before,.contact-card::before{
  content:"";position:absolute;inset:var(--bezel);z-index:-1;
  background:var(--bone);
  border-radius:var(--r-inner-md);
  box-shadow:var(--core-highlight);
  transition:background 450ms var(--ease-soft);
}
.hero-card:hover,.contact-card:hover{
  transform:translateY(-4px);
  box-shadow:0 1px 3px rgba(38,51,43,0.05),0 26px 60px -28px rgba(38,51,43,0.19);
}
.hero-card:hover::before,.contact-card:hover::before{background:var(--white)}

/* --- BUTTON-IN-BUTTON: nested trailing icon, magnetic press --- */
.nav-links a.nav-contact,.gate-card .gate-request{
  display:inline-flex;align-items:center;gap:10px;
  padding-right:6px;
  transition:background 400ms var(--ease-press),color 400ms var(--ease-press),
             border-color 400ms var(--ease-press),transform 260ms var(--ease-press);
}
.btn-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:var(--r-pill);
  background:rgba(126,92,38,0.10);
  font-size:0.72rem;line-height:1;
  transition:transform 420ms var(--ease-press),background 420ms var(--ease-press);
}
.gate-card .gate-request .btn-ico{background:rgba(253,252,249,0.18)}
.nav-links a.nav-contact:hover .btn-ico,
.gate-card .gate-request:hover .btn-ico{
  transform:translate(2px,-1px) scale(1.06);
  background:rgba(126,92,38,0.18);
}
.gate-card .gate-request:hover .btn-ico{background:rgba(253,252,249,0.28)}
.nav-links a.nav-contact:active,.gate-card .gate-request:active{transform:scale(0.975)}
.nav-links a.nav-contact:hover .btn-ico{background:rgba(253,252,249,0.22)}

/* --- scroll entry: heavier, with a breath of defocus (desktop only) --- */
@media (min-width:768px){
  html.js .reveal{filter:blur(5px)}
  html.js .reveal.in{filter:blur(0)}
  html.js .reveal{transition:opacity 1100ms var(--ease-out),transform 1100ms var(--ease-out),filter 900ms var(--ease-out)}
}

/* --- macro whitespace: let the page breathe --- */
.cinema .caption .inner{padding-top:clamp(64px,9vh,116px);padding-bottom:clamp(64px,9vh,116px)}
.hero-copy{padding-top:clamp(60px,8vh,104px);padding-bottom:clamp(64px,9vh,112px)}

/* reduced motion / QA mode must clear the entry defocus too */
@media (prefers-reduced-motion:reduce){
  html.js .reveal,html.js .reveal.in{filter:none;transition:none}
}
html.review .reveal{filter:none !important}

/* ============================================================
   MOBILE NAVIGATION — real disclosure menu.
   Previously every link but "Get in touch" was display:none
   below 820px, leaving the footer as the only wayfinding.
   ============================================================ */
.nav-toggle{
  display:none;position:relative;z-index:2;
  width:44px;height:44px;padding:0;margin-left:12px;
  background:none;border:0;cursor:pointer;color:var(--forest);
  align-items:center;justify-content:center;
}
.nav-bars{display:block;width:22px;height:14px;position:relative}
.nav-bars span{
  position:absolute;left:0;width:100%;height:1.5px;border-radius:2px;
  background:currentColor;
  transition:transform 520ms var(--ease-press),opacity 300ms var(--ease-press);
}
.nav-bars span:first-child{top:0}
.nav-bars span:last-child{top:12.5px}
[data-nav-open] .nav-bars span:first-child{transform:translateY(6px) rotate(45deg)}
[data-nav-open] .nav-bars span:last-child{transform:translateY(-6.5px) rotate(-45deg)}

@media(max-width:820px){
  .nav-toggle{display:inline-flex}
  .nav-links{
    position:fixed;inset:0;z-index:1;
    flex-direction:column;align-items:flex-start;justify-content:center;gap:0;
    padding:96px clamp(24px,7vw,48px) 48px;
    background:var(--bone);
    overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity 420ms var(--ease-press),transform 520ms var(--ease-press),visibility 0s linear 420ms;
  }
  [data-nav-open] .nav-links{
    opacity:1;visibility:visible;transform:none;
    transition:opacity 380ms var(--ease-press),transform 520ms var(--ease-press),visibility 0s;
  }
  .nav-links li{width:100%;opacity:0;transform:translateY(14px)}
  .nav-links li.hide-m{display:list-item}
  [data-nav-open] .nav-links li{
    opacity:1;transform:none;
    transition:opacity 520ms var(--ease-press),transform 620ms var(--ease-press);
  }
  [data-nav-open] .nav-links li:nth-child(1){transition-delay:60ms}
  [data-nav-open] .nav-links li:nth-child(2){transition-delay:105ms}
  [data-nav-open] .nav-links li:nth-child(3){transition-delay:150ms}
  [data-nav-open] .nav-links li:nth-child(4){transition-delay:195ms}
  [data-nav-open] .nav-links li:nth-child(5){transition-delay:240ms}
  [data-nav-open] .nav-links li:nth-child(6){transition-delay:290ms}
  [data-nav-open] .nav-links li:nth-child(7){transition-delay:335ms}
  .nav-links li a{
    display:block;width:100%;padding:16px 0;
    font-family:var(--font-display);font-weight:400;
    font-size:clamp(1.9rem,8vw,2.6rem);
    font-variation-settings:"opsz" 96;
    letter-spacing:-0.01em;color:var(--forest);
    border-bottom:1px solid var(--hair);
  }
  .nav-links li:last-child a{border-bottom:0}
  .nav-links a.nav-contact{
    margin-top:22px;width:max-content;
    font-family:var(--font-body);font-size:0.98rem;font-weight:600;
    padding:14px 8px 14px 22px;border:1px solid rgba(176,142,88,0.5);
  }
  .nav-wordmark{position:relative;z-index:2}
}
@media (prefers-reduced-motion:reduce){
  .nav-links,.nav-links li,.nav-bars span{transition-duration:1ms!important}
}

/* ============================================================
   FINAL POLISH
   ============================================================ */
/* Band rhythm: ground tones sit 3.0-3.8 L* apart - perceptible, but
   deliberately gentle per the brand direction. A hairline at each
   solid-to-solid boundary makes the rhythm legible without darkening. */
.on-bone + .on-bone,
.on-bone + .on-bone-deep,
.on-bone-deep + .on-bone,
.on-bone-deep + .on-bone-deep,
.on-bone + .on-forest,
.on-forest + .on-bone{border-top:1px solid var(--hair)}

/* utilities replacing repeated inline style= attributes */
.u-tight{padding-bottom:var(--section-gap)}
.u-flush-top{padding-top:0}
.u-gap-lg{height:clamp(72px,10vh,130px)}
.u-link{color:var(--gold-ink);text-decoration:underline;text-underline-offset:3px}
.u-forest{color:var(--forest)}
.u-accent{font-style:italic;color:var(--gold-ink)}
.u-mt{margin-top:clamp(48px,7vh,80px)}
.u-pt{padding-top:clamp(48px,7vh,80px)}
.u-pt-lg{padding-top:clamp(64px,9vh,110px)}
.u-note{font-size:0.85rem;color:var(--stone);border-top:1px solid var(--hair);padding-top:18px;margin-top:2.4em}

@media print{
  .nav,.nav-toggle,.skip-link,footer .foot-grid,body::after{display:none!important}
  html,body{background:#fff!important;color:#000!important}
  .hero-media,.page-hero .ph-media,.cinema .media,.band,.gate-media{display:none!important}
  main{padding-top:0!important}
  a[href^="http"]::after,a[href^="/"]::after{content:" (" attr(href) ")";font-size:0.85em;color:#555}
  h1,h2,h3{break-after:avoid-page}
  p,li{orphans:3;widows:3}
  .product,.hero-card,.contact-card,.team-card{break-inside:avoid-page;box-shadow:none!important;background:none!important}
  .hero-card::before,.contact-card::before{display:none!important}
}

@media (forced-colors:active){
  body::after{display:none}
  .hero-card,.contact-card,.product,.team-card,.gate-card{border:1px solid CanvasText}
  .hero-card::before,.contact-card::before{background:Canvas}
  .nav{border-bottom:1px solid CanvasText}
  .btn-ico{border:1px solid CanvasText}
  a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid Highlight}
}

/* team portrait placeholder sat at 2.67:1 on the light sage tile */
.team-photo .monogram{color:var(--forest);opacity:1}
.team-photo .photo-note{color:var(--stone);opacity:1}

/* ============================================================
   APPLE PASS — inset rounded media, cinematic dark gradient,
   copy offset bottom-left, slim centred top nav.
   Note on direction: a WHITE veil desaturates and reads as haze
   (which is why it was removed); a DARK bottom gradient deepens
   the image and reads as grading. Images stay bright at the top
   and only darken where the copy sits.
   ============================================================ */
/* Shared tokens are defined in design-system.css. */

/* ---------- slim, centred nav ---------- */
@media(min-width:821px){
  .nav{
    padding-top:0;padding-bottom:0;
    min-height:52px;align-items:center;
    box-shadow:inset 0 -1px 0 var(--hair);
  }
  .nav.scrolled{padding-top:0;padding-bottom:0;min-height:48px}
  .nav-links{flex:1;justify-content:center;gap:clamp(18px,2.4vw,34px)}
  .nav-links li:last-child{margin-left:auto}
  .nav-links a{font-size:0.82rem;letter-spacing:0.01em;padding:15px 2px}
  .nav-links a.nav-contact{padding:7px 7px 7px 16px;font-size:0.8rem}
  .nav-links a.nav-contact .btn-ico{width:22px;height:22px;font-size:0.66rem}
  .nav-wordmark{font-size:1.05rem}
}

/* ---------- shared: inset rounded media block ---------- */
.hero-media,
.cinema .media,
.page-hero .ph-media,
.band{
  border-radius:var(--r-media);
  overflow:hidden;
  isolation:isolate;
}
.hero,.cinema,.page-hero:not(.compact),.band-wrap{padding-left:var(--gutter);padding-right:var(--gutter)}

/* cinematic bottom gradient — no DOM needed */
.hero-media::after,
.cinema .media::after,
.page-hero .ph-media::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(var(--shade),0) 38%,
    rgba(var(--shade),0.18) 58%,
    rgba(var(--shade),0.52) 78%,
    rgba(var(--shade),0.82) 100%);
}

/* ---------- HERO: copy over image, bottom-left ---------- */
.hero{position:relative;padding-bottom:0}
.hero-media{position:relative;height:clamp(520px,86vh,940px);margin-top:calc(var(--nav-h) - 24px)}
.hero-copy{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:none;
  max-width:none;
  padding:0 calc(var(--gutter) + clamp(20px,3vw,52px)) clamp(40px,6vh,72px);
}
.hero-copy > *{max-width:var(--w-content);margin-left:auto;margin-right:auto;width:100%}
.hero-copy h1{color:var(--bone);max-width:16ch}
.hero-copy h1 .pays{color:var(--gold-pale);font-style:italic}
.hero-copy .eyebrow{color:var(--gold-pale)}
.hero-sub{color:rgba(253,252,249,0.92);max-width:52ch}

/* ---------- CINEMA: copy over image, bottom-left ---------- */
.cinema{position:relative;margin-top:0}
.cinema .media{position:relative;height:clamp(460px,82vh,860px)}
.cinema .caption,
.cinema.caption-center .caption{
  position:absolute;left:0;right:0;bottom:0;top:auto;transform:none;z-index:2;
  background:none;text-align:left;
}
.cinema .caption .inner{
  max-width:var(--w-content);margin:0 auto;
  padding:0 calc(var(--gutter) + clamp(20px,3vw,52px)) clamp(40px,6vh,72px);
}
.cinema.caption-center .caption .inner>*{margin-left:0;margin-right:0}
.cinema .caption h2{color:var(--bone);max-width:18ch}
.cinema .caption .support{color:rgba(253,252,249,0.90);max-width:46ch;margin-left:0;margin-right:0}
.cinema .caption .eyebrow{color:var(--gold-pale)}
.cinema .caption .founders{color:rgba(253,252,249,0.90);max-width:54ch}
.cinema .caption .founders strong{color:var(--gold-pale)}
/* the per-panel ground tones are no longer used — copy sits on the photo */
#problem .caption,#success .caption,#opportunity-image .caption,
#partners-image .caption,#vision .caption{background:none}
#problem h2,#success h2,#vision h2,#partners-image h2,#opportunity-image h2{color:var(--bone)}
#problem .support,#success .support,#vision .support,
#partners-image .support,#opportunity-image .support{color:rgba(253,252,249,0.90)}
#partners-image .eyebrow,#opportunity-image .eyebrow{color:var(--gold-pale)}

/* ---------- PAGE HEROES: same language ---------- */
.page-hero:not(.compact){position:relative}
.page-hero .ph-media{position:relative;height:clamp(380px,62vh,660px);margin-top:calc(var(--nav-h) - 24px)}
.page-hero:not(.compact) .ph-copy{
  position:absolute;left:0;right:0;bottom:0;z-index:2;background:none;
  max-width:none;
  padding:0 calc(var(--gutter) + clamp(20px,3vw,52px)) clamp(36px,5vh,60px);
}
.page-hero:not(.compact) .ph-copy > *{max-width:var(--w-content);margin-left:auto;margin-right:auto;width:100%}
.page-hero:not(.compact) h1{color:var(--bone)}
.page-hero:not(.compact) .ph-sub{color:rgba(253,252,249,0.90)}
.page-hero:not(.compact) .ph-copy .eyebrow{color:var(--gold-pale)}

/* rounded media needs matching radius on the picture/img it clips */
.hero-media img,.cinema .media img,.page-hero .ph-media img,.band img{border-radius:inherit}
.hero-media picture,.cinema .media picture,.page-hero .ph-media picture,.band picture{display:block;height:100%}

/* product + team media pick up the softer Apple radius too */
.product,.team-card{border-radius:calc(var(--r-media) + var(--bezel))}
.product .p-media,.team-card .team-photo{border-radius:var(--r-media) var(--r-media) 0 0}
.product .p-copy,.team-card .t-copy{border-radius:0 0 var(--r-media) var(--r-media)}

/* band strips inherit the rounded language */
.band{margin:clamp(10px,1.4vw,20px) var(--gutter);height:clamp(300px,44vh,460px)}

@media(max-width:700px){
  .hero-media{height:clamp(460px,72vh,620px)}
  .cinema .media{height:clamp(420px,68vh,600px)}
  .page-hero .ph-media{height:clamp(300px,46vh,420px)}
}

/* --- Apple pass corrections --- */
@media(min-width:821px){
  .nav-wordmark{margin-right:clamp(24px,4vw,64px)}
  .nav-links{margin-left:0}
}
/* A single centred column whose children align left. Using auto margins on
   each child instead centres the narrow ones (the lede was floating inward). */
.hero-copy,
.page-hero:not(.compact) .ph-copy{
  display:grid;
  grid-template-columns:minmax(0,var(--w-content));
  justify-content:center;
  justify-items:start;
}
.hero-copy > *,
.page-hero:not(.compact) .ph-copy > *{
  max-width:none;margin-left:0;margin-right:0;width:auto;
}
.hero-copy h1{max-width:16ch}
.hero-sub{max-width:52ch}
.page-hero:not(.compact) .ph-sub{max-width:52ch}

/* ============================================================
   FLOATING PILL NAV — detached island, centred links, CTA right.
   Solid (not frosted): the brand direction rules out backdrop haze,
   so separation comes from a hairline ring + soft ambient shadow.
   ============================================================ */
.nav{
  top:clamp(10px,1.4vw,18px);
  left:50%;transform:translateX(-50%);
  right:auto;
  width:calc(100% - (var(--gutter) * 2));
  max-width:1340px;
  border-radius:var(--r-pill);
  background:var(--bone);
  box-shadow:0 0 0 1px var(--hair),0 2px 6px rgba(38,51,43,0.05),0 18px 44px -22px rgba(38,51,43,0.22);
  padding:7px 7px 7px clamp(18px,2vw,28px);
  min-height:0;
  transition:box-shadow 600ms var(--ease-soft),background 600ms var(--ease-soft);
}
.nav.scrolled{
  background:var(--bone);
  padding:7px 7px 7px clamp(18px,2vw,28px);
  box-shadow:0 0 0 1px var(--hair),0 3px 10px rgba(38,51,43,0.07),0 22px 54px -24px rgba(38,51,43,0.28);
}
@media(min-width:821px){
  .nav{min-height:0}
  .nav-links a{padding:11px 2px}
  .nav-links a.nav-contact{padding:9px 9px 9px 20px;font-size:0.82rem}
  .nav-links a.nav-contact .btn-ico{width:26px;height:26px;font-size:0.7rem}
}
/* the pill floats over the media, so the image starts just below the page edge */
.hero-media,.page-hero .ph-media{margin-top:var(--gutter)}
.gate{padding-top:calc(var(--gutter) + 64px)}
section{scroll-margin-top:96px}

@media(max-width:820px){
  .nav{padding:8px 8px 8px 18px}
  /* the open panel must clear the floating pill, not sit under it */
  .nav-links{
    top:calc(-1 * clamp(10px,1.4vw,18px));
    left:calc(-1 * var(--gutter));
    right:calc(-1 * var(--gutter));
    width:100vw;height:100vh;
    border-radius:0;
  }
}

/* --- compact centred pill (hugs its content, like the references) --- */
@media(min-width:821px){
  .nav{width:max-content;max-width:calc(100% - (var(--gutter) * 2));padding-right:7px}
  .nav-links{flex:0 0 auto;justify-content:flex-start}
  .nav-links li:last-child{margin-left:clamp(14px,1.8vw,26px)}
  .nav-wordmark{margin-right:clamp(20px,2.6vw,40px)}
}

/* --- hero action pair --- */
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3.4vh,38px)}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  border-radius:var(--r-pill);text-decoration:none;
  font-weight:600;font-size:0.94rem;line-height:1;
  transition:background 420ms var(--ease-press),color 420ms var(--ease-press),
             border-color 420ms var(--ease-press),transform 260ms var(--ease-press);
}
.btn-primary{background:var(--bone);color:var(--forest);padding:9px 9px 9px 22px}
.btn-primary .btn-ico{width:30px;height:30px;background:rgba(60,90,72,0.10);font-size:0.76rem}
.btn-primary:hover{background:var(--white)}
.btn-primary:hover .btn-ico{transform:translate(2px,-1px) scale(1.06);background:rgba(60,90,72,0.18)}
.btn-ghost{
  color:var(--bone);padding:13px 22px;
  border:1px solid rgba(253,252,249,0.45);background:rgba(253,252,249,0.06);
}
.btn-ghost:hover{background:rgba(253,252,249,0.16);border-color:rgba(253,252,249,0.7)}
.btn:active{transform:scale(0.975)}
@media(max-width:520px){.hero-cta .btn{width:100%;justify-content:space-between}}

/* the per-panel #id rules set `margin:auto`, which re-centres the lede on the
   former caption-center panels — override at matching specificity */
#success .support,#vision .support,#problem .support,
#opportunity-image .support,#partners-image .support{
  margin-left:0;margin-right:0;text-align:left;
}
#success .caption .inner,#vision .caption .inner{text-align:left}

/* Gradient strength set from measurement, not taste: at the previous ramp the
   vision panel measured 1.83:1 behind its headline (bright sunrise image).
   Top quarter stays pristine; the copy zone darkens enough to clear 7:1. */
.hero-media::after,
.cinema .media::after,
.page-hero .ph-media::after{
  background:linear-gradient(180deg,
    rgba(var(--shade),0) 24%,
    rgba(var(--shade),0.28) 48%,
    rgba(var(--shade),0.60) 72%,
    rgba(var(--shade),0.88) 100%);
}
/* thin Fraunces strokes need local separation over busy photography */
.hero-copy,.cinema .caption,.page-hero:not(.compact) .ph-copy{
  text-shadow:0 1px 2px rgba(var(--shade),0.34),0 2px 24px rgba(var(--shade),0.28);
}

/* Grid-stack instead of absolute positioning: the row height becomes
   max(media, caption), so the copy can never overflow past the image and
   land outside the gradient (which is exactly what #vision was doing —
   its caption was 578px against a 551px media, putting the headline above
   the photo entirely and measuring 1.98:1). */
.cinema{display:grid;position:relative}
.cinema > .media{
  grid-area:1/1;
  height:auto;min-height:clamp(460px,82vh,860px);
  align-self:stretch;
}
.cinema > .caption{
  grid-area:1/1;align-self:end;
  position:relative;left:auto;right:auto;bottom:auto;top:auto;
}
/* the closing panel carries a ~580px text block; at 860px tall that is 80% of
   the frame, so the veil had to climb into the sky. Give it more height. */
#vision .media{height:auto;min-height:clamp(600px,84vh,920px)}

.hero{display:grid}
.hero > .hero-media{grid-area:1/1;height:auto;min-height:clamp(580px,93vh,1040px);align-self:stretch}
.hero > .hero-copy{grid-area:1/1;align-self:end;position:relative;left:auto;right:auto;bottom:auto}

.page-hero:not(.compact){display:grid}
.page-hero:not(.compact) > .ph-media{grid-area:1/1;height:auto;min-height:clamp(380px,62vh,660px);align-self:stretch}
.page-hero:not(.compact) > .ph-copy{grid-area:1/1;align-self:end;position:relative;left:auto;right:auto;bottom:auto}
/* the media element must fill the stretched row */
.hero-media picture,.cinema .media picture,.page-hero .ph-media picture{height:100%}

/* ============================================================
   SECTION SYSTEM — one paper ground, media as floating cards.
   The old design used four full-bleed ground tones (bone,
   bone-deep, mist, sage-wash) with hard edges. Against inset
   rounded media that reads as patchwork, so the page ground is
   now a single paper field and every tonal moment is a card.
   ============================================================ */

/* one ground for every text section */
.on-dark,.on-bone,.on-bone-deep,.on-forest,.close-section,
#how,#story,#trust,#products,#heroes,#momentum,#opportunity{
  background:var(--bone);
  background-image:none;
  border-top:0;
}
.on-dark .support,.on-bone .support,.on-bone-deep .support,#momentum .support{color:var(--stone)}
.on-dark h2,#story h2,#momentum h2{color:var(--forest)}

/* the hairline dividers were only landing on 3 of 16 sections; with
   floating media and macro whitespace they are redundant */
.on-bone + .on-bone,.on-bone + .on-bone-deep,.on-bone-deep + .on-bone,
.on-bone-deep + .on-bone-deep,.on-bone + .on-forest,.on-forest + .on-bone{border-top:0}

/* ---- TRUST SPLIT: inset rounded media, matching the card language ---- */
.split{
  padding:var(--section-y) var(--gutter);
  gap:clamp(20px,3vw,48px);
  align-items:stretch;
}
.split .split-media{
  border-radius:var(--r-media);overflow:hidden;
  min-height:clamp(384px,62.4vh,672px);
}
.split .split-copy{padding:0 clamp(8px,2vw,32px)}
@media(max-width:900px){
  .split .split-media{min-height:clamp(312px,50.4vh,456px)}
  .split .split-copy{padding-left:0;padding-right:0}
}

/* The opportunity section was a deep card on a dark ground; it is now the
   investor thesis block on bone, so the light-on-dark colours it set for its
   h2, support and eyebrow are gone with it (bone h2 on bone read as blank). */

/* ---- ritual band: spacing instead of stub dividers ---- */
.ritual{border-top:0}
.ritual::before{display:none}
.ritual-item{border-right:0;border-bottom:0;padding:26px 18px}
.ritual-item .word{color:var(--forest)}

/* ---- compact page heroes (contact / faq / legal) join the system ---- */
.page-hero.compact{background:var(--bone)}
.page-hero.compact h1{color:var(--forest)}
.page-hero.compact .ph-sub{color:var(--stone)}
.page-hero.compact .ph-copy .eyebrow{color:var(--gold-ink)}
.page-hero.compact .ph-copy{padding-top:clamp(120px,14vh,160px)}

/* ---- consistent vertical rhythm between stacked cards ---- */
.cinema + .cinema{margin-top:0}
.close-section{padding-top:var(--section-y)}

/* card-wrapping anchors must carry an explicit colour or their children
   inherit the UA link blue (this is how the contact eyebrows went blue) */
a.contact-card,a.hero-card,a.product,a.band{color:var(--ink)}

/* ============================================================
   FIRST LIGHT — the four principles were four words stranded on
   blank paper with a 153px dead gap above and a 90px spacer
   below. They are now one card, in the same language as every
   other block on the page.
   ============================================================ */
#principles .statement{padding-bottom:var(--section-gap)}
#principles{padding-bottom:var(--section-y)}
.ritual{
  max-width:var(--w-content);
  margin:0 auto;
  grid-template-columns:repeat(4,1fr);
  background:var(--white);
  border-radius:var(--r-media);
  box-shadow:0 0 0 1px var(--hair),0 2px 6px rgba(38,51,43,0.04),0 18px 44px -26px rgba(38,51,43,0.16);
  overflow:hidden;
}
.ritual-item{
  padding:clamp(28px,3.4vw,44px) clamp(14px,1.8vw,26px);
  border-right:1px solid var(--hair);
  text-align:center;
}
.ritual-item:last-child{border-right:0}
.ritual-item .num{
  display:block;margin-bottom:12px;line-height:1;
  font-size:1.05rem;letter-spacing:0.01em;color:var(--gold-ink);
  font-variant-numeric:lining-nums tabular-nums;
}
.ritual-item .word{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.15rem,1.6vw,1.42rem);
  font-variation-settings:"opsz" 40;
  color:var(--forest);
}
@media(max-width:820px){
  .ritual{grid-template-columns:repeat(2,1fr)}
  .ritual-item:nth-child(2){border-right:0}
  .ritual-item:nth-child(1),.ritual-item:nth-child(2){border-bottom:1px solid var(--hair)}
}
@media(max-width:460px){
  .ritual{grid-template-columns:1fr}
  .ritual-item{border-right:0;border-bottom:1px solid var(--hair)}
  .ritual-item:last-child{border-bottom:0}
}

/* every cinema sub-copy gets the same lede gap — #partners-image was
   relying on an inline margin that got cleaned up, so its copy collided
   with the headline above it */
.cinema .caption .support{margin-top:var(--lede-gap)}

/* ---- TWO PANELS SIDE BY SIDE IN ONE SECTION ---- */
.cinema-pair{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(10px,1.4vw,20px);
  margin-top:0;
  padding:0 var(--gutter);
}
.cinema-pair > .cinema{padding:0;margin:0}
.cinema-pair > .cinema > .media{min-height:clamp(420px,64vh,680px)}
/* narrower columns need tighter copy and a slightly smaller display size */
.cinema-pair .caption .inner{padding:0 clamp(22px,2.4vw,40px) clamp(30px,4vh,48px)}
.cinema-pair .caption h2{max-width:15ch}
.cinema-pair .caption .support{font-size:clamp(0.94rem,1.05vw,1.04rem);max-width:34ch}
@media(max-width:900px){
  .cinema-pair{grid-template-columns:1fr}
  .cinema-pair > .cinema > .media{min-height:clamp(380px,54vh,520px)}
}

/* ---- HOW IT WORKS: clean background plate, light type ---- */
#how{
  padding:0 var(--gutter);
  background:var(--bone);
}
#how .statement,#how .steps{position:relative;z-index:1}
#how > .statement{padding-top:0}
#how .how-inner{
  position:relative;border-radius:var(--r-media);overflow:hidden;
  background-image:image-set(url("../img/how-bg.avif") type("image/avif"),url("../img/how-bg.jpg") type("image/jpeg"));
  background-size:cover;background-position:center 78%;
}
#how .how-inner::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(var(--shade),0.91) 0%,rgba(var(--shade),0.84) 55%,rgba(var(--shade),0.90) 100%);
}
#how .how-inner > *{position:relative;z-index:1}
#how .statement .eyebrow{color:var(--gold-pale)}
#how .statement h2{color:var(--bone)}
#how .steps{padding-bottom:0}
#how .step h3{color:var(--bone)}
#how .step p{color:rgba(253,252,249,0.86)}
#how .step .step-num{color:var(--gold-pale)}

/* paired cards: matching format on both sides, and a larger display size —
   the earlier step-down to 2.5rem made the titles read as captions */
.cinema-pair .caption h2{
  /* size comes from .display-m; the tighter leading is deliberate for a
     caption sitting over a photograph */
  font-variation-settings:"opsz" 112;
  line-height:1.08;
  max-width:16ch;
}

.cinema-pair .caption .support{
  font-size:clamp(0.98rem,1.15vw,1.1rem);
  max-width:36ch;
  margin-top:clamp(20px,2.4vh,30px);
}
.cinema-pair > .cinema > .media{min-height:clamp(460px,70vh,760px)}

/* Paired cards must read as one row: identical internal rhythm, and the
   headline reserves two lines so a one-line title still puts the eyebrow
   and sub-copy on the same baselines as its neighbour. The old
   #opportunity-image ID rule was forcing a different gap (36 vs 22). */
.cinema-pair .caption h2,
#opportunity-image .caption h2,
#partners-image .caption h2{
  min-height:calc(2 * 1.08em);
  margin:-0.29em 0 0;   /* leading trim; these captions run line-height 1.08 */
}
.cinema-pair .caption .support,
#opportunity-image .caption .support,
#partners-image .caption .support{
  /* h2 runs at line-height 1.08, so its box bottom sits on the descenders;
     the gap has to carry the missing leading as well as the paragraph space */
  margin-top:clamp(40px,3.4vw,56px);
  max-width:36ch;
}

/* reserve two lines of sub-copy as well, so both blocks are the same height
   and every element lands on the same baseline across the row */
.cinema-pair .caption .support,
#opportunity-image .caption .support,
#partners-image .caption .support{min-height:calc(2 * 1.65em)}

/* ============================================================
   ROW ALIGNMENT — subgrid
   Cards in a row must land their eyebrow, title, body and link
   on the same baselines regardless of how their copy wraps.
   Subgrid aligns to real content, so it stays correct if the
   client edits the copy — unlike a guessed min-height.
   ============================================================ */
@supports (grid-template-rows:subgrid){
  /* contact cards: eyebrow / h3 / p / mail  (the ::before core is absolute,
     so it does not take part in the track flow) */
  .contact-card{
    display:grid;
    grid-template-rows:subgrid;
    grid-row:span 4;
    align-content:start;
    row-gap:0;
  }
  .contact-card .eyebrow{align-self:start}
  .contact-card h2{align-self:start}
  .contact-card p{align-self:start}
  .contact-card .cc-mail{align-self:end;justify-self:start}

  /* product cards: media / eyebrow / h3 / tag / body — chained subgrid so
     the inner copy block inherits the outer card's tracks */
  .product{display:grid;grid-template-rows:subgrid;grid-row:span 5}
  .product .p-copy{
    display:grid;grid-template-rows:subgrid;grid-row:span 4;
    align-content:start;row-gap:0;
  }
  .product .p-copy > *{align-self:start}
  .product .p-copy .p-body{align-self:start}
}

/* fallback for engines without subgrid: reserve the lines that vary */
@supports not (grid-template-rows:subgrid){
  .contact-card h2{min-height:calc(2 * 1.22em)}
  .contact-card p{min-height:calc(2 * 1.65em)}
  .product .p-tag{min-height:calc(2 * 1.5em)}
}

/* ============================================================
   MOBILE HERO — the spine's two-sentence subhead makes the copy
   block tall enough that it began at 15.9% of the image height,
   above the gradient: eyebrow measured 1.05:1 and the headline
   2.44:1. Tighter type + an earlier, stronger ramp fixes both.
   ============================================================ */
@media(max-width:700px){
  .hero-copy h1{font-size:clamp(2.15rem,8.6vw,2.85rem);font-variation-settings:"opsz" 96;line-height:1.06}
  .hero-sub{font-size:1rem;line-height:1.6}
  .hero-copy{padding-bottom:clamp(30px,4vh,44px)}
  .hero-cta{margin-top:clamp(20px,2.6vh,28px)}
  .hero-media::after{
    background:linear-gradient(180deg,
      rgba(var(--shade),0.50) 0%,
      rgba(var(--shade),0.58) 22%,
      rgba(var(--shade),0.74) 55%,
      rgba(var(--shade),0.90) 100%);
  }
}

/* The eyebrow is always the topmost element of a caption, so it sits where the
   ramp is weakest — it measured 3.95:1 on the brighter FarmEye plate. Lifting
   the mid stops fixes it across every panel without touching the clean top quarter. */
.hero-media::after,
.cinema .media::after,
.page-hero .ph-media::after{
  background:linear-gradient(180deg,
    rgba(var(--shade),0) 24%,
    rgba(var(--shade),0.38) 48%,
    rgba(var(--shade),0.66) 72%,
    rgba(var(--shade),0.89) 100%);
}

/* #vision carries the tallest caption on the site (headline + founders line),
   so its eyebrow sits at ~26% of the image — above where the standard ramp
   begins — and measured 1.75:1 against a bright sunrise plate. It needs its
   own earlier ramp; the panel is the emotional close, so it carries depth well. */
#vision .media::after{
  background:linear-gradient(180deg,
    rgba(var(--shade),0) 6%,
    rgba(var(--shade),0.52) 28%,
    rgba(var(--shade),0.68) 55%,
    rgba(var(--shade),0.80) 78%,
    rgba(var(--shade),0.90) 100%);
}

/* ============================================================
   HOW IT WORKS — read as a connected sequence, not three
   paragraphs: numbered markers joined by a hairline run.
   The numbering is legitimate here — this IS an ordered process.
   ============================================================ */
.steps-flow{position:relative}
.steps-flow .step{position:relative;padding-top:clamp(52px,6vh,68px)}
/* the marker */
.steps-flow .step .step-num{
  position:absolute;top:0;left:0;
  display:flex;align-items:center;justify-content:center;
  width:clamp(38px,3.4vw,46px);height:clamp(38px,3.4vw,46px);
  border-radius:var(--r-pill);
  border:1px solid rgba(238,220,184,0.42);
  background:rgba(238,220,184,0.10);
  font-family:var(--font-display);font-style:italic;
  font-size:clamp(1rem,1.3vw,1.2rem);line-height:1;
  color:var(--gold-pale);
}
/* the run connecting them */
@media(min-width:821px){
  .steps-flow .step::before{
    content:"";position:absolute;
    top:calc(clamp(38px,3.4vw,46px) / 2);
    left:clamp(38px,3.4vw,46px);right:calc(-1 * clamp(28px,4vw,64px));
    height:1px;
    background:linear-gradient(90deg,rgba(238,220,184,0.36),rgba(238,220,184,0.10));
  }
  /* the run must stop at the final step, not the final child. Bright Greens
     puts a .mid-cta after the steps, so :last-child never matched the third
     step and its 64px connector overhung the grid, widening the page to 1375
     and giving the whole document a horizontal scrollbar from 1024 up. */
  .steps-flow .step:not(:has(~ .step))::before{display:none}
  .steps-flow .step:last-child::before{display:none}
}
.steps-flow .step h3{margin-top:0}
/* step headings wrap to different line counts, so align the row with subgrid */
@supports (grid-template-rows:subgrid){
  .steps-flow{grid-auto-rows:auto}
  .steps-flow .step{display:grid;grid-template-rows:subgrid;grid-row:span 2;align-content:start;row-gap:0}
  .steps-flow .step h3{align-self:start}
  .steps-flow .step p{align-self:start;margin-top:clamp(10px,1.2vh,16px)}
}
@supports not (grid-template-rows:subgrid){
  .steps-flow .step h3{min-height:calc(2 * 1.22em)}
}

/* ============================================================
   HOW IT WORKS — clean type on paper.
   The background plate was right when this sat between two light
   sections; now that it follows the dark FarmEye photo panel,
   two dark blocks stacked read muddy and cramped. The page needs
   image -> breathe -> image rhythm, so this is the breathe.
   ============================================================ */
#how{padding-top:var(--section-y);padding-bottom:var(--section-y)}
#how .how-inner{
  background-image:none;
  border-radius:0;overflow:visible;
}
#how .how-inner::before{display:none}
#how > .statement,#how .statement{padding-top:0;padding-bottom:var(--section-gap)}
#how .steps{padding-bottom:0}

/* type returns to the paper palette */
#how .statement .eyebrow{color:var(--gold-ink)}
#how .statement h2{color:var(--forest)}
#how .step h3{color:var(--forest)}
#how .step p{color:var(--stone)}

/* markers and the connecting run, tuned for light ground */
.steps-flow .step .step-num{
  border:1px solid rgba(126,92,38,0.30);
  background:rgba(126,92,38,0.06);
  color:var(--gold-ink);
}
@media(min-width:821px){
  .steps-flow .step::before{
    background:linear-gradient(90deg,rgba(126,92,38,0.34),rgba(126,92,38,0.10));
  }
}
/* the plate-era ID rule (#how .step .step-num) outranks the class-based
   marker styling, so the numerals were still rendering gold-pale on paper */
#how .step .step-num{color:var(--gold-ink)}

/* The connector was a left-to-right gradient (0.34 -> 0.10), so each run faded
   to almost nothing just before the next marker and the sequence read as broken.
   A uniform hairline reads as one continuous line. Markers get an opaque fill so
   the run appears to pass behind them rather than butt against them. */
@media(min-width:821px){
  .steps-flow .step::before{
    background:rgba(126,92,38,0.26);
    right:calc(-1 * clamp(28px,4vw,64px) - 1px);
  }
}
.steps-flow .step .step-num{
  background:var(--bone);
  border-color:rgba(126,92,38,0.38);
  z-index:1;
}

/* ============================================================
   STEP MARKERS CENTRED ON THEIR COLUMN
   Everything was left-aligned (column, marker, heading, body all
   at the same x), but the marker then reads as hanging off the
   left of its text block. Centring the marker AND the copy puts
   them on one axis and lets the connector run centre-to-centre.
   ============================================================ */
.steps-flow{--mark:clamp(38px,3.4vw,46px);--sgap:clamp(28px,4vw,64px)}
.steps-flow .step{
  text-align:center;
  padding-top:calc(var(--mark) + clamp(20px,2.6vh,30px));
}
.steps-flow .step .step-num{
  left:50%;transform:translateX(-50%);
  width:var(--mark);height:var(--mark);
}
.steps-flow .step h3{text-align:center}
.steps-flow .step p{text-align:center;max-width:34ch;margin-left:auto;margin-right:auto}

@media(min-width:821px){
  /* run from this marker's right edge to the next marker's left edge */
  .steps-flow .step::before{
    top:calc(var(--mark) / 2);
    left:calc(50% + (var(--mark) / 2));
    right:calc((var(--mark) / 2) - 50% - var(--sgap));
  }
}
@media(max-width:820px){
  .steps-flow .step{padding-top:calc(var(--mark) + 18px)}
}

/* ============================================================
   WHAT FARMEYE GIVES THE FARMER -> and how it becomes a Bright Green.
   Two columns: what the tool gathers, and where that leads.
   Copy is the spine's verbatim, including its deliberate hedges
   ("where eligible", "may be prepared for", "a defined share") —
   the exact farmer percentage is HOLD in the claim register.
   ============================================================ */
#farmeye-detail{padding-bottom:clamp(88px,12vh,150px)}
/* this pair's sub-copy runs to three lines on the right and two on the left,
   so reserve three here (the opportunity/partners pair still reserves two) */
#fe-gathers .caption .support,
#fe-becomes .caption .support{min-height:calc(4 * 1.65em)}

/* the tailgate frame keeps a bright hazy band exactly where the eyebrow sits,
   so this pair starts its veil earlier than the standard photo ramp */
#fe-gathers .media::after,#fe-becomes .media::after{
  background:linear-gradient(180deg,
    rgba(var(--shade),0) 38%,
    rgba(var(--shade),0.18) 55%,
    rgba(var(--shade),0.44) 72%,
    rgba(var(--shade),0.68) 88%,
    rgba(var(--shade),0.82) 100%);
}

/* caption-bottom's `bottom` inset predates the grid-stack refactor: the caption
   is position:relative now, so that value shifts it UP off the panel floor
   instead of insetting it. The pair panels are short enough that the leftover
   80px reads as dead space, so drop the shift and let padding set the inset. */
.cinema-pair .cinema.caption-bottom .caption{bottom:0}
.cinema-pair .caption .inner{padding-bottom:clamp(30px,3.4vw,52px)}

/* The family-in-pasture hero is brightest exactly where the copy block starts
   (~33% down), so the vertical ramp alone leaves the eyebrow at 2.5:1. The copy
   sits bottom-left, so put the density there with a side scrim and leave the
   sunlit hills and cattle on the right untouched. */
.hero-media::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(96deg,
    rgba(var(--shade),0.34) 0%,
    rgba(var(--shade),0.16) 34%,
    rgba(var(--shade),0) 58%);
}
@media(max-width:700px){
  /* mobile already carries a strong vertical ramp; a side scrim would only muddy it */
  .hero-media::before{background:none}
}

/* Solo full-bleed cinema panels carried the same legacy `bottom` shift as the
   pair, plus a centred inner block that pushed the copy 173px off the left edge
   at 1440. Drop the shift and left-align the block so the inset is just padding.
   The pair keeps its own tighter values via the #id rules further up. */
.cinema.caption-bottom .caption{bottom:0}
#farmeye .caption .inner{
  margin-left:0;margin-right:auto;
  padding-left:clamp(30px,3.6vw,60px);
  padding-right:clamp(30px,3.6vw,60px);
  padding-bottom:clamp(30px,3.6vw,56px);
}

/* #vision's eyebrow still carried the dark ink from the light-scrim era. That
   scrim was dropped when the panels moved to dark gradients and the h2 was
   switched to bone at the same time, but the eyebrow was missed — 2.18:1. */
#vision .caption .eyebrow{color:var(--gold-pale)}

/* Two-beat headline: the second sentence drops to its own line in the italic
   display cut and gold ink — the same accent pairing the hero uses for
   "regenerating nature" — so the turn reads as a quieter, separate thought. */
.statement h2 .h2-turn{
  display:block;
  font-style:italic;
  color:var(--gold-ink);
  font-size:0.58em;
  line-height:1.16;
  margin-top:clamp(14px,1.5vw,24px);
  font-variation-settings:"opsz" 42;
}
@media(max-width:700px){
  .statement h2 .h2-turn{font-size:0.66em;margin-top:12px}
}

/* ── Investor thesis ───────────────────────────────────────────────────────
   Replaces the full-bleed forest slab, which read as heavy: a big dark mass
   carrying one giant sentence. This is an editorial block on bone — headline
   left, argument right, three points on a hairline rule, then the door out.
   Weight comes from structure and air rather than a filled panel. */
.thesis{
  max-width:var(--w-content);margin:0 auto;
  padding:var(--section-y) clamp(20px,4vw,48px);
}
.thesis-head{
  display:grid;grid-template-columns:1.05fr 0.95fr;
  gap:clamp(28px,5vw,80px);align-items:start;
  /* the only left-aligned eyebrow on the site: it sits directly over the first
     word rather than floating above a centred line, which reads tighter at the
     same measured distance. Local bump to the shared token, so the one control
     still governs — this context just asks it for more. */
  --eyebrow-gap:clamp(24px,2.4vw,34px);
}

.thesis-head h2{
  /* every other headline on the homepage is either a full-width statement
     (display-l) or a caption sitting on a photograph (display-m). This one is
     neither: a text headline in the narrow column of a two-column head, where
     display-l runs to five lines and display-m reads undersized against the
     lede beside it. So it takes the step between them. */
  font-size:clamp(2.3rem,4.6vw,3.85rem);
  font-variation-settings:"opsz" 120;
  letter-spacing:-0.014em;
  line-height:1.1;max-width:14ch;
}
.thesis-lede{padding-top:clamp(6px,1.4vw,18px)}
.thesis-lede p{color:var(--stone);line-height:1.72;max-width:46ch}
.thesis-lede p + p{margin-top:1em}

.thesis-points{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,3.4vw,56px);
  margin-top:clamp(48px,7vh,88px);
  padding-top:clamp(30px,4vh,44px);
  border-top:1px solid rgba(126,92,38,0.20);
}
.thesis-points .tp h3{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.12rem,1.5vw,1.38rem);
  color:var(--forest);margin-bottom:clamp(8px,1vh,12px);
}
.thesis-points .tp p{color:var(--stone);line-height:1.7;font-size:0.97rem}

.thesis-cta{
  margin-top:clamp(40px,6vh,68px);
  display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);flex-wrap:wrap;
}
.thesis-note{color:var(--stone);font-size:0.88rem;max-width:34ch}  /* no opacity: 0.82 dropped it to 3.77:1 */

@media(max-width:860px){
  .thesis-head{grid-template-columns:1fr;gap:clamp(20px,3vh,28px)}
  .thesis-head h2{max-width:none}
  .thesis-points{grid-template-columns:1fr;gap:clamp(22px,3vh,30px)}
}

/* This pair runs 3 lines left and 4 right; captions are bottom-aligned, so the
   taller one starts higher. Reserve four so both rows line up, same as the
   FarmEye pair above. */
#opportunity-image .caption .support,
#partners-image .caption .support{min-height:calc(4 * 1.65em)}

/* ── Farmers page ─────────────────────────────────────────────────────────── */
.prose ul.fe-points{list-style:none;margin-left:0}
.prose ul.fe-points li{position:relative;padding-left:26px;margin-bottom:0.72em}
.prose ul.fe-points li::before{
  content:"";position:absolute;left:0;top:0.62em;
  width:7px;height:7px;border-radius:50%;
  background:var(--gold-ink);opacity:0.55;
}
/* replaces the inline style the buyers page uses for the same purpose */
.prose .page-note{
  font-size:0.85rem;color:var(--stone);
  max-width:62ch;   /* fine print ran to ~90ch at this size */
  border-top:1px solid rgba(28,53,39,0.14);
  padding-top:18px;margin-top:2.4em;
}

/* the fork now runs to five cards, so the stagger needs a fourth step */
.reveal.d4{transition-delay:440ms}

/* The farmer leads the fork — the page casts them as the hero, so their card
   spans the grid rather than sitting as a fifth tile in a two-up layout. */
.hero-card.lead{
  grid-column:1 / -1;
  display:block;text-decoration:none;color:var(--ink);
  border-color:rgba(176,142,88,0.38);
  background:var(--white);
}
.hero-card.lead h3{max-width:20ch}
.hero-card.lead p{max-width:62ch}
.hero-card .card-go{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:clamp(18px,2.2vh,26px);
  color:var(--forest);font-weight:600;font-size:0.95rem;
}
.hero-card .card-go .btn-ico{
  width:26px;height:26px;border-radius:50%;
  background:rgba(28,53,39,0.06);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:0.78rem;
  transition:transform 600ms var(--ease-soft),background 450ms var(--ease-soft);
}
.hero-card:hover .card-go .btn-ico{
  transform:translate(2px,-1px) scale(1.06);
  background:rgba(176,142,88,0.20);
}
@media(max-width:820px){.hero-card.lead h3,.hero-card.lead p{max-width:none}}

/* The fork is three equal doors now — one per destination the site actually
   has. The 2-up grid plus a full-width lead only existed because five cards
   would not divide evenly. */
.heroes-grid.heroes-3{grid-template-columns:repeat(3,1fr)}
.heroes-3 .hero-card{
  display:flex;flex-direction:column;
  text-decoration:none;color:var(--ink);
}
.heroes-3 .hero-card p{flex:1 1 auto;max-width:none}
.heroes-3 .hero-card h3{min-height:calc(2 * 1.22em)}
@media(max-width:980px){.heroes-grid.heroes-3{grid-template-columns:1fr}
  .heroes-3 .hero-card h3{min-height:0}}

/* The payoff is four distinct beneficiaries — farmers, food systems, buyers,
   nature. Run together as one centred paragraph they blur; given their own
   lines with real leading they read as a litany, which suits a closing beat. */
/* the four gains were a centred stack in a 44ch column, which read as one
   paragraph rather than four distinct outcomes. Each now takes its own card,
   in the same language as the ritual band and the access cards. The block sits
   as a sibling of .statement (like #principles/.ritual) so the row is not
   trapped inside the 940px statement column. */
.payoff{
  max-width:var(--w-content);
  margin:0 auto;
  padding:0 clamp(20px,4vw,48px) var(--pad-bottom);
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.4vw,20px);
  text-align:left;
}
.payoff p{
  margin:0;
  background:var(--white);
  border-radius:var(--r-lg);
  box-shadow:0 0 0 1px var(--hair),0 2px 6px rgba(38,51,43,0.04),
             0 14px 34px -24px rgba(38,51,43,0.14);
  padding:clamp(26px,2.4vw,36px);
  min-height:clamp(130px,11vw,168px);
  display:flex;align-items:center;
  font-family:var(--font-display);
  font-weight:400;
  font-variation-settings:"opsz" 40;
  font-size:clamp(1.05rem,1.3vw,1.28rem);
  line-height:1.36;
  color:var(--forest);
  text-wrap:pretty;
}
@media(max-width:1000px){.payoff{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.payoff{grid-template-columns:1fr}}

/* #vision's founders line still carried stone ink and gold-ink emphasis from
   the light-scrim era — 2.78:1 over the photograph. Same leftover as its
   eyebrow. The ramp also needs a touch more depth now the wider lede-gap
   pushes the caption higher up the frame. */
#vision .caption .founders{color:rgba(253,252,249,0.88)}
#vision .caption .founders strong{color:var(--gold-pale)}
/* The caption lands anywhere from 24% to 42% down the frame depending on
   viewport height — the media is sized in vh while the caption is sized by its
   content — so a percentage ramp on the image cannot cover it. The image keeps
   a gentle late ramp for depth, and the scrim that guarantees legibility rides
   on the caption itself, so it tracks the text wherever it sits. */
#vision .caption{
  /* NO background here: this box is one gutter wider than the photo, so a
     background on it paints past the image edge as a hard vertical seam.
     The top padding it used to carry was only there to give that background a
     fade zone — with the scrim on the media it just pushed the text up the
     frame, which forced the veil up with it. */
  padding-top:0;
  background:none;
}
/* the scrim rides on the media instead — clipped by its radius and overflow —
   measured up from the bottom in px so it still tracks the bottom-set text */
#vision .media::after{
  background:linear-gradient(to top,
    rgba(var(--shade),0.50) 0,
    rgba(var(--shade),0.52) 280px,
    rgba(var(--shade),0.56) 450px,
    rgba(var(--shade),0.62) 600px,
    rgba(var(--shade),0.28) 655px,
    rgba(var(--shade),0) 715px);
}

/* The close ended on a bare mailto — the only section on the site without a
   real control. Button leads, address stays as the quieter second option. */
.close-cta{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(18px,2.4vh,28px);
  margin-top:clamp(30px,4vh,44px);
}
.close-cta .email{margin-top:0}

/* #rewarded follows a bone section, so its own .statement top padding stacked
   on top of the grid's trailing space — 340px above the eyebrow against 170px
   below the last line, because #vision's photo starts immediately. Trim the
   seam so the space reads equal on both sides. */
/* #rewarded uses the standard rhythm; the seam it shares with #heroes is
   halved below so two adjacent bone sections do not double up */

/* #vision's headline ran five lines: max-width:17ch forced a very narrow
   measure at 85px. Widen it and let her second sentence drop to its own
   quieter line — same two-beat pattern as #principles, in gold-pale so it
   reads on the photograph. */
#vision .caption h2{max-width:24ch}
#vision .caption h2 .h2-turn{
  display:block;font-style:italic;color:var(--gold-pale);
  font-size:0.56em;line-height:1.16;
  margin-top:clamp(14px,1.5vw,24px);
  font-variation-settings:"opsz" 42;
}
#vision .caption .founders-link{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--gold-pale);text-decoration:none;
  border-bottom:1px solid rgba(238,220,184,0.42);
  padding-bottom:1px;white-space:nowrap;
}
#vision .caption .founders-link .btn-ico{font-size:0.8em;transition:transform 500ms var(--ease-soft)}
#vision .caption .founders-link:hover{border-bottom-color:var(--gold-pale)}
#vision .caption .founders-link:hover .btn-ico{transform:translate(2px,-1px)}

/* ── The whole idea, in one view ───────────────────────────────────────────
   Her plain-English summary, straight after the hero. Deliberately not the
   numbered flow (#how), the roman band (#principles), the cards (#heroes) or
   the hairline row (#opportunity) — a short gold rule over each block keeps
   it its own thing while staying in the same quiet register. */
.idea-grid{
  max-width:var(--w-content);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(26px,3.6vw,60px);
  padding:0 clamp(20px,4vw,48px) var(--section-y);
}
.idea h3{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.15rem,1.55vw,1.42rem);
  color:var(--forest);line-height:1.25;
  padding-top:clamp(16px,2vh,22px);
  border-top:2px solid rgba(126,92,38,0.34);
  margin-bottom:clamp(10px,1.2vh,14px);
}
.idea p{color:var(--stone);line-height:1.72;font-size:0.99rem}
@media(max-width:900px){
  .idea-grid{grid-template-columns:1fr;gap:clamp(24px,3vh,34px)}
}

@media(min-width:901px){
  /* Align the bodies with subgrid rather than a fixed two-line reserve: it
     tracks the real content, so a section whose headings all fit one line
     does not carry 40px of dead space under each. */
  .idea-grid{grid-template-rows:auto auto}
  .idea{display:grid;grid-row:span 2;grid-template-rows:subgrid;gap:0}
}


/* two adjacent bone sections would otherwise stack two full --section-y
   values at the seam; halve the second one’s top */


/* ── One gap between sections ──────────────────────────────────────────────
   Each block reads --pad-top / --pad-bottom, which the adjacency rules below
   set from what actually sits next to it. */
main > *{--pad-top:var(--gap-half);--pad-bottom:var(--gap-half)}
.hero + *,
.cinema + *,
.cinema-pair + *{--pad-top:var(--gap-full)}
main > *:has(+ .cinema),
main > *:has(+ .cinema-pair){--pad-bottom:var(--gap-full)}
main > *:last-child{--pad-bottom:var(--gap-full)}

.statement{padding-top:var(--pad-top);padding-bottom:var(--pad-bottom)}
.thesis{padding-top:var(--pad-top);padding-bottom:var(--pad-bottom)}
.close-section{padding-top:var(--pad-top);padding-bottom:var(--pad-bottom)}
.split{padding-top:var(--pad-top);padding-bottom:var(--pad-bottom)}
#how{padding-top:var(--pad-top);padding-bottom:var(--pad-bottom)}
#how > .statement,#how .statement{padding-top:0;padding-bottom:var(--section-gap)}

/* a statement followed by a grid inside the same section hands the section's
   bottom padding to the grid */
.u-tight{padding-bottom:var(--section-gap)}
.heroes-grid,.idea-grid,.products{padding-bottom:var(--pad-bottom)}
#principles{padding-bottom:var(--pad-bottom)}
#principles .statement{padding-bottom:var(--section-gap)}
#how .steps{padding-bottom:0}

/* the hero copy already carries ~60px below the CTAs, so the section after it
   takes the remainder rather than a full gap */
.hero + *{--pad-top:calc(var(--gap-full) * 0.7)}

/* ── Polish: press physics ────────────────────────────────────────────────
   The fork cards, contact cards and product cards became links; they lift on
   hover but had no press state, so a tap gave no physical feedback. */
.hero-card:active,
.contact-card:active,
a.product:active{transform:translateY(-1px) scale(0.994)}
.hero-card,.contact-card,a.product{transition:border-color 450ms var(--ease-soft),background 450ms var(--ease-soft),box-shadow 600ms var(--ease-soft),transform 320ms var(--ease-press)}

/* the inline CTA inside a card gets the same kinetic tension as the buttons */
.card-go .btn-ico,.founders-link .btn-ico{transition:transform 520ms var(--ease-press),background 400ms var(--ease-soft)}


/* The warm late-light frames carry their own shadow where the copy sits, so the
   veil no longer has to do the work — these panels measured 8–9:1 against a 4.5
   requirement. Lighten it so the golden light reads instead of being flattened.
   #opportunity-image keeps the standard ramp: its plate is still the pale one. */
#partners-image .media::after{
  background:linear-gradient(180deg,
    rgba(var(--shade),0) 36%,
    rgba(var(--shade),0.16) 56%,
    rgba(var(--shade),0.40) 74%,
    rgba(var(--shade),0.64) 90%,
    rgba(var(--shade),0.78) 100%);
}


/* The hero shared the standard ramp, which starts at 24% — far too high on a
   full-bleed plate whose copy sits at 31%. Give it its own, starting lower. */
.hero-media::after{
  background:linear-gradient(180deg,
    rgba(var(--shade),0) 20%,
    rgba(var(--shade),0.22) 44%,
    rgba(var(--shade),0.48) 66%,
    rgba(var(--shade),0.70) 86%,
    rgba(var(--shade),0.82) 100%);
}

/* the founders credit ran three lines, adding ~27px to a text block that already
   dictates how high the veil must reach — give it a wider measure */
#vision .caption .founders{max-width:64ch}


/* ── Media width cap ───────────────────────────────────────────────────────
   .cinema, .cinema-pair and .split had no max-width, so on a wide display they
   ran nearly edge to edge while the nav stayed at 1340px. The hero is left
   full-bleed deliberately. */
.cinema,
.cinema-pair,
.split{
  max-width:calc(var(--w-media) + (var(--gutter) * 2));
  margin-left:auto;margin-right:auto;
}
.band{max-width:var(--w-media);margin-left:auto;margin-right:auto}

@media(max-width:700px){
  /* the phone crop puts a brighter part of the plate behind the eyebrow, and
     the frame is short so the text sits high — needs a little more than desktop */
  #vision .media::after{
    background:linear-gradient(to top,
      rgba(var(--shade),0.54) 0,
      rgba(var(--shade),0.58) 260px,
      rgba(var(--shade),0.64) 420px,
      rgba(var(--shade),0.68) 570px,
      rgba(var(--shade),0.30) 625px,
      rgba(var(--shade),0) 690px);
  }
}

/* ── Inner page heroes ─────────────────────────────────────────────────────
   Their image sat in flow (unlike the homepage hero's, which is absolute), so
   on a wide screen its 16:9 ratio drove the height and the inner hero ended up
   TALLER than the homepage one. Take the image out of flow and let the clamp
   govern, set a little under the homepage hero's 93vh. */
.page-hero:not(.compact) > .ph-media{
  min-height:clamp(460px,76vh,840px);
}
.page-hero .ph-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}

@media(max-width:700px){
  /* the shorter inner hero puts the copy higher in the phone crop; the shared
     ramp starts at 24% which is above it on the farmers plate */
  .page-hero .ph-media::after{
    background:linear-gradient(180deg,
      rgba(var(--shade),0) 8%,
      rgba(var(--shade),0.34) 34%,
      rgba(var(--shade),0.60) 62%,
      rgba(var(--shade),0.80) 86%,
      rgba(var(--shade),0.90) 100%);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   BRIGHT GREENS LANDING PAGE
   Standalone per Sarah's brief — same design system, its own header/footer so
   it is not wired into the site navigation.
   ══════════════════════════════════════════════════════════════════════════ */

/* the wordmark is a span here, not a link back into the site */
.lp-nav .nav-wordmark{cursor:default}

/* Sarah's letter and the plain-spoken disclosure block: a readable measure,
   left-aligned inside an otherwise centred statement */
.letter{
  max-width:60ch;margin:var(--lede-gap) auto 0;
  text-align:left;
}
.letter p{
  color:var(--stone);line-height:1.78;
  font-size:clamp(1rem,1.28vw,1.14rem);
}
.letter p + p{margin-top:1.15em}
.letter-sign{margin-top:2em!important;color:var(--forest)!important}
.letter-sign strong{
  font-family:var(--font-display);font-weight:400;font-style:italic;
  font-size:1.3em;color:var(--forest);
}
.letter-role{display:block;color:var(--stone);font-size:0.88rem;margin-top:4px}

/* the producer share — the single most persuasive fact on the page, so it is
   set as a figure pair rather than buried in a paragraph */
/* the producer share as a single split bar — one glance says who gets what */
.on-deep{background:var(--deep);color:var(--bone)}
.on-deep h2{color:var(--bone)}
.on-deep .eyebrow{color:var(--gold-pale)}
.on-deep .support{color:rgba(250,247,240,0.78)}
#share .statement{padding-bottom:var(--section-gap)}
/* figures first, then one proportional ruler beneath them — the numbers carry
   the meaning, the ruler carries the proportion, nothing is a slab */
.share-viz{max-width:var(--w-content);margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.share-figures{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(28px,4vw,72px);align-items:end;padding-bottom:clamp(22px,2.6vw,36px)}
.share-fig{display:grid;gap:10px}
.share-fig-minor{padding-bottom:0.35em}
.share-figure{
  font-family:var(--font-display);font-weight:300;line-height:0.95;
  font-variation-settings:"opsz" 144;letter-spacing:-0.025em;
  font-size:clamp(3.6rem,8.4vw,7.6rem);color:var(--bone);
}
.share-figure.share-minor{font-size:clamp(2.1rem,4.4vw,3.8rem);color:var(--gold-pale)}
.share-unit{font-size:0.42em;margin-left:0.05em;vertical-align:baseline;font-weight:300}
.share-label{margin:0;color:rgba(250,247,240,0.78);font-size:0.95rem;line-height:1.55;max-width:34ch}
.share-track{display:flex;gap:6px;height:14px;border-radius:99px;overflow:hidden;background:rgba(250,247,240,0.08)}
.share-seg{flex:0 0 calc(var(--w) - 3px);height:100%;border-radius:99px;clip-path:inset(0 100% 0 0);transition:clip-path 1300ms var(--ease-out)}
.share-seg-major{background:var(--gold-pale)}
.share-seg-minor{background:rgba(250,247,240,0.30);transition-delay:260ms}
.share-viz.in .share-seg{clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion:reduce){.share-seg{clip-path:none;transition:none}}
/* the image after the dark band gets a strip of bone so its corners do not
   jam against the hard edge */
.on-deep + .cinema{margin-top:var(--gap-full)}

/* the economist's line carries the ecological-value argument, so it is set as
   a quote rather than another paragraph */
.pull-quote{margin:0 auto;max-width:52ch;text-align:left}
.pull-quote p{
  font-family:var(--font-display);font-weight:400;font-style:italic;
  font-size:clamp(1.35rem,2.4vw,2rem);line-height:1.42;
  color:var(--forest);
  border-left:2px solid var(--gold);padding-left:clamp(20px,2.4vw,32px);
}
.pull-quote cite{
  display:block;font-style:normal;margin-top:clamp(16px,2vh,22px);
  padding-left:clamp(22px,2.4vw,34px);
  color:var(--stone);font-size:0.9rem;letter-spacing:0.01em;
}

.lp-footer{
  background:var(--bone-deep);
  padding:clamp(40px,6vh,64px) var(--gutter);
  border-top:1px solid var(--hair);
}
.lp-footer .foot-bottom{
  max-width:var(--w-content);margin:0 auto;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:var(--stone);font-size:0.85rem;
}

@media(max-width:760px){
  .share-figures{grid-template-columns:1fr;gap:18px;align-items:start}
  .share-fig-minor{padding-bottom:0}
  .share-label{max-width:none}
}

/* .u-flush-top is declared before the gap system, so `.statement{padding-top}`
   was overriding it everywhere the utility is used. Restore it. */
.statement.u-flush-top,
.u-flush-top{padding-top:0}

/* ══════════════════════════════════════════════════════════════════════════
   TYPE SCALE — third tier
   The system had only display-xl and display-l, so every section headline
   defaulted to the largest size and nothing read as more important than
   anything else. This is the supporting tier for utility sections.
   ══════════════════════════════════════════════════════════════════════════ */
.display-m{
  font-family:var(--font-display);
  font-weight:300;
  font-variation-settings:"opsz" 96;
  text-wrap:balance;
  font-size:clamp(1.85rem,3.4vw,3.05rem);
  line-height:1.15;
  letter-spacing:-0.012em;
}

/* ── Editorial split ───────────────────────────────────────────────────────
   Breaks the run of centred statements: headline holds the left column,
   argument runs down the right. */
.editorial{
  max-width:var(--w-content);margin:0 auto;
  padding:var(--pad-top) clamp(20px,4vw,48px) var(--pad-bottom);
  display:grid;grid-template-columns:0.92fr 1.08fr;
  gap:clamp(26px,5vw,86px);
  align-items:start;text-align:left;
}
.editorial .ed-head h2{max-width:15ch;margin:-0.32em 0 0}  /* leading trim; line-height 1.15 here */
.editorial .ed-head .eyebrow{display:block}
.editorial .ed-body{padding-top:clamp(4px,0.9vw,12px)}
.editorial .ed-body p{
  color:var(--stone);line-height:1.76;max-width:48ch;
  font-size:clamp(1rem,1.28vw,1.14rem);
}
.editorial .ed-body p + p{margin-top:1.1em}
@media(max-width:860px){
  .editorial{grid-template-columns:1fr;gap:clamp(20px,3vh,30px)}
  .editorial .ed-head h2{max-width:none}
}

/* ── Bright Greens: photo panel rhythm ─────────────────────────────────────
   All four cinema panels rendered at an identical 820px, so the page read as
   the same beat four times. Vary the scale so the definitional and emotional
   panels carry weight and the supporting one acts as a breath. */
/* seven panels alternate with the text sections now, so none needs to run
   near full-viewport — vary them for rhythm, but keep them all comfortably
   shorter than the hero */
#what > .media{min-height:clamp(430px,66vh,740px)}
#farmers > .media{min-height:clamp(430px,66vh,740px)}
#evidence > .media{min-height:clamp(350px,52vh,580px)}
#community > .media{min-height:clamp(450px,72vh,800px)}
#landscape > .media{min-height:clamp(400px,60vh,680px)}
#buy-now > .media{min-height:clamp(420px,64vh,720px)}

/* repeated call to action between beats — StoryBrand asks for the sale more
   than once on a long page */
.mid-cta{
  display:flex;gap:clamp(12px,1.6vw,20px);flex-wrap:wrap;
  justify-content:center;margin-top:clamp(8px,1.4vh,18px);
}
.editorial .ed-body .mid-cta,
.editorial .ed-body p > .btn{margin-top:clamp(14px,2vh,22px)}

@media(max-width:700px){
  /* the Bright Greens plate is brighter behind the eyebrow in the phone crop
     than the homepage one, so this hero carries a little more veil */
  .bg-hero .hero-media::after{
    background:linear-gradient(180deg,
      rgba(var(--shade),0.34) 0%,
      rgba(var(--shade),0.46) 24%,
      rgba(var(--shade),0.66) 56%,
      rgba(var(--shade),0.82) 82%,
      rgba(var(--shade),0.90) 100%);
  }
}

/* centred intro copy sitting under a two-beat headline — a narrower measure
   than the body default, because centred text is harder to track across */
.intro-copy{
  max-width:56ch;margin:var(--lede-gap) auto 0;
  text-align:center;
}
.intro-copy p{
  color:var(--stone);line-height:1.76;
  font-size:clamp(1rem,1.3vw,1.16rem);
}
.intro-copy p + p{margin-top:1.05em}

/* The <img> in a cinema panel sits in normal flow, so at the 1340px capped
   width its 16:9 ratio renders 754px and overrides any min-height below that —
   which is why every panel here came out identical. Take it out of flow so the
   per-panel clamps actually govern. Scoped to this page; the site's other
   cinema panels keep their current behaviour. */
#everything-else > .media img,
#what > .media img,
#farmers > .media img,
#evidence > .media img,
#community > .media img,
#landscape > .media img,
#buy-now > .media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}

/* #evidence is the short "breath" panel, so its caption sits high in a 520px
   frame and the standard ramp starts below it */
#evidence .media::after{
  background:linear-gradient(180deg,
    rgba(var(--shade),0) 6%,
    rgba(var(--shade),0.34) 28%,
    rgba(var(--shade),0.58) 54%,
    rgba(var(--shade),0.78) 80%,
    rgba(var(--shade),0.88) 100%);
}


/* the closing panel is a dusk plate with a bright band on the horizon, and its
   caption now sets at display-l over three lines, so the eyebrow rides high */
#buy-now .media::after{
  background:linear-gradient(180deg,
    rgba(var(--shade),0) 4%,
    rgba(var(--shade),0.36) 26%,
    rgba(var(--shade),0.60) 52%,
    rgba(var(--shade),0.80) 80%,
    rgba(var(--shade),0.90) 100%);
}

/* advisor access pair — farmers page (client feedback 1 Sep: FarmEye is
   reached through advisors, never direct, so the route needs its own block) */
.access-pair{
  max-width:var(--w-prose);margin:clamp(30px,3.4vw,46px) auto 0;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2vw,28px);
}
.access-card{
  background:var(--white);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:clamp(24px,2.4vw,34px);display:flex;flex-direction:column;
}
.access-card h3{
  font-family:var(--font-display);font-weight:500;font-variation-settings:"opsz" 44;
  font-size:1.28rem;color:var(--forest);margin:0 0 10px;
}
.access-card p{color:var(--stone);line-height:1.7;margin:0 0 22px;flex:1}
.access-link{
  display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  font-size:0.9rem;font-weight:500;color:var(--gold-ink);
  text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color 400ms var(--ease-soft);
}
.access-link:hover{border-bottom-color:var(--gold)}
.access-link .btn-ico{
  width:26px;height:26px;border-radius:50%;background:rgba(176,142,88,0.12);
  display:inline-flex;align-items:center;justify-content:center;font-size:0.74rem;
  transition:transform 520ms var(--ease-press),background 400ms var(--ease-soft);
}
.access-link:hover .btn-ico{transform:translate(2px,-1px) scale(1.05);background:rgba(176,142,88,0.2)}
@media(max-width:760px){.access-pair{grid-template-columns:1fr}}

/* #rewarded now ends on the payoff cards, so the statement above them hands
   over its bottom padding the way #principles does */
#rewarded .statement{padding-bottom:var(--section-gap)}

/* Fraunces sets its ascender well above its cap height, so a heading box starts
   ~0.25em above the first visible stroke; line-height adds another half-leading
   on top. Under an eyebrow that read as ~55px of air where the margin said 26px.
   Trimming it in em keeps the correction proportional at every heading size, and
   makes --eyebrow-gap the distance you actually see. */
.eyebrow + h1,.eyebrow + h2,.eyebrow + h3{margin-top:-0.30em}
/* card headings take the body's 1.6 line-height rather than a display leading,
   so half-leading alone is 0.30em — they need roughly double the trim */
.hero-card .eyebrow + h3,
.product .p-copy .eyebrow + h3,
.contact-card .eyebrow + h3{margin-top:-0.55em}

/* ============================================================
   BROWSER SURFACES
   The chrome we did not draw still carries the design. Scrollbars
   shipped as the OS default on a page this considered read as a
   seam; ::selection was already themed.
   ============================================================ */
html{scrollbar-color:rgba(60,90,72,0.32) var(--bone-deep);scrollbar-width:thin}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--bone-deep)}
::-webkit-scrollbar-thumb{
  background:rgba(60,90,72,0.30);border-radius:99px;
  border:3px solid var(--bone-deep);
  transition:background 200ms var(--ease-soft);
}
::-webkit-scrollbar-thumb:hover{background:rgba(60,90,72,0.50)}
::-webkit-scrollbar-corner{background:var(--bone-deep)}

/* Cards answer the press the way the buttons already do. Hover lifts them
   4px; active settles that lift rather than starting a new gesture. */
.hero-card:active,.product:active,.contact-card:active{transform:translateY(-1px) scale(0.995)}
.access-link:active .btn-ico,.card-go:active .btn-ico{transform:translate(1px,0) scale(0.97)}

/* Buyers hero gains a primary action (client feedback 3 Sep). Mirrors .hero-cta
   on the homepage so the two heroes behave identically. */
.ph-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3.2vh,36px)}
@media(max-width:520px){.ph-cta .btn{width:100%;justify-content:space-between}}

/* ============================================================
   HOW A BRIGHT GREEN IS MADE — Bright Greens page
   The FarmEye → measured → verified → Bright Green chain as a
   picture book: one image per step, a numbered card overlapping
   its lower edge, and a before/after pair for the verification step.
   ============================================================ */
.walk{list-style:none;max-width:calc(var(--w-media) + (var(--gutter)*2));margin:0 auto;padding:0 var(--gutter);display:grid;gap:clamp(26px,3.4vw,52px)}
.walk-step{position:relative;display:grid}
.walk-media{margin:0;position:relative;aspect-ratio:16/9;border-radius:var(--r-media);overflow:hidden;background:var(--mist-deep)}
.walk-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.walk-media figcaption{
  position:absolute;left:clamp(14px,1.6vw,22px);top:clamp(14px,1.6vw,22px);
  padding:7px 13px;border-radius:var(--r-pill);
  background:rgba(253,252,249,0.88);color:var(--forest);
  font-size:0.72rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
}
.walk-pair{grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,20px)}
.walk-pair .walk-card{grid-column:1/-1}
.walk-card{
  position:relative;z-index:2;
  margin:calc(-1 * clamp(40px,5.5vw,80px)) auto 0;
  width:min(680px,calc(100% - 2*clamp(16px,3vw,44px)));
  background:var(--white);border-radius:var(--r-lg);
  box-shadow:0 0 0 1px var(--hair),0 2px 6px rgba(38,51,43,0.04),0 18px 44px -26px rgba(38,51,43,0.16);
  --mark:clamp(38px,3.4vw,46px);--padx:clamp(24px,2.8vw,40px);
  padding:clamp(24px,2.6vw,38px) var(--padx) clamp(24px,2.6vw,38px) calc(var(--padx) + var(--mark) + 16px);
}
.walk-num{
  position:absolute;left:var(--padx);top:clamp(24px,2.6vw,38px);
  display:flex;align-items:center;justify-content:center;width:var(--mark);height:var(--mark);
  border-radius:var(--r-pill);border:1px solid rgba(126,92,38,0.30);background:rgba(176,142,88,0.10);
  font-family:var(--font-display);font-style:italic;font-size:clamp(1.05rem,1.3vw,1.25rem);line-height:1;color:var(--gold-ink);
}
.walk-card h3{font-family:var(--font-display);font-weight:500;font-variation-settings:"opsz" 44;font-size:clamp(1.25rem,1.8vw,1.6rem);line-height:1.2;color:var(--forest);margin:0 0 8px}
.walk-card p{color:var(--stone);line-height:1.7;margin:0}
#how-made .statement.u-flush-top{padding-top:clamp(28px,4vh,48px)}
#how-made .statement.u-flush-top .support{max-width:44ch}
@media(max-width:700px){
  .walk-pair{grid-template-columns:1fr}
  .walk-card{margin-top:-26px;width:calc(100% - 24px)}
}

/* three-up variant of the payoff row — Bright Greens #stakes. The third card is
   the answer to the two before it, so it takes the forest ground. */
.payoff.trio{grid-template-columns:repeat(3,1fr)}
.payoff.trio .pf{
  background:var(--white);border-radius:var(--r-lg);
  box-shadow:0 0 0 1px var(--hair),0 2px 6px rgba(38,51,43,0.04),0 14px 34px -24px rgba(38,51,43,0.14);
  padding:clamp(26px,2.4vw,36px);min-height:clamp(150px,12vw,190px);
  display:flex;flex-direction:column;justify-content:center;gap:10px;
}
.payoff.trio .pf-label{
  font-family:var(--font-body);font-weight:600;font-size:0.72rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--gold-ink);
}
.payoff.trio .pf p{
  /* the homepage .payoff p rule makes every paragraph its own card; here the
     card is the .pf wrapper, so the paragraph goes back to being text */
  background:none;box-shadow:none;border-radius:0;padding:0;min-height:0;display:block;
  margin:0;font-family:var(--font-display);font-weight:400;font-variation-settings:"opsz" 40;
  font-size:clamp(1.05rem,1.3vw,1.28rem);line-height:1.38;color:var(--forest);text-wrap:pretty;
}
.payoff.trio .pf-answer{background:var(--forest);box-shadow:0 2px 6px rgba(38,51,43,0.10),0 18px 44px -24px rgba(38,51,43,0.35)}
.payoff.trio .pf-answer .pf-label{color:var(--gold-pale)}
.payoff.trio .pf-answer p{color:var(--bone)}
#stakes .statement{padding-bottom:var(--section-gap)}
@media(max-width:1000px){.payoff.trio{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.payoff.trio{grid-template-columns:1fr}}

/* the four things carbon never counted — image tiles, label under each */
#living .statement{padding-bottom:var(--section-gap)}
.living{list-style:none;max-width:var(--w-content);margin:0 auto;padding:0 clamp(20px,4vw,48px) clamp(22px,2.6vw,40px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
.tile figure{margin:0;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;background:var(--mist-deep);position:relative}
.tile figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1200ms var(--ease-out)}
.tile:hover figure img{transform:scale(1.035)}
.tile-text{padding:14px 4px 0;display:grid;gap:2px}
.tile-text strong{font-family:var(--font-display);font-weight:500;font-variation-settings:"opsz" 44;font-size:clamp(1.15rem,1.5vw,1.4rem);color:var(--forest)}
.tile-text span{color:var(--stone);font-size:0.95rem;line-height:1.5}
#living .payoff.trio{padding-top:clamp(18px,2vw,30px)}
@media(max-width:900px){.living{grid-template-columns:repeat(2,1fr)}}

/* a headline turn inside a photo caption still breaks to its own line, and takes
   the on-photo gold rather than the ink-weight gold used on bone */
.cinema .caption .h2-turn{
  /* same subordinate turn the statements use, in the on-photo gold */
  display:block;font-style:italic;color:var(--gold-bright);
  font-size:0.58em;line-height:1.16;margin-top:clamp(14px,1.5vw,24px);
  font-variation-settings:"opsz" 42;
}
/* card labels align across the row so the three read as one line of thought */
#living .payoff.trio .pf{justify-content:flex-start}

/* the plain-language disclaimer sits in a quiet container rather than floating
   on the page — a card, not a warning box: white on bone, hairline ring, a
   single gold rule at the head, and the prose at its normal measure */
.not-card{
  position:relative;
  /* the card wraps the site's prose measure rather than replacing it, and sits
     the standard headline-to-body distance below the title */
  /* a wider measure than bare prose (the copy runs at the homepage reading size),
     and a half-section breath below the title rather than the body gap */
  max-width:min(calc(var(--w-prose) + 80px + 2*clamp(26px,3.4vw,52px)),100%);margin:var(--gap-half) auto 0;
  padding:clamp(30px,3.4vw,48px) clamp(26px,3.4vw,52px) clamp(28px,3vw,42px);
  background:var(--white);border-radius:var(--r-lg);
  box-shadow:0 0 0 1px var(--hair),0 2px 6px rgba(38,51,43,0.04),0 18px 44px -26px rgba(38,51,43,0.14);
  text-align:left;
}
.not-card::before{
  content:"";position:absolute;top:0;left:clamp(26px,3.4vw,52px);right:clamp(26px,3.4vw,52px);
  height:2px;border-radius:2px;background:rgba(176,142,88,0.55);
}
.not-card p{color:var(--stone);line-height:1.72;text-wrap:pretty}
.not-card p + p{margin-top:1.05em}
.not-card .page-note{margin-top:1.6em;padding-top:16px;border-top:1px solid var(--hair);font-size:0.9rem}
@media(max-width:560px){.not-card{padding:26px 22px 24px}}

/* ---------- steps as cards (Bright Greens #buy) ---------- */
.steps-cards .step{
  position:relative;text-align:left;
  background:var(--white);border-radius:var(--r-lg);
  box-shadow:0 0 0 1px var(--hair),0 2px 6px rgba(38,51,43,0.04),0 14px 34px -24px rgba(38,51,43,0.14);
  --mark:clamp(38px,3.4vw,46px);
  padding:calc(var(--mark) + clamp(40px,4.2vw,58px)) clamp(24px,2.6vw,36px) clamp(26px,2.6vw,36px);
}
.steps-cards .step .step-num{
  left:clamp(24px,2.6vw,36px);top:clamp(22px,2.4vw,32px);transform:none;
  border:1px solid rgba(126,92,38,0.30);background:rgba(176,142,88,0.10);color:var(--gold-ink);
}
.steps-cards .step::before{display:none}   /* the run between markers belongs to the open layout, not cards */
.steps-cards .step h3{font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.2;margin:0 0 10px}
.steps-cards .step p{margin:0}
/* the CTA row is a child of the steps grid — span it so centring is against the section */
.steps .mid-cta{grid-column:1/-1;justify-content:center;margin-top:clamp(28px,3.6vw,52px)}
/* button variants for a bone ground: the hero pair is tuned for photographs */
.btn-solid{background:var(--forest);color:var(--bone);padding:9px 9px 9px 22px}
.btn-solid .btn-ico{width:30px;height:30px;background:rgba(253,252,249,0.16);font-size:0.76rem}
.btn-solid:hover{background:var(--ink)}
.btn-solid:hover .btn-ico{transform:translate(2px,-1px) scale(1.06);background:rgba(253,252,249,0.26)}
.btn-outline{color:var(--forest);padding:13px 22px;border:1px solid rgba(60,90,72,0.38);background:transparent}
.btn-outline:hover{border-color:var(--forest);background:rgba(60,90,72,0.06)}
@media(max-width:820px){.steps-cards{gap:clamp(14px,2vw,22px)}}

/* card variant: copy sits left under a left-set marker (the open layout centres it) */
.steps.steps-cards .step,.steps.steps-cards .step h3,.steps.steps-cards .step p{text-align:left}
.steps.steps-cards .step p{margin-left:0;margin-right:0;max-width:none}

/* ---------- Bright Greens: align local variants to the site's exact scale ---------- */
/* body copy inside the letter and the disclaimer = the site's prose paragraph */
.letter p,.not-card p,.editorial .ed-body p{font-size:clamp(1rem,1.4vw,1.22rem);line-height:1.7;color:var(--stone)}   /* = .statement p.support */
/* card headings = the journey/step heading (.sf-item h3): 1.35rem / 500 / opsz 44 */
.walk-card h3,.steps-cards .step h3{font-size:1.35rem;line-height:1.6}   /* .sf-item h3 inherits the body leading */
/* tile labels = the small-card heading (.access-card h3): 1.28rem */
.tile-text strong{font-size:1.28rem}
/* small supporting copy = .thesis-points .tp p: 0.97rem */
.tile-text span,.share-label{font-size:0.97rem}
/* payoff card copy leading = the homepage .payoff p */
.payoff.trio .pf p{line-height:1.36}

/* ---------- Bright Greens: section rhythm onto the site's 180px beat ---------- */
/* the dark band splits its 180 with the bone strip before the next image: 90 + 90 */
#share .statement.u-flush-top{padding-bottom:var(--gap-full)}
/* the steps grid carried a fixed bottom padding of its own; the section's token governs */
#buy .steps{padding-bottom:var(--pad-bottom)}

/* ---------- Bright Greens: global type roles, not page-local ones ---------- */
/* the two-column editorial head takes the same step the homepage thesis head uses */
.editorial .ed-head h2{font-size:clamp(2.3rem,4.6vw,3.85rem);font-variation-settings:"opsz" 120;letter-spacing:-0.014em;line-height:1.1}
/* walkthrough card copy = the homepage step copy (#how .step p) */
.walk-card p{font-size:1rem;line-height:1.7}
/* the note under a CTA = the homepage .thesis-note */
.report-note{font-size:0.88rem}

/* two captions were breaking into orphaned three- and five-line stacks at the
   18ch caption measure; a wider measure lets them fall as two balanced lines */
#buy-now .caption h2{max-width:24ch}
#everything-else .caption h2{max-width:26ch}

/* closing panel on narrow screens: the caption is nearly the panel's height, so
   it takes the hero's mobile treatment — a taller panel and a scrim that starts
   dark at the top — and drops the sentence the second button already says */
@media(max-width:700px){
  .u-hide-sm{display:none}
  #buy-now > .media{min-height:min(100dvh,880px)}
  #buy-now .media::after{
    background:linear-gradient(180deg,
      rgba(var(--shade),0.50) 0%,
      rgba(var(--shade),0.58) 22%,
      rgba(var(--shade),0.74) 55%,
      rgba(var(--shade),0.90) 100%);
  }
}


/* the grouped band rule later in the sheet flattens .close-section to a plain
   colour; restate the divide last so it wins on every page */
.close-section{background:linear-gradient(180deg,var(--bone) 0,var(--bone-deep) clamp(96px,16vh,180px),var(--bone-deep) 100%)}

/* ---------- Bright Greens: one distance to every edge ----------
   Every boundary on this page is a visible edge — a photograph or a colour
   band — so the full gap applies on both sides of every section, rather than
   the half/half split the bands were using. 180px from content to any edge. */



/* the Moora split sits on --mist, which reads as the same ground as the bone
   around it — there is no edge to keep 180 from, so those two boundaries take
   the site's plain content-to-content gap (90 + 90 = 180) instead of stacking */
main.page-bg > #income{--pad-bottom:var(--gap-half)}
main.page-bg > #moora{--pad-top:var(--gap-half);--pad-bottom:var(--gap-half)}
main.page-bg > #buy{--pad-top:var(--gap-half)}


/* ---------- Bright Greens: first-farm split (9 Sep feedback: introduce the farmers) ---------- */
.split .split-copy p + p{margin-top:1em}
.split .split-copy .pull-quote{margin:var(--lede-gap) 0 0;max-width:42ch}
.split .split-copy .pull-quote p{margin-top:0;font-family:var(--font-display);font-weight:400;font-style:italic;font-size:1.28rem;line-height:1.45;color:var(--forest)}
.split .split-copy .pull-quote cite{padding-left:clamp(22px,2.4vw,34px)}

/* 9 Sep: closing panel — new plate 39-open-gate-v4 carries the subject on the right third; stack the headline on three lines so it stays clear of her, and give the panel the height to hold it */
#buy-now .caption h2{max-width:15ch}
@media(min-width:701px){#buy-now > .media{min-height:clamp(680px,84vh,900px)}}
/* wrapped button labels centre like single-line ones */
.btn{text-align:center}

/* 9 Sep audit: the split-bar widths lived in inline style attributes, which the CSP (style-src 'self') blocks — so the bar rendered empty. Widths belong here. */
.share-seg-major{--w:72.5%}
.share-seg-minor{--w:27.5%}

}