/* ============================================================
   Thrive Ability Services — design system

   Rebranded from the studio template (see dentalstudio/) exactly as
   that file documents: the layout system, spacing, radii and
   interaction patterns are unchanged; only the colour tokens and the
   two typefaces move. The same colour strategy applies — the brand
   navy doubles as the body ink so the page reads as one material,
   and the terracotta appears only where we want a click.

   Original template notes follow.
   ------------------------------------------------------------
   Meridian Dental Studio — design system

   A modern dental-practice marketing site. The visual language:
   a warm off-white page, deep forest green used as BOTH the body ink
   and the dark panel fill, a muted gold reserved for calls to action,
   a light-weight grotesque display face set very tight, and small
   4px radii rather than the pill-heavy look of SaaS sites.

   Typefaces are Clash Grotesk (Fontshare) and Kalam (Google Fonts),
   both free to use.

   All copy, naming, artwork and clinical content is original
   placeholder material written for this build.

   To rebrand: change PRACTICE in build.py and the tokens below.
   ============================================================ */

:root{
  /* Committed colour strategy: the forest carries the brand and doubles as
     ink, so the page reads as one material rather than a white page with a
     green accent bolted on. Gold appears only where we want a click. */
  --ink:      #12254E;   /* body text AND dark panel fill — client navy */
  --ink-80:   rgba(18,37,78,.80);
  --ink-60:   rgba(18,37,78,.66);  /* .62 measured 4.27:1 — below AA */
  --ink-40:   rgba(18,37,78,.42);
  --bg:       #F7F8FA;   /* page. Off-white with a blue-ward tint to sit under the navy */
  --cream:    #F6F2EC;   /* warm panel, used against the navy */
  --cream-2:  #EDE7DE;
  --gold:     #FB7B24;   /* CTA fill — the orange leaf in the logo. Navy ink on it clears 7:1;
                          white would only manage 2.7:1, so the ink stays dark. */
  --gold-2:   #FFC48A;   /* light orange: text on navy. CTA hover is set on .btn--gold. */
  --green:    #15697F;   /* secondary teal, links on light. Darkened from the brand #1E88A4 to clear 4.5:1 on --bg. */
  --white:    #FFFFFF;

  /* Leaf palette, straight off the logo. It appears as one repeating
     device: the six-colour rule (hero top, footer top, marked words),
     the numbered steps, and one leaf per service card and chip. */
  --leaf-1:   #EE2276;   /* magenta  */
  --leaf-2:   #8047A5;   /* purple   */
  --leaf-3:   #1E88A4;   /* teal     */
  --leaf-4:   #5C9826;   /* green    */
  --leaf-5:   #FB7B24;   /* orange   */
  --leaf-6:   #F2A20C;   /* yellow   */
  /* The same six, darkened until each clears 4.5:1 as text on the light
     surfaces and carries white text on a fill. */
  /* each darkened until it clears 4.5:1 on BOTH light grounds AND on the
     11% accent tint the service pages lay over them — the earlier values
     passed on plain cream and measured 4.2 on the tinted sections */
  --leaf-1-ink:#bd1b5e;
  --leaf-2-ink:#8047A5;
  --leaf-3-ink:#186d84;
  --leaf-4-ink:#45711c;
  --leaf-5-ink:#a24f17;
  --leaf-6-ink:#8e5f07;
  /* The six leaves as one hard-stop rule. This is the brand's horizontal
     line: it tops the hero and the footer and underlines the marked words. */
  --leaf-rule:linear-gradient(90deg,
    var(--leaf-1) 0,      var(--leaf-1) 16.667%,
    var(--leaf-2) 16.667%,var(--leaf-2) 33.333%,
    var(--leaf-3) 33.333%,var(--leaf-3) 50%,
    var(--leaf-4) 50%,    var(--leaf-4) 66.667%,
    var(--leaf-5) 66.667%,var(--leaf-5) 83.333%,
    var(--leaf-6) 83.333%,var(--leaf-6) 100%);
  --line:     rgba(18,37,78,.14);
  --line-2:   rgba(18,37,78,.26);
  --line-cream:rgba(246,242,236,.22);

  /* 4px is the signature. Cards, buttons and inputs all share it; only the
     nav pill and a couple of chips go round. */
  --r:        4px;
  --r-md:     8px;
  --r-pill:   9999px;

  --gutter:   clamp(20px, 3.6vw, 48px);
  --maxw:     1420px;
  --measure:  68ch;

  --ease:     cubic-bezier(.22,1,.36,1);
  --shadow:   0 1px 2px rgba(18,37,78,.05), 0 10px 30px rgba(18,37,78,.07);
  --shadow-lg:0 2px 6px rgba(18,37,78,.06), 0 28px 70px rgba(18,37,78,.13);
}

/* Faces are loaded by the <link> tags in build.py's HEAD, not here.
   Manrope and Open Sans are the client's own two faces; Manrope holds the
   light weight and tight tracking this system depends on at display sizes. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Manrope","Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:19px;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto;display:block}
picture{display:contents}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

/* ── type ─────────────────────────────────────────────────────
   Display sizes run at weight 300 with line-height 0.92. The light
   weight is the whole character of this face at size; at 400 the
   headings lose the airiness and start to look like a default. */
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.02em;line-height:1.02;text-wrap:balance}
.h-display{font-size:clamp(2.5rem,5.4vw,4.25rem);font-weight:300;line-height:.92;letter-spacing:-.022em}
.h-1{font-size:clamp(2rem,3.9vw,3.25rem);font-weight:300;line-height:.98;letter-spacing:-.02em}
.h-2{font-size:clamp(1.5rem,2.4vw,2.25rem);font-weight:400;letter-spacing:-.018em}
.h-3{font-size:clamp(1.125rem,1.5vw,1.375rem);font-weight:500;letter-spacing:-.01em;line-height:1.25}
p{margin:0}
.lead{font-size:clamp(1.0625rem,1.35vw,1.25rem);line-height:1.5;color:var(--ink-80);text-wrap:pretty}
.prose{max-width:var(--measure)}
.prose p{color:var(--ink-80);text-wrap:pretty}
.prose p + p{margin-top:1.05em}
.small{font-size:.875rem;color:var(--ink-60)}

/* The handwritten face is a single deliberate accent, used for one word or
   phrase per page at most. More than that and it stops being a signature. */
.script{font-family:"Manrope",sans-serif;font-weight:400;letter-spacing:0}

/* Underline flourish beneath a highlighted word in a heading. Drawn as a
   background so it sits under descenders instead of cutting through them. */
.marked{
  background-image:var(--leaf-rule);
  background-repeat:no-repeat;background-size:100% 3px;background-position:0 96%;
  padding-bottom:.08em;
}

.eyebrow{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-60);
}
.eyebrow--onDark{color:var(--gold-2)}
.eyebrow span[aria-hidden]{opacity:.5}

/* ── layout ──────────────────────────────────────────────── */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:960px}
.section{padding-block:clamp(56px,7.5vw,120px)}
.section--tight{padding-block:clamp(40px,5vw,72px)}
.section--cream{background:var(--cream)}
.section--forest{background:var(--ink);color:var(--cream)}
.section--forest .lead,.section--forest .prose p{color:rgba(246,242,236,.78)}
.section--forest .small{color:rgba(246,242,236,.6)}
.section__head{max-width:22ch;margin-bottom:clamp(28px,3.6vw,52px)}
.section__head--wide{max-width:34ch}
.section__head .lead{margin-top:16px;max-width:52ch}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}

/* ── buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 24px;border:1px solid transparent;border-radius:var(--r);
  font-size:.9375rem;font-weight:500;cursor:pointer;white-space:nowrap;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--gold:hover{background:#e56a16}
.btn--forest{background:var(--ink);color:var(--cream)}
.btn--forest:hover{background:#0d1b3a}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--onDark{background:transparent;color:var(--cream);border-color:var(--line-cream)}
.btn--onDark:hover{border-color:var(--cream)}
.btn--lg{min-height:58px;padding:0 28px;font-size:1rem}
/* The arrow sits in its own darker cell, like a stamped-on tab. */
.btn--tab{padding:0;overflow:hidden}
.btn--tab .btn__label{padding:0 22px}
.btn--tab .btn__tab{
  display:grid;place-items:center;width:52px;align-self:stretch;
  background:rgba(0,0,0,.16);
}
.btn--lg.btn--tab .btn__tab{width:58px}
.link-arrow{display:inline-flex;align-items:center;gap:8px;min-height:36px;
  font-size:.9375rem;font-weight:500;color:var(--green)}
.link-arrow svg{transition:transform .25s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}
.section--forest .link-arrow{color:var(--gold-2)}

/* ── header ───────────────────────────────────────────────
   The nav is a floating cream pill over whatever is beneath it, so the
   header has no background of its own and the hero runs to the top edge. */
.header{position:absolute;top:0;left:0;right:0;z-index:100}
.header.is-stuck{position:fixed;background:rgba(250,250,244,.92);backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--line)}
.header__inner{display:flex;align-items:center;gap:24px;padding-block:22px}
.header.is-stuck .header__inner{padding-block:12px}
.brand{display:inline-flex;align-items:center;gap:12px;flex:0 0 auto}
.brand__mark{width:38px;height:38px;flex:0 0 auto}
.brand__name{font-size:1.0625rem;font-weight:500;line-height:1.12;letter-spacing:-.01em}
.brand__name span{display:block}
/* On the hero the brand sits on the forest panel, so it needs the cream ink. */
.header:not(.is-stuck) .brand{color:var(--cream)}
.navwrap{margin-inline:auto}
/* The nav, not the individual item, is the positioning context for the mega
   panels. Anchored to the item, a wide panel centres on a trigger that sits
   left of centre and hangs off the screen edge; anchored to the nav, which is
   itself centred in the viewport, it stays symmetrical at every width. */
.nav{position:relative;display:flex;align-items:center;gap:2px;padding:7px;
  background:var(--cream);border-radius:var(--r-md);box-shadow:var(--shadow)}
.nav__top{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 16px;
  background:none;border:0;border-radius:var(--r);cursor:pointer;
  font-size:.9375rem;font-weight:400;color:var(--ink);
  transition:background .2s var(--ease)}
.nav__top:hover{background:rgba(18,37,78,.06)}
.nav__chev{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s var(--ease);opacity:.65}
.nav__item:hover .nav__chev,.nav__top[aria-expanded="true"] .nav__chev{
  transform:rotate(225deg) translate(-2px,-2px)}
.mega{
  position:absolute;top:calc(100% + 12px);left:50%;translate:-50% 0;z-index:120;
  min-width:max-content;padding:24px;background:var(--cream);
  border-radius:var(--r-md);box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
  /* width:max-content, NOT min-width:max-content. min-width beats max-width in
     the cascade, so the earlier cap here never applied and the five-column
     services panel stayed 1028px wide, hanging 122px off the left edge of a
     1024 laptop with a third of the service links unreachable. width is
     clamped by max-width, so this actually holds. */
  width:max-content;
  max-width:calc(100vw - 2 * var(--gutter));
}
.mega__grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
/* Hover bridge across the 12px gap, or the menu closes on the way to it. */
.mega::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.nav__item:hover .mega,
.nav__item:not([data-closed]):focus-within .mega,
.nav__top[aria-expanded="true"] + .mega{opacity:1;visibility:visible;transform:none}
.mega__grid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:22px 30px}
.mega__col h4{font-size:.6875rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-40);margin-bottom:10px}
.mega__link{display:block;min-height:36px;padding:7px 10px;margin-inline:-10px;
  border-radius:var(--r);font-size:.9375rem;transition:background .18s var(--ease)}
.mega__link:hover{background:rgba(18,37,78,.06)}
.header__cta{flex:0 0 auto}
.burger{display:none;width:46px;height:46px;flex:0 0 auto;padding:0;cursor:pointer;
  background:var(--cream);border:0;border-radius:var(--r-md);color:var(--ink)}
.burger span{display:block;width:18px;height:1.6px;margin:4px auto;background:currentColor;border-radius:2px}

/* ── hero ─────────────────────────────────────────────────
   Two panels: forest copy block and a photo, edge to edge, inset from the
   page by the gutter so the cream page frames it. */
.hero{padding:var(--gutter);padding-top:0}
.hero__grid{display:grid;grid-template-columns:1fr 1fr;min-height:min(88vh,860px);
  border-radius:var(--r-md);overflow:hidden}
.hero__panel{background:var(--ink);color:var(--cream);display:flex;flex-direction:column;
  justify-content:flex-end;padding:clamp(28px,3.4vw,56px);padding-top:132px}
.hero__panel h1{margin-block:22px 30px;max-width:13ch}
.hero__media{position:relative;background:var(--ink)}
.hero__media img{width:100%;height:100%;object-fit:cover}
/* Glass offer card over the photo. Backdrop-filter is doing real work here:
   it keeps the card legible over an unpredictable photograph without
   flattening it to an opaque box. */
.hero__offer{
  position:absolute;left:clamp(16px,2vw,28px);right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);
  display:flex;align-items:flex-end;gap:20px;
  padding:clamp(20px,2vw,28px);border-radius:var(--r-md);
  background:rgba(18,37,78,.42);backdrop-filter:blur(14px);
  border:1px solid rgba(246,242,236,.16);color:var(--cream);
}
.hero__offer h2{font-size:clamp(1.125rem,1.6vw,1.4375rem);font-weight:400;margin-bottom:8px}
.hero__offer p{font-size:.9375rem;line-height:1.5;color:rgba(246,242,236,.8);max-width:52ch}
.hero__offer .btn{flex:0 0 auto;width:52px;min-height:52px;padding:0;background:var(--gold);color:var(--ink)}

/* ── cards / grids ───────────────────────────────────────── */
.grid{display:grid;gap:20px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.card{padding:28px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.card:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.card--cream{background:var(--cream);border-color:transparent}
.card--forest{background:var(--ink);color:var(--cream);border-color:transparent}
.card.card--forest p{color:rgba(246,242,236,.78)}
.card.card--forest .h-3{color:var(--cream)}
/* the dark-ground link colour existed only for .section--forest, so the
   same link inside a .card--forest kept its teal and measured 2.40:1 */
.card--forest .link-arrow{color:var(--gold-2)}
.card__n{font-size:.75rem;font-weight:500;letter-spacing:.12em;color:var(--ink-40);margin-bottom:14px}
.card h3{margin-bottom:8px}
.card p{font-size:.9375rem;color:var(--ink-80)}

/* Service tile with a photo band on top. */
.tile{display:block;border-radius:var(--r);overflow:hidden;background:var(--white);
  border:1px solid var(--line);transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.tile:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.tile__media{aspect-ratio:4/3;background:var(--cream-2);overflow:hidden}
.tile__media svg,.tile__media img{width:100%;height:100%;object-fit:cover}
.tile__body{padding:22px}
.tile__body h3{margin-bottom:6px}
.tile__body p{font-size:.9375rem;color:var(--ink-60)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,72px);align-items:center}
.split + .split{margin-top:clamp(48px,6vw,96px)}
.split--flip .split__media{order:2}
.split__media img,.split__media svg{border-radius:var(--r-md);width:100%}
.split__copy h2{margin-bottom:16px}
.split__copy .lead{margin-bottom:22px}
.checks{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:12px}
.checks li{display:flex;gap:12px;font-size:.9375rem;color:var(--ink-80)}
.checks svg{flex:0 0 auto;margin-top:4px;color:var(--green)}
.section--forest .checks li{color:rgba(246,242,236,.8)}
.section--forest .checks svg{color:var(--gold-2)}

/* ── locations ───────────────────────────────────────────── */
.loc{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
.loc__row{display:grid;grid-template-columns:1.1fr 1.4fr auto;gap:32px;align-items:center;
  padding-block:26px;border-bottom:1px solid var(--line);transition:background .2s var(--ease)}
.loc__row:hover{background:rgba(18,37,78,.03)}
.loc__row h3{font-size:clamp(1.25rem,2vw,1.75rem);font-weight:300}
.loc__row p{font-size:.9375rem;color:var(--ink-60)}

/* ── stats ───────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px)}
.stat__n{font-size:clamp(2.25rem,4.2vw,3.5rem);font-weight:300;line-height:1;letter-spacing:-.03em}
.stat p{margin-top:10px;font-size:.9375rem;color:var(--ink-60);max-width:22ch}
.section--forest .stat p{color:rgba(246,242,236,.68)}

/* ── quotes ──────────────────────────────────────────────── */
.quotes{columns:3;column-gap:20px}
.quote{break-inside:avoid;margin-bottom:20px;padding:26px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r)}
.quote blockquote{margin:0;font-size:1rem;line-height:1.55}
.quote figcaption{display:flex;align-items:center;gap:12px;margin-top:18px}
.avatar{width:38px;height:38px;border-radius:var(--r-pill);flex:0 0 auto;display:grid;place-items:center;
  background:var(--ink);color:var(--cream);font-size:.8125rem;font-weight:500}
.quote__who{font-size:.875rem;line-height:1.3}
.quote__who span{display:block;color:var(--ink-40)}

/* ── accordion ───────────────────────────────────────────── */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__item summary{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:22px;cursor:pointer;list-style:none;font-size:1.0625rem;font-weight:400}
.acc__item summary::-webkit-details-marker{display:none}
.acc__item summary i{width:11px;height:11px;flex:0 0 auto;position:relative}
.acc__item summary i::before,.acc__item summary i::after{
  content:"";position:absolute;inset:50% 0 auto;height:1.5px;background:currentColor;translate:0 -50%;
  transition:transform .28s var(--ease)}
.acc__item summary i::after{transform:rotate(90deg)}
.acc__item[open] summary i::after{transform:rotate(0)}
.acc__body{padding-bottom:24px;max-width:var(--measure);color:var(--ink-80);font-size:1rem}
.acc__body p + p{margin-top:.9em}

/* ── news / blog ─────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:36px}
.chip{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;
  border:1px solid var(--line);border-radius:var(--r);
  font-size:.875rem;color:var(--ink-80);
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.chip:hover{border-color:var(--line-2)}
.chip[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 24px}
.post__media{aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;background:var(--cream-2);margin-bottom:16px}
.post__media svg,.post__media img{width:100%;height:100%;object-fit:cover}
.post__meta{display:flex;align-items:center;gap:10px;font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-40);margin-bottom:10px}
.post h3{font-size:1.1875rem;font-weight:400;line-height:1.25;margin-bottom:8px}
.post p{font-size:.9375rem;color:var(--ink-60)}
.post:hover h3{text-decoration:underline;text-underline-offset:3px}
.post--feature{grid-column:1/-1;display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,4vw,52px);
  align-items:center;padding-bottom:34px;border-bottom:1px solid var(--line)}
.post--feature .post__media{margin-bottom:0;aspect-ratio:16/11}
.post--feature h3{font-size:clamp(1.5rem,2.6vw,2.125rem);font-weight:300;letter-spacing:-.02em}
.post--feature p{font-size:1.0625rem;margin-top:12px}

/* ── article ─────────────────────────────────────────────── */
.article__head{max-width:780px;margin:0 auto clamp(28px,4vw,44px);text-align:center}
.article__head h1{margin-bottom:20px}
.byline{display:flex;align-items:center;justify-content:center;gap:12px;font-size:.9375rem;color:var(--ink-60)}
.article__hero{aspect-ratio:16/7;border-radius:var(--r-md);overflow:hidden;background:var(--cream-2);
  margin-bottom:clamp(32px,4.5vw,56px)}
.article__hero svg,.article__hero img{width:100%;height:100%;object-fit:cover}
.article{max-width:720px;margin-inline:auto;font-size:1.0625rem;line-height:1.72}
.article > * + *{margin-top:1.3em}
.article h2{font-size:clamp(1.4rem,2.2vw,1.75rem);font-weight:400;margin-top:1.9em}
.article h3{font-size:1.1875rem;font-weight:500;margin-top:1.6em}
.article p{color:var(--ink-80)}
.article ul,.article ol{padding-left:1.15em;color:var(--ink-80)}
.article li + li{margin-top:.45em}
.article a{color:var(--green);text-decoration:underline;text-underline-offset:2px}
.article blockquote{margin:0;padding:22px 26px;background:var(--cream);border-radius:var(--r);
  font-size:1.1875rem;line-height:1.5;font-weight:300}
/* Paints its own light ground, so it must also set its own ink — inside a
   .section--forest it was inheriting cream and rendering cream on cream. */
.callout{padding:22px 26px;background:var(--cream);border-radius:var(--r);color:var(--ink)}
.callout p,.callout .h-3{color:var(--ink)}
.callout .prose p,.callout .small{color:var(--ink-80)}
.callout strong{display:block;margin-bottom:6px}
.toc{padding:22px 26px;background:var(--cream);border-radius:var(--r)}
.toc h2{font-size:.6875rem !important;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-40);margin:0 0 12px !important}
.toc ol{margin:0;padding-left:1.1em;font-size:.9375rem}
.toc a{color:var(--ink-80);text-decoration:none}
.toc a:hover{color:var(--green);text-decoration:underline}

/* ── forms ───────────────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,68px);align-items:start}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-size:.875rem;font-weight:500}
.field input,.field select,.field textarea{
  /* 16px minimum: iOS Safari zooms the page on focus below that and never
     zooms back out, leaving the visitor scrolling a form that no longer fits. */
  font:inherit;font-size:16px;padding:13px 15px;color:var(--ink);background:var(--white);
  border:1px solid var(--line-2);border-radius:var(--r);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.field textarea{resize:vertical;min-height:130px}
.field :is(input,select,textarea):focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(30,100,84,.14)}
.field :is(input,select,textarea)[aria-invalid="true"]{border-color:#A33A2A}
.field__err{font-size:.8125rem;color:#A33A2A;min-height:1.15em}
.form__status{margin-top:14px;font-size:.9375rem}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.panel{padding:clamp(24px,2.8vw,36px);background:var(--cream);border-radius:var(--r-md)}
.deflist{display:grid;gap:20px;margin:0}
.deflist dt{font-size:.6875rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-40)}
.deflist dd{margin:5px 0 0;font-size:1.0625rem}
/* A phone number in a definition list is a standalone control, not a link
   inside a sentence, so the WCAG 2.5.8 inline exception does not cover it.
   It measured 116x20; the padding takes it past 24px without moving the row. */
.deflist a{text-decoration:underline;text-underline-offset:2px;
  display:inline-block;padding-block:4px;margin-block:-4px}

/* ── CTA + footer ────────────────────────────────────────── */
.cta{padding:clamp(40px,5.5vw,80px);background:var(--ink);color:var(--cream);
  border-radius:var(--r-md);text-align:center}
.cta h2{max-width:18ch;margin-inline:auto}
.cta .lead{max-width:46ch;margin:16px auto 30px;color:rgba(246,242,236,.78)}
.cta__row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.footer{background:var(--ink);color:var(--cream);padding-block:clamp(52px,6vw,84px) 32px;margin-top:0}
.footer__grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px 28px}
.footer h4{font-size:.6875rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(246,242,236,.5);margin-bottom:14px}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.footer a{font-size:.9375rem;color:rgba(246,242,236,.8)}
.footer a:hover{color:var(--cream)}
.footer .brand{color:var(--cream)}
/* Oversized wordmark as the closing note. */
.footer__mark{margin-top:clamp(40px,5vw,72px);font-size:clamp(3rem,12vw,10rem);font-weight:300;
  line-height:.86;letter-spacing:-.04em;color:rgba(246,242,236,.13);user-select:none}
.footer__bar{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:36px;padding-top:24px;border-top:1px solid var(--line-cream);
  font-size:.8125rem;color:rgba(246,242,236,.55)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 18px;
  background:var(--ink);color:var(--cream)}
.skip:focus{left:0}
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--green);outline-offset:3px;border-radius:2px}
.section--forest :where(a,button,summary):focus-visible,
.footer :where(a,button):focus-visible{outline-color:var(--gold)}

/* ── responsive ──────────────────────────────────────────── */
@media (max-width:1180px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .quotes{columns:2}
}
@media (max-width:1000px){
  .nav{display:none}
  .nav.is-open{
    display:flex;position:absolute;top:calc(100% + 10px);left:var(--gutter);right:var(--gutter);
    flex-direction:column;align-items:stretch;gap:2px;
    max-height:calc(100dvh - 120px);overflow-y:auto;padding:12px;
  }
  .nav.is-open .nav__item{position:static}
  .nav.is-open .nav__top{width:100%;justify-content:space-between;min-height:48px}
  .nav.is-open .nav__chev{display:none}
  /* Panels flatten into an indented list: a nested accordion inside a burger
     menu is worse than a slightly longer scroll. */
  .nav.is-open .mega{
    position:static;translate:none;opacity:1;visibility:visible;transform:none;
    min-width:0;padding:0 0 10px 14px;background:none;box-shadow:none;border-radius:0;
    border-left:1px solid var(--line)}
  .nav.is-open .mega__grid{grid-template-columns:1fr;gap:14px}
  .burger{display:block;order:3}
  .navwrap{position:static;margin-left:auto;margin-right:0}
  .header__inner{position:relative}
  .header__cta .btn{display:none}
  /* minmax(0,1fr), not 1fr: a bare 1fr track floors at the min-content width
     of its widest child, so on a 390px phone the hero column was resolving to
     639px and the panel was being clipped by .hero__grid's overflow:hidden,
     while .split pushed the map past the right edge and gave the whole page a
     horizontal scrollbar. minmax(0,...) lets the track shrink below content. */
  .hero__grid{grid-template-columns:minmax(0,1fr);min-height:0}
  .hero__panel{padding-top:112px;min-height:min(72vh,640px)}
  .hero__media{aspect-ratio:4/3}
  .split,.contact-grid{grid-template-columns:minmax(0,1fr)}
  .split__copy,.split__media,.hero__panel,.hero__media{min-width:0}
  .split--flip .split__media{order:0}
  .posts,.post--feature{grid-template-columns:repeat(2,1fr)}
  .post--feature{grid-column:1/-1;grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .loc__row{grid-template-columns:1fr;gap:10px}
}
@media (max-width:680px){
  .grid--2,.grid--3,.grid--4,.posts{grid-template-columns:1fr}
  .quotes{columns:1}
  .stats{grid-template-columns:1fr;gap:28px}
  .row{grid-template-columns:1fr}
  .hero__offer{flex-direction:column;align-items:stretch;gap:16px}
  .hero__offer .btn{width:100%}
  .head-row{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}

/* ── additions for the paid landing page ──────────────────────
   Not part of the studio system. Two things this page needs that a
   brochure site doesn't: a thumb-reachable call bar, because 7 of the
   10 competitor pages lead with the phone and this traffic is bought;
   and a honeypot, because the form has no other spam defence. */

/* ── floating CTA ─────────────────────────────────────────────
   Bottom-right card on desktop, full-width bar on phones. Carries both
   audiences: the phone for participants and families, and a separate
   referral route for coordinators — who are a different buyer with a
   different job, and who otherwise have to hunt for the right form. */

.fab{
  position:fixed;right:var(--gutter);bottom:var(--gutter);z-index:130;width:290px;
  display:flex;flex-direction:column;gap:10px;
  padding:20px 20px 18px;border-radius:var(--r-md);
  background:var(--ink);color:var(--cream);
  border:1px solid var(--line-cream);box-shadow:var(--shadow-lg);
  animation:fabIn .28s var(--ease) both;
}
.fab[hidden]{display:none}
@keyframes fabIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.fab__label{font-size:.75rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-2);margin:0 0 2px}
.fab__btn{width:100%;min-height:48px}
.fab__close{
  position:absolute;top:8px;right:8px;width:32px;height:32px;display:grid;
  place-items:center;background:none;border:0;border-radius:var(--r);
  color:rgba(246,242,236,.6);cursor:pointer}
.fab__close:hover{color:var(--cream);background:rgba(246,242,236,.1)}

/* the coordinator door. Visually separated so it reads as a different
   route rather than a third button competing with the first two. */
.fab__split{margin-top:4px;padding-top:14px;border-top:1px solid var(--line-cream)}
.fab__who{margin:0 0 4px;font-size:.8125rem;color:rgba(246,242,236,.66)}
.fab__ref{display:inline-flex;align-items:center;gap:7px;min-height:32px;
  font-size:.9375rem;font-weight:500;color:var(--gold-2)}
.fab__ref svg{transition:transform .25s var(--ease)}
.fab__ref:hover svg{transform:translateX(3px)}

@media(max-width:760px){
  /* on a phone it becomes the bottom bar: the two primary actions side by
     side, with the coordinator route on its own line underneath. */
  .fab{left:0;right:0;bottom:0;width:auto;border-radius:0;border-left:0;
    border-right:0;border-bottom:0;flex-direction:row;flex-wrap:wrap;
    align-items:center;gap:8px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom))}
  .fab__label,.fab__close{display:none}
  .fab__btn{flex:1;width:auto;min-height:50px;padding:0 12px}
  .fab__split{flex-basis:100%;margin:0;padding-top:8px;text-align:center}
  .fab__who{display:inline;margin-right:6px}
  .footer{padding-bottom:132px}
}

.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* The hero offer card holds a form on this build rather than an offer, so its
   fields need to read on the glass. 16px is deliberate: below it, iOS Safari
   zooms the page the moment a field takes focus. */
.hero__offer .field label{color:rgba(246,242,236,.78);font-size:.75rem;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;display:block}
.hero__offer .field input,.hero__offer .field select{
  width:100%;min-height:48px;font-size:16px;padding:0 14px;
  border-radius:var(--r);border:1px solid rgba(246,242,236,.28);
  background:rgba(246,242,236,.10);color:var(--cream)}
.hero__offer .field select option{color:var(--ink)}
.hero__offer .field input::placeholder{color:rgba(246,242,236,.5)}
.hero__offer .field input:focus,.hero__offer .field select:focus{
  outline:2px solid var(--gold-2);outline-offset:1px}
.hero__offer .field{margin-bottom:12px}
.hero__offer .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.hero__offer .row{grid-template-columns:1fr}}
.hero__offer a{color:var(--gold-2);text-decoration:underline}

/* ── photo placeholders ───────────────────────────────────────
   Every image slot on this page is a labelled placeholder until the
   client supplies real photography. Deliberately styled rather than
   left as a broken <img>: it reads as intentional on screen, and it
   doubles as the shot list — each block says what belongs there.

   Swap by replacing the .ph block with a <picture>/<img>. Do not
   substitute stock: the whole page argues "we are actually local",
   and a stock photo of a stranger undoes it. */

.ph{
  position:relative;display:grid;place-items:center;text-align:center;
  min-height:220px;padding:24px;border-radius:var(--r-md);
  background:
    repeating-linear-gradient(-45deg,
      rgba(18,37,78,.045) 0 12px, transparent 12px 24px),
    var(--cream-2);
  border:1px dashed var(--line-2);color:var(--ink-60);
}
.ph--tall{min-height:100%}
.ph--wide{aspect-ratio:16/9;min-height:0}
.ph--portrait{aspect-ratio:4/5;min-height:0}
.ph__label{font-size:.75rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-40);margin-bottom:8px}
.ph__what{font-size:.9375rem;max-width:30ch;line-height:1.45;color:var(--ink-60)}
.section--forest .ph{
  background:repeating-linear-gradient(-45deg,
      rgba(246,242,236,.05) 0 12px, transparent 12px 24px),
    rgba(246,242,236,.06);
  border-color:var(--line-cream);color:rgba(246,242,236,.66)}
.section--forest .ph__label{color:rgba(246,242,236,.5)}
.section--forest .ph__what{color:rgba(246,242,236,.7)}
/* the hero panel needs its own: it sits on navy with no section class */
.hero__media .ph{position:absolute;inset:0;min-height:0;border:0;border-radius:0;
  background:repeating-linear-gradient(-45deg,
      rgba(246,242,236,.05) 0 14px, transparent 14px 28px),
    rgba(246,242,236,.05);color:rgba(246,242,236,.62);align-content:start;
  padding-top:clamp(40px,8vw,90px)}
.hero__media .ph__label{color:rgba(246,242,236,.45)}
.hero__media .ph__what{color:rgba(246,242,236,.62)}

/* ── team ─────────────────────────────────────────────────────
   Steadway runs a "meet our support workers" section; it is the most
   humanising thing on their page and none of the local competitors
   near St Leonards do it at all. */
.team{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.team__card{display:flex;flex-direction:column;gap:14px}
.team__name{font-size:1.0625rem;font-weight:500;letter-spacing:-.01em}
.team__role{font-size:.875rem;color:var(--ink-60)}
.team__note{font-size:.9375rem;color:var(--ink-80);line-height:1.5}

/* ── locality strip ───────────────────────────────────────────
   A row of North Shore photographs. Carries the "we know this place"
   argument better than any sentence can. */
.strip{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.strip .ph{min-height:170px}
.strip__cap{margin-top:10px;font-size:.8125rem;color:var(--ink-60)}


/* ── leaf chips ───────────────────────────────────────────────
   The logo is a tree whose leaves run through six colours. Each chip
   takes a leaf in turn, so the row reads as the mark unpacked. */
.chips--leaf .chip{border-width:1.5px;background:transparent;font-weight:500}
.chips--leaf .chip:nth-child(6n+1){border-color:var(--leaf-1);color:var(--leaf-1-ink)}
.chips--leaf .chip:nth-child(6n+2){border-color:var(--leaf-2);color:var(--leaf-2)}
.chips--leaf .chip:nth-child(6n+3){border-color:var(--leaf-3);color:var(--leaf-3-ink)}
.chips--leaf .chip:nth-child(6n+4){border-color:var(--leaf-4);color:var(--leaf-4-ink)}
.chips--leaf .chip:nth-child(6n+5){border-color:var(--leaf-5);color:var(--leaf-5-ink)}
.chips--leaf .chip:nth-child(6n+6){border-color:var(--leaf-6);color:var(--leaf-6-ink)}
/* The border keeps the true brand hue; the label takes a darkened version of
   the same colour. Pink, teal, green, orange and yellow all measured below
   4.5:1 as text at 14px, so only the borders use the raw leaf tokens. */

/* the tagline rule under the wordmark, as it appears in the logo */
.tagline{display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  font-size:.8125rem;font-weight:600;letter-spacing:.06em}
.tagline b{font-weight:600}
/* on the navy footer the raw hues are too dark; these are the same colours
   lifted toward white until each clears 4.5:1 against --ink.
   nth-of-type, not nth-child: the separators between the words are spans,
   and counting them left the third word uncoloured. */
.tagline b:nth-of-type(1){color:#f25093}
.tagline b:nth-of-type(2){color:#639c2f}
.tagline b:nth-of-type(3){color:var(--leaf-5)}
.section--forest .tagline b:nth-of-type(1){color:#FF7FB4}
.section--forest .tagline b:nth-of-type(2){color:#9FD469}
.section--forest .tagline b:nth-of-type(3){color:#FFB05C}

/* .checks li is the studio's icon-plus-text flex row, built for one line of
   plain text. The "why us" list puts a bolded lead-in above a description,
   which is two blocks — and flex kept sizing the wrapper to zero however the
   basis was set. Grid states the intent directly: an auto column for the icon,
   a 1fr column for everything else. Deterministic, and it stops the row
   spilling past the container. */
.checks li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start}
.checks strong{display:block;font-weight:600;color:var(--ink);margin-bottom:2px}
.section--forest .checks strong{color:var(--cream)}

/* Grid children default to min-width:auto, so a long word or a nested flex
   row can push a column wider than its track. The studio sheet does not set
   this because its own splits only ever hold prose. Ours hold a flex list. */
.split > *, .grid > *, .team > *, .strip > *{min-width:0}

/* The honeypot is off-screen and aria-hidden, so it is never focused — but
   keeping it at 16px means the "no input under 16px" check stays meaningful
   instead of reporting a false positive on a field nobody can reach. */
.hp input{font-size:16px}

/* ── hero at narrow widths ────────────────────────────────────
   The studio's offer card is a short overlay on a photograph, so it can stay
   absolutely positioned all the way down. Ours carries the enquiry form, which
   is several times taller — left absolute it sat on top of the headline. Below
   900px the media column becomes a normal stack: picture, then form. */
@media(max-width:900px){
  .hero__media{display:flex;flex-direction:column;gap:0}
  .hero__media .ph{position:relative;inset:auto;min-height:200px;padding-top:32px}
  .hero__offer{position:static;inset:auto;border-radius:0;
    border-left:0;border-right:0;border-bottom:0}
}

/* Once the header sticks it gets a light background, so the phone button has
   to swap back to dark ink or it goes invisible the other way. */
.header.is-stuck .header__cta .btn--onDark{color:var(--ink);border-color:var(--line-2)}
.header.is-stuck .header__cta .btn--onDark:hover{border-color:var(--ink)}

/* ── map ──────────────────────────────────────────────────────
   Sits in the closing CTA. Google's embed has its own white chrome, so it
   gets the same 8px radius and a cream hairline to stop it reading as a
   hole punched in the navy panel. */
/* width:100% is load-bearing. With width auto, aspect-ratio derives the width
   from the height — so min-height:260px was computing a 347px-wide box that
   overflowed its own column on a phone and gave the page a horizontal scroll. */
.map{position:relative;overflow:hidden;border-radius:var(--r-md);
  border:1px solid var(--line-cream);background:var(--cream-2);
  width:100%;aspect-ratio:4/3;min-height:260px}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.map__dir{margin-top:14px}
@media(max-width:860px){.map{aspect-ratio:16/10;min-height:220px}}

/* Photographs sit in the slots the placeholders occupied, so they inherit the
   same radius and proportions. object-fit keeps a portrait crop from
   stretching in a landscape slot and vice versa. */
.strip img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-md);display:block}
.team__card img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;
  border-radius:var(--r-md);display:block}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* The referrer's route through the nav. Coordinators are a different audience
   with a different job, and four of the eleven providers surveyed give them a
   separate door — but only Lindacare does it from the header, where someone
   placing a participant actually starts. Tinted so it reads as a different
   kind of link, not a fourth section anchor. */
.nav__top--alt{color:var(--green);font-weight:500}
.nav__top--alt:hover{background:rgba(30,136,164,.09)}
@media(max-width:900px){.nav__top--alt{display:none}}

/* Licence credit for the locality photographs. Small and quiet — it is a
   condition of the CC BY-SA licences, not a design element, so it must be
   legible (4.5:1 against --bg) without competing with the captions above it. */
.strip__credit{
  margin:14px 0 0;
  font-size:.75rem;
  line-height:1.5;
  color:#5A6472;
  text-align:center;
}

/* ── footer ───────────────────────────────────────────────────
   The footer paints navy but .eyebrow and .small set their own dark ink,
   which beat the inherited cream and rendered navy-on-navy at 1.00:1 —
   the whole address, hours and referral column was invisible. Anything
   that sets an ink colour needs a dark-ground counterpart here. */
.footer .eyebrow{color:rgba(246,242,236,.62)}
.footer .small{color:rgba(246,242,236,.72)}
.footer .h-3{color:var(--cream)}
.footer p{color:rgba(246,242,236,.78)}
.footer__grid{align-items:start}
.footer__col h3{font-size:.6875rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(246,242,236,.58);margin:0 0 14px}
.footer__col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.footer__col li{font-size:.9375rem;color:rgba(246,242,236,.78);line-height:1.45}
.footer__col a{color:rgba(246,242,236,.78);text-decoration:none}
.footer__col a:hover{color:var(--cream);text-decoration:underline}
.footer__blurb{font-size:.9375rem;line-height:1.6;max-width:34ch;
  color:rgba(246,242,236,.72);margin:14px 0 18px}
.footer__reg{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;
  border:1px solid rgba(246,242,236,.28);border-radius:999px;
  font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(246,242,236,.82)}
.footer__bar{border-top:1px solid rgba(246,242,236,.14);margin-top:34px;padding-top:22px}
@media (max-width:900px){
  .footer__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .footer__grid{grid-template-columns:1fr}
}

/* ── areas we serve ───────────────────────────────────────────
   A tile per local government area, because that is the unit people
   actually recognise and it is how the councils themselves are named.
   Selecting a tile swaps the suburb list below rather than navigating,
   so the whole catchment stays on one page for relevance while the
   reader only reads their own council. Real buttons in a tablist, so
   it works from the keyboard and announces state. */
.lga{margin-top:8px}
.lga__tiles{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.lga__tile{appearance:none;cursor:pointer;font:inherit;text-align:center;
  padding:14px 20px;min-height:56px;min-width:150px;
  background:var(--cream);border:1.5px solid var(--line);border-radius:var(--r);
  font-size:.9375rem;font-weight:500;line-height:1.3;color:var(--ink-80);
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.lga__tile:hover{border-color:var(--green);color:var(--ink)}
.lga__tile[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.lga__tile:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.lga__panel{padding:24px 26px;background:var(--cream);border-radius:var(--r)}
.lga__panel[hidden]{display:none!important}
/* Pills rather than divider-separated text: the list wraps, and a right-hand
   rule leaves a dangling separator at the end of every wrapped row, which
   :last-child cannot reach. */
.lga__suburbs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:0;list-style:none}
.lga__suburbs li{padding:6px 13px;border-radius:999px;background:rgba(18,37,78,.055);
  font-size:.875rem;line-height:1.3;color:var(--ink-80)}
.lga__foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin:0}
@media (max-width:640px){
  .lga__tiles{gap:9px}
  .lga__tile{flex:1 1 calc(50% - 9px);min-width:0;padding:12px 12px;font-size:.875rem}
}

/* WCAG 2.2 target size (2.5.8) wants 24x24 minimum. The footer link lists were
   21px tall, and stacked lists are exactly where a near-miss tap lands on the
   neighbouring link. Padding rather than height so the rhythm is unchanged. */
.footer__col li{padding-block:3px}
.footer__col a{display:inline-block;padding-block:2px}
.team__pending{margin:18px 0 0;padding:16px 18px;border:1px dashed var(--line,#d8dbe8);
  border-radius:12px;color:var(--body,#54646f);font-size:15px;line-height:1.6;max-width:62ch}


/* ── the leaf system ──────────────────────────────────────────
   Client feedback: not enough of the logo's colour on the page. Rather
   than tint sections at random, the six leaves recur as one device in a
   few fixed places, so the colour reads as identity and not decoration. */

/* the rule bookends the page: top edge of the hero, top edge of the footer */
.hero__grid{position:relative}
.hero__grid::before,.footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:var(--leaf-rule);z-index:2;pointer-events:none}
.footer{position:relative}

/* numbered steps are a real sequence, so each step is a filled leaf.
   White on the darkened leaves measures 5.1 to 7.4:1. */
.card .card__n{
  display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;
  font-size:.75rem;font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums;
  color:#fff;background:var(--leaf-1-ink);margin-bottom:16px}
/* .card p sets the ink colour at higher specificity than .card__n alone,
   which turned the numerals navy on the discs (measured 2.4:1). */
.card:nth-child(6n+2) .card__n{background:var(--leaf-2-ink)}
.card:nth-child(6n+3) .card__n{background:var(--leaf-3-ink)}
.card:nth-child(6n+4) .card__n{background:var(--leaf-4-ink)}
.card:nth-child(6n+5) .card__n{background:var(--leaf-5-ink)}
.card:nth-child(6n+6) .card__n{background:var(--leaf-6-ink)}

/* each service card carries one leaf before its title, and borders in
   that leaf on hover. The glyph is a rotated teardrop: the logo's leaf. */
.grid--leaf .card .h-3::before{
  content:"";display:inline-block;width:13px;height:13px;margin-right:10px;
  border-radius:50% 50% 50% 0;transform:rotate(-45deg) translateY(-1px);
  background:var(--leaf-1);vertical-align:-1px}
.grid--leaf .card:nth-child(6n+2) .h-3::before{background:var(--leaf-2)}
.grid--leaf .card:nth-child(6n+3) .h-3::before{background:var(--leaf-3)}
.grid--leaf .card:nth-child(6n+4) .h-3::before{background:var(--leaf-4)}
.grid--leaf .card:nth-child(6n+5) .h-3::before{background:var(--leaf-5)}
.grid--leaf .card:nth-child(6n+6) .h-3::before{background:var(--leaf-6)}
.grid--leaf .card:nth-child(6n+1):hover{border-color:var(--leaf-1)}
.grid--leaf .card:nth-child(6n+2):hover{border-color:var(--leaf-2)}
.grid--leaf .card:nth-child(6n+3):hover{border-color:var(--leaf-3)}
.grid--leaf .card:nth-child(6n+4):hover{border-color:var(--leaf-4)}
.grid--leaf .card:nth-child(6n+5):hover{border-color:var(--leaf-5)}
.grid--leaf .card:nth-child(6n+6):hover{border-color:var(--leaf-6)}

/* ── service accents ──────────────────────────────────────────
   The client's own site gives each service one leaf, and it is the
   thing they mean by "our colours": coordination is teal, in-home is
   pink, social is orange, respite is green, reintegration is purple.
   That mapping is by service, not by position, so it is set here as an
   explicit class rather than left to nth-child. --accent is the raw
   leaf for large type and decoration; --accent-ink is the same hue
   darkened until it clears 4.5:1 on the light grounds, for small text. */
.svc-coordination  {--accent:var(--leaf-3);--accent-ink:var(--leaf-3-ink);--accent-soft:rgba(30,136,164,.10)}
.svc-in-home       {--accent:var(--leaf-1);--accent-ink:var(--leaf-1-ink);--accent-soft:rgba(238,34,118,.09)}
.svc-community     {--accent:var(--leaf-5);--accent-ink:var(--leaf-5-ink);--accent-soft:rgba(251,123,36,.11)}
.svc-respite       {--accent:var(--leaf-4);--accent-ink:var(--leaf-4-ink);--accent-soft:rgba(92,152,38,.11)}
.svc-reintegration {--accent:var(--leaf-2);--accent-ink:var(--leaf-2-ink);--accent-soft:rgba(128,71,165,.10)}

/* explicit service class beats the positional glyph colour */
.grid--leaf .card[class*="svc-"] .h-3::before{background:var(--accent)}
.grid--leaf .card[class*="svc-"]:hover{border-color:var(--accent)}
.grid--leaf .card[class*="svc-"] .h-3{color:var(--accent-ink)}
.grid--leaf .card[class*="svc-"] .link-arrow{color:var(--accent-ink)}

/* service cards carry a photograph, as the client's own site does */
.card__media{aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);
  margin:-28px -28px 20px;border-bottom:3px solid var(--accent,var(--line))}
.card__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease)}
.card:hover .card__media img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){.card:hover .card__media img{transform:none}}

/* a service page takes its own leaf throughout: the H1 underline, the
   eyebrows, the step numbers, the included-list ticks, the callout edge */
main[class*="svc-"] .marked{background-image:linear-gradient(var(--accent),var(--accent))}
main[class*="svc-"] .eyebrow:not(.eyebrow--onDark){color:var(--accent-ink)}
main[class*="svc-"] .card .card__n{background:var(--accent-ink)}
main[class*="svc-"] .checks li svg{color:var(--accent-ink)}
main[class*="svc-"] .callout{border-top:4px solid var(--accent)}
main[class*="svc-"] .section--cream{background:var(--accent-soft)}
main[class*="svc-"] .lga__tile[aria-selected="true"]{background:var(--accent-ink);border-color:var(--accent-ink)}
main[class*="svc-"] .lga__tile:hover{border-color:var(--accent)}
main[class*="svc-"] .acc__item summary i::before,
main[class*="svc-"] .acc__item summary i::after{background:var(--accent-ink)}

/* the service intro carries its photograph above the included list */
.svc-photo{aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);margin-bottom:18px;
  border-bottom:4px solid var(--accent)}
.svc-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* scene photographs in the two-column sections */
.split__media .scene{aspect-ratio:3/2;overflow:hidden;border-radius:var(--r-md)}
.split__media .scene img{width:100%;height:100%;object-fit:cover;display:block}
.two-doors .card{display:grid;grid-template-rows:auto 1fr;gap:0}
.two-doors .card .card__media{aspect-ratio:16/9;border-bottom-width:4px}

/* ── leaf motif ───────────────────────────────────────────────
   The client's site scatters pale leaves in the margins. One cluster,
   two places, low opacity, so it reads as the brand and not confetti. */
.leaves{position:absolute;pointer-events:none;z-index:0;opacity:.9}
.leaves--bl{left:-6px;bottom:-10px;width:150px}
.leaves--tr{right:-8px;top:-10px;width:130px;transform:scaleX(-1)}
.has-leaves{position:relative;overflow:hidden}
.has-leaves > .container{position:relative;z-index:1}
@media (max-width:760px){.leaves{width:90px}}

/* ── referral form ────────────────────────────────────────────
   Mirrors the client's own referral form field for field. Sections are
   real fieldsets so a screen reader announces which part of the form it
   is in; the legend doubles as the visible heading. */
.refer{max-width:760px}
.refer fieldset{border:0;padding:0;margin:0 0 34px}
.refer legend{font-family:inherit;font-size:1.1875rem;font-weight:600;padding:0;
  margin-bottom:6px;color:var(--ink)}
.refer legend + .small{margin-bottom:18px}
.refer .fs-n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--ink);color:#fff;font-size:.8125rem;font-weight:600;margin-right:10px;
  vertical-align:middle}
.refer fieldset:nth-of-type(1) .fs-n{background:var(--leaf-3-ink)}
.refer fieldset:nth-of-type(2) .fs-n{background:var(--leaf-1-ink)}
.refer fieldset:nth-of-type(3) .fs-n{background:var(--leaf-5-ink)}
.refer fieldset:nth-of-type(4) .fs-n{background:var(--leaf-4-ink)}
.refer .row--3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
.refer .req{color:var(--leaf-1-ink)}
.refer .opt{font-weight:400;color:var(--ink-60)}
.checkgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin:6px 0 4px}
.check{display:flex;gap:11px;align-items:flex-start;font-size:.9375rem;cursor:pointer}
.check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--ink);flex:0 0 auto}
.check--single{padding:16px 18px;background:var(--cream);border-radius:var(--r);
  border:1px solid var(--line)}
.refer .field input[type="file"]{padding:10px;background:var(--cream);font-size:.9375rem}
.refer .actions{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-top:8px}
.refer .field input[type="date"]{min-height:50px}
[hidden]{display:none!important}
.form-sent{padding:28px;background:var(--cream);border-radius:var(--r-md);
  border-left:4px solid var(--leaf-4-ink);max-width:760px}
.form-sent .h-3{margin-bottom:8px}
@media (max-width:640px){
  .refer .row,.refer .row--3{grid-template-columns:1fr}
  .checkgrid{grid-template-columns:1fr}
}

/* the referral page is the destination the floating panel exists to reach */
main.page-refer ~ .fab{display:none}