/* ============================================================
   Altavida Gynecology — Site stylesheet (Concierge Noir)
   Shared design language for the multi-page marketing site.
   Loads AFTER colors_and_type.css (which defines all tokens
   + --font-script: 'Relation Bold').
   ============================================================ */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{font-family:var(--font-sans);color:var(--ink-900);background:#fff;-webkit-font-smoothing:antialiased}
/* height:auto keeps the intrinsic width/height attributes (added for CLS) from
   fighting CSS sizing — components that need a fixed height set it on their own
   class selector, which wins on specificity. */
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
.wrap{max-width:1220px;margin:0 auto;padding:0 44px}

/* ---- shared atoms ---- */
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--teal-700)}
.eyebrow.dark{color:var(--teal-300)}
.script{font-family:var(--font-script);font-weight:400;color:var(--teal-700)}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---- accessibility: focus + skip link (WCAG 2.1 AA — 2.4.1, 2.4.7) ---- */
/* Visible keyboard focus everywhere. Solid teal-600 ring clears 3:1 non-text
   contrast on both white and navy surfaces; offset keeps it off teal fills. */
:focus-visible{outline:3px solid var(--teal-600);outline-offset:2px;border-radius:3px}
/* keep a ring for older engines that fire :focus on keyboard nav */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:3px solid var(--teal-600);outline-offset:2px}
/* "Skip to main content" — first focusable element, visible only on focus */
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000}
.skip-link:focus{left:16px;top:16px;background:#fff;color:var(--navy-700);padding:12px 20px;border-radius:var(--radius-pill);box-shadow:var(--shadow-lg);font-family:var(--font-sans);font-weight:700;font-size:15px;outline:3px solid var(--teal-600);outline-offset:2px}
/* the injected <main> is a programmatic focus target only — no visible ring */
main#main:focus{outline:none}
@media(prefers-reduced-motion:reduce){html.theme-anim,html.theme-anim *{transition:none!important}}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-sans);font-weight:600;border:0;cursor:pointer;border-radius:var(--radius-pill);transition:var(--transition);line-height:1;white-space:nowrap}
.btn-lg{font-size:16px;padding:16px 30px}
.btn-md{font-size:15px;padding:13px 24px}
.btn-teal{background:var(--teal-500);color:var(--navy-900);box-shadow:var(--shadow-teal)}
.btn-teal:hover{background:var(--teal-400);transform:translateY(-2px)}
.btn-ondark{background:#fff;color:var(--navy-700)}
.btn-ondark:hover{background:var(--ice-100);transform:translateY(-2px)}
.btn-ghostd{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.btn-ghostd:hover{background:rgba(255,255,255,.1)}
.btn-outline{background:transparent;color:var(--navy-600);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.btn-outline:hover{box-shadow:inset 0 0 0 1.5px var(--teal-400);background:var(--ice-50)}
.btn-tierdark{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.btn-tierdark:hover{background:rgba(255,255,255,.18)}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--teal-700);transition:var(--transition)}
.link-arrow svg{transition:transform .2s ease}
.link-arrow:hover{color:var(--teal-700)}
.link-arrow:hover svg{transform:translateX(4px)}
.link-arrow.ondark{color:var(--teal-300)}.link-arrow.ondark:hover{color:#fff}

/* ---- header / nav (dark style; sits over a navy band on every page) ---- */
header.nav{position:absolute;top:0;left:0;right:0;z-index:60;transition:var(--transition)}
header.nav.scrolled{position:fixed;background:rgba(6,38,79,.85);backdrop-filter:blur(16px);box-shadow:var(--shadow-md)}
.nav-in{max-width:1220px;margin:0 auto;padding:22px 44px;display:flex;align-items:center;gap:34px}
.nav-in>a:first-child{margin-right:auto;flex:none;display:flex;align-items:center}
.nav-logo{height:42px;width:auto;flex:none}
.nav-links{display:flex;gap:32px}
.nav-links a{font-size:14.5px;font-weight:500;color:rgba(255,255,255,.85);transition:var(--transition);position:relative;padding:4px 0}
.nav-links a:hover{color:var(--teal-300)}
.nav-links a.active{color:#fff}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--teal-400)}
/* ---- nav dropdown (About) ---- */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop-t{display:inline-flex;align-items:center;gap:5px}
.nav-drop-t .caret{opacity:.6;transition:transform .2s ease}
.nav-drop:hover .nav-drop-t .caret,.nav-drop:focus-within .nav-drop-t .caret{transform:rotate(-180deg)}
.nav-drop-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(4px);min-width:214px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;display:flex;flex-direction:column;gap:1px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:80}
.nav-drop-menu::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(8px)}
.nav-drop-menu a{display:block;font-size:14px;font-weight:500;letter-spacing:0;color:var(--ink-700)!important;padding:11px 14px;border-radius:9px;white-space:nowrap}
.nav-drop-menu a:hover{background:var(--ice-50);color:var(--teal-700)!important}
.nav-drop-menu a::after{display:none!important}
.nav-phone{font-size:14px;font-weight:600;color:#fff;display:flex;align-items:center;gap:7px;white-space:nowrap}
.nav-portal{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:#fff;border:1px solid rgba(255,255,255,.34);padding:9px 16px;border-radius:var(--radius-pill);white-space:nowrap;transition:var(--transition)}
.nav-portal svg{flex:none}
.nav-portal:hover{border-color:var(--teal-300);color:var(--teal-300);background:rgba(59,179,172,.1)}
.nav-cta{font-size:14px;padding:11px 22px}
.burger{display:none;background:none;border:0;cursor:pointer;color:#fff;padding:10px;margin:-10px}
.mobile{display:none}

/* ---- page header band (interior pages) ---- */
.pagehead{position:relative;background:var(--navy-700);color:#fff;overflow:hidden;padding:150px 0 76px}
.pagehead::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 120% at 80% 10%,rgba(59,179,172,.22),transparent 60%)}
.pagehead .wm{position:absolute;right:-50px;top:50%;transform:translateY(-50%);width:300px;opacity:.06}
.pagehead-in{position:relative;z-index:2;max-width:760px}
.pagehead .crumbs{font-size:13px;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.55);margin-bottom:20px}
.pagehead .crumbs a:hover{color:var(--teal-300)}
.pagehead h1{font-size:60px;line-height:1.04;letter-spacing:-.025em;font-weight:700;margin:0 0 18px}
.pagehead h1 em{font-family:var(--font-script);font-style:normal;font-weight:400;color:var(--teal-300);font-size:1.16em}
.pagehead p{font-size:19px;line-height:1.6;color:rgba(255,255,255,.78);max-width:560px;margin:0}

/* ---- section heads ---- */
.sec{padding:96px 0}
.sec-head{max-width:660px;margin-bottom:54px}
.sec-head.center{text-align:center;margin-left:auto;margin-right:auto}
.sec-head h2{font-size:44px;font-weight:700;letter-spacing:-.02em;color:var(--navy-600);margin:16px 0 14px;line-height:1.1}
.sec-head h2 em{font-family:var(--font-script);font-style:normal;font-weight:400;color:var(--teal-700);font-size:1.16em}
.sec-head p{font-size:17px;line-height:1.65;color:var(--ink-500);margin:0}

/* ---- pillars ---- */
.pillar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.pillar{padding:28px 24px;border-radius:var(--radius-lg);background:var(--ice-50);border:1px solid var(--line);transition:var(--transition)}
.pillar:hover{background:#fff;box-shadow:var(--shadow-md);transform:translateY(-4px)}
.pillar .pic{width:54px;height:54px;border-radius:14px;background:var(--navy-600);display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--teal-300)}
.pillar h3{font-size:18px;font-weight:700;color:var(--navy-600);margin:0 0 9px}
.pillar p{font-size:14.5px;line-height:1.6;color:var(--ink-500);margin:0}

/* ---- services (dark band) ---- */
.band-navy{background:var(--navy-700);color:#fff;position:relative;overflow:hidden}
.band-navy .wm{position:absolute;left:-80px;top:-40px;width:340px;opacity:.05}
.band-navy .sec-head h2{color:#fff}
.band-navy .sec-head p{color:rgba(255,255,255,.7)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);padding:32px 28px;transition:var(--transition)}
.svc-card:hover{background:rgba(255,255,255,.07);border-color:var(--teal-500);transform:translateY(-4px)}
.svc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.svc-verb{font-family:var(--font-script);font-size:30px;color:var(--teal-300)}
.svc-num{font-size:13px;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.4)}
.svc-card .blurb{font-size:15px;color:rgba(255,255,255,.66);line-height:1.55;margin:0 0 22px}
.svc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.svc-list li{display:flex;align-items:center;gap:11px;font-size:15px;color:rgba(255,255,255,.92);font-weight:500}
.svc-list svg{flex:none;color:var(--teal-400)}

/* ---- founder ---- */
.founder-in{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.founder-media{position:relative}
.founder-photo{width:100%;height:580px;object-fit:cover;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg)}
.founder-tag{position:absolute;left:24px;bottom:24px;right:24px;background:rgba(6,38,79,.86);backdrop-filter:blur(8px);border-radius:var(--radius-md);padding:20px 24px;color:#fff}
.founder-tag p{font-size:14.5px;font-style:italic;color:rgba(255,255,255,.9);line-height:1.5;margin:0 0 8px}
.founder-tag span{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--teal-300)}
.founder-copy h2{font-size:44px;font-weight:700;letter-spacing:-.02em;color:var(--navy-600);margin:16px 0 22px;line-height:1.1}
.founder-copy .lead{font-size:18px;line-height:1.75;color:var(--ink-700);margin:0 0 28px}
.founder-stats{display:flex;gap:40px;margin:28px 0;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.founder-stats strong{display:block;font-size:28px;color:var(--navy-600);font-weight:700;letter-spacing:-.01em}
.founder-stats span{font-size:13px;color:var(--ink-500)}
.founder-sign img{height:38px;width:auto}

/* ---- membership tiers (dark) ---- */
.toggle{display:inline-flex;background:rgba(255,255,255,.08);border-radius:var(--radius-pill);padding:5px;margin-top:22px;gap:4px}
.toggle.light{background:var(--mist)}
.toggle button{border:0;background:transparent;font-family:var(--font-sans);font-size:14px;font-weight:600;color:rgba(255,255,255,.6);padding:9px 24px;border-radius:var(--radius-pill);cursor:pointer;transition:var(--transition)}
.toggle button.on{background:#fff;color:var(--navy-700)}
.toggle.light button{color:var(--ink-500)}
.toggle.light button.on{background:#fff;color:var(--navy-600);box-shadow:var(--shadow-sm)}
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.tier{position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-xl);padding:36px 30px;transition:var(--transition)}
.tier:hover{background:rgba(255,255,255,.08);transform:translateY(-4px)}
.tier.feat{background:linear-gradient(160deg,var(--teal-600),var(--teal-800));border-color:var(--teal-400);box-shadow:var(--shadow-teal);transform:translateY(-12px)}
.tier.feat:hover{transform:translateY(-16px)}
.tier-flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:#fff;color:var(--navy-700);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 16px;border-radius:var(--radius-pill);box-shadow:var(--shadow-md);white-space:nowrap}
.tier-name{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-300)}
.tier.feat .tier-name{color:rgba(255,255,255,.9)}
.tier-price{font-size:46px;font-weight:700;color:#fff;margin:12px 0 2px;letter-spacing:-.02em}
.tier-price small{font-size:17px;font-weight:500;color:rgba(255,255,255,.6)}
.tier-sub{font-size:14px;color:rgba(255,255,255,.66);margin-bottom:24px}
.tier.feat .tier-sub{color:rgba(255,255,255,.85)}
.tier-perks{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:13px}
.tier-perks li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:rgba(255,255,255,.82);line-height:1.45}
.tier-perks svg{flex:none;margin-top:1px;color:var(--teal-400)}
.tier.feat .tier-perks svg{color:#fff}
.tier .btn{width:100%}

/* ---- testimonials ---- */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.quote{background:var(--ice-50);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px 30px;display:flex;flex-direction:column;min-height:288px}
.quote .stars{color:var(--teal-700);margin-bottom:14px;letter-spacing:2px}
.quote p{font-size:16px;line-height:1.65;color:var(--ink-900);margin:0 0 22px}
.quote .who{display:flex;align-items:center;gap:12px;margin-top:auto}
.quote .av{width:46px;height:46px;border-radius:50%;background:linear-gradient(140deg,var(--ice-200),var(--teal-200));flex:none;display:flex;align-items:center;justify-content:center;color:var(--navy-600)}
.quote .who strong{display:block;font-size:14px;color:var(--navy-600);font-weight:700}
.quote .who span{font-size:12.5px;color:var(--ink-500)}

/* ---- CTA ---- */
.cta{padding:100px 0;background:var(--wash-navy);text-align:center;color:#fff;position:relative;overflow:hidden}
.cta .wm{position:absolute;right:-50px;top:50%;transform:translateY(-50%);width:320px;opacity:.06}
.cta h2{font-size:52px;font-weight:700;letter-spacing:-.02em;margin:18px 0 16px;line-height:1.06}
.cta h2 em{font-family:var(--font-script);font-style:normal;font-weight:400;color:var(--teal-300);font-size:1.16em}
.cta p{font-size:18px;color:rgba(255,255,255,.8);max-width:540px;margin:0 auto 32px;line-height:1.6}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}

/* ---- service detail blocks (section pages) ---- */
.sdetail{padding:74px 0;border-bottom:1px solid var(--line)}
.sdetail:last-of-type{border-bottom:0}
.sdetail-in{display:grid;grid-template-columns:1fr 1.05fr;gap:54px;align-items:center}
.sdetail.alt .sdetail-media{order:2}
.sdetail-media{position:relative}
.sdetail-media image-slot,.sdetail-media img{width:100%;height:430px;object-fit:cover;border-radius:var(--radius-xl);box-shadow:var(--shadow-md);display:block}
.sdetail-tag{font-family:var(--font-script);font-size:26px;color:var(--teal-700);line-height:1;margin-bottom:6px}
.sdetail h2{font-size:32px;font-weight:700;letter-spacing:-.02em;color:var(--navy-600);margin:0 0 14px;line-height:1.12}
.sdetail .lede{font-size:16.5px;line-height:1.7;color:var(--ink-700);margin:0 0 20px}
.sdetail-benefits{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:10px}
.sdetail-benefits li{display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.45;color:var(--ink-900)}
.sdetail-benefits svg{flex:none;margin-top:2px;color:var(--teal-700)}
.sdetail-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sdetail-price{display:inline-flex;align-items:center;gap:8px;background:var(--ice-100);color:var(--navy-600);font-size:14px;font-weight:600;padding:9px 15px;border-radius:var(--radius-pill)}
.sdetail-price svg{color:var(--teal-700)}
.sdetail-treats{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.sdetail-treats .t{font-size:12.5px;font-weight:600;color:var(--navy-600);background:var(--ice-50);border:1px solid var(--line);padding:6px 12px;border-radius:var(--radius-pill)}
.svc-pagenav{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.svc-pagenav a{font-size:13.5px;font-weight:600;color:rgba(255,255,255,.85);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:9px 16px;border-radius:var(--radius-pill);transition:var(--transition)}
.svc-pagenav a:hover{background:rgba(255,255,255,.16);color:#fff}
.svc-pagenav a.active{background:var(--teal-500);border-color:var(--teal-400);color:#fff}
@media(max-width:980px){.sdetail-in,.sdetail.alt .sdetail-in{grid-template-columns:1fr;gap:32px}.sdetail.alt .sdetail-media{order:0}.sdetail-media image-slot,.sdetail-media img{height:340px}}

/* ---- tagline strip ---- */
.strip{background:var(--navy-800);padding:20px 0}
.strip-in{display:flex;justify-content:center;align-items:center;gap:24px;flex-wrap:wrap}
.strip span{font-size:14px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#fff}
.strip .dot{color:var(--teal-400)}

/* ---- footer ---- */
footer.ft{background:var(--navy-900);color:#fff;padding:70px 0 30px}
.ft-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.05fr 1.15fr;gap:38px;padding-bottom:46px;border-bottom:1px solid rgba(255,255,255,.12)}
.ft-brand img{height:54px;width:auto;margin-bottom:13px}
.ft-motto{display:flex;align-items:center;gap:8px;font-family:var(--font-sans);font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--teal-300);margin:0 0 18px}
.ft-motto i{font-style:normal;color:rgba(255,255,255,.4)}
.ft-brand p{color:rgba(255,255,255,.6);font-size:15px;margin:0 0 18px;max-width:280px;line-height:1.6}
.ft-phone{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:var(--teal-300);font-size:15px}
.ft-social{display:flex;gap:10px;margin-top:20px}
.ft-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-pill);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.85);transition:var(--transition)}
.ft-social a:hover{background:var(--teal-500);border-color:var(--teal-400);color:#fff;transform:translateY(-2px)}
.ft-col h2{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin:0 0 18px}
.ft-col a{display:block;color:rgba(255,255,255,.6);font-size:14.5px;margin-bottom:12px;transition:var(--transition)}
.ft-col a:hover{color:var(--teal-300)}
/* myPrivia app links (Privia Care Center Website Requirements, Part 1) */
.ft-apps{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12)}
.ft-apps-lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:12px}
/* Official store badges. Both vendors require a clear space around the badge —
   Google's is the larger ask at 1/4 the badge height — which the gap and the
   block's own top padding provide. Don't recolour, crop or restyle the art. */
.ft-badges{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ft-badges a{display:inline-flex;margin:0;border-radius:7px}
.ft-badges a:focus-visible{outline:3px solid var(--teal-300);outline-offset:3px}
.ft-badges img{height:38px;width:auto;display:block;transition:var(--transition)}
.ft-badges a:hover img{opacity:.82}
@media (prefers-reduced-motion: reduce){.ft-badges a:hover img{opacity:1}}
.ft-base{display:flex;justify-content:space-between;align-items:center;padding-top:26px;font-size:13px;color:rgba(255,255,255,.5);flex-wrap:wrap;gap:12px}
.ft-base a{color:rgba(255,255,255,.64);font-weight:600;transition:var(--transition)}
.ft-base a:hover{color:var(--teal-300)}
.ft-base a:focus-visible{outline:3px solid var(--teal-300);outline-offset:2px}
.ft-legal{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ft-tag{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--teal-300)}
.ft-tag i{color:rgba(255,255,255,.55);font-style:normal;margin:0 5px}

/* ---- responsive ---- */
@media(max-width:980px){
  .nav-links,.nav-phone,.nav-portal{display:none}
  .burger{display:flex;margin-left:auto;margin-right:-10px}
  .nav-cta{padding:13px 18px;font-size:13.5px}
  .ft-col a{padding:5px 0;margin-bottom:7px}
  .mobile.open{display:flex;flex-direction:column;gap:16px;padding:20px 44px 26px;background:var(--navy-700)}
  .mobile a{color:#fff}
  .pagehead{padding:120px 0 56px}
  .pagehead h1{font-size:40px}
  .pillar-grid{grid-template-columns:1fr 1fr}
  .svc-grid,.tier-grid,.testi-grid,.founder-in{grid-template-columns:1fr}
  .founder-stats{flex-wrap:wrap;gap:28px}
  .tier.feat{transform:none}.tier.feat:hover{transform:translateY(-4px)}
  .ft-grid{grid-template-columns:1fr 1fr}
  .founder-photo{height:440px}
  .sec-head h2{font-size:34px}
  .cta h2{font-size:34px}
  .sec{padding:64px 0}
}
@media(max-width:560px){
  .wrap,.nav-in{padding-left:24px;padding-right:24px}
  .nav-in{gap:12px}
  .nav-logo{height:36px}
  .nav-cta{padding:11px 15px;font-size:12.5px;letter-spacing:.01em}
  .burger{margin-left:4px}
  .pillar-grid,.ft-grid{grid-template-columns:1fr}
  .pagehead h1{font-size:33px}
}

/* ============================================================
   Individual service / treatment pages
   ============================================================ */
.sec.ice{background:var(--ice-50)}
.sec.ice .sec-head h2{color:var(--navy-600)}
.eyebrow.center,.sec-head .eyebrow{display:block}

/* hero meta chips + actions (sit inside .pagehead) */
.shero-meta{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 30px}
.shero-meta .chip{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:rgba(255,255,255,.9);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:9px 15px;border-radius:var(--radius-pill)}
.shero-meta .chip svg{color:var(--teal-300)}
.shero-actions{display:flex;gap:13px;flex-wrap:wrap}
.shero-back{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:rgba(255,255,255,.6);margin-top:30px;transition:var(--transition)}
.shero-back:hover{color:var(--teal-300)}
.shero-back svg{transition:transform .2s ease}
.shero-back:hover svg{transform:translateX(-3px)}

/* overview / split two-col */
.svcp-split{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.svcp-split.flip .svcp-split-media{order:-1}
.svcp-split-media image-slot,.svcp-split-media img{width:100%;height:460px;object-fit:cover;border-radius:var(--radius-xl);box-shadow:var(--shadow-md);display:block}
.svcp-body p{font-size:16.5px;line-height:1.78;color:var(--ink-700);margin:0 0 16px}
.svcp-body p:last-child{margin-bottom:0}
.svcp-body .eyebrow{margin-bottom:14px}
.svcp-body h2{font-size:34px;font-weight:700;letter-spacing:-.02em;color:var(--navy-600);margin:0 0 18px;line-height:1.12}
.svcp-body h2 em{font-family:var(--font-script);font-style:normal;font-weight:400;color:var(--teal-700);font-size:1.14em}

/* how it works — steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;counter-reset:step}
.step .n{width:48px;height:48px;border-radius:50%;background:var(--navy-600);color:var(--teal-300);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;margin-bottom:20px}
.step h3{font-size:17px;font-weight:700;color:var(--navy-600);margin:0 0 9px;line-height:1.25}
.step p{font-size:14.5px;line-height:1.62;color:var(--ink-500);margin:0}

/* benefits grid */
.benefit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.benefit{display:flex;gap:18px;align-items:flex-start;background:var(--ice-50);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;transition:var(--transition)}
.benefit:hover{background:#fff;box-shadow:var(--shadow-md);transform:translateY(-3px)}
.benefit .bi{width:46px;height:46px;border-radius:13px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--teal-700);flex:none}
.benefit h3{font-size:16.5px;font-weight:700;color:var(--navy-600);margin:0 0 6px}
.benefit p{font-size:14.5px;line-height:1.6;color:var(--ink-500);margin:0}

/* candidate / what it treats (dark band) */
.candidate-in{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:start}
.candidate-col h3{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-300);margin:0 0 22px}
.candidate-col .clist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:15px}
.candidate-col .clist li{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.88)}
.candidate-col .clist svg{flex:none;margin-top:2px;color:var(--teal-400)}
.candidate-chips{display:flex;flex-wrap:wrap;gap:9px}
.candidate-chips .t{font-size:13px;font-weight:600;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);padding:9px 16px;border-radius:var(--radius-pill)}

/* what to expect */
.expect-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.expect{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px 30px;box-shadow:var(--shadow-xs)}
.expect .ei{width:50px;height:50px;border-radius:14px;background:var(--ice-100);display:flex;align-items:center;justify-content:center;color:var(--teal-700);margin-bottom:20px}
.expect .lbl{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-700);margin-bottom:9px}
.expect h3{font-size:19px;font-weight:700;color:var(--navy-600);margin:0 0 9px}
.expect p{font-size:14.5px;line-height:1.62;color:var(--ink-500);margin:0}

/* pricing + savings */
.pricing-in{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}
.price-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);padding:40px 38px;box-shadow:var(--shadow-sm)}
.price-card .lbl{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-700);margin-bottom:16px}
.price-card .amt{font-size:46px;font-weight:700;color:var(--navy-600);letter-spacing:-.02em;line-height:1}
.price-card .amt small{font-size:16px;font-weight:500;color:var(--ink-500)}
.price-card .pnote{font-size:14.5px;color:var(--ink-500);margin:14px 0 0;line-height:1.6}
.price-incl{list-style:none;margin:24px 0 0;padding:24px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.price-incl li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--ink-900);line-height:1.45}
.price-incl svg{flex:none;margin-top:2px;color:var(--teal-700)}
.savings-card{background:linear-gradient(160deg,var(--teal-600),var(--teal-800));color:#fff;border-radius:var(--radius-xl);padding:40px 38px;box-shadow:var(--shadow-teal);display:flex;flex-direction:column}
.savings-card .lbl{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:16px}
.savings-card h3{font-size:26px;font-weight:700;margin:0 0 12px;line-height:1.18;letter-spacing:-.01em}
.savings-card .stext{font-size:15px;line-height:1.65;color:rgba(255,255,255,.9);margin:0 0 24px}
.savings-tiers{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.savings-tiers .row{display:flex;justify-content:space-between;align-items:center;font-size:14.5px;padding:13px 17px;background:rgba(255,255,255,.1);border-radius:var(--radius-md)}
.savings-tiers .row span{color:rgba(255,255,255,.9)}
.savings-tiers .row strong{font-weight:700;color:#fff;display:inline-flex;align-items:baseline;gap:9px}
.savings-tiers .row.base{background:rgba(255,255,255,.04)}
.savings-tiers .row.base span,.savings-tiers .row.base strong{color:rgba(255,255,255,.55)}
.savings-tiers .row.base strong{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.4)}
.savings-tiers .row.dim{background:rgba(255,255,255,.04)}
.savings-tiers .row.dim span,.savings-tiers .row.dim strong{color:rgba(255,255,255,.55)}
.savings-tiers .row .off{font-size:11.5px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.82);background:rgba(255,255,255,.16);padding:3px 9px;border-radius:var(--radius-pill)}
.savings-tiers .row.best{background:#fff}
.savings-tiers .row.best span,.savings-tiers .row.best strong{color:var(--navy-700)}
.savings-tiers .row.best .off{color:var(--teal-700);background:var(--teal-50)}
.savings-card .btn{margin-top:auto;width:100%}

/* faq */
.faq{max-width:840px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;padding:26px 0;font-size:18px;font-weight:600;color:var(--navy-600);list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .ic{flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line-strong);display:flex;align-items:center;justify-content:center;color:var(--teal-700);transition:var(--transition)}
.faq-item[open] summary .ic{background:var(--teal-500);border-color:var(--teal-500);color:#fff;transform:rotate(45deg)}
.faq-item .ans{font-size:15.5px;line-height:1.72;color:var(--ink-700);padding:0 0 26px;max-width:720px}

/* link a treatment card on category pages */
a.treatment{cursor:pointer}
.treatment .more{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--teal-700);padding-top:14px}
.treatment .more svg{transition:transform .2s ease}
.treatment:hover .more svg{transform:translateX(4px)}
.sdetail-more{margin-top:20px}

@media(max-width:980px){
  .svcp-split{grid-template-columns:1fr;gap:32px}.svcp-split.flip .svcp-split-media{order:0}
  .svcp-split-media image-slot,.svcp-split-media img{height:340px}
  .steps{grid-template-columns:1fr 1fr;gap:26px}
  .benefit-grid,.candidate-in,.expect-grid,.pricing-in{grid-template-columns:1fr}
  .svcp-body h2{font-size:28px}
}
@media(max-width:560px){
  .steps{grid-template-columns:1fr}
}

/* ============================================================
   THEME: LIGHT  ·  html[data-theme="light"]
   ------------------------------------------------------------
   The site ships "Concierge Noir" (dark) by default. This layer
   flips only the dark surfaces — nav-over-hero, hero & pagehead
   bands, .band-navy accent bands, the tier sections, .cta, the
   tagline strip, and a few page-local feature cards — to the
   airy white/ice treatment. White content sections and the navy
   footer (kept as the grounding anchor) are unchanged.
   Selectors are prefixed with html[data-theme="light"] so they
   win on specificity over page-level <style> rules.
   ============================================================ */

/* ---- sun / moon theme toggle (injected into the nav by site.js) ---- */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.34);background:transparent;color:#fff;cursor:pointer;transition:var(--transition);flex:none;padding:0}
.theme-toggle:hover{border-color:var(--teal-300);color:var(--teal-300);background:rgba(59,179,172,.1)}
.theme-toggle:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.theme-toggle svg{width:18px;height:18px;display:block;transition:transform var(--transition)}
.theme-toggle .ic-sun{display:none}
.theme-toggle .ic-moon{display:block}
html[data-theme="light"] .theme-toggle{border-color:var(--line-strong);color:var(--navy-600)}
html[data-theme="light"] .theme-toggle:hover{border-color:var(--teal-500);color:var(--teal-700);background:var(--teal-50)}
html[data-theme="light"] .theme-toggle .ic-sun{display:block}
html[data-theme="light"] .theme-toggle .ic-moon{display:none}
/* mobile menu toggle row */
.theme-toggle-m{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;font-family:var(--font-sans);font-size:15px;font-weight:600;padding:13px 16px;border-radius:var(--radius-pill);cursor:pointer;width:100%;justify-content:center}
html[data-theme="light"] .mobile.open .theme-toggle-m{background:var(--ice-50);border-color:var(--line);color:var(--navy-600)}
.theme-toggle-m svg{width:18px;height:18px;flex:none}

/* smooth cross-fade when flipping themes */
html.theme-anim,html.theme-anim body{transition:background-color .3s ease}
html.theme-anim .hero,html.theme-anim .pagehead,html.theme-anim .band-navy,html.theme-anim .cta,html.theme-anim .strip,html.theme-anim .svc-card,html.theme-anim .tier,html.theme-anim .sec{transition:background-color .3s ease,color .3s ease,border-color .3s ease}

/* ---- nav (dark text over the now-light hero) ---- */
html[data-theme="light"] header.nav .nav-links a{color:var(--ink-700)}
html[data-theme="light"] header.nav .nav-links a:hover{color:var(--teal-700)}
html[data-theme="light"] header.nav .nav-links a.active{color:var(--navy-600)}
html[data-theme="light"] header.nav .nav-links a.active::after{background:var(--teal-500)}
html[data-theme="light"] header.nav .nav-phone{color:var(--navy-600)}
html[data-theme="light"] header.nav .nav-portal{color:var(--navy-600);border-color:var(--line-strong)}
html[data-theme="light"] header.nav .nav-portal:hover{border-color:var(--teal-500);color:var(--teal-700);background:var(--teal-50)}
html[data-theme="light"] header.nav .burger{color:var(--navy-600)}
html[data-theme="light"] header.nav.scrolled{background:rgba(255,255,255,.86);box-shadow:var(--shadow-md)}
html[data-theme="light"] header.nav.scrolled .nav-links a{color:var(--ink-700)}
html[data-theme="light"] header.nav.scrolled .nav-phone,html[data-theme="light"] header.nav.scrolled .nav-links a.active{color:var(--navy-600)}
html[data-theme="light"] .mobile.open{background:#fff;box-shadow:var(--shadow-md)}
html[data-theme="light"] .mobile.open a{color:var(--ink-700)}
html[data-theme="light"] .mobile.open a.btn-teal{color:var(--navy-900)}

/* ---- interior page header band ---- */
html[data-theme="light"] .pagehead{background:var(--wash-hero);color:var(--ink-900)}
html[data-theme="light"] .pagehead::before{background:radial-gradient(70% 120% at 80% 10%,rgba(59,179,172,.14),transparent 60%)}
html[data-theme="light"] .pagehead .wm{opacity:.05}
html[data-theme="light"] .pagehead .crumbs{color:var(--ink-500)}
html[data-theme="light"] .pagehead .crumbs a:hover{color:var(--teal-700)}
html[data-theme="light"] .pagehead h1{color:var(--navy-600)}
html[data-theme="light"] .pagehead h1 em{color:var(--teal-700)}
html[data-theme="light"] .pagehead p{color:var(--ink-700)}
/* service hero chips + back link (sit in .pagehead) */
html[data-theme="light"] .shero-meta .chip{color:var(--navy-600);background:#fff;border-color:var(--line)}
html[data-theme="light"] .shero-meta .chip svg{color:var(--teal-700)}
html[data-theme="light"] .shero-back{color:var(--ink-500)}
html[data-theme="light"] .shero-back:hover{color:var(--teal-700)}
html[data-theme="light"] .svc-pagenav a{color:var(--navy-600);background:#fff;border-color:var(--line)}
html[data-theme="light"] .svc-pagenav a:hover{background:var(--ice-50)}
html[data-theme="light"] .svc-pagenav a.active{background:var(--teal-500);border-color:var(--teal-400);color:#fff}

/* ---- tagline strip ---- */
html[data-theme="light"] .strip{background:var(--ice-100)}
html[data-theme="light"] .strip span{color:var(--navy-600)}
html[data-theme="light"] .strip .dot{color:var(--teal-700)}

/* ---- .band-navy accent bands (services / candidate / story / self-pay) ---- */
html[data-theme="light"] .band-navy{background:var(--ice-50);color:var(--ink-900)}
html[data-theme="light"] .band-navy .wm{opacity:.05}
html[data-theme="light"] .band-navy .sec-head h2{color:var(--navy-600)}
html[data-theme="light"] .band-navy .sec-head p{color:var(--ink-500)}
html[data-theme="light"] .band-navy .eyebrow.dark{color:var(--teal-700)}
/* service preview cards */
html[data-theme="light"] .svc-card{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
html[data-theme="light"] .svc-card:hover{background:#fff;border-color:var(--teal-400);box-shadow:var(--shadow-lg)}
html[data-theme="light"] .svc-verb{color:var(--teal-700)}
html[data-theme="light"] .svc-num{color:var(--ink-500)}
html[data-theme="light"] .svc-card .blurb{color:var(--ink-500)}
html[data-theme="light"] .svc-list li{color:var(--ink-900)}
html[data-theme="light"] .svc-list svg{color:var(--teal-700)}
/* candidate / "is it right for you" columns */
html[data-theme="light"] .candidate-col h3{color:var(--teal-700)}
html[data-theme="light"] .candidate-col .clist li{color:var(--ink-900)}
html[data-theme="light"] .candidate-col .clist svg{color:var(--teal-700)}
html[data-theme="light"] .candidate-chips .t{color:var(--navy-600);background:#fff;border-color:var(--line)}

/* ---- membership tier sections (inline navy-800 bg on index + membership) ---- */
html[data-theme="light"] .sec[style*="navy-800"]{background:var(--paper)!important;color:var(--ink-900)!important}
html[data-theme="light"] .sec[style*="navy-800"] .sec-head h2{color:var(--navy-600)!important}
html[data-theme="light"] .sec[style*="navy-800"] .sec-head p{color:var(--ink-500)!important}
html[data-theme="light"] .sec[style*="navy-800"] .eyebrow.dark{color:var(--teal-700)}
html[data-theme="light"] .sec[style*="navy-800"] > .wrap > p{color:var(--ink-500)!important}
html[data-theme="light"] .member-foot a{color:var(--teal-700)}
html[data-theme="light"] .member-foot{color:var(--ink-500)}
html[data-theme="light"] .tier{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
html[data-theme="light"] .tier:hover{background:#fff;box-shadow:var(--shadow-lg)}
html[data-theme="light"] .tier-name{color:var(--teal-700)}
html[data-theme="light"] .tier-price{color:var(--navy-600)}
html[data-theme="light"] .tier-price small{color:var(--ink-500)}
html[data-theme="light"] .tier-sub{color:var(--ink-500)}
html[data-theme="light"] .tier-perks li{color:var(--ink-700)}
html[data-theme="light"] .tier-perks svg{color:var(--teal-700)}
/* the featured tier keeps its teal gradient + white text as the focal point */
html[data-theme="light"] .tier.feat,html[data-theme="light"] .tier.feat:hover{background:linear-gradient(160deg,var(--teal-600),var(--teal-800));border-color:var(--teal-400);box-shadow:var(--shadow-teal)}
html[data-theme="light"] .tier.feat .tier-name{color:rgba(255,255,255,.9)}
html[data-theme="light"] .tier.feat .tier-price{color:#fff}
html[data-theme="light"] .tier.feat .tier-price small{color:rgba(255,255,255,.6)}
html[data-theme="light"] .tier.feat .tier-sub{color:rgba(255,255,255,.85)}
html[data-theme="light"] .tier.feat .tier-perks li{color:rgba(255,255,255,.82)}
html[data-theme="light"] .tier.feat .tier-perks svg{color:#fff}
html[data-theme="light"] .btn-tierdark{background:#fff;color:var(--navy-600);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
html[data-theme="light"] .btn-tierdark:hover{box-shadow:inset 0 0 0 1.5px var(--teal-400);background:var(--ice-50)}
/* billing toggle */
html[data-theme="light"] .toggle{background:var(--mist)}
html[data-theme="light"] .toggle button{color:var(--ink-500)}
html[data-theme="light"] .toggle button.on{background:#fff;color:var(--navy-600);box-shadow:var(--shadow-sm)}

/* ---- CTA band ---- */
html[data-theme="light"] .cta{background:var(--wash-ice)}
html[data-theme="light"] .cta .wm{opacity:.05}
html[data-theme="light"] .cta .eyebrow.dark{color:var(--teal-700)}
html[data-theme="light"] .cta h2{color:var(--navy-600)}
html[data-theme="light"] .cta h2 em{color:var(--teal-700)}
html[data-theme="light"] .cta p{color:var(--ink-700)}

/* ---- on-dark buttons sit on light surfaces in light theme → restyle ---- */
html[data-theme="light"] .btn-ghostd{background:transparent;color:var(--navy-600);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
html[data-theme="light"] .btn-ghostd:hover{box-shadow:inset 0 0 0 1.5px var(--teal-400);background:var(--ice-50)}
html[data-theme="light"] .btn-ondark{background:var(--teal-500);color:var(--navy-900);box-shadow:var(--shadow-teal)}
html[data-theme="light"] .btn-ondark:hover{background:var(--teal-400)}
/* …but keep white buttons on the teal-gradient cards (feat tier + savings card) */
html[data-theme="light"] .tier.feat .btn-ondark,html[data-theme="light"] .savings-card .btn-ondark{background:#fff;color:var(--navy-700)}
html[data-theme="light"] .tier.feat .btn-ondark:hover,html[data-theme="light"] .savings-card .btn-ondark:hover{background:var(--ice-100)}

/* ============================================================
   THEME LIGHT — page-local dark feature cards
   (these classes live in individual pages' <style> blocks; the
   html[data-theme] prefix out-specifies them without !important)
   ============================================================ */
/* contact.html — .detail-card */
html[data-theme="light"] .detail-card{background:#fff;color:var(--ink-900);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
html[data-theme="light"] .detail-card h3{color:var(--teal-700)}
/* reviews.html — featured testimonial */
html[data-theme="light"] .rev-feat{background:var(--ice-50);color:var(--ink-900);border:1px solid var(--line)}
html[data-theme="light"] .rev-feat .mark{color:rgba(59,179,172,.18)}
html[data-theme="light"] .rev-feat .stars{color:var(--teal-700)}
/* membership.html — mixed-model result + comparison header + self-pay copy */
html[data-theme="light"] .ms-result{background:var(--ice-50);color:var(--ink-900);border:1px solid var(--line)}
html[data-theme="light"] .ms-result .msr-h{color:var(--teal-700)}
html[data-theme="light"] .ms-result .msr-p{color:var(--ink-500)}
html[data-theme="light"] .compare thead th{background:var(--ice-100)!important;color:var(--navy-600)}
html[data-theme="light"] .compare thead th .tn{color:var(--teal-700)}
html[data-theme="light"] .compare thead th .tp small{color:var(--ink-500)}
html[data-theme="light"] .compare thead th.feat{background:var(--teal-700)!important;color:#fff}
html[data-theme="light"] .compare thead th.feat .tn{color:rgba(255,255,255,.92)}
html[data-theme="light"] .compare thead th.feat .tp small{color:rgba(255,255,255,.9)}
html[data-theme="light"] .selfpay-copy h2{color:var(--navy-600)}
html[data-theme="light"] .selfpay-copy h2 em{color:var(--teal-700)}
html[data-theme="light"] .selfpay-copy p{color:var(--ink-700)}
/* about.html — story split copy */
html[data-theme="light"] .story-copy h2{color:var(--navy-600)}
html[data-theme="light"] .story-copy h2 em{color:var(--teal-700)}
html[data-theme="light"] .story-copy .story-script{color:var(--teal-700)}
html[data-theme="light"] .story-copy p{color:var(--ink-700)}

/* ---- light theme: inner text of the flipped feature cards (contrast 1.4.3) ---- */
/* contact.html — detail-card rows */
html[data-theme="light"] .detail-card .drow .di{background:var(--ice-100);color:var(--teal-700)}
html[data-theme="light"] .detail-card .drow .dt b{color:var(--navy-600)}
html[data-theme="light"] .detail-card .drow .dt span,html[data-theme="light"] .detail-card .drow .dt a{color:var(--ink-700)}
html[data-theme="light"] .detail-card a.drow:hover{background:var(--ice-50)}
html[data-theme="light"] .detail-card a.drow:hover .dt b{color:var(--teal-700)}
html[data-theme="light"] .detail-card .map-hint{color:var(--teal-700)}
/* reviews.html — featured testimonial */
html[data-theme="light"] .rev-feat .stars{color:var(--teal-700)}
html[data-theme="light"] .rev-feat blockquote em{color:var(--teal-700)}
html[data-theme="light"] .rev-feat .by .ic{background:var(--ice-100);color:var(--teal-700)}
html[data-theme="light"] .rev-feat .by b{color:var(--navy-600)}
html[data-theme="light"] .rev-feat .by span{color:var(--ink-500)}
html[data-theme="light"] .rev-feat .mark{color:rgba(59,179,172,.16)}
/* self-pay.html — rate-table header */
html[data-theme="light"] .sp-table thead th{background:var(--ice-100)!important;color:var(--navy-600)}
html[data-theme="light"] .sp-table thead th .lbl{color:var(--ink-500)}

/* ============================================================
   PROMO MODAL — site-wide limited-time offer popup
   Markup is injected by site.js (so it lives in one place and
   appears on every page except booking & contact). Shows once,
   then is suppressed for 7 days.
   ============================================================ */
.promo-overlay{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(8,18,38,.64);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .32s ease,visibility .32s ease}
.promo-overlay.open{opacity:1;visibility:visible}
.promo-card{position:relative;width:min(420px,100%);max-height:calc(100dvh - 48px);overflow-y:auto;
  background:#fff;border-radius:var(--radius-xl);box-shadow:0 30px 80px -22px rgba(8,18,38,.62);
  padding:14px 14px 18px;
  transform:translateY(18px) scale(.97);transition:transform .38s cubic-bezier(.2,.85,.25,1)}
.promo-overlay.open .promo-card{transform:none}
html[data-theme="dark"] .promo-card{background:#0f1d35}
.promo-imgwrap{position:relative;width:100%;aspect-ratio:825/1154;border-radius:14px;overflow:hidden;background:var(--ice-100)}
.promo-imgwrap image-slot{position:absolute;inset:0;display:block;width:100%;height:100%}
.promo-cta{display:flex;width:100%;justify-content:center;margin-top:14px;font-size:16px;padding:15px 24px;letter-spacing:.02em}

/* ---- event variant: a typeset card instead of a flyer graphic ----
   Used when the promo is an event rather than an offer image. The navy
   header keeps the close button legible in both themes; only the body
   text needs dark-theme overrides, since .promo-card itself flips. */
.promo-card.promo-event{padding:0;overflow:hidden}
.pev-head{position:relative;overflow:hidden;background:var(--wash-navy);color:#fff;padding:34px 30px 30px}
.pev-wm{position:absolute;right:-46px;top:50%;transform:translateY(-50%);width:210px;opacity:.07;pointer-events:none}
.pev-tag{position:relative;z-index:1;display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal-300);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);padding:6px 12px;border-radius:var(--radius-pill)}
.pev-title{position:relative;z-index:1;font-size:31px;line-height:1.1;letter-spacing:-.02em;font-weight:700;color:#fff;margin:15px 0 10px}
.pev-title em{font-family:var(--font-script);font-style:normal;font-weight:400;color:var(--teal-300);font-size:1.2em}
.pev-sub{position:relative;z-index:1;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.76);margin:0}
.pev-body{padding:24px 30px 28px}
.pev-row{display:flex;gap:13px;align-items:flex-start;margin-bottom:16px}
.pev-ic{flex:none;width:38px;height:38px;border-radius:10px;background:var(--ice-100);color:var(--teal-700);display:flex;align-items:center;justify-content:center}
.pev-ic svg{width:18px;height:18px}
.pev-txt b{display:block;font-size:15.5px;font-weight:700;color:var(--navy-600);line-height:1.35}
.pev-txt span{display:block;font-size:14px;color:var(--ink-500);line-height:1.5;margin-top:2px}
.promo-event .promo-cta{margin-top:20px}
.pev-fine{font-size:12.5px;line-height:1.55;color:var(--ink-500);text-align:center;margin:12px 0 0}
html[data-theme="dark"] .pev-ic{background:rgba(255,255,255,.08);color:var(--teal-300)}
html[data-theme="dark"] .pev-txt b{color:#fff}
html[data-theme="dark"] .pev-txt span,html[data-theme="dark"] .pev-fine{color:rgba(255,255,255,.66)}
.promo-close{position:absolute;top:22px;right:22px;z-index:2;width:38px;height:38px;border:0;border-radius:50%;
  background:rgba(8,18,38,.55);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .2s ease,transform .2s ease}
.promo-close:hover{background:rgba(8,18,38,.82);transform:scale(1.06)}
.promo-event .promo-close{top:16px;right:16px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22)}
.promo-event .promo-close:hover{background:rgba(255,255,255,.26)}
.promo-close svg{width:18px;height:18px}
.promo-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:480px){
  .promo-overlay{padding:16px}
  .promo-close{top:16px;right:16px}
  .pev-head{padding:28px 22px 24px}
  .pev-title{font-size:27px}
  .pev-body{padding:20px 22px 24px}
}
@media (prefers-reduced-motion: reduce){
  .promo-overlay,.promo-card{transition:opacity .2s ease,visibility .2s ease}
  .promo-card,.promo-overlay.open .promo-card{transform:none}
}

/* ==================================================================
   SITE ALERT BANNER
   Rendered site-wide by src/components/AlertBanner.astro; content and
   scheduling come from src/lib/site-alerts.ts. Satisfies the Privia Care
   Center requirement for visitor alerts (phone issues, office closures,
   medication recalls).
   ================================================================== */
/* The header is position:absolute over the top of the page, so the banner —
   which is the first element in flow — reserves room for it in its own top
   padding. The header's white-on-dark styling reads correctly over both the
   teal and the red banner. --nav-h is the header's rendered height. */
:root{--nav-h:86px}
.sitealert{background:var(--teal-800);padding:calc(var(--nav-h) + 22px) 0 22px;position:relative}
/* Interior pages reserve 150px at the top of .pagehead for that same absolute
   header. When a banner is up the header sits over the banner instead, so the
   reserved space would read as a gap — reclaim it. */
body.has-alert .pagehead{padding-top:64px}
.sitealert--urgent{background:var(--danger)}
.sitealert-in{display:flex;align-items:center;justify-content:center;gap:12px 24px;flex-wrap:wrap;text-align:center;padding-right:34px}
.sitealert .sa-tag{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);padding:7px 13px;border-radius:var(--radius-pill);white-space:nowrap}
.sitealert .sa-txt{font-size:16.5px;font-weight:600;color:#fff;letter-spacing:-.005em}
.sitealert .sa-when{font-size:15px;color:rgba(255,255,255,.85)}
.sitealert .sa-go{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;letter-spacing:.02em;color:var(--navy-900);background:#fff;padding:11px 20px;border-radius:var(--radius-pill);transition:var(--transition);white-space:nowrap}
.sitealert .sa-go:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.sitealert .sa-go svg{transition:transform .2s ease}
.sitealert .sa-go:hover svg{transform:translateX(3px)}
.sitealert .sa-x{position:absolute;top:50%;right:18px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:rgba(255,255,255,.75);cursor:pointer;transition:var(--transition)}
.sitealert .sa-x:hover{background:rgba(255,255,255,.16);color:#fff}
.sitealert .sa-x:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media(max-width:980px){
  :root{--nav-h:78px}
  body.has-alert .pagehead{padding-top:52px}
}
@media(max-width:620px){
  .sitealert{padding:calc(var(--nav-h) + 16px) 0 16px}
  .sitealert-in{gap:10px 16px;padding-right:0}
  .sitealert .sa-txt{font-size:15px}
  .sitealert .sa-when{font-size:14px}
  .sitealert .sa-x{top:8px;right:8px;transform:none}
}
@media (prefers-reduced-motion: reduce){
  .sitealert .sa-go:hover{transform:none}
  .sitealert .sa-go:hover svg{transform:none}
}
/* Light theme. The absolute header switches to dark text in light mode, so the
   banner beneath it has to go light too or the nav becomes unreadable over it.
   Urgent stays unmistakably red, just as a wash rather than a solid fill. */
html[data-theme="light"] .sitealert{background:var(--teal-50);border-bottom:1px solid var(--line)}
html[data-theme="light"] .sitealert--urgent{background:#FCEEF0;border-bottom-color:rgba(178,59,78,.22)}
html[data-theme="light"] .sitealert .sa-tag{color:var(--teal-800);background:rgba(24,81,78,.09);border-color:rgba(24,81,78,.22)}
html[data-theme="light"] .sitealert--urgent .sa-tag{color:#8E2C3C;background:rgba(178,59,78,.09);border-color:rgba(178,59,78,.24)}
html[data-theme="light"] .sitealert .sa-txt{color:var(--navy-600)}
html[data-theme="light"] .sitealert--urgent .sa-txt{color:#8E2C3C}
html[data-theme="light"] .sitealert .sa-when{color:var(--ink-500)}
html[data-theme="light"] .sitealert--urgent .sa-when{color:#9C4A57}
html[data-theme="light"] .sitealert .sa-go{background:var(--teal-500);color:var(--navy-900)}
html[data-theme="light"] .sitealert--urgent .sa-go{background:var(--danger);color:#fff}
html[data-theme="light"] .sitealert .sa-x{color:var(--ink-500)}
html[data-theme="light"] .sitealert .sa-x:hover{background:rgba(6,38,79,.07);color:var(--navy-600)}
html[data-theme="light"] .sitealert .sa-x:focus-visible{outline-color:var(--teal-600)}

/* ==================================================================
   PRIVIA AFFILIATION BAND
   Sits immediately above the footer on every page. Required by the Privia
   Care Center Website Requirements, Part 1. Always dark, matching the
   footer in both themes, so the reversed (white) logo is always correct.
   ================================================================== */
.privia-band{background:var(--navy-800);padding:34px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.privia-band-in{display:flex;align-items:center;justify-content:center;gap:18px 28px;flex-wrap:wrap;text-align:center}
.privia-band .pb-txt{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8);margin:0}
.privia-band .pb-txt a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:var(--transition)}
.privia-band .pb-txt a:hover{color:var(--teal-300)}
.privia-band .pb-logo{display:inline-flex;align-items:center}
.privia-band .pb-logo img{width:186px;height:auto;display:block}
@media(max-width:620px){
  .privia-band{padding:26px 0}
  .privia-band .pb-txt{font-size:11.5px;letter-spacing:.14em}
  .privia-band .pb-logo img{width:156px}
}

/* ==================================================================
   CARVE-OUT SERVICE MARKERS
   Privia Care Center Website Requirements, Part 5: services outside the
   Privia partnership carry an asterisk everywhere they are mentioned, and
   the page carries the Products & Services Disclaimer.
   ================================================================== */
/* Inherits the surrounding text colour on purpose: the marker appears on white
   cards and on navy bands that are styled inline, so there is no reliable class
   to hook a dark variant onto. currentColor is legible on both by construction. */
.co-mark{font-size:.72em;line-height:0;vertical-align:super;font-weight:700;color:inherit;margin-left:1px}
.co-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.carveout-note{max-width:860px;margin:0 auto;padding:22px 26px;background:var(--ice-50);border:1px solid var(--line);border-left:4px solid var(--teal-500);border-radius:var(--radius-md)}
.carveout-note h2{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-700);margin:0 0 10px}
.carveout-note p{font-size:14px;line-height:1.68;color:var(--ink-700);margin:0}
.carveout-note p + p{margin-top:10px}