/* ==========================================================================
   Simply Natural Coaching - site.css
   GT Studios. Base layer inherited from the house system.
   Identity: Manrope throughout, moss accent on paper cream. One typeface, so
   hierarchy is built from weight and tracking rather than serif contrast.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted, latin subset, variable)
   -------------------------------------------------------------------------- */
/* One typeface for the whole site. Manrope is a variable geometric sans with a
   200 to 800 range, which is what makes a single face workable here: with no
   serif to contrast against, weight is the only thing left to build hierarchy
   out of, so the range has to be wide. */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-var-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* neutrals, warm paper */
  --bg:       #f6f3ea;
  --panel:    #fffdf8;
  --sand:     #efe9dc;
  --tint:     #eaeee3;
  --wash:     #e6ece0;
  --hero-cream: #f9f4eb;  /* sampled from homepagehero.png, top row average */
  --panel-cream: #fcf8ef; /* sampled from the generated backdrop panels, so they sit seamlessly */
  --ink:      #221f1a;
  --ink-2:    #575249;
  --muted:    #8b857a;
  --line:     rgba(40, 36, 28, .14);
  --line-2:   rgba(40, 36, 28, .09);
  --dark:     #0b2e59;
  --footer:   #273522;  /* deep forest, the closing band */   /* the navy in the logo mark */
  --on-dark:  #f4f1e8;

  /* identity, the two per-client variables */
  --accent-rgb:  133, 152, 110;  /* the same leaf green, as channels, so tints follow a page override */
  --accent:      #85986e;  /* sampled from the logo leaf, decorative use only */
  --accent-deep: #516140;  /* all accent TEXT and button fills, 6.0:1 on --bg */
  --accent-soft: #a3b884;  /* accent on dark grounds only, 6.0:1 on --dark */
  --font-display: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* structure */
  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 72px);
  --section-y: clamp(64px, 10vw, 132px);
  --nav-h: 84px;
  --nav-tall: clamp(84px, 6.4vw, 96px);  /* the homepage floating pill, bar padding included */

  /* radius */
  --radius: 16px;
  --radius-lg: 22px;
  --pill: 999px;

  /* elevation */
  --shadow-sm: 0 1px 3px rgba(34, 31, 26, .07);
  --shadow-md: 0 18px 44px -22px rgba(34, 40, 26, .30);
  --shadow-lg: 0 34px 80px -30px rgba(28, 34, 22, .40);

  /* motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   3. Reset and base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, .97rem + .18vw, 1.09rem);
  line-height: 1.65;
  font-weight: 400;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, picture { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--accent-deep); text-decoration-thickness: 1px; text-underline-offset: .18em; }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: 5px;
}
.dark-band :focus-visible { outline-color: var(--accent-soft); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--accent-deep); color: #fff;
  padding: .7em 1.1em; border-radius: var(--pill);
  font: 600 .86rem/1 var(--font-body); text-decoration: none;
  transition: top .18s var(--ease);
}
.skip:focus { top: 12px; }

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

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0 0 .5em;
  /* 700 rather than 500: with no serif to set them apart from body copy,
     headings need the weight to do it */
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.12;
}
h1 {
  font-size: clamp(2.15rem, 1.05rem + 3.3vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -.038em;
  text-wrap: balance;
}
h2 { font-size: clamp(1.85rem, 1.25rem + 2.4vw, 2.85rem); letter-spacing: -.032em; }
h3 { font-size: clamp(1.18rem, 1.05rem + .5vw, 1.42rem); font-weight: 700; letter-spacing: -.018em; }
h4 { font-size: 1.05rem; font-weight: 600; }

.eyebrow {
  font-family: var(--font-body);
  font-size: .715rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 1.15em;
  display: flex;
  align-items: center;
  gap: .62em;
}
/* the eyebrow mark: a sparkle rather than a rule, echoing the doodles in the
   artwork. Drawn as a mask so a single background-color swaps it per ground. */
.eyebrow::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: none;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M12%20.8c.7%205.7%205.5%2010.5%2011.2%2011.2C17.5%2012.7%2012.7%2017.5%2012%2023.2%2011.3%2017.5%206.5%2012.7.8%2012%206.5%2011.3%2011.3%206.5%2012%20.8Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M12%20.8c.7%205.7%205.5%2010.5%2011.2%2011.2C17.5%2012.7%2012.7%2017.5%2012%2023.2%2011.3%2017.5%206.5%2012.7.8%2012%206.5%2011.3%2011.3%206.5%2012%20.8Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.eyebrow.no-rule::before { display: none; }
.dark-band .eyebrow { color: var(--accent-soft); }
.dark-band .eyebrow::before { background: var(--accent-soft); }

.lede {
  font-size: clamp(1.06rem, 1rem + .38vw, 1.24rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 54ch;
}
.small { font-size: .93rem; color: var(--ink-2); }
.micro {
  font-family: var(--font-body);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */
.wrap {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
}
.section {
  padding-block: var(--section-y);
  scroll-margin-top: calc(var(--nav-h) + 16px);
  position: relative;
}
.band-panel { background: var(--panel); }
.band-sand  { background: var(--sand); }
.band-tint  { background: var(--tint); }
.band-wash  { background: var(--wash); }
.dark-band  { background: var(--dark); color: var(--on-dark); }
.dark-band h1, .dark-band h2, .dark-band h3, .dark-band h4 { color: var(--on-dark); }

.section-head { max-width: 58ch; margin-bottom: clamp(34px, 5vw, 58px); }
.section-head .lede { margin-top: .2em; }

/* --------------------------------------------------------------------------
   5b. (ornaments retired: every section now carries generated artwork) One per section, and each one says something about the section
       it sits in: the logo's leaf beside the founder, the open book across the
       two subjects, a screen where the formats are explained, ruled paper under
       the steps, a calendar behind the booking card, and the book again in the
       footer as the brand mark. Decorative, behind the content, pointer-events
       none, hidden on narrow screens.
   -------------------------------------------------------------------------- */
.section { overflow: clip; }
.wrap { position: relative; z-index: 1; }

/* ruled paper, under the steps */

/* placements, each kept out of the reading path */

@media (max-width: 900px) {

}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.004em;
  padding: .95em 1.6em;
  border-radius: var(--pill);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .3s var(--ease), background-color .3s var(--ease),
              border-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.btn .arw { transition: transform .3s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }
.btn:hover { transform: translateY(-2px); }

.btn-fill {
  background: var(--accent-deep);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-fill:hover { background: #414e33; box-shadow: var(--shadow-md); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--accent-deep); color: var(--accent-deep); }

.btn-on-dark {
  background: var(--on-dark);
  color: var(--dark);
}
.btn-on-dark:hover { background: #fff; }

.btn-sm { font-size: .82rem; padding: .78em 1.25em; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45em;
  font-weight: 600; font-size: .93rem;
  color: var(--accent-deep); text-decoration: none;
}
.link-arrow .arw { transition: transform .3s var(--ease); }
.link-arrow:hover .arw { transform: translateX(4px); }
.link-arrow:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   7. Nav
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .35s var(--ease), border-color .35s var(--ease),
              box-shadow .35s var(--ease);
}
.nav.scrolled {
  background: rgba(246, 243, 234, .86);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  backdrop-filter: saturate(1.5) blur(16px);
  border-bottom-color: var(--line-2);
}
.nav-inner {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* wordmark lockup. The descriptor is the clarity lever, it travels with the name. */
.brand {
  text-decoration: none;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 11px;
  line-height: 1.15;
}
/* the mark is the hummingbird lifted out of Amy's logo, and it is portrait,
   so it is sized by height rather than width the way a landscape mark was */
.brand-mark {
  height: 60px;
  width: auto;
  flex: none;
  transition: height .35s var(--ease);
}
.nav.scrolled .brand-mark { height: 50px; }
.brand-text { display: block; }
/* the round student portrait in the tutoring hero, a phone only element */
.hero-portrait { display: none; }
.brand-name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1rem, .93rem + .3vw, 1.14rem);
  font-weight: 500;
  letter-spacing: -.012em;
}
.brand-desc {
  display: block;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-top: .25em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 34px);
}
.nav-links a {
  position: relative;
  font-size: .89rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding-block: 4px;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--accent-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links a.nav-cta::after { display: none; }
.nav-links a.nav-cta { color: #fff; }
.nav-links a.nav-cta::after { display: none; }
.nav-cta { margin-left: clamp(6px, 1vw, 14px); }

/* --------------------------------------------------------------------------
   8. Hero. The supplied artwork is the ground: subject and decoration on the
      right, clear cream on the left for the copy. The headline picks the two
      subjects out in colour, and a three up strip crosses the base and
      overlaps the section below. On phones the artwork stops being a
      background and stacks above the copy.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding-top: calc(var(--nav-h) + clamp(14px, 2.4svh, 40px));
  padding-bottom: clamp(16px, 2.6svh, 44px);
  background: var(--hero-cream);
}
.hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
}
.hero-art picture { display: contents; }
.hero-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
}
/* the artwork's cream is a shade warmer than the site ground, so the bottom
   edge is faded out rather than butted against the next section */
.hero-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right, var(--hero-cream) 0%, rgba(249, 244, 235, .72) 16%, rgba(249, 244, 235, 0) 42%);
}
.hero-art::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  height: 20%;
  background: linear-gradient(to bottom, rgba(249, 244, 235, 0) 0%, rgba(249, 244, 235, .55) 45%, var(--bg) 100%);
}

.hero-grid {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-content: center;
}
.hero-copy { grid-column: 1; max-width: 34rem; }
.hero h1 {
  max-width: 14ch;
  margin-bottom: .45em;
  text-wrap: balance;
}
.h1-read { color: var(--dark); }
.h1-esl { color: #44552f; }
.hero .lede { max-width: 42ch; }
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(22px, 2.8vw, 32px);
}

/* three up strip. Sits over the join into Meet Amy. */
.pillars {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(18px, 3svh, 42px);
  padding: clamp(15px, 2.2svh, 30px) clamp(14px, 1.8vw, 26px);
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.pillar {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 1.4vw, 18px);
  padding-inline: clamp(10px, 1.6vw, 22px);
  border-left: 1px solid var(--line-2);
}
.pillar:first-child { border-left: 0; }
.pillar h3 {
  font-size: clamp(1rem, .95rem + .22vw, 1.14rem);
  margin-bottom: .3em;
}
.pillar p {
  font-size: .9rem;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}
.pillar-icon {
  flex: none;
  width: clamp(42px, 4.2vw, 54px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.pillar-icon svg { width: 55%; height: 55%; }
.pillar-icon-moss { background: rgba(var(--accent-rgb), .18); color: var(--accent-deep); }
.pillar-icon-navy { background: rgba(11, 46, 89, .10);   color: var(--dark); }
.pillar-icon-sand { background: var(--sand);              color: #8a6a35; }

/* the strip now sits inside the hero, so Meet Amy keeps the standard rhythm */

/* --------------------------------------------------------------------------
   8b. Lee County band. Same full bleed treatment, shorter.
   -------------------------------------------------------------------------- */
.place-band {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(320px, 42vw, 460px);
  padding-block: clamp(52px, 7vw, 86px);
  background: var(--panel-cream);
  isolation: isolate;
  overflow: clip;
}
.place-bg { position: absolute; inset: 0; z-index: 0; }
.place-bg picture { display: contents; }
.place-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.place-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 58% 78% at 50% 50%, rgba(252, 248, 239, .88) 0%, rgba(252, 248, 239, .58) 55%, rgba(252, 248, 239, .34) 100%);
}
.place-inner {
  position: relative;
  z-index: 1;
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.place-inner .eyebrow { justify-content: center; }
.place-band .eyebrow { color: var(--accent-deep); }
.place-band .eyebrow::before { background: var(--accent); }
.place-band h2 { color: var(--ink); max-width: 20ch; margin-inline: auto; }
.place-band .lede { color: var(--ink-2); max-width: 46ch; margin-inline: auto; }

/* --------------------------------------------------------------------------
   8c. Homepage. Built to the supplied design: split hero with Amy in an
       organic frame, a bento of the three services with a testimonial rail
       beside it, then a strip of four reassurances.
   -------------------------------------------------------------------------- */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- nav: a floating pill ------------------------------------------------
   The fixed bar is transparent and sizes itself; the capsule inside it carries
   the ground, the hairline and the shadow, so the nav reads as an object
   sitting on the page rather than a band stuck to the top of it. */
.nav.nav-open {
  height: auto;
  padding: clamp(12px, 1.3vw, 20px) 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 0;
}
.nav.nav-open.scrolled { background: transparent; border-bottom-color: transparent; }

.nav-open .nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(12px, 1.4vw, 22px);
  padding: 9px 9px 9px clamp(14px, 1.3vw, 20px);
  border-radius: var(--pill);
  border: 1px solid rgba(40, 36, 28, .085);
  background: rgba(253, 251, 247, .82);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  backdrop-filter: saturate(1.4) blur(18px);
  box-shadow: 0 12px 34px -20px rgba(34, 40, 26, .40);
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.nav-open.scrolled .nav-inner {
  background: rgba(253, 251, 247, .95);
  box-shadow: 0 18px 44px -22px rgba(34, 40, 26, .52);
}
.nav-open .nav-cta { justify-self: end; }

/* the mark plus the name, since the full lockup is nearly square and sits
   badly in a capsule. Sized off the pill, not the viewport. */
.brand-pill { gap: 10px; }
.brand-pill .brand-mark {
  height: 42px;
  width: auto;
  transition: height .35s var(--ease);
}
.nav-open.scrolled .brand-pill .brand-mark { height: 38px; }
.brand-pill .brand-name { font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem); }
.brand-pill .brand-desc { font-size: .58rem; letter-spacing: .17em; }

.nav-open .nav-links {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.5vw, 26px);
}
.nav-open .nav-links > a {
  padding: 8px 2px;
  font-size: clamp(.95rem, .9rem + .16vw, 1.06rem);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.nav-open .nav-links > a:hover { color: var(--accent-deep); }
.cta-label { display: inline; }
.nav-open .nav-cta {
  gap: .5em;
  padding: 12px 20px;
  font-size: clamp(.86rem, .82rem + .14vw, .95rem);
  font-weight: 600;
  letter-spacing: -.008em;
  box-shadow: 0 9px 20px -11px rgba(60, 74, 46, .9);
}
.nav-open .nav-cta .arw { transition: transform .3s var(--ease); }
.nav-open .nav-cta:hover { transform: translateY(-1px); }
.nav-open .nav-cta:hover .arw { transform: translateX(3px); }

/* ---- hero ---------------------------------------------------------------- */
.hero-x {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-top: calc(var(--nav-tall) + clamp(22px, 3.2vw, 48px));
  padding-bottom: clamp(30px, 4vw, 56px);
  /* A photograph as the ground. The frame is mostly flat field, which is what
     the copy sits on; the leaves are positioned to fall in the right gutter
     rather than under the headline. Its grey has been graded to #faf7f1, the
     colour the band used to be, so the photo and the page meet without a seam.
     The washes stay on top as a scrim, lighter than before because the photo
     is already doing the tonal work. */
  background-image:
    linear-gradient(96deg, rgba(250, 247, 241, .93) 0%, rgba(250, 247, 241, .80) 40%, rgba(250, 247, 241, .18) 66%, rgba(250, 247, 241, 0) 100%),
    radial-gradient(44% 50% at 86% 6%, rgba(241, 233, 217, .45) 0%, rgba(241, 233, 217, 0) 70%),
    image-set(url("../img/hero-bg-1800.webp") type("image/webp"),
              url("../img/hero-bg-1800.jpg") type("image/jpeg"));
  background-size: auto, auto, cover;
  background-position: center, center, left center;
  background-color: #faf7f1;
}
.hero-x-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(34px, 5vw, 82px);
  align-items: center;
}
.hero-x h1 {
  font-size: clamp(2.2rem, 1.15rem + 3.5vw, 3.7rem);
  line-height: 1.12;
  margin-bottom: .5em;
  text-wrap: balance;
}
.hero-x h1 em { font-style: normal; color: var(--accent-deep); }
.hero-x .lede { max-width: 38ch; }

.hero-x-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(18px, 2.4vw, 30px);
  margin-top: clamp(26px, 3.2vw, 38px);
}
/* ---- Amy in the organic frame -------------------------------------------- */
.hero-x-art { position: relative; margin: 0; }
.hero-x-art picture { display: contents; }
.hero-x-photo {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1.6;
  object-fit: cover;
  object-position: center 22%;
  clip-path: url(#heroBlob);
}
/* the same shape turned a few degrees, so the outline never runs parallel */
.hero-x-outline {
  /* an SVG is a replaced element: with all four insets and auto sizing it
     keeps its own 1:1 ratio instead of stretching, so the box is set in
     percentages of the figure and preserveAspectRatio does the rest */
  position: absolute;
  left: -6%;
  top: -7%;
  width: 110%;
  height: 114%;
  z-index: -1;
  color: var(--accent);
  opacity: .55;
  pointer-events: none;
}
/* a short bio rather than a quote: four lines of experience, sitting on the
   corner of the portrait. The credentials band further down carries the
   certifications, so none of them appear here */
.hero-bio {
  position: absolute;
  right: clamp(-10px, -.6vw, 0px);
  bottom: clamp(-18px, -1.4vw, -8px);
  width: min(60%, 250px);
  padding: clamp(15px, 1.6vw, 20px) clamp(16px, 1.7vw, 22px);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--shadow-md);
}
.hero-bio-name {
  margin: 0 0 .6em;
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
}
.hero-bio-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .42em;
  font-size: .82rem;
  line-height: 1.35;
  color: var(--ink-2);
}
.hero-bio-list li { position: relative; padding-left: .95em; }
.hero-bio-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}
.hero-bio-list em { font-style: italic; color: var(--ink); }

/* ---- the bento ------------------------------------------------------------ */
.svc-section {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-top: clamp(34px, 4.5vw, 60px);
  /* the colour the hero ends on, so the two bands join with no seam. The band
     carries one drawn line and nothing else on it. */
  /* A photographed ground from the same plant as the hero, generated with the
     hero image itself as the reference so it is a variation rather than a
     different picture. The hero's left-to-right scrim is baked into the top of
     this file and released downward, which is what makes the join disappear:
     the two bands meet at the same value at every x, and nothing sits over the
     leaves below the join. Anchored top so that ramp always lands on the seam. */
  background-image:
    image-set(url("../img/svc-bg-2000.webp") type("image/webp"),
              url("../img/svc-bg-2000.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #f1f0ee;
}

/* One continuous pen stroke, with the hummingbird at the end of it. Both live
   in one wrapper, so the bird stays locked to where the line finishes at every
   width rather than being positioned against the section separately. */
.svc-stroke {
  position: absolute;
  z-index: -1;
  left: -8%;
  top: 16%;
  width: 116%;
  color: var(--accent-deep);
  opacity: .34;
  pointer-events: none;
}
.svc-stroke svg { display: block; width: 100%; height: auto; }
.svc-stroke-bird {
  position: absolute;
  left: 92.2%;
  top: 0.5%;
  width: 4.4%;
  aspect-ratio: .4881;
  background: currentColor;
  transform: rotate(4deg);
  -webkit-mask: url("../img/flourish-bird.png") no-repeat center / contain;
  mask: url("../img/flourish-bird.png") no-repeat center / contain;
}

/* It draws itself once, when the band comes into view. The reveal class is
   already observed, so this needs no script of its own, only an override of
   the fade up that the class normally carries. */
html.js .svc-stroke.reveal { opacity: .34; transform: none; }
html.js .svc-stroke path {
  stroke-dasharray: 1832;
  stroke-dashoffset: 1832;
  transition: stroke-dashoffset 2.6s cubic-bezier(.32, .72, .3, 1);
}
html.js .svc-stroke.is-revealed path { stroke-dashoffset: 0; }
html.js .svc-stroke-bird { opacity: 0; transition: opacity .9s var(--ease) 1.6s; }
html.js .svc-stroke.is-revealed .svc-stroke-bird { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html.js .svc-stroke path { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
  html.js .svc-stroke-bird { opacity: 1; transition: none; }
}

@media (max-width: 900px) {
  .svc-stroke { top: 7%; left: -22%; width: 152%; opacity: .28; }
}

.svc-bento {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.24fr);
  gap: clamp(14px, 1.6vw, 22px);
  align-items: stretch;
}
.svc-stack { display: grid; grid-template-rows: 1fr 1fr; gap: clamp(14px, 1.6vw, 22px); }

.svc {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: 20px;
}
.svc { transition: transform .45s var(--ease), box-shadow .45s var(--ease); }

/* the whole card is the link. The heading carries the anchor and a stretched
   overlay covers the card, so there is one link per card rather than a heading
   link and a Learn more link saying the same thing twice. */
.svc-link { color: inherit; text-decoration: none; }
.svc-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
}
.svc-link:focus-visible::after {
  outline: 2px solid var(--accent-deep);
  outline-offset: -4px;
  border-radius: 18px;
}

.svc:hover, .svc:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -26px rgba(34, 40, 26, .45);
}
.svc .svc-ic { transition: transform .45s var(--ease); }
.svc:hover .svc-ic, .svc:focus-within .svc-ic { transform: scale(1.045); }
.svc .arw { transition: transform .35s var(--ease); }
.svc:hover .arw, .svc:focus-within .arw { transform: translateX(4px); }
.svc h2 {
  font-size: clamp(1.3rem, 1.02rem + .95vw, 1.85rem);
  line-height: 1.16;
  margin-bottom: .32em;
}
.svc > p, .svc div > p { color: var(--ink-2); font-size: .93rem; max-width: 34ch; }
.svc-eyebrow {
  margin-top: -.15em;
  margin-bottom: 1.1em;
  text-transform: none;
  letter-spacing: -.005em;
  font-size: .84rem;
  font-weight: 500;
}
.svc-eyebrow::before { display: none; }
.svc-more { margin-top: clamp(16px, 1.8vw, 22px); font-size: .82rem; letter-spacing: .07em; text-transform: uppercase; }

/* the circular clipart sits in a white disc */
.svc-ic {
  display: block;
  width: clamp(74px, 7vw, 96px);
  aspect-ratio: 1;
  margin-bottom: clamp(14px, 1.6vw, 20px);
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(40, 36, 28, .07);
}
.svc-ic picture { display: contents; }
.svc-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- tutoring, the tall panel. Stays illustrated: this service is about
       children, so the watercolour is on audience here. --- */
/* The lead card now opens on a photograph across its full width. A side split
   like life and swim would leave the tick list in a column too narrow to read,
   so the photo goes on top and the copy runs full width beneath it. */
.svc-lead {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: #f2f6ec;
}
.svc-lead-shot {
  position: relative;
  margin: 0;
  min-height: clamp(180px, 17vw, 260px);
}
.svc-lead-shot picture { display: contents; }
.svc-lead-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-lead-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(22px, 2.4vw, 32px);
}
.svc-lead .svc-eyebrow { color: var(--accent-deep); }
.svc-lead .svc-more { color: var(--accent-deep); margin-top: auto; }
.svc-list {
  list-style: none;
  margin: clamp(16px, 1.8vw, 22px) 0 0;
  padding: 0;
  display: grid;
  gap: .62em;
  font-size: .9rem;
  color: var(--ink);
}
.svc-list li { display: flex; align-items: center; gap: .6em; }
.svc-lead-body .svc-list { margin-bottom: clamp(18px, 2vw, 26px); }
.svc-list .tick { flex: none; color: var(--accent-deep); }
.svc-sprig {
  position: absolute;
  right: -26%;
  bottom: -12%;
  width: 66%;
  opacity: .32;
  pointer-events: none;
  transform: rotate(10deg);
  transform-origin: 70% 80%;
}
.svc-sprig picture { display: contents; }
.svc-sprig img { width: 100%; height: auto; display: block; }

/* --- life and swim, the stacked pair.
       These two carry a photograph rather than a flat tint, because their
       audiences are an adult woman and a swimmer of any age, and the
       watercolour language reads as children's illustration to both. The
       gradient stays on top as a scrim: the photo supplies warmth and depth,
       the scrim supplies the contrast the body copy needs. --- */
/* Life and swim are split cards: an untinted photograph down one side, the
   copy on near white down the other. The tint that used to sit over the whole
   card is gone, so the photograph reads as a photograph; the colour coding
   survives in the panel wash and the accent colours instead. */
.svc-life, .svc-swim {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  gap: 0;
  padding: 0;
  align-items: stretch;
}
/* The photo is taken out of flow so the panel height is a deliberate value.
   Left in flow it drove the whole band at the crop's intrinsic aspect, which
   left the text panels, and the tutoring card beside them, mostly empty. */
.svc-shot { position: relative; margin: 0; min-height: clamp(210px, 19.5vw, 288px); }
.svc-shot picture { display: contents; }
.svc-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-body {
  padding: clamp(20px, 2.2vw, 30px);
  display: flex;
  flex-direction: column;
}
.svc-body .svc-more { margin-top: auto; }
/* the copy column is narrower than a full width card, so the heading steps
   down a size and balances its own line breaks rather than carrying hard ones */
.svc-body h2 { font-size: clamp(1.15rem, .95rem + .62vw, 1.45rem); text-wrap: balance; }
.svc-body > p { font-size: .89rem; max-width: none; }

.svc-life { background: #fdfaf4; }
.svc-life .svc-body { background: #fdfaf4; }
.svc-life .svc-eyebrow, .svc-life .svc-more { color: #7e5c2e; }

.svc-swim .svc-shot img { object-position: 50% 56%; }
.svc-swim { background: #f5f9fc; }
.svc-swim .svc-body { background: #f5f9fc; }
.svc-swim .svc-eyebrow, .svc-swim .svc-more { color: #406075; }

.svc-sprig { transition: transform .6s var(--ease), opacity .6s var(--ease); }
.svc:hover .svc-sprig { transform: rotate(8deg) scale(1.03); opacity: .42; }

/* ---- the four reassurances ------------------------------------------------ */
.pillars-x {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 40px);
  margin-top: clamp(14px, 1.6vw, 22px);
  padding: clamp(22px, 2.6vw, 34px) clamp(24px, 3vw, 44px);
  border-radius: 20px;
  background: rgba(255, 253, 248, .72);
  border: 1px solid rgba(40, 36, 28, .06);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.pillar-x { display: flex; align-items: flex-start; gap: 14px; }
.pillar-ic {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--accent-deep);
}
.pillar-x h3 { font-size: .98rem; font-weight: 600; margin-bottom: .3em; }
.pillar-x p { font-size: .84rem; line-height: 1.45; color: var(--ink-2); }

/* ---- booking band --------------------------------------------------------- */

/* a stub page, until its copy exists */
.stub { min-height: 62svh; display: grid; place-content: center; text-align: center; }
.stub h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.stub .lede { max-width: 46ch; margin-inline: auto; }
.stub .btn { margin-top: clamp(22px, 3vw, 32px); }

/* ---- responsive ----------------------------------------------------------- */
@media (max-width: 1080px) {
  .svc-bento { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pillars-x { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .nav-open .nav-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .brand-pill { min-width: 0; }
  .hero-x-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .hero-x .lede { max-width: none; }
  .hero-bio { width: min(70%, 260px); }
}
/* the pill cannot hold a two line wordmark and a five word button at phone
   widths, so the descriptor drops and the button loses its middle word */
@media (max-width: 620px) {
  .cta-long { display: none; }
  .brand-pill .brand-desc { display: none; }
  .brand-pill .brand-name { font-size: 1.14rem; }
  .brand-pill .brand-mark { height: 34px; }
  .nav-open .nav-inner { padding: 7px 7px 7px 12px; gap: 8px; }
  .nav-open .nav-cta { padding: 10px 16px; font-size: .82rem; }
}

@media (max-width: 720px) {
  .svc-bento { grid-template-columns: minmax(0, 1fr); }
  .svc-life, .svc-swim { grid-template-columns: minmax(0, 1fr); }
  .svc-shot { min-height: clamp(150px, 34vw, 210px); }
  .pillars-x { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hero-x-actions { gap: 20px; }
  .hero-bio { position: static; width: auto; margin-top: 16px; }
  /* the quote card joins the flow here, so the outline would stretch to
     enclose both and stop reading as a frame around the photograph */
  .hero-x-outline { display: none; }
}

/* --------------------------------------------------------------------------
   8d. Service pages: life coaching and swim lessons. Type-led heroes, a
       numbered three-step list, and the book band on the life page. They
       reuse about-grid, creds, book-grid and the footer wholesale.
   -------------------------------------------------------------------------- */
.life-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-top: calc(var(--nav-tall) + clamp(28px, 3.6vw, 52px));
  background:
    radial-gradient(56% 46% at 92% 10%, #f3ecdc 0%, rgba(243, 236, 220, 0) 72%),
    radial-gradient(48% 42% at 4% 80%, #eaf0e2 0%, rgba(234, 240, 226, 0) 74%),
    var(--hero-cream);
}
.life-hero-copy { max-width: 46rem; }
.life-hero h1 {
  font-size: clamp(2.2rem, 1.2rem + 3.4vw, 3.6rem);
  margin-bottom: .45em;
  text-wrap: balance;
}
.life-hero h1 em { font-style: normal; color: var(--accent-deep); }
.life-hero .lede { max-width: 52ch; }
.life-hero .hero-cta { margin-top: clamp(26px, 3.2vw, 38px); }
.life-sprig {
  position: absolute;
  z-index: -1;
  right: -7%;
  bottom: -14%;
  width: min(30%, 380px);
  opacity: .3;
  pointer-events: none;
  transform: scaleX(-1) rotate(-6deg);
}
.life-sprig picture { display: contents; }
.life-sprig img, .life-sprig svg { width: 100%; height: auto; display: block; }
.swim-waves { color: #5b87a5; opacity: .35; right: -3%; bottom: 4%; transform: none; }

/* the numbered three across */
/* The band is the flat --panel colour with a cutout plant standing on it. An
   earlier pass used a photographed ground feathered into the panel, which read
   as blur; a keyed cutout stays sharp and still belongs, because it sits on the
   band's own colour rather than carrying a background of its own. */
.focus-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--panel);
}
.focus-plant {
  position: absolute;
  z-index: 0;
  left: clamp(-224px, -12.6vw, -112px);
  bottom: 0;
  width: auto;
  height: clamp(300px, 48vw, 650px);
  pointer-events: none;
  user-select: none;
}
/* the copy has to clear it, and the first column starts at the page measure */
.focus-band .wrap { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .focus-plant { display: none; }
}

.life-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
}
.life-step {
  padding-top: clamp(18px, 2.2vw, 26px);
  border-top: 1px solid var(--line);
}
.life-step-head {
  display: flex;
  align-items: center;
  gap: .7em;
  margin-bottom: .75em;
}
.life-step-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
}
.life-step-ic svg { width: 18px; height: 18px; display: block; }
.life-step-ic-moss { background: #e7eede; color: var(--accent-deep); }
.life-step-ic-navy { background: #e4ecf1; color: #406075; }
.life-step-ic-sand { background: #f4ebdb; color: #7e5c2e; }

.life-step-n {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem);
  color: var(--accent-deep);
  margin-bottom: 0;
}
.life-step h3 { margin-bottom: .45em; }
.life-step p { color: var(--ink-2); font-size: .95rem; }

/* the book band on the life page */
.centred-note { text-align: center; margin-top: clamp(26px, 3.4vw, 40px); color: var(--ink-2); }

@media (max-width: 900px) {
  .life-steps { grid-template-columns: minmax(0, 1fr); }
  .book-band-grid { grid-template-columns: minmax(0, 1fr); }
  .life-sprig { width: 52%; opacity: .2; }
}

/* --------------------------------------------------------------------------
   8e. The credentials band. Thin by design and unheaded: it sits between the
       services and the booking band, and a row of credentials explains itself
       without a title telling the reader what they are looking at.

       Supplied badges are freed of their white box rather than recoloured,
       because official marks are not ours to restyle. Where we hold no right to
       a mark, the chip carries a photograph instead of inventing one.
   -------------------------------------------------------------------------- */
.trust {
  padding-top: clamp(22px, 2.4vw, 32px);
  padding-bottom: clamp(22px, 2.4vw, 32px);
  /* a deep green ground so the band reads as its own thing rather than more
     cream. The two radials are the gloss: one broad highlight off the top left
     and a cooler one lower right, over a gradient that darkens toward the foot */
  background:
    radial-gradient(58% 120% at 18% -10%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(46% 110% at 88% 108%, rgba(146, 198, 154, .20) 0%, rgba(146, 198, 154, 0) 62%),
    linear-gradient(168deg, #3f5a3c 0%, #354d34 46%, #2b3f2b 100%);
  border-top: 1px solid rgba(255, 255, 255, .10);
  border-bottom: 1px solid rgba(0, 0, 0, .18);
}
/* six across needs more room than the page's normal measure, and the copy
   reads better stacked under the mark than beside it: side by side, a name
   like "Water Safety Instructor" broke to four lines in a sixth of the width */
.trust-rail {
  list-style: none;
  width: calc(100% - (clamp(14px, 2.4vw, 46px) * 2));
  margin-inline: auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 1.1vw, 18px);
  align-items: stretch;
}
.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(10px, 1vw, 14px);
  padding: clamp(16px, 1.6vw, 22px) clamp(12px, 1.2vw, 18px);
  border-radius: 18px;
  /* the page's own cream, sitting on the green. Glass let the ground through
     and the chips receded; solid cream is what makes them read as objects */
  background: linear-gradient(180deg, #fbf9f4 0%, #f4f1e8 100%);
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 16px 30px -22px rgba(0, 0, 0, .85);
}
.trust-shot {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(64px, 5.4vw, 84px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(40, 36, 28, .08);
}
.trust-shot picture { display: contents; }
.trust-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* a mark has to sit inside the disc whole, not be cropped to fill it */
.trust-shot-mark img { width: 78%; height: 78%; object-fit: contain; }
.trust-shot-mark .trust-wide { width: 94%; }

/* the three drawn badges. Glyph over a short word: at 84px nothing longer
   survives, and curved text around a ring is illegible at this size */
.trust-shot-badge svg { width: 100%; height: 100%; display: block; }
.tb-ring { fill: #fff; stroke: rgba(40, 36, 28, .16); stroke-width: 1.4; }
.tb-ink { fill: none; stroke: var(--accent-deep); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tb-fill { fill: var(--accent-deep); stroke: none; }
.tb-line { fill: none; }
.tb-fl {
  fill: var(--accent-deep);
  stroke: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: .04em;
  dominant-baseline: central;
}
/* the lifebuoy and the heart keep their own colours: a grey lifebuoy and a
   grey heart read as icons, and these two want to read as the real things */
.tb-buoy-red { fill: #cf3b31; stroke: none; }
.tb-buoy-hole { fill: #fff; stroke: none; }
.tb-buoy-band { fill: none; stroke: #fff; stroke-width: 7.4; stroke-linecap: butt; }
.tb-buoy-edge { fill: none; stroke: rgba(40, 36, 28, .1); stroke-width: 1.1; }
.tb-heart { fill: #d8443a; stroke: none; }
.tb-pulse { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.trust-txt { display: grid; min-width: 0; justify-items: center; }
.trust-txt b {
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.24;
  color: var(--ink);
  text-wrap: balance;
}
.trust-txt i {
  font-style: normal;
  font-size: .8rem;
  line-height: 1.32;
  color: var(--ink-2);
  margin-top: .28em;
}

@media (max-width: 1240px) {
  .trust-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .trust-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .trust-item { padding: 13px 9px; gap: 9px; }
  .trust-shot { width: 54px; }
  .trust-txt b { font-size: .84rem; }
  .trust-txt i { font-size: .73rem; }
}

/* --------------------------------------------------------------------------
   8f. The life coaching page. It borrows the tutoring page's skeleton, .hero,
       .hero-art, .pillars and .about-grid, and changes only what has to change:
       the hero art is a photograph rather than an illustration, so it covers
       instead of contains, and the book band goes dark.
   -------------------------------------------------------------------------- */
.hero-photo .hero-art img { object-fit: cover; object-position: right center; }
/* the tutoring scrim clears by 42%, which is right for artwork with its own
   empty cream. A photograph needs the veil carried further to hold the lede */
.hero-photo .hero-art::before {
  background:
    linear-gradient(to right, var(--hero-cream) 0%, rgba(249, 244, 235, .93) 26%, rgba(249, 244, 235, .58) 46%, rgba(249, 244, 235, 0) 68%),
    linear-gradient(to bottom, rgba(249, 244, 235, .5) 0%, rgba(249, 244, 235, 0) 24%);
}
.hero-photo h1 em { font-style: normal; color: var(--accent-deep); }

/* the book named inline in the bio, pointing at the listing. Bold and in the
   accent so it reads as the title of a real thing before it reads as a link */
.book-title-link {
  color: var(--accent-deep);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(81, 97, 64, .34);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.book-title-link:hover {
  color: var(--ink);
  border-bottom-color: currentColor;
}

/* The book in the hero: the mockup, a star row and a link to the listing. The
   stars carry a "rating to confirm" chip because the listing could not be read
   to verify an average, and an unqualified five stars would be an assertion we
   cannot stand behind. Either Amy confirms the number or the row comes out. */
.hero-book {
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 1.4vw, 20px);
  margin-top: clamp(28px, 3.4vw, 42px);
  padding: clamp(10px, 1vw, 13px) clamp(18px, 1.8vw, 24px) clamp(10px, 1vw, 13px) clamp(14px, 1.4vw, 18px);
  border-radius: 18px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(40, 36, 28, .07);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 14px 28px -22px rgba(40, 36, 28, .7);
  text-decoration: none;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.hero-book:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 20px 34px -22px rgba(40, 36, 28, .75);
}
.hero-book-shot {
  flex: none;
  /* the card's height is the book's height, and the card is what decides
     whether the strip at the foot of the hero clears a short laptop screen */
  width: clamp(76px, 6.2vw, 98px);
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 14px rgba(40, 36, 28, .22));
}
.hero-book-txt { display: grid; gap: .3em; justify-items: start; }
.hero-book-stars { display: inline-flex; gap: 2px; }
.hero-book-stars svg { width: 15px; height: 15px; fill: #d8a13a; display: block; }
.hero-book-name { font-size: .95rem; font-weight: 600; color: var(--ink); }
.hero-book-name em { font-style: italic; }
.hero-book-cta {
  font-size: .82rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.hero-book:hover .hero-book-cta .arw { transform: translateX(3px); }
.hero-book .arw { display: inline-block; transition: transform .3s var(--ease); }

@media (max-width: 620px) {
  .hero-book { gap: 12px; padding: 11px 14px; }
  .hero-book-name { font-size: .88rem; }
}

.book-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(52% 90% at 22% 12%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(46% 100% at 92% 104%, rgba(146, 198, 154, .18) 0%, rgba(146, 198, 154, 0) 64%),
    linear-gradient(168deg, #3f5a3c 0%, #354d34 48%, #2b3f2b 100%);
}
/* Section two runs as three rows: head on the measure, a full bleed band of
   photographs, then the three audiences beneath it. The band is the only thing
   that leaves the measure, and it leaves on both sides, which is what makes it
   read as a deliberate device. The previous version bled one side only with the
   copy stacked beside it, and that left the section lopsided and very tall. */
/* the head runs across the row: statement left, the paragraph that supports it
   right, sharing one baseline rather than stacking as title and subtitle */
.who-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
}
.who-head h2 { margin: 0; max-width: 16ch; }
.who-head .lede { max-width: 52ch; margin: 0; }

@media (max-width: 860px) {
  .who-head { grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
  .who-head h2 { max-width: none; }
}

.who-band {
  list-style: none;
  padding: 0;
  width: 100vw;
  margin: clamp(38px, 4.6vw, 66px) 0 clamp(40px, 5vw, 72px) calc(50% - 50vw);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.who-band li { margin: 0; }
.who-band picture { display: contents; }
.who-band img {
  width: 100%;
  height: clamp(220px, 27vw, 400px);
  object-fit: cover;
  display: block;
}
/* the two frames meet in the middle, so the seam takes a hairline of the band
   colour rather than butting two photographs straight together */
.who-band li + li img { box-shadow: inset 3px 0 0 var(--panel); }

/* The How coaching helps steps are a heading and a number and nothing else, so
   they centre. Scoped to #focus: the swim page reuses .life-steps for its three
   audiences, and those still carry a paragraph that reads better ranged left. */
#focus .life-step { text-align: center; }
#focus .life-step-head { justify-content: center; }
#focus .life-step h3 { margin-bottom: .55em; max-width: 22ch; margin-inline: auto; }
#focus .life-step p { max-width: 30ch; margin-inline: auto; }

#who .life-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 46px);
}
#who .life-step p { max-width: 38ch; }

@media (max-width: 900px) {
  .who-band { grid-template-columns: minmax(0, 1fr); }
  .who-band img { height: clamp(200px, 46vw, 300px); }
  .who-band li + li img { box-shadow: inset 0 3px 0 var(--panel); }
  #who .life-steps { grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 5vw, 38px); }
}

/* --------------------------------------------------------------------------
   8g. The swim page's safety band. Blue rather than the green used elsewhere,
       because this is the water section and it should feel like it.
   -------------------------------------------------------------------------- */
.safety-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background-image:
    radial-gradient(54% 96% at 18% -6%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(46% 100% at 90% 104%, rgba(126, 196, 214, .22) 0%, rgba(126, 196, 214, 0) 64%),
    linear-gradient(168deg, rgba(41, 74, 92, .88) 0%, rgba(41, 72, 89, .74) 34%, rgba(37, 65, 81, .58) 62%, rgba(33, 59, 74, .8) 100%),
    image-set(url("../img/safety-water-2400.webp") type("image/webp"),
              url("../img/safety-water-2400.jpg") type("image/jpeg"));
  background-size: auto, auto, auto, cover;
  background-position: center, center, center, center;
  background-repeat: no-repeat;
  background-color: #294859;
}
.safety-band .section-head.centred { max-width: 92ch; }
.safety-band .section-head h2 { max-width: none; text-wrap: balance; }
@media (min-width: 1240px) {
  .safety-band .section-head h2 { text-wrap: nowrap; }
}
.safety-band .section-head .lede { max-width: 78ch; margin-inline: auto; }
.safety-band .section-head .eyebrow { color: #a9cddb; }
.safety-band .section-head h2 { color: #fbfaf6; }
.safety-band .section-head .lede { color: rgba(240, 247, 250, .94); }

/* The four steps ride one continuous wave rather than sitting in four boxes.
   The line is a fixed height SVG stretched horizontally, so its crests and
   troughs stay at the same pixel heights at every width and the icons can be
   offset by hand to land on them. preserveAspectRatio="none" is what makes that
   hold: the curve stretches sideways and never moves vertically. */
.lesson-track { position: relative; margin-top: clamp(30px, 3.6vw, 48px); }
.lesson-wave {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 160px;
  fill: none;
  stroke: rgba(207, 230, 238, .42);
  stroke-width: 1.6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.lesson-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 26px);
  align-items: start;
}
.lesson-step { text-align: center; }
/* The line crosses the upper part of each disc rather than its centre. That is
   22px off true centre, and deliberately so: it reads as discs resting on the
   water instead of threaded onto a wire. */
.lesson-step:nth-child(odd)  .lesson-ic { margin-top: 18px; }
.lesson-step:nth-child(even) .lesson-ic { margin-top: 74px; }
.lesson-ic {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-inline: auto;
  margin-bottom: clamp(16px, 1.8vw, 24px);
  border-radius: 50%;
  background: #2b4c5e;
  color: #cfe6ee;
  /* the outer ring is the band's own colour, so the wave passes behind the
     disc instead of running through it */
  box-shadow: 0 0 0 1px rgba(207, 230, 238, .34), 0 0 0 8px #2b4c5e;
}
.lesson-ic svg { width: 27px; height: 27px; display: block; }
.lesson-n {
  margin: 0 0 .5em;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: #a9cddb;
}
.lesson-step h3 { margin-bottom: .45em; color: #fbfaf6; font-size: 1.06rem; }
.lesson-step p { margin: 0 auto; max-width: 30ch; color: rgba(236, 244, 247, .78); font-size: .9rem; }

.lesson-note {
  margin: clamp(24px, 2.8vw, 34px) 0 0;
  text-align: center;
  font-size: .84rem;
  color: rgba(236, 244, 247, .7);
}

@media (max-width: 1080px) {
  /* two across breaks the wave's rhythm, so the line goes and the steps become
     a plain grid rather than pretending to be a journey */
  .lesson-wave { display: none; }
  .lesson-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px); }
  .lesson-step:nth-child(odd)  .lesson-ic,
  .lesson-step:nth-child(even) .lesson-ic { margin-top: 0; }
}
@media (max-width: 560px) { .lesson-steps { grid-template-columns: minmax(0, 1fr); } }

.book-band-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(28px, 4.6vw, 72px);
  align-items: center;
}
/* a pool of light under the mockup so it stands on the dark rather than floats */
.book-stage {
  position: relative;
  margin: 0;
  display: grid;
  place-items: center;
  padding: clamp(14px, 2vw, 28px);
}
.book-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8% 4% 2%;
  border-radius: 50%;
  background: radial-gradient(58% 52% at 50% 62%, rgba(226, 236, 220, .30) 0%, rgba(226, 236, 220, 0) 70%);
}
.book-stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 22px);
}
.book-face {
  width: auto;
  height: clamp(190px, 20vw, 300px);
  display: block;
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .42));
}
/* matched to the front. The back is a narrower render, so equal heights still
   read as two copies rather than one object photographed twice */
.book-face-back { height: clamp(186px, 19.6vw, 294px); }
.book-band .section-head .eyebrow { color: var(--accent-soft); }
.book-band .section-head h2 { color: #fbfaf6; }
.book-band .section-head .lede { color: rgba(240, 244, 236, .86); }
.book-band .book-copy .eyebrow { color: var(--accent-soft); }
.book-band .book-copy h2 { color: #fbfaf6; }
.book-band .book-copy .lede { color: rgba(240, 244, 236, .9); }
.book-band .book-copy p { color: rgba(240, 244, 236, .78); }
.book-band .book-copy .btn-fill { background: #fbfaf6; color: #2b3f2b; }
.book-band .book-copy .btn-fill:hover { background: #fff; }

@media (max-width: 900px) {
  .book-band-grid { grid-template-columns: minmax(0, 1fr); }
  .book-face { height: clamp(160px, 38vw, 250px); }
  .book-face-back { height: clamp(156px, 37vw, 244px); }
}

/* --------------------------------------------------------------------------
   8h. The swim page runs on blue rather than green. It is done by overriding
       the three identity tokens on the body, not by restyling components, so
       every button, eyebrow, link arrow and accent word follows automatically
       and nothing can be missed.

       The values are solved against the same contrast targets the green ones
       carry, not eyeballed: --accent-deep 6.0:1 on --bg, --accent-soft 6.0:1 on
       --dark, --accent 3.2:1 for decorative use. The hue is taken from the
       safety band so the page is one family, and it lands on the exact blue the
       homepage already uses for the swim card.

       The footer stays green. It is the site's closing band on every page and
       belongs to the brand, not to this one service.
   -------------------------------------------------------------------------- */
.page-swim {
  --accent-rgb:  98, 141, 169;
  --accent:      #628da9;
  --accent-deep: #406075;
  --accent-soft: #97b0c1;
  /* the closing band follows too, at the same depth as the green it replaces */
  --footer:      #1e3543;
  /* and the pale wash the booking band sits on, matched in weight to the sage
     it replaces rather than picked by eye */
  --wash:        #dfe8ed;
}

/* --------------------------------------------------------------------------
   9. About Amy
   -------------------------------------------------------------------------- */
/* Meet Amy. A generated backdrop panel in the hero's language (cream ground,
   soft blob, watercolour botanicals, sparkles) with Amy's real photograph set
   in an arch on top. The panel has its own aspect ratio, so nothing stretches
   when the copy column runs long.
   -------------------------------------------------------------------------- */
#about { padding-block: clamp(52px, 6vw, 92px); background: var(--panel-cream); }

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
}

.amy-scene { position: relative; aspect-ratio: 1744 / 2336; }
.amy-col { position: relative; }
.panel-bg { display: block; position: absolute; inset: 0; }
.panel-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }

.amy-portrait {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  aspect-ratio: 522 / 805;
  margin: 0;
  overflow: hidden;
  border-radius: 50% 50% 12px 12px / 32.4% 32.4% 12px 12px;
  box-shadow: var(--shadow-md);
}
.amy-portrait picture { display: contents; }
.amy-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }

.portrait-cap { margin: 16px 0 0; font-size: .86rem; color: var(--ink-2); text-align: center; }
.portrait-cap strong { color: var(--ink); font-weight: 600; }
.about-copy { position: relative; }

.creds {
  margin-top: clamp(26px, 3.4vw, 38px);
  border-top: 1px solid var(--line);
}
.creds .row {
  display: grid;
  grid-template-columns: minmax(120px, .34fr) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 28px);
  padding-block: 1em;
  border-bottom: 1px solid var(--line-2);
}
.creds dt {
  font-size: .7rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--accent-deep);
  padding-top: .28em;
}
.creds dd { margin: 0; color: var(--ink-2); font-size: .98rem; }

/* --------------------------------------------------------------------------
   10. Reading & ESL. Two wide stacked panes rather than boxed cards: each real
       photograph sits on its own generated backdrop, image left for reading and
       right for ESL, with the copy taking the opposite side. No card chrome,
       so the section reads editorial rather than templated.
   -------------------------------------------------------------------------- */
#teaching { background: var(--panel-cream); }
#teaching .section-head {
  margin-inline: auto;
  text-align: center;
  max-width: 62ch;
}
#teaching .section-head .eyebrow { justify-content: center; }
#teaching .section-head .lede { margin-inline: auto; }

.subjects { display: grid; gap: clamp(48px, 7vw, 104px); }

.subject {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 84px);
  align-items: center;
}
.subject:nth-child(even) .subject-media { order: 2; }

.subject-media { position: relative; aspect-ratio: 2336 / 1744; }
.subject-photo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 66%;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: var(--shadow-md);
}
.subject-photo picture { display: contents; }
.subject-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* both panes get the same column width, and the copy in the flipped pane
   is pushed toward the photograph so the gap reads identical on both */
.subject-body { max-width: 44ch; }
.subject:nth-child(even) .subject-body { justify-self: end; }
.subject-icon {
  display: grid;
  place-items: center;
  width: 48px;
  aspect-ratio: 1;
  margin-bottom: 16px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), .18);
  color: var(--accent-deep);
}
.subject-icon svg { width: 55%; height: 55%; }
.subject h3 {
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  font-weight: 500;
  letter-spacing: -.018em;
  margin-bottom: .45em;
}
.subject p { color: var(--ink-2); font-size: 1rem; }
.card-list {
  margin-top: 1.3em;
  padding-top: 1.2em;
  border-top: 1px solid var(--line-2);
  display: grid;
  gap: .55em;
}
.card-list li {
  position: relative;
  padding-left: 1.35em;
  font-size: .95rem;
  color: var(--ink-2);
}
.card-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .58em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* --------------------------------------------------------------------------
   11. Two ways to learn. A generated band sits behind the section carrying two
       pale blobs, one under each format, and the real photograph of each way of
       working is cut to a circle so this section does not repeat the rectangles
       used for the subjects.
   -------------------------------------------------------------------------- */
#formats, #how { background: var(--panel-cream); position: relative; overflow: clip; }
#how { padding-block: clamp(58px, 6.6vw, 104px); }

.band-art {
  position: absolute;
  left: 0; right: 0; top: 0;
  z-index: 0;
  pointer-events: none;
}
.band-art-bottom { top: auto; bottom: 0; }
.band-art picture { display: contents; }
/* the band is a fixed illustration, so its far edge is dissolved rather than
   cut, and its cream is normalised to the section ground */
.band-art {
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
.band-art-bottom {
  inset: 0;
  -webkit-mask-image: none;
  mask-image: none;
}
.band-art img { width: 100%; height: auto; display: block; }
/* cover, not fill: the illustration keeps its proportions, and anchoring right
   keeps the sprig while the crop comes off the empty left. Declared after the
   generic rule above, which it ties with on specificity. */
.band-art-bottom img {
  height: 100%;
  object-fit: cover;
  object-position: right bottom;
}

.section-head.centred {
  margin-inline: auto;
  text-align: center;
  max-width: 62ch;
}
.section-head.centred .eyebrow { justify-content: center; }
.section-head.centred .lede { margin-inline: auto; }

.ways {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 5vw, 76px);
}
/* each way is a single clickable target that jumps to the booking section */
.way {
  position: relative;
  text-align: center;
  transition: transform .35s var(--ease);
}
.way-link { color: inherit; text-decoration: none; }
.way-link::after {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: 2;
  border-radius: var(--radius-lg);
}
.way:hover { transform: translateY(-4px); }
.way:hover .way-photo { box-shadow: var(--shadow-lg); }
.way:hover .way-link { color: var(--accent-deep); }
.way:focus-within .way-photo { outline: 2px solid var(--accent-deep); outline-offset: 4px; }
.way-link:focus-visible { outline: none; }

.way-photo {
  display: block;
  width: clamp(190px, 20vw, 260px);
  aspect-ratio: 1;
  margin: 0 auto clamp(20px, 2.4vw, 28px);
  border-radius: 50%;
  overflow: hidden;
  background: var(--panel-cream);
  box-shadow: var(--shadow-md);
  transition: box-shadow .35s var(--ease);
}
.way-photo picture { display: contents; }
.way-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.way h3 { margin-bottom: .4em; }
.way p { color: var(--ink-2); font-size: .98rem; max-width: 40ch; margin-inline: auto; }
.way-meta {
  margin: clamp(20px, 2.4vw, 28px) auto 0;
  max-width: 34ch;
  text-align: center;
}
.way-meta > div {
  display: grid;
  gap: 2px;
  padding-block: .7em;
  border-top: 1px solid var(--line-2);
}
.way-meta dt {
  font-size: .66rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--accent-deep);
}
.way-meta dd { margin: 0; font-size: .94rem; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   12. Getting started. A rail with three solid numbered nodes sitting on it,
       copy hanging left aligned underneath. The rail is what makes this read as
       a sequence rather than a third three-column grid, and the nodes are
       filled rather than transparent so they hold against the ground band.
   -------------------------------------------------------------------------- */
.stages {
  position: relative;
  z-index: 1;
  margin-top: clamp(6px, 1.4vw, 18px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.4vw, 56px);
  list-style: none;
  margin: 0;
  padding: clamp(30px, 3.6vw, 52px);
  background: var(--panel-cream);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.stages::before {
  content: "";
  position: absolute;
  left: calc(clamp(30px, 3.6vw, 52px) + 26px);
  right: calc(clamp(30px, 3.6vw, 52px) + 26px);
  top: calc(clamp(30px, 3.6vw, 52px) + 26px);
  height: 1px;
  background: var(--accent);
  opacity: .45;
}
.stage { position: relative; }
.stage-n {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent-deep);
  color: #fff;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  box-shadow: 0 0 0 7px var(--panel-cream);
  margin-bottom: clamp(18px, 2.2vw, 26px);
}
.stage h3 {
  font-size: clamp(1.05rem, .98rem + .3vw, 1.22rem);
  margin-bottom: .4em;
}
.stage p { color: var(--ink-2); font-size: .95rem; }

/* --------------------------------------------------------------------------
   13. Parent voices. KEPT ON PURPOSE with no markup calling it. The section came
       out of tutoring.html when the placeholder quotes did, because a band
       headed "what families say" with nothing in it is worse than no band.
       When Amy supplies three real quotes this is a paste back, not a rebuild.

       Notes on torn scraps of paper, taped up. The paper is
       masked with a ragged bottom edge, and the tape sits outside the masked
       element so it is not clipped with it.
   -------------------------------------------------------------------------- */
/* the cutout stands on the section floor at the left, so the row of scraps is
   nudged clear of him rather than sitting on top */
#voices { position: relative; overflow: clip; }
.voices-kid {
  position: absolute;
  left: clamp(-24px, -1vw, 0px);
  bottom: 0;
  width: clamp(190px, 23vw, 320px);
  z-index: 1;
  opacity: .45;
  pointer-events: none;
}
.voices-kid picture { display: contents; }
.voices-kid img { width: 100%; height: auto; display: block; }

.scraps {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 46px);
  align-items: start;
}
.scrap { position: relative; margin: 0; padding-top: 14px; }
.scrap:nth-child(2) { margin-top: clamp(14px, 2.4vw, 34px); }
.scrap:nth-child(3) { margin-top: clamp(6px, 1.2vw, 16px); }

.scrap-tape {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  width: 84px;
  height: 26px;
  border-radius: 2px;
  opacity: .85;
}
.scrap-tape-a { background: rgba(var(--accent-rgb), .5);  transform: translateX(-58%) rotate(-3.5deg); }
.scrap-tape-b { background: rgba(160, 178, 200, .55); transform: translateX(-44%) rotate(2.5deg); }
.scrap-tape-c { background: rgba(196, 170, 128, .5);  transform: translateX(-52%) rotate(-1.8deg); }

.scrap-paper {
  position: relative;
  background: var(--panel);
  padding: clamp(24px, 2.6vw, 32px) clamp(20px, 2.4vw, 28px) clamp(30px, 3vw, 40px);
  box-shadow: 0 12px 30px -20px rgba(40, 36, 28, .45);
  --tear: 18px;
  -webkit-mask-image: linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%2020%22%20preserveAspectRatio%3D%22none%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M0%200%20L240.0%200%20L240.0%2011.0%20L237.03%209.0%20L217.01%2010.55%20L197.01%2014.83%20L185.02%2011.83%20L165.1%2012.99%20L152.48%2011.65%20L136.98%2011.08%20L117.03%2010.86%20L107.64%209.76%20L97.87%208.38%20L80.37%2012.93%20L70.82%2012.24%20L60.64%209.38%20L41.33%2011.05%20L29.93%2011.03%20L14.88%2011.24%20L0.0%2011.0%20Z%22%2F%3E%3C%2Fsvg%3E");
  mask-image: linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%2020%22%20preserveAspectRatio%3D%22none%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M0%200%20L240.0%200%20L240.0%2011.0%20L237.03%209.0%20L217.01%2010.55%20L197.01%2014.83%20L185.02%2011.83%20L165.1%2012.99%20L152.48%2011.65%20L136.98%2011.08%20L117.03%2010.86%20L107.64%209.76%20L97.87%208.38%20L80.37%2012.93%20L70.82%2012.24%20L60.64%209.38%20L41.33%2011.05%20L29.93%2011.03%20L14.88%2011.24%20L0.0%2011.0%20Z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size: 100% calc(100% - var(--tear)), 240px var(--tear);
  mask-size: 100% calc(100% - var(--tear)), 240px var(--tear);
  -webkit-mask-position: top left, bottom left;
  mask-position: top left, bottom left;
  -webkit-mask-repeat: no-repeat, repeat-x;
  mask-repeat: no-repeat, repeat-x;
}
.scrap blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(.99rem, .95rem + .2vw, 1.09rem);
  line-height: 1.6;
  color: var(--ink);
}
.scrap figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(18px, 2.2vw, 24px);
}
.scrap-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), .2);
  color: var(--accent-deep);
  font-family: var(--font-display);
  font-size: .92rem;
}
.scrap-who { font-size: .84rem; color: var(--ink-2); line-height: 1.4; }

/* --------------------------------------------------------------------------
   14. Booking
   -------------------------------------------------------------------------- */
/* the closing section: copy and Amy on the left, the scheduler on the right,
   with a single watercolour tree standing at the foot of the page */
#book { position: relative; overflow: clip; }
.book-tree {
  position: absolute;
  right: clamp(-30px, -1vw, 0px);
  bottom: 0;
  width: clamp(170px, 22vw, 340px);
  z-index: 0;
  pointer-events: none;
}
.book-tree picture { display: contents; }
.book-tree img { width: 100%; height: auto; display: block; }

.book-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(30px, 4.5vw, 70px);
  align-items: start;
}
.book-copy .lede { max-width: 38ch; }
.book-fallback {
  margin-top: clamp(20px, 2.4vw, 28px);
  font-size: .93rem;
  color: var(--ink-2);
}
.book-fallback .link-arrow { margin-left: .4em; }

.book-amy {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: clamp(26px, 3.2vw, 38px) 0 0;
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid rgba(40, 36, 28, .12);
  max-width: 34rem;
}
.book-amy picture { display: contents; }
.book-amy img {
  width: 92px;
  height: 92px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  box-shadow: var(--shadow-sm);
}
.book-amy figcaption { font-size: .88rem; line-height: 1.5; color: var(--ink-2); }
.book-amy strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: .2em; }

/* the card the embed sits in. Its own element, so the iframe that replaces the
   preview inherits the same frame without being restyled itself. */
.embed-shell {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-2);
  background: var(--panel);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.embed-shell iframe { display: block; width: 100%; border: 0; }

/* ---- static scheduler preview. No endpoint, purely a visual stand-in ---- */

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.footer {
  /* the oversized wordmark used to close the page, so the band could open wide
     and end at zero. Without it the footer is just the columns and the strip,
     and it wants to be short */
  padding-block: clamp(34px, 4.2vw, 52px) 0;
  position: relative;
  overflow: clip;
  background: var(--footer);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, .78fr));
  gap: clamp(28px, 3.4vw, 56px);
}
.footer-brand-col .brand-mark { height: 84px; width: auto; margin-bottom: 14px; }
.brand-full-cream { width: clamp(122px, 11vw, 156px); height: auto; display: block; margin-bottom: 20px; }
.footer-brand-col p { max-width: 34ch; }

.footer-brand { align-items: center; gap: 14px; }
.footer-brand .brand-mark { height: 110px; width: auto; }
.footer .brand-name { color: var(--on-dark); font-size: 1.24rem; }
.footer .brand-desc { color: var(--accent-soft); }
.footer p, .footer li { color: rgba(244, 241, 232, .74); font-size: .93rem; }
.footer a { color: rgba(244, 241, 232, .88); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer h4 {
  font-family: var(--font-body);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 1.1em;
}
.footer-links { display: grid; gap: .6em; }
.footer-base {
  margin-top: clamp(34px, 4.4vw, 54px);
  padding-top: 22px;
  border-top: 1px solid rgba(244, 241, 232, .14);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  align-items: center;
}
.footer-base p { margin: 0; font-size: .84rem; color: rgba(244, 241, 232, .6); }

.footer-label {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244, 241, 232, .5);
  margin-bottom: .1em;
}
/* --------------------------------------------------------------------------
   17. Reveals
   -------------------------------------------------------------------------- */
html.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
html.js .reveal.is-revealed { opacity: 1; transform: none; }
html.js .reveal[data-d="1"] { transition-delay: .08s; }
html.js .reveal[data-d="2"] { transition-delay: .16s; }
html.js .reveal[data-d="3"] { transition-delay: .24s; }
html.js .reveal[data-d="4"] { transition-delay: .32s; }
html.js .reveal[data-d="5"] { transition-delay: .40s; }

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */
@media (min-width: 901px) and (min-aspect-ratio: 16 / 9) {
  /* wider than the artwork: fill the width and take the crop off the top, which
     is empty cream, rather than leaving a band down the left */
  .hero-art img { object-fit: cover; object-position: center bottom; }
}

@media (min-width: 901px) {
  /* Getting Started and Book a Session were carrying a full section pad each at
     their shared edge, around 250px of nothing between the stages panel and the
     booking eyebrow. Halved on desktop only; the phone rhythm is unchanged. */
  #how { padding-bottom: clamp(34px, 3.4vw, 54px); }
  #book { padding-top: clamp(46px, 4.6vw, 74px); }

  /* the headline answers to the screen height too, so it cannot push the strip
     off a short laptop viewport */
  .hero h1 { font-size: min(clamp(2.3rem, 1.35rem + 4.3vw, 4.05rem), 7.4svh); }
  .hero .lede { font-size: min(clamp(1.06rem, 1rem + .38vw, 1.24rem), max(1rem, 2.5svh)); }
  .hero-cta { margin-top: clamp(16px, 2.6svh, 32px); }
}

@media (max-width: 1040px) {
  .pillar { padding-inline: clamp(8px, 1.4vw, 14px); }
  .pillar-icon { width: 40px; }
  .hero h1 { max-width: 12ch; }

}

@media (max-width: 900px) {
  :root { --nav-h: 74px; }
  /* Art directed hero on phones. The artwork stays a background, the way it is
     on desktop, but the portrait crop carries the composition: its top is open
     ground for the copy and the subject sits along the bottom, so the headline
     has somewhere to live without a heavy scrim over the picture.

     The DOM order is art, copy, strip. The art is taken out of flow, and the
     strip is pushed to the foot so a band of the picture reads between them. */
  .hero {
    display: flex;
    flex-direction: column;
    /* 177vw is the portrait artwork's own height at full bleed width. The svh
       floor buys a clear band of picture under the copy, at the cost of a few
       pixels off each side, which all three of these can spare. One knob: the
       art, the hero and the copy block are all sized from it. */
    --hero-art-h: max(177vw, 86svh);
    min-height: var(--hero-art-h);
    padding-top: calc(var(--nav-h) + clamp(22px, 6vw, 38px));
    padding-bottom: 0;
  }
  /* the copy block reaches down to the foot of the artwork, so the strip that
     follows it starts there rather than straight under the buttons and the
     subject of the picture is left in clear air between the two */
  .hero-grid { position: relative; z-index: 1; }
  /* the strip is tall on a phone, tall enough to bury the picture if it sits
     straight under the buttons, so it is held to the foot of the artwork and
     drops from there into the section below, with air above it so it does not
     butt up against the buttons */
  .hero > .wrap:last-child {
    position: relative;
    z-index: 1;
    margin-top: clamp(40px, 10vw, 62px);
  }

  .hero-grid { display: block; flex: none; }
  /* the copy owns the full height of the artwork and splits it: heading and
     lede ranged left and centred in the space above the buttons, buttons on
     the foot of the picture. The two auto margins do the splitting, one above
     the heading and one below the lede, so the free space lands evenly on
     either side of them and whatever follows the buttons stays at the bottom. */
  .hero-copy {
    grid-column: auto;
    max-width: none;
    text-align: left;
    display: flex;
    flex-direction: column;
    min-height: calc(var(--hero-art-h) - var(--nav-h) - clamp(22px, 6vw, 38px));
  }
  .hero-portrait {
    display: block;
    width: clamp(104px, 32vw, 132px);
    aspect-ratio: 1;
    height: auto;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: clamp(14px, 4vw, 20px);
    /* the ring is the hero cream, so the circle reads as lifted off the
       artwork rather than cut out of it */
    box-shadow: 0 0 0 6px var(--hero-cream), 0 10px 26px rgba(30, 34, 28, .12);
  }
  .hero-copy > h1 { margin-top: auto; }
  /* where there is a portrait it takes the auto margin instead, so the circle,
     the heading and the lede centre as one group rather than the circle being
     stranded at the top of the box by the heading's own auto margin */
  .hero-copy > .hero-portrait { margin-top: auto; }
  .hero-copy > .hero-portrait + h1 { margin-top: 0; }
  /* stated in full so the book card can sit between the lede and the buttons
     on a phone while the desktop hero keeps it below them */
  .hero-copy > .hero-portrait { order: 1; }
  .hero-copy > h1 { order: 2; }
  .hero-copy > .lede { order: 3; }
  .hero-copy > .hero-book { order: 4; }
  .hero-copy > .hero-cta { order: 5; }
  .hero-copy > .hero-cta { margin-bottom: auto; }
  .hero-copy .eyebrow { justify-content: flex-start; }
  .hero h1 { max-width: none; margin-inline: 0; }
  .hero-copy .lede { max-width: none; margin-inline: 0; }
  /* the buttons sit on one row under the lede, each only as wide as its own
     label, ranged left with the copy rather than stretched across the column */
  .hero-cta {
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-inline: 0;
    width: auto;
    max-width: none;
  }
  .hero-cta .btn { justify-content: center; width: auto; }

  /* the portrait artwork fills the hero and is anchored to its foot, so the
     subject stays put and any spare height is taken off the open top */
  /* the artwork keeps its own height rather than stretching to the hero, which
     grows past it once the strip is in. Without this the picture is scaled to
     the full hero and its subject ends up behind the strip. */
  .hero-art {
    inset: 0 0 auto 0;
    height: var(--hero-art-h);
  }
  /* life carries the book card under its buttons, so it runs down into the
     subject of the picture and a taller band drops the subject clear of it.
     Swim goes the other way: its band is trimmed so the buttons clear the fold
     on a normal phone, which the working scrim now makes safe. */
  .page-swim .hero {
    --hero-art-h: max(177vw, 90svh);
    padding-top: calc(var(--nav-h) + clamp(12px, 3.4vw, 24px));
  }
  .page-swim .hero-copy { min-height: calc(var(--hero-art-h) - var(--nav-h) - clamp(12px, 3.4vw, 24px)); }
  .page-swim .hero-portrait { margin-bottom: clamp(10px, 3vw, 14px); }
  .page-life .hero { --hero-art-h: max(177vw, 100svh); }
  /* tutoring's artwork is pale cream where the copy sits, so it does not need
     the wash the two photographic heroes do. At full strength the wash reads
     as a tan film over the picture, so here it is barely there. */
  .page-tutoring .hero-art::before {
    background:
      linear-gradient(to bottom,
        rgba(249, 244, 235, .42) 0%,
        rgba(249, 244, 235, .30) 38%,
        rgba(249, 244, 235, .14) 62%,
        rgba(249, 244, 235, 0) 84%);
  }
  .hero-art img {
    object-fit: cover;
    object-position: center bottom;
  }
  .hero-photo .hero-art img { object-position: center bottom; }
  /* the rubber plant is the darkest thing in any of these three and it sits
     right where the centred lede lands. The crop has slack to spare on the
     horizontal, so the frame moves left and the plant moves out of the text */
  .page-life .hero-art img { object-position: 4% bottom; }
  /* the desktop scrim runs left to right, which does nothing for copy stacked
     over the top of a portrait. Top down instead, and light: the artwork is
     already near empty up there, so this is only insurance for the headline */
  .hero-art::before,
  .hero-photo .hero-art::before {
    background:
      linear-gradient(to bottom,
        rgba(249, 244, 235, .58) 0%,
        rgba(249, 244, 235, .46) 40%,
        rgba(249, 244, 235, .26) 64%,
        rgba(249, 244, 235, .10) 84%,
        rgba(249, 244, 235, 0) 100%);
  }
  .hero-art::after { height: 26%; }

  .pillars {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-top: 0;
    padding: clamp(20px, 4vw, 26px);
    text-align: left;
  }
  .pillar { border-left: 0; padding-inline: 0; }
  .pillar + .pillar { border-top: 1px solid var(--line-2); padding-top: 18px; }
  .about-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* Meet Amy and the subject blocks centre on a phone: at this width the copy
     is the whole column, and ranged left it reads as a stray margin. */
  .about-copy { text-align: center; }
  .about-copy .eyebrow { justify-content: center; }
  .subject-body { text-align: center; max-width: none; }
  .subject-icon { margin-inline: auto; }
  /* the list itself is centred as a block, the items inside it are not, so the
     bullets stay in a column instead of stepping in and out */
  .subject-body ul { display: inline-block; text-align: left; }
  .amy-col { width: min(420px, 100%); }
  .subject { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .subject:nth-child(even) .subject-media { order: 0; }
  .subject-body { max-width: none; }
  /* the tree gets its own zone under the copy rather than sitting behind it */
  #book { padding-bottom: clamp(130px, 34vw, 190px); }
  .book-tree { width: clamp(115px, 30vw, 165px); right: -10px; }
  .book-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 901px) {
  /* room at the foot of the section for him to stand in */
  #voices { padding-bottom: clamp(80px, 8vw, 130px); }
}

@media (max-width: 900px) {
  /* he moves to the right of the stacked scraps and shrinks */
  .voices-kid { left: auto; right: 0; width: clamp(150px, 38vw, 220px); }
  #voices { padding-bottom: clamp(80px, 22vw, 130px); }

  /* the scraps stack rather than squeezing into three narrow columns */
  .scraps { grid-template-columns: minmax(0, 1fr); gap: 30px; max-width: 30rem; margin-inline: auto; }
  .scrap:nth-child(2), .scrap:nth-child(3) { margin-top: 0; }
}

@media (max-width: 760px) {
  .ways { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* on a phone the band goes back to a natural strip along the foot of the
     section, since cover at this aspect would crop the sprig away entirely */
  .band-art-bottom { inset: auto 0 0 0; }
  .band-art-bottom img { height: auto; object-fit: fill; }
  .stages { grid-template-columns: minmax(0, 1fr); gap: 0; padding: clamp(24px, 5vw, 32px); }
  .stages::before {
    left: calc(clamp(24px, 5vw, 32px) + 26px);
    right: auto;
    top: calc(clamp(24px, 5vw, 32px) + 26px);
    bottom: calc(clamp(24px, 5vw, 32px) + 26px);
    width: 1px;
    height: auto;
  }
  .stage { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 20px; padding-bottom: 26px; }
  .stage-n { margin-bottom: 0; grid-row: span 3; }
  .creds .row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .creds dt { padding-top: 0; }
}

@media (max-width: 560px) {
  /* the buttons land on the subject of the artwork, which a transparent border
     cannot hold its own against, so the ghost takes the hero cream as a ground */
  .hero-cta .btn-ghost { background: rgba(249, 244, 235, .86); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .footer-base { justify-content: flex-start; }
}

@media (max-width: 560px) {
  /* the nav has to hold a three word name, a descriptor and a pill on a phone,
     so everything shrinks and nothing is allowed to wrap */
  .brand { gap: 8px; }
  .brand-mark, .nav.scrolled .brand-mark { height: 44px; width: auto; }
  .brand-name { font-size: 1.02rem; white-space: nowrap; }
  .brand-desc { font-size: .56rem; letter-spacing: .1em; white-space: nowrap; }
  .nav-cta { font-size: .74rem; padding: .72em 1.05em; white-space: nowrap; margin-left: 8px; }
}

@media (max-width: 360px) {
  .brand-desc { display: none; }
}

/* --------------------------------------------------------------------------
   19. Reduced motion. Sacred, never defeat it.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html.js .reveal { opacity: 1; transform: none; }
  .btn:hover { transform: none; }
}

@media print {
  .nav, .embed-shell, .hero::before { display: none; }
  body { background: #fff; }
}

/* --------------------------------------------------------------------------
   4c. The mobile bar and drawer. House standard: the floating pill is a desktop
       device, so below 900px it becomes a plain solid bar with a hamburger, and
       the links become a top down full screen drawer.

       The drawer IS the nav, not a copy of it: the same <nav> that sits in the
       bar slides down, so there is one set of links to maintain. Without JS the
       last rule here leaves them stacked under the bar instead of parked off
       screen, so the site is still navigable.
   -------------------------------------------------------------------------- */
.nav-burger { display: none; }

@media (max-width: 900px) {
  /* the pill flattens into a bar */
  .nav.nav-open { padding: 0; height: var(--nav-h); }
  .nav-open .nav-inner,
  .nav-open.scrolled .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: none;
    height: 100%;
    padding-inline: clamp(16px, 5vw, 26px);
    gap: 14px;
    border: 0;
    border-radius: 0;
    background: var(--panel);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 1px 0 rgba(40, 36, 28, .08);
  }
  .drawer-open .nav-open .nav-inner { background: var(--panel); }
  .nav-open .nav-cta { display: none; }

  .nav-burger {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
  }
  .nav-burger-box { display: block; width: 22px; height: 14px; position: relative; }
  .nav-burger-box span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .32s var(--ease), opacity .2s var(--ease);
  }
  /* three evenly spaced rules: top, centre, bottom */
  .nav-burger-box span:nth-child(1) { top: 0; }
  .nav-burger-box span:nth-child(2) { top: 50%; transform: translateY(-50%); }
  .nav-burger-box span:nth-child(3) { bottom: 0; }
  .drawer-open .nav-burger-box span:nth-child(1) { transform: translateY(6.25px) rotate(45deg); }
  .drawer-open .nav-burger-box span:nth-child(2) { opacity: 0; }
  .drawer-open .nav-burger-box span:nth-child(3) { transform: translateY(-6.25px) rotate(-45deg); }

  /* the drawer */
  html.js .nav-open .nav-links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    width: 100vw;
    max-width: 100vw;
    height: auto;
    max-height: calc(100svh - var(--nav-h));
    margin: 0;
    justify-self: stretch;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: clamp(18px, 5vw, 32px) clamp(20px, 6vw, 34px) calc(env(safe-area-inset-bottom, 0px) + 32px);
    background: var(--panel);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* it unrolls from its own top edge, which sits flush under the bar, rather
       than sliding down across it. The panel is a descendant of the bar, so it
       can never paint behind it; clipping is what sells coming from behind. */
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path .42s var(--ease), visibility 0s linear .42s;
  }
  html.js.drawer-open .nav-open .nav-links {
    clip-path: inset(0 0 0 0);
    visibility: visible;
    transition: clip-path .42s var(--ease), visibility 0s;
  }
  html.js.drawer-open { overflow: hidden; }

  .nav-open .nav-links > a {
    padding: clamp(15px, 2.6vw, 20px) 2px;
    border-bottom: 1px solid var(--line-2);
    border-radius: 0;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 6.6vw, 2rem);
    font-weight: 600;
    letter-spacing: -.028em;
    white-space: normal;
  }
  .nav-open .nav-links > a:hover { background: none; color: var(--accent-deep); }
  .nav-links a::after { display: none; }

  .drawer-cta {
    margin-top: 20px;
    padding-block: 16px;
    justify-content: center;
    font-size: 1rem;
    border-bottom: 0;
  }
  .nav-open .nav-links > a.drawer-cta {
    border-radius: var(--pill);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    color: #fff;
  }

  /* no script: the links stay in the flow under the bar rather than parked
     off screen, and the hamburger that cannot do anything is hidden */
  html:not(.js) .nav-burger { display: none; }
  html:not(.js) .nav-open .nav-inner { flex-wrap: wrap; height: auto; padding-block: 12px; }
  html:not(.js) .nav-open .nav-links { display: flex; flex-wrap: wrap; gap: 6px 16px; width: 100%; }
  html:not(.js) .nav-open .nav-links > a { font-size: 1rem; padding: 4px 0; border: 0; }
  html:not(.js) .drawer-cta { display: none; }
}
@media (min-width: 901px) { .drawer-cta { display: none; } }

/* --------------------------------------------------------------------------
   17. Mobile pass. Everything here is phone only and nothing above 900px
       changes. Centred where centring helps: heads, single column steps and
       cards, the strips. Long running copy inside a card stays ranged left,
       because centring six lines of body text is harder to read, not easier.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* horizontal drift, killed at the root rather than with overflow hidden */
  html, body { overflow-x: clip; }

  /* the ground photograph is 2.67:1, so at phone widths cover crops it to the
     flat left field and the leaves never arrive. A portrait cut of the same
     frame, graded to the same field, carries them instead. The wash turns with
     it: left to right on desktop, where the copy sits left, top down here,
     where the copy sits across the head of the section. */
  .hero-x {
    background-image:
      linear-gradient(to bottom,
        rgba(250, 247, 241, .94) 0%,
        rgba(250, 247, 241, .84) 26%,
        rgba(250, 247, 241, .46) 48%,
        rgba(250, 247, 241, .10) 72%,
        rgba(250, 247, 241, 0) 90%),
      image-set(url("../img/hero-bg-tall-900.webp") type("image/webp"),
                url("../img/hero-bg-tall-900.jpg") type("image/jpeg"));
    background-size: auto, cover;
    background-position: center, 84% center;
  }

  /* the homepage hero: heading and lede ranged left, then Amy and her card,
     then the button. The copy block carries no styling of its own, so it is
     flattened out of the way and the grid becomes a column, which is what lets
     the button be ordered past the portrait without moving it in the markup. */
  .hero-x-grid { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
  /* a shallower crop of the portrait. Her face is held at 22% from the top, so
     the height comes off the bottom of the frame rather than off her. */
  .hero-x-photo { aspect-ratio: 1.85; }
  /* the button is the point of the hero, so the stack above it is tightened
     until it clears the fold on a normal phone. The row gap carries the rhythm
     now, which lets the collapsed margins inside it go. */
  .hero-x { padding-top: calc(var(--nav-tall) + clamp(14px, 2.4vw, 30px)); }
  .hero-x h1 { margin-bottom: .28em; }
  .hero-x .lede { margin-bottom: 0; }
  .hero-bio { margin-top: 10px; }
  .hero-x-copy { display: contents; }
  .hero-x-art { order: 2; }
  /* same as the service heroes: only as wide as its own label, ranged left */
  .hero-x-actions {
    order: 3;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    max-width: none;
    margin-inline: 0;
    margin-top: 0;
  }
  .hero-x-actions .btn { justify-content: center; width: auto; }
  .hero-bio { text-align: left; }

  /* section heads */
  .section-head,
  .section-head.centred { text-align: center; margin-inline: auto; }
  .section-head .eyebrow { justify-content: center; }
  .section-head .lede { margin-inline: auto; }
  .who-head { text-align: center; }
  .who-head .eyebrow { justify-content: center; }
  .who-head h2 { margin-inline: auto; }

  /* the numbered steps, on both the life and swim pages */
  .life-step { text-align: center; }
  .life-step-head { justify-content: center; }
  .life-step p { margin-inline: auto; }
  #who .life-step p { max-width: none; }

  /* the three up strips */
  .pillar { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  .pillar-x { flex-direction: column; align-items: center; text-align: center; }
  .pillars-x { text-align: center; }

  /* the closing bands */
  .book-copy { text-align: center; }
  .book-copy .eyebrow { justify-content: center; }
  .book-copy .lede, .book-copy p { margin-inline: auto; }
  .book-copy .hero-cta { justify-content: center; }
  .book-amy { justify-content: center; text-align: left; }
  .stub { text-align: center; }

  /* the book band on the life page */
  .book-band .book-copy .btn { justify-content: center; width: 100%; max-width: 22rem; margin-inline: auto; }

  /* every primary and secondary button goes full width at this size */
  .life-hero .hero-cta,
  .section .hero-cta { flex-direction: column; align-items: stretch; max-width: 22rem; margin-inline: auto; }
  .section .hero-cta .btn { justify-content: center; width: 100%; }

  /* the footer reads better centred than as two ragged columns */
  .footer-grid { text-align: center; }
  .footer-brand-col .brand-mark,
  .footer-brand-col .brand-full-cream { margin-inline: auto; }
  .footer-brand-col p { max-width: none; margin-inline: auto; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

@media (max-width: 560px) {
  /* two footer columns is one too many at this width */
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}

/* --------------------------------------------------------------------------
   18. The live booking card. It replaced a drawn preview of a calendar, so the
       job here is the opposite of what that needed: say plainly where the
       button goes and get out of the way. The Google mark identifies the
       service the link opens, in its own colours and unaltered.
   -------------------------------------------------------------------------- */
.book-live {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0;
  padding: clamp(30px, 4.4vw, 52px) clamp(22px, 3.4vw, 44px);
}
.book-live-mark {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: clamp(18px, 2.2vw, 26px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(40, 36, 28, .08), 0 10px 24px -18px rgba(40, 36, 28, .7);
}
.book-live-mark .book-g { width: 28px; height: 28px; display: block; }
.book-live-title {
  margin: 0 0 .5em;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + .5vw, 1.42rem);
  font-weight: 700;
  letter-spacing: -.022em;
  color: var(--ink);
}
.book-live-note {
  margin: 0 0 clamp(22px, 2.6vw, 30px);
  max-width: 34ch;
  font-size: .94rem;
  color: var(--ink-2);
}
.book-live-btn {
  gap: .7em;
  padding-inline: clamp(20px, 2.2vw, 30px);
}
.book-live-btn .book-g {
  width: 18px;
  height: 18px;
  display: block;
  /* the mark sits on its own white chip so its colours stay legible on the
     button's fill rather than fighting it */
  background: #fff;
  border-radius: 50%;
  padding: 3px;
  box-sizing: content-box;
}
.book-live-alt {
  margin: clamp(18px, 2.2vw, 24px) 0 0;
  font-size: .88rem;
  color: var(--ink-2);
}
.book-live-alt a { color: var(--accent-deep); }

@media (max-width: 900px) {
  .book-live-btn { width: 100%; max-width: 22rem; justify-content: center; }
}