/* ============================================================
   POUNCE — eBook landing page
   Built on the Pounce design-system tokens (css/tokens/*).
   Patterns mirrored from the production pounceagency.com.au site:
   full-bleed parallax hero, bold/light two-line headline, italic
   arrow CTAs and an editorial footer.
   ============================================================ */

/* ------------------------------------------------------------
   Token corrections
   --text-tertiary in the DS is #696969 = 3.83:1 on black, which
   fails WCAG AA for normal text. Raised to #8C8C8C = 5.3:1.
   Worth fixing upstream in the design system.
   ------------------------------------------------------------ */
:root {
  --text-tertiary: #8C8C8C;

  /* Anton is no longer shipped — this page is Poppins-only. Remapped so
     any remaining --font-display reference resolves to Poppins rather
     than falling through to the DS's Impact fallback. */
  --font-display: var(--font-sans);

  /* Solid field colours — the DS uses rgba() for fields, which makes
     placeholder contrast unverifiable over the hero imagery. */
  --field-solid:        #242424;
  --field-solid-border: #3A3A3A;
  --field-placeholder:  #9A9A9A;

  /* Muted text on the light curtain — #444 = 8.5:1 on the ~#e5eef6
     background, comfortably passing AA for the small foot links. */
  --text-on-curtain-muted: #444444;

  --header-h: 5.25rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* Global focus treatment */
:focus-visible {
  outline: 3px solid var(--pounce-teal);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}

::selection { background: var(--pounce-teal); color: var(--pounce-black); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0; left: 0;
  z-index: 200;
  transform: translateY(-120%);
  padding: 1rem 1.5rem;
  background: var(--pounce-teal);
  color: var(--pounce-black);
  font-weight: var(--fw-bold);
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

.shell {
  width: 100%;
  max-width: var(--max-page);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.snap-section {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

/* ------------------------------------------------------------
   Typographic primitives (Pounce house style)
   ------------------------------------------------------------ */

/* Small letter-spaced uppercase label */
.eyebrow {
  font-size: var(--text-caption);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* The signature two-line headline: heavy line over a light line */
.headline {
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}
.headline .line { display: block; }
.headline .line--heavy { font-weight: var(--fw-bold); }
.headline .line--light { font-weight: 200; }

/* Byline / lead copy — always the thin weight */
.byline {
  font-weight: var(--fw-light);
  font-size: var(--text-body-lg);
  line-height: var(--lh-snug);
  color: var(--text-secondary);
  max-width: var(--max-prose);
}

/* Section heading + rule, as used across the site */
.section-head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head h2 {
  font-size: var(--text-display-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  max-width: 18ch;
}
.section-head .byline { margin-top: 1rem; }

/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  height: var(--header-h);
  display: flex;
  align-items: center;
  pointer-events: none;
  transform: translateY(0);
  transition: transform 0.45s var(--ease-expo);
}
.site-header.is-hidden { transform: translateY(-110%); }
.site-header .shell {
  display: flex;
  align-items: center;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--pounce-white);
  pointer-events: auto;
}
.brand svg { height: 32px; width: auto; fill: currentColor; }

/* ------------------------------------------------------------
   Parallax scaffolding
   ------------------------------------------------------------ */
.parallax-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
/* The layer is oversized so it can travel without exposing an edge */
.parallax-layer {
  position: absolute;
  inset: -18% 0;
  width: 100%;
  height: 136%;
}
.parallax-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The supplied artwork is already colour-graded for the dark layout. */
.hero .parallax-layer img {
  object-position: center;
}
/* Only continuously-animated layers get will-change */
.js-ready .parallax-layer { will-change: transform; }

.scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Preserve the supplied ink treatment while keeping the copy readable. */
.scrim--hero {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0.08) 68%, rgba(0,0,0,0.7) 94%, #000 100%),
    rgba(0,0,0,0.42);
}
@media (max-width: 900px) {
  .scrim--hero { background: rgba(0, 0, 0, 0.68); }
}
.scrim--band {
  background: linear-gradient(90deg, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.32) 55%, rgba(0,0,0,0.12) 72%, rgba(0,0,0,0) 100%);
}
@media (max-width: 900px) {
  .scrim--band { background: rgba(0, 0, 0, 0.62); }
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 150svh;
  border-bottom: 1px solid var(--border-hairline);
}
.hero__panel {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--header-h) + clamp(1rem, 3vh, 2rem));
  /* Extra bottom room so the sticky cookie bar never sits over the content */
  padding-bottom: clamp(3.5rem, 7vh, 5rem);
  overflow: hidden;
}
.hero__inner { position: relative; z-index: 2; width: 100%; }

/* Copy on the left, capture form on the right — the form stays above the fold */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(330px, 0.9fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.hero__lead { display: flex; flex-direction: column; min-width: 0; }

.hero__headline {
  font-size: clamp(2.2rem, 4.4vw, 4.25rem);
  margin-bottom: clamp(1.35rem, 2.5vh, 2rem);
}
.hero__headline .line--heavy { color: var(--pounce-teal); }

.hero__byline { margin-bottom: clamp(2rem, 4vh, 3rem); }

/* Stat pair, bounded by hairlines as in the original layout */
.stats {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  align-items: flex-end;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  padding-block: clamp(1.25rem, 2.5vh, 1.75rem);
  border-block: 1px solid var(--border-hairline);
}
.stat__value {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 0.95;
  letter-spacing: var(--ls-display);
}
.stat__value--alt { color: var(--pounce-tangerine); }
.stat__label { margin-top: 0.5rem; }
.stats__source {
  margin-top: 0.6rem;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--text-tertiary);
}
.stats__vs {
  align-self: center;
  font-size: 1.1rem;
  font-weight: var(--fw-light);
  color: var(--text-tertiary);
  padding-bottom: 0.75rem;
}


/* ------------------------------------------------------------
   Narrative — the editorial run between the hero and the benefits
   ------------------------------------------------------------ */
.narrative {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(4rem, 12vh, 8rem);
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}
.narrative__inner { max-width: var(--max-page); }
.narrative__inner > * { max-width: 54rem; }
.narrative__lead {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: var(--fw-light);
  line-height: 1.55;
  color: var(--text-secondary);
}
.narrative__lead + .narrative__lead { margin-top: 1.25rem; }
.narrative__pull {
  margin-block: clamp(2rem, 5vh, 3.25rem) clamp(1.5rem, 3vh, 2.25rem);
  font-size: clamp(1.6rem, 3.2vw, 2.75rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--text-primary);
  text-wrap: balance;
}
.narrative__cta { margin-top: clamp(1.75rem, 4vh, 2.5rem); }

/* ------------------------------------------------------------
   Benefits
   ------------------------------------------------------------ */
.benefits {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(4rem, 12vh, 9rem);
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.benefit {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-hairline);
}
.benefit__icon { width: 34px; height: 34px; color: var(--pounce-teal); }
.benefit h3 {
  font-size: 1.0625rem;
  font-weight: var(--fw-bold);
  line-height: 1.25;
}
.benefit p {
  font-size: 0.9375rem;
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  color: var(--text-secondary);
}

/* ------------------------------------------------------------
   Reality-check band (parallax)
   ------------------------------------------------------------ */
.band {
  position: relative;
  min-height: 145svh;
  border-block: 1px solid var(--border-hairline);
}
.band__panel {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: clamp(4.5rem, 12vh, 8rem);
}
.band__panel > .shell { position: relative; z-index: 2; }
.band__inner { position: relative; z-index: 2; max-width: 46rem; }
.band h2 {
  font-size: var(--text-display-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  margin-bottom: 1.75rem;
}
.band__body { max-width: 44ch; }
.band__kicker {
  margin-top: 1.75rem;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
.text-cta {
  display: inline-flex;
  align-items: center;
  gap: 1.05rem;
  margin-top: clamp(1.5rem, 3vh, 2rem);
  color: var(--text-primary);
  font-size: var(--text-body-lg);
  font-weight: var(--fw-light);
  font-style: italic;
  text-decoration: none;
}
.text-cta .arrow { transition: transform var(--dur-fast) var(--ease-expo); }
.text-cta:hover { color: var(--pounce-teal); }
.text-cta:hover .arrow { transform: translateX(0.35rem); }

/* ------------------------------------------------------------
   Hero capture card
   Near-solid rather than glass: the card sits over parallax imagery,
   so a translucent panel would leave its text contrast unverifiable.
   ------------------------------------------------------------ */
.hero__card {
  background: #0C0C0C;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 2.2vw, 2.25rem);
  min-width: 0;
}
.eyebrow--accent { color: var(--pounce-teal); }

.hero__card-title {
  margin: 0.75rem 0 0.5rem;
  font-size: clamp(1.25rem, 1.7vw, 1.55rem);
  font-weight: var(--fw-bold);
  line-height: 1.22;
  letter-spacing: var(--ls-tight);
}
.hero__card-byline {
  font-size: 0.9375rem;
  margin-bottom: 1.5rem;
}

.field { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 420px) { .field-row { grid-template-columns: 1fr; } }
.field label { font-size: 0.9375rem; font-weight: var(--fw-regular); color: var(--text-primary); }

.field input {
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 1.1rem;
  background: var(--field-solid);
  border: 1px solid var(--field-solid-border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 1rem;
  font-weight: var(--fw-regular);
  transition: border-color var(--dur-fast) var(--ease-soft);
}
.field input::placeholder {
  color: var(--field-placeholder);
  font-style: italic;
  opacity: 1;
}
.field input:hover { border-color: #575757; }
.field input[aria-invalid="true"] { border-color: var(--pounce-tangerine); }

/* Field-level error. Colour is never the only signal — the message
   text and the ! glyph carry it too. */
.field__error {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: var(--fw-regular);
  color: var(--pounce-tangerine);
  min-height: 0;
}
.field__error:empty { display: none; }
.field__error::before {
  content: "!";
  display: grid;
  place-items: center;
  flex: none;
  width: 1.1rem; height: 1.1rem;
  border: 1.5px solid currentColor;
  border-radius: 7px;
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
}

.form-note { margin-top: 1.25rem; font-size: 0.8125rem; color: var(--text-tertiary); }
.form-note a { color: var(--pounce-tangerine); text-decoration: underline; }
.form-note a:hover { color: var(--accent-hover); }

.form-status:empty { display: none; }
.form-status {
  margin-bottom: 1.5rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--pounce-tangerine);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  color: var(--text-primary);
}

/* Primary conversion button */
.btn-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 52px;
  margin-top: 0.35rem;
  padding: 0.85rem 1.25rem;
  background: var(--pounce-tangerine);
  color: var(--pounce-black);
  border: 0;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1rem;
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-soft);
}
.btn-solid .arrow { transition: transform var(--dur-fast) var(--ease-expo); }
.btn-solid:hover { background: var(--accent-hover); }
.btn-solid:hover .arrow { transform: translateX(0.3rem); }
.btn-solid--inline { width: auto; margin-top: 1.5rem; padding-inline: 1.75rem; text-decoration: none; }

.consent {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: 0.75rem;
  align-items: start;
  margin: 1.4rem 0 1rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.consent input { width: 1.15rem; height: 1.15rem; margin: 0.15rem 0 0; accent-color: var(--pounce-teal); }


/* Success panel */
.hero__done h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  color: var(--pounce-teal);
  margin-bottom: 0.6rem;
  letter-spacing: var(--ls-display);
}
.hero__done .byline { font-size: 1rem; }
.hero__done-btn { display: block; margin-top: 1.5rem; text-decoration: none; text-align: center; line-height: 1.3; }
@media (max-width: 420px) { .hero__done-btn { font-size: 0.9375rem; padding-inline: 1rem; } }
.hero__done-meta { margin-top: 1rem; font-size: 0.78rem; color: var(--text-tertiary); }
.hero__done:focus { outline: none; }
/* Show the name as typed, even where headings are lowercased. */
.hero__done [data-done-name] { text-transform: none; }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.site-footer { padding-top: clamp(3.5rem, 8vh, 6rem); border-top: 1px solid var(--border-hairline); }

.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(3rem, 7vh, 5rem);
}
.footer__col { display: flex; gap: 1.25rem; align-items: flex-start; }
/* label + hairline rule, as on the production footer */
.footer__label {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex: none;
  padding-top: 0.55rem;
  white-space: nowrap;
}
.footer__label::after {
  content: "";
  width: clamp(1.5rem, 4vw, 4.5rem);
  height: 1px;
  background: var(--border-strong);
}
.footer__col ul { display: flex; flex-direction: column; }
.footer__col a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  text-decoration: none;
}
.footer__col a:hover { color: var(--pounce-teal); }
.footer__col--hi a { font-size: clamp(1.05rem, 2vw, 1.6rem); word-break: break-word; }

.footer__wordmark { padding-bottom: clamp(1.5rem, 4vh, 3rem); }
.footer__wordmark svg {
  width: 100%;
  max-width: 62rem;
  margin-left: auto;
  height: auto;
  fill: var(--pounce-white);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--border-hairline);
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.footer__legal ul { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-secondary);
  text-decoration: none;
}
.footer__legal a:hover { color: var(--text-primary); text-decoration: underline; }

/* ------------------------------------------------------------
   Cookie bar
   ------------------------------------------------------------ */
.cookie-bar {
  position: sticky;
  bottom: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem var(--gutter);
  background: #0A0A0A;
  border-top: 1px solid var(--border-hairline);
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.cookie-bar[hidden] { display: none; }
.cookie-bar button {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px; height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 1.1rem;
  font-family: inherit;
}
.cookie-bar button:hover { color: var(--text-primary); }

/* ------------------------------------------------------------
   Scroll reveal
   Initial state is gated behind .js-ready so that without JS every
   element renders at full opacity.
   ------------------------------------------------------------ */
.js-ready .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease-expo), transform 0.7s var(--ease-expo);
}
.js-ready .reveal.is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  /* Stack, but the form still sits directly under the hook so it stays
     within the first screen or so on tablet. */
  .hero__grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero { min-height: 0; }
  .hero__panel {
    position: relative;
    min-height: 0;
    justify-content: flex-start;
  }
  .band { min-height: 0; }
  .band__panel { position: relative; min-height: 72svh; }
}

@media (max-width: 720px) {
  :root { --header-h: 4.5rem; }
  .brand svg { height: 30px; }
  .band__panel { padding-block: clamp(3.75rem, 10vh, 5rem); }
  .band h2 { margin-bottom: 1.25rem; }
  .band__kicker { margin-top: 1.5rem; }
  .text-cta { margin-top: 1.25rem; }
  .footer__col { flex-direction: column; gap: 0.5rem; }
  .footer__label { padding-top: 0; }
  .footer__wordmark svg { max-width: 100%; }
}

@media (max-width: 420px) {
  .stats { grid-template-columns: 1fr; gap: 1.5rem; }
  .stats__vs { display: none; }
}

/* ------------------------------------------------------------
   Reduced motion — kill parallax, reveals and long transitions
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js-ready .reveal { opacity: 1 !important; transform: none !important; }
  .parallax-layer {
    transform: none !important;
    will-change: auto;
    inset: 0;
    height: 100%;
  }
  .hero,
  .band { min-height: auto; }
  .hero__panel,
  .band__panel { position: relative; min-height: auto; }
  .arrow-cta:hover .arrow { transform: none; }
}

/* ============================================================
   Site-header, menu-toggle, curtain modal, footer grid
   Ported from ebook-my so both campaigns share the top-right
   menu curtain and the same footer layout.
   ============================================================ */
.site-header {
  height: auto;
  pointer-events: none;
  padding-block: 1.5rem;
  transition: transform 350ms var(--ease-soft), background-color 300ms var(--ease-soft);
  background: transparent;
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck { background: #000; backdrop-filter: none; border-bottom-color: var(--border-hairline); }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header .shell { align-items: flex-start; justify-content: space-between; gap: 1rem; }
.brand, .menu-toggle { pointer-events: auto; }
.brand { padding: 0; }
.brand img { width: auto; height: 1.75rem; display: block; }
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  margin-top: .25rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-style: italic;
  font-weight: var(--fw-light);
  color: var(--pounce-white);
}
.menu-toggle__label {
  position: relative;
  display: block;
  width: 3rem;
  height: 1em;
  overflow: hidden;
  line-height: 1;
}
.menu-toggle__label span {
  position: absolute;
  inset: 0;
  transition: transform 500ms var(--ease-expo);
}
.menu-toggle__label span:last-child { transform: translateY(100%); }
.menu-toggle[aria-expanded="true"] .menu-toggle__label span:first-child { transform: translateY(-100%); }
.menu-toggle[aria-expanded="true"] .menu-toggle__label span:last-child { transform: translateY(0); }
.menu-toggle .bars { display: flex; flex-direction: column; justify-content: space-between; width: 30px; height: 20px; gap: 0; }
.menu-toggle .bars span { display: block; height: 3px; background: currentColor; border-radius: 8px; transition: all 500ms var(--ease-expo); }
.menu-toggle:hover { color: var(--pounce-teal); }
.menu-toggle[aria-expanded="true"] { color: #000; }
.menu-toggle[aria-expanded="true"] .bars span:first-child { transform: translateY(8.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .bars span:last-child { transform: translateY(-8.5px) rotate(-45deg); }

.curtain {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  padding: 0;
  background-color: #cad8e5;
  background-image:
    linear-gradient(128deg, transparent 18%, rgba(255,255,255,.45) 26%, rgba(255,255,255,.92) 31%, rgba(255,255,255,.55) 37%, rgba(255,255,255,.12) 46%, transparent 56%, rgba(255,255,255,.28) 62%, rgba(255,255,255,.72) 66%, rgba(255,255,255,.38) 70%, transparent 79%),
    radial-gradient(ellipse 72% 58% at 90% 6%, rgba(255,255,255,.92), rgba(214,232,245,.45) 42%, transparent 68%),
    linear-gradient(148deg, #a2bfd4 0%, #bacfde 25%, #ccdce9 48%, #dde9f2 65%, #edf3f8 80%, #f7fafc 100%);
  background-size: 200% 200%;
  color: var(--pounce-black);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: curtain-in 800ms cubic-bezier(.165,.84,.44,1) both, silk-drift 24s ease-in-out infinite;
}
.curtain[hidden] { display: none; }
.curtain.is-closing { animation: curtain-out 650ms cubic-bezier(.165,.84,.44,1) both; }
@keyframes curtain-in  { from { clip-path: inset(0 0 100%); } to { clip-path: inset(0); } }
@keyframes curtain-out { from { clip-path: inset(0);       } to { clip-path: inset(0 0 100%); } }
@keyframes silk-drift  { 0%,100% { background-position: 0 40%; } 50% { background-position: 100% 55%; } }

.curtain__top { position: absolute; inset: 0 0 auto; z-index: 2; display: flex; justify-content: flex-end; padding-top: 1.5rem; }
.curtain__close {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  min-height: 44px;
  padding: 0.5rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-style: italic;
  font-weight: var(--fw-light);
  color: #000;
}
.curtain__close .ring {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1.5px solid rgba(0,0,0,.25);
  border-radius: 50%;
}
.curtain__close:hover { color: var(--pounce-black); }

.curtain__nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4.5rem var(--gutter) 9rem;
  overflow-y: auto;
}
.curtain__nav ul { display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; }
.curtain__nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 44px;
  padding: 0 .4em;
  font-size: clamp(2.5rem, min(5.2vw, 8vh), 5.625rem);
  font-weight: var(--fw-bold);
  line-height: 1.18;
  letter-spacing: -.025em;
  color: var(--pounce-black);
  text-decoration: none;
  transition: opacity 500ms var(--ease-expo), color 300ms var(--ease-soft);
}
.curtain__nav a:hover { color: #0F6F60; }
.curtain__nav li { animation: menu-item-in 750ms var(--ease-expo) both; }
.curtain__nav li:nth-child(1) { animation-delay: 280ms; }
.curtain__nav li:nth-child(2) { animation-delay: 350ms; }
.curtain__nav li:nth-child(3) { animation-delay: 420ms; }
.curtain__nav li:nth-child(4) { animation-delay: 490ms; }
.curtain__nav li:nth-child(5) { animation-delay: 560ms; }
.curtain__nav li:nth-child(6) { animation-delay: 630ms; }
@keyframes menu-item-in { from { opacity: 0; transform: translateY(40%); } to { opacity: 1; transform: none; } }
.curtain__links:has(a:hover) a:not(:hover) { opacity: .15; }
.curtain__bottom { position: absolute; inset: auto 0 0; padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); }
.curtain__socials { display: flex; justify-content: center; gap: 0.5rem; padding: 0 0 2.25rem; }
.curtain__socials a { display: grid; place-items: center; width: 44px; height: 44px; color: var(--pounce-black); }
.curtain__socials svg { width: 21px; height: 21px; fill: currentColor; }
.curtain__socials a:hover { color: #0F6F60; }
.curtain__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-inline: var(--gutter);
  font-size: 0.8125rem;
  color: var(--text-on-curtain-muted);
}
.curtain__foot a {
  color: var(--text-on-curtain-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.curtain__foot a:hover { color: var(--pounce-black); text-decoration: underline; }

/* Footer as a grid, matching MY. AU carries three tiles
   (socials, sayhi, wordmark) so it uses the --my variant. */
.site-footer { min-height: 100svh; display: flex; flex-direction: column; padding-top: var(--section); }
.site-footer > .shell { display: flex; flex: 1; flex-direction: column; }
.footer__grid {
  flex: 1;
  display: grid;
  grid-template: "socials sayhi" auto "logo logo" 1fr / 1fr 1fr;
  gap: clamp(3rem, 8vw, 8rem);
}
.footer__grid > :nth-child(1) { grid-area: socials; }
.footer__grid > :nth-child(2) { grid-area: sayhi; }
.footer__grid > :nth-child(3) { grid-area: logo; }
.footer__col { gap: clamp(1rem, 2vw, 1.5rem); }
.footer__label { width: clamp(5rem, 8vw, 8rem); }
.footer__label::after { flex: 1; width: auto; }
.footer__col a { font-size: var(--text-display-sm); line-height: 1.3; }
.footer__wordmark { grid-area: logo; align-self: end; justify-self: end; padding: 0 0 3rem; }
.footer__wordmark img { width: clamp(20rem, 48vw, 52rem); height: auto; }
.footer__legal { margin-top: 2rem; }

@media (max-width: 720px) {
  .site-header { padding-block: 1.25rem; }
  .brand img { height: 1.5rem; }
  .menu-toggle__label { display: none; }
  .curtain__nav { align-items: flex-start; padding-top: 6.5rem; padding-bottom: 9rem; }
  .curtain__nav a { font-size: clamp(2rem, 11vw, 3.25rem); line-height: 1.22; }
  .curtain__socials { padding-bottom: 1.25rem; }
  .curtain__foot { font-size: .75rem; }
  .footer__grid { grid-template: "socials" auto "sayhi" auto "logo" 1fr / 1fr; gap: 3.5rem; }
  .footer__col { flex-direction: row; gap: 1rem; }
  .footer__label { width: 5rem; padding-top: .45rem; }
  .footer__wordmark { justify-self: start; align-self: end; padding-top: 2rem; }
  .footer__wordmark img { width: min(72vw, 25rem); }
  .footer__legal { align-items: flex-start; padding-block: 1.5rem; }
}

@media (max-width: 390px) {
  .curtain__foot { flex-direction: column-reverse; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .curtain, .curtain.is-closing, .curtain__nav li { animation: none !important; }
}

/* ============================================================
   Widescreen tightening (>= 901px only — mobile untouched)
   Above tablet width the full-viewport sections left large empty
   bands around short content, and the side gutters grew to ~230px
   at 1920. Sections now size to their content with a moderate
   rhythm, and the content column runs wider with a smaller gutter.
   ============================================================ */
@media (min-width: 901px) {
  :root {
    --gutter:   clamp(1.5rem, 3vw, 3rem);
    --max-page: 110rem;   /* 1760px at 16px root; grows with the root below */
    --section:  clamp(4rem, 9vh, 6.5rem);
  }

  .narrative,
  .benefits { min-height: 0; padding-block: clamp(3.5rem, 8vh, 6rem); }
  .section-head { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }

  /* The hero and band pin for a shorter run — enough for the parallax
     to read, without half a screen of scroll where nothing changes. */
  .hero { min-height: 110svh; }
  .hero__panel { padding-bottom: clamp(2.5rem, 5vh, 3.5rem); }

  .band { min-height: 110svh; }
  .band__panel { padding-block: clamp(3.5rem, 8vh, 6rem); }

  .site-footer { min-height: 0; }
  .footer__grid { gap: clamp(2.5rem, 5vw, 5rem); }
  .footer__wordmark { padding-bottom: 2rem; }

}


/* Large and high-DPI-scaled desktops (e.g. 4K at 150% = 2560 CSS px).
   Past 1920 the type and the content cap stopped growing, leaving a
   small centred column with ~400px of empty space each side. Scale the
   root size with the viewport instead, so 2560 reads as the 1920 layout
   enlarged; everything is rem-based, so spacing and type follow. */
@media (min-width: 1921px) {
  html { font-size: min(0.8333vw, 24px); }
  :root { --max-prose: 35.125rem; } /* 562px at 16px, scales with the root */
}

/* ------------------------------------------------------------
   Narrative scroll-scrub (words lit by site.js as they cross the
   reading line). Only present when JS has split the copy, so
   without JS or with reduced motion the text renders normally.
   ------------------------------------------------------------ */
.scrub__word {
  opacity: 0.16;
  transition: opacity 0.35s var(--ease-soft), color 0.35s var(--ease-soft);
}
.scrub__word.is-lit { opacity: 1; }
.narrative__lead .scrub__word.is-lit { color: var(--text-primary); }
.scrub__word--accent.is-lit { color: var(--pounce-teal); }

/* Reduced motion: the hero and band do not pin, so the widescreen
   110svh heights above would leave an empty strip under each panel.
   Must stay after the widescreen block so it wins the cascade. */
@media (prefers-reduced-motion: reduce) {
  .hero,
  .band { min-height: auto; }
}

/* ------------------------------------------------------------
   Hero stat odometer (built by site.js; static text without JS
   or with reduced motion).
   ------------------------------------------------------------ */
.odo { font-variant-numeric: tabular-nums; }
.odo__digit {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  line-height: 1;
  vertical-align: bottom;
}
.odo__strip {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform 1.6s cubic-bezier(.16, 1, .3, 1);
}
.odo__strip > span { display: block; height: 1em; line-height: 1; }
/* 20 rolling digits + the target: land on the 21st row */
.odo__strip.is-rolled { transform: translateY(-20em); }
.odo__sym { display: inline-block; line-height: 1; vertical-align: bottom; }

/* ------------------------------------------------------------
   Reality-check band: more air between the parts on wide screens
   so the block reads balanced rather than packed.
   ------------------------------------------------------------ */
@media (min-width: 901px) {
  .band__inner { max-width: 52rem; }
  .band h2 { max-width: 22ch; text-wrap: balance; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
  .band__body {
    max-width: 48ch;
    font-size: clamp(1.05rem, 1.25vw, 1.35rem);
    line-height: 1.6;
  }
  .band__kicker { margin-top: clamp(2rem, 3.5vw, 3.25rem); }
  .band .btn-solid--inline { margin-top: clamp(1.75rem, 2.5vw, 2.5rem); }
}