/* The home page's own stylesheet (ADR-0014): everything the home-v4 design
   adds over webflow.css — the hero's inside, the eight-areas slider, the bar
   at the foot of the Assessments section under it, the navy band and the
   funding band after that, the blog and news cards, the call-to-action card's navy
   glass, the review stack's palette, the three doors after the reviews.
   Linked once, from src/index.njk's <head> after webflow.css, legibility.css
   and responsive.css so it comes last, with a content-hash ?v= from
   index.11tydata.js so a change here reaches a returning visitor at once
   despite the hour-long cache on /css/*. Script: src/js/home.js.

   This is the <style> the playground branch's generator inlined into its
   home-v4 render (tools/build-renders.py: CSS, PAGE_CSS, CTA_A_CSS and
   REVIEW_STACK_CSS at origin/playground 14522b2), as reviewed there, less
   what that page does not have: the belt's rules (src/css/funding-belt.css,
   placed by lib/funding-belt.js on this page like on every other), the
   grid treatment of the eight areas, the three banner shapes and the strip
   above the navigation, the review palettes not chosen, and the chrome of the
   playground's standalone pages. Every rule left matches an element on the
   page or a class its script adds. The .r- prefix is that branch's, kept so
   the file still matches what was reviewed.

   Temporary in part: the band (.r-fund), the three doors (.r-hub)
   and the eight areas' talk of 2027 are about a date, 2027-03-31 — see the
   ADR's time box. */
@font-face{font-family:'Cabinet Grotesk Variable';src:url(/wf/assets/css/65ceb1d93aeb5c307dabcdb9_CabinetGrotesk-Variable.ttf) format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --r-ink:#024275; --r-ink-strong:#022b4c; --r-blue:#046cbe; --r-blue-mid:#2a8dda;
  --r-blue-soft:#d1e3f5; --r-num:#65aee6; --r-ground:#e4eef8; --r-line:#127ccf;
  --r-mint:#4ecfa2; --r-mint-ink:#0b412e; --r-mint-wash:#c7ebde; --r-green:#11523b;
  --r-gold:#fdb833; --r-gold-ink:#5a3c00; --r-navy:#02213d;
}
.r-wrap{max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}
.r-band{font-family:'Cabinet Grotesk Variable',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.r-sechead{max-width:760px;margin-bottom:clamp(28px,4vw,52px)}
.r-eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:13px;font-weight:700;color:var(--r-blue-mid);margin:0 0 12px}
.r-eyebrow-light{color:var(--r-mint-wash)}
.r-sechead h2{font-size:clamp(30px,4.2vw,52px);line-height:1.08;font-weight:700;color:var(--r-ink-strong);margin:0 0 18px}
.r-lede{font-size:clamp(16px,1.5vw,19px);line-height:1.6;color:var(--r-ink);margin:0;max-width:62ch}
.r-tile{background:#fff;border-radius:14px;width:72px;height:72px;display:grid;place-items:center;box-shadow:0 6px 18px rgba(2,66,117,.09)}
.r-tile svg{width:44px;height:44px}
.r-badge{align-self:flex-start;margin-top:auto;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.02em}
.b-full{background:var(--r-mint);color:var(--r-mint-ink)}
.b-derived{background:var(--r-blue-soft);color:var(--r-ink)}
.b-partial{background:var(--r-gold);color:var(--r-gold-ink)}
.r-band{background:linear-gradient(135deg,var(--r-navy) 0%,#0a3a63 100%);color:#fff;padding:clamp(52px,7vw,96px) 0;text-align:center}
.r-band h2{font-size:clamp(28px,3.6vw,46px);line-height:1.1;margin:0 0 clamp(30px,4vw,52px);font-weight:700;color:#94e4c8}
/* 2026-10-03: each of the heading's three sentences is one count (7 → 8 → 1),
   so none may break inside itself: at 375 the line used to split "Eight /
   areas.". One line at 1440 as before. */
.r-band h2 .r-nb{white-space:nowrap}
.r-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:start;gap:clamp(12px,2vw,28px);text-align:left}
.r-flow-cell{max-width:34ch}
.r-flow-n{font-size:clamp(50px,6vw,86px);line-height:.9;font-weight:600;color:#94e4c8;margin:0}
.r-flow-label{margin:6px 0 12px;font-size:clamp(15px,1.4vw,18px);font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.08em}
.r-flow-line{margin:0;font-size:clamp(14px,1.2vw,16px);line-height:1.55;color:#c2d9ec}
.r-flow-arrow{color:rgba(148,228,200,.45);align-self:start;margin-top:clamp(18px,2.4vw,34px)}
.r-flow-arrow svg{width:clamp(28px,3vw,44px);height:auto;display:block}
@media (max-width:860px){
  .r-flow{grid-template-columns:1fr;gap:10px;justify-items:start}
  .r-flow-arrow{transform:rotate(90deg);margin:2px 0 6px 10px;padding-top:0}
  .r-flow-cell{max-width:none}
}
/* ---- the eight areas, one at a time ---- */
.r-slider-sec{background:linear-gradient(180deg,#eef5fc 0%,var(--r-ground) 100%);padding:clamp(46px,7vw,92px) 0;font-family:'Cabinet Grotesk Variable',system-ui,sans-serif}
/* The heading's second sentence is 850px wide at its 52px top size, and the
   shared 760px measure broke it before its last word, leaving "them." alone
   on a third line. Here it gets the room to stay on one; where it cannot
   (a phone), balance splits it evenly instead. */
.r-slider-sec .r-sechead{max-width:880px}
.r-slider-sec .r-sechead h2{text-wrap:balance}
.r-slider{position:relative;border-radius:28px}
.r-slider:focus-visible{outline:3px solid var(--r-blue-mid);outline-offset:10px}
.r-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.r-track::-webkit-scrollbar{display:none}
/* Swipe mode (phones, tablets, reduced motion): the track scrolls sideways and
   snaps, and every slide is a stop, so one swipe is one slide however hard it
   is thrown. In both modes a slide paints only its own width: without that
   the next slide's photograph casts its shadow in at the track's right-hand
   edge, as a grey band. */
.r-slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(26px,4.5vw,64px);align-items:center;padding:clamp(18px,2.6vw,30px) 2px clamp(30px,3.4vw,42px);clip-path:inset(-60px 0 -120px)}
.r-slide-media{position:relative}
.r-offset{position:absolute;inset:22px -22px -22px 22px;border-radius:28px;background:var(--r-mint-wash)}
.r-slide-photo{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:4/3;background-image:var(--img);background-size:var(--img-size,cover);background-position:var(--img-pos,50% 42%);box-shadow:0 26px 58px rgba(2,66,117,.22)}
.r-slide-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(2,66,117,.46),rgba(78,207,162,.22) 62%,rgba(253,184,51,.10));mix-blend-mode:multiply}
.r-slide-photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(2,33,61,.30),transparent 48%)}
.r-slide-count{display:flex;align-items:baseline;gap:12px;margin:0 0 4px}
.r-ghost{font-size:clamp(56px,7.6vw,112px);line-height:.78;font-weight:700;color:transparent;-webkit-text-stroke:1.6px var(--r-num);letter-spacing:-.02em}
.r-of{font-size:14px;font-weight:600;color:#5b83a6;letter-spacing:.08em}
.r-slide-text h3{font-size:clamp(26px,3.3vw,44px);line-height:1.06;color:var(--r-ink-strong);margin:0 0 6px;font-weight:700}
.r-slide-text h3::after{content:"";display:block;width:62px;height:4px;border-radius:2px;background:var(--r-mint);margin-top:16px}
.r-slide-plain{font-size:clamp(17px,1.7vw,21px);line-height:1.45;color:var(--r-ink);font-weight:600;margin:16px 0 12px;max-width:34ch}
.r-slide-who{font-size:15.5px;line-height:1.55;color:#3c6f9c;margin:0 0 20px;max-width:46ch}
.r-slide-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.r-slide-ministry{font-size:12.5px;color:#5b83a6}
.r-slider-nav{display:flex;align-items:center;gap:18px}
.r-skip{display:none;background:none;border:1px solid rgba(18,124,207,.32);color:var(--r-blue);border-radius:999px;padding:8px 14px;font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.r-skip:hover{background:var(--r-blue);color:#fff;border-color:var(--r-blue)}
/* Pinned: the section holds still while its slides turn. src/js/home.js sets
   .is-pinned where there is room and a wheel or trackpad to drive it (900px
   wide, hover, a fine pointer, no reduced motion); a touch-first screen of
   any width keeps the swipe carousel. One push of the wheel or trackpad turns
   one slide: home.js cancels the wheel while the stage holds still and counts
   pushes instead, because one trackpad swipe travels several slides' worth of
   scroll (ticket 41). The scrollbar, a finger, the keyboard at either end and
   links still move the page, and then its position picks the slide.
   The runway is what the page scrolls through to do it: the stage, then 46vh
   for every slide after the first. The stage is only as tall as the slider
   and sticks where that centres it in what the fixed navigation and the belt
   leave of the window; src/js/home.js measures that and writes
   --r-stage-top. (A stage 100vh tall that centred the slider inside itself
   put half the spare height between the heading and the first slide — 222px
   at 1440x900 — and the other half under the chips.) */
.r-runway{position:relative}
.is-pinned .r-runway::after{content:"";display:block;height:calc((var(--slides) - 1) * 46vh)}
.is-pinned .r-stage{position:sticky;top:var(--r-stage-top,107px)}
/* Pinned, the slides move by transform to the one home.js names in --at, and
   glide there by themselves. The track clips sideways only, so a photograph's
   shadow fades out below it instead of ending on the track's edge in a
   straight line, and each slide paints only its own width, so the next one's
   shadow does not show as a band down the right-hand side. (Browsers without
   overflow: clip keep the hidden above it, and the old straight edges.) The
   navigation sits above the shadow that now reaches it. */
.is-pinned .r-track{overflow-x:hidden;overflow-x:clip;overflow-y:visible;scroll-snap-type:none}
.is-pinned .r-slide{transform:translateX(calc(var(--at,0) * -100%));transition:transform .75s cubic-bezier(.65,0,.35,1)}
.is-pinned .r-track.is-instant .r-slide{transition:none}
.is-pinned .r-slider-nav{position:relative;z-index:1}
.is-pinned .r-slide-photo{aspect-ratio:auto;height:min(46vh,430px)}
.is-pinned .r-skip{display:inline-block}
.r-arrows{display:flex;gap:8px}
.r-arrow{width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(18,124,207,.32);background:#fff;color:var(--r-blue);display:grid;place-items:center;cursor:pointer;padding:0}
.r-arrow:hover{background:var(--r-blue);color:#fff;border-color:var(--r-blue)}
.r-arrow svg{width:19px;height:19px}
.r-progress{flex:1;height:3px;border-radius:2px;background:rgba(18,124,207,.18);overflow:hidden}
.r-progress span{display:block;height:100%;width:12.5%;background:var(--r-blue-mid);border-radius:2px;transition:width .3s ease}
.r-map{display:flex;gap:8px;overflow-x:auto;padding:22px 0 4px;scrollbar-width:none}
.r-map::-webkit-scrollbar{display:none}
.r-mapchip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(18,124,207,.22);background:#fff;color:var(--r-ink);padding:8px 12px;border-radius:999px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap}
.r-mapchip[aria-current="true"]{background:var(--r-ink-strong);color:#fff;border-color:var(--r-ink-strong)}
/* All eight in one row wherever the row is its full 1144px: at 8px apart and
   12px inside, the chips came to 1172px, so one end was always cut off. By
   width and not by mode, so a tablet's carousel gets the same row. */
@media (min-width:900px){
  .r-map{gap:6px}
  .r-mapchip{padding:8px 10px}
}
.r-mapdot,.r-key{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 auto}
.k-full .r-mapdot,.r-key.k-full{background:var(--r-mint)}
.k-derived .r-mapdot,.r-key.k-derived{background:#8fb8dd}
.k-partial .r-mapdot,.r-key.k-partial{background:var(--r-gold)}
.r-maplegend{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:#5b83a6;margin:10px 0 0}
.r-maplegend .r-key{margin-left:14px}
.r-maplegend .r-key:first-child{margin-left:0}
@media (max-width:900px){
  .r-slide{grid-template-columns:1fr;gap:22px;padding-bottom:24px}
  .r-offset{inset:14px -14px -14px 14px}
  .r-slide-photo{aspect-ratio:5/4}
  .r-slide-text h3::after{margin-top:12px}
  .r-slide-plain{margin-top:12px}
}
/* ---- the four Assessment cards ---- */
/* Ticket 45 (ADR-0015): the Functional Needs Assessment is the third of four.
   Webflow's list is three columns 4em apart, and each card has 3.5em of
   padding and a 2.9em name; four of those do not fit one row (at 1440 the
   text column would be 215px, for a 199px button and a 264px
   "Psychoeducational"). So from 1280 the list is four across, with the gap it
   already has on a tablet (2em), 2.5em of padding and a 2.2em name;
   minmax(0,1fr), so a long name can never widen its column. Below 1280 a
   quarter of the row no longer holds the button (from 992 to 1439 the type
   scales with the window and the button does not), so the list is two by two,
   as Webflow already has it from 768 to 991. #explore, because Webflow's
   rules for these classes sit in media queries of their own.
   The name: 2.2em is the largest of 2.3, 2.2, 2.1 and 2.0 that leaves no card
   with more cells of its name under 3:1 (40px cells, large text) than main's
   has, and the new card none, at 1280, 1366, 1440, 1536 and 1920. 2.3em left
   Psychoeducational a cell at 2.58 at 1440, where main's lowest is 4.18. 2.1em
   and 2.0em left ADHD/ADD two cells under 3:1 at 1440 (lowest 1.33; main has
   none) and the new card one at 1280 or 1366 (2.92 to 2.99).
   The picture: the card's own cut (cut B, abc-everyday-brushing-teeth-card.jpg)
   is a square, so where a card is wider than tall it can only move up and
   down, and Webflow centres it. Clearance below = the least distance between
   either face and any line of the name or the button, worst over the
   parallax travel; negative is overlap. 992 to 1279: centred, the girl's face
   overlaps the name's second line by 37px at 1279, 22 at 1150, 8 at 1024 and
   7 at 992; at 30% the clearance is 0.6px at 1279, 0.2 at 1150, 1.4 at 1024
   and -0.6 at 992. 480 to 767: centred, the name overlaps the girl's face by
   up to 73.5px and the card's edge cuts the father's face (91% of it inside at
   767, 93% at 744); at 40% both faces are whole and the worst is -45px (the
   button over her chin at 767), so it is still not clear. Below 480 the
   picture is 120% of the card and hangs 10% above it; `top` of -6% sets it 4%
   lower, which takes the clearance from -44 to -33 at 430 and from -37.9 to
   -26.9 at 390 (the girl's face against the name's second line: still
   overlap). Tried: -8, -6, -5, -4, -2 and 0%. The picture's edge has to stay
   2px beyond the card's over the travel the picture has while the card is in
   the window (12px at these windows): -6% leaves 4.3px, -5% 1.5px, so -5%,
   -4%, -2% and 0 were refused. At the full 7% of Webflow's parallax (23px) the
   edge would show, which takes a window taller than about 1,200px (844 and
   900px were measured). Left as Webflow has
   it: 768 to 991, where the lowest scores are at 768 and 820, cards narrower
   than tall with no room to move the picture, so no height beats centred. The
   selector is the file's name, so it moves only this card's picture;
   lib/home-page.test.js checks that it names the file. */
@media (min-width:1280px){
#explore .services-2-list{grid-template-columns:repeat(4,minmax(0,1fr));grid-column-gap:2em;grid-row-gap:2em}
#explore .service-2-content{padding:2.5em}
#explore .service-2-item .heading.is-small-title{font-size:2.2em}
}
@media (min-width:992px) and (max-width:1279px){
#explore .services-2-list{grid-template-columns:1fr 1fr;grid-column-gap:2em;grid-row-gap:2em}
#explore .service-2-image img[src*="abc-everyday-brushing-teeth-card"]{object-position:50% 30%}
}
@media (min-width:480px) and (max-width:767px){
#explore .service-2-image img[src*="abc-everyday-brushing-teeth-card"]{object-position:50% 40%}
}
@media (max-width:479px){
#explore .service-2-image img[src*="abc-everyday-brushing-teeth-card"]{top:-6%}
}
/* ---- the hero's bar, one section lower ---- */
/* Sizes measured off the hero at 1440, not guessed: bar 110 tall, item padding
   22, thumbnail 88x64, title 24.2/400, subtitle 16.5, Explore min-width 242 and
   padding 33/55, radius 5, mint #65e0b5. */
.r-bar-sec{background:#fff;padding:clamp(40px,5.5vw,76px) 0;font-family:'Cabinet Grotesk Variable',system-ui,sans-serif}
/* At the foot of the assessments grid the bar takes the grid's own
   background — #c7ebde, read off `#explore`, not guessed — so it reads as the
   tail of that section rather than as a white band dropped between two
   coloured ones. Until 2026-10-03 the call to action came next. Since then
   (ticket 40) the section sits under the eight areas, and the navy band
   comes next (ticket 47): the mint ends on a plain edge against navy.
   Between the two tickets the funding band came next, mint on mint, parted
   only by that band's 5px rule. The rule and the padding are as they
   were. */
.r-bar-sec.is-seam{background:var(--r-mint-wash);padding:clamp(6px,1vw,14px) 0 clamp(34px,4vw,56px)}
.r-bar-wrap{width:90%;max-width:1344px;margin:0 auto}
/* The glass. Translucency shows what is behind it, and a white section has
   nothing behind it — so the bar carries the hero's own poster frame, darkened
   to a third and blurred, with a wash of brand blue over it thin enough to see
   straight through. The frame is sampled from the sky rather than the field:
   the field is soil, and through a blue wash it turns the bar brown. */
.r-bar{position:relative;isolation:isolate;display:flex;align-items:stretch;border:1px solid rgba(255,255,255,.26);border-radius:5px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 18px 40px rgba(2,33,61,.20)}
.r-bar::before{content:"";position:absolute;inset:-20px;z-index:0;background-image:url(/wf/assets/shared/65d79891bff18b8e6bc1370e_allbrainsclinic-slider-poster-00001.jpg);background-size:cover;background-position:50% 40%;filter:blur(7px) saturate(1.05) brightness(.34)}
.r-bar::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(100deg,rgba(42,141,218,.26) 0%,rgba(42,141,218,.15) 100%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.r-bar > *{position:relative;z-index:1}
.r-bar-items{flex:1;display:flex;align-items:stretch;min-width:0;flex-wrap:wrap}
.r-bar-item{display:flex;align-items:center;gap:27px;text-decoration:none;min-width:0;padding:22px}
.r-bar-img{flex:0 0 auto;width:88px;height:64px;border-radius:5px;background-image:var(--img);background-size:cover;background-position:50% 40%}
.r-bar-text{min-width:0}
.r-bar-text strong{display:block;color:#fff;font-size:clamp(19px,1.7vw,24px);font-weight:500;line-height:1.3}
.r-bar-text span{display:block;color:#cbe0f3;font-size:clamp(14px,1.15vw,16.5px);line-height:1.35;margin-top:2px}
.r-bar-item:hover .r-bar-text strong{color:#94e4c8}
.r-bar-explore{flex:0 0 auto;min-width:242px;background:#65e0b5;color:#073324;border:0;padding:20px clamp(28px,3.4vw,52px);display:flex;align-items:center;justify-content:space-between;gap:28px;font-family:inherit;font-size:clamp(17px,1.5vw,22px);font-weight:500;cursor:pointer;transition:background .18s ease}
.r-bar-explore:hover{background:#7ce0bd}
.r-caret{width:26px;height:26px;transition:transform .22s ease}
.r-bar-explore[aria-expanded="true"] .r-caret{transform:rotate(180deg)}
.r-bar-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,40px);margin-top:12px;padding:clamp(20px,2.6vw,32px);background:var(--r-ground);border:1px solid rgba(18,124,207,.16);border-radius:5px}
.r-bar-panel[hidden]{display:none}
.r-bar-colhead{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--r-blue-mid)}
.r-bar-col a{display:block;color:var(--r-ink-strong);text-decoration:none;font-size:15.5px;font-weight:600;padding:7px 0;border-bottom:1px solid rgba(18,124,207,.12)}
.r-bar-col a:last-child{border-bottom:0}
.r-bar-col a:hover{color:var(--r-blue)}
@media (max-width:860px){
  .r-bar{flex-direction:column;align-items:stretch}
  .r-bar-items{flex-direction:column;align-items:stretch}
  .r-bar-item{padding:16px 18px}
  .r-bar-explore{justify-content:center;gap:16px;padding:18px;min-width:0}
  .r-bar-panel{grid-template-columns:1fr}
}
/* ---- blog and news cards: picture, title, and the card itself is the link ---- */
.r-posts{display:grid !important;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,32px);width:100%}
.r-post{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(18,124,207,.14);border-radius:16px;overflow:hidden;text-decoration:none;transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
.r-post:hover{box-shadow:0 18px 38px rgba(2,66,117,.14);transform:translateY(-3px);border-color:var(--r-blue-mid)}
/* 16:9 cropped from the top, which at least takes the dark strip off the
   bottom of the pre-branded thumbnails. It cannot take off the headline burned
   into their middle — see the note on the index page. */
.r-post-img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--r-ground)}
.r-post-img img{width:100%;height:100%;object-fit:cover;object-position:50% 0%;display:block;transition:transform .35s ease}
.r-post:hover .r-post-img img{transform:scale(1.03)}
.r-post-body{display:flex;flex-direction:column;gap:14px;padding:clamp(16px,1.6vw,22px);flex:1;font-family:'Cabinet Grotesk Variable',system-ui,sans-serif}
.r-post-title{font-size:clamp(17px,1.5vw,20px);line-height:1.3;font-weight:700;color:var(--r-ink-strong)}
/* The site's own pill, measured off `.button` in the hero: 52 tall, 50 radius,
   11px uppercase at 1.1px tracking, mint fill with the dark green ink and its
   1px darker edge. The card gets it filled; the one under the grid gets the
   same geometry as an outline, so the page has one pill shape in two weights
   rather than four identical blocks. */
.r-post-more{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:16.5px;min-height:52px;padding:16.5px 22px 16.5px 28.6px;border-radius:50px;border:1px solid #186b4e;background:var(--r-mint);color:var(--r-mint-ink);font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;line-height:1;transition:background .2s ease}
.r-post-more svg{width:17px;height:11px;flex:0 0 auto;transition:transform .2s ease}
.r-post:hover .r-post-more{background:#65e0b5}
.r-post:hover .r-post-more svg{transform:translateX(4px)}
.r-posts-all{display:flex;justify-content:center;margin-top:clamp(24px,2.8vw,40px)}
.r-posts-all a{display:inline-flex;align-items:center;gap:16.5px;min-height:52px;padding:16.5px 22px 16.5px 28.6px;border-radius:50px;border:1.5px solid var(--r-mint);background:transparent;color:var(--r-mint-ink);font-family:'Cabinet Grotesk Variable',system-ui,sans-serif;font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;line-height:1;text-decoration:none;transition:background .2s ease,box-shadow .2s ease}
.r-posts-all a:hover{background:var(--r-mint);box-shadow:0 10px 24px rgba(78,207,162,.32)}
.r-posts-all svg{width:17px;height:11px;flex:0 0 auto;transition:transform .2s ease}
.r-posts-all a:hover svg{transform:translateX(4px)}
@media (max-width:900px){.r-posts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.r-posts{grid-template-columns:1fr}}
/* ---- the wait-time widget, copied statically for the standalone hero page ---- */
/* A definite width, not a minimum. `table-layout:fixed` inside an `auto` grid
   track has nothing to resolve `width:100%` against, so the card grew to fill
   the row and squeezed the headline into two words a line. */
.r-wait{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);border-radius:18px;padding:20px 24px;width:300px;max-width:100%;flex:0 0 auto}
.r-wait h4{margin:0;font-size:15px;color:#fff;font-weight:700}
.r-wait-sub{margin:2px 0 14px;font-size:12.5px;color:#9dc2e0}
/* Webflow's stylesheet paints tables and their alternate rows white; inside the
   hero that leaves white labels on white bands. Every level is cleared. */
.r-wait table,.r-wait thead,.r-wait tbody,.r-wait tr,.r-wait th,.r-wait td{background:transparent !important}
/* Fixed columns and lining figures, so counting 0 → 110 cannot shift the layout
   under the numbers while it runs. */
.r-wait table{width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed}
.r-wait th:nth-child(2),.r-wait th:nth-child(3){width:76px}
.r-wait .r-count{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.r-wait th{font-size:12px;font-weight:600;color:#9dc2e0;text-align:right;padding:4px 0 8px}
.r-wait th:first-child{text-align:left}
.r-wait td{padding:9px 0;font-size:16px;border-top:1px solid rgba(255,255,255,.14);text-align:right;color:#a8c9e6}
.r-wait td:first-child{text-align:left;color:#fff;font-size:14.5px}
.r-wait .r-abc{color:#65e0b5;font-weight:700}
.r-wait td a{color:inherit;text-decoration:none}
.r-wait td a:hover{text-decoration:underline}
.r-hero-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(24px,4vw,58px);align-items:center}
@media (max-width:860px){.r-hero-grid{grid-template-columns:1fr}.r-wait{width:100%}}
.r-pill,.r-pill-out{display:inline-flex;align-items:center;gap:16.5px;min-height:52px;padding:16.5px 22px 16.5px 28.6px;border-radius:50px;font-family:'Cabinet Grotesk Variable',system-ui,sans-serif;font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;line-height:1;text-decoration:none;transition:background .2s ease,box-shadow .2s ease}
.r-pill{border:1px solid #186b4e;background:var(--r-mint);color:var(--r-mint-ink)}
.r-pill:hover{background:#65e0b5}
.r-pill-out{border:1.5px solid var(--r-mint);background:transparent;color:var(--r-mint-ink)}
.r-pill-out:hover{background:var(--r-mint);box-shadow:0 10px 24px rgba(78,207,162,.32)}
.r-pill svg,.r-pill-out svg{width:17px;height:11px;flex:0 0 auto;transition:transform .2s ease}
.r-pill:hover svg,.r-pill-out:hover svg{transform:translateX(4px)}
/* ---- the band ---- */
/* Mint, not navy: the hero above it is navy and the eight areas below it are pale
   blue, so a navy band here would be a second navy block with a seam. Mint is
   also the reassuring half of the palette, which is the right register for a
   deadline a parent did not know about.
   (That was the band's first place, under the hero. Since 2026-10-03, ticket
   47, the navy band is directly above it and "What Makes Us Different" below:
   the 5px rule and the paler top start on navy.) */
.r-fund{background:linear-gradient(180deg,#dcf1e8 0%,var(--r-mint-wash) 100%);border-top:5px solid var(--r-mint);padding:clamp(38px,5vw,68px) 0;font-family:'Cabinet Grotesk Variable',system-ui,sans-serif;-webkit-font-smoothing:antialiased;scroll-margin-top:calc(var(--r-alert-h,0px) + 69px)}
/* The section's own eyebrow: the blue the rest of the site uses for these sits
   cold on mint, so it takes the band's green. */
.r-fund .r-eyebrow{color:#2f7d61}
.r-fund-grid{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(22px,3.6vw,56px);align-items:start}
.r-fund-side{border-right:1px solid rgba(17,82,59,.20);padding-right:clamp(14px,2vw,30px)}
.r-fund-n{font-size:clamp(62px,7.4vw,104px);line-height:.82;font-weight:700;color:var(--r-green);margin:6px 0 0;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.r-fund-nlabel{margin:12px 0 0;font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--r-mint-ink);line-height:1.35}
.r-fund-note{margin:14px 0 0;font-size:14px;line-height:1.5;color:#2f6b55;max-width:26ch}
.r-fund h2{font-size:clamp(27px,3.4vw,44px);line-height:1.06;font-weight:700;color:var(--r-ink-strong);margin:0 0 14px}
/* Two sentences, each starting its own line: what ends, then what takes its
   place, so the first is never read alone (ticket 39). Where a sentence has to
   wrap, on a phone, it breaks evenly rather than leaving one word behind. */
.r-fund h2 span{display:block;text-wrap:balance}
.r-fund-lede{font-size:clamp(16px,1.5vw,19px);line-height:1.55;color:#14493a;margin:0;max-width:56ch}
.r-fund-us{display:inline-flex;align-items:center;gap:10px;margin:16px 0 0;background:#fff;border-radius:999px;padding:9px 18px 9px 14px;font-size:14px;font-weight:600;color:var(--r-green);text-decoration:none;box-shadow:0 6px 16px rgba(2,66,117,.08)}
.r-fund-us span{width:9px;height:9px;border-radius:50%;background:var(--r-mint);flex:0 0 auto}
.r-fund-us:hover{box-shadow:0 10px 22px rgba(2,66,117,.14)}
.r-rail{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin:clamp(26px,3vw,38px) 0 clamp(22px,2.6vw,32px);padding:0;position:relative}
.r-rail::before{content:"";position:absolute;left:8px;right:8px;top:8px;height:2px;background:rgba(17,82,59,.20)}
.r-rail li{position:relative;padding:28px 16px 0 0}
.r-rail li::before{content:"";position:absolute;top:0;left:0;width:11px;height:11px;border-radius:50%;background:#fff;border:3px solid rgba(17,82,59,.30);box-sizing:content-box}
.r-rail li.is-now::before{background:var(--r-green);border-color:rgba(17,82,59,.22)}
.r-rail li.is-end::before{background:var(--r-gold);border-color:rgba(253,184,51,.35)}
.r-rail b{display:block;font-size:14.5px;font-weight:700;color:var(--r-ink-strong)}
.r-rail span{display:block;font-size:13.5px;line-height:1.4;color:#2f6b55;margin-top:4px;max-width:20ch}
.r-fund-ctas{display:flex;gap:14px;flex-wrap:wrap}
@media (max-width:900px){
  .r-fund-grid{grid-template-columns:1fr;gap:26px}
  .r-fund-side{border-right:0;border-bottom:1px solid rgba(17,82,59,.20);padding:0 0 20px;display:flex;align-items:baseline;gap:8px 16px;flex-wrap:wrap}
  /* The eyebrow keeps its own line; only the number and its label share one. */
  .r-fund-side .r-eyebrow{flex:0 0 100%;margin-bottom:2px}
  .r-fund-n{margin:0}
  .r-fund-nlabel{margin:0;max-width:14ch}
  .r-fund-note{margin:4px 0 0;max-width:none}
  .r-rail{grid-template-columns:1fr;gap:16px}
  .r-rail::before{left:5px;right:auto;top:6px;bottom:6px;width:2px;height:auto}
  .r-rail li{padding:0 0 0 26px}
  .r-rail li::before{top:3px}
  .r-rail span{max-width:none}
}
/* ---- the three doors, and the clinic's own line under them ---- */
.r-hub{background:#fff;padding:clamp(42px,6vw,84px) 0;font-family:'Cabinet Grotesk Variable',system-ui,sans-serif}
.r-hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,30px)}
.r-hub-card{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,2.4vw,30px);border-radius:16px;background:var(--r-ground);border:1px solid var(--r-blue-soft);text-decoration:none;transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
.r-hub-card:hover{box-shadow:0 18px 38px rgba(2,66,117,.14);transform:translateY(-3px);border-color:var(--r-blue-mid)}
.r-hub-card .r-tile{width:64px;height:64px}
.r-hub-card h3{margin:2px 0 0;font-size:clamp(18px,1.7vw,22px);line-height:1.2;font-weight:700;color:var(--r-ink-strong)}
.r-hub-card p{margin:0;font-size:15px;line-height:1.5;color:var(--r-ink)}
/* The card's own call to action is the site's pill, outlined — the same shape
   the blog cards carry filled, so the row is one component in two weights and
   not a fifth kind of link. */
.r-hub-card .r-pill-out{margin-top:auto;align-self:flex-start;background:#fff}
.r-hub-card:hover .r-pill-out{background:var(--r-mint)}
.r-hub-strip{margin-top:clamp(16px,2.2vw,26px);background:var(--r-mint-wash);border-radius:16px;padding:clamp(18px,2.2vw,26px) clamp(20px,2.6vw,32px);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.r-hub-strip p{margin:0;font-size:clamp(16px,1.5vw,19px);line-height:1.4;font-weight:600;color:var(--r-green);max-width:58ch}
@media (max-width:900px){.r-hub-grid{grid-template-columns:1fr}}
/* ---- the beat ---- */
/* The double thump the belt's dot has (src/css/funding-belt.css), declared
   here as well because the funding band's rail uses it on its end date, and
   the band has to keep beating on a page that has no belt. */
@keyframes r-thump{0%,64%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(253,184,51,.45)}14%{transform:scale(1.5);box-shadow:0 0 12px 3px rgba(253,184,51,.55)}30%{transform:scale(1)}44%{transform:scale(1.3);box-shadow:0 0 9px 2px rgba(253,184,51,.4)}}
@keyframes r-ring{0%{transform:scale(.5);opacity:1}55%{transform:scale(2.8);opacity:0}100%{opacity:0}}
/* ---- the band, one size down ---- */
/* Sitting under the eight areas it is a consequence, not an announcement, so
   every step of it comes down a size: the count 104 -> 66, the headline 44 ->
   32, the pills 52 -> 44 tall at the same radius and tracking. */
.r-fund.is-compact{padding:clamp(30px,3.6vw,52px) 0}
.r-fund.is-compact .r-fund-grid{grid-template-columns:232px minmax(0,1fr);gap:clamp(20px,3vw,44px)}
.r-fund.is-compact .r-eyebrow{font-size:12px;letter-spacing:.1em}
.r-fund.is-compact .r-fund-n{font-size:clamp(44px,4.6vw,66px)}
.r-fund.is-compact .r-fund-nlabel{font-size:12.5px;margin-top:8px}
.r-fund.is-compact .r-fund-note{font-size:13.5px;margin-top:10px}
.r-fund.is-compact h2{font-size:clamp(23px,2.4vw,32px);margin-bottom:10px}
.r-fund.is-compact .r-fund-lede{font-size:clamp(15px,1.25vw,17px);max-width:62ch}
.r-fund.is-compact .r-fund-us{font-size:13px;padding:7px 15px 7px 12px;margin-top:13px}
.r-fund.is-compact .r-rail{margin:clamp(20px,2.2vw,28px) 0 clamp(18px,2vw,24px)}
.r-fund.is-compact .r-rail li{padding-top:24px}
.r-fund.is-compact .r-rail b{font-size:13.5px}
.r-fund.is-compact .r-rail span{font-size:12.5px}
.r-fund.is-compact .r-pill,.r-fund.is-compact .r-pill-out{min-height:44px;padding:13px 18px 13px 24px;gap:13px;font-size:10.5px}
.r-fund.is-compact .r-pill svg,.r-fund.is-compact .r-pill-out svg{width:15px;height:10px}
/* The one rule here that is not the render's. The compact band's two columns
   above outrank the band's own phone rule (`.r-fund-grid{grid-template-columns:1fr}`
   at 900px, three classes against one), so on a phone the render kept a
   232px count column and squeezed the headline into the 100px beside it.
   Same fix, same specificity, one rule: one column under 900px. Small
   screens over parity, ADR-0012. */
@media (max-width:900px){.r-fund.is-compact .r-fund-grid{grid-template-columns:1fr;gap:26px}}
/* The one date on the rail that costs a family something, beating like the
   dots above it. */
.r-rail li.is-end::before{animation:r-thump 1.5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.r-rail li.is-end::before{animation:none}}
/* ---- the page ---- */
/* From the render's page stylesheet: the home page's body takes the clinic's
   ink and the system fallback after Cabinet Grotesk, over webflow.css's
   body rule, as it did on the reviewed page. Only the home page loads this
   file, so the rule reaches nothing else. */
body{margin:0;background:#fff;font-family:'Cabinet Grotesk Variable',system-ui,sans-serif;color:var(--r-ink)}
.r-hero-inner{position:relative;max-width:1240px;margin:0 auto;padding:clamp(48px,7vw,90px) clamp(16px,4vw,48px);color:#fff;font-family:'Cabinet Grotesk Variable',system-ui,sans-serif}
.r-hero-eyebrow{display:inline-block;background:rgba(253,184,51,.16);border:1px solid rgba(253,184,51,.55);color:#ffd88a;border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:600;margin:0 0 20px}
/* 2026-10-03: the headline is one 96-character sentence (owner decision, ADR-0014
   "The hero's words"). The render's 62px / 18ch rule was sized for the two-line
   "An assessment that says…"; this one wraps by itself (no <br/>: a hard break
   would force four lines at every desktop width) to three lines at 1440, four
   at 1024, two at 768 (single column) and six at 375, all inside the hero
   block — measured, not a target. `text-wrap: balance` evens the lines out so
   a phone does not end on a lone "BC."; a browser without it wraps the old
   way, which also fits. */
.r-hero-inner h1{font-size:clamp(28px,3.1vw,44px);line-height:1.08;font-weight:700;margin:0 0 18px;max-width:34ch;color:#fff;letter-spacing:-.01em;text-transform:none;text-wrap:balance}
.r-hero-inner p.r-hero-sub{font-size:clamp(16px,1.6vw,21px);line-height:1.55;color:#d7e7f5;max-width:60ch;margin:0 0 28px;opacity:1;font-weight:400}
/* The former headline, now the lead under the H1: white and a step larger than
   the line that follows it, so the two paragraphs read as lead then detail.
   Declared after the .r-hero-sub rule because the lead carries both classes
   and the two selectors tie on specificity. */
.r-hero-inner p.r-hero-lead{font-size:clamp(17px,1.75vw,23px);line-height:1.4;color:#fff;font-weight:500;max-width:46ch;margin:0 0 12px;text-wrap:balance}
/* 2026-10-03: the words that used to be a 62px headline are now 23px body text,
   and body text needs 4.5:1, not the 3:1 large text gets. Sampled with the
   glyphs transparent (video paused at 3 s), the brightest patch under the
   text — the pale figure on the right of the frame — gave the lead 4.1–4.3:1
   at its worst pixels and the H1 2.97:1, right on the line, and the frame
   changes as the video loops. Two layers fix it without touching the video or
   the Webflow overlay: a soft navy halo on the three text blocks, and a radial
   navy scrim behind the text column (the column's own ::before, inside its
   own stacking context so it sits above the video and under the words). Re-
   sampled: lead ≥ 7.8:1, sub ≥ 4.0:1 (p95 6.9:1), H1 ≥ 3.3:1 at its worst
   pixel. The scrim fades to nothing by 76% of its radius, so it reads as a
   vignette, not a box. */
.r-hero-inner h1,.r-hero-inner p.r-hero-sub{text-shadow:0 1px 2px rgba(2,33,61,.6),0 0 16px rgba(2,33,61,.5)}
.r-hero-grid>div:last-child{position:relative;z-index:0}
.r-hero-grid>div:last-child::before{content:"";position:absolute;z-index:-1;inset:-28px -48px;background:radial-gradient(ellipse at 50% 45%,rgba(2,33,61,.62) 0%,rgba(2,33,61,.42) 50%,rgba(2,33,61,0) 76%);pointer-events:none}
/* Inside the real hero, the block already has its own padding and centring. */
.hero-5-block-1 .r-hero-inner{padding-top:0;padding-bottom:0;width:100%}
.hero-5-block-1{display:flex;align-items:center;justify-content:center}
.r-hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.r-btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:14px 26px;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.r-btn-mint{background:var(--r-mint);color:var(--r-mint-ink)}
.r-btn-ghost{border:1.5px solid rgba(255,255,255,.55);color:#fff}
/* Today's card fails its own contrast: #9ecbee body on #2a8ddacc is about 2.1:1
   and the title about 2.8:1 (AA asks 4.5 and 3). Navy glass fixes that. */
.r-cta-a .cta-2-layout{background-color:rgba(2,33,61,.64);border-color:rgba(255,255,255,.18)}
.r-cta-a .is-cta-2-title{color:#fff;text-wrap:balance}
.r-cta-a .is-cta-2-text{color:#d1e3f5;text-wrap:pretty}
/* The stack sticks below the belt: the navigation, the belt's 40px and a gap. */
.r-rv .testimonials-card{top:calc(var(--r-nav-h,67px) + 60px)}
.r-rv .testimonials-card._2{top:calc(var(--r-nav-h,67px) + 80px)}
.r-rv .testimonials-card._3{top:calc(var(--r-nav-h,67px) + 100px)}
/* palette C1, the one chosen; C2 to C4 stayed on the playground */
.r-c1 .testimonials-card{background:#c7ebde}
.r-c1 .testimonials-card._2{background:#d1e3f5}
.r-c1 .testimonials-card._3{background:#fbe7b5}
.r-rv .testimonials-paragraph,.r-rv .testimonials-title{color:#022b4c}