:root{
  --teal:#1cade0;        /* brand Primary Teal */
  --teal-deep:#178fbd;   /* darker teal for links/buttons/text */
  --teal-ink:#0d4f66;    /* darkest teal for dark sections */
  --clay:#f47209;        /* brand Primary Orange */
  --clay-deep:#cf6108;
  --charcoal:#53575A;    /* brand Charcoal */
  --ink:#231F20;         /* brand Black for body text */
  --ink-soft:#53575A;    /* brand Charcoal for soft text */
  --bg:#ffffff;
  --bg-cool:#e9f7fc;     /* light teal section */
  --bg-warm:#fbf7f2;
  --line:#cfe7f1;        /* teal-tinted hairline */
  --teal-tint:#ddf4fb;
  --r:6px;
  --shadow:0 2px 10px rgba(13,79,102,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"gravita-geo-variable",system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"gravita-geo-variable",system-ui,sans-serif;color:var(--teal-ink);font-weight:700;line-height:1.18;margin:0}
/* Gravita for big display section titles (brand headline font) */
.sec-head h2,.welcome h2,.loc h2,.final h2,.promise p{font-family:"gravita-geo-variable",system-ui,sans-serif;font-weight:700;letter-spacing:-.005em;line-height:1.18}
a{color:var(--teal-deep);text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.eyebrow{font-family:"gravita-geo-variable";font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep)}
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:"gravita-geo-variable";font-weight:700;font-size:.98rem;border-radius:var(--r);padding:.7em 1.3em;cursor:pointer;border:2px solid transparent;transition:background .15s,color .15s,border-color .15s}
.btn-primary{background:var(--clay);color:#fff}
.btn-primary:hover{background:var(--clay-deep)}
.btn-teal{background:var(--teal-deep);color:#fff}
.btn-teal:hover{background:var(--teal-ink)}
.btn-ghost{background:#fff;color:var(--teal-deep);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--teal-deep)}
.arrow{font-weight:700}

/* utility bar */
.util{background:var(--teal);color:#fff;font-size:.82rem;font-weight:600}
.util .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px 24px;flex-wrap:wrap}
.util a{color:#fff}.util a:hover{color:#eafaff;text-decoration:underline}
.util .calls{display:flex;gap:18px;flex-wrap:wrap}.util .calls b{color:#fff}
.util .links{display:flex;gap:16px}

/* header */
header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0}
.logo img{height:58px;width:auto}
nav.menu{display:flex;gap:20px;align-items:stretch}
.navitem{position:relative;display:flex;align-items:center}
.navtop{font-weight:500;font-size:.95rem;color:var(--ink);padding:22px 0;border-bottom:3px solid transparent;transition:border-color .15s,color .15s;display:inline-flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap}
.navitem:hover>.navtop,.navitem:focus-within>.navtop{color:var(--teal-deep);border-color:var(--teal)}
.dropdown{position:absolute;top:100%;left:0;min-width:250px;background:#fff;border:1px solid var(--line);border-radius:0 0 var(--r) var(--r);overflow:hidden;box-shadow:0 16px 32px rgba(13,79,102,.16);padding:8px 0;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s,transform .15s,visibility .15s;z-index:50}
.navitem.has-drop:hover .dropdown,.navitem.has-drop:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:block;padding:10px 20px;font-size:.92rem;font-weight:400;color:var(--ink);border:0;white-space:nowrap}
.dropdown a:hover{background:var(--teal-tint);color:var(--teal-deep)}
.dropdown a.feat{color:var(--teal-deep)}

@media(max-width:980px){
  /* back bar that heads every drilled-in pane */
  .m-back{display:flex;align-items:center;gap:10px;width:100%;padding:14px 24px;
    background:var(--bg-cool);border:0;border-bottom:1px solid var(--line);
    font-family:"gravita-geo-variable";font-weight:700;font-size:.95rem;color:var(--teal-deep);
    text-align:left;cursor:pointer}
  .m-back i{flex:0 0 auto;width:9px;height:9px;border-left:2px solid currentColor;
    border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:2px}
  .m-overview{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;
    border-bottom:1px solid var(--line);font-weight:700;color:var(--teal-deep)}
}
@media(min-width:981px){.m-back,.dropdown a.m-overview{display:none}}

/* deep-linked list items get a highlight so a menu jump lands somewhere obvious */
.cond-list li,.cond-cat-main h3{scroll-margin-top:120px}
.cond-list li:target{background:var(--teal-tint);box-shadow:-10px 0 0 var(--teal-tint),0 0 0 1px var(--teal-tint);
  border-radius:3px;font-weight:600;color:var(--teal-deep)}
.nav-cta{display:flex;align-items:center;gap:12px}
.nav-appt-mobile{display:none}
.menu-toggle{display:inline-flex;flex-direction:column;justify-content:center;background:none;border:0;cursor:pointer;padding:6px}
.menu-toggle span{display:block;width:25px;height:2.5px;background:var(--teal-ink);margin:3px 0;border-radius:2px;transition:background .15s}
.menu-toggle:hover span{background:var(--teal-deep)}

/* slide-in drawer */
.drawer-overlay{position:fixed;inset:0;background:rgba(13,79,102,.45);z-index:60;opacity:0;transition:opacity .25s}
.drawer-overlay.open{opacity:1}
.drawer{position:fixed;top:0;right:0;height:100%;width:400px;max-width:88vw;background:#fff;z-index:61;
  transform:translateX(100%);transition:transform .28s ease;overflow-y:auto;padding:20px 28px 40px;
  box-shadow:-12px 0 40px rgba(13,79,102,.18);display:flex;flex-direction:column}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin:-4px -6px 18px 0}
.drawer-logo{height:46px;width:auto}
.drawer-close{background:none;border:0;font-size:2rem;line-height:1;color:var(--teal-ink);cursor:pointer;padding:0 6px}
.drawer-close:hover{color:var(--clay)}
.drawer-nav{display:none;flex-direction:column;border-top:1px solid var(--line);margin-bottom:22px}
.drawer-nav a{padding:13px 2px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)}
.drawer-nav a:hover{color:var(--teal-deep)}
.drawer-h{font-size:1.5rem;color:var(--teal-ink);margin:0 0 14px}
.drawer-h.sm{font-size:1.15rem;margin-top:4px}
.drawer-p{color:var(--ink-soft);font-size:.95rem;margin:0 0 14px}
.drawer-note{color:var(--ink-soft);font-size:.85rem;margin:14px 0 0}
.drawer-btn{display:flex;width:100%;justify-content:space-between;align-items:center;margin-bottom:10px}
.drawer-contact{list-style:none;margin:0;padding:0}
.drawer-contact li{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line)}
.drawer-contact li span{color:var(--ink-soft);font-weight:600;font-size:.9rem}
.drawer-contact li a{font-weight:700;font-size:1.05rem}
.drawer-rule{border:0;border-top:1px solid var(--line);margin:24px 0}
body.drawer-open{overflow:hidden}

/* hero */
/* Full-bleed hero. Swap --hero-img with the real photo: url('hero.jpg') */
.hero{
  /* Default hero image + framing. Paths are relative to THIS stylesheet (css/),
     so images live one level up at ../images/. Override per-page with an inline
     style: <section class="hero" style="--hero-img:url('../images/x.jpg');--hero-pos:50% 30%"> */
  --hero-img:url('../images/hero-mountain-couple.jpg');
  --hero-pos:70% 30%;
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--line);
}
/* brightened photo layer */
.hero::after{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--hero-img);background-size:cover;background-position:var(--hero-pos);
  filter:brightness(1.04) saturate(1.06);}
/* lighter, warmer legibility scrim */
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:
  radial-gradient(78% 95% at 84% 22%, rgba(255,198,132,.22), transparent 58%),
  linear-gradient(90deg, rgba(7,49,64,.84) 0%, rgba(7,49,64,.54) 40%, rgba(7,49,64,.16) 72%, rgba(28,173,224,.12) 100%),
  linear-gradient(0deg, rgba(7,49,64,.42), transparent 50%);}
.hero .wrap{position:relative;z-index:2;padding:104px 24px;min-height:540px;display:flex;flex-direction:column;justify-content:center}
/* The h1 carries the full motto, whose longest line ("Elevating function,
   alleviating pain,") needs ~970px at the size below - so the headline column
   is wider than the body copy. The lede keeps its own 46ch measure. */
.hero-inner{max-width:100%}
.hero h1,.hero p.lede{text-shadow:0 1px 12px rgba(5,36,49,.35)}
.hero .eyebrow{color:#f0c4a6}
.hero h1{font-size:clamp(1.95rem,4.6vw,3.8rem);letter-spacing:-.015em;line-height:1.18;color:#fff}
.hero p.lede{font-size:22px;color:#e2edef;margin:18px 0 28px;max-width:46ch}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap}
.hero .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.hero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.hero .ph-tag{position:absolute;right:18px;bottom:16px;z-index:1;background:rgba(36,49,55,.55);color:#fff;font-size:.74rem;font-weight:600;padding:6px 11px;border-radius:4px}

/* quick-action wayfinding bar */
.quickbar{background:#fff;border-bottom:1px solid var(--line)}
.quickbar .grid{display:grid;grid-template-columns:repeat(4,1fr)}
.qa{display:flex;align-items:center;gap:18px;padding:30px 30px;border-right:1px solid var(--line);transition:background .15s}
.qa:last-child{border-right:0}
.qa:hover{background:var(--teal-tint)}
.qa .ico{flex:none;width:58px;height:58px;border-radius:50%;background:var(--teal);display:grid;place-items:center}
.qa .ico svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2}
.qa b{display:block;font-family:"gravita-geo-variable";color:var(--teal-ink);font-size:1.22rem;font-weight:600;line-height:1.2;white-space:nowrap}
.qa span{font-size:.98rem;color:var(--ink-soft)}

/* generic section */
section.block{padding:64px 0}
.block.cool{background:var(--bg-cool);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:640px;margin:0 auto 40px;text-align:center}
.sec-head h2{font-size:clamp(1.6rem,3vw,2.3rem)}
.sec-head .eyebrow{display:block;margin-bottom:10px}
.sec-head p{color:var(--ink-soft);margin:12px 0 0}

/* welcome */
.welcome .grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.welcome-photo{aspect-ratio:5/4;border-radius:var(--r);border:1px solid var(--line);position:relative;overflow:hidden;background:linear-gradient(135deg,#e7eef0,#f0e3d6)}
/* Add class="has-img" and set the photo inline (paths are relative to this
   stylesheet, so images live one level up at ../images/):
   <div class="welcome-photo has-img" style="--welcome-img:url('../images/x.jpg');--welcome-pos:50% 40%"></div> */
.welcome-photo.has-img{background:var(--welcome-img) var(--welcome-pos,50% 50%)/cover no-repeat #e7eef0}
.welcome-photo .ph-tag,.loc-map .ph-tag{position:absolute;left:14px;bottom:14px;background:rgba(36,49,55,.6);color:#fff;font-size:.74rem;font-weight:600;padding:6px 11px;border-radius:4px}
.welcome h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.welcome p{color:var(--ink-soft);margin:16px 0}
.stat-row{display:flex;gap:32px;margin-top:24px;flex-wrap:wrap}
.stat-row .s b{font-family:"gravita-geo-variable";font-size:1.9rem;color:var(--clay);font-weight:700;display:block;line-height:1}
.stat-row .s span{font-size:.82rem;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em}

/* conditions */
.cond-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.cond{padding:24px 22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:block;transition:background .15s}
.cond:hover{background:var(--teal-tint)}
.cond h3{font-size:1.14rem;display:flex;align-items:center;gap:9px}
.cond h3 svg{width:18px;height:18px;stroke:var(--teal-deep);fill:none;stroke-width:2;flex:none}
.cond p{font-size:.92rem;color:var(--ink-soft);margin:8px 0 10px}
.cond .more{font-weight:700;font-size:.85rem;color:var(--clay)}
/* conditions carousel */
.cond-carousel{position:relative}
.cond-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 10px;scrollbar-width:none;-ms-overflow-style:none}
.cond-track::-webkit-scrollbar{display:none}
.cond-track > .cond{flex:0 0 30%;scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;
  transition:background .22s ease,border-color .22s ease,box-shadow .22s ease,transform .22s ease}
/* Card photo: add class "has-img" to the CARD and set the file inline, so both the
   photo slot and the hover wash can read it (paths resolve against this stylesheet):
   <a class="cond has-img" href="x.html" style="--cond-img:url('../images/home-page/x.png')"> */
.cond .cond-img{margin:-24px -22px 16px;height:210px;background:#e3e9ec;border-bottom:1px solid var(--line);
  transition:opacity .22s ease}
.cond.has-img .cond-img{background:var(--cond-img) var(--cond-pos,50% 50%)/cover no-repeat #e3e9ec}

/* Hover / keyboard focus: the whole card washes over in brand blue, with the photo
   showing through beneath it. Cards without a photo just take the flat gradient. */
.cond-track > .cond:hover,.cond-track > .cond:focus-visible{
  background:linear-gradient(150deg,#1cade0,#178fbd);border-color:transparent;
  box-shadow:0 14px 30px rgba(13,79,102,.24);transform:translateY(-2px);outline:none}
.cond-track > .cond.has-img:hover,.cond-track > .cond.has-img:focus-visible{
  background:linear-gradient(150deg,rgba(28,173,224,.9),rgba(23,143,189,.93)),
             var(--cond-img) var(--cond-pos,50% 50%)/cover no-repeat}
.cond-track > .cond:hover .cond-img,.cond-track > .cond:focus-visible .cond-img{opacity:0}
.cond-track > .cond:hover h3,.cond-track > .cond:focus-visible h3{color:#fff}
.cond-track > .cond:hover p,.cond-track > .cond:focus-visible p{color:#eafaff}
.cond-track > .cond:hover .more,.cond-track > .cond:focus-visible .more{color:#fff}
@media(prefers-reduced-motion:reduce){.cond-track > .cond{transition:none;transform:none}
  .cond-track > .cond:hover,.cond-track > .cond:focus-visible{transform:none}}
.cond:focus,.cond:active{outline:none}
.cond:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(28,173,224,.5),var(--shadow)}
.cond-track > .cond p{flex:1}
.cond-arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:0 5px 16px rgba(13,79,102,.18);z-index:4;transition:background .15s,border-color .15s,opacity .2s}
.cond-arrow:hover{border-color:var(--teal);background:var(--teal-tint)}
.cond-arrow svg{width:22px;height:22px;stroke:var(--teal-deep);fill:none;stroke-width:2.2}
.cond-arrow.prev{left:-22px}
.cond-arrow.next{right:-22px}
.cond-arrow:disabled{opacity:0;pointer-events:none}
/* feature / CTA band (image + teal overlay) */
.fband{--fband-img:url('../images/couple-smiling.jpg');position:relative;overflow:hidden}
/* image layer extends past the band so it can shift for the parallax without gaps (clipped by overflow:hidden) */
.fband::after{content:"";position:absolute;inset:-35% 0;z-index:0;background-image:var(--fband-img);background-size:cover;background-position:center 30%;transform:translateY(var(--fband-shift,0));will-change:transform}
.fband::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg, rgba(13,79,102,.93) 0%, rgba(13,79,102,.80) 42%, rgba(23,143,189,.55) 78%, rgba(28,173,224,.32) 100%)}
.fband .wrap{position:relative;z-index:2;padding:84px 24px;min-height:420px;display:flex;flex-direction:column;justify-content:center}
.fband-inner{max-width:560px}
.fband .eyebrow{color:#bfe9f0}
.fband h2{color:#fff;font-size:clamp(1.7rem,3.2vw,2.5rem)}
.fband p{color:#dbeef2;font-size:1.1rem;margin:16px 0 26px;max-width:48ch}
.fband .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.fband .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
/* back to top */
/* full-width Contact Us call bar - mobile only, slides up after a little scrolling */
.contact-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;align-items:center;justify-content:center;gap:.55em;
  background:var(--teal-deep);color:#fff;font-family:"gravita-geo-variable";font-weight:700;font-size:1.02rem;
  padding:15px 16px;box-shadow:0 -4px 18px rgba(13,79,102,.22);
  transform:translateY(100%);transition:transform .28s ease,background .15s}
.contact-bar.show{transform:translateY(0)}
.contact-bar:hover{background:var(--teal-ink);color:#fff}
.contact-bar svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:2}
.totop{position:fixed;right:22px;bottom:22px;width:52px;height:52px;border-radius:50%;background:var(--clay);color:#fff;border:0;cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 22px rgba(0,0,0,.25);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s,transform .2s,background .15s;z-index:60}
.totop.show{opacity:1;visibility:visible;transform:translateY(0)}
.totop:hover{background:var(--clay-deep)}
.totop svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2.3}
@media(max-width:980px){
  /* level 1 - the top-level list, its own scroll container so nothing is stranded */
  nav.menu{position:fixed;top:var(--mnav-top,116px);left:0;right:0;bottom:0;z-index:60;
    flex-direction:column;align-items:stretch;gap:0;background:#fff;border:0;box-shadow:none;
    padding:0 0 28px;display:none;overflow-y:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior:contain}
  header.nav-open nav.menu{display:flex}
  body.nav-locked{overflow:hidden}
  .navitem{flex-direction:column;align-items:stretch}
  .navtop{padding:16px 24px;border-bottom:1px solid var(--line);justify-content:space-between;width:100%}
  .navitem:hover>.navtop,.navitem:focus-within>.navtop{border-bottom-color:var(--line)}
  /* level 2 - a dropdown slides in over level 1 */
  /* NB: slide this pane with left/right, NOT transform - a transformed ancestor
     becomes the containing block for position:fixed descendants, which would
     re-anchor the level-3 panel to this pane instead of the viewport. */
  .dropdown{position:fixed;top:var(--mnav-top,116px);left:100%;right:-100%;bottom:0;z-index:2;
    opacity:1;display:block;min-width:0;background:#fff;border:0;border-radius:0;
    box-shadow:none;padding:0 0 28px;overflow-y:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;transform:none;pointer-events:none;
    visibility:hidden;transition:left .26s ease,right .26s ease,visibility .26s}
  .navitem.open > .dropdown{left:0;right:0;visibility:visible;pointer-events:auto}
  /* the desktop hover/focus rule re-applies translateY(0); an identity matrix is
     still a transform, so it must be cleared here too */
  .navitem.has-drop:hover .dropdown,.navitem.has-drop:focus-within .dropdown,
  .navitem.has-drop.open .dropdown{transform:none}
  .dropdown a{padding:15px 24px;border-bottom:1px solid var(--line)}
  /* mobile uses the collapsing nav, not the drawer */
  .drawer,.drawer-overlay{display:none!important}
  /* appointment CTA moves from the header into the bottom of the open menu */
  .nav-cta .btn-primary{display:none}
  .nav-appt-mobile{display:flex;justify-content:center;margin:10px 24px 6px}
  /* nudge the hamburger left on mobile */
  .menu-toggle{transform:translateX(-25px)}
  /* nudge the logo right on mobile so it isn't against the edge */
  .logo{transform:translateX(20px)}
  /* Contact Us bar is mobile-only; reserve space + lift back-to-top above it */
  .contact-bar{display:flex}
  body{padding-bottom:54px}
  .totop{bottom:74px}
  .cond-track > .cond{flex:0 0 46%}.cond-arrow.prev{left:-6px}.cond-arrow.next{right:-6px}}
@media(max-width:640px){.cond-track > .cond{flex:0 0 82%}}
/* remove right border on last column / bottom border on last row visually */
.cond-grid .cond:nth-child(3n){border-right:0}
.cond-grid .cond:nth-last-child(-n+3){border-bottom:0}

/* approach */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 24px;text-align:center}
.step .n{width:58px;height:58px;border-radius:50%;background:linear-gradient(150deg,var(--teal),var(--teal-deep));display:grid;place-items:center;margin:0 auto 16px}
.step .n svg{width:29px;height:29px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.step h3{font-size:1.18rem;margin-bottom:6px}
.step p{font-size:.94rem;color:var(--ink-soft);margin:0}
.treat-wrap{margin-top:36px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 28px}
.treat-wrap h4{font-size:1.05rem;margin-bottom:14px}
.treat-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 28px}
.treat-list a{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--ink);font-size:.96rem;padding:4px 0}
.treat-list a:hover{color:var(--teal-deep)}
.treat-list a::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--clay);flex:none}

/* ============================================================
   TEAM DIRECTORY - /providers.html
   The "wall of people": one dense, uniform auto-fill grid per
   category, so the roster reads as depth of bench rather than a
   handful of cards. Every tier shares the same cell size, which is
   what makes the whole page scan as a single wall.

   PHOTOS: cards without a headshot fall back to the Elevior icon on a
   brand tint, so an unfilled slot still reads as ours rather than as a
   broken image. To drop a real one in, add an <img> as the first child
   of .pphoto - it covers the placeholder automatically.
   ============================================================ */

/* sticky category nav. top offset clears the sticky header (~83px:
   58px logo + 12px padding x2 + 1px border). */
.team-nav{position:sticky;top:83px;z-index:30;background:#fff;
  border-bottom:1px solid var(--line);box-shadow:0 4px 14px rgba(13,79,102,.05)}
/* Six tabs no longer fit the 1200px wrap. "safe center" keeps them centred when
   there is room but falls back to flex-start when there is not - plain "center"
   overflows equally off BOTH edges, so the first tab gets clipped and cannot be
   scrolled back into view. */
.team-nav .wrap{display:flex;justify-content:center;justify-content:safe center;
  gap:16px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.team-nav .wrap::-webkit-scrollbar{display:none}
/* slightly more top than bottom: the active underline carries visual weight at
   the bottom, so even padding reads as top-heavy. */
.team-nav a{display:inline-flex;align-items:center;gap:7px;padding:24px 2px 20px;white-space:nowrap;
  font-weight:600;font-size:.86rem;color:var(--ink);border-bottom:3px solid transparent;
  transition:color .15s,border-color .15s}
.team-nav a:hover{color:var(--teal-deep)}
.team-nav a.current{color:var(--teal-deep);border-color:var(--teal)}
.team-nav a .n{font-size:.7rem;font-weight:700;color:var(--ink-soft);background:var(--teal-tint);
  border-radius:999px;padding:2px 7px;transition:background .15s,color .15s}
.team-nav a.current .n{background:var(--teal);color:#fff}

/* tier sections. scroll-margin clears header + sticky nav on jump. */
/* jump target clears the sticky header (83px) + this nav (72px) = 155, plus ~20px
   so the heading lands with breathing room instead of flush against the bar */
.tier{margin-bottom:52px;scroll-margin-top:176px}
.tier:last-child{margin-bottom:0}
.tier-head{border-bottom:2px solid var(--teal);padding-bottom:9px;margin-bottom:20px;text-align:center}
.tier-head .tline{display:flex;align-items:baseline;justify-content:center;gap:12px;flex-wrap:wrap}
.tier-head h2{font-size:1.4rem}
.tier-head .blurb{margin:8px auto 0;color:var(--ink-soft);font-size:.96rem;max-width:70ch}

/* the wall */
.providers{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
/* filled cards are <a> to provider.html; .tbd slots stay plain <div> */
.pcard{display:flex;flex-direction:column;color:inherit;background:#fff;border:1px solid var(--line);
  border-radius:12px;overflow:hidden;transition:border-color .15s,box-shadow .15s,transform .15s}
.pcard:hover{border-color:var(--teal);box-shadow:0 10px 24px rgba(13,79,102,.12);transform:translateY(-3px)}
.pphoto{position:relative;flex:none;aspect-ratio:1/1;overflow:hidden;border-bottom:1px solid var(--line);
  background:var(--teal-tint) center/38% no-repeat url('../images/staff/Elevior%20Icon%20Color.png')}
/* A real headshot dropped in as <img> covers the placeholder. Portrait sources
   get cropped to the square cell, so bias the crop toward the head; a card can
   override the framing per photo with style="--headshot-pos:50% 8%".
   (Not --ph-pos: .page-hero already owns that name and custom props inherit.) */
/* A filled cell carries the brand gradient behind the cut-out subject. Empty
   cells keep the grey placeholder + person glyph from the rule above. */
.pphoto:has(img){background:linear-gradient(135deg, #0d4f66, #178fbd) #0d4f66}
/* Headshots arrive framed differently - some tight, some full-length - which
   made heads render at wildly different sizes and heights in a uniform square
   cell. object-fit could only ever crop, never add space above a head, so
   framing is driven per-card instead: --hs-w sets the subject's scale, and
   --hs-x/--hs-y place it. Values are computed from each photo's detected face
   size and the top of the head, so every card lands the same head size with
   the same headroom. Regenerate them if a photo is replaced. */
.pphoto img{
  position:absolute;
  width:var(--hs-w,100%);
  height:auto;
  max-width:none;
  left:var(--hs-x,0%);
  top:var(--hs-y,0%);
}
/* flex column so "View Profile" pins to the bottom - card titles run one or two
   lines, and the cue should still line up across the row */
.pcard .pinfo{flex:1;display:flex;flex-direction:column;padding:13px 12px 15px;text-align:center}
.pcard b{display:block;font-family:"gravita-geo-variable";font-weight:600;color:var(--teal-ink);
  font-size:.96rem;line-height:1.25}
.pcard small{display:block;color:var(--ink-soft);font-size:.79rem;line-height:1.35;margin-top:4px}
/* placeholder credential - visibly unfinished so it cannot pass for a real one */
.pcard small.spec-pending{color:#9bb0ba;font-style:italic}
/* click affordance: quiet until hover, so the wall still scans as a grid of people */
.pmore{display:block;font-family:"gravita-geo-variable";font-weight:700;font-size:.76rem;
  letter-spacing:.05em;text-transform:uppercase;color:#9db6c1;margin-top:auto;padding-top:11px;transition:color .15s}
.pcard:hover .pmore,.pcard:focus-visible .pmore{color:var(--clay)}
.pcard:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
/* Roster cards for non-physicians carry no profile page, so they ship as <div>
   rather than <a>. Cancel the lift/glow the anchor version uses, or they still
   read as clickable. */
div.pcard:hover{border-color:var(--line);box-shadow:none;transform:none}

/* unfilled roster slots: real people are never invented, so these stay
   visibly empty. Delete one and add a .pcard when a name arrives. */
.pcard.tbd{border-style:dashed;background:#f7fbfd;box-shadow:none}
.pcard.tbd:hover{transform:none;box-shadow:none;border-color:var(--teal)}
.pcard.tbd .pphoto{background-color:#eef3f6;border-bottom-style:dashed;opacity:.7}
.pcard.tbd b{color:#8aa5b0;font-weight:600}
.tier-note{color:var(--ink-soft);font-size:.86rem;margin:16px 0 0}
.team-note{text-align:center;color:var(--ink-soft);font-size:.9rem;margin-top:6px}

@media(max-width:980px){
  .providers{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1080px){
  .team-nav .wrap{gap:12px}
  .team-nav a{font-size:.82rem}
}
@media(max-width:760px){
  .team-nav .wrap{gap:14px}
  .providers{grid-template-columns:repeat(2,1fr);gap:14px}
  .tier{margin-bottom:38px;scroll-margin-top:176px}
}
.team-tiers{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:32px}
.ttile{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 24px;text-align:center}
.ttile .ico{width:56px;height:56px;border-radius:50%;background:var(--teal);display:grid;place-items:center;margin:0 auto 14px}
.ttile .ico svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:2}
.ttile b{display:block;color:var(--teal-ink);font-weight:700;font-size:1.18rem;margin-bottom:8px}
.ttile span{color:var(--ink-soft);font-size:.96rem;line-height:1.5}
.team-cta{text-align:center}
@media(max-width:760px){.team-tiers{grid-template-columns:1fr}}

/* ============================================================
   PATIENT REVIEWS - /reviews.html
   Masonry wall of verbatim 5-star reviews. Layout uses CSS
   multi-columns so cards of varying length pack tightly with
   no fixed row heights. Reviewer photos are intentionally omitted.
   ============================================================ */
.review-masonry{columns:3;column-gap:22px}
.rcard{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  display:inline-block;width:100%;margin:0 0 22px;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 20px 22px;
  box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s,transform .15s}
.rcard:hover{border-color:var(--teal);box-shadow:0 10px 24px rgba(13,79,102,.12);transform:translateY(-3px)}
.rc-head{display:flex;align-items:center;gap:12px}
.rc-avatar{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--a,#0d4f66);
  color:#fff;display:grid;place-items:center;font-weight:700;font-size:1.05rem;line-height:1}
.rc-who{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.rc-who b{font-family:"gravita-geo-variable";font-weight:600;color:var(--teal-ink);font-size:.98rem;line-height:1.2}
.rc-who small{color:var(--ink-soft);font-size:.76rem;margin-top:2px}
.rc-g{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;font-weight:700;font-size:.82rem;color:#4285f4;font-family:Arial,sans-serif}
.rc-stars{color:#f5a623;font-size:1.02rem;letter-spacing:2px;margin:12px 0 8px;line-height:1}
.rc-text{margin:0;color:var(--ink);font-size:.95rem;line-height:1.58}

@media(max-width:980px){
  .review-masonry{columns:2}
}
@media(max-width:600px){
  .review-masonry{columns:1}
}

/* patient testimonials */
.testi{background:var(--bg);border-bottom:1px solid var(--line)}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 26px 24px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.tcard .quote{font-family:"gravita-geo-variable";font-weight:800;font-size:3.4rem;line-height:.6;color:var(--teal);height:.5em}
.tcard .stars{color:var(--teal);font-size:1.1rem;letter-spacing:3px;margin:4px 0 14px}
.tcard p{color:var(--ink);font-size:1.08rem;line-height:1.55;margin:0 0 18px;flex:1}
.tcard .who{border-top:1px solid var(--line);padding-top:14px}
.tcard .who b{display:block;color:var(--teal-ink);font-weight:700;font-size:1.02rem}
.tcard .who span{color:var(--ink-soft);font-size:.9rem}
.testi .agg{text-align:center;margin-top:30px;color:var(--ink-soft);font-size:.98rem}
.testi .agg b{color:var(--teal-ink)}
@media(max-width:900px){.tgrid{grid-template-columns:1fr}}

/* locations */
.loc .grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.loc-list{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:14px}
.loc-item{padding:16px 18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.loc-list .loc-item:nth-child(2n){border-right:0}
.loc-list .loc-item:nth-last-child(-n+2){border-bottom:0}
.loc-item b{color:var(--teal-ink);font-family:"gravita-geo-variable";font-weight:600;display:block}
.loc-item span{font-size:.86rem;color:var(--ink-soft)}
/* z-index:0 makes this a stacking context. Leaflet gives its panes and controls
   z-index 400-1000, which otherwise beat the sticky header (40) and let the map
   scroll over the navigation. Containing them here keeps the header on top. */
.loc-map{aspect-ratio:1/1;border-radius:var(--r);border:1px solid var(--line);position:relative;
  z-index:0;isolation:isolate;overflow:hidden;background:var(--bg-cool)}
/* Real map: the Texas outline and every clinic dot are projected from actual
   coordinates (see the generator note in the commit), so the two clusters are
   geographically true rather than hand-placed. */
.tx-map{display:block;width:100%;height:100%}
.tx-outline{fill:#fff;stroke:var(--line);stroke-width:1.5;stroke-linejoin:round}
.cdot{fill:var(--clay);stroke:#fff;stroke-width:2}
.cdot.c{fill:var(--teal-deep)}
.loc-map-wrap{display:flex;flex-direction:column;gap:14px}
/* Leaflet map. The inline SVG stays in the markup as a no-JS fallback and is
   removed by the script once the real map is live. */
.loc-map.is-live{background:#fff}
.loc-map .leaflet-container{width:100%;height:100%;border-radius:var(--r);
  font-family:"gravita-geo-variable",system-ui,sans-serif;background:#fff}
.loc-map .leaflet-control-zoom a{color:var(--teal-ink);border-color:var(--line)}
.loc-map .leaflet-control-attribution{font-size:.66rem;background:rgba(255,255,255,.82)}
.loc-map .leaflet-popup-content-wrapper{border-radius:var(--r);box-shadow:0 10px 30px rgba(13,79,102,.18)}
.loc-map .leaflet-popup-content{margin:14px 16px;line-height:1.45;display:flex;flex-direction:column;gap:3px}
.mp-city{font-family:"gravita-geo-variable";font-weight:600;font-size:1rem;color:var(--teal-ink)}
.mp-addr{font-size:.84rem;color:var(--ink-soft)}
.mp-tel{font-size:.84rem;font-weight:600;color:var(--teal-deep)}
.mp-dir{font-size:.84rem;font-weight:700;color:var(--clay);margin-top:2px}
.leaflet-tooltip{font-family:"gravita-geo-variable",system-ui,sans-serif;font-weight:600;
  font-size:.78rem;color:var(--teal-ink);border-color:var(--line)}
.map-key{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 26px}
.map-key li{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--ink-soft)}
.map-key .k{width:11px;height:11px;border-radius:50%;flex:none}
.map-key .k.c{background:var(--teal-deep)}
.map-key .k.w{background:var(--clay)}

/* region summary replaces the old four-cell city grid */
.loc-region-list{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;margin-top:16px}
.loc-reg{padding:16px 18px}
.loc-reg + .loc-reg{border-top:1px solid var(--line)}
.loc-reg-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.loc-reg-head b{color:var(--teal-ink);font-family:"gravita-geo-variable";font-weight:600}
.loc-n{font-size:.78rem;font-weight:700;color:var(--teal-deep);white-space:nowrap}
.loc-reg p{margin:6px 0 0;font-size:.87rem;line-height:1.5;color:var(--ink-soft)}

/* patient resources */
/* two cards since Pay My Bill was removed - keep them centred rather than
   leaving an empty third column */
.resgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1080px;margin:0 auto}
.res{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;text-align:center}
.res .ico{width:46px;height:46px;margin:0 auto 12px;border-radius:50%;background:var(--teal);display:grid;place-items:center}
.res .ico svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2}
.res h3{font-size:1.04rem;margin-bottom:6px}
.res p{font-size:.86rem;color:var(--ink-soft);margin:0 0 10px}
.res a{font-weight:700;font-size:.86rem;color:var(--clay)}

/* final cta */
.final{background:linear-gradient(135deg,#0d4f66,#178fbd);color:#fff;text-align:center}
.final .wrap{padding:58px 24px}
.final h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.5rem)}
.final p{color:#cfe9ee;max-width:46ch;margin:14px auto 26px;font-size:1.06rem}
.final .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.final .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.final .btn-ghost:hover{border-color:#fff}

/* footer */
footer{background:#0a3a45;color:#9fc4cc;font-size:.92rem}
footer .wrap{padding:48px 24px 26px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
footer .flogo{height:38px;margin-bottom:12px;filter:brightness(0) invert(1);opacity:.95}
footer h4{color:#fff;font-family:"gravita-geo-variable";font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
footer a{color:#9fc4cc}footer a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1)}
.foot-bottom .wrap{padding:16px 24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:.82rem}

/* modal */
.modal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:24px}
.modal.open{display:flex}
.modal-bg{position:absolute;inset:0;background:rgba(10,58,69,.55)}
.modal-card{position:relative;background:#fff;border-radius:var(--r);max-width:740px;width:100%;max-height:90vh;overflow:auto;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.modal-top{display:grid;grid-template-columns:150px 1fr;gap:22px;padding:28px;border-bottom:1px solid var(--line);align-items:center}
.modal-photo{aspect-ratio:1/1;border-radius:var(--r);display:grid;place-items:center;font-family:"gravita-geo-variable";font-size:2.4rem;color:#fff;font-weight:600;background:linear-gradient(150deg,var(--teal),var(--teal-deep))}
.modal-top h3{font-size:1.5rem}
.modal-top .role{color:var(--clay);font-weight:700;font-size:.92rem;margin-top:3px}
.modal-meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:14px}
.modal-meta div b{display:block;font-family:"gravita-geo-variable";color:var(--teal-ink);font-size:1rem}
.modal-meta div span{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);font-weight:700}
.modal-body{padding:22px 28px 6px}
.modal-body h4{font-family:"gravita-geo-variable";color:var(--teal-ink);font-weight:700;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;margin:16px 0 6px}
.modal-body p{margin:0;color:var(--ink-soft);font-size:.96rem}
.modal-video{margin:12px 0 4px;aspect-ratio:16/9;border-radius:var(--r);border:1px solid var(--line);background:#e9f0f2;display:grid;place-items:center}
.modal-video .play{width:54px;height:54px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:var(--shadow)}
.modal-video .play::after{content:"";border-left:16px solid var(--teal-deep);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.modal-foot{padding:16px 28px 28px;display:flex;gap:10px;flex-wrap:wrap}
.modal-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:1.1rem;color:var(--ink);z-index:2}

/* ============================================================
   INTERIOR / TEMPLATE PAGES
   Reusable building blocks for secondary pages (pain-management,
   conditions, treatments, etc.). Header, footer + hero framing
   are shared with the homepage; these are the interior body parts.
   ============================================================ */

/* active state for the current top-nav item */
.navtop.active{color:var(--teal-deep);border-color:var(--teal)}

/* compact page hero / banner.
   Override the photo per page inline: style="--ph-img:url('../images/x.jpg');--ph-pos:50% 30%" */
.page-hero{--ph-img:url('../images/couple-smiling.jpg');--ph-pos:50% 30%;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.page-hero::after{content:"";position:absolute;inset:0;z-index:0;background-image:var(--ph-img);background-size:cover;background-position:var(--ph-pos);filter:brightness(1.02) saturate(1.05)}
.page-hero::before{content:"";position:absolute;inset:0;z-index:1;background:
  radial-gradient(80% 100% at 88% 20%, rgba(255,198,132,.18), transparent 60%),
  linear-gradient(90deg, rgba(7,49,64,.9) 0%, rgba(7,49,64,.66) 46%, rgba(13,79,102,.34) 100%)}
.page-hero .wrap{position:relative;z-index:2;padding:60px 24px 54px;min-height:300px;display:flex;flex-direction:column;justify-content:center}
.page-hero-inner{max-width:660px}
.page-hero .eyebrow{color:#f0c4a6}
.page-hero h1{font-size:clamp(2.2rem,4.6vw,3.5rem);letter-spacing:-.015em;line-height:1.14;color:#fff;margin-top:12px;text-shadow:0 1px 12px rgba(5,36,49,.35)}
.page-hero p.lede{font-size:1.14rem;color:#e6eff1;margin:16px 0 26px;max-width:54ch;text-shadow:0 1px 10px rgba(5,36,49,.3)}
.page-hero .cta-row{display:flex;gap:12px;flex-wrap:wrap}
.page-hero .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.page-hero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* breadcrumb (sits inside the page hero) */
.crumbs{font-size:.82rem;font-weight:600;color:#cfe9ee;margin-bottom:4px;text-shadow:0 1px 8px rgba(5,36,49,.35)}
.crumbs a{color:#cfe9ee}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs .sep{opacity:.6;margin:0 7px}
.crumbs .here{color:#fff}

/* trust strip - row of icon differentiators */
.trust-strip{background:#fff;border-bottom:1px solid var(--line)}
.trust-strip .grid{display:grid;grid-template-columns:repeat(4,1fr)}
.trust{display:flex;align-items:center;gap:16px;padding:26px 26px;border-right:1px solid var(--line)}
.trust:last-child{border-right:0}
.trust .ico{flex:none;width:52px;height:52px;border-radius:50%;background:var(--teal-tint);display:grid;place-items:center}
.trust .ico svg{width:26px;height:26px;stroke:var(--teal-deep);fill:none;stroke-width:2}
.trust b{display:block;font-family:"gravita-geo-variable";color:var(--teal-ink);font-size:1.02rem;font-weight:600;line-height:1.25}
.trust span{font-size:.85rem;color:var(--ink-soft)}

/* service / category cards (3-up) */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s,transform .15s}
.svc:hover{border-color:var(--teal);box-shadow:0 12px 28px rgba(13,79,102,.13);transform:translateY(-3px)}
.svc .ico{width:54px;height:54px;border-radius:12px;background:linear-gradient(150deg,var(--teal),var(--teal-deep));display:grid;place-items:center;margin-bottom:16px}
.svc .ico svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:2}
.svc h3{font-size:1.24rem}
.svc p{color:var(--ink-soft);font-size:.96rem;margin:10px 0 18px;flex:1}
.svc .more{font-weight:700;font-size:.9rem;color:var(--clay)}
.svc:hover .more{color:var(--clay-deep)}

/* phone treatment inside the final CTA band */
.final .or{display:block;color:#bfe3ea;font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;font-weight:700;margin:22px 0 6px}
.final .phone{font-family:"gravita-geo-variable";font-weight:700;font-size:clamp(1.7rem,3.2vw,2.3rem);color:#fff;line-height:1}
.final .phone a{color:#fff}
.final .phone a:hover{color:#eafaff}

/* left-aligned section head for content-heavy interior pages */
.sec-head.left{margin-left:0;margin-right:0;text-align:left;max-width:780px}
.sec-head.left .eyebrow{margin-bottom:10px}

/* prose / structured content subsections */
.prose h3{font-size:1.42rem;color:var(--teal-ink);margin:34px 0 10px}
.prose h3:first-child{margin-top:0}
.prose p{color:var(--ink-soft);margin:0 0 14px;max-width:72ch}
.prose .btn{margin-top:18px}

/* pill / tag list (conditions, quick facts) */
.pills{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px}
.pills span{background:var(--teal-tint);color:var(--teal-ink);font-family:"gravita-geo-variable";font-weight:600;font-size:.9rem;padding:8px 15px;border-radius:999px;border:1px solid var(--line)}

/* condition / treatment directory (nerve, spine, joint + treatment sub-pages)
   Each category is an editorial card: ONE section image beside a checklist of
   items (plain text, NOT per-item links - the individual detail pages don't
   exist yet). Drop in a real section photo later by adding a background-image
   to .cond-cat-media inline plus class "has-img" to hide the placeholder glyph:
   <div class="cond-cat-media has-img" style="background-image:url('images/x.jpg')"></div>
   (inline style URLs resolve against the HTML page, so no ../ - unlike a url()
   written here in the stylesheet.) */
/* full-width band: background bleeds edge-to-edge, inner .wrap keeps content aligned.
   Every other band gets .tint for a super-light blue wash. Future sections can be
   colored the same way by adding a class to the band. */
.cond-band{padding:56px 0}
.cond-band.tint{background:#f2f8fd}

/* 50 / 50 image + text inside the band */
.cond-cat{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch}
.cond-cat-media{position:relative;min-height:400px;border-radius:var(--r);background:linear-gradient(150deg,#e6eef1,#efe4d7);background-size:cover;background-position:center}
.cond-cat-media::after{content:"";position:absolute;inset:0;opacity:.24;background:center/48px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d4f66' stroke-width='1.4'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.6'/%3E%3Cpath d='M21 16l-5-5-6 6-3-3-4 4'/%3E%3C/svg%3E")}
.cond-cat-media.has-img::after{display:none}
.cond-cat.flip .cond-cat-media{order:2}
.cond-cat-main{align-self:center}
.cond-cat-main h3{font-size:1.5rem;color:var(--teal-ink);display:flex;align-items:center;gap:12px}
.cond-cat-main h3 .ico{flex:none;width:42px;height:42px;border-radius:11px;background:var(--teal-tint);display:grid;place-items:center}
.cond-cat-main h3 .ico svg{width:22px;height:22px;stroke:var(--teal-deep);fill:none;stroke-width:2}
.cond-cat-main .desc{color:var(--ink-soft);margin:12px 0 0;max-width:60ch}
.cond-list{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:11px 26px}
.cond-list li{position:relative;padding-left:28px;font-size:.96rem;color:var(--ink);font-weight:500;line-height:1.35}
.cond-list li::before{content:"";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;background:var(--teal-tint) center/11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23178fbd' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")}
.cond-cat-main .btn{margin-top:26px}
@media(max-width:960px){.cond-list{grid-template-columns:1fr}}
@media(max-width:760px){
  .cond-cat{grid-template-columns:1fr;gap:22px}
  .cond-cat.flip .cond-cat-media{order:0}
  .cond-cat-media{min-height:190px}
  .cond-band{padding:28px 0}
}

/* ---- interior two-column: main content + sticky section sidebar ---- */
.page-layout{display:grid;grid-template-columns:1fr 288px;gap:44px;align-items:start}
.page-main{min-width:0;order:1}
.page-side{order:2;position:sticky;top:100px}
.side-nav{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 14px 34px rgba(13,79,102,.10);overflow:hidden}
.side-head{padding:22px 22px 6px}
.side-head .eyebrow{display:block;margin-bottom:6px}
.side-head h4{margin:0;font-family:"gravita-geo-variable";font-weight:700;font-size:1.22rem;color:var(--teal-ink);letter-spacing:-.005em}
.side-head p{margin:9px 0 0;font-size:.9rem;line-height:1.5;color:var(--ink-soft)}
.side-nav ul{list-style:none;margin:0;padding:10px 12px 4px}
.side-nav li a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;border-radius:11px;font-weight:600;font-size:.95rem;color:var(--ink);transition:background .15s,color .15s}
.side-nav li a:hover{background:var(--teal-tint);color:var(--teal-deep)}
.side-nav li a.current{background:var(--teal-tint);color:var(--teal-deep)}
.side-nav li a .chev{color:var(--clay);opacity:0;transform:translateX(-5px);transition:opacity .15s,transform .15s}
.side-nav li a:hover .chev,.side-nav li a.current .chev{opacity:1;transform:translateX(0)}
.side-cta{padding:8px 16px 18px}
.side-cta .btn{width:100%;justify-content:center;border-radius:11px}

/* inside the two-column layout the full-width bands become bordered cards */
.page-main .cond-band{padding:0;background:none!important}
.page-main .cond-band + .cond-band{margin-top:26px}
.page-main .cond-band > .wrap{max-width:none;padding:0}
/* text-forward, patient-friendly cards (no per-section image) */
.page-main .cond-cat{display:block;border:1px solid #e6eef3;border-radius:18px;background:#fff;box-shadow:0 6px 22px rgba(13,79,102,.05)}
.page-main .cond-band.tint .cond-cat{background:#f7fbfd;border-color:#e2eef4}
.page-main .cond-cat-media{display:none}
/* ...but a section that has a REAL photo keeps it, in a two-column card. Only the
   empty grey placeholder boxes were dropped; add class "has-img" + a background
   image to bring a section's photo back. */
.page-main .cond-cat:has(> .cond-cat-media.has-img){display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:stretch;overflow:hidden}
.page-main .cond-cat-media.has-img{display:block;min-height:100%;border-radius:0}
/* .flip sends the photo to column 2, so the track sizes have to swap with it -
   otherwise the photo takes the wide track and the text is squeezed into 4fr */
.page-main .cond-cat.flip:has(> .cond-cat-media.has-img){
  grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
/* the text column is narrower alongside a photo - give the list a little less air
   and let it drop to one column before the terms start wrapping mid-phrase */
.page-main .cond-cat:has(> .cond-cat-media.has-img) .cond-cat-main{padding:30px 32px}
.page-main .cond-cat:has(> .cond-cat-media.has-img) .cond-list{gap:12px 22px}
@media(max-width:1240px){
  .page-main .cond-cat:has(> .cond-cat-media.has-img) .cond-list{grid-template-columns:1fr}
}
@media(max-width:760px){
  .page-main .cond-cat:has(> .cond-cat-media.has-img){display:block}
  .page-main .cond-cat-media.has-img{min-height:210px}
}
.page-main .cond-cat-main{padding:34px 38px}
.page-main .cond-cat-main h3{font-size:1.4rem}
.page-main .cond-cat-main .desc{margin-top:11px;font-size:1.06rem;line-height:1.5;color:var(--ink);font-weight:500}
/* .desc is the standfirst; .cond-copy is the body paragraph under it - a step down
   in size and weight so the two read as lead-then-detail, not two competing intros. */
.cond-copy{margin:14px 0 0;max-width:68ch;font-size:.97rem;line-height:1.65;color:var(--ink-soft)}
.page-main .cond-cat:has(> .cond-cat-media.has-img) .cond-copy{font-size:.94rem;line-height:1.6}
/* gentle label that frames the jargon as reassuring options */
.cond-list-label{display:block;margin:24px 0 2px;font-size:.82rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--teal-deep)}
.page-main .cond-list{margin-top:14px;grid-template-columns:1fr 1fr;gap:14px 30px}
.page-main .cond-list li{font-size:.97rem;line-height:1.4}
/* soft, non-pushy per-card action */
.cta-soft{display:inline-flex;align-items:center;gap:.5em;margin-top:24px;font-family:"gravita-geo-variable";font-weight:700;font-size:.98rem;color:var(--teal-deep)}
.cta-soft .arrow{color:var(--clay);transition:transform .15s}
.cta-soft:hover{color:var(--teal-ink)}
.cta-soft:hover .arrow{transform:translateX(3px)}
.page-main .sec-head.left{margin-bottom:26px}
@media(max-width:1080px){
  .page-layout{grid-template-columns:1fr}
  .page-side{display:none}
}
@media(max-width:560px){.page-main .cond-list{grid-template-columns:1fr}}

/* highlighted insight callout */
.callout{background:var(--bg-warm);border-left:4px solid var(--clay);border-radius:6px;padding:20px 24px;margin:22px 0;color:var(--ink);font-size:1.08rem;line-height:1.5}
.callout b{color:var(--teal-ink)}

/* two-up info panels with bulleted lists */
.info{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:20px}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 26px;box-shadow:var(--shadow)}
.block.cool .panel{background:#fff}
.panel h4{font-size:1.08rem;color:var(--teal-ink);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.panel h4 .ico{flex:none;width:34px;height:34px;border-radius:8px;background:var(--teal-tint);display:grid;place-items:center}
.panel h4 .ico svg{width:19px;height:19px;stroke:var(--teal-deep);fill:none;stroke-width:2}
.plist{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.plist li{position:relative;padding-left:24px;font-size:.96rem;color:var(--ink)}
.plist li::before{content:"";position:absolute;left:1px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--clay)}

@media(max-width:980px){
  .trust-strip .grid{grid-template-columns:1fr 1fr}
  .trust:nth-child(2){border-right:0}
  .trust:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .svc-grid{grid-template-columns:1fr}
  .info{grid-template-columns:1fr}
}
@media(max-width:560px){
  .trust-strip .grid{grid-template-columns:1fr}
  .trust{border-right:0;border-bottom:1px solid var(--line)}
}

/* brand promise band */
.promise{background:linear-gradient(135deg,#f47209,#cf6108);color:#fff;text-align:center}
.promise .wrap{padding:34px 24px}
.promise .kicker{display:inline-block;font-family:"gravita-geo-variable";font-weight:700;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:#eafaff;margin-bottom:14px}
.promise p{font-size:clamp(1.7rem,3.6vw,2.9rem);margin:0 auto;max-width:34ch;color:#fff;line-height:1.2}
@media(max-width:980px){
  .hero .wrap,.welcome .grid,.loc .grid{grid-template-columns:1fr;gap:32px}
  .quickbar .grid{grid-template-columns:1fr 1fr}
  .qa:nth-child(2){border-right:0}.qa:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .cond-grid{grid-template-columns:1fr 1fr}
  .cond-grid .cond:nth-child(3n){border-right:1px solid var(--line)}
  .cond-grid .cond:nth-child(2n){border-right:0}
  .cond-grid .cond:nth-last-child(-n+3){border-bottom:1px solid var(--line)}
  .steps{grid-template-columns:1fr}
  .treat-list{grid-template-columns:1fr 1fr}
  .resgrid{grid-template-columns:1fr 1fr}
  footer .wrap{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .util .links{display:none}
  .quickbar .grid{grid-template-columns:1fr}.qa{border-right:0;border-bottom:1px solid var(--line)}
  .cond-grid{grid-template-columns:1fr}.cond{border-right:0!important}
  .treat-list{grid-template-columns:1fr}
  .loc-list{grid-template-columns:1fr}.loc-item{border-right:0!important}
  .resgrid{grid-template-columns:1fr}
  .modal-top{grid-template-columns:1fr;text-align:center}.modal-photo{width:130px;margin:0 auto}
  footer .wrap{grid-template-columns:1fr}
}
/* ============================================================
   ABOUT PAGE - editorial sections unique to /about.html
   Type-forward layouts so the page reads distinctly from the
   homepage while staying inside the Elevior design system.
   ============================================================ */

/* Our Story: oversized thesis beside running prose */
.about-lead{padding:78px 0}
.about-lead .grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:start}
.about-lead .eyebrow{display:block;margin-bottom:18px}
.about-lead .thesis{font-family:"gravita-geo-variable";font-weight:700;color:var(--teal-ink);
  font-size:clamp(1.9rem,3.5vw,2.9rem);line-height:1.14;letter-spacing:-.015em;margin:0}
.about-lead .thesis em{font-style:normal;color:var(--clay)}
.about-lead .thesis::after{content:"";display:block;width:64px;height:4px;border-radius:2px;
  background:var(--clay);margin-top:26px}
.about-lead .body p{color:var(--ink-soft);margin:0 0 16px;font-size:1.06rem}
.about-lead .body p:first-child{margin-top:0}
.about-lead .body .sign{margin:20px 0 0;font-family:"gravita-geo-variable";font-weight:700;
  color:var(--teal-ink);font-size:1.02rem}
@media(max-width:900px){.about-lead{padding:52px 0}
  .about-lead .grid{grid-template-columns:1fr;gap:26px}
  .about-lead .thesis::after{margin-top:20px}}

/* By the Numbers: large numerals separated by hairlines */
.metrics{background:var(--bg-cool);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.metrics .row{display:grid;grid-template-columns:repeat(4,1fr)}
.metric{padding:46px 26px;text-align:center;border-right:1px solid var(--line)}
.metric:last-child{border-right:0}
.metric b{display:block;font-family:"gravita-geo-variable";font-weight:700;color:var(--teal-ink);
  font-size:clamp(2.6rem,5vw,3.7rem);line-height:1;letter-spacing:-.02em}
/* direct child only: a bare `.metric span` also matched the `+` inside <b>,
   knocking it onto its own line at label size. */
.metric > span{display:block;margin-top:12px;font-size:.84rem;font-weight:600;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.06em}
@media(max-width:760px){.metrics .row{grid-template-columns:1fr 1fr}
  .metric:nth-child(2n){border-right:0}
  .metric:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:430px){.metrics .row{grid-template-columns:1fr}
  .metric{border-right:0;border-bottom:1px solid var(--line)}
  .metric:last-child{border-bottom:0}}

/* What Guides Us: hairline-ruled index of care principles */
.principles-list{max-width:980px;margin:0 auto}
.principle{display:grid;grid-template-columns:60px 250px 1fr;gap:30px;align-items:center;
  padding:26px 4px;border-top:1px solid var(--line);transition:background .15s}
.principle:last-child{border-bottom:1px solid var(--line)}
.principle:hover{background:var(--teal-tint)}
.principle .ico{width:52px;height:52px;border-radius:13px;background:var(--teal-tint);
  display:grid;place-items:center;transition:background .15s}
.principle:hover .ico{background:var(--teal)}
.principle .ico svg{width:26px;height:26px;stroke:var(--teal-deep);fill:none;stroke-width:2;transition:stroke .15s}
.principle:hover .ico svg{stroke:#fff}
.principle h3{font-size:1.28rem;color:var(--teal-ink);margin:0}
.principle p{margin:0;color:var(--ink-soft);font-size:1.02rem;line-height:1.5}
@media(max-width:820px){
  .principle{grid-template-columns:52px 1fr;gap:14px 18px;padding:22px 4px}
  .principle p{grid-column:1 / -1}
}

/* Our Promise: closing creed line on a warm ground */
.creed{background:var(--bg-warm);text-align:center;border-top:1px solid var(--line)}
.creed .wrap{max-width:840px;padding:76px 24px}
.creed .kicker{display:inline-block;font-family:"gravita-geo-variable";font-weight:700;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--clay);margin-bottom:18px}
.creed h2{font-family:"gravita-geo-variable";font-weight:700;color:var(--teal-ink);
  font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.16;letter-spacing:-.015em}
.creed h2 em{font-style:normal;color:var(--clay);white-space:nowrap}
.creed p{color:var(--ink-soft);font-size:1.1rem;max-width:52ch;margin:20px auto 26px}

/* ============================================================
   CONTACT PAGE - sections unique to /contact.html
   Form beside a sticky contact rail, then a directory of clinic
   cards. Imageless below the hero, like the other interior pages.
   ============================================================ */

.contact-lead{padding:70px 0}
.contact-grid{display:grid;grid-template-columns:1.3fr .85fr;gap:52px;align-items:start}

/* ---- form card ---- */
.cform{background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 10px 30px rgba(13,79,102,.07);padding:34px 36px}
.cform .eyebrow{display:block;margin-bottom:8px}
.cform h2{font-size:1.6rem;letter-spacing:-.01em}
.cform .form-note{color:var(--ink-soft);font-size:.98rem;margin:10px 0 26px;max-width:54ch}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.field{display:flex;flex-direction:column;margin-bottom:18px}
.field.full{grid-column:1 / -1}
.field label{font-weight:600;font-size:.88rem;color:var(--teal-ink);margin-bottom:6px}
.field label .req{color:var(--clay)}
.field input,.field select,.field textarea{font-family:inherit;font-size:1rem;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  transition:border-color .15s,box-shadow .15s}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(28,173,224,.18)}
.field input::placeholder,.field textarea::placeholder{color:#9bb3bd}
.field select{appearance:none;cursor:pointer;padding-right:40px;
  background:#fff center right 13px/15px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23178fbd' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.field .hint{font-size:.8rem;color:var(--ink-soft);margin-top:6px}
.consent{display:flex;gap:11px;align-items:flex-start;margin:2px 0 22px}
.consent input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--teal-deep);cursor:pointer}
.consent span{font-size:.86rem;color:var(--ink-soft);line-height:1.5}
.cform .btn{width:100%;justify-content:center}
.cform .priv{font-size:.8rem;color:var(--ink-soft);text-align:center;margin:14px 0 0}

/* ---- contact rail ---- */
.crail{display:grid;gap:18px;position:sticky;top:100px}
.rail-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 26px;
  box-shadow:0 6px 22px rgba(13,79,102,.05)}
.rail-card .rlabel{display:block;font-family:"gravita-geo-variable";font-weight:700;font-size:.76rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:12px}
.rail-card.accent{background:linear-gradient(140deg,var(--teal-ink),var(--teal-deep));border-color:transparent}
.rail-card.accent .rlabel{color:#bfe9f0}
.rail-card .rphone{font-family:"gravita-geo-variable";font-weight:700;font-size:clamp(1.7rem,3vw,2.05rem);
  line-height:1;letter-spacing:-.015em;color:#fff}
.rail-card .rphone a{color:#fff}
.rail-card .rphone a:hover{color:#eafaff}
.rail-card.accent p{color:#cfe9ee;font-size:.92rem;margin:14px 0 0;line-height:1.5}
.hours{list-style:none;margin:0;padding:0}
.hours li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:.94rem}
.hours li:last-child{border-bottom:0}
.hours li span{color:var(--ink-soft)}
.hours li b{color:var(--teal-ink);font-weight:600;white-space:nowrap}
.hours li.closed b{color:var(--ink-soft);font-weight:500}
.rail-lines{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rail-lines li{display:flex;align-items:center;gap:12px;font-size:.95rem}
.rail-lines .ico{flex:none;width:36px;height:36px;border-radius:9px;background:var(--teal-tint);
  display:grid;place-items:center}
.rail-lines .ico svg{width:19px;height:19px;stroke:var(--teal-deep);fill:none;stroke-width:2}
.rail-lines small{display:block;font-size:.74rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft)}
.rail-lines b{display:block;font-family:"gravita-geo-variable";font-weight:600;color:var(--teal-ink);font-size:1rem}
.emerg{display:flex;gap:11px;align-items:flex-start;background:var(--bg-warm);
  border-left:4px solid var(--clay);border-radius:6px;padding:14px 16px;font-size:.88rem;
  color:var(--ink);line-height:1.5}
.emerg b{color:var(--teal-ink)}
.emerg svg{flex:none;width:19px;height:19px;stroke:var(--clay);fill:none;stroke-width:2;margin-top:2px}

/* ---- clinic directory, grouped by region ----
   Addresses mirror elevior.netlify.app exactly (street + city, no ZIP -
   that source doesn't publish them). Add ZIPs to the <address> when known.
   Sites not yet open carry .soon and show no address. */
.loc-region + .loc-region{margin-top:46px}
.region-head{display:flex;align-items:baseline;gap:12px;border-bottom:2px solid var(--teal);
  padding-bottom:9px;margin-bottom:22px}
.region-head h3{font-size:1.3rem;margin:0}
.region-head .count{font-size:.78rem;font-weight:700;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.loc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.loc-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 22px;
  display:flex;flex-direction:column;box-shadow:var(--shadow);
  transition:border-color .15s,box-shadow .15s,transform .15s}
.loc-card:hover{border-color:var(--teal);box-shadow:0 12px 28px rgba(13,79,102,.13);transform:translateY(-3px)}
.loc-card .city{font-family:"gravita-geo-variable";font-weight:700;color:var(--teal-ink);
  font-size:1.16rem;line-height:1.25;margin:0;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.loc-card address{font-style:normal;color:var(--ink-soft);font-size:.95rem;line-height:1.55;
  margin:14px 0 0;flex:1}
.loc-card .lmeta{border-top:1px solid var(--line);margin-top:18px;padding-top:14px;
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.loc-card .lmeta a{font-family:"gravita-geo-variable";font-weight:700;font-size:.98rem}
.loc-card .dir{font-weight:700;font-size:.86rem;color:var(--clay)}
.loc-card .dir:hover{color:var(--clay-deep)}
/* not-yet-open sites: dashed, quieter, no address block */
.loc-card.soon{background:#f7fbfd;border-style:dashed;box-shadow:none}
.loc-card.soon:hover{transform:none;box-shadow:none;border-color:var(--teal)}
.loc-card.soon .city{color:var(--charcoal)}
.loc-card.soon address{color:#8aa5b0}
.soon-tag{font-family:"gravita-geo-variable";font-weight:700;font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--clay);background:var(--bg-warm);border:1px solid #f3ddc4;
  border-radius:999px;padding:3px 9px;white-space:nowrap}
.loc-note{text-align:center;color:var(--ink-soft);font-size:.9rem;margin:34px 0 0}

/* ---- referrals / patient-services panels ----
   Scoped to #refer so the shared .panel elsewhere is untouched: lets the list
   absorb the slack so both CTAs sit on the same baseline. */
#refer .panel{display:flex;flex-direction:column}
#refer .panel .plist{flex:1}
#refer .panel .btn{margin-top:22px;align-self:flex-start}
#refer .panel .panel-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
#refer .panel .panel-cta .btn{margin-top:0}

@media(max-width:1080px){
  .contact-grid{grid-template-columns:1fr;gap:32px}
  .crail{position:static;grid-template-columns:1fr 1fr}
  .crail .rail-card.accent{grid-column:1 / -1}
  .loc-cards{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .contact-lead{padding:44px 0}
  .cform{padding:26px 22px}
  .frow{grid-template-columns:1fr}
  .crail{grid-template-columns:1fr}
  .loc-cards{grid-template-columns:1fr}
}

/* ============================================================
   PROVIDER PROFILE - /provider.html
   One shared template until per-provider bios are approved. Photo
   and bio deliberately sit above the fold: the rail carries the
   headshot and every way to reach the provider, the main column
   opens with name, title, and biography before any credentials.
   ============================================================ */
.prov-lead{padding:34px 0 64px;background:linear-gradient(180deg,var(--bg-cool),#fff 320px)}
/* .crumbs is built for the dark page-hero; recolor it for this light lead */
.prov-lead .crumbs{margin-bottom:18px;color:var(--ink-soft);text-shadow:none}
.prov-lead .crumbs a{color:var(--teal-deep)}
.prov-lead .crumbs a:hover{color:var(--teal-ink)}
.prov-lead .crumbs .here{color:var(--ink-soft)}

.prov-grid{display:grid;grid-template-columns:340px 1fr;gap:46px;align-items:start}
.prov-rail{display:grid;gap:16px;position:sticky;top:100px}
/* portrait crop, same person-glyph placeholder as the directory cards.
   Drop a real headshot in as <img> inside .prov-photo - it covers the glyph. */
.prov-photo{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 8px 26px rgba(13,79,102,.09);
  background:#dde4e9 center/86px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8bcc6' stroke-width='1.5'%3E%3Ccircle cx='12' cy='8.5' r='4'/%3E%3Cpath d='M4.5 20.5c0-4 3.4-6.5 7.5-6.5s7.5 2.5 7.5 6.5'/%3E%3C/svg%3E")}
/* Headshots are transparent cut-outs, so a filled photo needs the brand gradient
   behind it - otherwise the grey placeholder glyph shows through the subject. */
.prov-photo:has(img){background:linear-gradient(135deg,#0d4f66,#178fbd) #0d4f66}
/* object-fit:cover just fills the frame, so head size drifted with each source
   crop (23%-43% of the frame). Same fix as .pphoto: scale and place each photo
   per provider so every portrait lands the same head size and headroom. */
.prov-photo img{position:absolute;width:var(--pv-w,100%);height:auto;max-width:none;
  left:var(--pv-x,0%);top:var(--pv-y,0%)}
.prov-btn{width:100%;justify-content:center}

.prov-main h1{font-size:clamp(2rem,4vw,2.9rem);letter-spacing:-.015em;margin:10px 0 0}
.prov-title{font-family:"gravita-geo-variable";font-weight:600;color:var(--teal-deep);
  font-size:1.12rem;margin:10px 0 0}
.prov-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0}
.prov-tags li{font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--teal-deep);background:var(--teal-tint);border-radius:999px;padding:5px 12px}
.prov-bio{margin-top:22px}
.prov-bio p{color:var(--ink-soft);margin:0 0 14px;max-width:68ch}
.prov-bio p:last-child{margin-bottom:0}
.prov-bio .lede{color:var(--ink);font-size:1.1rem}

.prov-sec{margin-top:40px;border-top:1px solid var(--line);padding-top:30px}
.prov-sec h2{font-size:1.35rem;margin-bottom:10px}
.prov-sec > p{color:var(--ink-soft);font-size:.96rem;margin:0 0 18px;max-width:68ch}
.prov-focus{grid-template-columns:1fr 1fr;gap:11px 28px}
.prov-focus a{color:var(--ink);font-weight:600}
.prov-focus a:hover{color:var(--teal-deep)}

/* training rows: label / institution / year, ruled like a CV */
.prov-cv{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.prov-cv li{display:grid;grid-template-columns:150px 1fr auto;gap:10px 18px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--line)}
.prov-cv small{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.prov-cv b{font-family:"gravita-geo-variable";font-weight:600;color:var(--teal-ink);font-size:1rem}
.prov-cv span{color:var(--ink-soft);font-size:.88rem}
.prov-cv-note{color:var(--ink-soft);font-size:.86rem;margin:14px 0 0}

.prov-locs{margin-top:4px}
.prov-back{margin:22px 0 0;font-weight:700}

@media(max-width:1080px){
  .prov-grid{grid-template-columns:280px 1fr;gap:32px}
}
@media(max-width:860px){
  .prov-grid{grid-template-columns:1fr;gap:30px}
  .prov-rail{position:static;max-width:420px}
  .prov-focus{grid-template-columns:1fr}
  .prov-cv li{grid-template-columns:1fr auto}
  .prov-cv small{grid-column:1 / -1}
}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* ---- legal pages (Notice of Privacy Practices) -------------------------
   Long statutory prose: narrow measure, clear hierarchy, and a definition
   list for the lettered clauses so the term stays tied to its paragraph. */
.wrap.legal{max-width:780px}
.legal .legal-eff{font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 18px}
.legal > .lede{color:var(--ink);font-size:1.06rem;margin:0 0 8px}
.legal h2{font-size:1.18rem;color:var(--teal-ink);margin:38px 0 12px;
  padding-bottom:9px;border-bottom:2px solid var(--teal)}
.legal p{color:var(--ink-soft);margin:0 0 14px}
.legal ul{margin:0 0 16px;padding-left:20px}
.legal li{color:var(--ink-soft);margin-bottom:7px}
.legal-list{margin:0 0 8px}
.legal-list dt{font-weight:700;color:var(--teal-deep);margin:18px 0 5px}
.legal-list dd{margin:0 0 10px;color:var(--ink-soft)}
.legal-list dd ul{margin:8px 0 4px}
.legal-address{font-style:normal;background:var(--bg-cool);border-left:3px solid var(--teal);
  border-radius:0 8px 8px 0;padding:16px 20px;margin:0 0 18px;color:var(--ink);line-height:1.7}
@media(max-width:640px){ .legal h2{font-size:1.06rem} }