/* ==========================================================================
   EnRich Childcare
   Design system
   --------------------------------------------------------------------------
   Color   cream #fefcf4 base, navy #161731 text, blue #5194d5 brand,
           #2f6fb0 for anything carrying white text (contrast 5.1:1),
           #dbf3ff + #f1e5b8 as soft supporting tints.
   Type    Fredoka (display) + Quicksand (body). Two families, no more.
   Spacing 8 / 16 / 24 / 40 / 64 / 96 scale.
   Signature  soft wave dividers + blurred color blobs behind the hero,
              sticker-style trust chips.
   Motion  one gentle reveal per section on scroll, plus hover states.
           Nothing else. All of it disabled under prefers-reduced-motion.
   ========================================================================== */

:root {
  --cream: #fefcf4;
  --navy: #161731;
  --blue: #5194d5;
  --blue-deep: #2f6fb0;
  --blue-dark: #2a6099;
  --sky: #dbf3ff;
  --sand: #f7f2e3;
  --butter: #f1e5b8;
  --blush: #ffe4ec;
  --line: #e4e6f5;
  --muted: #5d6080;
  --white: #fff;

  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 40px;
  --s5: 64px;
  --s6: 96px;

  --radius: 16px;
  --radius-lg: 26px;
  --radius-xl: 34px;
  --pill: 999px;

  --shadow-xs: 0 1px 2px rgba(22, 23, 49, .04);
  --shadow-sm: 0 1px 2px rgba(22, 23, 49, .04), 0 4px 14px rgba(22, 23, 49, .05);
  --shadow: 0 2px 4px rgba(22, 23, 49, .04), 0 14px 34px rgba(22, 23, 49, .08);
  --shadow-lg: 0 4px 8px rgba(22, 23, 49, .04), 0 22px 50px rgba(22, 23, 49, .11);

  --ease: cubic-bezier(.22, .68, .35, 1);
  --wrap: 1140px;
}

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Quicksand, system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--navy);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
h1, h2, h3 {
  font-family: Fredoka, Quicksand, system-ui, sans-serif;
  font-weight: 600; line-height: 1.12; margin: 0;
  letter-spacing: -.015em;
}
p { margin: 0; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--blue-deep);
  outline-offset: 3px;
  border-radius: 8px;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s3); position: relative; }
.skip {
  position: absolute; left: -9999px;
  background: var(--navy); color: var(--cream);
  padding: 12px 20px; border-radius: var(--pill); z-index: 100;
}
.skip:focus { left: var(--s3); top: var(--s2); }

/* Reveal on scroll ------------------------------------------------------- */
.rv { opacity: 0; transform: translateY(18px); }
.rv-on { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv-on[data-d="1"] { transition-delay: .07s; }
.rv-on[data-d="2"] { transition-delay: .14s; }
.rv-on[data-d="3"] { transition-delay: .21s; }
.rv-on[data-d="4"] { transition-delay: .28s; }
.no-js .rv { opacity: 1; transform: none; }

/* Header ----------------------------------------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(254, 252, 244, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.hdr.stuck { border-bottom-color: var(--line); box-shadow: 0 4px 20px rgba(22, 23, 49, .05); }
.hdr__in { display: flex; align-items: center; gap: var(--s2); height: 78px; }
.logo { display: flex; align-items: center; text-decoration: none; margin-right: auto; transition: transform .25s var(--ease); }
.logo:hover { transform: scale(1.03); }
.logo img { height: 44px; width: auto; }

.nav { display: none; }
.nav a {
  position: relative; text-decoration: none; font-weight: 600; font-size: 16px;
  padding: 10px 15px; border-radius: var(--pill); color: var(--navy);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav a:hover { background: var(--sky); color: var(--blue-deep); }
.nav a[aria-current="page"] { color: var(--blue-deep); background: var(--sky); }

/* header CTA is hidden on phones, the drawer carries it instead */
.hdr__in > .btn { display: none; white-space: nowrap; }

.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 14px; cursor: pointer; color: var(--navy);
  box-shadow: var(--shadow-xs);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.burger:active { transform: scale(.94); }
.burger svg { width: 22px; height: 22px; }
.burger .x { display: none; }
.burger[aria-expanded="true"] .menu { display: none; }
.burger[aria-expanded="true"] .x { display: block; }

.drawer {
  display: grid; grid-template-rows: 0fr;
  border-top: 1px solid transparent; background: var(--cream);
  transition: grid-template-rows .34s var(--ease), border-color .34s var(--ease);
}
.drawer > div { overflow: hidden; }
.drawer.open { grid-template-rows: 1fr; border-top-color: var(--line); }
.drawer nav { display: flex; flex-direction: column; padding: var(--s2) var(--s3) var(--s3); gap: 4px; }
.drawer nav > a {
  text-decoration: none; font-weight: 600; padding: 14px 16px;
  border-radius: 14px; color: var(--navy);
  transition: background .18s var(--ease);
}
.drawer nav > a:hover { background: var(--sand); }
.drawer nav > a[aria-current="page"] { background: var(--sky); color: var(--blue-deep); }
/* keep the drawer CTA white on blue: .drawer nav > a would otherwise outrank .btn--primary */
.drawer nav > a.btn--primary { margin-top: var(--s1); justify-content: center; color: var(--white); }

/* Buttons ---------------------------------------------------------------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: inherit; font-size: 16px; font-weight: 700;
  padding: 14px 27px; border-radius: var(--pill);
  text-decoration: none; cursor: pointer; border: 2px solid transparent;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease);
}
.btn--primary { background: var(--blue-deep); color: var(--white); box-shadow: 0 4px 14px rgba(47, 111, 176, .28); }
.btn--primary:hover { background: var(--blue-dark); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(47, 111, 176, .34); }
.btn--primary:active { transform: translateY(-1px); }
.btn--ghost { background: var(--white); color: var(--blue-deep); border-color: var(--line); box-shadow: var(--shadow-xs); }
.btn--ghost:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.btn--ghost:active { transform: translateY(-1px); }
.btn--lg { font-size: 17px; padding: 17px 36px; }
.btn--block { width: 100%; }

/* Sections --------------------------------------------------------------- */
.sec { padding: var(--s5) 0; position: relative; }
.sec--sky { background: var(--sky); }
.sec--sand { background: var(--sand); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--white); border: 1px solid var(--line);
  color: var(--blue-deep); font-weight: 700; font-size: 14px;
  padding: 9px 17px; border-radius: var(--pill); box-shadow: var(--shadow-sm);
}
.sec__head { max-width: 660px; margin-bottom: var(--s4); }
.sec__head h2 { font-size: clamp(30px, 5vw, 42px); margin: var(--s2) 0 var(--s2); }
.sec__head p { color: var(--muted); font-size: 18px; }

/* Signature: wave divider ------------------------------------------------ */
.wave { display: block; width: 100%; height: 56px; margin-bottom: -1px; }
.wave path { fill: currentColor; }
.wave--to-sky { color: var(--sky); }
.wave--to-cream { color: var(--cream); }
.wave--to-sand { color: var(--sand); }
/* the footer is white, so the wave that runs into it is white too */
.wave--to-navy { color: var(--white); }
/* matches the top-left end of the .band gradient so the join is seamless */
.wave--to-band { color: var(--blue-deep); }

/* Hero ------------------------------------------------------------------- */
.hero { padding: var(--s5) 0 var(--s4); text-align: center; position: relative; }
.hero__blobs {
  position: absolute; inset: -10% 0 auto; height: 120%;
  pointer-events: none; overflow: hidden; z-index: 0;
}
.hero__blobs span {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(64px); opacity: .55;
}
.hero__blobs span:nth-child(1) { width: 420px; height: 420px; background: var(--sky); top: -60px; left: -110px; }
.hero__blobs span:nth-child(2) { width: 360px; height: 360px; background: var(--butter); top: 40px; right: -100px; opacity: .5; }
.hero__blobs span:nth-child(3) { width: 300px; height: 300px; background: var(--blush); bottom: -40px; left: 46%; opacity: .42; }
.hero .wrap { z-index: 1; }

.hero h1 {
  font-size: clamp(38px, 8vw, 64px);
  margin: var(--s3) 0 var(--s3);
}
.hero h1 .hl { color: var(--blue); }
.hero p.lede { font-size: 19px; color: var(--muted); max-width: 620px; margin: 0 auto var(--s4); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; }

.chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: var(--s4); }
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255, 255, 255, .86); border: 1px solid var(--line);
  padding: 10px 19px; border-radius: var(--pill);
  font-size: 15px; font-weight: 600; box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.chip:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.chip svg { width: 18px; height: 18px; color: var(--blue-deep); flex: none; }

/* Cards / grids ---------------------------------------------------------- */
.grid { display: grid; gap: var(--s3); }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-xl); padding: var(--s4) var(--s3);
  box-shadow: var(--shadow-sm);
}

.moment {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.moment:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.moment__ph {
  aspect-ratio: 4 / 3;
  background: linear-gradient(140deg, var(--sky) 0%, #eaf5e8 48%, var(--butter) 100%);
  display: grid; place-items: center; color: var(--blue-deep);
}
.moment__ph svg { width: 34px; height: 34px; opacity: .5; }
.moment__cap { padding: 14px var(--s2); font-size: 14px; color: var(--muted); font-weight: 600; }

/* Sitter card ------------------------------------------------------------ */
.sitter { display: flex; flex-direction: column; gap: var(--s2); transition: transform .28s var(--ease), box-shadow .28s var(--ease); }
.sitter:hover { transform: translateY(-5px); box-shadow: var(--shadow); }

/* header block is centred so the face leads, body stays left-aligned */
.sitter__top { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }

/* Photo slot.
   Shows the initial by default. Drop in an <img> and it covers the placeholder,
   no other change needed. Square images look best, they get cropped to a circle. */
.sitter__photo {
  position: relative; width: 116px; height: 116px; flex: none;
  border-radius: 50%; overflow: hidden;
  background: linear-gradient(140deg, var(--sky) 0%, #eaf2fb 55%, var(--butter) 100%);
  display: grid; place-items: center;
  border: 4px solid var(--white);
  box-shadow: 0 8px 24px rgba(47, 111, 176, .22), 0 0 0 1px var(--line);
  transition: transform .3s var(--ease);
}
.sitter:hover .sitter__photo { transform: scale(1.04); }
.sitter__photo::before {
  content: attr(data-initial);
  font-family: Fredoka, sans-serif; font-size: 44px; font-weight: 600;
  color: var(--blue-deep); opacity: .8; line-height: 1;
}
.sitter__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.sitter__photo--empty::after {
  content: "Photo"; position: absolute; bottom: 10px; left: 0; right: 0;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--blue-deep); opacity: .5;
}

.sitter__name { font-size: 22px; }
.sitter__meta { font-size: 14px; color: var(--muted); font-weight: 600; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  background: var(--sky); color: #00325e; font-size: 13px; font-weight: 700;
  padding: 6px 14px; border-radius: var(--pill);
}
.avail {
  background: var(--sand); border-radius: var(--radius);
  padding: 13px var(--s2); font-size: 14px; color: var(--muted); font-weight: 600;
}
.avail strong { display: block; color: var(--navy); font-size: 12px; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 5px; }
/* keeps the Book buttons on a common baseline when bios are different lengths */
.sitter > .btn { margin-top: auto; }

/* A lone sitter would otherwise sit stranded in the left third of the row on
   desktop. Span the full row, then cap the width and centre it. This undoes
   itself the moment a second card is added, so no edit is needed later. */
.grid--3 > .sitter:only-child { grid-column: 1 / -1; max-width: 420px; margin: 0 auto; width: 100%; }

/* Trust banner ----------------------------------------------------------- */
.trust {
  display: flex; align-items: flex-start; gap: 15px;
  max-width: 800px; margin: 0 auto; text-align: left;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: var(--s3);
  font-size: 16px; font-weight: 600; line-height: 1.62; color: var(--muted);
}
.trust svg { width: 28px; height: 28px; flex: none; color: var(--blue-deep); margin-top: 1px; }
.trust strong { color: var(--navy); font-weight: 700; }

/* CTA band --------------------------------------------------------------- */
.band {
  background: linear-gradient(135deg, var(--blue-deep) 0%, #27598f 100%);
  color: var(--white); text-align: center; padding: var(--s5) 0; position: relative; overflow: hidden;
}
.band::after {
  content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%;
  background: rgba(255, 255, 255, .07); top: -230px; right: -140px; pointer-events: none;
}
.band .wrap { z-index: 1; }
/* sits inside the band so the untouched part of the curve shows the band
   gradient, not the page background */
.band { padding-bottom: calc(var(--s5) + 34px); }
.band__wave { position: absolute; bottom: -1px; left: 0; width: 100%; height: 58px; display: block; z-index: 1; }
.band__wave path { fill: var(--white); }
.band h2 { font-size: clamp(28px, 5vw, 40px); margin-bottom: var(--s2); }
.band p { font-size: 18px; opacity: .93; margin-bottom: var(--s3); }
.band .btn { background: var(--white); color: var(--blue-deep); box-shadow: 0 6px 20px rgba(0, 0, 0, .16); }
.band .btn:hover { background: var(--butter); color: #482300; }

/* Forms ------------------------------------------------------------------ */
.form { display: grid; gap: var(--s3); }
.field { display: grid; gap: 7px; }
.field label { font-weight: 700; font-size: 15px; }
.field .hint { font-weight: 600; font-size: 13px; color: var(--muted); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 16px; color: var(--navy);
  background: var(--white); border: 1.5px solid var(--line);
  border-radius: 14px; padding: 13px 15px; width: 100%;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #cdd1ea; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue-deep);
  box-shadow: 0 0 0 4px rgba(81, 148, 213, .17);
}
.row { display: grid; gap: var(--s3); }
.privacy { font-size: 14px; color: var(--muted); font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Bubble choices ---------------------------------------------------------
   Tappable pill answers built on the same shape as the trust chips, so the
   form feels like the rest of the site. The real radio/checkbox stays in the
   DOM (invisible but focusable) which keeps keyboard and screen readers
   working: Tab to the group, arrows to move through radios, Space to tick. */
.bubbles-field { border: 0; margin: 0; padding: 0; min-width: 0; }
.bubbles-field legend { font-weight: 700; font-size: 15px; padding: 0; }
.bubbles-field .hint { display: block; font-weight: 600; font-size: 13px; color: var(--muted); margin-top: 3px; }
.bubbles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

.bubble { position: relative; display: inline-flex; cursor: pointer; }
.bubble input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.bubble span {
  display: inline-flex; align-items: center;
  background: var(--white); border: 1.5px solid var(--line);
  color: var(--navy); font-size: 15px; font-weight: 600;
  padding: 11px 21px; border-radius: var(--pill);
  box-shadow: var(--shadow-xs);
  transition: background .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.bubble:hover span { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.bubble input:checked + span {
  background: var(--blue-deep); border-color: var(--blue-deep); color: var(--white);
  box-shadow: 0 4px 14px rgba(47, 111, 176, .28);
}
.bubble input:focus-visible + span { outline: 3px solid var(--blue-deep); outline-offset: 3px; }
.bubble:active span { transform: translateY(0); }

/* Booking wizard ---------------------------------------------------------
   One question per screen on book.html. Everything here is inert until
   site.js adds .wiz--on, so with JavaScript off every step is visible at once
   and the form still works as one long page. Never style .step to be hidden
   outside the .wiz--on scope or the no-JS fallback becomes a blank card. */
.wiz__head { display: grid; gap: 10px; }
.wiz__bar { height: 8px; border-radius: var(--pill); background: var(--line); overflow: hidden; }
.wiz__fill {
  height: 100%; width: 0; border-radius: var(--pill);
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue-deep) 100%);
  transition: width .45s var(--ease);
}
.wiz__count { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }

.step__q { font-size: clamp(21px, 3.2vw, 27px); }
.step__q:focus { outline: none; }
.step__hint { display: block; font-weight: 600; font-size: 14px; color: var(--muted); margin-top: 5px; }
.step .bubbles { margin-top: var(--s2); }
.step__err { display: none; margin-top: 14px; font-size: 14px; font-weight: 700; color: #b3261e; }
.step__err.on { display: block; }

.wiz--on .step { display: none; }
.wiz--on .step--on { display: block; animation: stepIn .34s var(--ease) both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.wiz__nav { display: flex; gap: 12px; align-items: stretch; }
.wiz__nav .btn { flex: 1; }
.wiz--on .wiz__nav #wizBack { flex: 0 0 auto; }

/* the browser will not paint a hidden button, but .btn sets display so the
   attribute needs backing up */
[hidden] { display: none !important; }

.info { display: grid; gap: var(--s3); }
.info__k { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 5px; }
.info__v { font-size: 18px; font-weight: 700; }
.info__v a { color: var(--blue-deep); text-decoration: none; }
.info__v a:hover { text-decoration: underline; }

.note {
  background: var(--butter); border-radius: var(--radius);
  padding: var(--s2); font-size: 14px; font-weight: 600; color: #482300;
}

/* Page head -------------------------------------------------------------- */
.phead { padding: var(--s5) 0 var(--s4); text-align: center; position: relative; }
.phead h1 { font-size: clamp(34px, 6.5vw, 54px); margin: var(--s2) 0 var(--s2); }
.phead p { color: var(--muted); font-size: 18px; max-width: 600px; margin: 0 auto; }

/* Thank you -------------------------------------------------------------- */
.ty { text-align: center; padding: var(--s6) 0; }
.ty__mark {
  width: 96px; height: 96px; border-radius: 50%; margin: 0 auto var(--s3);
  background: linear-gradient(140deg, var(--blue) 0%, var(--blue-deep) 100%);
  display: grid; place-items: center; color: var(--white);
  box-shadow: 0 12px 32px rgba(47, 111, 176, .32);
}
.ty__mark svg { width: 46px; height: 46px; }
.ty h1 { font-size: clamp(32px, 6vw, 48px); margin-bottom: var(--s2); }
.ty p { color: var(--muted); font-size: 18px; max-width: 520px; margin: 0 auto var(--s4); }

/* Footer ----------------------------------------------------------------- */
/* Footer is white (changed from navy at Duncan's request 2026-08-15). The
   wave above it — .band__wave and .wave--to-navy — was filled navy to match,
   so both were switched to white at the same time. Change one, change all
   three or a dark bar reappears above the footer. */
.ftr {
  position: relative; overflow: hidden;
  background: var(--white); color: var(--muted);
  padding: var(--s5) 0 var(--s3);
}
/* soft glow bleeding down from the band above, keeps the join from looking like a seam */
.ftr::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(1100px, 110%); height: 260px; pointer-events: none;
  background: radial-gradient(ellipse at top, rgba(81, 148, 213, .10), transparent 68%);
}
.ftr .wrap { position: relative; z-index: 1; }
.ftr__grid { display: grid; gap: var(--s4); }
.ftr__brand { max-width: 340px; }
/* no filter here on purpose: the logo keeps its own colours on the white */
.ftr img { height: 42px; width: auto; margin-bottom: var(--s2); }
.ftr__brand p { line-height: 1.7; }
.ftr h3 {
  font-family: Quicksand, sans-serif;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy); font-weight: 700; margin-bottom: var(--s2);
}
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ftr a {
  display: inline-block; color: var(--muted); text-decoration: none;
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.ftr a:hover { color: var(--blue-deep); transform: translateX(3px); }
.ftr__bar {
  margin-top: var(--s5); padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: 14px; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3);
  align-items: center; justify-content: center; text-align: center;
}

/* Responsive ------------------------------------------------------------- */

/* Phones -----------------------------------------------------------------
   Three fixes for small screens:
   1. Slimmer gutters. The page padding and the card padding were stacking up
      and stealing about 50px a side, which squeezed text into narrow columns.
   2. Calmer vertical rhythm, so there is less scrolling between things.
   3. The bubble answers snap to a tidy two-column grid instead of wrapping
      into ragged rows of different widths. */
@media (max-width: 639px) {
  .wrap { padding: 0 18px; }
  .card { padding: 26px 20px; }
  .sec { padding: 44px 0; }
  .phead { padding: 44px 0 28px; }
  .hero { padding: 44px 0 36px; }
  .phead h1 { margin: 12px 0 12px; }

  /* two pills of different widths look untidy stacked, so go full width */
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; }

  .bubbles { display: grid; grid-template-columns: 1fr 1fr; }
  .bubble span { width: 100%; justify-content: center; text-align: center; padding: 13px 12px; }
  /* an odd one out fills the row rather than leaving a gap beside it */
  .bubble:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .form { gap: 20px; }

  /* Side by side, "Request childcare" wrapped to two lines inside a half-width
     button and made the last step's button row taller than every other step's.
     Same answer as .hero__cta above: stack and go full width. column-reverse
     keeps the primary action on top, under the thumb, with Back beneath it.
     flex: 1 is set on these buttons for the side-by-side row. Once the row
     becomes a column that same rule starts dividing up HEIGHT instead, which
     left Back taller than the button above it. Hence flex: 0 0 auto — each
     button back to its own natural height. */
  .wiz__nav { flex-direction: column-reverse; }
  .wiz__nav .btn,
  .wiz--on .wiz__nav #wizBack { flex: 0 0 auto; width: 100%; }

  .trust { padding: 22px 20px; gap: 12px; }
  .trust svg { width: 24px; height: 24px; }

  .band { padding: 48px 0 calc(48px + 34px); }
  .ftr { padding: 48px 0 24px; }
  .ftr__grid { gap: 32px; }
  .ftr__bar { margin-top: 36px; }
}

/* Very small phones only (iPhone SE and similar). Below about 328px wide the
   longest answer, "Within months", no longer fits on one line and the rows go
   lumpy. Kept at 359px so normal 360px and wider phones keep the full size. */
@media (max-width: 359px) {
  .bubble span { font-size: 14px; padding: 13px 8px; }
}

@media (min-width: 640px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .row--2 { grid-template-columns: 1fr 1fr; }
  .row--3 { grid-template-columns: repeat(3, 1fr); }
  .ftr__grid { grid-template-columns: 2fr 1fr 1fr; }
  .ftr__bar { justify-content: space-between; text-align: left; }
  .card { padding: var(--s4); }
}

@media (min-width: 900px) {
  .sec { padding: var(--s6) 0; }
  .hero { padding: var(--s6) 0 var(--s5); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .nav { display: flex; align-items: center; gap: 4px; margin-right: var(--s2); }
  .hdr__in > .btn { display: inline-flex; }
  .burger { display: none; }
  .drawer { display: none !important; }
  .info { grid-template-columns: 1fr 1fr; }
  .wave { height: 72px; }
}

/* On very wide monitors the wave curve stretches out and reads as a flat line.
   Taller waves keep the same shape visible at those widths. */
@media (min-width: 1800px) {
  .wave { height: 104px; }
  .band__wave { height: 88px; }
  .band { padding-bottom: calc(var(--s5) + 60px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .rv { opacity: 1 !important; transform: none !important; }
}