/* ==========================================================================
   Parenting Outreach Program — main stylesheet
   Brand: Poppins · Raspberry #d12651 · Hunyadi #ffbe5c · Moonstone #5bbed4
          Raisin Black #21212f · Isabelline #f6f1ee  (Ultra Violet appears only in the logo mark)
   Signature motif: the "petal" — a rounded shape with one sharp corner,
   taken directly from the four petals of the POP logo mark.
   ========================================================================== */

/* ---------- Fonts (self-hosted, latin subset) ---------- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700.woff2") format("woff2"); }
/* Metric-matched fallback to minimise layout shift while Poppins loads */
@font-face { font-family: "Poppins Fallback"; src: local("Arial"); ascent-override: 93.62%; descent-override: 31.21%; line-gap-override: 8.92%; size-adjust: 112.16%; }

/* ---------- Tokens ---------- */
:root {
  --raspberry: #d12651;
  --raspberry-600: #b51e45;
  --raspberry-100: #f9d3dd;
  --raspberry-50: #fbe9ee;
  --violet: #614f87;
  --violet-300: #b3a5d6;
  --violet-100: #ddd4f0;
  --sun: #ffbe5c;
  --sun-100: #ffe9c7;
  --sun-50: #fff6e8;
  --sky: #5bbed4;
  --sky-100: #d5eef4;
  --sky-50: #ecf7fa;
  --ink: #21212f;
  --ink-80: #3a3a4a;
  --ink-70: #4d4d5e;
  --paper: #f6f1ee;
  --paper-200: #efe6e0;
  --white: #fff;
  --line: rgb(33 33 47 / 0.1);
  --line-strong: rgb(33 33 47 / 0.18);

  --font: "Poppins", "Poppins Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --fs-display: clamp(2.3rem, 0.6rem + 4vw, 4.25rem);
  --fs-h1: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  --fs-h2: clamp(1.85rem, 1.35rem + 2vw, 2.9rem);
  --fs-h3: clamp(1.2rem, 1.08rem + 0.5vw, 1.45rem);
  --fs-lead: clamp(1.075rem, 1rem + 0.35vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;

  --r-xl: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  --r-lg: 1.5rem;
  --r-md: 1rem;
  --r-sm: 0.75rem;
  --r-sharp: 0.375rem;

  --gutter: clamp(1.25rem, 0.5rem + 3.5vw, 2.5rem);
  --container: 75rem;
  --section-y: clamp(4.5rem, 3rem + 6vw, 8rem);

  --shadow-sm: 0 1px 2px rgb(33 33 47 / 0.06), 0 2px 8px rgb(33 33 47 / 0.04);
  --shadow-md: 0 2px 4px rgb(33 33 47 / 0.04), 0 12px 32px -8px rgb(33 33 47 / 0.12);
  --shadow-lg: 0 4px 8px rgb(33 33 47 / 0.04), 0 24px 60px -12px rgb(33 33 47 / 0.18);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 5rem;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { interpolate-size: allow-keywords; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink-80);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a[href^="tel:"] { white-space: nowrap; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5 { margin: 0; color: var(--ink); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
li, dd, dt, blockquote, figcaption, summary, label, legend { text-wrap: pretty; }
p + p { margin-top: 1em; }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 600; color: var(--ink); }
::selection { background: var(--sun); color: var(--ink); }
:focus-visible { outline: 3px solid var(--raspberry); outline-offset: 3px; border-radius: 4px; }

[hidden] { display: none !important; }
/* Decorative layers (floating shapes, rings, mascots) are animated with transforms. Firefox can pick one as its
   scroll anchor and, because it counts transforms, "corrects" the page by the animation's drift whenever
   anything nearby re-lays out (e.g. opening a team story). Keep decoration out of anchor selection. */
[aria-hidden="true"] { overflow-anchor: none; }
.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; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.75rem 1.25rem; background: var(--ink); color: var(--white); border-radius: var(--r-sm); font-weight: 600; text-decoration: none; transition: top 0.2s var(--ease); }
.skip-link:focus { top: 1rem; }

/* ---------- Motion ----------
   Firefox paints anything with a flat (2D) transform snapped to the pixel grid, rounding each shape and each run of
   text separately: slow movement steps, text wobbles inside its box, and content re-snaps (a small "vibrate") the
   moment an animation ends and the element falls back to normal painting. Chrome instead moves animated elements as
   smooth composited layers. Firefox does the same for a 3D transform, so every element that animates keeps a no-op
   perspective() for its whole life (before, during and after the motion) and never changes rendering path. All motion
   is written with the individual translate / rotate / scale / offset-* properties, which compose with it.
   Keep CSS filters off moving elements (draw shadows into the image, as the team mascots do): a filter on a moving
   element brings Firefox's snapping back, and so does border-radius: Firefox draws a rounded box as nine stitched
   pieces whose seams streak while it moves, so moving shapes are drawn as images (SVG or gradient) instead. Inline SVG
   icons inside a moving box get their own entry. When adding an animation or transition that moves something, add it here. */
.arrow::before,
.nav-toggle__mark, .nav-toggle__mark i, .nav__link::before, .nav__phone > svg, .nav__email > svg,
.hero__chip, .hero__spark, .hero__bead, .chat__row,
.voices .voice, .voices__tab img, .voices__tab::after,
.growth__badge, .growth__badge::after, .growth__text,
.wheel__orbit, .wheel__petal, .wheel__dial, .wheel__spoke, .wheel__spoke i, .wheel__spoke i > svg, .wheel__tick, .wheel__tick svg, .wheel__hub img, .kw__petal, .growth__leaf-shape, .growth__bud, .growth__rays,
.story__rail::after, .story__dot, .chapter h3, .scene, .story__hint::after,
.drive::before, .drive::after, .drive__icon, .value::before, .value__badge,
.member__mascot, .member__ring, .member__toggle svg, .member__story,
.team-sky__ring, .team-sky__mark, .team-sky__shape,
.faq__icon::before, .toc__toggle svg, .toc ol { transform: perspective(1000px); }
/* Only the mobile menu's links slide (the panel reveals with clip-path, the Call/Email/Contact block only fades).
   Firefox never pixel-snaps a 3D layer, so a permanent perspective() on anything that rests at a sub-pixel position
   blurs it and everything inside it (this blurred the whole desktop header) — keep it to what actually moves. */
@media (max-width: 64rem) { .nav__list li { transform: perspective(1000px); } }

/* ---------- Layout ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { --container: 50rem; }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--white { background: var(--white); }
.section--ink { background: var(--ink); color: rgb(255 255 255 / 0.78); }
.section--ink h2, .section--ink h3, .section--ink strong { color: var(--white); }
.stack > * + * { margin-top: var(--stack, 1.25rem); }

.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 + p { margin-top: 1.25rem; }
.h2 + .lead, .h2 + .stack, .h2 + p { margin-top: 1.25rem; }
.section-head--split { max-width: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 3rem; }
.section-head--split > div { max-width: 40rem; }

/* ---------- Typography ---------- */
.display { font-size: var(--fs-display); font-weight: 700; line-height: 1.04; letter-spacing: -0.035em; }
.h1 { font-size: var(--fs-h1); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; }
.h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.028em; }
.h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -0.015em; }
.lead { font-size: var(--fs-lead); line-height: 1.65; color: var(--ink-70); }
.section--ink .lead { color: rgb(255 255 255 / 0.75); }
.accent { color: var(--raspberry); }
.muted { color: var(--ink-70); }
.small { font-size: var(--fs-sm); }


/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--raspberry); --btn-fg: var(--white); --btn-bd: var(--btn-bg);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  min-height: 3.25rem; padding: 0.8rem 1.6rem;
  font-size: 1rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 2px solid var(--btn-bd); border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), opacity 0.15s;
}
.btn:hover { --btn-bg: var(--raspberry-600); }
.btn:active { opacity: 0.9; }
.btn svg { width: 1.125rem; height: 1.125rem; flex: none; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); }
.btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: var(--white); --btn-bd: var(--ink); }
.btn--ink { --btn-bg: var(--ink); --btn-fg: var(--white); }
.btn--ink:hover { --btn-bg: var(--raspberry); }
.btn--light { --btn-bg: var(--white); --btn-fg: var(--ink); }
.btn--light:hover { --btn-bg: var(--sun); }
.btn--outline-light { --btn-bg: transparent; --btn-fg: var(--white); --btn-bd: rgb(255 255 255 / 0.45); }
.btn--outline-light:hover { --btn-bg: var(--white); --btn-fg: var(--ink); --btn-bd: var(--white); }
.btn--sm { min-height: 2.75rem; padding: 0.55rem 1.2rem; font-size: 0.9375rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.link-arrow { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--ink); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; padding-bottom: 2px; transition: background-size 0.3s var(--ease); }
.link-arrow:hover { background-size: 100% 2px; }
.section--ink .link-arrow { color: var(--white); }

/* Arrow icon in buttons and arrow links: <span class="arrow" aria-hidden="true"></span>.
   Firefox-safe hover nudge: the arrow is a pre-drawn mask (in currentColor, transparent margin, 2px strokes on whole
   pixels) on ::before, so the moving layer is a finished picture rather than strokes re-drawn every frame. main.js
   shifts each .arrow box by its sub-pixel remainder so it rests exactly on the device-pixel grid; otherwise Firefox
   shows it blurred at rest and kicks it sideways by a fraction of a pixel when the hover starts. */
.arrow { position: relative; display: block; flex: none; width: 24px; height: 24px; margin: -3px; }
.arrow::before {
  content: ""; position: absolute; inset: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12h10M12 7l5 5-5 5'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12h10M12 7l5 5-5 5'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  transition: translate 0.25s var(--ease);
}
.btn:hover .arrow::before, .link-arrow:hover .arrow::before { translate: 3px 0; }

/* ---------- Petal motif ---------- */
.petal    { border-radius: var(--r-xl) var(--r-xl) var(--r-xl) var(--r-sharp); }
.petal-tl { border-radius: var(--r-sharp) var(--r-xl) var(--r-xl) var(--r-xl); }
.petal-tr { border-radius: var(--r-xl) var(--r-sharp) var(--r-xl) var(--r-xl); }
.petal-br { border-radius: var(--r-xl) var(--r-xl) var(--r-sharp) var(--r-xl); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(246 241 238 / 0.82);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); background: rgb(246 241 238 / 0.92); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: var(--header-h); }
.brand { display: inline-flex; flex: none; border-radius: var(--r-sm); transition: opacity 0.2s var(--ease); }
.brand:hover { opacity: 0.8; }
.brand svg { height: 3.25rem; width: auto; }
.brand svg path { transition: fill 0.3s var(--ease); }

/* Desktop: segmented pill navigation */
.nav { display: flex; align-items: center; gap: 0.75rem; }
.nav__list { display: flex; align-items: center; gap: 0.125rem; padding: 0.3125rem; list-style: none; background: var(--white); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-sm); }
.nav__link {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.5rem 1.05rem;
  font-size: 0.9375rem; font-weight: 500; line-height: 1; color: var(--ink-80); text-decoration: none; white-space: nowrap;
  border-radius: 999px;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.nav__link:hover { color: var(--ink); background: var(--paper-200); }
.nav__link[aria-current="page"] { color: var(--white); font-weight: 600; background: var(--ink); }
.nav__hint, .nav__email, .nav__deco { display: none; }
.nav__actions { display: flex; align-items: center; gap: 0.5rem; }
.nav__phone { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.5rem 0.9rem; font-size: 0.9375rem; font-weight: 600; color: var(--ink); text-decoration: none; border: 1px solid transparent; border-radius: 999px; transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.nav__phone small { display: none; }
.nav__phone:hover { color: var(--ink); background: var(--white); border-color: var(--line); box-shadow: var(--shadow-sm); }
.nav__phone svg { width: 1.1rem; height: 1.1rem; color: var(--raspberry); }
.nav-toggle { display: none; }
@media (min-width: 64.0625rem) and (max-width: 74rem) { .nav__phone { display: none; } }

/* Mobile: full-screen menu revealed from the toggle */
@media (max-width: 64rem) {
  :root { --header-h: 4.5rem; }
  .site-header, .site-header.is-scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(246 241 238 / 0.97); }
  .brand svg { height: 2.85rem; }
  body.nav-open .brand svg path:last-child { fill: var(--white) !important; }

  .nav-toggle {
    position: relative; display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0;
    color: var(--ink); background: var(--white); border: 1.5px solid rgb(33 33 47 / 0.62);
    border-radius: 50% 50% 50% 0.6rem; cursor: pointer;
    transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), border-radius 0.4s var(--ease);
  }
  .nav-toggle:hover { border-color: var(--ink); }
  .nav-toggle__mark { position: relative; width: 1.25rem; height: 1.25rem; transition: rotate 0.55s cubic-bezier(0.65, 0, 0.35, 1); }
  .nav-toggle__mark i { position: absolute; width: 46%; height: 46%; background: currentColor; transition: border-radius 0.45s var(--ease), scale 0.55s cubic-bezier(0.65, 0, 0.35, 1); }
  .nav-toggle__mark i:nth-child(1) { left: 0; top: 0; border-radius: 50% 50% 1px 50%; scale: 0.76; transform-origin: 100% 100%; }
  .nav-toggle__mark i:nth-child(2) { right: 0; top: 0; border-radius: 50% 50% 50% 1px; }
  .nav-toggle__mark i:nth-child(3) { left: 0; bottom: 0; border-radius: 50% 1px 50% 50%; }
  .nav-toggle__mark i:nth-child(4) { right: 0; bottom: 0; border-radius: 1px 50% 50% 50%; scale: 0.76; transform-origin: 0 0; }
  .nav-toggle[aria-expanded="true"] { color: var(--white); background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.6); }
  .nav-toggle[aria-expanded="true"]:hover { border-color: var(--white); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__mark { rotate: 180deg; }

  .nav {
    --origin: calc(100% - var(--gutter) - 2.75rem) calc(var(--header-h) / 2);
    position: fixed; inset: 0; z-index: -1;
    flex-direction: column; align-items: stretch; gap: 0;
    height: 100dvh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    padding: calc(var(--header-h) + clamp(0.75rem, 10dvh - 2.5rem, 4rem)) var(--gutter) clamp(1.5rem, 6dvh - 0.5rem, 3.5rem);
    color: var(--white); background: var(--ink);
    clip-path: circle(0 at var(--origin));
    visibility: hidden;
    transition: none;
  }
  .nav.is-open { clip-path: circle(150% at var(--origin)); visibility: visible; transition: clip-path 0.7s cubic-bezier(0.65, 0, 0.35, 1); }
  .nav.is-closing { clip-path: none; visibility: visible; opacity: 0; transition: opacity 0.32s ease; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
  .nav__list li, .nav__actions {
    opacity: 0; translate: 0 1.25rem;
    transition: opacity 0.15s var(--ease), translate 0.15s var(--ease);
  }
  .nav.is-open .nav__list li, .nav.is-open .nav__actions {
    opacity: 1; translate: none;
    transition: opacity 0.5s var(--ease), translate 0.6s var(--ease);
    transition-delay: calc(0.18s + var(--i, 0) * 0.06s);
  }
  .nav__actions, .nav.is-open .nav__actions { translate: none; } /* fade only: these bordered, rounded boxes re-snapped in Firefox when the slide came to rest */
  .nav__list { gap: clamp(0.125rem, 1.2dvh - 0.25rem, 0.875rem); margin-bottom: clamp(1.25rem, 9dvh - 1.75rem, 4.5rem); }
  .nav__link {
    display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); align-items: baseline; row-gap: 0.15rem;
    width: 100%; min-height: 0; padding: clamp(0.4rem, 2.6dvh - 0.6rem, 1.2rem) 0;
    color: var(--white); background: none; border-radius: 0; white-space: normal;
  }
  .nav__link::before {
    content: ""; grid-row: 1; width: 0.85rem; height: 0.85rem; align-self: center;
    background: var(--mk, var(--sun)); border-radius: 50% 50% 50% 0.15rem;
    scale: 0; transition: scale 0.35s cubic-bezier(0.34, 1.45, 0.64, 1);
  }
  .nav__list li:nth-child(2) .nav__link { --mk: var(--sky); }
  .nav__list li:nth-child(3) .nav__link { --mk: var(--raspberry); }
  .nav__list li:nth-child(4) .nav__link { --mk: var(--white); }
  .nav__label { grid-column: 2; font-size: clamp(1.75rem, min(1.4rem + 2.6vw, 0.5rem + 3dvh), 2.75rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; transition: color 0.2s var(--ease); }
  .nav__hint { display: block; grid-column: 2; font-size: 0.875rem; font-weight: 500; letter-spacing: 0; color: rgb(255 255 255 / 0.5); }
  .nav__link:hover, .nav__link:focus-visible { color: var(--white); background: none; }
  .nav__link:hover::before, .nav__link:focus-visible::before, .nav__link[aria-current="page"]::before { scale: 1; }
  .nav__link[aria-current="page"] { color: var(--white); background: none; }
  .nav__link[aria-current="page"] .nav__label { color: var(--sun); }
  .nav__list li .nav__link[aria-current="page"] { --mk: var(--sun); }

  .nav__actions { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(0.625rem, 1.5dvh, 1rem); margin-top: auto; }
  .nav__phone, .nav__email {
    display: flex; align-items: center; gap: 0.875rem; min-height: clamp(3.5rem, 7.5dvh, 4rem); padding: 0.625rem 1rem;
    font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--white); text-decoration: none;
    background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-sharp);
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
  }
  .nav__phone:hover, .nav__email:hover { color: var(--white); background: rgb(255 255 255 / 0.12); border-color: rgb(255 255 255 / 0.24); }
  .nav__phone > svg, .nav__email > svg { width: 2.5rem; height: 2.5rem; padding: 0.65rem; flex: none; color: var(--ink); background: var(--sun); border-radius: 50% 50% 50% 0.3rem; }
  .nav__email > svg { background: var(--sky); }
  .nav__phone span, .nav__email span { display: grid; min-width: 0; }
  .nav__email { container-type: inline-size; }
  .nav__email span { font-size: clamp(0.6875rem, (100cqi - 3.5rem) / 17, 0.9375rem); white-space: nowrap; }
  @media (max-width: 23rem) {
    .nav__phone, .nav__email { gap: 0.75rem; padding-inline: 0.75rem; }
    .nav__phone > svg, .nav__email > svg { width: 2.25rem; height: 2.25rem; padding: 0.575rem; }
    .nav__email span { font-size: clamp(0.6875rem, (100cqi - 3.125rem) / 17, 0.9375rem); }
  }
  .nav__phone small, .nav__email small { display: block; font-size: var(--fs-xs); font-weight: 500; color: rgb(255 255 255 / 0.62); }
  .nav__cta { width: 100%; min-height: 3.5rem; margin-top: 0.375rem; font-size: 1rem; }
  .nav__deco { display: block; position: fixed; right: -3rem; bottom: -3rem; width: 14rem; aspect-ratio: 1; opacity: 0.14; pointer-events: none; }
  .nav__deco i { position: absolute; width: 47%; aspect-ratio: 1; }
  .nav__deco i:nth-child(1) { left: 0; top: 0; background: var(--white); border-radius: 50% 50% 0.4rem 50%; transform: scale(0.72); transform-origin: 100% 100%; }
  .nav__deco i:nth-child(2) { right: 0; top: 0; background: var(--white); border-radius: 50% 50% 50% 0.4rem; }
  .nav__deco i:nth-child(3) { left: 0; bottom: 0; background: var(--white); border-radius: 50% 0.4rem 50% 50%; }
  .nav__deco i:nth-child(4) { right: 0; bottom: 0; background: var(--white); border-radius: 0.4rem 50% 50% 50%; transform: scale(0.72); transform-origin: 0 0; }
  body.nav-open { overflow: hidden; }
}
/* Side by side only once each card can fit the email at ~15px (below this it shrank to 11px and still overflowed) */
@media (max-width: 64rem) and (min-width: 48rem) { .nav__actions { grid-template-columns: 1fr 1fr; } .nav__cta { grid-column: 1 / -1; } }
@media (max-width: 64rem) and (prefers-reduced-motion: reduce) {
  .nav, .nav.is-open { clip-path: none; transition: none; }
  .nav:not(.is-open) { display: none; }
}

/* ---------- Home hero ---------- */
.hero { position: relative; padding-block: clamp(2rem, 1rem + 3.5vw, 4.5rem) clamp(3.5rem, 2.5rem + 3.5vw, 5.5rem); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(2.5rem, 1rem + 5vw, 5rem); }
.hero__title { margin-bottom: 1.5rem; }
.hero__title .accent { display: block; }
.hero .lead { max-width: 34rem; margin-bottom: 2.25rem; }

.hero__art { position: relative; aspect-ratio: 1 / 0.92; }
.hero__shape { position: absolute; border-radius: 50% 50% 50% 0.75rem; }
.hero__shape--sky { inset: 4% 6% 8% 10%; border-radius: 50%; background-color: var(--sky-100); background-image: repeating-radial-gradient(circle at 50% 74%, rgb(255 255 255 / 0) 0 28px, rgb(255 255 255 / 0.45) 28px 30px); }
.hero__shape--sun { width: 19%; aspect-ratio: 1; right: 21%; top: -1%; background: var(--sun); border-radius: 50% 50% 0.5rem 50%; }
.hero__shape--dot { width: 13%; aspect-ratio: 1; left: 2%; bottom: 14%; background: var(--sky); border-radius: 50% 0.4rem 50% 50%; }
.hero__orbit { position: absolute; left: 3%; top: 20%; width: 94%; height: 76%; overflow: visible; }
.hero__orbit-track { fill: none; stroke: rgb(255 255 255 / 0.9); stroke-width: 2.8; }
.hero__orbit-line { fill: none; stroke: url(#orbit-grad); stroke-width: 0.95; opacity: 0.9; }
/* Everything that moves in the hero is a pre-drawn image (SVG) that Firefox only has to slide, the way Chrome moves
   any animated element. Firefox re-draws live content (text, rounded boxes, gradients, borders, shadows) inside a
   moving layer at every sub-pixel step, and each part snaps a little differently: the chips snapped and the beads
   streaked. Images are sampled smoothly, like the team mascots. See also Motion. */
/* Beads riding the orbit on a CSS motion path: the same ellipse the SVG draws (rx 66 of 134.5, ry 48.5 of 100,
   centred), 44s a lap, anticlockwise from the left. HTML boxes, because SVG's own animation (SMIL) only runs on
   Firefox's main thread. */
.hero__beads { position: absolute; left: 3%; top: 20%; width: 94%; height: 76%; container-type: size; pointer-events: none; }
.hero__bead {
  position: absolute; left: 0; top: 0; width: var(--sz); aspect-ratio: 1; background: var(--img) center / 100% 100% no-repeat;
  offset-path: ellipse(49.07% 48.5% at 50% 50%); offset-rotate: 0deg; offset-distance: var(--at);
}
.hero__bead--1 { --sz: 3.12cqw; --at: 56.8%; --d: -19s; --img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'%3E%3Ccircle cx='21.0' cy='21.0' r='17' fill='%23d12651' stroke='%23fff' stroke-width='8'/%3E%3C/svg%3E"); }
.hero__bead--2 { --sz: 2.53cqw; --at: 6.8%; --d: -41s; --img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Ccircle cx='17.0' cy='17.0' r='13' fill='%235bbed4' stroke='%23fff' stroke-width='8'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: no-preference) {
  .hero__bead { animation: bead-orbit 44s linear var(--d) infinite reverse; }
}
@keyframes bead-orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.hero__spark { position: absolute; width: var(--sz); aspect-ratio: 1; }
/* Like the chips, the moving element carries its image on a child layer, at a whole-pixel size (14/11/10px), and the
   petal sits inside transparent margin: Firefox rounds a moving layer's edges to whole pixels, so a shape touching
   them got clipped differently every frame (snapping). */
.hero__spark::before { content: ""; position: absolute; inset: -25%; background: var(--img) center / 100% 100% no-repeat; }
.hero__spark--1 { top: 12%; left: 20%; --sz: 0.875rem; --img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-25 -25 150 150'%3E%3Cpath fill='%23d12651' d='M50 0A50 50 0 0 1 100 50A50 50 0 0 1 50 100H20A20 20 0 0 1 0 80V50A50 50 0 0 1 50 0Z'/%3E%3C/svg%3E"); }
.hero__spark--2 { top: 62%; right: -1%; --sz: 0.6875rem; --img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-25 -25 150 150'%3E%3Cpath fill='%23ffbe5c' d='M50 0A50 50 0 0 1 100 50A50 50 0 0 1 50 100H20A20 20 0 0 1 0 80V50A50 50 0 0 1 50 0Z'/%3E%3C/svg%3E"); }
.hero__spark--3 { bottom: 3%; left: 16%; --sz: 0.625rem; --img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-25 -25 150 150'%3E%3Cpath fill='%235bbed4' d='M50 0A50 50 0 0 1 100 50A50 50 0 0 1 50 100H20A20 20 0 0 1 0 80V50A50 50 0 0 1 50 0Z'/%3E%3C/svg%3E"); }
.hero__illustration { position: absolute; left: 6%; right: 2%; bottom: 10%; width: 92%; height: auto; filter: drop-shadow(0 18px 24px rgb(33 33 47 / 0.12)); }
/* Key-word petals (from the brand guidelines' Key Words page): sharp corner points in toward the family. Each chip is
   one image (assets/img/hero/chip-*.svg: shadow, petal and the word as Poppins SemiBold outlines, generated so the label
   is 15.2% of the chip like the old live text). The image overflows the chip box by the shadow margins (28/18/28/38). */
.hero__chip { --p: clamp(4.5rem, 3rem + 3.5vw, 6.5rem); position: absolute; width: var(--p); aspect-ratio: 1; }
.hero__chip::before { content: ""; position: absolute; left: -28%; top: -18%; width: 156%; height: 156%; background: var(--img) center / 100% 100% no-repeat; }
.hero__chip--1 { left: calc(11.5% - var(--p) / 2); top: calc(36% - var(--p) / 2); --img: url("../img/hero/chip-safe.svg"); }
.hero__chip--2 { left: calc(90.5% - var(--p) / 2); top: calc(39% - var(--p) / 2); --img: url("../img/hero/chip-supported.svg"); }
.hero__chip--3 { left: calc(50% - var(--p) / 2); top: calc(97% - var(--p) / 2); --img: url("../img/hero/chip-empowered.svg"); }
@media (prefers-reduced-motion: no-preference) {
  .hero__chip { animation: float 6.5s cubic-bezier(0.37, 0, 0.63, 1) infinite; }
  .hero__chip--2 { animation-delay: -2.2s; }
  .hero__chip--3 { animation-delay: -4.3s; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__spark { animation: float 7.5s cubic-bezier(0.37, 0, 0.63, 1) infinite; }
  .hero__spark--2 { animation-delay: -2.6s; animation-duration: 8.5s; }
  .hero__spark--3 { animation-delay: -5s; animation-duration: 9.5s; }
}
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }

/* Stacked: art first, sized from the viewport height so art + text + button fit one phone screen */
@media (max-width: 62rem) {
  .hero { padding-top: 1.5rem; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(2.25rem, 1.5rem + 2vw, 3rem); }
  .hero__title { margin-bottom: 1rem; font-size: clamp(2rem, 0.2rem + 8.2vw, 4rem); }
  .hero .lead { max-width: none; margin-bottom: 1.5rem; line-height: 1.55; }
  .hero__art { order: -1; container-type: inline-size; width: clamp(14rem, (100svh - var(--header-h) - 17.5rem - 18vw) / 0.92, min(100%, 30rem)); margin-inline: auto; }
  .hero__chip { --p: 21cqw; }
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3.5rem, 2.5rem + 4vw, 6rem); overflow: hidden; }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: clamp(2rem, 1rem + 4vw, 5rem); }
.page-hero h1 { margin-bottom: 1.5rem; }
.page-hero .lead { max-width: 38rem; }
.page-hero .btn-row { margin-top: 2rem; }
.page-hero__art { position: relative; display: grid; place-items: center; aspect-ratio: 1.1 / 1; padding: 12%; background: var(--art-bg, var(--sky-100)); }
.page-hero__art img { width: 100%; height: 100%; object-fit: contain; }
.page-hero__art::after { content: ""; position: absolute; width: 22%; aspect-ratio: 1; right: -4%; top: -6%; background: var(--art-accent, var(--sun)); border-radius: 50% 50% 0.5rem 50%; }
/* Feedback hero: a conversation on a deep violet card (brand logo colour) with soft glows and a dot grid */
.chat {
  position: relative; isolation: isolate; overflow: hidden; display: grid; gap: clamp(0.875rem, 0.5rem + 1.2vw, 1.4rem);
  width: 100%; max-width: 33rem; justify-self: end; padding: clamp(1.75rem, 1rem + 2.75vw, 3.25rem) clamp(1rem, 0.25rem + 1.6vw, 2.25rem);
  background:
    radial-gradient(circle at 100% 0, rgb(209 38 81 / 0.45), transparent 40%),
    radial-gradient(circle at 0 100%, rgb(91 190 212 / 0.35), transparent 45%),
    radial-gradient(rgb(255 255 255 / 0.16) 1.2px, transparent 1.7px) 0 0 / 1.375rem 1.375rem,
    var(--violet);
  border-radius: var(--r-xl) var(--r-xl) var(--r-sharp) var(--r-xl);
  box-shadow: 0 30px 60px -24px rgb(97 79 135 / 0.55);
}
.chat::before { content: ""; position: absolute; z-index: -1; right: -2.5rem; bottom: -2.5rem; width: 11rem; aspect-ratio: 1; border: 2px solid rgb(255 255 255 / 0.18); border-radius: 50% 50% 50% 1.25rem; }
.chat::after { content: ""; position: absolute; z-index: -1; left: 12%; bottom: -2.25rem; width: 4.5rem; aspect-ratio: 1; background: var(--sun); border-radius: 50%; box-shadow: 0 0 0 0.75rem rgb(255 190 92 / 0.18), 0 0 0 1.5rem rgb(255 190 92 / 0.08); }
.chat__row { display: flex; align-items: center; gap: 0.75rem; }
.chat__row--reply { justify-content: flex-end; }
.chat__face { width: clamp(3.25rem, 2.25rem + 2.2vw, 5.25rem); height: auto; flex: none; filter: drop-shadow(2px 0 0 var(--white)) drop-shadow(-2px 0 0 var(--white)) drop-shadow(0 2px 0 var(--white)) drop-shadow(0 -2px 0 var(--white)) drop-shadow(0 8px 12px rgb(33 33 47 / 0.25)); }
.chat__bubble { padding: 1rem 1.15rem; font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.125rem); font-weight: 600; line-height: 1.35; color: var(--ink); background: var(--white); border-radius: 1.4rem 1.4rem 1.4rem 0.3rem; box-shadow: 0 12px 24px -8px rgb(33 33 47 / 0.35); }
.chat__row--reply .chat__bubble { background: var(--sun); border-radius: 1.4rem 1.4rem 0.3rem 1.4rem; }
.chat__bubble--typing { display: flex; gap: 0.35rem; padding: 1.15rem 1.35rem; }
.chat__row--reply .chat__bubble--typing { background: var(--white); }
.chat__bubble--typing i { width: 0.5rem; height: 0.5rem; background: var(--ink-70); border-radius: 50%; opacity: 0.35; }
@media (prefers-reduced-motion: no-preference) {
  .chat__bubble--typing i { animation: typing 1.4s ease-in-out infinite; animation-delay: calc(3s + var(--t, 0s)); }
  .chat__bubble--typing i:nth-child(2) { --t: 0.2s; }
  .chat__bubble--typing i:nth-child(3) { --t: 0.4s; }
}
@keyframes typing { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 0.9; } }
@media (prefers-reduced-motion: no-preference) {
  .chat__row { animation: chat-in 0.6s cubic-bezier(0.34, 1.3, 0.64, 1) both; animation-delay: calc(0.35s + var(--d) * 0.7s); }
  .chat__row--reply { transform-origin: 100% 50%; }
}
@keyframes chat-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 62rem) { .chat { justify-self: start; max-width: 30rem; } }
@media (max-width: 30rem) {
  .chat { width: calc(100% + var(--gutter)); max-width: none; margin-inline: calc(var(--gutter) * -0.5); padding: 1.25rem 1rem; }
  .chat__face { width: 3rem; }
  .chat__row { gap: 0.625rem; }
  .chat__bubble { padding: 0.8rem 1rem; font-size: 0.9375rem; }
}
@media (max-width: 22rem) { .chat__bubble { font-size: 0.875rem; padding: 0.75rem 0.9rem; } }
@media (min-width: 62.0625rem) and (max-width: 75rem) { .page-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.mosaic { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.5rem, 0.3rem + 0.8vw, 0.875rem); width: 100%; max-width: 32rem; justify-self: end; }
.mosaic__petal { display: grid; place-items: center; min-width: 0; aspect-ratio: 1; padding: 17%; }
.mosaic__petal img { min-width: 0; }
.mosaic__petal img { width: 100%; height: 100%; object-fit: contain; }
.mosaic__petal--tl { background: var(--sky); border-radius: 50% 50% var(--r-sharp) 50%; transform: scale(0.74); transform-origin: 100% 100%; }
.mosaic__petal--tr { padding: 12%; background: var(--sun-100); border-radius: 50% 50% 50% var(--r-sharp); }
.mosaic__petal--bl { padding: 20% 20% 26%; background: var(--violet-100); border-radius: 50% var(--r-sharp) 50% 50%; }
.mosaic__petal--br { padding: 20%; background: var(--raspberry); border-radius: var(--r-sharp) 50% 50% 50%; transform: scale(0.74); transform-origin: 0 0; }
.mosaic__badge { position: absolute; left: 10%; bottom: -1.5rem; display: grid; gap: 0.1rem; padding: 0.875rem 1.25rem; background: var(--white); border-radius: var(--r-md) var(--r-md) var(--r-md) var(--r-sharp); box-shadow: var(--shadow-lg); }
.mosaic__badge strong { font-size: 1.125rem; line-height: 1.2; }
.mosaic__badge span { font-size: var(--fs-xs); font-weight: 500; color: var(--ink-70); }
@media (max-width: 56rem) { .mosaic { justify-self: center; max-width: 24rem; margin-bottom: 1.5rem; } }
@media (max-width: 56rem) {
  .page-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .page-hero__art { max-width: 26rem; width: 100%; }
}

/* ---------- Facts strip ---------- */
.facts { position: relative; z-index: 2; padding-bottom: clamp(4rem, 3rem + 4.5vw, 7rem); }
.facts__grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; padding: 0.75rem; background: var(--white); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }
.fact { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); background: var(--fact-bg, var(--paper)); }
.fact:nth-child(1) { --fact-bg: var(--sky-50); border-radius: var(--r-lg) var(--r-lg) var(--r-sharp) var(--r-lg); }
.fact:nth-child(2) { --fact-bg: var(--sun-50); border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-sharp); }
.fact:nth-child(3) { --fact-bg: var(--raspberry-50); border-radius: var(--r-lg) var(--r-sharp) var(--r-lg) var(--r-lg); }
.fact:nth-child(4) { --fact-bg: var(--paper); border-radius: var(--r-sharp) var(--r-lg) var(--r-lg) var(--r-lg); }
.fact__label { display: block; margin-bottom: 0.5rem; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-70); }
.fact__value { display: block; font-size: 1.1875rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; color: var(--ink); }
.fact__value + p { margin-top: 0.4rem; font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-70); }
@media (max-width: 60rem) { .facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .facts__grid { grid-template-columns: minmax(0, 1fr); } .fact { border-radius: var(--r-lg) !important; } }

/* ---------- Split intro ---------- */
.split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 1rem + 5vw, 6rem); align-items: start; }
.split--center { align-items: center; }
.split__sticky { position: sticky; top: calc(var(--header-h) + 2rem); }
@media (max-width: 56rem) { .split { grid-template-columns: minmax(0, 1fr); } .split__sticky { position: static; } }

/* ---------- Feature cards ---------- */
.features { display: grid; gap: 1rem; list-style: none; }
.support__intro { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(2.5rem, 1rem + 5vw, 6rem); margin-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.support__art { margin: 0; }
.kw { display: block; width: 100%; height: auto; overflow: visible; }
.kw text { font-family: inherit; font-weight: 600; letter-spacing: -0.01em; pointer-events: none; }
.support__art.is-ready .kw__branches { opacity: 0; }
.support__art.is-ready .kw__petal { opacity: 0; scale: 0.35; }
.support__art.is-in .kw__branches { opacity: 1; transition: opacity 0.8s var(--ease); }
.support__art.is-in .kw__petal { opacity: 1; scale: 1; transition: opacity 0.45s var(--ease), scale 0.8s cubic-bezier(0.34, 1.45, 0.64, 1); transition-delay: calc(0.25s + var(--i) * 0.08s); }
.features--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.features--row .feature { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 1.25rem; }
.features--row .feature__icon { width: 4.5rem; }
@media (max-width: 62rem) {
  .support__intro { grid-template-columns: minmax(0, 1fr); }
  .support__intro > div { max-width: none; }
  .support__art { max-width: 36rem; width: 100%; justify-self: center; }
  .features--row { grid-template-columns: minmax(0, 1fr); }
  .features--row .feature { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
}
@media (max-width: 40rem) {
  .support { overflow: hidden; }
  .support__art { width: calc(100% + var(--gutter) * 1.4); max-width: none; margin-inline: calc(var(--gutter) * -0.7); }
  .kw text.s { font-size: calc(var(--fs) * 1.1); }
  .kw text.l { font-size: calc(var(--fs) * 1.04); }
}
.feature { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: center; padding: clamp(1.25rem, 1rem + 1vw, 2rem); background: var(--white); box-shadow: var(--shadow-sm); }
.feature__icon { width: clamp(4.5rem, 3.5rem + 3vw, 6rem); aspect-ratio: 1; }
.feature h3 { margin-bottom: 0.4rem; }
.feature p { color: var(--ink-70); font-size: var(--fs-sm); line-height: 1.65; }
@media (max-width: 30rem) { .feature { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }

.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 56rem) { .cards-3 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Journey (how it works): a rising path of petal nodes ---------- */
.journey-section { overflow: hidden; }
.journey-section::before, .journey-section::after { content: ""; position: absolute; pointer-events: none; background: rgb(255 255 255 / 0.035); }
.journey-section::before { width: 34rem; aspect-ratio: 1; right: -12rem; top: -14rem; border-radius: 50% 3rem 50% 50%; }
.journey-section::after { width: 22rem; aspect-ratio: 1; left: -9rem; bottom: -10rem; border-radius: 50% 50% 50% 3rem; }
.journey-section .container { position: relative; z-index: 1; }
.journey { --node: 5.5rem; --rise: 3.25rem; position: relative; }
.journey__path { position: absolute; left: 0; top: calc(var(--node) / 2); width: 100%; height: calc(var(--rise) * 3); overflow: visible; }
.journey__path path { fill: none; stroke: var(--sun); stroke-width: 2; stroke-dasharray: 2 9; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0.7; }
.journey__steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; }
.journey__step { display: flex; flex-direction: column; align-items: center; margin-top: calc((3 - var(--n)) * var(--rise)); padding: 0 clamp(0.75rem, 0.25rem + 1.2vw, 1.5rem); text-align: center; }
.journey__node { position: relative; display: grid; place-items: center; width: var(--node); height: var(--node); margin-bottom: 1.5rem; background: var(--white); border-radius: 50% 50% 50% 0.6rem; box-shadow: 0 0 0 8px var(--ink); }
.journey__node img { width: 58%; height: 58%; object-fit: contain; }
.journey__node b { position: absolute; top: -0.35rem; right: -0.35rem; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; font-size: 0.8125rem; font-weight: 700; color: var(--ink); background: var(--sun); border-radius: 50%; box-shadow: 0 0 0 3px var(--ink); }
.journey__step h3 { margin-bottom: 0.6rem; font-size: 1.1875rem; }
.journey__step p { max-width: 17rem; font-size: var(--fs-sm); line-height: 1.65; color: rgb(255 255 255 / 0.74); }
@media (max-width: 62rem) {
  .journey { --node: 4.5rem; }
  .journey__path { display: none; }
  .journey__steps { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .journey__step { position: relative; display: grid; grid-template-columns: var(--node) minmax(0, 1fr); column-gap: 1.5rem; align-items: start; margin-top: 0; padding: 0; text-align: left; }
  .journey__node { grid-row: 1 / span 2; margin-bottom: 0; }
  .journey__step h3 { align-self: end; margin-top: 0.6rem; }
  .journey__step p { max-width: none; }
  .journey__step:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--node) / 2); top: calc(var(--node) + 0.6rem); bottom: -1.4rem; width: 2px; margin-left: -1px; background: repeating-linear-gradient(to bottom, rgb(255 190 92 / 0.7) 0 2px, transparent 2px 10px); }
}

/* ---------- Testimonials: one quote in the spotlight, picked from the people beside it ---------- */
.voices { --v-bg: var(--raspberry-100); --v-c: var(--raspberry); --v-fg: var(--white); display: grid; gap: 1rem; }
.voices[data-active="2"] { --v-bg: var(--sky-100); --v-c: var(--sky); --v-fg: var(--ink); }
.voices[data-active="3"] { --v-bg: var(--sun-100); --v-c: var(--sun); --v-fg: var(--ink); }
.voices[data-active="4"] { --v-bg: var(--violet-100); --v-c: var(--violet-300); --v-fg: var(--ink); }
.voices.is-ready { grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.4fr); }
.voices__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem) 1rem; padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); background: var(--v-bg); border-radius: var(--r-xl) var(--r-xl) var(--r-xl) var(--r-sharp); transition: background-color 0.5s var(--ease); }
.voices__mark { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; color: var(--v-fg); background: var(--v-c); border-radius: 50% 50% 50% 0.4rem; transition: background-color 0.5s var(--ease), color 0.5s var(--ease); }
.voices__mark svg { width: 1.4rem; height: 1.4rem; }
.voice { grid-column: 1 / -1; display: grid; align-content: space-between; gap: 2rem; margin: 0; }
.voice blockquote { margin: 0; }
.voice p { max-width: 46rem; font-size: clamp(1.15rem, 0.95rem + 0.85vw, 1.6rem); font-weight: 500; line-height: 1.5; letter-spacing: -0.015em; color: var(--ink); }
.voice figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; }
.voice figcaption::before { content: ""; width: 2rem; height: 2px; background: var(--ink); border-radius: 2px; }
.voice cite { font-style: normal; font-weight: 600; color: var(--ink); }
.voice figcaption span { font-size: var(--fs-sm); color: var(--ink-70); }
.voices__nav { display: flex; align-items: center; gap: 0.5rem; align-self: center; }
.voices__nav[hidden] { display: none; }
.voices__btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; color: var(--ink); background: var(--white); border: 0; border-radius: 50%; cursor: pointer; box-shadow: var(--shadow-sm); transition: background-color 0.2s var(--ease), color 0.2s var(--ease); }
.voices__btn:hover { color: var(--white); background: var(--ink); }
.voices__btn svg { width: 1.15rem; height: 1.15rem; }
.voices__count { min-width: 3.75rem; font-size: var(--fs-sm); font-weight: 500; text-align: center; font-variant-numeric: tabular-nums; color: var(--ink-70); }
.voices__count b { color: var(--ink); }
/* Enhanced: every quote shares one grid cell, so the panel keeps the tallest quote's height and never jumps */
.voices.is-ready .voice { grid-area: 2 / 1 / 3 / -1; opacity: 0; visibility: hidden; translate: 0 0.75rem; transition: opacity 0.3s var(--ease), translate 0.5s var(--ease), visibility 0s linear 0.3s; }
.voices.is-ready .voice.is-active { opacity: 1; visibility: visible; translate: none; transition: opacity 0.45s var(--ease) 0.12s, translate 0.6s var(--ease) 0.12s, visibility 0s; }
.voices:not(.is-ready) .voice + .voice { padding-top: 2rem; border-top: 1px solid var(--line-strong); }
.voices__picker { display: grid; grid-auto-rows: 1fr; gap: 0.5rem; }
.voices__picker[hidden] { display: none; }
.voices__tab { position: relative; display: flex; align-items: center; gap: 0.875rem; width: 100%; min-height: 4.25rem; padding: 0.75rem 2.25rem 0.75rem 0.875rem; text-align: left; color: var(--ink); background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-sharp); cursor: pointer; transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.voices__tab img { width: 2.75rem; height: 2.75rem; flex: none; transition: scale 0.4s cubic-bezier(0.34, 1.45, 0.64, 1), rotate 0.4s cubic-bezier(0.34, 1.45, 0.64, 1); }
.voices__tab span { display: grid; min-width: 0; line-height: 1.3; }
.voices__tab b { font-weight: 600; }
.voices__tab small { font-size: var(--fs-xs); font-weight: 500; color: var(--ink-70); }
.voices__tab:hover { background: rgb(255 255 255 / 0.6); border-color: transparent; }
.voices__tab[aria-selected="true"] { background: var(--white); border-color: transparent; box-shadow: var(--shadow-md); }
.voices__tab[aria-selected="true"] img { scale: 1.08; rotate: -6deg; }
.voices__tab::after { content: ""; position: absolute; right: 1rem; top: 50%; width: 0.625rem; height: 0.625rem; margin-top: -0.3125rem; background: var(--v-c); border-radius: 50% 50% 50% 0.1rem; scale: 0; transition: scale 0.35s cubic-bezier(0.34, 1.45, 0.64, 1), background-color 0.5s var(--ease); }
.voices__tab[aria-selected="true"]::after { scale: 1; }
@media (max-width: 56rem) {
  .voices.is-ready { grid-template-columns: minmax(0, 1fr); }
  .voices__picker { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
}
@media (max-width: 30rem) {
  .voices__stage { padding: 1.5rem 1.25rem; }
  .voices__mark { width: 3rem; height: 3rem; }
  .voices__tab { gap: 0.625rem; min-height: 3.75rem; padding: 0.625rem 0.75rem; }
  .voices__tab::after { display: none; }
  .voices__tab img { width: 2.25rem; height: 2.25rem; }
  .voices__tab small { font-size: 0.75rem; }
}
@media (max-width: 22rem) { .voices__tab small { display: none; } }

/* ---------- Service area ---------- */
.area { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.area__panel { position: relative; padding: clamp(1.75rem, 1rem + 3vw, 3rem); background: var(--sun); overflow: hidden; }
.area__panel h3 { margin-bottom: 1.5rem; font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 0.625rem; list-style: none; }
.chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.15rem 0.7rem 0.9rem; font-weight: 600; font-size: 1rem; color: var(--ink); background: var(--white); border-radius: 999px; box-shadow: 0 1px 0 rgb(33 33 47 / 0.08); }
.chip svg { width: 1.05rem; height: 1.05rem; color: var(--raspberry); }
.area__panel-deco { position: absolute; right: -2.5rem; bottom: -2.5rem; width: 9rem; opacity: 0.9; }
.note { display: flex; gap: 1rem; align-items: flex-start; margin-top: 2rem; padding: 1.25rem 1.5rem; background: var(--white); border-radius: var(--r-md); border-left: 4px solid var(--raspberry); font-size: var(--fs-sm); line-height: 1.6; }
.note svg { width: 1.4rem; height: 1.4rem; flex: none; margin-top: 0.1rem; color: var(--raspberry); }
.section--white .note { background: var(--paper); }
@media (max-width: 56rem) { .area { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Partners ---------- */
.partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem 3rem; padding: clamp(1.75rem, 1rem + 2vw, 2.5rem) clamp(1.75rem, 1rem + 3vw, 3rem); background: var(--paper); border-radius: var(--r-xl); }
.partners p { font-weight: 600; color: var(--ink); font-size: 1.125rem; letter-spacing: -0.01em; }
.partners__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem 3rem; }
.partners__logos img { height: auto; max-height: 5.5rem; width: auto; mix-blend-mode: multiply; }

/* ---------- CTA band ---------- */
.cta { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: 2rem; align-items: center; padding: clamp(2.25rem, 1.5rem + 4vw, 4.5rem); color: rgb(255 255 255 / 0.88); background: var(--raspberry); }
.cta h2 { color: var(--white); margin-bottom: 1rem; }
.cta p { max-width: 34rem; font-size: var(--fs-lead); }
.cta .btn-row { margin-top: 2rem; }
.cta__art { position: relative; justify-self: end; width: 100%; max-width: 15rem; }
.cta::before { content: ""; position: absolute; width: 22rem; aspect-ratio: 1; right: -6rem; bottom: -8rem; background: rgb(255 255 255 / 0.08); border-radius: 50% 50% 50% 1rem; }
.cta--ink { background: var(--ink); }
@media (max-width: 48rem) { .cta { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } .cta__art { justify-self: start; width: 4.5rem; max-width: none; order: -1; } }

/* ---------- Footer ---------- */
.site-footer { padding-block: clamp(4rem, 3rem + 4vw, 6rem) 2rem; color: rgb(255 255 255 / 0.72); background: var(--ink); font-size: var(--fs-sm); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.6fr) minmax(0, 0.8fr) minmax(0, 0.9fr); gap: 3rem 2rem; padding-bottom: 3.5rem; border-bottom: 1px solid rgb(255 255 255 / 0.12); }
.footer__brand svg { height: 3.5rem; width: auto; margin-bottom: 1.5rem; }
.footer__brand p { max-width: 22rem; line-height: 1.7; }
.site-footer h2 { margin-bottom: 1.25rem; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(255 255 255 / 0.5); }
.footer__links { list-style: none; display: grid; gap: 0.25rem; }
.footer__links a { display: inline-flex; align-items: center; min-height: 2.25rem; color: var(--white); text-decoration: none; transition: color 0.2s; }
.footer__links a:hover { color: var(--sun); }
.footer__ack { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 3rem; align-items: center; padding-block: 2.5rem; border-bottom: 1px solid rgb(255 255 255 / 0.12); }
.footer__ack p { max-width: 50rem; line-height: 1.75; }
.footer__ack img { width: 15rem; height: auto; border-radius: 0.25rem; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 2rem; font-size: var(--fs-xs); color: rgb(255 255 255 / 0.55); }
.footer__bottom p { margin: 0; }
.footer__bottom a { color: inherit; }
.footer__bottom a:hover { color: var(--white); }
@media (max-width: 60rem) { .footer__top { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.2fr); } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 40rem) { .footer__top { grid-template-columns: 1fr 1fr; } .footer__top > div:last-child { grid-column: 1 / -1; } .footer__ack { grid-template-columns: minmax(0, 1fr); } }

/* ---------- What we do: hero growth scene (a vine growing toward the sun) ---------- */
@media (min-width: 62.0625rem) { .page-hero__grid--balanced { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.growth { container-type: inline-size; --b: clamp(3.5rem, 15cqi, 5rem); position: relative; width: 100%; max-width: 30rem; aspect-ratio: 400 / 440; justify-self: end; }
@media (max-width: 62rem) { .growth { justify-self: center; max-width: 28rem; } }
.growth__scene { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.growth__halo { fill: var(--white); filter: drop-shadow(0 24px 36px rgb(33 33 47 / 0.1)); }
.growth__ground { fill: var(--sky-100); }
.growth__core { fill: var(--sun); }
.growth__rays { fill: none; stroke: var(--sun); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0.1 11.4; transform-box: fill-box; transform-origin: center; }
.growth__stem { fill: none; stroke: url(#stem-grad); stroke-width: 6; stroke-linecap: round; }
.growth__leaf-shape { transform-box: fill-box; transform-origin: 0 50%; }
.growth__bud { transform-box: fill-box; transform-origin: center; }
.growth__bud circle:first-child { fill: var(--raspberry); }
.growth__bud circle:last-child { fill: var(--white); }
.growth__sparks circle { fill: var(--raspberry); opacity: 0.45; }
.growth__sparks path { fill: none; stroke: var(--sky); stroke-width: 3; stroke-linecap: round; }
.growth__list { position: absolute; inset: 0; list-style: none; }
.growth__step { --x: 30%; --y: 72.73%; --leaf: var(--raspberry); --pulse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-25 -25 150 150'%3E%3Ccircle cx='50' cy='50' r='53.3' fill='none' stroke='%23d12651' stroke-width='3.4'/%3E%3C/svg%3E"); position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.growth__step:nth-child(2) { --x: 67.5%; --y: 48.86%; --leaf: var(--sky); --pulse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-25 -25 150 150'%3E%3Ccircle cx='50' cy='50' r='53.3' fill='none' stroke='%235bbed4' stroke-width='3.4'/%3E%3C/svg%3E"); }
.growth__step:nth-child(3) { --x: 40%; --y: 23.86%; --leaf: var(--sun); --pulse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-25 -25 150 150'%3E%3Ccircle cx='50' cy='50' r='53.3' fill='none' stroke='%23ffbe5c' stroke-width='3.4'/%3E%3C/svg%3E"); }
.growth__badge { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: var(--b); aspect-ratio: 1; background: var(--white); border: 3px solid var(--leaf); border-radius: 50%; box-shadow: var(--shadow-md); translate: -50% -50%; }
.growth__badge::after { content: ""; position: absolute; inset: -25%; background: var(--pulse) center / 100% 100% no-repeat; opacity: 0; pointer-events: none; }
.growth__badge img { width: 64%; height: 64%; object-fit: contain; }
.growth__text { position: absolute; top: 0; left: calc(var(--b) / 2 + 0.75rem); width: calc(70cqi - var(--b) / 2 - 1.25rem); translate: 0 -50%; }
.growth__step:nth-child(2) .growth__text { left: auto; right: calc(var(--b) / 2 + 0.75rem); width: calc(67.5cqi - var(--b) / 2 - 1.25rem); text-align: right; }
.growth__step:nth-child(3) .growth__text { width: calc(60cqi - var(--b) / 2 - 1.25rem); }
.growth__text h2 { margin-bottom: 0.15rem; font-size: clamp(1.05rem, 0.6rem + 3.2cqi, 1.3rem); line-height: 1.25; letter-spacing: -0.015em; }
.growth__text p { font-size: clamp(0.8125rem, 0.6rem + 1.8cqi, 0.9375rem); line-height: 1.45; color: var(--ink-70); }
/* Phones: the scene is too small for side labels, so the steps stack on a single gradient stem */
@media (max-width: 30rem) {
  .growth { aspect-ratio: auto; max-width: none; padding: 1.5rem 1.25rem; background: radial-gradient(circle at calc(100% - 2.25rem) 2.25rem, var(--sun) 0 1.1rem, rgb(255 190 92 / 0.25) 1.15rem 1.7rem, transparent 1.75rem), var(--white); border-radius: var(--r-xl) var(--r-xl) var(--r-xl) var(--r-sharp); box-shadow: var(--shadow-md); }
  .growth__scene { display: none; }
  .growth__list { position: relative; display: flex; flex-direction: column-reverse; gap: 1.25rem; }
  .growth__list::before { content: ""; position: absolute; left: calc(var(--b) / 2 - 3px); top: 1.5rem; bottom: 1.5rem; width: 6px; background: linear-gradient(to top, var(--raspberry), var(--sun), var(--sky)); border-radius: 3px; }
  .growth__step, .growth__step:nth-child(n) { position: relative; left: auto; top: auto; display: flex; align-items: center; gap: 1rem; width: auto; height: auto; }
  .growth__badge { position: relative; flex: none; translate: none; }
  .growth__text, .growth__step:nth-child(n) .growth__text { position: static; width: auto; text-align: left; translate: none; }
  .growth__step:nth-child(3) .growth__text { padding-right: 3.5rem; } /* clears the little sun */
}
@media (prefers-reduced-motion: no-preference) {
  .growth__stem { stroke-dasharray: 1; stroke-dashoffset: 1; animation: grow-stem 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.2s forwards; }
  .growth__leaf-shape { scale: 0; animation: grow-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d) forwards, grow-sway 4.5s ease-in-out calc(var(--d) + 0.8s) infinite alternate; }
  .growth__bud { scale: 0; animation: grow-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.75s forwards; }
  .growth__badge { animation: grow-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) var(--t, 0.45s) both; }
  .growth__badge::after { animation: grow-pulse 3.6s ease-out calc(var(--t, 0.45s) + 1.4s) infinite; }
  .growth__text { animation: grow-text 0.6s var(--ease) calc(var(--t, 0.45s) + 0.15s) both; }
  .growth__step:nth-child(2) { --t: 0.85s; }
  .growth__step:nth-child(3) { --t: 1.25s; }
  .growth__rays { animation: grow-spin 40s linear infinite; }
  .growth__sparks > * { animation: grow-twinkle 3.2s ease-in-out infinite; }
  .growth__sparks > :nth-child(2n) { animation-delay: -1.6s; }
  .growth__sparks > :nth-child(3n) { animation-duration: 4.4s; }
}
@keyframes grow-stem { to { stroke-dashoffset: 0; } }
@keyframes grow-pop { from { scale: 0; } to { scale: 1; } }
@keyframes grow-sway { from { rotate: -5deg; } to { rotate: 6deg; } }
@keyframes grow-text { from { opacity: 0; translate: 0 0.5rem; } }
@keyframes grow-pulse { 0% { opacity: 0.55; scale: 1; } 70%, 100% { opacity: 0; scale: 1.45; } }
@keyframes grow-spin { to { rotate: 360deg; } }
@keyframes grow-twinkle { 50% { opacity: 0.15; } }

.info-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.info-card { padding: clamp(1.75rem, 1rem + 2vw, 2.5rem); background: var(--ic-bg, var(--white)); }
.info-card__icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1.25rem; background: var(--white); border-radius: 50% 50% 50% 0.3rem; color: var(--raspberry); }
.info-card__icon svg { width: 1.4rem; height: 1.4rem; }
.info-card h3 { margin-bottom: 0.75rem; }
.info-card p { color: var(--ink-80); }
.info-card .chips { margin-top: 1.5rem; }
@media (max-width: 48rem) { .info-cards { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Case study (story) ----------
   The whole case study, chapters 01–04, is told in one full-height ink stage that stays pinned while the reader scrolls.
   A routine wheel carries the story: the family flower drifts apart, each challenge turns to the top, support joins
   the broken ring into a solid one, four stops are ticked off after 12 months and the last one becomes the next goal.
   Without JS (or with reduced motion) the chapters render as a plain stacked story. */
.story__glow, .story__rail, .story__art, .story__hint { display: none; }
.story__scenes { display: grid; gap: clamp(3rem, 2rem + 3vw, 5rem); }
.chapter { display: grid; gap: 1.25rem; max-width: 52rem; }
.chapter h3 { display: flex; align-items: center; gap: 1rem; font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.028em; }
.chapter__num { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; font-size: 1rem; font-weight: 700; letter-spacing: 0; background: var(--ch-c); border-radius: 50% 50% 50% 0.3rem; }
.scene__statement { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 500; line-height: 1.4; letter-spacing: -0.015em; }
.scene__statement strong { background: linear-gradient(var(--hl), var(--hl)) 0 96% / 100% 0.08em no-repeat; }
.scene__lead { font-size: var(--fs-lead); line-height: 1.65; color: var(--ink-70); }
.scene__lead strong { color: var(--ink); }
.challenges, .approaches, .outcomes, .reward { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); background: var(--white); border-radius: var(--r-xl) var(--r-xl) var(--r-xl) var(--r-sharp); box-shadow: var(--shadow-sm); }
.challenges h4 { margin-bottom: 0.5rem; font-size: 1.25rem; line-height: 1.3; }
.challenges__list, .approaches, .outcomes__list { list-style: none; }
.challenge { display: flex; align-items: center; gap: 1rem; padding-block: 0.875rem; }
.challenge + .challenge { border-top: 1px solid var(--line); }
.challenge__icon { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; color: var(--ink); background: var(--c); border-radius: 50% 50% 50% 0.35rem; }
.challenge__icon svg { width: 1.25rem; height: 1.25rem; }
.challenge h5 { font-size: 1rem; line-height: 1.35; }
.challenge p, .approach p { line-height: 1.6; color: var(--ink-70); }
.approaches { display: grid; gap: 1.5rem; }
.approach { padding-left: 1.125rem; border-left: 4px solid var(--c); }
.approach h4 { margin-bottom: 0.375rem; font-size: 1.125rem; }
.outcomes__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.outcomes__list li { display: flex; align-items: center; gap: 0.75rem; font-weight: 600; line-height: 1.35; }
.outcomes__list svg { width: 1.75rem; height: 1.75rem; flex: none; padding: 0.35rem; stroke-width: 2.6; color: var(--ink); background: var(--c); border-radius: 50% 50% 50% 0.25rem; }
.reward { display: flex; align-items: flex-start; gap: 0.875rem; line-height: 1.6; color: var(--ink-80); }
.reward__icon { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; color: var(--ink); background: var(--sun); border-radius: 50% 50% 50% 0.3rem; }
.reward__icon svg { width: 1.1rem; height: 1.1rem; }
@media (max-width: 30rem) { .outcomes__list { grid-template-columns: minmax(0, 1fr); } }

/* Live: a tall scroll track with the stage pinned under the header */
.section--story:has(.story.is-live) { padding-bottom: 0; }
.story.is-live { height: calc(var(--n) * 55vh + 100vh); }
.is-live .story__stage { --ch-c: var(--sun); position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow: hidden; isolation: isolate; color: var(--ink); background: var(--sky); }
@supports (height: 100svh) {
  .story.is-live { height: calc(var(--n) * 55svh + 100svh); }
  .is-live .story__stage { height: calc(100svh - var(--header-h)); }
}
.is-live .story__glow { display: block; position: absolute; z-index: -1; left: 34%; top: 50%; width: min(44rem, 90vw); aspect-ratio: 1; translate: -50% -50%; background: var(--white); border-radius: 50%; opacity: 0.4; filter: blur(90px); }
.is-live .story__inner {
  position: relative; display: grid; height: 100%;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "rail art text";
  column-gap: clamp(1.5rem, 0.5rem + 4vw, 5rem); padding-block: clamp(1.5rem, 5vh, 3.5rem);
}

/* Chapter rail: numbered petals on a line that fills as the story moves on */
.is-live .story__rail { grid-area: rail; align-self: center; position: relative; display: flex; flex-direction: column; gap: clamp(1.75rem, 7vh, 4rem); list-style: none; }
.is-live .story__rail::before, .is-live .story__rail::after { content: ""; position: absolute; left: 50%; top: 1.25rem; bottom: 1.25rem; width: 2px; margin-left: -1px; background: rgb(33 33 47 / 0.18); }
.is-live .story__rail::after { background: var(--ink); scale: 1 var(--rail, 0); transform-origin: 50% 0; }
.story__dot {
  position: relative; z-index: 1; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0;
  font: inherit; font-size: 0.8125rem; font-weight: 700; color: rgb(33 33 47 / 0.72); background: var(--sky);
  border: 2px solid rgb(33 33 47 / 0.3); border-radius: 50% 50% 50% 0.3rem; cursor: pointer;
  transition: color 0.3s var(--ease), background-color 0.4s var(--ease), border-color 0.3s var(--ease), scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s var(--ease);
}
.story__dot:hover { color: var(--ink); border-color: rgb(33 33 47 / 0.65); }
.story__dot:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.story__dot.is-past { color: var(--ink); background: var(--white); border-color: transparent; }
.story__dot.is-active { scale: 1.2; color: var(--white); background: var(--ink); border-color: transparent; box-shadow: 0 0 0 0.375rem rgb(255 255 255 / 0.45); }

/* The routine wheel */
.is-live .story__art { grid-area: art; display: grid; place-items: center; min-height: 0; container-type: size; }
.wheel { position: relative; width: min(100cqw, 100cqh, 34rem); aspect-ratio: 1; }
.wheel__arc { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgb(255 255 255 / 0.45) 0 calc((1 - var(--p, 0)) * 360deg), var(--ink) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); }
.wheel__orbit { position: absolute; inset: 14%; animation: member-spin 60s linear infinite; }
.wheel__orbit::before { content: ""; position: absolute; inset: -3%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 106 106'%3E%3Ccircle cx='50' cy='50' r='49.74' fill='none' stroke='%2321212f' stroke-opacity='0.25' stroke-width='0.510' stroke-dasharray='1.531 1.531'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.wheel__line { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; overflow: visible; }
.wheel__line circle { fill: none; stroke: var(--white); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease); }
.story.is-supported .wheel__line circle { stroke-dashoffset: 0; }

.wheel__petal { position: absolute; width: 34%; aspect-ratio: 1; opacity: 0; scale: 0.3; transition: opacity 0.5s var(--ease), scale 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), translate 0.35s var(--ease), rotate 0.35s var(--ease); }
.story.is-family .wheel__petal { opacity: 1; scale: 1; }
.wheel__petal:nth-child(4) { left: 16%; top: 16%; background: var(--violet); border-radius: 50% 50% var(--r-sharp) 50%; transform-origin: 100% 100%; translate: calc(var(--d, 0) * -40%) calc(var(--d, 0) * -32%); rotate: calc(var(--d, 0) * -24deg); }
.wheel__petal:nth-child(5) { right: 16%; top: 16%; background: var(--sun); border-radius: 50% 50% 50% var(--r-sharp); transform-origin: 0 100%; translate: calc(var(--d, 0) * 34%) calc(var(--d, 0) * -40%); rotate: calc(var(--d, 0) * 20deg); }
.wheel__petal:nth-child(6) { left: 16%; bottom: 16%; background: var(--raspberry); border-radius: 50% var(--r-sharp) 50% 50%; transform-origin: 100% 0; translate: calc(var(--d, 0) * -32%) calc(var(--d, 0) * 38%); rotate: calc(var(--d, 0) * 28deg); }
.wheel__petal:nth-child(7) { right: 16%; bottom: 16%; background: var(--violet-300); border-radius: var(--r-sharp) 50% 50% 50%; transform-origin: 0 0; translate: calc(var(--d, 0) * 40%) calc(var(--d, 0) * 30%); rotate: calc(var(--d, 0) * -20deg); }
.story.is-family .wheel__petal:nth-child(4), .story.is-family .wheel__petal:nth-child(7) { scale: 0.8; }

.wheel__dial { position: absolute; inset: 0; rotate: var(--turn, 0deg); transition: rotate 1s cubic-bezier(0.34, 1.3, 0.64, 1); }
.wheel__spoke { position: absolute; inset: 0; rotate: var(--a); transition: opacity 0.5s var(--ease), scale 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: calc(var(--k) * 60ms); }
.story.is-family .wheel__spoke { opacity: 0; scale: 0.35; transition-delay: 0s; }
.wheel__spoke i {
  position: absolute; left: 50%; top: 14%; display: grid; place-items: center; width: 17%; aspect-ratio: 1;
  translate: -50% -50%; rotate: calc(-1 * (var(--a) + var(--turn, 0deg)));
  color: rgb(33 33 47 / 0.75); background: rgb(255 255 255 / 0.4); border: 2px solid rgb(33 33 47 / 0.16); border-radius: 50% 50% 50% 0.35rem;
  transition: rotate 1s cubic-bezier(0.34, 1.3, 0.64, 1), scale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.wheel__spoke i > svg { width: 44%; height: 44%; }
.wheel__spoke.is-past i, .story.is-supported .wheel__spoke i, .wheel__spoke.is-active i, .wheel__spoke.is-goal i { color: var(--ink); background: var(--c); border-color: transparent; }
.wheel__spoke.is-active i, .wheel__spoke.is-goal i { scale: 1.35; box-shadow: 0 0 0 0.35rem rgb(255 255 255 / 0.5), 0 0 0 0.75rem rgb(255 255 255 / 0.22); }
.wheel__spoke.is-goal i { animation: goal-pulse 2.2s var(--ease) infinite; }
.wheel__tick { position: absolute; right: -18%; top: -18%; display: grid; place-items: center; width: 46%; aspect-ratio: 1; color: var(--white); background: var(--ink); border-radius: 50%; box-shadow: 0 4px 10px -4px rgb(0 0 0 / 0.4); scale: 0; transition: scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: calc(var(--k) * 120ms); }
.wheel__tick svg { width: 62%; height: 62%; stroke-width: 3.2; }
.story.is-solved .wheel__tick { scale: 1; }
.wheel__hub { position: absolute; inset: 30%; display: grid; place-items: center; background: var(--white); border-radius: 50%; box-shadow: 0 0 0 0.6rem rgb(255 255 255 / 0.35), 0 0 0 1.2rem rgb(255 255 255 / 0.15); }
.wheel__hub img { grid-area: 1 / 1; width: 58%; height: 58%; object-fit: contain; opacity: 0; scale: 0.6; rotate: -12deg; transition: opacity 0.35s var(--ease), scale 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), rotate 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
.wheel__hub img.is-active { opacity: 1; scale: 1; rotate: 0deg; transition-delay: 0.1s; }
@keyframes goal-pulse { 0% { box-shadow: 0 0 0 0 rgb(255 255 255 / 0.9), 0 0 0 0 rgb(255 255 255 / 0.5); } 100% { box-shadow: 0 0 0 0.75rem rgb(255 255 255 / 0), 0 0 0 1.5rem rgb(255 255 255 / 0); } }

/* Scenes: one chapter heading at a time, one scene at a time beneath it */
.is-live .story__scenes { grid-area: text; display: grid; align-self: center; gap: 0; }
.is-live .chapter { grid-area: 1 / 1; display: grid; grid-template-rows: auto auto; align-content: center; gap: 0; max-width: 36rem; }
.is-live .chapter h3 { display: block; margin-bottom: clamp(1rem, 3vh, 2rem); font-size: clamp(1.75rem, 1rem + 2.2vw, 3rem); color: var(--ink); opacity: 0; translate: 0 1rem; transition: opacity 0.45s var(--ease), translate 0.7s var(--ease); }
.is-live .chapter.is-active h3 { opacity: 1; translate: 0 0; }
.is-live .chapter__num { display: none; }
.is-live .chapter > .scene, .is-live .chapter > .scene-group { grid-area: 2 / 1; align-self: start; } /* scenes share one cell; don't stretch boxed ones (the reward) to the tallest */
.is-live .scene-group { display: grid; align-content: start; padding: 0; background: none; box-shadow: none; }
.is-live .scene-group > .scene, .is-live .challenges__list > .scene { grid-area: 1 / 1; }
.is-live .challenges__list { display: grid; }
.is-live .scene { opacity: 0; filter: blur(6px); transition: opacity 0.45s var(--ease), filter 0.45s var(--ease); }
.is-live .scene.is-active { opacity: 1; filter: none; transition-delay: 0.15s; }

.is-live .scene__statement { font-size: clamp(1.375rem, 0.9rem + 1.5vw, 2.25rem); line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); }
.is-live .scene__statement strong { background-size: 0 0.08em; transition: background-size 0.7s var(--ease); }
.is-live .scene__statement strong.is-lit { background-size: 100% 0.08em; }
.is-live .w { color: rgb(33 33 47 / 0.3); transition: color 0.4s var(--ease); }
.is-live .w.is-lit { color: var(--ink); }
.is-live .scene__lead { font-size: clamp(1.125rem, 0.95rem + 0.7vw, 1.5rem); line-height: 1.55; color: rgb(33 33 47 / 0.82); }
.is-live .scene__lead strong { color: var(--ink); }

.is-live .challenges h4 { margin-bottom: 1.25rem; font-size: clamp(1.125rem, 0.95rem + 0.7vw, 1.5rem); font-weight: 500; line-height: 1.35; color: rgb(33 33 47 / 0.82); opacity: 0; transition: opacity 0.45s var(--ease); }
.is-live .challenges.is-active h4 { opacity: 1; }
.is-live .challenge { display: block; padding: 0; border: 0; }
.is-live .challenge__icon { display: none; }
.is-live .challenge h5, .is-live .approach h4 { display: inline; margin: 0; font-size: clamp(1.75rem, 1rem + 2.4vw, 2.75rem); line-height: 1.15; letter-spacing: -0.025em; color: var(--ink); background: linear-gradient(var(--c), var(--c)) 0 96% / 100% 0.08em no-repeat; }
.is-live .challenge p, .is-live .approach p { max-width: 34ch; margin-top: 1rem; font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem); line-height: 1.5; color: rgb(33 33 47 / 0.82); }
.is-live .approach { padding: 0; border: 0; }
.is-live .approach p { max-width: 40ch; font-size: clamp(1rem, 0.92rem + 0.35vw, 1.25rem); }
.is-live .approach p strong { color: var(--ink); }

.is-live .outcomes { padding: 0; background: none; box-shadow: none; }
.is-live .outcomes__list { gap: 0.625rem; }
.is-live .outcomes__list li { padding: 1rem 1.125rem; font-size: clamp(1rem, 0.92rem + 0.35vw, 1.1875rem); color: var(--ink); background: rgb(255 255 255 / 0.45); border-radius: var(--r-md); }
.is-live .reward { padding: 1.25rem 1.375rem; font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem); line-height: 1.5; color: rgb(33 33 47 / 0.86); background: rgb(255 255 255 / 0.4); border: 1px dashed rgb(33 33 47 / 0.3); border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-sharp); box-shadow: none; }

.is-live .story__hint { position: absolute; left: 50%; bottom: clamp(0.75rem, 2.5vh, 1.5rem); display: flex; align-items: center; gap: 0.5rem; translate: -50% 0; font-size: var(--fs-xs); font-weight: 600; color: rgb(33 33 47 / 0.7); transition: opacity 0.3s var(--ease); }
.is-live .story__hint::after { content: ""; width: 0.875rem; height: 0.875rem; margin: -0.1875rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.3 6.3 7 11l4.7-4.7' fill='none' stroke='%2321212f' stroke-opacity='0.7' stroke-width='2'/%3E%3C/svg%3E") center / 100% 100% no-repeat; animation: hint-bob 1.4s ease-in-out infinite; }
.story.is-started .story__hint { opacity: 0; }
@keyframes hint-bob { 50% { translate: 0 3px; } }

.is-live .wheel__spoke:nth-child(2), .is-live .challenge:nth-child(2), .is-live .approach:nth-child(1), .is-live .outcomes__list li:nth-child(2) { --c: var(--white) !important; }
.is-live .scene__statement strong:nth-of-type(1) { --hl: var(--white) !important; }
.is-live .scene__statement strong:nth-of-type(3) { --hl: var(--violet) !important; }

/* Large screens (1440p and up): grow the stage with the viewport so it fills the height */
@media (min-width: 100rem) and (min-height: 62rem) {
  .is-live .story__inner { width: min(100% - 2 * var(--gutter), 120rem); grid-template-columns: auto minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 6vh; padding-block: 5vh; }
  .wheel { width: min(100cqw, 100cqh, 64rem); }
  .is-live .story__rail { gap: 8vh; }
  .story__dot { width: 3.25rem; height: 3.25rem; font-size: 1rem; }
  .is-live .chapter { max-width: 54rem; }
  .is-live .chapter h3 { margin-bottom: 3.5vh; font-size: max(3rem, 4.6vh); }
  .is-live .scene__statement { font-size: max(2.25rem, 3.5vh); }
  .is-live .scene__lead, .is-live .challenges h4 { font-size: max(1.5rem, 2.25vh); }
  .is-live .challenge h5, .is-live .approach h4 { font-size: max(2.75rem, 4.5vh); }
  .is-live .challenge p { margin-top: 1.5vh; font-size: max(1.375rem, 2.2vh); }
  .is-live .approach p { margin-top: 1.5vh; font-size: max(1.25rem, 2vh); }
  .is-live .outcomes__list { gap: 1vh; }
  .is-live .outcomes__list li { padding: 1.6vh 1.5rem; font-size: max(1.1875rem, 1.9vh); }
  .is-live .outcomes__list svg { width: 2.25rem; height: 2.25rem; }
  .is-live .reward { padding: 2.2vh 1.75rem; font-size: max(1.375rem, 2.1vh); }
  .is-live .reward__icon { width: 2.75rem; height: 2.75rem; }
  .is-live .story__hint { font-size: 1rem; }
}

/* Tablet and phone: no rail, so the wheel gets the full width above the scene */
@media (max-width: 56rem) {
  .is-live .story__inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "art" "text"; row-gap: clamp(1rem, 3.5vh, 2rem); padding-block: clamp(1.75rem, 5vh, 3rem) clamp(1.25rem, 3vh, 2rem); }
  .is-live .story__glow { left: 50%; top: 42%; }
  /* Leave room around the wheel: the challenge turned to the top grows and wears halo rings past the wheel's edge */
  .wheel { width: min(92cqw, 88cqh, 34rem); }
  .is-live .story__rail { display: none; }
  .is-live .chapter { max-width: 40rem; }
  .is-live .chapter h3 { margin-bottom: 0.75rem; font-size: clamp(1.375rem, 1rem + 2vw, 2rem); }
  .is-live .scene__statement { font-size: clamp(1.1875rem, 0.9rem + 1.6vw, 1.75rem); }
  .is-live .scene__lead { font-size: clamp(1rem, 0.9rem + 0.6vw, 1.25rem); }
  .is-live .challenges h4 { margin-bottom: 0.75rem; font-size: 1rem; }
  .is-live .challenge h5, .is-live .approach h4 { font-size: clamp(1.5rem, 1rem + 2.4vw, 2.25rem); }
  .is-live .challenge p, .is-live .approach p { margin-top: 0.625rem; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); }
  .is-live .approach p { font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.125rem); }
  .is-live .outcomes__list { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .is-live .outcomes__list li { padding: 0.625rem 0.875rem; font-size: 0.9375rem; }
  .is-live .reward { padding: 1rem; font-size: 1rem; }
  .is-live .story__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .wheel__orbit, .wheel__spoke.is-goal i { animation: none; } }

/* ---------- About ---------- */
/* What drives us: bento (vision as the feature, goals + mission beside it) */
.drives { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; list-style: none; }
.drive {
  --d-bg: var(--sky-100); --d-mark: rgb(91 190 212 / 0.45); --d-num: rgb(33 33 47 / 0.08);
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--d-bg); border-radius: var(--r-xl) var(--r-xl) var(--r-xl) var(--r-sharp);
}
.drive:nth-child(1) {
  --d-bg: var(--sky); --d-num: rgb(33 33 47 / 0.14); grid-row: span 2;
  background: radial-gradient(circle at 100% 100%, rgb(255 255 255 / 0.45), transparent 50%), var(--sky);
}
.drive:nth-child(2) { --d-bg: var(--raspberry-100); --d-mark: rgb(209 38 81 / 0.22); }
.drive:nth-child(3) { --d-bg: var(--sun-100); --d-mark: rgb(255 190 92 / 0.6); border-radius: var(--r-xl) var(--r-sharp) var(--r-xl) var(--r-xl); }
.drive__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.drive__icon { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; background: var(--white); border-radius: 50% 50% 50% 0.4rem; box-shadow: var(--shadow-sm); transition: rotate 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.drive__icon img { width: 62%; height: 62%; object-fit: contain; }
.drive:hover .drive__icon { rotate: -8deg; scale: 1.06; }
.drive__num { font-size: clamp(3rem, 2rem + 3vw, 4.75rem); font-weight: 700; line-height: 0.8; letter-spacing: -0.05em; color: var(--d-num); }
.drive__title { margin-bottom: 0.75rem; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); letter-spacing: -0.02em; }
.drive__title span { font-weight: 400; opacity: 0.65; }
.drive__text { font-size: 1.0625rem; line-height: 1.6; color: var(--ink-80); }
.drive__text strong { font-weight: 600; color: var(--ink); background: linear-gradient(var(--d-mark), var(--d-mark)) 0 94% / 100% 0.14em no-repeat; }
.drive:nth-child(1) .drive__title { margin-top: auto; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.drive:nth-child(1) .drive__text { font-size: clamp(1.25rem, 0.95rem + 1.2vw, 1.875rem); font-weight: 500; line-height: 1.4; letter-spacing: -0.015em; color: var(--ink); }
.drive:nth-child(1) .drive__text strong { font-weight: 700; background: linear-gradient(rgb(255 255 255 / 0.75), rgb(255 255 255 / 0.75)) 0 94% / 100% 0.1em no-repeat; }
.drive:nth-child(1)::before { content: ""; position: absolute; z-index: -1; right: -5.8rem; top: -5.8rem; width: 17.6rem; aspect-ratio: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 110 110'%3E%3Ccircle cx='50' cy='50' r='49.61' fill='none' stroke='%23fff' stroke-opacity='0.7' stroke-width='0.781' stroke-dasharray='2.344 2.344'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.drive:nth-child(1)::after { content: ""; position: absolute; z-index: -1; right: 2.125rem; top: 6.125rem; width: 2.25rem; aspect-ratio: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-25 -25 150 150'%3E%3Cpath fill='%23ffbe5c' d='M50 0H50A50 50 0 0 1 100 50V50A50 50 0 0 1 50 100H16.7A16.7 16.7 0 0 1 0 83.3V50A50 50 0 0 1 50 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  .drive:nth-child(1)::before { animation: member-spin 40s linear infinite; }
  .drive:nth-child(1)::after { animation: member-drift 5s ease-in-out infinite alternate; }
  @supports (animation-timeline: view()) {
    .drive:not(:first-child) .drive__text strong { animation: drive-mark linear both; animation-timeline: view(); animation-range: entry 40% cover 45%; }
  }
}
@keyframes drive-mark { from { background-size: 0 0.14em; } to { background-size: 100% 0.14em; } }
@media (max-width: 56rem) {
  .drives { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drive:nth-child(1) { grid-column: 1 / -1; grid-row: auto; }
  .drive:nth-child(1) .drive__title { margin-top: 0; }
}
@media (max-width: 36rem) {
  .drives { grid-template-columns: minmax(0, 1fr); }
  .drive__icon { width: 3.75rem; height: 3.75rem; }
}

/* Values: editorial rows that fill with colour on hover */
.values { list-style: none; border-top: 1px solid var(--line-strong); }
.value {
  --v-c: var(--raspberry); --v-fg: var(--white); --v-tint: var(--raspberry-50);
  position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center;
  gap: clamp(1.25rem, 0.75rem + 2.5vw, 3.5rem); padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) clamp(0.75rem, 0.25rem + 1.5vw, 2rem);
  border-bottom: 1px solid var(--line-strong);
}
.value:nth-child(2) { --v-c: var(--sky); --v-fg: var(--ink); --v-tint: var(--sky-50); }
.value:nth-child(3) { --v-c: var(--sun); --v-fg: var(--ink); --v-tint: var(--sun-50); }
.value::before { content: ""; position: absolute; z-index: -1; inset: 0.5rem 0; background: var(--v-tint); border-radius: var(--r-xl) var(--r-xl) var(--r-xl) var(--r-sharp); scale: 0 1; transform-origin: 0 50%; transition: scale 0.55s cubic-bezier(0.65, 0, 0.35, 1); }
.value:hover::before { scale: 1; }
.value__badge { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; color: var(--v-fg); background: var(--v-c); border-radius: 50% 50% 50% 0.4rem; transition: rotate 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), border-radius 0.5s var(--ease); }
.value__badge svg { width: 2rem; height: 2rem; }
.value:hover .value__badge { rotate: -10deg; border-radius: 50%; }
.value__title { display: grid; gap: 0.25rem; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.375rem); line-height: 1.1; letter-spacing: -0.03em; }
.value p { max-width: 34rem; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-80); }
@media (max-width: 48rem) {
  .value { grid-template-columns: auto minmax(0, 1fr); row-gap: 0.875rem; align-items: start; }
  .value p { grid-column: 2; }
}
@media (max-width: 30rem) {
  .value { column-gap: 1rem; padding-inline: 0.25rem; }
  .value__badge { width: 3.25rem; height: 3.25rem; }
  .value__badge svg { width: 1.5rem; height: 1.5rem; }
  .value p { grid-column: 1 / -1; font-size: 1rem; }
}

/* Team: sky section with drifting brand shapes behind staggered horizontal profile cards (the full story opens inside each card) */
.section--team { position: relative; isolation: isolate; overflow: clip; background: radial-gradient(ellipse 70% 60% at 50% 62%, rgb(255 255 255 / 0.55), transparent 70%), var(--sky-100); }
.section--team > .container { position: relative; z-index: 1; }
.team-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Floating decorations are SVG images inside transparent margin (see Motion) */
.team-sky__ring, .team-sky__shape, .team-sky__mark { right: 3%; top: 44%; width: 4.5rem; opacity: 0.6; --img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-25 -25 150 150'%3E%3Cpath fill='%23fff' d='M30.08 13.16H30.08A16.92 16.92 0 0 1 47 30.08V42.97A4.03 4.03 0 0 1 42.97 47H30.08A16.92 16.92 0 0 1 13.16 30.08V30.08A16.92 16.92 0 0 1 30.08 13.16Z'/%3E%3Cpath fill='%23fff' d='M76.5 0H76.5A23.5 23.5 0 0 1 100 23.5V23.5A23.5 23.5 0 0 1 76.5 47H58.6A5.6 5.6 0 0 1 53 41.4V23.5A23.5 23.5 0 0 1 76.5 0Z'/%3E%3Cpath fill='%23fff' d='M23.5 53H41.4A5.6 5.6 0 0 1 47 58.6V76.5A23.5 23.5 0 0 1 23.5 100H23.5A23.5 23.5 0 0 1 0 76.5V76.5A23.5 23.5 0 0 1 23.5 53Z'/%3E%3Cpath fill='%23fff' d='M57.03 53H69.92A16.92 16.92 0 0 1 86.84 69.92V69.92A16.92 16.92 0 0 1 69.92 86.84H69.92A16.92 16.92 0 0 1 53 69.92V57.03A4.03 4.03 0 0 1 57.03 53Z'/%3E%3C/svg%3E"); }
.section--team .lead { color: var(--ink-80); }
.team { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); list-style: none; }
.member {
  --m-bg: var(--sky-100); --m-tint: var(--sky-50); --m-accent: var(--sky); --m-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 106 106'%3E%3Ccircle cx='50' cy='50' r='49.73' fill='none' stroke='%235bbed4' stroke-width='0.539' stroke-dasharray='1.617 1.617'/%3E%3C/svg%3E");
  --m-in: calc(var(--r-xl) - 0.625rem);
  --m-pad: clamp(1rem, 0.25rem + 2.5vw, 2.75rem);
  --m-pad-b: clamp(0.25rem, 1vw, 0.75rem);
  --m-media: 1; --m-side: 2;
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); width: min(100%, 66rem);
  padding: 0.625rem; background: rgb(255 255 255 / 0.84);
  border-radius: var(--r-xl) var(--r-xl) var(--r-xl) var(--r-sharp);
  box-shadow: 0 0 0 0.75rem rgb(255 255 255 / 0.32), 0 0 0 1.5rem rgb(255 255 255 / 0.14), 0 30px 60px -30px rgb(33 33 47 / 0.25);
}
.member:nth-child(2) {
  --m-bg: var(--raspberry-100); --m-tint: var(--raspberry-50); --m-accent: var(--raspberry); --m-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 106 106'%3E%3Ccircle cx='50' cy='50' r='49.73' fill='none' stroke='%23d12651' stroke-width='0.539' stroke-dasharray='1.617 1.617'/%3E%3C/svg%3E");
  --m-media: 2; --m-side: 1;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); justify-self: end;
  border-radius: var(--r-xl) var(--r-xl) var(--r-sharp) var(--r-xl);
}

/* Portrait stage: dotted tint, halo and a slowly turning ring */
.member__media {
  grid-column: var(--m-media); grid-row: 1; align-self: start;
  position: relative; isolation: isolate; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden;
  background: radial-gradient(rgb(33 33 47 / 0.09) 1.2px, transparent 1.7px) 0 0 / 1.25rem 1.25rem, var(--m-bg);
  border-radius: var(--m-in);
}
.member__media::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 44%; height: 58%; aspect-ratio: 1; background: var(--white); border-radius: 50%; box-shadow: 0 0 0 1.25rem rgb(255 255 255 / 0.45), 0 0 0 2.5rem rgb(255 255 255 / 0.2); transform: translate(-50%, -50%); }
.member__ring { position: absolute; z-index: -1; left: 50%; top: 44%; height: 86%; aspect-ratio: 1; opacity: 0.45; translate: -50% -50%; }
.member__ring::before { content: ""; position: absolute; inset: -3%; background: var(--m-ring) center / 100% 100% no-repeat; }
/* The bobbing mascot. Its shadow is drawn inside the *-lift.svg files, not with a CSS filter: in Firefox a CSS filter
   on a scaled image inside a moving layer gets re-rasterised at shifting offsets, so the mascot twitched. The wrapper
   keeps the old 221x251 mascot box; the image overflows it by the shadow margins (40/10/40/70 SVG units). */
.member__mascot { position: relative; display: block; height: 40%; aspect-ratio: 221 / 251; margin-top: -12%; }
.member__mascot img { position: absolute; left: -18.11%; top: -3.99%; width: 136.22%; max-width: none; height: 131.88%; }
.member__years { position: absolute; left: 50%; bottom: clamp(0.875rem, 0.5rem + 1vw, 1.25rem); display: flex; align-items: center; gap: 0.625rem; width: max-content; max-width: calc(100% - 2rem); padding: 0.4rem 1rem 0.4rem 0.4rem; background: var(--white); border-radius: 999px; box-shadow: var(--shadow-md); transform: translateX(-50%); }
.member__years b { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; font-size: 0.875rem; font-weight: 700; color: var(--ink); background: var(--sun); border-radius: 50%; }
.member__years span { font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; color: var(--ink); }

/* Intro */
.member__body { grid-column: var(--m-side); grid-row: 1; padding: clamp(1.25rem, 0.75rem + 1.5vw, 2.25rem) var(--m-pad) var(--m-pad-b); }
.member__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1.25rem; }
.member__head h3 { grid-column: 1; grid-row: 1; font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem); line-height: 1; letter-spacing: -0.035em; }
.member__role { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: 500; line-height: 1.3; color: var(--ink-70); }
.member__role::before { content: ""; flex: none; width: 0.625rem; aspect-ratio: 1; background: var(--m-accent); border-radius: 50% 50% 50% 0.15rem; }
.member__swash { grid-column: 1; grid-row: 2; display: block; contain: inline-size; width: 100%; max-width: 7rem; height: auto; aspect-ratio: 120 / 14; margin-top: 0.375rem; color: var(--m-accent); }
.member__facts { display: grid; margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem); list-style: none; border-top: 1px solid var(--line); }
.member__facts li { display: flex; align-items: flex-start; gap: 0.875rem; padding-block: 0.875rem; font-size: 0.9375rem; font-weight: 500; line-height: 1.5; color: var(--ink); border-bottom: 1px solid var(--line); }
.member__facts svg { width: 1.625rem; height: 1.625rem; flex: none; margin-top: -0.0625rem; padding: 0.35rem; color: var(--ink); background: var(--m-bg); border-radius: 50% 50% 50% 0.2rem; }

/* Full story. Without JS it simply sits under the profile. */
.member__story { grid-column: 1 / -1; grid-row: 2; }
.member__bio { position: relative; padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem) var(--m-pad); }
.member__bio p { max-width: 62ch; font-size: 0.9375rem; line-height: 1.75; color: var(--ink-80); }
.member__bio p:first-child { font-weight: 500; color: var(--ink); }

/* With JS the story panel shares the card's grid area with the portrait and intro, so the card already
   holds its height and opening it never changes layout at any size. It grows as a circle out of the button
   (which never moves) rather than wiping vertically, so the reveal can't read as the page scrolling. */
.member { --m-ox: 70.8%; --m-oy: calc(100% - 1.875rem - var(--m-pad-b)); }
.member:nth-child(2) { --m-ox: 29.2%; }
.member.has-story { grid-template-rows: minmax(0, 1fr) auto; }
.has-story .member__media { grid-row: 1 / 3; align-self: stretch; }
.has-story .member__story {
  grid-row: 1 / 3; position: relative; z-index: 2; visibility: hidden;
  background: radial-gradient(circle at 100% 0, var(--m-bg), transparent 45%), var(--m-tint);
  border-radius: var(--m-in);
  clip-path: circle(0 at var(--m-ox) var(--m-oy));
  transition: clip-path 0.6s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s linear 0.6s;
}
.has-story.is-story-open .member__story { visibility: visible; clip-path: circle(150% at var(--m-ox) var(--m-oy)); transition: clip-path 0.7s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s; }
.has-story .member__bio { padding-bottom: calc(3.75rem + var(--m-pad-b) + clamp(1.5rem, 1rem + 1vw, 2rem)); columns: 2; column-gap: clamp(1.5rem, 0.5rem + 3vw, 3.5rem); }
.has-story .member__bio::before { content: "\201C"; position: absolute; right: 1.25rem; top: -0.5rem; font-size: 6rem; font-weight: 700; line-height: 1; color: var(--m-accent); opacity: 0.25; pointer-events: none; }
.has-story .member__bio p { position: relative; }
.member__story-face { display: none; }
.has-story .member__story-face { position: absolute; bottom: calc(var(--m-pad-b) + 0.25rem); left: var(--m-pad); display: block; width: auto; height: 3.5rem; filter: drop-shadow(0 8px 10px rgb(33 33 47 / 0.18)); }
.member:nth-child(2) .member__story-face { left: auto; right: var(--m-pad); }

.member__toggle {
  grid-column: var(--m-side); grid-row: 2; position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.75rem; margin: 1.5rem var(--m-pad) var(--m-pad-b);
  padding: 0.625rem 0.625rem 0.625rem clamp(1rem, 0.75rem + 1vw, 1.375rem);
  font-size: 1rem; font-weight: 600; text-align: left; color: var(--ink); background: var(--m-tint); border: 0; cursor: pointer;
  border-radius: var(--m-in) var(--m-in) var(--m-in) var(--r-sharp);
  transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.member:nth-child(2) .member__toggle { border-radius: var(--m-in) var(--m-in) var(--r-sharp) var(--m-in); }
.member__toggle:hover { background: var(--m-bg); }
.member__toggle[aria-expanded="true"] { background: var(--white); box-shadow: var(--shadow-sm); }
.member__toggle svg { width: 2.5rem; height: 2.5rem; flex: none; padding: 0.7rem; color: var(--ink); background: var(--white); border-radius: 50%; box-shadow: var(--shadow-sm); transition: rotate 0.35s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease); }
.member__toggle[aria-expanded="true"] svg { color: var(--white); background: var(--ink); rotate: 180deg; }
.member__toggle:hover svg { color: var(--white); background: var(--ink); }
/* Both labels share one cell so the button keeps the longer label's size and never resizes when toggled */
.member__toggle-label { display: grid; }
.member__toggle-open, .member__toggle-close { grid-area: 1 / 1; }
.member__toggle-close, .member__toggle[aria-expanded="true"] .member__toggle-open { visibility: hidden; }
.member__toggle[aria-expanded="true"] .member__toggle-close { visibility: visible; }

@media (prefers-reduced-motion: no-preference) {
  .has-story .member__bio p { opacity: 0; transition: opacity 0.2s var(--ease); }
  .has-story.is-story-open .member__bio p { opacity: 1; transition: opacity 0.5s var(--ease) calc(0.3s + var(--i, 0) * 0.1s); }
  .member__bio p:nth-child(2) { --i: 1; }
  .member__bio p:nth-child(3) { --i: 2; }
  .member__mascot { animation: member-bob 5s ease-in-out infinite alternate; }
  .member:nth-child(2) .member__mascot { animation-delay: -2.5s; }
  .member__ring { animation: member-spin 36s linear infinite; }
  .member:nth-child(2) .member__ring { animation-direction: reverse; }
  .team-sky__ring { animation: member-spin 90s linear infinite; }
  .team-sky__ring--inner { animation-duration: 70s; animation-direction: reverse; }
  .team-sky__mark { animation: member-spin 30s linear infinite; }
  .team-sky__shape { animation: sky-float-a 16s ease-in-out infinite; }
  .team-sky__shape:nth-of-type(2n) { animation-name: sky-float-b; animation-duration: 19s; }
  .team-sky__shape:nth-of-type(3n) { animation-duration: 13s; animation-delay: -6s; }
  .team-sky__shape:nth-of-type(4) { animation-delay: -9s; }
  .team-sky__shape:nth-of-type(5) { animation-delay: -4s; }
  .team-sky__shape:nth-of-type(7) { animation-delay: -11s; }
  @supports (animation-timeline: view()) {
    .member__swash path { stroke-dasharray: 1; animation: member-draw linear both; animation-timeline: view(); animation-range: entry 30% cover 40%; }
    .member__facts li { animation: member-fact linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
    .member__facts li:nth-child(2) { animation-range: entry 25% entry 85%; }
    .member__facts li:nth-child(3) { animation-range: entry 40% entry 100%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .has-story .member__story, .has-story.is-story-open .member__story { transition: none; }
}
@keyframes member-bob { from { translate: 0 -4px; } to { translate: 0 6px; } }
@keyframes member-spin { to { rotate: 360deg; } }
@keyframes sky-float-a { 0%, 100% { translate: 0 0; rotate: 0deg; } 33% { translate: 1.75rem -1.5rem; rotate: 35deg; } 66% { translate: -1.25rem -2.75rem; rotate: -20deg; } }
@keyframes sky-float-b { 0%, 100% { translate: 0 0; rotate: 0deg; scale: 1; } 40% { translate: -2rem 1.5rem; rotate: -40deg; scale: 1.15; } 75% { translate: 1.25rem 2.5rem; rotate: 25deg; scale: 0.9; } }
@keyframes member-drift { from { translate: 0 0; rotate: 0deg; } to { translate: 6px -10px; rotate: 18deg; } }
@keyframes member-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes member-fact { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 62rem) {
  .member { width: 100%; }
  .team-sky__shape:nth-of-type(-n+3) { display: none; }
}
/* Phones: one column. The story covers the portrait and intro above the button; the portrait row takes up
   any extra height the story needs, so the card is the same size open or closed. */
@media (max-width: 46rem) {
  .team { gap: 2.5rem; }
  .member, .member:nth-child(2) { --m-media: 1; --m-side: 1; --m-pad: 0.625rem; --m-pad-b: 0.25rem; --m-ox: 50%; --m-oy: calc(100% + 3.125rem); grid-template-columns: minmax(0, 1fr); border-radius: var(--r-xl) var(--r-xl) var(--r-xl) var(--r-sharp); box-shadow: 0 0 0 0.5rem rgb(255 255 255 / 0.32), 0 0 0 1rem rgb(255 255 255 / 0.14), 0 24px 48px -28px rgb(33 33 47 / 0.25); }
  .member__media, .member__body, .member__toggle, .member__story { grid-row: auto; }
  .member__media { aspect-ratio: auto; height: clamp(13rem, 10rem + 12vw, 16rem); }
  .member.has-story { grid-template-rows: minmax(0, 1fr) auto auto; }
  .has-story .member__media { grid-row: 1; height: auto; min-height: clamp(13rem, 10rem + 12vw, 16rem); }
  .has-story .member__body { grid-row: 2; }
  .has-story .member__toggle { grid-row: 3; }
  .has-story .member__story { grid-row: 1 / 3; }
  .member__mascot { height: 6.5rem; margin-top: -3rem; }
  .member__body { padding-top: 1.25rem; }
  .member__toggle { margin-top: 1.25rem; }
  .member:nth-child(2) .member__toggle { border-radius: var(--m-in) var(--m-in) var(--m-in) var(--r-sharp); }
  .has-story .member__bio { padding: 1.75rem 1.25rem 1.5rem; columns: auto; }
  .has-story .member__bio::before { right: 0.75rem; }
  .has-story .member__story-face { display: none; }
  .team-sky__ring { top: 50%; }
  .team-sky__shape:nth-of-type(6), .team-sky__mark { display: none; }
}
@media (max-width: 30rem) {
  .member__head { column-gap: 1rem; }
  .member__toggle { font-size: 0.9375rem; }
}

/* Checks & training: heading beside one calm checklist */
.creds { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); background: var(--sun); border-radius: var(--r-xl) var(--r-xl) var(--r-xl) var(--r-sharp); }
.creds__intro img { width: 3rem; height: 3rem; margin-bottom: 1.25rem; }
.creds__intro h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.15rem); line-height: 1.2; letter-spacing: -0.025em; }
.creds__list { padding: 0.375rem 1.25rem; list-style: none; background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.creds__list li { display: flex; align-items: center; gap: 1rem; padding-block: 0.875rem; font-weight: 600; line-height: 1.4; color: var(--ink); }
.creds__list li + li { border-top: 1px solid var(--line); }
.creds__icon { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; color: var(--ink); background: var(--sky-100); border-radius: 50%; }
.creds__icon svg { width: 1.15rem; height: 1.15rem; }
.creds__name { flex: 1; min-width: 0; }
.creds__tick { flex: none; width: 1.5rem; height: 1.5rem; padding: 0.3rem; color: var(--ink); background: var(--sky); border-radius: 50%; }
@media (max-width: 56rem) { .creds { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 30rem) {
  .creds { padding: 1.25rem; }
  .creds__list { padding: 0.25rem 1rem; }
  .creds__list li { gap: 0.75rem; font-size: 0.9375rem; }
  .creds__icon { width: 2.25rem; height: 2.25rem; }
}

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 1rem + 5vw, 5rem); align-items: start; }
.contact-grid h1 { margin-bottom: 1.5rem; }
.contact-methods { display: grid; gap: 0.75rem; margin-top: 2.5rem; list-style: none; }
.contact-method { display: flex; gap: 1.125rem; align-items: center; padding: 1.25rem 1.5rem; background: var(--white); border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-sharp); box-shadow: var(--shadow-sm); }
.contact-method--phones { container-type: inline-size; display: grid; gap: 1.25rem; padding: 1.5rem; }
.contact-method__head { display: flex; align-items: center; gap: 1.125rem; }
.contact-method__note { margin-top: 0.15rem; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-70); }
.contact-method__content { flex: 1; min-width: 0; }
.contact-method__icon { display: grid; place-items: center; width: 3rem; height: 3rem; flex: none; color: var(--white); background: var(--cm-c, var(--raspberry)); border-radius: 50% 50% 50% 0.3rem; }
.contact-method:nth-child(2) { --cm-c: var(--ink); }
.contact-method:nth-child(3) { --cm-c: var(--violet); }
.contact-method__icon svg { width: 1.3rem; height: 1.3rem; }
.contact-method__label { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-70); }
.contact-method a:not(.phone-card) { font-size: 1.0625rem; font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: break-word; }
.contact-method a:not(.phone-card, .link-arrow):hover { color: var(--raspberry); text-decoration: underline; text-underline-offset: 3px; }

/* Call tiles: the number leads, with a "Call" action beside it (the section icon already says "phone") */
.phone-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; list-style: none; }
.phone-card {
  --pc: var(--sun); --pc-bg: var(--sun-50); --pc-bd: var(--sun-100);
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  height: 100%; padding: 0.75rem 0.75rem 0.75rem 1.25rem; text-decoration: none; color: var(--ink);
  background: var(--pc-bg); border: 1.5px solid var(--pc-bd); border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-sharp);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.phone-list li:nth-child(2) .phone-card { --pc: var(--sky); --pc-bg: var(--sky-50); --pc-bd: var(--sky-100); }
.phone-card__num { font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem); font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.phone-card__go { display: inline-flex; align-items: center; gap: 0.375rem; flex: none; padding: 0.5rem 0.875rem; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); background: var(--pc); border-radius: 999px; transition: background-color 0.25s var(--ease), color 0.25s var(--ease); }
.phone-card__go svg { width: 0.95rem; height: 0.95rem; }
.phone-card:hover { border-color: var(--pc); box-shadow: var(--shadow-md); }
.phone-card:hover .phone-card__go { color: var(--white); background: var(--ink); }
@container (max-width: 32rem) { .phone-list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 56rem) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Forms ---------- */
.form-card { padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); background: var(--white); box-shadow: var(--shadow-lg); }
.form-card__title { margin-bottom: 0.5rem; }
.form-card__intro { margin-bottom: 2rem; color: var(--ink-70); font-size: var(--fs-sm); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; }
.field { display: grid; gap: 0.5rem; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend, .field .label { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.field .req { color: var(--raspberry); }
.field .hint { margin-top: -0.25rem; font-size: var(--fs-xs); color: var(--ink-70); }
.input, .select, .textarea {
  width: 100%; min-height: 3.25rem; padding: 0.8rem 1rem;
  font-size: 1rem; line-height: 1.5; color: var(--ink);
  background: var(--paper); border: 1.5px solid transparent; border-radius: var(--r-sm);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.input::placeholder, .textarea::placeholder { color: #8a8794; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
.input:focus, .select:focus, .textarea:focus { outline: none; background: var(--white); border-color: var(--ink); box-shadow: 0 0 0 4px rgb(209 38 81 / 0.16); }
.input:user-invalid, .select:user-invalid, .textarea:user-invalid { border-color: var(--raspberry); background: var(--raspberry-50); }
.textarea { min-height: 9.5rem; resize: vertical; }
.select { padding-right: 3rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2321212f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.1rem; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.form-actions p { font-size: var(--fs-xs); color: var(--ink-70); }
@media (max-width: 36rem) { .form-grid { grid-template-columns: minmax(0, 1fr); } .form-actions .btn { width: 100%; } }
.form-error { margin-top: 1.5rem; padding: 0.875rem 1.125rem; font-size: var(--fs-sm); font-weight: 500; color: var(--raspberry-600); background: var(--raspberry-50); border-left: 4px solid var(--raspberry); border-radius: var(--r-sharp) var(--r-sm) var(--r-sm) var(--r-sharp); }
form.is-sending [type="submit"] { opacity: 0.6; cursor: progress; }

fieldset.field { margin: 0; padding: 0; border: 0; min-width: 0; }
.choice-row { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3rem; padding: 0.6rem 1.25rem 0.6rem 0.9rem; font-weight: 500; color: var(--ink); background: var(--paper); border: 1.5px solid transparent; border-radius: 999px; transition: background-color 0.2s, border-color 0.2s; }
.choice span::before { content: ""; width: 1.15rem; height: 1.15rem; border: 2px solid var(--line-strong); border-radius: 50%; background: var(--white); transition: border 0.2s, box-shadow 0.2s; }
.choice:hover span { border-color: var(--line-strong); }
.choice input:checked + span { background: var(--white); border-color: var(--ink); }
.choice input:checked + span::before { border: 5px solid var(--raspberry); }
.choice input:focus-visible + span { outline: 3px solid var(--raspberry); outline-offset: 2px; }

/* Multi-step complaint form */
.stepper { display: flex; gap: 0.375rem; margin-bottom: 2rem; list-style: none; }
.stepper li { flex: 1; }
.stepper li[hidden] { display: none; }
.stepper__bar { display: block; height: 0.375rem; background: var(--paper-200); border-radius: 999px; transition: background-color 0.3s var(--ease); }
.stepper li.is-done .stepper__bar { background: var(--ink); }
.stepper li.is-current .stepper__bar { background: var(--raspberry); }
.stepper__label { display: block; margin-top: 0.6rem; font-size: var(--fs-xs); font-weight: 500; line-height: 1.3; color: var(--ink-70); }
.stepper li.is-current .stepper__label { font-weight: 600; color: var(--ink); }
@media (max-width: 40rem) { .stepper__label { display: none; } }
.step-count { margin-bottom: 0.5rem; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--raspberry); }
.form-step[hidden] { display: none; }
.form-step__head { margin-bottom: 1.75rem; }
.form-step__head h2 { font-size: var(--fs-h3); line-height: 1.3; }
.form-step__head p { margin-top: 0.5rem; font-size: var(--fs-sm); color: var(--ink-70); }
.form-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.form-nav [data-next], .form-nav [data-submit] { margin-left: auto; }
.form-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.form-step__head h2:focus { outline: none; }
.review { display: grid; gap: 0; margin: 0; padding: 0.5rem 1.25rem; background: var(--paper); border-radius: var(--r-md); }
.review div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 1rem; padding: 0.875rem 0; border-bottom: 1px solid var(--line); }
.review div:last-child { border-bottom: 0; }
.review dt { font-size: var(--fs-sm); color: var(--ink-70); }
.review dd { margin: 0; font-size: var(--fs-sm); font-weight: 500; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 30rem) { .review div { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; } }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.faq__list { display: grid; gap: 0.75rem; }
.faq details { background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: box-shadow 0.3s var(--ease); }
.section--white .faq details { background: var(--paper); box-shadow: none; }
.faq details[open] { box-shadow: var(--shadow-md); }
.section--white .faq details[open] { box-shadow: none; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.4rem 1.5rem; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--ink); cursor: pointer; list-style: none; border-radius: var(--r-lg); transition: color 0.2s var(--ease); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--raspberry-600); }
/* Open/close icon: the circle stays still (pixel-aligned by main.js) and only changes colour; just the pre-drawn plus on
   ::before turns into a cross. 36px box, 2px strokes on whole pixels, centred on a pixel corner so it turns symmetrically. */
.faq__icon { position: relative; flex: none; width: 36px; height: 36px; background: var(--white); border: 1px solid var(--line-strong); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s; }
.faq__icon::before { content: ""; position: absolute; inset: -1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='%2321212f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 13v10M13 18h10'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; transition: rotate 0.3s var(--ease); }
.faq summary:hover .faq__icon, .faq details[open] .faq__icon { background-color: var(--sun); border-color: var(--sun); }
.faq details[open] .faq__icon::before { rotate: 45deg; }
.faq__answer { padding: 0 1.5rem 1.5rem; color: var(--ink-80); }
details::details-content { block-size: 0; overflow: hidden; transition: block-size 0.4s var(--ease), content-visibility 0.4s allow-discrete; }
details[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) { details::details-content { transition: none; } }
@media (max-width: 56rem) { .faq { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Feedback ---------- */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none; }
.way { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); background: var(--white); box-shadow: var(--shadow-sm); }
.way__icon { display: grid; place-items: center; width: 3rem; height: 3rem; color: var(--ink); background: var(--w-c, var(--sun)); border-radius: 50% 50% 50% 0.3rem; }
.way__icon svg { width: 1.35rem; height: 1.35rem; }
.way:nth-child(2) { --w-c: var(--sky); }
.section--white .way, .section--white .feature { background: var(--paper); box-shadow: none; }
.way:nth-child(3) { --w-c: var(--raspberry); }
.way:nth-child(3) .way__icon { color: var(--white); }
.way h3 { font-size: 1.1875rem; }
.way p { font-size: var(--fs-sm); color: var(--ink-70); }
.way a:not(.btn) { font-weight: 600; color: var(--ink); text-decoration-color: var(--raspberry); text-underline-offset: 3px; overflow-wrap: anywhere; transition: color 0.2s var(--ease); }
.way a:not(.btn):hover { color: var(--raspberry); }
.way .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 56rem) { .ways { grid-template-columns: minmax(0, 1fr); } }

.callout { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.5rem 2rem; align-items: center; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--sky-100); }
.callout__icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; color: var(--white); background: var(--ink); border-radius: 50% 50% 50% 0.35rem; }
.callout__icon svg { width: 1.5rem; height: 1.5rem; }
.callout h3 { margin-bottom: 0.5rem; }
.callout p { font-size: var(--fs-sm); }
.callout a:not(.btn) { font-weight: 600; color: var(--ink); text-underline-offset: 3px; }
@media (max-width: 48rem) { .callout { grid-template-columns: minmax(0, 1fr); } .callout .btn { justify-self: start; max-width: 100%; white-space: normal; text-align: left; } }

/* ---------- Service Information Booklet ---------- */
.doc { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.toc { position: sticky; top: calc(var(--header-h) + 1.5rem); max-height: calc(100vh - var(--header-h) - 3rem); overflow-y: auto; padding: 1.5rem; background: var(--white); border-radius: var(--r-lg); }
.toc h2 { margin-bottom: 1rem; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-70); }
.toc ol { display: grid; gap: 0.125rem; list-style: none; }
.toc a { display: block; padding: 0.45rem 0.75rem; font-size: var(--fs-sm); font-weight: 500; line-height: 1.4; color: var(--ink-80); text-decoration: none; border-radius: var(--r-sm); transition: background-color 0.2s, color 0.2s; }
.toc a:hover { background: var(--paper-200); color: var(--ink); }
.toc__toggle { display: none; }
.toc a.is-active { background: var(--ink); color: var(--white); }
.doc__body { min-width: 0; max-width: 46rem; }
.doc-section { padding: clamp(1.75rem, 1rem + 2vw, 2.75rem); background: var(--white); border-radius: var(--r-lg); }
.doc-section + .doc-section { margin-top: 1rem; }
.doc-section > h2 { margin-bottom: 1.25rem; font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); }
.doc-section h3 { margin: 2rem 0 0.75rem; font-size: 1.25rem; }
.doc-section h3:first-of-type { margin-top: 0.5rem; }
.doc-section h2 + h3 { margin-top: 0; }
.doc-section p, .doc-section li { font-size: 1rem; line-height: 1.75; }
.doc-section p + ul, .doc-section p + ol, .doc-section ul + p, .doc-section ol + p { margin-top: 1rem; }
.doc-section ul, .doc-section ol { display: grid; gap: 0.5rem; padding-left: 1.25rem; }
.doc-section li::marker { color: var(--raspberry); font-weight: 600; }
.doc-section a { color: var(--ink); font-weight: 500; text-decoration-color: var(--raspberry); text-underline-offset: 3px; overflow-wrap: anywhere; }
.doc-section a:hover { color: var(--raspberry); }
.doc-links { display: grid; gap: 0.75rem; list-style: none; padding: 0 !important; }
.doc-links li { padding: 1rem 1.25rem; background: var(--paper); border-radius: var(--r-md); }
.doc-links strong { display: block; margin-bottom: 0.25rem; }
@media (max-width: 60rem) {
  .doc { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .toc { position: sticky; top: calc(var(--header-h) + 0.75rem); z-index: 20; max-height: none; overflow: visible; padding: 0; box-shadow: var(--shadow-md); }
  .toc__title { display: none; }
  .toc__toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 3.75rem; padding: 0.6rem 1rem 0.6rem 1.25rem; text-align: left; color: var(--ink); background: none; border: 0; border-radius: inherit; cursor: pointer; }
  .toc__toggle-label { display: grid; min-width: 0; line-height: 1.3; }
  .toc__toggle-label small { font-size: var(--fs-xs); font-weight: 500; color: var(--ink-70); }
  .toc__toggle-label span { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
  .toc__toggle svg { width: 2.25rem; height: 2.25rem; flex: none; padding: 0.5rem; background: var(--paper); border-radius: 50%; transition: rotate 0.3s var(--ease), background-color 0.2s; }
  .toc__toggle:hover svg { background: var(--paper-200); }
  .toc.is-open .toc__toggle svg { rotate: 180deg; }
  .toc ol { position: absolute; top: calc(100% + 0.5rem); left: 0; right: 0; max-height: min(60vh, 30rem); overflow-y: auto; padding: 0.5rem; background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transition: opacity 0.2s var(--ease), translate 0.25s var(--ease), visibility 0s linear 0.25s; }
  .toc.is-open ol { opacity: 1; visibility: visible; transition: opacity 0.2s var(--ease), visibility 0s; }
  .toc a { padding: 0.8rem 1rem; font-size: 1rem; }
  .doc-section { scroll-margin-top: 4.75rem; }
}

/* ---------- Utility pages ---------- */
.utility { display: grid; place-items: center; min-height: 70vh; padding-block: var(--section-y); text-align: center; }
.utility__inner { max-width: 36rem; }
.utility img { width: 11rem; margin: 0 auto 2rem; }
.utility h1 { margin-bottom: 1rem; }
.utility .btn-row { justify-content: center; margin-top: 2rem; }

/* ---------- Responsive: tablet (stack splits, card rows become horizontal) ---------- */
@media (max-width: 62rem) {
  .page-hero__grid, .contact-grid, .faq, .split { grid-template-columns: minmax(0, 1fr); }
  .section-head, .section-head--split > div, .page-hero .lead, .cta p, .doc__body { max-width: none; }
  .page-hero__art { justify-self: center; max-width: 24rem; width: 100%; }
  .mosaic { justify-self: center; max-width: 26rem; margin-bottom: 1.5rem; }


  .ways, .approaches, .cards-3 { grid-template-columns: minmax(0, 1fr); }
  .way { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; grid-template-areas: "icon title action" "icon text action"; column-gap: 1.5rem; row-gap: 0.35rem; align-items: center; }
  .way__icon { grid-area: icon; align-self: start; }
  .way h3 { grid-area: title; }
  .way p { grid-area: text; }
  .way .btn { grid-area: action; margin: 0; align-self: center; }
  .approaches { grid-template-areas: "a" "b" "c"; }
}

/* ---------- Responsive: phones ---------- */
@media (max-width: 36rem) {
  .way { display: flex; flex-direction: column; align-items: stretch; }
  .way .btn { align-self: flex-start; }
  .approach { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}
@media (max-width: 30rem) {
  .contact-method { flex-direction: column; align-items: stretch; gap: 0.875rem; padding: 1.25rem; }
  .contact-method__icon { align-self: flex-start; }
  .contact-method__head { flex-direction: column; align-items: flex-start; gap: 0.875rem; }
  .contact-method a:not(.phone-card) { font-size: 1rem; }
  .contact-method--phones { padding: 1.25rem; }
}

/* ---------- Scroll reveal (progressive enhancement, CSS only) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }
}
@keyframes reveal { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- Utilities (last so they win) ---------- */
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-section { margin-top: clamp(3rem, 2rem + 4vw, 5rem); }
.mb-0 { margin-bottom: 0; }

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .cta, .toc, .nav-toggle { display: none !important; }
  body { background: #fff; }
  .doc { display: block; }
  .doc-section { padding: 0; }
}