/* Self-hosted Google Fonts (2026-08-25): Poppins 400-700, Inter 400-700,
   Fraunces italic 500-600 variable. latin + latin-ext. Replaces the remote
   fonts.googleapis.com stylesheet, which render-blocked site.css. */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500 600;
  font-display: swap;
  src: url(fonts/fraunces-500-600-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500 600;
  font-display: swap;
  src: url(fonts/fraunces-500-600-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/inter-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/inter-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/poppins-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/poppins-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/poppins-500-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/poppins-500-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/poppins-600-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/poppins-600-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/poppins-700-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/poppins-700-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Sports & Ortho — shared site styles
   Brand base extracted from homepage.html + inner-page components.
   Brand system source of truth: business/marketing/brand-foundation.md
   ============================================================ */

:root{
  --navy:#2D4A6B; --navy-hover:#426486; --coral:#FF5A3C; --coral-deep:#D8431E; --coral-tint:#FFE9E3; --gold:#FBBC04;
  --cream:#FAF6F1; --cool:#EEF1F5; --border:#E2E6ED; --ink:#16202E; --muted:#5B6472; --white:#fff;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* sao_img() (2026-08-25) wraps every image in <picture> for WebP; display:contents
   removes the wrapper from layout so all ".x img" sizing rules (flex/grid/height:100%)
   keep hitting the img as a direct child, exactly as before the migration. */
picture{display:contents}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;color:var(--ink);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Poppins',sans-serif;color:var(--navy);line-height:1.12;letter-spacing:-.5px;font-weight:700}
.accent{font-family:'Fraunces',serif;font-style:italic;font-weight:600;color:var(--coral);letter-spacing:0;padding-right:.14em}
a{color:inherit;text-decoration:none}
/* Inline body-copy link. The base rule above makes anchors invisible by design,
   so any link sitting inside a sentence needs this to be findable. */
.lnk{color:var(--coral-deep);font-weight:600}
.cta-box .lnk{color:#fff}
/* On the navy insurance band, links use the bright coral (matches the Request
   Appointment button) instead of the darker coral-deep, for contrast on navy. */
.band .lnk{color:var(--coral)}
.lnk:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-family:'Poppins';font-weight:600;text-transform:uppercase;letter-spacing:2px;font-size:12px;color:var(--coral-deep);margin-bottom:14px}
section .eyebrow{display:inline-block}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:'Poppins';font-weight:600;font-size:14px;letter-spacing:.3px;padding:14px 26px;border-radius:7px;cursor:pointer;border:2px solid transparent;white-space:nowrap;transition:transform .2s ease, background .2s ease, box-shadow .2s ease}
.btn-primary{background:var(--coral);color:#fff}
.btn-primary:hover{background:var(--coral-deep);transform:translateY(-2px)}
.btn-ghost{background:transparent;border-color:var(--navy);color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}
.btn-ghost-light{background:transparent;border-color:#fff;color:#fff}
.btn-ghost-light:hover{background:#fff;color:var(--navy)}

/* Header */
header{position:sticky;top:0;z-index:50;background:var(--navy);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.util{background:#214059;font-size:12.5px;color:#c9d4e2}
.util .wrap{display:flex;justify-content:flex-end;gap:22px;padding-top:8px;padding-bottom:8px}
.util a{transition:color .2s} .util a:hover{color:#fff}
.util .phone{color:#fff;font-weight:600;font-family:'Poppins'}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px}
.nav img{height:38px;display:block}
.nav-links{display:flex;gap:18px;margin:0 24px;font-family:'Poppins';font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:#e7edf4}
.nav-links a{position:relative;transition:color .2s} .nav-links a:hover{color:#fff}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--coral);transition:width .25s}
.nav-links a:hover::after{width:100%}
.nav-right{display:flex;align-items:center;gap:14px}
.nav-right .btn,.mobile-menu .btn{font-size:13px;text-transform:uppercase;letter-spacing:.6px}
.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:26px;cursor:pointer;line-height:1}
.mobile-menu{display:none;flex-direction:column;align-items:stretch;background:var(--navy);padding:6px 18px 22px;border-top:1px solid rgba(255,255,255,.12)}
.mobile-menu.open{display:flex}
.mobile-menu a:not(.btn){font-family:'Poppins';font-weight:500;font-size:16px;color:#e7edf4;text-align:center;padding:14px;border-bottom:1px solid rgba(255,255,255,.06);transition:color .2s}
.mobile-menu a:not(.btn):hover{color:#fff}
.mobile-menu .btn{display:flex;justify-content:center;width:100%;margin-top:10px}
/* Dropdown nav (desktop, hover) */
.nav-dd{position:relative;display:flex;align-items:center}
.nav-dd .cx{font-size:9px;margin-left:5px;opacity:.85;transition:transform .2s}
.nav-dd:hover .cx{transform:translateY(1px)}
.nav-dd-menu{position:absolute;top:100%;left:0;margin-top:12px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 22px 46px rgba(30,58,95,.18);min-width:254px;padding:10px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s;z-index:70}
.nav-dd-menu::before{content:'';position:absolute;top:-16px;left:0;right:0;height:16px}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{opacity:1;visibility:visible;transform:none}
.nav-dd-menu a{color:var(--navy);font-family:'Poppins';font-weight:500;font-size:14px;text-transform:none;letter-spacing:0;padding:11px 14px;border-radius:9px;white-space:nowrap;text-align:left}
.nav-dd-menu a::after{display:none}
.nav-dd-menu a:hover{background:var(--cream);color:var(--coral-deep)}
.nav-dd-menu a:hover::after{width:0}
/* Dropdown nav (mobile accordion inside hamburger) */
.mobile-menu details{border-bottom:1px solid rgba(255,255,255,.06)}
.mobile-menu summary{list-style:none;cursor:pointer;font-family:'Poppins';font-weight:500;font-size:16px;color:#e7edf4;text-align:center;padding:14px;display:flex;align-items:center;justify-content:center;gap:8px}
.mobile-menu summary::-webkit-details-marker{display:none}
.mobile-menu summary::after{content:'\25BE';font-size:11px;transition:transform .2s}
.mobile-menu details[open] summary::after{transform:rotate(180deg)}
.mobile-menu details a:not(.btn){display:block;font-size:14px;color:#c9d4e2;padding:11px;border-bottom:0}

/* Reveal animation */
/* Content is visible immediately on load. Reveals no longer start hidden and wait
   on the JS IntersectionObserver, which caused a blank-text flash on desktop and
   ran against the locked no-scroll-animation design direction. 2026-08-22 */
.reveal{opacity:1}
.reveal.in{opacity:1}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}}

/* Hero */
.hero{background:var(--cream);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;padding-top:72px;padding-bottom:72px}
.hero h1{font-size:clamp(38px,5vw,60px)}
/* Homepage only. `.hero` is used by 80 pages, so the larger display size is
   scoped to the front page via .hero--home and must stay that way. */
.hero--home h1{font-size:clamp(38px,6.2vw,75px);line-height:1;letter-spacing:-2px}
/* Translucent coral bar that passes BEHIND the second line, ported from the
   2026-07 "futuristic" mockup in the vyflow/sportsandortho repo. z-index:-1 is
   what makes it read as a highlight rather than an underline, and it needs the
   h1 to own a stacking context or the bar drops behind the section background.
   rgba is --coral (#FF5A3C) at 34%. Sized in em so it scales with the headline. */
.hero--home h1{position:relative;z-index:1}
.hero--home h1 .hero-highlight{position:relative;display:inline-block}
.hero--home h1 .hero-highlight::after{
  content:"";position:absolute;left:0;right:0;bottom:.05em;height:.16em;
  background:rgba(255,90,60,.34);border-radius:4px;z-index:-1;
}
/* Kinetic headline reveal, ported from the same mockup. Words are visible by
   default and only animate once site.js adds body.kinetic after first paint, so
   a JS failure can never leave the headline invisible. The highlight swipes in
   last, as the final word lands. */
.hero--home h1 .word{display:inline-block}
body.kinetic .hero--home h1 .word{
  opacity:0;transform:translateY(24px);filter:blur(6px);
  animation:wordIn .7s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes wordIn{to{opacity:1;transform:translateY(0);filter:blur(0)}}
body.kinetic .hero--home h1 .hero-highlight::after{
  transform:scaleX(0);transform-origin:left center;
  animation:swipeIn .55s cubic-bezier(.22,.61,.36,1) .62s forwards;
}
@keyframes swipeIn{to{transform:scaleX(1)}}
.hero h1 .accent{font-size:1.12em}
.hero p.sub{font-size:18px;color:var(--muted);margin:22px 0 30px;max-width:32em}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.trust-strip{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;font-size:14px;color:var(--muted);font-weight:500}
.trust-strip .star{color:var(--coral);font-weight:700}
.trust-strip b{color:var(--navy)}
.trust-strip .divider{width:1px;height:16px;background:var(--border)}
.hero-photo{position:relative;height:460px;border-radius:18px;overflow:hidden}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ph{position:relative;background:linear-gradient(135deg,#335D7D,#214059);display:flex;align-items:flex-end;color:#dfe8f2;font-size:13px;font-family:'Inter';font-weight:500}
.ph.warm{background:linear-gradient(135deg,#f3ded3,#e9cbbd);color:#8a6a5a}
.ph .cap{padding:14px 16px;display:flex;align-items:center;gap:8px;opacity:.85}
.ph .cap svg{width:18px;height:18px;flex:0 0 auto}

/* Generic section */
section.pad{padding:84px 0}
.sec-head{text-align:center;max-width:640px;margin:0 auto 48px}
.sec-head.left{text-align:left;margin-left:0}
/* A section header that IS the whole section: no content follows, so kill the gap (2026-08-03) */
.sec-head--solo{margin-bottom:0}
.sec-head .sec-cta{margin-top:26px}
.sec-head h2,.sec-head h1{font-size:clamp(28px,3.4vw,40px)}
.sec-head p{color:var(--muted);font-size:17px;margin-top:14px}
.bg-cream{background:var(--cream)} .bg-cool{background:var(--cool)} .bg-white{background:var(--white)}

/* Steps (first visit / how it works) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:step}
.step{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center;align-content:start;padding:36px 26px 30px;background:#fff;border:1px solid var(--border);border-radius:16px}
.step .num{width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;font-family:'Poppins';font-weight:700;font-size:20px;display:flex;align-items:center;justify-content:center}
.step h3{font-size:19px;margin-bottom:0}
.step p{grid-column:1/-1;margin-top:14px}
.step p{color:var(--muted);font-size:15px}

/* Social proof / testimonials */
.proof{background:var(--navy);color:#fff}
.proof h2{color:#fff}
.tst-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tst{background:#fff;border-radius:16px;padding:26px 24px;box-shadow:0 14px 34px rgba(8,20,36,.38);display:flex;flex-direction:column;transition:transform .25s, box-shadow .25s}
.tst:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(8,20,36,.45)}
.tst p{color:#3f5166;font-size:15px;line-height:1.6;flex:1;margin:0}
.tst .stars{color:var(--gold);margin-bottom:10px;letter-spacing:2px}
.tst .rev-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.tst .rev-head .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tst .g-mark{width:20px;height:20px;flex-shrink:0;margin-left:auto}
.tst .rev{margin-top:18px;display:flex;align-items:center;gap:12px}
.tst .avatar{width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;font-family:'Poppins';font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tst .who{font-family:'Poppins';font-weight:600;color:var(--navy);font-size:14px;line-height:1.2}
.tst .src{display:flex;align-items:center;gap:5px;font-size:12px;color:#7a8aa0;margin-top:3px}
.tst .src svg{width:12px;height:12px;flex-shrink:0}

/* Locations mini-grid */
.loc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.loc{background:#fff;border:1px solid var(--border);border-radius:12px;padding:20px 18px;text-align:center;font-family:'Poppins';font-weight:600;color:var(--navy);transition:transform .2s, box-shadow .2s, border-color .2s}
.loc:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(30,58,95,.10);border-color:var(--coral);color:var(--coral-deep)}
.loc span{display:block;font-family:'Inter';font-weight:400;font-size:12.5px;color:var(--muted);margin-top:4px}

/* Request appointment */
.request{background:var(--cream)}
.request .wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:start}
.request-copy h2{font-size:clamp(28px,3.4vw,40px)}
.request-copy p{color:var(--muted);font-size:17px;margin:20px 0 26px;max-width:34em}
.req-points{list-style:none;display:flex;flex-direction:column;gap:14px}
.req-points li{display:flex;gap:12px;align-items:center;font-size:15px;color:var(--ink);font-weight:500}
.req-points .tick{width:26px;height:26px;flex:0 0 auto;border-radius:50%;background:var(--coral-tint);color:var(--coral-deep);display:flex;align-items:center;justify-content:center}
.req-points .tick svg{width:14px;height:14px}
.req-card{background:var(--navy);border-radius:20px;padding:34px 32px 30px;box-shadow:0 26px 54px rgba(30,58,95,.18)}
.req-card h3{color:#fff;font-size:20px;margin-bottom:6px}
.req-card .lead{color:#aebccd;font-size:13.5px;margin-bottom:22px}
.req-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1 / -1}
.field label{font-family:'Poppins';font-weight:500;font-size:12px;color:#fff;letter-spacing:.2px;text-align:left}
.field label .req{color:var(--coral);font-weight:700;margin-left:1px}
.field label .opt{color:#fff;font-weight:400}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border-radius:8px;border:1px solid transparent;background:#fff;color:var(--ink);font-family:'Inter';font-size:14.5px;transition:box-shadow .15s}
.field textarea{resize:vertical;min-height:82px;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:#9aa6b4}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6472' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:15px;padding-right:38px;cursor:pointer}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(255,90,60,.5)}
.req-card .lead .req{color:var(--coral);font-weight:700}
.checkline{display:flex;align-items:center;gap:9px;color:#dbe4ee;font-size:13.5px;font-weight:500;cursor:pointer}
.checkline input{width:16px;height:16px;flex:0 0 auto;accent-color:var(--coral);cursor:pointer}
/* Conditional field disclosures (secondary insurance, referring doctor).
   display:contents keeps the revealed fields participating in .req-grid
   instead of forming a nested one-column block. */
.req-secondary,.req-reveal{display:none}
.req-secondary.is-open,.req-reveal.is-open{display:contents}
.req-submit{margin-top:8px}
.req-submit button{width:100%;justify-content:center;font-size:15px;padding:15px}
.req-fine{color:#93a3ba;font-size:11.5px;margin-top:6px;text-align:center}
/* Contact form (shared part) uses white required asterisks for legibility on the navy card; scoped so the request form keeps its coral ones. */
#saoContactForm .req{color:#fff}

/* Final CTA */
.final{background:var(--cream);text-align:center}
.final h2{font-size:clamp(30px,4vw,48px)}
.final p{color:var(--muted);font-size:18px;margin:16px 0 30px}
.final .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* Footer */
footer{background:var(--navy);color:#c3d0e0;padding:64px 0 30px}
.foot-nav{display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap;padding-bottom:36px;border-bottom:1px solid #2c4d70}
.foot-nav img{height:40px;margin:0}
.foot-links{display:flex;gap:14px;flex-wrap:wrap}
.foot-links a{color:#fff;font-family:'Poppins';font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;transition:color .2s}
.foot-links a:hover{color:var(--coral)}
footer img{height:40px;margin-bottom:16px}
footer h4{color:#fff;font-family:'Poppins';font-size:14px;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px}
.foot-clinics{padding-bottom:34px;border-bottom:1px solid #2c4d70;margin-bottom:36px}
.clinic-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px 22px}
.clinic-grid a{display:block;text-align:center;transition:color .2s}
.clinic-grid .cn{display:block;color:#fff;font-size:14px;font-weight:600;margin-bottom:2px}
.clinic-grid .cp{display:block;color:#9fb0c4;font-size:13px}
.clinic-grid a:hover .cn,.clinic-grid a:hover .cp{color:var(--coral)}

/* Partner logo grid (/about/partnerships/) */
.partner-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.partner{background:#fff;border:1px solid var(--border);border-radius:14px;padding:26px 18px 22px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px;text-align:center;transition:transform .2s,box-shadow .2s}
.partner:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(30,58,95,.12)}
.partner img{height:96px;width:auto;max-width:100%;object-fit:contain}
.partner .pname{font-family:'Poppins';font-weight:600;font-size:14.5px;color:var(--navy);line-height:1.3}
.foot-bottom a{color:#93a3ba;text-decoration:underline;text-underline-offset:2px;transition:color .2s}
.foot-bottom a:hover{color:var(--coral)}
.foot-bottom{display:flex;justify-content:center;text-align:center;align-items:center;flex-wrap:wrap;gap:14px;padding-top:24px;font-size:13px;color:#93a3ba}
.socials{display:flex;gap:14px}
.socials a{width:34px;height:34px;border-radius:50%;background:#2c4d70;display:flex;align-items:center;justify-content:center;color:#fff;transition:background .2s}
.socials a:hover{background:var(--coral)}
.socials svg{width:16px;height:16px}
.socials.socials-brand{gap:10px}
.socials.socials-brand a{background:none;width:24px;height:24px;border-radius:6px;transition:transform .15s,opacity .15s}
.socials.socials-brand a:hover{background:none;transform:translateY(-2px);opacity:.85}
.socials.socials-brand svg{width:24px;height:24px}

/* Sticky mobile call bar */
.callbar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:60;background:#fff;padding:10px 12px;gap:10px;box-shadow:0 -4px 14px rgba(0,0,0,.15)}
/* iOS Chrome paints the end-of-scroll underlap from the body bg (white), ignoring
   html's navy. This navy filler sits just below the fixed call-bar — off-screen
   during normal scroll, it only fills that underlap so no white shows under the footer. */
.callbar::after{content:"";position:absolute;left:0;right:0;top:100%;height:100vh;background:var(--navy);pointer-events:none}
.callbar a{flex:1;text-align:center;padding:13px 6px;border-radius:8px;font-family:'Poppins';font-weight:600;font-size:clamp(12px,3.4vw,14px);white-space:nowrap;border:2px solid transparent}
.callbar .cb-call{border-color:var(--navy);color:var(--navy);background:#fff}
.callbar .cb-req{background:var(--coral);color:#fff}

/* ============================================================
   INNER-PAGE COMPONENTS (services / treatments / locations / resources)
   ============================================================ */

.crumb{font-size:13px;color:var(--muted);padding:16px 0 0}
.crumb a{transition:color .2s} .crumb a:hover{color:var(--coral-deep)}
.crumb .sep{margin:0 8px;opacity:.5}

.prose{max-width:720px}
.prose p{color:var(--muted);font-size:17px;margin-bottom:16px}

/* Checklist ("who this is for") */
.checks{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:16px 34px;max-width:900px;margin:0 auto}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--ink);font-weight:500}
.checks .tick{width:26px;height:26px;flex:0 0 auto;border-radius:50%;background:var(--coral-tint);color:var(--coral-deep);display:flex;align-items:center;justify-content:center;margin-top:1px}
.checks .tick svg{width:14px;height:14px}

/* Approach cards ("how we treat it") */
.approach{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.appr{background:#fff;border:1px solid var(--border);border-radius:14px;padding:26px 26px;transition:transform .25s, box-shadow .25s, border-color .25s}
.appr:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(30,58,95,.09);border-color:#cfd8e4}
.appr .ico{width:46px;height:46px;border-radius:12px;background:var(--coral-tint);color:var(--coral-deep);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.appr .ico svg{width:24px;height:24px}
.appr .ico img{width:30px;height:30px;display:block}
.appr .ico{font-family:'Poppins';font-weight:700;font-size:20px;line-height:1}
.appr h3{font-size:18px;margin-bottom:8px}
.appr p{color:var(--muted);font-size:15px;margin-bottom:10px}
.appr .link{color:var(--coral-deep);font-family:'Poppins';font-weight:600;font-size:13.5px}
/* Bottom-align the CTA links across cards of unequal text length. The grid already
   stretches cards to equal height; flex-column + margin-top:auto drops every link
   to the same baseline. 2026-08-22 */
.approach--links .appr{display:flex;flex-direction:column}
.approach--links .appr .link{margin-top:auto}
/* Heading sits beside the icon on approach cards (2026-08-02, Tarek). Scoped with
   :has() on purpose: 105 .appr cards carry no .ico and must keep their original
   stacked spacing. Browsers without :has() simply fall back to that stacked layout. */
.appr:has(> .ico){display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;align-content:start}
.appr:has(> .ico) > .ico{margin-bottom:0}
.appr:has(> .ico) > h3{margin-bottom:0}
.appr:has(> .ico) > p{grid-column:1/-1;margin:14px 0 10px}
.appr:has(> .ico) > .link{grid-column:1/-1}
/* Locations hub: clinic name sits beside the pin icon; 3-col here (was an inline style that broke the mobile breakpoints) */
.approach--clinics{grid-template-columns:repeat(3,1fr)}
.approach--clinics .appr{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;align-content:start}
.approach--clinics .appr .ico{margin-bottom:0}
.approach--clinics .appr h3{margin-bottom:0}
.approach--clinics .appr .addr{grid-column:1/-1;margin:12px 0 0;min-height:48px}
.approach--clinics .appr .tel{grid-column:1/-1;margin:2px 0 10px}
.approach--clinics .appr .link{grid-column:1/-1;color:var(--navy)}
.approach--clinics .appr .link:hover{color:var(--navy-hover)}
/* Whole location card clickable: the View Clinic link stretches over the card,
   while the tel link stays above it so the phone number is still tappable. */
.approach--clinics .appr{position:relative}
.approach--clinics .appr .link::after{content:"";position:absolute;inset:0}
.approach--clinics .appr .tel a{position:relative;z-index:1}

/* Split content + media */
.split .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split-media{height:400px;border-radius:18px;overflow:hidden}
.split-media img{width:100%;height:100%;object-fit:cover;display:block}
/* Soft float shadow on the large feature images only, ported from the 2026-07
   futuristic mockup (navy translated from #2D4A6B to the locked #1E3A5F). The
   heavy negative spread is what lifts the card instead of ringing it. Kept off
   the small thumbs (.member .ph, .post .img), where a 40/80px shadow would
   swamp the card. */
.hero-photo,.split-media{box-shadow:0 40px 80px -50px rgba(30,58,95,.5)}
.split h2{font-size:clamp(26px,3.2vw,38px)}
.split p{color:var(--muted);font-size:17px;margin-top:18px}
/* "Our approach" on service pages with no photo: collapse the 2-up split to one
   centered column so the copy stands on its own (image removed to cut the number
   of per-service photos needed). Keeps .split's h2/p typography. 2026-08-23 */
.split--noimg .wrap{grid-template-columns:1fr;max-width:800px;text-align:center}

/* Info band (insurance / cost) */
.band{background:var(--navy);color:#fff}
.band .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;padding-top:56px;padding-bottom:56px}
.band h2{color:#fff;font-size:clamp(24px,3vw,34px)}
.band p{color:#c3d0e0;font-size:16px;margin-top:14px}
.band .band-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}
/* Trailing CTA (last section before footer): lighten so it reads as its own block, not part of the navy footer */
section.band:last-of-type,section.news:last-of-type{background:var(--cream)}
section.band:last-of-type h2,section.news:last-of-type h2{color:var(--navy)}
section.band:last-of-type p,section.news:last-of-type p{color:var(--muted)}
section.band:last-of-type .eyebrow,section.news:last-of-type .eyebrow{color:var(--coral-deep)!important}
section.band:last-of-type .btn-ghost-light{border-color:var(--navy);color:var(--navy)}
section.band:last-of-type .btn-ghost-light:hover{background:var(--navy);color:#fff}
/* Opt a closing band to a WHITE background (keeps the last-of-type navy text) so it
   separates from a cream section directly above it, e.g. the request-appointment FAQ. */
section.band.band--white:last-of-type{background:#fff}
section.news:last-of-type input{border:1px solid var(--border)}
section.news:last-of-type .fine{color:var(--muted)}

/* Team / specialists */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,288px);justify-content:center;gap:24px}
/* Resting float shadow: the .hero-photo/.split-media shadow at half scale, so a
   288px card gets the same treatment without being swamped by it. */
.member{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;text-align:center;transition:transform .25s, box-shadow .25s;box-shadow:0 20px 40px -25px rgba(30,58,95,.5)}
.member:hover{transform:translateY(-5px);box-shadow:0 30px 56px -24px rgba(30,58,95,.55)}
.member .ph{height:240px}
.member .body{padding:22px 20px}
.member h3{font-size:18px}
.member .role{color:var(--coral-deep);font-family:'Poppins';font-weight:600;font-size:13px;margin:5px 0 8px}
.member p{color:var(--muted);font-size:14px}
/* Bio-page credential string, sits under the h1 on /team/{slug}/ */
.cred{font-family:'Poppins';font-weight:600;font-size:13px;letter-spacing:1.4px;text-transform:uppercase;color:var(--coral-deep);margin-top:10px}

/* Chips ("conditions this helps") */
.chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.chips:has(.chip-row){flex-direction:column;align-items:center}
.chip-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.chip{background:#fff;border:1px solid var(--border);border-radius:999px;padding:11px 22px;font-family:'Poppins';font-weight:600;font-size:14px;color:var(--navy);transition:transform .2s, border-color .2s, color .2s}
.chip:hover{border-color:var(--coral);color:var(--coral-deep);transform:translateY(-2px)}

/* FAQ accordion (native details/summary, no JS) */
.faq{max-width:820px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--border);border-radius:12px;margin-bottom:14px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:20px 24px;font-family:'Poppins';font-weight:600;font-size:16.5px;color:var(--navy);display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--coral);font-size:26px;font-weight:400;line-height:1;transition:transform .2s;flex:0 0 auto}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 24px 22px;color:var(--muted);font-size:15.5px}
.faq .ans a{color:var(--coral-deep);font-weight:600}

/* ============ Responsive ============ */
@media(max-width:960px){
  .hero .wrap,.request .wrap{grid-template-columns:1fr;gap:36px}
  .hero-photo{height:340px;order:-1}
  .steps,.tst-grid{grid-template-columns:1fr 1fr}
  .loc-grid{grid-template-columns:repeat(2,1fr)}
  .foot-nav{justify-content:center}
  .foot-links{justify-content:center}
  .clinic-grid{grid-template-columns:repeat(3,1fr)}
  .partner-grid{grid-template-columns:repeat(2,1fr)}
  .nav-links{display:none}
  .menu-toggle{display:block}
  .util .wrap{justify-content:center;gap:16px}
  .nav .wrap{justify-content:center;position:relative}
  .nav-right{position:absolute;right:28px;top:50%;transform:translateY(-50%);gap:0}
  .nav-right .btn{display:none}
  /* inner-page components */
  .band .wrap,.split .wrap{grid-template-columns:1fr;gap:32px}
  .approach,.team-grid{grid-template-columns:1fr 1fr}
  /* Pages set an inline grid-template-columns:repeat(3|4,1fr) on .approach for desktop;
     inline styles beat this media rule, so force the responsive collapse (2026-08-22). */
  .approach{grid-template-columns:1fr 1fr!important}
  /* Review grids also carry inline repeat(2|3) per page; force the tablet collapse too. */
  .tst-grid{grid-template-columns:1fr 1fr!important}
  /* One-off contact-us clinic directory: 2-up on tablet (inline repeat(3), no other collapse). */
  .clinic-dir{grid-template-columns:repeat(2,1fr)!important}
  .band .band-cta{justify-content:flex-start}
}
@media(max-width:600px){
  .wrap{padding:0 18px}
  .nav img{height:34px}
  .nav-right{right:18px}
  .steps,.tst-grid,.loc-grid,.req-grid,.checks,.approach,.team-grid{grid-template-columns:1fr}
  .loc-grid{grid-template-columns:1fr !important}
  /* Same inline-override reason as the 960px block: force .approach to a single column. */
  .approach{grid-template-columns:1fr!important}
  /* One-off pricing grid: stack the two cards on mobile (inline repeat(2) has no other collapse). */
  .pricing-grid{grid-template-columns:1fr!important}
  /* Review grids carry inline repeat(2|3) per page; force the single-column collapse. */
  .tst-grid:not(.tst-grid--loc){grid-template-columns:1fr!important}
  /* Contact-us clinic directory: single column on phones. */
  .clinic-dir{grid-template-columns:1fr!important}
  /* Location review cards: horizontal swipe on mobile instead of cramped columns */
  .tst-grid--loc{display:flex !important;grid-template-columns:none !important;max-width:none !important;overflow-x:auto;gap:14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:10px}
  .tst-grid--loc>.tst{flex:0 0 82%;scroll-snap-align:start}
  section.pad{padding:56px 0}
  .callbar{display:flex;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  /* Callbar clearance lives on the (navy) footer, not the body, so the reserved
     strip reads navy instead of a white gap under the footer. html bg navy so the
     iOS collapsing-toolbar area at end-of-scroll paints navy too, not white. */
  html{background:var(--navy)}
  footer{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  .hero-copy,.request-copy{text-align:center}
  /* Team bios: center the About/Credentials section headers on mobile (only team
     pages use .sec-head.left; desktop stays left-aligned). */
  .sec-head.left{text-align:center;margin-left:auto;margin-right:auto}
  /* ...and center the About paragraph text on mobile too. */
  .bio-about{text-align:center}
  .hero-cta,.trust-strip{justify-content:center}
  .req-points{width:-moz-fit-content;width:fit-content;margin-left:auto;margin-right:auto}
  /* iOS renders type=date abnormally tall; match the other fields (44px, border-box) */
  .field input[type="date"]{-webkit-appearance:none;appearance:none;height:44px;min-height:0}
  .field input[type="date"]::-webkit-date-and-time-value{text-align:left;margin:0}
  /* inner-page mobile centering */
  .split .wrap,.band .wrap{text-align:center}
  .split-media{height:280px;order:-1}
  .band .band-cta{justify-content:center}
  /* Center the whole checklist as a block so the coral ticks stay column-aligned,
     instead of centering each row (which staggered the ticks by text length). 2026-08-22 */
  .checks{width:-moz-fit-content;width:fit-content;max-width:100%;margin-inline:auto}
  .checks li{justify-content:flex-start;text-align:left}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;animation:none!important}
  html{scroll-behavior:auto}
  *{transition:none!important}
  /* site.js already refuses to add body.kinetic under reduced motion; this is the
     belt-and-braces half, so the headline can never be stuck at opacity:0. */
  body.kinetic .hero--home h1 .word{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
  body.kinetic .hero--home h1 .hero-highlight::after{transform:none!important;animation:none!important}
}

/* ============================================================
   RESOURCES / ARTICLE TEMPLATE
   ============================================================ */
.article-hero{background:var(--cream)}
.article-hero .wrap{max-width:840px;padding-top:52px;padding-bottom:8px;text-align:center}
.article-cat{font-family:'Poppins';font-weight:600;text-transform:uppercase;letter-spacing:2px;font-size:12px;color:var(--coral-deep);margin-bottom:16px}
.article-hero h1{font-size:clamp(30px,4vw,46px);max-width:16em;margin:0 auto;letter-spacing:-.5px}
.article-deck{color:var(--muted);font-size:19px;margin:20px auto 0;max-width:36em;line-height:1.55}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 18px;margin-top:26px;font-size:14px;color:var(--muted)}
.article-meta .by{display:inline-flex;align-items:center;gap:9px}
.article-meta .avatar{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;font-family:'Poppins';font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center}
.article-meta .dot{width:3px;height:3px;border-radius:50%;background:#c3ccd8}
.reviewed{display:inline-flex;align-items:center;gap:6px;background:var(--coral-tint);color:var(--coral-deep);font-family:'Poppins';font-weight:600;font-size:12.5px;padding:6px 12px;border-radius:999px}
.reviewed svg{width:14px;height:14px;flex:0 0 auto}
.article-feature{max-width:960px;margin:36px auto 0;height:440px;border-radius:18px;overflow:hidden}
.article-feature img{width:100%;height:100%;object-fit:cover;display:block}

.article-body{max-width:720px;margin:0 auto;padding:14px 28px 0}
.article-body p{font-size:18px;color:#2b3746;margin-bottom:22px;line-height:1.75}
.article-body h2{font-size:clamp(24px,3vw,30px);margin:42px 0 14px}
.article-body h3{font-size:21px;margin:30px 0 10px}
.article-body ul,.article-body ol{margin:0 0 24px 22px;color:#2b3746;font-size:18px;line-height:1.75}
.article-body li{margin-bottom:10px}
.article-body a{color:var(--coral-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.article-body strong{color:var(--navy)}
/* Checklists inside long-form / legal article bodies read as ONE clean column with
   comfortable spacing, not the 2-up feature grid the global .checks uses. This fixes
   the ragged, "all over the place" look on the privacy page. 2026-08-22 */
.article-body .checks{grid-template-columns:1fr;gap:14px;max-width:none;margin:0 0 26px}
.article-body .checks li{font-size:17px;line-height:1.6;color:#2b3746}
.article-body figure{margin:14px 0 26px}
.article-body figure img{width:100%;border-radius:14px;display:block}
.article-body figcaption{font-size:13.5px;color:var(--muted);text-align:center;margin-top:10px}
.pullquote{border-left:4px solid var(--coral);padding:4px 0 4px 26px;margin:32px 0;font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:25px;color:var(--navy);line-height:1.42}
.callout{background:var(--cream);border:1px solid var(--border);border-radius:14px;padding:24px 26px;margin:32px 0}
.callout h4{font-family:'Poppins';font-size:16px;color:var(--navy);margin-bottom:8px}
.callout p{font-size:16px;margin-bottom:0;line-height:1.65}

.sources{max-width:720px;margin:44px auto 0;padding:24px 28px 0;border-top:1px solid var(--border)}
.sources h4{font-family:'Poppins';font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin-bottom:12px}
.sources ol{margin-left:18px;color:var(--muted);font-size:13.5px;line-height:1.7}
.sources a{color:var(--coral-deep)}

.author-card{max-width:720px;margin:34px auto 0;background:#fff;border:1px solid var(--border);border-radius:16px;padding:26px;display:flex;gap:22px;align-items:center}
.author-card .ph{width:88px;height:88px;border-radius:50%;flex:0 0 auto}
.author-card .who{font-family:'Poppins';font-weight:700;color:var(--navy);font-size:17px}
.author-card .role{color:var(--coral-deep);font-family:'Poppins';font-weight:600;font-size:13px;margin:3px 0 8px}
.author-card p{color:var(--muted);font-size:14.5px;margin:0}

.cta-box{max-width:720px;margin:40px auto 0;background:var(--navy);border-radius:18px;padding:36px 34px;text-align:center;color:#fff}
.cta-box h3{color:#fff;font-size:24px}
.cta-box p{color:#c3d0e0;font-size:16px;margin:12px 0 22px}
.cta-box .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Related posts (article cards) */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:transform .25s, box-shadow .25s;box-shadow:0 20px 40px -25px rgba(30,58,95,.5)}
.post:hover{transform:translateY(-5px);box-shadow:0 30px 56px -24px rgba(30,58,95,.55)}
.post .img{height:170px}
.post .img img{width:100%;height:100%;object-fit:cover;display:block}
.post .body{padding:22px}
.post .date{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-weight:600}
.post h3{font-size:17px;margin:8px 0 10px;line-height:1.3}
.post .link{color:var(--coral-deep);font-family:'Poppins';font-weight:600;font-size:14px}

/* Newsletter */
.news{background:var(--navy);color:#fff;text-align:center}
.news h2{color:#fff;font-size:clamp(26px,3.2vw,38px)}
.news p{color:#c3d0e0;font-size:17px;margin:14px 0 28px}
.news form{display:flex;gap:12px;max-width:480px;margin:0 auto;justify-content:center;flex-wrap:wrap}
.news input{flex:1;min-width:220px;padding:15px 18px;border-radius:8px;border:0;font-family:'Inter';font-size:15px}
.news .fine{margin-top:14px;font-size:12.5px;color:#93a3ba}
.news .fine a{color:#c3d0e0;text-decoration:underline;text-underline-offset:2px}
/* Inline signup status. Hidden until JS shows it, so it reserves no space. */
.news .news-status{display:none;margin-top:16px;font-family:'Poppins';font-weight:600;font-size:15px;color:#fff}
.news .news-status.is-shown{display:block}
.news .news-status.is-error{color:#ffb4a8}
/* The band flips to cream when it is the last section on the page (rule ~line 227),
   so the status + link colors have to flip with it. */
section.news:last-of-type .fine a{color:var(--muted)}
section.news:last-of-type .news-status{color:var(--navy)}
section.news:last-of-type .news-status.is-error{color:#b3261e}

/* Form status line inside the navy card (request form + contact form).
   The card is always navy, so the status text must be light. Set here rather
   than inline from site.js: dark red (#b3261e) on navy was unreadable. */
.req-card .req-status{color:#fff}
.req-card .req-status.is-error{color:#ffb4a8}

@media(max-width:960px){
  .article-feature{height:340px;border-radius:14px;margin-left:18px;margin-right:18px}
  .blog-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .article-feature{height:240px}
  .article-body{font-size:17px}
  .article-body p,.article-body ul,.article-body ol{font-size:17px}
  .pullquote{font-size:22px}
  .author-card{flex-direction:column;text-align:center}
  .blog-grid{grid-template-columns:1fr}
}

/* ============================================================
   LOCATION PAGE TEMPLATE
   ============================================================ */
/* Clinic photo gallery (hero) */
.gallery{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:14px;height:440px}
.gallery .g{border-radius:14px;overflow:hidden;position:relative}
.gallery .g:first-child{grid-row:span 2}
.gallery .g img{width:100%;height:100%;object-fit:cover;display:block}

/* NAP + hours + map row */
.clinic-info{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.info-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:28px 28px;box-shadow:0 16px 38px -26px rgba(30,58,95,.42)}
.info-card h3{font-size:18px;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.info-card h3 svg{width:20px;height:20px;color:var(--coral-deep)}
.info-card .row{display:flex;gap:12px;margin-bottom:15px;font-size:15px;color:var(--ink);line-height:1.5}
.info-card .row:last-child{margin-bottom:0}
.info-card .row svg{width:19px;height:19px;color:var(--coral-deep);flex:0 0 auto;margin-top:2px}
.info-card .row a{color:var(--coral-deep);font-weight:600}
/* Contact page "By phone" directory: coral phone numbers (match the location cards). */
.cdir .link{color:var(--coral-deep);font-weight:600}
.hours{list-style:none;display:flex;flex-direction:column;gap:0}
.hours li{display:flex;justify-content:space-between;font-size:15px;color:var(--ink);padding:9px 0;border-bottom:1px solid var(--border)}
.hours li:last-child{border-bottom:0}
.hours li span:first-child{color:var(--muted)}
.map-wrap{border-radius:18px;overflow:hidden;border:1px solid var(--border);min-height:360px}
.map-wrap iframe{width:100%;height:100%;border:0;display:block;min-height:360px}

/* Insurance payer list */
.payers{columns:3;column-gap:34px;max-width:860px;margin:0 auto;list-style:none}
.payers li{break-inside:avoid;padding:9px 0;font-size:15px;color:var(--ink);display:flex;gap:9px;align-items:baseline}
.payers li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--coral);flex:0 0 auto;transform:translateY(-2px)}

/* Sitemap link columns (was an inline columns:3 that never collapsed on mobile).
   .foot-col has no base styles, so the links need block display or they run together. */
.sitemap-cols{columns:3;column-gap:24px}
.sitemap-cols .foot-col{break-inside:avoid;margin:0 0 24px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:22px 24px;box-shadow:0 1px 2px rgba(30,58,95,.04)}
.sitemap-cols .foot-col h4{font-family:'Poppins';font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);margin:0 0 12px;padding-bottom:11px;border-bottom:2px solid var(--coral-tint)}
.sitemap-cols .foot-col a{display:block;padding:5px 0;color:var(--muted);text-decoration:none;font-size:14.5px;line-height:1.45;transition:color .15s}
.sitemap-cols .foot-col a:hover{color:var(--coral-deep)}

/* Reviews header (rating summary) */
.review-head{text-align:center;margin-bottom:36px}
.review-head .big{font-family:'Poppins';font-weight:700;font-size:52px;color:#fff;line-height:1}
.review-head .stars{color:var(--gold);letter-spacing:3px;font-size:20px;margin:8px 0 6px}
.review-head .sub{color:#b9c6d8;font-size:15px}

/* Services-offered tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tile{background:#fff;border:1px solid var(--border);border-radius:14px;padding:20px 22px;display:flex;align-items:center;gap:14px;font-family:'Poppins';font-weight:600;color:var(--navy);transition:transform .2s, box-shadow .2s, border-color .2s}
.tile:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(30,58,95,.10);border-color:#cfd8e4}
.tile .go{margin-left:auto;color:var(--coral);font-weight:700;font-size:18px;transition:transform .2s}
.tile:hover .go{transform:translateX(4px)}
/* "See All Services" on the location pages. A modifier, never a .tile override:
   190 tiles share that class and only this one is the primary action in its grid.
   Must stay AFTER .tile:hover, which sets border-color at equal specificity. */
.tile--cta{background:var(--coral);border-color:var(--coral);color:#fff}
.tile--cta .go{color:#fff}
.tile--cta:hover{background:var(--coral-deep);border-color:var(--coral-deep)}

@media(max-width:960px){
  .clinic-info{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr 1fr}
  .payers{columns:2}
  .sitemap-cols{columns:2}
  .gallery{height:360px}
}
@media(max-width:600px){
  .sitemap-cols{columns:1}
  .clinic-grid{grid-template-columns:repeat(2,1fr);gap:14px 16px}
  .partner-grid{grid-template-columns:1fr 1fr;gap:14px}
  .partner img{height:72px}

  .gallery{grid-template-columns:1fr 1fr;grid-template-rows:auto;height:auto}
  .gallery .g{height:150px}
  .gallery .g:first-child{grid-column:span 2;height:220px;grid-row:auto}
  .tiles{grid-template-columns:1fr}
  .payers{columns:1;width:-moz-fit-content;width:fit-content;max-width:100%}
  .map-wrap{min-height:300px}
}

/* Global desktop scale (Tarek, 2026-07-21): render the whole site at 90% on desktop.
   Mobile (<=960px) stays at 100% — those breakpoints were QA'd separately. */
@media (min-width:961px){body{zoom:.9}}

/* ============================================================
   HOMEPAGE-ONLY COMPONENTS (front-page.php)
   Moved out of homepage.html's inline <style> when the homepage
   was ported (2026-07-21) so site.css is the single source of
   truth. Without these, homepage images render unconstrained.
   ============================================================ */
/* Friction bar */
.friction{background:var(--navy);color:#fff}
.friction .wrap{display:flex;align-items:center;justify-content:center;gap:16px 40px;flex-wrap:wrap;padding-top:22px;padding-bottom:22px;text-align:center}
.friction strong{font-family:'Poppins';font-weight:600;font-size:17px}
.friction .ins{display:flex;gap:26px;flex-wrap:wrap;opacity:.85;font-weight:600;font-size:14px;color:#cdd8e6}

/* Insurance logo marquee */
.ins-marquee{overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ins-track{display:flex;align-items:center;width:max-content;animation:ins-marquee 34s linear infinite}
.ins-chip{flex:0 0 auto;height:26px;display:flex;align-items:center;margin-right:48px}
.ins-chip img{height:100%;width:auto;object-fit:contain;opacity:.9}
@keyframes ins-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Conditions grid */
.cond-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cond{background:#fff;border:1px solid var(--border);border-radius:14px;padding:26px 24px;display:flex;align-items:center;gap:16px;transition:transform .25s, box-shadow .25s, border-color .25s}
.cond:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(30,58,95,.09);border-color:#cfd8e4}
.cond .ico{width:48px;height:48px;flex:0 0 auto;border-radius:12px;background:var(--coral-tint);display:flex;align-items:center;justify-content:center;color:var(--coral-deep)}
.cond .ico svg{width:24px;height:24px}
.cond .ico img{width:30px;height:30px;display:block}
.cond h3{font-size:17px}
.cond .go{margin-left:auto;color:var(--coral);font-weight:700;font-family:'Poppins';font-size:20px;transition:transform .2s}
.cond:hover .go{transform:translateX(4px)}

/* Differentiator */
.diff .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
/* The photo spans the full text column: top edge level with the eyebrow,
   bottom edge level with the bottom of the buttons. align-self:stretch opts
   this one item out of the wrap's align-items:start, so the box takes the grid
   row height and tracks the copy at any width instead of guessing a px value.
   The single-column breakpoints below must set an explicit height, or a
   stretched item with no sibling collapses to the image's natural height. */
.diff-photo{position:relative;align-self:stretch;border-radius:18px;overflow:hidden}
/* Absolute, not in flow: an in-flow img resolves height:100% against a parent
   whose height is still being computed, falls back to its natural height, and
   then becomes the tallest grid item, so the row would size to the photo
   instead of the copy. Out of flow, .diff-photo has no intrinsic height. */
.diff-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.diff h2{font-size:clamp(28px,3.4vw,40px)}
.diff p{color:var(--muted);font-size:17px;margin:20px 0 28px}
.diff .diff-cta{display:inline-flex;flex-direction:column;align-items:center}
.diff .diff-btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-start}

/* Services cards */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.svc{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:transform .25s, box-shadow .25s;box-shadow:0 20px 40px -25px rgba(30,58,95,.5)}
.svc:hover{transform:translateY(-5px);box-shadow:0 30px 56px -24px rgba(30,58,95,.55)}
.svc .img{height:200px}
.svc .img img{width:100%;height:100%;object-fit:cover;display:block}
.svc .body{padding:24px}
.svc h3{font-size:19px;margin-bottom:8px}
.svc p{color:var(--muted);font-size:15px;margin-bottom:16px}
.svc .link{color:var(--coral-deep);font-family:'Poppins';font-weight:600;font-size:14px}
/* Hub variant of the service card (conditions + services hubs). The whole card is
   the link here, not a "Learn more" anchor inside a div, so the tap target is the
   card. Never restyle bare .svc for this: the homepage uses it too. */
.svc--hub{display:block}
.svc--hub .link{display:inline-block}
@media(min-width:961px){
  /* A section whose entire grid is two cards otherwise sits left-packed in the
     3-column track with a hole on the right. Centre the pair while keeping each
     card exactly the width it would be in a 3-up row: two columns plus one 24px
     gap. Scoped to >=961px because the grid is already 2-up below that, where
     a pair fills the row on its own. */
  .svc-grid:has(> :last-child:nth-child(2)),
  .blog-grid:has(> :last-child:nth-child(2)){
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:calc((100% - 48px) / 3 * 2 + 24px);
    margin-inline:auto;
  }
}

/* Treatments */
.treat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.treat{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:transform .25s, box-shadow .25s, border-color .25s;box-shadow:0 20px 40px -25px rgba(30,58,95,.5)}
.treat:hover{transform:translateY(-5px);box-shadow:0 30px 56px -24px rgba(30,58,95,.55);border-color:#cfd8e4}
.treat .img{height:200px}
.treat .ph{height:200px}
.treat .img img{width:100%;height:100%;object-fit:cover;display:block}
.treat .body{padding:24px 28px 28px}
.treat h3{font-size:19px;margin-bottom:10px}
.treat p{color:var(--muted);font-size:15px;margin-bottom:16px}
.treat .link{color:var(--coral-deep);font-family:'Poppins';font-weight:600;font-size:14px}
/* Homepage services + treatments cards are text-only sitewide (all viewports),
   matching the hub cards: header + subtext + Learn More, no photo. */
#services .svc .img,#treatments .treat .img{display:none}


/* Social-proof stats (count-up row) */
.stats{display:flex;justify-content:center;gap:56px;flex-wrap:wrap;margin-bottom:56px;text-align:center}
.stats .n{font-family:'Poppins';font-weight:700;font-size:clamp(36px,5vw,54px);color:#fff;line-height:1}
.stats .l{color:#b9c6d8;font-size:15px;margin-top:8px}
.stats .n .star{color:var(--gold)}

/* Founder */
.founder .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.founder-photo{height:480px;border-radius:18px;overflow:hidden}
.founder-photo img{width:100%;height:100%;object-fit:cover;display:block}
.founder h2{font-size:clamp(28px,3.4vw,40px)}
.founder p{color:var(--muted);font-size:17px;margin:20px 0}
.founder .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}

/* Homepage responsive (grids site.css didn't already cover) */
@media(max-width:960px){
  .diff .wrap,.founder .wrap{grid-template-columns:1fr;gap:36px}
  /* Single column: the box must stop going full-bleed, or a ~840px-wide box at
     520px tall crops this portrait photo down to the therapist's torso. Capped
     to a portrait-ish shape and left-aligned to match the copy beside it. */
  /* Single column: needs an explicit height, or a stretched item with no
     sibling collapses to the out-of-flow image's zero height. Full width is
     fine here because the photo is landscape. */
  .diff-photo{align-self:auto;height:420px}
  .cond-grid,.svc-grid,.treat-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .cond-grid,.svc-grid,.treat-grid{grid-template-columns:1fr}
  /* On a phone the hub cards drop the photo and the description and collapse to a
     compact name + arrow row. These pages exist to let someone pick a body part and
     go; a column of 200px photos turns a 7-item list into a long scroll. Desktop
     keeps the full card. Homepage .svc cards are unaffected. */
  .svc--hub .img{display:none}
  .svc--hub .body{padding:18px 20px;display:flex;align-items:center;gap:14px}
  .svc--hub .body p{display:none}
  .svc--hub h3{font-size:16px;margin-bottom:0}
  .svc--hub .link{margin-left:auto;margin-bottom:0;font-size:18px}
  .svc--hub .link .lbl{display:none}
  .svc-grid:has(.svc--hub){gap:12px}
  /* Homepage services + treatments on mobile: drop the card image, keep the header,
     subtext and Learn More link. Scoped to the homepage sections only. */
  #services .svc .img,#treatments .treat .img{display:none}
  /* Team rosters on mobile (team hub + location pages): drop the headshot only;
     keep the name, title and location centered, exactly as the card was. */
  .team-grid .member .ph{display:none}
  /* Utility: hide on phones, show on desktop/tablet. */
  .desktop-only{display:none}
  .diff-photo{height:320px}
  .stats{gap:32px}
  .diff .wrap,.founder .wrap,.diff,.founder{text-align:center}
  .founder .cta,.diff .diff-btns{justify-content:center}
}

/* ============================================================
   PERSON PHOTOS - keep them 1:1
   Every headshot is a square 900x900 file, but the shared .split-media band is
   a fixed 400px tall (280px under 600px), so a square source was being cropped
   to landscape and each bio page appeared to use a different size. Scoped to a
   modifier class so service and about split sections keep their landscape band.
   ============================================================ */
.split .split-media--square{height:auto;aspect-ratio:1/1}

/* ============================================================
   TEAM GROUP PHOTOS - keep them 3:2
   The location-page "Proudly local" photos are 1602x1068 group shots with
   people spanning nearly the full frame. In the fixed 400px band (280px under
   600px) object-fit:cover crops up to 16% of the width on phones and clips the
   people at the edges of the group. Scoped modifier: the box takes the image's
   own 3:2 aspect at every width, so the whole team is always visible.
   ============================================================ */
.split-media.split-media--group{height:auto;aspect-ratio:3/2}
/* Midway neighborhood photo only: a slightly taller frame so the therapist's head fits (source is near-square). */
.split-media--group.split-media--tall{aspect-ratio:23/20}
/* Neighborhood section: center the photo on the body copy's midline, not the full
   column (which also holds the eyebrow + heading). 50px = half the header block in
   pre-zoom CSS px; the desktop body{zoom:.9} renders it as ~45px. Desktop only, since
   below 961px the section stacks and the image moves above the text. */
@media(min-width:961px){.split-media--local{transform:translateY(50px)}}