/* ==========================================================================
   Port Townsend Occupational Therapy

   Two rules hold this sheet together:

   1. No line does a job that a surface can do. Every border here is a
      hairline derived from --ink-rgb at 9-14%. Nothing is drawn in black.
      Cards are LIGHTER than the ground they sit on, so they lift on tone
      rather than on an outline.
   2. Colour arrives as shape, not as decoration. The five brand colours
      appear at full strength only in .shape and .chip; behind text they
      appear only as a --wash-*, which is why nothing in here needs a
      contrast override.
   ========================================================================== */

:root{
  /* -- surfaces. card is lighter than bg; band is the one tinted plane ---- */
  --bg:#faf8f2;         /* just off white, warm — the washes carry the colour */
  --card:#ffffff;
  --card-hi:#ffffff;

  --ink:#111110;
  --body:#3d3b36;
  --muted:#67635b;      /* 5.2:1 on --bg, 5.3:1 on the lightest wash */
  --ink-rgb:17,17,16;

  /* -- brand, full strength: shapes and chips only -------------------------- */
  --pink:#f2a2bd; --yellow:#f0c53a; --green:#4fa353; --red:#e5493a; --blue:#4a90d8;

  /* -- brand, band strength: the only register allowed behind copy ---------- */
  --wash-pink:#fbe9ef; --wash-yellow:#fbf1d6; --wash-green:#e9f1e7;
  --wash-blue:#e8f0fa;  --wash-red:#fbeae7;

  /* map surfaces — a touch stronger than the washes so land and water
     separate at a glance rather than only on close inspection */
  --map-water:#dbe7f5; --map-land:#f3efe3;

  /* -- brand, ink strength: markers that must clear 4.5:1 on their own wash - */
  --green-ink:#357a3a;   /* 4.6:1 on --wash-green  */
  --blue-ink:#2f6ba8;    /* 4.8:1 on --wash-blue   */
  --yellow-ink:#7d5c07;  /* 5.5:1 on --wash-yellow */
  --pink-ink:#a3436a;    /* 5.0:1 on --wash-pink   */
  /* Chip glyphs are aria-hidden decoration, so they carry no contrast floor —
     but raw --yellow disappears on its own wash, so it gets a mid step. */
  --yellow-deep:#c99a12;
  --pink-deep:#d4779a;

  /* -- dark surface: footer ------------------------------------------------- */
  --surface:#2b3a2e;
  --surface-deep:#22301f;
  --on-surface:#dfe7dd;            /* 9.5:1 */
  --on-surface-strong:#f2f6f0;
  --on-surface-muted:#a3b3a2;      /* 5.4:1 */
  --on-surface-rgb:223,231,221;

  /* -- hairlines. there is no --rule; nothing is drawn in ink --------------- */
  --hair:rgba(var(--ink-rgb),.09);
  --hair-strong:rgba(var(--ink-rgb),.14);
  --hair-dashed:rgba(var(--ink-rgb),.18);

  --radius:20px; --radius-lg:28px; --radius-band:48px; --radius-pill:999px;
  --shadow-lift:0 16px 36px -12px rgba(var(--ink-rgb),.18);

  /* -- measure ------------------------------------------------------------- */
  --shell:1240px;
  --gutter:56px;
  --measure:62ch;
  /* How far a coloured band is held back from the page edge. The band is
     painted by a pseudo-element rather than sized with a margin, so the
     section box stays full width and a .container inside a band still
     resolves to exactly the same left edge as one outside it. */
  --band-inset:32px;

  --s1:8px; --s2:12px; --s3:16px; --s4:24px; --s5:32px;
  --s6:48px; --s7:64px; --s8:88px; --s9:112px;

  --fs-hero:clamp(40px,5vw,62px);
  --fs-h1:clamp(33px,4vw,48px);
  --fs-h2:clamp(27px,3vw,36px);
  --fs-h3:22px;
  --fs-h4:18px;
  --fs-lede:19px;
  --fs-body:17px;
  --fs-sm:15px;
  --fs-label:12px;

  --font:'Google Sans Flex','Google Sans',system-ui,sans-serif;
  --font-mono:'Space Mono',ui-monospace,SFMono-Regular,monospace;
  /* Roundness carries meaning: firmer for clinical material, softest where
     Julia speaks in the first person. ROND cannot be pinned in the css2 URL —
     it 200s but serves identical glyphs — so it only moves from here. */
  --rond:'ROND' 50;
  --rond-firm:'ROND' 20;
  --rond-soft:'ROND' 95;

  --shape-lg:clamp(240px,26vw,420px);
  --shape-md:clamp(170px,17vw,260px);
  --shape-sm:130px;
  /* The hero's shapes sit fully on the page, so their whole width shows. The
     tokens above assume roughly half of a shape is off-screen, which is why
     the hero needs its own smaller pair. */
  --shape-hero-lg:clamp(210px,21vw,310px);
  --shape-hero-md:clamp(140px,13vw,190px);
  /* How far a bottom-anchored shape sits clear of its section's edge. Bottom
     shapes never bleed downward — a section boundary would slice them. */
  --shape-inset:36px;

  --link-hover:#b8321f;
  --focus:#175a96;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--body);
  font-family:var(--font);font-size:var(--fs-body);line-height:1.65;
  font-variation-settings:var(--rond);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{color:var(--ink);font-weight:600;letter-spacing:-.02em;line-height:1.14}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--link-hover)}
p{text-wrap:pretty}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--surface);color:var(--on-surface-strong);padding:12px 20px;font-weight:600;border-radius:0 0 var(--radius) 0}
.skip:focus{left:0;color:var(--on-surface-strong)}

.container{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter);position:relative}

/* One measure, one left edge.
   .container.narrow keeps the container's own width and edge, and caps its
   CHILDREN at the measure. Putting the cap on the container itself is what
   used to centre a "left-aligned" paragraph on a different axis from the
   heading above it — the single most visible alignment fault on the old site. */
.narrow{max-width:var(--measure)}
.container.narrow{max-width:var(--shell)}
.container.narrow>*{max-width:var(--measure)}

/* Asymmetric editorial split: the heading holds its own column, the body holds
   the measure. Fractions rather than a 12-col grid on purpose — a long word in
   the heading forces an auto-sized track wider and pushes the whole layout off
   the grid, which minmax(0,·) prevents. */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:var(--s5) var(--s7);align-items:start}
.split-body{max-width:var(--measure)}
.split-body>*+*{margin-top:var(--s3)}
.split.align-end{align-items:end}
.split.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
/* The contact form is a box, not a column of prose — it wants the whole track. */
.split-body.form-col{max-width:none}

/* The quiet label layer — the only uppercase, tracked thing in the system, and
   the one job the mono face has. Every eyebrow on the site routes through here
   rather than redeclaring the same five properties. */
.label,.flbl,.tags .lbl,.crumb,.policy-grid h3,.fact-grid h3{
  font-family:var(--font-mono);font-size:var(--fs-label);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);line-height:1.4;
}

/* --------------------------------------------------------------------------
   shapes
   Saturated shapes anchor to a corner or gutter and bleed a fixed fraction of
   their own width off the edge, so they are never bisected mid-side the way
   hand-placed pixel offsets were. Washes are the only register allowed to sit
   behind copy.
   -------------------------------------------------------------------------- */
.shape{position:absolute;z-index:0;pointer-events:none;display:block;line-height:0}
.shape svg{display:block;width:100%;height:auto;overflow:visible}
.shape svg path{fill:var(--shape-fill)}
.shape-lg{width:var(--shape-lg)}
.shape-md{width:var(--shape-md)}
.shape-sm{width:var(--shape-sm)}
/* Anchoring uses the standalone `translate` property, never `transform`:
   hero-shapes.js owns `transform` for the soft-body motion, and the two
   compose (translate applies first) instead of overwriting each other.

   Only two directions of bleed are allowed. Sideways, off the page edge, which
   reads as the page continuing past the viewport. And upward on a masthead,
   where the shape runs behind the nav and meets the opaque announcement bar.
   A shape is never cut by a section boundary in any other direction — that is
   what made the old hand-placed offsets look sliced rather than bled. */
.shape-tl{top:0;left:0;translate:-52% -45%}
.shape-tr{top:0;right:0;translate:52% -45%}
.shape-bl{bottom:var(--shape-inset);left:0;translate:-52% 0}
.shape-br{bottom:var(--shape-inset);right:0;translate:52% 0}
.shape-gutter-l{top:50%;left:0;translate:-52% -50%}
.shape-gutter-r{top:50%;right:0;translate:52% -50%}
.hero .shape{transform-origin:50% 50%;will-change:transform,opacity;backface-visibility:hidden}
/* Eyes: baked shut in the markup (see shape.njk), opened at runtime by
   hero-eyes.js. Sclera/pupil take the same surface + ink tokens as the rest
   of the page rather than new colour, so they read as part of the system. */
.shape .eye .sclera{fill:var(--card-hi)}
.shape .eye .pupil{fill:var(--ink)}
/* Tucked behind the photo's inner corner, into the gap between the two
   columns — anchored to the outer edge it just hung into the page gutter. */
.portrait .shape{translate:34% -34%}
section,header.hero,.page-head,footer{position:relative}

/* --------------------------------------------------------------------------
   announcement bar + nav
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   masthead — the footer's slab, inverted
   Same inset from the page edges and the same radius, mirrored to the bottom
   corners. Its content runs wider than var(--shell): the bar frames the page
   rather than aligning to the column the copy sits in.
   -------------------------------------------------------------------------- */
.masthead{
  position:relative;z-index:30;
  margin:0 var(--band-inset);
  background:var(--wash-green);
  border-radius:0 0 var(--radius-band) var(--radius-band);
  overflow:hidden;
}
/* The availability line is the one genuinely time-sensitive thing on the page,
   so it takes the footer's deep green against the slab's wash — a dark strip
   reading 9.5:1, and the only place in the masthead that carries real weight.
   The saturated brand green was tried here and lost: it sat directly above the
   saturated green blob in the hero and read as a mismatch. */
.bar{background:var(--surface);color:var(--on-surface);text-align:center;font-size:13.5px;font-weight:600;padding:11px var(--s4)}
.bar a{color:var(--on-surface-strong);border-bottom-color:rgba(var(--on-surface-rgb),.45)}
.bar a:hover{color:var(--yellow);border-color:var(--yellow)}
.bar a{color:var(--ink);border-bottom:1px solid rgba(var(--ink-rgb),.35)}
.bar a:hover{color:var(--link-hover);border-color:var(--link-hover)}

nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s4) var(--s6);flex-wrap:wrap}
nav .brand{display:block;color:var(--ink)}
/* 172px is just under the width of "Port Townsend Occupational", so the name
   breaks to two lines on its own word boundary without hardcoding the split. */
nav .brand span{display:block;font-size:16px;font-weight:600;line-height:1.2;letter-spacing:-.015em}
.nav-panel{display:flex;align-items:center;gap:var(--s5)}
.nav-panel ul{display:flex;gap:var(--s4);list-style:none;font-size:14.5px;font-weight:500;align-items:center}
/* :not(.btn) — otherwise this out-specifies .btn and paints the CTA on itself. */
.nav-panel a:not(.btn){color:var(--body)}
.nav-panel a:not(.btn):hover{color:var(--link-hover)}
.nav-panel a.on{color:var(--ink);font-weight:600;border-bottom:2px solid var(--yellow);padding-bottom:3px}
.nav-toggle{display:none;align-items:center;gap:9px;background:none;border:1px solid var(--hair-strong);border-radius:var(--radius-pill);padding:9px 16px;cursor:pointer;font-family:var(--font);font-size:14px;font-weight:600;color:var(--ink)}
.nav-toggle-bars{display:block;width:16px}
.nav-toggle-bars span{display:block;height:2px;border-radius:1px;background:var(--ink);margin:3px 0}

/* --------------------------------------------------------------------------
   buttons + links
   -------------------------------------------------------------------------- */
.btn{
  display:inline-block;background:var(--surface);color:var(--on-surface-strong);
  font-size:15.5px;font-weight:600;letter-spacing:0;
  padding:16px 30px;border:0;border-radius:var(--radius-pill);cursor:pointer;
  font-family:var(--font);text-align:center;
  transition:background .18s,transform .18s,box-shadow .18s;
}
.btn:hover{background:var(--surface-deep);color:var(--on-surface-strong);transform:translateY(-1px);box-shadow:var(--shadow-lift)}
.btn.out{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair-strong)}
.btn.out:hover{background:var(--card-hi);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair-strong),var(--shadow-lift)}
.btn-sm{padding:11px 22px;font-size:14.5px}   /* matches the nav links */
.btn-note{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--s2)}
.lnk{font-weight:600;font-size:15.5px;color:var(--ink);border-bottom:2px solid var(--yellow);padding-bottom:2px}
.lnk:hover{color:var(--link-hover);border-color:var(--link-hover)}

/* --------------------------------------------------------------------------
   masthead — hero and page-head
   Masthead shapes tuck under the nav's lower edge and are whole below it: no
   fade, no slice. They deliberately do not run up behind the nav, because the
   brand and the nav links are the only text on the site with no surface of
   their own — at any width below about 1300px they sit directly over where a
   top-bleeding shape would pass, and saturated brand colour behind them fails
   contrast outright.
   -------------------------------------------------------------------------- */
.hero,.page-head{overflow:hidden;isolation:isolate}
.hero .container,.page-head .container{z-index:2}
.page-head .shape-tl{translate:-52% 0}
.page-head .shape-tr{translate:52% 0}
/* The hero's shapes sit inside the page instead of bleeding off its edges, so
   they read as part of the composition rather than as something the viewport
   happened to crop. The inset also has to cover the wobble: hero-shapes.js
   rotates and breathes them, and anything closer to an edge gets sliced by
   the hero's overflow. */
.hero .shape{translate:none}
.hero .shape-lg{width:var(--shape-hero-lg)}
.hero .shape-md{width:var(--shape-hero-md)}
.hero .shape-tl{top:var(--s4);left:var(--s4)}
.hero .shape-bl{bottom:var(--s6);left:var(--s7)}
.hero .shape-gutter-r{top:50%;right:var(--s6);translate:0 -50%}


/* The hero is the one deliberately centred moment on the site; the closing CTA
   bookends it. Everything between them is left-aligned editorial. */
/* Deeper than the section rhythm elsewhere: the two shapes down the left have
   to clear each other, and that vertical budget is what caps how large they
   can be. */
.hero{padding:var(--s9) 0 calc(var(--s9) + var(--s5));text-align:center}
/* Sits above the h1 and names the practice and the place — the hero's only
   uppercase line, in the same label register as every section eyebrow. */
.hero-eyebrow{margin-bottom:var(--s3)}
.hero h1{font-size:var(--fs-hero);line-height:1.06;letter-spacing:-.025em;max-width:18ch;margin:0 auto var(--s4)}
/* The hero is the one place a saturated shape is allowed to sit behind copy,
   so its text is ink rather than --body/--muted. Ink clears 4.5:1 on all five
   brand colours (red is tightest, at 4.86:1); --body does not — it falls to
   3.4:1 on green and blue. Everywhere else shapes either keep clear of text or
   use the wash register, which is why this is scoped to .hero. */
.hero .lede{font-size:var(--fs-lede);max-width:54ch;margin:0 auto var(--s5);color:var(--ink)}
.hero-acts{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center;justify-content:center}
.hero .fine{margin-top:var(--s5);font-size:var(--fs-sm);color:var(--ink);font-weight:500}

/* The opening statement under a header slab: one column, one size, no visible
   heading. The page title has just been stated in the slab, so a subhead here
   only repeats the hierarchy — and a single size stops the top of the page
   reading as four competing steps. */
.opening>p{font-size:var(--fs-lede);line-height:1.6}
.opening>p+p{margin-top:var(--s4)}

/* --------------------------------------------------------------------------
   sections
   .sec-alt is a tinted slab, not a bordered band. --band-tint is the house
   green; the tint-* modifiers rotate it where a page wants more colour.
   -------------------------------------------------------------------------- */
.sec{padding:var(--s9) 0}
.sec-tight{padding:var(--s7) 0}
/* Any section that carries a bleeding shape has to clip it, or the shape
   extends the document box and the whole page gains a horizontal scrollbar. */
.sec-shaped{position:relative;overflow:hidden}
.sec-shaped>.container{z-index:2}
/* The tint is painted by a pseudo-element inset from the page edge, not by a
   margin on the section. The section box therefore stays full width, so the
   .container inside a band lands on exactly the same left edge as one outside
   it — which a margin would quietly break below the shell width. */
.sec-alt{--band-tint:var(--wash-green);position:relative}
.sec-alt::before{
  content:"";position:absolute;z-index:0;
  inset:0 var(--band-inset);
  background:var(--band-tint);
  border-radius:var(--radius-band);
}
.sec-alt>*:not(.shape){position:relative;z-index:1}
/* Inside a band a shape stays within the band's own edge — bleeding one would
   cross the rounded corner onto the page ground. */
.sec-alt .shape-gutter-r{right:calc(var(--band-inset) + var(--s2));translate:0 -50%}
.sec-alt .shape-gutter-l{left:calc(var(--band-inset) + var(--s2));translate:0 -50%}
.tint-green{--band-tint:var(--wash-green)}
.tint-blue{--band-tint:var(--wash-blue)}
.tint-yellow{--band-tint:var(--wash-yellow)}
.tint-pink{--band-tint:var(--wash-pink)}
.tint-red{--band-tint:var(--wash-red)}

.sec-head{max-width:var(--measure);margin:0 0 var(--s6)}
.sec-head.centered{margin-left:auto;margin-right:auto;text-align:center}
h2{font-size:var(--fs-h2);letter-spacing:-.018em}
.sec-head p{margin-top:var(--s3);font-size:var(--fs-lede);color:var(--body)}
.big{font-size:var(--fs-lede);margin-bottom:var(--s3)}
.narrow h2,.split-head h2{margin-bottom:var(--s3)}
.narrow h3{font-size:20px;font-weight:600;margin-bottom:var(--s1)}
.sec-foot{margin-top:var(--s6);display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center}

/* --------------------------------------------------------------------------
   the OT introduction, directly under the hero
   The lead paragraph carries the definition at display size, with the child's
   occupations picked out inside the sentence — that list is the whole idea, so
   it gets set rather than left to run past inside body copy.
   -------------------------------------------------------------------------- */
.intro-ot{position:relative;overflow:hidden}
.intro-ot>.container{position:relative;z-index:1}
.lead{font-size:clamp(20px,2vw,25px);line-height:1.5;margin-bottom:var(--s4)}
.occ{color:var(--ink);font-weight:600}

/* Credentials as four quiet facts under the heading, each tagged with a dot
   from the brand set. Factual, and no longer a coloured bar across the page. */
.cred-list{list-style:none;margin-top:var(--s6);display:flex;flex-direction:column;gap:var(--s2)}
.cred-list li{position:relative;padding-left:var(--s4);font-size:var(--fs-sm);line-height:1.45;color:var(--muted);font-variation-settings:var(--rond-firm)}
.cred-list li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;border-radius:50%;background:var(--dot)}
.cred-list li:nth-child(1){--dot:var(--green)}
.cred-list li:nth-child(2){--dot:var(--yellow)}
.cred-list li:nth-child(3){--dot:var(--blue)}
.cred-list li:nth-child(4){--dot:var(--pink)}

/* --------------------------------------------------------------------------
   cards — lighter than the ground, hairline edge, no resting shadow
   -------------------------------------------------------------------------- */
/* minmax(0,·) so a long unbreakable string in one cell cannot widen its track
   at the other's expense — the two service cards stay exactly equal. */
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4);align-items:stretch}
.card{
  background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);
  padding:var(--s5) var(--s5) calc(var(--s5) + 4px);
  transition:transform .25s,box-shadow .25s;
}
.sec-alt .card{background:var(--card-hi);border-color:transparent}
.card h3{font-size:19.5px;line-height:1.28;margin-bottom:var(--s2);letter-spacing:-.012em}
.card p{font-size:16px;line-height:1.6}
.card p+p{margin-top:var(--s2)}
.card.wide{grid-column:1/-1;display:grid;grid-template-columns:64px 1fr;gap:0 var(--s4);align-items:start}
.card.wide .chip{margin-bottom:0}

/* chips — one silhouette: a brand glyph centred in its own wash */
.chip{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--chip-bg);margin-bottom:var(--s4)}
.chip svg{display:block;width:30px;height:30px}
.chip svg path{fill:var(--chip-fg)}
.chip svg .cut{fill:var(--chip-bg)}
.chip-red{--chip-bg:var(--wash-red);--chip-fg:var(--red)}
.chip-yellow{--chip-bg:var(--wash-yellow);--chip-fg:var(--yellow-deep)}
.chip-blue{--chip-bg:var(--wash-blue);--chip-fg:var(--blue)}
.chip-green{--chip-bg:var(--wash-green);--chip-fg:var(--green)}
.chip-pink{--chip-bg:var(--wash-pink);--chip-fg:var(--pink-deep)}
.sec-alt .chip{background:var(--chip-bg)}

/* --------------------------------------------------------------------------
   principles — a short colour tick instead of a full black rule
   -------------------------------------------------------------------------- */
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s7)}
.principle{--tick:var(--green)}
.principle::before{content:"";display:block;width:44px;height:4px;border-radius:2px;background:var(--tick);margin-bottom:var(--s4)}
.principle:nth-child(2){--tick:var(--yellow)}
.principle:nth-child(3){--tick:var(--blue)}
.principle:nth-child(4){--tick:var(--pink)}
.principle h3{font-size:var(--fs-h3);letter-spacing:-.018em;margin-bottom:var(--s2)}
.principle p{font-size:16px}
.principles-long p+p{margin-top:var(--s2)}

/* --------------------------------------------------------------------------
   services
   -------------------------------------------------------------------------- */
.svc{background:var(--card);border:1px solid var(--hair);border-radius:var(--radius-lg);padding:var(--s6) var(--s5)}
.sec-alt .svc{background:var(--card-hi);border-color:transparent}
/* Grid, not flex-wrap: the price capsule pins to the same top-right corner in
   every card regardless of how many lines the title takes, instead of
   dropping to a second row whenever the price string runs long. */
.svc .top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 var(--s3);align-items:start;margin-bottom:var(--s3)}
.svc h3{font-size:var(--fs-h3);letter-spacing:-.018em}
.price{font-weight:600;font-size:17px;color:var(--ink);white-space:nowrap;font-variation-settings:var(--rond-firm);background:var(--wash-yellow);border-radius:var(--radius-pill);padding:5px 14px}
.svc p{font-size:16px}
.svc .caveat{margin-top:var(--s2);font-size:var(--fs-sm);font-style:italic;color:var(--muted)}
.svc ul{margin-top:var(--s3);padding-left:20px;font-size:16px}
.svc li{margin-bottom:6px}

/* --------------------------------------------------------------------------
   fit / not-fit — the tint carries the yes/no, so nothing needs a box
   -------------------------------------------------------------------------- */
.fit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4)}
.fit-col{border-radius:var(--radius-lg);padding:var(--s6) var(--s5)}
.fit-yes{background:var(--wash-green)}
.fit-no{background:var(--wash-blue)}
.sec-alt .fit-yes,.sec-alt .fit-no{background:var(--card-hi)}
.fit-col h3{font-size:20px;margin-bottom:var(--s4)}
.fit-col ul{list-style:none;font-size:16px}
.fit-col li{position:relative;padding-left:32px;margin-bottom:var(--s2);line-height:1.55}
.fit-col li::before{position:absolute;left:0;top:0;font-weight:700;font-size:17px}
.fit-yes li::before{content:"✓";color:var(--green-ink)}
.fit-no li::before{content:"→";color:var(--blue-ink)}
.fit-note{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--hair-strong);font-size:var(--fs-sm);font-style:italic;color:var(--muted)}

/* --------------------------------------------------------------------------
   numbered steps — a filled colour disc instead of a 2.5px black rule
   -------------------------------------------------------------------------- */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6) var(--s5)}
.steps li{--disc:var(--wash-green);--disc-ink:var(--green-ink)}
.steps li:nth-child(2){--disc:var(--wash-yellow);--disc-ink:var(--yellow-ink)}
.steps li:nth-child(3){--disc:var(--wash-blue);--disc-ink:var(--blue-ink)}
.steps li:nth-child(4){--disc:var(--wash-pink);--disc-ink:var(--pink-ink)}
.sec-alt .steps li{--disc:var(--card-hi)}
.steps .n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--disc);color:var(--disc-ink);font-size:16px;font-weight:700;font-variation-settings:var(--rond-firm);margin-bottom:var(--s3)}
.steps h3{font-size:var(--fs-h4);margin-bottom:var(--s1);line-height:1.3}
.steps p{font-size:15.5px}

/* --------------------------------------------------------------------------
   about
   -------------------------------------------------------------------------- */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s7);align-items:start}
.about .portrait{position:relative}
.about h2{margin-bottom:var(--s4)}
.about p{margin-bottom:var(--s3);max-width:var(--measure)}
/* Julia speaking in the first person — the softest roundness on the site. */
.about .bio{font-variation-settings:var(--rond-soft)}
/* The real portrait. Keeps the 4/5 box and the radius the dashed placeholder
   held, so the yellow diamond tucked behind its top-right corner still lands
   in the same place. */
.portrait-img{position:relative;z-index:1;display:block;width:100%;height:auto;
  aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-lg);background:var(--card)}

.tags{margin-top:var(--s5)}
.tags .lbl{margin-bottom:var(--s2)}
.tags ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s1)}
.tags li{font-size:14.5px;font-weight:600;color:var(--ink);background:var(--wash-blue);border-radius:var(--radius-pill);padding:7px 15px}
.sec-alt .tags li{background:var(--card-hi)}
.creds{margin-top:var(--s4);font-size:var(--fs-sm);color:var(--muted);font-variation-settings:var(--rond-firm)}
.creds b{color:var(--ink);font-weight:600}

/* --------------------------------------------------------------------------
   faq
   -------------------------------------------------------------------------- */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--hair-strong)}
.faq details:first-child{border-top:1px solid var(--hair-strong)}
.faq summary{cursor:pointer;list-style:none;padding:var(--s4) var(--s6) var(--s4) 0;position:relative;font-weight:600;font-size:var(--fs-h4);color:var(--ink);border-radius:var(--radius)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.faq summary::after{content:"+";position:absolute;right:10px;top:20px;font-size:26px;font-weight:400;line-height:1;color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 var(--s7) var(--s4) 0;font-size:16.5px;max-width:var(--measure)}
.faq .a p+p{margin-top:var(--s2)}
.faq-more{margin-top:var(--s5);font-weight:600}

/* --------------------------------------------------------------------------
   page head + prose. Title and lede stack on the same left edge as the copy
   below them — one axis for the whole page.
   -------------------------------------------------------------------------- */
.page-head{padding:var(--s8) 0 var(--s5);min-height:calc(var(--shape-md) * 1.07 + var(--s4))}

/* Two pages carry a header slab: the title continues the masthead rather than
   starting a bare field below it — same tint, same inset, no gap, with the
   rounding moved down to the bottom of the title block. Opt-in, because it
   suits pages that open with a statement and not the more utilitarian ones. */
.page-head.slab{
  background:var(--wash-green);
  margin:0 var(--band-inset);
  border-radius:0 0 var(--radius-band) var(--radius-band);
  padding:var(--s8) 0;
  min-height:0;
}
body:has(.page-head.slab) .masthead{border-radius:0}
.page-head>.container{position:relative;z-index:1}
/* on-page inside the slab, like the hero's — not bleeding off an edge */
.page-head .shape{translate:none}
.page-head .shape-gutter-r{top:50%;right:var(--s7);translate:0 -50%}
.page-head h1{font-size:var(--fs-h1);line-height:1.08;letter-spacing:-.022em;max-width:17ch}
.page-head .lede{margin-top:var(--s4);font-size:var(--fs-lede);max-width:var(--measure);color:var(--body)}

.prose{max-width:var(--measure)}
.prose h2{font-size:clamp(24px,2.6vw,30px);margin:var(--s6) 0 var(--s3)}
.prose h3{font-size:20px;font-weight:600;margin:var(--s5) 0 var(--s2)}
.prose p{margin-bottom:var(--s3)}
.prose ul,.prose ol{margin:0 0 var(--s4) 22px}
.prose li{margin-bottom:var(--s1)}
.prose a{border-bottom:2px solid var(--yellow);font-weight:600}
.prose blockquote{background:var(--wash-yellow);border-radius:var(--radius);padding:var(--s4) var(--s5);margin:var(--s5) 0;font-style:italic}
.crumb{margin-bottom:var(--s3)}
.crumb a{color:var(--muted);border-bottom:1px solid var(--hair-strong)}
.crumb a:hover{color:var(--link-hover);border-color:var(--link-hover)}

/* --------------------------------------------------------------------------
   cta — no box at all. Centred text on the page, with two anchored shapes.
   -------------------------------------------------------------------------- */
.cta{overflow:hidden;text-align:center;padding:var(--s9) 0;isolation:isolate}
.cta .container{z-index:2}
.cta h2{max-width:20ch;margin:0 auto var(--s4)}
.cta p{max-width:50ch;margin:0 auto var(--s5);font-size:var(--fs-lede)}
.cta .lines{margin-top:var(--s5);font-size:16px;font-weight:600;color:var(--body)}
.cta .lines a{border-bottom:2px solid var(--yellow)}
.cta .lines .geo{display:block;margin-top:var(--s1);font-weight:400;font-size:var(--fs-sm);color:var(--muted)}

/* --------------------------------------------------------------------------
   footer — deep warm green, rounded off the page, with a shape over its edge
   -------------------------------------------------------------------------- */
footer{color:var(--on-surface);padding:var(--s8) var(--gutter) var(--s5);font-size:var(--fs-sm);overflow:hidden}
footer::before{content:"";position:absolute;z-index:0;inset:0 var(--band-inset);background:var(--surface);border-radius:var(--radius-band) var(--radius-band) 0 0}
footer .shape{right:calc(var(--band-inset) + var(--s2));translate:0 -50%}
/* Overrides the macro's fill: a lift of the surface rather than a brand hue,
   so footer text remains legible wherever the shape lands. */
footer .shape svg path{fill:rgba(var(--on-surface-rgb),.09)}
.fwrap{max-width:var(--shell);margin:0 auto;position:relative;z-index:2}
.fintro{margin-bottom:var(--s7)}
.fname{font-weight:600;font-size:19px;color:var(--on-surface-strong);letter-spacing:-.015em;line-height:1.25}
.frole{font-size:var(--fs-sm);color:var(--on-surface-muted);margin-top:var(--s2);max-width:46ch}
/* Three fixed 20% columns packed to the left, rather than fractions stretched
   across the full width — the link lists read as short lists, not as a row
   spanning the page. */
.fcols{display:grid;grid-template-columns:repeat(3,20%);gap:var(--s6);justify-content:start}
.flbl{color:var(--on-surface-muted);margin-bottom:var(--s3)}
.fcols ul{list-style:none}
.fcols li{margin-bottom:10px;font-size:15.5px}
/* No resting underline in the link stacks — three columns of underlined text
   is the same noise the black rules were, just smaller. */
footer a{color:var(--on-surface);border-bottom:1px solid transparent}
footer a:hover{color:var(--yellow);border-color:var(--yellow)}
.fcontact a{border-bottom-color:rgba(var(--on-surface-rgb),.3)}
.fcontact .k{display:block;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--on-surface-muted)}
.fcontact li{margin-bottom:var(--s3)}
/* Second line under the service area: remote reaches further than she drives,
   which is a qualifier rather than a fact of equal weight. */
.fcontact .fine-note{color:var(--on-surface-muted);font-size:var(--fs-sm)}
footer .base{display:flex;justify-content:space-between;gap:var(--s3);margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid rgba(var(--on-surface-rgb),.16);font-size:13px;color:var(--on-surface-muted);flex-wrap:wrap}
footer .todo-inline{color:var(--on-surface-muted)}

/* --------------------------------------------------------------------------
   callout, lists, grids
   -------------------------------------------------------------------------- */
/* No box. A callout is a change of pace in the copy, not a container — the
   heading and the measure carry it, the way they do in the prose. */
.note-block{max-width:var(--measure)}
.note-block h2{font-size:clamp(23px,2.4vw,29px);margin-bottom:var(--s3)}
.note-block h3{font-size:20px;margin-bottom:var(--s2)}
.note-block p+p{margin-top:var(--s2)}
/* The one exception: the referrer-facing block on /for-providers/ keeps a
   colour edge, in Julia's own voice at the softest roundness. */
.note-strong{border-left:3px solid var(--green);padding-left:var(--s4);font-variation-settings:var(--rond-soft)}

.plain-list{list-style:none}
.plain-list li{border-bottom:1px solid var(--hair);padding:var(--s3) 0;font-size:16.5px}
.plain-list li:last-child{border-bottom:0}
.plain-list b{color:var(--ink);font-weight:600}
.plain-ol{margin:0;padding-left:0;list-style:none;counter-reset:po}
.plain-ol li{counter-increment:po;position:relative;padding-left:48px;margin-bottom:var(--s4);font-size:16.5px}
.plain-ol li::before{content:counter(po);position:absolute;left:0;top:-1px;width:32px;height:32px;border-radius:50%;background:var(--wash-blue);color:var(--blue-ink);display:grid;place-items:center;font-weight:700;font-size:14px;font-variation-settings:var(--rond-firm)}
.sec-alt .plain-ol li::before{background:var(--card-hi)}
.plain-ol b{font-weight:600;color:var(--ink)}
.town-list{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s3)}
.town-list li{font-size:14.5px;font-weight:600;color:var(--ink);background:var(--wash-green);border-radius:var(--radius-pill);padding:7px 15px}
.sec-alt .town-list li{background:var(--card-hi)}

/* --------------------------------------------------------------------------
   service-area map (/in-home-ot/)
   Inline SVG, so it takes its colours from the same tokens as everything else.
   Strokes are non-scaling: the map renders from ~300px to full width and the
   coastline stays a hairline at every size instead of thickening with it.
   -------------------------------------------------------------------------- */
/* .split with equal halves rather than the 1fr/1.35fr default, so each column
   is half the page. The map fills its column. */
.area-map{width:100%}
.area-map figcaption{margin-top:var(--s2);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center}
.area-map figcaption a{color:var(--muted);border-bottom:1px solid var(--hair-strong)}
.area-map figcaption a:hover{color:var(--link-hover);border-color:var(--link-hover)}

.areamap{display:block;width:100%;height:auto;border-radius:var(--radius-lg)}
.m-water{fill:var(--map-water)}
.m-land{fill:var(--map-land);stroke:rgba(var(--ink-rgb),.28);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.m-town{fill:var(--blue)}
.m-base{fill:var(--red)}
.m-lbl{font-family:var(--font);font-size:25px;font-weight:500;fill:var(--body)}
.m-lbl-base{font-weight:700;fill:var(--ink)}
.m-scale path{fill:none;stroke:rgba(var(--ink-rgb),.5);stroke-width:1.1;vector-effect:non-scaling-stroke}
.m-scale text{font-family:var(--font-mono);font-size:20px;font-weight:700;letter-spacing:.1em;fill:var(--muted)}

/* policy + fact grids — gapped tinted cards, not a black hairline lattice */
.policy-grid,.fact-grid{display:grid;gap:var(--s3)}
.policy-grid{grid-template-columns:1fr 1fr}
.fact-grid{grid-template-columns:repeat(4,1fr)}
.policy-grid>div,.fact-grid>div{background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);padding:var(--s4)}
.sec-alt .policy-grid>div,.sec-alt .fact-grid>div{background:var(--card-hi);border-color:transparent}
/* An odd number of policy boxes would leave a hole in the right column, and
   the last box is usually the longest. Let it run the full width instead —
   this self-corrects whether there are three boxes or five. */
.policy-grid>div:last-child:nth-child(odd){grid-column:1/-1}
.policy-grid h3,.fact-grid h3{margin-bottom:var(--s2)}
.policy-grid p,.fact-grid p{font-size:16px}
/* These boxes held a single paragraph until Confidentiality gained a second
   one for the mandated-reporter duty, which then ran straight on from the
   sentence above it. */
.policy-grid p+p,.fact-grid p+p{margin-top:var(--s2)}
.fact-grid p{font-weight:600;color:var(--ink);font-variation-settings:var(--rond-firm)}
.fact-grid small{display:block;margin-top:5px;font-weight:400;font-size:13px;color:var(--muted);font-variation-settings:var(--rond)}

/* long-form numbered steps */
.steps-long{list-style:none;max-width:820px}
.steps-long li{display:grid;grid-template-columns:56px 1fr;gap:0 var(--s4);padding:var(--s5) 0;border-bottom:1px solid var(--hair)}
.steps-long li:last-child{border-bottom:0}
.steps-long .n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--wash-yellow);color:var(--yellow-ink);font-weight:700;font-size:17px;font-variation-settings:var(--rond-firm)}
.steps-long h3{font-size:var(--fs-h3);margin-bottom:var(--s2);letter-spacing:-.015em}
.steps-long p{max-width:var(--measure)}
.steps-long p+p{margin-top:var(--s2)}
.step-note{margin-top:var(--s2);font-size:var(--fs-sm);color:var(--muted);font-style:italic}

/* download / one-pager block — still legibly unfinished, no longer shouting */
.dl-block{margin-top:var(--s6);border:2px dashed var(--hair-dashed);border-radius:var(--radius);padding:var(--s4) var(--s5);background:var(--card)}
.sec-alt .dl-block{background:var(--card-hi)}
.dl-block h3{font-size:19px;margin-bottom:var(--s1)}

/* resources */
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.res-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);padding:var(--s5);transition:transform .25s,box-shadow .25s}
.res-card:hover{color:var(--ink);transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.res-card h3{font-size:20px;line-height:1.28;margin-bottom:var(--s2);letter-spacing:-.015em}
.res-card p{font-size:16px;line-height:1.55;flex:1}
.res-more{margin-top:var(--s3);font-weight:600;font-size:14.5px;color:var(--ink);border-bottom:2px solid var(--yellow);align-self:flex-start}

/* contact */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.contact-card{background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);padding:var(--s5)}
.sec-alt .contact-card{background:var(--card-hi);border-color:transparent}
.contact-card h3{font-size:20px;margin-bottom:var(--s2)}
.contact-card p{font-size:16.5px}
.contact-card .btn{margin-top:var(--s2)}
.contact-card .small-note{margin-top:var(--s2)}

/* form */
.form-intro{font-size:var(--fs-lede);margin:var(--s3) 0 var(--s5);max-width:var(--measure)}
.cform{background:var(--card);border:1px solid var(--hair);border-radius:var(--radius-lg);padding:var(--s6) var(--s5)}
.sec-alt .cform{background:var(--card-hi);border-color:transparent}
.form-todo{display:block;margin-bottom:var(--s4);padding:var(--s3);border:2px dashed var(--hair-dashed);border-radius:var(--radius);font-size:var(--fs-sm)}
.f-row{margin-bottom:var(--s4);border:0}
.f-two{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s4)}
.cform label,.cform legend{display:block;font-weight:600;font-size:var(--fs-sm);color:var(--ink);margin-bottom:7px;padding:0;font-variation-settings:var(--rond-firm)}
.cform .opt{font-weight:400;color:var(--muted)}
.cform input[type=text],.cform input[type=email],.cform input[type=tel],.cform textarea{width:100%;font-family:var(--font);font-size:16.5px;color:var(--body);background:var(--card-hi);border:1px solid var(--hair-strong);border-radius:12px;padding:13px 15px}
.cform textarea{resize:vertical;line-height:1.55}
.f-radios{display:flex;flex-wrap:wrap;gap:10px var(--s4)}
.f-radios label{display:flex;align-items:center;gap:var(--s1);margin-bottom:0;font-weight:400}
.f-radios input{width:18px;height:18px;accent-color:var(--surface)}
.f-help{margin-top:var(--s1);font-size:var(--fs-sm);color:var(--muted)}
.f-privacy{margin-top:var(--s3);font-size:var(--fs-sm);color:var(--muted)}

/* utilities */
.todo-inline{color:var(--muted);font-style:italic}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mt{margin-top:var(--s6)}
.small-note{margin-top:var(--s2);font-size:var(--fs-sm);color:var(--muted)}

.sticky-cta{display:none}

/* --------------------------------------------------------------------------
   Hover lift is desktop-and-pointer only; nothing carries a resting shadow.
   -------------------------------------------------------------------------- */
@media(hover:hover){
  .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
}

/* The nav needs 1056px on a single row — a long wordmark, five links and a
   CTA pill. That runs out well before the page layout does, so it collapses on
   its own breakpoint rather than waiting for the 900px one. */
@media(max-width:1280px){
  nav .brand span{max-width:170px}
}
@media(max-width:1120px){
  .nav-toggle{display:inline-flex}
  .nav-panel{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;border-top:1px solid var(--hair);margin-top:var(--s3);padding-top:var(--s1)}
  body.nav-open .nav-panel{display:flex}
  .nav-panel ul{flex-direction:column;align-items:stretch;gap:0}
  .nav-panel li{border-bottom:1px solid var(--hair)}
  .nav-panel li a{display:block;padding:14px 2px;font-size:16px}
  .nav-panel a.on{border-bottom:0;font-weight:600}
  .nav-panel .btn{margin:var(--s3) 0 6px}
}

@media(max-width:1020px){
  :root{--gutter:40px;--band-inset:20px}
  .steps{grid-template-columns:1fr 1fr}
  .fact-grid{grid-template-columns:1fr 1fr}
  .contact-grid,.res-grid{grid-template-columns:1fr}
  .fcols{grid-template-columns:repeat(3,minmax(0,28%))}
  .principles{grid-template-columns:1fr 1fr;gap:var(--s6)}
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--s4) var(--s6)}
}
@media(max-width:900px){
  :root{--gutter:24px;--radius-band:32px;--shape-inset:24px;--band-inset:12px}
  nav{padding:var(--s3) var(--gutter)}
  .about{grid-template-columns:1fr;gap:var(--s6)}
  /* Stacked, the map would otherwise run the full width and cost most of
     a screen in height for what is a supporting graphic. */
  .area-map{max-width:460px}
  .portrait .shape{translate:-30% -30%}
  .principles,.grid2,.fit{grid-template-columns:1fr}
  .card.wide{grid-column:auto}
  .fcols{grid-template-columns:1fr;gap:var(--s5);justify-content:stretch}
  /* The split collapses, but the shapes stay: below this width is where most
     parents will see the site, and it is the only place the brand lives. */
  .split{display:block}
  .split-head{margin-bottom:var(--s4)}
  .split-body{max-width:var(--measure)}
  .shape-lg{width:var(--shape-md)}
  .hero{padding:var(--s7) 0 var(--s7)}
  .page-head{padding:var(--s7) 0 var(--s4)}
  .sec{padding:var(--s7) 0}
  .sec-tight{padding:var(--s6) 0}
  .cta{padding:var(--s7) 0 var(--s8)}
  .sticky-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--card-hi);border-top:1px solid var(--hair-strong);padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
  .sticky-cta .btn{display:block;width:100%;padding:15px 20px}
  body:has(.sticky-cta){padding-bottom:78px}
}
@media(max-width:640px){
  :root{--gutter:20px;--fs-body:16.5px;--band-inset:10px}
  .steps{grid-template-columns:1fr;gap:var(--s5)}
  .fact-grid,.policy-grid{grid-template-columns:1fr}
  .f-two{grid-template-columns:1fr}
  .cform,.fit-col,.svc{padding:var(--s5) var(--s4)}
  .svc .top{grid-template-columns:minmax(0,1fr);gap:var(--s2) 0;justify-items:start}
  .card{padding:var(--s4)}
  .hero-acts{flex-direction:column;align-items:stretch;gap:var(--s3)}
  .hero-acts .btn{width:100%}
  .hero-acts .lnk{align-self:center}
  .sec-foot{flex-direction:column;align-items:flex-start}
  /* Below this the copy spans the full container, so masthead shapes sit
     under it. They stay — the brand should survive on a phone — but drop to
     their wash, which clears 4.5:1 with --body by construction. */
  .hero .shape svg path,.page-head .shape svg path{fill:var(--shape-soft)}
  .steps-long li{grid-template-columns:1fr;gap:var(--s3)}
  .faq .a{padding-right:0}
  .faq summary{font-size:17.5px;padding-right:var(--s5)}
  .fintro{flex-direction:column;align-items:flex-start;gap:var(--s3)}
  footer .base{justify-content:flex-start}
}