/* ==========================================================================
   Fame Capital — famecapital.com.au
   Design tokens extracted from the live site.
   ========================================================================== */

:root {
  /* Brand */
  --green:        #009F71;
  --green-hover:  #00BF88;
  --green-pale:   #EBF5EE;

  /* Ink & text */
  --ink:          #171717;
  --body:         #515151;
  --muted:        #8B8B8B;

  /* Surfaces */
  --page:         #FAFAF7;
  --cream:        #F4F2EC;
  --white:        #FFFFFF;
  --dark:         #171717;
  --dark-card:    #1B1B1B;
  --line:         #E7E8E5;
  --line-dark:    #3A3A3A;
  --line-cream:   rgba(23, 23, 23, .13);

  /* Layout */
  --maxw:         1200px;
  --gutter:       24px;
  --radius:       12px;

  --font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--page);
  color: var(--body);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0 0 63px; }
.rule--dark { border-top-color: var(--line-dark); }

/* --------------------------------------------------------------- Typography */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 22px;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: var(--ink);
}
.eyebrow::before {
  flex: 0 0 auto;
  width: 38px;
  height: 1px;
  background: currentColor;
  content: "";
}
.eyebrow--green { color: var(--green); font-weight: 700; }
/* the hero badge sits centred inside its pill — no opening rule there */
.eyebrow--bare { display: block; text-align: center; }
.eyebrow--bare::before { display: none; }

h1, h2, h3, h4 { color: var(--ink); margin: 0; font-weight: 400; }

.display {
  font-size: 48px;
  line-height: 1.15;
  letter-spacing: 0.01em;
  font-weight: 400;
  margin: 0 0 24px;
}
.display strong,
.accent { font-weight: 700; color: var(--green); }
.display em { font-style: italic; font-weight: 700; color: var(--green); }

.lede { font-size: 15px; line-height: 1.6; color: var(--body); margin: 0; max-width: 720px; }

.section { padding: 96px 0; }
.section--cream { background: var(--cream); }
.section--dark  { background: var(--dark); }
.section__head { margin-bottom: 56px; }

/* ------------------------------------------------------------------ Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 192px;
  height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--radius);
  background: var(--green);
  color: var(--white);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .4s ease, color .4s ease;
}
.btn:hover { background: var(--green-hover); }

.btn--sm { min-width: 0; height: 42px; padding: 0 22px; font-size: 14px; }

/* ------------------------------------------------------------------- Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 80px;
}
.brand { flex: 0 0 auto; display: block; }
.brand img { height: 22px; width: auto; }

.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__list a:not(.btn) {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  transition: color .2s ease;
}
.nav__list a:not(.btn):hover,
.nav__list a:not(.btn)[aria-current="page"] { color: var(--green); }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: var(--ink);
  content: "";
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before { transform: translateY(-6px); }
.nav-toggle span::after  { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-1px); }

/* --------------------------------------------------------------------- Hero */

.hero { padding: 72px 0 40px; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: 64px;
  align-items: start;
}
.hero__pill {
  display: inline-block;
  max-width: 100%;
  margin: 0 0 32px;
  padding: 13px 24px;
  border: 1px solid var(--green);
  border-radius: var(--radius);
  background: var(--green-pale);
  text-align: center;
}
/* One line, always — the pill sizes to the text rather than the text wrapping.
   Type scales down on narrow screens so it stays on one line without overflowing. */
.hero__pill p {
  margin: 0;
  white-space: nowrap;
  font-size: clamp(8px, calc(3vw - 2.5px), 13px);
  letter-spacing: 0.15em;
}
.hero__title { font-size: 48px; line-height: 1.15; letter-spacing: 0.01em; margin: 0 0 24px; }
.hero__lede { margin: 0 0 36px; max-width: 540px; }

.hero__visual {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1;
  /* Cards are sized in cqw against this box, so the whole orbit scales as one
     piece. That keeps each card's reach (radius + half its width) a fixed
     fraction of the box, at every viewport — no per-breakpoint tuning. */
  container-type: inline-size;
  /* Cards stay well inside this box (max reach ~236 of a 260 half-box), so
     clipping here cuts nothing visible — it just stops the rotating tracks
     contributing a couple of stray pixels to the page's scroll width.
     `clip` rather than `hidden`: it doesn't create a scroll container. */
  overflow: clip;
}

/* Orbit — concentric rings with cards revolving around the core.
   Each track carries its own start angle in --a; the card inside counter-
   rotates by the same amount so its text stays upright. */
.orbit { position: relative; width: 100%; height: 100%; }

.orbit__ring,
.orbit__core,
.orbit__track {
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 50%;
}

.orbit__ring { border: 1px solid var(--line); }
.orbit__ring--outer { width: 82%; height: 82%; }
.orbit__ring--mid   { width: 60%; height: 60%; }
.orbit__ring--inner { width: 40%; height: 40%; border-color: rgba(0, 159, 113, .40); }

.orbit__core {
  width: 18%;
  height: 18%;
  background: var(--green);
}

.orbit__track {
  width: var(--d);
  height: var(--d);
  transform: rotate(var(--a));
  animation: orbit-spin 52s linear infinite;
}

.orbit__anchor {
  position: absolute;
  top: 0;
  left: 50%;
  width: max-content;
  transform: translate(-50%, -50%);
}

.orbit__card {
  padding: 2.2cqw 3.3cqw;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 10px 28px rgba(23, 23, 23, .10), 0 2px 6px rgba(23, 23, 23, .04);
  white-space: nowrap;
  transform: rotate(calc(-1 * var(--a)));
  animation: orbit-counter 52s linear infinite;
}

.orbit__label {
  margin: 0 0 3px;
  font-size: 2.05cqw;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.orbit__value {
  margin: 0;
  font-size: 3.5cqw;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}
.orbit__ok { color: var(--green); font-size: 2.65cqw; font-weight: 500; }

@keyframes orbit-spin    { to { transform: rotate(calc(var(--a) + 1turn)); } }
@keyframes orbit-counter { to { transform: rotate(calc(-1 * var(--a) - 1turn)); } }

/* ---------------------------------------------------------- Numbered blocks */

.num {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: var(--muted);
  text-align: right;
}

.chip {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--green);
}
.chip--ink { color: var(--ink); }

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 64px;
}
.pillar { padding-top: 24px; border-top: 1px solid var(--line); }
.pillar h3 { font-size: 22px; line-height: 1.3; font-weight: 400; margin: 0 0 16px; }
.pillar__body { margin: 0; }

/* ------------------------------------------- Why advisors need this (split) */

.why-need {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 9fr);
  gap: 120px;
  align-items: start;
}

.why-need__intro .display { margin-bottom: 20px; }

.why-need__stat {
  margin-top: 52px;
  padding-top: 40px;
  border-top: 1px solid var(--line-cream);
}
.stat__figure { font-size: 48px; line-height: 1.1; letter-spacing: 0.01em; font-weight: 400; margin: 0 0 14px; }
.stat__note { margin: 0; font-size: 13px; line-height: 1.6; color: var(--body); max-width: 380px; }

.reason-list { list-style: none; margin: 0; padding: 0; }
.reason-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  padding: 26px 0;
  border-top: 1px solid var(--line-cream);
}
.reason-row:first-child { padding-top: 0; border-top: 0; }
.reason-row:last-child  { padding-bottom: 0; }
.reason-row__num {
  margin: 3px 0 0;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.15em;
  color: var(--muted);
}
.reason-row h3 { font-size: 19px; line-height: 1.35; font-weight: 600; margin: 0 0 10px; }
.reason-row__body { margin: 0; }

/* ------------------------------------------------------------- Capabilities */

/* heading left, intro right, then a full-width rule closing the header.
   Shared by Core capabilities and Who we serve. */
.split-head {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 7fr);
  gap: 96px;
  align-items: start;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line);
}
.split-head .display { margin: 0; }
.split-head .lede { padding-top: 8px; }

.caps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cap {
  display: flex;
  flex-direction: column;
  padding: 34px 40px 40px;
}
.cap:first-child { padding-left: 0; }
.cap:last-child  { padding-right: 0; }
/* dividers between the columns, not around the group */
.cap + .cap { border-left: 1px solid var(--line); }

/* number, then a rule running out to the edge of the column */
.cap__num {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.15em;
  color: var(--muted);
}
.cap__num::after {
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
  content: "";
}

.cap h3 { font-size: 20px; line-height: 1.3; font-weight: 600; margin: 0 0 18px; }
.cap__body { margin: 0 0 32px; }
.cap__chip {
  margin: auto 0 0;          /* pinned to the bottom so chips align across columns */
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--ink);
}

/* Inheritance — dark feature card */
.feature {
  margin-top: 56px;
  padding: 48px 56px 56px;
  border-radius: var(--radius);
  background: var(--dark);
  color: rgba(255, 255, 255, .78);
}
.feature__kicker {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 40px;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--green);
}
.feature__dash { width: 30px; height: 1px; background: currentColor; }
.feature h2 { color: var(--white); }
.feature__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 72px;
  align-items: start;
}
.feature__lede { color: rgba(255, 255, 255, .72); margin: 0 0 40px; max-width: 520px; }

.feature__list { margin: 0; padding: 0; list-style: none; }
.feature__list li {
  position: relative;
  margin-bottom: 22px;
  padding-left: 22px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--white);
}
.feature__list li:last-child { margin-bottom: 0; }
.feature__list li::before {
  position: absolute;
  top: 7px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  content: "";
}

/* generation chain */
.gen { display: grid; gap: 30px; }
.gen__row {
  position: relative;
  padding: 18px 22px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: var(--dark-card);
}
.gen__row--active { border-color: var(--green); }
/* the connector dropping from the card above */
.gen__row + .gen__row::before {
  position: absolute;
  top: -31px;
  left: 34px;
  width: 1px;
  height: 31px;
  background: var(--line-dark);
  content: "";
}
.gen__label {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--muted);
}
.gen__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.gen__name { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--white); }
.gen__state {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, .8);
  text-align: right;
  white-space: nowrap;
}
.gen__row--active .gen__state { color: var(--green); }
.gen__row--active .gen__state::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  content: "";
}
.gen__row--dim .gen__state { color: var(--muted); font-weight: 500; }

/* ----------------------------------------------------------------- Why Fame */

.tags { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.tags p {
  margin: 0;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.15em;
  color: var(--ink);
  background: var(--white);
}

.pillars-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 40px;
  margin-top: 64px;
}
.why { padding-top: 24px; border-top: 1px solid var(--line); }
.why__numeral { font-size: 48px; line-height: 1; font-weight: 700; color: var(--green); letter-spacing: 0.01em; margin: 0 0 18px; }
.why h3 { font-size: 22px; line-height: 1.3; font-weight: 400; margin: 0 0 14px; }
.why__body { margin: 0; }
.why__kicker {
  margin: 18px 0 0;
  font-size: 10px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* ------------------------------------------------------------------- Thesis */

.thesis { padding: 88px 0 96px; }
.thesis__eyebrow { color: rgba(255, 255, 255, .72); margin-bottom: 72px; }

/* "Financial Advice" —•— connecting —•— "Digital Assets" */
.thesis__diagram {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px auto 56px minmax(0, 1fr);
  column-gap: 28px;
  align-items: start;
}
.thesis__label {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
}
.thesis__label--left  { grid-column: 1; text-align: right; }
.thesis__label--right { grid-column: 5; text-align: left; }

.thesis__term {
  grid-row: 2;
  margin: 0;
  font-size: 48px;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--white);
}
.thesis__term--left  { grid-column: 1; text-align: right; }
.thesis__term--right { grid-column: 5; text-align: left; }
.thesis__term em { font-style: italic; color: var(--green); }

/* the connectors and the joining word sit on the first line of the terms */
.thesis__link,
.thesis__joiner { grid-row: 2; margin-top: 20px; }

.thesis__joiner {
  grid-column: 3;
  margin-bottom: 0;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.thesis__link {
  position: relative;
  height: 9px;
  align-self: start;
  margin-top: 24px;
}
.thesis__link::before {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: rgba(0, 159, 113, .45);
  content: "";
}
/* the dot runs the length of the line, left to right */
.thesis__dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  transform: translate(-50%, -50%);
  /* `backwards` so the delayed dot holds the transparent first keyframe
     instead of sitting visible at the start line on page load */
  animation: thesis-travel 3.4s cubic-bezier(.55, .06, .45, .94) infinite backwards;
}
/* the second dot sets off as the first reaches the joiner */
.thesis__link--late .thesis__dot { animation-delay: 1.7s; }

@keyframes thesis-travel {
  0%   { left: 0;    opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

.thesis__body {
  max-width: 700px;
  margin: 76px auto 0;
  font-size: 15px;
  line-height: 1.9;
  text-align: center;
  color: var(--white);
}

/* --------------------------------------------------------------- Who we serve */

.audience {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.audience article { padding: 30px 24px 56px; }
.audience article:first-child { padding-left: 0; }
.audience article:last-child  { padding-right: 0; }
.audience article + article { border-left: 1px solid var(--line); }
.audience__num {
  margin: 0 0 26px;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.15em;
  color: var(--muted);
}
.audience h3 { font-size: 20px; line-height: 1.3; font-weight: 600; margin: 0 0 18px; }
.audience__body { margin: 0; }

/* ----------------------------------------------------------------- Insights */

/* Single column, matching the original — the list reads as one sequence. */
.insights { display: grid; grid-template-columns: 1fr; }
.insights a {
  display: block;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
  text-decoration: none;
  transition: color .2s ease;
}
.insights a strong { font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.insights a:hover,
.insights a:hover strong { color: var(--green); }

/* ------------------------------------------------------------------- Footer */

.site-footer { background: var(--dark); color: rgba(255, 255, 255, .7); padding: 64px 0 56px; }
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line-dark);
}
.site-footer img { height: 22px; width: auto; }
.site-footer__links { display: flex; gap: 28px; }
.site-footer__links a { font-size: 14px; color: var(--white); text-decoration: none; }
.site-footer__links a:hover { color: var(--green); }
.disclaimer { margin: 28px 0 0; font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, .62); }

/* ----------------------------------------------------------------- Page hero */

.page-hero { padding: 96px 0; }
.page-hero h1 { font-size: 48px; line-height: 1.15; letter-spacing: 0.01em; margin: 0 0 28px; }
.page-hero__body { max-width: 760px; }
.page-hero__body p { margin: 0 0 18px; }

/* --------------------------------------------------------------------- Form */

.form { max-width: 620px; margin: 0 auto; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { margin-bottom: 20px; }
.field label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.field input[type="text"],
.field input[type="email"],
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  font-family: var(--font);
  font-size: 15px;
  color: var(--ink);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
.field--check { display: flex; align-items: flex-start; gap: 10px; }
.field--check label { margin: 0; font-size: 14px; letter-spacing: 0; color: var(--body); }
.field--check input { margin-top: 3px; accent-color: var(--green); }
.form__status { margin: 20px 0 0; color: var(--green); font-weight: 600; }
.form__status[hidden] { display: none; }
.form__status--error { color: #C0392B; }
/* Honeypot — off-canvas rather than display:none so bots still fill it in. */
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------------ Legal page */

.legal { max-width: 800px; margin: 0 auto; padding: 72px 0 96px; }
.legal h1 { font-size: 40px; line-height: 1.2; margin: 0 0 32px; }
.legal h2 { font-size: 22px; line-height: 1.4; font-weight: 700; margin: 40px 0 14px; }
.legal p  { font-size: 16px; line-height: 1.75; margin: 0 0 16px; }
.legal ul { margin: 0 0 20px; padding-left: 22px; }
.legal li { font-size: 16px; line-height: 1.75; margin-bottom: 8px; }
.legal a  { color: var(--green); }

/* ------------------------------------------------------------ Scroll reveal */

/* The hidden state is scoped to .js-reveal, which the inline head script only
   adds when IntersectionObserver exists and the visitor hasn't asked for
   reduced motion. Without it nothing is hidden, so the page degrades to plain
   static content rather than a blank screen. */
.js-reveal [data-reveal],
.js-reveal [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
              transform .7s cubic-bezier(.22, .61, .36, 1);
}
.js-reveal [data-reveal].is-in,
.js-reveal [data-reveal-stagger].is-in > * {
  opacity: 1;
  transform: none;
}

/* children of a group cascade in rather than arriving together */
.js-reveal [data-reveal-stagger] > :nth-child(1) { transition-delay: 0s; }
.js-reveal [data-reveal-stagger] > :nth-child(2) { transition-delay: .07s; }
.js-reveal [data-reveal-stagger] > :nth-child(3) { transition-delay: .14s; }
.js-reveal [data-reveal-stagger] > :nth-child(4) { transition-delay: .21s; }
.js-reveal [data-reveal-stagger] > :nth-child(5) { transition-delay: .28s; }
.js-reveal [data-reveal-stagger] > :nth-child(6) { transition-delay: .35s; }
.js-reveal [data-reveal-stagger] > :nth-child(7) { transition-delay: .42s; }
.js-reveal [data-reveal-stagger] > :nth-child(8) { transition-delay: .49s; }

/* belt and braces: never leave content hidden if motion is switched off */
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal],
  .js-reveal [data-reveal].is-in,
  .js-reveal [data-reveal-stagger] > *,
  .js-reveal [data-reveal-stagger].is-in > * {
    opacity: 1;
    transform: none;
  }
}

/* -------------------------------------------------------------- Responsive */

@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; }
  .why-need { grid-template-columns: 1fr; gap: 56px; }
  .split-head { grid-template-columns: 1fr; gap: 28px; }
  .audience { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .audience article { padding: 30px 24px 40px; }
  .audience article:nth-child(odd)  { padding-left: 0; border-left: 0; }
  .audience article:nth-child(even) { padding-right: 0; }
  .audience article:nth-child(2n+3) { border-top: 1px solid var(--line); }
  .feature__grid { grid-template-columns: 1fr; gap: 48px; }
  .hero__visual { max-width: 460px; margin: 0 auto; }
  .feature { padding: 40px 28px; }
}

@media (max-width: 860px) {
  .nav {
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: 8px 0 20px;
    display: none;
  }
  .nav[data-open="true"] { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 0 var(--gutter); }
  .nav__list li { border-top: 1px solid var(--line); }
  .nav__list a:not(.btn) { display: block; padding: 16px 0; font-size: 16px; }
  .nav__list .nav__cta { padding: 16px 0 4px; }
  .nav__list .btn { width: 100%; height: 48px; font-size: 15px; }
  .nav-toggle { display: block; }
  .site-header__inner { position: relative; }

  .pillars, .caps, .pillars-4 { grid-template-columns: 1fr; }
  .audience { grid-template-columns: 1fr; }
  .audience article { padding: 26px 0; }
  .audience article:first-child { padding-top: 0; }
  .audience article + article { border-left: 0; border-top: 1px solid var(--line); }
  .thesis__diagram { grid-template-columns: 1fr; row-gap: 8px; justify-items: center; }
  .thesis__diagram > * { grid-column: 1 !important; grid-row: auto !important; }
  .thesis__label--left, .thesis__label--right,
  .thesis__term--left, .thesis__term--right { text-align: center; }
  .thesis__link { display: none; }
  .thesis__joiner { margin: 18px 0; }
  .cap { padding: 30px 0; }
  .cap + .cap { border-left: 0; border-top: 1px solid var(--line); }
  .cap__chip { margin-top: 0; }
  .display, .hero__title, .page-hero h1 { font-size: 34px; }
  .section { padding: 64px 0; }
  .form__row { grid-template-columns: 1fr; gap: 0; }
}

/* Narrow screens: pull the cards in so nothing pushes the page sideways */
@media (max-width: 560px) {
  .hero__pill { padding: 11px 16px; }
  .hero__visual { max-width: 340px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}