/* New Bridges Counseling Services: preview stylesheet.
   Recipe: swiss-clean-light, palette swapped to her room (slate walls, navy couch, blush rug, the
   ink of her bridge mark). Tokens first; nothing below hardcodes a colour. */
:root{
  --bg:#eef1f5;            /* slate fog: her office walls, lightened */
  --surface:#fbfcfd;
  --surface-2:#e3e8ef;
  --text:#141d29;          /* bridge ink */
  --text-dim:#4a5666;
  --border:1px solid #d3dae4;
  --line:#c5cedb;
  --accent:#24385a;        /* couch navy: book the consultation or call. one meaning. */
  --accent-ink:#ffffff;
  --accent-deep:#24385a;   /* links on fog, 10.4:1 */
  --accent-hover:#1a2a45;
  --accent-bright:#6f8bb3; /* decorative only */
  --danger:#9b2c1f;        /* form errors only, 7:1 on surface */
  --dawn:#e3a088;          /* rug blush: light only, never text or a button */
  --dawn-soft:#f4d6c9;
  --night:#142033;         /* the one dark band, the footer */
  --night-2:#1c2b42;
  --on-night:#eef1f5;
  --on-night-dim:#b9c4d4;
  --ink-ray:rgba(20,29,41,.05);
  --glow-dawn:rgba(227,160,136,.36);
  --glow-slate:rgba(111,139,179,.22);
  --shade:rgba(20,29,41,.06);
  --font-display:'Outfit', system-ui, sans-serif;
  --font-body:'Nunito Sans', system-ui, sans-serif;
  --font-mono:'Josefin Sans', system-ui, sans-serif;  /* her logo's spaced caps: wordmark and eyebrows */
  --step-0:1rem; --step-1:1.25rem; --step-2:1.563rem;
  --step-3:1.953rem; --step-4:2.441rem; --step-5:3.052rem;
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2.5rem; --s-5:4rem; --s-6:6rem;
  --radius:14px;
  --radius-sm:8px;
  --shadow:0 10px 30px -14px rgba(20,29,41,.22);
  --shadow-lg:0 26px 60px -24px rgba(20,29,41,.32);
  --max:85rem;
  --max-wide:107.5rem;
  --header-h:4.5rem;
}

/* FONTS: self-hosted. Headings are Outfit and body is Nunito Sans (Chad, 2026-10-17: clearly apart from the other two counseling sites), one variable file for 400 to 700 */
@font-face{font-family:'Outfit';font-style:normal;font-weight:500 700;font-display:swap;src:url(../fonts/outfit-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500 700;font-display:swap;src:url(../fonts/outfit-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/nunito-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/nunito-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/josefin-sans-400-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:clamp(16px, .5vw + 12px, 20px);-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 1rem)}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;font-family:var(--font-body);font-size:var(--step-0);line-height:1.65;color:var(--text);
  background-color:var(--bg);
  /* the room: a blush light low right (the rug), a slate light top left (the walls), a fine grain */
  background-image:
    radial-gradient(ellipse 70% 45% at 92% 18%, var(--glow-dawn), transparent 70%),
    radial-gradient(ellipse 60% 40% at 4% 2%, var(--glow-slate), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .11 0 0 0 0 .16 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:100% 1500px,100% 1500px,180px 180px;
  background-repeat:no-repeat,no-repeat,repeat;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-deep);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--accent-hover)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.08;letter-spacing:-.012em;margin:0 0 .5em;color:var(--text)}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
a[href^="tel:"]{white-space:nowrap}
h1{font-size:clamp(2.3rem, 1.3rem + 3.3vw, 4.4rem);line-height:1.02;letter-spacing:-.018em}
h2{font-size:clamp(1.75rem, 1.2rem + 1.7vw, var(--step-5))}
h3{font-size:var(--step-2)}
h4{font-size:var(--step-1)}
p{margin:0 0 1em}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.show-sm{display:none}
@media (max-width:560px){.show-sm{display:inline}}
.skip-link{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--accent-ink);padding:.6rem 1rem;z-index:100;border-radius:0 0 var(--radius-sm) 0}
.skip-link:focus{left:0}
.wrap{width:min(100% - 2rem, var(--max-wide));margin-inline:auto}
.wrap>*{max-width:var(--max)}
.wrap-wide{width:min(100% - 2rem, var(--max-wide));margin-inline:auto}
@media (min-width:768px){.wrap{width:min(100% - 4rem, var(--max-wide))}.wrap-wide{width:min(100% - 4rem, var(--max-wide))}}
.narrow{max-width:46rem}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.7rem 1.35rem;border-radius:999px;font-family:var(--font-body);font-weight:600;font-size:1rem;line-height:1.2;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s;text-align:center}
.btn-lg{min-height:3.35rem;padding:.85rem 1.6rem;font-size:1.05rem}
.btn-accent{background:var(--accent);color:var(--accent-ink)}
.btn-accent:hover{background:var(--accent-hover);color:var(--accent-ink)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--text)}
.btn-ghost:hover{background:var(--text);color:var(--surface)}
.btn-soft{background:var(--surface);color:var(--accent-deep);border-color:var(--line)}
.btn-soft:hover{border-color:var(--accent);color:var(--accent-hover)}
@media (hover:hover) and (prefers-reduced-motion: no-preference){.btn-accent:hover,.btn-soft:hover{transform:translateY(-2px);box-shadow:var(--shadow)}}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}

/* ---------- top bar + header ---------- */
.topbar{background:var(--night);color:var(--on-night-dim);font-size:.85rem}
.topbar-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:2.3rem;padding-block:.3rem}
.topbar p{margin:0}
.topbar a{color:var(--on-night)}
.tb-call a{font-weight:600;text-decoration:none}
.tb-right{display:flex;gap:1.1rem;align-items:center}
.tb-crisis a{font-weight:600}
@media (max-width:760px){.tb-where,.tb-portal{display:none}}
.site-header{position:sticky;top:0;z-index:50;background:rgba(238,241,245,.9);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line)}
.header-row{display:flex;align-items:center;gap:1rem;min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--text);margin-right:auto;min-width:0}
.brand-mark{width:4.6rem;height:auto;flex:none}
.brand-word{display:flex;flex-direction:column;font-family:var(--font-mono);text-transform:uppercase;line-height:1.15;white-space:nowrap}
.bw1{font-size:1rem;letter-spacing:.3em}
.bw2{font-size:.6rem;letter-spacing:.38em;color:var(--text-dim)}
.nav-list{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:.15rem}
.nav-list a{display:block;padding:.55rem .7rem;border-radius:999px;color:var(--text);text-decoration:none;font-weight:500;font-size:.95rem}
.nav-list a:hover{background:var(--surface-2)}
.nav-list a[aria-current="page"],.has-sub.in-section>a{color:var(--accent-deep);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.45em}
.has-sub{position:relative;display:flex;align-items:center}
.sub-toggle{background:none;border:0;padding:.4rem .3rem;cursor:pointer;color:var(--text);border-radius:6px;margin-left:-.4rem}
.caret{display:block;width:.5rem;height:.5rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.sub{list-style:none;margin:0;padding:.5rem;position:absolute;top:100%;left:0;min-width:19rem;background:var(--surface);border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);display:none}
.sub a{border-radius:var(--radius-sm);font-size:.93rem}
.sub-current{border-top:var(--border);margin-top:.4rem;padding-top:.4rem}
.has-sub.open .sub{display:block}
@media (hover:hover) and (min-width:1100px){.has-sub:hover .sub,.has-sub:focus-within .sub{display:block}}
.menu-toggle{display:none;width:2.9rem;height:2.9rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);cursor:pointer;align-items:center;justify-content:center}
.menu-bars,.menu-bars::before,.menu-bars::after{display:block;width:1.15rem;height:2px;background:var(--text);border-radius:2px;position:relative}
.menu-bars::before,.menu-bars::after{content:"";position:absolute;left:0}
.menu-bars::before{top:-6px}.menu-bars::after{top:6px}
.header-cta{min-height:2.75rem;padding:.6rem 1.1rem;font-size:.95rem}
@media (max-width:1099px){
  .menu-toggle{display:inline-flex}
  .nav{position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:var(--border);box-shadow:var(--shadow-lg);display:none;max-height:calc(100svh - var(--header-h));overflow:auto}
  .nav.open{display:block}
  .nav-list{flex-direction:column;align-items:stretch;padding:.75rem 1rem 1.25rem;gap:0}
  .nav-list a{border-radius:var(--radius-sm);padding:.75rem .8rem;font-size:1.05rem}
  .has-sub{flex-wrap:wrap}
  .has-sub>a{flex:1}
  .sub{position:static;display:none;box-shadow:none;border:0;min-width:0;width:100%;padding:0 0 .5rem .75rem;background:transparent}
  .has-sub.open .sub{display:block}
  .sub-toggle{padding:.75rem}
}
@media (max-width:560px){.hide-sm{display:none}.brand-mark{width:3.3rem}.bw1{font-size:.82rem;letter-spacing:.24em}.bw2{font-size:.5rem;letter-spacing:.3em}:root{--header-h:3.9rem}.header-row{gap:.5rem}.header-cta{padding:.55rem .9rem}}
@media (max-width:370px){.brand-word{display:none}}

/* ---------- eyebrow + section heads ---------- */
.eyebrow{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.24em;font-size:.78rem;color:var(--text-dim);margin:0 0 1rem;display:flex;align-items:center;gap:.7rem}
.eyebrow::before{content:"";width:1.6rem;height:1px;background:var(--text);flex:none}
.eyebrow-light{color:var(--on-night-dim)}
.eyebrow-light::before{background:var(--on-night-dim)}
.sec-head{max-width:46rem;margin-bottom:2.2rem}
.sec-head h2{margin-bottom:.4em}
.sec-sub{font-size:var(--step-1);color:var(--text-dim);line-height:1.5;margin:0}
section{position:relative}
.surface{background:linear-gradient(180deg, var(--shade), transparent 22%, transparent 78%, var(--shade)), rgba(251,252,253,.55)}

/* ---------- home hero ---------- */
.hero{padding-top:clamp(2.2rem, 5vw, 4.6rem);overflow:hidden}
.rays{position:absolute;left:0;right:0;bottom:0;width:100%;height:78%;stroke:var(--ink-ray);stroke-width:1.2;fill:none;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 55% 85% at 50% 100%, black 35%, transparent 100%);mask-image:radial-gradient(ellipse 55% 85% at 50% 100%, black 35%, transparent 100%)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:2rem;position:relative;z-index:2}
@media (min-width:900px){.hero-grid{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);gap:clamp(2rem, 5vw, 6rem);align-items:center}}
.hero-copy .lede{font-size:clamp(1.08rem, .95rem + .45vw, 1.35rem);line-height:1.55;color:var(--text-dim);max-width:40rem;margin:1.1rem 0 0}
.hero h1{max-width:17ch}
.hero h1 .h1-sub{display:block;margin-top:.55rem;font-size:.46em;line-height:1.25;letter-spacing:0;font-weight:500;color:var(--text-dim);max-width:none}
.hero-meta{margin:1.3rem 0 0;font-size:.95rem;color:var(--text-dim);display:flex;gap:.6rem;align-items:flex-start;max-width:36rem}
.hero-meta::before{content:"";flex:none;width:.55rem;height:.55rem;margin-top:.5rem;border-radius:50%;background:var(--dawn);box-shadow:0 0 0 4px var(--dawn-soft)}
.hero-photo{margin:0;position:relative}
.hero-photo img{border-radius:var(--radius) var(--radius) 0 0;width:100%;aspect-ratio:4/5;object-fit:cover;box-shadow:var(--shadow-lg)}
.hero-photo figcaption{font-size:.88rem;color:var(--text-dim);padding:.7rem 0 0}
@media (min-width:900px){.hero-photo img{border-radius:var(--radius)}.hero-photo{max-width:min(30rem, 52svh);justify-self:end;margin-bottom:-1px}.hero-photo figcaption{position:absolute;left:0;right:0;top:100%;}}
.hero-bridge{position:relative;z-index:1;margin-top:-1px;pointer-events:none}
.bridge{display:block;width:100%;height:auto;overflow:visible}
.bridge .towers path{stroke:var(--text);stroke-width:7;fill:none;stroke-linecap:square}
.bridge .cables path{stroke:var(--text);stroke-width:2.6;fill:none;stroke-linecap:round}
.bridge .cables .c2{stroke-width:1.7}
.bridge .hg{stroke:var(--text);stroke-width:1.25;stroke-linecap:round}
.bridge .deck{stroke:var(--text);stroke-width:4.5;fill:none;stroke-linecap:round}
@media (min-width:900px){.hero-bridge{margin-top:1.2rem}.hero-grid{padding-bottom:0}}
@media (max-width:899px){
  .hero{padding-top:1.4rem;display:flex;flex-direction:column}
  .hero .hero-grid{display:contents}
  .hero .hero-copy{order:1;width:min(100% - 2rem, var(--max-wide));margin-inline:auto;position:relative;z-index:2}
  .hero .hero-bridge{order:2}
  .hero .hero-photo{order:3;width:min(100% - 2rem, 26rem);margin:2rem auto 0;position:relative;z-index:2}
  .hero-bridge{height:min(40svh, 20rem);overflow:hidden;margin-inline:0;margin-top:1.4rem}
  .hero-bridge .bridge{height:100%;width:auto;max-width:none;margin-left:calc(50vw - min(40svh, 20rem) * 1.75)}
  .rays{height:60%}
}

/* the signature: the bridge builds, the hangers drop in one at a time and catch the rug's light */
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes drop{0%{transform:scaleY(0);stroke:var(--dawn)}60%{transform:scaleY(1);stroke:var(--dawn)}100%{transform:scaleY(1);stroke:var(--text)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: no-preference){
  .bridge-hero .towers path,.bridge-hero .cables path,.bridge-hero .deck{stroke-dasharray:1;stroke-dashoffset:1}
  .bridge-hero .hg{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0)}
  .go .bridge-hero .towers path{animation:draw 1s cubic-bezier(.4,0,.2,1) .1s forwards}
  .go .bridge-hero .cables path{animation:draw 1.3s cubic-bezier(.4,0,.2,1) .7s forwards}
  .go .bridge-hero .hg{animation:drop .6s ease-out calc(1.5s + var(--i) * 55ms) forwards}
  .go .bridge-hero .deck{animation:draw 1.1s cubic-bezier(.4,0,.2,1) 1.6s forwards}
  .no-io .bridge-hero .towers path,.no-io .bridge-hero .cables path,.no-io .bridge-hero .deck{stroke-dashoffset:0}
  .no-io .bridge-hero .hg{transform:none}
}
/* phone: restrained (Lindsey, 2026-10-17, "simple and warm"): the words are there at once and the
   bridge builds in place below them. */

/* ---------- interior hero ---------- */
.page-hero{padding:clamp(2.2rem, 5vw, 4.4rem) 0 0;overflow:hidden}
.page-hero-grid{display:grid;grid-template-columns:1fr;gap:2.2rem;align-items:center;padding-bottom:clamp(2rem, 4vw, 3.4rem)}
@media (min-width:900px){.page-hero-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(2rem, 5vw, 5.5rem)}.no-fig .page-hero-grid{grid-template-columns:minmax(0,1fr)}}
.page-hero h1{font-size:clamp(2.1rem, 1.25rem + 2.8vw, 3.9rem);max-width:20ch}
.page-hero .lede{font-size:clamp(1.06rem, .95rem + .4vw, 1.3rem);color:var(--text-dim);line-height:1.55;max-width:42rem;margin-top:1rem}
.hero-legal h1{font-size:clamp(2rem, 1.3rem + 2.2vw, 3.3rem)}
.span-rule{display:block;width:100%;height:clamp(2.4rem, 4vw, 3.6rem)}
.span-rule .cab,.span-rule .deck{fill:none;stroke:var(--text);vector-effect:non-scaling-stroke}
.span-rule .cab{stroke-width:1.3}
.span-rule .deck{stroke-width:2.4}
.span-rule .hg{stroke:var(--text);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.55}
@media (prefers-reduced-motion: no-preference){
  .span-rule .hg{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);animation:drop .45s ease-out calc(.3s + var(--i) * 28ms) forwards}
}
.hero-fig{margin:0}
.hero-fig img{border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;aspect-ratio:4/5;object-fit:cover;max-height:34rem}
.hero-fig figcaption{font-size:.88rem;color:var(--text-dim);margin-top:.6rem}
@media (max-width:899px){.hero-fig{max-width:24rem}.hero-fig img{max-height:22rem}}
.hero-portrait img{object-position:50% 20%}
.hero-facts dl,.fee-card{background:var(--surface);border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow);margin:0;padding:1.5rem 1.6rem}
.hero-facts dl{display:grid;gap:1rem}
.hero-facts dt,.nap dt{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;color:var(--text-dim);margin-bottom:.2rem}
.hero-facts dd,.nap dd{margin:0;font-weight:500}
.hero-facts dl>div{padding-bottom:1rem;border-bottom:1px solid var(--line)}
.hero-facts dl>div:last-child{border:0;padding:0}

/* ---------- section rhythm ---------- */
.feel{padding:clamp(4rem, 8vw, 7.5rem) 0 clamp(3rem, 6vw, 5rem)}
.feel-grid,.family-grid{display:grid;grid-template-columns:1fr;gap:1rem 4rem}
@media (min-width:960px){.feel-grid,.family-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.feel-body p:first-child{font-size:var(--step-1);line-height:1.5}
.prose{max-width:42rem}
.prose h3{font-size:var(--step-1);margin-top:1.8em}
.prose>:first-child{margin-top:0}
.help,.services,.team-sec,.who-sec,.erp-sec,.fit-sec,.cols3,.fees-sec,.approach-sec{padding:clamp(3.5rem, 7vw, 6rem) 0}
.family,.layers{padding:clamp(3rem, 6vw, 5rem) 0}
.layers{padding-top:0}
.split-sec{padding:clamp(3.5rem, 7vw, 6.5rem) 0}
.split{display:grid;grid-template-columns:1fr;gap:.5rem 4rem}
@media (min-width:960px){.split{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.split .sec-head{position:sticky;top:calc(var(--header-h) + 2rem);align-self:start}}
.inline-links{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-weight:600}

/* ---------- service cards ---------- */
.svc-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:1rem;counter-reset:svc}
@media (min-width:640px){.svc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.svc-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.svc-cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.svc-card{counter-increment:svc}
.svc-card a{display:flex;flex-direction:column;height:100%;padding:1.5rem 1.5rem 1.3rem;background:var(--surface);border:var(--border);border-radius:var(--radius);text-decoration:none;color:var(--text);position:relative;overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s}
.svc-card a::before{content:counter(svc, decimal-leading-zero);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.2em;color:var(--text-dim);margin-bottom:1.6rem}
.svc-card a::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--dawn);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.svc-card h3{font-size:var(--step-1);margin-bottom:.45em}
.svc-card p{color:var(--text-dim);font-size:.97rem;margin-bottom:1.2rem}
.svc-card .more{margin-top:auto;font-weight:600;color:var(--accent-deep);font-size:.95rem}
.svc-card .more::after{content:" \2192"}
@media (hover:hover){.svc-card a:hover{border-color:var(--accent-bright);box-shadow:var(--shadow)}.svc-card a:hover::after{transform:scaleX(1)}}
@media (hover:hover) and (prefers-reduced-motion: no-preference){.svc-card a:hover{transform:translateY(-3px)}}
.svc-more{margin-top:1.6rem;color:var(--text-dim)}

/* ---------- quote ---------- */
.quote-sec{padding:clamp(3rem, 6vw, 5.5rem) 0}
.quote-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
@media (min-width:860px){.quote-grid{grid-template-columns:minmax(0,1fr);max-width:62rem}}
.quote-photo{margin:0;max-width:22rem}
.quote-photo img{border-radius:999px 999px var(--radius) var(--radius);box-shadow:var(--shadow-lg)}
blockquote{margin:0}
blockquote p{font-family:var(--font-display);font-weight:600;font-size:clamp(1.55rem, 1.05rem + 1.7vw, 2.75rem);line-height:1.16;letter-spacing:-.012em;max-width:30ch}
.quote-who{color:var(--text-dim);font-weight:500}

/* ---------- the night band ---------- */
.night{background:var(--night);color:var(--on-night);padding:clamp(4rem, 9vw, 8rem) 0;overflow:hidden}
.night::before{content:"";position:absolute;left:-4%;right:-4%;bottom:-8%;height:85%;background:url(../images/mark-light.svg) center bottom/contain no-repeat;opacity:.07;pointer-events:none}
.night::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 50% 60% at 80% 100%, var(--glow-dawn), transparent 70%);opacity:.6;pointer-events:none}
.night-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:1.4rem 4rem}
@media (min-width:960px){.night-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:end}}
.night h2{color:var(--on-night);font-size:clamp(2rem, 1.2rem + 2.6vw, 3.8rem);margin:0}
.night p{color:var(--on-night-dim);font-size:var(--step-1);line-height:1.55;margin:0;max-width:38rem}
.night a{color:var(--on-night)}

/* ---------- the office ---------- */
.room{padding:clamp(4rem, 8vw, 7rem) 0}
.room-grid{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media (min-width:960px){.room-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:5rem;align-items:center}}
.about-body{font-size:var(--step-1);line-height:1.5}
/* the office photos scroll sideways (2026-10-25: her Suite 301 photos joined the first two). A focusable
   region, so arrow keys scroll it too; the next photo always peeks in from the right. */
.room-photos{display:flex;gap:1rem;align-items:flex-end;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding-bottom:.75rem;scrollbar-width:thin}
.room-photos:focus-visible{outline:2px solid var(--accent-deep);outline-offset:4px;border-radius:var(--radius)}
.room-photos>.ph{flex:none;scroll-snap-align:start}
.ph{margin:0}
.ph img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%}
.ph figcaption{font-size:.85rem;color:var(--text-dim);margin-top:.5rem}
.r1 img{aspect-ratio:4/3;object-fit:cover}
.r2 img{aspect-ratio:3/4;object-fit:cover}
.room-photos .ph img{width:auto;max-width:none;height:clamp(15rem, 30vw, 24rem)}

/* ---------- Mentaya benefits checker (fees page, 2026-10-25) ----------
   Mentaya's snippet sizes its frame with an inline onload handler (430px tall at 600px wide or more,
   750px below); the CSP forbids inline handlers, so a container query does the same. */
.benefits-frame{container-type:inline-size;margin:1.5rem 0}
.benefits-frame iframe{display:block;width:100%;max-width:600px;height:750px;border:0;border-radius:20px;background:#fff}
@container (min-width:600px){.benefits-frame iframe{height:430px}}

/* ---------- team cards ---------- */
.team-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:1.25rem}
@media (min-width:640px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.team-n1{grid-template-columns:minmax(0,1fr);max-width:44rem}}
@media (min-width:1000px){.team-n3,.team-n6{grid-template-columns:repeat(3,minmax(0,1fr))}.team-n4{grid-template-columns:repeat(4,minmax(0,1fr))}.team-n2{max-width:62rem}}
.pc{background:var(--surface);border:var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.team-n1{max-width:none!important}
.team-n1 .pc{flex-direction:row}
@media (min-width:640px){.team-n1 .pc-photo{flex:0 0 30%;max-width:20rem}}
.team-n1 .pc-body{justify-content:center}
.team-n1 .pc-photo{flex:0 0 40%}
.pc-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .5s}
.team-n1 .pc-photo img{height:100%}
.pc-photo{overflow:hidden;display:block}
.pc-body{padding:1.25rem 1.35rem 1.4rem;display:flex;flex-direction:column;flex:1}
.pc-name{font-size:var(--step-2);margin-bottom:.15em}
.pc-name a{color:var(--text);text-decoration:none}
.pc-cred{font-size:.9rem;color:var(--text-dim);margin-bottom:.7rem;font-weight:500}
.pc-line{font-size:.96rem;margin-bottom:.9rem}
.pc-tags{list-style:none;margin:0 0 1.1rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.pc-tags li{font-size:.8rem;padding:.25rem .65rem;border:1px solid var(--line);border-radius:999px;color:var(--text-dim);background:var(--bg)}
.pc-meet{margin-top:auto;font-weight:600;text-decoration:none}
@media (hover:hover) and (prefers-reduced-motion: no-preference){.pc:hover .pc-photo img{transform:scale(1.03)}}
.tt-more{margin-top:1.8rem}
@media (max-width:639px){.pc{flex-direction:row}.pc-photo{flex:0 0 36%}.pc-photo img{height:100%;aspect-ratio:auto;min-height:12rem;object-position:var(--face-x,50%) 50%}.pc-body{padding:1rem 1rem 1.1rem}.pc-name{font-size:var(--step-1)}.pc-line{font-size:.9rem}.pc-tags{display:none}.tm-photo img{aspect-ratio:4/3;object-position:50% 25%}}

/* ---------- team page detail ---------- */
.team-list{padding:clamp(3rem, 6vw, 5rem) 0}
.tm-list{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem}
.tm{display:grid;grid-template-columns:1fr;background:var(--surface);border:var(--border);border-radius:var(--radius);overflow:hidden}
@media (min-width:760px){.tm{grid-template-columns:minmax(0,17rem) minmax(0,1fr)}.tm-photo img{height:100%;object-position:var(--face-x,50%) 50%}}
.tm-photo img{width:100%;object-fit:cover;aspect-ratio:4/5}
.tm-body{padding:1.6rem 1.7rem}
.tm-name{font-size:var(--step-3)}
.tm-name a{color:var(--text);text-decoration:none}
.tm-lists{display:grid;grid-template-columns:1fr;gap:.2rem 2rem;margin:1.2rem 0}
@media (min-width:1000px){.tm-lists{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tm-lists h4{font-family:var(--font-mono);font-weight:400;text-transform:uppercase;letter-spacing:.2em;font-size:.74rem;color:var(--text-dim);margin:.8rem 0 .5rem}
.tm-act{display:flex;flex-wrap:wrap;gap:.6rem;margin:0}

/* the who-works-with-whom grid */
.fit-wrap{overflow-x:auto;background:var(--surface);border:var(--border);border-radius:var(--radius);-webkit-overflow-scrolling:touch}
.fit-wrap{max-width:100%}
.fit{border-collapse:collapse;width:100%}
@media (max-width:640px){.fit th,.fit td{padding:.55rem .4rem;font-size:.88rem}.fit tbody th{padding-left:.8rem}.fit thead img{width:2.4rem;height:2.4rem}.fit thead th{font-size:.85rem}}
.fit th,.fit td{padding:.75rem 1rem;border-bottom:1px solid var(--line);text-align:center}
.fit tbody th{text-align:left;font-weight:500;font-family:var(--font-body)}
.fit thead th{vertical-align:bottom;font-family:var(--font-display);font-weight:600;font-size:var(--step-0)}
.fit thead a{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-decoration:none;color:var(--text)}
.fit thead img{width:3.4rem;height:3.4rem;border-radius:50%;object-fit:cover;object-position:50% 18%}
.fit tbody tr:last-child th,.fit tbody tr:last-child td{border-bottom:0}
.fit tbody tr:hover{background:var(--bg)}
.dot{display:inline-block;width:.85rem;height:.85rem;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--dawn-soft)}

/* ---------- ticks ---------- */
.ticks{list-style:none;margin:0 0 1.2em;padding:0;display:grid;gap:.45rem}
.ticks li{position:relative;padding-left:1.5rem}
.ticks li::before{content:"";position:absolute;left:.15rem;top:.15em;width:1px;height:.95em;background:var(--text)}
.ticks li::after{content:"";position:absolute;left:-.05rem;top:1.05em;width:.45rem;height:.45rem;border-radius:50%;background:var(--dawn)}
@media (min-width:700px){.ticks-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 2rem}}
.ticks-cols{grid-template-columns:1fr;gap:.6rem 2rem;max-width:none}
@media (min-width:640px){.ticks-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.ticks-cols{grid-template-columns:repeat(3,minmax(0,1fr))}.ticks-cols.c5{grid-template-columns:repeat(5,minmax(0,1fr))}}
.ticks-cols li{background:var(--surface);border:var(--border);border-radius:var(--radius-sm);padding:.85rem 1rem .85rem 2.2rem}
.ticks-cols li::before{left:.95rem;top:.95rem}
.ticks-cols li::after{left:.75rem;top:1.85rem}
.said{list-style:none;padding:0;margin:0 0 1.2em;display:grid;gap:.5rem}
.said li{font-family:var(--font-display);font-weight:600;font-size:var(--step-1);letter-spacing:-.01em}
.three{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media (min-width:960px){.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.three>div{background:var(--surface);border:var(--border);border-radius:var(--radius);padding:1.5rem 1.5rem .6rem}
.three h3{font-size:var(--step-1)}
.small{font-size:.95rem;color:var(--text-dim)}

/* ---------- ERP steps as hangers on a deck ---------- */
.steps-h{font-size:var(--step-2);margin:2.6rem 0 1.4rem}
.steps-span{list-style:none;margin:0;padding:0;counter-reset:st;position:relative}
.steps-span li{counter-increment:st;position:relative}
.steps-span p{margin:0;font-size:.98rem}
.steps-span p::before{content:"Step " counter(st);display:block;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;color:var(--text-dim);margin-bottom:.35rem}
@media (max-width:1099px){
  .steps-span{padding-left:2.2rem;display:grid;gap:1.4rem;border-left:3px solid var(--text);margin-left:.4rem}
  .steps-span .st-hg{position:absolute;left:-2.2rem;top:.55rem;width:1.6rem;height:1px;background:var(--text)}
  .steps-span .st-hg::after{content:"";position:absolute;right:-.3rem;top:-.25rem;width:.5rem;height:.5rem;border-radius:50%;background:var(--dawn)}
}
@media (min-width:1100px){
  .steps-span{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0 1.1rem;padding-top:4.6rem}
  .steps-span::before{content:"";position:absolute;left:0;right:0;top:0;height:3.4rem;background:linear-gradient(to top right, transparent calc(50% - 1px), var(--text) calc(50% - .5px), var(--text) calc(50% + .5px), transparent calc(50% + 1px))}
  .steps-span::after{content:"";position:absolute;left:0;right:0;top:4.25rem;height:3px;background:var(--text);border-radius:2px}
  .steps-span .st-hg{position:absolute;left:50%;width:1px;background:var(--text);transform-origin:50% 0}
  .steps-span li:nth-child(1) .st-hg{top:calc(-4.6rem + 3.4rem * 0.071);height:calc(4.25rem - 3.4rem * 0.071)}
  .steps-span li:nth-child(2) .st-hg{top:calc(-4.6rem + 3.4rem * 0.214);height:calc(4.25rem - 3.4rem * 0.214)}
  .steps-span li:nth-child(3) .st-hg{top:calc(-4.6rem + 3.4rem * 0.357);height:calc(4.25rem - 3.4rem * 0.357)}
  .steps-span li:nth-child(4) .st-hg{top:calc(-4.6rem + 3.4rem * 0.5);height:calc(4.25rem - 3.4rem * 0.5)}
  .steps-span li:nth-child(5) .st-hg{top:calc(-4.6rem + 3.4rem * 0.643);height:calc(4.25rem - 3.4rem * 0.643)}
  .steps-span li:nth-child(6) .st-hg{top:calc(-4.6rem + 3.4rem * 0.786);height:calc(4.25rem - 3.4rem * 0.786)}
  .steps-span li:nth-child(7) .st-hg{top:calc(-4.6rem + 3.4rem * 0.929);height:calc(4.25rem - 3.4rem * 0.929)}
  .steps-span .st-hg::after{content:"";position:absolute;left:-.3rem;bottom:-.3rem;width:.6rem;height:.6rem;border-radius:50%;background:var(--dawn)}
}
@media (min-width:1100px) and (prefers-reduced-motion: no-preference){
  .js .steps-span:not(.in) .st-hg{transform:scaleY(0)}
  .steps-span .st-hg{transition:transform .5s ease-out}
  .steps-span li:nth-child(2) .st-hg{transition-delay:.12s}.steps-span li:nth-child(3) .st-hg{transition-delay:.24s}.steps-span li:nth-child(4) .st-hg{transition-delay:.36s}.steps-span li:nth-child(5) .st-hg{transition-delay:.48s}.steps-span li:nth-child(6) .st-hg{transition-delay:.6s}.steps-span li:nth-child(7) .st-hg{transition-delay:.72s}
}
.steps-note{margin-top:2.4rem;max-width:46rem;font-size:var(--step-1);line-height:1.5}

/* ---------- money note ---------- */
.money{background:var(--surface);border:var(--border);border-left:3px solid var(--accent);border-radius:var(--radius-sm);padding:1.2rem 1.4rem;margin-top:1.6rem;max-width:46rem}
.money p{margin:0 0 .6rem}
.money-links{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;font-weight:600;font-size:.95rem;margin:0!important}
.fees-grid{display:grid;grid-template-columns:1fr;gap:0 4rem}
@media (min-width:960px){.fees-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}.fees-grid .money{margin-top:0}}

/* ---------- FAQ ---------- */
.faq-sec{padding:clamp(3.5rem, 7vw, 6rem) 0}
.faq-grid{display:grid;grid-template-columns:1fr;gap:1rem 4rem}
@media (min-width:960px){.faq-grid{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}}
.faq-list{border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.15rem 2.5rem 1.15rem 0;font-family:var(--font-display);font-weight:600;font-size:var(--step-1);letter-spacing:-.01em;position:relative;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.4rem;top:1.45rem;width:.65rem;height:.65rem;border-right:1.5px solid var(--text);border-bottom:1.5px solid var(--text);transform:rotate(45deg);transition:transform .2s}
.faq[open] summary::after{transform:rotate(225deg);top:1.7rem}
.faq p{margin:0 0 1.3rem;max-width:44rem;color:var(--text-dim)}

/* ---------- closing call ---------- */
.cta-sec{padding:clamp(3rem, 6vw, 5.5rem) 0 clamp(4rem, 8vw, 7rem)}
.cta-card{position:relative;overflow:hidden;background:var(--surface);border:var(--border);border-radius:calc(var(--radius) * 1.6);padding:clamp(2rem, 5vw, 4.2rem);box-shadow:var(--shadow-lg)}
.cta-card::before{content:"";position:absolute;right:0;bottom:0;width:min(60%, 34rem);aspect-ratio:1;background:repeating-conic-gradient(from 270deg at 100% 100%, var(--ink-ray) 0deg .5deg, transparent .5deg 5deg);-webkit-mask:radial-gradient(circle at 100% 100%, black 0, black 30%, transparent 72%);mask:radial-gradient(circle at 100% 100%, black 0, black 30%, transparent 72%);pointer-events:none}
.cta-card::after{content:"";position:absolute;right:-4rem;bottom:-4rem;width:16rem;height:16rem;border-radius:50%;background:radial-gradient(circle, var(--glow-dawn), transparent 70%);pointer-events:none}
.cta-card>*{position:relative;z-index:1}
.cta-card h2{max-width:22ch}
.cta-card p{max-width:40rem;font-size:var(--step-1);line-height:1.5;color:var(--text-dim)}
.cta-note{font-size:.9rem!important;margin:1.4rem 0 0}

/* ---------- contact ---------- */
.contact{padding:clamp(3rem, 6vw, 5.5rem) 0}
.contact-grid{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media (min-width:1000px){.contact-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:5rem;align-items:start}}
.contact-copy h2{font-size:clamp(1.6rem, 1.1rem + 1.5vw, 2.6rem)}
.contact-prose{margin-top:1.6rem}
.crisis{margin-top:1.8rem;background:var(--surface-2);border-radius:var(--radius-sm);padding:1rem 1.2rem;border-left:3px solid var(--dawn)}
.crisis p{margin:0}
.nap-card{background:var(--surface);border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.4rem 1.5rem;margin-top:1.4rem}
.nap{margin:0;display:grid;grid-template-columns:1fr;gap:1rem 1.5rem}
@media (min-width:520px) and (max-width:899px),(min-width:1400px){.nap{grid-template-columns:repeat(2,minmax(0,1fr))}}
.nap dd{overflow-wrap:anywhere}
.nap a[href^="mailto:"]{word-break:keep-all}
.hero-contact .nap-card{margin-top:0}
.req-form{background:var(--surface);border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:clamp(1.3rem, 3vw, 2.2rem);display:flex;flex-direction:column;gap:1rem;min-width:0}
.form-title{font-size:var(--step-2);margin:0}
.row2{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:600px) and (max-width:999px),(min-width:1280px){.row2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.field{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.field label{font-weight:600;font-size:.93rem}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.75rem .85rem;width:100%;min-width:0}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.privacy-note{font-size:.88rem;color:var(--text-dim);margin:0}
.cf-turnstile{min-height:65px;width:100%}
.btn-submit{align-self:flex-start}
.form-status{margin:0;font-weight:600}
.form-status.ok{color:var(--accent-deep)}
.form-status.err{color:var(--text)}

/* ---------- visit page ---------- */
.visit{padding:clamp(3.5rem, 7vw, 6rem) 0}
.visit-grid{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media (min-width:960px){.visit-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5rem;align-items:start}}
.visit-photos{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;align-items:start}
@media (min-width:600px) and (max-width:959px){.visit-photos{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.v1 img{aspect-ratio:auto}
.v2{margin-top:0}
.v2 img{aspect-ratio:4/3;object-fit:cover}
.town-list{list-style:none;padding:0;margin:0 0 1.2rem;display:flex;flex-wrap:wrap;gap:.5rem}
.town-list li{padding:.35rem .85rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-weight:500;font-size:.92rem}

/* ---------- fees ---------- */
.fee-h{font-size:var(--step-2);margin-bottom:1rem}
.fees{margin:0;display:grid;gap:0}
.fees>div{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
.fees>div:last-child{border-bottom:0}
.fees dd{margin:0;font-family:var(--font-display);font-weight:600;font-size:var(--step-1)}
.fee-note{margin:.9rem 0 0;font-size:.9rem;color:var(--text-dim)}
.fees-inline{background:var(--surface);border:var(--border);border-radius:var(--radius);padding:.4rem 1.3rem;margin-bottom:1.2rem}

/* ---------- bios ---------- */
.bio-sec{padding:clamp(3rem, 6vw, 5rem) 0}
.bio-grid{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media (min-width:1000px){.bio-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:4.5rem}}
.bio-main .prose>p:first-child{font-size:var(--step-1);line-height:1.5}
.side-card{background:var(--surface);border:var(--border);border-radius:var(--radius);padding:1.4rem 1.5rem .5rem;margin-bottom:1.2rem}
.side-card h3{font-family:var(--font-mono);font-weight:400;text-transform:uppercase;letter-spacing:.2em;font-size:.74rem;line-height:1.55;color:var(--text-dim);margin:.4rem 0 .7rem}
.bio-link{font-weight:600}

/* ---------- legal ---------- */
.legal-sec{padding:clamp(2.5rem, 5vw, 4rem) 0 clamp(4rem, 8vw, 6.5rem)}
.legal>*{max-width:48rem}
.legal ul{list-style:none;padding:0}
.legal ul li{position:relative;padding-left:1.5rem}
.legal ul li::before{content:"";position:absolute;left:.15rem;top:.15em;width:1px;height:.95em;background:var(--text)}
.legal ul li::after{content:"";position:absolute;left:-.05rem;top:1.05em;width:.45rem;height:.45rem;border-radius:50%;background:var(--dawn)}
.legal h2{font-size:var(--step-3);margin-top:1.6em}
.legal li{margin-bottom:.5rem}
.legal-more{color:var(--text-dim);margin-top:2rem}
.nd-frame{border:2px dashed var(--accent);border-radius:var(--radius);padding:2.5rem 1.5rem;margin:1.5rem 0;text-align:center;background:var(--surface);font-weight:600;color:var(--accent-deep)}
.nd-inline{border:1.5px dashed var(--accent);border-radius:6px;padding:.05rem .4rem;font-weight:600;color:var(--accent-deep);background:var(--surface)}

/* ---------- crumbs ---------- */
.crumbs{padding:1.2rem 0 1.6rem}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem .5rem;font-size:.85rem;color:var(--text-dim)}
.crumbs li+li::before{content:"/";margin-right:.5rem;color:var(--line)}

/* ---------- footer ---------- */
.site-footer{background:var(--night);color:var(--on-night-dim);font-size:.95rem;position:relative;overflow:hidden}
.footer-crisis-row{padding:1.4rem 0;border-bottom:1px solid var(--night-2)}
.footer-crisis{margin:0;color:var(--on-night);max-width:62rem}
.site-footer a{color:var(--on-night)}
.footer-grid{display:grid;grid-template-columns:1fr;gap:2rem;padding:3rem 0 2.5rem}
@media (min-width:700px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.footer-grid{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:3rem}}
.brand-foot{color:var(--on-night);margin:0 0 1rem}
.brand-foot .bw2{color:var(--on-night-dim)}
.footer-tag{max-width:24rem}
.f-h{font-family:var(--font-mono);font-weight:400;text-transform:uppercase;letter-spacing:.22em;font-size:.75rem;color:var(--on-night-dim);margin:0 0 1rem}
.f-h2{margin-top:1.6rem}
.footer-links{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.footer-links a{display:inline-block;padding:.4rem 0;text-decoration:none}
.footer-links a:hover{text-decoration:underline}
.footer-col p{margin:0 0 .8rem}
.footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;padding:1.2rem 0 1.6rem;border-top:1px solid var(--night-2);font-size:.85rem}
.footer-base p{margin:0}
.credit a{text-decoration:none;color:var(--on-night-dim)}

/* ---------- reveal ---------- */
@media (prefers-reduced-motion: no-preference){
  .js .rv{opacity:0;transform:translateY(14px);transition:opacity .55s ease-out,transform .55s ease-out}
  .js .rv.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:opacity .4s ease-out!important}
  .js .rv{opacity:0}.js .rv.in{opacity:1}
}
@media (max-width:999px){.contact-grid .req-form{order:-1}}

/* landscape hero photos, the thank-you page air */
.hero-land img{aspect-ratio:auto;max-height:none}
.pg-thanks main{padding-bottom:clamp(3rem, 6vw, 5rem)}
.fit tbody th{line-height:1.3}
@media (max-width:640px){.fit thead th{font-size:.8rem}.fit td{padding:.5rem .25rem}}
.wrap.legal{max-width:none}
.header-cta{white-space:nowrap}
@media (max-width:420px){.brand{gap:.45rem}.brand-mark{width:2.8rem}.bw1{font-size:.74rem;letter-spacing:.2em}.bw2{font-size:.46rem;letter-spacing:.24em}.header-cta{padding:.5rem .8rem;font-size:.9rem}}

.nowrap{white-space:nowrap}

/* ---------- motion pass (Chad, 2026-10-17: "add some nice load and hover animations") ----------
   Load: the hero words rise in turn, the rays open like morning light, the photo is unveiled from
   the bottom up, then the bridge builds once it is on screen. Hover on a computer, a press on a
   phone. Reduced motion keeps only soft fades. */
@keyframes unveil{from{clip-path:inset(100% 0 0 0 round var(--radius));transform:scale(1.04)}to{clip-path:inset(0 0 0 0 round var(--radius));transform:none}}
@keyframes dawn{from{opacity:0;transform:scaleY(.6)}to{opacity:1;transform:none}}
@keyframes shine{from{transform:translateX(-120%) skewX(-18deg)}to{transform:translateX(320%) skewX(-18deg)}}
@keyframes breathe{0%,100%{box-shadow:0 0 0 0 rgba(36,56,90,.28)}50%{box-shadow:0 0 0 .5rem rgba(36,56,90,0)}}
@media (prefers-reduced-motion: no-preference){
  .hero-copy>*,.page-hero-grid>div>*{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
  .hero-copy>:nth-child(1),.page-hero-grid>div>:nth-child(1){animation-delay:.05s}
  .hero-copy>:nth-child(2),.page-hero-grid>div>:nth-child(2){animation-delay:.22s}
  .hero-copy>:nth-child(3),.page-hero-grid>div>:nth-child(3){animation-delay:.38s}
  .hero-copy>:nth-child(4),.page-hero-grid>div>:nth-child(4){animation-delay:.52s}
  .page-hero-grid>div>:nth-child(n+5){animation-delay:.62s}
  .rays{transform-origin:50% 100%;animation:dawn 1.6s ease-out .1s both}
  .js .hero-photo:not(.go) img,.js .hero-fig:not(.go) img{clip-path:inset(100% 0 0 0)}
  .js .hero-photo:not(.go) figcaption,.js .hero-fig:not(.go) figcaption{opacity:0}
  .hero-photo.go img,.hero-fig.go img{animation:unveil 1.1s cubic-bezier(.6,0,.2,1) .15s both}
  .hero-photo{animation:none}
  .hero-photo.go figcaption,.hero-fig.go figcaption{animation:rise .7s ease-out .9s both}
  .hero .btn-accent{animation:breathe 2.4s ease-in-out 2.6s 2}
  /* reveals: a little farther, and grid items arrive in turn */
  .js .rv{transform:translateY(22px);transition:opacity .7s ease-out,transform .7s cubic-bezier(.2,.7,.2,1)}
  .rv:nth-child(2){transition-delay:.08s}.rv:nth-child(3){transition-delay:.16s}.rv:nth-child(4){transition-delay:.24s}.rv:nth-child(5){transition-delay:.32s}.rv:nth-child(6){transition-delay:.4s}
  /* a press you can feel on a phone */
  .btn:active,.svc-card a:active,.pc:active{transform:scale(.97);transition-duration:.08s}
}
/* hover, on a computer */
.btn-accent{position:relative;overflow:hidden;isolation:isolate}
.btn-accent::after{content:"";position:absolute;top:0;bottom:0;left:0;width:35%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transform:translateX(-120%) skewX(-18deg);pointer-events:none;z-index:-1}
.svc-card .more::after{display:inline-block;transition:transform .25s}
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  .btn-accent:hover::after{animation:shine .7s ease-out}
  .btn-ghost:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
  .svc-card a:hover .more::after{transform:translateX(5px)}
  .svc-card a:hover h3{color:var(--accent-deep)}
  .pc{transition:transform .3s,box-shadow .3s}
  .pc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
  .pc:hover .pc-photo img{transform:scale(1.05)}
  .pc-tags li{transition:border-color .2s,color .2s}
  .pc:hover .pc-tags li{border-color:var(--accent-bright);color:var(--text)}
  .hero-photo:hover img{transform:scale(1.015);transition:transform .6s}
}

/* ---------- phone hero intro (Chad, 2026-10-17: the bridge IS the load animation on mobile) ----------
   The bridge sits alone under the header and builds, then the words open above it and set it down
   in its place. Pure CSS, so no-JS gets it too. Only here: desktop and reduced motion render the
   finished hero at once. */
@keyframes hero-open{from{max-height:0;opacity:0;overflow:hidden}to{max-height:70rem;opacity:1;overflow:visible}}
@media (max-width:899px) and (prefers-reduced-motion: no-preference){
  .hero .hero-copy{max-height:0;opacity:0;overflow:hidden;animation:hero-open 1.1s cubic-bezier(.4,0,.2,1) 3.1s both}
  .hero .hero-copy>*{animation:none;opacity:1}
  .hero .hero-bridge{margin-top:0}
  /* the bridge is on screen from the first frame, so it builds at once rather than waiting */
  .bridge-hero .towers path{animation:draw 1s cubic-bezier(.4,0,.2,1) .15s forwards}
  .bridge-hero .cables path{animation:draw 1.3s cubic-bezier(.4,0,.2,1) .75s forwards}
  .bridge-hero .hg{animation:drop .6s ease-out calc(1.55s + var(--i) * 45ms) forwards}
  .bridge-hero .deck{animation:draw 1.1s cubic-bezier(.4,0,.2,1) 1.65s forwards}
  .hero .btn-accent{animation:breathe 2.4s ease-in-out 4.6s 2}
  /* the photo waits for the words, so the bridge has the screen to itself */
  .hero .hero-photo.go img{animation-delay:3.5s}
  .hero .hero-photo.go figcaption{animation-delay:4.3s}
}
/* ---------- blog and OCD library (2026-10-24) ---------- */
/* Seven menu items since Blog joined (2026-10-24): labels never wrap, and the narrowest desktop
   band (the menu shows from 1100px) tightens the link spacing so the header stays one line. */
.nav-list a{white-space:nowrap}
@media (min-width:1100px) and (max-width:1319px){.nav-list a{padding:.55rem .5rem;font-size:.92rem}.header-row{gap:.75rem}.header-cta{padding:.6rem .95rem}}
/* Both lists ship empty. An empty list hides itself; the blog shows its "on the way" line instead,
   and the flagship drops its library section until the first page is live. Keep the collection
   markers flush against the <ul> tags: whitespace inside would stop :empty matching. */
.post-list:empty{display:none}
.post-list:not(:empty)+.posts-empty{display:none}
.posts-empty{max-width:42rem;font-size:var(--step-1);line-height:1.55;color:var(--text-dim);margin:0}
.lib-sec:has(.lib-cards:empty){display:none}
.post-card a::before{content:none}
.post-card h2{font-size:var(--step-1);margin-bottom:.45em}
.post-date{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);margin:0 0 .9rem}
.item-wrap{max-width:46rem}
.item-body{max-width:none}
.item-body h2{font-size:var(--step-2);margin-top:1.6em}
.item-fig{margin:0 0 2rem}
.item-fig img{display:block;width:100%;height:auto;border-radius:var(--radius)}
.reviewed{font-size:.95rem;color:var(--text-dim);margin:1.2rem 0 0}
.reviewed:not(:has(.reviewer)){display:none}
.reviewed-label{font-weight:600;color:var(--text)}
.reviewer+.reviewer::before{content:" and"}
.reviewed a{color:var(--accent-deep);font-weight:600}
.item-end{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line);display:grid;gap:1.2rem}
.end-line{margin:0;background:var(--surface);border:var(--border);border-left:3px solid var(--accent-bright);border-radius:var(--radius-sm);padding:1rem 1.2rem}
.end-consult{background:var(--surface);border:var(--border);border-radius:var(--radius);padding:clamp(1.4rem, 3vw, 2rem)}
.end-consult p{font-size:var(--step-1);line-height:1.5;margin:0 0 1.2rem}
.end-crisis{margin-top:0}
.item-back{margin:2rem 0 0;font-weight:600}
/* ---------- consult request form (2026-10-25): writes an email in the visitor's own app, sends nothing ---------- */
.consult{padding:0 0 clamp(3rem, 6vw, 5.5rem)}
.consult-grid{display:grid;grid-template-columns:1fr;gap:2rem}
@media (min-width:1000px){.consult-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:5rem;align-items:start}}
.consult-copy h2{font-size:clamp(1.6rem, 1.1rem + 1.5vw, 2.6rem)}
.consult-copy .sec-sub{margin-top:1rem}
.consult-card{background:var(--surface);border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:clamp(1.3rem, 3vw, 2.2rem);min-width:0}
.consult-form{display:flex;flex-direction:column;gap:1.1rem;min-width:0}
.consult-form[hidden],.consult-done[hidden],.field-err[hidden],.consult-copy-text[hidden]{display:none}
.field-pair{border:0;margin:0;padding:0;min-width:0;display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:600px){.field-pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.field-pair legend{padding:0;margin:0 0 .6rem;font-size:.93rem;color:var(--text-dim)}
.field-pair .field-err{grid-column:1/-1}
.field label .req,.field label .opt{font-weight:400;color:var(--text-dim)}
.field textarea{resize:vertical;min-height:7rem}
.field [aria-invalid="true"],.field-pair [aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}
.field-err{margin:0;font-size:.9rem;font-weight:600;color:var(--danger)}
.consult-send{display:flex;flex-direction:column;gap:.8rem;align-items:flex-start}
.consult-note{margin:0;font-size:.95rem;color:var(--text);background:var(--surface-2);border-radius:var(--radius-sm);padding:.8rem 1rem}
.consult-alert{margin:0;font-weight:600;color:var(--danger)}
.consult-alert:empty{display:none}
.consult-crisis{margin-top:.2rem;font-size:.92rem}
.consult-done{display:flex;flex-direction:column;gap:.9rem}
.consult-done p{margin:0}
.consult-done-lead{font-size:var(--step-1);line-height:1.45}
.consult-copy-text{font:inherit;font-size:.95rem;width:100%;min-width:0;border:1px solid var(--line);border-radius:var(--radius-sm);padding:.75rem .85rem;background:var(--bg);color:var(--text)}
.consult-copied{font-weight:600;color:var(--accent-deep)}
.consult-copied:empty{display:none}
.consult-noscript{margin:0}
.book-current{border-top:var(--border);padding-top:1rem}