/* =========================================================
   One Stop Family Support Services — v4 "Side by Side"
   ========================================================= */

@font-face {
  font-family: "Familjen Fallback";
  src: local("Arial");
  size-adjust: 97%;
  ascent-override: 92%;
}

:root {
  /* neutrals */
  --ink: #1B1838;
  --body: #46435A;
  --muted: #6B6880;
  --line: #E1DEEA;
  --white: #FFFFFF;
  --stone: #F6F5FA;

  /* brand — taken from the One Stop logo */
  --magenta: #E6007E;
  --magenta-dk: #C4006B;
  --damson: #36298C;      /* logo indigo: dark sections, secondary fills */
  --damson-900: #211A5C;  /* footer */
  --damson-300: #CFCAF0;  /* light text on indigo */
  --biro: #D4006F;        /* pen marks + focus: logo magenta, AA on white */
  --rosehip: #F57AB8;     /* logo pink, accents on dark */
  --quince: #FDBA12;      /* logo yellow */
  --logo-blue: #2C6FC0;
  --logo-green: #5DAE3E;
  --logo-orange: #F28C12;
  --logo-red: #E3201B;

  /* rooms — soft tints of each logo figure */
  --room-advocacy: #FCE1EF;
  --room-benefits: #DDEBFA;
  --room-housing: #E5F3D6;
  --room-appointments: #FFEFC9;
  --room-grants: #E7E4F7;

  --rule-tint: rgba(28, 26, 34, .12);
  --rule-dark: rgba(255, 255, 255, .18);
  --field-border: #B9B4AC;
  --error: #B3261E;

  /* type */
  --font: "Familjen Grotesk", "Familjen Fallback", "Helvetica Neue", Arial, system-ui, sans-serif;
  --step--1: clamp(0.875rem, 0.854rem + 0.093vw, 0.9375rem);
  --step-0: clamp(1.0625rem, 1.021rem + 0.185vw, 1.1875rem);
  --step-1: clamp(1.25rem, 1.167rem + 0.37vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.292rem + 0.926vw, 2.125rem);
  --step-3: clamp(2rem, 1.583rem + 1.852vw, 3.25rem);
  --step-4: clamp(2.5rem, 1.75rem + 3.333vw, 4.75rem);
  --step-5: clamp(2.875rem, 1.5rem + 6.111vw, 7rem);

  /* space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px;
  --section: clamp(96px, 11vw, 176px);

  /* grid */
  --max: 1360px;
  --gutter: clamp(16px, 3.6vw, 56px);
  --gap: clamp(16px, 2vw, 32px);
  --bleed: max(var(--gutter), calc((100vw - var(--max)) / 2));

  /* shadow */
  --shadow-sheet: 0 1px 1px rgba(28,26,34,.04), 0 24px 60px -30px rgba(28,26,34,.28);
  --shadow-header: 0 1px 0 var(--line);

  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ease-soft: cubic-bezier(.22, 1, .36, 1);
  --dur-1: 200ms; --dur-2: 400ms; --dur-3: 700ms; --dur-4: 1000ms; --dur-5: 1400ms;

  --header-h: 88px;
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main { display: block; overflow-x: clip; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
legend { padding: 0; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
h1, h2, h3 { color: var(--ink); text-wrap: balance; font-weight: 600; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }
[tabindex="-1"]:focus { outline: none; }

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

:focus-visible { outline: 2.5px solid var(--biro); outline-offset: 3px; border-radius: 4px; }
.childcare :focus-visible, .footer :focus-visible, .mobile-menu :focus-visible,
.local :focus-visible, .site-header.menu-open .menu-toggle:focus-visible,
.site-header.menu-open .wordmark:focus-visible { outline-color: var(--quince); }

.ph { filter: saturate(.94) contrast(1.03); }

/* ---------- layout ---------- */
.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--gap); }
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .grid > * { grid-column: 1 / -1; }
}

/* ---------- skip link ---------- */
.skip {
  position: fixed; left: var(--gutter); top: 12px; z-index: 200;
  background: var(--damson); color: #fff; font-weight: 600; text-decoration: none;
  padding: 12px 20px; border-radius: 8px;
  transform: translateY(-200%);
}
.skip:focus { transform: none; outline-color: var(--quince); }

/* =========================================================
   Pen marks
   ========================================================= */
.pen { overflow: visible; color: var(--biro); pointer-events: none; }
.pen path {
  fill: none; stroke: currentColor; stroke-width: 2.25;
  stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
/* hidden start state for marks that draw themselves (only when motion is on;
   JS reveals them with the dash already set to 0%) */
html.motion-on .pen--underline path,
html.motion-on .ticks .pen path,
html.motion-on .cred .pen path,
html.motion-on .step .pen path { visibility: hidden; }

/* CSS-driven marks (nav hover, chip tick) use pathLength="1"; Chrome applies dashes in
   screen space under non-scaling-stroke, so these two use a compensated stroke instead */
.pen--u path { vector-effect: none; stroke-width: 6.7; }
.pen--chip path { vector-effect: none; stroke-width: 3.9; }

/* =========================================================
   Buttons & links
   ========================================================= */
.btn {
  --fill: var(--damson-900);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  height: 56px; padding: 0 28px; border: 0; border-radius: 8px;
  font-size: 17px; font-weight: 600; letter-spacing: -0.005em; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: scale 120ms ease;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--fill); transform: translateY(101%);
  transition: transform 450ms var(--ease-inout);
}
.btn__label { display: block; height: 1.25em; line-height: 1.25; overflow: hidden; }
.btn__label > span { display: block; transition: transform 450ms var(--ease-inout); }
@media (hover: hover) {
  .btn:hover::before { transform: translateY(0); }
  .btn:hover .btn__label > span { transform: translateY(-100%); }
}
.btn:active { scale: .98; }
.btn--sm { height: 46px; padding: 0 20px; }
.btn--block { width: 100%; }
.btn--primary { --fill: var(--damson); background: var(--magenta-dk); color: #fff; }
.btn--inverse { --fill: var(--room-advocacy); background: #fff; color: var(--damson); }
.btn--secondary { --fill: var(--ink); background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
@media (hover: hover) { .btn--secondary:hover { color: #fff; } }

/* standalone text links */
.tlink {
  display: inline-block;
  font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--ink);
  text-decoration: none; padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1.5px;
}
.tlink--light { color: #fff; }
@keyframes redraw {
  0%     { background-position: 100% 100%; background-size: 100% var(--uh, 1.5px); }
  50%    { background-position: 100% 100%; background-size: 0 var(--uh, 1.5px); }
  50.01% { background-position: 0 100%;    background-size: 0 var(--uh, 1.5px); }
  100%   { background-position: 0 100%;    background-size: 100% var(--uh, 1.5px); }
}
@media (hover: hover) {
  .tlink:hover, .biglink:hover { animation: redraw 600ms var(--ease-inout); }
}

/* inline body links */
p a, .services__close a {
  color: var(--biro);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
  transition: color 200ms, text-decoration-thickness 200ms;
}
p a:hover, .services__close a:hover { color: var(--damson); text-decoration-thickness: 2px; }

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--header-h);
  transition: height 300ms var(--ease-soft), background-color 300ms var(--ease-soft),
              box-shadow 300ms var(--ease-soft), transform 400ms var(--ease-out);
}
.site-header.is-scrolled { --header-h: 72px; background: #fff; box-shadow: var(--shadow-header); }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header__inner {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
}

.wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); line-height: 1; }
.wordmark__mark { width: 46px; height: auto; flex: none; overflow: visible; }
.wordmark__text { display: flex; flex-direction: column; }
.wordmark__name { color: #D4006F; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.wordmark__sub { margin-top: 5px; font-size: 12.5px; font-weight: 500; color: var(--body); letter-spacing: 0; }

.nav { display: none; margin-left: auto; }
.nav__list { display: flex; gap: 32px; }
.nav__list a {
  position: relative; display: inline-block; padding: 8px 0;
  font-size: 16px; font-weight: 500; color: var(--ink); text-decoration: none; line-height: 1.3;
}
.nav__list .pen--u {
  position: absolute; left: -2%; width: 104%; bottom: 0; height: 0.42em;
}
.nav__list .pen--u path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 400ms var(--ease-inout);
}
.nav__list a:hover .pen--u path,
.nav__list a:focus-visible .pen--u path,
.nav__list a[aria-current="true"] .pen--u path { stroke-dashoffset: 0; }
.nav__list a:hover .pen--u path + path,
.nav__list a:focus-visible .pen--u path + path,
.nav__list a[aria-current="true"] .pen--u path + path { transition-delay: 100ms; }
/* leaving: the line exits to the right, then silently resets */
.nav__list a.is-leaving .pen--u path { stroke-dashoffset: -1; }
.nav__list a.is-reset .pen--u path { transition: none; }

.site-header__actions { display: flex; align-items: center; gap: var(--s-5); }
.site-header__phone {
  display: none;
  font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.site-header__actions .btn { display: none; }

.menu-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 44px; min-height: 44px; padding: 0 14px;
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink); border-radius: 8px;
  font-size: 16px; font-weight: 600; cursor: pointer;
}
.menu-toggle__lines { position: relative; width: 18px; height: 10px; }
.menu-toggle__lines span {
  position: absolute; left: 0; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform 300ms var(--ease-inout), top 300ms var(--ease-inout);
}
.menu-toggle__lines span:first-child { top: 1px; }
.menu-toggle__lines span:last-child { top: 7.5px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__lines span:first-child { top: 4.25px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__lines span:last-child { top: 4.25px; transform: rotate(-45deg); }
html:not(.js) .menu-toggle { display: none; }

/* header while menu is open */
.site-header.menu-open { background: transparent; box-shadow: none; transform: none; }
.site-header.menu-open .wordmark,
.site-header.menu-open .menu-toggle { color: #fff; border-color: #fff; }
.site-header.menu-open .wordmark__sub { color: var(--damson-300); }
.site-header.menu-open .wordmark .pen { color: var(--rosehip); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 1;
  background: var(--damson-900); color: #fff;
  overflow-y: auto; overscroll-behavior: contain;
}
.mobile-menu__inner {
  min-height: 100%;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-7);
  padding-top: calc(88px + var(--s-6)); padding-bottom: var(--s-6);
}
.mobile-menu__list a {
  display: block; overflow: hidden;
  padding: 6px 0;
  font-size: var(--step-4); font-weight: 600; line-height: 1.1; letter-spacing: -0.035em;
  color: #fff; text-decoration: none;
}
.mobile-menu__list a > span { display: block; }
.mobile-menu__foot { display: flex; flex-direction: column; gap: var(--s-2); }
.mobile-menu__foot > a:not(.btn) {
  font-size: var(--step-1); color: var(--damson-300); text-decoration: none;
  padding: 4px 0; font-variant-numeric: tabular-nums;
}
.mobile-menu__foot .btn { margin-top: var(--s-4); }

@media (min-width: 1024px) {
  .nav { display: block; margin-right: var(--s-6); }
  .site-header__actions .btn { display: inline-flex; }
  .menu-toggle, .mobile-menu { display: none !important; }
}
@media (min-width: 1280px) {
  .site-header__phone { display: inline-block; }
}

/* =========================================================
   1 Hero
   ========================================================= */
.hero { padding-top: calc(88px + clamp(48px, 7vw, 112px)); }
.hero__title {
  font-size: var(--step-5); font-weight: 600; line-height: .98; letter-spacing: -0.045em;
}
.hero__foot { margin-top: var(--s-7); }
.hero__lede { font-size: var(--step-1); line-height: 1.5; letter-spacing: -0.005em; color: var(--body); max-width: 34ch; }
.hero__cta {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--s-4);
  margin-top: var(--s-6);
}
.hero__cta .tlink { align-self: center; }
.hero__note { margin-top: var(--s-6); font-size: var(--step--1); font-weight: 500; line-height: 1.45; color: var(--muted); max-width: 30ch; }

.hero__figure { margin-top: var(--s-8); }
.hero__frame {
  position: relative; overflow: hidden;
  margin-inline: var(--gutter);
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  background: var(--stone);
}
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 40%; }
.hero__caption {
  margin-top: var(--s-3);
  font-size: var(--step--1); font-weight: 500; line-height: 1.45; color: var(--muted);
}

@media (min-width: 480px) {
  .hero__cta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }
}
@media (min-width: 768px) {
  .hero__title { grid-column: 1 / 12; max-width: 14ch; }
  .hero__frame { aspect-ratio: 16 / 10; }
  .hero__img { object-position: 38% 32%; }
}
@media (min-width: 1024px) {
  .hero__title { max-width: none; width: calc(11 / 12 * 100%); }
  .hero__foot {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
    align-items: end;
  }
  .hero__intro { grid-column: 1 / 7; }
  .hero__note { grid-column: 10 / 13; margin: 0; }
  .hero__frame {
    --edge: max(var(--gutter), calc((100% - var(--max)) / 2));
    margin-inline: 0; aspect-ratio: auto; border-radius: 0;
    height: min(62vh, 44vw);
    clip-path: inset(0 var(--edge) 0 var(--edge) round 6px);
    background: none;
  }
  .hero__img { height: 115%; }
}

/* load-sequence start states (JS + motion only) */
html.motion-on .site-header { opacity: 0; }
html.motion-on .hero__title { visibility: hidden; }
html.motion-on [data-hero-in],
html.motion-on .hero__caption { opacity: 0; }

/* =========================================================
   2 Statement
   ========================================================= */
.statement { background: var(--stone); padding-block: var(--section); }
.statement__text {
  font-size: var(--step-3); font-weight: 500; line-height: 1.12; letter-spacing: -0.025em;
  color: var(--ink); text-wrap: pretty;
}
.pen-anchor { position: relative; white-space: nowrap; }
.pen--underline {
  position: absolute; left: -2%; width: 104%; bottom: -0.18em; height: 0.32em;
}
@media (min-width: 480px) {
  .pen-phrase { position: relative; white-space: nowrap; }
  .pen-anchor { position: static; }
}
.statement__small {
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid var(--line); max-width: 62ch;
}
.statement__small--b { margin-top: var(--s-5); }
@media (min-width: 768px) {
  .statement__text { grid-column: 1 / 12; }
  .statement__small { margin-top: var(--s-8); }
  .statement__small--a { grid-column: 1 / 7; }
  .statement__small--b { grid-column: 7 / 13; }
}
@media (min-width: 1024px) {
  .statement__text { grid-column: 2 / 12; }
  .statement__small--a { grid-column: 6 / 9; }
  .statement__small--b { grid-column: 9 / 12; }
}

/* =========================================================
   3 Services rooms
   ========================================================= */
.services { background: var(--white); padding-top: var(--section); }
.services__title { font-size: var(--step-4); line-height: 1.02; letter-spacing: -0.035em; }
.services__intro { margin-top: var(--s-5); font-size: var(--step-1); line-height: 1.5; max-width: 34ch; }
.services__head { margin-bottom: var(--s-8); }

.frame { display: none; }

.room {
  margin-inline: calc(-1 * var(--gutter));
  padding: var(--s-9) var(--gutter);
  background: var(--room);
}
.room__ph { overflow: hidden; aspect-ratio: 4 / 5; }
.room__ph img, .frame__img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.room__title { margin-top: var(--s-6); font-size: var(--step-4); line-height: 1.02; letter-spacing: -0.035em; }
.room__text { margin-top: var(--s-5); max-width: 62ch; }

.ticks { margin-top: var(--s-6); }
.ticks li, .promise, .route, .cred { position: relative; --rule: 1; }
.ticks li::before, .promise::before, .route::before, .cred::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--rule-tint);
  transform: scaleX(var(--rule)); transform-origin: left;
}
.ticks li {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4) 0;
  font-size: var(--step-1); line-height: 1.4; letter-spacing: -0.005em; color: var(--ink);
}
.ticks li:last-child { box-shadow: inset 0 -1px 0 var(--rule-tint); }
.pen--tick { flex: none; width: 1.1em; height: 1.1em; margin-top: .1em; }
.room .tlink { margin-top: var(--s-6); }

.services__close { padding-block: var(--s-8) var(--section); font-size: var(--step-1); line-height: 1.5; max-width: 34ch; }

@media (min-width: 768px) {
  .services__title { grid-column: 1 / 9; }
  .services__intro { grid-column: 1 / 9; }
  .room__ph { aspect-ratio: 16 / 10; }
}

@media (min-width: 1024px) {
  .services { padding-bottom: var(--section); }
  .services__title { grid-column: 1 / 8; }
  .services__intro { grid-column: 9 / 13; margin-top: 0; align-self: end; }
  .services__head { margin-bottom: var(--s-8); }

  .frame {
    display: flex; flex-direction: column;
    grid-column: 1 / 6;
    position: sticky; top: 14vh; height: 72vh; align-self: start;
    z-index: 1;
  }
  .frame__stack { position: relative; flex: 1; overflow: hidden; background: rgba(28,26,34,.06); }
  .frame__img { position: absolute; inset: 0; opacity: 0; z-index: 1; }
  .frame__img.is-active { opacity: 1; z-index: 2; }
  .frame__img.is-top { opacity: 1; z-index: 3; }
  .frame__caption {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-top: var(--s-3);
    font-size: var(--step--1); font-weight: 600; line-height: 1.45; color: var(--ink);
  }
  .frame__mask { position: relative; display: block; overflow: hidden; height: 1.45em; }
  .frame__name, .frame__count { display: block; }
  .frame__count { font-weight: 500; color: var(--body); font-variant-numeric: tabular-nums; }

  .rooms { grid-column: 7 / 13; }
  .room {
    margin: 0; padding: var(--s-8) 0;
    min-height: 88vh;
    display: flex; align-items: center;
  }
  .room__ph { display: none; }
  .room__title { margin-top: 0; }
  .services__close { padding: 0; }

  /* no-JS: paint each room's colour full width behind its block */
  html:not(.js) .room { box-shadow: 0 0 0 100vmax var(--room); clip-path: inset(0 -100vmax); }
  html.js .room { background: transparent; }
}

/* =========================================================
   4 Childcare
   ========================================================= */
.childcare { background: var(--damson); color: #fff; padding-block: var(--section); }
.childcare__title { color: #fff; font-size: var(--step-4); line-height: 1.02; letter-spacing: -0.035em; }
.childcare__text p { margin-top: var(--s-5); max-width: 62ch; color: #fff; }
.childcare__ph {
  margin: var(--s-7) calc(-1 * var(--gutter)) 0;
  aspect-ratio: 4 / 3; overflow: hidden;
}
.childcare__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; }

.creds { margin-top: var(--s-8); }
.cred { padding: var(--s-6) 0; }
.cred::before { background: var(--rule-dark); }
.cred:last-child { box-shadow: inset 0 -1px 0 var(--rule-dark); }
.cred__title {
  display: flex; align-items: center; gap: var(--s-3);
  color: #fff; font-size: var(--step-2); line-height: 1.2; letter-spacing: -0.015em;
}
.cred__title .pen { color: var(--rosehip); width: 1em; height: 1em; margin: 0; }
.cred__mask { display: block; overflow: hidden; padding-bottom: .08em; }
.cred__mask > span { display: block; }
.cred p { margin-top: var(--s-3); color: var(--damson-300); max-width: 40ch; }
.childcare__cta { margin-top: var(--s-7); }
.childcare__cta .btn { width: 100%; }

@media (min-width: 768px) {
  .childcare__cta .btn { width: auto; }
}
@media (min-width: 1024px) {
  .childcare__top { align-items: center; }
  .childcare__text { grid-column: 1 / 7; padding-right: var(--s-6); }
  .childcare__ph {
    grid-column: 7 / 13; margin: 0 calc(-1 * var(--bleed)) 0 0;
    aspect-ratio: 5 / 4;
  }
  .creds {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap);
    margin-top: var(--s-9);
    position: relative;
  }
  .creds::before, .creds::after {
    content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--rule-dark);
    transform: scaleX(var(--rule, 1)); transform-origin: left;
  }
  .creds::before { top: 0; }
  .creds::after { bottom: 0; }
  .cred::before { display: none; }
  .cred:last-child { box-shadow: none; }
}

/* =========================================================
   5 How it works
   ========================================================= */
.how { padding-block: var(--section); background: var(--white); }
.how__title { font-size: var(--step-4); line-height: 1.02; letter-spacing: -0.035em; }
.how__sub { margin-top: var(--s-5); font-size: var(--step-1); line-height: 1.5; max-width: 34ch; }
.steps { position: relative; margin-top: var(--s-8); --num-w: 56px; }
.step {
  position: relative;
  display: grid; grid-template-columns: var(--num-w) minmax(0, 1fr); column-gap: var(--s-5);
}
.step + .step { margin-top: var(--s-8); }
.step__num {
  position: relative; z-index: 1;
  display: flex; justify-content: center; align-items: center;
  height: 1.3em;
  font-size: var(--step-3); font-weight: 500; line-height: 1; letter-spacing: -0.025em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.step__num::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 1.15em; height: 1.05em; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--white); z-index: -1;
}
.step__mask { display: block; overflow: hidden; line-height: 1.1; }
.step__mask > span { display: block; }
.step__num .pen {
  position: absolute; left: 50%; top: 50%;
  width: 1.6em; height: 1.34em; transform: translate(-50%, -48%); max-width: none;
}
.step__title { font-size: var(--step-2); line-height: 1.2; letter-spacing: -0.015em; padding-top: .2em; }
.step__body p { margin-top: var(--s-3); max-width: 46ch; }
.joiner {
  position: absolute; z-index: 0; top: 0; left: 0;
  width: 16px; overflow: visible; color: var(--biro); pointer-events: none;
}

@media (min-width: 768px) {
  .steps { --num-w: 88px; }
  .step + .step { margin-top: var(--s-9); }
}
@media (min-width: 1024px) {
  .how__head { grid-column: 1 / 6; position: sticky; top: 18vh; align-self: start; }
  .steps { grid-column: 7 / 13; margin-top: 0; }
}

/* =========================================================
   6 Promises + marquee
   ========================================================= */
.promises { background: var(--stone); padding: var(--s-8) 0 var(--section); }
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding: var(--s-4) 0;
  font-size: 40px; font-weight: 500; line-height: 1.15; letter-spacing: -0.03em; color: var(--ink);
}
.marquee__inner { display: flex; width: max-content; animation: marquee 45s linear infinite; }
.marquee:hover .marquee__inner, .marquee:focus-within .marquee__inner { animation-play-state: paused; }
.marquee__track { display: flex; align-items: center; gap: var(--s-6); padding-right: var(--s-6); flex: none; }
.marquee__track p { white-space: nowrap; }
.marquee__sep { width: 16px; height: 14px; flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

html.motion-paused .marquee__inner { animation: none; width: auto; justify-content: center; }
html.motion-paused .marquee__track { flex-wrap: wrap; justify-content: center; gap: var(--s-3) var(--s-5); padding: 0 var(--gutter); flex: 1; }
html.motion-paused .marquee__track--dup { display: none; }
@media (prefers-reduced-motion: reduce) {
  .marquee__inner { animation: none; width: auto; justify-content: center; }
  .marquee__track { flex-wrap: wrap; justify-content: center; gap: var(--s-3) var(--s-5); padding: 0 var(--gutter); flex: 1; }
  .marquee__track--dup { display: none; }
}
html.motion-paused .marquee .marquee__track { font-size: var(--step-3); }
html.motion-paused .marquee__track > .marquee__sep:last-child { display: none; }
@media (prefers-reduced-motion: reduce) {
  .marquee .marquee__track { font-size: var(--step-3); }
  .marquee__track > .marquee__sep:last-child { display: none; }
}

.promises__grid { margin-top: var(--section); row-gap: var(--s-8); }
.promises__title { font-size: var(--step-4); line-height: 1.02; letter-spacing: -0.035em; }
.promise-list { margin-top: var(--s-8); }
.promise { padding: var(--s-5) 0; }
.promise::before { background: var(--line); }
.promise:last-child { box-shadow: inset 0 -1px 0 var(--line); }
.promise h3 { font-size: var(--step-2); line-height: 1.2; letter-spacing: -0.015em; }
.promise p { margin-top: var(--s-2); max-width: 62ch; }

.promises__ph { overflow: hidden; }
.promises__ph img { width: 100%; height: 100%; object-fit: cover; }
.promises__ph--a { aspect-ratio: 3 / 4; }
.promises__ph--a img { object-position: 96% 40%; }
.promises__ph--b { aspect-ratio: 4 / 3; align-self: start; }
.promises__ph--b img { object-position: 45% 40%; }

/* mobile: photos side by side 60/40 */
@media (max-width: 767px) {
  .promises__grid { grid-template-columns: 3fr 2fr; }
  .promises__text { grid-column: 1 / -1; }
  .promises__ph--a { grid-column: 1; }
  .promises__ph--b { grid-column: 2; }
}
@media (min-width: 768px) {
  .marquee { font-size: var(--step-4); }
  .marquee__sep { width: 22px; height: 19px; }
  .promises__text { grid-column: 1 / 13; }
  .promises__ph--a { grid-column: 1 / 8; }
  .promises__ph--b { grid-column: 8 / 13; }
}
@media (min-width: 1024px) {
  .promises__grid { row-gap: 0; }
  .promises__text { grid-column: 1 / 7; grid-row: 1; }
  .promises__ph--a { grid-column: 7 / 10; grid-row: 1; align-self: start; margin-top: 96px; }
  .promises__ph--b { grid-column: 10 / 13; grid-row: 1; }
}

/* =========================================================
   7 Local band
   ========================================================= */
.local { position: relative; overflow: hidden; height: max(125vw, 600px); color: #fff; isolation: isolate; }
.local__media { position: absolute; inset: 0; z-index: -2; }
.local__media picture, .local__media img { width: 100%; height: 100%; }
.local__media img { object-fit: cover; object-position: 40% 60%; }
.local::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(28,26,34,.74), rgba(28,26,34,.5) 55%, rgba(28,26,34,.18) 100%);
}
.local__content {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding-bottom: var(--s-8);
  text-align: center;
}
.local__title { margin-inline: auto; max-width: 18ch; color: #fff; font-size: var(--step-4); line-height: 1.02; letter-spacing: -0.035em; text-shadow: 0 1px 24px rgba(28,26,34,.25); }
.local__content p { margin: var(--s-4) auto 0; color: #fff; max-width: 40ch; }
.local__content .tlink { margin-top: var(--s-5); }
@media (min-width: 768px) {
  .local { aspect-ratio: auto; height: min(88vh, 56vw); min-height: 460px; }
  .local::after { background: linear-gradient(to top, rgba(28,26,34,.68), rgba(28,26,34,.42) 50%, rgba(28,26,34,0) 85%); }
  .local__content { padding-bottom: var(--s-9); }
}

/* =========================================================
   8 Contact
   ========================================================= */
.contact { background: var(--white); }
.contact__info { padding-block: var(--section) var(--s-8); }
.contact__title { font-size: var(--step-5); line-height: .98; letter-spacing: -0.045em; }
.contact__intro { margin-top: var(--s-5); font-size: var(--step-1); line-height: 1.5; max-width: 34ch; }
.routes { margin-top: var(--s-8); }
.route { padding: var(--s-4) 0 var(--s-5); }
.route::before { background: var(--line); }
.route dt { font-size: var(--step--1); font-weight: 600; line-height: 1.45; color: var(--muted); }
.route dd { margin-top: var(--s-1); }
.biglink {
  --uh: 2px;
  display: inline-block;
  font-size: var(--step-3); font-weight: 500; line-height: 1.15; letter-spacing: -0.025em;
  color: var(--ink); text-decoration: none; padding-bottom: 4px;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 2px;
  transition: translate 400ms var(--ease-out);
}
@media (hover: hover) { .biglink:hover { translate: 6px 0; } }
.biglink--phone { font-variant-numeric: tabular-nums; }
.biglink--email { font-size: var(--step-2); overflow-wrap: anywhere; }
.biglink--small { font-size: var(--step-1); letter-spacing: -0.01em; }
.route__plain { font-size: var(--step-1); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); padding-bottom: 4px; }

.contact__panel {
  background: var(--stone);
  margin-inline: calc(-1 * var(--gutter));
  padding: var(--s-6) var(--gutter) var(--s-9);
}
.sheet {
  background: #fff; border-radius: 4px; box-shadow: var(--shadow-sheet);
  padding: var(--s-6) var(--s-5);
}
.sheet__greeting { font-size: var(--step-2); font-style: italic; font-weight: 500; line-height: 1.2; color: var(--ink); }
.needs { margin-top: var(--s-6); }
.needs legend, .field label { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s-3); }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.chip span {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center;
  height: 44px; padding: 0 18px;
  border: 1.5px solid var(--field-border); border-radius: 999px;
  font-size: 16px; font-weight: 500; line-height: 1; color: var(--ink);
  cursor: pointer; user-select: none;
  transition: padding 300ms var(--ease-inout), color 300ms var(--ease-inout), border-color 200ms;
}
.chip span::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--damson); transform: scaleX(0); transform-origin: left;
  transition: transform 300ms var(--ease-inout);
}
.chip:hover span { border-color: var(--ink); }
.chip input:checked + span { color: #fff; border-color: var(--damson); padding-left: 40px; }
.chip input:checked + span::before { transform: scaleX(1); }
.chip input:focus-visible + span { outline: 2.5px solid var(--biro); outline-offset: 3px; }
.pen--chip { position: absolute; left: 16px; top: 50%; width: 14px; height: 14px; margin-top: -7px; color: var(--rosehip); }
.pen--chip path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 250ms var(--ease-inout); }
.chip input:checked + span .pen--chip path { stroke-dashoffset: 0; transition-delay: 120ms; }

.field { margin-top: var(--s-6); }
.field label { display: block; }
.field__opt { font-weight: 400; color: var(--muted); }
.field__hint { margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.field__error { margin-top: 2px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--error); }
.field input, .field textarea {
  display: block; width: 100%; margin-top: var(--s-2);
  height: 56px; padding: 0 16px;
  font-size: 18px; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--field-border); border-radius: 8px;
  transition: border-color 200ms, box-shadow 200ms;
}
.field textarea { height: auto; min-height: 140px; padding: 14px 16px; resize: vertical; line-height: 1.5; }
.field input:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus, .field textarea:focus { border-color: var(--biro); box-shadow: 0 0 0 3px rgba(212,0,111,.18); outline: none; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2.5px solid var(--biro); outline-offset: 3px; }
.field [aria-invalid="true"] { border-color: var(--error); }
.form__error {
  margin-top: var(--s-5);
  padding: var(--s-3) var(--s-4);
  border: 1.5px solid var(--error); border-radius: 8px;
  font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--error);
}
.sheet__signoff { margin-top: var(--s-6); font-size: var(--step-1); font-style: italic; font-weight: 500; line-height: 1.4; color: var(--body); }
.sheet__foot { margin-top: var(--s-5); display: flex; flex-direction: column; align-items: stretch; gap: var(--s-4); }
.sheet__note { font-size: var(--step--1); line-height: 1.45; color: var(--muted); }

@media (min-width: 480px) {
  .sheet__foot { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .sheet__note { flex: 1 1 200px; }
}
@media (min-width: 768px) {
  .contact__info { grid-column: 1 / 11; }
  .contact__panel { padding: var(--s-8) var(--gutter) var(--section); }
  .sheet { padding: var(--s-8); }
  .biglink--email { font-size: clamp(1.5rem, 3.4vw, 3.25rem); }
}
@media (min-width: 1024px) {
  .contact__grid { align-items: stretch; }
  .contact__info { grid-column: 1 / 7; padding-block: var(--section); padding-right: var(--s-6); }
  .contact__panel {
    grid-column: 7 / 13;
    margin: 0 calc(-1 * var(--bleed)) 0 0;
    padding: var(--section) var(--bleed) var(--section) clamp(24px, 3.4vw, 64px);
  }
  .biglink--email { font-size: clamp(1.5rem, 3.3vw, 3.25rem); }
}

@media (min-width: 1280px) {
  .routes { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); }
  .route { grid-column: 1 / -1; }
  .route--half { grid-column: auto; }
}

/* =========================================================
   Footer
   ========================================================= */
.footer { background: var(--damson-900); color: var(--damson-300); padding-top: var(--s-10); }
.footer__row { row-gap: var(--s-7); }
.footer__about { font-size: var(--step-1); line-height: 1.5; color: #fff; max-width: 30ch; }
.footer h2 { font-size: 15px; font-weight: 600; color: #fff; line-height: 1.4; }
.footer__col ul { margin-top: var(--s-3); }
.footer__col a, .footer__base a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 16px; color: var(--damson-300); text-decoration: none;
  transition: color 200ms;
}
.footer__col a:hover, .footer__base a:hover { color: #fff; text-decoration: underline; text-underline-offset: .22em; }
.footer__mark { margin-top: var(--s-9); }
.footer__mark-line { display: inline-block; background: #fff; border-radius: 24px; padding: clamp(18px, 3vw, 32px) clamp(22px, 4vw, 44px); }
.footer__logo { display: block; width: clamp(220px, 30vw, 340px); height: auto; }
.logo-type { font-family: Jost, "Century Gothic", Futura, sans-serif; fill: #E6007E; }
.footer__base {
  margin-top: var(--s-8);
  padding: var(--s-6) 0 var(--s-7);
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3);
  font-size: 14px; line-height: 1.5;
}
.footer__base a { font-size: 14px; }

@media (min-width: 768px) {
  .footer__about { grid-column: 1 / -1; }
  .footer__col--svc { grid-column: 1 / 5; }
  .footer__col--contact { grid-column: 5 / 9; }
  .footer__col--page { grid-column: 9 / 13; }
  .footer__col a { min-height: 0; padding: 4px 0; }
  .footer__base { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--s-6); }
  .footer__credits { flex: 1 1 380px; }
}
@media (min-width: 1280px) {
  .footer__about { grid-column: 1 / 6; }
  .footer__col--svc { grid-column: 7 / 9; }
  .footer__col--contact { grid-column: 9 / 11; }
  .footer__col--page { grid-column: 11 / 13; }
}


/* ---------- reduced motion: kill CSS transitions longer than 200ms ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .btn::before, .btn__label > span, .chip span, .chip span::before, .site-header,
  .nav__list .pen--u path, .pen--chip path, .biglink, .menu-toggle__lines span { transition-duration: 1ms !important; }
  .tlink:hover, .biglink:hover { animation: none !important; }
}

/* ---------- picture wrappers & parallax headroom ---------- */
.hero__frame picture, .room__ph picture { display: block; width: 100%; height: 100%; }
.childcare__ph, .promises__ph { position: relative; }
.childcare__ph picture, .promises__ph picture { position: absolute; inset: 0; display: block; }
.childcare__ph img { position: absolute; left: 0; top: -5%; width: 100%; height: 110%; }
.promises__ph img { position: absolute; left: 0; top: -7%; width: 100%; height: 114%; }

/* logo colour stripe */
.footer { position: relative; }
.footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: linear-gradient(90deg, var(--rosehip) 0 25%, var(--logo-blue) 25% 50%, var(--quince) 50% 75%, var(--logo-green) 75% 100%);
}