/* ============================================================
   SMART REHAB — 2025 Brand Guidelines
   Blue #0664AD · Sky #1C8FDE · Teal #017B84 · Ink #231f20
   Pale #c2e1ef · Grays #c9c9c9 / #808285 · Barlow + Albert Sans
   Guide prints #3847a4 for light blue but its CMYK and RGB both
   resolve to #1C8FDE. Using #1C8FDE.
   ============================================================ */
:root{
  --blue:#0664AD; --sky:#1C8FDE; --teal:#017B84; --ink:#231f20;
  --pale:#c2e1ef; --gray-lt:#c9c9c9;
  /* TEXT GREY. The brand guide's #808285 measures 3.78:1 on our lightest band
     and 3.60:1 on the tint — under the 4.5:1 floor, and this site is read by
     people in their seventies and eighties on phones. Darkened to 5.03:1 and
     5.79:1. The guide value is kept as --gray-brand for swatches, rules and
     anywhere it is not carrying words. */
  --gray:#6B6E70; --gray-brand:#808285;
  --tint:#F2F8FC; --tint2:#EAF4FA; --paper:#F7FAFD; --body-ink:#39383A;
  /* WARM GROUND. The brand blues are cold on their own, and a pure #fff page
     under them reads like a hospital intake form. --ground is the paper the
     site is printed on: warm, barely there, and just far enough off white that
     a white card sitting on it looks like a physical thing. The cool --tint
     stays exactly as it was for alternating sections, so the page reads as
     paper and sky rather than two shades of the same grey. */
  /* GROUND. The alternation was warm paper against cool tint, and at full
     section height that contrast read as two different sites stitched
     together. Both bands are now blues a few percent apart: the rhythm is
     still legible as you scroll, but no band announces itself. The paper
     grain, the drawn rules and the torn edges carry the warmth instead of
     the background colour doing it. */
  /* THE HOUSE — grounds. Warm plaster, not clinical white. The two bands sit
     a few percent apart so the rhythm reads without either announcing itself,
     and #c2e1ef is promoted from a tint to a real ground used once per page. */
  --ground:#ffffff; --ground-2:#EDF6FA; --ground-deep:#c2e1ef; --ink-warm:#39383A;

  /* PATH ACCENT. Every audience enters through a different door and keeps its
     colour the whole way. Blue is the front of the house and belongs to
     patients and families. Teal is the back porch and belongs to therapists —
     which is the first time teal has meant something a reader can feel.
     The referral page stays neutral: a working queue, not a door. */
  --accent:#0664AD; --accent-soft:rgba(6,100,173,.12); --accent-mark:#0664AD;
  /* On the dark hero, teal at full strength measures 2.88:1 against the veil.
     The book's own #c2e1ef is the approved light of the palette and measures
     9.4:1 there, so dark grounds use it rather than a teal I mixed myself. */
  --teal-lt:#c2e1ef;
  --line:rgba(35,31,32,.12);
  --grad-primary:linear-gradient(112deg,#0664AD 0%,#231f20 100%);
  --grad-tertiary:linear-gradient(112deg,#017B84 0%,#231f20 100%);
  /* THE BOOK, PAGE 7: "The primary typefaces used for corporate communications
     are Albert Sans and Barlow." Titles Barlow Bold, subtitles Barlow Regular,
     body Albert Sans Regular. Newsreader and IBM Plex Mono are gone — the two
     faces now carry every role, separated by weight and tracking rather than
     by adding families. */
  /* ------------------------------------------------------------------
     THE SCALE. Four steps and nothing between them. There were fourteen
     heading sizes in this file and eleven of them sat between 2.1rem and
     3.6rem, which is not a scale, it is noise: every heading arrived at
     the same weight so none of them ranked. The gaps below are 1.4x,
     1.9x and 1.9x, which is wide enough that no reader could mistake one
     step for the one above it. Nothing is allowed a size of its own.
     The 6rem-11rem watermark is the one exception and it is not text.
     ------------------------------------------------------------------ */
  --t-eyebrow:clamp(.75rem,1vw,.8rem);        /* 12    - 12.8px */
  --t-body:1.125rem;                          /* 18px           */
  --t-section:clamp(1.9rem,3.4vw,2.125rem);   /* 30.4  - 34px   */
  --t-page:clamp(2.35rem,5.4vw,4rem);         /* 37.6  - 64px   */
  --display:"Barlow",system-ui,sans-serif;
  --title:"Barlow",system-ui,sans-serif;
  --body:"Albert Sans",system-ui,sans-serif;
  --mono:"Barlow",system-ui,sans-serif;
  --house:polygon(0 15%, 50% 0, 100% 15%, 100% 100%, 0 100%);
  /* The section-scale roof and floor. A 15% rise is right on a 300px photo
     and wrong on a 900px band, where it would eat a third of the section and
     drive the first line of text into the diagonal. 9% at section scale,
     4% below 700px where the bands are tallest relative to their width. */
  /* The roof and floor are drawn as triangles in the margin rather than cut
     out of the section, so there is no section-scale polygon any more. See
     .roofsec and .floorsec. */
  /* ------------------------------------------------------------------
     GROUNDS. Two grounds seven percent apart across forty sections is why
     the page read as one continuous stack. Six now, and they divide into
     two kinds. INTERIOR sections pull in, sit on white, and hold their
     content inside a bordered room. EXTERIOR sections run edge to edge on
     a deep ground with no container at all. Alternating the two gives the
     scroll expansion and contraction instead of a constant width.
     ------------------------------------------------------------------ */
  --pad-open:clamp(60px,6.4vw,96px);
  --pad-normal:clamp(44px,4.6vw,66px);
  --pad-tight:clamp(30px,3vw,40px);
  --room-w:1020px;
  --hdr:60px;

  /* ------------------------------------------------------------------
     COLOUR ROLES. Teal is not decorative. It has exactly one job.

     BLUE  (--blue) is the voice of the brand: every eyebrow, section
           label, heading accent, link, button, category, role, and
           focus ring. If it names or navigates, it is blue.

     TEAL  (--teal) does two jobs and only these two.
           1. Section labels. The small caps line that sits above a
              heading, on every page, plus the 01/02/03 counters that
              belong to one. If it introduces a section, it is teal.
           2. The site answering the reader: a ZIP that matched, a form
              that submitted, a comparison row resolving in our favour,
              a target market pinned on the map.
           Not badges, not names, not roles, not links. A status pill
           sitting in a list is a label for a thing, not a section
           heading, so it stays blue.

     The TEAL GRADIENT (--grad-tertiary) is a separate thing from teal
     as an accent. It is the brand book's tertiary gradient and it is
     the therapist side's emphasis surface: full-bleed blocks on the
     For Therapists page that need to stop the reader. Exactly one
     block uses it today. Patient-facing and brand-wide bands use
     --grad-primary. Do not mix them on one page.
     ------------------------------------------------------------------ */
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* THE PAGE HAS NO EDGES. On a phone, dragging past the top or the bottom
   rubber-bands the whole document and shows the canvas underneath it. Safari
   does not reliably honour overscroll-behavior at the document level, so the
   fix is not to stop the bounce but to make what it reveals the right colour.

   The canvas is ink, which is the footer's colour, so pulling up from the
   bottom reveals more footer instead of a white gap. Pulling down from the
   top now shows dark above the white header rather than white above white,
   which reads as the phone's own chrome rather than as the page ending.
   overscroll-behavior stays as well, for the browsers that do honour it. */
/* SCROLLING. overflow-x:clip on html does not create a scroll container, while
   overflow-x:hidden on body does, so the two together left the page with the
   root unable to scroll and the body pretending to be the scroller. That
   combination is a known way to end up with a wheel that does nothing while
   the scrollbar still works. The clip lives on body only now, and body never
   becomes a scroll container because clip, unlike hidden, does not make one. */
html{scroll-behavior:smooth;overscroll-behavior-y:none;background:var(--ink)}
body{margin:0;background:var(--ground);color:var(--body-ink);font-family:var(--body);
  font-size:18px;line-height:1.72;-webkit-font-smoothing:antialiased;overflow-x:clip;overscroll-behavior-y:none}
img{max-width:100%;display:block}
/* PRESSURE TEST GUARDS. Text lands on a ground it does not belong to for
   three structural reasons, not forty per-section ones: a long word that
   cannot break, a grid or flex child whose default minimum size is its
   content rather than zero, and an intrinsically wide element. Handled once,
   globally, so a section added later inherits the protection. */
/* NEVER HYPHENATE. hyphens:auto was here as an overflow guard and it broke
   "realize" across two lines in a column with 400px to spare, because auto
   hyphenation fires to balance a line, not only to rescue one. Words are not
   cut anywhere on this site, by a dash or otherwise: headings wrap between
   words only. Set explicitly rather than left to the default, so a browser or
   a lang attribute cannot turn it back on. */
h1,h2,h3,h4,.shead,.sub,.eyebrow,.pay,.mname,.stat .num,.calc .big{
  hyphens:manual;-webkit-hyphens:manual;overflow-wrap:normal;word-break:normal}
/* Body copy keeps the valve, because an email address or a URL with no space
   in it genuinely cannot wrap and would otherwise push the page sideways. */
p,li,blockquote,figcaption,summary,label,.lede{overflow-wrap:break-word;hyphens:manual;-webkit-hyphens:manual}
main :where(.split,.split2,.compare,.steps,.steps3,.facts,.doors,.quickrow,
  .arearow,.tlitem,.chapter,.mrow,.calc,.calcsub,.letter,.feature,.herogrid,
  .ideawrap,.overlap,.row2,.statin,.g2,.g3,.g4,.ownergrid,.expandgrid)>*{min-width:0}
main :where(.btnrow,.attrib,.miniper,.jobfilters){flex-wrap:wrap}
main :where(.btnrow,.attrib,.miniper,.jobfilters)>*{min-width:0}
table{max-width:100%}

/* PAPER GRAIN. Fixed to the viewport, not to a section, so the texture belongs
   to the sheet the site is printed on and does not scroll as a pattern. Very
   low opacity on purpose: it should be invisible as a texture and only felt as
   an absence of digital flatness. multiply keeps it out of the way of photos.
   Excluded on the referral page, which stays clinical. */
/* The paper grain came out here: it fought every photograph and read as blur
   on anything small. Warmth now comes from the ground colour itself. */
/* The door you came in decides the colour you see, all the way down. */
/* Patients enter at the front door in brand blue.
   Therapists come round the back porch, in teal.
   Referral partners use the door the staff use: ink, no colour at all, because
   a discharge planner is working a queue and colour is decoration to them.
   Our Story is the house itself, so it takes the one warm colour on the site —
   oak, the colour of a doorframe. Not blue, not teal, not black, and measured
   at 5.49:1 and 5.31:1 on the two grounds. */
/* PATH ACCENT, one colour per door, taken from the brand book swatches.
   Home + For Patients  C92 M63 Y2 K0   #0664AD  6.19:1 on white
   For Therapists       C87 M36 Y44 K8  #017B84  5.04:1
   Partners in Care     ink             #231f20  16.33:1
     The C76 swatch is the one place the book contradicts itself: its hex
     prints #3847a4, its CMYK and RGB both resolve to #1C8FDE, and those are
     different colours. Ink instead. A discharge planner is working a queue,
     not being invited through a door, and the page should not be built on
     the one value in the palette nobody can vouch for.
   Our Story            C22 M3 Y3 K0    #c2e1ef  1.37:1  CANNOT CARRY TEXT
   News + articles      C52 M43 Y41 K6  #808285  3.85:1  CANNOT CARRY TEXT

   --accent paints words, links, button labels, outlines and focus rings, so
   it has to clear 4.5:1. Two of the five swatches do not. For those, the book
   colour is kept as --accent-mark and used where it is a shape rather than a
   sentence: the nav marker, rules, and fills. Sentences use a darkened
   version of the same hue. Same treatment the greys already got. */
/* ------------------------------------------------------------------
   FOUR ROOMS. The same treatment on every tab is what made four audiences
   feel like one undifferentiated site. Each tab now has its own ground and
   its own rhythm, and only the footer is identical across all of them,
   because the footer is the foundation and it is what says these are rooms
   in one house rather than four separate sites.
   ------------------------------------------------------------------ */
/* PATIENTS. The most open thing on the site. She is in her seventies or
   eighties, and every additional element on screen is a cost, so: fewest
   sections per screen, widest padding, lightest grounds, longest measure. */
body[data-view="patients"]{--pad-normal:clamp(58px,6vw,88px);--pad-open:clamp(72px,7.6vw,116px);
  --pad-tight:clamp(40px,4.2vw,56px);--room-w:960px}
body[data-view="patients"] .lede{max-width:56ch;line-height:1.7}

/* THERAPISTS. Denser and faster: roughly twice the sections in the same
   vertical space, tighter rhythm, and the deep grounds carry more of the
   page. He is thirty-four, scrolling at eleven at night, and density reads
   to him as substance rather than as clutter. */
body[data-view="therapists"]{--accent:#017B84;--accent-soft:rgba(1,123,132,.13);--accent-mark:#017B84;
  --pad-normal:clamp(34px,3.4vw,48px);--pad-open:clamp(44px,4.4vw,64px);
  --pad-tight:clamp(22px,2.4vw,32px);--room-w:1080px}
/* PARTNERS. Deliberately the plainest thing on the site. A discharge planner
   is working a queue at four on a Friday and wants a form, not a brand
   experience: no angled edges anywhere, uniform rows, hairline borders,
   square corners, tight padding. Every clip-path is switched off here. */
body[data-view="refer"]{--accent:#231f20;--accent-soft:rgba(35,31,32,.08);--accent-mark:#231f20;
  --pad-normal:clamp(38px,3.6vw,52px);--pad-open:clamp(44px,4vw,62px);
  --pad-tight:clamp(24px,2.6vw,34px);--room-w:940px}
body[data-view="refer"] .formhouse{clip-path:none}
body[data-view="refer"] .roofsec::before,body[data-view="refer"] .floorsec::after{display:none}
body[data-view="refer"] .roofsec{margin-top:0}
body[data-view="refer"] .floorsec{margin-bottom:0}
body[data-view="refer"] .threshold::after{display:none}
body[data-view="refer"] .formhouse{border:1px solid var(--line);padding:clamp(24px,3vw,40px)}
body[data-view="refer"] section.contained>.wrap{border-radius:4px}
body[data-view="refer"] .card,body[data-view="refer"] .btn{border-radius:4px}
/* OUR STORY. The most editorial tab: asymmetric layouts, generous rhythm,
   and the one place the .housefig photo windows are allowed to concentrate. */
body[data-view="story"]{--accent:#1F6076;--accent-soft:rgba(31,96,118,.12);--accent-mark:#c2e1ef;--ground-deep:#c2e1ef;
  --pad-normal:clamp(52px,5.4vw,78px);--pad-open:clamp(64px,6.6vw,98px);
  --pad-tight:clamp(34px,3.6vw,48px);--room-w:1000px}
body[data-view="story"] .housefig{aspect-ratio:5/6.1}
body[data-view="news"],body[data-view="article"]{--accent:#6B6E70;--accent-soft:rgba(128,130,133,.14);--accent-mark:#808285}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

h1,h2{font-family:var(--display);font-weight:700;line-height:1.02;margin:0;color:var(--ink);letter-spacing:-.015em}
h3,h4{font-family:var(--display);font-weight:600;line-height:1.14;margin:0;color:var(--ink);letter-spacing:-.014em}
h1{font-size:var(--t-page);letter-spacing:-.034em}
h2{font-size:var(--t-section);letter-spacing:-.022em}
h3,h4{font-size:var(--t-body);font-weight:600;letter-spacing:-.01em}
h4{font-size:1.05rem;letter-spacing:-.01em}
/* HIGHLIGHT. The accent phrase in a headline was carried by colour alone,
   which is invisible to anyone who does not know the palette. Now it is
   underlined by hand: one pass of a broad nib, slightly heavier on the exit,
   sitting close under the baseline. Blue, because this is the brand speaking
   rather than the site answering. Repeats horizontally so it fits any phrase
   length and wraps with the line. */
.hl{color:var(--accent);position:relative;padding-bottom:.06em}
/* The drawn underline had brand blue baked into the SVG, so it stayed blue
   on a teal or oak path. Drawn as a masked block instead: the shape comes
   from the mask, the colour from the accent. */
.hl::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.34em;
  background:currentColor;opacity:.42;pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='12' viewBox='0 0 240 12' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M2 8.2C40 5.1 78 4.4 118 5.2c40 .8 78 2.1 120 .9' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left bottom/100% 100%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='12' viewBox='0 0 240 12' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M2 8.2C40 5.1 78 4.4 118 5.2c40 .8 78 2.1 120 .9' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left bottom/100% 100%}
/* Subtitle is Barlow Regular, exactly as the book sets it. */
.sub{font-family:var(--display);font-weight:400;font-style:italic;font-size:var(--t-body);color:var(--sky);line-height:1.5;letter-spacing:-.004em}
p{margin:0 0 1.05rem}
/* Section headings sat flush against the paragraph beneath them: every
   h1-h4 above carries margin:0 and p has a bottom margin only, so the gap
   was line-height alone. Scoped to #view so it reaches page content on
   every view without loosening the header or the footer columns, and to
   the adjacent sibling so a heading introducing a grid or a list is not
   affected. Hero ledes carry an inline margin-top and are unchanged. */
#view h1+p,#view h2+p,#view h3+p,#view h4+p{margin-top:.85rem}
.eyebrow{font-family:var(--mono);font-weight:500;font-size:var(--t-eyebrow);letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);display:block;margin:0 0 1.1rem;width:fit-content}
/* SECTION MARKER. The house at 11px opens every section on the site. It is
   the one asset nobody else can use, it costs nothing to repeat, and it takes
   the colour of the door the reader came in through. */
/* THE SECTION LABEL MARK. It was a drawn dash. It is the house, at label
   scale, painted in currentColor so it takes whatever accent the page it
   sits on is using: blue on home and patients, teal on therapists, ink on
   Partners in Care, the darkened pale on Our Story, grey on News. Same
   polygon the photographs and the section rooflines are cut with, so the
   mark, the windows and the architecture are all literally the same shape.
   No new artwork. */
.eyebrow::before{content:"";display:inline-block;width:13px;height:13px;
  vertical-align:-1px;margin-right:11px;background:currentColor;clip-path:var(--house)}
/* Inside a card the eyebrow labels the card, not a section. No rule, centred,
   and blue, so it never competes with the teal section label above it. */
.card .eyebrow{color:var(--accent);text-align:center;width:100%;margin-bottom:.7rem}
.card .eyebrow::before{display:none}
.card .eyebrow+h3,.card .eyebrow~p{text-align:center}
.lede{font-size:var(--t-body);line-height:1.62;max-width:60ch}
.small{font-size:.9rem;color:var(--gray)}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.narrow{max-width:860px}
.shead{max-width:26ch}
/* Some headings are written to land as a single line. 26ch breaks them. */
.shead.oneline{max-width:none;font-size:var(--t-section)}

/* MOTION. Everything settles rather than arrives. The old 20-24px slide read
   as content flying in from off-screen, which is the house style of every
   template on the internet. A 7px rise with a hair of scale and a slow ease
   looks like the page is coming to rest, and you notice it only if you look. */
.reveal{opacity:0;transform:translateY(7px) scale(.994)}
.reveal.in{opacity:1;transform:none;transition:opacity .82s cubic-bezier(.22,.61,.24,1),transform .82s cubic-bezier(.22,.61,.24,1)}
@keyframes rise{from{opacity:0;transform:translateY(9px) scale(.995)}to{opacity:1;transform:none}}
@keyframes grow{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.h-a{animation:rise .9s cubic-bezier(.22,.61,.24,1) .05s both}
.h-b{animation:rise .9s cubic-bezier(.22,.61,.24,1) .18s both}
.h-c{animation:rise .9s cubic-bezier(.22,.61,.24,1) .31s both}
.h-d{animation:rise .9s cubic-bezier(.22,.61,.24,1) .44s both}
.h-img{animation:grow 1.15s cubic-bezier(.22,.61,.24,1) .2s both}

/* demo bar */
.demobar{background:var(--ink);color:#E9E9EA;font-family:var(--mono);font-size:.71rem;padding:7px 0;position:relative;z-index:1}
.demobar .wrap{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.demobar b{color:var(--sky)}
.tools{display:flex;gap:7px;flex-wrap:wrap}
.tbtn{background:transparent;border:1px solid rgba(255,255,255,.3);color:#E9E9EA;font-family:var(--mono);font-size:.69rem;padding:4px 11px;border-radius:99px;cursor:pointer}
.tbtn:hover{background:rgba(255,255,255,.1)}
.tbtn[aria-pressed="true"]{background:var(--sky);border-color:var(--sky);color:#062338;font-weight:500}

/* header */
.announce{background:var(--pale);color:var(--ink);font-family:var(--title);font-weight:500;font-size:.92rem;padding:11px 0;display:none;text-align:center}
.announce.on{display:block}
/* THE NAV IS NOT A ROOM. It was a full-width bar with a rule under it, which
   on a page built from horizontal bands read as one more band. It now floats:
   narrower than the content, rounded, shadowed, over the page rather than
   part of it. That also frees the hero to run to the top edge of the window.
   It is a fixed sibling of <main>, so no clipped section can ever contain
   it. */
/* Fixed, flush to the top, full width, opaque, one row. The ESPN model: the
   bar never leaves, and rather than shrinking type until the links vanish it
   sheds the non-navigation elements in order and then, well below any
   desktop width, hands the whole thing to a menu. ESPN collapses at about
   780px; this collapses at 900, and even at 940 the bar still carries the
   logo, all six links and the primary button. */
header.site{position:fixed;top:0;left:0;right:0;z-index:100;background:#fff;
  border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(35,31,32,.04)}
body{padding-top:var(--hdr)}
/* HEADER, TWO ROWS. The single row asked the logo, six nav items, two
   buttons and a login link to share about 1,280px, which they never did:
   the nav was allowed to shrink below its own contents while its buttons
   refused to break, so "News" slid underneath "Schedule an evaluation".
   Splitting it removes the competition rather than negotiating it. Row one
   is identity and action, row two is navigation, and the nav now has the
   full width of the page to itself at every size. */
header.site .wrap{display:flex;align-items:center;column-gap:10px;flex-wrap:nowrap;
  max-width:none;height:var(--hdr);padding:0 24px}
.brand{line-height:0;display:flex;align-items:center;flex:0 0 auto}
.brand img{height:32px;width:auto;min-width:100px}
.brandfall{font-family:var(--title);font-weight:700;font-size:1.4rem;color:var(--ink);display:none}
/* The nav is never allowed to shrink below its own contents. It was set to
   flex:0 1 auto with overflow-x:auto, which meant that on a narrow window it
   quietly scrolled Our Story and News out of sight with no scrollbar and no
   affordance: links that exist but cannot be seen or reached. Now it holds
   max-content, and when the row genuinely runs out of space the whole nav is
   replaced by a menu button that contains every link. Nothing is ever
   present-but-invisible. */
/* Never shrinks below its own contents and never scrolls: a link that is
   present but off-screen with no scrollbar is worse than one behind a
   labelled button. When the row genuinely runs out, the menu takes over. */
nav.main{display:flex;gap:0;order:0;flex:0 0 auto;min-width:max-content;flex-wrap:nowrap;
  justify-content:flex-start;margin:0 0 0 16px;overflow:visible}
nav.main button{background:none;border:0;cursor:pointer;font-family:var(--title);font-weight:500;
  font-size:.88rem;padding:0 10px;height:var(--hdr);border-radius:0;color:var(--ink);
  position:relative;white-space:nowrap;flex:0 0 auto}
nav.main button:hover{color:var(--accent)}
nav.main button[aria-current="page"]{color:var(--accent);font-weight:600}
/* The active marker is a rule under the word rather than a house tick beside
   it. On its own row the nav reads as a tab strip, and a tab strip underlines. */
nav.main button[aria-current="page"]::after{content:"";position:absolute;left:10px;right:10px;bottom:0;
  height:3px;background:var(--accent)}
.navcta{background:#fff;color:var(--accent);font-family:var(--title);font-weight:600;font-size:.86rem;
  padding:8px 13px;border-radius:4px;white-space:nowrap;border:2px solid var(--accent);cursor:pointer;flex:0 0 auto;
  transition:background .18s ease,color .18s ease}
.navcta:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.ctagroup{display:flex;gap:8px;align-items:center;flex:0 0 auto;margin-left:auto;padding-left:14px}
/* PORTAL LINK. Deliberately not a third button. The header already spends its
   weight on one solid primary and one outline, and a staff sign-in competing
   with "Schedule an evaluation" would be the site shouting at the wrong
   person. It reads as a quiet link with a key, gains an underline on hover,
   and drops out below 900px where the header wraps — mobile staff get it in
   the footer and on the therapist page instead. */
.navlogin{display:inline-flex;align-items:center;gap:7px;font-family:var(--title);font-weight:600;
  font-size:.82rem;color:var(--ink);padding:9px 4px;margin-left:6px;white-space:nowrap;
  border-bottom:1.5px solid transparent;transition:color .18s ease,border-color .18s ease}
.navlogin:hover{color:var(--accent);border-bottom-color:var(--accent)}
.navlogin svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* THE MENU. Hidden until 900px, which is far below any desktop or half
   window. It carries every nav link plus both buttons plus the portal login,
   so nothing the bar sheds on the way down is actually lost. */
.menubtn{display:none;align-items:center;justify-content:center;width:38px;height:38px;
  background:none;border:0;padding:0;cursor:pointer;color:var(--ink);flex:0 0 auto}
.menubtn i{display:block;width:20px;height:2px;background:currentColor;position:relative}
.menubtn i::before,.menubtn i::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor}
.menubtn i::before{top:-6px}.menubtn i::after{top:6px}
.menubtn[aria-expanded="true"] i{background:transparent}
.menubtn[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)}
.menubtn[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)}
#navPanel{display:none;position:fixed;top:var(--hdr);left:0;right:0;z-index:99;background:#fff;
  border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(35,31,32,.16);
  max-height:calc(100svh - var(--hdr));overflow-y:auto}
#navPanel.open{display:block}
#navPanel .panelin{padding:6px 20px 22px}
#navPanel .plink{display:block;width:100%;text-align:left;background:none;border:0;
  border-bottom:1px solid var(--line);padding:16px 2px;cursor:pointer;font-family:var(--title);
  font-weight:600;font-size:1.02rem;color:var(--ink)}
#navPanel .plink[aria-current="page"]{color:var(--accent)}
#navPanel .panelcta{display:flex;flex-direction:column;gap:10px;margin-top:18px}
#navPanel .panelcta .btn{width:100%;text-align:center}
.navcta.ghostcta{background:#fff}
.navcta.ghostcta:hover{background:var(--accent);color:#fff}
/* ALL SIX LINKS, ALWAYS VISIBLE. Nothing in the nav is ever hidden behind a
   control. What gives way, in order, is everything that is not a nav link:
   the portal link first, then the secondary button, then the primary button,
   then the logo shrinks and the links tighten. Only when the six links alone
   will no longer share a line with the logo does the header become two rows,
   which keeps every destination on screen at the cost of header height.

   Measured against the real row: logo 240, six links 610, buttons 261,
   portal link 134, gutters 80. */
/* THE LADDER. Priority order, measured against the real row: the six links
   are the first thing to go and the three actions are the last, because the
   links have a menu to fall back into and the actions do not. Nothing that
   leaves the bar leaves the site: the menu carries all six links, both
   buttons and the portal login at every width.

   Full row 1,341px: logo 240, links 610, buttons 261, portal link 134,
   gutters and gaps 96. */
@media(max-width:1440px){
  /* Step one costs nothing. Everything is still on the bar, just tighter. */
  .brand img{height:28px;min-width:0}
  nav.main{margin-left:10px}
  nav.main button{font-size:.78rem;padding:0 6px}
  nav.main button[aria-current="page"]::after{left:6px;right:6px}
  .navcta{font-size:.75rem;padding:7px 10px}
  .navlogin{font-size:.76rem}
  header.site .wrap{padding:0 16px;column-gap:6px}
}                                                        /* needs 1,105 */
@media(max-width:1200px){
  /* Step two: the links go into the menu, all three actions stay. This is
     the width a half screen lands in, and it is the whole point of the
     order. Collapsing the links frees about 490px and the actions need
     roughly 370 of it. */
  nav.main{display:none}
  .menubtn{display:inline-flex}
  .brand{margin:0 auto 0 4px}
}                                                        /* needs   665 */
@media(max-width:740px){.navlogin{display:none}}         /* needs   530 */
@media(max-width:620px){.navcta.ghostcta{display:none}}  /* needs   438 */
@media(max-width:500px){
  .ctagroup{display:none}
  /* Menu button and logo only at this width, so the bar does not need the
     full 60px it was sized for on a desktop row carrying three buttons. */
  :root{--hdr:54px}
  .brand img{height:28px}
}         /* needs   276 */
@media(max-width:1240px){header.site .wrap{padding:0 16px}}
@media(max-width:560px){.ctagroup{width:100%;margin-left:0}.ctagroup .navcta{flex:1;text-align:center}}

/* buttons */
.btn{background:#fff;color:var(--accent);border:2px solid var(--accent);border-radius:4px;padding:14px 26px;
  font-family:var(--title);font-weight:600;font-size:1.02rem;cursor:pointer;display:inline-block;
  transition:background .18s ease,color .18s ease,transform .18s ease}
.btn:hover,.btn:focus-visible{background:var(--accent);color:#fff;transform:translateY(-1px)}
/* Exactly one .primary per view, and only where it stands alone. A solid
   button beside an outlined one is what read as "pre-selected"; a solo solid
   button is just the main action. */
/* Primary is now weight, not fill: same white ground and blue outline as every
   other button, carrying a heavier border and letter-spacing so it still leads
   the eye. Filling one button solid made it look like a foreign element
   dropped into the section rather than the most important thing in it. */
.btn.primary{background:#fff;color:var(--accent);border-color:var(--accent);border-width:2.5px;font-weight:700}
.btn.primary:hover,.btn.primary:focus-visible{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.ghost{background:#fff;color:var(--accent);border:2px solid var(--accent);padding:14px 26px}
.btn.ghost:hover{background:var(--accent);color:#fff}
.btn.white{background:#fff;color:var(--accent)} .btn.white:hover{background:var(--pale);color:var(--ink)}
.btn{text-align:center}
.btn.sm{padding:11px 18px;font-size:.9rem;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
/* Dark surfaces: identical logic, inverted. Every button rests as a white
   outline and fills solid white on hover. The colour is restated on hover
   because otherwise the label stays white and disappears into the fill. */
.deepband .btn,.deepband .btn.white,
#stickybar .btn,#stickybar .btn.white,
.expandgrid .btn,.expandgrid .btn.white,
.deep .btn,.deep .btn.white{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.75)}
.deepband .btn:hover,.deepband .btn.white:hover,
#stickybar .btn:hover,#stickybar .btn.white:hover,
.expandgrid .btn:hover,.expandgrid .btn.white:hover,
.deep .btn:hover,.deep .btn.white:hover{background:#fff;color:var(--accent);border-color:#fff}
.btnrow{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
/* On a phone, buttons in a row wrap into a ragged stack: one full-width, two
   half-width, edges that do not line up with each other or with the text
   above them. Every button goes full width instead, which lines up every
   edge, gives a 44px+ target the width of the screen, and reads in the order
   we wrote them. */
@media(max-width:560px){
  .btnrow{flex-direction:column;align-items:stretch;gap:10px}
  .btnrow>.btn,.btnrow>a.btn,.btnrow>button{width:100%;text-align:center;justify-content:center}
  .btnrow .small{text-align:center}
}
.hero .btnrow{margin-top:22px}

/* sections */
/* One vertical rhythm for the whole site. Every section pays the same top and
   bottom padding, so the gap between any two sections is identical no matter
   which pair meets. .tight is kept as a hook but no longer changes spacing;
   nothing should set section padding inline. */
section{padding:var(--pad-normal) 0}
section.open{padding:var(--pad-open) 0}

/* ---------- the six grounds ---------- */
/* section.g-* rather than .g-*: an authored ground outranks .tinted on
   specificity, not on source order, so it cannot be undone by a later rule
   or by a class added at runtime.

   Three of these are LIGHT grounds (#ffffff, #EDF6FA, #c2e1ef) and three are
   DEEP (#0664AD, #017B84, #231f20). Deep grounds are punctuation: a page gets
   at most three, and every one has a light section above it and below it,
   because two saturated grounds meeting with nothing between them reads as
   mud rather than as a decision. */
section.g-white{background:var(--ground)}
section.g-mist{background:var(--ground-2)}
section.g-sky{background:#c2e1ef}
section.g-blue{background:var(--blue)}
section.g-teal{background:var(--teal)}
section.g-ink{background:var(--ink)}
/* Verified against white, not estimated. #0664AD 6.19:1, #017B84 5.04:1,
   #231f20 16.33:1. Supporting text is held at .9 on blue and ink (5.33:1 and
   13.4:1) and at .94 on teal, because .9 there measures 4.41:1 and the floor
   is 4.5:1. Eyebrows use the book's own #c2e1ef, which is 9.4:1 on ink. */
.g-blue,.g-teal,.g-ink{color:#fff}
.g-blue h1,.g-blue h2,.g-blue h3,.g-blue h4,
.g-teal h1,.g-teal h2,.g-teal h3,.g-teal h4,
.g-ink h1,.g-ink h2,.g-ink h3,.g-ink h4{color:#fff}
.g-blue .lede,.g-blue p,.g-ink .lede,.g-ink p{color:rgba(255,255,255,.9)}
.g-teal .lede,.g-teal p{color:rgba(255,255,255,.94)}
.g-blue .eyebrow,.g-teal .eyebrow,.g-ink .eyebrow{color:var(--pale)}
.g-blue .small,.g-teal .small,.g-ink .small{color:rgba(255,255,255,.82)}
.g-blue .btn,.g-teal .btn,.g-ink .btn{background:#fff;color:var(--ink);border-color:#fff}
.g-blue .btn:hover,.g-teal .btn:hover,.g-ink .btn:hover{background:transparent;color:#fff}
/* Children that assume a light ground. Cards, rows, pills, rules and icon
   marks all default to blue-on-white and would have gone invisible or, in the
   case of the area rows, painted a 66% white hover under white text. */
.g-blue .card,.g-teal .card,.g-ink .card{background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.24);color:#fff}
.g-blue .card:hover,.g-teal .card:hover,.g-ink .card:hover{border-color:#fff}
.g-blue .card h3,.g-teal .card h3,.g-ink .card h3,
.g-blue .card .eyebrow,.g-teal .card .eyebrow,.g-ink .card .eyebrow{color:#fff}
.g-blue .card li,.g-teal .card li,.g-ink .card li{color:rgba(255,255,255,.88)}
.g-blue .arearow,.g-teal .arearow,.g-ink .arearow{border-bottom-color:rgba(255,255,255,.2)}
.g-blue .arearow:hover,.g-teal .arearow:hover,.g-ink .arearow:hover{background:rgba(255,255,255,.08)}
.g-blue .arearow h3,.g-teal .arearow h3,.g-ink .arearow h3{color:#fff}
.g-blue .arealocal,.g-teal .arealocal,.g-ink .arealocal,
.g-blue .mtick,.g-teal .mtick,.g-ink .mtick,
.g-blue .ic,.g-teal .ic,.g-ink .ic{color:var(--pale)}
.g-blue .arearow::before,.g-teal .arearow::before,.g-ink .arearow::before{background:var(--pale)}
.g-blue .status,.g-teal .status,.g-ink .status{background:rgba(255,255,255,.14);color:#fff;
  border:1px solid rgba(255,255,255,.3)}
.g-blue .splitlab,.g-teal .splitlab,.g-ink .splitlab{color:rgba(255,255,255,.8)}
.g-blue .idealist li::before,.g-teal .idealist li::before,.g-ink .idealist li::before{background:var(--pale);opacity:.9}
.g-blue .il,.g-teal .il,.g-ink .il{color:var(--pale)}
/* Components found in the audit that still assumed a light ground. Each is
   scoped to the dark-ground class only; the bare selector keeps dark text. */
.g-blue .tlitem,.g-teal .tlitem,.g-ink .tlitem{border-top-color:rgba(255,255,255,.2)}
.g-blue .tlitem .t,.g-teal .tlitem .t,.g-ink .tlitem .t{color:var(--pale)}
.g-blue .tlitem h4,.g-teal .tlitem h4,.g-ink .tlitem h4{color:#fff}
.g-blue .tlitem p,.g-teal .tlitem p,.g-ink .tlitem p{color:rgba(255,255,255,.9)}
.g-blue .step::before,.g-teal .step::before,.g-ink .step::before{color:var(--pale);opacity:.75}
.g-blue .step h4,.g-teal .step h4,.g-ink .step h4{color:#fff}
.g-blue .step p,.g-teal .step p,.g-ink .step p{color:rgba(255,255,255,.9)}
.g-blue .idealist li,.g-teal .idealist li,.g-ink .idealist li{border-top-color:rgba(255,255,255,.2)}
.g-blue .idealist p,.g-teal .idealist p,.g-ink .idealist p{color:rgba(255,255,255,.92)}
.g-blue .shead,.g-teal .shead,.g-ink .shead{color:#fff}
.g-blue .hl,.g-teal .hl,.g-ink .hl{color:var(--pale)}
.g-blue .mrow .mk a,.g-teal .mrow .mk a,.g-ink .mrow .mk a{color:var(--pale)}
.g-blue .freeask,.g-teal .freeask,.g-ink .freeask{color:var(--pale)}
.g-blue .attrib,.g-teal .attrib,.g-ink .attrib{color:rgba(255,255,255,.82)}
.g-blue .attrib b,.g-teal .attrib b,.g-ink .attrib b{color:#fff}
.g-blue .qcard .who,.g-teal .qcard .who,.g-ink .qcard .who{color:var(--pale)}
.g-blue .qcard .whor,.g-teal .qcard .whor,.g-ink .qcard .whor{color:rgba(255,255,255,.78)}
.g-blue .cmphint,.g-teal .cmphint,.g-ink .cmphint{color:rgba(255,255,255,.78)}
.g-blue .ziphint,.g-teal .ziphint,.g-ink .ziphint{color:rgba(255,255,255,.78)}
.g-blue .ziplabel,.g-teal .ziplabel,.g-ink .ziplabel{color:#fff}
.g-blue .job,.g-teal .job,.g-ink .job{border-color:rgba(255,255,255,.2)}
.g-blue .housefig,.g-teal .housefig,.g-ink .housefig{background-color:rgba(255,255,255,.12)}
.g-blue .housewrap::before,.g-teal .housewrap::before,.g-ink .housewrap::before{background:rgba(255,255,255,.22)}
.g-blue .housebadge,.g-teal .housebadge,.g-ink .housebadge{background:#fff}
.g-blue .housebadge .n,.g-teal .housebadge .n,.g-ink .housebadge .n{color:var(--blue)}
.g-blue .housebadge .t,.g-teal .housebadge .t,.g-ink .housebadge .t{color:var(--ink)}
/* Found in the audit: the ghost and white button variants and the prototype
   spec notes all set ink, and all three appear inside dark sections. */
.g-blue .btn.ghost,.g-teal .btn.ghost,.g-ink .btn.ghost,
.g-blue .btn.white,.g-teal .btn.white,.g-ink .btn.white{background:#fff;color:var(--ink);border-color:#fff}
.g-blue .btn.ghost:hover,.g-teal .btn.ghost:hover,.g-ink .btn.ghost:hover,
.g-blue .btn.white:hover,.g-teal .btn.white:hover,.g-ink .btn.white:hover{background:transparent;color:#fff;border-color:#fff}
.g-blue .note,.g-teal .note,.g-ink .note{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.92)}
.g-blue .note b,.g-teal .note b,.g-ink .note b{color:#fff}
/* .expandgrid shared a block with four dark containers and was taking white
   button text on a light ground. Given its own rule. */
.expandgrid .btn,.expandgrid .btn.white{background:#fff;color:var(--accent);border-color:var(--accent)}
.expandgrid .btn:hover,.expandgrid .btn.white:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
/* #0664AD on #c2e1ef measures 4.50:1, which clears the floor by nothing at
   all at 12px. Darkened to 6.19:1 for the label and the links on that ground. */
.g-sky .eyebrow,.g-sky a:not(.btn){color:#054E86}
/* #808285 measures 3.79:1 on #c2e1ef, so muted text goes to full ink there. */
.g-sky .lede,.g-sky .small,.g-sky p{color:var(--body-ink)}

/* ---------- contained: a panel that sits ON a ground ----------
   The panel is only legible where the ground it sits on is a different
   colour, so .contained forces the mist ground and puts a white panel on it.
   No border. The colour difference is the edge. */
section.contained{background:var(--ground-2);padding:var(--pad-normal) 0}
section.contained>.wrap{max-width:var(--room-w);background:#fff;border-radius:18px;
  padding:clamp(28px,3.8vw,52px) clamp(22px,3.2vw,46px)}

/* THE ROOM, BEHIND THE HOUSE. Two failed placements before this one, and both
   failures are worth recording. The first put the photograph behind the whole
   section, where .contained lays a solid white panel over everything, so all
   that showed was a sliver in the padding. The second put it inside the house
   itself, which never rendered at all: the base .formhouse rule sits 77,000
   characters further down this stylesheet and sets `background` as a
   shorthand, which wipes out any background-image declared earlier. A
   shorthand quietly resetting a longhand set elsewhere is the most common way
   CSS fails silently, and it cost two rounds here.

   So: the photograph is the ground of the white panel, and the blue house sits
   on it solid. The room is the setting, the house is the thing in the room,
   and the form has an opaque ground under every field. */
section.bookroom{background:var(--ground-2)}
section.bookroom>.wrap{
  background-color:#fff;
  /* Sharp, not blurred. The wash carries the legibility instead: 88 to 93
     percent rather than 80 to 88, which buys back what the blur was doing for
     the text without hiding the room. */
  background-image:linear-gradient(180deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.93) 100%),
                   url("images/kitchen.jpg");
  background-size:cover,cover;
  background-position:center,center 55%;
  background-repeat:no-repeat,no-repeat;
  box-shadow:0 22px 55px rgba(35,31,32,.12)}
/* The heading and lede now sit on the room rather than on flat white, so the
   muted grey they used goes to full ink. */
section.bookroom>.wrap>.lede{color:var(--ink)}
/* ---------- exterior: edge to edge, deep ground, no container ---------- */
section.exterior{padding:var(--pad-open) 0}
section.exterior>.wrap{max-width:1240px}
section.tightb{padding-bottom:clamp(24px,3vw,36px)}
/* A centred icon over a left-aligned heading reads as two unrelated marks.
   The heading centres with the icon; the paragraph below stays left, because
   centred body copy is the thing that makes a page feel like a brochure. */
.card .pad>.qicon{display:block;margin:0 auto 14px;width:30px;height:30px;flex-basis:30px;color:var(--accent)}
.card .pad>.qicon+h3{text-align:center}
.card .pad>.qicon svg{stroke-width:2}
.jobfilters{display:flex;flex-direction:column;gap:16px;margin-top:30px}
.fgroup{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.flab{font-family:var(--title);font-weight:700;font-size:.86rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink);flex:0 0 104px}
.filt{border:1.5px solid var(--accent);background:#fff;color:var(--accent);border-radius:99px;
  padding:11px 20px;font-family:var(--title);font-weight:600;font-size:.9rem;cursor:pointer;min-height:44px}
.filt:hover{background:var(--tint2)}
.filt[aria-pressed="true"]{background:var(--accent);color:#fff}
.selwrap{position:relative;display:inline-block}
.selwrap::after{content:"\25BE";position:absolute;right:16px;top:50%;transform:translateY(-50%);
  color:var(--accent);pointer-events:none;font-size:.9rem}
.selwrap select{appearance:none;-webkit-appearance:none;border:1.5px solid var(--accent);
  border-radius:12px;background:#fff;color:var(--ink);font-family:var(--title);font-weight:600;
  font-size:1rem;padding:11px 42px 11px 16px;min-height:44px;cursor:pointer}
/* OPEN ROLES. The longest text block on the site and the closest thing to a
   conversion page for a therapist, previously four grey accordions of
   identical rows. The market now reads as a chapter head with its own rule,
   and the rate is the largest thing in each row because it is the thing being
   scrolled for. */
.mgroup{border:0;border-top:1px solid var(--line);border-radius:0;background:none;margin-bottom:0;overflow:hidden}
.mgroup:last-of-type{border-bottom:1px solid var(--line)}
.mgroup summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:14px;padding:18px 22px;background:var(--tint);min-height:56px}
@media(max-width:700px){
  .mgroup summary{padding:18px 2px}
  .mbody{padding:4px 2px 12px}
  /* Rate and Apply share one line and span the row, so the listing uses the
     width it has instead of stacking into a narrow column. */
  .job{grid-template-columns:1fr;gap:12px;padding:22px 0}
  .job>div:last-child{display:flex;justify-content:space-between;align-items:center;width:100%;gap:14px}
  .job .btn.sm{flex:0 0 auto;min-width:120px}
}
.mgroup summary::-webkit-details-marker{display:none}
.mgroup summary::after{content:"\25BE";color:var(--accent);font-size:.9rem;transition:transform .18s}
.mgroup[open] summary::after{transform:rotate(180deg)}
.mname{font-family:var(--display);font-weight:600;font-size:var(--t-body);letter-spacing:-.01em;color:var(--ink)}
.mcount{margin-left:auto;margin-right:16px;font-family:var(--title);font-weight:600;font-size:.74rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.mbody{padding:4px 22px 12px}
/* THE CODA. It was a teal-to-ink card on a blue ground, which is two
   saturated hues from two different families stacked on each other, and blue
   is the patients colour besides. The ground carries the weight now and the
   card is a hairline panel on it, so the block is one colour rather than two
   arguing. On a light ground it keeps its gradient, since there is nothing
   there to argue with. */
.expandband{background:linear-gradient(112deg,var(--accent) 0%,#231f20 100%);color:#fff;border-radius:16px;padding:40px 42px}
.g-blue .expandband,.g-teal .expandband,.g-ink .expandband{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.26)}
/* The eyebrow was 11px at 60% contrast on a dark gradient, which is where
   type goes to be ignored. Bigger, brighter and tighter tracking so it can
   actually be read as the headline it functions as. */
.expandband .eyebrow{color:#DCEDF9}
.expandband .eyebrow::before{opacity:.9}
.expandband h3{color:#fff;font-size:var(--t-section);max-width:26ch;margin:0}
.expandband p{margin:14px 0 0;max-width:64ch;color:#DCEAF5}
.expandband .btn{background:#fff;color:var(--ink);border-color:#fff}
.expandband .btn.ghost{background:#fff;color:var(--ink);border-color:#fff}
.expandband .btn.ghost:hover,.expandband .btn:hover{background:transparent;color:#fff;border-color:#fff}
@media(max-width:700px){.expandband{padding:28px 22px;margin:0 -28px;border-radius:0}}
section.tightt{padding-top:clamp(24px,3vw,36px)}
/* A section that ends on a list closes with a hairline rule and a single line
   of text, so 84px below it reads deeper than 84px below a block. This evens
   the optical gap; the base rhythm is unchanged. */
section.endslist{padding-bottom:52px}
section.tight{padding:var(--pad-normal) 0}
/* Torn edges removed: on every transition of every page they stopped being
   a detail and became a pattern competing with the ghosted mark. The change
   of ground colour is the transition now. */
/* .tinted is the alternating light ground and nothing else. It was briefly a
   white room floating on white behind a hairline, which is the pattern this
   round exists to remove: a border is not a ground. */
.tinted{background:var(--ground-2)}
.band-light{background:var(--ground)}
.band-light{background:var(--ground)}
.band{position:relative}
/* THE HOUSE AS ARCHITECTURE. One ghosted mark per band, 620px, cropped hard by
   the section edge so it reads as a wall rather than as a logo someone dropped
   on the page. Two positions alternate, and it never sits under body copy:
   overflow hides most of it, and it is behind everything at 3% of the accent. */
.band>.wrap{position:relative;z-index:2}
.band{overflow:hidden}
/* Only the deeper band carries the mark. On every band it was thirteen ghosted
   houses down the therapist page, which is wallpaper; tied to the colour
   change it appears every other section and stays an event. Sides alternate. */
@media(max-width:820px){.tinted::after{width:400px;height:400px}
  .tinted:nth-of-type(4n+1)::after{right:-150px;top:-110px}
  .tinted:nth-of-type(4n+3)::after{left:-160px;bottom:-140px}}
/* The referral page is a queue, not a house tour. */
body[data-view="refer"] .tinted::after{display:none}

.matrix{margin-top:40px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.mrow{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;align-items:center;border-top:1px solid var(--line)}
.mrow.h{border-top:0}
.mrow>div{padding:14px 20px;font-size:.95rem}
.mrow.h>div{background:var(--tint);font-family:var(--title);font-weight:700;
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gray)}
.mrow .mk{font-family:var(--title);font-weight:600;color:var(--ink)}
.mrow .mk a{display:block;margin-top:2px;font-weight:600;color:var(--accent);font-size:.9rem}
.mtick{color:var(--teal);font-weight:700}
@media(max-width:720px){
  .mrow{grid-template-columns:1fr 1fr 1fr}
  .mrow.h{display:none}
  .mrow>div{border-top:0;padding:8px 18px}
  .mrow{border-top:1px solid var(--line);padding:10px 0}
  .mrow .mk{grid-column:1/-1;padding-bottom:0}
}
.costlist{margin:12px 0 0;padding:0;list-style:none;max-width:420px}
.costlist li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--line);font-size:.97rem}
.costlist li b{font-family:var(--title);font-weight:700;color:var(--ink)}
.freeask{margin-top:16px;font-family:var(--title);font-weight:600;color:var(--accent)}
.deep{background:var(--grad-primary);color:#DCE7F1}
.deep h2,.deep h3,.deep h4{color:#fff}
/* Therapist-side callout. Teal outline so it reads as part of the same family
   as the teal emphasis band further up the page. */
.tcallout{border:2px solid var(--teal);border-radius:16px;padding:38px 42px;background:var(--tint)}
.deep .eyebrow{color:var(--pale)}
.deep .lede{color:rgba(255,255,255,.85)}
/* NEWSLETTER BAND. Flat ink, not a gradient. The animated blue-to-black
   diagonal was doing the single most recognisable move in SaaS marketing, and
   an ambient background animation is attention spent on a form nobody came
   for. Ink is the brand's own dark, the grain sits on it properly, and the
   band is now a row rather than a stacked centre column. */
.deepband{color:var(--body-ink);padding:52px 0}
.deepband h2{color:var(--ink);font-size:var(--t-section);max-width:16ch;margin:0}
.deepband .lede{color:var(--gray);font-size:.98rem}
.deepband .wrap{display:grid;grid-template-columns:1fr .9fr;gap:clamp(28px,5vw,72px);align-items:center}
.deepband .subcol{max-width:440px;width:100%}
/* A drawn rule, same hand as the eyebrows, instead of a border. */
.deepband .subcol .zipform{border-color:var(--accent)}
.deepband::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:currentColor;color:var(--accent);opacity:.5;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='3' viewBox='0 0 1200 3' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M0 2C160 .8 320 2.4 520 1.4 720 .4 900 2.6 1200 1.2' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") no-repeat center/100% 3px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='3' viewBox='0 0 1200 3' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M0 2C160 .8 320 2.4 520 1.4 720 .4 900 2.6 1200 1.2' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") no-repeat center/100% 3px}
@media(max-width:820px){.deepband{padding:40px 0}
  .deepband .wrap{grid-template-columns:1fr;gap:22px}
  .deepband h2{max-width:none}}

/* hero */
/* The page heroes sit on plaster with a wash of the door's own colour, so a
   therapist landing on their page sees teal light and a family sees blue. */
.hero{position:relative;padding:76px 0 40px;background:
  radial-gradient(900px 520px at 88% -8%, var(--accent-soft) 0%, rgba(255,255,255,0) 62%),
  linear-gradient(180deg,var(--ground) 0%,var(--ground-2) 100%)}
.herogrid{display:grid;grid-template-columns:1.06fr .94fr;gap:60px;align-items:center}
@media(max-width:1000px){.herogrid{grid-template-columns:1fr;gap:26px}}
.hero h1{max-width:13ch}
.hero .sub{margin-top:16px;max-width:28ch}
.housewrap{position:relative;padding:14px 14px 0 0}
.housewrap::before{content:"";position:absolute;left:22px;top:0;right:0;bottom:26px;
  background:var(--pale);clip-path:var(--house);opacity:.85}
/* THE PHOTO CANNOT COLLAPSE. Its height came entirely from aspect-ratio
   against a width it inherited from a grid track, which is two assumptions
   stacked: that the track has width, and that the ratio resolves. If either
   fails the element is zero pixels tall and the photograph is simply not
   there, which is what was happening on the story hero on a narrow window.
   A minimum height means the worst case is a shorter photograph, never no
   photograph. */
.housefig{position:relative;clip-path:var(--house);width:100%;aspect-ratio:5/5.6;
  min-height:clamp(260px,44vw,470px);
  background:var(--pale) center/cover no-repeat}
.housebadge{position:absolute;left:0;bottom:0;background:#fff;border-radius:12px;padding:16px 20px;
  box-shadow:0 12px 34px rgba(6,100,173,.18);display:flex;gap:14px;align-items:center;max-width:280px}
.housebadge .n{font-family:var(--title);font-weight:700;font-size:2rem;color:var(--accent);line-height:1}
.housebadge .t{font-size:.83rem;line-height:1.35;color:var(--ink)}
@media(max-width:1000px){
  .housewrap{max-width:440px;margin:0 auto;width:100%}
  /* Stated rather than left to source order: when the hero stacks, the words
     come first and the photograph second, on every page that has one. */
  .herogrid>.housewrap{order:2}
  .herogrid>*:not(.housewrap){order:1}
}

/* zip */
/* THE THRESHOLD. The one question every patient arrives with is whether we
   come to their address, so the box that answers it is built like a door:
   a roofline over the label, a heavy frame, and a result that opens into the
   accent rather than appearing in grey. */
.zipbox{margin-top:32px;max-width:520px;position:relative}
.ziplabel{font-family:var(--title);font-weight:600;font-size:.97rem;color:var(--ink);margin-bottom:10px;display:block}
/* Flat rows, hairline rules, no decoration: this is the referral page. */
.mktcall{margin-top:22px;max-width:520px}
.mktlab{display:block;font-family:var(--title);font-weight:700;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gray);margin-bottom:10px}
.mktcall ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.mktcall li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--line)}
.mktcall .mkt{font-family:var(--title);font-weight:600;font-size:.95rem;color:var(--ink)}
.mktcall a{font-family:var(--title);font-weight:700;font-size:1rem;color:var(--accent);
  text-decoration:none;white-space:nowrap}
.mktcall a:hover{text-decoration:underline}
.legal h2{font-size:var(--t-section);margin:34px 0 12px}
.legal h2:first-child{margin-top:0}
.legal p{max-width:70ch;margin:0 0 14px;color:var(--body-ink)}
.legal a{color:var(--accent)}
.zipform{display:flex;border:2px solid var(--ink);border-radius:12px;overflow:hidden;background:#fff;
  transition:border-color .2s ease,box-shadow .2s ease}
.zipform:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.zipform input{flex:1;min-width:0;padding:18px 20px;border:0;font-family:var(--mono);font-size:1.06rem;background:transparent}
.zipform input:focus{outline:none}
.zipform button{border:0;background:var(--accent);color:#fff;padding:18px 30px;font-family:var(--title);
  font-weight:600;font-size:1.02rem;cursor:pointer;white-space:nowrap}
.zipform button:hover{background:var(--ink)}
@media(max-width:480px){.zipform{flex-wrap:wrap}
  .zipform input{flex:1 0 100%;border-bottom:1px solid var(--line)}
  .zipform button{flex:1 0 100%;padding:16px 20px}}
.ziphint{font-family:var(--mono);font-size:.71rem;color:var(--gray);margin-top:10px}
.result{margin-top:18px;border-radius:12px;padding:22px 24px;border-left:5px solid;display:none;background:#fff;box-shadow:0 10px 30px rgba(35,31,32,.09)}
.result.on{display:block;animation:grow .35s cubic-bezier(.2,.7,.3,1)}
.result.serving{border-color:var(--teal)}
.result.expanding{border-color:var(--gray)}
.result.none{border-color:var(--ink)}
.result h4{margin-bottom:7px}.result p{margin-bottom:.6rem;font-size:.96rem}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 2px}
.chip{font-family:var(--title);font-weight:500;font-size:.86rem;background:var(--tint2);
  border:1px solid var(--pale);padding:5px 12px;border-radius:99px;color:var(--accent)}

/* BIG QUOTE. A doctor saying the work is life changing was previously set at
   1.9rem behind a 4px rule, which is the house style for a caption. It is the
   single strongest sentence a stranger reads on this site, so it now runs at
   display scale with the quote mark hung into the left margin and the
   attribution set off to the right. Deliberately asymmetric: the text block
   sits left of centre and the caption breaks the column. */
.bigquote{margin:8px 0 0;padding:0;position:relative;max-width:none}
.bigquote .bqmark{position:absolute;left:-.14em;top:-.34em;font-family:var(--display);
  font-size:clamp(6rem,13vw,11rem);line-height:1;color:var(--pale);pointer-events:none;z-index:0}
/* The emphasis sits a step heavier than the quote around it, which is what
   makes it read as the phrase the doctor leaned on rather than as a link. */
.bigquote .hl{font-weight:500;background-size:100% .3em;padding-bottom:.04em}
.bigquote blockquote{position:relative;z-index:1;margin:0;font-family:var(--display);font-weight:600;
  font-size:var(--t-section);line-height:1.28;letter-spacing:-.018em;color:var(--ink);
  /* 19ch was set for a 20-word quote. The full version from Dr Bayes is 55
     words, and at that length a 19-character measure makes a narrow column
     fifteen lines deep. 26ch holds it at four or five lines without the type
     getting smaller, because a physician endorsement is the strongest thing
     on this page and should not shrink to fit. */
  max-width:26ch;text-wrap:balance}
/* The portrait crosses the rule rather than sitting under it: the rule reads
   as a line he is standing on, which is the reason to have a rule at all.
   Negative margin lifts the image by most of its height and the caption text
   stays baselined to the rule beside it. */
.bigquote figcaption{margin-top:52px;margin-left:auto;max-width:42ch;
  display:flex;align-items:center;gap:18px;justify-content:flex-end;
  padding-top:18px;border-top:2px solid var(--accent)}
/* Portrait cropped to the same 1:1.06 as every other profile on the site and
   anchored top-centre, so a face in a card and a face beside a quote read as
   the same treatment. Square with a 3px radius, matching .person .ph. */
/* Thumbnail scale, sitting on the same baseline as the name it belongs to.
   The larger lifted version crossed the rule and read as a floating cut-out. */
/* Same treatment as the physician quote: a person who is quoted gets a face. */
.attrib{display:flex;align-items:center;gap:14px;margin-top:-10px;font-size:.92rem;color:var(--gray)}
.attrib b{color:var(--accent);font-family:var(--title);font-weight:600}
/* Hotlinked from the old vendor's server, so we do not control its
   resolution. Held to 46px, where the softness of a low-res source stops
   being legible as softness, with a hairline ring to give the circle a hard
   edge the photo itself does not have. Replace with a real file and this can
   go back up. */
/* Lifted above the paper grain. The grain is a fixed 220px noise tile, so a
   46px face receives the same absolute speckle density as a full-bleed hero
   photograph — at that scale it stops reading as texture and starts reading
   as the photo being out of focus. Faces sit above it; everything else keeps
   the texture. */
.attribface,.bqface{position:relative;z-index:2}
.attribface{width:52px;height:52px;object-fit:cover;object-position:top center;border-radius:50%;
  flex:0 0 52px;background:var(--tint2);box-shadow:0 0 0 1px rgba(35,31,32,.10)}
.bqface{width:66px;height:66px;object-fit:cover;object-position:top center;
  border-radius:50%;background:var(--tint2);flex:0 0 66px;margin:0}
.bigquote .bqwho{text-align:right;padding-top:0}
.bigquote figcaption b{display:block;font-family:var(--title);font-weight:700;font-size:1.02rem;color:var(--ink)}
.bigquote figcaption span span,.bigquote .bqwho>span{display:block;font-size:.86rem;color:var(--gray);margin-top:3px}
@media(max-width:820px){.bigquote blockquote{max-width:none}
  .bigquote figcaption{margin-left:0;justify-content:flex-start;max-width:none;
    align-items:center;gap:14px;flex-direction:row-reverse}
  .bigquote .bqwho{text-align:left;padding-top:0}
  .bqface{width:56px;height:56px;flex:0 0 56px}}

/* WHO DOES WHAT. The sentence said "we bring X, you bring Y" and then three
   paragraphs elaborated. The division is the idea, so the section now shows
   it: two columns, one rule between them, ours in grey and yours in ink with
   a teal tick, because "yours" is the side being argued for. */
.split{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:38px 0 8px;border-top:1px solid var(--line)}
.splitside{padding:26px 34px 26px 0}
.splityours{padding-left:34px;border-left:1px solid var(--line)}
.splitlab{display:block;font-family:var(--title);font-weight:700;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:16px}
.splitours .splitlab{color:var(--gray)}
.splityours .splitlab{color:var(--accent)}
.splitside ul{margin:0;padding:0;list-style:none}
.splitside li{position:relative;padding:9px 0 9px 26px;font-size:.98rem;line-height:1.45;
  border-top:1px solid rgba(35,31,32,.07)}
.splitside li:first-child{border-top:0}
.splitours li{color:var(--gray)}
.splityours li{color:var(--ink)}
.splitside li::before{position:absolute;left:0;top:9px;font-family:var(--title);font-weight:700}
.splitours li::before{content:"–";color:var(--gray-lt)}
.splityours li::before{content:"✓";color:var(--accent);font-size:.9rem}
@media(max-width:760px){.split{grid-template-columns:1fr}
  .splitside{padding:22px 0}.splityours{padding-left:0;border-left:0;border-top:1px solid var(--line)}}

/* facts */
.facts{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
@media(max-width:820px){.facts{grid-template-columns:repeat(2,1fr)}}
/* Left-aligned body. Four columns of centred prose forces the eye to find a
   new starting point in every cell, which is why the strip read as a poster
   rather than as four facts. The strip sits inside .wrap so it ends where the
   rest of the page ends, with its border intact on both sides. */
/* Reads as the foot of the hero, not as its own band: same ground, and the
   hero gradient runs into it. */
.factsband{padding:16px 0 64px;background:linear-gradient(180deg,var(--ground-2) 0%,var(--ground) 100%)}
.factsband .wrap{padding-top:0;padding-bottom:0}
.fact{padding:30px 24px 26px;border-right:1px solid var(--line);display:flex;flex-direction:column;
  text-align:left;position:relative;transition:background .25s ease}
.fact:hover{background:var(--tint)}
/* The icon sits in the brand's own house silhouette rather than floating loose
   above the text — same chip as the service marks, so the two sets read as one
   family. Pale blue ground, blue mark. */
.fact .qicon{order:-1;margin:0 0 16px;width:42px;height:42px;flex-basis:42px;
  background:var(--tint2);clip-path:var(--house);color:var(--accent);padding:11px 9px 9px}
.fact:hover .qicon{background:#fff}
.fact:last-child{border-right:0}
.fact .k{white-space:normal;text-wrap:balance}
.fact .v{flex:1;min-height:5.4em}
.fact .qicon svg{stroke-width:1.9}

.fact:last-child{border-right:0}
@media(max-width:820px){.fact:nth-child(2n){border-right:0}.fact:nth-child(-n+2){border-bottom:1px solid var(--line)}}
.fact .k{font-family:var(--display);font-weight:600;font-size:1.32rem;color:var(--ink);line-height:1.1;letter-spacing:-.022em;text-wrap:balance}
.fact .v{font-size:.89rem;margin-top:9px;color:var(--body-ink);line-height:1.5}

/* compare */
.compare{display:grid;grid-template-columns:1fr 1fr;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
@media(max-width:760px){.compare{grid-template-columns:1fr}}
.col{padding:38px 34px}
.col.muted{background:#F7F7F7}
.col.ours{background:var(--grad-primary);color:#E4EDF5}
.col h3{margin-bottom:20px}
.col.muted h3{color:var(--gray)}.col.ours h3{color:#fff}
.crow{display:flex;gap:13px;padding:13px 0;border-top:1px solid rgba(0,0,0,.07);font-size:.96rem;line-height:1.5}
.col.ours .crow{border-color:rgba(255,255,255,.16)}
.crow:first-of-type{border-top:0}
.ic{flex:0 0 20px;width:20px;height:20px;margin-top:3px;color:var(--sky)}
.ic+span,.ic~span{color:inherit}
li.no .ic,.ic.mut{color:var(--gray-lt)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:42px;align-items:start}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
/* THE FOUR STEPS. Four equal columns each capped with a 3px bar is a progress
   indicator, not a process. The rule is now drawn by hand and the step number
   sits on it as a numeral at display scale, so the sequence is legible at a
   glance and the eye has four places to land instead of four grey bars. */
.step{position:relative;padding-top:26px}
.step::before{content:"";position:absolute;top:0;left:0;right:0;height:7px;
  background:currentColor;color:var(--accent);opacity:.5;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='7' viewBox='0 0 200 7' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M2 4.6C40 3 78 3.8 118 3.2 148 2.7 172 3.4 198 2.4' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 7px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='7' viewBox='0 0 200 7' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M2 4.6C40 3 78 3.8 118 3.2 148 2.7 172 3.4 198 2.4' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 7px}
/* No numeral. The drawn rule paces the row and the headings are verbs, which
   sequences better than digits ever did. */
.step h4{margin-top:0}
.step h4{margin-bottom:8px}.step p{font-size:.93rem;margin:0}

/* cards */
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
/* On warm paper a hairline-bordered white box reads as a drawing of a card.
   A soft resting shadow makes it an object lying on the sheet, and the border
   drops to a warmer, quieter line so the shadow does the work. */
.card{background:#fff;border:1px solid transparent;border-radius:4px;overflow:hidden;will-change:transform;
  box-shadow:0 1px 1px rgba(58,54,52,.04),0 8px 22px -14px rgba(58,54,52,.22);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover{border-color:var(--accent)}
/* A white card is invisible on a white section, so on the light ground the
   card takes the mist and on the mist ground it takes white. Figure and
   ground swap rather than a hairline being asked to do the work. */
.band-light .card{background:var(--ground-2)}
section.g-white .card{background:var(--ground-2)}
.tinted .card{background:#fff}
section.g-mist .card{background:#fff}
section.g-sky .card{background:#fff}
.card img{width:100%;height:198px;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.card:hover img{transform:scale(1.07)}
.card .pad{padding:28px}
.card h3{margin-bottom:10px}
.card ul{margin:14px 0 0;padding:0;list-style:none}
.card li{font-size:.92rem;padding:6px 0 6px 22px;position:relative;line-height:1.45}
.card li::before{content:"";position:absolute;left:0;top:15px;width:9px;height:2px;
  border-radius:2px;background:var(--accent);opacity:.55}

/* quotes */
.soloquote{margin-top:40px;max-width:74ch;border-left:4px solid var(--sky);padding:6px 0 6px 30px}
.soloquote .mark{font-family:var(--display);font-size:3rem;line-height:0;color:var(--pale);display:block;height:22px}
.soloquote p{font-family:var(--display);font-style:italic;font-size:var(--t-body);line-height:1.45;color:var(--ink);margin:14px 0 18px}
.soloquote .who{font-family:var(--title);font-weight:600;color:var(--accent)}
.soloquote .whor{font-size:.9rem;color:var(--gray)}
.qcard{background:#fff;border:1px solid var(--line);border-radius:4px;padding:30px;display:flex;flex-direction:column}
.qcard .mark{font-family:var(--title);font-weight:700;font-size:3rem;color:var(--pale);line-height:.7;display:block;margin-bottom:12px}
.qcard p{font-family:var(--display);font-size:1.06rem;line-height:1.55;font-style:italic;margin-bottom:16px;flex:1}
.qcard .who{font-family:var(--title);font-weight:600;font-size:.89rem;color:var(--accent)}
.qcard .whor{font-size:.82rem;color:var(--gray)}

/* areas */
/* COVERAGE. Four markets set as four identical grid rows with a hairline
   under each — a table of contents for a company that only has four things to
   say. Each market now opens with its index numeral at display scale, the
   name is set as a heading rather than a cell, and the local phone number is
   the largest thing on the right because it is the only action in the row.
   Hovering warms the whole row and pushes the numeral into brand blue. */
.arealist{margin-top:34px;border-top:1px solid var(--line)}
.arearow{display:grid;grid-template-columns:auto 1.5fr 1fr auto;
  gap:clamp(16px,2.6vw,34px);align-items:center;padding:30px 0;border-bottom:1px solid var(--line);
  transition:background .22s ease,padding-left .22s ease}
.arearow::before{content:"";width:14px;height:2px;border-radius:2px;background:var(--accent);opacity:.45;
  transition:opacity .22s ease}
.arearow:hover{background:rgba(255,255,255,.66);padding-left:14px}
.arearow:hover::before{opacity:.75}
.arearow h3{font-size:var(--t-body)}
.arealocal{display:inline-block;margin-top:10px;font-family:var(--display);font-weight:500;
  font-size:var(--t-body);letter-spacing:-.01em;color:var(--accent);
  font-variant-numeric:lining-nums tabular-nums}
@media(max-width:760px){.arearow{grid-template-columns:auto 1fr;gap:6px 16px;padding:22px 0}
  .arearow::before{grid-row:1/span 3;align-self:start}}
.status{font-family:var(--title);font-weight:600;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;border-radius:99px;display:inline-block;white-space:nowrap}
.status.serving{background:var(--accent);color:#fff}
.status.expanding{background:#EDEDEE;color:var(--gray);border:1px solid var(--gray-lt)}
.status.none{background:#EDEDEE;color:var(--gray)}
.arealocal:hover{text-decoration:underline}
.status.hiring{background:var(--accent);color:#fff}
a.status{cursor:pointer;transition:opacity .15s}
a.status:hover{opacity:.86}

/* team */
.teampyr{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.teampyr.founders{margin-top:42px}
.teampyr.directors{margin-top:24px}
/* A founder card only sits centred on the seam below it if the two rows share
   the same pitch, which forces the founder width to equal the director width
   (4 columns). Widening the founders to 5 columns throws each one 48px off the
   seam, so uniform width wins and the pyramid is exact. */
.teampyr.founders>*{grid-column:span 4}
.teampyr.founders>*:first-child{grid-column:3/span 4}
.teampyr.directors>*{grid-column:span 4}
@media(max-width:900px){
  .teampyr{grid-template-columns:repeat(2,1fr)}
  .teampyr.founders>*,.teampyr.founders>*:first-child,.teampyr.directors>*{grid-column:span 1}
}
@media(max-width:560px){
  .teampyr{grid-template-columns:1fr}
  .teampyr.founders>*,.teampyr.founders>*:first-child,.teampyr.directors>*{grid-column:span 1}
}
.phnone{display:flex;align-items:center;justify-content:center;background:var(--tint2);
  border-bottom:1px solid var(--line)}
.phnone span{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gray)}
.person{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.person .ph{width:100%;aspect-ratio:1/1.06;object-fit:cover;object-position:top center;background:var(--tint2)}
.person .pad{padding:22px}
.person .role{font-family:var(--title);font-weight:600;font-size:.82rem;color:var(--accent);margin:3px 0 12px}
.person .bio{font-size:.89rem;line-height:1.57;margin:0}

.jobfilters{display:flex;flex-direction:column;gap:14px;margin-top:26px}
.jobfilters .fgroup{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
#jdisc{display:flex;flex-wrap:wrap;gap:10px}
.jobfilters .flab{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gray);min-width:88px}
/* jobs */
.job{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;padding:20px 0;
  border-bottom:1px solid rgba(35,31,32,.08);transition:padding-left .2s ease}
.job:hover{padding-left:10px}
.job:last-child{border-bottom:0}
@media(max-width:700px){.job{grid-template-columns:1fr}}
.job .meta{font-family:var(--mono);font-size:.73rem;color:var(--gray);margin-top:5px}
/* The number is why a therapist opened this section. */
.pay{font-family:var(--display);font-weight:600;font-size:var(--t-body);letter-spacing:-.01em;
  color:var(--accent);white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}

/* faq */
/* FAQ. Eleven identical grey rows with a plus on the end is the single most
   default component on any site. The questions are numbered, because these
   are real questions people ask in order and the count is reassuring; the
   question itself is set in the display face rather than as UI label text;
   and the marker is a drawn stroke that rotates rather than a plus turning
   into a minus. Open rows warm their whole ground. */
.faqlist{}
.faqtail{margin-top:26px;font-size:1rem;color:var(--body-ink)}
.faqtail a{font-family:var(--title);font-weight:700;color:var(--accent);
  border-bottom:2px solid rgba(6,100,173,.28);white-space:nowrap}
.faqtail a:hover{border-bottom-color:var(--accent)}
details.faq{border-top:1px solid var(--line);transition:background .2s ease}
details.faq:last-of-type{border-bottom:1px solid var(--line)}
details.faq[open]{background:rgba(255,255,255,.6)}
details.faq summary{cursor:pointer;font-family:var(--display);font-weight:500;
  font-size:var(--t-body);letter-spacing:-.01em;
  list-style:none;color:var(--ink);display:flex;gap:16px;
  align-items:baseline;padding:22px 6px;min-height:52px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"";margin-left:auto;flex:0 0 15px;width:15px;height:15px;
  align-self:center;transition:transform .28s cubic-bezier(.16,1,.3,1);
  background:currentColor;color:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M7.5 1.6v11.8M1.6 7.5h11.8'/%3E%3C/svg%3E") no-repeat center/15px 15px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M7.5 1.6v11.8M1.6 7.5h11.8'/%3E%3C/svg%3E") no-repeat center/15px 15px}
details.faq[open] summary::after{transform:rotate(135deg)}
details.faq[open] summary{color:var(--accent)}
details.faq>p{margin:0;padding:0 4px 20px;max-width:64ch}
details.faq p{margin:12px 0 0;font-size:.98rem}
details.faq>p{padding-left:6px}

/* forms */
.form{display:grid;gap:15px;max-width:660px}
.field{display:grid;gap:6px}
.field label{font-family:var(--title);font-weight:600;font-size:.77rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gray)}
/* A select with no width sizes itself to its widest option, so "A few visits
   a week alongside my current job" pushed that control past the end of its
   grid column while Credential and Phone stopped at the column edge. A field
   takes the width of the track it sits in, never the width of its content,
   which lines every control in every form up on the same right edge. */
.field input,.field select,.field textarea{width:100%;min-width:0;max-width:100%;
  padding:14px 16px;border:1.5px solid var(--gray-lt);border-radius:4px;background:#fff;font-size:1rem}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none;
  box-shadow:0 0 0 4px var(--accent-soft)}
.field label{transition:color .18s ease}
.field:focus-within label{color:var(--accent)}
.field textarea{min-height:112px;resize:vertical;font-family:var(--body)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
/* A submitted form is the site answering the reader, which is one of the two
   jobs teal has, and the moment most worth putting the mark on. */
.sent{position:relative;background:#fff;border-left:5px solid var(--teal);border-radius:12px;
  padding:24px 24px 24px 24px;display:none;max-width:660px;box-shadow:0 10px 30px rgba(35,31,32,.08)}
.sent::after{content:"";position:absolute;right:22px;top:22px;width:34px;height:34px;
  background:var(--tint2);clip-path:var(--house);opacity:.9}
.sent.on{display:block;animation:grow .3s ease}

/* ---------- earnings calculator ---------- */
/* Matt: the teal against the blue readout below was too much colour in one
   scroll. Same gradient as the calculator panel, so the two read as one idea.
   This retires the single teal gradient block from the design system. */
.gradcard{background:linear-gradient(112deg,var(--accent) 0%,#231f20 100%);color:#fff;border-radius:12px;
  padding:clamp(44px,6vw,76px) clamp(28px,5vw,72px);position:relative;overflow:hidden}
/* The house mark, cropped hard and set at 60% opacity in the corner. Same
   shape as the logo, used as a compositional element rather than a badge. */
.gradcard::after{content:"";position:absolute;right:-6%;bottom:-34%;width:44%;aspect-ratio:1/1;
  background:rgba(255,255,255,.07);clip-path:var(--house);pointer-events:none}
.gradcard h3{font-size:var(--t-section)!important;line-height:1.14;letter-spacing:-.022em}
/* The left side of this band is an eyebrow, one heading and one short lede,
   and it was given the larger of two near-equal columns with 60px between
   them. The text ran out long before the column did, so the band read as a
   narrow strip of writing, a wide gap, then a list. The written side takes
   only the width it needs now, the timeline takes the rest, and the gap is
   sized to the text rather than to the page. */
.split2{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(28px,3.4vw,46px);align-items:start}
.split2>*:first-child .lede,.split2>*:first-child p{max-width:40ch}
.calc{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:0 20px 50px rgba(6,100,173,.13);display:grid;grid-template-columns:1.15fr .85fr}
@media(max-width:860px){.calc{grid-template-columns:1fr}}
.calc .inputs{padding:34px}
.calc .out{background:linear-gradient(112deg,var(--accent) 0%,#231f20 100%);color:#fff;padding:34px;display:flex;flex-direction:column;justify-content:center}
.presets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.preset{min-height:44px;background:var(--tint2);border:1px solid var(--pale);color:var(--accent);font-family:var(--title);
  font-weight:600;font-size:.83rem;padding:9px 14px;border-radius:99px;cursor:pointer}
.preset:hover{background:var(--pale)}
.preset[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}
.calcrow{margin-bottom:24px}
.calcrow label{font-family:var(--title);font-weight:600;font-size:.79rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);display:block;margin-bottom:9px}
.calcrow select{width:100%;padding:13px 14px;border:1.5px solid var(--gray-lt);border-radius:4px;background:#fff;font-size:1rem}
.slidewrap{display:flex;align-items:center;gap:18px;margin-top:6px}
.slidewrap input[type=range]{flex:1;accent-color:var(--accent);height:6px}
.visitnum{font-family:var(--title);font-weight:700;font-size:1.75rem;color:var(--accent);
  flex:0 0 2.4ch;text-align:center;line-height:1;align-self:center}
.calc .big{font-family:var(--title);font-weight:700;font-size:var(--t-page);line-height:1;letter-spacing:-.034em}
.calc .biglab{font-family:var(--title);font-weight:500;font-size:.79rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pale);margin-bottom:8px;display:block}
.calcsub{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.2)}
.calcsub .k{font-family:var(--title);font-weight:700;font-size:1.32rem;color:#fff}
.calcsub .v{font-size:.79rem;color:rgba(255,255,255,.68);line-height:1.4;margin-top:3px}
.calcnote{font-family:var(--mono);font-size:.68rem;color:rgba(255,255,255,.55);margin-top:22px;line-height:1.6}

@media(max-width:820px){.expandgrid{grid-template-columns:1fr!important}}
@media(max-width:860px){.svchead{grid-template-columns:1fr!important;gap:28px}}
@media(max-width:860px){.ownergrid{grid-template-columns:1fr!important;gap:30px}}
.modeswitch{display:inline-flex;gap:4px;background:var(--tint2);border:1px solid var(--pale);
  border-radius:99px;padding:4px;margin-top:26px}
.modebtn{background:transparent;border:0;color:var(--accent);font-family:var(--title);font-weight:600;
  font-size:.92rem;padding:10px 20px;border-radius:99px;cursor:pointer;white-space:nowrap}
.modebtn[aria-pressed="true"]{background:var(--accent);color:#fff}
@media(max-width:560px){.modeswitch{display:flex;width:100%}.modebtn{flex:1;font-size:.84rem;padding:10px 12px}}


/* ---------- clinician cards ---------- */
.cq{font-family:var(--title);font-weight:400;font-size:1rem;line-height:1.45;color:var(--ink);
  border-left:3px solid var(--sky);padding-left:14px;margin:14px 0 14px;font-style:italic}
.pendtag{display:none}
body.notes-on .pendtag{display:inline-block;font-family:var(--mono);font-size:.6rem;background:#FFFBEC;
  border:1px solid #E4D9A8;color:#7A6A2F;padding:3px 8px;border-radius:99px;margin-top:6px}
.clinline{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:34px}
@media(max-width:800px){.clinline{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){
  .clinline{grid-template-columns:1fr;gap:12px;margin-top:24px}
  .cl img{width:60px;height:60px;flex:0 0 60px}
}
.cl{display:flex;gap:14px;align-items:center}
.cl img{width:76px;height:76px;border-radius:50%;object-fit:cover;object-position:top center;flex:0 0 76px;background:var(--pale)}
.cln{font-family:var(--title);font-weight:700;font-size:.98rem;color:var(--ink);line-height:1.2}
.cly{font-size:.84rem;color:var(--accent);font-family:var(--title);font-weight:600;margin-top:3px}

/* film grain on dark surfaces */
.chero,.deep,.statband,.stage,.deepband{position:relative}
.chero::after,.deep::after,.statband::after,.stage::after,.deepband::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:5;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.chero .wrap,.deep .wrap,.statband .wrap,.statband .statslide,.stage .wrap,.deepband .wrap{position:relative;z-index:6}


/* ---------- the whole idea band ---------- */
.ideaband{padding:var(--pad-open) 0}
.endslist{padding-bottom:var(--pad-open)}
/* ASYMMETRY. 1.18/0.82 is a rounding error, not a composition — it reads as a
   two-column layout someone nudged. 1.42/0.58 with the figure dropped below
   the optical centre commits to it. The photo also breaks its column: it is
   pulled right and up so the block is clearly composed rather than stacked. */
.ideawrap{display:grid;grid-template-columns:1.42fr .58fr;gap:clamp(32px,5vw,88px);align-items:center}
.ideawrap .ideafig{transform:translateY(8px)}
@media(max-width:900px){.ideawrap .ideafig{transform:none}}
@media(max-width:900px){.ideawrap{grid-template-columns:1fr;gap:34px}.ideafig{max-width:400px}.idealist{margin-top:32px}}
.ideahead h2{max-width:13ch;margin-bottom:20px}
.ideahead .lede{max-width:52ch}
.ideafig .housefig{width:100%;background-position:center 20%}
/* THE GAP UNDER THE HEADING. The photograph is taller than the heading and
   lede beside it, and the row is centre-aligned, so half the difference was
   being added under the writing before the list even started, on top of a
   flat 38px of its own. Three things close it: the photograph is less tall,
   it is dropped 8px rather than 22, and this margin now scales with the
   viewport instead of being fixed. Stacked, below 900, it goes back up,
   because there the margin is the only thing separating the list from the
   photograph. */
.idealist{list-style:none;margin:clamp(12px,1.8vw,22px) 0 0;padding:0;max-width:78ch}
.idealist li{padding:26px 0 26px 40px;position:relative;border-top:1px solid rgba(35,31,32,.13)}
.idealist li:first-child{border-top:0;padding-top:8px}
/* The list numbers were 11px monospace, which is a footnote marker. At display
   scale in pale blue they set the pace of the section and give the eye
   somewhere to land between paragraphs. */
/* The house at the head of each item, not a number. It is a list of what the
   home gives you, so the mark is the bullet. */
.idealist li::before{content:"";position:absolute;left:0;top:30px;width:22px;height:2px;
  border-radius:2px;background:var(--accent);opacity:.55}
.idealist li:first-child::before{top:10px}
.il{font-family:var(--title);font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:9px}
.idealist p{margin:0;font-family:var(--display);font-size:var(--t-body);line-height:1.5;
  color:var(--ink);letter-spacing:-.012em}
@media(max-width:640px){.idealist li{padding-left:0;padding-top:34px}.idealist li::before{top:8px}.idealist li:first-child{padding-top:0}}
/* ---------- the whole idea band end ---------- */
/* ---------- two-door hero ---------- */
/* TWO DOORS, as v69 had them. The patient door opens the ZIP check in place,
   the therapist door opens the earnings widget. */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:760px;margin-top:26px}
@media(max-width:640px){.doors{grid-template-columns:1fr;gap:10px}}
.doorpanel{display:none;margin-top:20px;max-width:760px;animation:grow .4s cubic-bezier(.16,1,.3,1)}
.doorpanel.on{display:block}
.door{text-align:left;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.34);
  backdrop-filter:blur(8px);border-radius:12px;padding:20px 22px;cursor:pointer;color:#fff;
  font-family:var(--body);transition:all .22s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}
.door:hover{background:rgba(255,255,255,.17);border-color:#fff;transform:translateY(-3px)}
.door[aria-pressed="true"]{background:#fff;border-color:#fff;color:var(--ink)}
.door .dt{font-family:var(--title);font-weight:700;font-size:var(--t-body);letter-spacing:-.01em;display:block}
.door .dd{font-size:.9rem;opacity:.82;margin-top:4px;display:block}
.door .darrow{position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:1.3rem;
  transition:transform .25s ease;opacity:.75}
.door:hover .darrow{transform:translateY(-50%) translateX(4px)}
.door[aria-pressed="true"] .darrow{transform:translateY(-50%) rotate(90deg)}
.quickrow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px;max-width:760px}
@media(max-width:640px){.quickrow{grid-template-columns:1fr}}
.qicon{flex:0 0 24px;width:24px;height:24px;color:#A8DBFA;margin-top:2px}
.qicon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.quick{background:rgba(255,255,255,.12);border-radius:12px;padding:13px 15px;backdrop-filter:blur(6px);
  display:flex;gap:11px;align-items:flex-start}
.quick>div{min-width:0}
.quick b{font-family:var(--title);font-weight:700;color:#fff;font-size:1.02rem;display:block}
.quick span{font-size:.81rem;color:rgba(255,255,255,.78);line-height:1.35;display:block;margin-top:2px}

/* mini earnings widget in hero */
.mini{background:rgba(255,255,255,.97);border-radius:12px;padding:22px 24px;color:var(--ink)}
.minitop{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.minilab{font-family:var(--title);font-weight:600;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.minibig{font-family:var(--title);font-weight:700;font-size:var(--t-page);color:var(--accent);line-height:1;letter-spacing:-.034em}
.mini input[type=range]{width:100%;accent-color:var(--accent);margin-top:14px}
.minivis{font-family:var(--title);font-weight:700;color:var(--ink);font-size:1.05rem}

/* myth cards */
/* OBJECTIONS. This is the first persuasive moment on the page and it was
   three cards that answered questions the reader had not asked yet, with the
   objection already crossed out before they arrived — which spends the whole
   argument in the first half-second and gives them nothing to do. Now each
   card states the objection in the reader's own voice at display scale and
   waits. Tapping draws the line through it by hand and the answer arrives.
   The reader recognises themselves, acts, and gets the payoff, which is the
   difference between reading a claim and being convinced by one. */
.mythscore{font-family:var(--title);font-weight:600;font-size:.9rem;color:var(--gray);margin:18px 0 0}
.mythgrid{align-items:stretch}
.myth{background:#fff;border:1px solid var(--line);border-radius:4px;padding:26px 26px 22px;
  position:relative;overflow:hidden;display:flex;flex-direction:column;height:100%;width:100%;
  text-align:left;font:inherit;color:inherit;cursor:pointer;
  box-shadow:0 1px 1px rgba(58,54,52,.04),0 8px 22px -14px rgba(58,54,52,.22);
  transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease}
.myth:hover{border-color:var(--sky);transform:translateY(-2px);
  box-shadow:0 2px 3px rgba(58,54,52,.05),0 18px 40px -18px rgba(58,54,52,.30)}
.myth[aria-expanded="true"]{background:var(--tint)}

.mythqwrap{position:relative;display:block}
/* The strike is drawn, not a text-decoration line, so it can be animated as a
   pen stroke rather than appearing all at once. */
.mythstrike{position:absolute;left:-2px;right:-2px;top:calc(50% - 6px);width:calc(100% + 4px);height:12px;
  pointer-events:none;overflow:visible}
.mythstrike path{fill:none;stroke:#C0403A;stroke-width:2.4;stroke-linecap:round;opacity:.72;
  stroke-dasharray:320;stroke-dashoffset:320;transition:stroke-dashoffset .55s cubic-bezier(.5,0,.3,1)}
.myth[aria-expanded="true"] .mythstrike path{stroke-dashoffset:0}
.myth::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--sky)}
.mythq{font-family:var(--display);font-weight:600;font-size:var(--t-body);line-height:1.42;
  letter-spacing:-.022em;color:var(--ink);display:block;transition:color .3s ease}
.myth[aria-expanded="true"] .mythq{color:var(--gray)}
.mythcue{display:flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--title);
  font-weight:600;font-size:.86rem;color:var(--accent);transition:opacity .2s ease}
.mythcue i{font-style:normal;font-size:1.15rem;line-height:1;transition:transform .3s ease}
.myth[aria-expanded="true"] .mythcue{opacity:0;height:0;margin:0;overflow:hidden}
.mythrev{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s cubic-bezier(.16,1,.3,1)}
.myth[aria-expanded="true"] .mythrev{grid-template-rows:1fr;margin-top:16px}
.mythrev>span{overflow:hidden}
.mytha{display:block;font-family:var(--title);font-weight:700;font-size:1.06rem;color:var(--accent);
  line-height:1.28;letter-spacing:-.018em}
.mythsub{display:block;font-size:.93rem;color:var(--body-ink);margin-top:8px;line-height:1.55}
.fnote{display:block;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);
  font-size:.79rem;line-height:1.5;color:var(--gray)}
.audtabs{display:inline-flex;gap:4px;background:var(--tint2);border:1px solid var(--pale);border-radius:99px;padding:4px;margin-top:20px}
.audtab{background:transparent;border:0;color:var(--accent);font-family:var(--title);font-weight:600;font-size:.9rem;
  padding:10px 20px;border-radius:99px;cursor:pointer;white-space:nowrap}
.audtab[aria-pressed="true"]{background:var(--accent);color:#fff}
@media(max-width:560px){.audtabs{display:flex;width:100%}.audtab{flex:1;padding:12px 10px;font-size:.86rem}}

/* sticky action bar */
#stickybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:rgba(35,31,32,.96);
  backdrop-filter:blur(12px);padding:12px 0;transform:translateY(110%);transition:transform .35s cubic-bezier(.16,1,.3,1)}
#stickybar.on{transform:none}
#stickybar .wrap{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
#stickybar .msg{color:#fff;font-family:var(--title);font-weight:600;font-size:.96rem}
#stickybar .acts{display:flex;gap:9px;flex-wrap:wrap}
@media(max-width:620px){#stickybar .msg{display:none}#stickybar .acts{width:100%}#stickybar .acts .btn{flex:1;text-align:center}}

/* expansion map — real Albers USA boundaries, generated from us-atlas */
.expmap svg{width:100%;height:auto;display:block}
.expmap path{stroke-linejoin:round}
.expmap .ot{fill:rgba(255,255,255,.13);stroke:rgba(255,255,255,.30);stroke-width:.7}
.expmap .sv{fill:#fff;stroke:#fff;stroke-width:.7}
.expmap .wt{fill:var(--pale);stroke:#fff;stroke-width:.7}
.expmap .pin path{fill:var(--teal);stroke:#fff;stroke-width:1.6}
.expmap .pin circle{fill:#fff;stroke:none}
.maplegend{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.maplegend li{display:flex;gap:11px;align-items:flex-start;font-size:.82rem;color:rgba(255,255,255,.88);line-height:1.4}
.maplegend b{color:#fff;font-family:var(--title);font-weight:600}
.maplegend i{flex:none;width:16px;height:16px;border-radius:4px;margin-top:2px}
.maplegend .sw-served{background:#fff}
.maplegend .sw-wanted{background:var(--pale)}
.maplegend .sw-mkt{background:var(--teal);border:2px solid #fff;border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
/* ticker */
.tickin span.tk-market{padding:0 32px;letter-spacing:.005em}
.tickin span.tk-claim{font-family:var(--title);font-weight:500;font-style:italic;
  color:rgba(6,100,173,.68);padding:0 13px}
.ticker{background:var(--tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;padding:0;height:48px;display:flex;align-items:center;white-space:nowrap}
.tickin{display:inline-flex;align-items:center;height:100%;animation:slide 32s linear infinite}
.tickin span{line-height:48px;display:inline-flex;align-items:center;height:100%}
.tickin span{font-family:var(--title);font-weight:500;font-size:.82rem;letter-spacing:.05em;color:var(--accent);padding:0 22px}
.tickin span i{color:var(--gray-lt);font-style:normal}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- expandable discipline cards ---------- */
.disctoggle{margin-top:16px;background:none;border:0;padding:0;cursor:pointer;font-family:var(--title);
  font-weight:600;font-size:.93rem;color:var(--accent);display:flex;align-items:center;gap:8px}
.disctoggle:hover{color:var(--accent)}
.disc.open .disctoggle .cmpplus{transform:rotate(45deg)}
/* A therapist who already works here lands on this page looking for the
   portal more often than a candidate lands on it looking for the form. One
   line, above the application, so neither one has to hunt. */
.alreadyhere{font-size:.94rem;color:var(--gray);margin:10px 0 0}
.alreadyhere a{color:var(--accent);font-family:var(--title);font-weight:600;border-bottom:1.5px solid rgba(6,100,173,.35)}
.alreadyhere a:hover{border-bottom-color:var(--accent)}
.discbody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s cubic-bezier(.16,1,.3,1)}
/* The mark sits above the card eyebrow, centred with it, on a pale disc so it
   reads as a stamp on the card rather than a button. Blue: it labels, it does
   not answer. */
/* The service marks were on a pale disc, which is the shape every icon on
   every SaaS site sits in. Hung on the house silhouette instead: it is the
   brand's own shape, and it makes PT, OT and SLP read as three doors. */
.discmark{display:block;width:52px;height:52px;margin:0 auto 16px;
  background:var(--tint2);clip-path:var(--house);color:var(--accent);padding:13px 11px 11px}
.discmark svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.disc.open .discbody{grid-template-rows:1fr}
.discbody>div{overflow:hidden}
.discbody ul{margin:0;padding:0;list-style:none}
.disc.open .discbody ul{margin-top:14px}

/* ---------- compact comparison ---------- */
/* COMPARISON. The old version was a boxed table with a dark gradient panel
   behind our column, which is the layout every "us vs them" pricing page on
   the internet uses and it read as exactly that. Rebuilt as a spread: no
   outer box, no shadow, no filled header. The two sides are told apart by a
   single teal rule under our column and by the ticks, which is the one thing
   teal is for. Column labels drop to small tracked caps so the ROWS carry the
   argument rather than the chrome. */
.cmp{border-radius:0;overflow:visible;border:0;background:none;box-shadow:none}
.cmphead{display:grid;grid-template-columns:1fr 1.15fr 1.15fr;background:none;border-bottom:0}
.cmphead>div{padding:0 22px 14px;font-family:var(--display);font-weight:500;
  font-size:1.42rem;letter-spacing:-.022em;text-transform:none;line-height:26px;
  display:flex;align-items:flex-end}
@media(max-width:900px){.cmphead>div{font-size:1.12rem;line-height:21px}}
.cmphead .them{color:var(--gray);border-bottom:1px solid var(--line)}
.cmphead .us{color:var(--accent);background:none;border-bottom:2px solid var(--accent);padding-bottom:14px}
.cmphead .topicblank{border-bottom:1px solid var(--line)}
.cmplogo{height:26px;width:auto;display:block;margin-bottom:2px}
.cmplogofall{display:none;color:var(--blue)}
@media(max-width:760px){.cmplogo{height:21px}}
.cmpitem{border-top:1px solid var(--line);cursor:pointer}
.cmpitem:first-of-type{border-top:0}
.cmprow{display:grid;grid-template-columns:1fr 1.15fr 1.15fr;transition:background .18s ease}
.cmpitem{border-top:1px solid var(--line)}
.cmpitem:hover .cmprow{background:rgba(255,255,255,.7)}
/* Rows are a fixed height and everything centres in them. Baseline alignment
   made a two-line answer sit lower than the one-line answer beside it, which
   is what made the table look uneven. */
.cmprow>div{padding:16px 22px;min-height:92px;display:flex;align-items:center;gap:11px;font-size:1rem;line-height:1.4}
.cmpwho{display:none}   /* desktop has column heads; the per-row label is for the stacked cards */
/* The row topic is the question being asked, so it is set as a question in
   the display face rather than as a bold table label. */
.cmptopic{font-family:var(--display);font-weight:500;color:var(--ink);font-size:1.1rem;letter-spacing:-.018em}
.cmpthem{color:var(--gray)}
.cmpus{color:var(--accent);font-weight:600;background:none;box-shadow:inset 2px 0 0 rgba(6,100,173,.22)}
.cmpitem:hover .cmpus{box-shadow:inset 2px 0 0 var(--accent)}
.cmpdot{flex:0 0 18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:.62rem;font-weight:700;
  position:relative;top:2px}
.dotx{background:#EDEDEE;color:var(--gray-lt)}
.dotc{background:var(--accent);color:#fff}
.cmpplus{margin-left:auto;flex:0 0 auto;color:var(--sky);font-family:var(--title);font-weight:700;font-size:1.15rem;
  transition:transform .28s ease}
.cmpitem.open .cmpplus{transform:rotate(45deg)}
.cmpdetail{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1)}
.cmpitem.open .cmpdetail{grid-template-rows:1fr}
.cmpdetail>div{overflow:hidden}
.cmpdetail p{margin:0;padding:0 24px;font-size:.95rem;color:var(--body-ink);line-height:1.55;
  background:var(--tint2);transition:padding .32s ease}
.cmpitem.open .cmpdetail p{padding:18px 24px;border-top:1px solid var(--pale)}
.cmphint{font-family:var(--body);font-style:italic;font-size:.88rem;color:var(--gray);margin-top:18px;letter-spacing:0}
@media(max-width:760px){
  .cmphead{grid-template-columns:1fr 1fr}
  .cmphead .topicblank{display:none}
  .cmphead>div{font-size:1rem;padding:16px}
  .cmprow{grid-template-columns:1fr 1fr}
  .cmptopic{grid-column:1/-1;padding-bottom:2px;font-size:.82rem;color:var(--sky);text-transform:uppercase;letter-spacing:.12em}
  .cmprow>div{padding:13px 16px;font-size:.9rem}
  .cmpdetail p,.cmpitem.open .cmpdetail p{padding-left:16px;padding-right:16px}
}

/* ---------- founder letter ---------- */
.letter{display:grid;grid-template-columns:.42fr .58fr;gap:52px;align-items:start;
  background:var(--paper);border:1px solid var(--line);border-left:6px solid var(--sky);
  border-radius:4px;padding:44px;box-shadow:0 20px 50px rgba(6,100,173,.10)}
@media(max-width:880px){.letter{grid-template-columns:1fr;gap:30px;padding:32px}}
.letter .who{margin-top:22px}
.letter .who .nm{font-family:var(--title);font-weight:700;font-size:1.15rem;color:var(--ink)}
.letter .who .rl{font-family:var(--title);font-weight:600;font-size:.83rem;color:var(--accent);margin-top:2px}
.letter .who .yr{font-family:var(--mono);font-size:.72rem;color:var(--gray);margin-top:8px;line-height:1.5}
.letterbody p{font-family:var(--display);font-weight:400;font-size:var(--t-body);
  line-height:1.62;color:var(--ink);margin-bottom:1.15rem;letter-spacing:-.005em}
/* The opening paragraph was set at 600, which is why every word after the
   drop cap came out bold. Only the initial should carry weight. */
.letterbody p:first-child{font-size:var(--t-body);line-height:1.62;font-weight:400}
/* Drop cap. The letter is the most personal thing on the site and it opened
   like a paragraph in a brochure. Set in the display face at four lines, ink
   rather than brand blue, so it reads as typesetting and not as a widget. */
.letterbody p:first-child::first-letter{float:left;font-family:var(--display);font-weight:500;
  font-size:4.05em;line-height:.82;margin:.04em .09em 0 0;color:var(--ink)}
/* The bridge between the cap and the body text. */
.runin{font-variant-caps:small-caps;font-feature-settings:"smcp" 1;
  letter-spacing:.07em;font-weight:500}
.letterbody p:last-of-type{margin-bottom:0}
/* A letter that ends in bold sans-serif is a memo. This ends in a signature:
   the display italic at a size a person actually signs at, in ink rather than
   brand blue, sitting on a drawn rule with the slight rightward lean and the
   trailing lift of a pen leaving the paper. */
/* A signature, not a typeset name. Caveat is a real handwriting face rather
   than a formal script, so it reads as a person signing a letter instead of a
   wedding invitation. No rule under it: a drawn underline is a design device,
   and nobody underlines their own name. The slight rotation and the uneven
   ink weight do the work instead. */
/* Caveat is handwriting, but it is PRINTED handwriting — separate letters,
   even weight, the way you fill in a form. A signature is written fast and
   connected. Ms Madi is a joined script with an uneven baseline and thin
   entry strokes, so it reads as a name signed in two seconds rather than
   lettered. Set large because signature faces have small x-heights, tilted a
   little more than before, and in ink rather than brand blue. */
/* An image, not a typeface. Set in a webfont it fell back to italic Barlow
   when the font did not arrive, which is not a signature. Swap the PNG for a
   scan of Theresa's own handwriting and nothing else changes. */
.sig{margin-top:26px;display:inline-block;line-height:0}
.sig img{height:clamp(58px,9vw,86px);width:auto;opacity:.92}
.sigsub{font-family:var(--title);font-weight:500;font-size:.86rem;color:var(--gray);margin-top:10px}

/* ---------- day in the life ---------- */
/* A therapist reads this section to picture their own Tuesday, so the clock
   is the information. Times run at display scale in the left column with the
   visit hung beside them, and the rail is drawn rather than ruled — the same
   hand as the eyebrows and the section edges. */
.tl{position:relative;padding-left:0;margin-top:44px;border-left:0}
.tlitem{position:relative;display:grid;grid-template-columns:126px 1fr;gap:26px;
  padding:26px 0;border-top:1px solid rgba(35,31,32,.12)}
.tlitem:first-child{border-top:0;padding-top:6px}
.tlitem .t{font-family:var(--display);font-weight:600;font-size:var(--t-body);
  line-height:1.05;letter-spacing:-.03em;color:var(--accent);margin:0;
  font-variant-numeric:lining-nums tabular-nums}
.tlitem>*:not(.t){grid-column:2}
.tlitem .t{grid-column:1;grid-row:1/span 3}
@media(max-width:620px){.tlitem{grid-template-columns:1fr;gap:6px}
  .tlitem .t{grid-column:1;grid-row:auto}.tlitem>*:not(.t){grid-column:1}}
.tlitem h4{margin-bottom:5px}
.tlitem p{font-size:.94rem;margin:0}

/* ---------- story timeline ---------- */
.chapters{display:grid;gap:0;margin-top:44px}
.chapter{display:grid;grid-template-columns:150px 1fr;gap:34px;padding:36px 0;border-top:1px solid var(--line)}
@media(max-width:760px){.chapter{grid-template-columns:1fr;gap:10px}}
.chapter .yr{font-family:var(--title);font-weight:700;font-size:1.3rem;color:var(--accent);
  line-height:1.1;letter-spacing:.005em;white-space:nowrap;position:relative;padding-top:2px}
.chapter .yr::after{content:"";display:block;width:26px;height:3px;border-radius:99px;
  background:var(--teal);margin-top:10px}
.chapter h3{margin-bottom:10px}
.chapter p:last-child{margin-bottom:0}

/* ---------- news ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:28px 0 36px}
.filt{background:#fff;border:1.5px solid var(--gray-lt);color:var(--ink);font-family:var(--title);
  font-weight:600;font-size:.86rem;padding:9px 16px;border-radius:99px;cursor:pointer}
.filt:hover{border-color:var(--accent);color:var(--accent)}
.filt[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.post{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;cursor:pointer;
  text-align:left;padding:0;font-family:var(--body);transition:transform .2s ease,box-shadow .2s ease;display:flex;flex-direction:column}
.post:hover{border-color:var(--sky);box-shadow:0 10px 28px rgba(35,31,32,.07)}
.post img{width:100%;height:180px;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.post:hover img{transform:scale(1.07)}
.post .pad{padding:26px;display:flex;flex-direction:column;flex:1}
.post .cat,.feature .cat,.article .cat{font-family:var(--title);font-weight:600;font-size:.71rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.article .cat{font-size:.73rem;margin-bottom:14px}
.post h3{margin-bottom:10px}
.post .ex{font-size:.93rem;flex:1;margin-bottom:16px}
.post .by{font-family:var(--mono);font-size:.71rem;color:var(--gray)}
.feature{display:grid;grid-template-columns:1.05fr .95fr;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;text-align:left;background:#fff;font-family:var(--body);padding:0}
@media(max-width:820px){.feature{grid-template-columns:1fr}}
.feature .fimg{background:var(--pale) center/cover no-repeat;min-height:320px}
.feature .pad{padding:44px}
.feature h2{margin:10px 0 16px}
.article{max-width:760px;margin:0 auto}
.article h1{font-size:var(--t-page);margin-bottom:18px}
.article .meta{font-family:var(--mono);font-size:.78rem;color:var(--gray);margin-bottom:34px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.article p{font-family:var(--display);font-size:1.22rem;line-height:1.66;color:#2E2D2F}
.article h3{margin:36px 0 12px}
/* One drop cap on the site, on Theresa's letter, because that is a letter.
   Three of them made it a tic. */
/* Article pull quotes were the same 4px rule as everything else. They now
   break the measure: set larger, un-italic, indented out to the left so the
   eye catches them while scrolling past. */
.article .pull{margin:44px 0;padding:0 0 0 0;position:relative;
  font-family:var(--display);font-weight:500;font-size:var(--t-section);
  line-height:1.2;color:var(--ink);letter-spacing:-.024em;max-width:22ch}
.article .pull::before{content:"";display:block;width:64px;height:8px;margin-bottom:18px;
  background:currentColor;color:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='8' viewBox='0 0 64 8' fill='none'%3E%3Cpath d='M1 5.6C12 4 22 4.8 33 4c11-.8 20-.4 30-1.8' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='8' viewBox='0 0 64 8' fill='none'%3E%3Cpath d='M1 5.6C12 4 22 4.8 33 4c11-.8 20-.4 30-1.8' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center}
@media(min-width:1100px){.article .pull{margin-left:-64px}}
.backlink{font-family:var(--title);font-weight:600;color:var(--accent);cursor:pointer;background:none;border:0;padding:0;margin-bottom:28px;font-size:.95rem}

/* spec notes */
.note{display:none}
body.notes-on .note{display:block;background:#FFFBEC;border-left:4px solid var(--gray-lt);
  border-radius:4px;padding:12px 16px;margin:16px 0;font-family:var(--mono);font-size:.73rem;line-height:1.6;color:#5C5C57}
body.notes-on .note b{color:var(--ink)}

/* admin */
.admin{background:var(--grad-primary);color:#DCE6EF;min-height:70vh;padding:44px 0 90px}
.admin h2,.admin h3{color:#fff}.admin .eyebrow{color:var(--pale)}
.apanel{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:26px;margin-bottom:20px}
.apanel table{width:100%;border-collapse:collapse;font-size:.89rem}
.apanel th{text-align:left;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);padding:0 12px 10px 0}
.apanel td{padding:12px 12px 12px 0;border-top:1px solid rgba(255,255,255,.14);vertical-align:middle}
.apanel select,.apanel input,.apanel textarea{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.22);color:#DCE6EF;padding:10px 12px;border-radius:4px;font-size:1rem;font-family:var(--mono);width:100%}
.apanel textarea{font-family:var(--body);font-size:1rem;min-height:74px;resize:vertical}
.stamp{font-family:var(--mono);font-size:.65rem;color:rgba(255,255,255,.6)}
.sw{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--mono);font-size:.75rem}
.sw input{width:auto;accent-color:var(--sky)}
.saved{color:var(--pale);font-family:var(--mono);font-size:.72rem;opacity:0;transition:opacity .3s}
.saved.on{opacity:1}
.pill{font-family:var(--mono);font-size:.62rem;padding:4px 9px;border-radius:99px;white-space:nowrap;display:inline-block}
.pill.gw{background:rgba(1,123,132,.55);color:#C6EAEC}
.pill.sb{background:rgba(28,143,222,.38);color:#D2E8FA}

/* footer */
footer.site{background:var(--ink);color:#AEB2B4;padding:70px 0 32px;font-size:.92rem;
  position:relative;overflow:hidden}
/* The mark at 760px, cropped by the bottom of the page. You only ever see the
   roof and one wall, which is the point: the house continues past the edge. */
footer.site::before{content:"";position:absolute;right:-120px;bottom:-320px;width:760px;height:760px;
  max-width:78vw;background:#fff;opacity:.075;clip-path:var(--house);pointer-events:none}
footer.site .wrap{position:relative;z-index:2}
/* Solid marks rather than stroked, because that is how every one of these
   platforms draws its own logo and a stroked version reads as a knock-off.
   Sized to a 42px tap target, which is above the 44px guideline once the gap
   either side is counted, so a thumb on a phone hits them reliably. */
.fsocial{display:flex;gap:10px;justify-content:center;margin:44px 0 0;
  padding-top:34px;border-top:1px solid rgba(255,255,255,.1)}
.fsocial a{display:flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:50%;color:#AEB2B4;transition:color .18s ease,background .18s ease}
.fsocial a:hover{color:#fff;background:rgba(255,255,255,.09)}
.fsocial svg{width:20px;height:20px;fill:currentColor;display:block}
/* The footer is the foundation and does not take a room's rhythm. */
footer.site{--pad-normal:0;--pad-open:0;--pad-tight:0;--room-w:1180px;--accent:#0664AD}
@media(max-width:820px){footer.site::before{right:-180px;bottom:-380px;width:520px;height:520px}}
footer.site h4{color:#fff;margin-bottom:12px;font-size:.93rem}
footer.site a:hover{color:#fff}
footer.site img.flogo{width:100%;max-width:337px;height:auto;margin-bottom:18px}
.fgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:32px 36px;align-items:start}
.fbrand{grid-column:span 3}
.fwork{grid-column:span 2}
.fstart{grid-column:span 2}
/* The footer is where someone who already works here looks for a way in, and
   on a phone it is the only place the portal link appears. Separated from the
   marketing links by a rule so it reads as a different kind of door. */
.fportal{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16)}
.fportal a{display:inline-flex;align-items:center;gap:8px;color:#fff;font-family:var(--title);font-weight:600}
.fportal a:hover{color:var(--pale)}
.fkey{width:15px;height:15px;flex:0 0 15px;display:inline-block;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8.1' cy='15.9' r='4.1'/%3E%3Cpath d='M11.1 13.1 19.1 5.1'/%3E%3Cpath d='M16.4 7.8l2.1 2.1M18.2 6l2 2.1'/%3E%3C/svg%3E") no-repeat center/15px 15px}
.foffices{grid-column:span 5}
.foffices .ogrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 28px}
.foffices p{margin:0}
.foffices p a{font-family:var(--title);font-weight:700;color:#9CC8E8}
.foffices p a:hover{color:#fff}
@media(max-width:1000px){
  .fbrand{grid-column:span 12}
  .fwork,.fstart{grid-column:span 6}
  .foffices{grid-column:span 12}
  .foffices .ogrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .fwork,.fstart{grid-column:span 12}
  .foffices .ogrid{grid-template-columns:1fr}
}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}
.fnote{border-top:0;margin-top:26px;padding-top:0;font-family:var(--mono);font-size:.67rem;color:var(--gray);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ============================================================
   CINEMATIC LAYER
   ============================================================ */
/* scroll progress */
section[id]{scroll-margin-top:calc(var(--hdr) + 20px)}
#prog{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--sky),var(--blue));z-index:200;transition:width .1s linear}

/* blur-to-focus reveal */
.reveal{opacity:0;transform:translateY(30px);filter:blur(12px)}
.reveal.in{opacity:1;transform:none;filter:blur(0);
  transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1),filter 1s cubic-bezier(.16,1,.3,1)}

/* ---------- the middle register: the house at section scale ----------
   The shape existed at 11px and at 620px and nowhere between, which is why
   it never read as architecture. A section clipped to the roof profile makes
   the section above appear to sit on this one. Used twice on the whole site:
   once on the home page and once on the therapist page. The floor form is
   used once, under the block that concludes the therapist page before the
   application. Ceilings go above sections that continue, floors under
   sections that conclude.

   No clip-path is applied to any element containing a fixed or sticky child.
   The demo bar, the header, the mega menu, the progress bar and the sticky
   footer bar are all siblings of <main>, not descendants of any section. */
/* THE ROOF IS DRAWN, NOT CUT. Clipping the section worked when the polygon
   was written in percentages and stopped working when it was rewritten in
   pixels to stop the rise scaling with section height. The photographs, which
   clip on percentages, kept their roofline the whole time, which is the tell.

   So the section keeps a flat top and a triangle of its own colour is drawn
   in the margin above it. The triangle is its own box, 104px tall, clipped on
   percentages of itself, which means percentages and a fixed rise at the same
   time. background:inherit takes the section's ground, so a roof can never be
   a different colour from the room under it. */
.roofsec{position:relative;margin-top:var(--rise,104px)}
.roofsec::before{content:"";position:absolute;left:0;right:0;bottom:100%;
  height:var(--rise,104px);background:inherit;
  clip-path:polygon(50% 0, 100% 100%, 0 100%);pointer-events:none}
.roofsec>.wrap{padding-top:clamp(34px,4.5vw,64px)}
.floorsec{position:relative;margin-bottom:var(--rise,104px)}
.floorsec::after{content:"";position:absolute;left:0;right:0;top:100%;
  height:var(--rise,104px);background:inherit;
  clip-path:polygon(0 0, 100% 0, 50% 100%);pointer-events:none}
.floorsec>.wrap{padding-bottom:clamp(34px,4.5vw,64px)}
/* A 104px rise on a 390px band is a spike, so it drops with the width. */
@media(max-width:900px){.roofsec,.floorsec{--rise:76px}}
@media(max-width:600px){.roofsec,.floorsec{--rise:48px}}

/* ---------- the threshold ----------
   Twice per page and nowhere else. Once at entry, where the ground of the
   next section rises into the bottom edge of the hero as a doorway, and once
   at commitment, around the form. Built as a pseudo-element rather than a
   clip on the section itself, so nothing that has to stay sticky ends up
   inside a containing block it cannot escape. */
/* The doorway is 64px of ground standing on the hero's bottom edge, so the
   hero owes it that much clearance at every width, not only on a phone. */
.threshold{position:relative;padding-bottom:calc(var(--pad-normal) + 64px)}
.threshold::after{content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);
  width:min(320px,62vw);height:64px;background:var(--thresh,var(--ground));
  clip-path:var(--house);z-index:6;pointer-events:none}
@media(max-width:700px){
  .threshold::after{width:min(200px,58vw);height:36px}
  /* 36px of doorway sitting on the bottom edge would land on the hero's own
     buttons at 390px, so the hero gives it its own clearance. */
  .threshold{padding-bottom:calc(var(--pad-normal) + 30px)}
}
/* Fixed rise, for the same reason the roof has one: at 15% the triangle grew
   with the form, so on the long application it was over 200px deep and the
   first field label sat inside it. 88px on every form, at every width, with
   the padding sized to clear it. */
.formhouse{clip-path:polygon(0 88px, 50% 0, 100% 88px, 100% 100%, 0 100%);
  /* background-color, not the background shorthand. The shorthand resets
     background-image, which is what silently killed the previous attempt. */
  background-color:var(--pale);
  padding:120px clamp(22px,4vw,52px) clamp(34px,4vw,52px);
  border-radius:0}
@media(max-width:700px){
  .formhouse{clip-path:polygon(0 48px, 50% 0, 100% 48px, 100% 100%, 0 100%);
    padding:72px 20px 30px}
}

/* full-viewport cinematic hero */
/* Hero height is set against what comes after it, not against the viewport.
   Leaving roughly 95px of the stat band visible tells the reader the page
   continues; a hero that fills the screen exactly reads as the whole site. */
.chero{position:relative;min-height:max(430px,calc(100svh - 256px));display:flex;align-items:center;overflow:hidden;background:var(--ink)}
.chero .kb{position:absolute;inset:0;background-size:cover;background-position:center 30%;
  animation:kenburns 19s ease-in-out infinite alternate;will-change:transform}
@keyframes kenburns{from{transform:scale(1.05) translate(2%,1.5%)}to{transform:scale(1.26) translate(-3%,-3.5%)}}
.chero .veil{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(24,20,18,.93) 0%,rgba(23,38,50,.8) 40%,rgba(20,45,66,.4) 74%,rgba(20,45,66,.12) 100%)}
.chero .wrap{position:relative;z-index:3;padding-top:40px;padding-bottom:40px}
.chero h1{color:#fff;max-width:14ch;font-size:var(--t-page);line-height:1.04}
/* The hero was carrying four colours over a photograph: teal eyebrow, white
   headline, pale-blue subhead, and the blue cast of the image itself. The
   subhead is the one that earns least — it is a supporting line, not an
   accent — so it goes white and recedes on opacity instead of on hue. That
   leaves one accent in the hero, which is the eyebrow. */
.chero .sub{color:rgba(255,255,255,.9);margin-top:18px;max-width:none;font-size:var(--t-body)}
@media(min-width:1000px){.chero .sub{white-space:nowrap}}
.chero .lede{color:rgba(255,255,255,.85);margin-top:20px;max-width:52ch}
/* The eyebrow and the stroke that introduces it are one mark, so they are one
   colour. It was pale blue against a teal rule. */
.chero .eyebrow{color:var(--teal-lt)}
/* The hero mark needs no override: currentColor already takes
   .chero .eyebrow{color:var(--teal-lt)} from the rule above. */
.miniper{display:inline-flex;gap:2px;margin-top:10px;background:rgba(6,100,173,.09);
  border-radius:99px;padding:3px}
.perbtn{border:0;background:transparent;cursor:pointer;border-radius:99px;padding:11px 15px;min-height:44px;
  font-family:var(--title);font-weight:600;font-size:.78rem;color:var(--gray);transition:all .16s}
.perbtn[aria-pressed="true"]{background:var(--accent);color:#fff}
.herokicker{font-family:var(--title);font-weight:600;color:var(--ink);font-size:1.05rem;margin-top:14px}
.chero .ziplabel{color:#fff;font-size:1.05rem}
.chero .zipform{border-color:#fff}
/* brand mark watermark, drifting */
.watermark{position:absolute;right:-6%;bottom:-14%;width:min(58vw,760px);
  aspect-ratio:1/1;background:#fff;clip-path:var(--house);opacity:.07;z-index:2;
  animation:drift 22s ease-in-out infinite alternate;pointer-events:none}
@keyframes drift{from{transform:translate3d(0,0,0) rotate(-3deg)}to{transform:translate3d(-3%,-5%,0) rotate(3deg)}}
/* SCROLL CUE. The hero fills the viewport, so nothing below it is visible on
   load and a reader has no evidence there is more. A rule and a word is the
   smallest thing that says keep going. Hidden where the hero is not full
   height, because then the next section is already showing. */
.scrollcue{position:absolute;left:50%;bottom:86px;transform:translateX(-50%);z-index:4;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.6);
  display:flex;flex-direction:column;align-items:center;gap:9px;pointer-events:none}
.scrollcue i{display:block;width:1px;height:36px;background:linear-gradient(180deg,rgba(255,255,255,.7),transparent);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
@media(max-width:700px){.chero{min-height:auto;padding:70px 0 84px}.scrollcue{display:none}}

/* stat band with counters */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:40px}
.s3{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 24px}
.s3 .qicon{width:26px;height:26px;color:var(--accent);display:block;margin-bottom:12px}
.s3 h4{margin:0 0 8px;font-family:var(--title);font-weight:600;font-size:1.04rem}
.s3 p{margin:0;font-size:.93rem;color:var(--body-ink);line-height:1.55}
@media(max-width:760px){.steps3{grid-template-columns:1fr;gap:12px}}
.truststrip{background:#fff;border-bottom:1px solid var(--line);padding:13px 0}
.truststrip .wrap{display:flex;gap:34px;justify-content:center;flex-wrap:wrap}
.truststrip span{display:flex;gap:9px;align-items:center;font-family:var(--title);font-weight:500;
  font-size:.86rem;color:var(--body-ink);white-space:nowrap}
.truststrip .qicon{width:19px;height:19px;flex:0 0 19px;margin:0;color:var(--accent)}
@media(max-width:700px){
  .truststrip{padding:10px 0}
  .truststrip .wrap{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px;justify-items:start}
  .truststrip span{font-size:.78rem;white-space:normal}
}
.statband{background:var(--grad-primary);color:#fff;padding:0}
/* THE STAT BAND. It was an infinite marquee of fixed 310px cells, so at every
   width the two cells at the edges were cut through the middle of a sentence.
   A marquee of short labels reads as a ticker; a marquee of three-line
   paragraphs reads as a rendering fault, which is what it was doing on a half
   screen. It is a grid now: four across, two below 1000, one below 620, and
   nothing is ever cut. The template still emits the set twice for the old
   loop, so the duplicate is hidden rather than the markup rewritten. */
.statslide{overflow:visible;white-space:normal}
.statin{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));animation:none}
.statin>.stat:nth-child(n+5){display:none}
@media(max-width:1000px){.statin{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.statin{grid-template-columns:minmax(0,1fr)}}
.stat{width:auto;min-width:0;white-space:normal}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.statgrid{grid-template-columns:repeat(2,1fr)}}
.stat{padding:44px 28px;border-right:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.stat:last-child{border-right:0}
@media(max-width:820px){.stat:nth-child(2n){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.14)}}
.stat{transition:background .3s ease}
.stat:hover{background:rgba(255,255,255,.06)}
.stat .num{font-family:var(--display);font-weight:500;font-size:var(--t-page);line-height:1;
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1;
  color:#fff;letter-spacing:-.03em;height:1em;display:flex;align-items:baseline;gap:3px}
.stat .num small{font-size:.42em;color:var(--sky);font-weight:600}
.stat .lab{font-family:var(--title);font-weight:500;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sky);margin-top:12px}
.stat .dsc{font-size:.86rem;color:rgba(255,255,255,.6);margin-top:7px;line-height:1.45}

/* full-bleed parallax stage */
.stage{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden;background:var(--ink)}
.stage .bg{position:absolute;top:-12%;left:0;right:0;bottom:-12%;background-size:cover;background-position:center;will-change:transform}
.stage .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,25,22,.86) 0%,rgba(15,25,22,.55) 48%,rgba(15,25,22,.2) 100%)}
.stage .wrap{position:relative;z-index:3;padding:80px 28px}
.stage .panel{background:#fff;border-radius:4px;padding:46px;max-width:600px;box-shadow:0 34px 80px rgba(0,0,0,.34)}
.stage .panel h2{margin-bottom:14px}
.stage.right .veil{background:linear-gradient(270deg,rgba(15,25,22,.86) 0%,rgba(15,25,22,.55) 48%,rgba(15,25,22,.2) 100%)}
.stage.right .panel{margin-left:auto}
@media(max-width:700px){.stage{min-height:auto}.stage .panel{padding:32px}.stage .veil{background:rgba(15,25,22,.72)}}

/* overlapping composition */
.overlap{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center}
@media(max-width:900px){.overlap{grid-template-columns:1fr}}
.overlap .img{position:relative;z-index:1}
.overlap .txt{position:relative;z-index:2;background:#fff;border-radius:4px;padding:48px;
  box-shadow:0 30px 70px rgba(6,100,173,.14);margin-left:-90px}
@media(max-width:900px){.overlap .txt{margin-left:0;margin-top:-50px;padding:32px}}

/* mega menu */
.hasmenu{position:relative}
.mega{position:fixed;left:0;right:0;top:var(--hdr);background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 26px 50px rgba(6,100,173,.14);z-index:65;opacity:0;visibility:hidden;
  transform:translateY(-10px);transition:opacity .22s ease,transform .22s ease,visibility .22s}
.mega.open{opacity:1;visibility:visible;transform:none}
.megain{max-width:1180px;margin:0 auto;padding:34px 28px;display:grid;grid-template-columns:1.5fr 1fr;gap:44px}
@media(max-width:860px){.mega{display:none}}
.megalist{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.megaitem{text-align:left;background:none;border:0;padding:14px 16px;border-radius:4px;cursor:pointer;font-family:var(--body)}
.megaitem:hover{background:var(--tint2)}
.megaitem .t{font-family:var(--title);font-weight:700;font-size:1rem;color:var(--ink);display:block}
.megaitem .d{font-size:.85rem;color:var(--gray);margin-top:3px;line-height:1.45;display:block}
.megapic{border-radius:12px;overflow:hidden;position:relative;min-height:236px;background:var(--pale) center/cover no-repeat;display:flex;align-items:flex-end}
.megapic span{background:linear-gradient(0deg,rgba(15,25,22,.86),transparent);color:#fff;padding:22px 20px 18px;
  font-family:var(--title);font-weight:600;font-size:.94rem;width:100%}

/* carousel */
.carwrap{position:relative;margin-top:40px}
.carousel{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:8px;scrollbar-width:none;-ms-overflow-style:none}
.carousel::-webkit-scrollbar{display:none}
.carousel>*{scroll-snap-align:start;flex:0 0 calc((100% - 48px) / 3)}
@media(max-width:1000px){.carousel>*{flex:0 0 calc((100% - 24px) / 2)}}
@media(max-width:660px){.carousel>*{flex:0 0 88%}}
.carnav{display:flex;gap:10px;margin-top:22px}
.carbtn{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--gray-lt);background:#fff;
  cursor:pointer;display:grid;place-items:center;color:var(--accent);font-size:1.1rem}
.carbtn:hover{border-color:var(--accent);background:var(--accent);color:#fff}

/* section number eyebrow */


/* ---------------------------------------------------------------------------
   MOBILE PASS. The phone recording showed the fixed chrome (demo bar + two
   header rows + sticky footer) consuming ~40% of the viewport, the fact boxes
   and ticker oversized for a phone, and the sticky bar duplicating the header
   CTAs. Under 700px:
     - the header scrolls away instead of following
     - the sticky bar collapses to one centred Call button
     - hero, fact strip, stat band, ticker, and section rhythm tighten
   --------------------------------------------------------------------------- */
@media(max-width:700px){
  .demobar{position:static}
  /* header.site{position:static} was here, left over from when the header was
     sticky rather than fixed. On a phone it dropped the header back into the
     flow while body kept its 60px padding-top reserved for a header that was
     no longer floating, so the page opened with the logo pushed a full header
     height down the screen. Fixed on every width now, which is what it should
     have been. */
  .demobar .wrap{justify-content:center}

  #stickybar{padding:10px 0}
  #stickybar .msg{display:none}
  #stickybar .acts{width:100%;display:flex;justify-content:center}
  #stickybar .acts .btn{display:none}
  #stickybar .acts a.btn[data-phone]{display:inline-block;width:min(320px,86vw);text-align:center;padding:13px 0;font-size:1.02rem}

  .chero{padding:38px 0 34px;min-height:max(380px,calc(100svh - 226px))}
  .chero .sub{white-space:normal}
  .quickrow{gap:8px}
  .quick{padding:11px 13px}
  .quick b{font-size:.92rem}
  .quick span{font-size:.78rem}

  .facts{grid-template-columns:1fr 1fr;margin-top:0}
  .fact{padding:18px 16px;border-bottom:1px solid var(--line)}
  .factsband{padding:28px 0 40px}
  .fact .k{font-size:1.02rem}
  .fact .v{font-size:.82rem}

  .stat{width:auto;min-width:0;padding:24px 20px}
  .stat .num{font-size:2.2rem}

  .reveal{opacity:1;transform:none;transition:none}

  .idealist li{padding-left:0;padding-top:16px;padding-bottom:16px}
  .idealist li::before{position:static;display:block;margin-bottom:5px}
  .idealist li:first-child::before{position:static}

  /* #6 the sticky Call bar duplicated numbers already on screen and taxed 60px
     of every view. Desktop keeps it; phones do not. */
  #stickybar{display:none}

  /* #3 inputs at 16px so iOS never zooms the page on focus */
  .field input,.field select,.field textarea{font-size:16px}

  /* Compact chrome: one slim demo line, logo + CTAs on one row, nav on a
     single swipeable line. Roughly half the height of the stacked version. */
  .demobar{padding:5px 0}
  .demobar .wrap{flex-wrap:nowrap;justify-content:space-between;gap:8px}
  .dbnote{display:none}
  #notesBtn{display:none}

  header.site .wrap{flex-wrap:wrap;align-items:center;row-gap:0;padding-top:6px;padding-bottom:6px}
  .brand{margin-right:auto}
  .brand img{height:28px;min-width:0}
  .ctagroup{margin-left:0;gap:6px}
  .navcta{padding:7px 10px;font-size:.72rem;border-width:1.5px}
  nav.main{width:100%;order:3;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    gap:18px;padding:8px 2px 2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  nav.main::-webkit-scrollbar{display:none}
  nav.main a{white-space:nowrap}

  /* #7 pay facts become enclosed cards instead of floating rules */
  .facts{grid-template-columns:1fr 1fr;gap:10px;border:0;padding:0 0 4px}
  .fact{border:1px solid var(--line)!important;border-radius:12px;background:#fff;padding:16px 14px}
  .fact .k{font-size:1rem}
  .fact .v{font-size:.85rem}

  /* #12 raise the small text floors */
  .quick span{font-size:.85rem}
  .quick b{font-size:.95rem}
  .small{font-size:.9rem}

  /* #16 stat captions come back, small */
  .stat .dsc{display:block;font-size:.76rem;margin-top:5px;color:rgba(255,255,255,.55)}

  /* #5 the comparison table becomes stacked topic cards. The desktop header
     row disappears; each side is labelled inline instead. */
  .cmphead{display:none}
  .cmpitem{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden;background:#fff}
  .cmprow{grid-template-columns:1fr}
  .cmptopic{background:var(--tint);font-weight:700;padding:12px 16px!important;
    border-bottom:1px solid var(--line);min-height:0!important;display:block}
  .cmpthem,.cmpus{padding:11px 16px!important;min-height:0!important}
  /* The label used to be typed into ::before with a small rule drawn beside it
     in ::after. It is a real element now, so the Smart Rehab side carries the
     logo rather than the words, and the rule is gone. The two answers are also
     forced to equal height, because a two-line clinic answer against a
     one-line ours made every card a different shape down the page. */
  .cmpwho{display:block;font-family:var(--title);font-size:.7rem;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;color:var(--gray);margin-bottom:7px;width:100%}
  .cmpus .cmpwho{text-transform:none;letter-spacing:0;margin-bottom:5px}
  .cmpwholog{height:15px;width:auto;display:block}
  .cmprow{grid-template-rows:auto 1fr 1fr;align-items:stretch}
  .cmpthem,.cmpus{padding:13px 16px!important;min-height:0!important;
    flex-wrap:wrap;align-items:flex-start;align-content:flex-start}
  .cmpthem{color:var(--body-ink)}
  .cmpus{background:var(--pale);position:relative}
  .cmpplus{margin-left:auto}

  /* #9 the gradient callout centres and runs edge to edge */
  .gradcard{margin:0 -28px;border-radius:0;padding:40px 22px;text-align:center}
  .gradcard h3{margin:0 auto;max-width:22ch!important}
  .tcallout{padding:26px 20px;text-align:center}
  .tcallout .btnrow{justify-content:center}

  /* #8 two-column desktop layouts stack and fill the width */
  .split2{grid-template-columns:1fr;gap:28px}
  .split2 .housewrap{margin-top:8px!important}
  .chapter{grid-template-columns:1fr;gap:6px;padding:26px 0}
  .chapter .yr{font-size:1.3rem}
  .calc{box-shadow:0 10px 30px rgba(6,100,173,.10)}
  .feature{grid-template-columns:1fr}

  .ticker{padding:9px 0}
  .tickin span{font-size:.8rem}
  .tickin span.tk-market{padding:0 20px}
  .tickin span.tk-claim{padding:0 9px}

  section{padding:56px 0}
  section.endslist{padding-bottom:36px}
  .ideaband{padding:56px 0}
}

@media(prefers-reduced-motion:reduce){
  .chero .kb,.watermark,.tickin{animation:none!important}
  .scrollcue i{animation:none!important}
  .reveal{filter:none!important}
}


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