/* ============================================================
   LovingIs.ai — shared stylesheet
   Tokens carried verbatim from the existing build (Apr 2026).
   Do not change palette or type without checking the design system.
   ============================================================ */

:root{
  /* Core palette — charcoal + cream + gold */
  --bg-primary: #FDFBF7;
  --bg-warm: #FAF7F2;
  --bg-accent: #F5F0E8;
  --bg-dark: #1E1E2A;
  --bg-deep: #161624;

  --amber: #EBB028;
  --amber-hover: #D9A020;
  --amber-glow: rgba(235,176,40,.35);

  /* THE charcoal. Nothing on the site is darker than this: it is the tone
     from the hero italics, and headings, body and labels all share it.
     7.0:1 on the page cream, which is AAA for body text. */
  --text-primary: #56565F;
  --text-secondary: #56565F;
  --text-muted: #8A8A8A;
  --text-on-dark: #F0EBE3;
  --text-muted-dark: rgba(240,235,227,.55);

  --heading: 'Cormorant Garamond', Georgia, serif;
  --body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ui: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 1px 4px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.07);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.09);
  --shadow-xl: 0 16px 48px rgba(0,0,0,.12);

  --hairline: rgba(0,0,0,.07);
  --hairline-dark: rgba(255,255,255,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;
  font-family:var(--body);
  background:var(--bg-primary);
  color:var(--text-primary);
  font-size:1.0625rem;
  line-height:1.7;
  font-weight:400;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

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

.container{max-width:1100px;margin:0 auto;padding:0 28px}
.container-mid{max-width:880px;margin:0 auto;padding:0 28px}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--heading);color:var(--text-primary);text-wrap:balance}
h1{
  font-size:clamp(2.4rem,5vw,3.8rem);
  font-weight:600;line-height:1.1;letter-spacing:-.03em;margin:0 0 24px;
}
h2{
  font-size:clamp(2rem,3.8vw,3.05rem);
  font-weight:600;line-height:1.15;letter-spacing:-.02em;margin:0 0 28px;
}
h3{font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:600;line-height:1.25;margin:0 0 16px}
h4{font-size:1.15rem;font-weight:600;margin:0 0 10px}
h1 em,h2 em,h3 em{font-style:italic;color:var(--amber)}
p{margin:0 0 20px;text-wrap:pretty}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--amber);outline-offset:4px;border-radius:3px;
}

.eyebrow{
  /* section openers: +30% and a weight up. Letter-spacing eases back from
     .22em — at the larger size the old tracking read as a sprawl, not a label.
     Small labels inside cards and bios keep their own smaller sizes. */
  font-family:var(--ui);font-size:.91rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;
  color:var(--amber);margin:0 0 11px;display:block;
}
.lede{text-wrap:balance;font-size:1.18rem;color:var(--text-secondary);line-height:1.75;max-width:64ch}
.muted{color:var(--text-secondary)}
.center{text-align:center}
.measure{max-width:66ch}
.measure-center{max-width:66ch;margin-left:auto;margin-right:auto}

/* ---------- buttons ---------- */
.btn-amber,.btn-ghost,.btn-dark{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 32px;
  font-family:var(--ui);font-size:.88rem;font-weight:600;letter-spacing:.02em;
  border-radius:100px;text-decoration:none;cursor:pointer;border:1.5px solid transparent;
  transition:background .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease),color .18s var(--ease);
}
.btn-amber{background:var(--amber);color:#fff;border-color:var(--amber)}
.btn-amber:hover{background:var(--amber-hover);border-color:var(--amber-hover);transform:translateY(-2px);box-shadow:0 6px 28px var(--amber-glow)}
.btn-ghost{background:transparent;color:var(--text-primary);border-color:var(--text-primary)}
.btn-ghost:hover{background:var(--text-primary);color:#fff;transform:translateY(-2px)}
.on-dark .btn-ghost{color:var(--text-on-dark);border-color:rgba(240,235,227,.45)}
.on-dark .btn-ghost:hover{background:var(--text-on-dark);color:var(--bg-dark)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn-row.center{justify-content:center}

.textlink{
  font-family:var(--ui);font-size:.9rem;font-weight:500;
  color:var(--text-secondary);text-decoration:none;
  border-bottom:1px solid var(--amber);padding-bottom:2px;
  transition:color .15s var(--ease);
}
.textlink:hover{color:var(--amber)}
.on-dark .textlink{color:var(--text-muted-dark)}
.on-dark .textlink:hover{color:var(--amber)}

/* ---------- top nav (minimalist, persistent) ---------- */
.topnav{
  position:fixed;top:0;left:0;right:0;z-index:150;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:16px 28px;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease),backdrop-filter .3s var(--ease);
}
.topnav.scrolled{
  background:rgba(253,251,247,.95);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--hairline);
}
.topnav .brand{
  font-family:var(--heading);font-size:1.875rem;font-weight:600;
  letter-spacing:-.01em;color:var(--text-primary);text-decoration:none;white-space:nowrap;
}
.topnav .brand span{color:var(--amber)}
.navlinks{display:flex;align-items:center;gap:26px}
.navlinks a{
  font-family:var(--ui);font-size:.95rem;font-weight:500;letter-spacing:.01em;
  color:var(--text-secondary);text-decoration:none;white-space:nowrap;
  transition:color .15s var(--ease);
}
.navlinks a:hover{color:var(--amber)}
.navlinks a[aria-current="page"]{color:var(--text-primary);border-bottom:1px solid var(--amber);padding-bottom:2px}
.nav-cta{
  padding:10px 22px;font-size:.88rem;
  background:var(--amber);color:#fff;border-radius:100px;
  font-family:var(--ui);font-weight:600;text-decoration:none;white-space:nowrap;
  transition:background .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.nav-cta:hover{background:var(--amber-hover);transform:translateY(-1px);box-shadow:0 4px 18px var(--amber-glow)}

.hamburger{
  display:none;width:48px;height:48px;flex:none;
  background:transparent;border:none;cursor:pointer;
  align-items:center;justify-content:center;
}
.hamburger span{display:block;width:26px;height:3px;border-radius:2px;background:var(--text-primary);position:relative;transition:all .25s var(--ease)}
.hamburger span::before,.hamburger span::after{
  content:'';position:absolute;left:0;width:26px;height:3px;border-radius:2px;background:var(--text-primary);transition:all .25s var(--ease);
}
.hamburger span::before{top:-8px}
.hamburger span::after{top:8px}
.hamburger.active span{background:transparent}
.hamburger.active span::before{top:0;transform:rotate(45deg)}
.hamburger.active span::after{top:0;transform:rotate(-45deg)}

.mobile-menu{
  position:fixed;top:0;right:0;width:290px;height:100vh;z-index:190;
  background:rgba(30,30,42,.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  transform:translateX(100%);transition:transform .35s var(--ease);
  display:flex;flex-direction:column;padding:88px 30px 34px;
}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu a{
  font-family:var(--heading);font-size:1.3rem;font-weight:500;
  color:rgba(240,235,227,.72);text-decoration:none;
  padding:15px 0;border-bottom:1px solid rgba(255,255,255,.06);
  transition:color .15s var(--ease),padding-left .15s var(--ease);
}
.mobile-menu a:hover{color:var(--amber);padding-left:8px}
.mobile-menu .menu-cta{
  margin-top:auto;text-align:center;border-bottom:none;
  padding:14px 28px;background:var(--amber);color:#fff;
  font-family:var(--ui);font-size:.85rem;font-weight:600;border-radius:100px;
}
.mobile-menu .menu-cta:hover{padding-left:28px;color:#fff;background:var(--amber-hover)}
/* translated off-screen is not hidden — its seven links stayed in the tab
   order at desktop widths and focus vanished off the right edge */
.mobile-menu{transition:transform .34s var(--ease),visibility 0s}
.mobile-menu:not(.open){visibility:hidden;transition-delay:0s,.34s}
.mobile-menu.open{visibility:visible;transition-delay:0s,0s}
.menu-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:180;
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.menu-backdrop.open{opacity:1;pointer-events:auto}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--amber);color:#fff;padding:12px 20px;
  font-family:var(--ui);font-size:.85rem;text-decoration:none;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}

/* ---------- sections ---------- */
.section{padding:110px 0}
.section-tight{padding:76px 0}
.section-warm{background:var(--bg-warm)}
.section-dark{background:var(--bg-dark);color:var(--text-on-dark)}
.section-deep{background:var(--bg-deep);color:var(--text-on-dark)}
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4,
.section-deep h1,.section-deep h2,.section-deep h3,.section-deep h4{color:var(--text-on-dark)}
.section-dark .lede,.section-deep .lede,
.section-dark .muted,.section-deep .muted{color:var(--text-muted-dark)}

/* ---------- page hero (interior pages) ---------- */
.page-hero{
  padding:170px 0 84px;
  background:var(--bg-warm);
  border-bottom:1px solid var(--hairline);
}
.page-hero.dark{background:var(--bg-dark);border-bottom-color:var(--hairline-dark)}
.page-hero.dark h1,.page-hero.dark .lede{color:var(--text-on-dark)}
.page-hero.dark .lede{color:var(--text-muted-dark)}
.page-hero h1,
.founder-hero h1,
.home-hero h1{
  font-size:clamp(2.7rem,6.6vw,5rem);
  line-height:1.05;letter-spacing:-.035em;
}
.page-hero h1{margin-bottom:20px}

/* ---------- home hero ---------- */
.home-hero{
  position:relative;
  min-height:70vh;
  display:flex;
  /* Top-aligned, not centred: centring made the first line land at a different
     height on every page because the copy lengths differ. */
  align-items:flex-start;
  padding:clamp(158px,21vh,224px) 0 clamp(72px,9vh,104px);
  overflow:hidden;
  background:var(--bg-dark);
}
/* .container is a flex item here; without this it shrink-wraps its text and
   margin:0 auto then centres it, so every page starts at a different x. */
.home-hero > .container,
.founder-hero > .container,
.page-hero > .container{width:100%;flex:1 1 100%}
.home-hero-bg{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
  opacity:1;
}
/* Scrim is directional: heavy behind the copy on the left, clearing to almost
   nothing on the right so the photograph keeps its colour and light. A short
   top fade keeps the nav legible. */
.home-hero::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(20,20,32,.84) 0%,
      rgba(20,20,32,.72) 34%,
      rgba(20,20,32,.46) 62%,
      rgba(20,20,32,.22) 82%,
      rgba(20,20,32,.05) 94%,
      rgba(20,20,32,0) 100%),
    linear-gradient(180deg, rgba(20,20,32,.46) 0%, rgba(20,20,32,0) 16%);
}
/* On narrow screens the copy spans the full width, so the scrim must too. */
@media (max-width:860px){
  .home-hero::after{
    background:linear-gradient(180deg,
      rgba(20,20,32,.66) 0%,
      rgba(20,20,32,.52) 35%,
      rgba(20,20,32,.76) 100%);
  }
}
.home-hero .container{position:relative;z-index:2}
.home-hero h1{
  color:#fff;margin-bottom:26px;
}
.home-hero h1 em{color:var(--amber);font-weight:700}
.hero-lede{
  color:rgba(255,255,255,.86);font-size:clamp(1.1rem,1.9vw,1.35rem);
  line-height:1.65;max-width:48ch;margin-bottom:16px;
  text-wrap:balance;
}
.hero-lede strong{color:#fff;font-weight:600}
.hero-kicker{
  font-family:var(--ui);font-size:.91rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--amber);margin-bottom:15px;display:block;
}
.home-hero .btn-row{margin-top:34px}

/* The quiet alternative under the hero's call to action: for the reader who
   is interested but not ready to hand over an email. Charcoal, because the
   hero's white would measure about 1.2:1 against the pale end of the ramp
   and this sits well to the right of the dark end. */
.hero-deeper{margin:14px 0 0}
.hero-deeper .textlink{
  color:var(--text-primary);
  border-bottom-color:rgba(86,86,95,.45);
}
.hero-deeper .textlink:hover{
  color:#2E1E01;border-bottom-color:#2E1E01;
}

/* ---------- THE SIX DOORS ---------- */
.doors-intro{max-width:60ch;margin:0 auto 54px;text-align:center}
.doors{
  display:grid;gap:26px;
  grid-template-columns:repeat(3,1fr);
}
.door{
  /* flex column so the text panel stretches to the tallest card in the row —
     as a block, shorter copy left the card ending early with a gap below it */
  position:relative;display:flex;flex-direction:column;text-decoration:none;
  border-radius:14px;background:none;border:0;
  perspective:1700px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
  isolation:isolate;
}
.door:hover,.door:focus-visible{
  transform:translateY(-6px);
  box-shadow:0 18px 46px rgba(0,0,0,.14);
}
.door-img{
  position:relative;height:100%;overflow:hidden;background:var(--bg-accent);
}
.door-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease),filter .3s var(--ease);
}
.door-img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(30,30,42,0) 42%,rgba(30,30,42,.86) 100%);
}
.door-label{
  position:absolute;left:22px;right:22px;bottom:18px;z-index:2;
}
.door-label .door-eyebrow{
  font-family:var(--ui);font-size:.7rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--amber);display:block;margin-bottom:6px;
}
.door-label h3{
  font-family:var(--heading);font-size:1.65rem;font-weight:600;
  color:#fff;margin:0;line-height:1.12;letter-spacing:-.01em;
}
.door-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.door-body p{
  font-size:.95rem;line-height:1.65;color:var(--text-secondary);margin:0 0 18px;
}
.door-cta{
  margin-top:auto;font-family:var(--ui);font-size:.85rem;font-weight:600;
  color:var(--text-primary);display:inline-flex;align-items:center;gap:7px;
  transition:gap .2s var(--ease),color .2s var(--ease);
}
.door:hover .door-cta{gap:12px}

/* doors on a dark ground */
.section-dark .door,.section-deep .door{
  background:rgba(255,255,255,.03);border-color:var(--hairline-dark);
}
.section-dark .door-body p,.section-deep .door-body p{color:var(--text-muted-dark)}
.section-dark .door-cta,.section-deep .door-cta{color:var(--text-on-dark)}
/* ---------- ecosystem layers ---------- */
.layers{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:14px;margin-top:44px;
}
.layer{
  padding:32px 26px 34px;
  text-align:center;
  /* rows stretch to the tallest card — centre the content so shorter
     cards don't sit with all their dead space at the bottom */
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  /* white on the section's cream ground: the cards are objects sitting on a
     surface, so the ground stays the quieter of the two. Making the section
     white instead would break the cream/white rhythm it shares with the
     sections above and below it. */
  background:#fff;
  border:1px solid var(--hairline);
  border-radius:14px;
  box-shadow:0 1px 2px rgba(30,30,42,.03),0 10px 26px rgba(30,30,42,.045);
}
.layer-mark{
  display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;
  /* Tinted disc with a brand-amber glyph. A solid amber fill measures better
     but reads orange at that mass; Aidan's call is that these stay yellow.
     Decorative only — every card's meaning is in the heading beneath it. */
  background:rgba(235,176,40,.16);color:var(--amber);
  margin:0 auto 18px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.layer-icon{width:28px;height:28px;display:block}
.layer:hover .layer-mark{
  transform:scale(1.06);
  background:rgba(235,176,40,.26);
}
.layer h3,.layer h4{
  font-family:var(--heading);font-size:1.46rem;
  line-height:1.16;margin:0 auto 7px;
}
.layer p{
  margin:0 auto;font-size:1.03rem;color:var(--text-secondary);
  line-height:1.44;
}
.section-dark .layer,.section-deep .layer{
  background:rgba(255,255,255,.045);border-color:var(--hairline-dark);box-shadow:none;
}
.section-dark .layer p,.section-deep .layer p{color:var(--text-muted-dark)}

/* ---------- statement block ---------- */
.statement{
  font-family:var(--heading);font-style:italic;
  font-size:clamp(1.4rem,2.4vw,1.95rem);line-height:1.35;
  color:var(--text-primary);max-width:24ch;
  text-wrap:balance;
}
.section-dark .statement,.section-deep .statement{color:var(--text-on-dark)}
.algorithm-line{
  font-family:var(--heading);font-weight:600;
  font-size:clamp(1.8rem,4.4vw,3.2rem);letter-spacing:-.02em;
  color:var(--amber);margin:0;
}

/* ---------- prose (long-form: founder story, bios) ---------- */
.prose{max-width:68ch;margin:0 auto}
.prose p{line-height:1.75;color:var(--text-secondary);margin:0 0 24px}
.prose p.first{color:var(--text-primary);font-weight:500}
.prose h2{margin:56px 0 20px}
.prose h3{margin:44px 0 16px}
.prose blockquote{
  margin:36px 0;padding:0 0 0 26px;border-left:2px solid var(--amber);
}
.prose blockquote p{
  font-family:var(--heading);font-style:italic;font-size:1.4rem;
  line-height:1.45;color:var(--text-primary);margin:0;
}
.prose .signoff{
  margin-top:56px;padding-top:34px;
  border-top:2px solid var(--amber);
  border-bottom:2px solid var(--amber);
  padding-bottom:30px;
}
.prose .signoff p{margin:0}
.prose .signoff-name{
  font-family:var(--heading);font-weight:600;
  font-size:clamp(1.6rem,3.2vw,2.1rem);line-height:1.1;letter-spacing:-.01em;
  color:var(--text-primary);
}
.prose .signoff-role{
  font-family:var(--ui);font-size:.78rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-muted);margin-top:8px!important;
}

/* ---------- cards / grids ---------- */
.grid-3{display:grid;gap:26px;grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--bg-warm);border:1px solid var(--hairline);
  border-radius:12px;padding:30px 26px;
}
.card .card-label,.card h4{font-family:var(--ui);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:12px}
.card p{margin:0;font-size:.95rem;color:var(--text-secondary);line-height:1.65}
.section-dark .card,.section-deep .card{background:rgba(255,255,255,.03);border-color:var(--hairline-dark)}
.section-dark .card p,.section-deep .card p{color:var(--text-muted-dark)}

/* ---------- team ---------- */
.team-grid{display:grid;gap:30px;grid-template-columns:repeat(4,1fr)}
.member{text-align:left}
.member-photo{
  /* height:auto is load-bearing — the img tags carry a height attribute,
     which otherwise wins over aspect-ratio and makes the photos taller
     than the monogram tiles. */
  width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:12px;
  background:#FCFAF5;margin-bottom:16px;filter:grayscale(.15);
  transition:filter .3s var(--ease);
}
.member:hover .member-photo{filter:grayscale(0)}
.member h3,.member h4{font-family:var(--heading);font-size:1.25rem;margin-bottom:2px}
.member .role{
  font-family:var(--ui);font-size:.7rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--amber);display:block;margin-bottom:10px;line-height:1.5;
}
.member p{font-size:.95rem;color:var(--text-secondary);line-height:1.6;margin:0}
.member details{margin-top:12px}
.member summary{
  font-family:var(--ui);font-size:.78rem;font-weight:600;color:var(--text-primary);
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;
}
.member summary::-webkit-details-marker{display:none}
.member summary::after{content:'+';color:var(--amber);font-size:1rem}
.member details[open] summary::after{content:'−'}
.member details p{margin-top:12px}

/* ---------- FAQ (carried from existing build) ---------- */
.faq{max-width:720px;margin:52px auto 0}
.faq-heading{
  font-family:var(--heading);font-size:1.5rem;font-weight:600;
  color:var(--text-primary);margin:0 0 18px;text-align:center;letter-spacing:-.01em;
}
.faq details{border-bottom:1px solid var(--hairline)}
.faq details:first-of-type{border-top:1px solid var(--hairline)}
.faq summary{
  font-family:var(--ui);font-size:.95rem;font-weight:500;color:var(--text-primary);
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
  padding:13px 0;gap:16px;transition:color .15s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--amber)}
.faq summary::after{content:'+';font-family:var(--ui);font-size:1.05rem;color:var(--amber);flex-shrink:0;line-height:1}
.faq details[open] summary::after{content:'\2212'}
.faq details p{
  font-family:var(--body);font-size:.95rem;color:var(--text-secondary);
  line-height:1.65;padding:0 0 14px;margin:0;max-width:64ch;text-wrap:pretty;
}
.faq-tight details p{padding-bottom:12px}
dialog.modal .faq{margin-top:0}
dialog.modal .faq-heading{display:none}

/* ---------- testimonials: one-line carousel with a lit card ---------- */
.carousel{position:relative;display:flex;align-items:center;gap:14px;margin-top:8px}
.carousel-track{
  display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px 2px 18px;flex:1;scrollbar-width:none;
}
.carousel-btn{
  flex:0 0 auto;width:56px;height:56px;border-radius:50%;cursor:pointer;
  background:var(--bg-dark);border:2px solid var(--amber);
  color:var(--amber);font-size:1.4rem;line-height:1;font-weight:600;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  transition:background .18s var(--ease),color .18s var(--ease),transform .18s var(--ease),opacity .18s var(--ease);
}
.carousel-btn:hover{background:var(--amber);color:var(--bg-dark);transform:scale(1.07)}
.carousel-btn[disabled]{opacity:.22;cursor:default;box-shadow:none}

.voice{
  flex:0 0 calc((100% - 2 * 22px) / 3.3);scroll-snap-align:start;
  margin:0;padding:32px 28px 30px;border-radius:16px;
  display:flex;flex-direction:column;
  /* white cards on the gold ground, like the ecosystem cards on the homepage */
  background:#fff;
  border:1px solid rgba(0,0,0,.07);
  box-shadow:0 1px 2px rgba(60,40,2,.05),0 12px 30px rgba(60,40,2,.09);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.voice:hover{
  transform:translateY(-4px);
  border-color:rgba(235,176,40,.5);
  box-shadow:0 2px 4px rgba(60,40,2,.06),0 18px 40px rgba(60,40,2,.16);
}
.voice figcaption{margin-top:auto}
.voice-mark{font-family:var(--heading);font-size:2.4rem;color:var(--amber);line-height:.6;display:block;margin-bottom:16px}
.voice-quote{
  font-family:var(--heading);font-style:italic;font-size:1.2rem;line-height:1.5;
  color:var(--text-primary);margin:0 0 24px;text-wrap:balance;
}
.voice-name{font-family:var(--ui);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#B07E06;display:block;margin-bottom:6px}
.voice-context{font-size:.95rem;color:var(--text-secondary);margin:0 0 14px;line-height:1.55;text-wrap:balance}
.voice-truth{
  font-family:var(--heading);font-style:italic;font-size:.95rem;color:var(--text-secondary);
  padding-top:14px;border-top:1px solid rgba(235,176,40,.4);margin:0;text-wrap:balance;
}

@media (max-width:680px){
  .carousel-btn{display:none}
  .voice{flex:0 0 82%}
  .carousel-track{gap:16px}
}

/* ---------- forms ---------- */
.form-wrap{
  max-width:560px;margin:0 auto;background:var(--bg-warm);
  border:1px solid var(--hairline);border-radius:14px;padding:38px 34px;
}
.section-dark .form-wrap,.section-deep .form-wrap{background:rgba(255,255,255,.04);border-color:var(--hairline-dark)}
.field{margin-bottom:20px}
.field label{
  display:block;font-family:var(--ui);font-size:.78rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px;
}
.section-dark .field label,.section-deep .field label{color:var(--text-muted-dark)}
.field input,.field textarea,.field select{
  width:100%;padding:13px 16px;font-family:var(--body);font-size:1rem;
  color:var(--text-primary);background:#fff;
  border:1px solid rgba(0,0,0,.14);border-radius:8px;
  transition:border-color .15s var(--ease);
}
.field textarea{min-height:120px;resize:vertical;line-height:1.6}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--amber)}
.field .hint{font-family:var(--ui);font-size:.78rem;color:var(--text-muted);margin:7px 0 0}
.form-note{font-family:var(--ui);font-size:.78rem;color:var(--text-muted);margin:18px 0 0;line-height:1.6}
.hp{position:absolute;left:-9999px}

/* ---------- gate ---------- */
.gate{max-width:460px;margin:0 auto;text-align:center}
.gate .field{text-align:left}
.gate-error{
  font-family:var(--ui);font-size:.85rem;color:#B4472F;margin:14px 0 0;min-height:1.2em;
}
.section-dark .gate-error,.section-deep .gate-error{color:#E9917C}

.soon{
  display:inline-block;font-family:var(--ui);font-size:.68rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  background:rgba(235,176,40,.16);color:var(--amber);
  padding:4px 10px;border-radius:100px;margin-left:8px;vertical-align:middle;
}

/* ---------- checklist ---------- */
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.checklist li{
  position:relative;padding-left:28px;font-size:1rem;
  color:var(--text-secondary);line-height:1.6;
}
.checklist li::before{
  content:'';position:absolute;left:6px;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--amber);
}
.section-dark .checklist li,.section-deep .checklist li{color:var(--text-muted-dark)}

/* ---------- footer ---------- */
.site-footer{
  padding:60px 24px 44px;background:var(--bg-deep);
  border-top:1px solid rgba(235,176,40,.1);color:var(--text-muted-dark);
}
.footer-inner{max-width:1000px;margin:0 auto;text-align:center}
.footer-quote{
  font-family:var(--heading);font-style:italic;
  font-size:clamp(1.05rem,1.55vw,1.26rem);line-height:1.45;
  color:rgba(240,235,227,.9);margin:0 0 44px;
}
.footer-nav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin:0 0 24px;
}
.footer-nav a{
  font-family:var(--ui);font-size:1.02rem;color:var(--text-muted-dark);
  text-decoration:none;transition:color .15s var(--ease);
}
.footer-nav a:hover{color:var(--amber)}
.footer-copy{font-family:var(--ui);font-size:.92rem;color:rgba(240,235,227,.42);margin:0;line-height:1.8}
.footer-legal{
  max-width:760px;margin:26px auto 0;padding-top:22px;
  border-top:1px solid var(--hairline-dark);
  font-family:var(--ui);font-size:.85rem;line-height:1.75;color:rgba(240,235,227,.42);
}

/* ---------- reveal (safe: visible if JS never runs) ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal.visible{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .doors{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .navlinks{display:none}
  .hamburger{display:flex}
  .layers{grid-template-columns:1fr}
  .grid-3,.voices{grid-template-columns:1fr}
  .tie-row{grid-template-columns:1fr;gap:4px}
  .tie-row .tie-name{padding-top:0}
}
@media (max-width:680px){
  .section{padding:76px 0}
  .section-tight{padding:56px 0}
  .page-hero{padding:132px 0 60px}
  .home-hero{min-height:auto;padding:128px 0 66px}
  .doors{grid-template-columns:1fr;gap:22px}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .pricing-cards{grid-template-columns:1fr}
  .price-card.featured{order:-1}
  .container,.container-narrow,.container-mid{padding:0 20px}
  .form-wrap{padding:28px 22px}
  .btn-amber,.btn-ghost,.btn-dark{width:100%}
  .btn-row{flex-direction:column;align-items:stretch}
}
@media (max-width:420px){
  .team-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
}

@media print{
  .topnav,.hamburger,.mobile-menu,.menu-backdrop{display:none!important}
  body{background:#fff}
}

/* ---------- nav over a dark hero (transparent until scrolled) ---------- */
body.dark-hero .topnav:not(.scrolled) .brand{color:#fff}
body.dark-hero .topnav:not(.scrolled) .brand span{color:var(--amber)}
/* On the gold hero pages the wordmark's "Is" is the same colour as the ground
   behind it and disappears. The deeper amber stays here, and only here. */
body.amber-hero .topnav:not(.scrolled) .brand span{color:#FFE9A8}
body.dark-hero .topnav:not(.scrolled) .navlinks a{color:rgba(255,255,255,.78)}
body.dark-hero .topnav:not(.scrolled) .navlinks a:hover{color:var(--amber)}
body.dark-hero .topnav:not(.scrolled) .navlinks a[aria-current="page"]{color:#fff}
body.dark-hero .topnav:not(.scrolled) .hamburger span,
body.dark-hero .topnav:not(.scrolled) .hamburger span::before,
body.dark-hero .topnav:not(.scrolled) .hamburger span::after{background:#fff}

/* ---------- mobile: the six doors come straight after the hero ----------
   Aidan's brief: on phones the doors are the navigation, so they must not sit
   three screens down behind the essay sections. Reordered visually only —
   source order (and therefore reading/tab order on desktop) is unchanged. */
@media (max-width:860px){
  body.home main{display:flex;flex-direction:column}
  body.home main > *{order:3}
  body.home main > .home-hero{order:1}
  body.home main > #doors{order:2}
}

/* ---------- modals (native <dialog>) ---------- */
dialog.modal{
  padding:0;border:none;background:transparent;
  max-width:640px;width:calc(100% - 40px);max-height:88vh;
  overflow:visible;color:var(--text-primary);
}
dialog.modal::backdrop{
  background:rgba(22,22,36,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.modal-panel{
  background:var(--bg-primary);
  border:1px solid var(--hairline);
  border-radius:16px;
  box-shadow:0 30px 90px rgba(0,0,0,.35);
  padding:38px 36px 34px;
  max-height:88vh;overflow-y:auto;
  text-align:left;
}
.modal-panel.wide{max-width:none}
.modal-head{margin-bottom:22px;padding-right:44px}
.modal-head .eyebrow{margin-bottom:10px}
.modal-head h2{font-size:clamp(1.5rem,3.2vw,2.05rem);margin:0}
.modal-head p{margin:12px 0 0;color:var(--text-secondary);font-size:1rem}
.modal-close{
  position:absolute;top:16px;right:16px;
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--hairline);background:var(--bg-warm);
  cursor:pointer;font-family:var(--ui);font-size:1.15rem;line-height:1;
  color:var(--text-secondary);
  display:flex;align-items:center;justify-content:center;
  transition:background .15s var(--ease),color .15s var(--ease);
}
.modal-close:hover{background:var(--bg-accent);color:var(--text-primary)}
.modal-wrap{position:relative}
dialog.modal .form-wrap{background:transparent;border:none;padding:0;max-width:none}
dialog.modal .prose{max-width:none}
dialog.modal .prose p{font-size:1rem;line-height:1.75}
@media (max-width:680px){
  .modal-panel{padding:30px 22px 26px;border-radius:14px}
  dialog.modal{width:calc(100% - 24px);max-height:92vh}
}

/* compact gate block that launches the modal */
.gate-compact{
  max-width:560px;margin:0 auto;text-align:center;
  border:1px solid var(--hairline-dark);border-radius:16px;
  padding:40px 34px;background:rgba(255,255,255,.03);
}
.gate-compact h2{margin-bottom:14px}
.gate-compact p{color:var(--text-muted-dark);margin-bottom:26px;font-size:1rem}

/* founder hero with photograph */
.founder-hero{
  position:relative;min-height:74vh;display:flex;align-items:flex-end;
  padding:clamp(158px,21vh,224px) 0 clamp(72px,9vh,104px);
  overflow:hidden;background:var(--bg-dark);
}
.founder-hero-bg{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center 22%;
}
.founder-hero::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,20,32,.18) 0%,rgba(20,20,32,.06) 30%,rgba(20,20,32,.72) 72%,rgba(20,20,32,.96) 92%,rgba(20,20,32,1) 100%);
}
.founder-hero > .container,
.founder-hero .container-mid{position:relative;z-index:2}
.founder-hero .eyebrow{color:var(--amber)}
.founder-hero h1{color:#fff;margin-bottom:14px}
.founder-hero .byline{
  font-family:var(--ui);font-size:.9rem;letter-spacing:.06em;
  color:rgba(255,255,255,.72);margin:0;
}
@media (max-width:680px){
  .founder-hero{min-height:74vh;padding:120px 0 48px}
  .founder-hero-bg{background-position:center 15%}
}

/* ---------- two-column section with a photograph ---------- */
.split{
  display:grid;grid-template-columns:1fr 0.82fr;gap:56px;
  /* stretch, not center: the photograph runs the full height of the text
     column so their top and bottom edges line up */
  align-items:stretch;
}
.split-media{
  border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow-lg);
  min-height:340px;
}
.split-media img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:860px){
  .split{grid-template-columns:1fr;gap:34px}
  .split-media{aspect-ratio:16/10;min-height:0;order:-1}
}

/* ---------- section carrying a background photograph ---------- */
.section-photo{position:relative;overflow:hidden;background:var(--bg-deep)}
.section-photo > .photo-bg{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;opacity:.42;
}
.section-photo::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(22,22,36,.86) 0%,rgba(22,22,36,.62) 50%,rgba(22,22,36,.92) 100%);
}
.section-photo > .container,
.section-photo > .container-narrow,
.section-photo > .container-mid{position:relative;z-index:2}

/* ---------- flip cards ----------
   Hover on pointer devices, focus for keyboard, tap for touch (JS adds
   .is-flipped). Content on the back is always in the DOM and readable by
   assistive tech; the flip is decoration, not a gate on the information. */
.flips{display:grid;gap:20px;grid-template-columns:repeat(4,1fr)}
.flip{
  perspective:1200px;background:transparent;border:none;padding:0;
  aspect-ratio:3/4;cursor:pointer;font:inherit;color:inherit;text-align:left;
  border-radius:14px;
}
.flip:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.flip-inner{
  position:relative;width:100%;height:100%;
  transition:transform .62s var(--ease);
  transform-style:preserve-3d;
}
.flip:hover .flip-inner,
.flip:focus-visible .flip-inner,
.flip.is-flipped .flip-inner{transform:rotateY(180deg)}
/* hover already flips on a pointer device, so the click only stranded the
   card face-up after the pointer left — the tap state belongs to touch */
@media (hover:hover){
  .flip.is-flipped .flip-inner{transform:none}
  .flip:hover .flip-inner,
  .flip:focus-visible .flip-inner{transform:rotateY(180deg)}
}

.flip-front,.flip-back{
  position:absolute;inset:0;border-radius:14px;overflow:hidden;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  border:1px solid var(--hairline-dark);
}
.flip-front{background:var(--bg-dark)}
.flip-front img{width:100%;height:100%;object-fit:cover}
.flip-front::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(30,30,42,0) 40%,rgba(30,30,42,.9) 100%);
}
.flip-label{
  position:absolute;left:18px;right:18px;bottom:16px;z-index:2;
  font-family:var(--ui);font-size:.7rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amber);
}
.flip-label b{
  display:block;font-family:var(--heading);font-size:1.3rem;font-weight:600;
  letter-spacing:-.01em;text-transform:none;color:#fff;margin-top:5px;
}
.flip-hint{
  position:absolute;top:14px;right:14px;z-index:2;
  width:24px;height:24px;border-radius:50%;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-size:.7rem;color:#fff;
}
.flip-back{
  transform:rotateY(180deg);
  background:var(--bg-warm);border-color:var(--hairline);
  padding:26px 22px;display:flex;flex-direction:column;justify-content:center;
}
.flip-back .card-label,.flip-back h4{
  font-family:var(--ui);font-size:.7rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber);margin:0 0 12px;
}
.flip-back .name{
  font-family:var(--heading);font-size:1.3rem;font-weight:600;
  color:var(--text-primary);margin:0 0 10px;line-height:1.2;
}
.flip-back p{margin:0;font-size:.95rem;line-height:1.6;color:var(--text-secondary)}

@media (max-width:1000px){.flips{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){
  .flips{grid-template-columns:1fr;gap:16px}
  .flip{aspect-ratio:16/9}
}
@media (prefers-reduced-motion:reduce){
  .flip-inner{transition:none}
}

/* ---------- footnote row: secondary links given real structure ----------
   Replaces the "one line and a button floating in a whole section" pattern. */
.footnote-row{
  display:grid;grid-template-columns:repeat(2,1fr);gap:34px;
  margin-top:56px;padding-top:30px;border-top:1px solid var(--hairline);
  /* shares one measure with the copy above it, so the right edges stay
     aligned even when the wording changes */
  max-width:var(--footnote-measure,44rem);
}
.footnote-row h3,.footnote-row h4{
  font-family:var(--ui);font-size:.7rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber);margin:0 0 10px;
}
.footnote-row p{margin:0 0 12px;font-size:.95rem;color:var(--text-secondary);line-height:1.6}
.footnote-row .links{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0}
/* The slim variant: no explanatory copy, so the row is short. It spreads
   wider than the default measure to fill the space it saves rather than
   leaving a gap under the buttons. */
.footnote-slim{max-width:min(100%,58rem);margin-top:44px;padding-top:26px}
.footnote-slim h3{margin-bottom:8px}
.footnote-slim .links{margin-top:0}

/* The two columns rarely run to the same number of lines, so their closing
   links used to sit at different heights. Each cell is a column with the
   link pushed to the bottom, which lands them on one line. */
.footnote-row > div{display:flex;flex-direction:column}
.footnote-row .links{margin-top:auto}
.footnote-row .soon{margin-left:0}
.section-dark .footnote-row,.section-deep .footnote-row,.footnote-row.on-dark{border-top-color:var(--hairline-dark)}
.section-dark .footnote-row p,.section-deep .footnote-row p,.footnote-row.on-dark p{color:var(--text-muted-dark)}
.muted-ui{font-family:var(--ui);font-size:.9rem;color:var(--text-muted)}
.section-dark .muted-ui,.section-deep .muted-ui{color:var(--text-muted-dark)}
@media (max-width:680px){
  .footnote-row{grid-template-columns:1fr;gap:26px;margin-top:44px}
}

/* ---------- type scale ----------
   Every emphasised line on the site comes from here. Do not set font-size
   inline on a page — that is how the pages drifted apart in the first place. */
.line-emphasis{
  font-family:var(--heading);font-style:italic;font-weight:500;
  font-size:clamp(1.28rem,2.1vw,1.5rem);line-height:1.4;
  color:var(--text-primary);
}
.section-dark .line-emphasis,.section-deep .line-emphasis{color:var(--text-on-dark)}
.line-emphasis{margin-top:30px}

.principles{
  font-family:var(--heading);font-weight:600;
  font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.5;letter-spacing:-.01em;
  color:var(--text-primary);max-width:20ch;
}
.stat-figure{
  font-family:var(--heading);font-weight:600;
  font-size:clamp(1.7rem,3vw,2rem);line-height:1.1;
  color:var(--text-primary);margin:0;
}
.section-dark .stat-figure,.section-deep .stat-figure{color:var(--text-on-dark)}
.note-sm{
  font-family:var(--ui);font-size:.85rem;line-height:1.6;
  color:var(--text-muted);
}
.home-hero .note-sm{color:rgba(255,255,255,.62)}

/* ---------- media with no card treatment ----------
   For cut-out artwork (the butterfly) that should sit directly on the
   section background with no frame, shadow or edge. */
.split-media.plain{
  border-radius:0;box-shadow:none;overflow:visible;background:none;
  min-height:0;display:flex;align-items:center;justify-content:center;
}
.split-media.plain img{
  width:100%;height:auto;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.35));
}
/* portrait cut-outs sit clean on the ground — the drop shadow read as a
   grey smear behind the figure rather than as depth */
.split-media.plain.portrait img{filter:none}

/* portrait cut-outs sit on the page, bottom-aligned to the text block */
.split-media.plain.portrait{align-items:flex-end}
.split-media.plain.portrait img{
  width:auto;max-width:100%;max-height:520px;height:auto;
}

/* ---------- Yellow Butterfly hero: diagonal amber wash ----------
   Butterfly photograph stays as the ground; this gradient sits over it,
   dark yellow top-left running to a creamy yellow bottom-right. All hero
   type and buttons go white for contrast against the wash. */
/* The image itself carries the full yellow ramp, so there is no dark scrim
   here at all — only a whisper of warm amber top-left to hold the white type. */
.home-hero.amber-wash{
  background:linear-gradient(135deg,
    #D2A014 0%, #EBB028 28%, #F4CE55 55%, #FAE494 78%, #FFEEA8 100%);
}
.home-hero.amber-wash::after{
  background:linear-gradient(135deg,
    rgba(58,38,1,.34) 0%,
    rgba(58,38,1,.16) 26%,
    rgba(58,38,1,0)  52%);
}
.home-hero.amber-wash .hero-kicker{color:#fff;opacity:.92}
.home-hero.amber-wash h1{color:#fff}
/* Hero italics: brand charcoal lifted 25% so it reads as deep grey rather
   than black against the yellow. 30% was tried and drops to 2.6:1 at the
   dark end of the ramp, below the 3.0 large-text threshold. */
.home-hero.amber-wash h1 em{color:#56565F}
.home-hero.amber-wash .hero-lede,
.home-hero.amber-wash .hero-lede strong{color:#fff}
.home-hero.amber-wash .note-sm{color:rgba(255,255,255,.9)}

/* white buttons on the wash */
.home-hero.amber-wash .btn-amber{
  background:#fff;border-color:#fff;color:#4A2F02;
  box-shadow:0 6px 24px rgba(60,38,2,.28);
}
.home-hero.amber-wash .btn-amber:hover{
  background:#fff;border-color:#fff;color:#3A2401;
  box-shadow:0 10px 32px rgba(60,38,2,.36);
}

/* nav CTA would be amber-on-amber over the wash — make it white until scrolled */
body.amber-hero .topnav:not(.scrolled) .navlinks a.nav-cta{
  background:#fff;color:#4A2F02;
}
body.amber-hero .topnav:not(.scrolled) .navlinks a.nav-cta:hover{
  background:#fff;color:#3A2401;box-shadow:0 4px 18px rgba(60,38,2,.3);
}
body.amber-hero .topnav:not(.scrolled) .navlinks a:not(.nav-cta){color:rgba(255,255,255,.85)}
/* amber-on-amber would vanish, so the yellow hero hovers to charcoal instead */
body.amber-hero .topnav:not(.scrolled) .navlinks a[aria-current="page"]{color:#fff}
body.amber-hero .topnav:not(.scrolled) .navlinks a:not(.nav-cta):hover{color:var(--bg-dark)}

@media (max-width:860px){
  .layers{grid-template-columns:1fr}
}

/* ---------- line balancing ----------
   Short blocks get balance (even line lengths); long-form prose gets pretty
   (no stranded last word). Applied by role so it holds as copy changes. */
.door-body p,
.layer p,
.card p,
.flip-back p,
.member p,
.footnote-row p,
.voice-quote,
.voice-truth,
.voice-context,
.checklist li,
.faq details p,
.notice p,
.price-note,
.form-note,
.gate-compact p,
.pricing-after,
.doors-intro p,
.byline,
.hero-lede,
.lede,
.statement,
.line-emphasis,
.signoff-role{ text-wrap:balance; }

.prose p,
.measure p,
.container-mid > p{ text-wrap:balance; }

/* homepage close: brand line first, then one balanced two-line statement */
.algorithm-line + .closing-copy{
  margin:22px 0 0;
  max-width:64ch;
  font-size:clamp(1.05rem,1.6vw,1.25rem);
  line-height:1.6;
  color:var(--text-muted-dark);
  text-wrap:balance;
}

/* Terminal CTA blocks centre; page headers and section headings stay left. */
.center-block{text-align:center}
.center-block .lede,
.center-block .closing-copy,
.center-block .measure{margin-left:auto;margin-right:auto}
.center-block .btn-row{justify-content:center}

/* Section heading centres when a symmetric grid or carousel follows it.
   Hero headers stay left-aligned at a fixed offset on every page. */
.center-head > .eyebrow,
.center-head > h2,
.center-head > .lede,
.center-head > .muted{text-align:center}
.center-head > h2,
.center-head > .lede,
.center-head > .muted{margin-left:auto;margin-right:auto}

/* trims dead space where a section ends on a CTA */
.section.tight-bottom{padding-bottom:64px}
.carousel-track{padding-bottom:10px}

/* the "Maybe you're…" lines: a tight list, not five spaced paragraphs */
.maybe-list{
  list-style:none;margin:26px 0 0;padding:0;
  display:grid;gap:9px;max-width:68ch;
}
.maybe-list li{
  font-size:1.0625rem;line-height:1.55;color:var(--text-secondary);
  text-wrap:balance;
}

/* ---------- gold section ----------
   Ground and type live together further down the file, with the heroes'
   scrim, so every gold surface on the site reads the same way. Only the
   card and control overrides for this section stay here. */

/* shadow becomes a deep yellow rather than black */

/* carousel controls need to read on the gold */

/* Cards keep their own palette — the gold section's type colours must not
   leak into them (they sit on a dark card, not on the gold). */
.section-gold .voice p,
.section-gold .voice .voice-context,
.section-gold .voice .voice-truth{color:var(--text-secondary)}
.section-gold .voice .voice-quote{color:var(--text-primary)}
.section-gold .voice .voice-name{color:#B07E06}
.section-gold .voice .voice-mark{color:var(--amber)}

/* amber on gold disappears — the CTA goes charcoal here */
.section-gold .btn-amber{
  background:var(--bg-dark);border-color:var(--bg-dark);color:var(--text-on-dark);
  box-shadow:0 8px 26px rgba(84,58,2,.32);
}
.section-gold .btn-amber:hover{
  background:#12121c;border-color:#12121c;
  box-shadow:0 12px 34px rgba(84,58,2,.42);
}

/* "More aware / More courageous…" — statements, sized to sit with the headings. */
.more-list{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:8px;max-width:46ch}
.more-list li{
  font-family:var(--heading);font-size:clamp(1.3rem,2.1vw,1.65rem);
  font-weight:500;line-height:1.3;color:var(--text-primary);
  padding-left:26px;position:relative;text-wrap:balance;
}
.more-list li::before{
  content:'';position:absolute;left:2px;top:.62em;
  width:8px;height:8px;border-radius:50%;background:var(--amber);
}

/* the closing thought sits directly under the list, not floated away from it */
.closing-thought{margin:26px 0 0;max-width:52ch}

/* Nova carousel controls: dark yellow with a white arrow */
.section-gold .carousel-btn{
  background:#C48E12;border-color:#C48E12;color:#fff;
  box-shadow:0 10px 26px rgba(84,58,2,.30);
}
.section-gold .carousel-btn:hover{
  background:#A87A10;border-color:#A87A10;color:#fff;transform:scale(1.07);
}

/* a single line carrying the weight of a section — no image needed */
.big-statement{
  /* This is a question being quoted, not a headline — italic and a shade
     lighter, matching the emphasis lines used elsewhere on the site.
     Measure set per-instance where the question runs long. */
  font-family:var(--heading);font-weight:500;font-style:italic;letter-spacing:-.015em;
  font-size:clamp(1.24rem,2.05vw,1.6rem);line-height:1.34;
  color:#6E6E7A;text-wrap:balance;
  margin:26px 0 0;max-width:var(--statement-measure,22ch);padding-top:22px;
  border-top:2px solid var(--amber);
  border-bottom:2px solid var(--amber);
  padding-bottom:20px;
}
.center-head .big-statement{
  /* set per-instance where the question runs long */text-align:center}
.section-dark .big-statement,.section-deep .big-statement{
  /* set per-instance where the question runs long */color:var(--text-on-dark)}

/* Where the headline runs to three lines the copy beneath sits low against
   the other heroes — pull it back up rather than letting the block drift. */
.home-hero.tall-headline h1{margin-bottom:14px}
.home-hero.tall-headline .hero-lede{margin-bottom:10px}

/* Closing heads break to two lines instead of running edge to edge, which
   is what made them feel cramped despite the space around them. */
.closing-head{max-width:28ch;margin-left:auto;margin-right:auto;text-wrap:balance}
.center-block .closing-copy{max-width:52ch;margin-top:18px}

/* the butterfly hero needs room beneath so the artwork and CTA don't crowd
   the section that follows */
.home-hero.has-figure{min-height:84vh;padding-bottom:clamp(120px,15vh,180px)}

/* a centred block centres everything in it, including copy nested in wrappers */
.center-block .measure,
.center-block .measure-center,
.center-block p{margin-left:auto;margin-right:auto}
.center-block .big-statement{
  /* set per-instance where the question runs long */text-align:center}

/* council section: body copy and the footnote row share a measure */
.section-dark .footnote-row{--footnote-measure:44rem}
.council-measure{max-width:44rem}

/* A long hero lede under a full-width headline looks lopsided at the default
   measure — this one runs wider so it breaks to two lines, not three-and-a-bit. */
.hero-lede.wide{max-width:58rem}

/* Hero secondary button: dark yellow with a lift, so it reads as a real
   choice rather than a faint outline on the amber ground. */
.home-hero.amber-wash .btn-ghost{
  background:#C48E12;border-color:#C48E12;color:#fff;
  box-shadow:0 8px 24px rgba(84,58,2,.32);
}
.home-hero.amber-wash .btn-ghost:hover{
  background:#A87A10;border-color:#A87A10;color:#fff;
  box-shadow:0 12px 32px rgba(84,58,2,.42);
}

/* Principles on the site gradient. Type is charcoal, not white: across this
   ramp white measures 2.9:1 at the dark end and 1.2:1 at the cream end, while
   charcoal holds 5.3:1 to 14:1. One weight, no italics. */

/* a centred block centres its footnote row too, so the columns sit under the
   heading instead of drifting to the left edge */
.center-block .footnote-row{
  /* auto columns + centred content: the two blocks size to their text and the
     gap between them lands on the section's centre line, under the button */
  /* equal columns, not content-sized: only then does the gap between them
     fall on the centre line rather than the pair's midpoint */
  /* row width matches the heading's rendered text width, so the left column
     starts under the first letter and the right column ends under the last */
  grid-template-columns:auto auto;
  justify-content:space-between;
  gap:64px;
  max-width:none;width:38.9rem;
  margin-left:auto;margin-right:auto;
}
.center-block > h2{margin-left:auto;margin-right:auto}

/* ---------- scrimmed gold section ----------
   The same trick the heroes use: the gold ramp plus a soft dark wash on the
   left, which is what lets white type sit on it (4.4:1 instead of 2.9:1). */
/* .scrimmed keeps its type rules; the ground and scrim now come from
   .section-gold itself, so every gold section on the site matches. */
.section-gold.scrimmed h2{color:#fff;margin-bottom:14px}
.section-gold.scrimmed .eyebrow{color:rgba(255,255,255,.80)}
.section-gold.scrimmed .principles-intro{color:#fff;margin:2px 0 0;max-width:52ch}

/* ---------- the principle card ----------
   Fixed size so the layout never shifts, and it turns over rather than
   flashing: each rotation brings the next principle round. */
.principle-card{
  margin:0;align-self:center;justify-self:end;
  position:relative;
  /* A banner rather than a panel: 30% shorter, and wide enough that the
     longest principle ("Accountability") still sets on one line at the
     larger size. Height and type moved in opposite directions on purpose —
     the empty space was the problem, not the box. */
  width:420px;height:158px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  padding:20px 20px 16px;border-radius:16px;
  /* white on the gold, like the ecosystem and testimonial cards — a dark
     panel sitting on the ramp read as a hole punched in the section */
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 2px 6px rgba(120,84,4,.10),0 20px 48px rgba(120,84,4,.18);
}
.principle-card-label{
  position:absolute;top:16px;left:0;right:0;text-align:center;
  font-family:var(--ui);font-size:.7rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:#B07E06;margin:0;
}
.pflip{perspective:900px;width:100%;height:74px}
.pflip-inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .9s var(--ease);
}
.pface{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  font-family:var(--heading);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(2rem,4vw,3.6rem);line-height:1.04;color:var(--text-primary);
  text-align:center;white-space:nowrap;
}
.pface-back{transform:rotateY(180deg)}
/* every principle stays in the DOM for assistive tech and no-JS readers */
.principle-all{
  list-style:none;margin:0;padding:0;
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
}
@media (prefers-reduced-motion:reduce){
  .pflip-inner{transition:none}
}
@media (max-width:860px){
  .principle-card{justify-self:start;width:100%;max-width:420px}
}

/* the line that lands after a big statement */
.after-statement{
  font-family:var(--heading);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(1.06rem,1.65vw,1.3rem);line-height:1.32;
  color:var(--text-primary);
  margin:18px 0 0;max-width:none;white-space:nowrap;
}
@media (max-width:640px){
  .after-statement{white-space:normal;max-width:26ch}
}
.center-block .after-statement{margin-left:auto;margin-right:auto}

.statement-wide{--statement-measure:30ch}

/* the cut-out sits larger than a headshot but must not tower over the copy */
.split-media.plain.portrait img{max-height:520px}

/* Principles section: the heading carries more weight so the copy block
   stands to the same height as the card, and the two sit closer together. */
.section-gold.scrimmed .split{gap:36px;grid-template-columns:1fr auto;align-items:center}
.section-gold.scrimmed h2{font-size:clamp(2.3rem,4.4vw,3.5rem);margin-bottom:18px}
.section-gold.scrimmed .principles-intro{font-size:1.12rem;line-height:1.7;max-width:46ch}

/* breathing room between the closing heading and its button */
/* One place sets the space above a button row, instead of inline margins
   scattered through the pages. +30% where it closes a section. */
.btn-row{margin-top:28px}
.home-hero .btn-row{margin-top:34px}
.center-block > h2 + .btn-row,
.center-block > h2 + .btn-row.center{margin-top:39px}

/* the call-centre cut-out: nothing trimmed, aligned right in her column */
.split-media.plain.portrait{overflow:visible;justify-content:flex-end}
.split .split-media.plain.portrait img{max-height:520px;width:auto;max-width:100%}
@media (max-width:860px){
  .split .split-media.plain.portrait img{max-width:100%;max-height:340px}
}

/* the human-problem section gives the cut-out a little more room without
   squeezing the copy column into bad line breaks */
.problem-split{grid-template-columns:1fr 0.95fr;gap:44px;align-items:center}

/* ---------- team grid: built for twelve ----------
   Four across, three deep. Members without a photograph carry a monogram
   rather than a stock face; unfilled slots are visibly placeholders. */
.team-grid{
  grid-template-columns:repeat(4,1fr);gap:34px 30px;
  /* seven members, so the second row is a centred three rather than three
     left-aligned tiles and a hole */
  justify-content:center;
}
.team-grid > .member:nth-child(5){grid-column:1/span 1}
.member-monogram{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1/1;border-radius:12px;
  /* the same warm off-white the portraits are cut onto, so a member without
     a photograph still belongs to the set */
  background:#FCFAF5;color:var(--amber);
  font-family:var(--heading);font-size:2.2rem;font-weight:600;letter-spacing:.02em;
  margin-bottom:16px;
}
@media (max-width:1000px){.team-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.team-grid{grid-template-columns:1fr}}

/* A button pair that sits inside a measured column shouldn't run wider than
   the copy above it — tighter padding, and it wraps rather than overhanging. */
.btn-row-compact{max-width:34rem;gap:10px}
.btn-row-compact .btn-amber,
.btn-row-compact .btn-ghost{padding:13px 19px;font-size:.85rem}

/* ---------- FAQ window ---------- */
.faq-panel{padding-top:44px}
.faq-brand{text-align:center;margin-bottom:22px}
.faq-mark{
  font-family:var(--heading);font-size:1.6rem;font-weight:600;
  letter-spacing:-.01em;color:var(--text-primary);
}
.faq-mark span{color:var(--amber)}
.faq-head{text-align:center;padding-right:0;margin-bottom:26px}
.faq-head h2{font-size:clamp(1.6rem,3vw,2.1rem)}
.faq-head p{margin-top:10px;color:var(--text-secondary);font-size:.98rem}

.faq-ask{
  margin-top:34px;padding-top:28px;border-top:1px solid var(--hairline);
  text-align:center;
}
.faq-ask-line{
  font-family:var(--heading);font-style:italic;font-size:1.25rem;
  color:var(--text-primary);margin:0 0 18px;
}
.faq-form{margin-top:32px;padding-top:28px;border-top:1px solid var(--hairline)}
.faq-done{
  margin-top:34px;padding-top:28px;border-top:1px solid var(--hairline);
  text-align:center;
}
.faq-done .faq-ask-line{margin:0}

/* ---------- the invitation above the doors ----------
   These cards are the site's navigation, so the line that introduces them
   should read as an instruction, not a caption. */
.doors-invite{
  margin:18px 0 0;display:flex;flex-direction:column;align-items:center;gap:2px;
}
.doors-invite-lead{
  font-family:var(--heading);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.1;
  color:var(--amber);
}
.doors-invite-tail{
  font-family:var(--heading);font-style:italic;
  font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.2;
  color:var(--text-muted);
}
/* ---------- the lead into the doors ----------
   The pan's replacement. Same job, standing still, and on the page ground
   rather than the gold — so the visitor's first stop after the hero is a
   plain white statement of what the site is, not another gold block.

   The pieces it borrows (.pan-mark-brand, .doors-invite) were coloured for
   white type on the ramp; on this ground they have to come back to charcoal,
   because the brand amber measures 1.96:1 against cream and the white
   measures nothing at all. */
.doors-lead{
  background:var(--bg-primary);
  padding:clamp(76px,10vh,120px) 0 clamp(30px,4vh,44px);
}
.doors-lead .pan-mark-brand{
  display:block;white-space:normal;
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  color:var(--text-primary);margin-bottom:14px;
}
.doors-lead .pan-mark-brand span{color:var(--amber)}
.doors-lead-line{
  font-family:var(--heading);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(2.1rem,4.8vw,3.9rem);line-height:1.1;
  color:var(--text-primary);margin:0;text-wrap:balance;
}
.doors-lead-line em{font-style:italic;color:var(--amber-hover)}
.doors-lead .doors-invite{margin-top:clamp(22px,3vh,34px)}
.doors-lead .doors-invite-lead{color:var(--text-primary)}
.doors-lead .doors-thread{margin-top:22px}

/* a thread running from the invitation down into the cards */
.doors-thread{
  position:relative;width:2px;height:104px;margin:26px auto 0;
  --draw:0;
}
.doors-thread-line{
  position:absolute;inset:0;border-radius:2px;
  background:linear-gradient(180deg,var(--amber) 0%,rgba(235,176,40,.25) 100%);
  transform-origin:top center;
  transform:scaleY(var(--draw));
}
.doors-thread-flier{
  position:absolute;left:50%;top:calc(var(--draw) * 100%);
  transform:translate(-50%,-52%);
  color:var(--amber);line-height:0;
  opacity:calc(var(--draw) * 3);
}
.doors-thread-flier svg{width:22px;height:22px;display:block}
.doors-thread.is-drawn{--draw:1}

@media (max-width:760px){
  .statement-oneline{text-wrap:balance;font-size:1.15rem}
}

/* ---------- doors: the card flips on hover ----------
   These are the site's navigation. Hovering turns the card over to a gold
   face carrying that door's one-line role in the ecosystem, plus an explicit
   "Click for more" so there is no doubt the card opens.

   Type on the back is charcoal: the gradient runs from #D2A014 to #FFEEA8,
   and charcoal is the only colour that holds contrast across that whole ramp
   (5.3:1 at the dark end, 14:1 at the light). White measures 2.9:1 / 1.2:1. */
.door-flip{
  position:relative;aspect-ratio:4/5;flex:0 0 auto;
  transform-style:preserve-3d;
  transition:transform .62s var(--ease);
}
.door:hover .door-flip,
.door:focus-visible .door-flip{transform:rotateY(180deg)}
.door-face{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  border-radius:14px 14px 0 0;overflow:hidden;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.door-front{background:var(--bg-accent)}
.door-back{
  transform:rotateY(180deg);
  align-items:center;justify-content:center;text-align:center;
  padding:34px 30px;
  background:linear-gradient(135deg,
    #D2A014 0%, #EBB028 28%, #F4CE55 55%, #FAE494 78%, #FFEEA8 100%);
}
.door-back-line{
  font-family:var(--heading);font-size:1.6rem;line-height:1.28;
  color:#241800;margin:0;max-width:19ch;text-wrap:balance;
}
.door-back-line strong{font-weight:600;font-style:italic}
.door-back-cta{
  margin-top:26px;
  font-family:var(--ui);font-size:.86rem;font-weight:600;letter-spacing:.02em;
  color:#FFEFB4;background:#241800;
  padding:12px 22px;border-radius:999px;
}
.section-dark .door-front,.section-deep .door-front{
  background:rgba(255,255,255,.04);border-color:var(--hairline-dark);
}
/* No hover means no flip — phones and tablets keep the full front card,
   which already carries the description and the link. */
/* the panel below does not flip — it lights up in place, so the whole card
   reads as one object turning toward you */
.door-body{
  background:var(--bg-warm);
  border:1px solid var(--hairline);border-top:0;
  border-radius:0 0 14px 14px;
  transition:background .38s var(--ease),border-color .38s var(--ease);
}
.door:hover .door-body,
.door:focus-visible .door-body{
  /* picks the ramp up where the flipped face leaves off, so the image and
     the panel read as one continuous gold card rather than two bands */
  background:linear-gradient(135deg,
    #F6D765 0%, #FBE79C 46%, #FFF2B8 100%);
  border-color:var(--amber);
}
.door:hover .door-body p,
.door:focus-visible .door-body p{color:#3A2A05}
.door:hover .door-body p strong,
.door:focus-visible .door-body p strong,
.door:hover .door-cta,
.door:focus-visible .door-cta{color:#241800}

/* No hover means no flip — phones and tablets keep the front image. */
@media (hover:none){
  .door-back{display:none}
  .door-flip{transform:none!important}
}
@media (prefers-reduced-motion:reduce){
  .door-flip,.door-body{transition:none}
}

/* ---------- ecosystem layers ----------
   The quadrants were near full-column width, so each line ran long and the
   four read as a wall. Narrower measure, more lines, and the cell warms on
   hover so it behaves like the rest of the site's cards. */
.layer{transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.layer h3,.layer h4{max-width:20ch}
.layer p{max-width:33ch}
/* the standards line is the longest of the four; a slightly wider measure
   lands it on three lines like its siblings rather than four */
.layer:last-child p{max-width:45ch}
.layer:hover{
  background:#FFF8E6;
  border-color:rgba(235,176,40,.5);
  transform:translateY(-4px);
  box-shadow:0 2px 4px rgba(30,30,42,.04),0 16px 34px rgba(235,176,40,.16);
}
.section-dark .layer:hover,.section-deep .layer:hover{background:rgba(235,176,40,.10)}
@media (prefers-reduced-motion:reduce){.layer{transition:none}}

/* the definition of love reads as one measured paragraph, three lines */
.love-defined{max-width:52ch}

/* the line that closes the ecosystem section */
.only-beginning{
  font-family:var(--heading);font-weight:600;font-style:italic;
  font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.3;
  color:var(--text-primary);
  text-align:center;margin:46px auto 0;max-width:24ch;
}
.section-dark .only-beginning,.section-deep .only-beginning{color:var(--text-on-dark)}
/* a fading amber rule closes the ecosystem section off from the doors below */
.only-beginning::after{
  content:'';display:block;width:150px;height:2px;margin:36px auto 0;
  background:linear-gradient(90deg,
    rgba(235,176,40,0) 0%, var(--amber) 50%, rgba(235,176,40,0) 100%);
}

/* ---------- footer wordmark ----------
   Every page signs off with the mark, centred above the quote. */
.footer-brand{
  display:inline-block;text-decoration:none;
  font-family:var(--heading);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(1.75rem,3vw,2.2rem);line-height:1;
  color:var(--text-on-dark);
  margin:0 0 26px;
}
.footer-brand span{color:var(--amber)}
.footer-brand:hover span{color:#F4CE55}

/* ---------- the close ----------
   The gold ramp with a radial scrim centred on the copy. The heroes use a
   directional scrim because their text is left-aligned inside it; this block
   is centred, so the darkening has to be centred too. Measured behind the
   copy: white holds 4.6:1, and the gold still reads gold at the corners. */
/* Identical to the page heroes — same ramp, same directional scrim. The
   heroes carry left-aligned copy that sits inside the scrimmed end; this
   block is centred, so white measures ~4.9:1 on the left of the copy and
   ~2.1:1 on the right. Aidan's call: colour consistency over the reading. */
.section-amber{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,
    #D2A014 0%, #EBB028 28%, #F4CE55 55%, #FAE494 78%, #FFEEA8 100%);
}
.section-amber::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(135deg,
    rgba(58,38,1,.34) 0%,
    rgba(58,38,1,.16) 26%,
    rgba(58,38,1,0)  52%);
}
.section-amber > *{position:relative;z-index:2}
.section-amber .algorithm-line{color:#fff}
.section-amber .algorithm-line em{color:#56565F;font-style:italic}
.section-amber .closing-copy,
.section-amber .algorithm-line + .closing-copy{color:rgba(255,255,255,.93)}
.section-amber .btn-amber{
  background:#fff;border-color:#fff;color:#4A2F02;
  box-shadow:0 6px 24px rgba(60,38,2,.28);
}
.section-amber .btn-amber:hover{
  background:#fff;border-color:#fff;color:#3A2401;
  box-shadow:0 10px 32px rgba(60,38,2,.36);
}
.section-amber .btn-ghost{
  background:transparent;border-color:#fff!important;color:#fff!important;
}
.section-amber .btn-ghost:hover{background:#fff;color:#4A2F02!important}

/* ---------- council footnotes ----------
   The right-hand column starts level with the "Nominate a council member"
   button above it and ends level with the lede, instead of sitting inboard
   of both. Equal columns put its left edge 66px right of the button. */
.council-footnotes{grid-template-columns:.4fr .6fr}
@media (max-width:860px){
  .council-footnotes{grid-template-columns:1fr}
}

/* ---------- a gold section carrying dark copy ----------
   Same ramp as the heroes, but with no scrim over it. The heroes darken their
   top-left so white type can survive; charcoal wants the opposite — on the
   raw ramp it measures 5.9:1 at the dark end and 12:1 at the light, while the
   scrim would drag it down to 3.3:1. So the gold stays bright and the type
   goes dark, which is the only pairing that holds right across the gradient. */
.section-gold{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,
    #D2A014 0%, #EBB028 28%, #F4CE55 55%, #FAE494 78%, #FFEEA8 100%);
}
.section-gold::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(135deg,
    rgba(58,38,1,.34) 0%,
    rgba(58,38,1,.16) 26%,
    rgba(58,38,1,0)  52%);
}
.section-gold > *{position:relative;z-index:2}
.section-gold .eyebrow{color:#fff;opacity:.92}
.section-gold h2,.section-gold h3,.section-gold h4{color:#fff}
/* same pairing as the heroes: white heading, charcoal italic on the phrase
   being singled out — lifted 25% so it reads deep grey, not black */
.section-gold h2 em,.section-gold h3 em{color:#56565F;font-style:italic}
.section-gold p,.section-gold li,.section-gold .lede{color:#fff}
.section-gold .line-emphasis{color:#56565F}
.section-gold .checklist li::before{background:#fff}
.section-gold .btn-amber{
  background:#fff;border-color:#fff;color:#4A2F02;
  box-shadow:0 6px 24px rgba(60,38,2,.28);
}
.section-gold .btn-amber:hover{
  background:#fff;border-color:#fff;color:#3A2401;
  box-shadow:0 10px 32px rgba(60,38,2,.36);
}
.section-gold .btn-ghost{background:transparent;border-color:#fff;color:#fff}
.section-gold .btn-ghost:hover{background:#fff;color:#4A2F02}
.section-gold .textlink{color:#fff}

/* ---------- the council block ----------
   Centred and given the full container. It was sitting in an 880px column
   with a 44rem measure inside that, which left the copy bunched against the
   left while the section ran wide and empty on the right. */
.council-center .council-head{
  max-width:none;margin-left:auto;margin-right:auto;
  font-size:clamp(2rem,3.6vw,3rem);line-height:1.14;
}
.council-center .council-measure{
  max-width:62ch;margin-left:auto;margin-right:auto;
}
.council-center .btn-row{margin-top:34px}
.council-center .council-footnotes{
  grid-template-columns:1fr 1fr;
  gap:56px;
  max-width:820px;margin-left:auto;margin-right:auto;margin-top:64px;
  text-align:center;
}
.council-center .council-footnotes .links{justify-content:center}
@media (max-width:860px){
  .council-center .council-footnotes{grid-template-columns:1fr;gap:30px}
  .council-center .council-head br{display:none}
}

/* ---------- the trust mark ----------
   Sits like an impression on the page rather than a framed image: no card,
   no border, tipped a few degrees the way a hand stamp lands. */
.seal-stamp{margin:0;text-align:center;align-self:center}
.seal-stamp img,
.seal-stamp .yb-seal{
  width:min(78%,340px);height:auto;display:block;margin:0 auto;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.6));
}

/* The mark is drawn rather than photographed: it is one SVG, inline in the
   page rather than an <img>, because an <img> cannot reach the webfont the
   ring is set in and the lettering would fall back to something else. */

/* ---------- the robot ----------
   A cut-out standing at the foot of two sections and rising through both, the
   same idea as the sunflower on Handing Hope. Its feet sit on the top edge of
   the amber section below, and it drifts against the page as you scroll.

   The stage is the two sections together, so "the bottom" means the bottom of
   the pair rather than of either one. Nothing here is load-bearing: with no
   JavaScript it simply stands still. */
.robot-stage{position:relative}
.robot{
  position:absolute;z-index:3;pointer-events:none;
  right:3%;top:0;
  /* A tall build rather than the stubby one: 361x1088, about three times as
     tall as it is wide. The chibi version was 1.7:1, so filling this stage
     would have made it 1066px across and it would have sat on the copy.

     Width and vertical start are both set by robot.js, because both depend
     on the height of the window — see the note there. These are the values
     it falls back to if that never runs. */
  width:min(33%,540px);
  display:block;
  will-change:transform;
}
.robot img{
  width:100%;height:auto;display:block;
  /* it is standing on the section below, so the shadow goes under its feet */
  filter:drop-shadow(0 14px 22px rgba(84,58,4,.20));
}
/* the copy column keeps its measure and the robot gets the other half */
.robots-section .split{align-items:start}
.robot-space{min-height:1px}

/* The small robot in the hero: the little one of the pair, standing on the
   bottom edge. Its shell is cream against the pale end of the gold ramp, so
   it carries a shadow to hold it off the background. */
.hero-robot{
  position:absolute;z-index:2;pointer-events:none;
  /* lifted clear of the section boundary rather than standing on it, and
     brought in toward the copy so the two read as one composition */
  right:13%;bottom:44px;
  width:min(20%,278px);
  display:block;
}
.hero-robot img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 3px 6px rgba(84,58,4,.16)) drop-shadow(0 18px 30px rgba(84,58,4,.26));
}
@media (max-width:900px){ .hero-robot{display:none} }

/* ---------- the Yellow Butterfly page ----------
   Everything here sits on the LEFT, because the other page puts its robots
   on the right and two pages built the same way read as one page twice.

   The peeker in the hero. It stays in the outer margin, outside the text
   column, so it never lands on the left-aligned headline — a head and a
   shoulder rather than a figure. */
.home-hero.has-figure{overflow:hidden}
.hero-peek{
  position:absolute;z-index:2;pointer-events:none;
  /* on the right now, fully in frame rather than cut by the edge — the tall
     robot further down the page has the left, so the hero balances against it */
  right:4vw;left:auto;bottom:34px;
  width:min(22%,288px);
  display:block;
}
.hero-peek img{width:100%;height:auto;display:block;position:relative;z-index:1}
/* A shadow on the ground rather than around the whole figure: a soft ellipse
   under the base, so he reads as sitting on the gold instead of floating
   above it. drop-shadow would have traced his outline all the way up. */
.hero-peek::after{
  content:'';position:absolute;z-index:0;
  left:12%;right:12%;bottom:-2%;height:9%;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(96,64,6,.42) 0%, rgba(96,64,6,.24) 45%, rgba(96,64,6,0) 72%);
}
@media (max-width:1080px){ .hero-peek{display:none} }

/* the copy sits over it */
.home-hero.has-figure .container{position:relative;z-index:2}

/* The tall one runs up the left instead of the right, sitting centred in the
   margin beside the copy rather than hard against the edge. */
.robot--left{right:auto;left:6.4%}

/* Copy weighted right through the two sections it stands beside, so the
   left third belongs to the robot. Centred copy would have run straight
   over it. */
.copy-right,
.copy-right-section .container{
  margin-left:auto;margin-right:0;
}
@media (min-width:1081px){
  .copy-right{max-width:60%;text-align:left}
  /* Narrower than the default measure. The statement below centres on this
     box, so if the box is wider than the copy actually fills, the statement
     ends up sitting right of the text. Matching the two makes centring come
     out right by itself. */
  .copy-right .measure-center{margin-left:0;margin-right:0;max-width:48ch}
  /* pulled back toward the robot, closing about a third of the gap between
     them without widening the measure */
  .copy-right-section .container{max-width:60%;margin-right:64px}
}

/* "Why a standard" sits on the same left edge as the vision section below it,
   so the robot standing beside all three keeps an even gap the whole way down
   rather than nearly touching the copy in this one. */
@media (min-width:1081px){
  .copy-right{margin-right:64px}
}
/* the closing statement ranges left with the copy, not centred under it */
.copy-right .big-statement{margin-left:0;margin-right:auto;text-align:left}
.copy-right .measure-center .big-statement{margin-top:34px}

/* The charcoal section's copy is centred, which looked off-balance with the
   robot standing in the left third. Nudged right so it sits centred in the
   space that is actually left over, and the lede runs wider there so it takes
   fewer lines — the other pages balance this block with something on the
   right, and this one has to earn its balance from the width instead. */
@media (min-width:1081px){
  .council-shift{padding-left:clamp(0px,16vw,250px)}
  /* NO measure override here. 76ch resolved to 940px inside an 838px box, so
     the paragraph never centred — it filled the box edge to edge and its
     first character landed at 414, which is 39px INSIDE the robot's right
     edge at 453. The headline and buttons were fine because their content is
     narrower than the box and centres within it; only the lede was wide
     enough to reach back under him. It now takes the same 62ch as every
     other part of this block. */
}

/* One line in the gold section ran the full width of the container and its
   tail finished underneath the robot's head. Held to the copy column, it
   breaks into two and stays clear. */
.clear-of-robot{max-width:54ch}

@media (max-width:1080px){
  /* below this the copy runs the full width and there is no column to stand
     in, so it steps aside rather than sitting on top of the text */
  .robot{display:none}
}

/* The stamp in the right-hand half of the vision section. The copy there is
   held to a measure and leaves that side empty. Charcoal rather than gold:
   the gold mark on the gold ramp measures about 1.3:1 and vanishes. */
#vision{position:relative}
/* The mark shown where it is meant to be found: stamped on the screen of a
   site that carries it. The image is a square with the machine centred in it,
   so the width below is the box, not the laptop. */
/* A zero-height marker sitting exactly on the seam between the two sections,
   so the laptop can be hung off it and overhang upward. z-index puts it over
   the gold section but under the robot, which is 3. */
.vision-seal{
  /* Locked from the layout tool at a 1440px viewport: sitting just under the
     halfway line of the section and pulled in toward the copy. top is the
     centre, since the translate takes half its own height back off. */
  position:absolute;right:20.1%;top:49.7%;
  transform:translateY(-50%);
  width:min(12.3%,177px);pointer-events:none;z-index:1;
}
.vision-seal .yb-seal{width:100%;height:auto;display:block}
#vision .container{position:relative;z-index:2}
/* below this the copy runs full width and there is nowhere for it to sit */
@media (max-width:1080px){ .vision-seal{display:none} }

/* The trust mark on the hero plate. It sits under the nav, in the clear part
   of the wash on the right, small enough to read as a stamp rather than art. */
.hero-seal{
  position:absolute;z-index:2;pointer-events:none;
  top:clamp(118px,15vh,172px);
  right:clamp(20px,5vw,74px);
  width:min(19vw,178px);
  opacity:.9;
}
.hero-seal .yb-seal{width:100%;height:auto;display:block}
@media (max-width:860px){ .hero-seal{display:none} }

/* ---------- the certified site on the hero plate ----------
   z-index 1 puts it under the robot (2) and the copy (2), over the plate (0).
   Positions locked from the layout tool at a 1758px viewport. The laptop is
   offset from the robot rather than from the page edge, so the 186px overlap
   between them holds as the pair scales. */
.hero-laptop{
  position:absolute;z-index:1;pointer-events:none;
  right:calc(5.43% + 146px);bottom:102px;
  width:min(37.6%,661px);
}
.hero-laptop img{width:100%;height:auto;display:block;position:relative;z-index:1}
/* the same ground ellipse the robot gets, so it sits on the gold rather than
   floating over it */
.hero-laptop::after{
  content:'';position:absolute;z-index:0;
  left:6%;right:6%;bottom:-3%;height:8%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(58,38,1,.30) 0%, rgba(58,38,1,.13) 52%, rgba(58,38,1,0) 78%);
}

/* This hero carries a figure and a machine side by side, so it needs more
   height than the shared one, the copy sits higher, and the lede is held to
   three lines to leave the pair room. Scoped to this page: .home-hero and
   .hero-lede are shared with every other hero on the site. */
.home-hero.hero-yb{
  padding-top:clamp(126px,17vh,180px);
  padding-bottom:clamp(170px,23vh,260px);
}
.home-hero.hero-yb .hero-lede{max-width:38ch}
.home-hero.hero-yb .hero-peek{right:5.43%;bottom:47px;width:min(18.9%,332px)}
.home-hero.hero-yb .hero-seal{top:136px;right:6.67%;width:min(8.8%,154px)}
/* keep AI on the first line and the emphasis on its own; only where there is
   width for it, otherwise let the headline wrap where it wants */
.home-hero.hero-yb h1 .brk{display:none}
@media (min-width:861px){ .home-hero.hero-yb h1 .brk{display:inline} }

/* no room for it beside him on a phone */
@media (max-width:860px){ .hero-laptop{display:none} }
@media (max-width:860px){ .hero-seal{display:none} }
.door-seal{
  position:absolute;inset:0;display:grid;place-items:center;
  padding-bottom:14%;
  background:radial-gradient(120% 100% at 50% 38%,#282838 0%,#1E1E2A 58%,#15151E 100%);
}
.door-seal .yb-seal{
  width:68%;height:auto;display:block;
  transition:transform .6s var(--ease);
}
.door:hover .door-seal .yb-seal{transform:scale(1.045)}
@media (prefers-reduced-motion:reduce){
  .door-seal .yb-seal{transition:none}
  .door:hover .door-seal .yb-seal{transform:none}
}
.seal-stamp figcaption{
  margin-top:26px;
  font-family:var(--ui);font-size:.74rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-muted);
}
.section-gold .seal-stamp figcaption{color:rgba(255,255,255,.8)}
@media (max-width:860px){
  .seal-stamp img,.seal-stamp .yb-seal{width:min(62%,260px)}
}

/* ---------- advisors block ----------
   The copy column was half the grid, which broke these sentences at around
   45 characters and made the block read as a narrow strip. */
.split.split-wide-copy{grid-template-columns:1.22fr .78fr;gap:56px;align-items:center}
.split-wide-copy .measure{max-width:56ch}

/* Council block: the globe leads on the left so it does not stack directly
   under Jen's portrait in the section above, and it runs larger — the
   butterflies marking places on the map are the point of the image and were
   too small to read at the previous size. */
.split.split-council{
  grid-template-columns:.94fr 1.06fr;
  gap:52px;align-items:center;
}
.split-council .measure{max-width:54ch}
/* The globe is a glow on black. Screen-blending drops that black straight
   through to the section ground, so there is no keyed edge and no halo —
   it reads as the planet floating rather than a cut-out pasted on. */
.council-globe{
  align-self:center;
  display:flex;align-items:center;justify-content:center;overflow:visible;
}
.council-globe img{
  /* ~40% wider than its column, bleeding past both edges. A planet with a
     hard column crop stops reading as one, and the butterfly nodes need the
     extra size to be legible at all. */
  filter:none;width:140%;max-width:140%;height:auto;
  margin:0 -20%;
  mix-blend-mode:screen;
}
/* the two CTAs here read as a pair, so they share a width */
.split-wide-copy .btn-row a{min-width:169px}
@media (max-width:860px){
  .split.split-wide-copy{grid-template-columns:1fr}
  .council-globe img{width:114%;max-width:114%;margin:0 -7%}
}

/* ---------- white cards inside a gold section ----------
   The gold section paints its own type white; the cards sitting on it are a
   light surface of their own, so their type has to be pulled back to the
   charcoal or it disappears into the card. */
.section-gold .layer h3{color:var(--text-primary)}
.section-gold .layer p{color:var(--text-secondary)}
.section-gold .only-beginning{color:#56565F}
.section-gold .only-beginning::after{
  background:linear-gradient(90deg,
    rgba(86,86,95,0) 0%, rgba(86,86,95,.75) 50%, rgba(86,86,95,0) 100%);
}

/* ---------- The Big Idea ----------
   This is the mission statement, and it is the last thing read before the
   doors, so it is set as a statement rather than as body copy: centred,
   one measure, larger type, and the question given its own weight. */
.big-idea{text-align:center}
.big-idea-inner{max-width:960px;margin:0 auto}
.big-idea-head{
  font-size:clamp(2.2rem,4.2vw,3.35rem);line-height:1.12;
  max-width:20ch;margin:0 auto 34px;text-wrap:balance;
}
.big-idea-head em{font-style:italic;color:var(--amber)}
.big-idea-lead{
  font-size:clamp(1.12rem,1.55vw,1.28rem);line-height:1.68;
  color:var(--text-secondary);
  max-width:64ch;margin:0 auto 22px;text-wrap:pretty;
}
.big-idea-question{
  /* a question, not the headline — it sits below the h2 in the hierarchy and
     is held tight between its two rules rather than filling the space */
  font-family:var(--heading);font-style:italic;font-weight:500;
  font-size:clamp(1.45rem,2.5vw,1.95rem);line-height:1.24;letter-spacing:-.015em;
  color:var(--text-primary);
  max-width:22ch;margin:34px auto 0;text-wrap:balance;
  padding:20px 0;
  border-top:2px solid var(--amber);
  border-bottom:2px solid var(--amber);
}
.big-idea-defined{
  font-size:clamp(1rem,1.35vw,1.12rem);line-height:1.62;
  color:var(--text-secondary);
  max-width:56ch;margin:28px auto 0;text-wrap:pretty;
}
@media (max-width:860px){
  .big-idea-question{max-width:22ch}
}

/* ---------- the approach to the doors ----------
   A block taller than the screen with a sticky stage inside it. While the
   block passes, the stage is pinned and the track slides, so the view reads
   as panning across one long line rather than the line drifting past. The
   height is set by doors.js from the measured text width, so the pan ends on
   the last word and downward scrolling resumes at the invitation.

   No JavaScript: .is-panning is never added, the line wraps, the block is
   its natural height, and it reads as an ordinary centred heading. */
.doors-section{padding-top:0;overflow:clip}
/* The band carries the same gold as the section above it. Type here is
   charcoal, not white: the line travels the full width of the ramp, and
   charcoal is the only colour that holds from #D2A014 (5.9:1) through to
   #FFEEA8 (12:1). White would be 1.2:1 by the time it reached the pale end. */
/* ---------- one gold field ----------
   The ecosystem section and the band below it are two elements, and any
   attempt to give each its own gradient leaves a seam at the join — the ramp
   restarts, and even matched endpoints show a line. The wrapper paints the
   gradient and the scrim exactly once; the two children paint nothing, so
   there is no boundary for a seam to occur at. */
.gold-field{
  position:relative;
  /* The same ramp as every header — and sized to the viewport, not to this
     block. Stretched over a wrapper several screens tall, the diagonal spends
     its whole first screen in the dark end, which is why this section looked
     nothing like a header. Anchored to the viewport, each screenful of the
     field reads exactly as a hero does. */
  background:linear-gradient(135deg,
    #D2A014 0%, #EBB028 28%, #F4CE55 55%, #FAE494 78%, #FFEEA8 100%);
  background-attachment:fixed;
  background-size:100vw 100vh;
}
.gold-field::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(135deg,
    rgba(58,38,1,.34) 0%,
    rgba(58,38,1,.16) 26%,
    rgba(58,38,1,0)  52%);
  background-attachment:fixed;
  background-size:100vw 100vh;
}
.gold-field > *{position:relative;z-index:1}
.gold-field .section-gold{background:none}
.gold-field .section-gold::after{display:none}
.pan{position:relative;background:none}
.pan-stage{
  display:flex;align-items:center;
  padding:clamp(56px,9vh,96px) 0;
}
.pan-track{
  display:flex;align-items:center;gap:clamp(30px,5vw,64px);
  padding:0 28px;margin:0 auto;max-width:1100px;
}
.pan-line{
  font-family:var(--heading);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.6rem,3.4vw,2.7rem);line-height:1.15;
  color:#fff;margin:0;text-align:center;text-wrap:balance;
}
.pan-mark{color:#3A2A05;line-height:0;flex:0 0 auto;display:none}

.pan.is-panning .pan-track{position:relative;z-index:2}

/* the wordmark leads the line and sits centred before the pan begins */
.pan-mark-brand{
  font-family:var(--heading);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(2.2rem,5.2vw,4.4rem);line-height:1;
  color:#fff;white-space:nowrap;flex:0 0 auto;
}
.pan-mark-brand span{color:#FFE9A8}

/* each word lights as the view reaches it */
.pan-word{opacity:0;transition:opacity .5s var(--ease);display:inline-block}
.pan-word.lit{opacity:1}
.pan.is-panning .pan-line{display:flex;gap:.28em;align-items:baseline}
.pan-mark svg{display:block}

/* the panning version, switched on by doors.js once it has measured */
.pan.is-panning .pan-stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  /* the line sits high in the stage rather than centred, so the band starts
     close under the section above it instead of opening with a screen of air */
  padding:0;align-items:flex-start;padding-top:24vh;
}
.pan.is-panning .pan-track{
  width:max-content;max-width:none;margin:0;
  /* starts with the wordmark on the centre line, ends with room to spare */
  padding:0 6vw 0 34vw;
  will-change:transform;
}
.pan.is-panning .pan-line{
  white-space:nowrap;text-align:left;text-wrap:normal;
  /* Large enough to feel like travelling along a statement, but no larger:
     at 7.2vw the sentence ran 1,677px past the screen, which at the current
     pacing meant five screens of scrolling before the reader reached the
     invitation. This is about two. */
  font-size:clamp(2.2rem,5.2vw,4.4rem);line-height:1.06;
}
.pan.is-panning .pan-mark{display:block}

/* the edges bleed so the line runs off the frame rather than stopping at it */
/* No edge fades. The left one sat over the darkest part of the ramp and read
   as a smudge against the clean gold — the line simply runs off the frame. */

/* (the extra top padding here belonged to the old home-page layout) */

/* each door blooms once as it comes into view, then settles */
.door::after{
  content:'';position:absolute;inset:-3px;border-radius:17px;
  pointer-events:none;z-index:-1;
  box-shadow:0 0 0 0 rgba(235,176,40,0),0 0 0 rgba(235,176,40,0);
  transition:box-shadow .85s var(--ease);
}
.door.is-lit::after{
  box-shadow:0 0 0 2px rgba(235,176,40,.6),0 16px 46px rgba(235,176,40,.3);
}
.door.is-lit.is-settled::after{
  box-shadow:0 0 0 0 rgba(235,176,40,0),0 0 0 rgba(235,176,40,0);
}

@media (max-width:860px){
  .doors-band-line{font-size:1.35rem}
  .doors-thread{height:74px}
}
@media (prefers-reduced-motion:reduce){
  .doors-band-track{transform:none!important}
  .door::after{transition:none;box-shadow:none!important}
}


/* ============================================================
   THE BUTTERFLY

   One per page, and never twice in the same place.

   The animation itself does not travel: the butterfly beats its wings and
   turns on the spot, dead centre of its own canvas, and its drawn width
   pulses between 23px and 172px of 960 as it turns edge-on. Left to loop on
   its own it reads as something blinking in and out at a fixed point, which
   is exactly what it looked like.

   So the flight is CSS and the wings are the animation. The span is carried
   in from beyond one edge of the screen, settles on the spot that was chosen
   for it, drifts there a while, and leaves past the other edge — and the
   loop restart happens off-screen, where nobody can see it.

   Every butterfly sits in a full-width section for the same reason: a
   narrower box would clip it mid-air at an invisible line.

   The spans are empty and decorative — butterfly.js builds the wings inside
   them, so a page without JavaScript simply has no butterfly.
   ============================================================ */
.fly{
  position:absolute;display:block;pointer-events:none;
  /* in front of everything on the page. Only the fixed nav and the modals
     sit above it. */
  z-index:140;
  /* the drawn butterfly is about 18% of the canvas at its widest, so the
     canvas is sized from the width we actually want to see */
  --fly-size:150px;
  width:calc(var(--fly-size) / .18);
  aspect-ratio:16/9;
  /* the spot chosen for it is where it rests, not where the box starts */
  translate:-50% -50%;
  opacity:0;
}
.fly-wings{display:block;width:100%;height:100%}
.fly-wings svg{display:block;width:100%!important;height:100%!important;overflow:visible}

/* It is already on its spot when you get there — you never see it arrive,
   so there is no moment where it appears out of nothing. It holds the spot
   for about five seconds, flutters away past the edge, stays gone four or
   so, and comes back to the same spot. Twenty-two seconds round.

   The return is the one thing that is faded rather than flown: it happens
   at the spot, after the butterfly has been off the screen for several
   seconds, so it reads as one arriving rather than as something blinking.
   It never fades anywhere else.

   There are three departures and butterfly.js picks one at random each time
   the section is come back to, so the same page does not repeat itself. */
.fly.is-flying{
  animation-name:var(--fly-anim,fly-a);
  animation-duration:var(--fly-dur,13s);
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}

/* A butterfly does not travel in a line. It goes up, stalls, backs off,
   cuts sideways and climbs again, and it is always tilting. So the exits
   below advance and lose ground and advance again rather than sliding, and
   only pull away once they are near the edge.

   All three end 125vw from the spot — further than the screen is wide from
   ANY spot on it, even one hard against an edge — so it is always well past
   the edge of the page before it stops being drawn.

   The vertical is biased upward: the heroes clip their overflow, and a spot
   low in one has room above it and not below. */

/* A — climbs into a loop, breaks left, then away */
@keyframes fly-a{
  0%     {opacity:1;transform:translate(0vw,0vh) rotate(0deg)}
  6%     {opacity:1;transform:translate(.6vw,-1.2vh) rotate(5deg)}
  13%    {opacity:1;transform:translate(-.7vw,.5vh) rotate(-6deg)}
  21%    {opacity:1;transform:translate(.8vw,1vh) rotate(4deg)}
  29%    {opacity:1;transform:translate(-.4vw,-.8vh) rotate(-3deg)}
  36%    {opacity:1;transform:translate(0vw,0vh) rotate(0deg)}
  40%    {opacity:1;transform:translate(calc(var(--fly-dir,1) * 4vw),-5vh) rotate(-12deg)}
  43%    {opacity:1;transform:translate(calc(var(--fly-dir,1) * 8vw),-11vh) rotate(-20deg)}
  46%    {opacity:1;transform:translate(calc(var(--fly-dir,1) * 4vw),-15vh) rotate(-26deg)}
  49%    {opacity:1;transform:translate(calc(var(--fly-dir,1) * -1vw),-11vh) rotate(14deg)}
  52%    {opacity:1;transform:translate(calc(var(--fly-dir,1) * 1vw),-5vh) rotate(8deg)}
  55%    {opacity:1;transform:translate(calc(var(--fly-dir,1) * 7vw),-10vh) rotate(-14deg)}
  58%    {opacity:1;transform:translate(calc(var(--fly-dir,1) * 20vw),-14vh) rotate(-10deg)}
  61%    {opacity:1;transform:translate(calc(var(--fly-dir,1) * 48vw),-17vh) rotate(-7deg)}
  64%    {opacity:1;transform:translate(calc(var(--fly-dir,1) * 92vw),-19vh) rotate(-5deg)}
  66%    {opacity:1;transform:translate(calc(var(--fly-dir,1) * 125vw),-21vh) rotate(-4deg)}
  67%    {opacity:0;transform:translate(calc(var(--fly-dir,1) * 125vw),-21vh) rotate(-4deg)}
  92%    {opacity:0;transform:translate(calc(var(--fly-dir,1) * 125vw),-21vh) rotate(-4deg)}
  92.01% {opacity:0;transform:translate(0,0) rotate(0deg)}
  97%    {opacity:1;transform:translate(0,0) rotate(0deg)}
  100%   {opacity:1;transform:translate(0,0) rotate(0deg)}
}

/* B — dips, loops the other way, then away */
@keyframes fly-b{
  0%     {opacity:1;transform:translate(0vw,0vh) rotate(0deg)}
  7%     {opacity:1;transform:translate(-.6vw,.9vh) rotate(-5deg)}
  15%    {opacity:1;transform:translate(.9vw,-.6vh) rotate(6deg)}
  24%    {opacity:1;transform:translate(-.5vw,-1.1vh) rotate(-4deg)}
  31%    {opacity:1;transform:translate(.5vw,.7vh) rotate(3deg)}
  36%    {opacity:1;transform:translate(0vw,0vh) rotate(0deg)}
  39%    {opacity:1;transform:translate(calc(var(--fly-dir,1) * -2vw),-3vh) rotate(10deg)}
  42%    {opacity:1;transform:translate(calc(var(--fly-dir,1) * 2vw),-9vh) rotate(-16deg)}
  45%    {opacity:1;transform:translate(calc(var(--fly-dir,1) * 9vw),-13vh) rotate(-22deg)}
  48%    {opacity:1;transform:translate(calc(var(--fly-dir,1) * 12vw),-7vh) rotate(16deg)}
  51%    {opacity:1;transform:translate(calc(var(--fly-dir,1) * 6vw),-3vh) rotate(10deg)}
  54%    {opacity:1;transform:translate(calc(var(--fly-dir,1) * 9vw),-9vh) rotate(-12deg)}
  57%    {opacity:1;transform:translate(calc(var(--fly-dir,1) * 22vw),-13vh) rotate(-9deg)}
  60%    {opacity:1;transform:translate(calc(var(--fly-dir,1) * 50vw),-16vh) rotate(-6deg)}
  63%    {opacity:1;transform:translate(calc(var(--fly-dir,1) * 95vw),-18vh) rotate(-4deg)}
  66%    {opacity:1;transform:translate(calc(var(--fly-dir,1) * 125vw),-20vh) rotate(-3deg)}
  67%    {opacity:0;transform:translate(calc(var(--fly-dir,1) * 125vw),-20vh) rotate(-3deg)}
  92%    {opacity:0;transform:translate(calc(var(--fly-dir,1) * 125vw),-20vh) rotate(-3deg)}
  92.01% {opacity:0;transform:translate(0,0) rotate(0deg)}
  97%    {opacity:1;transform:translate(0,0) rotate(0deg)}
  100%   {opacity:1;transform:translate(0,0) rotate(0deg)}
}

/* C — a tall, slow loop before it goes */
@keyframes fly-c{
  0%     {opacity:1;transform:translate(0vw,0vh) rotate(0deg)}
  8%     {opacity:1;transform:translate(1vw,.5vh) rotate(6deg)}
  16%    {opacity:1;transform:translate(-.5vw,-1vh) rotate(-5deg)}
  25%    {opacity:1;transform:translate(.4vw,1.1vh) rotate(4deg)}
  31%    {opacity:1;transform:translate(-.8vw,-.4vh) rotate(-3deg)}
  36%    {opacity:1;transform:translate(0vw,0vh) rotate(0deg)}
  40%    {opacity:1;transform:translate(calc(var(--fly-dir,1) * 5vw),-4vh) rotate(-10deg)}
  43%    {opacity:1;transform:translate(calc(var(--fly-dir,1) * 11vw),-9vh) rotate(-18deg)}
  46%    {opacity:1;transform:translate(calc(var(--fly-dir,1) * 9vw),-15vh) rotate(-24deg)}
  49%    {opacity:1;transform:translate(calc(var(--fly-dir,1) * 3vw),-17vh) rotate(-14deg)}
  52%    {opacity:1;transform:translate(calc(var(--fly-dir,1) * -1vw),-12vh) rotate(16deg)}
  55%    {opacity:1;transform:translate(calc(var(--fly-dir,1) * 4vw),-6vh) rotate(10deg)}
  58%    {opacity:1;transform:translate(calc(var(--fly-dir,1) * 17vw),-11vh) rotate(-13deg)}
  61%    {opacity:1;transform:translate(calc(var(--fly-dir,1) * 45vw),-15vh) rotate(-8deg)}
  64%    {opacity:1;transform:translate(calc(var(--fly-dir,1) * 90vw),-18vh) rotate(-5deg)}
  66%    {opacity:1;transform:translate(calc(var(--fly-dir,1) * 125vw),-22vh) rotate(-4deg)}
  67%    {opacity:0;transform:translate(calc(var(--fly-dir,1) * 125vw),-22vh) rotate(-4deg)}
  92%    {opacity:0;transform:translate(calc(var(--fly-dir,1) * 125vw),-22vh) rotate(-4deg)}
  92.01% {opacity:0;transform:translate(0,0) rotate(0deg)}
  97%    {opacity:1;transform:translate(0,0) rotate(0deg)}
  100%   {opacity:1;transform:translate(0,0) rotate(0deg)}
}

/* Reduced motion: it belongs on the page, it just holds still on its spot. */
@media (prefers-reduced-motion:reduce){
  .fly.is-flying{animation:none;opacity:1;transform:none}
}

/* ---- where each one rests, and which way it crosses ----------------------

   Placed by hand, page by page. Percentages are of the section named beside
   each one, so a spot holds its place at any screen width. --fly-dir:-1
   sends it the other way across the screen. */

/* home — on the working-out. Not yet placed by hand. */
.fly--board{left:76%;top:44%}
/* nova — section#pricing, above the free week */
/* Nova: top right of the hero, clear of the headline's measure and above
   the lede, so it reads as arriving over the gold rather than sitting on
   the copy. Facing inward — it flies off toward the page, not off it. */
/* ---------- the tree in the Nova hero ----------
   Sized by HEIGHT, not width: what has to be right is that the crown clears
   the nav and the foot meets the bottom of the hero, and both of those are
   vertical. The hero already clips, so the trunk runs off the bottom edge
   and the tree reads as standing behind the section rather than floating in
   it. It sits to the right of the headline's measure and never crosses it. */
.hero-tree{
  position:absolute;z-index:2;pointer-events:none;
  right:3%;bottom:0;height:94%;width:auto;
  display:block;
}
.hero-tree img{
  height:100%;width:auto;display:block;
  filter:drop-shadow(0 18px 34px rgba(84,58,4,.20));
}
/* under 900px the headline runs full width and there is no room beside it */
@media (max-width:900px){ .hero-tree{display:none} }

/* On the LEFT EDGE of the crown, not buried in it. Measured: the tree runs
   x 1067-1416 and the butterfly's rest point is its box centre, so 77%/14%
   lands it half over blossom and half over open gold — the only place in
   the crown where a yellow butterfly still has a silhouette. */
.fly--nova-hero{left:83%;top:16%;--fly-dir:-1}
/* Top right of this hero is the palest part of the ramp, and the butterfly
   is Jen's brand yellow — about 1.3:1 against it, which is the same reason
   the gold mark vanished on the gold seal. The shadow is what the cream
   robot uses against the same ground: it does not tint the butterfly, it
   just puts air between it and the gold. */
.fly--nova-hero .fly-wings{
  filter:drop-shadow(0 5px 10px rgba(84,58,4,.30))
         drop-shadow(0 14px 30px rgba(84,58,4,.22));
}
/* enterprise — section.section-tight, beside the human problem */
.fly--principle{left:38%;top:70.7%}
/* the yellow butterfly — resting on the little robot's head in the hero,
   then away across the whole width of it */
.fly--symbol{left:86.1%;top:55.8%;--fly-dir:-1}
/* look for the butterfly — section.section, over the trust mark */
.fly--seal{left:45.6%;top:21.4%}
/* the council application — section.section, above the form */
.fly--form{left:25.2%;top:11.4%}
/* our team — section#leadership */
.fly--globe{left:28.4%;top:18.5%}
/* jen's story — the founder hero, over her shoulder */
.fly--founder{left:65.5%;top:70.3%;--fly-dir:-1}
/* handing hope — the hero, out to the right */
.fly--plant{left:86.1%;top:50.8%}
/* investors — section#building, high up */
.fly--gate{left:66%;top:2.5%;--fly-dir:-1}
/* sign up — section.signup */
.fly--promise{left:59.2%;top:34.4%;--fly-dir:-1}

/* ============================================================
   RESPONSIVE CORRECTIONS — must stay last in this file.

   A media query adds no specificity. Several desktop rules further up
   (.problem-split, .section-gold.scrimmed .split, .center-block
   .footnote-row, .council-center .council-footnotes, .split-wide-copy)
   match at the same weight as the collapse rules and are declared after
   them, so they won at every width and these pages never went to one
   column. Anything that has to beat a later desktop rule belongs here,
   at the bottom, not in the media block next to the component.
   ============================================================ */
@media (max-width:860px){
  .split,
  .problem-split,
  .split.split-wide-copy,
  .section-gold.scrimmed .split{grid-template-columns:1fr;gap:34px}
  /* the photograph belongs under the heading it illustrates, not above it */
  .problem-split .split-media{order:0;aspect-ratio:auto}
  .split-wide-copy .measure{max-width:none}
  .after-statement{white-space:normal;max-width:26ch}
  .pflip,.principle-card{max-width:100%}
}
@media (max-width:680px){
  .footnote-row,
  .center-block .footnote-row,
  .council-center .council-footnotes{
    grid-template-columns:1fr;gap:26px;
    width:auto;max-width:100%;
  }
}

.card-label,.flip-back .card-label{margin:0 0 12px}

/* form errors: visible, not decorative */
.form-error{
  font-family:var(--ui);font-size:.9rem;line-height:1.5;
  color:#A3341C;margin:14px 0 0;
}
.modal .form-error,.section-dark .form-error{color:#FFB4A0}

/* ---------- the thank-you ----------
   What a person sees after they have given us something. Quiet, centred,
   and signed — the same on every form. */
.thanks{text-align:center;padding:10px 0 4px;max-width:44ch;margin:0 auto}
.thanks-mark{color:var(--amber);display:block;margin:0 auto 18px}
.thanks-title{
  font-family:var(--heading);font-weight:600;
  font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.15;
  color:var(--text-primary);margin:0 0 10px;
}
.thanks-line{
  font-family:var(--heading);font-style:italic;
  font-size:1.15rem;line-height:1.4;
  color:var(--text-primary);margin:0 0 16px;
}
.thanks-body{
  font-size:1rem;line-height:1.65;color:var(--text-secondary);margin:0 0 26px;
}
.thanks-sign{
  font-family:var(--heading);font-style:italic;font-size:1.05rem;line-height:1.5;
  color:var(--text-secondary);margin:0;
  padding-top:20px;border-top:1px solid var(--hairline);
}
.thanks-sign span{font-style:normal;color:var(--text-primary)}

/* /thank-you/ is where a form lands when JavaScript never ran. It has no
   hero, so it needs the clearance under the fixed nav that a hero would
   otherwise provide, and the note is the whole page rather than a panel
   inside one — so the title carries a little more weight here. */
.thanks-page{padding-top:clamp(150px,17vh,196px)}
.thanks-page .thanks-title{font-size:clamp(2rem,4.2vw,2.9rem)}
.section-dark .thanks-title,.section-deep .thanks-title,
.section-dark .thanks-line,.section-deep .thanks-line{color:var(--text-on-dark)}
.section-dark .thanks-body,.section-deep .thanks-body,
.section-dark .thanks-sign,.section-deep .thanks-sign{color:var(--text-muted-dark)}
.section-dark .thanks-sign span,.section-deep .thanks-sign span{color:var(--text-on-dark)}
.section-dark .thanks-sign,.section-deep .thanks-sign{border-top-color:var(--hairline-dark)}

/* ---------- one measure per page ----------
   Sections used to alternate between a 1100px and an 880px container, so the
   eyebrow and heading left edge stepped 110px inboard and back out again as
   the reader scrolled. Every section now uses the same container; where copy
   needs to be narrower, the measure goes on the copy block, not the container,
   so the left edge never moves. */
.prose,
.form-wrap,
.gate-compact{max-width:44rem}
.council-measure{max-width:52rem}
.big-statement{max-width:var(--statement-measure,30ch)}

@media (max-width:860px){
  .split.split-council{grid-template-columns:1fr;gap:30px}
  .split-council .council-globe{order:-1}
}

/* ---------- the trial ----------
   One card, one decision. The offer is the free week, not the price: a reader
   this far down the page is deciding whether to try Nova, not comparing tiers.
   Nothing is charged and no card is taken, so there is nothing to disclose
   before they have met her. */
.trial{
  position:relative;overflow:hidden;
  max-width:660px;margin:0 auto;
  /* the brand ramp, so the one thing we want a reader to do is the brightest
     thing on the page */
  background:linear-gradient(135deg,
    #D2A014 0%, #EBB028 28%, #F4CE55 55%, #FAE494 78%, #FFEEA8 100%);
  border:0;
  border-radius:22px;
  padding:clamp(40px,5.2vw,58px) clamp(28px,4vw,54px);
  text-align:center;
  box-shadow:0 3px 10px rgba(120,84,4,.14),0 30px 70px rgba(120,84,4,.26);
}
/* type on the ramp is charcoal, the only colour that holds from #D2A014
   (5.9:1) through to #FFEEA8 (12:1). White measures 1.2:1 at the pale end. */
.trial > *{position:relative;z-index:1}
.trial-eyebrow{
  font-family:var(--ui);font-size:.8rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:#4A3402;display:block;margin-bottom:16px;
}
.trial-figure{
  font-family:var(--heading);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(2.6rem,5.6vw,4rem);line-height:1;
  color:#241800;margin:0 0 14px;
}
.trial-line{
  font-family:var(--heading);font-style:italic;
  font-size:clamp(1.05rem,1.7vw,1.25rem);line-height:1.4;
  color:#3A2A05;margin:0 0 30px;
}
.trial-btn{
  width:100%;max-width:360px;font-size:1rem;padding:19px 32px;
  background:#241800;border-color:#241800;color:#FFEFB4;
  box-shadow:0 8px 26px rgba(36,24,0,.34);
}
.trial-btn:hover{background:#000;border-color:#000;color:#FFF3C4}
.trial-points{
  /* the list is centred as a block AND each line is centred within it, so it
     sits square under the button instead of hanging to one side */
  list-style:none;margin:34px auto 0;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:11px;
  max-width:46ch;text-align:center;
}
.trial-points li{
  font-size:1.02rem;line-height:1.55;color:#3A2A05;
}
.trial-points li::before{
  content:'';display:inline-block;vertical-align:middle;
  width:6px;height:6px;border-radius:50%;background:#241800;
  margin-right:11px;position:relative;top:-2px;
}
.trial-after{
  margin:32px 0 0;padding-top:24px;border-top:1px solid rgba(36,24,0,.22);
  font-family:var(--heading);font-style:italic;
  font-size:1.05rem;line-height:1.5;color:#3A2A05;
}

/* the council block sits with the same air as the founder block above it */
.split.split-council{grid-template-columns:.9fr 1.1fr;gap:80px}
.council-globe img{width:150%;max-width:150%;margin:0 -34% 0 -16%}
@media (max-width:860px){
  .split.split-council{gap:30px}
  .council-globe img{width:114%;max-width:114%;margin:0 -7%}
}

/* ---------- the plant that grows through two sections ----------
   The hero and the section under it are wrapped in .grow, which is the only
   positioned ancestor, so one tall cut-out can be placed across the boundary
   between them: head over the gold, stem down the cream, earth at the foot.
   It stops short of the dark section below.

   Purely decorative — aria-hidden, pointer-events off, and it sits behind the
   copy so nothing it crosses becomes harder to read. */
.grow{
  position:relative;
  /* Must stay visible: any other value makes this the sticky containing block
     and the head never parks. The plant's bleed past the right edge is caught
     by overflow-x:clip on the root, which is not a scroll container and so
     leaves sticky resolving against the viewport. */
  overflow:visible;
}
.grow-plant{
  /* Held at the right margin and bled off the edge. Measured at 1393px the
     full-size plant was 40% of the viewport and overlapped the headline by
     200px — a co-star to the page's thesis rather than a feature. */
  position:absolute;z-index:2;pointer-events:none;
  right:clamp(-96px,-2.8vw,-14px);
  /* a little higher into the hero than before */
  top:clamp(190px,29vh,320px);
  width:min(37vw,520px);
  display:block;

  /* Planted at the very BOTTOM of the page. The wrapper now includes the
     footer, so the stem runs the whole way down — across the charcoal
     section and across the footer — before it meets the earth on the last
     line of the page. Flush rather than buried: anything below would add
     page height. No new artwork was needed; the stem is drawn in CSS and
     simply grows to whatever distance it has to cover. */
  bottom:0;
}
/* The plant is three pieces so the head can hold still while the earth stays
   rooted. The head is sticky — it parks in the viewport while the block
   scrolls past it — the base is pinned to the foot of the block, and the stem
   between them is drawn in CSS and resized every frame to bridge the two.
   One rigid image could only ever do one of those two things. */
/* Driven by site.js rather than sticky: sticky is all-or-nothing (parked,
   then released at full speed), and what is wanted here is a constant slow
   crawl — the head moves at roughly 15% of the page's rate the whole way
   down, then travels normally once it has reached the earth. */
.plant-top{position:relative;display:block;z-index:2;will-change:transform}
.plant-top img,.plant-base img{width:100%;height:auto;display:block;
  /* one soft warm shadow only — stacked shadows on a keyed edge read as a
     rim, which is the thing we just spent the effort removing */
  filter:drop-shadow(0 18px 34px rgba(84,58,4,.22));
}
/* the mound sits on the footer's charcoal, where any shadow would show as a
   halo rather than depth */
.plant-base img{filter:none}
/* the mound straddles the top of the footer: the footer paints over its foot */
.plant-base{position:absolute;left:0;right:0;bottom:0;display:block;z-index:2}
/* the butterfly rides in front of everything and rises off the flower head:
   it drifts faster than the plant but still far slower than the page, so it
   reads as lifting away rather than as a sticker */
.plant-fly{
  position:absolute;z-index:4;display:block;
  left:38%;top:-2%;width:20%;
  will-change:transform;
}
/* the wings beat: a slow squeeze on the X axis reads as a flap on a
   three-quarter view, without needing a second frame of artwork */
.plant-fly img{
  width:100%;height:auto;display:block;
  transform-origin:52% 58%;
  animation:wingbeat 2.6s ease-in-out infinite;
}
@keyframes wingbeat{
  0%,100%{transform:scaleX(1) rotate(0deg)}
  22%{transform:scaleX(.82) rotate(-2.5deg)}
  44%{transform:scaleX(1.02) rotate(1.5deg)}
  66%{transform:scaleX(.88) rotate(-1deg)}
}
@media (prefers-reduced-motion:reduce){
  .plant-fly img{animation:none}
}
.plant-stem{
  position:absolute;z-index:1;display:block;
  left:51.46%;width:3.73%;
  /* sampled from the stem either side of the cut so the join is invisible */
  background:linear-gradient(90deg,#6B551E 0%,#93762F 34%,#A98C3C 56%,#7C6425 100%);
  border-radius:2px;
  filter:drop-shadow(0 3px 4px rgba(84,58,4,.20));
}
/* Stacking, in order: section grounds, then the plant, then the copy.
   The two sections stay position:relative with z-index auto so they do NOT
   open a stacking context — otherwise the plant could only ever sit behind
   or in front of a whole section, never between its ground and its words. */
.grow main > header,
.grow main > section{position:relative}
.grow main > header > .container,
.grow main > section > .container{position:relative;z-index:3}
.grow-copy > div{max-width:64%}
.grow .home-hero .container > *{max-width:78%}

@media (max-width:1200px){
  .grow-copy > div{max-width:72%}
  .grow .home-hero .container > *{max-width:84%}
}
/* below this the plant would either cover the copy or be a sliver, so it goes */
@media (max-width:900px){
  .grow-plant{display:none}
  .grow-copy > div,
  .grow .home-hero .container > *{max-width:none}
}

/* ---------- sign-up (design reference for the app team) ----------
   Two panels: the promise on the gold, the form on white. Google first,
   because most people will take it; the terms are one line of small print
   under the button, as a link, not a wall of copy above the fields. */
.signup-page{background:var(--bg-primary)}
.signup{min-height:100vh;display:flex;align-items:stretch}
.signup-grid{
  display:grid;grid-template-columns:.86fr 1fr;width:100%;
}
.signup-aside{
  position:relative;overflow:hidden;
  padding:clamp(44px,6vw,72px);
  display:flex;flex-direction:column;justify-content:center;
  /* Only the darker half of the ramp. The full ramp runs pale by the middle
     of this panel, and everything on it is white — the copy was washing out
     and the wordmark had nothing to stand against. */
  background:linear-gradient(150deg,
    #C68F10 0%, #D8A319 34%, #E5B426 68%, #EFC134 100%);
}
.signup-mark{
  font-family:var(--heading);font-weight:600;letter-spacing:-.015em;
  font-size:1.9rem;line-height:1;color:#fff;text-decoration:none;
  margin-bottom:auto;
}
/* brighter than the nav's cream, because this panel is a deeper gold */
.signup-mark span{color:#FFD24D}
.signup-mark{font-size:2.1rem}
.signup-promise{
  font-family:var(--heading);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(2.1rem,3.7vw,2.9rem);line-height:1.08;
  color:#fff;margin:48px 0 12px;max-width:18ch;
}
/* the second half of the promise sits on the same line, a shade quieter */
/* italic for the shift in voice, but white — charcoal on this gold was the
   hardest thing on the panel to read */
.signup-promise em{font-style:italic;font-weight:500;color:#fff}
.signup-sub{
  font-family:var(--heading);font-style:italic;
  font-size:1.2rem;line-height:1.45;color:#fff;margin:0 0 30px;
}
.signup-points{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:38ch}
.signup-points li{
  position:relative;padding-left:24px;
  font-size:1rem;line-height:1.55;color:#fff;
}
.signup-points li::before{
  content:'';position:absolute;left:2px;top:.62em;
  width:6px;height:6px;border-radius:50%;background:#fff;
}
.signup-quote{
  margin:auto 0 0;padding-top:30px;border-top:1px solid rgba(255,255,255,.34);
  font-family:var(--heading);font-style:italic;
  font-size:1.16rem;line-height:1.55;color:#fff;max-width:32ch;
}

.signup-panel{
  padding:clamp(44px,6vw,72px);
  display:flex;flex-direction:column;justify-content:center;
  max-width:520px;margin:0 auto;width:100%;
}
.signup-title{
  font-size:clamp(2rem,3.4vw,2.6rem);line-height:1.1;margin:0 0 8px;
}
.signup-lede{
  font-family:var(--heading);font-style:italic;
  font-size:1.1rem;line-height:1.4;color:var(--text-secondary);margin:0 0 30px;
}
.signup-google{
  display:flex;align-items:center;justify-content:center;gap:11px;
  width:100%;padding:15px 20px;
  font-family:var(--ui);font-size:.95rem;font-weight:600;
  color:var(--text-primary);background:#fff;
  border:1.5px solid rgba(0,0,0,.16);border-radius:100px;cursor:pointer;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.signup-google:hover{border-color:rgba(0,0,0,.34);box-shadow:0 6px 18px rgba(30,30,42,.10)}
.signup-or{
  display:flex;align-items:center;gap:16px;margin:24px 0;
  color:var(--text-muted);font-family:var(--ui);font-size:.85rem;
}
.signup-or::before,.signup-or::after{content:'';flex:1;height:1px;background:var(--hairline)}
.signup-form .field{margin-bottom:18px}
.signup-submit{width:100%;padding:17px 32px;font-size:.98rem;margin-top:6px}
.signup-terms{
  font-family:var(--ui);font-size:.84rem;line-height:1.6;
  color:var(--text-muted);margin:16px 0 0;text-align:center;
}
.signup-terms a{color:var(--text-secondary)}
.signup-signin{
  font-family:var(--ui);font-size:.92rem;color:var(--text-secondary);
  margin:30px 0 0;text-align:center;
}
@media (max-width:900px){
  .signup-grid{grid-template-columns:1fr}
  .signup-aside{order:2;padding:44px 28px}
  .signup-aside .signup-mark{display:none}
  .signup-quote{margin-top:30px}
  .signup{min-height:0}
}

@media (max-width:900px){
  .grow-plant{display:none}
}

/* the footer covers the tail as well, in case the dark section alone is short */
.site-footer{position:relative}
.footer-inner{position:relative;z-index:3}

/* ---------- the access card on the gold ----------
   White card on the ramp, like the ecosystem cards and the Nova testimonials.
   The dark panel read as a hole punched in the section. Its type goes back to
   the charcoal, because the section itself paints its copy white. */
.section-gold .gate-compact{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 2px 6px rgba(120,84,4,.10),0 22px 52px rgba(120,84,4,.18);
}
.section-gold .gate-compact h2{color:var(--text-primary)}
.section-gold .gate-compact h2 em{color:var(--amber)}
.section-gold .gate-compact p{color:var(--text-secondary)}
.section-gold .gate-compact .eyebrow{color:#B07E06;opacity:1}
/* Aidan's call: the brand amber button, as used everywhere else on the site.
   Given a soft amber glow so it still lifts off the white card. */
.section-gold .gate-compact .btn-amber{
  background:var(--amber);border-color:var(--amber);color:#fff;
  box-shadow:0 8px 24px rgba(235,176,40,.42);
}
.section-gold .gate-compact .btn-amber:hover{
  background:var(--amber-hover);border-color:var(--amber-hover);
  box-shadow:0 10px 30px rgba(235,176,40,.55);
}

/* ---------- one nav at every width ----------
   The header is the wordmark, Try Nova, and the menu. Everything else lives
   in the drop-down. The row of text links needed a dark scrim behind it to
   stay legible on the gold heroes, and that band was the thing spoiling the
   top of every page — removing the links removes the need for it. */
.navlinks a:not(.nav-cta){display:none}
/* the menu button leads and the CTA closes the row; the pair are pushed to
   the right edge together. DOM order matches, so tabbing follows the eye. */
.navlinks{gap:14px;margin-left:0}
.hamburger{margin-left:auto}
.topnav{gap:14px}
.hamburger{display:flex}

/* White over the hero at every page, charcoal once the bar turns light on
   scroll. The button sits at the pale end of the gold ramp, so the white bars
   carry a soft shadow — without it they measure about 1.2:1 on #FFEEA8 and
   effectively disappear. */
body.amber-hero .topnav:not(.scrolled) .hamburger span,
body.amber-hero .topnav:not(.scrolled) .hamburger span::before,
body.amber-hero .topnav:not(.scrolled) .hamburger span::after{
  background:#fff;
}
/* once the bar turns light the bars go charcoal and lose the shadow */
.topnav.scrolled .hamburger span,
.topnav.scrolled .hamburger span::before,
.topnav.scrolled .hamburger span::after{
  background:var(--text-primary);box-shadow:none;
}
@media (max-width:900px){
  .navlinks a.nav-cta{padding:11px 20px;font-size:.8rem}
}

/* ---------- Nova: two sections that were the same shape twice ----------
   Both were an eyebrow, a big left-aligned heading, a bullet list and a
   closing line, on the same cream, using barely half the width. Reading them
   in sequence felt like one section repeating. They now differ in ground,
   alignment and structure, so the page has a rhythm through them. */

/* the invitation: a held, quiet space rather than a list on a page */
/* ---------- the legal pages ----------
   Placeholders with a real structure. The notice is deliberately loud: these
   must not be mistaken for a drafted policy. */
.legal-pending{
  background:var(--bg-accent);border:1px solid rgba(235,176,40,.4);
  border-left:3px solid var(--amber);border-radius:0 12px 12px 0;
  padding:22px 26px;margin:0 0 44px;max-width:60rem;
}
.legal-pending p{font-size:.95rem;line-height:1.65;color:var(--text-secondary);margin:0 0 10px}
.legal-pending p:last-child{margin-bottom:0}
.legal-pending strong{color:var(--text-primary)}
.legal-body h2{
  font-size:clamp(1.2rem,1.9vw,1.45rem);margin:38px 0 8px;
}
.legal-body h2:first-child{margin-top:0}
.legal-body p{color:var(--text-secondary)}

/* The sign-up consent row. The tick target is a real checkbox rather than a
   styled div, so it works without JavaScript and the browser enforces the
   `required` on it. */
.signup-consent{
  display:flex;align-items:flex-start;gap:11px;
  margin:6px 0 22px;
}
.signup-consent input[type=checkbox]{
  flex:0 0 auto;width:18px;height:18px;margin:2px 0 0;
  accent-color:var(--amber);cursor:pointer;
}
.signup-consent label{
  font-family:var(--ui);font-size:.88rem;line-height:1.5;
  color:var(--text-secondary);cursor:pointer;
}
.signup-consent a{color:var(--text-primary);text-underline-offset:3px}
.signup-consent input:focus-visible{outline:2px solid var(--amber-hover);outline-offset:2px}

/* The trial card on the ramp. The card exists to lift the offer off a cream
   page; on the gold it has to invert or it is a gold card on gold. Same white
   treatment the access gate and the testimonials already use. */
.trial-on-gold{
  background:#fff;
  box-shadow:0 3px 10px rgba(120,84,4,.10),0 26px 60px rgba(120,84,4,.20);
}
.trial-on-gold .trial-eyebrow{color:var(--amber-hover)}
.trial-on-gold .trial-figure,
.trial-on-gold .trial-line,
.trial-on-gold .trial-points li,
.trial-on-gold .trial-after{color:var(--text-primary)}

/* "No credit card" is the unusual part of the offer, so it is the second
   biggest thing on the card rather than a clause inside a sentence. */
/* Scoped to the card, not bare: `.section-gold p` paints paragraphs white for
   the gold ground and outranks a single class, so unscoped this was white text
   on a white card. */
.trial-on-gold .trial-nocard{
  font-family:var(--heading);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.05;
  color:var(--amber-hover);margin:0 0 12px;
}
.trial-on-gold .trial-line{
  font-size:clamp(.98rem,1.4vw,1.08rem);margin-bottom:26px;color:var(--text-muted);
}

/* the button carries the brand ramp on the white card, so it is the brightest
   thing in the block instead of the darkest */
.trial-on-gold .trial-btn{
  background:linear-gradient(135deg,#D2A014 0%,#EBB028 30%,#F4CE55 62%,#FAE494 100%);
  border-color:transparent;color:#3A2601;
  box-shadow:0 4px 14px rgba(160,112,10,.30),0 16px 40px rgba(160,112,10,.34);
  font-weight:600;
}
.trial-on-gold .trial-btn:hover{
  background:linear-gradient(135deg,#C79614 0%,#E5A81F 30%,#F0C544 62%,#F7DC82 100%);
  border-color:transparent;color:#2E1E01;
  box-shadow:0 6px 18px rgba(160,112,10,.38),0 22px 50px rgba(160,112,10,.42);
}
.trial-on-gold .trial-points li{color:var(--text-secondary)}
.trial-on-gold .trial-after{color:var(--text-muted)}

/* the questions and the closing links sit straight on the ramp, so their
   hairlines need to be darker than the cream ones or they disappear */
.nova-close .faq-item,
.nova-close .faq details,
.nova-close .footnote-row{border-color:rgba(74,47,2,.22)}
.nova-close .footnote-row{border-top-color:rgba(74,47,2,.22)}

/* The two closing links were white on the pale end of the ramp — about
   1.2:1, the least readable thing on the page, and left-aligned inside a
   44rem measure so they hugged the left edge of a block that is centred all
   the way down. Deep espresso measures 5.6:1 against the darkest point of
   this ground and 8:1 against the lightest, and the row now sits on the same
   centre line as everything above it. */
.nova-close .footnote-row{
  max-width:min(100%,54rem);margin-left:auto;margin-right:auto;
  text-align:center;
}
.nova-close .footnote-row h3{color:#4A2F02}
.nova-close .footnote-row p{color:#5C3F09}
.nova-close .footnote-row .links{justify-content:center}
.nova-close .footnote-row .textlink{color:#4A2F02;border-bottom-color:rgba(74,47,2,.55)}
.nova-close .footnote-row .textlink:hover{color:#2E1E01;border-bottom-color:#2E1E01}

/* ---------- the questions, folded ----------
   One line that opens, rather than five rows standing open at the end of the
   page. The summary is a pill so it reads as something to press; the chevron
   turns over when it opens. */
.faq-shell{max-width:720px;margin:52px auto 0;text-align:center}
.faq-shell > summary{
  font-family:var(--heading);font-size:1.3rem;font-weight:600;letter-spacing:-.01em;
  color:var(--text-primary);cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:13px;
  padding:11px 26px;border-radius:999px;
  border:1px solid var(--hairline);background:transparent;
  transition:color .15s var(--ease),border-color .15s var(--ease),background .15s var(--ease);
}
.faq-shell > summary::-webkit-details-marker{display:none}
.faq-shell > summary::after{
  content:'';width:8px;height:8px;flex-shrink:0;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .22s var(--ease);
}
.faq-shell[open] > summary::after{transform:translateY(2px) rotate(-135deg)}
.faq-shell > summary:hover{border-color:currentColor}
.faq-shell > summary:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
/* the list inside carries its own top margin from .faq — it does not need
   the full section gap a second time */
.faq-shell .faq{margin-top:24px;text-align:left}

/* on the gold, the same espresso as the row below it */
.nova-close .faq-shell > summary{
  color:#4A2F02;border-color:rgba(74,47,2,.34);background:rgba(255,255,255,.32);
}
.nova-close .faq-shell > summary:hover{
  background:rgba(255,255,255,.55);border-color:rgba(74,47,2,.55);
}

/* and the questions themselves, once it is open. --text-secondary measures
   4.2:1 against the darkest gold under this block, and the amber +/- marker
   is the ground's own colour, so it disappears entirely. */
.nova-close .faq summary{color:#4A2F02}
.nova-close .faq summary:hover{color:#8A5F02}
.nova-close .faq summary::after{color:#8A5F02}
.nova-close .faq details p{color:#5C3F09}

/* ---------- Nova: the invitation ----------
   It was a centred headline over a white card of bullet points. Bullets are
   for parallel items of equal weight; these are five different people's
   moments, and bulleting them made a spec sheet of something intimate. The
   card had no job either — white on cream, almost invisible.

   Now: the question holds the left, the moments hang off a single amber
   thread on the right. The thread is the design, and it comes out of the
   content rather than being applied to it. */
/* No wash behind this. Every other light section on the site is the plain
   page ground, and a gold glow here made Nova the one page that treated its
   own background as a surface to decorate. */
.nova-invite{position:relative}

.invite-split{
  display:grid;grid-template-columns:1fr 1.06fr;
  gap:clamp(38px,5.5vw,84px);align-items:start;
}
.invite-ask h2{max-width:16ch;margin:0}
.invite-ask .line-emphasis{margin-top:28px;max-width:22ch}

.maybe-thread{
  list-style:none;margin:8px 0 0;padding:0 0 0 clamp(24px,2.4vw,34px);
  position:relative;display:grid;gap:clamp(20px,2.1vw,28px);
}
/* one continuous line, faded at both ends so it reads as a thread of thought
   rather than a border */
.maybe-thread::before{
  content:'';position:absolute;left:0;top:2px;bottom:2px;width:2px;
  background:linear-gradient(180deg,
    rgba(235,176,40,0) 0%, var(--amber) 12%, var(--amber) 88%, rgba(235,176,40,0) 100%);
}
.maybe-thread li{
  font-family:var(--heading);font-weight:400;
  font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.5;
  color:var(--text-secondary);text-wrap:pretty;
}

/* ---------- Nova: different by design ----------
   The five lines build to the last one, so they run down a single column.
   Across two they were read in the wrong order and the long final line hung
   alone across both. The repeated "More" is set in amber so the list reads as
   a ladder — the pattern was already in the writing. */
/* the page ground, like every other light section on the site */
/* ---------- becoming: the five, one at a time ----------
   DEFAULT STATE IS THE READABLE ONE. Everything below the `is-live` block is
   an ordinary list with a button under it, because that is what a reader gets
   if become.js never runs or they have asked for reduced motion. The live
   stage is added on top of it, never assumed. */
/* the whole block sits on the page's centre line, the same one the trial
   card below is centred on */
.become-inner{max-width:62rem;margin:0 auto;text-align:center}
/* ONE TYPE SPEC FOR THE WHOLE SEQUENCE.
   The opener, the five and the closing line are one continuous statement
   that happens to arrive in pieces — so they are set identically: same face,
   size, weight, tracking and leading. Anything that changes between them
   registers as motion, and scrolled at speed a shifting size reads as the
   page rearranging itself rather than as one thought being spoken.

   The size is bound by the longest line in the set — "With Nova, it isn't
   like any other experience." — because that is the one that decides whether
   the sequence holds its shape or starts wrapping. */
.become{
  --become-type:clamp(1.8rem,3.9vw,3.1rem);
  --become-lead:1.14;
  --become-track:-.015em;
}
.become-head{
  max-width:none;
  font-family:var(--heading);font-weight:500;
  font-size:var(--become-type);
  line-height:var(--become-lead);letter-spacing:var(--become-track);
}
.become-head .plain{font-style:normal;color:inherit}

.become-lines{
  list-style:none;margin:34px auto 0;padding:0;
  display:grid;gap:clamp(9px,1.1vw,16px);max-width:min(100%,46rem);
}
.become-lines li{
  font-family:var(--heading);font-weight:500;
  font-size:var(--become-type);
  line-height:var(--become-lead);letter-spacing:var(--become-track);
  color:var(--text-primary);text-wrap:pretty;
}
.become-lines li span{color:var(--amber);font-style:italic}

/* The block argues from the left and then RESOLVES TO CENTRE: the ask, the
   thread and the butterfly all sit on the page's centre line, which is the
   line the trial card below is centred on. So the butterfly comes straight
   down into the middle of "Seven days free" rather than pointing at the
   margin beside it. The change of alignment is the handover. */
.become-end{margin-top:clamp(30px,4vw,46px);max-width:46rem;
  margin-left:auto;margin-right:auto;text-align:center}
/* On the live stage the ask runs wider than a reading measure and must not be
   boxed by one: a nowrap line inside a narrower block overflows to the RIGHT
   only, so the text ended up 95px off the centre line the butterfly drops on.
   It centres against the section instead. */
.become.is-live .become-end{max-width:none}
/* Same weight as the five it follows — it is the last thing said, not a
   footnote under them. "you" takes the amber italic that "More" carried, so
   the emphasis moves off the promise and onto the person. */
.become-ask{
  font-family:var(--heading);font-weight:500;letter-spacing:-.015em;
  /* The <br> sets the two centred lines; `balance` re-broke them into three
     and pushed the block off the top of the stage. */
  font-size:var(--become-type);
  line-height:var(--become-lead);letter-spacing:var(--become-track);
  color:var(--text-primary);margin:0;
  text-wrap:nowrap;
}
/* below this the first line genuinely cannot hold, so it is allowed to break */
@media (max-width:1180px){ .become-ask{text-wrap:pretty} }
.become-ask span{color:var(--amber);font-style:italic}
/* The handover thread. Left-aligned under the ask rather than centred like
   the home page's, because this whole block is set to the left. It is longer
   than the doors one: it has to still be visible when the block releases, or
   it stops being a line the eye can follow across the section boundary. */
.become-thread{margin:30px auto 0;height:186px}
/* The pinned stage supplies its own space, so the section's bottom padding
   only opens a gap between the thread's tip and the gold it is pointing at —
   which is the one place on this page a gap actively breaks the idea. */
.nova-more{padding-bottom:0}

.become-thread .doors-thread-line{
  background:linear-gradient(180deg,var(--amber) 0%,rgba(235,176,40,.18) 100%);
}

/* ---------- the live stage ----------
   The block is taller than the screen; the stage inside it sticks. One screen
   of space, however many lines. */
.become.is-live{position:relative}
.become.is-live .become-inner{
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  max-width:none;
}
/* the lines share one spot, so the eye never has to travel to find the next */
/* NOT `margin:auto` here. This is a column-flex item whose children are all
   absolutely positioned, so auto side margins have no in-flow content to
   push against and collapse the box to zero width — the lines then wrap
   inside nothing. It stretches, and the centring is done by text-align. */
.become.is-live .become-lines{
  position:relative;display:block;
  margin:clamp(26px,4vh,52px) 0 0;width:100%;max-width:none;
  min-height:3.2em;
}
.become.is-live .become-lines li{
  position:absolute;left:0;right:0;top:0;margin:0;
  opacity:0;transform:translateY(26px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  will-change:opacity,transform;
}
.become.is-live .become-lines li.on{opacity:1;transform:none}
/* one that has already been has gone UP, not merely out */
.become.is-live .become-lines li.was{opacity:0;transform:translateY(-26px)}
/* once the five are done their block gives its space back, so the closing
   ask is not stranded under an empty gap */
.become.is-live .become-lines{
  transition:min-height .55s var(--ease),margin-top .55s var(--ease);
}
.become.is-live.is-done .become-lines{min-height:0;margin-top:0}

/* The opener holds the screen alone for its own step and then leaves — BEFORE
   the first "Be more" arrives, not after the last one. So while the five
   cycle, the only thing on the screen is what you are going to be more of.
   It gives its space back as it goes, or everything after it centres against
   a block that is no longer visible and rides high. */
.become.is-live .become-open{
  max-height:0;margin-bottom:0;overflow:hidden;
  opacity:0;transform:translateY(-20px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),
             max-height .55s var(--ease),margin-bottom .55s var(--ease);
}
.become.is-live.is-opening .become-open{
  max-height:44vh;margin-bottom:0;opacity:1;transform:none;
}

.become.is-live .become-end{
  opacity:0;transform:translateY(22px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  margin-top:clamp(26px,4vh,48px);
}
.become.is-live .become-end.on{opacity:1;transform:none}

/* On a short or narrow window the pinned stage is not worth the trap, and
   become.js does not switch it on — this only tidies the static list. */

/* ---------- the research section ----------
   Back on the page cream with the argument drawn beside it. The diagram
   carries no figures: the citations behind this copy are still outstanding,
   and a chart with invented numbers would be fabricated research, not design.
   What it shows is the shape of the claim — condition, outcomes, result. */
.research-section{background:var(--bg-primary)}
.split.research-split{grid-template-columns:1fr .82fr;gap:64px;align-items:center}
.research-split .measure{max-width:52ch}

.research-chain{
  margin:0;align-self:center;
  display:flex;flex-direction:column;align-items:center;
  gap:0;padding:34px 30px 30px;
  background:#fff;
  border:1px solid var(--hairline);
  border-radius:18px;
  box-shadow:0 2px 6px rgba(30,30,42,.04),0 20px 46px rgba(30,30,42,.06);
}
.research-chain-cap{
  font-family:var(--ui);font-size:.72rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:#B07E06;margin:0 0 22px;text-align:center;
}
.chain-node{text-align:center;max-width:26ch}
.chain-label{
  font-family:var(--ui);font-size:.68rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-muted);display:block;margin-bottom:8px;
}
.chain-node p{
  font-family:var(--heading);font-size:1.18rem;line-height:1.35;
  color:var(--text-primary);margin:0;text-wrap:balance;
}
.chain-node.chain-end p em{font-style:italic;color:var(--amber)}
.chain-link{
  display:block;width:2px;height:26px;margin:16px 0;
  background:linear-gradient(180deg,rgba(235,176,40,.25),var(--amber));
  border-radius:2px;
}
.chain-fan{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.chain-pill{
  font-family:var(--ui);font-size:.84rem;font-weight:600;
  color:#4A3402;background:rgba(235,176,40,.16);
  border:1px solid rgba(235,176,40,.4);
  padding:7px 14px;border-radius:100px;white-space:nowrap;
}
@media (max-width:860px){
  .split.research-split{grid-template-columns:1fr;gap:34px}
  .research-chain{order:0;width:100%}
  .research-split .measure{max-width:none}
}

/* ---------- closing footnotes as a pair of cards ----------
   Two white cards on the gold rather than two columns of loose text. Equal
   columns with a real gap, and the pair runs wider than the heading above so
   the right-hand card sits further out than the old packed layout allowed. */
.center-block .footnote-cards,
.footnote-cards{
  grid-template-columns:1fr 1fr;max-width:none;
  gap:30px;
  /* centred, so the gap between the cards lands on the section's centre line
     — the same line the button above sits on */
  width:min(700px,100%);
  margin:52px auto 0;padding-top:0;border-top:0;
  text-align:center;
}
.footnote-cards > div{
  display:flex;flex-direction:column;align-items:center;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:28px 26px 26px;
  box-shadow:0 2px 6px rgba(120,84,4,.08),0 18px 44px rgba(120,84,4,.14);
}
.section-gold .footnote-cards h3,
.section-gold .footnote-cards h4{color:#B07E06}
.section-gold .footnote-cards p{color:var(--text-secondary)}
.section-gold .footnote-cards .textlink{
  color:var(--text-primary);border-bottom-color:rgba(235,176,40,.6);
}
.section-gold .footnote-cards .textlink:hover{color:#B07E06}
@media (max-width:760px){
  .footnote-cards{grid-template-columns:1fr;gap:18px;max-width:100%}
}

/* Content sits centred in the card rather than pushed to the floor. Both
   cards carry the same structure — one-line label, two-line paragraph, one
   link — so centring keeps the links level without leaving a dead gap under
   the shorter paragraph, which pinning to the bottom did. */
.footnote-cards > div{justify-content:center}
.footnote-cards .links{justify-content:center;width:100%;margin:18px 0 0}
.footnote-cards p:not(.links){margin-bottom:0}
.footnote-cards p{max-width:26ch;margin-left:auto;margin-right:auto}

/* ---------- team: each member on their own card ----------
   A soft gold card rather than the full ramp: eight cards at full strength
   would shout over the portraits, which are the point of the page. The
   photographs share one warm tonal treatment so the set reads as one shoot
   rather than eight sources. */
.team-grid{align-items:stretch}
.member{
  display:flex;flex-direction:column;
  background:linear-gradient(155deg,#FFF6DC 0%,#FDEBB4 62%,#FBE29A 100%);
  border:1px solid rgba(235,176,40,.42);
  border-radius:18px;
  padding:14px 14px 20px;
  box-shadow:0 2px 5px rgba(120,84,4,.07),0 16px 38px rgba(120,84,4,.10);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.member:hover{
  transform:translateY(-4px);
  border-color:rgba(235,176,40,.85);
  box-shadow:0 3px 8px rgba(120,84,4,.10),0 22px 48px rgba(120,84,4,.18);
}
.member .member-photo{
  border-radius:12px;margin-bottom:14px;
  filter:none;
  box-shadow:0 1px 3px rgba(60,40,2,.14);
}
.member h3,.member h4{color:var(--text-primary);margin-bottom:2px}
.member .role{color:#8A6304}
.member p{color:#4A3D24}
.member details summary{color:#6E5416}
.member details summary:hover{color:var(--text-primary)}
.member details p{color:#4A3D24}
.member-monogram{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(235,176,40,.4);
  color:#8A6304;
}
/* the two members still awaiting a photograph shouldn't look broken */
.member-monogram{box-shadow:none}

/* ---------- the travel rail ----------
   Sits under the line and does not move with it. The fill and the marker
   advance left to right in step with the pan, so the reader can see that the
   view is crossing the line rather than the line arriving from the right. */
.pan-rail{display:none}
/* no rail — a single large white arrow crosses the band instead */
.pan.is-panning .pan-rail{
  display:block;position:absolute;z-index:3;
  left:10vw;right:10vw;bottom:clamp(52px,8vh,92px);height:46px;
  pointer-events:none;
}
.pan-rail-track,.pan-rail-fill{display:none}
.pan-marker{
  position:absolute;top:0;left:calc(var(--p,0) * 100%);
  transform:translateX(-50%);
  color:#fff;line-height:0;
  filter:drop-shadow(0 2px 6px rgba(58,38,1,.34));
}
.pan-marker svg{display:block;width:88px;height:32px}
@media (max-width:860px){
  .pan.is-panning .pan-rail{left:8vw;right:8vw;bottom:44px}
}
@media (prefers-reduced-motion:reduce){
  .pan-rail{display:none!important}
}

/* ---------- the question above the doors ----------
   This is the line that hands the reader over to the six doors, so it carries
   more weight than a section label. Charcoal rather than amber: on the cream
   ground the brand amber measures 1.96:1, and this is a line meant to be read
   rather than glanced at. */
/* Size and tracking now come from .eyebrow like every other section opener.
   Only the colour is held: charcoal measures 5.9:1 or better everywhere on
   the ramp, where the white these sections would otherwise inherit falls to
   1.2:1 at the pale end. */
.doors-intro .eyebrow{
  color:var(--text-primary);
  margin-bottom:14px;
}

/* ---------- the invitation, then the handover to the doors ----------
   "Choose the door" sits on the gold, and the field then blends down into
   the page so the reader arrives at the doors rather than crossing an edge. */
.gold-field .doors-intro{
  max-width:60ch;margin:0 auto;text-align:center;
  padding:clamp(18px,2.5vh,36px) 28px clamp(10px,2vh,20px);
}
/* this is the last thing said on the gold, so it carries headline weight */
.gold-field .doors-invite-lead{
  color:#fff;
  font-size:clamp(3.4rem,8.4vw,7rem);line-height:.98;
}
.gold-field .doors-invite-tail{
  color:#56565F;
  font-size:clamp(1.6rem,3.2vw,2.6rem);line-height:1.15;
}
.gold-field .doors-invite{gap:8px;margin-top:0}
.gold-field .doors-thread-line{
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.15));
}
.gold-field .doors-thread-flier{color:#fff}
/* The gold gives out completely before the doors begin. Long enough that the
   eye never finds an edge, and eased through several stops — a two-stop fade
   over this distance bands visibly on a wide gradient. It ends on exactly the
   cream the section below is painted in, so there is nothing left to see. */
/* The gold-fade lived here: up to 520px of gradient easing the gold into the
   page. It was the only soft boundary on the site — every other section cuts
   — so it read as a different kind of edge rather than a gentler one, and it
   cost half a screen of height to do it. */
/* nothing may draw a line where the two meet */
.gold-field{border-bottom:0}
.doors-section{border-top:0;background:var(--bg-primary)}


/* ---------- the hand-worked formula on the hero ----------
   Chalk on black, screen-blended so the black falls away and only the strokes
   land on the gold. Sits to the right of the headline, low enough not to
   compete with it, and hidden where the copy would run over it. */
.hero-formula{
  position:absolute;z-index:1;pointer-events:none;
  /* An object on the page rather than a wash over it, so it keeps its own
     board and frame: no blend mode, a real shadow, and tipped a couple of
     degrees the way a board leans against a wall. */
  right:3%;top:50%;
  transform:translateY(-50%);
  width:min(37%,520px);height:auto;
  border-radius:6px;
  filter:drop-shadow(0 3px 6px rgba(60,40,2,.24)) drop-shadow(0 28px 54px rgba(60,40,2,.3));
  opacity:.96;
}
@media (max-width:1300px){.hero-formula{width:36%;right:1%}}
@media (max-width:1100px){.hero-formula{opacity:.85;right:-4%;width:46%}}
@media (max-width:860px){.hero-formula{display:none}}

/* ---------- the home hero's composition ----------
   Scoped with :has() rather than a new class, because the ONLY hero that
   should move is the one carrying the board — and Nova, Enterprise and
   Handing Hope all share .home-hero.amber-wash, so a change to the shared
   rule would silently shift four pages to fix one.

   The copy lifts, and the board comes in off the right margin so the two
   read as one composition instead of a column and a picture at opposite
   edges. The board is nudged DOWN off dead centre: the fixed nav covers the
   top of the hero, so true 50% sits high to the eye. */
.home-hero:has(.hero-formula){
  padding-top:clamp(128px,17vh,182px);
}
.home-hero:has(.hero-formula) .hero-formula{
  right:7%;
  /* Measured, not guessed: the hero runs 0-593 but the nav covers the top
     84px, so the optical middle is 338 rather than 297. The copy block
     centres on 329. +34px lands the board between the two, so it reads as
     centred against the page AND level with the column beside it. */
  top:calc(50% + 34px);
}
@media (max-width:1300px){
  .home-hero:has(.hero-formula) .hero-formula{right:4%}
}

/* the dash that joins the mark to the sentence */
.pan-dash{
  font-family:var(--heading);font-weight:400;
  font-size:clamp(1.9rem,4.4vw,3.8rem);line-height:1;color:#fff;opacity:.7;
  flex:0 0 auto;
}
/* the side arrow hands over to a down arrow once the line has finished */
.pan-marker{opacity:calc(1 - var(--handover,0));transition:opacity .3s linear}
.pan-down{
  display:block;position:relative;z-index:3;
  width:32px;margin:0 auto;color:#fff;
  opacity:var(--handover,0);
  transform:translateY(calc((1 - var(--handover,0)) * -22px));
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.pan-down svg{display:block}
@media (prefers-reduced-motion:reduce){.pan-down{opacity:1;transform:none}}

/* flanking the focused card rather than the edges of the screen */
/* at the ends of the row, clear of the cards */
/* the ring turns with an easing rather than snapping */

/* ---------- the six doors, side by side ----------
   All six stay on one screen. The one in focus is enlarged and fully present;
   the others step down in size and lift away as they get further from it, so
   the row reads as depth without anything being hidden. The arrows move which
   door is open. Nothing is driven by the scroll — scrolling carries the
   reader on to the next section, as it should. */
/* the section is the arrows' containing block — without this they escape to
   the viewport and float over whatever happens to be on screen */
/* the open door wears the brand ring */
/* only the open door takes a click, so a faded neighbour cannot intercept it */

/* its panel is a fixed block, so the card's height is knowable and the
   picture can never push the text out of the frame */


/* ---------- the doors, brought back to size ----------
   The row had grown tall enough that a card no longer read at a glance. The
   grid runs to a fixed measure, the picture is a little less deep, and the
   description is clamped — so a whole row sits on the screen at once. */
.doors-section{padding-top:clamp(64px,9vh,110px)}
.doors{max-width:980px;margin:0 auto;gap:22px}
.door-flip{aspect-ratio:4/4.15}
.doors .door-body{padding:18px 20px 20px}
/* the whole blurb, always — a reader should not have to hover to find out
   what a door is for */
.doors .door-body p{
  font-size:.88rem;line-height:1.55;margin:0 0 14px;
}
.doors .door-cta{font-size:.8rem}
.doors .door-label h3{font-size:1.3rem}
@media (max-width:1100px){.doors{max-width:100%}}

/* the cards sit level and every one shows its full description, so the row
   reads without anyone having to hover to find out what a door leads to */
.doors .door{align-self:stretch}
@media (prefers-reduced-motion:reduce){
  .doors .door-body{transition:none}
}

/* ---------- the round, once the gate opens ----------
   On the gold like every other panel of substance on the site, centred, with
   the three figures as white cards. It was left-aligned in a wide dark column
   with the numbers set smaller than the labels above them, which is why it
   read as unfinished rather than as terms. */
.round-block{max-width:900px;margin:0 auto}
.round-block h2{margin-bottom:14px}
.round-lede{
  max-width:56ch;margin:0 auto 40px;
  color:#fff;
}
.round-figures{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin:0 auto 42px;max-width:760px;
}
.round-fig{
  background:#fff;border-radius:16px;
  padding:26px 20px 24px;text-align:center;
  box-shadow:0 2px 6px rgba(120,84,4,.10),0 18px 44px rgba(120,84,4,.16);
}
.round-fig-label{
  display:block;
  font-family:var(--ui);font-size:.7rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:#B07E06;margin-bottom:12px;
}
.round-fig-value{
  display:block;
  font-family:var(--heading);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(2.1rem,3.6vw,2.9rem);line-height:1;
  color:var(--text-primary);
}
.round-ask{
  max-width:52ch;margin:0 auto;
  font-family:var(--heading);font-style:italic;
  font-size:clamp(1.05rem,1.7vw,1.25rem);line-height:1.5;color:#fff;
}
.round-block .btn-row{justify-content:center;margin-top:26px}
/* the deep yellow fill used on the hero secondaries — an outline alone was
   too quiet against the ramp here */
.section-gold .round-block .btn-ghost{
  background:#C48E12;border-color:#C48E12!important;color:#fff!important;
  box-shadow:0 8px 24px rgba(84,58,2,.32);
}
.section-gold .round-block .btn-ghost:hover{
  background:#B07E06;border-color:#B07E06!important;color:#fff!important;
  box-shadow:0 10px 30px rgba(84,58,2,.4);
}
@media (max-width:760px){
  .round-figures{grid-template-columns:1fr;gap:14px;max-width:360px}
}

/* the ecosystem tiles: smaller, with real air between them */
.gold-field .layers{
  max-width:880px;margin-left:auto;margin-right:auto;
  gap:30px;
}
.gold-field .layer{padding:28px 24px 30px}
.gold-field .layer h3,.gold-field .layer h4{font-size:1.3rem}
.gold-field .layer p{font-size:.97rem}
.gold-field .layer-mark{width:48px;height:48px;margin-bottom:15px}
.gold-field .layer-icon{width:24px;height:24px}
@media (max-width:860px){
  .gold-field .layers{gap:18px;max-width:100%}
}

/* the gold section hands straight over to the band */
.gold-field > .section{padding-bottom:clamp(40px,6vh,72px)}

/* ---------- the line hands over to the invitation ----------
   "Choose the door" appears exactly where the sentence ended: it sits in the
   same stage, at the same height, and the two cross-fade as the pan finishes.
   The block holds still for a beat afterwards so the invitation is read
   before the page moves on. */
.pan-invite{display:none}
.pan.is-panning .pan-invite{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  position:absolute;left:0;right:0;top:24vh;z-index:4;
  margin:0;padding:0 28px;text-align:center;
  opacity:var(--handover,0);
  transform:translateY(calc((1 - var(--handover,0)) * 26px));
  transition:opacity .35s var(--ease),transform .35s var(--ease);
  pointer-events:none;
}
.pan.is-panning .pan-track{
  opacity:calc(1 - var(--handover,0));
  transition:opacity .35s var(--ease);
}
.pan-invite .doors-invite-lead{
  color:#fff;font-size:clamp(3.4rem,8.4vw,7rem);line-height:.98;
}
.pan-invite .doors-invite-tail{
  color:#56565F;font-size:clamp(1.6rem,3.2vw,2.6rem);line-height:1.15;
}

/* the thread runs longer now that it is the only thing between the
   invitation and the doors */
/* The thread starts directly under the invitation, inside the same stage, and
   draws downward while the block holds. Sitting after the block instead left
   it three quarters of a screen below the words it belongs to. */
.pan.is-panning .doors-thread{
  position:absolute;left:50%;transform:translateX(-50%);
  top:calc(24vh + 13rem);
  bottom:6vh;height:auto;
  z-index:4;
  opacity:var(--handover,0);
  transition:opacity .35s var(--ease);
}
.pan.is-panning .doors-thread-line{
  background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.55) 70%,rgba(255,255,255,.12) 100%);
}

/* the doors take the brand frame as the thread reaches them */
.doors .door .door-front,
.doors .door .door-body{
  transition:border-color .6s var(--ease),box-shadow .6s var(--ease);
}
.doors.is-framed .door .door-front{border-color:var(--amber)}
.doors.is-framed .door .door-body{
  border-color:var(--amber);
  box-shadow:0 10px 30px rgba(235,176,40,.18);
}
@media (prefers-reduced-motion:reduce){
  .pan.is-panning .pan-invite,.pan.is-panning .pan-track{transition:none}
  .doors .door .door-front,.doors .door .door-body{transition:none}
}

/* ---------- the door in ----------
   The board writes itself, then the reader goes through the heart.

   Writing: four strips, one per line of the derivation, each carrying the
   board image clipped to its own band and wiped in left to right. On black
   that reads as the working appearing line by line. One image does all of it,
   so there is no video to download and nothing to fail to autoplay.

   Going through: the dark plate is clipped to a rectangle with a heart cut
   out of it (even-odd), and the heart is scaled up about its own centre. The
   site is seen THROUGH the heart the whole way — the shape stays a heart as
   it grows, rather than a circle expanding over the top of everything.

   The heart's coordinates are measured off the artwork: 83.05% across,
   69.98% down, from 1,619 yellow pixels found inside the slate. */
.entry[hidden]{display:none}
.entry{
  position:fixed;inset:0;z-index:400;
  display:flex;align-items:center;justify-content:center;
  padding:6vh 4vw 21vh;
  overflow:hidden;
  pointer-events:auto;
}
body.entry-open{overflow:hidden}

.entry-defs{position:absolute;width:0;height:0;overflow:hidden}

/* the dark plate carries the board and the heart-shaped hole */
.entry-plate{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:6vh 4vw 21vh;
  background:#0E0E14;
  -webkit-mask-image:url(#entry-hole);
  mask-image:url(#entry-hole);
}

.entry-board{
  position:relative;
  width:min(70vw,900px);max-height:70vh;
  aspect-ratio:1082 / 699;
}
.entry-board img,
.entry-strip{
  position:absolute;inset:0;
  width:100%;height:100%;
  background-image:url('/assets/img/board-heart.webp');
  background-size:100% 100%;
  display:block;
}
/* the finished board fades up under the strips once the writing is done */
.entry-full{opacity:0;transition:opacity .5s var(--ease) 2.05s}
.entry.is-written .entry-full{opacity:1}

.entry-strip{
  /* each strip shows only its own line, and is wiped in from the left */
  clip-path:inset(var(--top) var(--wipe,100%) var(--bot) 0);
  transition:clip-path .52s cubic-bezier(.36,.72,.4,1);
  transition-delay:calc(var(--i) * .34s + .25s);
}
.entry.is-written .entry-strip{--wipe:0%}

.entry-enter,.entry-skip{
  position:absolute;left:50%;transform:translateX(-50%);
  font-family:var(--ui);cursor:pointer;z-index:2;
  opacity:0;transition:opacity .5s var(--ease) 2.2s;
}
.entry.is-written .entry-enter,
.entry.is-written .entry-skip{opacity:1}
.entry-enter{
  bottom:11vh;
  display:inline-flex;align-items:center;gap:9px;
  padding:16px 34px;border-radius:100px;border:0;
  background:var(--amber);color:#fff;
  font-size:.95rem;font-weight:600;letter-spacing:.02em;
  box-shadow:0 6px 20px rgba(235,176,40,.4),0 18px 44px rgba(0,0,0,.4);
}
.entry-enter:hover{background:var(--amber-hover)}
.entry-skip{
  bottom:5.5vh;background:none;border:0;
  color:rgba(255,255,255,.5);font-size:.84rem;letter-spacing:.06em;
  text-transform:uppercase;padding:8px 14px;
}
.entry-skip:hover{color:rgba(255,255,255,.85)}

/* the journey through the heart */
/* closed at rest, so there is no hole until the reader chooses to go through */
#entry-hole-path{
  transform-box:fill-box;
  transform-origin:center;
  transform:scale(0);
  transition:transform 2.5s cubic-bezier(.62,0,.3,1);
}
.entry.is-travelling .entry-board{
  transform:scale(7);
  transform-origin:83.05% 69.98%;
  transition:transform 2.5s cubic-bezier(.62,0,.3,1);
}
.entry.is-travelling .entry-enter,
.entry.is-travelling .entry-skip{opacity:0;transition:opacity .25s var(--ease)}
.entry.is-gone{opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}

@media (max-width:760px){
  .entry,.entry-plate{padding:5vh 4vw 24vh}
  .entry-board{width:92vw}
}
@media (prefers-reduced-motion:reduce){
  .entry{display:none!important}
}

/* ---------- the preview page ----------
   A harness for watching the opening sequence over and over. It uses the same
   markup and the same rules as the live entry, so what is judged here is what
   ships — no separate copy to drift out of step. */
.preview-page{background:#0E0E14;color:#fff;min-height:100vh;overflow-y:auto}
.pv-note{
  max-width:760px;margin:0 auto;padding:26px 28px 6px;
  font-family:var(--ui);font-size:.92rem;line-height:1.6;
  color:rgba(255,255,255,.62);text-align:center;
}
.pv-note strong{color:#fff;font-weight:600}
.pv-stage{
  position:relative;height:82vh;min-height:520px;margin:18px auto 0;max-width:1300px;
  border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.12);
}
/* inside the harness the entry fills its box rather than the screen */
/* Inside the harness the sequence is sized to the box, not to the window —
   the live version uses vh, which would overflow a panel this size. */
.pv-stage .entry,
.pv-stage .entry-plate{position:absolute;padding:5% 5% 15%}
.pv-stage .entry[hidden]{display:flex}
.pv-stage .entry-board{width:min(62%,720px);max-height:62%}
.pv-stage .entry-enter{bottom:7%}
.pv-stage .entry-skip{bottom:2.5%}

.pv-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:12px;padding:22px 28px 8px;
}
.pv-btn{
  font-family:var(--ui);font-size:.86rem;font-weight:600;
  padding:12px 24px;border-radius:100px;border:0;cursor:pointer;
  background:var(--amber);color:#fff;
}
.pv-btn:hover{background:var(--amber-hover)}
.pv-ghost{background:transparent;color:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.26)}
.pv-ghost:hover{background:rgba(255,255,255,.08);color:#fff}
.pv-hint{
  font-family:var(--ui);font-size:.82rem;color:rgba(255,255,255,.45);
  width:100%;text-align:center;margin-top:4px;
}
.pv-hint em{color:rgba(255,255,255,.7);font-style:normal}

.pv-fly{padding:40px 28px 70px;text-align:center}
.pv-label{
  font-family:var(--ui);font-size:.72rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:#EBB028;margin:0 0 10px;
}
.pv-lottie{
  width:min(70vw,620px);aspect-ratio:960/540;margin:0 auto;
  background:linear-gradient(135deg,#D2A014 0%,#EBB028 28%,#F4CE55 55%,#FAE494 78%,#FFEEA8 100%);
  border-radius:14px;
}


/* ---------- the Nova tree ----------
   In front of the sections at full colour, like the sunflower and the
   robots — not a watermark. The ground it crosses must not tint it, so no
   blend mode and no opacity: what holds it off the gold is the shadow, the
   same way the cream robot is held off the pale end of the ramp.

   It is deliberately narrow and mostly bled off the right edge. The Nova
   page has a right-hand column in the invitation, a full-width carousel and
   a centred trial card, and a tree wide enough to be a co-star would sit on
   all three. What reaches back over the page is the blossom on the arching
   branches, which is the part worth seeing. */
.grow-tree{position:relative;overflow:visible}
.nova-tree{
  position:absolute;z-index:3;pointer-events:none;
  top:0;right:var(--tree-x,-15%);
  width:var(--tree-w,min(27%,380px));
  display:block;will-change:transform;
}
.nova-tree img{
  width:100%;height:auto;display:block;
  /* one soft warm shadow. Stacked shadows on a keyed edge read as a rim,
     which is exactly what the cut-out work removed. */
  filter:drop-shadow(0 16px 30px rgba(84,58,4,.20));
}
/* Under 900px the copy runs full width and there is no margin left to stand
   in, so the tree would be reading over the text rather than beside it. */
@media (max-width:900px){ .nova-tree{display:none} }