/* Twelve Mile Recovery — fonts + tokens + core styles (from approved mock) */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/cormorant-500.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/cormorant-400.woff2') format('woff2');}
@font-face{font-family:'Libre Franklin';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/franklin-400.woff2') format('woff2');}
@font-face{font-family:'Libre Franklin';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/franklin-600.woff2') format('woff2');}

  

  

  :root{
    --paper:#F4E9DF; --panel:#FFFFFF; --ink:#1F2305; --soft:#1F2305; --line:#DFCBB9;
    --green:#46521A; --brass:#664D22; --brass-line:#664D22;
    /* mock tokens \u2014 fixed in both themes */
    --m-dark:#1F2305; --m-green:#46521A; --m-lime:#F4E9DF; --m-river:#DFCBB9;
    --m-brassL:#E6D5B0; --m-brass:#664D22; --m-ink:#1F2305; --m-soft:#1F2305;
    --disp:'Cormorant Garamond',Georgia,'Times New Roman',serif;
    --serif:'Cormorant Garamond',Georgia,serif;
    --sans:'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;

    /* ── Spacing scale (4px base). Replaces 34 ad-hoc vertical values. ── */
    --s-1:4px;   --s-2:8px;   --s-3:12px;  --s-4:16px;  --s-5:24px;
    --s-6:32px;  --s-7:48px;  --s-8:64px;  --s-9:80px;  --s-10:96px;
    --s-11:112px; --s-12:150px;

    /* Section rhythm tiers, the single biggest lever on "premium" feel. */
    --sec-sm:var(--s-7);    /*  48 — minimal bands (footer)      */
    --sec-md:var(--s-9);    /*  80 — tight bands (notes, CTAs)   */
    --sec-lg:var(--s-11);   /* 112 — STANDARD content section    */
    --sec-xl:var(--s-12);   /* 150 — feature / hero moments      */

    /* Container + gutters: percentage gutters scale with the viewport. */
    --container:1280px;
    --gutter:clamp(22px, 5%, 96px);

    /* Alpha ladder: overlays are transparency, never new colours. */
    --a-dark-20:rgba(31, 35, 5, .20); --a-dark-40:rgba(31, 35, 5, .40);
    --a-dark-60:rgba(31, 35, 5, .60); --a-dark-80:rgba(31, 35, 5, .80);
    --a-light-10:rgba(255, 255, 255, .10); --a-light-20:rgba(255, 255, 255, .20);

    --r:8px;                /* one radius token */
  }
  /* Rhythm step-down, mirrors the reference (112 → 96 → 64) so mobile
     doesn't become an endless scroll. */
  @media (max-width:980px){
    :root{ --sec-xl:var(--s-10); --sec-lg:var(--s-10); --sec-md:var(--s-8); }
  }
  @media (max-width:820px){
    :root{ --sec-xl:var(--s-8); --sec-lg:var(--s-8); --sec-md:var(--s-7); --sec-sm:var(--s-6); }
  }
  /* NOTE: a `prefers-color-scheme: dark` block used to flip the legacy
     --paper/--ink/--soft/--brass tokens here. That was a real bug: the
     SECTION backgrounds use the --m-* tokens, which never flipped, so any
     visitor with OS dark mode got light --ink text and grass accents on a
     light marble background (1.4-1.9:1). This site is a fixed light design,
     so the tokens must not respond to the OS scheme. Kept the explicit
     light mapping only. */
  :root[data-theme="light"], :root[data-theme="dark"]{ --paper:#F4E9DF; --panel:#FFFFFF; --ink:#1F2305; --soft:#1F2305; --line:#DFCBB9; --green:#46521A; --brass:#664D22; --brass-line:#664D22; }

  html{ scroll-behavior:smooth; }
  body{ background:var(--paper); color:var(--ink); line-height:1.65; margin:0; }
  .pg-wrap{ max-width:1060px; margin:0 auto; padding:0 22px; }

  /* ============ 1 \xb7 OPENER ============ */
  .pg-opener{ padding:56px 0 36px; }
  .pg-kicker{ font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); margin-bottom:16px; }
  .pg-opener h1{ font-family:var(--disp); font-weight:400; font-size:clamp(2.2rem,5vw,3.4rem); line-height:1.05; margin:0 0 14px; text-wrap:balance; }
  .pg-opener p{ max-width:58ch; margin:0 0 22px; color:var(--soft); font-size:1.05rem; }
  .pg-chips{ display:flex; gap:10px; flex-wrap:wrap; }
  .pg-chip{ font-family:var(--sans); font-size:.78rem; font-weight:600; border:1px solid var(--brass-line); color:var(--ink); padding:8px 14px; border-radius:999px; background:var(--panel); }
  .pg-chip b{ color:var(--brass); }

  /* section chrome */
  .pg-sec{ margin-top:72px; }
  .pg-secnum{ font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); }
  .pg-sec h2{ font-family:var(--disp); font-weight:400; font-size:clamp(1.5rem,3vw,2rem); margin:6px 0 8px; text-wrap:balance; }
  .pg-sub{ color:var(--soft); font-size:.95rem; margin:0 0 24px; max-width:86ch; }

  /* ============ 2 \xb7 THE MOCK ============ */
  .mock-outer{ margin-top:26px; border:1px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:0 2px 18px rgba(37, 42, 6, .14); }
  .mock-sticky{ position:sticky; top:0; z-index:60; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); font-family:var(--sans); font-size:.64rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
  .mock-sticky .lft{ color:var(--brass); }
  .mock-sticky .rgt{ color:var(--soft); }

  .site{ background:var(--m-lime); color:var(--m-ink); font-family:var(--sans); }
  /* Container: 1280px content cap with viewport-scaling gutters (reference uses 5%).
     width:min() puts the gutters outside the cap, so wide screens get the full 1280. */
  /* Container: PADDING-based gutters, deliberately not width-based. Several
     sections (.s-hero .in) set `width:100%`, which defeats a width:min()
     cap and left the hero text flush against the viewport edge. Padding
     survives a width override, so the gutter always holds. */
  .site .in{ width:100%; max-width:calc(var(--container) + (2 * var(--gutter))); margin:0 auto;
    padding-left:var(--gutter); padding-right:var(--gutter); box-sizing:border-box; }

  .s-nav .in{ display:flex; align-items:center; justify-content:space-between; }
  .s-brand{ display:flex; align-items:center; }
  
  .s-links{ display:flex; font-weight:600; text-transform:uppercase; color:#DFCBB9; }
  .s-call{ background:var(--m-brassL); color:#1F2305; font-weight:700; font-size:.82rem; padding:10px 16px; border-radius:3px; white-space:nowrap; }

  /* hero */
  .s-hero{ position:relative; background:var(--m-dark); color:var(--m-lime); min-height:700px; display:flex; flex-direction:column; overflow:hidden; }
  .s-hero .scene{ position:absolute; inset:0;
    background:
      radial-gradient(100% 80% at 78% 8%, rgba(244, 233, 223, .16) 0%, rgba(244, 233, 223, 0) 52%),
      radial-gradient(60% 50% at 22% 30%, rgba(230, 213, 176, .16) 0%, rgba(230, 213, 176, 0) 60%),
      linear-gradient(176deg, #46521A 0%, #46521A 30%, #252A06 55%, #1F2305 88%); }
  .s-hero .scene::before{ content:""; position:absolute; left:0; right:0; top:56%; height:1.5px; background:rgba(244, 233, 223, .22); filter:blur(1.5px); }
  .s-hero .scene::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(37, 42, 6, .96) 4%, rgba(37, 42, 6, .55) 34%, rgba(37, 42, 6, 0) 64%); }
  .s-hero .play{ position:absolute; top:26%; left:50%; transform:translate(-50%,-50%); width:66px; height:66px; border-radius:50%; background:rgba(31, 35, 5, .4); border:1.5px solid rgba(244, 233, 223, .82); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(2px); box-shadow:0 0 0 8px rgba(244, 233, 223, .05), 0 6px 30px rgba(0, 0, 0, .28); }
  .s-hero .play i{ width:0; height:0; border-style:solid; border-width:10px 0 10px 16px; border-color:transparent transparent transparent #F4E9DF; margin-left:4px; }
  .s-hero .media-label{ position:absolute; top:26%; left:50%; transform:translate(-50%,46px); z-index:2; font-family:var(--sans); font-size:.6rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#F4E9DF; white-space:nowrap; }
  .s-hero .in{ position:relative; z-index:2; margin-top:auto; padding-bottom:34px; width:100%; box-sizing:border-box; }
  .s-eyebrow{ font-size:.72rem; font-weight:600; text-transform:uppercase; color:var(--m-brassL); margin-bottom:14px; }
  .s-eyebrow::before{ content:""; display:block; width:52px; height:1px; background:var(--m-brass); margin-bottom:12px; }
  .s-h1{ font-family:var(--disp); font-weight:400; font-size:clamp(2rem,4.6vw,3.4rem); line-height:1.08; max-width:17ch; margin:0 0 14px; text-wrap:balance; }
  .s-sub{ font-family:var(--sans); color:#DFCBB9; max-width:44ch; margin:0 0 22px; }
  .s-ctas{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:26px; }
  .s-cta{ text-transform:uppercase; border-radius:3px; }
  .s-cta2{ font-weight:600; letter-spacing:.1em; text-transform:uppercase; border-radius:3px; }
  .s-trust{ display:flex; }
  .s-trust span{ text-transform:uppercase; }

  /* intro band */
  .s-intro{ background:var(--m-lime); position:relative; }
  .s-intro .in{ padding-top:76px; padding-bottom:76px; display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
  .s-quote{ font-size:clamp(1.3rem,2.6vw,1.8rem); line-height:1.35; color:var(--m-ink); margin:0; }
  .s-quote::before{ content:""; display:block; width:52px; height:1px; background:var(--m-brass); margin-bottom:18px; }
  .s-quote footer{ font-family:var(--sans); font-style:normal; font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--m-brass); margin-top:14px; }
  .s-intro p{ font-family:var(--sans); font-size:1.02rem; line-height:1.75; color:#252A06; margin:0; }
  .s-intro p b{ font-weight:700; }

  /* residences */
  .s-res{ background:var(--m-river); position:relative; }
  .s-res .in{ padding-top:70px; padding-bottom:76px; }
  .s-secmark{ font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--m-brass); margin-bottom:10px; }
  .s-sechead{ font-family:var(--disp); font-weight:400; font-size:clamp(1.6rem,3.4vw,2.4rem); margin:0 0 30px; color:var(--m-ink); text-wrap:balance; }
  .s-cards{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
  .s-card{ background:#FFFFFF; border-radius:5px; overflow:hidden; box-shadow:0 2px 10px rgba(37, 42, 6, .12); }
  .ph{ position:relative; aspect-ratio:16/9; display:flex; align-items:flex-end; overflow:hidden; }
  .ph.a{ background: radial-gradient(90% 90% at 70% 10%, rgba(244, 233, 223, .3) 0%, rgba(244, 233, 223, 0) 55%), linear-gradient(170deg,#52573D 0%, #46521A 40%, #46521A 75%, #46521A 100%); }
  .ph.b{ background: radial-gradient(90% 90% at 30% 12%, rgba(244, 233, 223, .32) 0%, rgba(244, 233, 223, 0) 50%), linear-gradient(190deg,#E6D5B0 0%, #52573D 45%, #46521A 78%, #46521A 100%); }
  .ph.c{ background: radial-gradient(80% 80% at 60% 15%, rgba(244, 233, 223, .24) 0%, rgba(244, 233, 223, 0) 55%), linear-gradient(180deg,#E6D5B0 0%, #46521A 50%, #52573D 100%); }
  .ph.d{ background: radial-gradient(80% 90% at 40% 10%, rgba(244, 233, 223, .26) 0%, rgba(244, 233, 223, 0) 55%), linear-gradient(200deg,#E6D5B0 0%, #52573D 55%, #52573D 100%); }
  .ph .tag{ margin:0 auto 14px; font-size:.62rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#F4E9DF; border:1px dashed rgba(244, 233, 223, .65); background:rgba(37, 42, 6, .35); padding:6px 12px; border-radius:3px; }
  .s-card .bd{ padding:18px 22px 22px; }
  .s-card h3{ font-family:var(--sans); font-weight:700; font-size:1.15rem; margin:0 0 6px; color:var(--m-ink); }
  .s-card p{ font-family:var(--sans); font-size:.9rem; color:var(--m-ink); margin:0 0 12px; line-height:1.6; }
  .s-link{ font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--m-brass); }

  /* programs */
  .s-prog{ background:var(--m-lime); }
  .s-prog .in{ padding-top:70px; padding-bottom:70px; }
  .s-prog3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:22px; margin-bottom:30px; }
  .s-p{ background:#FFFFFF; border:1px solid #DFCBB9; border-radius:5px; padding:24px 24px 22px; }
  .s-p h3{ font-family:var(--sans); font-weight:700; margin:0 0 8px; color:var(--m-ink); }
  
  .s-p p{ font-family:var(--sans); font-size:.88rem; color:var(--m-ink); margin:0 0 12px; line-height:1.6; }
  .s-what{ display:flex; }
  .s-what b{ margin-right:4px; }

  /* amenities */
  .s-amen{ background:var(--m-dark); color:var(--m-lime); position:relative; }
  .s-amen .in{ padding-top:70px; padding-bottom:76px; }
  .s-amen .s-sechead{ color:var(--m-lime); }
  .s-amen4{ display:grid; gap:16px; }
  .s-am{ border-radius:4px; overflow:hidden; }
  .s-am .ph{ aspect-ratio:4/3; }
  .s-am h5{ font-family:var(--sans); font-weight:700; font-size:.9rem; margin:0; padding:13px 15px 3px; color:#F4E9DF; }
  .s-am p{ font-family:var(--sans); font-size:.76rem; color:#DFCBB9; margin:0; padding:0 15px 15px; line-height:1.55; }
  /* Amenity tiles are links to their modality pages — behave like the old divs, lift on hover */
  a.s-am{ text-decoration:none; color:inherit; display:block; cursor:pointer; transition:transform .3s ease, box-shadow .3s ease; }
  a.s-am .ph{ transition:transform .55s cubic-bezier(.22,.61,.36,1); }
  a.s-am h5{ transition:color .3s ease; }
  @media (hover:hover){
    a.s-am:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(0, 0, 0, .30); }
    a.s-am:hover .ph{ transform:scale(1.06); }
    a.s-am:hover h5{ color:#FFFFFF; }
  }

  /* admissions */
  .s-adm{ color:#F4E9DF; position:relative; }
  
  .s-adm .s-secmark{ color:var(--m-brassL); }
  .s-adm .s-sechead{ color:#F4E9DF; margin-bottom:26px; }
  .s-steps{ display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:22px; }
  .s-step b{ display:flex; align-items:center; gap:10px; font-size:.74rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--m-brassL); margin-bottom:7px; }
  .s-step b i{ font-style:normal; display:inline-flex; align-items:center; justify-content:center; font-size:.72rem; }
  .s-step p{ font-family:var(--sans); font-size:.88rem; color:#F4E9DF; margin:0; line-height:1.55; }
  .s-adm .s-call{ font-size:.95rem; padding:16px 22px; }

  /* footer */
  .s-foot{ background:#1F2305; color:#DFCBB9; }
  /* GRID, not flex (2026-07-31). As `display:flex; justify-content:space-between`
     the four columns sized to their own content and came out 227 / 209 / 105 /
     219px wide — Visit squeezed to 105 because its longest link is "Get in
     touch", Serving at 219 because "Mississauga · Niagara Falls" is long — with
     131px of gap between them. Even gaps around uneven columns is what made it
     read as arbitrary. Explicit tracks fix the widths; the brand column gets the
     extra because it carries the address block. */
  .s-foot .in{
    padding-top:var(--s-9); padding-bottom:var(--s-8);
    display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:var(--s-8) var(--s-7); align-items:start;
  }
  @media (max-width:980px){ .s-foot .in{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .s-foot .in{ grid-template-columns:1fr; gap:var(--s-7); } }

  /* A hairline over every column, including the brand one, so the four read as
     one row. Ragged bottoms are fine in a footer once the tops are deliberate. */
  .s-foot .col{ border-top:1px solid rgba(230, 213, 176, .22); padding-top:var(--s-5); }
  .s-foot .col ul{ list-style:none; margin:0; padding:0; }
  .s-foot .col li{ line-height:1.55; margin-bottom:var(--s-3); }
  .s-foot .col li:last-child{ margin-bottom:0; }
  .s-foot .col-brand .navlogo{ margin-bottom:var(--s-4); }
  /* Serving holds place names, not links, but sat at the identical weight and
     colour as the two nav columns beside it — a false affordance in the one
     footer column where nothing is clickable. Muted rather than restyled, so it
     still reads as part of the same row. 7.8:1 on #1F2305. */
  .s-foot .col-plain li{ color:#C3B29C; }
  /* Stacked, the four columns run ~1,460px on a phone. Two-up inside each list
     halves the nav rows without shrinking any touch target. */
  @media (max-width:560px){
    /* Grid, not `columns:2`. Multi-column flows top-to-bottom then wraps, so a
       two-line item ("Indigenous programming") pushed its column out of step
       with the one beside it and the rows never lined up. Grid lays them out
       row-major, and each row takes the height of its tallest item. */
    .s-foot .col ul{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s-5); }
    .s-foot .col-brand ul, .s-foot .col-plain ul{ grid-template-columns:1fr 1fr; }
  }
  /* The address and the email were 1.12rem and .95rem via inline styles, so the
     email read as a footnote to its own contact block. One size for both. */
  .s-foot .foot-addr{ margin:0 0 var(--s-4); }
  .s-foot .foot-contact{ margin:0; }
  .s-foot .col b{ display:block; font-weight:600; text-transform:uppercase; color:#F4E9DF; }
  .s-foot .col{ font-family:var(--sans); }
  .s-foot .seal{ font-weight:600; letter-spacing:.1em; text-transform:uppercase; border:1px solid rgba(230, 213, 176, .5); color:#E6D5B0; border-radius:3px; display:inline-block; margin-top:8px; }
  /* Footer bottom bar: copyright · accreditation seals · social */
  .s-foot .foot-bar{ border-top:1px solid rgba(223, 203, 185, .16); }
  .s-foot .foot-bar .in{ display:flex; align-items:center; justify-content:space-between; gap:20px 36px; flex-wrap:wrap; padding-top:26px; padding-bottom:34px; }
  .foot-copy{ font-family:var(--sans); font-size:.82rem; color:#DFCBB9; white-space:nowrap; }
  .foot-badges{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; justify-content:center; }
  .foot-badges a{ display:inline-flex; }
  .foot-badges img{ height:56px; width:auto; display:block; transition:transform .2s ease, opacity .2s ease; }
  .foot-right{ display:flex; align-items:center; gap:24px; }
  .foot-social{ display:flex; align-items:center; gap:15px; }
  .foot-social a{ color:#DFCBB9; display:inline-flex; transition:color .2s ease, transform .2s ease; }
  .foot-social svg{ width:19px; height:19px; display:block; }
  .foot-legal{ display:flex; gap:16px; font-size:.8rem; }
  .foot-legal a{ color:#DFCBB9; }
  @media (hover:hover){
    .foot-badges a:hover img{ transform:translateY(-2px); opacity:.92; }
    .foot-social a:hover{ color:var(--m-brassL); transform:translateY(-2px); }
    .foot-legal a:hover{ color:var(--m-brassL); }
  }
  @media (max-width:860px){
    .s-foot .foot-bar .in{ justify-content:center; text-align:center; }
    .foot-right{ flex-direction:column; gap:16px; }
  }

  /* ============ 3 \xb7 SLIDER ============ */
  /* ===== lived-experience reel (inline, one per page) ===== */
  .s-intro .in.split{ grid-template-columns:1.25fr .75fr; align-items:center; }
  .le-reel{ position:relative; aspect-ratio:9/16; max-width:300px; width:100%; justify-self:center; border-radius:8px; overflow:hidden; background:var(--m-dark); box-shadow:0 10px 34px rgba(31, 35, 5, .26); }
  .le-reel img{ width:100%; height:100%; object-fit:cover; display:block; }
  .le-reel::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(31, 35, 5, .9) 0%, rgba(31, 35, 5, .12) 40%, rgba(31, 35, 5, 0) 62%); }
  .le-reel .play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3; width:52px; height:52px; border-radius:50%; background:rgba(0, 0, 0, .42); border:1.5px solid rgba(244, 233, 223, .85); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(2px); }
  .le-reel .play i{ width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #F4E9DF;margin-left:3px; }
  .le-reel .dur{ position:absolute; top:11px; right:11px; z-index:3; font-family:var(--sans); font-size:.58rem; font-weight:600; color:#F4E9DF; background:rgba(0, 0, 0, .55); padding:3px 8px; border-radius:3px; }
  .le-reel .liv{ position:absolute; left:12px; top:11px; z-index:3; font-family:var(--sans); font-size:.54rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:#F4E9DF; border:1px solid rgba(230, 213, 176, .6); background:rgba(0, 0, 0, .4); padding:4px 8px; border-radius:999px; }
  .le-reel .cap{ position:absolute; left:14px; bottom:12px; right:14px; z-index:3; }
  .le-reel .cap b{ display:block; font-family:var(--sans); font-weight:700; font-size:.9rem; color:#F4E9DF; }
  .le-reel .cap span{ font-family:var(--sans); font-size:.58rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
  .le-reel.is-playing .play, .le-reel.is-playing .dur, .le-reel.is-playing .liv, .le-reel.is-playing .cap{ display:none; }
  .le-reel.is-playing::after{ display:none; }
  .le-note{ font-family:var(--sans); font-size:.7rem; color:var(--m-soft); text-align:center; margin-top:10px; max-width:300px; justify-self:center; }

  /* ===== Membership for Life band ===== */
  .s-mem{ color:var(--m-lime); position:relative; overflow:hidden; }
  .s-mem .in{ padding-top:84px; padding-bottom:88px; position:relative; z-index:2; }
  .s-mem .wheelwm{ position:absolute; right:-120px; top:50%; transform:translateY(-50%); width:520px; height:520px; opacity:.05; z-index:1; }
  .s-mem .memhead{ text-align:center; max-width:42ch; margin:0 auto 48px; }
  .s-mem .memhead .s-secmark{ color:var(--m-brassL); text-align:center; }
  .s-mem .memhead h3{ font-family:var(--disp); font-weight:400; font-size:clamp(1.7rem,3.6vw,2.6rem); margin:8px 0 16px; color:#F4E9DF; text-wrap:balance; }
  .s-mem .memhead p{ font-family:var(--sans); font-size:1.02rem; line-height:1.72; color:#DFCBB9; }
  .memgrid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:54px; align-items:center; }
  .phone{ justify-self:center; width:258px; aspect-ratio:9/18.5; background:#1F2305; border-radius:32px; border:7px solid #1F2305; box-shadow:0 22px 54px rgba(0, 0, 0, .45); position:relative; overflow:hidden; }
  .phone .notch{ position:absolute; top:8px; left:50%; transform:translateX(-50%); width:74px; height:15px; background:#1F2305; border-radius:0 0 11px 11px; z-index:5; }
  .phone .scr{ position:absolute; inset:0; background:linear-gradient(180deg,#252A06 0%, #1F2305 100%); padding:24px 13px 12px; display:flex; flex-direction:column; gap:9px; }
  .phone .apphead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:2px; }
  .phone .apphead b{ font-family:var(--sans); font-weight:700; font-size:.78rem; color:#F4E9DF; }
  .phone .apphead .av{ width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#46521A,#83914B); }
  .phone .streak{ background:linear-gradient(135deg,#52573D,#46521A); border:1px solid rgba(230, 213, 176, .32); border-radius:12px; padding:11px 13px; }
  .phone .streak .n{ font-family:var(--disp); font-size:1.7rem; color:var(--m-brassL); line-height:1; }
  .phone .streak .l{ font-family:var(--sans); font-size:.52rem; letter-spacing:.09em; text-transform:uppercase; color:#DFCBB9; margin-top:4px; }
  .phone .card{ background:rgba(255, 255, 255, .055); border-radius:10px; padding:9px 11px; }
  .phone .card .live{ font-family:var(--sans); font-size:.48rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:#F4E9DF; display:flex; align-items:center; gap:5px; }
  .phone .card .live::before{ content:""; width:6px; height:6px; border-radius:50%; background:#E6D5B0; display:inline-block; }
  .phone .card .t{ font-family:var(--sans); font-size:.72rem; color:#F4E9DF; margin-top:3px; line-height:1.3; }
  .phone .card .m{ font-family:var(--sans); font-size:.56rem; color:#DFCBB9; margin-top:4px; }
  .phone .navb{ margin-top:auto; display:flex; justify-content:space-around; padding-top:9px; border-top:1px solid rgba(255, 255, 255, .09); }
  .phone .navb i{ width:17px;height:17px;border-radius:5px;background:rgba(230, 213, 176, .22); display:block; }
  .phone .navb i.on{ background:var(--m-brassL); }
  .phonelbl{ text-align:center; font-family:var(--sans); font-size:.6rem; letter-spacing:.07em; text-transform:uppercase; color:var(--m-ink); margin-top:14px; }
  /* This label appears on BOTH grounds, which one colour cannot serve:
     .hw-cont (/how-we-treat/) is limestone, while .s-mem and .pg-member are
     the dark membership gradients. It used --m-soft, and when that token
     became ink on 2026-08-05 it measured 1.09:1 on the dark bands. Base is
     ink for the light ground; the dark bands re-assert below. Checked both,
     after briefly breaking the other one by setting a single light value. */
  .s-mem .phonelbl, .pg-member .phonelbl{ color:#DFCBB9; }
  .pillars{ display:flex; flex-direction:column; }
  .pillar{ display:grid; grid-template-columns:22px 1fr; gap:16px; padding:19px 0; }
  .pillar:not(:last-child){ border-bottom:1px solid rgba(230, 213, 176, .28); }
  .pillar .node{ width:13px; height:13px; border-radius:50%; border:2px solid var(--m-brassL); margin-top:6px; }
  .pillar h3{ font-family:var(--sans); font-weight:700; font-size:1.1rem; margin:0 0 5px; color:#F4E9DF; }
  .pillar p{ font-family:var(--sans); font-size:.9rem; color:#DFCBB9; margin:0; line-height:1.58; }
  .s-mem .memcta{ text-align:center; margin-top:46px; }
  @media (max-width:820px){ .s-intro .in.split{ grid-template-columns:1fr; } .memgrid{ grid-template-columns:1fr; gap:34px; } }

  .cmp{ position:relative; height:520px; border:1px solid var(--line); border-radius:8px; overflow:hidden; box-shadow:0 2px 14px rgba(37, 42, 6, .12); }
  .cmp-layer{ position:absolute; inset:0; overflow:hidden; }
  .cmp-fill{ position:absolute; inset:0; display:flex; flex-direction:column; }
  .cmp-new{ clip-path:inset(0 calc(100% - var(--cut,50%)) 0 0); z-index:2; }
  .cmp-handle{ position:absolute; top:0; bottom:0; left:var(--cut,50%); width:2px; background:#E6D5B0; z-index:4; pointer-events:none; }
  .cmp-handle::after{ content:"\25C2  \25B8"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#1F2305; color:#F4E9DF; border:1.5px solid #E6D5B0; border-radius:999px; padding:7px 12px; font-family:var(--sans); font-size:.75rem; white-space:nowrap; }
  .cmp input[type=range]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; z-index:5; margin:0; }
  .cmp-tag{ position:absolute; bottom:12px; z-index:3; font-family:var(--sans); font-size:.62rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:5px 11px; border-radius:3px; pointer-events:none; }
  .cmp-tag.old{ right:12px; background:rgba(0, 0, 0, .55); color:#F4E9DF; }
  .cmp-tag.new{ left:12px; background:rgba(37, 42, 6, .7); color:#F4E9DF; border:1px solid rgba(230, 213, 176, .6); z-index:3; }
  /* current-site recreation inside slider */
  .old-hero{ flex:1; background:#1F2305; color:#F4E9DF; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; font-family:"Avenir Next","Trebuchet MS",sans-serif; padding:20px; box-sizing:border-box; }
  .old-hero .nv{ font-family:"Avenir Next Condensed","Arial Narrow",sans-serif; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:#F4E9DF; margin-bottom:44px; }
  .old-hero .ey{ font-family:"Avenir Next Condensed","Arial Narrow",sans-serif; font-size:1rem; letter-spacing:.18em; color:#DFCBB9; text-transform:uppercase; }
  .old-hero .h{ font-family:"Avenir Next Condensed","Arial Narrow",sans-serif; font-weight:600; font-size:clamp(1.6rem,3.6vw,2.6rem); letter-spacing:.04em; text-transform:uppercase; margin:12px 0; }
  .old-hero .s{ font-size:.8rem; color:#DFCBB9; margin:0 0 22px; }
  .old-hero .bs{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:20px; }
  .old-hero .b1{ background:#252A06; color:#F4E9DF; font-size:.66rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:11px 16px; border-radius:8px; }
  .old-hero .b2{ background:#52573D; color:#F4E9DF; font-size:.66rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:11px 16px; border-radius:8px; }
  /* proposed side reuses hero styles at slider scale */
  .cmp-new .s-hero{ min-height:0; flex:1; }
  .cmp-new .s-hero .in{ padding:0 34px 26px; }
  .cmp-new .s-h1{ font-size:clamp(1.6rem,3.4vw,2.5rem); }

  /* ============ 4 \xb7 LEDGER ============ */
  .ledger{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
  @media (max-width:760px){ .ledger{ grid-template-columns:1fr; } }
  .led{ background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:22px 26px; }
  .led h3{ font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; margin:0 0 14px; }
  .led.stay h3{ color:var(--green); }
  .led.chg h3{ color:var(--brass); }
  .led ul{ margin:0; padding:0; list-style:none; }
  .led li{ padding:9px 0; border-bottom:1px solid var(--line); font-size:.95rem; display:flex; gap:10px; align-items:baseline; }
  .led li:last-child{ border-bottom:0; }
  .led li::before{ font-family:var(--sans); font-weight:700; }
  .led.stay li::before{ content:"\2713"; color:var(--green); }
  .led.chg li::before{ content:"\2192"; color:var(--brass); }

  /* ============ 5 \xb7 DECISIONS ============ */
  .dec{ display:grid; gap:14px; }
  .d-card{ background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:20px 24px; display:grid; grid-template-columns:44px 1fr; gap:18px; }
  .d-num{ width:38px; height:38px; border-radius:50%; background:var(--green); color:var(--paper); font-family:var(--sans); font-weight:700; font-size:1rem; display:flex; align-items:center; justify-content:center; margin-top:2px; }
  .d-card h3{ font-family:var(--sans); font-weight:700; font-size:1.08rem; margin:0 0 6px; }
  .d-card .rec{ display:inline-block; font-family:var(--sans); font-size:.64rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; background:var(--green); color:var(--paper); padding:3px 9px; border-radius:3px; margin-left:8px; vertical-align:2px; }
  .d-card .rec.done{ background:var(--brass-line); color:#1F2305; }
  .d-card p{ margin:0; font-size:.92rem; color:var(--soft); }
  .d-card p b{ color:var(--ink); font-weight:700; }
  .d-card .ifno{ display:block; margin-top:7px; font-family:var(--sans); font-size:.78rem; color:var(--soft); }
  .d-card .ifno b{ color:var(--brass); font-weight:600; }
  .d-chips{ display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; align-items:center; }
  .d-chips i{ width:26px; height:26px; border-radius:50%; border:1px solid var(--line); }
  .d-type{ margin-top:10px; }
  .d-type div:first-child{ font-family:var(--disp); font-size:1.4rem; }
  .d-type div:last-child{ font-family:var(--sans); font-size:.85rem; color:var(--soft); }
  .d-reply{ margin-top:20px; font-family:var(--sans); font-size:.95rem; background:var(--panel); border:1px dashed var(--brass-line); border-radius:8px; padding:16px 20px; }
  .d-reply b{ color:var(--brass); }

  /* ============ 6 \xb7 NEXT ============ */
  .tl{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
  @media (max-width:820px){ .tl{ grid-template-columns:1fr 1fr; }  .s-prog3{ grid-template-columns:1fr; } .s-cards{ grid-template-columns:1fr; } .s-intro .in{ grid-template-columns:1fr; gap:26px; }  .s-steps{ grid-template-columns:1fr; } .cmp{ height:420px; } }
  .tl-step{ background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:16px 18px; position:relative; }
  .tl-step b{ display:flex; align-items:center; gap:9px; font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); margin-bottom:8px; }
  .tl-step b i{ font-style:normal; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--green); color:var(--paper); font-size:.7rem; }
  .tl-step p{ margin:0; font-size:.86rem; color:var(--soft); line-height:1.55; }
  .ask{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px; }
  .ask div{ font-family:var(--sans); font-size:.88rem; border:1px solid var(--brass-line); border-radius:8px; padding:13px 17px; background:var(--panel); }
  .ask div::before{ content:"\2610  "; color:var(--brass); font-size:1rem; }
  .cta{ font-family:var(--sans); font-size:1.02rem; }
  .cta b{ color:var(--brass); }
  .pg-foot{ margin:64px 0 60px; padding-top:16px; border-top:1px solid var(--line); font-size:.8rem; color:var(--soft); max-width:75ch; }

  

  
  
/* ===== Our approach page ===== */
  .hw-hero{ position:relative; background:var(--m-dark); color:var(--m-lime); overflow:hidden; }
  .hw-hero .bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
  .hw-hero .bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(31, 35, 5, .92) 0%, rgba(31, 35, 5, .66) 56%, rgba(31, 35, 5, .4) 100%); }
  .hw-hero .in{ position:relative; z-index:2; padding-top:var(--sec-xl); padding-bottom:var(--sec-xl); }
  .hw-hero .s-eyebrow{ color:var(--m-brassL); }
  .hw-hero h1{ font-family:var(--disp); font-weight:400; font-size:clamp(2rem,4.4vw,3.1rem); line-height:1.08; max-width:19ch; margin:0 0 14px; color:#F4E9DF; text-wrap:balance; }
  .hw-hero p{ font-family:var(--sans); font-size:1.05rem; color:#DFCBB9; max-width:48ch; margin:0 0 24px; }
  .hw-approach{ background:var(--m-lime); position:relative; }
  .hw-approach .in{ padding-top:74px; padding-bottom:80px; }
  /* How We Treat: "Our approach" opener, two-column with principles + image */
  .hw-appr .in{ padding-top:66px; padding-bottom:72px; }
  .hw-appr-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center; }
  .hw-appr-copy .s-secmark{ margin-bottom:10px; }
  .hw-appr-copy h2{ font-family:var(--disp); font-weight:400; font-size:clamp(1.7rem,3.2vw,2.4rem); line-height:1.1; color:var(--m-ink); margin:0 0 16px; text-wrap:balance; }
  .hw-appr-copy > p{ font-family:var(--sans); font-size:1.08rem; line-height:1.66; color:var(--m-ink); margin:0 0 14px; max-width:58ch; }
  .hw-appr-points{ list-style:none; margin:24px 0 30px; padding:0; display:grid; gap:16px; }
  .hw-appr-points li{ padding-left:30px; position:relative; }
  .hw-appr-points li::before{ content:"\2713"; position:absolute; left:0; top:1px; color:var(--m-brass); font-weight:700; font-size:1.05rem; }
  .hw-appr-points b{ display:block; font-family:var(--sans); font-weight:700; font-size:1rem; color:var(--m-ink); margin-bottom:2px; }
  .hw-appr-points span{ font-family:var(--sans); font-size:.96rem; line-height:1.55; color:var(--m-ink); }
  .hw-appr-img{ background-size:cover; background-position:center; border-radius:12px; min-height:440px; height:100%; box-shadow:0 16px 44px rgba(31, 35, 5, .18); }
  @media (max-width:820px){ .hw-appr-grid{ grid-template-columns:1fr; gap:30px; } .hw-appr-img{ min-height:260px; order:-1; } }
  .hw-split{ display:grid; grid-template-columns:1.12fr .88fr; gap:52px; align-items:center; }
  .hw-split .copy .s-secmark{ margin-bottom:10px; }
  .hw-split h2{ font-family:var(--disp); font-weight:400; font-size:clamp(1.6rem,3.2vw,2.2rem); line-height:1.14; margin:0 0 16px; color:var(--m-ink); text-wrap:balance; }
  .hw-split p{ font-family:var(--sans); font-size:1.02rem; line-height:1.72; color:#252A06; margin:0 0 14px; }
  .hw-split .le-reel{ max-width:320px; }
  .hw-therapy{ background:var(--m-river); }
  .hw-therapy .in{ padding-top:66px; padding-bottom:74px; }
  .hw-tgrid{ display:grid; grid-template-columns:1fr 1fr; }
  .hw-tgrid-3{ grid-template-columns:repeat(3, 1fr); }   /* 3-card sections (e.g. community partners) sit 3-across, not 2+1 */
  .hw-tcard-logo{ box-sizing:content-box; display:block; height:52px; width:auto; max-width:calc(100% - 40px); margin:0 0 17px; padding:16px 20px; background:#FFFFFF; border:1px solid rgba(31, 35, 5, .09); border-radius:10px; box-shadow:0 3px 12px rgba(31, 35, 5, .06); object-fit:contain; object-position:center; }
  .hw-tcard.has-logo h3::before{ display:none; }         /* the logo replaces the brass accent tick */
  .hw-tcard{ background:#FFFFFF; border:1px solid #DFCBB9; border-radius:6px; padding:22px 24px; }
  .hw-tcard h3{ font-family:var(--sans); font-weight:700; font-size:1.05rem; margin:0 0 7px; color:var(--m-ink); }
  .hw-tcard h3::before{ content:""; display:block; width:30px; height:1px; background:var(--m-brass); margin-bottom:12px; }
  .hw-tcard p{ font-family:var(--sans); font-size:.9rem; color:var(--m-ink); margin:0; line-height:1.6; }
  .sc-intro{ font-family:var(--sans); font-size:1.12rem; line-height:1.62; color:var(--m-soft); max-width:82ch; margin:0 0 28px; }
  .hw-after{ background:var(--m-lime); }
  /* Community partner affiliations (about-partners.php). Extends .hw-split /
     .hw-tcard rather than restating them — only the deltas live here. */
  .ptr-split{ align-items:start; }                       /* three stacked h3+p blocks; centring would float the logo mid-column */
  .ptr-h{ font-family:var(--sans); font-weight:700; font-size:1.02rem; letter-spacing:.01em; color:var(--m-ink); margin:26px 0 8px; }
  .ptr-split .copy > .ptr-h:first-child{ margin-top:0; }
  .ptr-aside{ position:sticky; top:104px; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
  .ptr-logo{ display:block; height:96px; width:auto; max-width:100%; padding:20px 24px; background:#FFFFFF; border:1px solid rgba(31, 35, 5, .09); border-radius:12px; box-shadow:0 3px 14px rgba(31, 35, 5, .07); object-fit:contain; }
  .ptr-inline{ font-family:var(--sans); font-weight:600; font-size:.88rem; color:var(--m-brass); text-decoration:none; border-bottom:1px solid rgba(102, 77, 34, .3); padding-bottom:2px; transition:color .25s ease, border-color .25s ease, transform .25s ease; }
  .hw-tcard .ptr-inline{ display:inline-block; margin-top:14px; }
  .ptr-studios .hw-tcard{ display:flex; flex-direction:column; align-items:flex-start; }
  .ptr-studios .hw-tcard p{ flex:1 1 auto; }             /* equal-height cards: the link sits on the baseline in both */
  @media (hover:hover){
    .ptr-inline:hover{ color:var(--m-green); border-color:var(--m-green); transform:translateX(2px); }
  }
  @media (max-width:900px){
    .ptr-split{ grid-template-columns:1fr; gap:34px; }
    .ptr-aside{ position:static; }
    .ptr-logo{ height:78px; }
  }
  /* What We Help With, richer substance + co-occurring section (whattreat-cards.php) */
  .wt-lead{ font-family:var(--sans); font-size:1.18rem; line-height:1.66; color:var(--m-ink); max-width:86ch; margin:0 0 22px; }
  .wt-assure{ list-style:none; margin:0 0 40px; padding:0; display:flex; flex-wrap:wrap; gap:12px 30px; }
  .wt-assure li{ font-family:var(--sans); font-weight:600; font-size:.9rem; letter-spacing:.01em; color:var(--m-green); padding-left:26px; position:relative; }
  .wt-assure li::before{ content:"\2713"; position:absolute; left:0; top:-1px; font-weight:700; color:var(--m-brass); }
  .wt-sublabel{ font-family:var(--sans); font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; color:var(--m-soft); margin:0 0 18px; }
  .wt-cooc{ display:block; position:relative; margin-top:34px; padding:36px 40px; background:var(--m-dark); color:#F4E9DF; border-radius:12px; text-decoration:none; overflow:hidden; box-shadow:0 14px 40px rgba(31, 35, 5, .18); transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease; }
  .wt-cooc::before{ content:""; position:absolute; top:0; left:0; width:5px; height:100%; background:var(--m-brass); }
  .wt-cooc-eye{ font-family:var(--sans); font-weight:600; text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; color:var(--m-brassL); margin-bottom:12px; }
  .wt-cooc h3{ font-family:var(--sans); font-weight:700; font-size:1.5rem; color:#F4E9DF; margin:0 0 12px; }
  .wt-cooc p{ font-family:var(--sans); font-size:1.02rem; line-height:1.62; color:#DFCBB9; max-width:74ch; margin:0 0 16px; }
  .wt-cooc-link{ font-family:var(--sans); font-weight:600; font-size:.92rem; color:var(--m-brassL); letter-spacing:.01em; }
  .wt-cooc:hover{ transform:translateY(-3px); box-shadow:0 20px 50px rgba(230, 213, 176, .22); }
  @media (max-width:820px){ .wt-cooc{ padding:28px 26px; } .wt-cooc h3{ font-size:1.28rem; } .wt-assure{ gap:10px 22px; } }
  /* Wide exterior break band (whattreat-estate.php) */
  .wt-estate{ position:relative; min-height:440px; background-size:cover; background-position:center; display:flex; align-items:flex-end; }
  .wt-estate::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(31, 35, 5, 0) 42%, rgba(31, 35, 5, .6) 100%); }
  .wt-estate .in{ position:relative; z-index:2; padding-top:26px; padding-bottom:26px; }
  .wt-estate-cap{ font-family:var(--sans); font-weight:600; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:#F4E9DF; text-shadow:0 1px 10px rgba(0, 0, 0, .5); }
  @media (max-width:640px){ .wt-estate{ min-height:300px; } }
  /* Self-recognition checklist (whattreat-signs.php) */
  .wt-signs{ list-style:none; margin:26px 0 36px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:16px 44px; }
  .wt-signs li{ font-family:var(--sans); font-size:1.06rem; line-height:1.5; color:var(--m-ink); padding-left:36px; position:relative; }
  .wt-signs li::before{ content:"\2713"; position:absolute; left:0; top:2px; width:24px; height:24px; line-height:24px; text-align:center; border-radius:50%; background:rgba(230, 213, 176, .15); color:var(--m-brass); font-weight:700; font-size:.82rem; }
  .wt-signs-cta{ display:flex; align-items:center; gap:18px 30px; flex-wrap:wrap; border-top:1px solid #DFCBB9; padding-top:28px; }
  .wt-signs-cta p{ font-family:var(--sans); font-size:1.14rem; line-height:1.55; color:var(--m-ink); margin:0; flex:1 1 360px; }
  @media (max-width:820px){ .wt-signs{ grid-template-columns:1fr; gap:14px; } }
  /* Story + video block (story.php) */
  .tmr-story-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
  .tmr-story-grid.is-solo{ grid-template-columns:1fr; max-width:78ch; }
  .tmr-story-body{ font-family:var(--sans); font-size:1.12rem; line-height:1.72; color:var(--m-ink); }
  .tmr-story-body p{ margin:0 0 15px; } .tmr-story-body p:last-child{ margin-bottom:0; }
  .tmr-embed{ position:relative; padding-top:56.25%; border-radius:12px; overflow:hidden; background:var(--m-dark); box-shadow:0 16px 44px rgba(31, 35, 5, .2); }
  .tmr-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
  @media (max-width:820px){ .tmr-story-grid{ grid-template-columns:1fr; gap:28px; } }
  .hw-after .in{ padding-top:56px; padding-bottom:64px; text-align:center; }
  .hw-after h3{ font-family:var(--disp); font-weight:400; font-size:clamp(1.4rem,2.8vw,1.9rem); margin:0 auto 10px; max-width:26ch; color:var(--m-ink); }
  .hw-after p{ font-family:var(--sans); font-size:1rem; color:var(--m-soft); max-width:52ch; margin:0 auto 22px; }

  /* How We Treat: financing callout (was an invisible one-line link) */
  .hw-cost{ background:var(--m-river); }
  .hw-cost .in{ padding-top:52px; padding-bottom:52px; }
  .hw-cost-card{ background:#FFFFFF; border:1px solid #DFCBB9; border-left:4px solid var(--m-brass); border-radius:10px; padding:30px 34px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; box-shadow:0 10px 30px rgba(31, 35, 5, .09); }
  .hw-cost-copy{ flex:1 1 460px; }
  .hw-cost-card .s-secmark{ margin-bottom:8px; }
  .hw-cost-card h3{ font-family:var(--disp); font-weight:400; font-size:clamp(1.3rem,2.4vw,1.7rem); color:var(--m-ink); margin:0 0 10px; }
  .hw-cost-card p{ font-family:var(--sans); font-size:1rem; line-height:1.62; color:var(--m-ink); margin:0; max-width:74ch; }
  .hw-cost-card .s-cta{ flex:0 0 auto; align-self:center; }

  /* How We Treat: lifelong-membership / aftercare band (two-column) */
  .hw-cont{ background:var(--m-lime); }
  .hw-cont .in{ padding-top:60px; padding-bottom:66px; }
  .hw-cont-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:46px; align-items:center; }
  .hw-cont-copy .s-secmark{ margin-bottom:10px; }
  .hw-cont-copy h3{ font-family:var(--disp); font-weight:400; font-size:clamp(1.5rem,3vw,2.1rem); color:var(--m-ink); margin:0 0 12px; line-height:1.12; }
  .hw-cont-copy > p{ font-family:var(--sans); font-size:1.08rem; line-height:1.6; color:var(--m-soft); margin:0 0 24px; max-width:52ch; }
  .hw-cont-list{ list-style:none; margin:0 0 28px; padding:0; display:grid; gap:15px; }
  .hw-cont-list li{ padding-left:22px; position:relative; }
  .hw-cont-list li::before{ content:""; position:absolute; left:0; top:8px; width:9px; height:9px; border-radius:50%; background:var(--m-brass); }
  .hw-cont-list b{ display:block; font-family:var(--sans); font-weight:700; font-size:.98rem; color:var(--m-ink); margin-bottom:2px; }
  .hw-cont-list span{ font-family:var(--sans); font-size:.95rem; color:var(--m-ink); line-height:1.5; }
  .hw-cont-img{ background-size:cover; background-position:center; border-radius:12px; min-height:360px; height:100%; box-shadow:0 16px 42px rgba(31, 35, 5, .18); }
  @media (max-width:820px){ .hw-cont-grid{ grid-template-columns:1fr; gap:28px; } .hw-cont-img{ min-height:240px; order:-1; } .hw-cost-card{ padding:26px 24px; } }
  @media (max-width:820px){ .hw-split{ grid-template-columns:1fr; gap:32px; } .hw-tgrid{ grid-template-columns:1fr; } }
  /* About page: Our Story image · The Difference icon band · Residential Support spotlight */
  .about-story-img{ background-size:cover; background-position:center; border-radius:8px; min-height:360px; box-shadow:0 16px 40px rgba(31, 35, 5, .2); }
  .about-story .copy .s-cta{ margin-top:16px; }
  .s-diff{ background:var(--m-dark); }
  .s-diff .in{ padding-top:66px; padding-bottom:72px; }
  .s-diff .s-secmark{ color:var(--m-brassL); }
  .s-diff .s-sechead{ color:#F4E9DF; }
  .site .s-diff .pg-sub{ color:#DFCBB9 !important; }
  .diff-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:30px; }
  .diff-card{ text-align:center; padding:8px 16px; }
  .diff-ico{ width:60px; height:60px; margin:0 auto 18px; color:var(--m-brassL); display:flex; align-items:center; justify-content:center; border:1px solid rgba(230, 213, 176, .42); border-radius:50%; }
  .diff-ico svg{ width:32px; height:32px; }
  .diff-card h3{ font-family:var(--sans); font-weight:700; font-size:1.14rem; color:#F4E9DF; margin:0 0 9px; }
  .diff-card p{ font-family:var(--sans); font-size:.98rem; line-height:1.62; color:#DFCBB9; margin:0; }
  .s-resteam{ background:linear-gradient(158deg, var(--m-green) 0%, var(--m-dark) 100%); border-top:1px solid rgba(230, 213, 176, .22); }
  .s-resteam .in{ padding-top:60px; padding-bottom:64px; max-width:860px; text-align:center; }
  .s-resteam .s-secmark{ color:var(--m-brassL); }
  .s-resteam .s-sechead{ color:#F4E9DF; margin:8px auto 14px; }
  .s-resteam .lede{ font-family:var(--sans); font-size:1.16rem; line-height:1.7; color:#DFCBB9; max-width:66ch; margin:0 auto 26px; text-align:center; }
  @media (hover:hover){ .diff-card{ transition:transform .3s ease; } .diff-card:hover{ transform:translateY(-3px); } .diff-card:hover .diff-ico{ border-color:var(--m-brassL); } }
  @media (max-width:820px){ .diff-grid{ grid-template-columns:1fr; gap:26px; } .about-story-img{ min-height:230px; } }
  /* About: Careers band + condensed Residential Support note under the reels */
  .s-careers{ background:var(--m-river); border-top:1px solid rgba(230, 213, 176, .22); }
  .s-careers .in{ padding-top:50px; padding-bottom:54px; text-align:center; max-width:760px; }
  .s-careers .s-secmark{ color:var(--m-brass); }
  .s-careers .s-sechead{ color:var(--m-ink); margin:8px auto 10px; }
  .s-careers .careers-lead{ font-family:var(--sans); font-size:1.08rem; line-height:1.6; color:var(--m-soft); max-width:52ch; margin:0 auto 22px; }
  .team-resnote{ max-width:880px; margin:54px auto 8px; padding:32px 40px; background:#FFFFFF; border:1px solid #DFCBB9; border-left:5px solid var(--m-brass); border-radius:8px; }
  .team-resnote h3{ font-family:var(--sans); font-weight:700; font-size:1.4rem; color:var(--m-ink); margin:0 0 10px; }
  .team-resnote p{ font-family:var(--sans); font-size:1.08rem; line-height:1.66; color:var(--m-ink); margin:0; }
  /* Tour: yoga / gym / sauna spaces strip under "What you're walking into" */
  .tour-spaces{ background:var(--m-lime); }
  .tour-spaces .in{ padding-top:4px; padding-bottom:60px; }
  .ts-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
  .ts-tile{ position:relative; aspect-ratio:4/3; background-size:cover; background-position:center; border-radius:6px; overflow:hidden; margin:0; box-shadow:0 4px 16px rgba(31, 35, 5, .12); }
  .ts-tile figcaption{ position:absolute; left:0; right:0; bottom:0; padding:30px 16px 13px; background:linear-gradient(0deg, rgba(31, 35, 5, .82) 0%, rgba(31, 35, 5, 0) 100%); color:#F4E9DF; font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
  @media (max-width:820px){ .ts-grid{ grid-template-columns:1fr; } }
  /* Programs: centered reels ("In Their Own Words") + programs-prog 2-col top (copy+button left, photo right) */
  .reels-sec .s-secmark, .reels-sec .s-sechead{ text-align:center; }
  .reels-sec .reels-intro{ font-family:var(--sans); font-weight:400; font-size:1.12rem; line-height:1.8; color:var(--m-ink); text-align:center; max-width:60ch; margin:0 auto 38px; }
  .pg-progtop{ display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; margin-bottom:42px; }
  .pg-progcopy .pg-lead{ margin-bottom:0; }
  .pg-progcopy .s-cta{ margin-top:22px; }
  .pg-progimg{ height:380px; background-size:cover; background-position:center; border-radius:8px; box-shadow:0 16px 40px rgba(31, 35, 5, .2); }
  @media (max-width:820px){ .pg-progtop{ grid-template-columns:1fr; gap:26px; } .pg-progimg{ height:240px; } }
  .reels-cta{ text-align:center; margin-top:36px; }
  #team{ scroll-margin-top:100px; }   /* so "Meet the team" anchor clears the fixed header */

/* ===== Admissions page ===== */
  .ap-hero{ position:relative; background:var(--m-dark); color:var(--m-lime); overflow:hidden; }
  .ap-hero .bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
  .ap-hero .bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(31, 35, 5, .92) 0%, rgba(31, 35, 5, .72) 48%, rgba(31, 35, 5, .4) 100%); }
  .ap-hero .in{ position:relative; z-index:2; padding-top:var(--sec-xl); padding-bottom:var(--sec-xl); }
  .ap-hero .s-eyebrow{ color:var(--m-brassL); }
  .ap-hero h1{ font-family:var(--disp); font-weight:400; font-size:clamp(2rem,4.4vw,3.1rem); line-height:1.08; max-width:18ch; margin:0 0 14px; color:#F4E9DF; text-wrap:balance; }
  .ap-hero p{ font-family:var(--sans); font-size:1.05rem; color:#DFCBB9; max-width:46ch; margin:0 0 24px; }
  .ap-hero .row{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
  .ap-hero .ph-call{ font-family:var(--sans); font-size:1.05rem; font-weight:600; color:#F4E9DF; }
  .ap-main{ background:var(--m-lime); position:relative; }
  .ap-main .in{ padding-top:72px; padding-bottom:78px; }
  .admgrid{ display:block; max-width:660px; }
  .admsteps{ display:flex; flex-direction:column; }
  .astep{ display:grid; grid-template-columns:44px 1fr; gap:18px; padding:22px 0; }
  .astep:not(:last-child){ border-bottom:1px solid var(--line); }
  .astep .num{ display:flex; align-items:center; justify-content:center; }
  .astep h3{ font-family:var(--sans); font-weight:700; font-size:1.16rem; margin:0 0 5px; color:var(--m-ink); }
  .astep p{ font-family:var(--sans); font-size:.94rem; color:var(--m-ink); margin:0; line-height:1.6; }
  .admcta{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:26px; }
  .admaside .le-reel{ max-width:340px; }
  .admaside .asidenote{ font-family:var(--sans); font-size:.72rem; color:var(--m-soft); text-align:center; max-width:340px; margin:12px auto 0; }
  .ap-info{ background:var(--m-river); }
  .ap-info .in{ padding-top:64px; padding-bottom:70px; }
  .infogrid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
  .infocard{ background:#FFFFFF; border:1px solid #DFCBB9; border-radius:6px; padding:24px 26px; }
  .infocard h3{ font-family:var(--sans); font-weight:700; font-size:1.1rem; margin:0 0 8px; color:var(--m-ink); }
  .infocard h3::before{ content:""; display:block; width:34px; height:1px; background:var(--m-brass); margin-bottom:14px; }
  .infocard p{ font-family:var(--sans); font-size:.92rem; color:var(--m-ink); margin:0; line-height:1.62; }
  .infocard .s-link{ margin-top:10px; display:inline-block; }
  @media (max-width:820px){ .admgrid{ grid-template-columns:1fr; gap:34px; } .admaside{ order:2; } .infogrid{ grid-template-columns:1fr; } }

  .navlogo{ display:block; }
  .s-foot .navlogo{ height:30px; margin-bottom:8px; }
  img.wheelwm{ position:absolute; right:-120px; top:50%; transform:translateY(-50%); width:520px; opacity:.06; z-index:1; }
  .s-hero .herovid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
  .s-hero .scene.scrimonly{ background:none; z-index:1; }
  .s-hero .scene.scrimonly::before{ display:none; }

  
  .sitehead .mock-sticky{ position:static; }
  .page[hidden]{ display:none; }
  [data-goto]{ cursor:pointer; }
  .s-links span{ cursor:pointer; }
  .roomrow{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:10px; }
  .roomrow .rm{ aspect-ratio:4/3; border-radius:6px; background-size:cover; background-position:center; box-shadow:0 2px 10px rgba(37, 42, 6, .14); }
  .wtnote{ background:var(--m-lime); }
  .wtnote .in{ padding-top:14px; padding-bottom:64px; }
  .compliance{ margin-top:20px; font-family:var(--sans); font-size:.8rem; color:#664D22; background:#F4E9DF; border:1px dashed var(--brass-line); border-radius:8px; padding:14px 18px; max-width:70ch; }
  .about-team{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .about-card .ph2{ aspect-ratio:1/1; background:repeating-linear-gradient(45deg,rgba(70, 82, 26, .06) 0 10px,rgba(70, 82, 26, .12) 10px 20px),#E6D5B0; display:flex; align-items:center; justify-content:center; }
  .about-card .ph2 span{ font-family:var(--sans); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:#664D22; border:1px dashed #664D22; padding:6px 10px; border-radius:2px; background:rgba(244, 233, 223, .75); }
  .about-card h3{ font-family:var(--sans); font-weight:700; font-size:1.02rem; margin:13px 0 2px; color:var(--m-ink); }
  .about-card .role{ font-family:var(--sans); font-size:.62rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); }
  .about-card p{ font-family:var(--sans); font-size:.86rem; color:var(--m-ink); margin:8px 0 0; line-height:1.55; }
  @media (max-width:820px){ .roomrow{ grid-template-columns:1fr 1fr; } .about-team{ grid-template-columns:1fr 1fr; } }

  /* ===== STANDOUT PASS v1 ===== */
  :focus-visible{ outline:2px solid var(--m-brassL); outline-offset:2px; border-radius:2px; }
  .site [data-goto]{ cursor:pointer; }
  a.s-call{ text-decoration:none; color:inherit; }
  .s-cta{ box-shadow:0 2px 8px rgba(0, 0, 0, .14) !important; font-weight:600 !important; letter-spacing:.11em; }
  .s-call,.d-num,.astep .num,.s-step b i,.tl-step b i,.s-links span{ font-weight:600 !important; }
  .hero-immediacy{ font-family:var(--sans); letter-spacing:.04em; color:#F4E9DF; margin:0 0 16px; }
  /* hover vocabulary (pointer devices only) */
  @media (hover:hover){
    .s-card,.s-p,.hw-tcard,.infocard,.loc-card,.about-card{ transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease; }
    .s-card:hover,.s-p:hover,.hw-tcard:hover,.infocard:hover,.about-card:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(31, 35, 5, .16); }
    .s-links span:hover,.s-link:hover,.s-foot .col span:hover,.site a.s-call:hover{ color:var(--m-brassL); }
    .s-cta{ transition:filter .2s ease, transform .08s ease; }
    .s-cta:hover{ filter:brightness(1.07); }
    .s-cta:active{ transform:translateY(1px); }
    .le-reel,.reel{ transition:transform .35s ease, box-shadow .35s ease; }
    .le-reel:hover,.reel:hover{ transform:translateY(-3px); box-shadow:0 16px 42px rgba(31, 35, 5, .32); }
    .le-reel .play,.reel .play{ transition:transform .25s ease; }
    .le-reel:hover .play,.reel:hover .play{ transform:translate(-50%,-50%) scale(1.08); }
  }
  /* hero legibility: full left->bottom scrim + soft headline shadow */
  .s-hero .scene.scrimonly::after{ background:linear-gradient(100deg, rgba(31, 35, 5, .9) 0%, rgba(31, 35, 5, .56) 40%, rgba(31, 35, 5, .05) 72%), linear-gradient(0deg, rgba(31, 35, 5, .82) 0%, rgba(31, 35, 5, 0) 52%) !important; }
  .s-h1,.hw-hero h1,.ap-hero h1{ text-shadow:0 1px 22px rgba(0, 0, 0, .34); }
  .vidctl{ position:absolute; right:16px; bottom:16px; z-index:5; width:34px; height:34px; border-radius:50%; background:rgba(0, 0, 0, .5); border:1px solid rgba(244, 233, 223, .55); color:#F4E9DF; font-size:.66rem; display:flex; align-items:center; justify-content:center; cursor:pointer; }
  /* the Current — a reading line down the page that fills as you travel it */
  .current-rail{ position:fixed; top:0; bottom:0; width:1px; background:rgba(230, 213, 176, .16); z-index:30; pointer-events:none; }
  .current-rail::after{ content:""; position:absolute; top:0; left:0; width:1px; height:var(--cp,0%); background:linear-gradient(180deg,var(--m-brass),var(--m-brassL)); }
  /* restrained entrance choreography — gated on reduced-motion */
  @media (prefers-reduced-motion: no-preference){
    .js-reveal .reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); transition-delay:calc(var(--i,0)*55ms); will-change:opacity,transform; }
    .js-reveal .reveal.in-view{ opacity:1; transform:none; }
    /* the eyebrow hairline draws itself as its block arrives */
    .js-reveal .reveal .s-secmark::before,.js-reveal .reveal.s-secmark::before{ width:0; transition:width .7s cubic-bezier(.22,.61,.36,1) .12s; }
    .js-reveal .reveal.in-view .s-secmark::before,.js-reveal .reveal.s-secmark.in-view::before{ width:34px; }
  }

  /* ===== STANDOUT PASS v2 ===== */
  /* Rodman arrival — a cinematic beat between philosophy and choosing a residence */
  .arrival{ position:relative; height:76svh; min-height:500px; overflow:hidden; display:flex; align-items:flex-end; }
  .arrival-img{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(var(--as,1.05)); will-change:transform; }
  .arrival::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(31, 35, 5, .86) 0%, rgba(31, 35, 5, .58) 20%, rgba(31, 35, 5, .12) 52%, rgba(31, 35, 5, .3) 100%); }
  .arrival-in{ position:relative; z-index:2; max-width:calc(var(--container) + (2 * var(--gutter))); margin:0 auto; width:100%; padding:0 var(--gutter) 62px; color:var(--m-lime); box-sizing:border-box; }
  .arrival-in .s-eyebrow{ text-shadow:0 1px 14px rgba(0, 0, 0, .6), 0 0 2px rgba(0, 0, 0, .5); }
  .arrival-in .s-eyebrow::before{ content:""; display:block; width:52px; height:1px; background:var(--m-brass); margin-bottom:12px; }
  .arrival-in h2{ font-family:var(--disp); font-weight:400; font-size:clamp(1.8rem,3.6vw,2.7rem); line-height:1.12; max-width:20ch; margin:10px 0 0; text-wrap:balance; text-shadow:0 1px 24px rgba(0, 0, 0, .42); }
  @media (prefers-reduced-motion: reduce){ .arrival-img{ transform:none; } }

  /* Mile-markers — the admission steps become "the first mile", set on a brass current */
  .admsteps{ position:relative; }
  .admsteps::before{ content:""; position:absolute; left:25px; top:34px; bottom:34px; width:1px; background:linear-gradient(180deg, rgba(230, 213, 176, .15), rgba(230, 213, 176, .5) 12%, rgba(230, 213, 176, .5) 88%, rgba(230, 213, 176, .15)); }
  .astep{ position:relative; z-index:1; }
  .astep .num{ width:52px !important; height:62px !important; border-radius:3px !important; background:linear-gradient(180deg,#F4F0E6,#E7DFD0) !important; border:1px solid rgba(230, 213, 176, .55); box-shadow:inset 0 0 0 3px rgba(255, 255, 255, .45), 0 2px 8px rgba(31, 35, 5, .12); color:var(--brass) !important; font-family:var(--disp) !important; font-weight:400 !important; font-size:1.8rem !important; padding-top:9px; position:relative; }
  .astep .num::before{ content:"MILE"; position:absolute; top:8px; left:0; right:0; text-align:center; font-family:var(--sans); font-size:.4rem; font-weight:600; letter-spacing:.2em; color:var(--brass-line); }
  /* home admissions strip: numerals go engraved-brass, drop the flat circle */
  .s-step b i{ background:none !important; border:1px solid rgba(230, 213, 176, .6) !important; color:var(--m-brassL) !important; font-family:var(--disp) !important; font-weight:400 !important; border-radius:3px !important; width:30px !important; height:30px !important; }

  /* Retire the 999px pills — hairline-ruled small-caps rows instead */
  .s-trust{ gap:0 !important; align-items:center; flex-wrap:wrap; row-gap:8px; }
  .s-trust span{ border:0 !important; border-radius:0 !important; padding:4px 18px !important; position:relative; }
  .s-trust span + span::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); height:12px; width:1px; background:rgba(230, 213, 176, .55); }
  .s-trust span:first-child{ padding-left:0 !important; }
  .s-what{ align-items:center; gap:0 !important; flex-wrap:wrap; }
  .s-what .s-what-pill{ position:relative; }
  .s-what .s-what-pill + .s-what-pill::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); height:11px; width:1px; background:rgba(230, 213, 176, .45); }

  /* ===== STANDOUT PASS v3: real motion + tour gateway ===== */
  .arrival video.arrival-img{ object-fit:cover; width:100%; height:100%; }
  .tour-cta{ display:inline-flex; align-items:center; gap:12px; margin-top:22px; background:rgba(0, 0, 0, .34); border:1px solid rgba(244, 233, 223, .5); color:#F4E9DF; font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:11px 18px 11px 12px; border-radius:999px; cursor:pointer; backdrop-filter:blur(3px); transition:background .25s ease, border-color .25s ease; }
  .tour-cta:hover{ background:rgba(0, 0, 0, .5); border-color:var(--m-brassL); }
  .tour-play{ width:26px; height:26px; border-radius:50%; border:1px solid rgba(244, 233, 223, .7); display:inline-flex; align-items:center; justify-content:center; }
  .tour-play i{ width:0; height:0; border-style:solid; border-width:5px 0 5px 8px; border-color:transparent transparent transparent #F4E9DF; margin-left:2px; }

  /* ===== Affiliations + Contact (carried over from the current site) ===== */
  .s-affil{ background:var(--m-lime); }
  .s-affil .in{ padding-top:64px; padding-bottom:70px; text-align:center; }
  .affil-row{ display:flex; align-items:center; justify-content:center; gap:clamp(28px,5vw,64px); flex-wrap:wrap; }
  .affil-logo{ height:74px; width:auto; max-width:150px; object-fit:contain; transition:filter .3s ease, opacity .3s ease, transform .3s ease; }
  @media (hover:hover){ .affil-logo:hover{ filter:grayscale(0); opacity:1; transform:translateY(-2px); } }
  
  .ct-main .in{ padding-top:66px; padding-bottom:74px; }
  .ct-grid{ display:grid; grid-template-columns:1.3fr .7fr; gap:56px; align-items:start; }
  .ct-secmark{ font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); margin-bottom:20px; }
  .ct-secmark::before{ content:""; display:block; width:34px; height:1px; background:var(--brass-line); margin-bottom:14px; }
  .ct-form label{ display:block; font-family:var(--sans); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--m-soft); margin-bottom:18px; }
  .ct-two{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .ct-form input, .ct-form select, .ct-form textarea{ display:block; width:100%; box-sizing:border-box; margin-top:8px; border:1px solid var(--line); border-radius:4px; padding:12px 13px; font-family:var(--sans); color:var(--m-ink); letter-spacing:normal; text-transform:none; font-weight:400; }
  .ct-form input:focus, .ct-form select:focus, .ct-form textarea:focus{ outline:none; border-color:var(--brass-line); box-shadow:0 0 0 3px rgba(230, 213, 176, .18); }
  .ct-form textarea{ resize:vertical; }
  .ct-note{ font-family:var(--sans); color:var(--m-soft); margin:4px 0 18px; letter-spacing:normal; text-transform:none; }
  .ct-aside .ct-phone{ display:block; font-family:var(--disp); font-size:2rem; color:var(--m-ink); text-decoration:none; margin-bottom:14px; }
  @media(hover:hover){ .ct-aside .ct-phone:hover{ color:var(--brass); } }
  .ct-line{ font-family:var(--sans); font-size:.95rem; line-height:1.6; color:var(--m-ink); margin:0 0 24px; }
  .ct-rows div{ font-family:var(--sans); font-size:.9rem; color:var(--m-ink); padding:14px 0; border-top:1px solid var(--line); line-height:1.5; }
  .ct-rows b{ display:block; font-family:var(--sans); font-size:.64rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--brass); margin-bottom:4px; }
  @media (max-width:820px){ .ct-grid{ grid-template-columns:1fr; gap:34px; } .ct-two{ grid-template-columns:1fr; gap:0; } }

  /* ===== header v2: utility bar + refined nav, CARF everywhere ===== */
  .util-bar{ background:#1F2305; border-bottom:1px solid rgba(230, 213, 176, .2); }
  .util-bar .in{ display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:calc(var(--container) + (2 * var(--gutter))); margin:0 auto; padding:6px var(--gutter); }
  .util-left{ display:flex; align-items:center; gap:10px; font-family:var(--sans); font-size:.62rem; font-weight:600; text-transform:uppercase; }
  
  .util-phone{ font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.04em; text-decoration:none; white-space:nowrap; }
  /* !important is required, not decorative: `.util-phone{color:#E6D5B0 !important}`
     (0,1,0) sits later in the file, and importance beats specificity — so this
     (0,2,0) hover rule could never win and the phone link had NO hover state at
     all. Measured: computed colour stayed rgb(230,213,176) in both states.
     That breaks the house rule that every CTA has a hover effect, on the single
     highest-value control on the site. */
  @media(hover:hover){ .util-phone:hover{ color:#F4E9DF !important; } }
  .nav-cta{ white-space:nowrap; }
  .hero-carf{ z-index:4; }
  .s-foot .seal-row{ display:flex; align-items:center; gap:12px; margin-top:10px; }
  .s-foot .seal-row img{ height:46px; width:auto; }
  @media (max-width:820px){ .util-left{ font-size:.54rem; }   }
  /* ===== FAQ ===== */
  .s-faq{ background:var(--m-river); }
  .s-faq .in{ padding-top:70px; padding-bottom:78px; max-width:920px; }
  .s-faq .s-sechead{ margin-bottom:24px; }
  .faq details{ border-top:1px solid rgba(230, 213, 176, .3); }
  .faq details:last-child{ border-bottom:1px solid rgba(230, 213, 176, .3); }
  .faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:20px 2px; font-family:var(--sans); color:var(--m-ink); }
  .faq summary::-webkit-details-marker{ display:none; }
  .faq summary::after{ content:"+"; font-family:var(--sans); font-weight:400; font-size:1.5rem; line-height:1; color:var(--brass); }
  .faq details[open] summary::after{ content:"\2212"; }
  .faq details[open] summary{ color:var(--brass); }
  .faq .ans{ padding:0 2px 24px; font-family:var(--sans); color:var(--m-ink); max-width:74ch; }
  @media(hover:hover){ .faq summary:hover{ color:var(--brass); } }

  .s-nav .in{ position:relative; }

  .s-brand span{ white-space:nowrap; }
  /* cluster links + CTA to the right so there's no dead centre */
  .s-links{ font-size:.76rem; letter-spacing:.08em; }
  .s-links span{ position:relative; padding:5px 0; white-space:nowrap; transition:color .25s ease; }
  .s-links span::after{ content:""; position:absolute; left:0; bottom:-1px; height:1px; width:0; transition:width .3s cubic-bezier(.22,.61,.36,1); }
  @media (hover:hover){ .s-links span:hover{ color:#F4E9DF; } .s-links span:hover::after{ width:100%; } }
  .nav-cta{ margin-left:6px; }
  .nav-toggle{ display:none; background:none; border:1px solid rgba(244, 233, 223, .32); border-radius:4px; width:44px; height:40px; cursor:pointer; padding:0; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
  .nav-toggle span{ display:block; width:18px; height:1.5px; background:#F4E9DF; transition:transform .3s ease, opacity .2s ease; }
  .s-nav.open .nav-toggle span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
  .s-nav.open .nav-toggle span:nth-child(2){ opacity:0; }
  .s-nav.open .nav-toggle span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }
  @media (max-width:980px){
    
    .nav-cta{ order:2; margin-left:auto; }

    
    .s-links span::after{ display:none; }
  }
  /* ===== CLEAN BUTTON SYSTEM (flat, no shadow, consistent) ===== */
  .s-cta, .s-cta2, .nav-cta, .tour-cta, button.s-cta{
    box-shadow:none !important; border-radius:2px !important;
    font-family:var(--sans); font-weight:600 !important; letter-spacing:.14em; text-transform:uppercase;
    transition:background .25s ease, border-color .25s ease, color .25s ease; }

  
  @media (hover:hover){ .nav-cta:hover{ color:#F4E9DF !important; } }

  /* utility bar: quieter, less gold */
  .util-left{ color:#DFCBB9 !important; letter-spacing:.12em !important; }
  .util-phone{ color:#E6D5B0 !important; }

  /* =====================================================================
     AMAN-INSPIRED RESTRAINT  (Twelve Mile colourway)
     thin light type, wide tracking, header floats over the hero, no gold
     ===================================================================== */
  .util-bar{ display:none !important; }            /* remove the heavy strip */

  /* header floats transparent over the hero, solidifies on scroll */
  .sitehead{ position:fixed; top:0; left:0; right:0; z-index:80; background:transparent; border-bottom:1px solid transparent; transition:background .4s ease, border-color .4s ease; }
  .sitehead::before{ content:""; position:absolute; left:0; right:0; top:0; height:150px; background:linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%); pointer-events:none; z-index:-1; transition:opacity .4s ease; }
  .sitehead.scrolled{ background:var(--m-dark); border-bottom-color:rgba(230, 213, 176, .16); }
  .sitehead.scrolled::before{ opacity:0; }
  .mock-sticky{ background:transparent !important; border:0 !important; padding:6px 34px 0 !important; color:rgba(244, 233, 223, .5) !important; }
  .sitehead.scrolled .mock-sticky{ color:rgba(244, 233, 223, .4) !important; }

  .s-nav{ background:transparent !important; }
  
  .s-nav{ border-bottom:0 !important; }

  .s-brand span{ font-family:var(--sans); text-transform:uppercase; }

  /* nav links: thin, tiny, wide-tracked */
  .s-links{ margin-left:auto; align-items:center; }
  .s-links span{ font-family:var(--sans); text-transform:uppercase; color:#F4E9DF; }
  .s-links span::after{ background:rgba(244, 233, 223, .7) !important; }

  /* ===== buttons: NO gold. green solid primary + ivory hairline outlines ===== */
  .s-cta, .nav-cta, .s-cta2, button.s-cta, .tour-cta{
    box-shadow:none !important; border-radius:2px !important;
    font-family:var(--sans); font-weight:500 !important; letter-spacing:.2em !important; text-transform:uppercase;
    transition:background .3s ease, border-color .3s ease, color .3s ease; }
  .s-cta:hover, .s-cta:active{ filter:none !important; transform:none !important; }
  .s-cta{ padding:15px 30px !important; font-size:.66rem !important; }
  @media (hover:hover){ .s-cta:hover{ background:#46521A !important; border-color:#46521A !important; } }
  
  @media (hover:hover){ .nav-cta:hover{ background:rgba(244, 233, 223, .1) !important; border-color:#F4E9DF !important; } }
  .s-cta2{ padding:14px 26px !important; font-size:.66rem !important; }
  @media (hover:hover){ .s-cta2:hover{ border-color:#F4E9DF !important; color:#F4E9DF !important; } }

  /* give the heroes clearance under the now-fixed header */
  .hw-hero .in, .ap-hero .in{ padding-top:calc(var(--sec-xl) + 24px); }
  .s-hero{ }  /* home hero content is bottom-anchored, floats fine under the header */

  /* a touch more air, Aman-style, in the hero copy */
  .s-eyebrow{ letter-spacing:.26em !important; }

  /* =====================================================================
     AMAN LAYER — site-wide restraint. hierarchy from size/tracking/space,
     not weight. thin type, lots of air, flat editorial chrome, no gold fills.
     ===================================================================== */

  /* --- typography: light everywhere --- */
  body{ font-weight:400; }
  .s-h1, .hw-hero h1, .ap-hero h1, .ct-hero h1, .pg-opener h1,
  .s-sechead, .hw-split h2, .memhead h3, .hw-after h3, .arrival-in h2,
  .s-quote, section h2, .s-mem .memhead h3{
    font-weight:400 !important; letter-spacing:.006em; line-height:1.12 !important; text-wrap:balance; }
  .s-h1, .hw-hero h1, .ap-hero h1{ line-height:1.08 !important; }

  /* sub-headings / card & list titles -> light Caslon, hierarchy via size not weight */
  .s-card h3, .hw-tcard h3, .astep h3, .pillar h3, .about-card h3,
  .faq summary, .led-name, .loc-card h3, .s-p h3, .infocard h3, .ct-rows b, .s-am h5{
    font-weight:400 !important; }

  /* eyebrows / tiny labels: wide-tracked, muted, quiet */
  .s-secmark, .s-eyebrow, .pg-kicker, .pg-secnum, .ct-secmark, .faq .s-secmark, .s-am .s-secmark{
    font-weight:600 !important; letter-spacing:.26em !important; font-size:.64rem !important; }
  .s-secmark::before, .s-eyebrow::before, .ct-secmark::before{ opacity:.7; }

  /* body copy: airy, generous leading */
  .s-sub, .pg-sub, .hw-split p, .s-intro p, .memhead p, .hw-tcard p, .s-card p,
  .astep p, .led-desc, .faq .ans, .ct-line, .s-p p, .infocard p, .about-card p, .le-note, .asidenote{
    font-weight:400 !important; line-height:1.78 !important; }
  .s-sub, .pg-sub{ font-size:1.02rem; }

  /* trust row + chips: hairline, quiet */
  .s-trust span{ font-weight:500 !important; letter-spacing:.16em !important; color:#F4E9DF !important; }

  /* ── SECTION RHYTHM ─────────────────────────────────────────────────
     One scale governs every section's vertical air (was 34 ad-hoc values).
     STANDARD = 112px, matching the reference's .padding-section-112px.
     Tokens step down responsively (see :root media queries).            */
  .s-intro .in, .s-res .in, .s-prog .in, .s-mem .in, .s-amen .in, .s-adm .in,
  .hw-approach .in, .hw-therapy .in, .ct-main .in, .s-faq .in, .s-affil .in,
  .ap-main .in, .hw-appr .in, .hw-cont .in, .ap-info .in, .s-diff .in,
  .s-clin .in, .s-resteam .in, .ct-band .in, .s-tourclose .in{
    padding-top:var(--sec-lg); padding-bottom:var(--sec-lg); }

  /* TIGHT bands: notes, cost lines, small CTAs, closing prompts. */
  .hw-after .in, .wtnote .in, .hw-cost .in, .s-careers .in,
  .s-indcta .in, .s-family .in{
    padding-top:var(--sec-md); padding-bottom:var(--sec-md); }
  .s-sechead{ margin-bottom:34px !important; }
  .s-secmark, .s-eyebrow{ margin-bottom:20px !important; }

  /* --- chrome: flatten boxes into editorial cards, hairline dividers, no shadow --- */
  .hw-tcard, .infocard, .s-p{
    background:transparent !important; border:0 !important; border-top:1px solid rgba(230, 213, 176, .28) !important;
    border-radius:0 !important; box-shadow:none !important; padding:24px 0 4px !important; }
  .hw-tgrid{ gap:0 30px !important; }
  .hw-tcard h3::before, .s-p h3::before{ display:none !important; }
  .s-card, .loc-card{ box-shadow:none !important; border:1px solid rgba(230, 213, 176, .22) !important; border-radius:0 !important; background:transparent !important; }
  .s-card .bd, .loc-card .bd{ padding:20px 22px 24px !important; }
  .s-am{ background:transparent !important; }
  .s-am .ph{ border-radius:0 !important; }
  .ph, .roomrow .rm, .le-reel, .loc-img, .s-card .ph{ border-radius:0 !important; }
  .about-card .ph2{ border-radius:0 !important; }

  /* dividers + rules as thin brass hairlines */
  .rule, .s-eyebrow::before, .s-secmark::before, .ct-secmark::before{ background:var(--brass-line) !important; }

  /* CARF seal rendered in brass so it sits in-palette */
  .hero-carf, .seal-row img{ filter:grayscale(1) sepia(.85) hue-rotate(-6deg) saturate(1.9) brightness(.88) contrast(.95); opacity:.92; }

  /* ===== Quiet capable care — discretion + clinical trust band (Aman ledger style) ===== */
  .s-clin{ background:var(--m-lime); }
  .s-clin .in{ padding-top:var(--sec-lg); padding-bottom:var(--sec-lg); }
  .s-clin .lede{ font-family:var(--sans); font-size:1.25rem; line-height:1.6; color:var(--m-ink); max-width:56ch; margin:0 0 46px; }
  .clin-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0 34px; }
  .clin-item{ border-top:1px solid rgba(230, 213, 176, .32); padding:22px 0 6px; }
  .clin-item h3{ font-family:var(--sans); font-weight:400; font-size:1.08rem; margin:0 0 8px; color:var(--m-ink); }
  .clin-item p{ font-family:var(--sans); font-size:.9rem; line-height:1.7; color:var(--m-ink); margin:0; }
  @media (max-width:980px){ .clin-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .clin-grid{ grid-template-columns:1fr; } }

  /* a11y contrast fixes */
  .s-adm .s-step b{ color:#F4E9DF !important; }           /* step labels on green: limestone, not brass */
  .s-adm .s-step b i{ color:#F4E9DF !important; border-color:rgba(244, 233, 223, .6) !important; }
  .site .pg-sub{ color:var(--m-ink) !important; }               /* muted lede on limestone: text-safe green */
  html{ }

  /* ===== mobile-final fixes (must win cascade) ===== */
  @media (max-width:560px){
    .mock-sticky{ font-size:.5rem !important; letter-spacing:.1em !important; white-space:nowrap; padding:5px 20px 0 !important; }

    .s-brand{ min-width:0; }

    .s-trust{ flex-direction:column; gap:9px !important; align-items:flex-start; }
    .s-trust span{ padding:0 !important; }
    .s-trust span + span::before{ display:none !important; }
    .s-hero .in, .site .in{ padding-left:20px; padding-right:20px; }
  }

  
  
  /* header row: span wider than the page column; graceful compact steps */
  .s-nav .in{ gap:18px !important; }

  
  @media (max-width:1280px){
    .nav-toggle{ display:flex !important; order:3; }
    .nav-cta{ display:none !important; }
    .s-links{ display:none; position:absolute; top:100%; left:0; right:0; margin:0; flex-direction:column; background:var(--m-dark); border-top:1px solid rgba(230, 213, 176, .22); box-shadow:0 18px 40px rgba(0, 0, 0, .35); padding:6px 0; z-index:70; }
    .s-nav.open .s-links{ display:flex; }
    .s-links span{ padding:15px 34px !important; border-bottom:1px solid rgba(230, 213, 176, .12); }
  }

  /* menu call link is mobile-menu only; seal clears the fixed header */
  @media (min-width:1081px){ .menu-call{ display:none !important; } }
  
  /* ===== wordmark: the old way, refined — light, wide-tracked, a touch larger ===== */
  .s-brand span{ color:#F4E9DF !important; }
  
  .reel-feature{ display:flex; justify-content:center; margin:6px 0 46px; }
  .reel-feature .le-reel{ max-width:300px; }

  /* phone number in the header row, on the wordmark line */
  .nav-phone{ font-family:var(--sans); font-weight:500; color:#F4E9DF; text-decoration:none; white-space:nowrap; margin-left:4px; }
  @media (hover:hover){ .nav-phone:hover{ color:var(--m-brassL); } }
  @media (max-width:1280px){ .nav-phone{ margin-left:auto; order:2; } .nav-toggle{ margin-left:16px !important; } .menu-call{ display:none !important; } }
  /* mobile header fit: wordmark + phone + menu on one line, no overlap */
  @media (max-width:640px){
    .s-nav .in{ gap:10px !important; padding-left:18px; padding-right:18px; }
    .s-brand{ flex-shrink:0; }

    .nav-phone{ margin-left:auto; }
    .nav-toggle{ width:38px; height:34px; margin-left:10px !important; }
  }
  /* ===== About team — categorized, filterable, expandable (new style) ===== */
  .team-filter{ display:flex; flex-wrap:wrap; justify-content:center; gap:2px 30px; margin:0 auto 52px; padding-bottom:22px; border-bottom:1px solid rgba(230, 213, 176, .28); }
  .team-filter button{ background:none; border:0; cursor:pointer; font-family:var(--sans); font-size:.64rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--m-soft); padding:8px 2px; position:relative; transition:color .25s ease; }
  .team-filter button.on{ color:var(--m-ink); }
  /* -23px reaches DOWN to the container's bottom rule, so the active tab's mark
     sits on that rule. That only holds while the filter is a single row: it
     wraps at or below 1099px (measured — 3 rows at 375-414, 2 rows to ~1000),
     and the mark then lands on the NEXT row's label and reads as a strikethrough
     through it. Re-measure this breakpoint if a category is ever added or
     renamed, because the wrap width is a function of the labels. */
  .team-filter button.on::after{ content:""; position:absolute; left:0; right:0; bottom:-23px; height:1px; background:var(--brass); }
  @media (max-width:1099px){
    /* Inside the button's own box, so it can never reach another row. */
    .team-filter button.on::after{ bottom:6px; }
  }
  @media (hover:hover){ .team-filter button:hover{ color:var(--m-ink); } }
  .team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:46px 32px; align-items:start; }
  .tm.hide{ display:none; }
  .tm-photo{ aspect-ratio:1/1; background-size:cover; background-position:center 20%; background-color:#DFCBB9; margin-bottom:16px; filter:grayscale(.2); transition:filter .4s ease; }
  @media (hover:hover){ .tm:hover .tm-photo{ filter:grayscale(0); } }
  .tm h3{ font-family:var(--sans); font-weight:400; font-size:1.16rem; line-height:1.2; margin:0 0 4px; color:var(--m-ink); }
  .tm-role{ font-family:var(--sans); font-size:.6rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--brass); margin-bottom:10px; }
  .tm-cred{ font-family:var(--sans); font-size:.82rem; line-height:1.55; color:var(--m-soft); }
  .tm-more{ background:none; border:0; padding:12px 0 0; margin:0; cursor:pointer; font-family:var(--sans); font-size:.6rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--m-ink); }
  .tm-more::after{ content:" +"; color:var(--brass); }
  .tm.open .tm-more::after{ content:" \2212"; }
  .tm-bio{ display:none; margin-top:12px; }
  .tm.open .tm-bio{ display:block; }
  .tm-bio p{ font-family:var(--sans); font-size:.9rem; line-height:1.72; color:var(--m-ink); margin:0 0 10px; }
  .team-note{ margin-top:56px; border-top:1px solid rgba(230, 213, 176, .28); padding-top:30px; max-width:72ch; }
  .team-note h3{ font-family:var(--sans); font-weight:400; font-size:1.2rem; margin:0 0 8px; color:var(--m-ink); }
  .team-note p{ font-family:var(--sans); font-size:.95rem; line-height:1.72; color:var(--m-ink); margin:0; }
  @media (max-width:980px){ .team-grid{ grid-template-columns:repeat(3,1fr); } }
  @media (max-width:680px){ .team-grid{ grid-template-columns:repeat(2,1fr); gap:34px 22px; } .team-filter{ gap:2px 18px; } }

  /* ===== team bios open in a spacious modal (not cramped inline) ===== */
  .team .tm-bio{ display:none !important; }
  .team .tm-more{ transition:color .2s ease; }
  @media (hover:hover){ .team .tm-more:hover{ color:var(--brass); } }
  .tm-modal[hidden]{ display:none; }
  .tm-modal{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:24px; box-sizing:border-box; }
  .tm-modal-scrim{ position:absolute; inset:0; background:rgba(0, 0, 0, .74); }
  .tm-modal-panel{ position:relative; z-index:2; width:min(920px,100%); max-height:88vh; overflow:auto; background:linear-gradient(90deg,#DFCBB9 0 300px, var(--m-lime) 300px); display:grid; grid-template-columns:300px 1fr; align-items:start; box-shadow:0 34px 90px rgba(0, 0, 0, .45); }
  .tm-modal-photo{ background-size:cover; background-position:center 22%; background-color:#DFCBB9; aspect-ratio:1/1; align-self:start; position:sticky; top:0; }
  .tm-modal-body{ padding:52px 52px 54px; }
  .tm-modal-role{ font-family:var(--sans); font-size:.64rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin-bottom:14px; }
  .tm-modal-name{ font-family:var(--disp); font-weight:400; font-size:2.1rem; line-height:1.08; margin:0 0 14px; color:var(--m-ink); }
  .tm-modal-cred{ font-family:var(--sans); font-size:.9rem; line-height:1.55; color:var(--m-soft); margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid rgba(230, 213, 176, .32); }
  .tm-modal-bio p{ font-family:var(--sans); font-size:1.02rem; line-height:1.82; color:#252A06; margin:0 0 15px; }
  .tm-modal-bio p:last-child{ margin-bottom:0; }
  .tm-modal-x{ position:absolute; top:16px; right:18px; z-index:3; background:rgba(244, 233, 223, .85); border:1px solid rgba(230, 213, 176, .4); border-radius:50%; width:40px; height:40px; font-size:1.4rem; line-height:1; color:var(--m-ink); cursor:pointer; display:flex; align-items:center; justify-content:center; }
  @media (hover:hover){ .tm-modal-x:hover{ background:var(--m-brassL); } }
  @media (max-width:720px){ .tm-modal{ padding:0; } .tm-modal-panel{ grid-template-columns:1fr; width:100%; max-height:100dvh; height:100dvh; background:var(--m-lime); } .tm-modal-photo{ aspect-ratio:auto; height:280px; position:static; } .tm-modal-body{ padding:34px 26px 40px; } .tm-modal-name{ font-size:1.7rem; } }
  @media (prefers-reduced-motion: no-preference){ .tm-modal:not([hidden]) .tm-modal-panel{ animation:tmIn .38s cubic-bezier(.22,.61,.36,1); } @keyframes tmIn{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} } }

  /* ===== phone mockup now shows the ACTUAL alumni-app login screen ===== */
  .phone .scr.lgn{ background:radial-gradient(120% 55% at 50% 0%, #F2EDE3 0%, #F4E9DF 55%), #F4E9DF; padding:32px 20px 15px; gap:0; justify-content:flex-start; align-items:stretch; color:#252A06; }
  .phone .lgn-crest{ display:block; width:90px; height:auto; margin:0 auto; mix-blend-mode:multiply; user-select:none; -webkit-user-select:none; filter:drop-shadow(0 3px 4px rgba(37, 42, 6, .16)); }
  .phone .lgn-tag{ display:flex; align-items:center; gap:8px; margin:9px 0 17px; }
  .phone .lgn-tag span{ height:1px; flex:1; background:rgba(37, 42, 6, .16); }
  .phone .lgn-tag em{ font-family:var(--sans); font-style:italic; font-size:.72rem; line-height:1; color:rgba(70, 82, 26, .82); white-space:nowrap; }
  .phone .lgn-tabs{ display:grid; grid-template-columns:1fr 1fr; background:rgba(244, 233, 223, .6); border-radius:9px; padding:3px; margin-bottom:14px; }
  .phone .lgn-tabs b{ font-family:var(--sans); font-weight:500; font-size:.62rem; text-align:center; padding:6px 0; border-radius:6px; color:rgba(70, 82, 26, .68); }
  .phone .lgn-tabs b.on{ background:#F4E9DF; color:#252A06; box-shadow:0 1px 2px rgba(37, 42, 6, .12); }
  .phone .lgn-field{ display:block; margin-bottom:9px; }
  .phone .lgn-field span{ display:block; font-family:var(--sans); font-weight:500; font-size:.58rem; color:#252A06; margin-bottom:3px; }
  .phone .lgn-field i{ display:block; font-family:var(--sans); font-style:normal; font-size:.62rem; color:rgba(37, 42, 6, .34); background:#F4E9DF; border:1px solid #E6D5B0; border-radius:9px; padding:7px 10px; }
  .phone .lgn-field i.dots{ letter-spacing:1px; color:rgba(37, 42, 6, .5); }
  .phone .lgn-btn{ width:100%; font-family:var(--sans); font-weight:600; font-size:.66rem; letter-spacing:.01em; color:#F4E9DF; border:0; border-radius:9px; padding:8px 0; margin-top:3px; background-image:linear-gradient(to bottom,#525E23,#46501D 55%,#3E471A); box-shadow:inset 0 1px 0 rgba(244, 233, 223, .14), 0 1px 2px rgba(37, 42, 6, .2), 0 3px 8px -2px rgba(37, 42, 6, .25); }
  .phone .lgn-forgot{ display:block; text-align:center; font-family:var(--sans); font-size:.54rem; color:rgba(70, 82, 26, .6); margin-top:10px; }
  .phone .lgn-foot{ text-align:center; font-family:var(--sans); font-size:.5rem; line-height:1.75; color:rgba(70, 82, 26, .5); margin-top:auto; padding-top:12px; }
  .phone .lgn-foot u{ color:rgba(70, 82, 26, .42); text-underline-offset:2px; }
  .le-note, .compliance, .wtnote{ display:none !important; }
  .hw-tcard.tpl-link{ cursor:pointer; transition:transform .18s ease; } .hw-tcard.tpl-link:hover{ transform:translateY(-2px); } .tpl-arrow{ color:var(--m-brassL); font-size:.85em; opacity:.75; }

  /* captain's wheel: vector, larger, more presence */
  .s-brand .navlogo{ height:46px !important; filter:drop-shadow(0 1px 4px rgba(0, 0, 0, .35)); }
  .s-brand{ gap:14px; }
  @media (max-width:640px){ .s-brand .navlogo{ height:36px !important; } }

  .ct-success{ padding:46px 40px; background:var(--m-lime); border:1px solid rgba(230, 213, 176, .35); text-align:center; }
  .ct-success .ok-mark{ width:52px;height:52px;border-radius:50%;border:1px solid var(--brass);color:var(--brass);font-size:1.5rem;display:flex;align-items:center;justify-content:center;margin:0 auto 18px; }
  .ct-success h3{ font-family:var(--disp); font-weight:400; font-size:1.6rem; margin:0 0 12px; color:var(--m-ink); }
  .ct-success p{ font-family:var(--sans); font-size:1rem; line-height:1.7; color:var(--m-ink); margin:0 0 10px; max-width:44ch; margin-left:auto; margin-right:auto; }
  .ct-success .ok-now a{ color:var(--m-ink); font-weight:600; text-decoration:none; border-bottom:1px solid var(--brass); }

  .tour-band{ background:var(--m-lime); padding:0 0 8px; }
  .tour-band .tour-vid{ display:block; width:100%; max-height:72vh; object-fit:cover; }
  .tour-cap{ font-family:var(--sans); font-size:.72rem; letter-spacing:.06em; color:#46521A; text-align:center; padding:14px 20px 26px; max-width:64ch; margin:0 auto; }
  .s-amen4{ grid-template-columns:repeat(3,1fr) !important; }
  @media (max-width:900px){ .s-amen4{ grid-template-columns:1fr 1fr !important; } }
  @media (max-width:560px){ .s-amen4{ grid-template-columns:1fr !important; } }

  .s-link[data-goto]{ cursor:pointer; }
  details.pack summary{ font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); cursor:pointer; list-style:none; }
  details.pack summary::-webkit-details-marker{ display:none; }
  details.pack .pack-body{ margin-top:14px; font-family:var(--sans); font-size:.92rem; line-height:1.7; color:var(--m-ink); }
  details.pack .pack-body b{ display:block; font-family:var(--sans); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--m-ink); margin:14px 0 6px; }
  details.pack .pack-body ul{ margin:0; padding-left:18px; }
  details.pack .pack-body li{ margin-bottom:6px; }

  .lake-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
  .lg-tile{ aspect-ratio:3/4; background-size:cover; background-position:center 52%; background-color:#DFCBB9; }
  /* Rodman estate photos are landscape 3:2; show them uncropped rather than force a portrait crop. */
  .lake-gallery.rg-wide .lg-tile{ aspect-ratio:3/2; background-position:center; }
  .lake-cap{ font-family:var(--sans); font-size:.72rem; letter-spacing:.06em; color:#46521A; text-align:center; padding:20px 20px 0; }
  /* Rodman tour page: walkthrough lead (above the video) · gallery lead · dark closing band */
  .tour-lead{ background:var(--m-lime); }
  .tour-lead .in{ padding-top:var(--sec-lg); padding-bottom:var(--s-6); text-align:center; max-width:840px; }
  .tour-lead .s-sechead{ color:var(--m-ink); margin:8px auto 14px; }
  .tour-lead .tour-lead-p{ font-family:var(--sans); font-size:1.18rem; line-height:1.62; color:var(--m-soft); max-width:60ch; margin:0 auto; }
  .gallery-lead{ font-family:var(--sans); font-size:1.16rem; line-height:1.6; color:var(--m-soft); max-width:72ch; margin:0 0 4px; }
  .s-tourclose{ background:linear-gradient(158deg, var(--m-green) 0%, var(--m-dark) 100%); border-top:1px solid rgba(230, 213, 176, .22); }
  .s-tourclose .in{ padding-top:var(--sec-lg); padding-bottom:var(--sec-lg); max-width:820px; }
  .s-tourclose .lede{ font-family:var(--sans); font-size:1.2rem; line-height:1.6; color:#DFCBB9; max-width:56ch; margin:0 auto 26px; text-align:center; }
  .s-tourclose .tourclose-alt{ margin:0 0 20px; font-family:var(--sans); font-size:1.06rem; text-align:center; }
  .s-tourclose .tourclose-alt .s-link{ cursor:pointer; color:var(--m-brassL); }
  .s-tourclose .tourclose-ctas{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
  .s-tourclose .s-cta2{ color:#F4E9DF !important; border-color:rgba(244, 233, 223, .5) !important; }
  @media (max-width:820px){ .lake-gallery{ grid-template-columns:1fr 1fr; } }
  @media (max-width:520px){ .lake-gallery{ grid-template-columns:1fr; } }

  .faqcat{ margin-bottom:30px; }
  .faqcat-h{ font-family:var(--sans); color:var(--brass); margin:0 0 6px; padding-bottom:10px; border-bottom:1px solid rgba(230, 213, 176, .28); }
  .reel-row{ display:flex; gap:52px; justify-content:center; align-items:flex-start; flex-wrap:wrap; margin:8px 0 46px; }
  .reel-row .le-reel{ margin:0; }

  /* nav wording bigger (desktop bar only; mobile menu untouched) — compacted to fit */
  @media (min-width:1280px){
    .sitehead .s-links{ gap:18px; }
    .sitehead .s-links span{ font-size:.8rem !important; letter-spacing:.07em !important; }
    .sitehead .nav-phone{ font-size:.82rem !important; letter-spacing:.03em !important; }
    .sitehead .nav-cta, .sitehead .s-cta.nav-cta{ font-size:.7rem !important; letter-spacing:.12em !important; padding:13px 22px !important; }
  }

  /* outline CTA on light bands (.s-clin) must be visible: green on limestone, not cream-on-cream */
  .s-clin .s-cta2{ background:transparent !important; color:var(--m-green) !important; border:1px solid var(--m-green) !important; }
  .s-clin .s-cta2:hover{ color:var(--m-ink) !important; border-color:var(--m-ink) !important; }

  .ct-band{ border-top:1px solid rgba(230, 213, 176, .22); }
  .ct-band .in{ padding-top:var(--sec-lg); padding-bottom:var(--sec-lg); }
  .ct-band-head{ text-align:center; max-width:52ch; margin:0 auto 30px; }
  .ct-band-head .ct-secmark{ color:var(--brass); margin-bottom:6px; }
  .ct-band-head h2{ font-family:var(--disp); font-weight:400; font-size:clamp(1.7rem,3.4vw,2.3rem); line-height:1.12; color:var(--m-ink); margin:0 0 12px; text-wrap:balance; }
  .ct-band-head p{ font-family:var(--sans); line-height:1.6; color:var(--m-ink); }
  .ct-band-head a{ color:var(--m-ink); font-weight:600; text-decoration:none; border-bottom:1px solid var(--brass); }
  .ct-band .ct-form{ max-width:720px; margin:0 auto; }
  @media (max-width:820px){ .vidctl{ display:none !important; } }

  /* #6 What we help with — prominent (the reason people visit) */
  /* margin-top was 12px, which put this rail almost directly under the
     "Life after treatment" button and made it read as part of that card rather
     than as its own thing. `cursor:pointer` is gone with it — the wrapper is a
     <div> now, so a pointer over the empty gaps promised a click that does
     nothing; the pointer belongs on the pills and the heading, which have it. */
  .s-what{ margin-top:52px; row-gap:12px !important; }
  .s-what b{ display:block; width:100%; font-family:var(--disp) !important; font-weight:400 !important; font-size:1.5rem !important; letter-spacing:.01em !important; text-transform:none !important; color:var(--m-ink) !important; margin:0 0 20px !important; }
  /* Geometry is a real button now: inline-flex + min-height clears the WCAG
     target floor, which the old 6px-padded span did not (it measured ~30px).
     These are individually clickable, so the floor actually applies — and at
     54px they are comfortably above it rather than sitting on the line. */
  .s-what .s-what-pill{ font-family:var(--sans) !important; font-size:.95rem !important; letter-spacing:.02em !important; background:var(--m-river) !important; border-radius:999px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; min-height:54px !important; padding:0 26px !important; margin-right:11px !important; color:var(--m-ink) !important; }
  .s-what .s-what-pill + .s-what-pill::before{ display:none !important; }
  /* The pill fill is river, which is correct on the limestone ground it was
     designed against (home-programs is a bare `.s-prog`). programs-prog carries
     an explicit `bg-river` — pinned there by the band-alternation pass — so on
     /programs/ the pill was tan on tan and the boxes disappeared entirely,
     leaving seven bare words. Same failure as .phonelbl: a shared class landing
     on two different grounds. Invert the fill on a river ground rather than
     re-toning the band, because that band's tone is load-bearing for the run.
     (0,3,0)+!important is what it takes to beat the (0,2,0)+!important above. */
  .bg-river .s-what .s-what-pill{ background:var(--m-lime) !important; }
  /* Affordance. These were seven inert words with no hover state and no
     pointer, so nothing said they could be opened. Values are lifted verbatim
     from the standing CTA hover rule further down (translateY(-3px) + the brass
     glow, olive fill + light text) rather than invented, so the rail behaves
     like every other button on the site. `.s-what-all` keeps the heading on its
     own full-width row, which the `b{width:100%}` above used to do when the
     heading was inside the one big anchor. */
  /* "What we help with →" is a link to the hub and was the one part of this
     rail with no hover state at all — it read as a heading, not something you
     could click. Brass rather than a colour invented for it: 6.63:1 on
     limestone and 5.05:1 on the river ground, so it clears AA on both surfaces
     this rail appears on. The arrow nudges to confirm the direction of travel.
     `.s-what b` sets ink with !important, so beating it needs the extra class. */
  .s-what-all{ display:block !important; width:100% !important; text-decoration:none !important; }
  .s-what-all b{ transition:color .2s ease; }
  .s-what-arw{ display:inline-block; transition:transform .2s ease; }
  @media (hover:hover){
    .s-what-all:hover b{ color:var(--m-brass) !important; }
    .s-what-all:hover .s-what-arw{ transform:translateX(5px); }
  }
  .s-what .s-what-pill{ transition:background .2s ease, color .2s ease, box-shadow .22s ease, transform .16s ease !important; }
  @media (hover:hover){
    .s-what .s-what-pill:hover{ background:#46521A !important; color:#F4E9DF !important; transform:translateY(-3px); box-shadow:0 10px 26px rgba(230, 213, 176, .42); }
    .s-what .s-what-pill:active{ transform:translateY(-1px); box-shadow:0 4px 12px rgba(230, 213, 176, .32); }
  }
  /* #4 residences — bold borders + real explore buttons */
  .s-res .s-card{ border:1.5px solid var(--m-green) !important; box-shadow:0 6px 22px rgba(37, 42, 6, .10) !important; }
  .s-res .s-card .s-link{ display:inline-block; margin-top:16px; padding:11px 22px; border:1.5px solid var(--m-green); color:var(--m-green) !important; border-radius:2px; background:transparent; font-weight:600 !important; }
  @media (hover:hover){ .s-res .s-card .s-link:hover{ background:var(--m-green); color:#F4E9DF !important; } }
  /* #5 affiliations — always full colour, no hover shift */
  .affil-logo{ filter:none !important; opacity:1 !important; }
  .affil-logo:hover{ filter:none !important; opacity:1 !important; transform:none !important; }
  /* #2 getting help — bigger */
  .s-adm .s-sechead{ font-size:clamp(2rem,4.6vw,3rem) !important; line-height:1.08 !important; }
  .s-adm .in{ padding-top:var(--sec-lg); padding-bottom:var(--sec-lg); }

  /* #1 top quote + buttons bigger */
  .s-intro .s-quote{ font-size:clamp(1.65rem,3.4vw,2.4rem) !important; line-height:1.26 !important; }
  .s-intro .s-cta, .s-intro .s-cta2{ font-size:.78rem !important; padding:15px 32px !important; }
  /* #2 A path for where you are — numbered, bigger, more presence */
  .s-prog3{ counter-reset: progn; }
  .s-p{ counter-increment: progn; }
  .s-p h3{ font-size:1.4rem !important; }
  .s-p h3::before{ display:flex !important; content: counter(progn) !important; width:42px; height:42px; border:1.5px solid var(--m-brass); border-radius:50%; align-items:center; justify-content:center; font-family:var(--disp); font-weight:400; font-size:1.25rem; color:var(--m-brass); background:transparent; margin-bottom:18px; }
  /* #4 membership — distinct rich forest green so it stops blending with the peat above */
  .s-mem{ background:radial-gradient(130% 100% at 22% 0%, #46521A 0%, #252A06 72%) !important; }
  /* #5 trust-point icons */
  .clin-ico{ display:block; color:var(--m-green); margin-bottom:12px; }
  .clin-ico svg{ width:27px; height:27px; }

  /* section-background rhythm — no two adjacent bands share a colour */
  .bg-lime{ background:var(--m-lime) !important; }
  .bg-river{ background:var(--m-river) !important; }
  /* Contact = clean paper-white closing panel, distinct from the cream content bands */
  .ct-main{ background:#FFFFFF !important; }
  .ct-form input, .ct-form select, .ct-form textarea{ background:#F4E9DF !important; }

  /* Programs page */
  .pg-lead{ font-family:var(--sans); color:var(--m-ink); max-width:86ch; }
  .day-timeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; position:relative; }
  .day-timeline::before{ content:""; position:absolute; top:28px; left:9%; right:9%; height:1px; background:linear-gradient(90deg,transparent,var(--m-brass),transparent); z-index:0; }
  .day-card{ position:relative; z-index:1; }
  .day-ico{ display:flex; align-items:center; justify-content:center; width:58px; height:58px; margin:0 0 18px; border-radius:50%; background:var(--m-lime); border:1.5px solid var(--m-brass); color:var(--m-green); }
  .day-ico svg{ width:27px; height:27px; }
  .day-time{ display:block; font-family:var(--sans); font-size:.62rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin-bottom:9px; }
  .day-card h3{ font-family:var(--disp); font-weight:400; font-size:1.28rem; color:var(--m-ink); margin:0 0 11px; }
  .day-card p{ font-family:var(--sans); font-size:.94rem; line-height:1.72; color:var(--m-ink); margin:0; }
  @media(max-width:860px){ .day-timeline{ grid-template-columns:1fr 1fr; gap:36px 24px; } .day-timeline::before{ display:none; } }
  @media(max-width:520px){ .day-timeline{ grid-template-columns:1fr; } }
  .pg-member{ background:radial-gradient(130% 100% at 22% 0%, #46521A 0%, #252A06 72%); color:var(--m-lime); position:relative; overflow:hidden; }
  .pg-memgrid{ display:grid; grid-template-columns:1.12fr .88fr; gap:56px; align-items:center; }
  .pg-memcopy h3{ font-family:var(--disp); font-weight:400; font-size:clamp(1.7rem,3vw,2.35rem); line-height:1.14; color:#F4E9DF; margin:7px 0 16px; }
  .pg-memcopy>p{ font-family:var(--sans); color:#F4E9DF; margin:0 0 22px; }
  .pg-memlist{ list-style:none; padding:0; margin:0 0 28px; }
  .pg-memlist li{ font-family:var(--sans); line-height:1.6; color:#F4E9DF; padding:13px 0 13px 28px; border-top:1px solid rgba(244, 233, 223, .16); position:relative; }
  .pg-memlist li::before{ content:""; position:absolute; left:2px; top:20px; width:8px; height:8px; border-radius:50%; border:1.5px solid var(--m-brassL); }
  .pg-memlist b{ color:#F4E9DF; font-family:var(--sans); font-weight:600; font-size:.8rem; letter-spacing:.03em; }
  .pg-memphone{ display:flex; flex-direction:column; align-items:center; }
  @media(max-width:860px){ .pg-memgrid{ grid-template-columns:1fr; gap:40px; } .pg-memphone{ order:-1; } }

  /* crisp the membership(forest) -> getting-help(green) seam on home */
  .s-adm{ border-top:1px solid rgba(230, 213, 176, .26); }

  /* Sharper 1200px hero photos (was 820px, upscaled/blurry) */
  .herobg-fireplace{ background-image:url(data:image/jpeg;); background-size:cover; background-position:center; }
  .herobg-bay{ background-image:url(data:image/jpeg;); background-size:cover; background-position:center; }
  .herobg-nook{ background-image:url(data:image/jpeg;); background-size:cover; background-position:center; }
  .herobg-whattreat{ background-image:url(data:image/jpeg;); background-size:cover; background-position:center; }

  /* CARF seal: promoted from faint corner watermark to a bright trust badge beside the hero CTAs */
  .hero-carf{
    position:static !important; top:auto !important; right:auto !important;
    width:clamp(66px,7.5vw,82px) !important; height:auto !important;
    filter:brightness(1.06) saturate(1.06) drop-shadow(0 2px 9px rgba(0, 0, 0, .55)) !important;
    opacity:1 !important; margin-left:6px; flex:0 0 auto;
  }

  /* CARF seal: bottom-right of hero, level with the LegitScript/CARF trust row */
  .s-hero .hero-carf{
    position:absolute !important; top:auto !important; left:auto !important;
    right:34px !important; bottom:20px !important;
    width:clamp(84px,8.5vw,102px) !important; height:auto !important;
    filter:brightness(1.06) saturate(1.06) drop-shadow(0 2px 9px rgba(0, 0, 0, .55)) !important;
    opacity:1 !important; margin:0 !important; z-index:5;
  }
  @media(max-width:640px){ .s-hero .hero-carf{ right:22px !important; bottom:16px !important; width:74px !important; } }

  /* CARF seal is now a link to carf.org */
  .s-hero a.hero-carf{ display:block; line-height:0; transition:transform .18s ease; cursor:pointer; }
  .s-hero a.hero-carf:hover{ transform:scale(1.05); }
  .s-hero a.hero-carf img{ display:block; width:100%; height:auto; }

  /* Programs: new header + facility break band + amenities */
  .herobg-fronthall{ background-image:url(data:image/jpeg;); background-size:cover; background-position:center; }
  .pg-proghead{ display:flex; justify-content:space-between; align-items:center; gap:28px; flex-wrap:wrap; margin-bottom:14px; }
  .pg-proghead>div{ flex:1 1 auto; }
  .pg-proghead .s-sechead{ margin-bottom:0; }
  .pg-proghead .s-cta{ flex:0 0 auto; }
  /* facility break band */
  .pg-break{ background:var(--m-dark); }
  .pg-break .in{ padding-top:0 !important; padding-bottom:0 !important; }
  .pgb-2{ display:grid; grid-template-columns:1fr 1fr; }
  .pgb-shot{ margin:0; position:relative; height:clamp(240px,32vw,420px); background-size:cover; background-position:center; }
  .pgb-shot figcaption{ position:absolute; left:0; bottom:0; right:0; padding:34px 26px 18px; font-family:var(--sans); font-size:.62rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#F4E9DF; background:linear-gradient(0deg,rgba(0, 0, 0, .7),transparent); }
  /* amenities */
  .pg-amen{ background:var(--m-lime); }
  .amn-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px 26px; margin-top:8px; }
  .amn-photo{ aspect-ratio:4/3; background-size:cover; background-position:center; border-radius:4px; margin-bottom:16px; box-shadow:0 8px 26px rgba(37, 42, 6, .14); }
  .amn-card h3{ font-family:var(--disp); font-weight:400; font-size:1.24rem; color:var(--m-ink); margin:0 0 9px; }
  .amn-card p{ font-family:var(--sans); font-size:.93rem; line-height:1.72; color:var(--m-ink); margin:0; }
  @media(max-width:820px){ .amn-grid{ grid-template-columns:1fr 1fr; } }
  @media(max-width:520px){ .amn-grid{ grid-template-columns:1fr; } }
  .pgb-shot.herobg-fireplace{ background-size:cover; background-position:center; }
  .amn-exterior{ background-image:url(data:image/jpeg;); }
  .amn-dining{ background-image:url(data:image/jpeg;); }
  .amn-gym{ background-image:url(data:image/jpeg;); }
  .amn-yoga{ background-image:url(data:image/jpeg;); }
  .amn-sauna{ background-image:url(data:image/jpeg;); }

  /* Programs: founder reels band */
  .pg-reels{ background:var(--m-river); }
  .pg-reels2{ display:grid; grid-template-columns:1fr 1fr; gap:52px; max-width:820px; }
  @media(max-width:720px){ .pg-reels2{ grid-template-columns:1fr; gap:20px; } }

  /* Heritage Navy: primary CTA = brass/gold plate with navy text */
  .s-cta{ border-color:#E6D5B0 !important; }

  /* Programs: proper vertical breathing room on the added bands (were falling back to 0 padding) */
  .pg-reels .in, .pg-amen .in, .pg-member .in{
    padding-top:var(--sec-lg); padding-bottom:var(--sec-lg); }

  

  /* Phone shows the actual alumni-app login crest (real logo.png) */
  .lgn-crest{ mix-blend-mode:multiply !important; filter:none !important; width:120px !important; margin-bottom:6px; }
  .amn-rooms{ background-image:url(data:image/jpeg;); }

  /* break band: full-bleed edge-to-edge photos, no border/gap */
  .pg-break .in{ padding-left:0 !important; padding-right:0 !important; max-width:none !important; }
  .pgb-2{ gap:0 !important; }

  /* Type system: Cormorant Garamond display (large=all caps), Libre Franklin body */
  body{ font-family:var(--sans); }
  /* Display serif for SECTION-level headings only. h3-h6 are component
     titles (card labels, step names) and belong to the body grotesque:
     Cormorant at 14-17px is too thin to hold, and its oldstyle figures
     rendered "1-on-1" as "I-on-I". This blanket rule was silently killing
     eight card components that had already been authored as var(--sans). */
  h1,h2,h3{ font-family:var(--disp) !important; }
  h1,h2,h3,.s-sechead,.s-h1{ text-transform:uppercase !important; letter-spacing:.015em; }
  h3,h5,h6{ text-transform:none !important; }
  p,li,.pg-lead,.s-sub,.ct-line,.ct-band-head p,.day-card p,.amn-card p,.pillar p,.faq .ans,.pg-memcopy>p,blockquote{ font-family:var(--sans) !important; }
  .s-quote{ font-family:var(--disp) !important; font-style:normal !important; text-transform:none !important; }

  /* ===== Adaptive CTAs: cream on dark, deep teal on cream, gold as accent ===== */
  .s-cta{ background:#1F2305 !important; color:#F4E9DF !important; border:1px solid #1F2305 !important; }
  
  .s-hero .s-cta, .hw-hero .s-cta, .ap-hero .s-cta, .s-amen .s-cta, .s-adm .s-cta, .s-mem .s-cta, .pg-member .s-cta, .pg-break .s-cta, .s-diff .s-cta, .s-tourclose .s-cta{ background:#F4E9DF !important; color:#1F2305 !important; border-color:#F4E9DF !important; }
  .s-hero .s-cta:hover, .hw-hero .s-cta:hover, .ap-hero .s-cta:hover, .s-amen .s-cta:hover, .s-adm .s-cta:hover, .pg-member .s-cta:hover, .s-diff .s-cta:hover, .s-tourclose .s-cta:hover{ background:#FFFFFF !important; border-color:#FFFFFF !important; color:#1F2305 !important; }
  .s-cta2{ background:transparent !important; color:#664D22 !important; border:1px solid #664D22 !important; }
  .s-hero .s-cta2, .hw-hero .s-cta2, .ap-hero .s-cta2, .s-amen .s-cta2, .pg-member .s-cta2, .pg-break .s-cta2{ color:#E6D5B0 !important; border-color:#E6D5B0 !important; }
  /* .s-adm sits on mid-olive: grass would be 3.71:1, use cream (8.5:1) */
  .s-adm .s-cta2{ color:#F4E9DF !important; border-color:rgba(244, 233, 223, .55) !important; }
  
  .nav-cta{ background:transparent !important; color:#E6D5B0 !important; border:1px solid #E6D5B0 !important; }

  /* legibility: eyebrows/captions sitting on photos or video -> light, not terracotta */
  .s-hero .s-eyebrow, .hw-hero .s-eyebrow, .ap-hero .s-eyebrow,
  .s-hero .s-secmark, .hw-hero .s-secmark, .ap-hero .s-secmark{
    color:#F4E9DF !important; text-shadow:0 1px 8px rgba(31, 35, 5, .55); }
  .le-reel .cap span{ color:#E6D5B0 !important; }
  /* button hover — light up (bg + lift, avoids the filter/transform disable rule) */
  .s-cta, .s-cta2, .nav-cta{ transition:background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease !important; }
  .s-cta:hover{ background:#46521A !important; border-color:#46521A !important; color:#F4E9DF !important; box-shadow:0 7px 22px rgba(70, 82, 26, .30) !important; }
  .s-hero .s-cta:hover, .hw-hero .s-cta:hover, .ap-hero .s-cta:hover, .s-amen .s-cta:hover, .s-adm .s-cta:hover, .pg-member .s-cta:hover, .pg-break .s-cta:hover{
    background:#FFFFFF !important; border-color:#FFFFFF !important; color:#1F2305 !important; box-shadow:0 7px 24px rgba(0, 0, 0, .32) !important; }
  .s-cta2:hover{ background:#664D22 !important; border-color:#664D22 !important; color:#F4E9DF !important; }
  .s-hero .s-cta2:hover, .hw-hero .s-cta2:hover, .ap-hero .s-cta2:hover, .s-amen .s-cta2:hover, .s-adm .s-cta2:hover, .pg-member .s-cta2:hover, .pg-break .s-cta2:hover{
    background:#E6D5B0 !important; border-color:#E6D5B0 !important; color:#1F2305 !important; }
  .nav-cta:hover{ background:#664D22 !important; border-color:#664D22 !important; color:#F4E9DF !important; box-shadow:0 5px 16px rgba(0, 0, 0, .25) !important; }

  /* ===== Readability: Cormorant body sized up + weight 500 ===== */
  body{ font-size:18px; }
  p, li{ font-family:var(--sans); font-weight:500; }

  .s-p p, .amn-card p, .day-card p, .pillar p, .infocard p, .about-card p, .hw-tcard p, .le-note{ font-size:1.16rem !important; line-height:1.6 !important; font-weight:500 !important; }

  .ct-band-head p{ font-size:1.18rem !important; font-weight:500 !important; }
  
  .pg-memlist li{ font-size:1.10rem !important; font-weight:500 !important; }
  .ct-line, .ct-rows div{ font-size:1.10rem !important; font-weight:500 !important; }

  .s-secmark, .s-eyebrow{ font-size:.72rem !important; }
  .ct-form label{ font-size:.74rem !important; }
  .s-link{ font-size:.80rem !important; }
  .s-trust span{ font-size:.74rem !important; }

  /* ===== COMPREHENSIVE readability pass — every Cormorant body selector sized up ===== */
  .s-am p, .about-card p, .tl-step p, .s-step p, .clin-item p, .s-card p, .tm-bio p, .d-card p,
  .infocard p, details.pack .pack-body, .astep p, .team-note p, .ct-success p, .hw-after p,
  .s-mem .memhead p, .tm-modal-bio p, .s-p p, .amn-card p, .day-card p, .pillar p, .hw-tcard p,
  .ct-band-head p, .ask div, .d-reply{
    font-size:1.16rem !important; line-height:1.62 !important; font-weight:500 !important;
  }
  .hw-hero p, .ap-hero p, .pg-opener p, .hw-split p, .s-intro p{
    font-size:1.22rem !important; line-height:1.56 !important; font-weight:500 !important;
  }
  .led li, .pg-memlist li, .clin-item li, .about-card li{ font-size:1.13rem !important; line-height:1.55 !important; font-weight:500 !important; }
  .faq .ans{ font-size:1.18rem !important; line-height:1.68 !important; font-weight:500 !important; }
  .faq summary{ font-size:1.28rem !important; font-weight:500 !important; }
  .pg-memcopy>p{ font-size:1.24rem !important; line-height:1.66 !important; font-weight:500 !important; }
  .s-sub{ font-size:1.34rem !important; line-height:1.5 !important; font-weight:500 !important; }
  .pg-lead{ font-size:1.4rem !important; line-height:1.62 !important; font-weight:500 !important; }
  .lede{ font-size:1.3rem !important; font-weight:500 !important; }
  /* secondary / credential lines (a touch smaller, still legible) */
  .tm-cred, .pg-sub, .tm-modal-cred, .team-note .role{ font-size:1.04rem !important; line-height:1.5 !important; font-weight:500 !important; }
  .d-card .ifno, .d-type div:last-child{ font-size:1.0rem !important; }
  .ct-note{ font-size:1.04rem !important; font-weight:500 !important; }
  .hero-immediacy{ font-weight:500 !important; }
  .ct-form input, .ct-form select, .ct-form textarea{ font-size:1.06rem !important; }

  /* inline emphasis inherits its paragraph size (was stuck at 12-14px) */
  p em, li em, .ans em, .s-intro p em, blockquote em{ font-size:inherit !important; }
  p b, li b, .ans b, .s-intro p b, .pg-memcopy>p b{ font-size:inherit !important; font-weight:700 !important; }
  .hero-immediacy{ font-size:1.12rem !important; }
  .tm-cred, .tm-modal-cred{ font-size:1.06rem !important; }

  /* ===== Nav: larger + tighter tracking (was small and over-spaced) ===== */
  .s-links span{ font-size:15px !important; letter-spacing:.04em !important; font-weight:500 !important; }
  .s-links{ gap:26px !important; }
  .s-brand span{ font-size:18.5px !important; letter-spacing:.10em !important; font-weight:500 !important; }
  .nav-phone{ font-size:14.5px !important; letter-spacing:.03em !important; }
  .nav-cta{ font-size:12.5px !important; padding:13px 24px !important; letter-spacing:.1em !important; }
  .navlogo{ width:50px !important; height:50px !important; }
  .s-nav .in{ padding-top:22px !important; padding-bottom:24px !important; }

  /* nav link/phone/cta size — higher specificity to beat .sitehead rules */
  .s-nav .in .s-links span, .sitehead .s-links span, .sitehead .in .s-links span{ font-size:15px !important; letter-spacing:.03em !important; font-weight:500 !important; }
  .s-nav .in .nav-phone, .sitehead .nav-phone{ font-size:14.5px !important; letter-spacing:.02em !important; }
  .s-nav .in .nav-cta, .sitehead .nav-cta{ font-size:12.5px !important; padding:13px 24px !important; }

  /* nav: drop redundant phone (phone shows in every hero + CTA leads to contact) — frees width for larger links */
  .s-nav .nav-phone, .sitehead .nav-phone{ display:none !important; }

/* ===== header: bigger + bolder wordmark (user request) ===== */
.s-nav .in .s-brand span, .sitehead .s-brand span{
  font-size:22px !important;
  font-weight:700 !important;
  letter-spacing:.03em !important;
}
/* nav links a touch bolder to match the heavier wordmark */
.s-nav .in .s-links span, .sitehead .s-links span{
  font-weight:600 !important;
  letter-spacing:.02em !important;
}
/* reclaim width so the full nav fits on more screens */
.s-nav .in .s-links{ gap:22px !important; }

/* logo is the anchor — make it properly prominent (overrides the whole cascade) */
.s-nav .in .s-brand .navlogo, .sitehead .s-brand .navlogo{
  height:64px !important;
  width:64px !important;
}
.s-foot .col .navlogo, .s-foot .navlogo{
  height:52px !important;
  width:52px !important;
}
@media (max-width:560px){
  .s-nav .in .s-brand .navlogo, .sitehead .s-brand .navlogo{ height:48px !important; width:48px !important; }
}

/* footer type was tiny relative to the rest of the site — size it up */
.s-foot .col{ font-size:1.12rem !important; line-height:1.65 !important; }
.s-foot .col b{ font-size:.92rem !important; letter-spacing:.13em !important; margin-bottom:13px !important; }
.s-foot .seal{ font-size:.8rem !important; padding:8px 14px !important; }
@media (max-width:560px){
  .s-foot .col{ font-size:1.05rem !important; }
}

/* =========================================================================
   TYPOGRAPHY AUDIT — luxury-grade consolidation (teal/gold master only)
   Corrects size drift accumulated across prior edit passes.
   ========================================================================= */

/* CTAs / buttons — were rendering ~10.6px (far too small for premium CTAs) */
.s-cta, .s-cta2,
.s-intro .s-cta, .s-intro .s-cta2,
.lgn-btn, .phone .lgn-btn{
  font-size:13.5px !important;
  letter-spacing:.1em !important;
}
.tour-cta, .util-phone{ font-size:13px !important; letter-spacing:.08em !important; }

/* eyebrows / kickers — quiet, wide-tracked, but legible (were 10.2–11.5px) */
.s-secmark, .s-eyebrow, .pg-kicker, .ct-secmark{
  font-size:12.5px !important;
  letter-spacing:.22em !important;
}

/* small labels — raise the floor (were 8.6–10.2px, sub-luxury) */
.tm-role, .tm-more{ font-size:12px !important; letter-spacing:.05em !important; }
.liv, .phonelbl, .lgn-forgot, .figcaption{ font-size:11.5px !important; }
figcaption{ font-size:11.5px !important; }
.dur, .day-time{ font-size:11px !important; letter-spacing:.04em !important; }

/* FAQ category dividers — were a broken 11.2px; make a clean small-caps kicker */
.faqcat-h{
  font-size:15px !important;
  text-transform:uppercase;
  letter-spacing:.14em !important;
  font-weight:600 !important;
}

/* card headings — unify the undersized ones (hw-tcard were 16.8px x118) */
.hw-tcard h3, .clin-item h3, .infocard h3, .bd h3{ font-size:20px !important; }

/* section head consistency — the lone 27px outlier up to its 35–37px siblings */
.copy h2{ font-size:36px !important; }

/* sub-notes / credential lines (were 16.6px) */
.pg-sub, .ct-note{ font-size:17.5px !important; }

/* lead / intro tier — unify the near-identical 20.8 / 21.4 / 22.4 */
.pg-lead, .lede, .s-sub{ font-size:21.5px !important; line-height:1.55 !important; }

/* ===== WP theme adaptations — mock used <span data-goto>; theme uses real <a> ===== */
.s-brand{ text-decoration:none; color:inherit; }
.s-links a{ text-decoration:none; color:inherit; display:inline-flex; align-items:center; }
.s-foot .col a{ color:inherit; text-decoration:none; }
.s-foot .col a:hover{ color:var(--m-brassL); }
.util-phone, .nav-phone{ text-decoration:none; }
/* self-hosted CARF badge keeps its size */
.util-left img{ height:18px; width:auto; vertical-align:middle; }

/* ===================================================================
   Contact Form 7 -> mock `.ct-form` bridge
   The mock's .ct-form rules target bare <input>/<select>/<textarea>; CF7 wraps
   each control in <span class="wpcf7-form-control-wrap">. Making that wrapper a
   block lets the mock's width:100% inputs fill their label. Everything else here
   just dresses CF7's own validation / response / consent chrome to match.
   =================================================================== */
.ct-form .wpcf7-form-control-wrap{ display:block; }

/* Field-level validation tip beneath an invalid control */
.ct-form .wpcf7-not-valid-tip{
	display:block; margin-top:6px;
	font-family:var(--sans); font-size:.72rem; font-weight:600;
	letter-spacing:.02em; text-transform:none; color:#B23A2E;
}
.ct-form input.wpcf7-not-valid,
.ct-form select.wpcf7-not-valid,
.ct-form textarea.wpcf7-not-valid{
	border-color:#C0554B; box-shadow:0 0 0 3px rgba(102, 77, 34, .12);
}

/* Form-level response line (success / error) */
.ct-form .wpcf7-response-output{
	margin:20px 0 0; padding:13px 15px; border-radius:4px;
	border:1px solid var(--line); background:#FFFFFF;
	font-family:var(--sans); font-size:1rem; line-height:1.5; color:var(--m-ink);
	letter-spacing:normal; text-transform:none;
}
.ct-form form.sent .wpcf7-response-output{ border-color:#52573D; background:#FFFFFF; }
.ct-form form.invalid .wpcf7-response-output,
.ct-form form.failed .wpcf7-response-output{ border-color:#C0554B; background:#FBF1EF; }
/* Hide CF7 chrome ourselves so it never shows even if CF7's own CSS isn't loaded:
   the a11y mirror, and the empty response line before a submission. */
.ct-form .screen-reader-response{
	position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
	overflow:hidden; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); white-space:nowrap;
}
/* CF7's hidden-input fieldset would otherwise show the browser's default fieldset box. */
.ct-form .hidden-fields-container{ display:none; }
.ct-form form.init .wpcf7-response-output,
.ct-form form.resetting .wpcf7-response-output{ display:none; }

/* Ajax spinner sits inline after the submit button */
.ct-form .wpcf7-spinner{ margin:0 0 0 12px; vertical-align:middle; }

/* SMS-consent (acceptance) -> the mock's inline flex checkbox row */
.ct-form .wpcf7-acceptance .wpcf7-list-item{ margin:0; }
.ct-form .wpcf7-acceptance label{
	display:flex; gap:10px; align-items:flex-start; margin-top:14px;
	font-family:var(--sans); font-size:.92rem; line-height:1.5; font-weight:400;
	letter-spacing:normal; text-transform:none; color:var(--m-ink);
}
.ct-form .wpcf7-acceptance input[type=checkbox]{
	display:inline-block; width:auto; margin:4px 0 0; flex:0 0 auto;
}
.ct-form .wpcf7-list-item-label{ font-family:var(--sans); }

/* ===================================================================
   Linked cards. The mock renders these as JS-nav <div>s (no underline);
   in WordPress they are real <a> elements (better for SEO + keyboard access),
   so strip the default anchor underline to match the mock exactly.
   =================================================================== */
a.hw-tcard, a.hw-tcard:hover, a.hw-tcard h3, a.hw-tcard p{ text-decoration: none; }

/* ===================================================================
   Tour band: ambient sizzle loop + a centered "Watch the full tour"
   button that swaps in the full self-hosted walkthrough on click.
   =================================================================== */
.tour-band{ position:relative; }
.tour-band .tour-play{
	position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
	width:auto; height:auto;   /* override the generic 26px .tour-play so the pill fits its label */
	/* The pill is absolutely centred with width:auto and white-space:nowrap, so a
	   long label does not wrap — it grows past the viewport and takes the page
	   with it. Measured at 375px: Rodman's button is 344px and Lake Street's 355px,
	   i.e. 20-31px of headroom, and a longer label overflowed by 42px (caught as
	   H-OVERFLOW + 2 CLIPPED). Cap it and allow a wrap so relabelling can never
	   reintroduce that. */
	max-width:calc(100% - 24px);
	display:inline-flex; align-items:center; gap:10px; white-space:normal;
	text-align:center;
	background:rgba(31, 35, 5, .62); color:#F4E9DF;
	border:1px solid rgba(255, 255, 255, .55); border-radius:999px;
	padding:14px 26px; cursor:pointer; z-index:2;
	font-family:var(--sans); font-size:.8rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
	-webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
	transition:background .2s ease, transform .2s ease;
}
.tour-band .tour-play:hover{ background:rgba(31, 35, 5, .82); transform:translate(-50%,-50%) scale(1.04); }
.tour-band .tour-play:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }
.tour-band .tour-play .tour-play-i{ font-size:1rem; line-height:1; }
.tour-band .tour-play em{ font-style:normal; font-weight:400; opacity:.82; }
.tour-band.is-playing .tour-vid{ max-height:none; }

/* ===================================================================
   WP admin bar: the site header is fixed/sticky at top:0, so when an
   admin is logged in the 32px admin bar overlaps it and clips the logo.
   Offset the header below the admin bar (46px on the mobile bar width).
   =================================================================== */
body.admin-bar .sitehead{ top:32px; }
@media screen and (max-width:782px){ body.admin-bar .sitehead{ top:46px; } }

/* ===================================================================
   Homepage refinements (client requests)
   =================================================================== */
/* #1 — Arrival: play button centered over the video; CTA text button stays below */
.arrival-play{
	position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
	width:78px; height:78px; border-radius:50%; z-index:2; cursor:pointer;
	background:rgba(0, 0, 0, .42); border:1.5px solid rgba(244, 233, 223, .82);
	display:flex; align-items:center; justify-content:center;
	-webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
	transition:background .25s ease, transform .25s ease;
}
.arrival-play:hover{ background:rgba(0, 0, 0, .64); transform:translate(-50%,-50%) scale(1.06); }
.arrival-play:focus-visible{ outline:2px solid var(--m-brassL); outline-offset:4px; }
.arrival-play i{ width:0; height:0; border-style:solid; border-width:12px 0 12px 20px; border-color:transparent transparent transparent #F4E9DF; margin-left:5px; }

/* #2 — Admissions: align the 1·2·3 at the top; softer gradient background */
.s-adm{ background:linear-gradient(158deg, var(--m-green) 0%, var(--m-dark) 100%) !important; }
.s-steps{ align-items:start !important; }
.s-steps > div:last-child{ align-self:center; }   /* keep the contact CTA vertically centered */

/* #3 — FAQ band: family support as its own prominent callout */
.faq-fam{
	margin-top:32px; box-sizing:border-box;
	display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
	background:#F4E9DF; border:1px solid rgba(230, 213, 176, .3); border-left:4px solid var(--m-brass);
	border-radius:6px; padding:26px 30px;
}
.faq-fam-t b{ display:block; font-family:var(--disp); font-weight:400; font-size:1.5rem; line-height:1.15; color:var(--m-ink); margin:0 0 8px; }
.faq-fam-t p{ font-family:var(--sans); font-size:1.02rem; line-height:1.55; color:var(--m-soft); margin:0; max-width:56ch; }
.faq-fam-btn{ flex:0 0 auto; white-space:nowrap; }
@media (max-width:680px){ .faq-fam{ flex-direction:column; align-items:flex-start; padding:22px; } }
/* "For families" as its own band (moved up the page, before the admissions section) */
.s-family{ background:linear-gradient(158deg, var(--m-green) 0%, var(--m-dark) 100%); border-top:1px solid rgba(230, 213, 176, .22); }   /* teal gradient — cream family card pops on the dark band */

/* Indigenous Programming CTA band (Home / About / Programs / What We Help With)
   Lightened + split layout: copy left, Twelve Mile Creek image right. */
.s-indcta{ background:var(--m-river); border-top:1px solid rgba(230, 213, 176, .3); }
.s-indcta .in{ display:grid; grid-template-columns:1.05fr .95fr; gap:46px; align-items:center; max-width:1120px; padding-top:var(--sec-md); padding-bottom:var(--sec-md); text-align:left; }
.s-indcta .indcta-text{ min-width:0; }
.s-indcta .s-secmark{ color:var(--m-brass); }
.s-indcta .s-sechead{ color:var(--m-ink); margin:8px 0 14px; }
.s-indcta .lede{ color:var(--m-soft); margin:0 0 24px; text-align:left; max-width:52ch; }
.s-indcta .indcta-img{ height:340px; background-size:cover; background-position:center; border-radius:8px; box-shadow:0 14px 34px rgba(31, 35, 5, .2); }
@media (max-width:820px){
  .s-indcta .in{ grid-template-columns:1fr; gap:26px; }
  .s-indcta .indcta-img{ height:220px; }
}
.s-family .in{ max-width:920px; padding-top:var(--sec-md); padding-bottom:var(--sec-md); }
.s-family .faq-fam{ margin-top:0; }

/* ===================================================================
   GLOBAL CTA HOVER (standing rule) — every inquire button lifts + shadows
   and animates smoothly on hover, so it reads as clickable and stands out.
   Any CTA using .s-cta / .s-cta2 / .nav-cta / .tour-cta inherits this
   automatically — site-wide today and for anything added later.
   =================================================================== */
.s-cta, .s-cta2, .nav-cta, .tour-cta{
	display:inline-flex; align-items:center; justify-content:center;
	transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .22s ease, transform .16s ease !important;
}
@media (hover:hover){
	.s-cta:hover, .s-cta2:hover, .nav-cta:hover, .tour-cta:hover{
		transform: translateY(-3px) !important;
		box-shadow: 0 10px 26px rgba(230, 213, 176, .42) !important;   /* brass glow — reads on dark AND light */
	}
	.s-cta:active, .s-cta2:active, .nav-cta:active, .tour-cta:active{
		transform: translateY(-1px) !important;
		box-shadow: 0 4px 12px rgba(230, 213, 176, .32) !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   TYPE PASS — reference type system (Longlane / Client-First ladder)
   Structure borrowed: serif DISPLAY + sans BODY, display set large,
   light, uppercase, with negative tracking and line-height 1.0.
   Their faces (Carta Nueva / TWK Lausanne) are commercial and are NOT
   used; Cormorant Garamond (OFL, already self-hosted) is the display
   stand-in, Libre Franklin (OFL) the grotesque body.
   Their display weights are 100–200; we hold 400+ for legibility.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --t-display:clamp(2.5rem, 5.2vw, 4rem);      /* ref .text-size-64px / .spa_heading */
  --t-h1:clamp(2.25rem, 4.6vw, 3.375rem);      /* ref .h2_big 3.375rem              */
  --t-h2:clamp(1.875rem, 3.6vw, 2.5rem);       /* ref .heading-style-h2 2.5rem      */
  --t-h3:1.5rem;                               /* ref .heading-style-h3             */
  --t-lead:1.25rem;                            /* ref .text-size-large              */
  --t-body:1rem;
  --t-label:.75rem;
  --tr-display:-.02em;                         /* ref -1 to -3px, scaled            */
}

/* Display + section heads: the signature treatment */
.site .s-h1,
.site .hw-hero h1,
.site .ap-hero h1,
.site .ct-hero h1,
.site .pg-opener h1{
  font-family:var(--disp);
  font-size:var(--t-display) !important;
  font-weight:400;
  line-height:1 !important;
  letter-spacing:var(--tr-display);
  text-transform:uppercase;
}
.site .s-sechead,
.site .hw-split h2,
.site .memhead h3,
.site .hw-after h3,
.site .arrival-in h2{
  font-family:var(--disp);
  font-size:var(--t-h1) !important;
  font-weight:400;
  line-height:1.02 !important;
  letter-spacing:var(--tr-display);
  text-transform:uppercase;
}
/* Large pull-quotes stay serif-display (reference keeps serif for editorial voice) */
.site .s-quote{ font-family:var(--disp); font-weight:400; letter-spacing:-.01em; }

/* Body ladder — sans, generous leading (reference body LH ≈1.6–1.7) */
.site .pg-lead, .site .s-intro p, .site .hw-split p{
  font-size:var(--t-lead); line-height:1.65;
}
.site .pg-sub, .site .hw-tcard p, .site .s-card p{ line-height:1.65; }

/* Card headings: sans, small, quiet — hierarchy comes from scale not weight */
.site .hw-tcard h3{ font-family:var(--sans); font-size:1.0625rem; font-weight:600; letter-spacing:0; }

/* Micro-labels: keep OUR wider tracking (.2em beats their -.26px at small sizes) */
.site .s-secmark, .site .s-eyebrow{
  font-family:var(--sans); font-size:var(--t-label); font-weight:600; letter-spacing:.2em; text-transform:uppercase;
}
/* Buttons: reference uses weight 400, not bold */
.site .s-cta, .site .s-cta2{ font-weight:600 !important; }

/* Brand lockup keeps the display serif: the sans body-swap made the wordmark
   ~20% wider and it clipped at 375px. Cormorant is narrower per character. */
.site .s-brand span{ font-family:var(--disp) !important; }
.site .s-foot .f-brand, .site .foot-brand{ font-family:var(--disp); }
/* ── A11Y FIXES from the full 33-page audit ─────────────────────────────
   Verified with computed-style contrast + hit-area measurement.        */
/* Labels sitting over the arrival video need the same treatment as hero
   labels (grass on moving footage was unreadable). */
.site .arrival .s-secmark, .site .arrival .s-eyebrow, .site .arrival-in .s-secmark{
  color:#F4E9DF !important; text-shadow:0 1px 10px rgba(0, 0, 0, .62);
}
/* Mobile menu button: was 34px tall, needs a 44px minimum hit area. */
.site .nav-toggle{ min-height:44px; min-width:44px; box-sizing:border-box; }
/* Standalone (non-inline) links: WCAG 2.5.8 minimum 24px target. */
.site .util-phone{ display:inline-flex; align-items:center; min-height:24px; }
.site .s-foot a, .site .foot-bar a{ display:inline-flex; align-items:center; min-height:24px; }
.site .s-links a{ min-height:44px; display:inline-flex; align-items:center; }

/* ── Label colour must follow section polarity ──────────────────────────
   Templates inline `color:var(--m-brassL)` on .s-secmark regardless of
   whether the section is light or dark. brassL (new-grass) is the ON-DARK
   accent: on marble it is 1.90:1 and on the creme band 1.45:1. Default to
   the on-light accent and re-grant brassL only to genuinely dark sections.
   !important is required to beat the inline styles.                     */
.site .s-secmark, .site .s-eyebrow{ color:var(--m-brass) !important; }
.site .s-hero .s-secmark,   .site .hw-hero .s-secmark,  .site .ap-hero .s-secmark,
.site .arrival .s-secmark,  .site .s-amen .s-secmark,   .site .s-mem .s-secmark,
.site .s-diff .s-secmark,   .site .s-adm .s-secmark,    .site .s-tourclose .s-secmark,
.site .s-resteam .s-secmark,.site .pg-member .s-secmark,.site .pg-break .s-secmark,
.site .s-hero .s-eyebrow,   .site .hw-hero .s-eyebrow,  .site .ap-hero .s-eyebrow,
.site .arrival .s-eyebrow,  .site .s-amen .s-eyebrow,   .site .s-mem .s-eyebrow,
.site .s-diff .s-eyebrow,   .site .s-adm .s-eyebrow,    .site .s-tourclose .s-eyebrow{
  color:var(--m-brassL) !important;
}
/* Grass on the darker olive cards was 4.45:1 — one step lighter clears 4.5. */
.site .pillar .s-secmark, .site .memgrid .s-secmark{ color:#E6D5B0 !important; }

/* Play button sits on a light band: give it its own dark chip. */
.site .tour-play{ background:var(--m-dark) !important; color:#F4E9DF !important; border:1px solid var(--m-dark) !important; }
.site .tour-play em{ color:#F4E9DF !important; }

/* Standalone small links need a 24px target (WCAG 2.5.8). */
.site .s-link{ display:inline-flex; align-items:center; }

/* FIX regression: min-width:44px on the toggle overflowed the 375px header
   row. Let the brand shrink and keep the toggle inside the gutter. */
@media (max-width:820px){
  .site .s-nav .in{ flex-wrap:nowrap; gap:10px; }
  .site .s-brand{ min-width:0; }
  .site .s-brand span{ white-space:nowrap; }
  .site .nav-toggle{ flex:0 0 44px; margin-left:0 !important; }
}

/* Extend label-polarity to the remaining accent users: card arrows and small
   links inherited the on-dark accent on light cards (1.45–1.90:1). */
.site .tpl-arrow{ color:var(--m-brass) !important; }
/* .s-link's colour now comes from --slink-fg so the hover state can swap it.
   The !important stays because it was already load-bearing (it fixed a
   1.45:1 accent inherited onto light cards); the fallback keeps the old
   behaviour for any .s-link that somehow never gets the variable. */
.site .s-link{ color:var(--slink-fg, var(--m-brass)) !important; }
.site .s-amen .tpl-arrow, .site .s-mem .tpl-arrow, .site .s-diff .tpl-arrow{
  color:var(--m-brassL) !important;
}
/* Same swap for the on-dark links — value comes from --slink-fg, which the dark
   context below sets to brassL and the hover state flips to ink. */
.site .s-hero .s-link, .site .hw-hero .s-link, .site .ap-hero .s-link,
.site .s-amen .s-link, .site .s-mem .s-link, .site .s-diff .s-link,
.site .s-adm .s-link, .site .s-tourclose .s-link, .site .pg-member .s-link{
  color:var(--slink-fg, var(--m-brassL)) !important;
}
/* .s-mem's inner cards sit on a lighter olive: grass was 4.45:1. */
.site .s-mem .s-secmark{ color:#E6D5B0 !important; }

/* Control hit areas: WCAG 2.5.5 target size for real buttons. */
.site .team-filter button{ min-height:44px; }
.site .tm-more{ min-height:44px; }
.site .phone .lgn-btn{ min-height:44px; }
.site .phone input, .site .ct-form input, .site .ct-form select, .site .ct-form textarea{ min-height:44px; }
.site .s-link{ min-height:26px; }

/* Brand wordmark sits over hero photography/video: give it the same shadow
   the other over-media text carries, so it stays legible on light frames. */
.site .s-brand span{ text-shadow:0 1px 10px rgba(0, 0, 0, .55); }

/* Final target-size sweep: phone links measured 22–23.5px (rounds to 24 but
   is under the 24px WCAG 2.5.8 minimum) and the packing-list summary 19px. */
.site a[href^="tel:"], .site .s-call, .site .util-phone{ display:inline-flex; align-items:center; min-height:26px; }

/* Phone links to the 44px house rule on touch pointers.
   The 26px above cites WCAG 2.5.8, which is the AA MINIMUM (24x24); this
   project's own standard is >=44px for controls, and a phone link is the
   control that matters most here — 65% of sessions are mobile and 84% of key
   events come from mobile. Measured before this rule: hero and in-page phone
   links rendered 25-31px, including ones in the first screen.
   Keyed on WIDTH as well as pointer, deliberately. A `(pointer:coarse)`-only
   query is invisible to this project's harness — the audit runs in a desktop
   iframe, so resizing it never changes the pointer type and the rule silently
   never applies while appearing to be there. Width is both testable and the
   case that matters; the coarse-pointer arm additionally catches touch laptops
   and large tablets.
   Applied to phone links only — not every small link — so body copy is
   unaffected. `.util-phone` is display:none below 560px either way. */
@media (max-width:900px), (pointer:coarse){
	.site a[href^="tel:"], .site .s-call, .site .trust-tel,
	/* The home hero's phone carries `.site .s-hero .s-trust .trust-tel`
	   {min-height:24px} at (0,4,0). A plain `.site .trust-tel` (0,2,0) loses to
	   it silently — measured computed min-height stayed 24px while the rule
	   looked present. Matched here rather than reaching for !important. */
	.site .s-hero .s-trust .trust-tel{
		min-height:44px; padding-block:4px;
	}
}
.site details.pack summary{ display:flex; align-items:center; min-height:26px; }
.site a[href^="mailto:"]{ display:inline-flex; align-items:center; min-height:26px; }

/* Wordmark: fit the full name on small screens rather than ellipsing it. */
@media (max-width:560px){
  .site .s-brand span{ font-size:.82rem !important; letter-spacing:.14em !important; }
  .site .s-brand img.navlogo{ width:44px; height:44px; }
}
@media (max-width:400px){
  .site .s-brand span{ font-size:.72rem !important; letter-spacing:.10em !important; }
}
/* Font is now small enough to fit: stop clipping the wordmark. */
@media (max-width:820px){
  .site .s-brand{ overflow:visible; flex:0 1 auto; }
  .site .s-brand span{ overflow:visible; text-overflow:clip; }
}

/* ══════════════════════════════════════════════════════════════════════
   HOME HERO — centred, mirroring the reference's `.hero_component.homepage`
   (flex column, justify+align center, ~60–80svh, centred button group).
   Their INNER-page heroes are align-items:flex-start, so ours stay
   bottom-left; only the homepage centres.
   ══════════════════════════════════════════════════════════════════════ */
.site .s-hero{
  justify-content:center; align-items:center;
}
.site .s-hero .in{
  margin-top:0;
  display:flex; flex-direction:column;
  gap:2.25rem;                       /* reference gap */
  padding-top:var(--sec-lg); padding-bottom:var(--sec-lg);
}
/* Rely on the gap for rhythm, as the reference does. */
.site .s-hero .s-eyebrow, .site .s-hero .s-h1,
.site .s-hero .s-sub, .site .s-hero .s-ctas, .site .s-hero .s-trust{ margin:0; }
/* Narrow measure so the headline stacks into a tall centred block
   (reference uses a 21.25rem wrapper; ours is a longer headline). */
.site .s-hero .s-h1{ margin-inline:auto; text-wrap:balance; }
.site .s-hero .s-sub{ margin-inline:auto; }
.site .s-hero .s-eyebrow{ margin-inline:auto; }
   /* centre the brass rule */
.site .s-hero .s-ctas{ justify-content:center; }
.site .s-hero .s-trust{ justify-content:center; }

/* Centred text now sits over the BRIGHT middle of the photograph, so the
   bottom-up gradient is replaced with a centre-weighted scrim. This is the
   mechanism that lets our busy Victorian imagery carry centred type. */
.site .s-hero .scene.scrimonly::after{
  content:""; display:block; position:absolute; inset:0;
}
/* The "reading rail" is a holdover from the earlier mock, not part of the
   reference vocabulary, and reads as a stray 1px line beside the centred
   hero. Hidden. To restore: delete this one rule. */
.current-rail{ display:none !important; }

.site .s-hero .s-h1{ text-shadow:0 2px 30px rgba(0, 0, 0, .55), 0 1px 4px rgba(0, 0, 0, .35); }
.site .s-hero .s-sub{ text-shadow:0 1px 16px rgba(0, 0, 0, .5); }

/* ── HOME HERO, small screens ───────────────────────────────────────────
   The reference steps display type down hard (4rem → 3.35 → 2.2 → 1.9rem);
   ours was holding ~2.5rem at 375px, which pushed the headline to six lines
   and swamped the viewport. Mirror their ladder, strengthen the scrim
   (a bright frame beat the previous overlay), and stop the eyebrow running
   to the edge. */
@media (max-width:820px){
  
  .site .s-hero .s-h1{ font-size:2.2rem !important; line-height:1.04 !important; }
  .site .s-hero .s-sub{ font-size:1rem !important; line-height:1.55 !important; }
  .site .s-hero .s-eyebrow{ font-size:.62rem !important; letter-spacing:.14em !important; max-width:100%; }
  .site .s-hero .in{ gap:1.5rem; }
  /* the seal and its text label were overlapping */
  .site .s-hero .s-trust{ margin-bottom:8px; }
  .site .s-hero .hero-carf{ position:static !important; margin:4px auto 0 !important; display:block; width:64px; inset:auto !important; }
  .site .s-hero .hero-carf img{ width:64px; height:auto; display:block; margin:0 auto; }
}
@media (max-width:480px){
  .site .s-hero .s-h1{ font-size:1.95rem !important; }
  
}
/* .tour-cta measured 40px — control targets need 44px. */
.site .tour-cta{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }

/* ══════════════════════════════════════════════════════════════════════
   LONGLANE COMPOSITION PASS — derived from a forensic extraction of the
   reference stylesheet (see DESIGN-NOTES.md). Each block is independently
   revertible. Ranked cheapest-and-highest-impact first.
   ══════════════════════════════════════════════════════════════════════ */

/* ── RANK 1: Fill out the token ladders that already exist but are unused (alpha rungs, container rungs, rem measures, one photographic ratio) ── */
:root{
  /* Alpha rungs the ladder is missing. Existing at L37-48: dark 20/40/60/80, light 10/20. */
  --a-dark-00:rgba(31, 35, 5, 0);
  --a-dark-30:rgba(31, 35, 5, .30);
  --a-dark-50:rgba(31, 35, 5, .50);
  --a-dark-70:rgba(31, 35, 5, .70);
  --a-dark-90:rgba(31, 35, 5, .90);
  --a-light-30:rgba(255, 255, 255, .30);
  --a-light-50:rgba(255, 255, 255, .50);

  /* Light rungs off --m-lime #F4E9DF, so a caption can END on solid brand colour
     instead of on the photograph (their .places_block @479 does exactly this:
     linear-gradient(180deg,#f4e9df00 3%,#f4e9dfcc 30%,marble 63%)). */
  --a-lime-00:rgba(244, 233, 223, 0);
  --a-lime-85:rgba(244, 233, 223, .85);

  /* Container rungs. --container 1280px already equals their .container-large
     80rem, and .site .in already equals .padding-global 5% + that cap.
     These are the two rungs we are missing (their -medium 64rem / -small 48rem). */
  --container-md:1024px;
  --container-sm:768px;

  /* Text measures in rem, not ch. At the shipped 21.5px lede (theme.css:1437,
     Libre Franklin 1ch = .675em) `max-width:86ch` computes to 1248px — i.e. it
     does not constrain anything inside a 1280px container. */
  --meas-text:35rem;   /* 560px — their .max-width-560px, the workhorse */
  --meas-lead:48rem;   /* 768px — their widest text block of any kind    */

  /* ONE photographic ratio family. Verified with sips: all 23 files in
     media/facility-photos are 1200x802 (1.49626) and all 6 in media/lake-street
     are 4284x5712 (exactly 0.75). 3/2 costs 0.25% of height; the 4/3 boxes we
     ship today throw away 10.9% of the width and the 16/9 box 15.8% of height. */
  --ar-wide:3/2;
  --ar-tall:3/4;
  --ar-face:1;
}

/* ── RANK 2: Reduce centring from ten blocks to one: the closing CTA ── */
/* Their inner pages centre one thing. Ours centre ten. Mid-page bands go left;
   the .s-clin closers keep their centring — a terminal CTA is the ONE place the
   reference centres too. */
.site .s-resteam .in,
.site .s-careers .in,
.site .s-affil .in,
.site .hw-after .in,
.site .tour-lead .in{ text-align:left; }

.site .reels-sec .s-secmark,
.site .reels-sec .s-sechead,
.site .reels-sec .reels-intro,
.site .reels-cta{ text-align:left; margin-left:0; margin-right:0; }

.site .s-mem .memhead,
.site .s-mem .memhead .s-secmark,
.site .s-mem .memcta{ text-align:left; }
.site .s-mem .memhead{ margin-left:0; margin-right:0; max-width:34ch; }

.site .s-resteam .s-sechead,
.site .s-careers .s-sechead,
.site .s-resteam .lede,
.site .s-careers .careers-lead,
.site .hw-after h3,
.site .hw-after p{ text-align:left; margin-left:0; margin-right:0; }

/* Icon cards left-aligned, matching our own .day-card which already is. */
.site .diff-card{ text-align:left; padding:0; }
.site .diff-ico{ margin:0 0 var(--s-4); }

/* about-approach.php L12-14 and home-affil.php L8 carry inline
   style="text-align:center", which beats any non-important author rule.
   !important at (0,3,0) is the only way to win without editing the templates. */
.site .s-diff .s-secmark,
.site .s-diff .s-sechead,
.site .s-diff .pg-sub,
.site .s-affil .pg-sub{
  text-align:left !important;
  margin-left:0 !important; margin-right:0 !important;
}
/* the affiliation LOGO row stays centred — a wrapping logo strip is not a head */
.site .affil-row{ justify-content:center; }

/* The one surviving centred moment gets one measure (their 40.125rem -> 40rem). */
.site .ct-band-head{ text-align:center; max-width:40rem; margin:0 auto var(--s-6); }

/* The seven closers currently declare five different caps (760/820/840/860/920px).
   Only the closers carry inline style="text-align:center" on .in, so this
   attribute selector hits exactly them and leaves legal-privacy.php's
   .s-clin .in[style*="text-align:left"] alone. */
.site .s-clin .in[style*="text-align:center"],
.site .s-tourclose .in{ max-width:calc(40rem + 2 * var(--gutter)); }

/* ── RANK 3: Put the eyebrow → head → body rhythm on the spacing scale and plug the .pg-lead UA-margin leak ── */
/* L806 `.s-secmark,.s-eyebrow{margin-bottom:20px !important}` is (0,1,0);
   L805 `.s-sechead{margin-bottom:34px !important}` is (0,1,0).
   `.site` + !important is (0,2,0) and wins on specificity, not source order. */
.site .s-secmark, .site .s-eyebrow{ margin-bottom:var(--s-6) !important; }   /* 20 -> 32 */
.site .s-sechead{ margin-top:0 !important; margin-bottom:var(--s-7) !important; } /* 34 -> 48 */

/* The UA-margin leak. */
.site .pg-lead{ margin-top:0; margin-bottom:var(--s-7); }
.site .pg-progcopy .pg-lead{ margin-bottom:0; }   /* preserve L494's intent */

/* One lede interval instead of seven (22/28/30/34/38/46/48px). */
.site .lede,
.site .wt-lead,
.site .sc-intro,
.site .pg-sub{ margin-top:0; margin-bottom:var(--s-7); }
.site .s-clin .lede{ margin-bottom:var(--s-9); }   /* the band that opens a grid */

/* ── RANK 4: Give the universal card grid a real row rhythm and collapse four card selectors to one primitive ── */
/* L812 `.hw-tgrid{gap:0 30px !important}` is (0,1,0); `.site` + !important wins.
   80px rows / 32px columns keeps the reference's row>=column rule and is on-scale
   (30px was on no scale at all). */
.site .hw-tgrid{ gap:var(--s-9) var(--s-6) !important; }
.site .hw-tgrid-3{ grid-template-columns:repeat(3, 1fr); }

/* One primitive. L809-853 already flattens .hw-tcard/.infocard/.s-p with
   `padding:24px 0 4px !important`; this replaces that padding on-scale and
   pulls .clin-item (styled separately at L832, padding:22px 0 6px) into line. */
.site .hw-tcard, .site .infocard, .site .s-p{
  padding:var(--s-6) 0 0 !important;
  border-top:1px solid rgba(230, 213, 176, .28) !important;
}
.site .clin-item{ padding:var(--s-6) 0 0; }

/* Card label declared ONCE. L1339 `.hw-tcard h3,.clin-item h3,.infocard h3,.bd h3
   {font-size:20px !important}` is (0,1,1); `.site .hw-tcard h3 ... !important` is
   (0,2,1) and wins. --t-h3 (1.5rem) currently has ZERO uses in the file. */
.site .hw-tcard h3,
.site .infocard h3,
.site .clin-item h3,
.site .s-p h3{
  font-family:var(--sans);
  font-size:var(--t-h3) !important;
  font-weight:600; letter-spacing:0;
  margin:0 0 var(--s-3);
}
/* Reference caps every card body at a real measure (.max-width-420px 26.25rem). */
.site .hw-tcard p,
.site .infocard p,
.site .clin-item p,
.site .s-p p{ max-width:42ch; }

@media (max-width:820px){
  .site .hw-tgrid{ grid-template-columns:1fr !important; gap:var(--s-7) !important; }
}

/* ── RANK 5: Break the four-across text rows (.clin-grid) to two-up and promote its lede to a display statement ── */
.site .clin-grid{ grid-template-columns:repeat(2, 1fr); gap:var(--s-9) var(--s-10); }

/* Give the band a focal point. L1238 `.lede{font-size:1.3rem !important}` and
   L1348 `.pg-lead,.lede,.s-sub{font-size:21.5px !important}` are both (0,1,0);
   `.site .s-clin .lede` + !important is (0,3,0) and wins on specificity.
   First use of --t-h2. Weight stays 400 — we never go below the a11y floor. */
.site .s-clin .lede{
  font-family:var(--disp);
  font-size:var(--t-h2) !important;
  line-height:1.14 !important;
  letter-spacing:var(--tr-display);
  font-weight:400 !important;
  text-transform:none;
  color:var(--m-ink);
  max-width:26ch;
  margin:0 0 var(--s-10);
}
/* ...but NOT in the closers, where .lede is the CTA's supporting line. */
.site .s-clin .in[style*="text-align:center"] .lede{
  font-family:var(--sans);
  font-size:21.5px !important;
  line-height:1.55 !important;
  letter-spacing:normal;
  max-width:48ch;
}

@media (max-width:980px){ .site .clin-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .site .clin-grid{ grid-template-columns:1fr; gap:var(--s-7); } }

/* ── RANK 6: Fix the three verified scrim/caption contrast failures — arithmetic worst case is 3.4–3.6:1 where 4.5:1 is required ── */
/* (a) .ts-tile — invert to the reference's LIGHT ramp so type lands on solid
   --m-lime. --m-ink on --m-lime computes 13.5:1 and no longer depends on the
   photo at all. This is their .places_block @479 treatment exactly. */
.site .ts-tile figcaption{
  padding:var(--s-9) var(--s-4) var(--s-3);
  background:linear-gradient(0deg,
    var(--m-lime)     0%,
    var(--a-lime-85) 38%,
    var(--a-lime-00) 100%);
  color:var(--m-ink);
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
}

/* (b) .pgb-shot — hold --a-dark-80 (7.09:1 worst case) across the whole text
   band, then clear. Also raises .62rem to .66rem, off our small-text floor. */
.site .pgb-shot figcaption{
  padding:var(--s-9) var(--s-5) var(--s-4);
  font-size:.66rem;
  color:var(--m-lime);
  background:linear-gradient(0deg,
    var(--a-dark-80)  0%,
    var(--a-dark-80) 46%,
    var(--a-dark-40) 74%,
    var(--a-dark-00) 100%);
}

/* (c) .arrival — hold --a-dark-80 through the whole type block instead of
   letting it thin to .58 where the eyebrow sits, and cap the band height the
   way the reference caps every media band (max-height:60rem = 960px). */
.site .arrival{
  width:100%;                  /* REQUIRED: without it, min-height drives the
                                  aspect-ratio backwards into width (500 x 16/9
                                  = 889px) and the band overflows a 375px vw. */
  height:auto; aspect-ratio:16/9;
  min-height:500px; max-height:min(78svh, 960px);
}
.site .arrival::after{
  background:linear-gradient(0deg,
    var(--a-dark-80)  0%,
    var(--a-dark-80) 22%,
    var(--a-dark-60) 34%,
    var(--a-dark-20) 52%,
    var(--a-dark-00) 66%,
    var(--a-dark-30) 100%);
}
.site .arrival-in{ padding:0 var(--gutter) var(--s-9); }

/* Contrast budget for --m-lime #F4E9DF over an --m-dark scrim, worst case =
   pure-white photo pixel underneath:
     --a-dark-80 -> 7.09:1  body text OK
     --a-dark-60 -> 3.28:1  LARGE display type only
     --a-dark-40 -> 2.04:1  decorative, no type
   Solid --m-dark -> 13.66:1.  --m-ink on --m-lime -> 13.50:1. */

/* ── RANK 8: Cap the runaway text measures so the text column and the media column are never the same width ── */
/* Cap in rem, not ch — 1ch is font-dependent and our leads are 21.5px. */
.site .pg-lead,
.site .wt-lead,
.site .sc-intro,
.site .pg-sub{ max-width:var(--meas-lead); }        /* 768px */

.site .lede,
.site .hw-appr-copy > p,
.site .hw-cont-copy > p,
.site .hw-split p,
.site .s-intro p,
.site .reels-intro{ max-width:var(--meas-text); }   /* 560px */

/* Body copy inside the card primitive already capped at rank 4 (42ch). */

/* ── RANK 10: Give the page an opening tier: the first content band after the hero gets --sec-xl ── */
/* Adjacent-sibling from the hero, so no template edit and no :first-of-type
   fragility under ACF assembly. --sec-xl = 150px, stepping to 96/64. */
.site .s-hero  + * > .in,
.site .hw-hero + * > .in,
.site .ap-hero + * > .in{
  padding-top:var(--sec-xl);
  padding-bottom:var(--sec-lg);   /* their 160/100 asymmetry, in our tokens */
}

/* Opt-in binder for a band that leads directly into a related band, so the pair
   reads as one chapter (their .section_spa-block is 100/80). --s-9 = 80px. */
.site .binds-down > .in{ padding-bottom:var(--s-9) !important; }

/* ── RANK 11: Make radius and shadow categorical: photographs get 0/none, opaque text panels get var(--r) ── */
/* Extend the L818 list instead of adding a competing rule. */
.site .ph,
.site .roomrow .rm,
.site .le-reel,
.site .loc-img,
.site .s-card .ph,
.site .about-card .ph2,
.site .ts-tile,
.site .amn-photo,
.site .lg-tile,
.site .tm-photo,
.site .tm-modal-photo,
.site .pg-progimg,
.site .pgb-shot,
.site .hw-appr-img,
.site .hw-cont-img,
.site .about-story-img,
.site .indcta-img{
  border-radius:0 !important;
  box-shadow:none !important;
}

/* var(--r) = 8px becomes the ONE radius, and only on opaque text panels. */
.site .team-resnote,
.site .faq-fam,
.site .ct-success,
.site .amenities-panel{ border-radius:var(--r); }

/* Keep the card lift — cards are our primary page navigation and that is a
   legitimate divergence — but reconcile the three variants of the SAME gesture.
   Today .diff-card and .s-card both travel -3px on different curves, and
   .hw-tcard switches to .18s/-2px the moment it also carries .tpl-link. */
@media (hover:hover){
  .site .s-card, .site .s-p, .site .hw-tcard, .site .infocard,
  .site .loc-card, .site .about-card, .site .diff-card{
    transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
  }
  .site .s-card:hover, .site .s-p:hover, .site .hw-tcard:hover,
  .site .infocard:hover, .site .loc-card:hover, .site .about-card:hover,
  .site .diff-card:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 30px var(--a-dark-20);
  }
  .site .hw-tcard.tpl-link:hover{ transform:translateY(-3px); }
}

/* ── RANK 12: Retune every image box to 3/2 — the ratio our existing photographs already are ── */
.site .ph,
.site .s-am .ph,
.site .ts-tile,
.site .amn-photo,
.site .roomrow .rm,
.site .lake-gallery.rg-wide .lg-tile{ aspect-ratio:var(--ar-wide); }

.site .lg-tile{ aspect-ratio:var(--ar-tall); }        /* Lake Street, native 0.75 */
.site .about-card .ph2,
.site .tm-photo,
.site .tm-modal-photo{ aspect-ratio:var(--ar-face); } /* portraits only */

/* Replace the uncontrolled fixed heights with the native ratio. */
.site .pgb-shot{ aspect-ratio:var(--ar-wide); height:auto; background-color:var(--m-river); }
.site .pg-progimg{ aspect-ratio:var(--ar-wide); height:auto; }
.site .indcta-img{ aspect-ratio:var(--ar-wide); height:auto; }
.site .hw-appr-img,
.site .hw-cont-img,
.site .about-story-img{
  width:100%;   /* same guard as .arrival: ratio must not drive width */ aspect-ratio:var(--ar-wide); min-height:0; height:auto; }

/* .pg-break wraps its full-bleed grid in .in and then fights it with five
   !important declarations, three of which are duplicated verbatim at L1240-1241
   and L1167-1249. .site has no horizontal padding, so a bare div is already
   full-bleed — the whole override stack is unnecessary once programs-break.php
   drops its .in wrapper. Until then, one rule instead of five: */
.site .pg-break .in{ padding:0 !important; max-width:none !important; }
.site .pgb-2{ gap:0 !important; }
@media (max-width:720px){ .site .pgb-2{ grid-template-columns:1fr; } }

/* ── RANK 7: Fill the empty half of the admissions band with a head/content split — no photo required ── */
/* .ap-main .in currently holds .s-secmark, .s-sechead and .admgrid as siblings.
   Grid-place them into two columns — no template edit needed. */
.site .ap-main .in{
  display:grid;
  grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  column-gap:var(--s-10);
  align-items:start;
}
.site .ap-main .in > .s-secmark{ grid-column:1; grid-row:1; }
.site .ap-main .in > .s-sechead{ grid-column:1; grid-row:2; max-width:16ch; }
.site .ap-main .in > .admgrid{
  grid-column:2; grid-row:1 / span 3;
  max-width:none;
}
.site .admsteps{ max-width:var(--meas-text); }   /* 560px, their workhorse measure */
.site .astep{ padding:var(--s-6) 0; }
.site .admcta{ margin-top:var(--s-7); }

/* Same disease, one degree milder: .s-faq .in{max-width:920px} and the seven
   other one-off caps (660/760/820/840/860/880/920/1060) all become named rungs. */
.site .s-faq .in{ max-width:calc(var(--container-md) + 2 * var(--gutter)); }
.site .team-resnote{ max-width:var(--container-sm); }
.site .pg-reels2{ max-width:var(--container-sm); }
.site .s-indcta .in{ max-width:calc(var(--container) + 2 * var(--gutter)); }

@media (max-width:900px){
  .site .ap-main .in{ grid-template-columns:1fr; }
  .site .ap-main .in > .s-secmark,
  .site .ap-main .in > .s-sechead,
  .site .ap-main .in > .admgrid{ grid-column:1; grid-row:auto; }
  .site .ap-main .in > .s-sechead{ max-width:22ch; }
}

/* ── RANK 13: Close the reduced-motion hole on hover transforms, and release the two permanent compositor layers ── */
/* Must sit LATE in the file — L1516's transform is !important and only loses on
   higher specificity. `.site` + !important gives (0,2,0)/(0,3,0). */
@media (prefers-reduced-motion: reduce){
  .site .s-cta:hover, .site .s-cta2:hover,
  .site .nav-cta:hover, .site .tour-cta:hover,
  .site .s-cta:active, .site .s-cta2:active,
  .site .nav-cta:active, .site .tour-cta:active{ transform:none !important; }

  .site a.s-am:hover, .site a.s-am:hover .ph,
  .site .s-card:hover, .site .s-p:hover, .site .hw-tcard:hover,
  .site .infocard:hover, .site .loc-card:hover, .site .about-card:hover,
  .site .diff-card:hover, .site .hw-tcard.tpl-link:hover,
  .site .affil-logo:hover,
  .site .le-reel:hover, .site .reel:hover,
  .site .s-hero a.hero-carf:hover,
  .site .foot-badges img:hover, .site .foot-social a:hover{ transform:none !important; }

  /* These three are POSITIONED by transform — reset to the centring value,
     never to `none`, or they jump out of frame. */
  .site .le-reel:hover .play, .site .reel:hover .play,
  .site .arrival-play:hover,
  .site .tour-band .tour-play:hover{ transform:translate(-50%,-50%) !important; }
}

/* Release the layers. A 16px translate plus opacity does not need manual
   promotion — the browser promotes for the duration of the transition anyway,
   and leaving will-change set keeps a layer for the life of the document on
   every revealed block. */
.site .js-reveal .reveal{ will-change:auto; }
.site .arrival-img{ transform:scale(1.05); will-change:auto; }

/* Align the one odd focus ring: L1440 uses var(--brass) (#664D22) on a dark
   rgba(31, 35, 5, .62) chip, where L559 and L1466 both use var(--m-brassL). */
.site .tour-band .tour-play:focus-visible{ outline:2px solid var(--m-brassL); outline-offset:3px; }

/* ── RANK 14: Bottom-anchor the inner-page heroes and swap the 90deg scrim for a vertical bottom-up ramp ── */
.site .hw-hero, .site .ap-hero{ display:flex; flex-direction:column; }
.site .hw-hero .in,
.site .ap-hero .in{
  margin-top:auto;                     /* matches our own .s-hero .in */
  padding-top:var(--sec-xl) !important;   /* beats L753's calc(var(--sec-xl)+24px) */
  padding-bottom:var(--s-9) !important;   /* 80px — their 100/78 asymmetry */
}

/* Flat base wash + bottom-up ramp, both on the alpha ladder. Replaces the
   90deg gradient at L352 / L504 that floors at .40 on the type side. */
.site .hw-hero .bg::after,
.site .ap-hero .bg::after{
  background:
    linear-gradient(180deg, var(--a-dark-20) 0%, var(--a-dark-00) 34%),
    linear-gradient(0deg,
      var(--a-dark-90)  0%,
      var(--a-dark-80) 18%,
      var(--a-dark-60) 34%,
      var(--a-dark-20) 58%,
      var(--a-dark-00) 78%);
}
/* --m-lime over --a-dark-80 is 7.09:1 worst case, so the body line clears 4.5:1
   where the 3.63:1 #DFCBB9-over-.66 currently does not. */
.site .hw-hero p, .site .ap-hero p{ color:var(--m-lime); }

/* Cap the hero height the way the reference caps every media band
   (max-height:60rem = 960px) and use svh so mobile chrome does not jump. */
.site .s-hero{ min-height:min(700px, 92svh); max-height:960px; }

/* contact-hero.php L5 overrides the rhythm inline with
   padding-top:64px;padding-bottom:60px — the page carrying 41% of GA4
   conversions has the shallowest hero on the site. Inline beats non-important,
   so this needs !important (already applied above) OR the template edit. */

/* ── RANK 15: Steal the clip-path wipe for photo reveals, and fix the dead eyebrow-hairline animation ── */
/* (a) Clip wipe. Add inside the existing @media (prefers-reduced-motion:
   no-preference) at theme.css L586. Ours at .95s — their 2s is tuned to a
   heavily-overlapped 3-card GSAP timeline; a lone figure that slow reads as a stall. */
.site .js-reveal .reveal.wipe{ opacity:1; transform:none; }
.site .js-reveal .reveal.wipe > img,
.site .js-reveal .reveal.wipe .ph,
.site .js-reveal .reveal.wipe .amn-photo,
.site .js-reveal .reveal.wipe .ts-tile,
.site .js-reveal .reveal.wipe .lg-tile{
  clip-path:inset(100% 0 0 0);
  transition:clip-path .95s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i,0) * 55ms);
}
.site .js-reveal .reveal.wipe.in-view > img,
.site .js-reveal .reveal.wipe.in-view .ph,
.site .js-reveal .reveal.wipe.in-view .amn-photo,
.site .js-reveal .reveal.wipe.in-view .ts-tile,
.site .js-reveal .reveal.wipe.in-view .lg-tile{ clip-path:inset(0 0 0 0); }

/* (b) Retarget the dead animation onto the hairlines that already exist.
   .s-eyebrow::before (L115) is 52px; .ct-secmark::before (L640) is 34px. */
.site .js-reveal .reveal .s-eyebrow::before,
.site .js-reveal .reveal.s-eyebrow::before,
.site .js-reveal .reveal .ct-secmark::before,
.site .js-reveal .reveal.ct-secmark::before{
  width:0;
  transition:width .7s cubic-bezier(.22,.61,.36,1) .12s;
}
.site .js-reveal .reveal.in-view .s-eyebrow::before,
.site .js-reveal .reveal.s-eyebrow.in-view::before{ width:52px; }
.site .js-reveal .reveal.in-view .ct-secmark::before,
.site .js-reveal .reveal.ct-secmark.in-view::before{ width:34px; }

/* OPTIONAL, separate design call: give .s-secmark the box it was always assumed
   to have, at which point the ORIGINAL L590-608 pair starts working unchanged.
   L780 already sets opacity:.7 and L822 already forces background:var(--brass-line)
   !important on this pseudo — only the box is missing. It draws a new 34px rule
   above every eyebrow site-wide, so look at it before merging. */
/* .site .s-secmark::before{ content:""; display:block; width:34px; height:1px;
     background:var(--brass-line); margin-bottom:var(--s-3); } */

/* Lengthen the reveal dwell so the sequence swells instead of shuffling.
   Reference: CARD_DURATION 2s, OVERLAP 0.9 -> items 0.2s apart. Ours is 600ms /
   55ms capped at --i=6, over in a third of the time. */
.site .js-reveal .reveal{
  transition:opacity .78s cubic-bezier(.22,.61,.36,1), transform .78s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i,0) * 80ms);
}

/* ── RANK 16: Move the CTA colour leg into the reference's slow band and delete the four dead CTA blocks it fights ── */
/* Roughly the colour half of their .6s, with the lift kept fast so the button
   still feels clickable. House rule preserved: every CTA keeps lift + brass glow. */
.site .s-cta, .site .s-cta2, .site .nav-cta, .site .tour-cta{
  display:inline-flex; align-items:center; justify-content:center;
  transition: background .38s ease, border-color .38s ease, color .38s ease,
              box-shadow .22s ease, transform .16s ease !important;
}
@media (hover:hover){
  .site .s-cta:hover, .site .s-cta2:hover,
  .site .nav-cta:hover, .site .tour-cta:hover{
    transform:translateY(-3px) !important;
    box-shadow:0 10px 26px rgba(230, 213, 176, .42) !important;
  }
  .site .s-cta:active, .site .s-cta2:active,
  .site .nav-cta:active, .site .tour-cta:active{
    transform:translateY(-1px) !important;
    box-shadow:0 4px 12px rgba(230, 213, 176, .32) !important;
  }
}

/* Extend our existing width-wipe into their slow band. */
.site .s-links span::after{ transition:width .6s cubic-bezier(.22,.61,.36,1); }

/* Their ONE hover transform in 195KB is a horizontal nudge on the big stacked
   overlay-menu links: .navbar_link:hover{transform:translate(.5rem)} with
   transition:transform .4s. Scoped to the OPEN drawer so it never competes with
   the desktop underline wipe. --s-2 = 8px. */
@media (hover:hover){
  .site .s-nav.open .s-links span{ transition:transform .4s cubic-bezier(.22,.61,.36,1), color .25s ease; }
  .site .s-nav.open .s-links span:hover{ transform:translateX(var(--s-2)); }
}
@media (prefers-reduced-motion: reduce){
  .site .s-nav.open .s-links span:hover{ transform:none !important; }
}

/* DELETE — all four are dead but still shipping and still misleading:
   L570-588  .s-cta{transition:filter .2s ease, transform .08s ease}
             .s-cta:hover{filter:brightness(1.07)}
             .s-cta:active{transform:translateY(1px)}    <- contradicts L1520
   L733      .s-cta:hover,.s-cta:active{filter:none !important; transform:none !important}
   L744      byte-identical duplicate of L733
   L1197     .s-cta,.s-cta2,.nav-cta{transition:... !important}  <- omits transform */

/* ── RANK 9 (MODIFIED): explicit polarity modifiers only. The plan's
   adjacent-sibling auto-flip was dropped: only ONE adjacent same-colour
   pair exists in the DB-assembled pages (hiring: lime->lime), and implicit
   flipping would change colours when an editor reorders ACF blocks. ── */
/* Explicit modifiers so an author can drive the flip on purpose. The pattern is
   their .is-marble / .is-grass pair; every value is one of ours. */
.site .is-dark{ background:var(--m-dark) !important; color:#F4E9DF; }
.site .is-dark .s-sechead,
.site .is-dark h2, .site .is-dark h3, .site .is-dark h3{ color:#F4E9DF; }
.site .is-dark .s-secmark,
.site .is-dark .s-eyebrow{ color:var(--m-brassL); }
.site .is-dark p,
.site .is-dark .pg-lead,
.site .is-dark .lede{ color:#DFCBB9; }
.site .is-dark .hw-tcard,
.site .is-dark .infocard,
.site .is-dark .s-p,
.site .is-dark .clin-item{ border-top-color:var(--a-light-20) !important; }

.site .is-river{ background:var(--m-river) !important; color:var(--m-ink); }
.site .is-lime { background:var(--m-lime)  !important; color:var(--m-ink); }

/* ══════════════════════════════════════════════════════════════════════
   LEFT SLIDE-IN MENU — ports .navbar_menu / .navbar_menu-button.
   Reference geometry: panel anchored LEFT, height:100dvh, marble background
   (#f4e9df, byte-identical to our --m-lime), width 30% >=992px stepping to
   100% at <=479px; the trigger sits ABOVE the panel and doubles as close.
   Reference link type: 40px / line-height 1.2 / sentence case / 8px hover nudge.
   THEIR weight is 200 — we hold 400 (only Cormorant 400/500 are self-hosted,
   and <400 is below our accessibility floor).
   Deliberate deviations, all accessibility: real <button>, aria-expanded +
   aria-controls, visible focus (they set outline:0), Escape, focus trap,
   scroll lock, and a prefers-reduced-motion path. They ship none of these.
   NOTE: state lives on <html class="nav-open">, NOT on `.s-nav.open`, which is
   already used by the legacy dark dropdown at L717-720 / L929-931.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Trigger: leftmost at every width ── */
.site .s-nav .in .nav-toggle{
  display:inline-flex !important; align-items:center; gap:10px;
  order:-1 !important; margin-left:0 !important; margin-right:auto !important;
  background:none; border:0; padding:10px 4px; cursor:pointer;
  min-height:44px; min-width:44px; position:relative; z-index:1002;
  color:#F4E9DF;
}
.site .nav-toggle .nav-toggle-bars{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:24px; }
.site .nav-toggle .nav-toggle-bars span{
  display:block; width:24px; height:2px; background:currentColor; border-radius:0;
  transition:transform .32s cubic-bezier(.22,.61,.36,1), opacity .2s ease;
}
.site .nav-toggle .nav-toggle-word{
  font-family:var(--sans); font-size:.68rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:currentColor;
}
/* burger -> X */
html.nav-open .site .nav-toggle .nav-toggle-bars span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
html.nav-open .site .nav-toggle .nav-toggle-bars span:nth-child(2){ opacity:0; }
html.nav-open .site .nav-toggle .nav-toggle-bars span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
/* once open, the trigger sits on the marble panel, so it must invert */
html.nav-open .site .s-nav .in .nav-toggle{ color:var(--m-ink); }

/* ── The burger is the sole navigation: retire the horizontal link row ── */
.site .s-nav .in .s-links,
.site .sitehead .s-links{ display:none !important; }

/* ── Phone + CTA never hide (beats L864/L893 `display:none !important`) ── */
.site .s-nav .in .nav-cta,
.site .sitehead .nav-cta{ display:inline-flex !important; align-items:center; }
.site .s-nav .in .nav-tel{
  display:inline-flex; align-items:center; min-height:44px; margin-left:auto;
  font-family:var(--sans); font-size:.86rem; font-weight:600; letter-spacing:.01em;
  color:#F4E9DF; text-decoration:none; white-space:nowrap; margin-right:14px;
}
@media (hover:hover){ .site .s-nav .in .nav-tel:hover{ color:var(--m-brassL); } }
@media (max-width:560px){
  .site .s-nav .in .nav-tel{ display:none; }      /* CTA alone below 560 */
}

/* ── Panel ── */
.site .nav-panel{
  position:fixed; inset:0 auto 0 0;
  width:30%; min-width:320px; max-width:520px; height:100dvh;
  background:var(--m-lime); color:var(--m-ink);
  z-index:1001; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--s-11) + 20px) var(--s-8) var(--s-8);
  box-sizing:border-box;
  transform:translateX(-100%);
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
  box-shadow:1px 0 0 rgba(31, 35, 5, .10);
}
.site .nav-panel[hidden]{ display:none; }
html.nav-open .site .nav-panel{ transform:translateX(0); }
@media (max-width:991px){ .site .nav-panel{ width:50%; } }
@media (max-width:767px){ .site .nav-panel{ width:60%; } }
@media (max-width:560px){ .site .nav-panel{ width:100%; max-width:none; min-width:0; padding-left:var(--gutter); padding-right:var(--gutter); } }

.site .nav-scrim{
  position:fixed; inset:0; z-index:1000;
  background:var(--a-dark-60); opacity:0;
  transition:opacity .4s ease;
}
.site .nav-scrim[hidden]{ display:none; }
html.nav-open .site .nav-scrim{ opacity:1; }

/* ── Link type: the part that matters. Reference = 2.5rem/1.2, sentence case ── */
.site .nav-panel-links{ display:flex; flex-direction:column; }
.site .nav-panel-links a{
  font-family:var(--disp);
  font-size:clamp(1.9rem, 3.4vw, 2.5rem);   /* their 2.5rem = 40px ceiling */
  font-weight:400;                          /* theirs is 200; we floor at 400 */
  line-height:1.2;
  letter-spacing:-.01em;
  text-transform:none;                      /* sentence case, as theirs is */
  color:var(--m-ink); text-decoration:none;
  padding:8px 0; margin:6px 0; min-height:44px;
  display:flex; align-items:center;
  transition:transform .4s ease, color .4s ease;
}
@media (hover:hover){
  .site .nav-panel-links a:hover{ transform:translateX(8px); color:var(--m-brass); }
}
.site .nav-panel-links a:focus-visible{ outline:2px solid var(--m-brass); outline-offset:3px; }

/* ── Panel foot: the conversion path, repeated inside the panel ── */
.site .nav-panel-foot{
  margin-top:var(--s-9); padding-top:var(--s-6);
  border-top:1px solid rgba(31, 35, 5, .14);
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-4);
}
.site .nav-panel-foot .s-cta{ background:var(--m-dark) !important; color:var(--m-lime) !important; border-color:var(--m-dark) !important; }
.site .nav-panel-tel{
  font-family:var(--sans); font-size:1rem; font-weight:600; color:var(--m-ink);
  text-decoration:none; min-height:44px; display:inline-flex; align-items:center;
}
.site .nav-panel-note{
  font-family:var(--sans); font-size:.7rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--m-brass);
}

/* ── Scroll lock ── */
html.nav-open, html.nav-open body{ overflow:hidden; }

/* ── Reduced motion: no travel, just appear ── */
@media (prefers-reduced-motion: reduce){
  .site .nav-panel{ transition:none; transform:none; opacity:0; visibility:hidden; }
  html.nav-open .site .nav-panel{ opacity:1; visibility:visible; }
  .site .nav-scrim{ transition:none; }
  .site .nav-panel-links a{ transition:none; }
  @media (hover:hover){ .site .nav-panel-links a:hover{ transform:none; } }
  .site .nav-toggle .nav-toggle-bars span{ transition:none; }
}

/* Header items sit over hero photography while the bar is transparent, so they
   carry the same shadow the wordmark does. (The audit reports them as
   cream-on-marble because it resolves the transparent bar to the page
   background; over a scrimmed hero they are legible, and the bar solidifies
   on scroll.) */
.site .s-nav .in .nav-toggle,
.site .s-nav .in .nav-toggle .nav-toggle-word,
.site .s-nav .in .nav-tel,
.site .s-nav .in .nav-cta{ text-shadow:0 1px 10px rgba(0, 0, 0, .55); }
/* the trigger sits on the marble panel once open, so drop its shadow there */
html.nav-open .site .s-nav .in .nav-toggle{ text-shadow:none; }
html.nav-open .site .s-nav .in .nav-toggle .nav-toggle-word{ text-shadow:none; }

/* ══════════════════════════════════════════════════════════════════════
   HOME HERO — back to LEFT alignment (owner direction).
   Left edge is the shared container gutter, so the headline lines up with
   the nav and every content band below it — deliberately NOT flush to the
   viewport edge (that was the earlier `width:100%` gutter bug).
   Vertical centring is kept; only the horizontal axis changes.
   The scrim reverts to favouring the LEFT, because that is where the type
   now sits — a centre-weighted scrim would darken the wrong third.
   ══════════════════════════════════════════════════════════════════════ */
.site .s-hero .in{
  align-items:flex-start;
  text-align:left;
}
.site .s-hero .s-h1,
.site .s-hero .s-sub,
.site .s-hero .s-eyebrow{ margin-inline:0; }
.site .s-hero .s-eyebrow::before{ margin-inline:0; }   /* brass rule back to the left */
.site .s-hero .s-ctas,
.site .s-hero .s-trust{ justify-content:flex-start; }
/* headline is now three words, so it no longer needs the narrow stacking measure */
.site .s-hero .s-h1{ max-width:22ch; }
.site .s-hero .s-sub{ max-width:46ch; }

/* Left-weighted scrim: dense behind the type, opening up across the frame so
   the estate still reads. Replaces the centre-weighted radial. */
.site .s-hero .scene.scrimonly::after{
  background:
    linear-gradient(90deg, var(--a-dark-90) 0%, rgba(31, 35, 5, .72) 38%, rgba(31, 35, 5, .34) 68%, rgba(31, 35, 5, .30) 100%),
    linear-gradient(0deg,  rgba(31, 35, 5, .55) 0%, rgba(31, 35, 5, 0) 46%);
}
@media (max-width:820px){
  .site .s-hero .s-h1{ max-width:18ch; }
  /* on mobile the photo is tighter, so keep a fuller wash under the type */
  .site .s-hero .scene.scrimonly::after{
    background:
      linear-gradient(180deg, rgba(31, 35, 5, .70) 0%, rgba(31, 35, 5, .56) 42%, rgba(31, 35, 5, .80) 100%),
      linear-gradient(90deg, rgba(31, 35, 5, .55) 0%, rgba(31, 35, 5, .30) 100%);
  }
}

/* ── Burger: beat the legacy `.nav-toggle span` rule ────────────────────
   L690 `.nav-toggle span{ width:18px; height:1.5px; background:#F4E9DF }`
   (0,1,1) was styling BOTH wrapper spans as bars: it squashed
   .nav-toggle-bars to 24x1.5px (rendering as one dash), collapsed the three
   real bars to height:0, and painted the word "MENU" as a bar. The legacy
   .nav-toggle also sets flex-direction:column. Overridden at (0,3,1)+. */
.site .s-nav .in .nav-toggle{ flex-direction:row !important; }
.site .s-nav .in .nav-toggle .nav-toggle-bars{
  width:24px !important; height:auto !important; background:none !important;
  flex-direction:column !important; gap:5px; flex:0 0 auto;
}
.site .s-nav .in .nav-toggle .nav-toggle-bars > span{
  width:24px !important; height:2px !important; background:currentColor !important;
  flex:0 0 auto;
}
.site .s-nav .in .nav-toggle .nav-toggle-word{
  width:auto !important; height:auto !important; background:none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   THE WHEEL IS THE MENU CONTROL — it turns as the panel opens.
   The wordmark remains a separate home link (logo->home is too strong a
   convention to give up). The "Menu" word stays for discoverability.
   The mark is a cream SVG loaded via <img>, so `color` cannot reach it —
   once the trigger sits on the marble panel it is inverted with a filter,
   otherwise a cream wheel on cream would vanish.
   ══════════════════════════════════════════════════════════════════════ */
.site .s-nav .in .nav-toggle--wheel{
  gap:12px; padding:6px 4px;
}
/* the three-bar burger is retired on the wheel variant */
.site .s-nav .in .nav-toggle--wheel .nav-toggle-bars{ display:none !important; }

.site .s-nav .in .nav-toggle--wheel .nav-wheel{ display:block; flex:0 0 auto;
  background:none !important;           /* beat the legacy `.nav-toggle span/img` paint */
  transform:rotate(0deg);
  transition:transform .7s cubic-bezier(.22,.61,.36,1), filter .35s ease;
  transform-origin:50% 50%;
}
/* turn the wheel + invert it for the marble panel it now sits on */
html.nav-open .site .s-nav .in .nav-toggle--wheel .nav-wheel{
  transform:rotate(180deg);
  filter:brightness(.16) saturate(.35);   /* cream -> near-moss, readable on marble */
}
@media (hover:hover){
  .site .s-nav .in .nav-toggle--wheel:hover .nav-wheel{ transform:rotate(28deg); }
  html.nav-open .site .s-nav .in .nav-toggle--wheel:hover .nav-wheel{ transform:rotate(208deg); }
}
.site .s-nav .in .nav-toggle--wheel:focus-visible{
  outline:2px solid var(--m-brassL); outline-offset:3px; border-radius:4px;
}
html.nav-open .site .s-nav .in .nav-toggle--wheel:focus-visible{ outline-color:var(--m-brass); }

/* brand is now wordmark-only, so drop the space the logo used to occupy */
.site .s-nav .in .s-brand .navlogo{ display:none; }

/* Reduced motion: the wheel still inverts (that is legibility, not decoration)
   but it does not spin. */
@media (prefers-reduced-motion: reduce){
  .site .s-nav .in .nav-toggle--wheel .nav-wheel{ transition:filter .35s ease; transform:none !important; }
  html.nav-open .site .s-nav .in .nav-toggle--wheel .nav-wheel{ transform:none !important; }
  @media (hover:hover){
    .site .s-nav .in .nav-toggle--wheel:hover .nav-wheel{ transform:none !important; }
  }
}
/* The wordmark lost its height when the wheel moved into the trigger; as a
   standalone link it still needs a real target. */
.site .s-nav .in .s-brand{ display:inline-flex; align-items:center; min-height:44px; }

/* ── Wordmark: TRUE container centring ──────────────────────────────────
   In flow it sits at the centre of the GAP between the two side groups.
   Because the right group (phone + CTA ~300px) is far wider than the left
   (wheel + "Menu" ~116px), that landed 167px left of the page centre and
   read as a mistake. Taking it out of flow centres it on the container,
   which is what the eye measures against — and matches the reference's
   burger-left / logo-centre / CTA-right arrangement.
   Threshold measured, not guessed. Originally 1200px (inline phone made the
   right group ~300px wide). Stacking the phone UNDER the CTA narrowed that
   group to 229px, so the centred wordmark is now clear down to 900px with
   37px to spare — re-measured after the change rather than left stale. */
@media (min-width:900px){
  .site .s-nav .in{ position:relative; }
  .site .s-nav .in .s-brand{
    position:absolute; left:50%; transform:translateX(-50%);
    margin:0; white-space:nowrap;
  }
}

/* ── Phone stacked UNDER the CTA ────────────────────────────────────────
   Was inline to the LEFT of the button. Stacking narrows the right group
   from ~300px to the button's own width, which is also what lets the
   wordmark stay centred further down the range (see the centring rule). */
.site .s-nav .in .nav-actions{
  display:flex; flex-direction:column; margin-left:auto;
}
.site .s-nav .in .nav-actions .nav-cta{ margin:0 !important; }
.site .s-nav .in .nav-actions .nav-tel{
  margin:0 !important; line-height:1;
}
/* the util bar above already carries the number, so below 560 the stacked
   copy is redundant and the row gets tight */
@media (max-width:560px){
  .site .s-nav .in .nav-actions .nav-tel{ display:none; }
}
/* The stacked actions made the nav row 125px tall. Trim its own padding so the
   header stays close to the reference's 4.5rem bar rather than dominating. */
@media (min-width:821px){
  .site .s-nav .in{ padding-top:12px !important; padding-bottom:12px !important; }
}

/* ── Header refinements ─────────────────────────────────────────────────
   1. The stacked phone was right-aligned to the CONTAINER, so it hung off
      the button's right edge and read as orphaned. Centre it UNDER the
      button and tighten the gap so the two read as one block.
   2. Wordmark up a step — it is the brand, and it was losing to the CTA.
   3. Wheel slightly larger.
   All three widen the left/right groups, so the centring threshold is
   re-measured after this block, not assumed. */
.site .s-nav .in .nav-actions{
  align-items:center;      /* phone centres under the button */
  gap:5px;
}
/* 24px, not 22: this is the phone link, and at 22px it was the only control
   in the header failing the WCAG 2.5.8 (AA) 24x24 target-size floor — the CTA
   beside it measures 48.6px and the burger 44px. The audit harness never
   caught it because .nav-tel is display:none below 560px and the harness only
   samples mobile at 375, so the one band where it is both visible and checked
   (560-599px) is never measured.
   Held to 24 rather than the house 44px minimum on purpose: 44 would add ~22px
   to the header, undoing the Phase 6 trim that brought the nav row down from
   125px. Raising it further is a design call, not a bug fix. */
.site .s-nav .in .nav-actions .nav-tel{
  font-size:.9rem; font-weight:600; letter-spacing:.005em;
  text-align:center; min-height:24px;
}
/* wheel: 44 -> 52 */
.site .s-nav .in .nav-toggle--wheel .nav-wheel{ width:52px; height:52px; }
@media (max-width:560px){
  .site .s-nav .in .nav-toggle--wheel .nav-wheel{ width:46px; height:46px; }
}
/* ── AUTHORITATIVE wordmark sizing ─────────────────────────────────────
   This block and its three breakpoints below are what actually paint. The
   step up in size is deliberate — the wordmark is the brand and was losing
   to the CTA — and the tracking is eased so it does not run away in width.

   Everything else that sets font-size on .s-brand span loses on specificity:
   this selector is (0,4,1), against `.s-nav .in .s-brand span` (0,3,1),
   `.site .s-brand span` (0,2,1) and `.s-brand span` (0,1,1). All eight
   surviving declarations carry !important, so specificity alone decides.

   A previous "AUTHORITATIVE" block sat ~800 lines earlier and claimed the
   same role while being entirely shadowed by this one — editing it changed
   nothing. That block is gone, along with 22 other dead font-size
   declarations on this element (30 -> 8). Before adding another rule here,
   measure getComputedStyle; do not infer from source order. */
.site .s-nav .in .s-brand span, .site .sitehead .s-brand span{
  font-size:1.34rem !important; letter-spacing:.19em !important;
}
@media (max-width:900px){
  .site .s-nav .in .s-brand span, .site .sitehead .s-brand span{ font-size:1.08rem !important; letter-spacing:.15em !important; }
}
@media (max-width:560px){
  .site .s-nav .in .s-brand span, .site .sitehead .s-brand span{ font-size:.92rem !important; letter-spacing:.12em !important; }
}
@media (max-width:400px){
  .site .s-nav .in .s-brand span, .site .sitehead .s-brand span{ font-size:.78rem !important; letter-spacing:.09em !important; }
}
/* A legacy `.nav-cta{ order:3 }` (L715 / L927) out-ranks DOM order inside the
   flex column, which flipped the phone ABOVE the button below 900px. Pin both. */
.site .s-nav .in .nav-actions .nav-cta{ order:1 !important; }
.site .s-nav .in .nav-actions .nav-tel{ order:2 !important; }

/* ── Home: phone moves from the header into the hero trust line ─────────
   Sits beside "CARF accredited" and inherits the existing
   `.s-trust span + span::before` divider, so it reads as a second trust
   signal rather than a bolted-on link.
   The header copy is hidden ON HOME ONLY: `.util-bar` is display:none, so
   removing it site-wide would leave the number reachable only from inside
   the slide-in menu — unacceptable on the path carrying ~41% of
   conversions. Inner pages keep the header phone. */
.site .s-hero .s-trust .trust-tel{
  display:inline-flex; align-items:center; min-height:24px;   /* WCAG 2.5.8 */
  color:inherit; text-decoration:none;
  font:inherit; letter-spacing:inherit; text-transform:inherit;
  border-bottom:1px solid rgba(244,233,223,.42);
  transition:border-color .2s ease, color .2s ease;
}
@media (hover:hover){
  .site .s-hero .s-trust .trust-tel:hover{
    color:#FFFFFF; border-bottom-color:#FFFFFF;               /* house rule: CTAs get a hover */
  }
}
.site .s-hero .s-trust .trust-tel:focus-visible{
  outline:2px solid var(--m-brassL); outline-offset:3px; border-bottom-color:transparent;
}
/* Touch sizing for the hero phone, and it has to live HERE.
   The general phone-target rule earlier in this file already carries this exact
   selector at the same (0,4,0) specificity — but it sits at line ~1702, before
   the 24px declaration above, so source order handed the tie to 24px and the
   computed value never moved. Measured: min-height stayed 24px, rendered 33px.
   Placed after the rule it overrides rather than escalating to !important,
   which is how this stylesheet got its sprawl in the first place. */
@media (max-width:900px), (pointer:coarse){
  .site .s-hero .s-trust .trust-tel{ min-height:44px; padding-block:4px; }
}
/* remove the now-duplicated header phone, home only */
.home .site .s-nav .in .nav-actions .nav-tel{ display:none !important; }

/* ── Inner heroes: green, no photo ──────────────────────────────────────
   The scrim exists to rescue type from a photograph. On the flat green it
   only double-darkens an already-14:1 surface and turns the band muddy,
   so it is suppressed when there is no image behind it. */
.site .hw-hero .bg--flat::after{ display:none; }

/* ══════════════════════════════════════════════════════════════════════
   Owner-directed fixes (2026-07-26)
   ══════════════════════════════════════════════════════════════════════ */

/* 1. The header phone is gone from the markup on every page. Every inner
      hero renders its own visible "Call or text" beside the CTA (verified
      30/30), and home now carries it in the hero trust line, so the number
      is still reachable without a click everywhere. The `.home`-scoped
      hide added earlier is therefore obsolete — the rules below simply
      neutralise the now-dead stacked-column layout. */
.site .s-nav .in .nav-actions{ flex-direction:row; gap:0; }

/* 2. Arrival band: the play button is gone. The video already autoplays
      muted on loop, so a play affordance had nothing to trigger — and it
      navigated to the tour page instead, which is why it read as phantom.
      The labelled "Take the full tour of Rodman Hall" button remains. */

/* 3. "On the Twelve Mile Creek" sat where the scrim had fallen to ~20%,
      over bright limestone, so cream-on-cream. Shortening the headline to
      one line already drops the block into darker territory; these two
      stops give it a floor regardless of what frame the video is paused on,
      while still leaving the upper half of the house visible. */
.site .arrival::after{
  background:linear-gradient(0deg,
    var(--a-dark-80)  0%,
    var(--a-dark-80) 26%,
    var(--a-dark-70) 40%,
    var(--a-dark-40) 56%,
    var(--a-dark-20) 68%,
    var(--a-dark-00) 80%,
    var(--a-dark-30) 100%);
}

/* 4. Inner heroes are shorter now that no photograph needs room to read.
      174/80 -> 136/64. Keeps the 24px clearance under the fixed header. */
.site .hw-hero .in,
.site .ap-hero .in{
  padding-top:calc(var(--sec-lg) + 24px) !important;
  padding-bottom:var(--s-8) !important;
}

/* 5. "A House Built to Last" is 21 characters and was wrapping against a
      20ch measure. One line is the point of the shorter headline — and it
      also drops the eyebrow further down into the stronger part of the
      scrim, which is what made it legible. */
.site .arrival-in h2{ max-width:26ch; }

/* ══════════════════════════════════════════════════════════════════════
   INTRO CURTAIN — reference's layered start-screen, safety-first spec
   Theirs: .start-screen (fixed, z999, pointer-events:none) holding three
   stacked .start-screen_overlay panels (moss z3 / new-grass z2 / marble z1)
   with the logo centred over them. The motion itself is Webflow IX3, so it
   is not extractable from CSS — the sequence below is ours.

   Deliberate departures, because this is a treatment site not a members' club:
     - FIRST VISIT ONLY (sessionStorage, gated in <head> before paint)
     - 620ms total, not the leisurely multi-second reveal
     - never shown when prefers-reduced-motion is set
     - OFF by default: only runs when the head gate adds data-tmr-intro, so
       a scripting failure yields the page immediately rather than a stuck panel
     - the animation is pure CSS with `forwards`, so nothing depends on JS to
       clear it; theme.js only adds skip-on-interaction
     - pointer-events:none throughout, so a tap always reaches the page beneath
   ══════════════════════════════════════════════════════════════════════ */
.tmr-intro{ display:none; }

html[data-tmr-intro] .tmr-intro{
  display:block; position:fixed; inset:0; z-index:9999;
  pointer-events:none;                     /* never blocks a tap on the phone number */
}
html[data-tmr-intro] .tmr-intro-panel{
  position:absolute; inset:0;
  transform:translateY(0);
  animation:tmr-intro-lift .6s cubic-bezier(.72,0,.26,1) forwards;
}
/* One panel, one colour. The three-panel dark -> olive -> marble wipe read as
   three separate curtains; a single deep-green panel lifting once is calmer.
   Retimed 2.1s -> 2.9s hold so the sequence completes at 3.5s (2.9 + .6 lift). */
html[data-tmr-intro] .tmr-intro-panel.is-dark { background:var(--m-dark);  z-index:3; animation-delay:2.9s; }

html[data-tmr-intro] .tmr-intro-lockup{
  position:absolute; top:50%; left:50%; z-index:4;
  transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:22px;
  animation:tmr-intro-fade .38s ease 1.7s forwards;   /* fully clear at 2.08s, just before the lift */
}
/* The wheel spins a full turn while the panels hold. Centring lives on the
   parent, so `transform` here is free for rotation alone. */
html[data-tmr-intro] .tmr-intro-mark{
  display:block; width:132px; height:132px;
  animation:tmr-intro-spin 2.9s cubic-bezier(.34,0,.3,1) forwards;  /* fills the longer hold */
}
html[data-tmr-intro] .tmr-intro-word{
  font-family:var(--disp); font-weight:400; font-size:clamp(1.05rem,2.6vw,1.55rem);
  letter-spacing:.3em; text-transform:uppercase; color:var(--m-lime);
  text-indent:.15em;             /* HALF the tracking: letter-spacing adds a trailing
                                    space after the last cap, so the visual text sits
                                    half a space left of the box centre. .3em was a
                                    full space and over-corrected to the right. */
  white-space:nowrap;            /* never wrap - see the phone block below */
  opacity:0; animation:tmr-intro-word .75s ease .3s forwards;
}
@keyframes tmr-intro-lift{
  from{ transform:translateY(0); }
  to  { transform:translateY(-101%); }     /* 101% avoids a hairline seam */
}
@keyframes tmr-intro-spin{
  from{ transform:rotate(0deg); }
  to  { transform:rotate(360deg); }
}
@keyframes tmr-intro-word{
  from{ opacity:0; letter-spacing:.46em; }
  to  { opacity:1; letter-spacing:.3em; }
}
@keyframes tmr-intro-fade{
  from{ opacity:1; }
  to  { opacity:0; }
}

/* PHONES: the intro lockup was mis-centred on iPhone widths - both the wheel
   and the wordmark, which is one bug wearing two hats.

   "TWELVE MILE RECOVERY" is 20 characters. At clamp()'s floor the font resolves
   to 16.8px, and the word keyframe OPENS at .46em tracking, so the line measured
   ~363px against a 375-390px viewport with no padding: it wrapped. A second line
   broke both centrings at once - `text-indent` applies to the first line only, so
   the two lines sat ~5px out of step, and the taller lockup pushed the wheel above
   optical centre (the lockup centres as a unit via translate(-50%,-50%)).

   Fixed by making the phone case fit rather than by patching the symptoms:
   smaller display size, tighter tracking, and its own keyframe - the shared one
   ends at .3em with `forwards`, which would otherwise overwrite the tracking set
   here the moment the animation finished. `white-space:nowrap` above is the
   guarantee; this block is what makes nowrap safe. */
@media (max-width:520px){
  html[data-tmr-intro] .tmr-intro-word{
    font-size:.82rem; letter-spacing:.2em; text-indent:.1em;
    animation-name:tmr-intro-word-sm;
  }
  html[data-tmr-intro] .tmr-intro-mark{ width:104px; height:104px; }
  html[data-tmr-intro] .tmr-intro-lockup{ gap:18px; }
}
@keyframes tmr-intro-word-sm{
  from{ opacity:0; letter-spacing:.3em; }
  to  { opacity:1; letter-spacing:.2em; }
}
/* Skip: theme.js sets this on any interaction, and as a hard timeout guard. */
html[data-tmr-intro-done] .tmr-intro{ display:none !important; }

/* Belt and braces: if the animation itself never runs (very old engine), the
   curtain is removed anyway once this transition-less rule applies. */
@media (prefers-reduced-motion: reduce){
  html[data-tmr-intro] .tmr-intro{ display:none !important; }
}

/* ── Residence stencils: one ink, one paper ─────────────────────────────
   Each tile previously stacked five colours: an inline olive/brown panel
   (#8A7A46 / #664D22), the PNG's own baked dusty-pink or green paper, navy
   ink, the cream card body, and the green card border. The source images
   have been reprocessed to near-black line art on TRANSPARENT ground, so
   the tile now needs exactly one background — the same marble as the card
   body beneath it, making each card a single continuous sheet the drawing
   sits on. Padding keeps the engraving off the card edge. */
.site .s-res .s-card .ph{
  /* transparent, not a hardcoded colour: the card and its body are both
     transparent and show the band behind them, so marble here read as a
     lighter box sitting on a tan card. Inheriting means the stencil always
     sits on whatever the surrounding surface is, even if the band changes. */
  background-color:transparent !important;
  background-size:contain !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  padding:var(--s-5);
  box-sizing:border-box;
}

/* ══════════════════════════════════════════════════════════════════════
   CARD TYPOGRAPHY — one anatomy for every card on the site
   The hierarchy was inverted: titles were Cormorant 14.4-24px while their
   own body copy was forced to 1.16rem/500 (18.56px), so the description was
   bigger and heavier than the thing it described. Now the title leads and
   the body is calm beneath it, in one family, everywhere.
   Colours are deliberately NOT touched — several of these cards sit on dark
   bands and already carry the correct cream.
   ══════════════════════════════════════════════════════════════════════ */
.site .s-am h5,
.site .hw-tcard h3,
.site .s-card h3,
.site .day-card h3,
.site .amn-card h3,
.site .pillar h3,
.site .diff-card h3,
.site .astep h3,
.site .infocard h3,
.site .about-card h3,
.site .loc-card h3,
.site .clin-item h3,
.site .s-p h3{
  font-family:var(--sans) !important;
  font-size:1.0625rem !important;      /* 17px — above the body, not below it */
  font-weight:600 !important;
  line-height:1.35 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  font-variant-numeric:lining-nums;    /* digits read as digits */
}
.site .s-am p,
.site .hw-tcard p,
.site .s-card p,
.site .day-card p,
.site .amn-card p,
.site .pillar p,
.site .diff-card p,
.site .astep p,
.site .infocard p,
.site .about-card p,
.site .loc-card p,
.site .clin-item p,
.site .s-p p{
  font-family:var(--sans) !important;
  font-size:1rem !important;           /* 16px — was 18.56px and shouting */
  font-weight:400 !important;
  line-height:1.6 !important;
}

/* ── Virtual tiers: three comparable columns ────────────────────────────
   Was three prose cards; now each tier carries its live feature rows. A
   dedicated grid rather than .hw-tgrid because that is 2-column, and three
   tiers only compare properly side by side. */
.site .vt-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start; }
.site .vt-card{ background:#FCF7F0; border:1px solid #DFCBB9; border-radius:6px; padding:26px 24px; }
.site .vt-card h3{
  font-family:var(--sans) !important; font-size:1.0625rem !important; font-weight:600 !important;
  color:var(--m-ink); margin:0 0 10px !important; letter-spacing:0 !important;
}
.site .vt-card .vt-sum{
  font-family:var(--sans); font-size:1rem; line-height:1.6; color:var(--m-ink);
  margin:0 0 18px; padding-bottom:16px; border-bottom:1px solid #DFCBB9;
}
.site .vt-list{ list-style:none; margin:0; padding:0; }
.site .vt-list li{
  font-family:var(--sans); font-size:.9375rem; line-height:1.55; color:var(--m-ink);
  padding:0 0 12px 18px; position:relative;
}
.site .vt-list li:last-child{ padding-bottom:0; }
.site .vt-list li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:6px; height:6px; border-radius:50%; background:var(--m-brass);
}
.site .vt-list li b{ display:block; font-weight:600; color:var(--m-ink); margin-bottom:2px; }
@media (max-width:980px){ .site .vt-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .site .vt-grid{ grid-template-columns:1fr; } }

/* ── Shared FAQ: flip when it would repeat the band above it ─────────────
   programs-faq is a hardcoded prebuilt, now used on four pages whose
   preceding section differs (virtual-tiers is lime, alumni-closer is lime,
   inpatient-after is river). It has no bg field to set per page, so the
   colour has to be decided from context.
   Deliberately narrow: this is scoped to .s-faq ONLY. It is not the general
   adjacent-sibling auto-flip proposed earlier and rejected — that one would
   have changed band colours whenever an editor reordered ACF blocks. */
.site .bg-lime + .s-faq.bg-lime,
.site .s-clin + .s-faq.bg-lime{ background:var(--m-river) !important; }
/* The mirror of the rule above. /programs/aftercare/ ends photo-band -> FAQ ->
   alumni-closer, and .s-faq.bg-lime followed by .s-clin put two identical limes
   against each other — the same defect, in the other order. Verified across all
   43 rendered pages: this fixes that adjacency and creates no new one. */
.site .s-faq.bg-lime + .s-clin{ background:var(--m-river) !important; }

/* ── Location / substance pages (page-sud.php) ──────────────────────────
   30 pages whose copy lives in wtt_* meta, not post_content. Reuses
   .hw-split; only the figure and the text-only variant are new. */
.site .sud-fig{
  margin:0; min-height:340px; border-radius:var(--r);
  background-size:cover; background-position:center; background-color:var(--m-river);
}
.site .hw-split.is-flipped .copy{ order:2; }
.site .hw-split.is-flipped .sud-fig{ order:1; }
.site .sud-solo{ max-width:78ch; }
.site .sud-solo h2{
  font-family:var(--disp); font-weight:400; font-size:clamp(1.6rem,3.2vw,2.2rem);
  line-height:1.14; margin:0 0 16px; color:var(--m-ink); text-wrap:balance;
}
.site .sud-solo p{ font-family:var(--sans); font-size:1.02rem; line-height:1.72; color:#252A06; margin:0 0 14px; }
.site .hw-split .copy p:last-child, .site .sud-solo p:last-child{ margin-bottom:0; }
@media (max-width:820px){
  /* keep the image below the copy on every section, flipped or not */
  .site .hw-split.is-flipped .copy{ order:1; }
  .site .hw-split.is-flipped .sud-fig{ order:2; }
  .site .sud-fig{ min-height:220px; }
}

/* ══════════════════════════════════════════════════════════════════════
   BLOG — single.php, home.php, archive.php
   71 posts, ~148,000 words, zero Flatsome shortcodes, all with featured
   images. Long-form reading is the job here, so the body column is a
   measured single column rather than the wide section container.
   ══════════════════════════════════════════════════════════════════════ */
.site .post-hero h1{ max-width:26ch; }
.site .post-meta{
  font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--m-brassL); margin:0;
}
.site .post-lead{
  margin:0; height:clamp(240px,42vw,460px);
  background-size:cover; background-position:center; background-color:var(--m-river);
}
/* Reading column: ~68ch is the comfortable measure for 2,000-word posts. */
.site .post-body{ max-width:68ch; }
.site .post-body > *{ margin:0 0 1.15em; }
.site .post-body h2{
  font-family:var(--disp); font-weight:400; font-size:clamp(1.5rem,3vw,2rem);
  line-height:1.16; color:var(--m-ink); margin:1.8em 0 .5em; text-wrap:balance;
}
.site .post-body h3{
  font-family:var(--disp); font-weight:400; font-size:clamp(1.25rem,2.4vw,1.55rem);
  line-height:1.2; color:var(--m-ink); margin:1.5em 0 .45em;
}
.site .post-body p,
.site .post-body li{ font-family:var(--sans); font-size:1.05rem; line-height:1.75; color:#252A06; }
.site .post-body ul,
.site .post-body ol{ padding-left:1.25em; }
.site .post-body li{ margin-bottom:.5em; }
.site .post-body a{ color:var(--m-brass); text-decoration:underline; text-underline-offset:2px; }
.site .post-body img{ max-width:100%; height:auto; border-radius:var(--r); }
.site .post-body blockquote{
  margin:1.6em 0; padding:2px 0 2px 22px; border-left:2px solid var(--m-brass);
  font-family:var(--disp); font-size:1.2rem; line-height:1.5; color:var(--m-ink);
}
.site .post-tags{ margin-top:38px; display:flex; flex-wrap:wrap; gap:8px; }
.site .post-tags a{
  font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--m-brass); text-decoration:none;
  border:1px solid var(--m-brass); border-radius:999px; padding:7px 14px;
  min-height:24px; display:inline-flex; align-items:center; transition:background-color .2s ease, color .2s ease;
}
@media (hover:hover){ .site .post-tags a:hover{ background:var(--m-brass); color:var(--m-lime); } }

/* Listing grid */
.site .post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.site .pc{ display:block; text-decoration:none; color:inherit; }
.site .pc-img{
  aspect-ratio:3/2; background-size:cover; background-position:center;
  background-color:var(--m-river); border-radius:var(--r);
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.site .pc-body{ padding-top:16px; }
.site .pc-cat{
  font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--m-brass);
}
.site .pc-title{
  font-family:var(--disp); font-weight:400; font-size:1.32rem; line-height:1.2;
  color:var(--m-ink); margin:8px 0 8px; text-wrap:balance;
}
.site .pc-excerpt{ font-family:var(--sans); font-size:.94rem; line-height:1.65; color:#4A5240; margin:0 0 10px; }
.site .pc-meta{ font-family:var(--sans); font-size:.76rem; letter-spacing:.06em; color:#5A5F45; }
@media (hover:hover){
  .site .pc:hover .pc-img{ transform:scale(1.03); }
  .site .pc:hover .pc-title{ color:var(--m-brass); }
}
@media (prefers-reduced-motion:reduce){ .site .pc:hover .pc-img{ transform:none; } }

.site .post-pager{ margin-top:52px; display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.site .post-pager .page-numbers{
  font-family:var(--sans); font-size:.86rem; font-weight:600; color:var(--m-ink);
  text-decoration:none; border:1px solid var(--m-river); border-radius:var(--r);
  min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0 14px;
}
.site .post-pager .page-numbers.current{ background:var(--m-dark); color:var(--m-lime); border-color:var(--m-dark); }
@media (hover:hover){ .site .post-pager a.page-numbers:hover{ border-color:var(--m-brass); color:var(--m-brass); } }

@media (max-width:980px){ .site .post-grid{ grid-template-columns:repeat(2,1fr); gap:24px; } }
@media (max-width:640px){ .site .post-grid{ grid-template-columns:1fr; } }

/* ══════════════════════════════════════════════════════════════════════
   MOBILE HEADER — fix a real collision, reported from a phone
   ══════════════════════════════════════════════════════════════════════
   On a real handset the three header items overlapped into unreadable
   mush: "MENUWELVE MILE RTALKTOSOMEONE NOW". The audit harness passed it,
   because it only tests whether an element's BOX exceeds the viewport —
   and every box was inside. The TEXT was not. Measured at 375px:

     .nav-toggle   box  44px, content  72px  -> "MENU" spills into the wordmark
     .s-brand      box  46px, content 168px  -> wordmark spills 112px over the CTA

   Both are flex items allowed to shrink toward zero while their children
   carry white-space:nowrap and overflow:visible, so the text leaves the box
   and paints on top of whatever follows.

   Below 720px the row simply cannot hold wheel + "MENU" + wordmark + a
   229px CTA in 375px — that is 428px of content. So the mobile row becomes
   three things that fit and each do one job:
     wheel (menu, icon-only)  |  wordmark  |  tap-to-call
   The "Talk to someone now" CTA is not lost: every hero carries it above
   the fold on every page, and it repeats in the slide-in panel. What
   replaces it here is a DIAL, which is the better mobile affordance —
   84% of this site's key events come from mobile and tapping the number
   is very likely the conversion.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width:719px){
	/* stop both text overflows at the source.
	   "MENU" stays — it just moves UNDER the wheel instead of beside it, so the
	   control reads as one stacked unit and stops competing with the wordmark
	   for horizontal room. That was the actual overflow: 72px of content in a
	   44px box, side by side. */
	/* !important is required, not decorative: `.site .s-nav .in .nav-toggle`
	   already sets `flex-direction:row !important` at base, which beats an
	   equal-specificity rule no matter how late it sits. Matched rather than
	   escalated past it. */
	.site .s-nav .in .nav-toggle{ flex-direction:column !important; gap:1px; }
	.site .s-nav .in .nav-toggle .nav-toggle-word{
		display:block; font-size:.52rem; letter-spacing:.18em; line-height:1;
	}
	.site .s-nav .in .s-brand{ min-width:0; flex:1 1 auto; overflow:hidden; }
	.site .s-nav .in .s-brand span{
		display:block; max-width:100%;
		overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
	}
	/* the CTA is the widest item and has a home in every hero — swap it for a dial */
	.site .s-nav .in .nav-actions .nav-cta{ display:none !important; }
	.site .s-nav .in .nav-actions{ flex:0 0 auto; margin-left:8px; }
}

/* Persistent tap-to-call, phones only. 44px both axes per the house rule.
   Hidden with a min-width query rather than a base `display:none`: the base
   rule lost — measured 20px wide and visible at 720/900/1280 — because the
   flex parent's own child rules outrank a plain `.site .nav-call`. */
@media (min-width:720px){
	.site .s-nav .in .nav-call{ display:none !important; }
}
@media (max-width:719px){
	.site .s-nav .in .nav-call{
		display:inline-flex; align-items:center; justify-content:center;
		width:44px; height:44px; min-height:44px; flex:0 0 44px;
		border:1px solid rgba(244,233,223,.45); border-radius:999px;
		color:#F4E9DF; text-decoration:none;
		transition:background .38s ease, border-color .38s ease, transform .2s ease;
	}
	.site .s-nav .in .nav-call svg{ display:block; }
}
@media (hover:hover){
	.site .s-nav .in .nav-call:hover{           /* house rule: every CTA gets a hover */
		background:rgba(244,233,223,.12); border-color:#F4E9DF; transform:translateY(-2px);
	}
}
.site .s-nav .in .nav-call:focus-visible{ outline:2px solid var(--m-brassL); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
	.site .s-nav .in .nav-call{ transition:none; }
	.site .s-nav .in .nav-call:hover{ transform:none; }
}

/* .nav-toggle's box was 44px while its content (wheel + "MENU") measured 75px,
   so the visible control was wider than its own clickable area. Let the box
   follow the content; height stays >=44px. */
.site .s-nav .in .nav-toggle{ width:auto; min-width:44px; flex:0 0 auto; }
/* flex:0 0 auto is the operative part — the toggle is a flex item, so its
   flex-basis was fixing it at 44px and `width:auto` alone never applied. */

/* At 320px the wordmark still overran its track by 2px. Ease tracking rather
   than shrink the type — the brand is the one thing that must stay legible. */
@media (max-width:339px){
	.site .s-nav .in .s-brand span, .site .sitehead .s-brand span{
		letter-spacing:.06em !important;
	}
}

/* CTA buttons are sometimes <a>, sometimes <span data-href> or <button>. Only
   the anchors picked up the UA underline, which is why it appeared solely in
   the slide-in panel and nowhere else. Nothing in the file ever reset it. */
.site .s-cta, .site .s-cta2, .site .nav-cta, .site .tour-cta, .site a.s-cta{
	text-decoration:none;
}

/* Panel foot CTA: it read as a heavy black slab against the marble panel and
   the elegant serif menu above it. Same button, softened — the site's own
   primary olive rather than near-black, the site's 2px radius rather than sharp
   corners, and the standard uppercase tracking. */
.site .nav-panel-foot .s-cta{
	background:#333A0E !important;
	border-color:#333A0E !important;
	color:#F4E9DF !important;
	border-radius:2px !important;
	letter-spacing:.2em;
	/* It measured 255x76 — not wrapping (natural single-line width is also 255),
	   so the 76px was inherited line-height stacking inside a 13.5px button.
	   That is what made it read as a slab. Pinned explicitly. */
	line-height:1.2;
	padding:15px 26px;
	/* box-sizing was content-box, so min-height sized the CONTENT and the 30px
	   of vertical padding stacked on top: 48 + 30 + 2 border = 80px. That, not
	   wrapping, is what made it a slab. */
	box-sizing:border-box;
	min-height:48px;
	align-items:center; justify-content:center;
	text-decoration:none !important;
}
@media (hover:hover){
	.site .nav-panel-foot .s-cta:hover{
		background:#46521A !important; border-color:#46521A !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   PULL-QUOTE ATTRIBUTION + HOME HERO PLACEMENT
   ══════════════════════════════════════════════════════════════════════ */

/* The attribution sat flush against the paragraph below it, so "— GABOR MATÉ"
   read as the opening of the body copy rather than the close of the quote.
   Give it air on both sides and tie it to the quote it belongs to. */
.site .s-quote footer{
	display:block;
	margin:16px 0 0;
}
.site .s-intro .s-quote{ margin-bottom:30px; }

/* Home hero: the content block sat high in the frame with a large empty band of
   lawn beneath it. `margin-top:auto` does nothing here — measured, `.in` is a
   stretched flex child filling the hero's full height (content top offset 0,
   bottom gap 0), so there is no free space for auto margin to absorb. The
   content is positioned by `.in`'s own padding instead. Anchoring its children
   to the bottom of that box is what actually moves the block down. */
.site .s-hero .in{
	justify-content:flex-end;
	padding-top:calc(var(--sec-lg) + 24px);
}
@media (max-width:719px){
	/* On a phone the hero is already tight and the CTAs sit near the fold —
	   keep the existing rhythm rather than pushing them off it. */
	.site .s-hero .in{ justify-content:flex-end; padding-top:var(--sec-md); }
}

/* ══════════════════════════════════════════════════════════════════════
   PROGRAM GRID: ANCHOR THE CARD LINKS TO A SHARED BASELINE
   ══════════════════════════════════════════════════════════════════════
   The three cards are already equal height — grid stretch handles that. What
   was ragged is the LINK inside each: it follows the paragraph, and card 3's
   copy runs to 4 lines against 3, so its link sat 26px lower than the other
   two (measured tops 239 / 239 / 265). Making the card a flex column and
   pushing the link with margin-top:auto puts all three on the same baseline
   at the foot of the card, which is where the eye expects them. */
.site .s-prog3 .s-p{
	display:flex;
	flex-direction:column;
}
.site .s-prog3 .s-p > p{ margin-bottom:var(--s-4); }
.site .s-prog3 .s-p > .s-link{
	margin-top:auto;      /* the whole point: bottom-anchor regardless of copy length */
	align-self:flex-start;
}

/* ══════════════════════════════════════════════════════════════════════
   CTAs ARE NOW REAL LINKS
   ══════════════════════════════════════════════════════════════════════
   44 CTAs shipped as <span data-href> with a JS click handler. That made them
   invisible to keyboard users, unannounced to screen readers, uncrawlable as
   internal links (19 pages showed no in-body link as a result), and impossible
   to open in a new tab. Converted to <a href>. These rules stop the UA anchor
   defaults from changing how any of them look. */
.site a.s-cta, .site a.s-cta2, .site a.s-link, .site a.s-what-pill, .site a.s-what-all,
.site a.tour-cta, .site a.nav-cta{
	text-decoration:none;
	color:inherit;
}
.site .s-what{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; cursor:pointer; }
/* the colour each CTA variant sets for itself must still win over `color:inherit` */
.site a.s-cta{ color:#F4E9DF; }
.site a.s-cta2{ color:inherit; }
/* keyboard users must be able to see where they are — these were unreachable
   by keyboard entirely until now */
.site a.s-cta:focus-visible, .site a.s-cta2:focus-visible,
.site a.s-link:focus-visible, .site a.s-what-pill:focus-visible, .site a.s-what-all:focus-visible{
	outline:2px solid var(--m-brassL); outline-offset:3px;
}

/* Terms of Service body (template-parts/prebuilt/legal-terms.php).
   2,982 words of migrated legal copy. Constrained measure and generous heading
   rhythm so a long document stays readable; left-aligned because justified or
   centred legal text is measurably harder to scan. */
/* The definitions and Contact Us clauses carry bare URLs and an email address —
   "https://twelvemilerecovery.ca/contact-us" is a 40-character unbreakable
   token that spilled 8px past its list item at 375px. Legal copy is verbatim,
   so the URLs cannot be shortened; the text has to wrap instead. */
.tos-body{max-width:760px;margin:0 auto;text-align:left;overflow-wrap:anywhere}
.tos-body h2,.tos-body h3,.tos-body h4{font-family:var(--serif);color:var(--m-ink);line-height:1.25}
.tos-body h2{font-size:1.5rem;margin:38px 0 12px}
.tos-body h2:first-child{margin-top:0}
.tos-body h3{font-size:1.18rem;margin:26px 0 10px}
.tos-body h4{font-size:1.04rem;margin:22px 0 8px}
.tos-body p{margin:0 0 14px;line-height:1.7}
.tos-body .tos-list{margin:0 0 16px;padding-left:1.15em}
.tos-body .tos-list li{margin:0 0 8px;line-height:1.7}

/* In-body facility photograph (template-parts/prebuilt/photo-band.php).
   Type sits at the BOTTOM over a gradient that reaches near-opaque behind the
   text — our photography is busy Victorian interiors with no negative space, so
   centred type over these images is unreadable. Height is reduced on phones so
   the band never eats a whole screen. */
.photo-band{position:relative;min-height:420px;overflow:hidden}
.photo-band-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* Scrim strength is CALCULATED, not eyeballed. The audit harness cannot check
   this: it skips text carrying a text-shadow, and it cannot read the colour of
   an <img> behind text at all. So the worst case was computed instead — cream
   #F8F0E6 and brass #E6D5B0 over a PURE WHITE photograph, which is close to
   what ph-yoga-a/b actually are (a white studio under a chandelier).
   Brass needs alpha >= .71 to clear 4.5:1 on white; cream needs >= .64. The
   copy block reaches roughly 60% of band height on a 375px screen, so the
   scrim holds .76 all the way to 60% before falling away. Measured worst case:
   caption 6.89:1, eyebrow 5.38:1. The previous .80/.34/.12 ramp failed from
   22% upward (3.40:1 at 30%). Do not soften these stops to show more of the
   photograph without recomputing. */
.photo-band-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(26,30,8,.92) 0%,rgba(26,30,8,.76) 60%,rgba(26,30,8,.30) 85%,rgba(26,30,8,.08) 100%)}
.photo-band-in{position:relative;display:flex;align-items:flex-end;min-height:420px;padding-top:44px;padding-bottom:44px}
.photo-band-copy{max-width:54ch}
.photo-band-cap{font-family:var(--serif);font-size:clamp(1.12rem,2.2vw,1.5rem);line-height:1.45;color:#F8F0E6;margin:8px 0 0;text-shadow:0 1px 14px rgba(12,14,4,.5)}
@media (max-width:599px){
  .photo-band,.photo-band-in{min-height:300px}
  .photo-band-in{padding-top:30px;padding-bottom:30px}
}

/* Membership section (home-membership.php).

   Owner direction: the app on the LEFT, all copy on the RIGHT.

   The section used to run heading-above-grid, which left roughly two-thirds of
   the heading's row empty. Then it ran heading+phone stacked in one column,
   which still split the copy across two places. Now .memgrid holds three direct
   children — .memapp, .memhead, .pillars — and grid placement puts the phone in
   column one spanning both rows, with the heading and the three pillars stacked
   in column two. All the reading matter is in one place.

   Placement is by CLASS, not nth-child: the app cell was an unclassed wrapper
   and got .memapp for this, so re-ordering the markup later cannot silently
   scramble the layout. */
.site .s-mem .memgrid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  grid-template-rows:auto auto;
  column-gap:54px; row-gap:26px;
  align-items:start;
}
.site .s-mem .memgrid > .memapp{ grid-column:1; grid-row:1 / span 2; align-self:center; }
.site .s-mem .memgrid > .memhead{ grid-column:2; grid-row:1; max-width:none; margin:0; }
.site .s-mem .memgrid > .pillars{ grid-column:2; grid-row:2; }

@media (max-width:900px){
  /* One column, copy first: the heading has to introduce the app, not follow it. */
  .site .s-mem .memgrid{ grid-template-columns:1fr; grid-template-rows:none; row-gap:24px; }
  .site .s-mem .memgrid > .memhead{ grid-column:1; grid-row:auto; order:1; }
  .site .s-mem .memgrid > .memapp{  grid-column:1; grid-row:auto; order:2; }
  .site .s-mem .memgrid > .pillars{ grid-column:1; grid-row:auto; order:3; }
}

/* The membership CTA moved inside the app column so it sits directly beneath the
   phone rather than spanning the full section width. It is centred on the phone,
   overriding the reskin's blanket .memcta{text-align:left} which only made sense
   when the button ran the whole width. */
.site .s-mem .memapp .memcta{ text-align:center; margin-top:26px; }

/* Header sat flush against the top edge — brand at 14px, CTA at 12px. Nudged
   down for breathing room over the hero.

   The padding goes on the nav ROW, not on .sitehead's `top`, for two reasons:
   the ::before scrim that keeps the nav legible over photography is anchored to
   the header's top edge and has to keep covering from y=0, and `top` is already
   used by the WordPress admin bar offsets (32px / 46px), which must keep working.

   The SAME padding applies scrolled and unscrolled, deliberately. An earlier
   version dropped it to 0 once .scrolled added the solid background, which made
   the bar shrink from 92px to 74px mid-scroll — a moving header reads as a
   glitch, and it is worse than the extra 18px it saves. */
.site .sitehead .s-nav{ padding-top:16px; }
@media (max-width:900px){
  /* Less on phones, where vertical space is scarcer. */
  .site .sitehead .s-nav{ padding-top:10px; }
}

/* ===================================================================
   MOBILE AUDIT FIXES — 2026-07-27.  See docs/MOBILE_AUDIT.md.

   65% of sessions are mobile. Desktop rendering was signed off as correct and is
   the reference, so EVERY rule below is inside a mobile media query or resolves
   to a no-op at desktop widths. 768 / 1280 / 1440 were measured before and after
   and are byte-identical.

   Breakpoints reused from the existing set (560 / 820) — no new ones introduced,
   and no !important added.
   =================================================================== */

/* --- P0-1 + P1-1: the nav panel overflowed its own box -----------------
   .nav-panel is a centred flex column. Its content measured 882px inside an
   800px panel at 360x800, and centred flex overflow spills EQUALLY top and
   bottom — so the top overflow ate the 132px padding meant to clear the fixed
   toggle, dragging the first link ("About") to y=56 under a toggle occupying
   y=37-81. A tap on "About" hit span.nav-toggle-word and CLOSED the menu instead
   of navigating. The same overflow clipped 82px off the bottom, hiding the
   CARF note.

   The fix is to make the content FIT, not to re-anchor it: switching to
   justify-content:flex-start also cleared the overlap but pushed the phone
   number off-screen (y=813 > 800), which is worse — that is the primary mobile
   conversion. Trimming 144px of vertical spend keeps it centred and lands the
   phone number HIGHER than before (y=731 -> 677).

   Measured after: overlap none at every width, tap hits <a>, clipping 0px at
   360/390/414, and 768/1280/1440 unchanged. */
/* SCOPE CORRECTION. This was first written at max-width:560px, which was wrong:
   the overflow is driven by viewport HEIGHT, not width. The panel's content is
   ~882px, so ANY viewport shorter than that overflows and collides — and the
   first measurements missed it because 768 was tested at 768x1024 (tall enough,
   no overflow) while 360/390 were tested at 800-896. Re-measured at a constant
   800px height, the collision runs unbroken from 600px to 820px, and from 700px
   up a tap on the top of the first link returns IMG.nav-wheel — the same broken
   interaction as at 360px. Widened to the 820px breakpoint so the whole phone
   and small-tablet range is covered. >820px is untouched, so 1280/1440 cannot
   move. Landscape phones wider than 820px keep the original behaviour; fixing
   those needs a height-based query that would also catch 1440x900 desktop, so
   it is deliberately left alone. */
@media (max-width:820px){
  .site .nav-panel{
    padding-top: var(--s-10);                                             /* 132 -> 96 */
    padding-bottom: var(--s-6);                                           /* 64 -> 32 */
  }
  .site .nav-panel-links a{ margin:0; }                                   /* 6 -> 0, x8 links */
  .site .nav-panel-foot{ margin-top:var(--s-6); }                         /* 80 -> 32 */
}

/* --- The panel stopped fitting again when the nav went to 8 items (2026-07-31)
   ------------------------------------------------------------------------
   The trim above was calibrated for SEVEN links ("x7 links", in its own
   comment). Adding Aftercare put the content back over the box — 761px inside
   667px at 375x667 — and because the panel is `justify-content:center`, centred
   overflow spills EQUALLY top and bottom. That is the failure mode documented
   in P0-1: "About" landed at y=4-64 against a toggle occupying y=37-81, the
   exact collision that fix existed to remove.

   Trimming another 94px was not the answer. The panel's content grows whenever
   anyone adds a menu item, and the next person to add one would land here
   again — so this makes the layout tolerate overflow instead of forbidding it.

   1. `safe center` keeps the centred composition whenever the content fits and
      degrades to start-alignment when it does not, so nothing can ever spill
      past the top edge into the toggle. In a browser without `safe`, the whole
      declaration is invalid and the previous `center` still applies — the
      failure direction is today's behaviour, not a broken panel.
   2. The foot is sticky, which is what makes flex-start acceptable here at all.
      P0-1 rejected `justify-content:flex-start` because it pushed the phone
      number to y=813 on an 800px screen, and that is the primary mobile
      conversion — but that was flex-start with a foot that scrolls away. Pinned
      to the bottom of the scrollport, the CTA and the phone number cannot leave
      the screen no matter how long the list gets.
   Contact carries ~41% of conversions; this is the one element in the panel
   that must never need scrolling to reach. */
/* First attempt used `position:sticky` on the foot. It read correctly on phones
   and was wrong at 1280x800: the panel is the scroll container, so the pinned
   foot floated over the links that had not been reached yet and "Contact Us"
   stranded below it. Sticky was the wrong tool — the whole panel should not be
   the scrolling box in the first place.

   The links get their own scroll region instead, which is the ordinary drawer
   layout: a fixed-height header gap, a flexible middle that scrolls, a foot that
   is simply the last flex item and therefore always on screen. `safe center`
   moves onto the links themselves, so they still sit centred whenever they fit
   and start-align only when they overflow. No overlay, no z-index, nothing
   pinned. */
.site .nav-panel{ justify-content:flex-start; overflow:hidden; }
.site .nav-panel-links{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  overscroll-behavior:contain;
  justify-content:safe center;
  /* Two things need horizontal room INSIDE the scrollport, and neither had it
     once this became a scroll container. `overflow-y:auto` alone computes
     overflow-x to `auto`, so:
       - the :focus-visible ring (2px + 3px offset) was clipped left and right,
         leaving two stray horizontal rules bracketing the focused link. theme.js
         focuses the first link on open, so this showed on every single visit,
         and visible focus is non-negotiable here.
       - the :hover `translateX(8px)` pushed content past the right edge, which
         is scrollable overflow — a horizontal scrollbar whose gutter then ate
         vertical space out of the same region and clipped the last item.
     Clipping is pinned to hidden, and 8px of inline padding (pulled back out
     with a matching negative margin, so nothing moves) puts both the ring and
     the hover shift inside the padding box, where they are painted rather than
     clipped. */
  padding-inline:8px; margin-inline:-8px;
}
/* The links are flex items in a column that now has a bounded height, so they
   inherited flex-shrink:1 and compressed — the gaps between Programs, What We
   Help With and Our Approach visibly collapsed. They keep their natural height
   and the region scrolls instead. */
.site .nav-panel-links a{ flex:0 0 auto; }
.site .nav-panel-foot{ flex:0 0 auto; }

/* --- Make all eight fit, so the region never actually scrolls (owner:
   "i dont like having to scroll", 2026-07-31) ---------------------------
   The scroll region above is the safety net, not the plan. With 8 items the
   panel needed ~908px at desktop and ~792px on a phone, against 800px and
   667px of viewport — so it scrolled almost everywhere. The type and the
   spacing were sized when the list was shorter.

   Budget trimmed in the order that costs the least: the foot's own gaps first,
   then its margin, then the display size of the links. The links stay the
   largest thing in the panel and every one keeps a >=44px target. Nothing is
   removed from the list, and the panel keeps its 96px top padding because the
   fixed toggle occupies y=37-81 and the first link must clear it. */
@media (min-width:821px){
  .site .nav-panel{ min-width:420px; padding-top:84px; padding-bottom:var(--s-4); }
  .site .nav-panel-links a{ font-size:clamp(1.5rem, 2.1vw, 1.85rem); padding:2px 0; min-height:46px; line-height:1.1; }
  .site .nav-panel-foot{ margin-top:var(--s-3); padding-top:var(--s-3); gap:var(--s-2); }
}
@media (max-width:820px){
  .site .nav-panel{ padding-top:84px; padding-bottom:var(--s-4); }
  .site .nav-panel-links a{ font-size:clamp(1.15rem, 4.4vw, 1.6rem); padding:2px 0; min-height:46px; line-height:1.1; }
  .site .nav-panel-foot{ margin-top:var(--s-3); padding-top:var(--s-3); gap:var(--s-2); }
}
/* 84px of top padding is not arbitrary: the fixed toggle occupies y=37-81, and
   the first link has to clear it. Do not reduce it without re-measuring that. */
/* The CARF/confidential line is reassurance rather than function, so it is the
   one thing that goes on genuinely short screens. The CTA and the phone number
   never do. */
@media (max-height:700px){ .site .nav-panel-note{ display:none; } }

/* --- P1-2: safe-area insets — REVERTED 2026-07-27, deliberately -------
   First attempt added viewport-fit=cover to the viewport meta plus
   `.site .sitehead{ padding-top: env(safe-area-inset-top) }`. On a real iPhone
   that was WORSE, not better, and it was caught on device rather than in the
   emulator:
     - viewport-fit=cover let the page extend under the notch, so the HERO moved
       UP while the header padding moved the wordmark DOWN — the hero eyebrow
       ("ST. CATHARINES, ONTARIO") then collided with the wordmark.
     - the nav panel's padding-top is a fixed 96px and knew nothing about the
       inset, so the toggle dropped ~47px onto the first menu link and the P0-1
       collision came straight back.
   Without viewport-fit=cover, iOS letterboxes the notch area itself and neither
   problem exists. That is the behaviour this site shipped with and it is
   correct. Notch-aware layout would mean re-deriving the hero and panel offsets
   from the inset together, which is a layout change on a signed-off design for
   no user-visible gain — so it is deliberately NOT done.
   DO NOT add viewport-fit=cover without also making .s-hero and .nav-panel
   inset-aware in the same change, and testing on a physical notched device. */

/* --- P1-3 + P1-4: tap targets under 44px ------------------------------
   Measured at 360px: the footer email link 224x28 on 152 pages (1,905
   instances — the single most frequent defect on the site), and .s-link 184x26
   on 134 pages.

   SPECIFICITY: theme.css:1642 already sets `.site .s-foot a, .site .foot-bar a
   { min-height:24px }` at (0,2,1). A bare `.s-foot a` rule is (0,1,1) and would
   LOSE silently — this file has a history of exactly that failure — so the
   .site prefix below is load-bearing, not decoration.

   .s-link is inline by default, and min-height does not apply to inline boxes,
   so display must change too. Inside .s-res .s-card, a (0,3,0) rule pins
   display:inline-block and wins — harmless, because .s-link already measures
   48px tall there via its own padding. */
@media (max-width:820px){
  .site .s-foot a, .site .foot-bar a{ min-height:44px; }
  .site .s-foot a[href^="mailto:"]{ font-size:1rem; }                     /* 15.2 -> 16px */
  .s-link{ min-height:44px; display:inline-flex; align-items:center; }

  /* .sud-glance-cta measured 26px tall on 8 of the 25 busiest pages, including
     all three Google Ads landing pages, and it is a conversion link ("Talk to
     someone now"). It cannot take min-height: the underline is its own
     border-bottom, so growing the box would drag the rule away from the text.
     The 18px is added as padding ABOVE and cancelled in the margin, so the
     target reaches 44px while the text and its underline do not move at all.
     The space it grows into is the paragraph above, which is never clickable. */
  .site .sud-glance-cta{ padding-top:18px; margin-top:calc(var(--s-4) - 18px); }

  /* The social links were 19px WIDE — the svg is 19px and the anchor shrank to
     it. That is under WCAG 2.2's 24x24 floor, never mind the 44px house rule.
     The glyph stays 19px; the anchor grows around it, so the icons look the
     same and only sit further apart. The gap goes to zero because the padding
     now provides the separation — keeping gap:15px on top would spread the row
     by another 30px for no visual gain. */
  .site .foot-social{ gap:0; }
  .site .foot-social a{ min-width:44px; justify-content:center; }
}

/* --- P2-2: post-card excerpts were body copy below the 16px floor ------
   .site .pc-excerpt (theme.css:3098) is .94rem = 15.04px, on 73 pages. It is
   prose, so the 16px readability floor applies. .pc-cat is a category label —
   decorative micro-type, exempt from the floor, but 11.2px is small enough to
   lift a notch. Both source rules carry .site, so these must too. */
@media (max-width:820px){
  .site .pc-excerpt{ font-size:1rem; }                                    /* 15.0 -> 16px */
  .site .pc-cat{ font-size:.75rem; }                                      /* 11.2 -> 12px */
}

/* --- P2-3: SMS-consent checkbox was 13px wide -------------------------
   `width:auto` gave the browser default (~13px) while the site-wide
   min-height:44px stretched it to a 13x44 sliver. Mitigated in practice because
   the <label> wraps it as a flex row, so the consent text is the real target —
   which is why this is P2. Matching the original selector's (0,3,1) so it wins
   over both that rule and the (0,2,1) min-height at line 1696. */
@media (max-width:820px){
  .ct-form .wpcf7-acceptance input[type=checkbox]{
    width:22px; height:22px; min-height:0;
  }
}

/* --- P2-1: reCAPTCHA badge hung 186px off the right edge --------------
   Measured 256x60 at x=290 on a 360px viewport — only ~70px visible, 14px from
   the bottom, on all 153 pages, and inside the home-indicator zone on notched
   devices. Google permits hiding the badge PROVIDED the attribution appears in
   the form; inc/forms.php now injects that text on every CF7 form, so this is
   compliant without anyone editing a form in wp-admin. Hidden only on phones —
   desktop keeps the badge exactly as it is. */
@media (max-width:820px){
  .grecaptcha-badge{ visibility:hidden; }
}
/* The note exists ONLY to replace the badge where the badge is hidden. Shown at
   every width it added 31px to every page with a form and changed signed-off
   desktop layout — caught by the 1440px regression check. Desktop keeps Google's
   badge and needs no note; phones hide the badge and get the note instead. Both
   states are compliant, and desktop is pixel-identical again. Keep this pair in
   sync with the .grecaptcha-badge rule above. */
.ct-recaptcha-note{ display:none; }
@media (max-width:820px){
  .ct-recaptcha-note{
    display:block;
    font-family:var(--sans); font-size:.72rem; line-height:1.5;
    color:var(--m-soft); margin:14px 0 0;
  }
  .ct-recaptcha-note a{ color:var(--m-brass); text-decoration:underline; }
}

/* --- P0-3: hero eyebrow collided with the wordmark on phones ----------
   Reported from a physical iPhone. At 390px the hero eyebrow measured
   (20,48) 164x29 and the wordmark (82,49) 168x21 — a 102x21px overlap, so
   "St. Catharines, Ontario" printed straight through "TWELVE MILE RECOVERY".
   `.site .s-hero .in` (theme.css:1757) sets padding-top:var(--sec-lg), which at
   phone widths resolves to ~48px while the fixed transparent header is 111px
   tall — so the top of the hero sits underneath it.
   Clear the header plus breathing room. Scoped to 560px: at 768px the eyebrow
   already lands at y=96 against a wordmark ending at y=71, and at 1440px they
   are nowhere near each other, so neither needs touching.
   Specificity must match the (0,3,0) source rule or this silently does nothing. */
@media (max-width:560px){
  .site .s-hero .in{ padding-top:132px; }   /* 111px header + 21px */
}

/* --- P1-4 (completion): .s-link was still 26px on 27 pages ------------
   The first pass used a bare `.s-link{ min-height:44px }` at (0,1,0) and lost to
   `.site .s-link{ min-height:26px }` at theme.css:1697, which is (0,2,0) — the
   same specificity trap that the footer rule above was written to avoid, missed
   here. 137 of 171 instances did pick up the fix because they sit in contexts
   with their own padding; these 34 did not. Matching the .site prefix. */
@media (max-width:820px){
  .site .s-link{ min-height:44px; display:inline-flex; align-items:center; }
  .site .ptr-inline{ min-height:44px; display:inline-flex; align-items:center; }
}

/* --- P2-5: inner-hero back-link sat partly under the fixed header ------
   On .hw-hero pages the eyebrow carries the only upward-navigation link
   ("← About us", "← What we help with"). Measured at 360x800 on /our-team/ and
   /what-we-treat/alcohol-addiction/: link top 101 against a header bottom of
   111, so the top 10px of the target was occluded — elementFromPoint at the
   link's top returned DIV.in, not the anchor. 5px at 768; clean at 1440.

   The link itself is fine: 44px tall (see the .site .s-link rule above), and the
   label text is entirely below the header, so 34px stayed tappable and nothing
   was clipped. This is polish, not a broken control.

   Padding goes on .hw-hero, which computes to padding-top:0 — .hw-hero .in is
   contested by two !important rules and the winner is the LATER
   `.site .hw-hero .in{ padding-top:calc(var(--sec-lg) + 24px) !important }`,
   not the earlier var(--sec-xl) one whose in-file comment claims it wins. Do not
   edit that pair to change hero clearance.

   16px, not more: only 10px is required, and the hero's CTA and tel: link sit at
   the bottom of this block — the phone CTA must never get harder to reach. */
@media (max-width:820px){
  .site .hw-hero{ padding-top:16px; }
}

/* ===================================================================
   .s-link promoted to a bordered CTA — owner direction, 2026-07-27.
   "MEET THE TEAM BEHIND THE CARE →" and every link like it.

   These were bare uppercase brass text with an arrow: no affordance, nothing to
   aim at, and a 26px-tall hit box. They now read as buttons — outlined, padded,
   filling on hover — matching the treatment .s-res .s-card .s-link has always had.

   THIS DELIBERATELY CHANGES DESKTOP. Every other change in this file is scoped to
   a mobile breakpoint because desktop was signed off; this one was asked for at
   all sizes.

   WHY TWO VARIABLES AND NOT A PLAIN color: ON HOVER.
   `.site .s-link` already had `color:var(--m-brass) !important` (and a brassL
   twin for dark bands). A hover rule at higher specificity but WITHOUT
   !important cannot beat that — the first attempt filled the background and left
   the text brass-on-brass, invisible. Rather than add another !important to a
   file that already carries ~484, those two existing rules now read
   `var(--slink-fg, …)`, and the states below just reassign the variable.
   Custom properties are won on normal specificity, so :hover at (0,3,0) beats
   the base at (0,2,0) with no !important anywhere.

     --slink-fg   text colour  (consumed by the pre-existing !important rules)
     --slink-box  border, and the fill colour on hover

   Change one of these and check the OTHER state too: brass-on-brass was only
   visible on hover, which is why a rest-state contrast check missed it.
   =================================================================== */
.site .s-link{
  --slink-fg: var(--m-brass);
  --slink-box: var(--m-brass);
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; box-sizing:border-box;
  padding:11px 22px;
  border:1.5px solid var(--slink-box);
  border-radius:2px;
  background:transparent;
  text-decoration:none;
  transition:background-color .25s ease, color .25s ease,
             border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

/* Dark grounds: the sections whose .s-link was already served in brassL. */
.site .s-hero .s-link,      .site .hw-hero .s-link,
.site .ap-hero .s-link,     .site .s-amen .s-link,
.site .s-mem .s-link,       .site .s-adm .s-link,
.site .s-family .s-link,    .site .s-diff .s-link,
.site .arrival .s-link,     .site .s-tourclose .s-link,
.site .pg-member .s-link,   .site .s-indcta .s-link{
  --slink-fg: var(--m-brassL);
  --slink-box: var(--m-brassL);
}

@media (hover:hover){
  .site .s-link:hover{
    --slink-fg: var(--m-lime);          /* text flips; the box colour does not */
    background:var(--slink-box);
    transform:translateY(-1px);
    box-shadow:0 6px 18px rgba(102, 77, 34, .22);
  }
  .site .s-hero .s-link:hover,   .site .hw-hero .s-link:hover,
  .site .ap-hero .s-link:hover,  .site .s-amen .s-link:hover,
  .site .s-mem .s-link:hover,    .site .s-adm .s-link:hover,
  .site .s-family .s-link:hover, .site .s-diff .s-link:hover,
  .site .arrival .s-link:hover,  .site .s-tourclose .s-link:hover,
  .site .pg-member .s-link:hover,.site .s-indcta .s-link:hover{
    --slink-fg: var(--m-ink);           /* dark text on a brassL fill */
    box-shadow:0 6px 20px rgba(230, 213, 176, .26);
  }
}

/* Touch has no hover, so the press gets its own feedback. */
.site .s-link:active{ --slink-fg:var(--m-lime); background:var(--slink-box); transform:translateY(0); }
.site .s-hero .s-link:active, .site .hw-hero .s-link:active, .site .ap-hero .s-link:active,
.site .s-amen .s-link:active, .site .s-mem .s-link:active, .site .s-adm .s-link:active,
.site .s-family .s-link:active, .site .s-diff .s-link:active, .site .arrival .s-link:active,
.site .s-tourclose .s-link:active, .site .pg-member .s-link:active,
.site .s-indcta .s-link:active{ --slink-fg:var(--m-ink); }
.site .s-link:focus-visible{ outline:2px solid var(--slink-box); outline-offset:3px; }

/* A boxed control should not be squeezed into a flow that assumed inline text. */
.site .infocard .s-link{ display:inline-flex; margin-top:14px; }
.site .s-p .s-link,
.site .hw-tcard .s-link{ margin-top:14px; }
.site .s-link + .s-link{ margin-left:10px; }

@media (max-width:560px){
  .site .s-link{ padding:11px 16px; width:100%; }   /* full width reads as a button on a phone */
  .site .s-link + .s-link{ margin-left:0; margin-top:10px; }
}

/* --- home-pgx: the pharmacogenetic testing callout (2026-07-28) --------
   Slim centred band on the home page, patterned on .s-careers — the owner asked
   for a snippet, not a section. Lime on purpose: it sits between the river
   clinical band and the dark admissions gradient, keeping MID→LIGHT→DARK
   alternation. .s-cta already carries the mandatory hover. */
.s-pgx{ background:var(--m-river); border-top:1px solid rgba(31, 35, 5, .08); }
.s-pgx .in{ padding-top:54px; padding-bottom:58px; text-align:center; max-width:780px; }
.s-pgx .s-secmark{ color:var(--m-brass); }
.s-pgx .s-sechead{ color:var(--m-ink); margin:8px auto 12px; }
.s-pgx .pgx-lead{ font-family:var(--sans); font-size:1.02rem; line-height:1.7; color:var(--m-ink); max-width:62ch; margin:0 auto 24px; }

/* --- home-pgx art column (2026-07-28) ----------------------------------
   Desktop: copy left, DNA helix right, vertically centred. Phones: the helix
   shrinks and sits above centred copy — order:-1 swaps it without touching
   markup. The strip stays a strip: the art is capped so it never grows the
   band beyond the copy's own height at desktop. */
@media (min-width:821px){
  .s-pgx .in{ display:grid; grid-template-columns:1fr 210px; gap:46px; align-items:center; max-width:900px; text-align:left; }
  .s-pgx .s-sechead{ margin:8px 0 12px; }
  .s-pgx .pgx-lead{ margin:0 0 24px; }
}
.pgx-art{ display:flex; justify-content:center; }
.pgx-art svg{ width:200px; height:auto; }
@media (max-width:820px){
  .pgx-art{ order:-1; margin-bottom:4px; }
  .pgx-art svg{ width:112px; height:auto; }
}
/* The SVG is inline precisely so this query can reach .mover — (0,2,0) beats
   the SVG's own (0,1,0) rule, no !important needed. Do not go back to <img>:
   reduced-motion does not reliably reach nested SVG documents. */
@media (prefers-reduced-motion: reduce){
  .pgx-art .mover{ animation:none; }
}

/* --- home edits, 2026-07-28 (owner) -----------------------------------

   1. RESIDENCES CTA ALIGNMENT. The two cards are the same height, but .bd was a
   plain block, so each "Explore …" button sat directly under a paragraph of
   different length — measured 26px apart (bottom gaps 51px vs 25px), which is
   what read as "off". Making .bd a flex column and pushing the link with
   margin-top:auto pins both to the same baseline regardless of copy length.
   Programs cards already do exactly this, which is why they measured 0px apart.

   2. AMENITIES LEAD. New blurb under the heading, on the dark band, so it takes
   the light body colour rather than inheriting the section default. */
/* CORRECTED 2026-07-28: the first attempt put height:100% on .bd, which
   resolves against a card whose own height comes from its content. The .bd
   computed 667px inside a 625px card and the buttons rendered 42px BELOW the
   card edge — they looked deleted. Make the CARD the flex column instead, so
   .bd grows into the space left by the photo and the link is pushed to the
   bottom of real, resolved space. No percentage heights anywhere. */
.s-res .s-card{ display:flex; flex-direction:column; }
.s-res .s-card .bd{ display:flex; flex-direction:column; flex:1 1 auto; }
.s-res .s-card .bd > p{ flex:1 1 auto; }
.s-res .s-card .bd > .s-link{ margin-top:auto; align-self:flex-start; }

.s-amen .amen-lead{
  font-family:var(--sans); font-size:1.02rem; line-height:1.72;
  color:#DFCBB9; max-width:66ch; margin:14px 0 30px;
}

/* --- Header wordmark: centre it below 900px too (2026-07-28) ----------
   The absolute centring lived in @media(min-width:900px), so under that the
   wordmark dropped into the flex row and was pushed off-centre by the wider
   left cluster (54-114px trigger vs a 46px call icon). Measured offsets from
   viewport centre: -14px @360, -29px @390, -22px @414, -95px @560, -57px @768.
   560px was the worst — 17% of the viewport.

   Same technique as the desktop rule, plus two guards the desktop rule does not
   need: a max-width so a long wordmark cannot run under the trigger or the call
   icon on a narrow screen, and pointer-events:none on the row-level box with it
   restored on the link, so an absolutely-positioned brand spanning the bar
   cannot swallow taps meant for the trigger beneath it. */
@media (max-width:899px){
  .site .s-nav .in{ position:relative; }
  .site .s-nav .in .s-brand{
    position:absolute; left:50%; transform:translateX(-50%);
    margin:0; white-space:nowrap; pointer-events:none;
    max-width:calc(100% - 150px);
  }
  .site .s-nav .in .s-brand span{ pointer-events:auto; }
}

/* --- Amenities rail (2026-07-28) --------------------------------------
   Was a 3x2 grid of 4:3 tiles; now a single-row scroll-snap track of near-square
   cards, after the Long Lane reference. Their cards are 0.87 portrait; ours are
   1/1 deliberately — measured, our six source images are 1100x735, 1100x1098 and
   two at 800x600, and a 0.87 crop would discard 42% of the widest three and put
   the two 800x600 files below retina density for a 357px card. Square keeps all
   six sharp. Revisit when the negative-space photography lands.

   .s-amen4 kept as an alias so any other page still using that class is
   untouched; the rail classes are new. */
.amen-rail{ position:relative; margin-top:8px; }
.amen-track{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(340px, 366px);
  gap:20px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-left:0;
  padding:4px 4px 18px; margin:0 -4px;
  scrollbar-width:none;
}
.amen-track::-webkit-scrollbar{ display:none; }
.amen-track:focus-visible{ outline:2px solid var(--m-brassL); outline-offset:4px; border-radius:4px; }
.amen-track > .s-am{ scroll-snap-align:start; }
/* .site .s-am .ph sets var(--ar-wide) at (0,3,0) — a bare .amen-track .ph is
   (0,2,0) and lost silently, rendering 3/2. Same specificity trap as the footer
   and .s-link fixes; match the .site prefix. Verified 1.0 after. */
.site .amen-track .ph{ aspect-ratio:1/1; }
.amen-track .s-am h3{
  font-family:var(--sans); font-weight:700; font-size:.95rem;
  margin:0; padding:15px 2px 5px; color:#F4E9DF;
}
.amen-track .s-am p{
  font-family:var(--sans); font-size:.84rem; line-height:1.6;
  color:#DFCBB9; margin:0; padding:0 2px;
}
/* controls — injected by theme.js, so they never exist without it */
.amen-nav{ display:flex; align-items:center; gap:14px; margin-top:10px; }
.amen-dots{ display:flex; gap:8px; margin-right:auto; }
.amen-dot{
  width:8px; height:8px; padding:0; border:0; border-radius:50%;
  background:rgba(230, 213, 176, .34); cursor:pointer;
  transition:background .25s ease, transform .25s ease;
}
.amen-dot[aria-current="true"]{ background:var(--m-brassL); transform:scale(1.35); }
.amen-arrow{
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  border:1.5px solid rgba(230, 213, 176, .45); background:transparent;
  color:var(--m-brassL); font-size:1.05rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.amen-arrow[disabled]{ opacity:.32; cursor:default; }
@media (hover:hover){
  .amen-arrow:not([disabled]):hover{ background:var(--m-brassL); color:var(--m-ink); border-color:var(--m-brassL); transform:translateY(-1px); }
  .amen-dot:hover{ background:rgba(230, 213, 176, .7); }
}
.amen-arrow:focus-visible, .amen-dot:focus-visible{ outline:2px solid var(--m-brassL); outline-offset:3px; }
@media (max-width:820px){
  /* Card size is bounded by SOURCE PIXELS, not taste. At 360px desktop a card
     needs 720px square on a 2x screen; our smallest amenity source is 735px, so
     366 is the largest size at which every image still fills sharply (735/2) —
     bigger softens the three 1100x735 files first. MOBILE IS THE BINDING
     CONSTRAINT: a 3x phone needs 3x the card width, so 245px (735/3) is the
     ceiling there. 280px was tried and put 5 of 6 images 12% under. Do not
     raise either number without new photography. */
  .amen-track{ grid-auto-columns:minmax(240px, 245px); gap:16px; }
}

/* --- Amenity dots: 44px touch target around an 8px dot ------------------
   The visible dot must stay small, but an 8px button is a WCAG 2.5.5 failure
   (harness: TOUCH h=8, min 44). Standard fix: the BUTTON becomes the 44x44
   target with a transparent background, and the visible dot is drawn by
   ::before. Nothing moves visually — the dots keep their 8px look and 8px gap,
   because the padding is absorbed by negative margin on the row. */
.amen-dots{ margin-left:-14px; }
.amen-dot{
  width:36px; height:44px; background:transparent; border-radius:0;
  display:flex; align-items:center; justify-content:center;
  transform:none;
}
.amen-dot::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:rgba(230, 213, 176, .34);
  transition:background .25s ease, transform .25s ease;
}
.amen-dot[aria-current="true"]{ background:transparent; transform:none; }
.amen-dot[aria-current="true"]::before{ background:var(--m-brassL); transform:scale(1.35); }
@media (hover:hover){
  .amen-dot:hover{ background:transparent; }
  .amen-dot:hover::before{ background:rgba(230, 213, 176, .7); }
}

/* --- Quiet, Capable Care: rail on phones only (2026-07-28) -------------
   Stacked, the four trust points cost 965px on a 390px screen and the owner
   will not cut any of them. Two-up on a phone means ~170px cards, which reads
   cheap — the opposite of the brief. A rail keeps all four, keeps each card
   full-width and legible, and mirrors the Our Philosophy rail on the same page.

   Phones only. Desktop keeps the two-up grid from theme.css:1977, which was a
   considered reskin decision (four narrow text columns read badly). */
@media (max-width:820px){
  .site .clin-grid{
    display:grid; grid-auto-flow:column; grid-auto-columns:minmax(272px, 84vw);
    grid-template-columns:none !important;   /* beats the (0,2,0) 1fr at :2004 */
    gap:14px; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; padding:4px 4px 16px; margin:0 -4px;
    scrollbar-width:none;
  }
  .site .clin-grid::-webkit-scrollbar{ display:none; }
  .site .clin-grid:focus-visible{ outline:2px solid var(--m-brass); outline-offset:4px; border-radius:4px; }
  /* Cards, not list rows: a rail item needs a surface or it reads as floating
     text sliding about. Same white card language as .hw-tcard. */
  .site .clin-grid .clin-item{
    scroll-snap-align:start; box-sizing:border-box;
    background:#FFFFFF; border:1px solid rgba(31, 35, 5, .10); border-radius:6px;
    border-top:1px solid rgba(31, 35, 5, .10);   /* override the list-row rule */
    padding:22px 22px 24px; margin:0;
  }
  /* The rail's controls sit under it; reuse the amenities nav styling. */
  .site .s-clin .amen-nav{ margin-top:12px; }
  .site .s-clin .amen-dot::before{ background:rgba(31, 35, 5, .26); }
  .site .s-clin .amen-dot[aria-current="true"]::before{ background:var(--m-brass); }
  .site .s-clin .amen-arrow{ border-color:rgba(31, 35, 5, .34); color:var(--m-brass); }
}
@media (max-width:820px) and (hover:hover){
  .site .s-clin .amen-arrow:not([disabled]):hover{ background:var(--m-brass); color:var(--m-lime); border-color:var(--m-brass); }
}

/* --- PGx strip, restyled 2026-07-28 (owner) ---------------------------
   Three changes, all requested:
   1. DARK BAND. It was river and, after Residences moved ahead of Families,
      sat directly against the river Residences band — two identical tones
      touching. Dark also suits the content: this is the one genuinely new
      thing on the page, and it now reads as a feature rather than another
      body section. Text colours flip with it.
   2. SMALLER EYEBROW. Was the standard .s-secmark; now noticeably finer, so
      "New · Included with treatment" labels rather than competes.
   3. THREE COLUMNS at desktop — heading left, copy centre, helix right —
      instead of one centred stack. Tighter, and it uses the horizontal space
      the single column was wasting. Stacks on phones. */
.s-pgx{
  background:linear-gradient(158deg, var(--m-green) 0%, var(--m-dark) 100%);
  border-top:1px solid rgba(230, 213, 176, .22);
}
.s-pgx .in{ padding-top:44px; padding-bottom:46px; max-width:1120px; text-align:left; }
.s-pgx .s-secmark{
  color:var(--m-brassL); font-size:.62rem; letter-spacing:.2em; opacity:.9; margin-bottom:6px;
}
.s-pgx .s-sechead{ color:var(--m-lime); margin:0; font-size:clamp(1.5rem, 2.4vw, 2rem); line-height:1.14; }
.s-pgx .pgx-lead{
  font-family:var(--sans); font-size:.98rem; line-height:1.68;
  color:#DFCBB9; margin:0 0 12px; max-width:52ch;
}
.s-pgx .pgx-meta{
  font-family:var(--sans); font-size:.76rem; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(230, 213, 176, .72); margin:0 0 18px;
}
.s-pgx .s-cta{ margin:0; }
@media (min-width:901px){
  .s-pgx .in{
    display:grid; grid-template-columns:minmax(220px, 1fr) minmax(300px, 1.25fr) 150px;
    gap:40px; align-items:center;
  }
  .s-pgx .pgx-head{ align-self:center; }
}
.pgx-art{ display:flex; justify-content:center; }
.pgx-art svg{ width:150px; height:auto; }
@media (max-width:900px){
  .s-pgx .in{ display:flex; flex-direction:column; gap:6px; }
  .pgx-art{ order:-1; margin-bottom:6px; }
  .pgx-art svg{ width:104px; }
}

/* The rail nav is injected by JS wherever [data-rail] exists, but .clin-grid is
   only a rail on phones — above 820px the arrows and dots are meaningless and
   were adding 54px to a desktop section that did not change. */
@media (min-width:821px){ .site .s-clin .amen-nav{ display:none; } }

/* --- PGx eyebrow: the two properties that were losing -------------------
   `.site .s-secmark{ color:var(--m-brass) !important }` and a separate
   `.s-secmark{ font-size:12.5px !important }` both won, so the eyebrow rendered
   dark brass at 12.5px on a dark band — measured 1.6:1, a straight contrast
   failure, and not the smaller label that was asked for.

   This adds !important, which this file already has too much of. It is
   unavoidable here: the only way to beat an !important declaration is another
   one, and the specificity is raised to (0,3,0) so it beats the (0,2,0) rule
   rather than merely tying with it. Scoped to .s-pgx alone — no other eyebrow
   on the site is affected. */
.site .s-pgx .s-secmark{
  color:var(--m-brassL) !important;
  font-size:.66rem !important;
  letter-spacing:.2em !important;
}

/* --- PGx strip: corrections after looking at it (2026-07-28) -----------
   Measurement said the eyebrow passed at 8.9:1 and the layout was fine. Looking
   at a screenshot said otherwise, and the screenshot was right:
     - 10.5px was too small to carry "New" — legible but with no presence.
       Up to 12px, and the "New ·" now sits in brass caps that announce.
     - the heading wrapped to FOUR lines in a 331px column, leaving dead space
       at the bottom of the band. Column widened, size trimmed.
     - the helix was 150px and half-invisible (its back strand was drawn dark
       for the old lime band). Redrawn light-on-dark in assets/img/dna.svg, and
       enlarged.
   Contrast numbers alone do not tell you whether something reads. */
.site .s-pgx .s-secmark{
  color:var(--m-brassL) !important;
  font-size:.75rem !important;
  letter-spacing:.18em !important;
  opacity:1;
}
.s-pgx .s-sechead{ font-size:clamp(1.4rem, 2vw, 1.72rem); }
@media (min-width:901px){
  .s-pgx .in{ grid-template-columns:minmax(260px, 1fr) minmax(320px, 1.2fr) 190px; gap:44px; }
}
.pgx-art svg{ width:190px; }
@media (max-width:900px){ .pgx-art svg{ width:120px; } }
/* The heading was still 54px and wrapping to four lines in a 317px column:
   `.site .s-sechead` beats a bare `.s-pgx .s-sechead`. Fourth time this file's
   .site layer has silently outranked a section rule — check for it FIRST when a
   declaration here appears to do nothing. */
.site .s-pgx .s-sechead{ font-size:clamp(1.45rem, 2.1vw, 1.85rem) !important; line-height:1.16 !important; }
/* Heading back up to header scale (owner: "too small — it is a header"). The
   29.6px was an over-correction while fixing a four-line wrap; the real fix is
   size AND a wider column, not a smaller size in a narrow one. Column widened
   so the larger type still lands in two lines at desktop. */
.site .s-pgx .s-sechead{ font-size:clamp(1.9rem, 3vw, 2.6rem) !important; line-height:1.1 !important; }
@media (min-width:901px){
  .s-pgx .in{ grid-template-columns:minmax(340px, 1.05fr) minmax(300px, 1fr) 190px; gap:40px; }
}
/* The credit line was breaking as "POWERED BY / INAGENE" once the heading
   column widened. Slightly tighter tracking keeps it on one line without
   shrinking it enough to lose the attribution's legibility. */
.s-pgx .pgx-meta{ letter-spacing:.04em; font-size:.73rem; }

/* --- Quiet, Capable Care: editorial split at desktop (2026-07-28) -------
   Measured breakdown of the old 1,277px stack at 1440: 224px section padding,
   156px heading block, 370px lede+margin, 63px link, 465px grid. Nearly half
   the section was padding and lede before any content, and the four points were
   only 36% of it — so shrinking the points was never going to fix this.

   Left column takes the eyebrow, heading, lede and link; the four points move
   into a second column beside them, filling horizontal space the single stack
   was wasting. No markup change: .in becomes the grid and the existing children
   are placed into it, with .clin-grid spanning every row of column two.

   Desktop only. Phones keep the stacked layout with the rail — a two-column
   split on a 390px screen is just two narrow columns. */
@media (min-width:901px){
  /* Two real children now (.clin-copy and .clin-grid), so the split is a plain
     two-column grid. The first attempt placed the flat children with
     `grid-row:1/-1` on the grid — with no explicit rows, -1 resolves to row 1,
     so it spanned nothing and still sat BELOW the copy. Section went 1,277 ->
     1,393px, the opposite of the point. Wrapping the copy is the honest fix. */
  /* SCOPED 2026-07-31. This was `.site .s-clin .in`, which is every .s-clin on
     the site — but only home-clincare has the two-child .clin-copy/.clin-grid
     structure the grid assumes. The seven closers and cta-band's non-form style
     put FOUR flat children in .in (eyebrow, heading, lede, buttons), so they
     auto-placed into a 2x2: eyebrow top-left, heading top-RIGHT, lede below the
     eyebrow, buttons below the heading. Reading order scrambled on 22 pages.
     The class names the intended case instead of guessing at it. */
  .site .s-clin .in.clin-split{
    display:grid;
    grid-template-columns:minmax(340px, .9fr) minmax(430px, 1.1fr);
    column-gap:64px;
    align-items:start;
  }
  .site .s-clin .in.clin-split .lede{ margin-bottom:26px; }
  .site .s-clin .clin-copy > p:last-child{ margin-bottom:0; }
  .site .s-clin .clin-grid{ gap:40px 44px; }
}
/* The lede was sized as a full-bleed display statement (theme.css:1976 promoted
   it deliberately). In a 547px column it runs eight lines, so the copy column
   measured 720px against the grid's 476px — 244px of dead space beside it.
   Stepped down for the split layout only; the full-width treatment elsewhere is
   untouched. */
@media (min-width:901px){
  /* Scoped for the same reason as the grid above — the comment always said
     "for the split layout only"; the selector did not. */
  .site .s-clin .in.clin-split .lede{ font-size:clamp(1.15rem, 1.5vw, 1.45rem) !important; line-height:1.5 !important; }
}

/* --- 1. Our Philosophy / arrival boundary (2026-07-28) -----------------
   .arrival is a transparent band holding a dark video; .s-amen below it is
   --m-dark. Two dark surfaces meeting with no edge, so the video appeared to
   bleed into the section. A white spacer was suggested — white is not in this
   palette and a slab of it would read as a mistake. The codebase already has a
   band-boundary idiom (.s-careers, .s-resteam): a brass hairline at 22%. Same
   device, one line, and it looks deliberate. */
.s-amen{ border-top:1px solid rgba(230, 213, 176, .22); }

/* --- 2. Why Us: copy + a lived-experience film, same height ------------- */
.s-whyus .in{ display:grid; grid-template-columns:1fr; gap:26px; }
.s-whyus .whyus-body{
  font-family:var(--sans); font-size:1.02rem; line-height:1.72;
  color:#252A06; margin:14px 0 18px; max-width:60ch;
}
.s-whyus .whyus-media{
  margin:0; overflow:hidden; border-radius:6px; position:relative;
  background:var(--m-dark);
}
.s-whyus .whyus-media img,
.s-whyus .whyus-media video{
  display:block; width:100%; height:100%; object-fit:cover;
}
@media (min-width:901px){
  /* media column is capped to the copy column's height and cropped, so a 9:16
     film cannot make the section taller than its own text. */
  .s-whyus .in{ grid-template-columns:1.35fr .65fr; gap:56px; align-items:stretch; }
  .s-whyus .whyus-media{ min-height:100%; }
  .s-whyus .whyus-copy{ align-self:center; }
}
@media (max-width:900px){
  .s-whyus .whyus-media{ aspect-ratio:16/10; }
}
/* Stacked on a phone a film always adds height. A 21:9 letterbox keeps that to
   about 150px rather than the 330px a portrait crop would cost. */
@media (max-width:900px){
  .s-whyus .whyus-media{ aspect-ratio:21/9; }
}


/* --- Why Us: heading left, body right (2026-07-28) --------------------
   Owner: text only, two columns, to save height. Stacked, the heading ran two
   lines then the body three, so the section was as tall as the sum. Side by
   side it is as tall as the taller column instead.

   Heading column is the wider of the two: it carries a 40px display face, and
   giving it the narrower column would push it to four lines and defeat the
   point. Stacks on phones — two columns on 390px is just two narrow columns. */
@media (min-width:901px){
  .s-whyus .in{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:start; }
  .s-whyus .whyus-body{ margin-top:0; }
  .s-whyus .whyus-head .s-sechead{ margin-bottom:0; }
}

/* --- Home intro: headline above the Maté quote (2026-07-28) ------------
   New h2 introducing the section. Sized BELOW the quote deliberately: the quote
   is the emotional hook and must stay the loudest thing in the block, so this
   leads without competing.

   COLOUR: --m-ink. The first version used --m-lime on the assumption that
   .s-intro is a media-backed dark band. It is not — the copy side is the light
   cream ground, so cream-on-cream rendered the headline invisible. The contrast
   check "passed" only because it was run against an assumed dark background.
   Sample the ground you actually ship on. */
.s-intro .intro-head{
  font-family:var(--disp); font-weight:400;
  font-size:clamp(1.35rem, 2.1vw, 1.75rem); line-height:1.18;
  color:var(--m-ink); margin:0 0 18px; text-wrap:balance;
}

/* --- Home FAQ: show three, rest live on /faqs/ (2026-07-28) -----------
   Eight questions at ~75px were 600px of a 1,135px section on a phone. Three
   show; the rest carry .faq-extra and are folded away. There is no expand
   button by owner direction — "Browse all FAQs" is the single route onward.

   The fold only applies once theme.js adds .js-faq, so with no script all eight
   render and nothing is unreachable. */
.faq.js-faq .faq-extra{ display:none; }
/* --- Reach Out: tighter frame (2026-07-28) -----------------------------
   951px desktop / 1,127px mobile, of which 224px / 128px was section padding
   alone. The FORM is left completely alone — Contact carries ~41% of
   conversions and an inline form on the home page is doing real work; only the
   frame around it is trimmed. */
.ct-main .in{ padding-top:72px; padding-bottom:76px; }
@media (max-width:820px){
  .ct-main .in{ padding-top:44px; padding-bottom:48px; }
}

/* --- About: leadership strip (2026-07-28) ------------------------------
   Portraits are square-cropped and sized to 168px, which every included photo
   can fill at 3x (see the source-pixel filter in about-team-strip.php). Wraps
   rather than scrolling: six faces fit two rows on a phone, and a rail here
   would hide people, which is the opposite of the point. */
.teamstrip{ list-style:none; margin:0 0 26px; padding:0; display:flex; flex-wrap:wrap; gap:30px 34px; }
.ts-person{ width:168px; display:flex; flex-direction:column; }
.ts-person img{
  width:168px; height:168px; object-fit:cover; object-position:center top;
  border-radius:3px; display:block; margin-bottom:12px;
  background:var(--m-river);
}
.ts-name{ font-family:var(--disp); font-weight:500; font-size:1.02rem; color:var(--m-ink); line-height:1.25; }
.ts-role{ font-family:var(--sans); font-size:.78rem; line-height:1.45; color:var(--m-soft); margin-top:3px; }
@media (max-width:560px){
  .teamstrip{ gap:22px; }
  .ts-person{ width:calc(50% - 11px); }
  .ts-person img{ width:100%; height:auto; aspect-ratio:1/1; }
}

/* --- About Us opener: copy left, house right (2026-07-28) --------------
   Photo column is capped to the copy column and cropped, so the image costs no
   height — the <img> is taken out of flow so it cannot set the row height.
   Same technique as the Why Us column; without it a landscape photo drives the
   row and the section grows. */
.s-aboutintro .in{ display:grid; grid-template-columns:1fr; gap:26px; }
.s-aboutintro .ai-body p{ font-family:var(--sans); font-size:1.02rem; line-height:1.72; color:#252A06; margin:0 0 16px; }
.s-aboutintro .ai-body p:last-child{ margin-bottom:0; }
.s-aboutintro .ai-photo{ margin:0; overflow:hidden; border-radius:4px; background:var(--m-river); }
.s-aboutintro .ai-photo img{ display:block; width:100%; height:100%; object-fit:cover; }
@media (min-width:901px){
  .s-aboutintro .in{ grid-template-columns:1.15fr .85fr; gap:56px; align-items:stretch; }
  .s-aboutintro .ai-copy{ align-self:center; }
  .s-aboutintro .ai-photo{ position:relative; height:auto; min-height:0; }
  .s-aboutintro .ai-photo img{ position:absolute; inset:0; }
}
@media (max-width:900px){ .s-aboutintro .ai-photo{ aspect-ratio:16/10; } }

/* --- Reels: copy beside the films when there are only two (2026-07-28) --
   Two 300x533 portrait films in a 1,280px flex row left 628px of empty space to
   their right — that is what read as "weird". The copy moves into that space so
   the row is filled and the section becomes an editorial split like the rest of
   the About page.

   grid-row uses `span 3`, NOT `1 / -1`: with no explicit rows, -1 resolves to
   row 1 and the item spans nothing — that exact mistake put the clinical-care
   grid BELOW its copy instead of beside it earlier today. */
@media (min-width:901px){
  .reels-sec.reels-n2 .in{
    display:grid; grid-template-columns:.85fr 1.15fr; column-gap:56px;
    /* min-content rows + align-content:center keeps the four left-hand items
       stacked tightly as one block and centres that block against the films.
       With the default stretch, each item got its own share of the 533px row
       height and the CTA was pushed to the bottom-left corner, far from the
       copy it belongs to. */
    grid-auto-rows:min-content; align-content:center; align-items:start;
  }
  .reels-sec.reels-n2 .in > .s-secmark,
  .reels-sec.reels-n2 .in > .s-sechead,
  .reels-sec.reels-n2 .in > .reels-intro,
  .reels-sec.reels-n2 .in > .reels-cta{ grid-column:1; }
  .reels-sec.reels-n2 .in > .reel-row{ grid-column:2; grid-row:1 / span 4; justify-content:flex-end; }
  .reels-sec.reels-n2 .reels-intro{ margin-bottom:22px; }
}
.reels-cta{ margin-top:6px; }

/* --- Photo band: deeper scrim for bright frames (2026-07-28) ----------
   The creek shot is pale turquoise water in full sun, far brighter than the
   interiors this band was tuned for, and the caption was unreadable over it.
   Applied via .photo-band--deep, set per image in photo-band.php — a
   body-class selector was tried first and matched nothing, because WordPress
   does not emit a page-about-us class here. */
.photo-band--deep .photo-band-scrim{
  background:linear-gradient(0deg,
    rgba(18,22,5,.97) 0%,
    rgba(18,22,5,.90) 48%,
    rgba(18,22,5,.66) 74%,
    rgba(18,22,5,.30) 100%);
}

/* Three or more films: full width, three across, copy above and CTA below —
   the split only suits two. */
@media (min-width:901px){
  .reels-sec.reels-n3 .reel-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
  .reels-sec.reels-n3 .reels-intro{ max-width:70ch; margin-bottom:30px; }
  .reels-sec.reels-n3 .reels-cta{ margin-top:30px; }
}
/* The photo-band eyebrow sits high in the band, where the scrim is weakest, and
   it was brass — a dark colour over pale water. The body copy below it was
   fine; only the label failed. Light brass plus a shadow, and the deep scrim
   holds its strength further up the frame. */
.photo-band--deep .photo-band-scrim{
  background:linear-gradient(0deg,
    rgba(18,22,5,.97) 0%,
    rgba(18,22,5,.93) 55%,
    rgba(18,22,5,.80) 78%,
    rgba(18,22,5,.42) 100%);
}
.photo-band--deep .s-secmark{
  color:var(--m-brassL) !important;
  text-shadow:0 1px 10px rgba(0,0,0,.6);
}
.photo-band--deep .photo-band-cap{ text-shadow:0 1px 12px rgba(0,0,0,.5); }
/* Reels CTA centred (owner). Only inside the reels section, so the identical
   .s-cta elsewhere is untouched. */
.reels-sec .reels-cta{ text-align:center; }
.reels-sec.reels-n2 .reels-cta{ text-align:left; }   /* the 2-up split keeps it in its column */

/* --- Grounds & Amenities as a rail (2026-07-28) -----------------------
   Was a 3-across grid that wrapped to multiple rows. Now the same scroll-snap
   rail as Our Philosophy on the home page, sharing the [data-rail] wiring in
   theme.js. Card width is capped at 340px for the same reason as there: the
   photos are 1200x802 and 340px needs 680px square at 2x, which they clear. */
.amn-rail{
  display:grid !important; grid-auto-flow:column; grid-auto-columns:minmax(300px, 340px);
  grid-template-columns:none !important;
  gap:22px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; padding:4px 4px 18px; margin:0 -4px;
  scrollbar-width:none;
}
.amn-rail::-webkit-scrollbar{ display:none; }
.amn-rail:focus-visible{ outline:2px solid var(--m-brass); outline-offset:4px; border-radius:4px; }
.amn-rail > .amn-card{ scroll-snap-align:start; }
.amn-rail .amn-photo{ aspect-ratio:1/1; }
@media (max-width:820px){
  .amn-rail{ grid-auto-columns:minmax(240px, 245px) !important; gap:16px; }
}
/* Two CTAs in the reels band: side by side, wrapping on narrow screens, and
   centred with the rest of the .reels-cta block. The outline variant needs its
   colours restated here because the site-wide .s-cta2 is tuned for dark bands
   and this one sits on river. */
.reels-cta{ display:flex; flex-wrap:wrap; gap:14px; }
.reels-sec .reels-cta{ justify-content:center; }
.reels-sec.reels-n2 .reels-cta{ justify-content:flex-start; }
.reels-cta2{
  color:var(--m-brass) !important;
  border-color:var(--m-brass) !important;
  background:transparent !important;
}
@media (hover:hover){
  .reels-cta2:hover{ background:var(--m-brass) !important; color:var(--m-lime) !important; }
}

/* --- Rail controls on LIGHT bands (2026-07-28) ------------------------
   .amen-dot and .amen-arrow were coloured for the home page's Our Philosophy
   band, which is dark: pale brass at 34% opacity. The Grounds & Amenities rail
   sits on a light ground, where that is invisible — the owner reported not being
   able to see them at all. Same mistake as the photo-band eyebrow: a colour
   chosen for one background, reused on its opposite.

   .pg-amen is the light band; .s-clin already had its own override for the same
   reason, so this now covers both light-ground rails. */
.pg-amen .amen-dot::before{ background:rgba(31, 35, 5, .28); }
.pg-amen .amen-dot[aria-current="true"]::before{ background:var(--m-brass); }
.pg-amen .amen-arrow{ border-color:rgba(31, 35, 5, .38); color:var(--m-brass); }
@media (hover:hover){
  .pg-amen .amen-arrow:not([disabled]):hover{
    background:var(--m-brass); color:var(--m-lime); border-color:var(--m-brass);
  }
}

/* --- .s-inline: a link inside a sentence (2026-07-28) -----------------
   REGRESSION FIX. Promoting .s-link to a bordered CTA gave the box to every
   .s-link, including ones sitting mid-sentence. On /what-we-treat/ that turned
   "Read more about our approach to addiction treatment." into a paragraph with
   a button wedged into it and an orphaned full stop after it.

   A CSS-only discriminator was tried first — p > a.s-link:only-child — and does
   not work: :only-child counts ELEMENT children, so a link surrounded by text
   still matches. The honest fix is a separate class at the source, applied to
   the four links that live inside sentences. Use .s-link for a standalone call
   to action, .s-inline for a link within prose. */
.site a.s-inline{
  display:inline; min-height:0; padding:0; border:0; border-radius:0;
  background:transparent; vertical-align:baseline; font-weight:600;
  letter-spacing:0; text-transform:none;
  color:var(--m-brass); text-decoration:underline;
  text-underline-offset:2px; text-decoration-thickness:1px;
}
@media (hover:hover){
  .site a.s-inline:hover{ color:var(--m-green); background:transparent; }
}

/* --- Dependencies as its own bordered directory (2026-07-28) ----------
   Owner asked for real boxes here. That means deliberately OPTING OUT of the
   site-wide card flattening, which is not optional styling — L834 and L1948 both
   set `background:transparent / border:0 / border-radius:0 / padding:… ` with
   !important on `.hw-tcard`. A plain `.wt-depgrid .hw-tcard` rule (0,2,0) loses
   to those; this needs (0,3,0) AND !important to land. Do not "tidy" the
   !important away — the borders vanish silently if you do.

   Corners stay square: the reskin zeroes every radius on the site, and rounded
   boxes here would read as foreign. */
.site .wt-depgrid .hw-tcard{
  background:#FFFFFF !important;
  border:1px solid rgba(31, 35, 5, .14) !important;
  border-radius:0 !important;
  padding:26px 26px 28px !important;
  display:flex; flex-direction:column;
  transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.site .wt-depgrid{ gap:20px !important; }
.site .wt-depgrid .hw-tcard h3{ margin-bottom:10px; }
.site .wt-depgrid .hw-tcard p{ flex:1 1 auto; }
@media (hover:hover){
  .site .wt-depgrid .hw-tcard:hover{
    transform:translateY(-3px);
    border-color:var(--m-brass) !important;
    box-shadow:0 12px 30px rgba(37, 42, 6, .13) !important;
  }
}

/* C) The "bad enough?" CTA was centred in a left-aligned section. */

/* Heading margins for the two What-We-Help-With bands.
   NOT settable inline: `.site .s-sechead{margin-bottom:var(--s-7)!important}`
   near L1925 beats any inline style. Anything that needs a different heading
   rhythm has to come through the .site layer too. */
.site .wt-lead-sec .s-sechead{ margin-bottom:16px !important; }
.site .wt-deps-sec .s-sechead{ margin-bottom:28px !important; }
/* The deps band follows straight on from the section that introduces it, so it
   does not need a full band's worth of lead-in space above. */
.site .wt-deps-sec .in{ padding-top:48px; padding-bottom:62px; }

/* The concurrent-care panel kept a 12px radius from before the reskin. Every
   other box on the site is square (see the `border-radius:0 !important` sweep),
   and it now sits directly above six square dependency cards, so the rounded
   corners read as a mistake rather than a flourish. */
.site .wt-cooc{ border-radius:0; }

/* --- "When it might be time to reach out": editorial split (2026-07-28) ------
   The six prompts are different lengths. In the old 2-column grid that produced
   rows whose baselines never matched, which is what read as messy — the fix is
   ONE column, not tighter copy, because the copy here is deliberately natural.
   Hairline rules do the work the tick alone was doing.

   The lead rail is narrower than the list on purpose: measure stays readable and
   the CTA sits at the same x as every other CTA on the page. */
.site .wt-signs-grid{
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:0 76px; align-items:start;
}
.site .wt-signs-sec .s-sechead{ margin-bottom:18px !important; }
.site .wt-signs-lead .pg-sub{ margin-bottom:26px; }
.site .wt-signs-note{
  font-family:var(--sans); font-size:1.02rem; line-height:1.6; color:var(--m-ink);
  border-top:1px solid rgba(31, 35, 5, .16); padding-top:22px; margin:0 0 24px;
}
.site .wt-signs{
  display:block; margin:6px 0 0; padding:0; list-style:none;
  border-top:1px solid rgba(31, 35, 5, .14);
}
.site .wt-signs li{
  padding:19px 0 19px 40px; border-bottom:1px solid rgba(31, 35, 5, .14);
  font-family:var(--sans); font-size:1.06rem; line-height:1.5; color:var(--m-ink);
  position:relative;
}
.site .wt-signs li::before{ top:20px; }
@media (max-width:900px){
  .site .wt-signs-grid{ grid-template-columns:1fr; gap:34px; }
  .site .wt-signs{ margin-top:0; }
}

/* --- SMS-consent checkbox: 44px target, 22px box (2026-07-28) ----------
   Closes the last P2 from the mobile audit. The earlier fix set the input to
   22x22, which stopped it being a 13x44 sliver but left it under the 44px target
   floor — the audit harness has been reporting it at 599 and 375 ever since, and
   an expected-but-unexplained finding is how a real one gets waved through.

   The <label> wrapping it was always the practical target (clicking the consent
   text toggles the box), so this was never a live blocker. It is fixed properly
   now: the input's own box is 44x44, the negative margins give back the 22px it
   used to occupy so nothing shifts, and ::before draws the visible 22px square.
   Applied at every width, not just phones — above 820px the input was still
   `width:auto` against a site-wide min-height:44px, i.e. the 13x44 sliver.

   Specificity has to match the (0,3,1) rules at L1441 and L3535 that set width. */
.ct-form .wpcf7-acceptance input[type=checkbox]{
  -webkit-appearance:none; appearance:none;
  width:44px; height:44px; min-height:0; flex:0 0 auto;
  margin:-13px -11px 0 -11px;   /* -11 sides returns the 22px it used to occupy;
                                   -13 top centres the square on the first text line */
  display:grid; place-content:center;
  /* !important on both: the site-wide input rules paint a cream fill and 12px/13px
     padding, and they carry !important. Without matching it the 44px box shows up
     as a visible beige square behind the tick. */
  background:transparent !important; padding:0 !important;
  border:0; border-radius:0; cursor:pointer;
}
.ct-form .wpcf7-acceptance input[type=checkbox]::before{
  content:""; display:block; width:22px; height:22px;
  background:#FFFFFF; border:1px solid rgba(31, 35, 5, .38);
}
.ct-form .wpcf7-acceptance input[type=checkbox]:checked::before{
  background:var(--m-green); border-color:var(--m-green);
  box-shadow:inset 0 0 0 3px #FFFFFF;
}
.ct-form .wpcf7-acceptance input[type=checkbox]:focus-visible{
  outline:2px solid var(--m-brass); outline-offset:2px;
}
@media (max-width:820px){
  /* supersedes the P2-3 22x22 rule; same selector, later in the file */
  .ct-form .wpcf7-acceptance input[type=checkbox]{ width:44px; height:44px; }
}

/* --- Careers callout: finish the left-align (2026-07-29) ---------------
   The .site layer at L1871/L1887 already left-aligns this band's text and
   zeroes the auto margins on its heading and lead. What was left is L495:
   `.s-careers .in{ max-width:760px }` — a narrow block that auto-centres, so
   the section started at x=324 while the other nine sections on About start at
   x=64. Text-align alone could never fix that; the BLOCK has to match the
   container. Same treatment already applied to .s-indcta at L2194.

   Measure is preserved on the paragraph instead, which is where it belongs.
   The .ct-band closer below it stays centred on purpose — a terminal contact
   form is the one place this design centres. */
.site .s-careers .in{ max-width:calc(var(--container) + 2 * var(--gutter)); }
.site .s-careers .careers-lead{ max-width:54ch; }

/* --- How We Treat: merged care gallery (2026-07-29) -------------------
   The page had three grids covering ten destinations across twenty tiles.
   Now one rail. These rules only add the lead + chip row that sits above it;
   the track itself reuses .amen-rail/.amen-track from the Programs section. */
.s-amen .amen-lead{
  max-width:70ch; margin:0 0 22px; color:#DFCBB9;
}
.s-amen .amen-core{
  list-style:none; margin:0 0 30px; padding:0;
  display:flex; flex-wrap:wrap; gap:10px 26px;
}
.s-amen .amen-core li{
  font-family:var(--sans); font-weight:600; font-size:.86rem; letter-spacing:.01em;
  color:var(--m-lime); padding-left:24px; position:relative;
}
/* Brass on the DARK band — checked against #1F2305, not against the cream bands
   where this tick also appears. Reusing the light-band colour here is the exact
   mistake that made the amenity dots invisible. */
.s-amen .amen-core li::before{
  content:"\2713"; position:absolute; left:0; top:-1px;
  font-weight:700; color:var(--m-brassL);
}
@media (max-width:720px){
  .s-amen .amen-core{ gap:8px 18px; }
  .s-amen .amen-core li{ font-size:.82rem; }
}

/* --- reels-n2: the films never fitted their own column (2026-07-29) ---
   Owner on How We Treat: "the text is random and short, lots of blank space,
   videos are randomly placed."

   Measured across all eight reels-n2 pages: the films stacked VERTICALLY on
   every one, and every band was exactly 1,397px. The split gives column 2
   1.15fr of (1152 - 56) = ~590px, but two 300px films plus the 52px .reel-row
   gap need 652px — so the row wrapped, the films became a 1,119px tower, and
   the copy beside it (264px on four of the eight pages) left 822-855px of empty
   band. It was arithmetic, not art direction.

   Column 2 is now 651px and the film gap 28px, so 2x300+28 = 628 fits with 23px
   of slack, and nowrap makes stacking impossible if a future edit narrows it.
   Do not restore flex-wrap here: wrapping is the bug. */
@media (min-width:901px){
  .reels-sec.reels-n2 .in{
    grid-template-columns:.82fr 1.18fr; column-gap:48px;
  }
  .reels-sec.reels-n2 .in > .reel-row{
    flex-wrap:nowrap; gap:28px; align-items:flex-start;
  }
  .reels-sec.reels-n2 .in > .reel-row .le-reel{ flex:0 0 300px; max-width:300px; }
}

/* --- Rail dots overflow once a track has more than ~7 items (2026-07-29) ---
   The How We Treat rail went from 6 tiles to 9 when the duplicate grids were
   merged. Each dot carries a 44px hit area for WCAG 2.5.8, so nine of them need
   396px and the phone viewport is 375 — the row pushed the page to a 484px
   scrollWidth. The dots cannot simply be shrunk without dropping under the
   target-size floor, so below 600px they give way to the arrows, which are two
   44px controls and always fit. Touch users swipe the track directly.

   600, not 520: at 520 the dots (388px) and the two arrows together squeezed the
   arrows to 39x44, under the same floor the dots were hidden to protect. The
   harness checks touch targets below 600, so the threshold matches it. */
@media (max-width:599px){
  .amen-nav .amen-dots{ display:none; }
  .amen-nav{ justify-content:flex-end; }
}

/* --- tour-spaces: 2x2 now there are four spaces (2026-07-29) ----------
   The grid was repeat(3,1fr) for three tiles. Adding the red-light room left a
   fourth tile alone on its own row beside two empty cells. Two across gives a
   balanced 2x2 and nearly doubles each tile — these are 1200x802 sources, so
   they carry the extra size sharply. Reverts to one column below 820px, as before. */
@media (min-width:821px){
  .site .ts-grid{ grid-template-columns:repeat(2, 1fr); gap:20px; }
}

/* --- Our Approach: app mockup in the membership band (2026-07-29) ------
   Replaces a background-image column, so the column needs to lay the phone out
   rather than fill itself. */
.hw-cont-app{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.hw-cont-app .phone{ justify-self:auto; }
.hw-cont-app .phonelbl{ margin:0; }
@media (max-width:820px){ .hw-cont-app{ margin-top:26px; } }

/* Two CTAs under the care rail. On the DARK band the ghost button needs the
   light treatment — the .s-clin variant is green-on-light and would be almost
   invisible here, which is exactly how the amenity dots went missing before. */
.amen-cta{ display:flex; flex-wrap:wrap; gap:14px 18px; justify-content:center; align-items:center; margin-top:42px; }
.site .amen-cta2{
  background:transparent !important; color:var(--m-lime) !important;
  border:1px solid rgba(230, 213, 176, .5) !important;
}
@media (hover:hover){
  .site .amen-cta2:hover{
    background:rgba(230, 213, 176, .12) !important;
    border-color:var(--m-brassL) !important; color:#FFFFFF !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   DETAIL SUB-PAGES — the .sud-* primitives                    2026-07-31
   ══════════════════════════════════════════════════════════════════════
   The `sud-` prefix is HISTORICAL. These were built for the six
   /what-we-treat/<substance>/ pages and are now the shared vocabulary for
   the ten /how-we-treat/<modality>/ pages too (mod-* parts emit the same
   classes). Do not assume a .sud-* rule only affects substance pages —
   check both sets before changing one.
   The six pages were an eight-block stack in which four blocks were
   byte-identical across every URL, and 2,072px of the 6,250px page was
   three consecutive `.tmr-story-grid.is-solo` prose slabs — one column of
   text under a display heading, nothing in the right-hand half. Owner
   verdict: "each of those subpages are terrible".

   Everything below is scoped to the sud-* classes. No existing selector is
   modified, so the audit baseline for the other 34 pages cannot move.
   Devices are borrowed, not reinvented: .wt-signs-grid for the signs split,
   .clin-grid for the mechanism cards, .hw-tcard for the focus cards,
   .wt-assure for the tick row, .faq for the questions.                   */

/* ── The intro split: prose left, at-a-glance panel right ────────────── */
.sud-lead{
  display:grid; grid-template-columns:minmax(0, 1.42fr) minmax(0, .92fr);
  gap:var(--s-6) var(--s-10); align-items:start;
}
.sud-lead-copy .s-sechead{ margin-bottom:var(--s-5) !important; }
/* Body copy for the three prose sections. Matches .tmr-story-body's ratios
   (1.12rem / 1.72) rather than inventing a second reading size, but caps at
   66ch: the old solo grid ran to 78ch, and at 1280 that is a 1,100px line
   which is well past comfortable. */
.sud-p{
  font-family:var(--sans); font-size:1.12rem; line-height:1.72;
  color:var(--m-ink); max-width:66ch; margin:0 0 var(--s-4);
}
.sud-p:last-child{ margin-bottom:0; }

.sud-glance{
  background:#FFFFFF; border:1px solid rgba(31, 35, 5, .14); border-radius:0;
  padding:var(--s-5) var(--s-5) var(--s-4);
  box-shadow:0 10px 30px rgba(31, 35, 5, .07);
  position:relative; overflow:hidden;
}
/* Brass rule along the top edge — the same 5px marker .wt-cooc uses down its
   left edge, turned so it reads as a card header rather than a callout. */
.sud-glance::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--m-brass);
}
.site .sud-glance-h{
  font-family:var(--sans) !important; font-weight:600; font-size:.72rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--m-brass);
  margin:var(--s-2) 0 var(--s-4);
}
.sud-glance dl{ margin:0; }
.sud-glance-row{ padding:var(--s-3) 0; border-top:1px solid rgba(223, 203, 185, .85); }
.sud-glance-row:first-of-type{ border-top:0; padding-top:0; }
.sud-glance dt{
  font-family:var(--sans); font-weight:600; font-size:.78rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--m-green);
  margin:0 0 4px;
}
.sud-glance dd{
  font-family:var(--sans); font-size:1rem; line-height:1.55;
  color:var(--m-ink); margin:0;
}
.sud-glance-cta{
  display:inline-block; margin-top:var(--s-4);
  font-family:var(--sans); font-weight:600; font-size:.88rem;
  letter-spacing:.02em; color:var(--m-brass); text-decoration:none;
  border-bottom:1px solid rgba(102, 77, 34, .4); padding-bottom:2px;
  transition:color .2s ease, border-color .2s ease, transform .2s ease;
}
@media (hover:hover){
  .sud-glance-cta:hover{ color:var(--m-green); border-color:var(--m-green); transform:translateX(3px); }
}
.sud-glance-cta:focus-visible{ outline:2px solid var(--m-brass); outline-offset:3px; }

@media (max-width:980px){
  .sud-lead{ grid-template-columns:1fr; gap:var(--s-7); }
  .sud-p{ max-width:72ch; }
}

/* ── "Why <substance> is hard to stop": four mechanism cards ─────────── */
/* .clin-grid supplies the 2-up/1-up responsive behaviour; only the top rule
   colour needs adjusting, because .clin-item was drawn for the moss band and
   its rgba(230,213,176,.32) hairline all but disappears on limestone. */
.sud-whygrid.clin-grid{ margin-top:var(--s-6); }
/* .clin-item's hairline is rgba(230,213,176,.28) — drawn for the moss band, and
   all but invisible on limestone AND on river, which is where these grids live.
   Both the substance and the modality grids need it re-darkened. */
.sud-why .clin-item, .mod-benefits .clin-item{ border-top-color:rgba(102, 77, 34, .28); }
.sud-why .clin-ico, .mod-benefits .clin-ico{ color:var(--m-brass); }

/* ── Safety band: the withdrawal answer + the admission rule ─────────── */
/* Own eyebrow and heading classes, NOT .s-secmark / .s-sechead. On this
   background `.site .s-secmark{color:var(--m-brass)!important}` (L1651) would
   paint #664D22 on #1F2305 — 1.6:1. .wt-cooc dodges the same trap the same
   way. Measured here: #E6D5B0 on #1F2305 = 11.1:1, #DFCBB9 = 10.2:1. */
.sud-safety{ background:var(--m-dark); color:#F4E9DF; }
.sud-safety .in{ padding-top:var(--sec-lg); padding-bottom:var(--sec-lg); }
.sud-safety-grid{
  display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, .85fr);
  gap:var(--s-6) var(--s-10); align-items:start;
}
.sud-safety-eye{
  font-family:var(--sans); font-weight:600; font-size:.72rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--m-brassL);
  margin-bottom:var(--s-4);
}
.sud-safety-eye::before{
  content:""; display:block; width:34px; height:1px;
  background:var(--m-brassL); margin-bottom:var(--s-3);
}
.sud-safety h2{
  font-family:var(--disp); font-weight:400; font-size:clamp(1.6rem, 3.4vw, 2.4rem);
  line-height:1.16; color:#F4E9DF; margin:0 0 var(--s-5); text-wrap:balance;
}
.sud-safety-lead{
  font-family:var(--sans); font-size:1.18rem; line-height:1.7;
  color:#F4E9DF; max-width:64ch; margin:0 0 var(--s-5);
}
/* The admission rule, set apart from the clinical warning above it so the two
   are not read as one paragraph — they answer different questions. */
.sud-safety-note{
  font-family:var(--sans); font-size:1.02rem; line-height:1.7;
  color:#DFCBB9; max-width:64ch; margin:0;
  border-left:3px solid var(--m-brass); padding-left:var(--s-5);
}
.sud-safety-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-4) var(--s-5); margin-top:var(--s-6); }
.sud-safety-tel{
  font-family:var(--sans); font-weight:600; font-size:1rem;
  color:#F4E9DF; text-decoration:none; letter-spacing:.02em;
  border-bottom:1px solid rgba(230, 213, 176, .45); padding-bottom:2px;
}
@media (hover:hover){ .sud-safety-tel:hover{ color:var(--m-brassL); border-color:var(--m-brassL); } }
.sud-safety-tel:focus-visible{ outline:2px solid var(--m-brassL); outline-offset:3px; }

.sud-safety-list{ list-style:none; margin:0; padding:0; }
.sud-safety-list li{
  font-family:var(--sans); font-size:1.02rem; line-height:1.5; color:#F4E9DF;
  padding:var(--s-4) 0 var(--s-4) 34px; position:relative;
  border-top:1px solid rgba(230, 213, 176, .22);
}
.sud-safety-list li:first-child{ border-top:0; padding-top:0; }
.sud-safety-list li:last-child{ padding-bottom:0; }
.sud-safety-list li::before{
  content:"\2713"; position:absolute; left:0; top:var(--s-4);
  color:var(--m-brassL); font-weight:700; font-size:.9rem;
}
.sud-safety-list li:first-child::before{ top:0; }

@media (max-width:980px){
  .sud-safety-grid{ grid-template-columns:1fr; gap:var(--s-7); }
  .sud-safety-lead, .sud-safety-note{ max-width:none; }
}
@media (max-width:560px){
  .sud-safety-note{ padding-left:var(--s-4); }
}

/* ── Treatment focus cards ───────────────────────────────────────────── */
.sud-treat-copy{ margin-bottom:var(--s-7); }
/* .site .hw-tgrid sets an 80px row gap, which is right for the two-row card
   directory on /what-we-treat/ but far too airy for four bordered cards
   directly under their own copy. */
.site .sud-treatgrid.hw-tgrid{ gap:var(--s-6) var(--s-6) !important; }

/* ── Closing argument ────────────────────────────────────────────────── */
.sud-closing-copy{ margin-bottom:var(--s-6); }
.sud-assure.wt-assure{ margin-bottom:var(--s-6); }
.sud-closing-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-4); }

/* ── FAQ tail ────────────────────────────────────────────────────────── */
.sud-faq-more{ margin:var(--s-5) 2px 0; font-family:var(--serif); font-size:1.06rem; }

/* ── Cross-links to the other five dependencies ──────────────────────── */
.sud-relgrid{ display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-3); margin-top:var(--s-5); }
.sud-relcard{
  display:inline-flex; align-items:center; gap:10px;
  min-height:48px; padding:12px var(--s-5);
  background:#FFFFFF; border:1px solid rgba(31, 35, 5, .14); border-radius:0;
  font-family:var(--sans); font-weight:600; font-size:1rem; letter-spacing:.01em;
  color:var(--m-ink); text-decoration:none;
  transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, border-color .25s ease;
}
.sud-relcard span{ color:var(--m-brass); }
.sud-relcard--alt{ background:var(--m-dark); border-color:var(--m-dark); color:#F4E9DF; }
.sud-relcard--alt span{ color:var(--m-brassL); }
@media (hover:hover){
  .sud-relcard:hover{
    transform:translateY(-3px); border-color:var(--m-brass);
    box-shadow:0 12px 26px rgba(102, 77, 34, .18);
  }
}
.sud-relcard:focus-visible{ outline:2px solid var(--m-brass); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  .sud-relcard, .sud-glance-cta{ transition:none; }
  .sud-relcard:hover, .sud-glance-cta:hover{ transform:none; }
}

/* ── Substance pages: the two cascade fights, resolved ────────────────── */

/* 1. The focus cards must be real boxes, not the flattened text blocks the
      site-wide primitive turns .hw-tcard into. Exactly the opt-out documented
      for .wt-depgrid above: L834 and L1948 both set background/border/padding
      with !important, so this needs (0,3,0) AND !important or the borders
      vanish silently. Same treatment as the dependency directory on
      /what-we-treat/ on purpose — a linked card grid should look the same
      whether you are on the hub or one of its six children. */
.site .sud-treatgrid .hw-tcard{
  background:#FFFFFF !important;
  border:1px solid rgba(31, 35, 5, .14) !important;
  border-radius:0 !important;
  padding:26px 26px 28px !important;
  display:flex; flex-direction:column;
  transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.site .sud-treatgrid .hw-tcard h3{ margin-bottom:10px; }
.site .sud-treatgrid .hw-tcard p{ flex:1 1 auto; }
@media (hover:hover){
  .site .sud-treatgrid .hw-tcard:hover{
    transform:translateY(-3px);
    border-color:var(--m-brass) !important;
    box-shadow:0 12px 30px rgba(37, 42, 6, .13) !important;
  }
}

/* 2. The primary CTA on the dark safety band. `.s-cta` defaults to the
      LIGHT-band treatment — #1F2305 plate, cream text — which on a #1F2305
      background rendered as an invisible button: measured backgroundColor
      rgb(31,35,5) against a rgb(31,35,5) band. Inverted here, the same way
      .amen-cta2 is inverted on its dark band. Measured after: #1F2305 text on
      #F4E9DF = 14.9:1. */
.site .sud-safety .s-cta{
  background:#F4E9DF !important; color:var(--m-ink) !important;
  border-color:#F4E9DF !important;
}
@media (hover:hover){
  .site .sud-safety .s-cta:hover{
    background:var(--m-brassL) !important; border-color:var(--m-brassL) !important;
    color:var(--m-ink) !important;
  }
}
.site .sud-safety .s-cta:focus-visible{ outline:2px solid var(--m-brassL); outline-offset:3px; }

/* Safety net for display headings on these pages. The audit caught
   METHAMPHETAMINE spilling 8px past a 335px box at 375; that specific word is
   gone now, but 320px devices are below the audited band and one long compound
   is all it takes. Breaking a word is ugly; overflowing the viewport is a
   defect, so this only engages when nothing else will fit. */
.sud-sec .s-sechead, .sud-safety h2{ overflow-wrap:break-word; }

/* ── Modality pages: the two additions the substance pages did not need ── */

/* 1. mod-mid — heading in a left rail, prose beside it. For passages that are
      genuinely argument and have nothing to sit next to. Narrower rail than
      .sud-lead because there is no panel to balance, only a heading. */
.mod-midgrid{
  display:grid; grid-template-columns:minmax(0, .95fr) minmax(0, 1.3fr);
  gap:var(--s-6) var(--s-10); align-items:start;
}
/* The rail was .78fr — a 387px column at 1280 — and the audit caught
   "AFTERTHOUGHT" needing 416px in it on /families-of-addicts/. Widened to 446px,
   and break-word underneath as the net, because arbitrary story headings land
   here now that tmr-story can opt into this layout. The prose column loses 59px
   and is still past the 64ch cap on .sud-p, so nothing else moves. */
.mod-midhead .s-sechead, .tmr-story-cols .s-sechead{ overflow-wrap:break-word; }
.mod-midhead .s-sechead{ margin-bottom:0 !important; }
.mod-midbody .sud-p{ max-width:64ch; }
@media (max-width:980px){
  .mod-midgrid{ grid-template-columns:1fr; gap:var(--s-5); }
  .mod-midbody .sud-p{ max-width:72ch; }
}

/* 2. The section lead above a card grid. .sc-intro already exists for this but
      caps at 82ch, which at 1280 is a 1,150px line — the same over-long measure
      the old solo story bands had. */
.mod-lead.sc-intro{ max-width:68ch; margin-bottom:var(--s-7); }
@media (max-width:980px){ .mod-lead.sc-intro{ max-width:none; } }

/* Attribution line under the PGx closing copy. */
.mod-note{
  font-family:var(--sans); font-size:.92rem; line-height:1.6;
  color:var(--m-soft); margin:var(--s-4) 0 0; font-style:italic;
}

/* ── Condition landing pages (/…-treatment-in-ontario/) ──────────────── */
/* Built on the same .sud-* primitives; only the devices these three need that
   the substance and modality pages did not are declared here.               */

.cond-open-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-4) var(--s-5); margin-top:var(--s-6); }
.cond-tel{
  font-family:var(--sans); font-weight:600; font-size:1rem; letter-spacing:.02em;
  color:var(--m-ink); text-decoration:none;
  border-bottom:1px solid rgba(102, 77, 34, .4); padding-bottom:2px;
}
@media (hover:hover){ .cond-tel:hover{ color:var(--m-brass); border-color:var(--m-brass); } }
.cond-tel:focus-visible{ outline:2px solid var(--m-brass); outline-offset:3px; }

/* Numbered tier cards. The number is a quiet marker in the corner, not the
   .astep plaque — three cards in a row do not need three plaques competing
   with the headings. */
.cond-pathgrid .hw-tcard{ position:relative; }
.cond-step{
  display:block; font-family:var(--disp); font-weight:400; font-size:1.5rem;
  line-height:1; color:var(--m-brass); opacity:.55; margin-bottom:var(--s-3);
}

/* "Care Built Around You" — two columns of continuous argument above 980px.
   A heading-rail split here would just repeat the band two above it. */
@media (min-width:981px){
  .cond-cols{ columns:2; column-gap:var(--s-10); }
  .cond-cols .sud-p{ max-width:none; break-inside:avoid; }
  .cond-cols .sud-p:first-child{ margin-top:0; }
}

/* The team band is sud-safety's dark treatment with no right-hand list, so the
   copy column should not stay pinned at 1.5fr and leave a third of the band
   empty — the exact defect this whole pass exists to remove. */
.cond-team-grid{ grid-template-columns:1fr; }
.cond-team .sud-safety-lead{ max-width:70ch; }
.cond-team-p{
  font-family:var(--sans); font-size:1.06rem; line-height:1.7;
  color:#DFCBB9; max-width:70ch; margin:0 0 var(--s-4);
}

/* The seven modalities. Were seven loose paragraphs; now a two-up ruled list. */
.cond-clin-lead{ margin-bottom:var(--s-7); }
.cond-modlist{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s-10);
}
.cond-modlist li{
  display:grid; grid-template-columns:28px 1fr; gap:var(--s-4);
  align-items:start; padding:var(--s-5) 0;
  border-top:1px solid rgba(102, 77, 34, .22);
}
.cond-modico{ color:var(--m-brass); display:block; padding-top:2px; }
.cond-modico svg{ width:22px; height:22px; }
.cond-modtext{
  font-family:var(--sans); font-size:1.06rem; line-height:1.6; color:var(--m-ink);
}
@media (max-width:820px){
  .cond-modlist{ grid-template-columns:1fr; gap:0; }
}

/* ── tmr-story: the rail and columns layouts ─────────────────────────── */
/* The block borrows .mod-midgrid and .cond-cols rather than declaring a third
   pair of near-identical rules. Only the bits the block needs that the prebuilt
   sections did not are here: .tmr-story-body carries its own type scale
   (1.12rem/1.72, theme.css L438) and wraps <p> elements from wpautop, so the
   paragraph rhythm has to be restated inside both containers. */
.tmr-story-rail .mod-midbody p{ margin:0 0 var(--s-4); max-width:64ch; }
.tmr-story-rail .mod-midbody p:last-child{ margin-bottom:0; }
.tmr-story-cols .cond-cols p{ margin:0 0 var(--s-4); }
.tmr-story-cols .cond-cols p:last-child{ margin-bottom:0; }
@media (min-width:981px){
  .tmr-story-cols .cond-cols p{ break-inside:avoid; }
  .tmr-story-cols .cond-cols p:first-child{ margin-top:0; }
}
@media (max-width:980px){
  .tmr-story-rail .mod-midbody p{ max-width:72ch; }
}

/* ── Reintegration: the "you are here" stage ─────────────────────
   The path grid on /programs/reintegration/ renders its own stage as a
   div rather than a link, so it needs the card's resting look without the
   affordances of one — no hover lift, no arrow, and a marker that says why it
   is not clickable. */
.cond-pathgrid .hw-tcard.is-current{ border-color:var(--m-brass); cursor:default; }
.op-here{
  display:inline-block; vertical-align:middle; margin-left:var(--s-3);
  font-family:var(--sans); font-weight:600; font-size:.62rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--m-brass);
  border:1px solid rgba(102, 77, 34, .4); border-radius:2px;
  padding:3px 7px; white-space:nowrap;
}


/* ── /programs/ hub: four programs, not three (2026-08-02) ──────────────
   Reintegration got its own page, so .s-prog3 carries a fourth card.
   It was repeat(3,1fr), which would strand the fourth alone beside two empty
   cells — the same thing that happened to .ts-grid when the red-light room was
   added, and the same fix: 2x2 above the tablet breakpoint, which also nearly
   doubles each card. Below 820px it was already one column. */
@media (min-width:821px){
  .site .s-prog3{ grid-template-columns:repeat(2, 1fr); gap:var(--s-5); }
}

/* The weekly breakdown beside the delivery copy on /programs/reintegration/. */
.reintegration-week-h{
  font-family:var(--sans); font-weight:600; font-size:.7rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--m-brass);
  padding-bottom:var(--s-3); border-bottom:1px solid rgba(102, 77, 34, .28);
}
.reintegration-week .wt-signs{ margin-top:var(--s-5); }
.reintegration-how .wt-cooc{ margin-top:var(--s-8); }

/* ── Vertical walkthrough film (Lake Street) ───────────────────────────
   .tour-band .tour-vid is width:100% + object-fit:cover, which is correct for
   the horizontal Rodman film and renders a 9:16 film as a thin slice of its
   middle. Same failure as putting a landscape photo in the portrait gallery
   tile, in the other direction. This centres the player at its native ratio. */
.tour-band--portrait{ display:flex; justify-content:center; padding-bottom:var(--s-8); }
.tour-band--portrait .tour-vid{
  width:min(420px, 82vw); height:auto; max-height:none;
  aspect-ratio:9/16; object-fit:cover; border-radius:6px;
}
.tour-band--portrait.is-playing .tour-vid{ aspect-ratio:9/16; }

/* The walkthrough film sits BESIDE its copy, in the same band. A centred 420px
   player on its own full-width band lined up with nothing — the copy in
   .tour-lead is left aligned, so a centred player below it read as floating. */
.lakevid-split{ display:grid; grid-template-columns:1fr minmax(280px, 380px); gap:var(--s-10); align-items:center; }
.lakevid-split .tour-lead-p{ margin-left:0; }
.lakevid-split .tour-band--portrait{ background:transparent; padding:0; display:block; }
.lakevid-split .tour-band--portrait .tour-vid{ width:100%; }
.site .tour-lead--split .in{ max-width:var(--container); }
@media (max-width:900px){
  .lakevid-split{ grid-template-columns:1fr; gap:var(--s-7); justify-items:start; }
  .lakevid-split .tour-band--portrait{ width:min(380px, 100%); }
}