/* ============================================================
   Undullify Media — Spark Page
   styles.css
   Order: Reset → Tokens → Base → Layout → Components
   Methodology: CUBE CSS-lite. Tokens owned in :root (no Open Props).
   ============================================================ */

/* ------------------------------------------------------------
   FONTS — self-hosted (assets/fonts). Standardised to 4 faces:
   Zodiak Bold · Cabinet Grotesk Regular + Black · Nothing You Could Do.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Zodiak';
  src: url('/assets/fonts/Zodiak-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('/assets/fonts/CabinetGrotesk-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('/assets/fonts/CabinetGrotesk-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nothing You Could Do';
  src: url('/assets/fonts/NothingYouCouldDo-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------
   1. ANDY BELL'S MODERN CSS RESET
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select { font: inherit; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

p { text-wrap: pretty; }

#root, #__next { isolation: isolate; }

/* ------------------------------------------------------------
   2. DESIGN TOKENS (:root)
   Colour palette and fluid type/space scales (Utopia-style).
   ------------------------------------------------------------ */
:root {
  /* --- Colour --- */
  --color-cream:          #f2eddf;  /* primary background base */
  --color-cream-deep:     #efeadf;  /* alt cream / paper */
  --color-teal:           #73b8ab;  /* sage/teal primary */
  --color-teal-dark:      #0f3233;  /* dark teal / cosmic */
  --color-teal-mid:       #1f5f5b;  /* mid teal (torn-paper bands) */
  --color-terracotta:     #a53d32;  /* terracotta red accent */
  --color-terracotta-dk:  #8e3429;  /* ~5% darker, button hover */
  --color-gold:           #ddca9b;  /* gold/ochre detail */
  --color-yellow:         #f2e9b8;  /* distressed yellow (50K/0 moment) */
  --color-ink:            #1a2322;  /* body text on cream */
  --color-on-dark:        #f2eddf;  /* text on dark teal */
  --color-on-dark-muted:  #b9cdc8;  /* muted text on dark */

  /* Semantic aliases */
  --bg:        var(--color-cream);
  --text:      var(--color-ink);
  --accent:    var(--color-terracotta);
  --primary:   var(--color-teal);

  /* --- Type families --- */
  --font-serif:  'Zodiak', Georgia, 'Times New Roman', serif;        /* narrative, headlines */
  --font-sans:   'Cabinet Grotesk', system-ui, -apple-system, sans-serif; /* declarative + body */
  --font-hand:   'Nothing You Could Do', cursive;                    /* handwritten moments */

  /* --- Fluid type scale (clamp). Calibrated to the build brief:
         body 17px, sub-headline 18–22px, hero H1 40–64px.
         320px → 1280px viewport. Ceilings kept tight to match the
         dense editorial proportions of the design PDF. --- */
  --step--1: clamp(0.81rem, 0.78rem + 0.16vw, 0.875rem);  /* ~13–14px small print */
  --step-0:  clamp(1.0625rem, 1.04rem + 0.12vw, 1.125rem); /* body 17–18px */
  --step-1:  clamp(1.125rem, 1.02rem + 0.52vw, 1.375rem);  /* sub-headline 18–22px */
  --step-2:  clamp(1.25rem, 1.09rem + 0.80vw, 1.625rem);   /* 20–26px */
  --step-3:  clamp(1.4375rem, 1.20rem + 1.19vw, 2rem);     /* 23–32px */
  --step-4:  clamp(1.625rem, 1.30rem + 1.63vw, 2.375rem);  /* 26–38px */
  --step-5:  clamp(1.875rem, 1.43rem + 2.22vw, 2.875rem);  /* 30–46px cross-heads */
  --step-6:  clamp(2.25rem, 1.66rem + 2.96vw, 3.5rem);     /* 36–56px */
  --step-7:  clamp(2.5rem, 1.71rem + 3.95vw, 4rem);        /* 40–64px hero H1 (brief) */

  /* Standardised running-copy size: ~17px mobile → 20px desktop (caps at 20). */
  --text-body: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem);

  /* Shared 4-column grid gutter (deliverables, offer narrative, proof, method)
     and the matching 3-of-4-column text span, so all bands align to one grid. */
  --grid-gap: clamp(1.25rem, 3vw, 2.5rem);
  --span-3of4: calc((300% - var(--grid-gap)) / 4);
  --span-2of4: calc((100% - var(--grid-gap)) / 2);

  /* --- Fluid space scale --- */
  --space-3xs: clamp(0.25rem, 0.24rem + 0.07vw, 0.31rem);
  --space-2xs: clamp(0.50rem, 0.47rem + 0.15vw, 0.63rem);
  --space-xs:  clamp(0.75rem, 0.70rem + 0.22vw, 0.94rem);
  --space-s:   clamp(1.00rem, 0.93rem + 0.36vw, 1.25rem);
  --space-m:   clamp(1.50rem, 1.40rem + 0.54vw, 1.88rem);
  --space-l:   clamp(2.00rem, 1.85rem + 0.72vw, 2.50rem);
  --space-xl:  clamp(3.00rem, 2.78rem + 1.09vw, 3.75rem);
  --space-2xl: clamp(4.00rem, 3.70rem + 1.45vw, 5.00rem);
  --space-3xl: clamp(6.00rem, 5.57rem + 2.17vw, 7.50rem);

  /* --- Layout --- */
  --container-max: 1200px;
  --measure: 65ch;            /* body line length */
  --gutter: var(--space-m);
  --radius: 6px;

  /* --- Motion (durations referenced by motion.css) --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ------------------------------------------------------------
   3. BASE
   ------------------------------------------------------------ */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--step-0);
  line-height: 1.5;
}

h1, h2, h3 { line-height: 1.05; font-weight: 700; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--color-terracotta);
  outline-offset: 3px;
  border-radius: 2px;
}

.u-hand     { font-family: var(--font-hand); }

/* ------------------------------------------------------------
   4. LAYOUT SYSTEM (Composition)
   ------------------------------------------------------------ */

/* Centred content container with side padding (24px mobile gutter) */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 1.1rem + 2vw, 3rem); /* 24px → 48px */
}

/* Band = a full-width page section with vertical rhythm.
   Tightened to match the dense editorial packing of the design PDF. */
.band {
  position: relative;
  padding-block: var(--space-2xl);
}


/* Visually-hidden (screen-reader only) */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Keyboard skip-to-content: off-screen until focused */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 999;
  padding: 0.6em 1em;
  background: var(--color-teal-dark);
  color: var(--color-cream);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  text-decoration: none;
  border-radius: 8px;
  transition: top 160ms ease-out;
}
.skip-link:focus { top: 1rem; }

/* ------------------------------------------------------------
   5. COMPONENTS
   ------------------------------------------------------------ */

/* --- Button (primary) --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-sans);
  font-weight: 400; /* buttons use Cabinet Grotesk Regular */
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: var(--step--1);
  text-decoration: none;
  padding: 0.7em 1.2em;
  border-radius: var(--radius);
  border: 0;
  cursor: pointer;
  line-height: 1;
  /* tap target */
  min-height: 44px;
}

.btn--primary {
  background: var(--color-terracotta);
  color: #fff;
  transition: background-color 180ms ease-out;
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-terracotta-dk);
}
.btn__arrow {
  display: inline-block;
  transition: transform 180ms ease-out;
}
.btn--primary:hover .btn__arrow,
.btn--primary:focus-visible .btn__arrow {
  transform: translateX(4px);
}

/* --- Inline CTA link ("See if this fits >") --- */
.link-cta {
  font-family: var(--font-sans);
  color: #a53d32;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: #a53d32;
  transition: color 250ms ease-out, text-decoration-color 250ms ease-out;
}
.link-cta:hover,
.link-cta:focus-visible { color: #de6655; text-decoration-color: #de6655; }

/* --- CTA privacy line (small, neutral, under any CTA) --- */
.cta-privacy {
  font-size: var(--step-0);
  color: var(--color-on-dark-muted);
  margin-top: var(--space-s);
  margin-bottom: var(--space-s); /* a little extra before the signature (which has its own top margin) */
  max-width: var(--span-3of4); /* align to the 3-of-4 column width like the prompt */
}
.cta-privacy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------
   6. PERSISTENT HEADER BAR
   ------------------------------------------------------------ */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 100;
  /* Transparent — overlaid directly on the hero background (per design) */
  background: transparent;
}
.site-header__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 1.1rem + 2vw, 3rem);
  padding-block: var(--space-xs);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
}
/* Header ENQUIRE button: large, with a lighter (medium) weight + wider
   tracking than the heavy default, matching the design. */
.site-header__cta {
  font-size: var(--step--1);
  /* inherits .btn weight 900 — standardised (was Medium 500, now Black) */
  letter-spacing: 0.06em;
  padding: 0.6em 1.15em;
  border-radius: 10px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  text-decoration: none;
  color: var(--color-teal-dark);
}
.brand__mark { width: 44px; height: 44px; }
.brand__word {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--step-2);
  letter-spacing: -0.05em;
  line-height: 1;
}
/* Two-tone wordmark: "Undullify" lighter terracotta + "Media" teal (per design) */
.brand__word-1 { color: #de6655; }
.brand__word-2 { color: var(--color-teal); }
/* Mobile: hide wordmark, keep icon (per spec, below 768px) */
@media (max-width: 767.98px) {
  .brand__word { display: none; }
}

/* ------------------------------------------------------------
   7. HERO (skeleton — full treatment in Stage 2)
   ------------------------------------------------------------ */
.band--hero {
  text-align: center;
  background: var(--color-teal-dark);
  color: var(--color-on-dark);
}
.hero__headline {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--step-7);
}

/* ------------------------------------------------------------
   8. FOOTER (skeleton — marketing + legal blocks in Stage 4)
   ------------------------------------------------------------ */
/* Footer continues the dark textured background of the CTA band */
/* plain black footer band — sits beneath the CTA's torn bottom edge */
.site-footer {
  background: #000;
  color: var(--color-on-dark);
}
.site-footer__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 1.1rem + 2vw, 3rem);
  padding-block: var(--space-l) var(--space-2xl);
  /* desktop: links top-left, copyright top-right, registration small across the bottom */
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--space-2xl);
  row-gap: var(--space-xl);
  align-items: start;
}
.footer-links {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
}
.footer-links a {
  color: var(--color-on-dark);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-teal) 70%, transparent);
  text-underline-offset: 3px;
  font-size: var(--step--1);
}
.footer-links a:hover,
.footer-links a:focus-visible { text-decoration-color: var(--color-terracotta); }
/* Copyright + privacy — top-right on desktop */
.footer-copyright {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  margin: 0;
  font-size: var(--step--1);
  color: var(--color-on-dark-muted);
  text-align: right;
}
.footer-copyright a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Registration boilerplate — small, muted, flowing across the full width */
.footer-registration {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.75rem;
  font-size: var(--step--1);
  line-height: 1.7;
  color: var(--color-on-dark-muted);
}
.footer-registration span { display: inline-block; }

/* ------------------------------------------------------------
   9. LEGAL PAGE (.legal — used by privacy.html; Stage 4)
   Single-column prose, ~70ch measure.
   ------------------------------------------------------------ */
.legal {
  background: var(--color-cream);
  color: var(--color-ink);
}
.legal-header,
.legal-main,
.legal-footer {
  width: 100%;
  max-width: 70ch;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 1.1rem + 2vw, 3rem);
}
.legal-header { padding-block: var(--space-l); }
.legal-home {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--color-teal-dark);
}
.legal-main { padding-bottom: var(--space-2xl); }
.legal-main h1 { font-family: var(--font-serif); font-size: var(--step-4); letter-spacing: -0.05em; margin-bottom: var(--space-xs); }
.legal-main h2 { font-family: var(--font-serif); font-size: var(--step-2); letter-spacing: -0.05em; margin-top: var(--space-l); margin-bottom: var(--space-2xs); }
.legal-main p,
.legal-main ul { margin-bottom: var(--space-s); }
.legal-main ul { padding-left: 1.4em; }
.legal-main li { margin-bottom: var(--space-3xs); }
.legal-meta { color: color-mix(in srgb, var(--color-ink) 60%, transparent); font-size: var(--step--1); }
.legal-footer {
  padding-block: var(--space-l);
  border-top: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent);
  font-size: var(--step--1);
  color: color-mix(in srgb, var(--color-ink) 60%, transparent);
}

/* ============================================================
   10. SHARED BAND PATTERNS
   ============================================================ */

/* Cross-heads (band headings) — left-aligned editorial default */
.cross-head {
  text-align: left;
  margin-bottom: var(--space-m);
}
.cross-head--serif {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--step-5);
  letter-spacing: -0.05em; /* Zodiak headings: same -50 tracking as the hero */
  color: var(--color-teal-mid); /* deepened from light teal: WCAG contrast on cream */
}
.cross-head--sans-black {
  font-family: var(--font-sans);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: var(--step-4);
  color: var(--color-teal-mid);
}
.cross-head--teal { color: var(--color-teal-mid); }
.cross-head--terracotta { color: var(--color-terracotta); }

/* Band closer (declarative slogan) */
.band-closer {
  font-family: var(--font-sans);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-align: center; /* diagnosis closer stays centred with the polaroid row */
  font-size: var(--step-5);
  line-height: 1.05;
  margin-top: var(--space-2xl);
}
.band-closer--teal { color: var(--color-teal-mid); }

/* Dark-band defaults */
.band--origin,
.band--pyramid,
.band--answers,
.band--cta {
  color: var(--color-on-dark);
}

/* Paint background system (credibility, answers, cta) */
.paint-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  background-color: var(--color-teal-dark);
  background-image: url('/cdn-cgi/image/width=1600,format=auto,quality=72/assets/backgrounds/paint-base.webp');
  background-size: cover;
  background-position: center;
}
.paint-bg--cosmic {
  background-image:
    url('/cdn-cgi/image/width=1600,format=auto,quality=72/assets/backgrounds/paint-base.webp');
}
.paint-bg__layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}
.paint-bg__halftones {
  background-image: url('/cdn-cgi/image/width=1600,format=auto,quality=75/assets/backgrounds/paint-halftones.webp');
}
.paint-bg__splatters {
  background-image: url('/cdn-cgi/image/width=1600,format=auto,quality=75/assets/backgrounds/paint-spatters.webp');
}
/* Content above the paint background */
.band--answers > .container,
.band--cta > .container { position: relative; z-index: 1; }

/* ============================================================
   BAND 1 — HERO
   ============================================================ */
.band--hero { padding: 0; background: var(--color-teal-dark); }
/* Compact hero matching the PDF: full cosmic+pyramid visible (16:9),
   headline overlaid near the top, badge overlaid below the pyramid base. */
.hero__stage {
  position: relative;
  width: 100%;
  /* width-driven height so the stage always fills the viewport width
     (aspect-ratio + max-height was shrinking the width and exposing the bg) */
  height: clamp(26rem, 55vw, 44rem);
  overflow: hidden;
}
.hero__layers { position: absolute; inset: 0; }
.hero__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* beam sits static; a gentle pulse + a slow L→R transparency shimmer (motion.css)
   give it life. The shimmer is an animated mask: a faint translucent band sweeps
   across, dipping the beam's own alpha as it passes. */
.hero__beam {
  opacity: 0.7;
  -webkit-mask: linear-gradient(100deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,1) 26%,
      rgba(255,255,255,0.38) 50%,
      rgba(255,255,255,1) 74%,
      rgba(255,255,255,1) 100%) 0 0 / 200% 100% repeat-x;
          mask: linear-gradient(100deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,1) 26%,
      rgba(255,255,255,0.38) 50%,
      rgba(255,255,255,1) 74%,
      rgba(255,255,255,1) 100%) 0 0 / 200% 100% repeat-x;
}
/* warm gold glow sitting BEHIND the pyramid (DOM order places it under the
   pyramid layer); the stone occludes its centre so it rims the apex/sky */
.hero__back-glow {
  position: absolute;
  /* centred behind the pyramid's mass so the stone occludes the core and the
     glow haloes around the silhouette — backlight, not a glow above the apex */
  top: 44%; left: 50%;
  width: clamp(340px, 52vw, 760px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* additive blend so the warm light actually reads against the busy nebula */
  mix-blend-mode: screen;
  background: radial-gradient(circle,
    rgba(252,236,150,0.92) 0%,
    rgba(250,230,135,0.5) 30%,
    rgba(250,230,135,0) 64%);
}
.hero__content {
  position: absolute;
  inset: 0;
  z-index: 8; /* above the torn edge (::after z-index 6) so the badge text sits on top */
  text-align: center;
}
.hero__headline {
  position: absolute;
  top: 19%;
  left: 0; right: 0;
  font-family: var(--font-serif);
  font-weight: 700; /* Zodiak Bold — standardised to a single Zodiak weight */
  font-size: clamp(2.5rem, 1.5rem + 4.4vw, 5rem);
  letter-spacing: -0.05em; /* Illustrator tracking -50 = -0.05em */
  color: var(--color-cream);
  line-height: 0.95;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
/* Audience qualifier: large dark-teal caps on a cream torn-paper sticker,
   tilted up to the right, sitting above the angled bottom transition. */
.hero__badge {
  position: absolute;
  bottom: clamp(54px, 11%, 100px); /* raised ~4% (8% overshot) */
  left: 50%;
  z-index: 7; /* above the torn edge (z-index 6) */
  transform: translateX(-50%) rotate(-4deg);
  color: var(--color-teal-dark);
  font-family: var(--font-sans);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em; /* Illustrator tracking -10 */
  font-size: clamp(1.1rem, 0.6rem + 1.9vw, 1.9rem);
  white-space: nowrap;
  padding: 0.55em 1.4em;
  /* Torn-paper sticker: a solid cream box CLIPPED to one ragged outline
     (torn-sticker.svg = jagged top + bottom, straight sides). One shape, so
     the tear runs corner-to-corner with no square-corner notches. */
  background: var(--color-cream);
  -webkit-mask: url('/assets/shapes/torn-sticker.svg') center / 100% 100% no-repeat;
          mask: url('/assets/shapes/torn-sticker.svg') center / 100% 100% no-repeat;
}
/* Sparkles use the real spark.webp asset: apex + two floating */
.star-twinkle { position: absolute; height: auto; filter: drop-shadow(0 0 10px rgba(242,237,223,0.55)); }
.star-twinkle--1 { /* apex */ width: 56px; top: 30%; left: calc(50% - 28px); }
.star-twinkle--2 { /* lower-left float */ width: 30px; top: 52%; left: 37%; }
.star-twinkle--3 { /* upper-right float */ width: 38px; top: 42%; left: 60%; }

/* ============================================================
   BAND 2 — DIAGNOSIS / POLAROIDS
   ============================================================ */
/* spacing tightened ~30% above/below the heading and under the closer */
.band--diagnosis {
  background: var(--color-cream);
  text-align: center;
  padding-top: var(--space-xs);
  padding-bottom: calc(var(--space-2xl) * 0.7);
}
.band--diagnosis .cross-head { text-align: center; margin-bottom: calc(var(--space-m) * 0.7); }
.band--diagnosis .band-closer { margin-top: calc(var(--space-2xl) * 0.7); }
.polaroids {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(0.75rem, 1.8vw, 1.75rem);
  margin-top: calc(var(--space-l) * 0.7);
}
/* The polaroid artwork (800×1000) IS the framed photo — white border, name,
   and tape are baked in. No extra card/background here. */
.polaroid {
  width: clamp(150px, 16.5vw, 240px);
  margin: 0;
}
.polaroid--james  { transform: rotate(-4deg); }
.polaroid--maya   { transform: rotate(3deg);  margin-top: 1.5rem; }
.polaroid--andrew { transform: rotate(-2deg); }
.polaroid--priya  { transform: rotate(4deg);  margin-top: 1rem; }
.polaroid__frame { position: relative; aspect-ratio: 800 / 1000; }
.polaroid__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.polaroid__fade { opacity: 0; transition: opacity 600ms ease-out; }
.polaroid figcaption { display: block; margin-top: var(--space-xs); }
/* The polaroid artwork already carries the handwritten name (per the design
   mockup), so the typed name is kept for screen readers / SEO but hidden
   visually to avoid duplication. If final assets ship without a baked-in
   name, remove this rule to restore the typed name plate. */
.polaroid__name {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.polaroid__note {
  display: block;
  font-family: var(--font-hand);
  font-size: clamp(1.3rem, 1rem + 1.4vw, 1.95rem); /* larger handwriting per design */
  color: #6b675e; /* muted pencil grey */
  line-height: 1.2;
  margin-top: 0.2em;
}

/* ============================================================
   BAND 3 — CREDIBILITY
   ============================================================ */
/* Band 3 sits on cream; only the logo strip is dark. */
.band--credibility {
  background: var(--color-cream);
  padding-block: 0 var(--space-2xl);
  /* No overflow:hidden — it clipped the logo band's torn-edge overhang (same
     hairline cause as the pyramid). The founder circles rotate but sit well
     inside the band, so nothing needs clipping here. */
  margin-top: -1px; /* dark logo band overlaps the cream above 1px → no seam line at its top */
}

/* Dark angled torn band — logos only. Angled torn SVGs cap top & bottom. */
.logo-band {
  position: relative;
  background-color: var(--color-teal-dark);
  /* dark teal paper texture (paint-base) + subtle teal splatters. Torn-edge
     overhang bridges the cream↔dark seams (credibility no longer clips it). */
  background-image:
    url('/cdn-cgi/image/width=1600,format=auto,quality=75/assets/backgrounds/paint-spatters.webp'),
    url('/cdn-cgi/image/width=1600,format=auto,quality=72/assets/backgrounds/paint-base.webp');
  background-size: cover, cover;
  background-position: center, center;
  margin-bottom: var(--space-2xl);
  padding-block: clamp(4.5rem, 3rem + 7vw, 8rem); /* room for the angled torn edges */
}
.logo-band::before { /* top edge: cream above tears down (ragged angled bottom) */
  content: "";
  position: absolute; left: 0; right: 0; top: -1px;
  width: 100%; aspect-ratio: 3000 / 218.8;
  background: url('/assets/shapes/torn-edge-top-angle.svg') center top / 100% 100% no-repeat;
  z-index: 2; pointer-events: none;
}
.logo-band::after { /* bottom edge: cream below tears up (ragged angled top) */
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  width: 100%; aspect-ratio: 3000 / 240.7;
  background: url('/assets/shapes/torn-edge-bottom-angle.svg') center bottom / 100% 100% no-repeat;
  z-index: 2; pointer-events: none;
}
.logo-row {
  position: relative;
  z-index: 1;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
}
/* logos staggered evenly down the page (via `top`, so the reveal animation's
   transform and reduced-motion resets don't wipe the stagger) */
.logo-row li { flex: 0 1 auto; position: relative; }
.logo-row li:nth-child(1) { top: -2.5rem; }
.logo-row li:nth-child(2) { top: -0.85rem; }
.logo-row li:nth-child(3) { top: 0.85rem; }
.logo-row li:nth-child(4) { top: 2.5rem; }
.logo { height: clamp(34px, 4.5vw, 64px); width: auto; }
/* inlined logos recoloured to the brand off-white #f1ede1 (overrides any
   baked-in fills like .st0) */
.logo--mono, .logo--mono * { fill: #f1ede1 !important; }

/* Founder block on cream */
.founder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(1.5rem, 5vw, 4.5rem);
}
/* portrait box matches the artwork's native aspect (2810×2465 ≈ 1.14) so the
   halftone circles + face keep their proportions (no width squash) */
.founder__portrait { position: relative; width: clamp(220px, 30vw, 380px); aspect-ratio: 2810 / 2465; flex: none; }
.founder__circles,
.founder__face,
.founder__overlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* circles (behind the static face) and overlay (on top) rotate together, driven
   by scroll position — motion.js sets --founder-rot. Face stays static. */
.founder__circles,
.founder__overlay {
  transform: rotate(var(--founder-rot, 0deg));
  transform-origin: 50% 50%;
  will-change: transform;
}
.founder__text { text-align: left; max-width: 52ch; }
.founder__signature { width: clamp(180px, 20vw, 250px); height: auto; margin-bottom: var(--space-s); }
.founder__bio { font-size: var(--step-1); color: var(--color-teal-dark); }

/* ============================================================
   BAND 4 — REFRAME / CONVEYOR
   ============================================================ */
.band--reframe {
  background-color: var(--color-cream);
  /* pale cream veil over the dot-texture so teal heading stays legible */
  background-image:
    linear-gradient(rgba(242, 237, 223, 0.62), rgba(242, 237, 223, 0.62)),
    url('/cdn-cgi/image/width=1600,format=auto,quality=72/assets/backgrounds/dot-texture.webp');
  background-size: cover;
  background-position: center;
  padding-bottom: var(--space-2xl);
}
/* Band 4 heading is a dark serif (not the light sage teal) */
.band--reframe .cross-head--serif { color: var(--color-teal-dark); }
/* reframe heading + sub span exactly 3 of 4 columns (grid rhythm) */
.band--reframe .cross-head { max-width: var(--span-3of4); }
.reframe__sub {
  text-align: left;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: var(--step-1);
  max-width: var(--span-3of4);
  margin: 0 0 var(--space-m);
  color: var(--color-teal-dark);
}
.conveyor-scene {
  position: relative;
  width: 100%;
  margin-top: var(--space-s);
}
/* "50k FOLLOWERS / 0 ENQUIRIES" graphic (both lines are baked into the SVG),
   overlapping the upper-left of the conveyor scene. */
.conveyor__impact-wrap {
  position: absolute;
  top: 2%;
  /* align the graphic's left with the band's CONTENT left edge (the centred
     container), so it lines up with the heading/sub rather than the viewport */
  left: calc(max((100vw - var(--container-max)) / 2, 0px) + clamp(1.5rem, 1.1rem + 2vw, 3rem));
  z-index: 1; /* behind the conveyor stage, but above the band background */
  width: clamp(260px, 34vw, 500px);
}
.conveyor__impact { width: 100%; height: auto; display: block; }
/* Conveyor layers: all three are full-canvas (2400×651) → stack inset:0.
   robot-arm-1 (closed cube) shows initially; on scroll it crossfades to
   robot-arm-2 (lid lifted, spark revealed). */
.conveyor__stage { position: relative; z-index: 2; width: 100%; aspect-ratio: 2400 / 651; }
.conveyor__base,
.conveyor__arm { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* closed box (arm-1) shows first; the open box (arm-2) is revealed later,
   when the reader scrolls down to the anti-list (motion.js adds .is-open) */
.conveyor__arm--1 { opacity: 1; transition: opacity 600ms ease-out; }
.conveyor__arm--2 { opacity: 0; transition: opacity 600ms ease-out; }
[data-conveyor].is-open .conveyor__arm--1 { opacity: 0; }
[data-conveyor].is-open .conveyor__arm--2 { opacity: 1; }

/* Anti-list (X-struck items) */
.anti-list {
  list-style: none;
  padding: 0;
  margin: var(--space-xl) auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 4vw, 3rem);
}
.anti-list__item {
  position: relative;
  font-family: var(--font-sans);
  font-weight: 900;
  text-transform: uppercase;
  font-size: var(--step-2);
  color: var(--color-teal-dark);
  padding: 0.2em 0.1em;
}
.anti-list__label { position: relative; z-index: 1; } /* text in front of the X */
/* Centre the X via inset/margin (not transform) so the stamp-in scale
   animation doesn't fight the centring; X sits behind the label. */
.anti-list__x {
  position: absolute;
  inset: 0;
  margin: auto;        /* centres both axes (needs definite width + height) */
  height: 3.08em;      /* +40% larger, still centred behind the label */
  width: 1.74em;       /* matches the X-strike aspect (~47:84) */
  opacity: 0;
  z-index: 0;
}
.anti-list__x path { fill: var(--color-yellow); }

/* ============================================================
   BAND 5 — VISUAL PROOF
   ============================================================ */
.band--proof { background: var(--color-cream); overflow: hidden; }
.proof__grid {
  display: grid;
  grid-template-columns: var(--span-2of4) 1fr; /* text 2 cols; hand bleeds right */
  gap: var(--grid-gap);
  align-items: center;
}
.proof__body { max-width: none; } /* fill the 3-column text track */
.band--proof .cross-head { text-align: left; }
.proof__lead { font-size: var(--step-2); margin-bottom: var(--space-xs); }
.proof__sub { font-size: var(--step-1); color: var(--color-teal-dark); }
/* bleed the hand/halftone composition out to the page's right edge (kept in
   flow so the band grows to fit — no vertical clipping) */
.proof__visual {
  position: relative;
  aspect-ratio: 1;
  width: 78%; /* larger hand, anchored to the right viewport edge */
  justify-self: end;
  margin-right: calc(-1 * (max((100vw - var(--container-max)) / 2, 0px) + clamp(1.5rem, 1.1rem + 2vw, 3rem)));
}
.proof__halftone,
.proof__hand,
.proof__spark { position: absolute; }
/* halftone a bit smaller than the hand, centred behind it */
.proof__halftone { top: 10%; left: 10%; width: 80%; height: 80%; object-fit: contain; }
.proof__hand { inset: 8% 0 0; width: 100%; height: auto; object-fit: contain; }
/* spark straddles the top edge of the card (sits half over it) */
.proof__spark {
  top: 25%; left: 26%;
  width: 20%; height: auto;
  opacity: 0;
}

/* ============================================================
   BAND 6 — ORIGIN / OTIS
   ============================================================ */
/* Built like the other angled torn bands: a dark film body that GROWS with the
   content, capped top & bottom by angled film-perforation edge images (cream →
   sprocket strip → film). Scales at every viewport — no fixed-aspect image. */
.band--origin {
  position: relative;
  isolation: isolate;
  background-color: #1a261c; /* dark film fallback under the grain texture */
  background-image: url('/cdn-cgi/image/width=1600,format=auto,quality=72/assets/backgrounds/filmstrip.webp');
  background-size: cover;
  background-position: center;
}
/* angled sprocket edge at the band TOP (cream above tears into the film).
   Scales proportionally when wide (full edge); below ~570px it holds a minimum
   height and shows just a PORTION of the strip at a readable sprocket size,
   rather than shrinking the whole edge to a thin sliver. */
.band--origin::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px;
  width: 100%; height: clamp(68px, 12.2vw, 305px);
  background: url('/assets/shapes/film-edge-top-angle.webp') center top / cover no-repeat;
  z-index: 2; pointer-events: none;
}
/* angled sprocket edge at the band BOTTOM (film tears into the cream below) */
.band--origin::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  width: 100%; height: clamp(62px, 11.1vw, 278px);
  background: url('/assets/shapes/film-edge-bottom-angle.webp') center bottom / cover no-repeat;
  z-index: 2; pointer-events: none;
}
.origin__content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: center;
  /* generous block padding so the copy clears the angled sprocket edges */
  padding-block: clamp(5.5rem, 3rem + 9vw, 12rem);
}
/* heading spans wide (not boxed into the text column) */
.origin__heading { max-width: none; margin-bottom: var(--space-l); color: #de6655; }
.origin__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* body spans 3 cols; note = col 4 */
  gap: var(--grid-gap);
  align-items: start;
}
.origin__col { grid-column: 1 / 4; }
/* fills most of the 3-col track but caps the line to a comfortable measure (~72 chars at 20px) */
.origin__col { max-width: 42rem; }
.band--origin .cross-head { text-align: left; }
.origin__beat { color: var(--color-on-dark); margin-bottom: var(--space-m); font-size: var(--step-0); }
.origin__beat--bold { font-weight: 900; font-size: var(--step-2); color: var(--color-cream); }
.origin__beat strong { color: var(--color-cream); }
/* handwritten margin note in column 4 — slightly tilted annotation */
.origin__callout {
  grid-column: 4 / 5;
  align-self: start;
  font-size: var(--step-3);
  color: #de6655;
  text-align: left;
  line-height: 1.25;
  transform: rotate(-3deg);
  transform-origin: left top;
  margin-top: var(--space-2xs);
}

/* ============================================================
   BAND 7 — METHOD / CO-CREATIVE
   ============================================================ */
.band--method { position: relative; background: var(--color-cream); }
.method__grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* true 4-col grid */
  gap: var(--grid-gap);
  align-items: center;
}
.method__body { grid-column: 1 / 4; } /* text spans columns 1–3 */
.method__visual { grid-column: 4 / 5; } /* visual = column 4 */
.band--method .cross-head { text-align: left; }
.method__text { max-width: 48ch; color: var(--color-teal-dark); font-size: var(--step-1); }
.method__visual { justify-self: center; }
.method__bubble { width: clamp(140px, 18vw, 240px); height: auto; }

/* ============================================================
   BAND 8 — PYRAMID
   ============================================================ */
.band--pyramid {
  position: relative;
  /* No overflow:hidden — it clipped the torn edges' 1px overhang (which is what
     bridges the cream↔dark seam) and its clip box landed on a fractional pixel
     at some widths, leaving a hairline. Letting the torn ::before/::after
     overhang cover the seam is the robust fix. */
  margin-top: -1px;
  background-color: var(--color-teal-dark);
  background-image: url('/cdn-cgi/image/width=1600,format=auto,quality=72/assets/backgrounds/cosmic-landscape.webp');
  background-size: cover;
  background-position: center;
}
/* torn edge at the absolute TOP of the dark band — ::after handles the bottom */
.band--pyramid::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px;
  width: 100%; aspect-ratio: 3000 / 73.6; /* scale tear depth with width so teeth keep their shape */
  background: url('/assets/shapes/torn-edge-top.svg') center top / 100% 100% no-repeat;
  z-index: 6; pointer-events: none;
}
.pyramid__grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.pyramid__visual { position: relative; }
.pyramid__diagram { width: 100%; height: auto; }
.pyramid__spark {
  position: absolute;
  top: 10%; left: 50%;
  transform: translate(-50%, -50%);
  width: 14%; height: auto;
  opacity: 0;
}
/* SPARK / CLARITY / CRAFT labels overlaid on the constellation pyramid */
.pyramid__label {
  position: absolute;
  font-family: var(--font-sans);
  font-weight: 900;
  text-transform: uppercase;
  color: #de6655;
  font-size: clamp(1.1rem, 0.7rem + 1.5vw, 1.9rem);
  letter-spacing: 0.01em;
  line-height: 1;
  /* dark outer glow lifts the labels off the busy cosmic backdrop */
  text-shadow: 0 0 4px #173943, 0 0 9px #173943, 0 0 16px #173943;
}
/* labels centred on the pyramid's vertical axis (apex / mid / base) */
.pyramid__label--spark   { top: -3%; left: 50%; transform: translateX(-50%); }
.pyramid__label--clarity { top: 45%; left: 50%; transform: translateX(-50%); }
.pyramid__label--craft   { top: 77%; left: 50%; transform: translateX(-50%); }
.pyramid__statement { color: var(--color-on-dark); font-size: var(--step-2); margin-bottom: var(--space-l); max-width: 34ch; }
.pyramid__statement:first-of-type { color: var(--color-cream); }

/* ============================================================
   BAND 9 — OFFER
   ============================================================ */
.band--offer { background: var(--color-cream); text-align: center; margin-top: -1px; /* overlap the pyramid's dark bottom 1px → no seam line */ }
.equation {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: baseline;
  gap: 0.3em;
  font-family: var(--font-sans);
  font-weight: 900;
  text-transform: uppercase;
  font-size: var(--step-4);
  color: var(--color-teal-mid);
  line-height: 1.1;
}
/* equation is static (not animated in) */
.equation__part, .equation__op { display: inline-block; }
/* whole equation is teal in the design (1 PAGE is not a separate colour) */
.scarcity {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--color-teal-dark);
  font-size: var(--step-1);
  margin-top: var(--space-s);
  text-align: left;
}
.deliverables {
  list-style: none;
  padding: 0;
  margin: var(--space-2xl) auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
}
.deliverable { opacity: 0; text-align: left; }
/* larger, clipped to a clean circle */
.deliverable__icon {
  width: clamp(120px, 15vw, 200px);
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 0 var(--space-s);
  transition: transform 200ms ease-out, filter 200ms ease-out;
}
.deliverable:hover .deliverable__icon { transform: scale(1.03); filter: drop-shadow(0 6px 12px rgba(15,50,51,0.18)); }
.deliverable__label {
  font-family: var(--font-sans);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: var(--step-2);
  color: var(--color-teal-mid);
  margin-bottom: 0.35em;
  line-height: 1.1;
}
.deliverable__desc { font-size: var(--text-body); line-height: 1.5; color: var(--color-ink); max-width: 22ch; margin: 0; }
/* desktop: two text columns that align to the 4-deliverable grid (each spans
   two columns; same gap so the centre gutter lines up). CTA spans below. */
.offer__narrative {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--grid-gap);
  row-gap: var(--space-m);
  align-items: start;
  margin: var(--space-2xl) 0 0;
  text-align: left;
}
.offer__narrative p { margin-bottom: 0; }
.offer__narrative p:last-child { grid-column: 1 / -1; }
.offer__narrative p:last-child { text-align: left; }

/* ============================================================
   BAND 10 — NOT FOR YOU
   ============================================================ */
/* standard page cream (no tint) */
.band--not-for { background: var(--color-cream); overflow: hidden; }
/* text sits left; the scene is a large full-bleed image off the right edge */
.not-for__grid {
  display: grid;
  grid-template-columns: minmax(0, var(--span-2of4));
  align-items: center;
}
.band--not-for .cross-head { text-align: left; margin-bottom: var(--space-l); }
.not-for__body { max-width: none; } /* grid column already = 2 cols */
.not-for__item { font-size: var(--step-1); margin-bottom: var(--space-m); color: var(--color-ink); }
/* closer matches the body lines (per design) */
.not-for__closer { font-size: var(--step-1); margin-top: var(--space-m); color: var(--color-ink); }
/* large sunset-walk scene, bleeding off the page's right edge and vertically
   centred — reads as a background. The base sits IN FRONT (transparent sky)
   with the sun BEHIND it, so the sun shows through, occluded by the mountains. */
.not-for__visual {
  position: absolute;
  top: 50%; right: 0;
  transform: translateY(-50%);
  width: 62%;
  max-width: 1240px;
  pointer-events: none;
}
.not-for__scene { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
/* sun is now the SAME canvas size as the base, so it overlays 1:1 — no manual
   positioning needed. Sits behind the base (z-index 0); the base's transparent
   sky lets it show through, occluded by the mountains/walker. */
.not-for__sun {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%; height: auto;
  opacity: 0;
  /* fades in (and back out on scroll-up) — see [data-notfor].is-sun */
  transition: opacity 2000ms ease-out;
}

/* ============================================================
   BAND 11 — TWO ANSWERS
   ============================================================ */
/* extra padding so the angled torn caps don't crowd the content */
/* extra bottom padding so the body text clears the ANGLED torn edge (the cream
   cuts up highest on the left, otherwise the last line lands on the cream) */
.band--answers { padding-top: clamp(5.5rem, 3rem + 7vw, 9rem); padding-bottom: clamp(7.5rem, 4rem + 8vw, 13rem); margin-top: -1px; /* overlap the cream band above 1px → no seam line */ }
.band--answers .cross-head { text-align: left; margin-bottom: var(--space-l); }
.band--answers .cross-head--terracotta { color: #de6655; }
.answers__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  max-width: none;
  margin: 0;
}
.answers__q {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: var(--step-1);
  color: var(--color-cream);
  margin-bottom: var(--space-s);
}
.answers__a { color: var(--color-on-dark); font-size: var(--step-1); max-width: 34ch; }

/* ============================================================
   BAND 12 — CLOSE
   ============================================================ */
.band--close { background: var(--color-cream); overflow: hidden; margin-top: -1px; /* overlap the dark answers band above 1px → no seam line */ }
.close-typography {
  position: relative;
  display: block;
  text-align: center;
  padding-block: clamp(3rem, 1.5rem + 6vw, 6rem);
  max-width: min(94%, 76rem);
  margin-inline: auto;
}
.close-line {
  position: relative;
  display: block;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2rem, 1.1rem + 4.4vw, 4rem);
  line-height: 1;
}
/* DULL DISAPPEARS. sits top-left, lifted up away from the spark */
.close-line--top { color: var(--color-teal-mid); text-align: left; margin-left: 5%; margin-bottom: -0.12em; top: -0.6em; z-index: 3; }
/* DOESN'T. sits bottom-right, dropped down below the spark */
.close-line--bottom { color: var(--color-terracotta); text-align: right; margin-right: 5%; margin-top: -0.18em; top: 0.6em; z-index: 3; }

/* Oversized split "spark" — heavy sans (Cabinet Grotesk Black), per design */
.close-spark {
  position: relative;
  display: block;
  height: 0.78em;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(6rem, 1rem + 24vw, 19rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-terracotta);
  z-index: 1;
}
.close-spark__half {
  position: absolute;
  left: 50%;
  top: 0;
  white-space: nowrap;
}
/* straight seam across the middle of the word — reads whole when "joined" */
.close-spark__half--upper { clip-path: polygon(0 0, 100% 0, 100% 52%, 0 52%); }
.close-spark__half--lower { clip-path: polygon(0 52%, 100% 52%, 100% 100%, 0 100%); }
/* JOINED start state: both halves aligned to form the whole word. The lower
   half stays flat; the upper half peels open (rotates outward from its left)
   once the band reaches the middle of the viewport — motion.js adds .is-split. */
.close-spark__half--upper {
  transform-origin: 0% 52%;
  transform: translateX(-50%) rotate(0deg);
  transition: transform 1100ms cubic-bezier(0.22, 0.7, 0.2, 1);
}
.close-spark__half--lower { transform: translateX(-50%) rotate(0deg); }
[data-close].is-split .close-spark__half--upper { transform: translateX(-50%) rotate(-13deg); }

/* ============================================================
   BAND 13 — CTA
   ============================================================ */
.band--cta { text-align: left; margin-top: -1px; /* overlap the cream close band above 1px → no seam line */ }
.cta__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
.cta__prompt {
  font-size: var(--step-2);
  font-weight: 900; /* Cabinet Grotesk Black — the prompt stands out */
  color: var(--color-on-dark);
  max-width: var(--span-3of4); /* span 3 of 4 columns */
  margin-top: var(--space-l); /* breathing room above the prompt */
  margin-bottom: var(--space-xl);
}
/* button with the paper aeroplane flying off to its right */
.cta__action-row { display: flex; align-items: center; gap: var(--space-m); margin-bottom: var(--space-2xs); }
.cta__button { font-size: var(--step-1); padding: 0.9em 1.6em; }
.cta__aeroplane { width: clamp(120px, 14vw, 200px); height: auto; overflow: visible; }
/* resting position for the inlined plane (tail on the trail's start); the
   fly-in animation in motion.css drives offset-distance from 100% to 0% */
.cta__aeroplane #aeroplane {
  offset-path: path("M107.5,52.6c-7.2,3-46.3,15.8-35.8,41.8s46.3,12,39.5-2.6S60.5,59.4,1,106.5");
  offset-distance: 0%;
  offset-rotate: 0deg;
  transition: transform 420ms var(--ease-out);
}
/* hovering / focusing EMAIL ME gives the rested plane a gentle nudge-and-lift
   (desktop reward; touch users just keep the resting composition) */
.cta__button:hover ~ .cta__aeroplane #aeroplane,
.cta__button:focus-visible ~ .cta__aeroplane #aeroplane {
  transform: translate(9px, -11px) rotate(-4deg);
}
.band--cta .cta-privacy { text-align: left; margin-inline: 0; }
/* signature is now an inline SVG (pen-stroke draw-on); size it like the wordmark */
.cta__signature {
  display: block;
  width: clamp(230px, 32vw, 420px);
  height: auto;
  margin-top: var(--space-l);
}

/* ============================================================
   BODY COPY — standardised running text: ~20px desktop, 1.5 leading.
   Headings, labels, captions, footer & fine print keep their own sizes.
   (Placed after the originals so it wins on source order.)
   ============================================================ */
.offer__narrative p,
.proof__lead,
.proof__sub,
.reframe__sub,
.anti-list__item,
.method__text,
.pyramid__statement,
.origin__beat,
.founder__bio,
.not-for__item,
.not-for__closer,
.answers__a,
.cta__prompt {
  font-size: var(--text-body);
  line-height: 1.5;
}

/* ============================================================
   11. RESPONSIVE — single column below 768px
   ============================================================ */
@media (max-width: 767.98px) {
  /* offer narrative stacks to one readable column on mobile */
  .offer__narrative { display: block; max-width: 60ch; }
  .offer__narrative p { margin-bottom: var(--space-m); }
  /* reframe heading/sub + cta prompt go full width on mobile */
  .band--reframe .cross-head, .reframe__sub, .cta__prompt, .cta-privacy { max-width: none; }
  /* proof/method collapse to one column — clear the 4-col span placement */
  .proof__body, .proof__visual, .method__body, .method__visual { grid-column: auto; }
  .proof__grid,
  .method__grid,
  .pyramid__grid,
  .not-for__grid,
  .origin__grid,
  .answers__grid {
    grid-template-columns: 1fr;
  }
  /* footer stacks to one column on mobile; legal returns left, below the links */
  .site-footer__inner { display: block; }
  .footer-copyright { text-align: left; margin-top: var(--space-m); }
  .footer-registration { margin-top: var(--space-m); }
  .band--method .cross-head { text-align: center; }
  .proof__body, .method__text, .not-for__body { max-width: none; }
  .deliverables { grid-template-columns: repeat(2, 1fr); }
  /* deliverables read better centred when stacked on mobile */
  .deliverable { text-align: center; }
  .deliverable__icon { margin-left: auto; margin-right: auto; }
  .deliverable__desc { max-width: 28ch; margin-left: auto; margin-right: auto; }
  /* origin grid collapses to 1 column via the shared rule above; clear the
     desktop 4-col placement and run the body full width */
  .origin__col, .origin__callout { grid-column: auto; }
  .origin__col { max-width: none; }
  /* handwritten line sits BEFORE the body, just under the heading */
  .origin__callout { order: -1; text-align: left; margin: 0 0 var(--space-s); transform: none; }
  /* Pyramid above text on mobile; statement sits lower, clear of the diagram */
  .pyramid__visual { order: -1; }
  .pyramid__text { margin-top: var(--space-2xl); }
  .method__visual { order: -1; }
  .band--not-for { display: flex; flex-direction: column; }
  .not-for__visual { position: relative; top: auto; right: auto; transform: none; width: 100%; max-width: none; order: -1; margin-bottom: var(--space-l); }
  .proof__visual { order: -1; margin-right: 0; width: 100%; justify-self: stretch; }
  .close-line--top { margin-left: 0; }
  .close-line--bottom { margin-right: 0; }
  /* Conveyor: the 50k/0-enquiries figures use pale ink that only reads over the
     dark belt, so keep the overlay — but lift it so both lines clear the boxes.
     Generous top margin gives breathing room after "gets cut" (impact is lifted). */
  .conveyor-scene { margin-top: var(--space-3xl); }
  .conveyor__impact-wrap { top: -34%; }
  /* tighter spacing into and out of the X-struck items */
  .anti-list { margin-top: var(--space-l); gap: var(--space-l) clamp(1rem, 4vw, 3rem); margin-bottom: var(--space-m); }
  /* founder portrait + HOWARD wordmark centre on mobile (bio stays as running text) */
  .founder { justify-content: center; }
  .founder__signature { display: block; margin-left: auto; margin-right: auto; }
}

/* Phones: deliverables stack one per row (avoids uneven 2-col card gaps) */
@media (max-width: 559.98px) {
  .deliverables { grid-template-columns: 1fr; }
}

/* The logo band is full-bleed; below the container width (1200px) there's no
   centering margin, so the space-between single row pushes the end logos into
   the angled torn edges and clips them.
   • Narrow / tablet-portrait (≤900px): a centred 2×2 grid.
   • Tablet-landscape (900–1199px): keep the single staggered row but pad it in
     from the edges (and size the logos up a touch) so it reads like desktop. */
@media (max-width: 899.98px) {
  .logo-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl) var(--space-l);
    justify-items: center;
    align-items: center;
  }
  .logo-row li:nth-child(1),
  .logo-row li:nth-child(2),
  .logo-row li:nth-child(3),
  .logo-row li:nth-child(4) { top: 0; }
}
@media (min-width: 900px) and (max-width: 1199.98px) {
  .logo-row { padding-inline: clamp(2.5rem, 7vw, 6rem); }
  .logo { height: clamp(44px, 5.4vw, 60px); }
}

/* ============================================================
   12. TORN-PAPER EDGES (match design mockup)
   Cream torn strips overlay the dark bands at each cream↔dark seam.
   The SVGs are already cream-filled:
     torn-edge-top.svg    = ragged TOP edge   (use at a band BOTTOM)
     torn-edge-bottom.svg = ragged BOTTOM edge (use at a band TOP)
   Dark bands: hero, credibility(3), origin(6), pyramid(8),
   answers(11), cta(13). Cream neighbours determine which edges get caps.
   ============================================================ */
.band--hero,
.band--pyramid,
.band--answers,
.band--cta { isolation: isolate; }

/* Cap at band BOTTOM (cream band below tears up → ragged-top strip) */
.band--pyramid::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  width: 100%; aspect-ratio: 3000 / 70.2; /* scale tear depth with width so teeth keep their shape */
  background: url('/assets/shapes/torn-edge-bottom.svg') center bottom / 100% 100% no-repeat;
  z-index: 6;
  pointer-events: none;
}
/* Band 11 (Two answers) is an ANGLED dark torn band (like Band 3) */
.band--answers::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px;
  width: 100%; aspect-ratio: 3000 / 218.8;
  background: url('/assets/shapes/torn-edge-top-angle.svg') center top / 100% 100% no-repeat;
  z-index: 6; pointer-events: none;
}
.band--answers::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  width: 100%; aspect-ratio: 3000 / 240.7;
  background: url('/assets/shapes/torn-edge-bottom-angle.svg') center bottom / 100% 100% no-repeat;
  z-index: 6; pointer-events: none;
}
/* Hero bottom transition is ANGLED in the design — use the purpose-built
   angled torn SVG (cream wedge, ragged angled edge), aligned to the hero
   bottom. aspect-ratio preserves the designed angle at any width. */
.band--hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px; /* overlap 1px to cover the subpixel seam */
  width: 100%;
  aspect-ratio: 3000 / 240.7;
  background: url('/assets/shapes/torn-edge-bottom-angle.svg') center bottom / 100% 100% no-repeat;
  z-index: 6;
  pointer-events: none;
}

/* (Band 6 / origin caps are the angled film-perforation edges defined with the band.) */
/* CTA band top transition is ANGLED in the design */
.band--cta::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  width: 100%; aspect-ratio: 3000 / 218.8;
  background: url('/assets/shapes/torn-edge-top-angle.svg') center top / 100% 100% no-repeat;
  z-index: 6; pointer-events: none;
}
/* CTA band BOTTOM tears into the plain black footer below (the torn strip is
   the footer's colour cutting up into the cosmic CTA background) */
.band--cta::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  width: 100%; aspect-ratio: 3000 / 70.2; /* scale tear depth with width so teeth keep their shape */
  background: url('/assets/shapes/torn-edge-bottom-000.svg') center bottom / 100% 100% no-repeat;
  z-index: 6; pointer-events: none;
}
/* Pyramid uses ::before for its cosmic bg; add its top cap is not needed
   (its top neighbour, method, is also dark). Its ::after (bottom) is set above. */

/* Give dark bands a little extra breathing room so torn caps don't crowd content.
   (band--answers is excluded — it has its own larger padding for the ANGLED edge.) */
.band--pyramid, .band--cta {
  padding-block: calc(var(--space-2xl) + 0.75rem);
}