/* ==========================================================================
   EliteRx — styles.css
   Built on the Triad architecture: same include pattern, same class-name
   conventions, retuned for a medical/performance brand.

   PALETTE (from the EliteRx logo):
     --red        #d81c33   brand red (the Rx)
     --chrome     gradient  the metallic ELITE lettering
     --black      #08090b   page base
   Chrome is the signature: display type uses a metallic gradient fill and
   section breaks use a thin chrome rule instead of a hard border.
   ========================================================================== */

:root{
  --black:#08090b;
  --ink:#0f1116;
  --panel:#161a21;
  --bone:#eef1f5;
  --paper:#e9ecf0;
  --smoke:#868e99;
  --mute:#c3c9d1;
  --red:#d81c33;
  --red-deep:#a41527;
  --line:#242932;
  --line-lt:#d5d9df;
  --chrome:linear-gradient(180deg,#ffffff 0%,#e6eaef 34%,#98a0ab 51%,#f1f4f7 60%,#ffffff 100%);
  --chrome-rule:linear-gradient(90deg,transparent 0%,#4a505a 12%,#e8ebef 50%,#4a505a 88%,transparent 100%);
  --shadow:0 18px 44px rgba(0,0,0,.55);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{background:var(--black);color:var(--bone);font-family:'Inter',system-ui,sans-serif;font-size:17px;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased;padding-bottom:64px}
h1,h2,h3,h4{font-family:'Archivo',sans-serif;font-weight:900;line-height:1;text-transform:uppercase;letter-spacing:-.015em}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.wrap{max-width:1280px;margin:0 auto;padding:0 30px}
section{position:relative}
.pad{padding:118px 0}
.pad-sm{padding:74px 0}
.center{text-align:center;margin:0 auto 58px;max-width:760px}
.center h2,.lead h2{font-size:clamp(2rem,4vw,3.2rem)}
.center p{color:var(--smoke);font-size:1.1rem;margin-top:16px}

/* ---- SIGNATURE: chrome display type ------------------------------------ */
/* Chrome gradient text. inline + box-decoration-break:clone means every
   wrapped LINE gets its own full copy of the gradient, so multi-line chrome
   headings render correctly. (As inline-block, the gradient stretched over
   the whole wrapped box and lines caught thin slices of it.) */
.chrome{background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:.04em}
.r{color:var(--red)}

/* ---- SIGNATURE: chrome rule divider ------------------------------------ */
.crule{height:1px;background:var(--chrome-rule);opacity:.55;margin:0}
.crule.short{max-width:1280px;margin:0 auto}

.kick,.eyebrow{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.3em;font-weight:600;font-size:.8rem;color:var(--red);margin-bottom:14px;display:block}

/* ---- BUTTONS ------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-weight:700;font-size:1.02rem;padding:16px 34px;background:var(--red);color:#fff;border:2px solid var(--red);transition:.25s;cursor:pointer;text-align:center}
@media(hover:hover){.btn:hover{background:transparent;color:var(--red);transform:translateY(-2px)}}
.btn.ghost{background:transparent;color:var(--bone);border-color:rgba(238,241,245,.32)}
.btn.ghost:hover{background:var(--bone);color:var(--black);border-color:var(--bone)}
.btn.steel{background:var(--panel);border-color:var(--line);color:var(--bone)}
.btn.steel:hover{background:transparent;border-color:var(--red);color:var(--red)}
.btn.dark{background:var(--black);border-color:var(--black);color:#fff}
.btn.dark:hover{background:transparent;color:var(--black)}
.btn.submit{width:100%}
.btn.submit:disabled{opacity:.45;cursor:not-allowed;background:var(--line);border-color:var(--line);color:var(--smoke);transform:none}

/* ---- NAV ---------------------------------------------------------------- */
header.nav{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:14px 30px;transition:.3s;background:linear-gradient(180deg,rgba(8,9,11,.85),transparent)}
header.nav.scrolled{background:rgba(8,9,11,.97);padding:9px 30px;box-shadow:0 1px 0 var(--line)}
/* The logo is a full wordmark, so the nav shows the mark plus a location
   line only. No repeated "EliteRx" text next to it.

   mix-blend-mode:screen drops the logo's baked BLACK background out against
   any dark backdrop, so the current non-transparent PNG reads as if it were
   cut out. Screen leaves white and the red Rx untouched and turns pure black
   fully transparent.

   REMOVE the two .logo-knockout rules once you have a real transparent PNG
   or SVG, and never use them on a light background. */
.logo-knockout{mix-blend-mode:screen;filter:none}
.brand{display:flex;align-items:center;gap:14px}
.brand img{height:38px;width:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.7))}
.brand .bt small{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.62rem;letter-spacing:.3em;color:var(--smoke);text-transform:uppercase;padding-left:14px;border-left:1px solid var(--line)}
header.nav.scrolled .brand img{height:32px}
nav.links{display:flex;align-items:center;gap:22px}
nav.links a{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.13em;font-weight:600;font-size:.95rem;transition:color .2s}
nav.links a:hover{color:var(--red)}
nav.links .btn{padding:11px 20px;font-size:.88rem}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:0;padding:6px;z-index:1200}
.burger span{width:26px;height:2px;background:var(--bone);transition:.3s}

/* ---- HERO --------------------------------------------------------------- */
/* Content is top-anchored with a viewport-scaled offset rather than pinned to
   the bottom. Centring still left it sitting low on tall screens; this starts
   the block about 16% down whatever the viewport height, so it reads the same
   on a laptop and a 27in monitor. */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-start;overflow:hidden;padding:clamp(112px,16vh,196px) 0 8vh}
.hero video,.hero .heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* Video stays hidden until it actually has a playable source. .hero.has-video
   is set by JS once hero.mp4 loads, so an empty <video> never covers the
   <picture>. */
.hero video{display:none}
.hero.has-video video{display:block}
/* Fallback hero images, shown per-viewport while there is no hero.mp4.
   The <picture> element swaps hero-mobile.jpg in under 761px. When the real
   video arrives, the video tag paints over this layer and nothing changes. */
.hero .heroimg-wrap{position:absolute;inset:0;z-index:0}
.hero .heroimg-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.hero .grad{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,9,11,.72) 0%,rgba(8,9,11,.25) 32%,rgba(8,9,11,.82) 76%,var(--black) 100%)}
.hero .vig{position:absolute;inset:0;z-index:1;background:radial-gradient(120% 100% at 50% 40%,transparent 38%,rgba(8,9,11,.62) 100%)}
.hero .wrap{position:relative;z-index:3;width:100%}
.hero .kicker{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.hero .kicker .l{width:52px;height:2px;background:var(--red)}
.hero .kicker span{font-family:'Barlow Condensed',sans-serif;letter-spacing:.3em;font-weight:600;font-size:.88rem;text-transform:uppercase}
.hero h1{font-size:clamp(2.9rem,9.4vw,8.5rem);line-height:.85;margin-bottom:28px}
.hero .sub{font-size:1.24rem;line-height:1.6;max-width:54ch;color:#dbe0e7;margin-bottom:38px;text-shadow:0 2px 14px rgba(0,0,0,.8)}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;align-items:center}
.hero .badges{display:flex;gap:30px;margin-top:44px;flex-wrap:wrap}
.hero .badges .b{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:.84rem;color:#c3c9d1;display:flex;align-items:center;gap:8px}
.hero .badges .b b{font-family:'Archivo',sans-serif;font-weight:900;color:var(--red);font-size:1.35rem}

/* Short laptop screens: the full-size hero block overflows the fold at around
   700px tall, so scale it back rather than letting the CTAs fall below it. */
@media(min-width:761px) and (max-height:800px){
  .hero{padding-top:clamp(92px,12vh,120px)}
  .hero .kicker{margin-bottom:16px}
  .hero h1{font-size:clamp(2.6rem,6.7vw,5rem);margin-bottom:20px}
  .hero .sub{font-size:1.08rem;margin-bottom:26px}
  .hero .badges{margin-top:26px}
}

/* ---- SUB-HERO (interior pages) ------------------------------------------ */
.subhero{position:relative;padding:190px 0 84px;overflow:hidden;background:var(--ink)}
.subhero.compact{padding:150px 0 54px}
.subhero .bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;filter:grayscale(.3)}
.subhero .grad{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,9,11,.9) 0%,rgba(8,9,11,.68) 45%,var(--black) 100%)}
.subhero .vig{position:absolute;inset:0;z-index:1;background:radial-gradient(110% 100% at 50% 40%,transparent 40%,rgba(8,9,11,.6) 100%)}
.subhero .wrap{position:relative;z-index:3}
.subhero h1{font-size:clamp(2.1rem,5vw,3.9rem);line-height:.92;margin-bottom:18px}
.subhero .sub{font-size:1.12rem;max-width:60ch;color:#dbe0e7;margin-bottom:26px}
.subhero .kicker{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.subhero .kicker .l{width:52px;height:2px;background:var(--red)}
.subhero .kicker span{font-family:'Barlow Condensed',sans-serif;letter-spacing:.3em;font-weight:600;font-size:.85rem;text-transform:uppercase}
.crumbs{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;color:var(--smoke);margin-bottom:22px}
.crumbs a:hover{color:var(--red)}
.crumbs .sep{margin:0 8px;opacity:.5}
.crumbs .here{color:var(--bone)}

/* ---- MARQUEE ------------------------------------------------------------ */
.marquee{background:var(--red);overflow:hidden;white-space:nowrap;padding:12px 0;position:relative;z-index:9}
.marquee .track{display:inline-flex;gap:36px;animation:scroll 34s linear infinite}
.marquee span{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:1rem;color:#fff}
.marquee span b{color:rgba(8,9,11,.75)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---- STAT STRIP --------------------------------------------------------- */
.statstrip{background:var(--paper);color:#12141a}
.statstrip .inner{display:grid;grid-template-columns:repeat(4,1fr)}
.statstrip .c{padding:56px 22px;text-align:center;border-right:1px solid var(--line-lt)}
.statstrip .c:last-child{border-right:0}
.statstrip .n{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(2.6rem,4.6vw,4rem);color:var(--red);line-height:.9}
.statstrip .l{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:.82rem;color:#4e535c;margin-top:10px}

/* ---- INTENT ROUTER ------------------------------------------------------ */
.router{background:var(--ink)}
.router-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rcard{background:var(--black);border:1px solid var(--line);padding:30px 28px;display:flex;flex-direction:column;gap:10px;transition:.25s;position:relative;overflow:hidden}
.rcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red);transform:scaleY(0);transform-origin:top;transition:transform .3s}
@media(hover:hover){.rcard:hover{border-color:var(--red);transform:translateY(-3px)}.rcard:hover::before{transform:scaleY(1)}}
.rcard .rk{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.18em;font-size:.74rem;color:var(--red);font-weight:700}
.rcard h3{font-size:1.42rem;line-height:1.05}
.rcard p{color:var(--mute);font-size:.95rem;line-height:1.55}
.rcard .go{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-weight:700;font-size:.86rem;color:var(--bone);margin-top:auto;padding-top:8px;transition:.2s}
.rcard:hover .go{color:var(--red)}

/* ---- FEATURE BANDS ------------------------------------------------------ */
.feature{display:grid;grid-template-columns:1fr 1fr;min-height:86vh}
.feature .media{position:relative;overflow:hidden;background:var(--panel)}
.feature .media .bg{position:absolute;inset:0;background-size:cover;background-position:center}
/* Live Leaflet map inside a .feature media pane: fill the pane instead of the
   fixed 560px height used on the contact page, and keep the tagpill above it. */
.feature .media #map{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.feature .media .tagpill{z-index:5}
.feature .media .leaflet-container{height:100%}
.feature .media .tagpill{position:absolute;top:26px;left:26px;z-index:3;background:var(--red);color:#fff;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-weight:700;font-size:.78rem;padding:8px 16px}
.feature .copy{display:flex;flex-direction:column;justify-content:center;padding:88px 7vw}
.feature .copy h2{font-size:clamp(1.9rem,3.4vw,2.9rem);margin:4px 0 18px}
.feature .copy p{color:var(--mute);font-size:1.08rem;margin-bottom:14px;max-width:48ch}
.feature .copy .btn{align-self:flex-start;margin-top:10px}
.feature.dark{background:var(--ink)}
.feature.light{background:var(--paper);color:#12141a}
.feature.light .copy p{color:#3c414a}
.feature.light h2{color:#0f1116}
.feature.light .kick{color:var(--red-deep)}
.feature.reverse .media{order:2}
.feature .creds{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.feature .creds span{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:.76rem;border:1px solid currentColor;opacity:.75;padding:6px 12px}

/* ---- SERVICE LIST (editorial rows) -------------------------------------- */
.programs{background:var(--black)}
.plist{border-top:1px solid var(--line)}
.prow{display:grid;grid-template-columns:64px 1fr auto;gap:26px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line);position:relative;transition:.3s}
.prow .pn{font-family:'Archivo',sans-serif;font-weight:900;color:transparent;-webkit-text-stroke:1px var(--smoke);font-size:1.6rem}
.prow h3{font-size:clamp(1.5rem,3.2vw,2.4rem);transition:.3s;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.prow h3 .tag{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.76rem;letter-spacing:.16em;color:var(--smoke);-webkit-text-stroke:0;border:1px solid var(--line);padding:5px 10px;text-transform:uppercase}
.prow .arrow{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:var(--red);opacity:0;transform:translateX(-10px);transition:.3s;white-space:nowrap}
@media(hover:hover){
  .prow:hover{padding-left:16px}
  .prow:hover h3{color:var(--red)}
  .prow:hover .pn{-webkit-text-stroke:1px var(--red)}
  .prow:hover .arrow{opacity:1;transform:none}
}

/* ---- SERVICE DETAIL BLOCKS (services page) ------------------------------ */
.svc{scroll-margin-top:150px}
.svc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:26px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.svc-head h2{font-size:clamp(1.9rem,4vw,3rem)}
.svc-body{display:grid;grid-template-columns:1.35fr .65fr;gap:44px;align-items:start}
.svc-body p{color:var(--mute);margin-bottom:16px;max-width:64ch}
.svc-aside{background:var(--panel);border:1px solid var(--line);padding:28px 26px}
.svc-aside h4{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.82rem;color:var(--red);margin-bottom:14px}
.svc-aside ul{list-style:none}
.svc-aside li{display:flex;gap:11px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line);color:var(--mute);font-size:.95rem}
.svc-aside li:last-child{border-bottom:0}
.svc-aside li::before{content:"";flex:none;width:6px;height:6px;background:var(--red);margin-top:9px}

/* ---- SERVICES: SYMPTOM CHIPS (hero) ------------------------------------ */
/* Entry by how you feel, not by clinical service name. */
.symptoms{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;max-width:820px}
.chip{display:inline-flex;align-items:center;gap:9px;font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;letter-spacing:.1em;font-weight:600;font-size:.88rem;
  color:var(--bone);background:rgba(255,255,255,.04);border:1px solid var(--line);
  padding:11px 18px;transition:.22s;cursor:pointer}
.chip .dot{width:7px;height:7px;background:var(--red);border-radius:50%;flex:none}
@media(hover:hover){.chip:hover{border-color:var(--red);background:rgba(216,28,51,.12);transform:translateY(-2px)}}
.symptoms-label{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;
  letter-spacing:.26em;font-size:.74rem;color:var(--smoke);margin:34px 0 0;display:block}

/* ---- SERVICES: THE JOURNEY --------------------------------------------- */
/* Waypoint numerals + bridges carry the journey. */
.journey{position:relative}

/* sticky progress rail, desktop only */
.rail{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:600;
  display:flex;flex-direction:column;gap:14px;opacity:0;visibility:hidden;transition:.3s}
.rail.show{opacity:1;visibility:visible}
.rail a{display:flex;align-items:center;gap:10px;text-decoration:none;justify-content:flex-end}
.rail .rl{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.12em;
  font-size:.7rem;color:var(--smoke);opacity:0;transform:translateX(6px);transition:.22s;white-space:nowrap}
.rail .rd{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--smoke);background:transparent;transition:.22s;flex:none}
.rail a:hover .rl{opacity:1;transform:none}
.rail a.on .rd{background:var(--red);border-color:var(--red);box-shadow:0 0 0 4px rgba(216,28,51,.22)}
.rail a.on .rl{opacity:1;transform:none;color:var(--bone)}

/* journey waypoint marker between sections */
.waypoint{position:relative;display:flex;justify-content:center;padding:0}
.waypoint::before,.waypoint::after{content:"";width:2px;height:26px;background:var(--line);position:absolute;left:50%;transform:translateX(-50%)}
.waypoint::before{top:0}
.waypoint::after{bottom:0}
.waypoint.lit::before,.waypoint.lit::after{background:var(--red)}
.waypoint .wnum{position:relative;z-index:6;display:flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:50%;background:var(--black);border:2px solid var(--line);
  font-family:'Archivo',sans-serif;font-weight:900;font-size:1.05rem;color:var(--smoke);
  transition:.35s;margin:34px 0}
.waypoint.lit .wnum{border-color:var(--red);color:#fff;background:var(--red);
  box-shadow:0 0 0 7px rgba(216,28,51,.15),0 8px 26px rgba(216,28,51,.4)}
.waypoint.light-bg .wnum{background:var(--paper);border-color:var(--line-lt);color:#8a8f98}
.waypoint.light-bg.lit .wnum{background:var(--red);border-color:var(--red);color:#fff}

/* connective transition copy between sections */
.bridge{text-align:center;padding:10px 0 40px;position:relative;z-index:6}
.bridge p{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.18em;
  font-size:1.15rem;font-weight:600;color:var(--mute)}
.bridge p b{color:var(--red);font-weight:700}
.svcblock.light + .waypoint .wnum{background:var(--paper)}

@media(max-width:1240px){.rail{display:none}}
@media(max-width:760px){
  .waypoint .wnum{width:44px;height:44px;font-size:.9rem}
  .symptoms .chip{font-size:.8rem;padding:9px 14px}
}

/* ---- SERVICES INDEX ----------------------------------------------------- */
/* Ten tiles directly under the hero so the whole offering is visible without
   scrolling. Replaces the old sticky jump bar: same jump-to-section job, but
   it shows WHAT the services are instead of just listing labels. */
.svcindex{background:var(--ink);padding:64px 0 64px;border-top:1px solid var(--line)}
.ix-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.ix{display:flex;flex-direction:column;gap:6px;background:var(--panel);border:1px solid #2e343d;
  padding:18px 16px 16px;transition:.2s;position:relative;min-height:112px}
.ix .n{font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.18em;font-size:.68rem;color:var(--red)}
.ix h3{font-family:'Archivo',sans-serif;font-weight:800;font-size:.98rem;line-height:1.12;text-transform:uppercase;letter-spacing:-.01em}
.ix span.t{font-family:'Inter',sans-serif;font-size:.78rem;color:var(--smoke);line-height:1.4;margin-top:auto}
@media(hover:hover){.ix:hover{border-color:var(--red);background:var(--panel);transform:translateY(-2px)}}
.ix.major h3{font-size:1.06rem}
@media(max-width:1100px){.ix-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.ix-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .ix{min-height:96px;padding:14px 13px}
  .ix h3{font-size:.9rem}.ix span.t{font-size:.72rem}}

/* ---- SERVICES: TIER 1 BLOCKS (no imagery) ------------------------------ */
/* Full-width typographic sections. The oversized outlined numeral bleeding off
   the right edge is the graphic device that replaces a photo, so these read as
   designed rather than as a band with a missing image. */
.svcblock{position:relative;overflow:hidden;scroll-margin-top:110px;padding:76px 0}
.svcblock .wrap{position:relative;z-index:2}
.svcblock .head{max-width:70ch;margin-bottom:24px}
.svcblock h2{font-size:clamp(1.8rem,3.6vw,2.9rem);margin:8px 0 0}
.svcblock .grid{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:start}
.svcblock .grid p{font-size:1.06rem;line-height:1.7;margin-bottom:15px;max-width:62ch}
.svcblock .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.svcblock.dark{background:var(--black)}
.svcblock.dark .grid p{color:var(--mute)}

.svcblock.light{background:var(--paper);color:#12141a}
.svcblock.light h2{color:#0f1116}
.svcblock.light .grid p{color:#3c414a}
.svcblock.light .kick{color:var(--red-deep)}
.svcblock.light .inc li{color:#3c414a;border-color:var(--line-lt)}
.svcblock.light .inc h4{color:var(--red-deep)}
.svcblock.light .legal-sm{color:#6b7079}

/* inclusion list, single column in the narrower right rail */
.inc{background:rgba(255,255,255,.02);border-left:2px solid var(--red);padding:4px 0 4px 20px}
.svcblock.light .inc{background:rgba(15,17,22,.03)}
.inc h4{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;color:var(--red);margin-bottom:10px}
.inc ul{list-style:none}
.inc li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line);color:var(--mute);font-size:.94rem}
.inc li:last-child{border-bottom:0}
.inc li::before{content:"";flex:none;width:5px;height:5px;background:var(--red);margin-top:9px}

/* ---- SERVICES SUB-HERO WITHOUT A PHOTO --------------------------------- */
.subhero.noimg{background:
  radial-gradient(120% 90% at 78% 12%, rgba(216,28,51,.16), transparent 58%),
  repeating-linear-gradient(122deg, rgba(255,255,255,.022) 0 1px, transparent 1px 13px),
  linear-gradient(180deg, #0d1015 0%, var(--black) 100%)}

/* ---- SERVICES: TIER 3 QUICK GRID --------------------------------------- */
.quick{background:var(--paper);color:#12141a}
.quick .center h2{color:#0f1116}
.quick .center p{color:#4e535c}
.quick .kick{color:var(--red-deep)}
.qgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.qcard{background:#fff;border:1px solid var(--line-lt);padding:24px 22px;display:flex;flex-direction:column;scroll-margin-top:110px;transition:.25s;position:relative}
.qcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red);transform:scaleY(0);transform-origin:top;transition:transform .3s}
@media(hover:hover){.qcard:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(15,17,22,.13)}.qcard:hover::before{transform:scaleY(1)}}
.qcard .qn{font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.2em;font-size:.72rem;color:var(--red-deep);margin-bottom:10px}
.qcard h3{font-size:1.24rem;line-height:1.1;color:#0f1116;margin-bottom:10px}
.qcard p{color:#4e535c;font-size:.93rem;line-height:1.6;margin-bottom:14px}
.qcard ul{list-style:none;margin-top:auto}
.qcard li{display:flex;gap:9px;align-items:flex-start;padding:5px 0;color:#5a5f68;font-size:.86rem}
.qcard li::before{content:"";flex:none;width:5px;height:5px;background:var(--red);margin-top:8px}
.qcard .qlink{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-weight:700;font-size:.82rem;color:var(--red-deep);margin-top:14px}

/* ---- SERVICES: TIER 2 ROWS --------------------------------------------- */
.tier2{background:var(--black)}
.t2row{display:grid;grid-template-columns:auto 1fr;gap:30px;padding:34px 0;border-top:1px solid var(--line);scroll-margin-top:110px}
.t2row:last-child{border-bottom:1px solid var(--line)}
.t2row .t2n{font-family:'Archivo',sans-serif;font-weight:900;font-size:2.4rem;line-height:1;color:transparent;-webkit-text-stroke:1px var(--smoke)}
.t2row h3{font-size:clamp(1.5rem,2.8vw,2.1rem);margin-bottom:14px}
.t2row p{color:var(--mute);margin-bottom:12px;max-width:70ch}
.t2row .t2foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px}
.t2row .t2foot span{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;color:var(--smoke);border:1px solid var(--line);padding:5px 11px}

@media(max-width:1000px){
  .svcblock .grid{grid-template-columns:1fr;gap:32px}
  .svcblock{padding:74px 0}
  .qgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .qgrid{grid-template-columns:1fr}
  .t2row{grid-template-columns:1fr;gap:10px;padding:34px 0}
  .t2row .t2n{font-size:1.6rem}
}

/* ---- VIDEO WALL (signature content block) ------------------------------- */
.vids{background:var(--ink)}
.vid-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:36px}
.vid-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.vidcard{position:relative;overflow:hidden;aspect-ratio:9/14;display:flex;align-items:flex-end;cursor:pointer;border:1px solid var(--line);background:var(--panel);text-align:left;color:inherit;padding:0;width:100%;font:inherit}
.vidcard .bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;transition:transform .6s,filter .6s;filter:grayscale(.35)}
.vidcard::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(8,9,11,.95) 10%,rgba(8,9,11,.25) 62%)}
@media(hover:hover){.vidcard:hover .bg{transform:scale(1.05);filter:grayscale(0)}.vidcard:hover{border-color:var(--red)}}
.vidcard .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;width:clamp(38px,20%,68px);aspect-ratio:1;height:auto;border-radius:50%;background:rgba(216,28,51,.94);display:flex;align-items:center;justify-content:center;transition:.25s;box-shadow:0 6px 22px rgba(0,0,0,.5)}
.vidcard .play svg{width:36%;height:36%}
.vidcard:hover .play{transform:translate(-50%,-50%) scale(1.08)}
.vidcard .vb{position:relative;z-index:2;padding:22px}
.vidcard .vb .nm{font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;font-size:1.05rem;line-height:1.1}
.vidcard .vb .rl{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.12em;color:var(--red);font-size:.76rem;margin-top:5px;display:block}

/* video lightbox */
.lightbox{position:fixed;inset:0;z-index:2100;background:rgba(4,5,6,.92);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:.25s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox .lb-inner{position:relative;width:100%;max-width:420px;aspect-ratio:9/16;background:#000;border:1px solid var(--line)}
.lightbox .lb-inner iframe,.lightbox .lb-inner video{width:100%;height:100%;border:0;display:block;object-fit:contain;background:#000}
.lightbox .lb-x{position:absolute;top:-46px;right:0;background:none;border:0;color:var(--bone);font-size:2rem;line-height:1;cursor:pointer;transition:.2s}
.lightbox .lb-x:hover{color:var(--red)}
.lb-note{position:absolute;bottom:-40px;left:0;right:0;text-align:center;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;color:var(--smoke)}

/* ---- MEET THE TEAM ------------------------------------------------------ */
.team{background:var(--black)}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.teamcard{background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;transition:.25s;overflow:hidden}
@media(hover:hover){.teamcard:hover{border-color:var(--red);transform:translateY(-4px)}}
.teamcard .photo{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink)}
.teamcard .photo .bg{position:absolute;inset:0;background-size:cover;background-position:center top;filter:grayscale(.55) contrast(1.05);transition:transform .6s,filter .6s}
@media(hover:hover){.teamcard:hover .photo .bg{filter:grayscale(0);transform:scale(1.04)}}
.teamcard .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(22,26,33,.92) 2%,transparent 42%)}
.teamcard .since{position:absolute;top:16px;left:16px;z-index:3;background:var(--red);color:#fff;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-weight:700;font-size:.7rem;padding:6px 12px}
.teamcard .tbody{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.teamcard h3{font-size:1.32rem;line-height:1.05}
.teamcard .cred{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.18em;font-size:.76rem;color:var(--red);font-weight:700;margin:7px 0 13px}
.teamcard p{color:var(--mute);font-size:.95rem;line-height:1.6;margin-bottom:12px}
.teamcard .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:8px}
.teamcard .tags span{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--smoke);border:1px solid var(--line);padding:5px 10px}
.teamcard blockquote{border-left:2px solid var(--red);padding-left:14px;margin:0 0 12px;color:var(--bone);font-style:italic;font-size:.95rem;line-height:1.55}

/* ---- YOUR FIRST CALL (Hillary, patient coordinator) -------------------- */
/* A wide two-column card under the provider grid. Warm, not clinical: this
   is the friendly voice new patients reach, so it reads apart from the
   provider cards on purpose. */
.first-call{display:grid;grid-template-columns:300px 1fr;gap:0;margin-top:26px;
  background:var(--panel);border:1px solid var(--line);overflow:hidden}
.first-call .fc-photo{position:relative;min-height:280px;background:var(--ink)}
.first-call .fc-photo .bg{position:absolute;inset:0;background-size:cover;background-position:center top;filter:grayscale(.35) contrast(1.03)}
.first-call .fc-body{padding:34px 36px;display:flex;flex-direction:column;justify-content:center}
.first-call .fc-body h3{font-size:1.7rem;line-height:1.05;margin:4px 0 2px}
.first-call .fc-body .cred{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;color:var(--red);font-weight:700;margin-bottom:14px}
.first-call .fc-body p{color:var(--mute);font-size:1rem;line-height:1.65;margin-bottom:20px;max-width:60ch}
.first-call .fc-actions{display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:720px){
  .first-call{grid-template-columns:1fr}
  .first-call .fc-photo{min-height:300px;aspect-ratio:4/3}
  .first-call .fc-body{padding:28px 24px}
}


/* ---- MEMBERSHIP CTA BAND ------------------------------------------------ */
.ctaband{background:var(--red);color:#fff;text-align:center}
.ctaband h2{font-size:clamp(2rem,4.4vw,3.4rem);line-height:.94}
.ctaband p{font-size:1.1rem;margin:18px auto 26px;max-width:56ch;opacity:.95}
.ctaband .btn{background:#fff;border-color:#fff;color:var(--red)}
.ctaband .btn:hover{background:transparent;color:#fff;border-color:#fff}
.ctaband .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.ctaband .btn.ghost:hover{background:#fff;color:var(--red);border-color:#fff}
.memb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:34px auto 30px;max-width:980px;text-align:left}
.memb-grid div{background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.22);padding:18px 18px}
.memb-grid b{display:block;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;margin-bottom:5px;opacity:.85}
.memb-grid span{font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;font-size:1.02rem;line-height:1.15;display:block}

/* ---- REVIEWS ------------------------------------------------------------ */
.reviews{background:var(--black)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.rev{background:var(--panel);border:1px solid var(--line);padding:28px 26px;display:flex;flex-direction:column}
.rev .s{color:var(--red);letter-spacing:3px;margin-bottom:12px;font-size:1rem}
.rev p{color:var(--mute);font-size:1rem;line-height:1.6;margin-bottom:18px}
.rev .w{font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;font-size:.92rem;margin-top:auto}
.rev .w small{display:block;font-family:'Inter',sans-serif;font-weight:400;text-transform:none;letter-spacing:0;color:var(--smoke);font-size:.8rem;margin-top:3px}
.rating-badge{display:inline-flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);padding:14px 22px;margin-top:6px}
.rating-badge .num{font-family:'Archivo',sans-serif;font-weight:900;font-size:2.1rem;color:var(--red);line-height:1}
.rating-badge .meta{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;color:var(--smoke);text-align:left;line-height:1.4}
.rating-badge .meta b{display:block;color:var(--bone);font-weight:700}

/* ---- ACCORDION (FAQ) ---------------------------------------------------- */
.faq{background:var(--ink)}
.accordion{max-width:820px;margin:0 auto}
.acc-item{border:1px solid var(--line);background:var(--black);margin-bottom:12px;transition:border-color .25s}
.acc-item.open{border-color:var(--red)}
.acc-head{width:100%;background:none;border:0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:21px 26px;text-align:left;color:var(--bone)}
.acc-q{font-family:'Inter',sans-serif;font-weight:600;font-size:1.05rem;line-height:1.35}
.acc-ic{position:relative;width:18px;height:18px;flex:none}
.acc-ic::before,.acc-ic::after{content:"";position:absolute;background:var(--red);transition:transform .3s}
.acc-ic::before{top:8px;left:0;width:18px;height:2px}
.acc-ic::after{top:0;left:8px;width:2px;height:18px}
.acc-item.open .acc-ic::after{transform:scaleY(0)}
.acc-body{height:0;overflow:hidden;transition:height .35s ease}
.acc-inner{padding:0 26px 24px}
.acc-inner p{color:var(--mute);font-size:1rem;line-height:1.65;max-width:64ch;margin-bottom:12px}
.acc-inner p:last-child{margin-bottom:0}

/* ---- MAP / LOCATION ----------------------------------------------------- */
.maparea{background:var(--black)}
.map-grid{display:grid;grid-template-columns:1fr 1.45fr;border:1px solid var(--line)}
.map-info{padding:54px 46px;background:var(--panel);display:flex;flex-direction:column;justify-content:center}
.map-info h3{font-size:2rem;margin:6px 0 20px}
.map-info .row{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px;color:var(--mute)}
.map-info .row svg{flex:none;margin-top:3px;color:var(--red)}
.map-info .row b{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--bone);display:block;font-size:.8rem;margin-bottom:2px}
.map-info .row a:hover{color:var(--red)}
#map{height:560px;width:100%;background:var(--black);position:relative}
#map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;filter:grayscale(.2) contrast(1.05)}
.map-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(circle at 30% 20%,rgba(216,28,51,.09),transparent 42%),repeating-linear-gradient(0deg,#0e1015 0 39px,transparent 39px 40px),repeating-linear-gradient(90deg,#0e1015 0 39px,transparent 39px 40px),var(--black);text-decoration:none}
.map-fallback .mf-pin{animation:bob 2.4s ease-in-out infinite;filter:drop-shadow(0 6px 12px rgba(216,28,51,.55))}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.map-fallback .mf-label{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.16em;font-weight:700;font-size:.92rem;border-bottom:1px solid var(--red);padding-bottom:3px}
.leaflet-container{background:var(--black)}
/* CARTO dark tiles are very dark against a near-black page. Lift only the
   TILE pane so roads and labels read, while the red marker and the zoom
   controls keep their true colour. Adjust brightness to taste, or swap the
   tile URL in js/main.js for a lighter basemap. */
.leaflet-tile-pane{filter:brightness(2.1) contrast(1.08) saturate(.9)}
.leaflet-control-attribution{background:rgba(8,9,11,.75)!important;color:#666!important}
.leaflet-control-attribution a{color:#888!important}
.leaflet-bar a{background:var(--panel)!important;color:var(--bone)!important;border-color:var(--line)!important}
.leaflet-bar a:hover{background:var(--red)!important}

/* ---- CONTACT: two paths ------------------------------------------------- */
.paths{background:var(--ink)}
.path-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.path{background:var(--panel);border:1px solid var(--line);padding:40px 38px;display:flex;flex-direction:column}
.path .kick{margin-bottom:10px}
.path h3{font-size:1.9rem;margin-bottom:12px}
.path p{color:var(--mute);margin-bottom:20px;font-size:1rem}
.path>.btn{align-self:flex-start;margin-top:auto}
.path .btn.submit{align-self:stretch;margin-top:4px}
.path ul{list-style:none;margin-bottom:22px}
.path li{display:flex;gap:11px;align-items:flex-start;padding:7px 0;color:var(--mute);font-size:.96rem}
.path li::before{content:"";flex:none;width:6px;height:6px;background:var(--red);margin-top:9px}

/* ---- FORM --------------------------------------------------------------- */
.field{margin-bottom:14px}
.field label{display:block;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;color:var(--smoke);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;background:var(--black);border:1px solid var(--line);color:var(--bone);padding:13px 14px;font-family:'Inter',sans-serif;font-size:1rem;transition:.2s;border-radius:0}
.field textarea{resize:vertical;min-height:96px}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--red)}
.field.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field.row2 label{margin-bottom:6px}

/* optional/helper label tag */
.field label .opt{font-family:'Inter',sans-serif;text-transform:none;letter-spacing:0;font-size:.72rem;color:var(--smoke);opacity:.7;font-weight:400;margin-left:6px}

/* date input: normalize the native picker on dark bg */
.field input[type="date"]{color:var(--bone);font-family:'Inter',sans-serif}
.field input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(.7);cursor:pointer}
.field input[type="date"]::-webkit-datetime-edit{color:var(--bone)}
.field input[type="date"]:invalid::-webkit-datetime-edit,
.field input[type="date"]:not(:focus):placeholder-shown{color:var(--smoke)}

/* ---- SERVICE CHECKBOXES ------------------------------------------------- */
/* Two-column tap targets, brand-styled. Each is a full clickable chip so it's
   easy on mobile. Checked state fills red. */
.svc-checks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.svc-check{display:flex;align-items:center;cursor:pointer;
  background:var(--black);border:1px solid var(--line);padding:11px 14px;
  transition:border-color .18s,background .18s;user-select:none;margin:0}
/* hide the native checkbox but keep it operable */
.svc-check input{position:absolute;opacity:0;width:0;height:0;margin:0}
/* the visible chip: a REAL element, always rendered (not a ::before) */
.svc-check .box{flex:0 0 18px;width:18px;height:18px;border:1.5px solid var(--smoke);
  background:transparent;display:inline-flex;align-items:center;justify-content:center;
  transition:background .18s,border-color .18s}
.svc-check .box svg{width:11px;height:11px;opacity:0;transition:opacity .18s}
/* the text, spaced away from the chip */
.svc-check .lbl{margin-left:13px;font-family:'Inter',sans-serif;font-size:.9rem;
  color:var(--bone);text-transform:none;letter-spacing:0;line-height:1.2}
/* selected state */
.svc-check:has(input:checked){border-color:var(--red);background:rgba(216,28,51,.10)}
.svc-check:has(input:checked) .box{background:var(--red);border-color:var(--red)}
.svc-check:has(input:checked) .box svg{opacity:1}
@media(hover:hover){.svc-check:hover{border-color:var(--red)}}
.svc-check:has(input:focus-visible){outline:2px solid var(--red);outline-offset:2px}

@media(max-width:560px){.svc-checks{grid-template-columns:1fr}}

.formcard{background:var(--panel);border:1px solid var(--line);padding:34px 32px}
.err{color:var(--red);font-size:.88rem;margin:-2px 0 12px;display:none}
.legal-sm{color:var(--smoke);font-size:.78rem;margin-top:12px;line-height:1.5}

/* ---- MODAL -------------------------------------------------------------- */
.modal-overlay{position:fixed;inset:0;z-index:2000;background:rgba(4,5,6,.85);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:.25s}
.modal-overlay.open{opacity:1;visibility:visible}
.modal{background:var(--ink);border:1px solid var(--line);max-width:520px;width:100%;padding:38px 34px;position:relative;transform:translateY(20px);transition:.3s;text-align:left;max-height:90vh;overflow-y:auto}
.modal-overlay.open .modal{transform:none}
.modal-x{position:absolute;top:14px;right:16px;background:none;border:0;color:var(--smoke);font-size:1.8rem;cursor:pointer;line-height:1;transition:.2s}
.modal-x:hover{color:var(--red)}
.modal .flag{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.14em;background:var(--red);color:#fff;padding:6px 14px;font-size:.82rem;margin-bottom:12px}
.modal h3{font-size:1.8rem;margin-bottom:8px}
.modal .modal-sub{color:var(--smoke);font-size:.95rem;margin-bottom:20px}
.modal .modal-sub .em{color:var(--bone);font-weight:600}
.modal .check{width:72px;height:72px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.modal .or{display:flex;align-items:center;gap:14px;margin:20px 0 4px;color:var(--smoke);font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:.74rem}
.modal .or::before,.modal .or::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---- STICKY ACTION BAR (always visible, all breakpoints) ---------------- */
.action-bar{position:fixed;left:0;right:0;bottom:0;z-index:900;display:flex;background:rgba(8,9,11,.98);border-top:1px solid var(--line);box-shadow:0 -8px 30px rgba(0,0,0,.55)}
.action-bar a,.action-bar button{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;padding:18px 12px;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-weight:700;font-size:.95rem;background:transparent;border:0;border-right:1px solid var(--line);color:var(--bone);cursor:pointer;transition:.2s;font-family:'Barlow Condensed',sans-serif}
.action-bar a:last-child,.action-bar button:last-child{border-right:0}
.action-bar a:hover,.action-bar button:hover{background:var(--panel);color:var(--red)}
.action-bar .primary{background:var(--red);color:#fff}
.action-bar .primary:hover{background:var(--red-deep);color:#fff}
.action-bar svg{flex:none}
.action-bar .lbl-full{display:inline}
.action-bar .lbl-short{display:none}

/* ---- FOOTER ------------------------------------------------------------- */
footer.site{background:var(--ink);padding:70px 0 30px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;margin-bottom:44px}
.foot-grid>div:first-child img{height:66px;width:auto;margin-bottom:18px}
.foot-grid p{color:var(--smoke);max-width:40ch;font-size:.95rem}
.foot-col h4{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:.82rem;color:var(--red);margin-bottom:16px}
.foot-col a,.foot-col p{display:block;color:var(--mute);margin-bottom:10px;transition:.2s;font-size:.95rem}
.foot-col a:hover{color:var(--red)}
.socials{display:flex;gap:11px;margin-top:16px}
.socials a{width:42px;height:42px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:.25s}
.socials a:hover{background:var(--red);border-color:var(--red)}
.legal{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;color:var(--smoke);font-size:.82rem}
.legal a:hover{color:var(--red)}
.disclaimer{color:var(--smoke);font-size:.8rem;line-height:1.6;margin-top:18px;max-width:90ch}

/* ---- MOTION ------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
.kenburns{animation:ken 20s ease-in-out infinite alternate}
@keyframes ken{from{transform:scale(1)}to{transform:scale(1.1)}}

/* ---- RESPONSIVE --------------------------------------------------------- */
@media(max-width:1100px){
  /* .vid-grid deliberately stays at 4 columns here. Dropping it to 2 produced
     500px-wide poster cards on tablets, which is what made the play button
     look out of proportion. It goes to 2 columns at the mobile breakpoint. */
  .team-grid{grid-template-columns:1fr 1fr}
  .router-grid{grid-template-columns:1fr 1fr}
  .memb-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:1000px){
  .feature{grid-template-columns:1fr}
  .feature .media{min-height:56vh}
  .feature.reverse .media{order:0}
  .feature .copy{padding:64px 30px}
  .map-grid{grid-template-columns:1fr}
  .statstrip .inner{grid-template-columns:1fr 1fr}
  .statstrip .c:nth-child(2){border-right:0}
  .rev-grid{grid-template-columns:1fr}
  .svc-body{grid-template-columns:1fr;gap:26px}
  .path-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  nav.links{position:fixed;inset:0 0 0 auto;width:84%;max-width:340px;background:var(--ink);flex-direction:column;align-items:flex-start;justify-content:center;gap:20px;padding:40px;transform:translateX(100%);transition:.35s;border-left:1px solid var(--line);overflow-y:auto}
  nav.links.open{transform:none}
  nav.links a{font-size:1.15rem}
  .burger{display:flex}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .pad{padding:74px 0}
  .pad-sm{padding:54px 0}
  .subhero{padding:150px 0 60px}
  .router-grid{grid-template-columns:1fr}
  .vid-grid{grid-template-columns:1fr 1fr;gap:10px}
  .team-grid{grid-template-columns:1fr}
  /* At a 390px viewport each video card is roughly 160px wide, so the 66px
     desktop play button covered 40% of it. Scale the button and the card
     chrome down to match. */
  .vidcard .play{box-shadow:0 4px 14px rgba(0,0,0,.5)}
  .vidcard .vb{padding:14px 13px}
  .vidcard .vb .nm{font-size:.86rem;line-height:1.15}
  .vidcard .vb .rl{font-size:.66rem;letter-spacing:.1em;margin-top:4px}
  .memb-grid{grid-template-columns:1fr}
  .prow{grid-template-columns:44px 1fr;gap:14px;padding:24px 0}
  .prow .arrow{display:none}
  .foot-grid{grid-template-columns:1fr;gap:30px}
  .hero .badges{display:none}
  .hero{align-items:flex-end;padding:96px 0 12vh}  /* phones stay bottom-anchored */
  .hero h1{font-size:clamp(2.6rem,11.7vw,4rem);margin-bottom:20px}
  .hero .sub{font-size:1.06rem;margin-bottom:28px}
  .map-info{padding:38px 26px}
  #map{height:400px}
  .field.row2{grid-template-columns:1fr}
  .formcard{padding:26px 22px}
  .path{padding:30px 26px}
  .action-bar a,.action-bar button{padding:15px 8px;font-size:.85rem;letter-spacing:.1em}
  .action-bar .lbl-full{display:none}
  .action-bar .lbl-short{display:inline}
  body{padding-bottom:56px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}

/* ---- SERVICE PAGE: card grid + FAQ (hub-and-spoke pages) --------------- */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:14px}
.tier-grid .tcard{position:relative;background:var(--panel);border:1px solid var(--line);
  padding:30px 26px 28px;transition:.2s;overflow:hidden}
.tier-grid .tcard::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;
  background:var(--red);transform:scaleX(0);transform-origin:left;transition:.25s}
.tier-grid .tcard:hover{border-color:#2a2d33;transform:translateY(-2px)}
.tier-grid .tcard:hover::before{transform:scaleX(1)}
.svcblock.dark .tier-grid .tcard{background:var(--ink)}
.tier-grid .tcard h3{font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:1.42rem;letter-spacing:.01em;margin:0 0 12px;line-height:1.1;color:var(--bone)}
.tier-grid .tcard p{font-size:.98rem;line-height:1.65;color:var(--mute);margin:0 0 10px}
.tier-grid .tcard p:last-child{margin-bottom:0}
.tier-grid .tcard p b{color:var(--bone);font-weight:600}
.tier-grid .tcard a{color:var(--red);text-decoration:none}
.tier-grid .tcard a:hover{text-decoration:underline}
@media(max-width:900px){.tier-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.tier-grid{grid-template-columns:1fr}}

.faq-list{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq-list details{background:var(--ink);border:1px solid var(--line);transition:.2s}
.faq-list details[open]{border-color:#2a2d33;background:#101216}
.faq-list summary{cursor:pointer;list-style:none;padding:20px 24px;
  font-family:'Barlow Condensed',sans-serif;font-size:1.32rem;font-weight:600;letter-spacing:.01em;
  color:var(--bone);display:flex;justify-content:space-between;align-items:center;gap:16px;transition:.2s}
.faq-list summary:hover{color:#fff}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";color:var(--red);font-size:1.7rem;font-weight:300;line-height:.8;
  flex:none;transition:.25s;margin-top:-2px}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{margin:0;padding:0 24px 22px;color:var(--mute);font-size:1rem;line-height:1.72}

/* ---- bottom-of-page alignment: FAQ heading, reviewer, references all share
   the same 900px centered column as the .faq-list panels ------------------- */
.faq .head{max-width:900px;margin-left:auto;margin-right:auto}
/* reviewer + references: align their inner blocks to the same 900px column.
   The higher-specificity selector beats the inline max-width:820px. */
#reviewed .wrap > .reveal,
#references .wrap > .reveal{max-width:900px;margin-left:auto;margin-right:auto}
#references .head{max-width:900px;margin-left:auto;margin-right:auto}
.reviewed-by p{margin:0;font-size:1rem;line-height:1.6;color:var(--bone)}
.reviewed-by span{color:var(--mute);font-size:.92rem}
.ref-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.ref-list li{padding-left:18px;position:relative;line-height:1.55}
.ref-list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--red)}
.ref-list a{color:var(--mute);text-decoration:none;border-bottom:1px solid rgba(216,28,51,.35);transition:.2s}
.ref-list a:hover{color:var(--bone);border-bottom-color:var(--red)}

/* ---- service SPOKE headline: full chrome gradient across the whole H1 ----
   Service spoke pages (subhero.compact) wrap only "in Pensacola" in .chrome,
   which left the rest of the headline plain white. This makes the WHOLE
   headline carry the chrome gradient. Scoped with :not(:has(.r)) so it does
   NOT touch the services hub headline, whose h1 mixes chrome + red .r. */
.subhero.compact h1:not(:has(.r)){
  background:var(--chrome);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
/* the inner "in Pensacola" span would otherwise clip a second gradient onto
   its own box; neutralize it so the H1's single gradient runs unbroken. */
.subhero.compact h1:not(:has(.r)) .chrome{background:none;-webkit-text-fill-color:inherit;color:inherit}

/* ---- homepage signature H1 (Know the Patient / Take the Time / Change the
   Trajectory) -------------------------------------------------------------
   Three phrases stacked. Sized down from the old two-word hero H1 so the
   longest line fits on desktop, and tightened line-height for a stacked
   block. The .chrome span already clones the gradient per line via
   box-decoration-break, so each phrase gets its own full gradient. */
.hero h1.sig{font-size:clamp(2.1rem,5vw,4.3rem);line-height:1.04;letter-spacing:-.02em}
@media(max-width:760px){.hero h1.sig{font-size:clamp(1.8rem,7.5vw,2.9rem)}}


/* ---- AWARDS / RECOGNITION ------------------------------------------------
   Award graphics on a light panel so the print-style badges read cleanly.
   Used on the About "Recognition" band and (small) in the homepage hero. */
.recognition{background:var(--paper);color:#12141a}
.recognition .head h2{color:#0f1116}
.rec-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:900px;margin:26px auto 0;align-items:center}
.rec-item{background:#fff;border:1px solid #d5d9df;padding:26px 28px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.rec-item img{width:100%;height:auto;max-height:130px;object-fit:contain}
.rec-item .rec-cap{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;font-weight:700;color:#4e535c;line-height:1.4}
.rec-item .rec-cap b{display:block;color:#0f1116;font-size:.92rem}
@media(max-width:760px){.rec-grid{grid-template-columns:1fr;gap:18px}}

/* small award badge in the hero badges row (image pill, matches text pills) */
.hero .badges .b.award{align-items:center}
.hero .badges .b.award img{height:34px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}


/* ---- LEGAL / LONG-FORM PAGES (privacy, HIPAA notice, accessibility) ------ */
.legal-body{max-width:800px;margin:0 auto;color:var(--mute);font-size:1.02rem;line-height:1.75}
.legal-body .eff{color:var(--smoke);font-size:.92rem;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.legal-body h2{font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;color:var(--bone);font-size:clamp(1.3rem,2.4vw,1.7rem);letter-spacing:-.01em;margin:36px 0 12px}
.legal-body h3{color:var(--bone);font-size:1.1rem;font-weight:700;margin:22px 0 8px}
.legal-body p{margin:0 0 15px}
.legal-body ul{margin:0 0 18px;padding-left:22px}
.legal-body li{margin-bottom:9px}
.legal-body a{color:var(--red)}
.legal-body a:hover{text-decoration:underline}
.legal-body strong{color:var(--bone)}
.legal-body .contact-block{color:var(--bone);line-height:1.9;background:var(--panel);border:1px solid var(--line);padding:20px 24px;margin-top:12px}

/* ---- FIRST-CALL TEXT-ONLY VARIANT (Hillary, no photo) -------------------- */
.first-call.no-photo{grid-template-columns:1fr}
.first-call.no-photo .fc-body{padding:38px 40px}
.first-call.no-photo .fc-body p{max-width:70ch}