/* ============================================================
   MOXIE MINDSET THERAPY  |  Home
   Single file. No build step, no dependencies beyond Google Fonts.
   Tokens come from the Brand Identity Guide, Volume One.

   Layout: fluid from 320px up, with two breakpoints.
     >= 1024px  desktop, two-column hero, three-up rows
      720-1023  tablet, narrower gutters, two-up where it helps
      <  720px  mobile, single column (moved from 760 in Phase 6a, so every
                iPad in portrait, 744 and up, gets the tablet layout)

   Painted marks: each mark is a stack of transparent WebP layers on a
   shared canvas, one layer per brush stroke. They paint on with a
   clip-path wipe the first time they scroll into view.
   ============================================================ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
img{max-width:100%}
.skip{position:absolute;left:-9999px;top:0;background:var(--anchor);color:var(--ground);padding:12px 18px;z-index:99}
.skip:focus{left:12px;top:12px}
/* text for screen readers only (the WordPress pattern), e.g. the specialty named after "See all articles on this" */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
:root{
  --anchor:#2E4A50; --sand:#C9A57E; --rose:#B08A8F; --depth:#3D5A4C;
  --ground:#EDE6D8; --cream-soft:#F4F0E7; --ink:#2B2A27; --ink-soft:#5A564E;
  --hairline:#D8CFBE; --teal-deep:#233A3F;
  /* text colours for accessibility (BUILD-PLAN blocker 14, CLAUDE.md): text only; marks,
     bands, backgrounds, borders and icons keep the base palette above */
  --sand-text:#AA7B47;           /* sand words on ground 3.00:1, on cream 3.28:1 (large text, AA 3:1) */
  --on-rose:var(--ink);          /* text on any rose background, 4.70:1: the specialty tabs, the
                                    Services spotlight, the pillar and send-list hovers */
  --rose-text:#89575E;           /* rose text on ground, 4.71:1 (same value as forms.css --rose-deep) */
  --quote-on-sand:var(--teal-deep); /* quote text on the sand endorsement band, 5.24:1 */
  --warm:var(--sand-text);       /* where emphasis words warm to; the dark boxes set --sand (see below) */
  --serif:"Fraunces","Iowan Old Style",Georgia,serif;
  --sans:"Mulish","Helvetica Neue",Arial,sans-serif;
  --pad:64px; --measure:62ch;
  --wrap:clamp(1120px,88vw,1440px);
  background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
*{box-sizing:border-box}
a{color:var(--anchor);text-decoration:none;border-bottom:1px solid var(--sand);transition:border-color .2s}
a:hover{border-color:var(--anchor)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--anchor);outline-offset:3px}
p{margin:0 0 1em}
html{scroll-behavior:smooth}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
/* viewport-fit=cover (header.php): on a notched phone in landscape the side gutters grow to
   clear the notch; everywhere else the insets are 0 and nothing changes */
@supports (padding:max(0px)){
  .wrap{padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}
}
.statement{font-family:var(--serif);font-weight:300;line-height:1.18;letter-spacing:-.012em;color:var(--ink);margin:0 0 .5em;font-variation-settings:"opsz" 144}
.statement.xl{font-size:clamp(52px,4.1vw,62px);line-height:1.1}
.statement.lg{font-size:clamp(36px,2.85vw,43px)}
.statement.md{font-size:clamp(28px,2.2vw,33px);line-height:1.28}
.explain{font-size:clamp(18px,1.4vw,20px);color:var(--ink-soft);max-width:var(--measure);margin:0 0 1.2em}
.quiet{color:var(--ink-soft);font-size:15px}
.wayfind{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-soft)}
.rose{color:var(--rose)}
.hr{height:1px;background:var(--hairline);border:0;margin:0}
section{padding:72px 0}
.alt{background:var(--cream-soft)}
.btn{display:inline-block;font-family:var(--sans);font-weight:600;font-size:16px;line-height:1;padding:17px 26px;border-radius:4px;border:1px solid var(--anchor);background:var(--anchor);color:var(--ground);cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:var(--teal-deep);border-color:var(--teal-deep)}
.btn.outline{background:transparent;color:var(--ground);border-color:rgba(237,230,216,.7)}
.btn.outline:hover{background:rgba(237,230,216,.1);border-color:var(--ground)}
.btn.warm{background:var(--sand);border-color:var(--sand);color:var(--ink)}
.btn.warm:hover{background:var(--anchor);border-color:var(--anchor);color:var(--ground)}

/* painted marks: the real paintings, paper keyed to alpha so the stroke sits on the page surface */
.mark{display:block;width:100%;height:auto}
/* her name carries the ground line: same mark, painted as an underline */
.uline{position:relative;display:inline-block}
.uline .name-line{position:absolute;left:-3%;right:-3%;bottom:-.26em;height:auto;pointer-events:none}
.person h2 .l2{display:inline-block;padding-top:.16em}
/* Painted-mark choreography. Each mark is a stack of transparent layers on one canvas:
   the ground line first, then each stroke in painting order. Nothing is video; the
   layers are the real paintings, revealed with a clip-path wipe in the stroke's own direction. */
.stack{position:relative;display:block;overflow:visible}
.stack .layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:inherit;display:block;
  clip-path:inset(0 100% 0 0);will-change:clip-path}
.stack .layer[data-dir="up"]{clip-path:inset(100% 0 0 0)}
.stack.in .layer{animation:paint-stroke var(--d,1s) cubic-bezier(.35,.55,.2,1) calc(var(--delay,0s) + var(--g,0s)) forwards}
.pillars>div:nth-child(2) .stack{--g:.6s}.pillars>div:nth-child(3) .stack{--g:1.2s}

@keyframes paint-stroke{to{clip-path:inset(0 0 0 0)}}
ul.steps{list-style:none;padding:0;margin:0 0 1.2em}
ul.steps li{position:relative;padding-left:38px;margin:0 0 10px}
ul.steps li::before{content:"";position:absolute;left:0;top:.62em;width:24px;height:14px;background:url(../img/bullet.webp) center/contain no-repeat}
.reveal li{opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease}
.reveal.in li{opacity:1;transform:none}
.reveal.in li:nth-child(2){transition-delay:.12s}.reveal.in li:nth-child(3){transition-delay:.24s}.reveal.in li:nth-child(4){transition-delay:.36s}.reveal.in li:nth-child(5){transition-delay:.48s}.reveal.in li:nth-child(6){transition-delay:.6s}


/* ---- color differentiation, inside the guide's ratios ---- */
/* depth evergreen: tags and quiet secondary structure */
.tag{display:inline-block;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.05em;line-height:1;color:var(--depth);border:1px solid rgba(61,90,76,.45);border-radius:3px;padding:5px 8px 4px;margin:8px 6px 0 0;white-space:nowrap}
.already{margin:36px 0 0;font-family:var(--serif);font-weight:300;font-size:clamp(18px,1.4vw,20px);color:var(--ink)}
/* warm sand: dividers and hover states */
nav a{position:relative;border-bottom:0}
nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--sand);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.3,.6,.2,1)}
nav a:hover::after,nav a.reach::after{transform:scaleX(1)}
nav a[aria-current="page"]{color:var(--anchor);font-weight:600}
nav a[aria-current="page"]::after{transform:scaleX(1)}
.btn:hover{border-color:var(--sand)}
.btn.outline:hover{border-color:var(--sand);color:var(--ground)}
input:focus,select:focus,textarea:focus{border-color:var(--sand)}
.fit-tab{transition:background .3s ease,color .3s ease,border-color .3s ease}
.fit-list li.active .fit-tab{background:transparent;border-color:transparent;color:var(--ink)}
.fit-tab .tag{color:var(--ground);border-color:rgba(237,230,216,.6);transition:color .3s ease,border-color .3s ease}
.fit-list li.active .fit-tab .tag{color:var(--depth);border-color:rgba(61,90,76,.45)}
/* the specialty tabs: ink on the rose (the About jump tabs share .fit-tab but sit on anchor, so this stays scoped to .fit-list) */
.fit-list .fit-tab{color:var(--on-rose)}
.fit-list .fit-tab .tag{color:var(--on-rose);border-color:rgba(43,42,39,.5)}
.pillars>div{cursor:default;padding:24px 24px 26px;margin:-24px -24px 0;border-radius:12px;transition:background .3s ease}
.pillars h3,.pillars p{transition:color .3s ease}
.stack.replay .layer{--g:0s}
/* plan check: in network answers in depth, out of network in sand. no red anywhere */
.plans{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.plan{font:inherit;font-size:14.5px;font-weight:600;line-height:1;padding:10px 13px;border-radius:3px;border:1px solid var(--hairline);background:transparent;color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
/* out-of-network facts wear the same box clothes as the plan buttons, without the click */
.plan-fact{font-size:14.5px;font-weight:600;line-height:1.45;padding:10px 13px;border-radius:3px;border:1px solid var(--hairline);color:var(--ink)}
.plan[aria-pressed="true"]{background:var(--depth);border-color:var(--depth);color:var(--ground)}
.plan.other[aria-pressed="true"]{background:var(--sand);border-color:var(--sand);color:var(--ink)}
.plan-answer{margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--hairline);font-size:16px;line-height:1.6;min-height:2.4em;color:var(--ink)}
.plan-answer[data-state="in"]{border-top-color:var(--depth)}
.plan-answer[data-state="out"]{border-top-color:var(--sand)}
.plan-answer b{font-weight:600}
.plan-answer[data-state="in"] b{color:var(--depth)}
/* rose: the one moment per page. the arc is the work between them and appears where change happens */


/* headline: each word lifts softly out of its own line box, "steady place" arrives in anchor teal,
   then the pair warms to sand once both words have settled */
/* the gold treatment: emphasized words rise into place, then warm to sand.
   Any .statement can carry it: add .rise to the heading, wrap each gold word
   in a .w.em span with --i, and the reveal observer starts it on first view. */
.rise .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.06em .04em .12em 0;margin:-.06em 0 -.12em 0}
.rise .w i{display:inline-block;font-style:normal;transform:translateY(60%);opacity:0}
.rise.in .w i{animation:word-rise 1.3s cubic-bezier(.22,.55,.2,1) calc(var(--i)*160ms + .35s) both}
.rise .w.em i{color:var(--anchor);font-style:italic}
.band .rise .w.em i{color:var(--ground)}
.rise.in .w.em i{animation:word-rise 1.3s cubic-bezier(.22,.55,.2,1) calc(var(--i)*160ms + .35s) both,word-warm .7s ease 1.9s forwards}
.statement .hl{position:relative;display:inline-block;z-index:0;font-style:italic}
.statement .hl::before{content:"";position:absolute;z-index:-1;left:-.06em;right:-.08em;top:.75em;bottom:.16em;background:var(--sand);opacity:.42;transform:scaleX(0);transform-origin:left}
.rise .hl::before{display:none}
.reveal.in .hl{animation:word-warm .7s ease .4s forwards}
@keyframes word-rise{to{transform:translateY(0);opacity:1}}
@keyframes word-warm{to{color:var(--warm)}}
/* on the dark boxes the emphasis words keep the base sand: 4.15:1 on anchor, 3.32:1 on depth
   (the text sand would fall to 2.55:1 and 2.04:1 there) */
.band,.cost-hero,.send-intro,.faq-intro{--warm:var(--sand)}
@keyframes hl-sweep{to{transform:scaleX(1)}}

/* placeholders for photography and the logo */
.photo{position:relative;background:var(--teal-deep);color:rgba(237,230,216,.78);display:flex;align-items:flex-end;padding:18px 20px;font-size:13px;line-height:1.45;font-family:var(--sans);overflow:hidden;border-radius:12px}
.photo::before{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse 70% 60% at 50% 40%,rgba(201,165,126,.22),transparent 70%),
  linear-gradient(180deg,rgba(46,74,80,.4),rgba(35,58,63,1))}
.photo.room{background:var(--anchor)}
.photo span{position:relative;z-index:1}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.logo{display:inline-flex;flex-direction:column;line-height:1;font-family:var(--serif);font-weight:400;color:var(--anchor);border-bottom:0}
.logo b{font-weight:400;font-size:21px;letter-spacing:-.01em}
.logo small{font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink-soft);margin-top:5px}
.logo.reverse{color:var(--ground)}
.logo.reverse small{color:rgba(237,230,216,.72)}
.logo-note{display:block;font-family:var(--sans);font-size:10px;color:var(--ink-soft);margin-top:4px;letter-spacing:0;text-transform:none;font-weight:400;opacity:.75}
.logo.reverse .logo-note{color:rgba(237,230,216,.6)}
.logo svg{display:block;width:202px;height:auto}
.band .logo svg{width:200px}
footer .logo svg{width:170px}
.confirm{font-family:var(--sans);font-size:13px;color:var(--ink-soft);background:rgba(201,165,126,.18);border:1px dashed var(--sand);border-radius:3px;padding:2px 7px;display:inline-block;line-height:1.5}

/* ---- header ---- */
header{padding:26px 0 22px}
header .wrap{display:flex;align-items:center;gap:36px}
nav{display:flex;gap:22px;margin-left:auto;font-size:20px}
nav a{white-space:nowrap}
nav a{border-bottom-color:transparent;color:var(--ink)}
nav a:hover{border-bottom-color:var(--sand)}
nav a.reach{color:var(--anchor);border-bottom-color:var(--sand);font-weight:600}
.menu-btn{display:none}
nav.open{display:flex}

/* ---- hero ---- */
.hero{padding:40px 0 56px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center}
.hero .hero-copy{align-self:center}
.hero figure{align-self:center;margin:0}
.hero .explain{max-width:56ch}
.hero-cta{margin-top:26px;display:flex;align-items:center;justify-content:flex-end;gap:22px;flex-wrap:wrap}
.hero-cta .quiet{margin:0}
.cta-line{font-family:var(--sans);font-weight:600;font-size:18px;color:var(--rose-text);border-bottom:1px solid var(--rose-text);padding-bottom:2px;transition:color .2s,border-color .2s}
.cta-line:hover{color:var(--anchor);border-color:var(--anchor)}
.hero .photo{aspect-ratio:4/5;width:100%;max-width:480px;margin-left:auto}
.hero figcaption{font-size:14px;color:var(--ink-soft);margin-top:10px;max-width:480px;margin-left:auto}
/* the about page mirrors the hero: portrait left, the letter right */
body[data-page="about"] .hero .wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
body[data-page="about"] .hero figure{order:-1}
body[data-page="about"] .hero .photo,body[data-page="about"] .hero figcaption{margin-left:0;margin-right:auto}
@media (min-width:720px){
  body[data-page="about"] .hero figure{align-self:stretch;display:flex;flex-direction:column}
  body[data-page="about"] .hero .photo{flex:1;aspect-ratio:auto;max-width:none;min-height:420px}
}

/* ---- fit ---- */
.fit{overflow-x:clip;padding:64px 0 132px}
.fit h2{text-align:center}
.fit .explain{text-align:center;margin-left:auto;margin-right:auto}
/* the index and the panel: titles on the left, one shared panel on the right.
   At rest the panel shows the arc, painted on first view; hovering or choosing
   a title fills the panel with that specialty, its mark painting in fresh. */
.fit-split{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:0 64px;margin-top:36px}
/* the index: each title is its own rounded rose button; the engaged one clears to the
   page ground inside a rose keyline. Radius matches the photos. */
.fit-list{list-style:none;margin:34px 0 0;padding:0}
.fit-list li+li{margin-top:14px}
.fit-tab{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 12px;width:100%;font:inherit;text-align:center;color:var(--ground);background:var(--rose);border:1px solid var(--rose);border-radius:12px;cursor:pointer;padding:16px 18px;margin:0}
.fit-tab .tag{margin:0}
.fit-tab .tags{flex-basis:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px}
.panel-close{display:none;position:absolute;top:10px;right:10px;width:34px;height:34px;align-items:center;justify-content:center;font:300 20px/1 var(--sans);color:var(--ink);background:transparent;border:1px solid var(--hairline);border-radius:50%;cursor:pointer;padding:0}
.panel-close::before{content:"\00d7"}
.fit-panels{position:relative;display:grid;grid-template-rows:1fr}
/* a panel hugs its own content; only the resting arc stretches, to center itself */
.fit-panel{display:none;grid-area:1/1;align-self:start;text-align:center}
.fit-panel.rest{align-self:stretch}
.fit-panel.active{display:block}
/* the resting arc centers on both axes against the height of the title column */
.fit-panel.rest.active{display:flex;flex-direction:column;align-items:center;justify-content:center}
.fit-note{max-width:none;margin:24px 0 8px}
.fit-note .statement.md{font-family:var(--serif);font-style:italic;font-weight:400;font-size:24px;line-height:1.4;letter-spacing:normal;font-variation-settings:normal;margin-bottom:0;text-align:center;color:var(--anchor)}
/* an engaged panel centers its content vertically against the title column */
.fit-panel.active:not(.rest){align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.fit-panel .stack{display:block;width:min(74%,560px);height:auto;margin:8px auto 6px}
.fit-panel.rest .stack{width:min(86%,620px);margin:0}
.fit-panel .panel-link{margin-top:24px;max-width:none}
.fit-panel p{font-size:clamp(18px,1.4vw,20px);line-height:1.65;color:var(--ink-soft);margin:16px auto 0;max-width:62ch}
.fit-panel .client{font-family:var(--serif);font-style:italic;font-weight:400;font-size:24px;line-height:1.4;color:var(--depth);margin:20px auto 10px;max-width:44ch}
/* each quote arrives softly, one after another, like a thought landing */
.fit-panel .client{animation:quote-fade 1s ease both}
.fit-panel .client:nth-of-type(2){animation-delay:.35s}
.fit-panel .panel-link{animation:quote-fade 1s ease .75s both}
@keyframes quote-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fit-panel .provider{margin-top:6px}
.fit-panel .more-cta{margin-top:18px}
.fit-list h3{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.25;margin:0;letter-spacing:-.005em}
.fit-list h3 small{display:block;font-family:var(--sans);font-size:13px;color:var(--ink-soft);margin-top:4px;letter-spacing:0}
.fit-foot{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:36px;align-items:start}
.fit-foot p{max-width:52ch}

/* ---- insurance ---- */
.cost-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px 72px;margin-top:40px;align-items:start}
.cost-nets{display:grid;gap:40px}
.cost-session{margin-top:56px}
/* h2 since Phase 7a's axe pass (the page's h1 is the cost heading); the size and look are unchanged */
.cost-block h2{font-family:var(--serif);font-weight:400;font-size:22px;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--hairline)}
.rates{width:100%;border-collapse:collapse;font-size:16px}
.rates td{padding:11px 0;border-bottom:1px solid var(--hairline);vertical-align:top}
.rates td:last-child{text-align:right;white-space:nowrap;font-weight:600;color:var(--ink)}
.rates td small{display:block;font-size:13.5px;color:var(--ink-soft);font-weight:400}
.free{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.3;color:var(--anchor);margin:22px 0 8px}

/* ---- the word and its pillars: everything centered, three columns kept ---- */
.word{padding:72px 0 204px}
.word .wrap{text-align:center}
.word .explain{margin-left:auto;margin-right:auto;font-size:20px}
.word .already{font-size:25px;color:var(--anchor)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:36px}
.pillars .mark{max-width:322px;height:146px;object-fit:contain;object-position:center bottom;margin:0 auto 10px}
/* below 1180 the three columns must be allowed to shrink under a mark's 322px, or the row
   runs off the side of the screen (tablets, and 1024 to 1179; found in Phase 6a) */
@media (max-width:1179px){.pillars{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pillars h3{font-family:var(--serif);font-weight:400;font-size:22px;margin:0 0 6px}
.pillars p{font-size:clamp(18px,1.4vw,20px);color:var(--ink-soft);max-width:34ch;margin:0 auto}

/* ---- the one teal band ---- */
.band{background:var(--anchor);color:var(--ground);padding:88px 0}
.band .wrap{display:grid;grid-template-columns:1fr auto;gap:56px;align-items:end}
.band .side{display:flex;flex-direction:column;align-items:center;text-align:center;gap:34px}
.band .statement{color:var(--ground);font-size:clamp(40px,3.15vw,48px);max-width:22ch;margin:0}
.band .logo{margin:0}
.band .band-link{font-size:clamp(18px,1.4vw,20px);margin:0}
.band .band-link a{color:var(--ground)}
.band .band-link a:hover{border-color:var(--ground)}

/* ---- real person ---- */
.person .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.person .photo{aspect-ratio:4/5;max-width:480px}
.person .creds{font-size:15px;color:var(--ink-soft);margin:0 0 22px;max-width:420px;line-height:1.6}
/* the colleague endorsement, one voice on the teal */
.endorse-band{background:var(--anchor);color:var(--ground);padding:76px 0}
.endorse{margin:0}
.endorse p{font-family:var(--serif);font-style:italic;font-weight:400;font-size:24px;line-height:1.4;color:var(--ground);margin:0 auto;max-width:66ch;text-align:center}
.endorse cite{display:block;font-style:normal;font-size:15px;color:rgba(237,230,216,.75);margin-top:16px;text-align:center}
.endorse-nav{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--ground);border:1px solid rgba(237,230,216,.45);border-radius:50%;cursor:pointer;padding:0;transition:border-color .2s ease,color .2s ease}
.endorse-nav svg{width:17px;height:17px;display:block}

/* ---- contact ---- */
.contact .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
form{margin-top:34px;max-width:560px}
.field{margin:0 0 18px}
label,legend{display:block;font-size:15px;font-weight:600;color:var(--ink);margin:0 0 7px;padding:0}
label span,legend span{font-weight:400;color:var(--ink-soft)}
input[type=text],input[type=tel],input[type=email],select,textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--cream-soft);border:1px solid var(--hairline);border-radius:4px;padding:12px 14px;transition:border-color .2s}
input:hover,select:hover,textarea:hover{border-color:var(--sand)}
textarea{min-height:112px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
fieldset{border:0;padding:0;margin:0 0 18px}
.radios{display:flex;gap:22px;flex-wrap:wrap}
.radios label{font-weight:400;display:flex;align-items:center;gap:9px;margin:0;cursor:pointer}
.radios input{accent-color:var(--anchor);width:17px;height:17px;margin:0}

/* ---- services: five full rows, the rose spotlight follows the scroll ---- */
.svc-head{padding:104px 0 20px;text-align:center}
.svc-head .explain{margin-left:auto;margin-right:auto}
.svc-body{padding-top:0}
.svc-list{margin-top:4px}
.svc-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px 64px;align-items:center;border-radius:12px;padding:60px 48px;margin-top:44px;transition:background .45s ease,margin .45s ease,padding .45s ease}
.svc-row.on{padding-top:110px;padding-bottom:110px}
.svc-row:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.svc-row:nth-child(even) .svc-art{order:2}
.svc-art{display:grid;gap:24px;align-content:center}
.svc-row .stack{width:min(100%,440px);margin:0 auto}
.svc-quotes{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;background:var(--ground);border-radius:12px;padding:22px 12px;transition:background .45s ease}
.q-slides{display:grid}
.q-slides .client{grid-area:1/1;align-self:center;margin:0;visibility:hidden;opacity:0;transition:opacity .45s ease,color .45s ease}
.q-slides .client.current{visibility:visible;opacity:1}
.svc-quotes .endorse-nav{width:34px;height:34px;border:0;background:transparent;color:var(--anchor);transition:color .45s ease}
.svc-quotes .endorse-nav svg{width:16px;height:16px}
.svc-row h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.1vw,31px);line-height:1.25;letter-spacing:-.005em;margin:0;color:var(--ink);transition:color .45s ease}
.svc-title{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.svc-tags{margin:0}
.svc-row .tag{margin:0 6px 0 0;transition:color .45s ease,border-color .45s ease}
.svc-row .client{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(19px,1.5vw,22px);line-height:1.4;color:var(--depth);margin:0 0 16px;max-width:46ch}
.svc-row .svc-notes p{font-size:clamp(17px,1.3vw,19px);line-height:1.65;color:var(--ink-soft);margin:14px 0 0;max-width:60ch;transition:color .45s ease}
.svc-row.on{background:var(--rose)}
/* the rose spotlight carries ink text (--on-rose, 4.70:1; BUILD-PLAN blocker 15) */
.svc-row.on h2{color:var(--on-rose)}
.svc-row.on .svc-notes p{color:var(--on-rose)}
.svc-row.on .tag{color:var(--on-rose);border-color:rgba(43,42,39,.5)}
/* Articles on this (Phase 7c): up to two related articles under a specialty, only when any
   exist (template-parts/specialty-row.php) */
.svc-articles{margin-top:22px}
.svc-articles-title{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 4px;transition:color .45s ease}
.svc-articles ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;column-gap:28px}
.svc-articles li,.svc-articles-all{position:relative;padding:8px 0}
.svc-articles-all{margin:4px 0 0}
.svc-articles a{font-size:17px;color:var(--anchor)}
.svc-articles a::before{content:"";position:absolute;inset:0}
.svc-row.on .svc-articles-title,.svc-row.on .svc-articles a{color:var(--on-rose)}
.svc-more{padding:46px 40px 8px;text-align:center}
.svc-more .client{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(20px,1.65vw,24px);line-height:1.4;color:var(--depth);margin:0 auto;max-width:44ch}
.svc-more .provider{font-size:clamp(17px,1.3vw,19px);line-height:1.65;color:var(--ink-soft);margin:12px auto 0;max-width:52ch}
.svc-more .more-cta{margin-top:22px}

/* ---- footer ---- */
footer{background:var(--anchor);color:var(--ground);padding:60px 0 40px;padding-bottom:calc(40px + env(safe-area-inset-bottom,0px));font-size:15px}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;align-items:start}
/* the two link columns start level (the mockup centered each on its own; with six links in column 3 their tops no longer matched) */
footer .wrap>div:nth-child(2),footer .wrap>div:nth-child(3){align-self:start}
footer a{color:var(--ground);border-bottom-color:rgba(237,230,216,.35)}
footer a:hover{border-bottom-color:var(--ground)}
footer ul{list-style:none;padding:0;margin:0;font-size:20px}
footer li{margin:0 0 12px}
footer p{margin:0 0 .8em;color:rgba(237,230,216,.85);max-width:36ch}
footer .fine{grid-column:1/-1;margin-top:36px;padding-top:22px;border-top:1px solid rgba(237,230,216,.2);font-size:13px;color:rgba(237,230,216,.7);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer .fine p{margin:0;max-width:none}

/* ---- the quiet, ever-present way to reach a person ---- */
.sticky-wrap{position:fixed;left:0;right:0;bottom:26px;bottom:calc(26px + env(safe-area-inset-bottom,0px));height:0;display:flex;align-items:flex-end;justify-content:flex-end;padding:0 32px;pointer-events:none;z-index:5}
.pill{pointer-events:auto;display:flex;align-items:center;gap:14px;background:var(--anchor);color:var(--ground);border-radius:999px;padding:10px 12px 10px 20px;box-shadow:0 8px 24px rgba(35,58,63,.22);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s;border-bottom:0}
.pill.show{opacity:1;visibility:visible}
.pill .t{font-size:15px;font-weight:600;line-height:1.2}
.pill .s{display:block;font-size:12.5px;font-weight:400;opacity:.8;margin-top:2px}
.pill .go{background:var(--ground);color:var(--anchor);border-radius:999px;padding:9px 16px;font-size:14px;font-weight:600;border-bottom:0}

/* ============================================================
   MOBILE (single column, 719px and below)
   ============================================================ */
/* ---- about page: four movements, one voice ---- */
.rule{padding:10px 0}
.rule .rule-line{display:block;width:min(420px,60%);margin:0 auto}
/* the path: plain text at rest; the scroll spotlight paints one box anchor at a time */
.flow{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px}
.flow-step{background:transparent;border-radius:12px;padding:26px 28px 28px;transition:background .45s ease}
.flow-step p{font-size:clamp(18px,1.4vw,20px);line-height:1.65;color:var(--ink-soft);margin:0;transition:color .45s ease}
.flow-step a{color:var(--anchor);transition:color .45s ease}
.flow-step.on{background:var(--anchor)}
.flow-step.on p{color:var(--ground)}
.flow-step.on a{color:var(--ground)}
.flow-step .lead-in{transition:color .45s ease}
.flow-step.on .lead-in{color:var(--ground)}
.room-note{margin-top:14px}
.lead-in{display:inline;font-family:var(--serif);font-weight:400;color:var(--ink);margin-right:.35em}
.statement .hl.hl-inline{display:inline}
.asked-boxes{display:grid;gap:14px;margin:0;align-content:center}
.asked-col{align-self:center}
.asked-col .explain{margin:20px 0 0}
.ask-box{background:var(--depth);border-radius:12px;padding:20px 22px;transition:background .3s ease}
.ask-box dt{font-family:var(--serif);font-weight:400;font-size:20px;color:var(--ground);margin:0 0 6px;transition:color .3s ease}
.ask-box dd{margin:0;font-size:clamp(16px,1.2vw,18px);line-height:1.6;color:rgba(237,230,216,.85);transition:color .3s ease}
.ask-box a{color:var(--ground);transition:color .3s ease}
.record{padding:48px 0}
.note-ref{font-size:.6em;line-height:0}
.note-ref a{border-bottom:0;font-weight:600}
.notes{margin:10px 0 44px;padding-top:22px;border-top:1px solid var(--hairline);font-size:15px;color:var(--ink-soft)}
.notes summary{cursor:pointer;font-weight:600}
.notes ol{margin:14px 0 0;padding-left:22px}
.notes li{margin:8px 0}
.work-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 64px;align-items:start;margin-top:8px}
.room-carousel{position:relative;margin-top:34px}
.room-carousel .endorse-nav{position:absolute;top:50%;transform:translateY(-50%);color:var(--anchor);border:0;background:transparent}
.room-carousel .endorse-nav svg{width:20px;height:20px}
.room-carousel .room-prev{left:-56px}
.room-carousel .room-next{right:-56px}
.hero .jump-row{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px 12px;margin-top:34px}
.jump-row .fit-tab{flex:1;width:auto;padding:12px 10px;white-space:nowrap;background:var(--anchor);border-color:var(--anchor);font-family:var(--serif);font-weight:400;font-size:clamp(15px,1.35vw,18px);line-height:1.25;letter-spacing:-.005em}
.remote-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 64px;align-items:center;margin-top:44px}
.remote-grid h2{margin-bottom:0}
.remote-box{background:var(--anchor);border-radius:12px;padding:30px 34px}
.remote-box p{color:var(--ground);margin:0;font-size:clamp(18px,1.4vw,20px);line-height:1.65;max-width:none}
.remote-box a{color:var(--ground)}
.room-view{overflow:hidden}
.room-grid{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 20px)/2);gap:20px;transition:transform .65s cubic-bezier(.22,.55,.2,1)}
.room-grid .photo{aspect-ratio:3/2}
.train-group{margin-top:28px}
.train-label{font-size:15px;font-weight:600;color:var(--ink);margin:0 0 10px}
.train-group .tag{margin:0 8px 8px 0;font-size:13px}

@media (max-width:719px){
  .flow{grid-template-columns:1fr;gap:16px}
  .work-grid{grid-template-columns:1fr;gap:28px 0}
  .room-carousel .room-prev{left:8px}
  .room-carousel .room-next{right:8px}
  .room-grid{grid-auto-columns:100%}
  .remote-grid{grid-template-columns:1fr;gap:22px}
  .hero .jump-row{gap:12px;margin-top:34px}
  .svc-row,.svc-row:nth-child(even){grid-template-columns:1fr;padding:30px 18px;gap:18px 0;margin-top:26px}
  .svc-row:nth-child(even) .svc-art{order:0}
  .svc-row .stack{max-width:300px}
  .svc-more{padding:36px 12px 4px}
  .jump-row .fit-tab{width:100%}
  .wrap{padding:0 22px;padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px))}
  section{padding:52px 0}
  .explain,.pillars p{font-size:16.5px}
  header{padding:18px 0 14px}
  .logo svg{width:162px}
  .hero{padding:26px 0 52px}
  .hero .wrap{grid-template-columns:1fr;gap:34px}
  /* the about hero's own two columns must stack too (its rule outranks .hero .wrap) */
  body[data-page="about"] .hero .wrap{grid-template-columns:1fr}
  .hero figure,body[data-page="about"] .hero figure{order:2;margin:0}
  .hero .photo{max-width:none;aspect-ratio:4/3.4}
  .hero-copy{order:1}
  .fit{padding:40px 0 84px}
  .word{padding:52px 0 136px}
  .fit-split{grid-template-columns:1fr;gap:8px 0}
  .fit-panel .client{font-size:21px;line-height:1.4}
  /* on small screens an engaged specialty opens as a pop-up with a close X,
     and the resting arc stays out of the way entirely */
  .fit-panel.rest,.fit-panel.rest.active{display:none}
  .fit-panel .panel-close{display:flex}
  .fit-split:has(.fit-panel.active:not(.rest))::after{content:"";position:fixed;inset:0;background:rgba(43,42,39,.45);z-index:8}
  .fit-panel.active:not(.rest){position:fixed;z-index:9;left:16px;right:16px;top:50%;transform:translateY(-50%);max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow:auto;background:var(--ground);border-radius:12px;padding:30px 20px 24px;box-shadow:0 12px 34px rgba(35,58,63,.28)}

  .fit-foot{grid-template-columns:1fr;gap:26px}
  .cost-top{grid-template-columns:1fr;gap:30px}
  .pillars{grid-template-columns:1fr;gap:12px}
  .pillars>div{padding:18px 16px;margin:0 -16px}
  .pillars .mark{max-width:280px;height:126px}
  .band{padding:64px 0}
  .band .wrap{grid-template-columns:1fr;gap:30px;align-items:start}
  .band .side{gap:24px}
  .person .wrap,.contact .wrap{grid-template-columns:1fr;gap:36px}
  .endorse-band{padding:52px 0}
  .endorse p{font-size:21px}
  .endorse-nav{width:38px;height:38px}
  .person .photo{max-width:none;aspect-ratio:4/4.4}
  .two{grid-template-columns:1fr}
  footer .wrap{grid-template-columns:1fr;gap:30px}
  footer .fine{flex-direction:column;gap:8px}
  .sticky-wrap{padding:0 14px;bottom:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));justify-content:stretch}
  .pill{width:100%;border-radius:14px;justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){
  .stack .layer{animation:none!important;clip-path:none!important}
  .rise .w i{animation:none!important;transform:none!important;opacity:1!important}
  .rise .w.em i{color:var(--warm)}
  .statement .hl{color:var(--warm)}
  .fit-panel .client,.fit-panel .panel-link{animation:none!important;opacity:1!important;transform:none!important}
  .reveal li{opacity:1;transform:none;transition:none}
  .room-grid{transition:none!important}
  html{scroll-behavior:auto}
}

/* ---- tablet: between the mobile stack and the full desktop grid ---- */
@media (min-width:720px) and (max-width:1023px){
  :root{--pad:40px}
  .room-carousel .room-prev{left:-40px}
  .room-carousel .room-next{right:-40px}
  /* the chevrons sit flush with the screen edge and 4px over the photo row; keep them above
     the photos so all of the button is tappable (nothing visible changes) */
  .room-carousel .endorse-nav{z-index:1}
  .hero .wrap{gap:40px}
  .cost-top{grid-template-columns:1fr;gap:34px}
  .pillars{gap:28px}
  .person .wrap,.contact .wrap{gap:40px}
}
@media (max-width:1023px){
  :root{--pad:40px}
  /* the For professionals utilities (office line, copy link, PDF link): 24px between rows, so
     each link's 44px hit area (12px above and below it) stays clear of the next (blocker 6
     added the third link; spacing change below 1024px only, per Phase 6a) */
  .hero .ref-utilities{row-gap:24px} /* .hero: the base rule comes later in this file */
}

/* fluid headline type below desktop (Phase 6a), replacing the old steps (36/44 xl, 29/32 lg,
   24 md, 30 band, 21 fit note). Two straight runs that meet: 390 to 820 lands exactly on
   the old phone and tablet sizes, 820 to 1024 climbs to exactly the desktop clamp's value
   at 1024, so nothing jumps anywhere from 320 up and desktop is untouched. */
@media (max-width:1023px){
  .statement.xl{font-size:clamp(34px,calc(28.744px + 1.8605vw),44px)}
  .statement.lg{font-size:clamp(28px,calc(26.279px + .6977vw),32px)}
  .statement.md{font-size:clamp(23px,calc(20.372px + .9302vw),28px)}
  .band .statement{font-size:clamp(28px,calc(20.93px + 2.3256vw),40px)}
  .fit-note .statement.md{font-size:clamp(20px,calc(18.279px + .6977vw),24px)}
}
@media (min-width:820px) and (max-width:1023px){
  .statement.xl{font-size:calc(11.843px + 3.9216vw)}
  .statement.lg{font-size:calc(15.922px + 1.9608vw)}
}

/* the 20px menu steps down only where it would no longer fit on one line */
@media (min-width:1024px) and (max-width:1160px){
  nav{font-size:17px;gap:18px}
}

/* homepage fit panels: the quotes walk one at a time behind chevrons, as on Services */
.fit-panel .svc-quotes{background:var(--cream-soft);margin:20px auto 6px;max-width:560px}
.fit-panel .q-slides .client{animation:none;margin:0 auto;max-width:44ch}

/* ---- professionals: the referral page ---- */
.ref-utilities{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:28px;font-size:16px}
.cred-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;align-items:start;margin-top:26px}
/* credentials and approaches fold away until asked for */
.cred-fold summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.cred-fold summary::-webkit-details-marker{display:none}
.cred-fold .train-label{margin:0;font-size:clamp(18px,1.4vw,20px)}
.fold-mark{position:relative;width:14px;height:14px;flex:none}
.fold-mark::before,.fold-mark::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;background:var(--anchor);transition:transform .3s ease}
.fold-mark::after{transform:rotate(90deg)}
.cred-fold[open] .fold-mark::after{transform:rotate(0deg)}
.fold-tags{padding:0 0 16px}
.office-hours{margin-top:30px}

/* ---- policies: the rate rows answer the hover in anchor ---- */
body[data-page="policies"] .rates{border-collapse:separate;border-spacing:0;margin:0 -16px;width:calc(100% + 32px)}
body[data-page="policies"] .rates td{padding:12px 16px;transition:background .3s ease,color .3s ease,border-color .3s ease}
body[data-page="policies"] .rates td small{transition:color .3s ease}

/* ---- policies: the body reads a step larger, accents scaled to match ---- */
body[data-page="policies"] .rates{font-size:18px}
body[data-page="policies"] .rates td small{font-size:15.5px}
body[data-page="policies"] .plan,body[data-page="policies"] .plan-fact{font-size:16px}
body[data-page="policies"] .plan-answer{font-size:18px}
body[data-page="policies"] .faq-a p{font-size:18px}
body[data-page="policies"] .quiet{font-size:16px}

/* ---- policies: the cost heading rides in an anchor box, centered on its column ---- */
.cost-hero{background:var(--anchor);border-radius:12px;padding:44px 40px;margin:0;align-self:center}
.cost-hero{color:var(--ground)}
.cost-hero .w.em i{color:var(--ground)}

/* ---- policies: the FAQ cards. Hover previews the green; a click pins it open ---- */
/* the intro rides in its own depth-green box, dividing rates from the questions */
.faq-intro{background:var(--depth);border-radius:12px;padding:52px 48px 44px;margin:64px 0 44px;text-align:center}
.faq-intro .statement{color:var(--ground);margin-bottom:.35em}
.faq-intro .explain{color:rgba(237,230,216,.92);margin:0 auto}
.faq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start;margin:18px 0 48px}
.faq{background:var(--cream-soft);border:1px solid var(--hairline);border-radius:12px;transition:background .25s ease,border-color .25s ease}
.faq-q{display:block;width:100%;font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.35;text-align:left;color:var(--ink);background:none;border:0;padding:22px 24px;cursor:pointer;transition:color .25s ease}
.faq-a{padding:0 24px;overflow:hidden;max-height:0;opacity:0;transition:max-height .3s ease,opacity .3s ease}
.faq-a p{font-family:var(--sans);font-size:16px;line-height:1.6;max-width:44ch;color:var(--ink-soft);margin:0;padding:2px 0 22px;transition:color .25s ease}
.faq-a .note-ref a{color:inherit}
.faq.is-open{background:var(--depth);border-color:var(--depth)}
.faq.is-open .faq-q,.faq.is-open .faq-a p{color:var(--ground)}
.faq.is-open .faq-a{max-height:640px;opacity:1}
@media (hover:hover) and (pointer:fine){
  .faq:hover,.faq:focus-within{background:var(--depth);border-color:var(--depth)}
  .faq:hover .faq-q,.faq:focus-within .faq-q,.faq:hover .faq-a p,.faq:focus-within .faq-a p{color:var(--ground)}
  .faq:focus-within .faq-q:focus-visible{outline-color:var(--ground)}
}
@media (min-width:720px) and (max-width:1023px){
  .faq-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:719px){
  .faq-grid{grid-template-columns:1fr}
  .faq-intro{padding:34px 20px 28px;margin:48px 0 32px}
  .cost-hero{padding:28px 22px}
}
@media (prefers-reduced-motion:reduce){
  .faq,.faq-q,.faq-a,.faq-a p{transition:none!important}
}
/* every contact form breathes across its whole column */
.contact form{max-width:none;margin-top:28px}
.contact .field{margin-bottom:22px}
.contact .two{gap:22px}
.contact textarea{min-height:130px}
.send-list{list-style:none;margin:40px 0 0;padding:0}
.send-list li{display:grid;grid-template-columns:170px minmax(0,4fr) minmax(0,6fr);gap:18px 44px;align-items:center;padding:26px 24px;margin:0 -24px;border-bottom:1px solid var(--hairline);border-radius:12px;transition:background .3s ease,border-color .3s ease}
.send-list li:first-child{border-top:1px solid var(--hairline)}
.send-list .stack{width:100%;max-width:170px;margin:0}
.send-list h3{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.25;letter-spacing:-.005em;margin:0}
.send-list .svc-tags{margin:8px 0 0}
.send-list .send-note{font-size:clamp(16px,1.25vw,18px);line-height:1.6;color:var(--ink-soft);margin:0;max-width:52ch}
/* what to send me: the heading rides in an anchor box, as on the policies page */
.send-intro{background:var(--anchor);border-radius:12px;padding:52px 48px 44px;text-align:center}
.send-intro .statement{color:var(--ground);margin-bottom:.4em}
.send-intro .explain{color:rgba(237,230,216,.92);margin:0 auto}
.send-intro .w.em i{color:var(--ground)}

/* the rose spotlight answers the hover, as on the pillars and the services rows */
.send-list h3 a,.send-list .send-note,.send-list .tag{transition:color .3s ease,border-color .3s ease}
/* what not to send me: plain text on the ground, centered */
.dont-box{margin-top:64px;text-align:center}
.dont-box .explain{margin-left:auto;margin-right:auto}
.dont-box .explain:last-child{margin-bottom:0}
/* what happens after you refer: one centered column, the anchor spotlight walks the steps */
.after-hub .wrap{text-align:center}
.after-hub .flow{grid-template-columns:1fr;gap:18px;max-width:860px;margin-left:auto;margin-right:auto}
.after-hub .lead-in{display:block;font-size:22px;line-height:1.3;margin:0 0 8px}
.after-hub .quiet{margin-top:28px}
.refer-foot{max-width:720px;margin:48px auto 0;padding-top:24px;border-top:1px solid var(--hairline)}
.refer-foot .quiet{margin:0;max-width:none}
/* the endorsements walk one at a time behind chevrons, on the warm sand band */
.endorse-band.warm{background:var(--sand)}
.endorsements{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px;align-items:center;margin:0}
.endorse-slides{display:grid}
.endorse-slides .endorse{grid-area:1/1;visibility:hidden;opacity:0}
.endorse-slides .endorse.current{visibility:visible;opacity:1;transition:opacity .55s ease}
.endorsements .endorse p{color:var(--quote-on-sand)}
.endorsements .endorse cite{color:var(--ink)}
.endorsements .cred{display:block;font-size:13.5px;color:var(--teal-deep);margin-top:2px}
.endorsements .endorse-nav{color:var(--anchor);border:0}
.endorsements .endorse-nav svg{width:19.5px;height:19.5px}
.office-line{margin:2px 0 26px}
.office-line .office-label{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-soft);margin-bottom:2px}
.office-line .tel{font-family:var(--serif);font-weight:400;font-size:clamp(30px,2.6vw,38px);line-height:1.2;color:var(--anchor);border-bottom:0}
.office-line .tel:hover{color:var(--teal-deep)}
.office-line .quiet{margin:8px 0 0}
@media (min-width:720px) and (max-width:1023px){
  .send-list li{grid-template-columns:130px minmax(0,4fr) minmax(0,6fr);gap:16px 28px}
}
@media (max-width:719px){
  .ref-utilities{flex-direction:column;align-items:flex-start;gap:24px}
  .send-intro{padding:34px 20px 28px}
  .cred-cols{grid-template-columns:1fr}
  .send-list li{grid-template-columns:1fr;gap:14px;padding:24px 16px;margin:0 -16px}
  .send-list .stack{max-width:210px}
  .dont-box{margin-top:48px}
  .endorsements{gap:12px}
}

/* ---- hover states that would stick after a tap on a touch screen (Phase 6a) ----
   Background and colour changes that read as "selected" answer a real pointer only.
   Same rules, same order as before; phones and tablets simply never match. */
@media (hover:hover) and (pointer:fine){
  .fit-tab:hover{background:transparent;border-color:transparent;color:var(--ink)}
  .fit-tab:hover .tag{color:var(--depth);border-color:rgba(61,90,76,.45)}
  .pillars>div:hover{background:var(--rose)}
  .pillars>div:hover p{color:var(--on-rose)}
  .pillars>div:hover h3{color:var(--on-rose)}
  .plan:hover{border-color:var(--sand)}
  .endorse-nav:hover{border-color:var(--sand);color:var(--sand)}
  .svc-quotes .endorse-nav:hover{color:var(--teal-deep);border-color:transparent}
  .ask-box:hover{background:var(--ground)}
  .ask-box:hover dt{color:var(--ink)}
  .ask-box:hover dd{color:var(--ink-soft)}
  .ask-box:hover a{color:var(--anchor)}
  .room-carousel .endorse-nav:hover{color:var(--teal-deep)}
  .jump-row .fit-tab:hover{background:transparent;border-color:transparent;color:var(--ink)}
  body[data-page="policies"] .rates tr:hover td{background:var(--anchor);color:var(--ground);border-bottom-color:var(--anchor)}
  body[data-page="policies"] .rates tr:hover td small{color:rgba(237,230,216,.85)}
  body[data-page="policies"] .rates tr:hover td:first-child{border-radius:12px 0 0 12px}
  body[data-page="policies"] .rates tr:hover td:last-child{border-radius:0 12px 12px 0}
  .send-list li:hover{background:var(--rose);border-color:transparent}
  .send-list li:has(+ li:hover){border-bottom-color:transparent}
  .send-list li:hover h3 a{color:var(--on-rose);border-bottom-color:rgba(43,42,39,.5)}
  .send-list li:hover .send-note{color:var(--on-rose)}
  .send-list li:hover .tag{color:var(--on-rose);border-color:rgba(43,42,39,.5)}
  .endorsements .endorse-nav:hover{color:var(--teal-deep)}
}

/* ---- hit areas (Phase 6a): every control reaches 44px without changing how it looks ----
   A transparent ::before, absolutely positioned, extends the tap area past the visible
   control and never overlaps a neighbour. For links that can wrap onto two lines (footer
   menus, the send-list headings) the area hangs on the line's own box (li, h3), so a
   two-line link gets a two-line area. Checked by tools/qa/responsive.js. */
.menu-btn,.plan,.svc-quotes .endorse-nav,.endorsements .endorse-nav,.footer-contact a,.cta-line,.ref-utilities>span,
footer li,.send-list h3,.person .explain>a:only-child,.after-hub .wrap>.quiet>a:only-child,.gfield_radio .gchoice{position:relative}
.menu-btn::before,.plan::before,.svc-quotes .endorse-nav::before,.endorsements .endorse-nav::before,nav a::before,footer li a::before,
.footer-contact a::before,.cta-line::before,.ref-utilities a::before,.send-list h3 a::before,.person .explain>a:only-child::before,
.after-hub .wrap>.quiet>a:only-child::before,.gfield_radio .gchoice label::before{content:"";position:absolute}
.menu-btn::before{inset:-10px -6px}
nav a::before{inset:-8px -10px}
.plan::before{inset:-4px 0}
.svc-quotes .endorse-nav::before{inset:-5px}
footer li a::before{inset:-5px 0}
.footer-contact a::before{inset:-13px 0}
.cta-line::before{inset:-10px 0}
.ref-utilities a::before{inset:-12px 0}
.send-list h3 a::before{inset:-8px 0}
.person .explain>a:only-child::before,.after-hub .wrap>.quiet>a:only-child::before{inset:-13px 0}
/* a radio's area covers its dot and label; wider to the left of the dot, where the next choice isn't */
.gfield_radio .gchoice label::before{inset:-10px -9px -10px -13px}
/* phone and tablet only (desktop layout unchanged): real spacing where two controls sit
   too close for their tap areas not to overlap */
@media (max-width:1023px){
  .footer-contact{line-height:46px}
}
/* phone endorsement chevrons are 38px circles */
@media (max-width:719px){
  .endorsements .endorse-nav::before{inset:-3px;border-radius:50%}
}

/* ---- phones in landscape (Phase 6a): 320 to 430px of height ----
   Trims vertical padding so the page's headline starts near the top of the first screen.
   Below 980px the nav is behind the Menu button, so the header is the logo and Menu only. */
@media (max-height:500px) and (orientation:landscape){
  header{padding:10px 0 8px}
  header .logo svg{width:132px}
  .hero{padding:14px 0 28px}
  .hero .photo{max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px)}
  section{padding:36px 0}
  .svc-head{padding:24px 0 8px}
  .band{padding:44px 0}
  .endorse-band{padding:40px 0}
  .fit{padding:32px 0 60px}
  .word{padding:36px 0 96px}
  .faq-intro{margin:36px 0 28px}
  .cost-hero{padding:24px 28px}
  .send-intro,.faq-intro{padding:28px 24px 24px}
}

/* ---- navigation (Phase 6b) ----
   The full nav fits on one row from 980px up (16px links, 18px gaps: logo 202 + 36 +
   links 652 + two 40px gutters = 970). Below 980 it sits behind the Menu button and opens
   as a full-width panel under the header (site.js: aria-expanded, Esc, outside tap, focus). */
@media (min-width:980px) and (max-width:1023px){
  nav{font-size:16px;gap:18px}
}
@media (max-width:979px){
  header{position:relative}
  header .wrap{gap:16px}
  .menu-btn{display:inline-flex;margin-left:auto;font:inherit;font-size:14px;font-weight:600;color:var(--anchor);background:none;border:0;border-bottom:1px solid var(--sand);padding:0;cursor:pointer}
  nav{display:none}
  nav.open{display:flex;flex-direction:column;position:absolute;z-index:20;top:100%;left:0;right:0;margin:0;gap:0;
    padding:6px 40px 26px;background:var(--ground);border-top:1px solid var(--hairline);box-shadow:0 18px 28px rgba(35,58,63,.14);
    max-height:calc(100vh - var(--header-h,100px));max-height:calc(100dvh - var(--header-h,100px));overflow-y:auto;overscroll-behavior:contain}
  nav.open a{display:flex;align-items:center;min-height:52px;padding:10px 0;font-size:20px;white-space:normal;border-bottom:1px solid var(--hairline)}
  nav.open a::after,nav.open a::before{display:none}
  nav.open a.reach{justify-content:center;margin-top:22px;min-height:0;padding:17px 26px;border:1px solid var(--anchor);border-radius:4px;background:var(--anchor);color:var(--ground);font-size:16px;font-weight:600;line-height:1}
}
@media (max-width:719px){
  nav.open{padding-left:22px;padding-right:22px}
}
/* an open menu or specialty dialog holds the page still behind it */
html.moxie-lock,html.moxie-lock body{overflow:hidden;overscroll-behavior:none}

/* ---- the Home specialty pop-up on phones (Phase 6b): a real dialog (home.js) ----
   The backdrop is also set by a class from JS, for browsers without :has(). */
@media (max-width:719px){
  .fit-split.dialog-open::after{content:"";position:fixed;inset:0;background:rgba(43,42,39,.45);z-index:8}
  /* the close button's ::before is its x glyph, so the 44px hit area is its ::after */
  .panel-close::after{content:"";position:absolute;inset:-7px;border-radius:50%}
}

/* ---- carousels (Phase 6b): swipe with a finger (site.js); vertical scrolling passes through ---- */
.room-view,.endorse-slides,.q-slides{touch-action:pan-y}
/* phones: the room chevrons sit over the photos, on a soft round ground so they read on any photo */
@media (max-width:719px){
  .room-carousel .endorse-nav{z-index:2;width:44px;height:44px;background:rgba(237,230,216,.88);border-radius:50%}
}