/* ==========================================================================
   The Mindful Parenting Co. — styles
   Design language inspired by maximatherapy.com:
   bold flat colour blocks, giant condensed uppercase headlines, chunky
   rounded shapes, pill buttons, angled section breaks, tilted photos.
   ========================================================================== */

:root {
  /* Palette (Maxima-style) */
  --yellow: #FDCB40;
  --cream: #F3EFE0;
  --blue: #2668FD;
  --orange: #FD4401;
  --pink: #FFCCCD;
  --green: #1FA24A;
  --green-light: #A8E6A0;
  --lavender: #C9B8FF;
  --sky: #CFEAFF;
  --mist: #FDFAF6;
  --yarn: #FF2E2E;
  --navy: #14204D;
  --teal: #14A3A0;
  --coral: #FB4A5B;
  --ink: #111111;
  --white: #FFFFFF;

  /* Type */
  --display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Layout */
  --radius: 28px;
  --radius-lg: 36px;
  --header-h: 88px;
  --section-pad: clamp(72px, 10vw, 140px);
  --angle: 5vw;
}

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

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

/* Lenis smooth scrolling (see js/main.js → initSmoothScroll) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.menu-open { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.container {
  width: min(1200px, 100% - 48px);
  margin-inline: auto;
}
.container--narrow { width: min(820px, 100% - 48px); }
@media (max-width: 600px) {
  .container, .container--narrow { width: calc(100% - 32px); }
}

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

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
.display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  /* Anton's capitals rise 0.86em and a comma drops 0.12em below the baseline,
     so anything under 0.98 lets the next line's caps cut through the comma.
     1.0 clears it and stays about as tight as the face allows. */
  line-height: 1;
  letter-spacing: 0.01em;
  margin: 0;
}
.display-xl { font-size: clamp(60px, 12vw, 160px); }
.display-lg { font-size: clamp(46px, 8.5vw, 112px); }
.display-md { font-size: clamp(36px, 5.8vw, 76px); }
.display-sm { font-size: clamp(28px, 4vw, 48px); }

.lead {
  font-size: clamp(19px, 2.2vw, 26px);
  font-weight: 700;
  line-height: 1.4;
}
.body-lg { font-size: clamp(18px, 1.6vw, 21px); font-weight: 600; }

.text-orange { color: var(--orange); }
.text-blue { color: var(--blue); }
.text-yellow { color: var(--yellow); }
.text-cream { color: var(--cream); }
.text-green { color: var(--green); }
.text-pink { color: var(--pink); }
.text-ink { color: var(--ink); }
.text-navy { color: var(--navy); }
.text-center { text-align: center; }

.max-w-sm { max-width: 560px; }
.max-w-md { max-width: 720px; }
.max-w-lg { max-width: 960px; }
.mx-auto { margin-inline: auto; }

.mt-1 { margin-top: 12px; }
.mt-2 { margin-top: 24px; }
.mt-3 { margin-top: 40px; }
.mt-4 { margin-top: 64px; }
.mb-1 { margin-bottom: 12px; }
.mb-2 { margin-bottom: 24px; }
.mb-3 { margin-bottom: 40px; }

/* Chip / label */
.chip {
  display: inline-block;
  background: var(--blue);
  color: var(--white);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 8px;
  line-height: 1.2;
}
.chip--white { background: var(--white); color: var(--ink); }
.chip--orange { background: var(--orange); color: var(--white); }
.chip--yellow { background: var(--yellow); color: var(--ink); }
.chip--ink { background: var(--ink); color: var(--cream); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 28px;
  border-radius: 999px;
  border: 0;
  font: 800 17px/1 var(--body);
  text-decoration: none;
  cursor: pointer;
  background: var(--orange);
  color: var(--white);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px) scale(1.02); }
.btn:active { transform: translateY(0) scale(0.99); }
.btn svg { width: 20px; height: 20px; flex: none; }

.btn--white { background: var(--white); color: var(--ink); }
.btn--blue { background: var(--blue); color: var(--white); }
.btn--yellow { background: var(--yellow); color: var(--ink); }
.btn--green { background: var(--green); color: var(--white); }
.btn--pink { background: var(--pink); color: var(--ink); }
.btn--ink { background: var(--ink); color: var(--cream); }
.btn--ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 2.5px currentColor; }
.btn--lg { padding: 21px 36px; font-size: 19px; }
.btn--lg svg { width: 22px; height: 22px; }

.btn-circle {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  padding: 0;
  border: 0;
  background: var(--white);
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease;
  text-decoration: none;
  flex: none;
}
.btn-circle:hover { transform: scale(1.06); }
.btn-circle svg { width: 26px; height: 26px; }
.btn-circle--orange { background: var(--orange); color: var(--white); }
.btn-circle--outline { background: transparent; color: currentColor; box-shadow: inset 0 0 0 2.5px currentColor; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn-row--center { justify-content: center; }

/* Narrow phones: a long button label ("Start with a free clarity call") wraps
   onto two lines instead of pushing the page wider than the screen. */
@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; max-width: 100%; }
  .btn--lg { padding: 19px 26px; }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  pointer-events: none;
  gap: 12px;
}
.site-header > * { pointer-events: auto; }

/* --- Logo lockup -----------------------------------------------------------
   The supplied logo (assets/img/logo.webp, 1254x1254) is a stacked square:
   illustrated mark on top, "The Mindful Parenting Co." set beneath it. Shrunk
   into a header bar the type turns to mush, so here we crop to the mark alone
   and set the name in type beside it.

   Measured from the artwork:
     mark occupies      x 294-1015, y 72-710   (721 x 638)
     the small "The"    x 237-411,  y 620-692  -> clipped off the bottom-left
   The whole lockup sits on a white pill, matching the nav pill and circle
   buttons, so the navy type stays readable on every section colour.
   --------------------------------------------------------------------------- */
.logo {
  --mark-h: 52px;
  --s: calc(var(--mark-h) / 638);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  background: var(--white);
  border-radius: 999px;
  padding: 8px 20px 8px 10px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease;
}
.logo:hover { transform: translateY(-2px); }

.logo-mark {
  position: relative;
  display: block;
  flex: none;
  height: var(--mark-h);
  width: calc(721 * var(--s));
  overflow: hidden;
  /* drop the bottom-left corner, where the artwork's small "The" sits */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 18% 100%, 18% 85%, 0 85%);
}
.logo-mark img {
  position: absolute;
  left: calc(-294 * var(--s));
  top: calc(-72 * var(--s));
  width: calc(1254 * var(--s));
  height: calc(1254 * var(--s));
  max-width: none;
}

.logo-word {
  display: block;
  line-height: 1.05;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.logo-word b {
  display: block;
  font-weight: 900;
  font-size: 19px;
  color: var(--navy);
}
.logo-word i {
  display: block;
  font-style: normal;
  font-weight: 900;
  font-size: 19px;
  color: var(--coral);
}

@media (max-width: 760px) {
  .logo { --mark-h: 44px; padding: 7px 16px 7px 9px; gap: 7px; }
  .logo-word b, .logo-word i { font-size: 16px; }
}
@media (max-width: 420px) {
  .logo { --mark-h: 40px; padding: 6px 13px 6px 7px; }
  .logo-word b, .logo-word i { font-size: 14px; }
}

.header-right { display: flex; align-items: center; gap: 10px; }

.nav-links {
  display: none;
  gap: 2px;
  background: var(--white);
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06);
}
.nav-links a {
  padding: 11px 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  color: var(--ink);
  transition: background 0.2s ease;
}
.nav-links a:hover, .nav-links a.is-active { background: var(--cream); }
@media (min-width: 1000px) { .nav-links { display: flex; } }

.header-cta .btn-label-short { display: none; }
@media (max-width: 520px) {
  .header-cta { padding: 15px 20px; font-size: 15px; }
  .header-cta .btn-label-long { display: none; }
  .header-cta .btn-label-short { display: inline; }
  .btn-circle { width: 52px; height: 52px; }
}
/* Narrow phones: the logo, "Book a call" and the menu button were 14px wider
   than a 360px screen, which made the phone zoom the whole page out. Slimmer
   margins and a slightly smaller button and menu circle (still 46px, a
   comfortable thumb size) bring it inside. */
@media (max-width: 400px) {
  .site-header { padding: 12px; gap: 8px; }
  .header-right { gap: 8px; }
  .header-cta { padding: 13px 16px; font-size: 14px; }
  .site-header .btn-circle { width: 46px; height: 46px; }
}
/* the smallest phones: the logo's picture without the words */
@media (max-width: 340px) {
  .site-header .logo-word { display: none; }
  .site-header .logo { padding: 6px 8px; }
}

/* Menu overlay */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--blue);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(92px, 13vh, 110px) 24px clamp(22px, 4vh, 40px);
  transform: translateY(-102%);
  transition: transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);
  overflow-y: auto;
  overflow-x: hidden;
  /* keep a scroll inside the menu from dragging the page behind it, and let
     phones use their own momentum while it is open */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 760px) {
  /* a shorter slide reads as quicker on a phone, where the menu fills the screen */
  .menu { transition-duration: 0.4s; }
}
body.menu-open .nav-links { opacity: 0; pointer-events: none; }
.nav-links { transition: opacity 0.3s ease; }
.menu.is-open { transform: none; }
/* auto margins centre it while still letting it scroll when it is too tall
   — justify-content: center would put the overflow out of reach */
.menu-inner { width: min(1200px, 100%); margin: auto; }
.menu-links { list-style: none; margin: 0; padding: 0; }
.menu-links li + li { margin-top: 4px; }
.menu-link {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(30px, min(8.5vw, 10.5vh), 104px);
  line-height: 0.98;
  color: var(--cream);
  text-decoration: none;
  display: inline-block;
  transition: color 0.2s ease, transform 0.2s ease;
}
.menu-link:hover { color: var(--yellow); transform: translateX(8px); }
.menu-link.is-active { color: var(--yellow); }
/* phones: each menu link a full 44px tall to tap, without spreading the list */
@media (max-width: 760px) {
  .menu-links li + li { margin-top: 0; }
  .menu-link { padding: 6px 0; }
  .menu .menu-sub { row-gap: 0; margin-top: 4px; }
  .menu .menu-sub a { padding-block: 9px; }
}
.menu-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 12px 0 0 6px;
}
.menu-sub a {
  font-weight: 800;
  font-size: 17px;
  text-decoration: none;
  opacity: 0.85;
  padding: 6px 0;
}
.menu-sub a:hover { opacity: 1; color: var(--yellow); }
.menu-footer {
  margin-top: clamp(18px, 4vh, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
/* phones: each button on its own full-width row, Instagram and Facebook
   together underneath (instead of Facebook dropping onto a line alone) */
@media (max-width: 520px) {
  .menu-footer .btn { flex: 1 1 100%; }
}
.menu-deco {
  position: absolute;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.18);
}

/* --------------------------------------------------------------------------
   Hero carousel & programme heroes
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--yellow);
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }

.hero--single { min-height: min(100svh, 900px); }
.hero--single .hero-slide { opacity: 1; visibility: visible; }

.bg-yellow { background: var(--yellow); }
.bg-cream { background: var(--cream); }
.bg-blue { background: var(--blue); color: var(--cream); }
.bg-orange { background: var(--orange); color: var(--cream); }
.bg-green { background: var(--green); color: var(--cream); }
.bg-green-light { background: var(--green-light); }
.bg-pink { background: var(--pink); }
.bg-lavender { background: var(--lavender); }
.bg-ink { background: var(--ink); color: var(--cream); }
.bg-white { background: var(--white); }
.bg-sky { background: var(--sky); }
.bg-mist { background: var(--mist); }

.scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.scene > * { position: absolute; }
.scene .sc { display: block; }
.scene .pos { left: var(--lm); }
@media (min-width: 761px) { .scene .pos { left: var(--ld, var(--lm)); } }
.blob { border-radius: 50%; display: block; }

.hero-card {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 3;
  width: min(600px, calc(100% - 32px));
  background: var(--orange);
  color: var(--cream);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 44px 32px 40px;
  text-align: center;
  text-decoration: none;
  display: block;
}
.hero-card .display { color: #FFF0B5; }
.hero-card .chip { margin-top: 18px; }
.hero-card p {
  font-weight: 700;
  font-size: clamp(18px, 2vw, 21px);
  margin: 18px auto 0;
  max-width: 440px;
}
.hero-card .btn-circle { margin-top: 24px; }
.hero-card--blue { background: var(--blue); }
.hero-card--blue .display { color: var(--yellow); }
.hero-card--green { background: var(--green); }
.hero-card--green .display { color: #FFF0B5; }
.hero-card--pink { background: var(--pink); color: var(--ink); }
.hero-card--pink .display { color: var(--orange); }

.hero-nav {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.hero-nav .btn-circle { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: auto; }
.hero-nav .hero-prev { left: 20px; }
.hero-nav .hero-next { right: 20px; }
.hero-nav .btn-circle:hover { transform: translateY(-50%) scale(1.06); }

.hero-dots {
  position: absolute;
  z-index: 4;
  bottom: 28px;
  left: 28px;
  display: flex;
  gap: 8px;
}
.hero-dots button {
  width: 12px; height: 12px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.55);
  transition: transform 0.2s ease, background 0.2s ease;
}
.hero-dots button.is-active { background: var(--white); transform: scale(1.3); }

@media (max-width: 760px) {
  .hero { min-height: 0; }
  .hero-slide { position: relative; display: none; opacity: 1; visibility: visible; }
  .hero-slide.is-active { display: block; }
  /* a single hero (the three step pages) is never marked active, so it has to
     be shown outright — without this the whole top section vanished on phones */
  .hero--single .hero-slide { display: block; }
  .scene { position: relative; height: 62svh; min-height: 400px; }
  .hero-card {
    position: relative;
    left: auto;
    transform: none;
    width: auto;
    margin: -56px 16px 0;
    border-radius: var(--radius-lg);
    padding: 40px 24px 36px;
  }
  .hero[data-carousel] .hero-card { padding-top: 64px; }
  .hero-nav { inset: auto 0 auto 0; top: calc(62svh - 56px - 29px); height: 0; display: flex; justify-content: center; gap: 22px; }
  .hero-nav .btn-circle { position: static; transform: none; }
  .hero-nav .btn-circle:hover { transform: scale(1.06); }
  .hero-dots { bottom: auto; top: calc(62svh - 56px - 34px); left: 20px; }
  .hero--single .scene { height: 56svh; }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section {
  padding: var(--section-pad) 0;
  position: relative;
}
.section--tight { padding: clamp(48px, 6vw, 88px) 0; }

.angle-top {
  clip-path: polygon(0 0, 100% var(--angle), 100% 100%, 0 100%);
  margin-top: calc(var(--angle) * -1);
  padding-top: calc(var(--section-pad) + var(--angle));
}
.angle-top--rev {
  clip-path: polygon(0 var(--angle), 100% 0, 100% 100%, 0 100%);
}

.two-col {
  display: grid;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.two-col > * { min-width: 0; }   /* never let one side force the page wider than the screen */
/* phones: words before the photo (Our Story, so its two photos don't land
   one straight after the other) */
@media (max-width: 859px) {
  .two-col--text-first-on-phone > :first-child { order: 2; }
}
@media (min-width: 860px) {
  .two-col { grid-template-columns: 1fr 1fr; }
  .two-col--photo-right { grid-template-columns: 1.15fr 0.85fr; }
  .two-col--photo-left { grid-template-columns: 0.85fr 1.15fr; }
}

/* Steps */
.steps {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.step {
  background: var(--white);
  border-radius: var(--radius);
  padding: 34px 30px 32px;
  position: relative;
  color: var(--ink);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease;
}
a.step:hover { transform: translateY(-4px) rotate(-0.5deg); }
.step-num {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--blue); color: var(--white);
  font: 400 30px/1 var(--display);
  display: grid; place-items: center;
  margin-bottom: 22px;
}
.step:nth-child(2) .step-num { background: var(--orange); }
.step:nth-child(3) .step-num { background: var(--green); }
.step h3 { font-size: 25px; font-weight: 900; margin: 0 0 6px; line-height: 1.15; }
.step .step-meta { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.step p { color: #333; flex: 1; }
.step .step-link { margin-top: 18px; font-weight: 900; color: var(--orange); display: inline-flex; align-items: center; gap: 6px; }
.step .step-link svg { width: 18px; height: 18px; }

/* Includes list (programme pages) */
.includes { border-top: 2px solid rgba(0, 0, 0, 0.12); }
.bg-blue .includes, .bg-orange .includes, .bg-green .includes, .bg-ink .includes { border-color: rgba(255, 255, 255, 0.25); }
.include {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 28px;
  padding: 32px 0;
  border-bottom: 2px solid rgba(0, 0, 0, 0.12);
}
.bg-blue .include, .bg-orange .include, .bg-green .include, .bg-ink .include { border-color: rgba(255, 255, 255, 0.25); }
.include h3 { margin: 0; font-size: clamp(22px, 2.4vw, 28px); font-weight: 900; line-height: 1.15; }
.include p { font-size: 18px; font-weight: 600; }
@media (max-width: 700px) {
  .include { grid-template-columns: 1fr; gap: 8px; padding: 26px 0; }
}

/* Photos */
.photo {
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--pink);
  position: relative;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
}
.photo--wide { aspect-ratio: 4 / 3; }
.photo--square { aspect-ratio: 1; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo.is-placeholder { background: var(--pink); }
.photo.is-placeholder::before {
  content: "";
  position: absolute;
  left: 50%; top: 40%;
  width: 34%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--orange);
  opacity: 0.9;
}
.photo.is-placeholder::after {
  content: "Your photo here";
  position: absolute;
  left: 0; right: 0; bottom: 14%;
  text-align: center;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
}
.tilt-l { transform: rotate(-3deg); }
.tilt-r { transform: rotate(3deg); }
.tilt-l-sm { transform: rotate(-1.5deg); }
.tilt-r-sm { transform: rotate(1.5deg); }


/* Quote / manifesto */
.manifesto { max-width: 1100px; }
.quote-by {
  margin-top: 28px;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.04em;
}

/* Feature list (about) */
.cred-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cred-list li {
  display: flex; align-items: center; gap: 14px;
  font-weight: 800; font-size: 18px;
  background: var(--white); padding: 16px 20px; border-radius: 16px;
}
.cred-list svg { width: 26px; height: 26px; color: var(--green); flex: none; }

/* Next stop */
.next-stop {
  display: block;
  text-decoration: none;
  padding: clamp(60px, 9vw, 120px) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: filter 0.2s ease;
}
.next-stop:hover { filter: brightness(1.05); }
.next-stop small {
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; font-size: 14px;
  display: block; margin-bottom: 14px;
}
.next-stop .btn-circle { margin-top: 28px; }

/* Contact */
.contact-buttons {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.contact-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 26px;
  border-radius: 24px;
  text-decoration: none;
  font-weight: 900;
  font-size: 20px;
  color: var(--ink);
  background: var(--white);
  transition: transform 0.2s ease;
  line-height: 1.15;
}
.contact-btn:hover { transform: translateY(-3px) rotate(-0.4deg); }
.contact-btn svg { width: 34px; height: 34px; flex: none; }
.contact-btn small { display: block; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; margin-bottom: 4px; }
.contact-btn--call { background: var(--orange); color: var(--white); }
.contact-btn--wa { background: var(--green); color: var(--white); }
.contact-btn--mail { background: var(--blue); color: var(--white); }
.contact-btn--ig { background: var(--pink); color: var(--ink); }
.contact-btn--fb { background: var(--yellow); color: var(--ink); }

.info-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.info-grid h4 { margin: 0 0 6px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); }
.info-grid p { font-weight: 700; }

/* Form */
.form {
  display: grid;
  gap: 18px;
  background: var(--white);
  padding: clamp(24px, 4vw, 40px);
  border-radius: var(--radius);
}
.form-row { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
/* Text boxes have a built-in minimum width that grid layouts respect, which
   pushed the contact page wider than a small phone. Let them shrink. */
.form > *, .form label, .form input, .form textarea, .form select { min-width: 0; }
.form label { font-weight: 800; font-size: 15px; display: grid; gap: 7px; }
.form input, .form textarea, .form select {
  font: 600 17px var(--body);
  padding: 15px 16px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 14px;
  background: var(--cream);
  width: 100%;
  color: var(--ink);
}
.form input:focus, .form textarea:focus, .form select:focus {
  outline: none; border-color: var(--blue); background: var(--white);
}
.form textarea { min-height: 140px; resize: vertical; }
.form-note { font-size: 14px; font-weight: 600; opacity: 0.7; }

/* FAQ */
.faq details {
  background: var(--white);
  border-radius: 20px;
  padding: 0 26px;
  margin-bottom: 12px;
  transition: background 0.2s ease;
}
.faq details[open] { background: var(--white); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 24px 0;
  font-weight: 900;
  font-size: clamp(18px, 2vw, 21px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  line-height: 1.25;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font: 400 34px/1 var(--display);
  color: var(--orange);
  flex: none;
  margin-block: -8px;          /* so the icon never makes the question taller than its text */
  transition: transform 0.2s ease;
}
/* open: the plus turns into a cross */
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 12px; color: #333; font-weight: 600; }
/* The space under an answer is padding, not margin: a bottom margin slips out
   of the card (nothing below it to hold it in), which left the answer sitting
   almost on the card's edge. 22px (plus the line's own breathing room)
   matches the gap above the answer. */
.faq details p:last-child { margin-bottom: 0; padding-bottom: 22px; }

/* Testimonials (ready for when you have clients) */
.testimonial { text-align: center; }
.testimonial .display { color: var(--yellow); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(64px, 8vw, 100px) 0 36px;
  position: relative;
  overflow: hidden;
}
.footer-top {
  display: grid;
  gap: 40px;
  grid-template-columns: 1.6fr 1fr 1fr;
  position: relative;
}
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }
.footer-brand .logo { --mark-h: 64px; padding: 10px 24px 10px 12px; }
.footer-brand .logo-word b, .footer-brand .logo-word i { font-size: 23px; }
.footer-brand p { margin-top: 18px; max-width: 360px; font-weight: 600; opacity: 0.85; }
.footer-brand .btn { margin-top: 22px; }
.footer-col h4 {
  margin: 0 0 16px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
}
.footer-col a {
  display: block;
  text-decoration: none;
  font-weight: 800;
  padding: 6px 0;
  color: var(--cream);
  transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--yellow); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 14px;
  font-weight: 700;
  opacity: 0.7;
}
.footer-deco { position: absolute; right: -40px; bottom: -40px; width: 320px; color: rgba(255, 255, 255, 0.06); --c2: rgba(255, 255, 255, 0.1); pointer-events: none; }

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal.in { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -14px; }
}
@keyframes floatSlow {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}
@keyframes bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 6px; }
}
@keyframes spin { to { rotate: 360deg; } }
.float { animation: float 6s ease-in-out infinite; }
.float-slow { animation: floatSlow 9s ease-in-out infinite; }
.float-d1 { animation-delay: -2s; }
.float-d2 { animation-delay: -4s; }
.bob { animation: bob 3s ease-in-out infinite; }
.spin { animation: spin 40s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .float, .float-slow, .bob, .spin, .hero-sun { animation: none; }
  html { scroll-behavior: auto; }
}

/* Decorative clouds that peek over section edges */
.peek-cloud {
  position: absolute;
  color: var(--white);
  pointer-events: none;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   Page heroes (Our Story / FAQ / Contact)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + 56px) 0 var(--section-pad);
  min-height: 72svh;
  display: flex;
  align-items: flex-end;
}
.page-hero .scene { position: absolute; inset: 0; }
.page-hero .container { position: relative; z-index: 2; }
.page-hero--center { align-items: center; text-align: center; min-height: 0; }

/* Full-height welcome hero (home page) */
.page-hero--full {
  min-height: 100svh;
  align-items: center;
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: clamp(48px, 8vw, 100px);
}
.page-hero--full .display-xl { line-height: 0.9; }

.figures-box {
  position: relative;
  height: 250px;
  margin: 0 auto 24px;
  width: min(760px, 100%);
}
.figures-box .scene { position: absolute; inset: 0; height: auto; min-height: 0; }

.story-text p { font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; }
.story-text p strong { font-weight: 900; }

/* ==========================================================================
   Programme-page visuals
   These replace the long paragraphs on the three process pages. Each one
   carries the explanation in shape, sequence and colour, with text kept to a
   short heading plus one line.
   ========================================================================== */

/* --- Flow: a sequence of steps ------------------------------------------
   Horizontal on desktop with a connecting rail; stacks to a vertical
   timeline on phones. Used for "how the hour goes" and "how a week works".
   --------------------------------------------------------------------- */
.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(4, 1fr);
}
.flow--3 { grid-template-columns: repeat(3, 1fr); }

.flow-step { position: relative; text-align: center; }
.flow-step::before {                     /* the rail between dots */
  content: "";
  position: absolute;
  top: 42px;
  left: calc(50% + 52px);
  right: calc(-50% + 52px);
  height: 5px;
  border-radius: 3px;
  background: currentColor;
  opacity: 0.22;
}
.flow-step:last-child::before { display: none; }

.flow-dot {
  position: relative;
  z-index: 1;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  background: var(--white);
  color: var(--blue);
  box-shadow: 0 8px 22px rgba(20, 32, 77, 0.13);
}
.flow-dot svg { width: 38px; height: 38px; }
.flow-dot--orange { color: var(--orange); }
.flow-dot--green { color: var(--green); }
.flow-dot--coral { color: var(--coral); }
.flow-dot--teal { color: var(--teal); }

.flow-time {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 7px;
}
.flow-step h3 {
  margin: 0 0 7px;
  font-size: clamp(20px, 2vw, 25px);
  font-weight: 900;
  line-height: 1.1;
  text-wrap: balance;
}
.flow-step p {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  opacity: 0.88;
  text-wrap: pretty;
}

@media (max-width: 900px) {
  .flow, .flow--3 { grid-template-columns: 1fr 1fr; }
  .flow-step:nth-child(2n)::before { display: none; }
}
@media (max-width: 620px) {
  .flow, .flow--3 { grid-template-columns: 1fr; gap: 26px; }
  .flow-step {
    display: grid;
    grid-template-columns: 68px 1fr;
    gap: 18px;
    text-align: left;
    align-items: start;
  }
  .flow-dot { width: 68px; height: 68px; margin: 0; }
  .flow-dot svg { width: 32px; height: 32px; }
  .flow-step::before,
  .flow-step:nth-child(2n)::before {
    display: block;
    top: 76px;
    bottom: -26px;
    left: 32px;
    right: auto;
    width: 5px;
    height: auto;
  }
  .flow-step:last-child::before { display: none; }
}

/* --- Icon cards ----------------------------------------------------------
   Deliberately uneven: the first card runs wider so the row does not read as
   three identical columns.
   --------------------------------------------------------------------- */
.icon-cards {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.icon-cards--lead { grid-template-columns: 1.35fr 1fr 1fr; }
@media (max-width: 920px) { .icon-cards--lead { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .icon-cards, .icon-cards--lead { grid-template-columns: 1fr; } }

.icon-card {
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 34px 30px 32px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(20, 32, 77, 0.07);
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
.icon-card:hover { transform: translateY(-5px); }
.ic-badge {
  width: 78px;
  height: 78px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  background: var(--yellow);
  color: var(--ink);
}
.ic-badge svg { width: 36px; height: 36px; }
.ic-badge--blue { background: var(--blue); color: var(--white); }
.ic-badge--orange { background: var(--orange); color: var(--white); }
.ic-badge--green { background: var(--green); color: var(--white); }
.ic-badge--pink { background: var(--pink); color: var(--orange); }
.ic-badge--teal { background: var(--teal); color: var(--white); }
.ic-badge--coral { background: var(--coral); color: var(--white); }
.icon-card h3 {
  margin: 0 0 8px;
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 900;
  line-height: 1.12;
  text-wrap: balance;
}
.icon-card p {
  margin: 0;
  font-size: 16.5px;
  font-weight: 600;
  color: #45484f;
  text-wrap: pretty;
}

/* --- Topic pills --------------------------------------------------------- */
.topics { display: flex; flex-wrap: wrap; gap: 12px; }
.topic {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  color: var(--ink);
  border-radius: 999px;
  padding: 14px 24px;
  font-weight: 800;
  font-size: clamp(15px, 1.5vw, 18px);
  box-shadow: 0 4px 14px rgba(20, 32, 77, 0.07);
}
.topic svg { width: 19px; height: 19px; color: var(--green); flex: none; }

/* --- Cadence: dot calendars comparing weekly vs monthly ------------------ */
.cadence {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.cadence-phase {
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 32px 30px;
  box-shadow: 0 10px 30px rgba(20, 32, 77, 0.07);
}
.cadence-tag {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue);
}
.cadence-phase h3 {
  margin: 6px 0 0;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 900;
  line-height: 1.1;
}
.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
  margin: 22px 0 18px;
}
.cal span {
  aspect-ratio: 1;
  border-radius: 7px;
  background: rgba(20, 32, 77, 0.08);
}
.cal span.on { background: var(--orange); }
.cadence-phase--calm .cal span.on { background: var(--green); }
.cadence-phase p {
  margin: 0;
  font-size: 16.5px;
  font-weight: 600;
  color: #45484f;
}

/* --- Reassurance strip --------------------------------------------------- */
.assure {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.assure div { display: flex; align-items: center; gap: 14px; font-weight: 800; font-size: 17px; }
.assure svg { width: 34px; height: 34px; flex: none; }


/* ==========================================================================
   Word play
   A self-playing loop: one word at a time pops in letter by letter, erases,
   and the next one follows. Every word sits in the same grid cell so nothing
   moves down the page and the band stays one screen tall.
   Letters are solid the whole time — never faded. Each one grows out of its own
   point, in its own place in the word, and shrinks back into that same point.
   The motion is pure scale, no opacity.

   Every letter is the same size and carries a tilt (--r), a vertical nudge (--y)
   and two stagger delays: --d going in, --dout coming out. All set in js/main.js.
   Markup: <section class="wordplay bg-cream" data-words="breathe,connect,grow"></section>
   ========================================================================== */
.wordplay {
  overflow: hidden;
  padding: 0;
}
.wp-stage {
  display: grid;
  align-items: center;
  justify-items: center;
  min-height: 78svh;
}
.wp-word {
  grid-area: 1 / 1;              /* every word shares one cell */
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}
.wp-l {
  display: inline-block;
  font-family: 'Fredoka', 'Nunito', sans-serif;
  font-weight: 600;
  font-size: max(58px, min(calc(162vw / var(--n, 6)), 54vh));
  line-height: 0.8;
  letter-spacing: 0.015em;
  color: var(--blue);
  transform-origin: center;
  opacity: 1;                        /* solid at every moment */

  /* resting: shrunk to nothing, right where it belongs in the word */
  transform: translateY(var(--y)) rotate(var(--r)) scale(0);
  transition: transform 0.6s cubic-bezier(0.55, 0, 0.62, 0.25);
  transition-delay: var(--dout);
}
.wp-word.in .wp-l {
  /* grows out of that same point to full size */
  transform: translateY(var(--y)) rotate(var(--r)) scale(1);
  transition: transform 0.78s cubic-bezier(0.22, 1.28, 0.36, 1);
  transition-delay: var(--d);
  will-change: transform;
}

/* colour variants — put the class on the section */
.wordplay--orange .wp-l { color: var(--orange); }
.wordplay--cream .wp-l { color: var(--cream); }
.wordplay--yellow .wp-l { color: var(--yellow); }
.wordplay--coral .wp-l { color: var(--coral); }

@media (max-width: 700px) {
  .wp-stage { min-height: 58svh; }
  /* a touch smaller so a tilted letter never kisses the screen edge */
  .wp-l { font-size: max(52px, min(calc(150vw / var(--n, 6)), 40vh)); }
}

/* Reduced motion: no loop, no animation — the words simply stack, all visible. */
.wordplay.wp-static .wp-stage {
  display: block;
  min-height: 0;
  padding: clamp(40px, 7vw, 90px) 0;
}
.wordplay.wp-static .wp-word {
  min-height: 0;
  margin: clamp(10px, 2vw, 26px) 0;
}
.wordplay.wp-static .wp-l {
  transform: rotate(var(--r));
  opacity: 1;
  transition: none;
  will-change: auto;
}

/* ==========================================================================
   Site flow diagram (home)
   A small map of the site so a visitor can see where everything leads.
   ========================================================================== */
.sitemap {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  align-items: start;
  position: relative;
}
.sm-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  padding-top: 4px;
  transition: transform 0.3s cubic-bezier(0.22, 1.2, 0.36, 1);
}
.sm-node:hover { transform: translateY(-5px); }
.sm-node::before {
  content: "";
  position: absolute;
  top: 34px;
  left: calc(50% + 40px);
  right: calc(-50% + 40px);
  height: 4px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.2;
}
.sm-node:last-of-type::before { display: none; }
.sm-dot {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--white);
  color: var(--blue);
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 18px rgba(20, 32, 77, 0.12);
}
.sm-dot svg { width: 30px; height: 30px; }
.sm-dot--orange { color: var(--orange); }
.sm-dot--green { color: var(--green); }
.sm-dot--coral { color: var(--coral); }
.sm-dot--teal { color: var(--teal); }
.sm-node b { font-size: 16px; font-weight: 900; line-height: 1.15; display: block; }
.sm-node span { font-size: 13px; font-weight: 700; opacity: 0.72; line-height: 1.2; }
.sm-sub {
  grid-column: 2 / 5;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 6px;
  padding-top: 18px;
  border-top: 3px dashed rgba(20, 32, 77, 0.18);
}
.sm-sub a {
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
  background: var(--white);
  border-radius: 999px;
  padding: 10px 8px;
  text-align: center;
  color: var(--ink);
  transition: transform 0.25s ease;
}
.sm-sub a:hover { transform: translateY(-3px); }
@media (max-width: 760px) {
  .sitemap { grid-template-columns: repeat(3, 1fr); gap: 20px 8px; }
  .sm-node::before { display: none; }
  .sm-dot { width: 58px; height: 58px; }
  .sm-dot svg { width: 26px; height: 26px; }
  .sm-node b { font-size: 14px; }
  .sm-node span { font-size: 12px; }
  .sm-sub { grid-column: 1 / -1; }
}

/* ==========================================================================
   Balloons (journey)
   Three classic rubber balloons, one per step. Layers, outside in:
     .balloon     its place in the row; fades in on scroll (.reveal)
     .bl-magnet   drawn toward a nearby cursor (js/main.js sets --mx / --my)
     .bl-float    bobs and sways gently, forever
     .bl-spin     spins when clicked; holds the front and back faces
   The knot and string hang from .bl-float, so they bob but never spin.
   Each click turns it half way round (--turn, set in js/main.js), so the
   balloon lands on its other side. (This flat version is the fallback; when
   3D can run, js/balloons3d.js draws the balloon instead.)
   ========================================================================== */
.balloon-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3vw, 40px);
  justify-items: center;
}
@media (max-width: 880px) {
  .balloon-row { grid-template-columns: 1fr; gap: 6px; }
  .balloon-row .balloon { width: min(84vw, 330px); }   /* stacked: bigger, so the back reads easily */
}

.balloon {
  --c: var(--coral);
  --c-dark: #C42638;
  position: relative;
  width: min(100%, clamp(260px, 26vw, 340px));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.balloon--2 { --c: var(--blue); --c-dark: #1743B5; }
.balloon--3 { --c: var(--green); --c-dark: #127034; }

/* for the keyboard and screen readers: an invisible button that spins it */
.bl-toggle {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.balloon:has(.bl-toggle:focus-visible) .bl-spin {
  outline: 3px solid var(--navy);
  outline-offset: 6px;
  border-radius: 50%;
}

.bl-magnet {
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: transform 0.7s cubic-bezier(0.22, 1.35, 0.36, 1);   /* a springy pull */
}
.bl-float {
  position: relative;
  margin-bottom: clamp(84px, 9vw, 118px);    /* room for the string */
  perspective: 1100px;
  animation: bl-bob 5.2s ease-in-out infinite;
}
.balloon--2 .bl-float { animation-duration: 5.8s; animation-delay: -1.9s; }
.balloon--3 .bl-float { animation-duration: 4.9s; animation-delay: -3.3s; }
@keyframes bl-bob {
  0%, 100% { translate: 0 0; rotate: -2deg; }
  50% { translate: 0 -12px; rotate: 2deg; }
}
/* while its back (the reading side) faces you, the balloon still bobs but
   stays level, so the words don't lean like italics */
.balloon.is-back .bl-float { animation-name: bl-bob-level; }
@keyframes bl-bob-level {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}

.bl-spin {
  position: relative;
  aspect-ratio: 5 / 6;
  transform-style: preserve-3d;
  transform: rotateY(var(--turn, 0deg));
  transition: transform 1.15s cubic-bezier(0.65, 0, 0.35, 1);      /* starts and finishes gently */
}

/* both sides share the balloon's shape: fuller at the top, narrowing to the knot */
.bl-face {
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 50% 50% / 46% 46% 54% 54%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 15% 14% 17%;
  box-shadow:
    inset -22px -30px 50px rgba(0, 0, 0, 0.22),
    inset 16px 14px 34px rgba(255, 255, 255, 0.22),
    0 22px 40px rgba(20, 32, 77, 0.2);
}
/* the shine, where the rubber catches the light */
.bl-face::before {
  content: "";
  position: absolute;
  left: 17%;
  top: 10%;
  width: 24%;
  height: 15%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%);
  rotate: -28deg;
  pointer-events: none;
}
.bl-front {
  color: var(--white);
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--c) 62%, white) 0%, var(--c) 42%, var(--c-dark) 100%);
}
/* the back: the same balloon in a pale tint, so the details read easily */
.bl-back {
  transform: rotateY(180deg);
  color: var(--ink);
  background: radial-gradient(circle at 34% 28%, #FFFFFF 0%, color-mix(in srgb, var(--c) 12%, white) 52%, color-mix(in srgb, var(--c) 34%, white) 100%);
}

.bl-step {
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.24);
  padding: 6px 12px;
  border-radius: 999px;
}
.bl-title {
  margin-top: 12px;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(34px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.14);
}
.bl-hint {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  opacity: 0.92;
}
.bl-hint svg { width: 16px; height: 16px; }

.bl-back h3 { margin: 0 0 3px; font-size: 20px; font-weight: 900; line-height: 1.1; }
.bl-back p { margin: 0 0 8px; font-size: 12.5px; font-weight: 800; color: var(--c-dark); }
.bl-back ul { list-style: none; margin: 0 0 10px; padding: 0; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.bl-back li + li { margin-top: 5px; }
.bl-back .btn { padding: 11px 18px; font-size: 14px; background: var(--c-dark); color: var(--white); }

/* the knot, and the string hanging from it */
.bl-knot {
  position: absolute;
  left: 50%;
  top: calc(100% - 4px);
  width: 16px;
  height: 12px;
  margin-left: -8px;
  background: var(--c-dark);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.bl-string {
  position: absolute;
  left: 50%;
  top: calc(100% + 7px);
  width: 30px;
  height: clamp(76px, 8.5vw, 108px);
  margin-left: -15px;
  overflow: visible;
  transform-origin: 50% 0;
  animation: bl-sway 3.6s ease-in-out infinite;
}
.bl-string path { fill: none; stroke: rgba(20, 32, 77, 0.45); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
@keyframes bl-sway {
  0%, 100% { rotate: 4deg; }
  50% { rotate: -4deg; }
}

@media (prefers-reduced-motion: reduce) {
  .bl-float, .bl-string { animation: none; }
  .bl-spin { transition: none; }
  .bl-magnet { transform: none; }
}

/* 3D mode (js/balloons3d.js adds .balloon--3d once it has drawn the balloon).
   The 3D canvas takes over the picture; the flat faces stay in the page,
   invisible, so screen readers and search engines still get the words. */
.bl-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.balloon--3d .bl-spin { transform: none; transition: none; }
.balloon--3d .bl-face { opacity: 0; pointer-events: none; }
.balloon--3d .bl-knot { display: none; }                 /* the 3D balloon has its own */
.balloon--3d .bl-string { top: calc(100% - 3px); }
/* the "See step" link, sitting on the back's printed label once it faces you */
.bl-cta {
  position: absolute;
  left: 50%;
  z-index: 2;
  translate: -50% -50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.balloon.is-back .bl-cta { opacity: 1; pointer-events: auto; }
.bl-cta .btn { padding: 11px 20px; font-size: 14px; background: var(--white); color: var(--c-dark); }

/* ==========================================================================
   Zoom cards (journey, how it works) — lift and magnify on hover, no flip
   ========================================================================== */
.zoom-cards { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .zoom-cards { grid-template-columns: 1fr; } }
.zoom-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  padding: 34px 30px 32px;
  text-decoration: none;
  color: var(--white);
  display: flex;
  flex-direction: column;
  min-height: 300px;
  isolation: isolate;
  transition: transform 0.45s cubic-bezier(0.22, 1.2, 0.36, 1),
              box-shadow 0.45s ease;
}
.zoom-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--wash);
  transition: transform 0.6s cubic-bezier(0.22, 1.1, 0.36, 1);
}
.zoom-card:hover { transform: translateY(-8px); box-shadow: 0 26px 50px rgba(20, 32, 77, 0.2); }
.zoom-card:hover::before { transform: scale(1.14); }
.zoom-card:hover .zc-icon { transform: scale(1.16) rotate(-6deg); }
.zoom-1 { --wash: radial-gradient(120% 90% at 20% 10%, #FF8A3C, #FD4401); }
.zoom-2 { --wash: radial-gradient(120% 90% at 20% 10%, #5B8CFF, #2668FD); }
.zoom-3 { --wash: radial-gradient(120% 90% at 20% 10%, #38C46B, #1FA24A); }
.zc-icon {
  width: 74px;
  height: 74px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.22);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  transition: transform 0.45s cubic-bezier(0.22, 1.3, 0.36, 1);
}
.zc-icon svg { width: 34px; height: 34px; }
.zc-step {
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.88;
  margin-bottom: 6px;
}
.zoom-card h3 { margin: 0 0 8px; font-size: 25px; font-weight: 900; line-height: 1.1; }
.zoom-card p { margin: 0; font-size: 16px; font-weight: 600; opacity: 0.95; }
.zc-go { margin-top: 18px; font-weight: 900; display: inline-flex; align-items: center; gap: 7px; }
.zc-go svg { width: 18px; height: 18px; }

/* ==========================================================================
   Big numbered rows (clarity call, what you leave with) — deliberately not cards
   ========================================================================== */
.bignums { border-top: 3px solid rgba(20, 32, 77, 0.14); }
.bignum {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 4vw, 54px);
  align-items: center;
  padding: clamp(26px, 3.5vw, 44px) 0;
  border-bottom: 3px solid rgba(20, 32, 77, 0.14);
  transition: padding-left 0.35s cubic-bezier(0.22, 1.2, 0.36, 1);
}
.bignum:hover { padding-left: 14px; }
.bignum-n {
  font-family: var(--display);
  font-size: clamp(64px, 11vw, 150px);
  line-height: 0.78;
  color: var(--orange);
  opacity: 0.9;
}
.bignum:nth-of-type(2) .bignum-n { color: var(--blue); }
.bignum:nth-of-type(3) .bignum-n { color: var(--green); }
.bignum h3 { margin: 0 0 6px; font-size: clamp(24px, 3vw, 38px); font-weight: 900; line-height: 1.08; }
.bignum p { margin: 0; font-size: clamp(16px, 1.7vw, 19px); font-weight: 600; opacity: 0.85; max-width: 46ch; }

/* ==========================================================================
   Quadrant panel (maintenance, what a check-in is for) — no card chrome
   ========================================================================== */
.quads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: rgba(20, 32, 77, 0.15);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (max-width: 680px) { .quads { grid-template-columns: 1fr; } }
.quad {
  background: var(--yellow);
  padding: clamp(26px, 3.4vw, 42px);
  display: flex;
  gap: 18px;
  align-items: flex-start;
  transition: background 0.35s ease;
}
.quad:hover { background: #FFD968; }
.quad svg { width: 42px; height: 42px; flex: none; color: var(--orange); }
.quad:nth-child(2) svg { color: var(--blue); }
.quad:nth-child(3) svg { color: var(--green); }
.quad:nth-child(4) svg { color: var(--coral); }
.quad h3 { margin: 0 0 6px; font-size: clamp(20px, 2.2vw, 25px); font-weight: 900; line-height: 1.1; }
.quad p { margin: 0; font-size: 16px; font-weight: 600; opacity: 0.82; }


/* ==========================================================================
   Nature scene box (FAQ) — taller than the small figures box
   ========================================================================== */
.nature-box {
  position: relative;
  height: clamp(250px, 34vw, 400px);
  width: min(900px, 100%);
  margin: 0 auto 26px;
}
.nature-box .scene { position: absolute; inset: 0; height: auto; min-height: 0; }

/* ==========================================================================
   Ask a question box (FAQ)
   ========================================================================== */
.ask {
  background: var(--white);
  border-radius: var(--radius);
  padding: clamp(26px, 4vw, 44px);
  display: grid;
  gap: 16px;
  box-shadow: 0 14px 36px rgba(20, 32, 77, 0.09);
}
.ask h3 { margin: 0; font-size: clamp(24px, 3vw, 34px); font-weight: 900; line-height: 1.1; }
.ask p { margin: 0; font-weight: 600; opacity: 0.8; }
.ask textarea {
  font: 600 17px var(--body);
  padding: 16px;
  border: 2px solid rgba(20, 32, 77, 0.12);
  border-radius: 16px;
  background: var(--cream);
  min-height: 118px;
  resize: vertical;
  width: 100%;
  color: var(--ink);
}
.ask textarea:focus { outline: none; border-color: var(--blue); background: var(--white); }
.ask .btn { justify-self: start; }
.ask small { font-size: 14px; font-weight: 600; opacity: 0.65; }


/* ==========================================================================
   Contact deck
   One panel holding every way to reach Divya, leaning toward the cursor.
   The rows sit at different depths inside it, so they shift against each
   other as it turns — the list stays a plain readable list, the movement
   just gives it dimension. Static on touch screens and for reduced motion.
   ========================================================================== */
.deck {
  perspective: 1300px;
  perspective-origin: 50% 40%;
}
.deck-tilt {
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.22, 1.2, 0.36, 1);
}
.deck:hover .deck-tilt { transition-duration: 0.1s; }

.deck-panel {
  position: relative;
  background: var(--white);
  border-radius: 32px;
  padding: 16px;
  display: grid;
  gap: 10px;
  transform-style: preserve-3d;
  box-shadow:
    0 2px 0 rgba(20, 32, 77, 0.04),
    0 34px 70px rgba(20, 32, 77, 0.17);
}
/* a soft sheen that follows the pointer across the panel */
.deck-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 32px;
  background: radial-gradient(circle at var(--px, 50%) var(--py, 20%),
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 220, 140, 0.16) 38%,
    rgba(255, 255, 255, 0) 70%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.deck-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 17px 18px 17px 20px;
  border-radius: 22px;
  background: var(--cream);
  color: var(--ink);
  transform: translateZ(var(--z, 0px));
  transition: transform 0.35s cubic-bezier(0.22, 1.2, 0.36, 1),
              background 0.25s ease;
}
.deck-row:hover {
  background: #FFF8E8;
  transform: translateZ(calc(var(--z, 0px) + 30px));
}

/* The link's hit area is stretched over the whole row, so a tap anywhere
   still calls or opens it. Only the copy button sits above that layer. */
.deck-link {
  display: block;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.deck-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
}
.deck-link:focus-visible { outline: none; }
.deck-link:focus-visible::after {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.deck-copy {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 13px;
  border: 2px solid rgba(20, 32, 77, 0.12);
  background: var(--white);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
              transform 0.3s cubic-bezier(0.22, 1.3, 0.36, 1);
}
.deck-copy svg {
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.22, 1.3, 0.36, 1);
}
.deck-copy .dc-done { opacity: 0; transform: scale(0.4); }
.deck-copy:hover { border-color: rgba(20, 32, 77, 0.35); }
.deck-copy:active { transform: scale(0.9); }
.deck-copy:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
.deck-copy.is-copied {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}
.deck-copy.is-copied .dc-copy { opacity: 0; transform: scale(0.4); }
.deck-copy.is-copied .dc-done { opacity: 1; transform: none; }
/* darker than --green so the small label clears 4.5:1 on cream */
.deck-row.is-copied .deck-label { color: #157A37; opacity: 1; }

.deck-ic {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--white);
  flex: none;
}
.deck-ic svg { width: 24px; height: 24px; }
.deck-row--call .deck-ic { background: var(--orange); color: var(--white); }
.deck-row--wa .deck-ic { background: var(--green); color: var(--white); }
.deck-row--mail .deck-ic { background: var(--blue); color: var(--white); }
.deck-row--ig .deck-ic { background: var(--coral); color: var(--white); }
.deck-row--fb .deck-ic { background: var(--navy); color: var(--white); }

.deck-label {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 3px;
}
.deck-value {
  display: block;
  font-weight: 900;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.15;
  word-break: break-word;
}

/* The email row: the address is too long to share a line with the icon and
   buttons on a phone (or in the narrow two-column layout), so it gets a line
   of its own across the whole row, and never breaks. The stretched link still
   makes the whole row tappable.
   If the screen is narrower still, the address shrinks to fit: it is about
   15.4 times as wide as its font size, so 6.3% of the row's width (6.3cqi)
   is the largest size that always fits. Change that number if the address
   ever gets longer. */
.deck-row--wide {
  container-type: inline-size;
  row-gap: 8px;
}
.deck-row--wide .deck-label { margin: 0; }
.deck-row--wide .deck-link { grid-column: 1 / -1; }
.deck-row--wide .deck-value {
  white-space: nowrap;
  font-size: min(clamp(16px, 1.5vw, 19px), 6.3cqi);
}
.deck-go {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(20, 32, 77, 0.07);
  color: var(--ink);
  flex: none;
  transition: transform 0.3s cubic-bezier(0.22, 1.3, 0.36, 1), background 0.25s ease;
}
.deck-go svg { width: 17px; height: 17px; }
.deck-row:hover .deck-go { transform: translateX(3px); background: rgba(20, 32, 77, 0.13); }

/* Phones: the arrow gives way to the copy button. The whole row is still
   tappable, and two round buttons side by side read as two actions. */
@media (max-width: 520px) {
  .deck-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    padding: 15px 14px 15px 15px;
  }
  .deck-go { display: none; }
  .deck-copy { width: 42px; height: 42px; }
}

/* the strip along the bottom of the panel */
.deck-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 2px;
  transform: translateZ(var(--z, 0px));
}
@media (max-width: 520px) { .deck-foot { grid-template-columns: 1fr; } }
.deck-foot div {
  background: var(--cream);
  border-radius: 18px;
  padding: 15px 18px;
}
.deck-foot h4 {
  margin: 0 0 4px;
  font-size: 12.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue);
}
.deck-foot p { margin: 0; font-weight: 700; font-size: 14.5px; line-height: 1.3; }

@media (prefers-reduced-motion: reduce) {
  .deck-tilt { transform: none !important; transition: none; }
  .deck-row, .deck-foot { transform: none; }
  .deck-row:hover { transform: none; }
}


/* ==========================================================================
   Hero artwork
   Generated scenery that sits as a band along the bottom of a hero, with the
   headline in the clear space above it. The art is transparent above the
   horizon, so the section colour shows through as sky.
   Drop one in with:  <img class="hero-art" src="assets/img/hero-<page>.webp" alt="">
   ========================================================================== */
.hero-art {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: none;              /* the global img cap would fight the mobile scale-up */
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
/* the hero's own content has to sit above it */
.page-hero .container { position: relative; z-index: 2; }

/* Crop an artwork's empty upper sky away so the band sits lower and the words
   above it stay on clean colour. The image is anchored to its own bottom, so
   only sky is lost, never the scene. */
/* Let an artwork's own silhouette become the edge between two sections.
   The colour of the NEXT section is painted behind the image from --art-ground
   downwards, so wherever the artwork is transparent below that line the next
   section shows through. The join is then the shape of the artwork — a ridge,
   a treeline, a wiggly hill — instead of a straight rule.
   --art-ground is a percentage of the image's own height. */
.hero-art--ground {
  background: linear-gradient(
    to bottom,
    transparent 0 var(--art-ground, 78%),
    var(--art-ground-colour, var(--cream)) var(--art-ground, 78%) 100%);
}

/* Trim empty canvas from UNDER an artwork so its own bottom edge becomes the
   bottom of the section, with no band of background showing beneath it.
   --art-ratio = image width / kept height, and cropping from the top keeps
   the artwork itself while discarding the blank strip below it. */
.hero-art--trim {
  aspect-ratio: var(--art-ratio, 2.67);
  height: auto;
  object-fit: cover;
  object-position: center top;
}

.hero-art--crop {
  /* A fixed aspect ratio, not a percentage height: a percentage is relative to
     the hero, so the amount cropped would drift with the window width and
     details could creep back into the text. This keeps the crop constant.
     --art-ratio = image width / kept height. The source is 2000 x 750, so
     4.3 keeps the bottom 62% of it. */
  aspect-ratio: var(--art-ratio, 4.3);
  height: auto;
  object-fit: cover;
  object-position: center bottom;
}

/* A sun for an artwork hero, sitting in the clear top-right where the text
   never reaches. It turns slowly and breathes; the two animations drive
   different properties (rotate and scale) so they do not overwrite each other. */
@keyframes sunBreathe {
  0%, 100% { scale: 1; }
  50% { scale: 1.07; }
}
.hero-sun {
  position: absolute;
  top: calc(var(--header-h) + 34px);
  right: 6%;
  width: clamp(76px, 10vw, 175px);
  color: var(--orange);
  z-index: 1;
  pointer-events: none;
  animation: spin 46s linear infinite, sunBreathe 5s ease-in-out infinite;
  display: block;
  height: auto;
}
@media (max-width: 760px) {
  .hero-sun { top: calc(var(--header-h) + 18px); right: 7%; width: clamp(62px, 17vw, 96px); }
}

/* Mirror an artwork when its subject falls on the same side as the headline.
   These are landscapes with no text in them, so flipping costs nothing. */
.hero-art--flip { transform: scaleX(-1); }

/* A hero carrying artwork stacks: words at the top on clean colour, picture
   pinned to the bottom. The art sits in normal flow rather than behind the
   text, so the two can never overlap at any window size — the hero simply
   grows if it has to. */
.page-hero--art {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + 34px);
  padding-bottom: 0;
  overflow: hidden;
}
/* the image comes first in the markup, so reorder it below the words */
/* the breathing room between the words and the artwork — per page, because
   how high the picture should sit depends on the picture */
.page-hero--art > .container { order: 1; flex: 0 0 auto; padding-bottom: var(--art-gap, clamp(26px, 4vw, 60px)); }
/* Some artwork stops a little short of its own canvas edges. Widening it so
   those bare margins sit outside the viewport stops the next section's colour
   creeping up the far left and right. --art-bleed is how far past each edge. */
.page-hero--art > .hero-art.hero-art--bleed {
  width: calc(100% + (var(--art-bleed, 6%) * 2));
  margin-left: calc(var(--art-bleed, 6%) * -1);
}

.page-hero--art > .hero-art {
  order: 2;
  position: relative;
  inset: auto;
  align-self: flex-start;
  margin-top: auto;              /* drops it to the foot of the hero */
  width: 100%;
}
@media (max-width: 760px) {
  .page-hero--art > .hero-art { width: 175%; margin-left: var(--art-x, -37.5%); }
}
@media (max-width: 480px) {
  .page-hero--art > .hero-art { width: 215%; margin-left: var(--art-x-sm, -57.5%); }
}

/* A scene that stands on its own rather than a landscape running edge to
   edge (FAQ). It is kept whole and centred at every width, and its grass is
   carried out to both sides of the page as a lawn. --art-ground is the row,
   as a % of the image height, where the grass is unbroken; the lawn starts
   there. The strip below the picture is for the next section's slanted top
   to cut into, so the slant only ever cuts grass. */
.page-hero--art > .hero-vignette {
  order: 2;
  margin-top: auto;
  position: relative;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    transparent 0 var(--art-ground, 94%),
    var(--art-ground-colour) var(--art-ground, 94%) 100%);
  border-bottom: calc(var(--angle) + 12px) solid var(--art-ground-colour);
}
.hero-vignette img {
  display: block;
  margin: 0 auto;
  width: var(--art-w, min(100%, 980px));
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* Wide screens: stacked, the headline and the picture would need two screens,
   so they sit side by side instead — words left, picture right, both on the
   same lawn. Both share one grid cell: the picture drops to the foot, the
   words centre in the sky above the lawn. --vg-w is the picture's width, and
   the text column is whatever the container has left beside it; the headline
   is scaled so its longest word always fits that column. */
@media (min-width: 900px) {
  .page-hero--vignette {
    --vg-w: min(52vw, 640px);
    display: grid;
    grid-template: 1fr / 1fr;
  }
  .page-hero--vignette > .container,
  .page-hero--vignette > .hero-vignette { grid-area: 1 / 1; }
  .page-hero--vignette > .container {
    align-self: center;
    text-align: left;
    padding-bottom: calc(var(--angle) + 12px);   /* centre over the sky, not the lawn */
  }
  .page-hero--vignette > .container > * { max-width: calc(100% - var(--vg-w) - 32px); }
  .page-hero--vignette > .container .lead { margin-left: 0; }
  .page-hero--vignette h1 { font-size: clamp(60px, 8vw, 118px); }
  .page-hero--vignette > .hero-vignette { align-self: end; }
  .page-hero--vignette .hero-vignette img {
    width: var(--vg-w);
    margin-left: auto;
    margin-right: max(24px, (100% - 1200px) / 2);   /* the .container's own edge */
  }
}

/* On a phone the hero is tall and narrow, so a full-width band shrinks to a
   thin strip. Scale it up and let it bleed off both sides instead. */
@media (max-width: 760px) {
  .hero-art { width: 175%; left: var(--art-x, -37.5%); right: auto; }
}
@media (max-width: 480px) {
  .hero-art { width: 215%; left: var(--art-x-sm, -57.5%); }
}

/* Artwork that carries its own painted sky needs the section behind it to be
   the same colour, or a seam shows along the image's top edge. */
.page-hero--art.sky-home { background: #F9CA38; }