/* ==========================================================================
   MOTION ORTHOPEDICS — DESIGN SYSTEM
   Prototype build, August 2026. Portable static CSS — no build step, no deps.
   Palette sampled directly from the supplied logo file.
   All text/background pairs verified against WCAG 2.2 AA.
   ========================================================================== */

:root{
  /* --- Brand palette (sampled from logo) --- */
  --navy:        #1F4156;  /* 10.8:1 on white — primary text, headers, footer   */
  --blue:        #4C8DB8;  /* 3.6:1  on white — BRAND ONLY: fills, icons, 24px+ */
  --action:      #356E96;  /* 5.5:1  on white — buttons, links, focus rings     */
  --action-dark: #2A5A7C;  /* hover state                                       */
  --graphite:    #63656B;  /* 5.8:1  on white — secondary text, captions        */
  --tint:        #DEE7EF;  /* section backgrounds, input fills                  */
  --tint-mid:    #B8CCDE;  /* borders, dividers on tinted surfaces              */
  --tint-soft:   #F2F6FA;  /* lightest wash                                     */

  /* --- Functional --- */
  --white:  #FFFFFF;
  --ink:    #16232E;   /* body copy — 14.9:1, slightly warmer than pure black  */
  --line:   #DDE3E9;
  --line-2: #C7D2DC;
  --ok:     #1B6B4C;
  --warn:   #8A5B00;
  --alert:  #9B2C2C;

  /* --- Type scale --- */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs:   0.8125rem;  /* 13px */
  --fs-sm:   0.9375rem;  /* 15px */
  --fs-base: 1.0625rem;  /* 17px — research: 17–18px body is the vertical norm */
  --fs-md:   1.1875rem;
  --fs-lg:   1.4375rem;
  --fs-xl:   1.875rem;
  --fs-2xl:  2.375rem;
  --fs-3xl:  3.0625rem;

  /* --- Space / shape --- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4.5rem;
  --r-sm: 6px; --r: 10px; --r-lg: 16px; --r-pill: 999px;
  --shadow:    0 1px 2px rgba(31,65,86,.06), 0 4px 14px rgba(31,65,86,.08);
  --shadow-lg: 0 2px 6px rgba(31,65,86,.08), 0 16px 40px rgba(31,65,86,.14);
  --wrap: 1340px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}

/* The [hidden] attribute must win over any component's own display value.
   Without this, a rule like .provider-card{display:flex} silently defeats the
   UA stylesheet's [hidden]{display:none} and filtered-out cards stay on screen
   while the result count reads correctly — a false-results bug, not a cosmetic one. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);font-size:var(--fs-base);line-height:1.65;overflow-wrap:break-word;
  color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{color:var(--navy);line-height:1.18;margin:0 0 var(--sp-4);font-weight:700;letter-spacing:-.018em}
h1{font-size:var(--fs-3xl)} h2{font-size:var(--fs-2xl)} h3{font-size:var(--fs-lg)} h4{font-size:var(--fs-md)}
p{margin:0 0 var(--sp-4)}
a{color:var(--action);text-underline-offset:3px}
a:hover{color:var(--action-dark)}
ul,ol{margin:0 0 var(--sp-4);padding-left:1.25em}
li{margin-bottom:var(--sp-2)}
hr{border:0;border-top:1px solid var(--line);margin:var(--sp-6) 0}
small{font-size:var(--fs-xs)}

/* Visible focus everywhere — WCAG 2.2 AA (2.4.11 Focus Not Obscured / 2.4.13) */
:focus-visible{outline:3px solid var(--action);outline-offset:2px;border-radius:3px}

.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;
  padding:var(--sp-3) var(--sp-5);z-index:999;border-radius:0 0 var(--r) 0;font-weight:600;
}
.skip-link:focus{left:0}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0
}

/* ---------- Layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--sp-5)}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 var(--sp-5)}
.section{padding:var(--sp-8) 0}
.section-sm{padding:var(--sp-7) 0}
.section-tint{background:var(--tint-soft)}
.section-navy{background:var(--navy);color:#E8EEF4}
.section-navy h1,.section-navy h2,.section-navy h3{color:#fff}
.grid{display:grid;gap:var(--sp-5)}
.grid>*,.split>*{min-width:0}                    /* stop grid items forcing horizontal scroll */
code{background:var(--tint);padding:.1em .35em;border-radius:3px;font-size:.9em;overflow-wrap:anywhere}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.eyebrow{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--action);margin:0 0 var(--sp-3)
}
.section-navy .eyebrow{color:#8FC1DE}   /* brand blue is only 2.98:1 on navy */
.lede{font-size:var(--fs-md);color:var(--graphite);max-width:68ch}
.section-navy .lede{color:#C3D2DE}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font:inherit;font-size:var(--fs-sm);font-weight:600;line-height:1;
  padding:.85rem 1.4rem;border-radius:var(--r-sm);border:2px solid transparent;
  cursor:pointer;text-decoration:none;transition:background .15s,color .15s,border-color .15s;
}
.btn-primary{background:var(--action);color:#fff}          /* 5.5:1 — AA pass  */
.btn-primary:hover{background:var(--action-dark);color:#fff}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:#16303F;color:#fff}
.btn-outline{background:transparent;color:var(--action);border-color:var(--line-2)}
.btn-outline:hover{background:var(--tint-soft);border-color:var(--action);color:var(--action-dark)}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost-light:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
.btn-lg{font-size:var(--fs-base);padding:1.05rem 1.9rem}
.btn-block{width:100%}
.btn-row{display:flex;gap:var(--sp-3);flex-wrap:wrap}

/* ---------- Header ---------- */
.utility{background:var(--navy);color:#C3D2DE;font-size:var(--fs-xs)}
.utility .wrap{display:flex;justify-content:flex-end;gap:var(--sp-5);align-items:center;min-height:38px;flex-wrap:wrap}
.utility a{color:#D6E1EA;text-decoration:none;font-weight:500}
.utility a:hover{color:#fff;text-decoration:underline}
.utility .wrap{justify-content:space-between}
.utility-phone{
  display:inline-flex;align-items:center;gap:.4rem;order:-1;margin-right:auto;
  color:#fff!important;font-weight:700!important;font-size:var(--fs-sm);letter-spacing:.01em
}
.utility-phone svg{width:15px;height:15px;color:#8FC1DE;flex:0 0 auto}

.site-header{
  position:sticky;top:0;z-index:100;background:#fff;
  border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(31,65,86,.04);
  transition:box-shadow .2s ease
}
.site-header.scrolled{box-shadow:0 2px 14px rgba(31,65,86,.10)}
.site-header.scrolled .header-inner{min-height:88px}
.site-header.scrolled .logo img{height:56px}
.header-inner,.logo img{transition:min-height .2s ease,height .2s ease}
.header-inner{display:flex;align-items:center;gap:var(--sp-4);min-height:128px}
.logo{flex:0 0 auto;display:block;padding:var(--sp-2) 0;transition:transform .18s ease,opacity .18s ease}
.logo:hover{transform:scale(1.03)}
.logo:hover img{opacity:.9}
.logo img{height:88px;width:auto}
.main-nav{margin-left:auto;min-width:0}
.main-nav ul{display:flex;gap:0;list-style:none;margin:0;padding:0;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.main-nav li{margin:0}
.main-nav a{
  display:block;padding:.6rem .35rem;border-radius:var(--r-sm);
  color:var(--navy);text-decoration:none;font-weight:600;font-size:var(--fs-xs);white-space:nowrap
}
.main-nav a:hover{background:var(--tint-soft);color:var(--action-dark)}
.main-nav a[aria-current="page"]{color:var(--action-dark);box-shadow:inset 0 -3px 0 var(--blue)}
.header-cta{display:flex;align-items:center;gap:var(--sp-4);flex:0 0 auto}
.header-phone{
  color:var(--navy);text-decoration:none;font-weight:700;font-size:var(--fs-sm);white-space:nowrap
}
.header-phone span{display:block;font-size:11px;font-weight:600;color:var(--graphite);letter-spacing:.06em;text-transform:uppercase}
.nav-toggle{display:none;background:#fff;border:2px solid var(--line-2);border-radius:var(--r-sm);padding:.55rem .8rem;font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--navy);cursor:pointer}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(160deg,#1F4156 0%,#2C5B78 58%,#3D7BA4 100%);color:#fff;padding:var(--sp-8) 0}
.hero h1{color:#fff;max-width:16ch;margin-bottom:var(--sp-5)}
.hero p.lede{color:#CFDDE8;max-width:56ch;font-size:var(--fs-md)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-7);align-items:center}
.hero-badges{display:flex;gap:var(--sp-5);flex-wrap:wrap;margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid rgba(255,255,255,.22)}
.hero-badge strong{display:block;font-size:var(--fs-xl);color:#fff;line-height:1.1;font-weight:700}
.hero-badge span{font-size:var(--fs-xs);color:#B8CCDE;text-transform:uppercase;letter-spacing:.08em;font-weight:600}

/* Find-care widget — the hero IS the tool, not a carousel */
.care-finder{background:#fff;border-radius:var(--r-lg);padding:var(--sp-6);box-shadow:var(--shadow-lg);color:var(--ink)}
.care-finder h2{font-size:var(--fs-lg);margin-bottom:var(--sp-2)}
.care-finder .hint{font-size:var(--fs-sm);color:var(--graphite);margin-bottom:var(--sp-5)}

/* ---------- Forms ---------- */
.field{margin-bottom:var(--sp-4)}
.field label:not(.multi-opt),.field .label,.legend{
  display:block;font-size:var(--fs-xs);font-weight:700;color:var(--navy);
  letter-spacing:.05em;text-transform:uppercase;margin-bottom:var(--sp-2)
}
.req{color:var(--alert)}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:var(--fs-base);color:var(--ink);
  background:var(--tint-soft);border:2px solid var(--line-2);border-radius:var(--r-sm);
  padding:.7rem .85rem;transition:border-color .15s,background .15s
}
.field input:focus,.field select:focus,.field textarea:focus{background:#fff;border-color:var(--action);outline:none;box-shadow:0 0 0 3px rgba(53,110,150,.18)}
.field textarea{min-height:120px;resize:vertical}
.field .help{font-size:var(--fs-xs);color:var(--graphite);margin:var(--sp-2) 0 0;text-transform:none;letter-spacing:0;font-weight:400}
fieldset{border:0;padding:0;margin:0 0 var(--sp-5)}
.choice-row{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.choice{
  display:flex;align-items:center;gap:var(--sp-2);padding:.7rem 1rem;
  background:var(--tint-soft);border:2px solid var(--line-2);border-radius:var(--r-sm);
  cursor:pointer;font-size:var(--fs-sm);font-weight:600;color:var(--navy)
}
.choice:hover{border-color:var(--action)}
.choice input{accent-color:var(--action);width:18px;height:18px;margin:0}
.choice:has(input:checked){border-color:var(--action);background:#fff;box-shadow:0 0 0 2px rgba(53,110,150,.15)}
.form-note{
  background:var(--tint);border-left:4px solid var(--blue);border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:var(--sp-4) var(--sp-5);font-size:var(--fs-sm);color:var(--navy);margin-bottom:var(--sp-5)
}
.form-note strong{display:block;margin-bottom:var(--sp-1)}

/* ---------- Cards ---------- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:var(--sp-5);transition:box-shadow .18s,border-color .18s,transform .18s
}
.card:hover{box-shadow:var(--shadow);border-color:var(--tint-mid);transform:translateY(-2px)}
.card h3{margin-bottom:var(--sp-2)}
.card p{font-size:var(--fs-sm);color:var(--graphite);margin-bottom:var(--sp-3)}
.card-link{
  display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:var(--sp-5);transition:box-shadow .18s,border-color .18s,transform .18s
}
.card-link:hover{box-shadow:var(--shadow);border-color:var(--blue);transform:translateY(-2px);color:inherit}
.card-link h3{color:var(--navy)}
.card-link .arrow{color:var(--action);font-weight:700;font-size:var(--fs-sm)}

/* Quick-access tiles */
.tile{display:flex;gap:var(--sp-4);align-items:flex-start;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-5);
  transition:box-shadow .18s,border-color .18s,transform .18s}
.tile:hover{box-shadow:var(--shadow);border-color:var(--blue);transform:translateY(-2px);color:inherit}
.tile .ico{flex:0 0 46px;height:46px;border-radius:var(--r-sm);background:var(--tint);
  display:grid;place-items:center;color:var(--navy)}
.tile .ico svg{width:24px;height:24px}
.tile h3{font-size:var(--fs-md);margin-bottom:var(--sp-1)}
.tile p{font-size:var(--fs-sm);color:var(--graphite);margin:0}

/* Body-part / specialty chips */
.chip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:var(--sp-3)}
.chip{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);
  text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:1rem 1.1rem;font-weight:600;color:var(--navy);font-size:var(--fs-sm);transition:.15s
}
.chip:hover{border-color:var(--blue);background:var(--tint-soft);color:var(--action-dark)}
.chip .arrow{color:var(--blue);font-weight:700}

/* Provider cards */
.provider-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:box-shadow .18s,border-color .18s
}
.provider-card:hover{box-shadow:var(--shadow);border-color:var(--tint-mid)}
.provider-photo{
  aspect-ratio:4/5;                       /* portrait — the standard headshot frame */
  background:linear-gradient(150deg,var(--tint) 0%,var(--tint-mid) 100%);
  display:grid;place-items:center;color:var(--navy);position:relative;overflow:hidden
}
.provider-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.provider-photo.thumb{aspect-ratio:1/1}
.provider-photo.bio-photo{
  aspect-ratio:4/5;max-width:340px;margin-left:auto;border-radius:var(--r);
  box-shadow:var(--shadow-lg)
}
.provider-photo .initials{font-size:2.5rem;font-weight:700;letter-spacing:-.02em;opacity:.62}
.photo-flag{
  position:absolute;bottom:8px;right:8px;background:rgba(31,65,86,.9);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 7px;border-radius:3px
}
.provider-body{padding:var(--sp-4) var(--sp-5) var(--sp-5);display:flex;flex-direction:column;flex:1}
.provider-body h3{font-size:var(--fs-md);margin-bottom:var(--sp-1)}
.provider-body h3 a{color:var(--navy);text-decoration:none}
.provider-body h3 a:hover{color:var(--action-dark);text-decoration:underline}
.provider-role{font-size:var(--fs-sm);color:var(--graphite);margin-bottom:var(--sp-3)}
.tags{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-bottom:var(--sp-3)}
.tag{
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:var(--tint);color:var(--navy);padding:4px 9px;border-radius:var(--r-pill)
}
.tag-alt{background:#E4EFE9;color:#14543C}
.provider-meta{font-size:var(--fs-xs);color:var(--graphite);margin-bottom:var(--sp-4);margin-top:auto}
.provider-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}

/* Location cards — address + phone live on the INDEX (target: 1 click) */
.loc-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-5);
  display:flex;flex-direction:column;transition:box-shadow .18s,border-color .18s}
.loc-card:hover{box-shadow:var(--shadow);border-color:var(--tint-mid)}
.loc-card h3{font-size:var(--fs-md);margin-bottom:var(--sp-2)}
.loc-card h3 a{color:var(--navy);text-decoration:none}
.loc-card h3 a:hover{color:var(--action-dark);text-decoration:underline}
.loc-addr{font-size:var(--fs-sm);color:var(--ink);margin-bottom:var(--sp-2);font-style:normal}
.loc-hours{font-size:var(--fs-xs);color:var(--graphite);margin-bottom:var(--sp-3)}
.loc-services{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-bottom:var(--sp-4);margin-top:auto}
.loc-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.loc-actions .btn{flex:1;min-width:120px}

/* ---------- Location map ---------- */
.map-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 var(--sp-4);padding:2px}
.map-wrap{
  position:relative;min-width:620px;max-width:800px;margin:0 auto;
  border:1px solid var(--tint-mid);border-radius:var(--r-lg);overflow:hidden;
  background:#fff;box-shadow:var(--shadow-lg)
}
.map-wrap img{width:100%;height:auto;display:block}
.map-pin{
  position:absolute;width:4.6%;aspect-ratio:1;min-width:28px;min-height:28px;
  transform:translate(-50%,-50%);border-radius:50%;
  display:block;text-decoration:none;background:transparent;
  transition:background .15s,box-shadow .15s
}
.map-pin:hover,.map-pin:focus-visible{
  background:rgba(76,141,184,.28);box-shadow:0 0 0 3px var(--action)
}
.map-pin-label{
  position:absolute;left:50%;bottom:112%;transform:translateX(-50%);
  background:var(--navy);color:#fff;font-size:var(--fs-xs);font-weight:700;
  padding:.3rem .6rem;border-radius:var(--r-sm);white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .15s;z-index:2
}
.map-pin:hover .map-pin-label,.map-pin:focus-visible .map-pin-label{opacity:1}
.map-hint{
  font-size:var(--fs-xs);color:var(--graphite);text-align:center;margin:0 0 var(--sp-2);
  font-weight:700;letter-spacing:.09em;text-transform:uppercase
}
.map-sub{font-size:var(--fs-sm);color:var(--graphite);text-align:center;margin:0}

/* ---------- Filter bar ---------- */
.filters{
  background:var(--tint-soft);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--sp-5);margin-bottom:var(--sp-6)
}
.filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-4);align-items:end}
.filters .field{margin-bottom:0}
.result-bar{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);
  margin-bottom:var(--sp-5);flex-wrap:wrap}
.result-count{font-weight:700;color:var(--navy);font-size:var(--fs-sm)}
.empty-state{text-align:center;padding:var(--sp-8) var(--sp-5);color:var(--graphite);
  background:var(--tint-soft);border-radius:var(--r);border:1px dashed var(--line-2)}

/* ---------- Page header ---------- */
.page-head{background:var(--tint-soft);border-bottom:1px solid var(--line);padding:var(--sp-7) 0 var(--sp-6)}
.page-head h1{margin-bottom:var(--sp-3);font-size:var(--fs-2xl)}
.page-head .lede{margin-bottom:0}
.breadcrumb{font-size:var(--fs-xs);color:var(--graphite);margin-bottom:var(--sp-4)}
.breadcrumb a{color:var(--action);text-decoration:underline}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb span{margin:0 var(--sp-2);color:var(--line-2)}

/* ---------- Bands ---------- */
.band-referrer{background:var(--navy);color:#D6E1EA}
.band-referrer h2,.band-referrer h3{color:#fff}
.band-referrer .lede{color:#CFDDE8}          /* was inheriting --graphite on navy: 2.0:1, failed AA */
.band-referrer .eyebrow{color:#8FC1DE}       /* 5.6:1 on navy — brand blue fails at 2.98:1 */
.band-referrer a:not(.btn){color:#fff}
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--sp-7);align-items:center}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5);text-align:center}
.stat strong{display:block;font-size:var(--fs-2xl);color:var(--navy);line-height:1.05;font-weight:700}
.stat span{font-size:var(--fs-xs);color:var(--graphite);text-transform:uppercase;letter-spacing:.08em;font-weight:600}

/* Callouts */
.callout{border-radius:var(--r);padding:var(--sp-5);border:1px solid var(--line);background:var(--tint-soft);margin-bottom:var(--sp-5)}
.callout-key{background:#FFF8E8;border-color:#E8D49A}
.callout-key h3{color:#6B4E00}
.callout p:last-child{margin-bottom:0}

/* Insurance / data tables */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
table.data{width:100%;border-collapse:collapse;font-size:var(--fs-sm);background:#fff}
table.data th,table.data td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.data thead th{background:var(--navy);color:#fff;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.07em}
table.data tbody tr:nth-child(even){background:var(--tint-soft)}
table.data tbody tr:last-child td{border-bottom:0}

/* Steps */
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;position:relative;padding-left:3.25rem;margin-bottom:var(--sp-5)}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:0;width:2.25rem;height:2.25rem;
  background:var(--action);color:#fff;border-radius:50%;display:grid;place-items:center;
  font-weight:700;font-size:var(--fs-sm)
}
.steps li strong{display:block;color:var(--navy);font-size:var(--fs-md);margin-bottom:var(--sp-1)}

/* Accordion */
details.acc{border:1px solid var(--line);border-radius:var(--r);margin-bottom:var(--sp-3);background:#fff}
details.acc summary{
  padding:var(--sp-4) var(--sp-5);font-weight:700;color:var(--navy);cursor:pointer;
  font-size:var(--fs-base);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4)
}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::after{content:"+";color:var(--action);font-size:1.4rem;font-weight:400;line-height:1}
details.acc[open] summary::after{content:"\2013"}
details.acc .acc-body{padding:0 var(--sp-5) var(--sp-5)}
details.acc .acc-body p:last-child,details.acc .acc-body ul:last-child{margin-bottom:0}

/* Quote */
.quote{background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue);
  border-radius:0 var(--r) var(--r) 0;padding:var(--sp-5)}

.cred-h{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--action);margin:var(--sp-6) 0 var(--sp-3)
}
.cred-list{margin:0;padding-left:1.15em}
.cred-list li{margin-bottom:var(--sp-2);font-size:var(--fs-sm);color:var(--ink)}
.interest-list{
  columns:2;column-gap:var(--sp-6);margin:0;padding-left:1.15em
}
.interest-list li{margin-bottom:var(--sp-2);font-size:var(--fs-sm);break-inside:avoid}
@media (max-width:620px){ .interest-list{columns:1} }

/* ---------- Patient review ---------- */
.review{
  margin:0;background:var(--tint-soft);border:1px solid var(--line);
  border-left:4px solid var(--blue);border-radius:0 var(--r) var(--r) 0;
  padding:var(--sp-5) var(--sp-6)
}
.review .stars{color:#B8860B;font-size:var(--fs-md);letter-spacing:.12em;line-height:1}
.review blockquote{margin:var(--sp-3) 0 var(--sp-4);padding:0;border:0}
.review blockquote p{
  margin:0;font-size:var(--fs-md);line-height:1.6;color:var(--ink)
}
.review blockquote p{margin-bottom:.6rem}
.review blockquote p:last-child{margin-bottom:0}
.review blockquote p:first-child::before{content:"\201C"}
.review blockquote p:last-child::after{content:"\201D"}
.review figcaption{
  display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--tint-mid)
}
.review-avatar{
  flex:0 0 40px;width:40px;height:40px;border-radius:50%;
  background:var(--navy);color:#fff;display:grid;place-items:center;
  font-size:var(--fs-md);font-weight:700;line-height:1;letter-spacing:.01em
}
.review-who{display:flex;flex-direction:column;min-width:0}
.review-who strong{color:var(--navy);font-size:var(--fs-base);font-weight:700;line-height:1.25}
.review-who small{color:var(--graphite);font-size:var(--fs-xs);margin-top:2px}
.review-src{
  margin-left:auto;display:inline-flex;align-items:center;gap:.35rem;
  font-size:var(--fs-sm);font-weight:600;text-decoration:none;white-space:nowrap
}
.review-src:hover{text-decoration:underline}
.review-src svg{width:14px;height:14px}
@media (max-width:520px){ .review-src{margin-left:0;width:100%} }
.review-verify{
  margin:var(--sp-4) 0 0;padding:var(--sp-3) var(--sp-4);font-size:var(--fs-xs);
  background:#FFFBF0;border:1px dashed #C8A34A;border-radius:var(--r-sm);
  color:#5C4300;font-weight:600
}
.quote p{font-size:var(--fs-sm);font-style:italic;color:var(--ink)}
.quote cite{font-style:normal;font-size:var(--fs-xs);color:var(--graphite);font-weight:600}

/* ---------- Prototype annotation system ---------- */
.proto-bar{
  background:#6B4E00;color:#FFF3D6;font-size:var(--fs-xs);text-align:center;
  padding:.5rem var(--sp-5);font-weight:600;letter-spacing:.02em
}
.proto-bar strong{color:#fff}
.note-spec{
  border:1px dashed #C8A34A;background:#FFFBF0;border-radius:var(--r-sm);
  padding:var(--sp-4) var(--sp-5);font-size:var(--fs-sm);color:#5C4300;margin-bottom:var(--sp-5)
}
.note-spec > strong:first-child{color:#3F2E00;display:block;margin-bottom:var(--sp-1);
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.07em}
.note-spec p strong{color:#3F2E00}
.note-spec p:last-child{margin-bottom:0}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy);color:#B8CCDE;padding:var(--sp-8) 0 var(--sp-5);font-size:var(--fs-sm)}
.site-footer h4{color:#fff;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--sp-4)}
.site-footer a{color:#CFDDE8;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:var(--sp-2)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--sp-6)}
.footer-logo img{height:60px;width:auto;margin-bottom:var(--sp-4)}
.footer-phone{margin:var(--sp-5) 0 0}
.footer-phone span{
  display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#8FC1DE;margin-bottom:var(--sp-2)
}
.footer-phone a{
  display:inline-block;font-size:var(--fs-2xl);font-weight:700;color:#fff!important;
  line-height:1.1;letter-spacing:-.02em;text-decoration:none
}
.footer-phone a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.footer-phone small{display:block;margin-top:var(--sp-3);font-size:var(--fs-sm);color:#B8CCDE}  /* 5.3:1 on the lightened panel; #96AFC4 measured 3.9:1 */
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.16);margin-top:var(--sp-7);padding-top:var(--sp-5);
  display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;font-size:var(--fs-xs);color:#96AFC4
}
.footer-bottom a{color:#96AFC4}

/* ---------- Sticky mobile action bar ---------- */
.mobile-bar{display:none}

/* ---------- Responsive ---------- */
@media (max-width:1400px){
  .logo img{height:76px}
  .site-header.scrolled .logo img{height:54px}
  .header-inner{min-height:120px}
}
@media (max-width:1360px){
  .header-phone{display:none}   /* utility strip above and mobile bar below keep the number on screen */
}
@media (max-width:1280px){
  .logo img{height:66px}
  .site-header.scrolled .logo img{height:50px}
  .header-inner{gap:var(--sp-3);min-height:110px}
}
@media (max-width:1140px){
  :root{--fs-3xl:2.375rem;--fs-2xl:1.875rem;--fs-xl:1.5rem}
  .hero-grid,.split{grid-template-columns:1fr;gap:var(--sp-6)}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .stat-row{grid-template-columns:repeat(2,1fr);gap:var(--sp-5)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}

  .nav-toggle{display:block;margin-left:auto}
  .main-nav{
    display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);padding:var(--sp-4) var(--sp-5);
    max-height:75vh;overflow-y:auto
  }
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .main-nav li{border-bottom:1px solid var(--line)}
  .main-nav li:last-child{border-bottom:0}
  .main-nav a{padding:.95rem .25rem;font-size:var(--fs-base)}
  .header-inner{min-height:70px;position:relative;gap:var(--sp-3)}
  .header-cta .btn{display:none}
  .logo img{height:56px}
  .site-header.scrolled .logo img{height:46px}
  .utility .wrap{justify-content:center;gap:var(--sp-4)}
}
@media (max-width:620px){
  :root{--fs-3xl:2rem;--fs-2xl:1.625rem;--sp-8:3rem;--sp-7:2.25rem}
  .g-2,.g-3,.g-4,.footer-grid{grid-template-columns:1fr}
  .provider-actions{grid-template-columns:1fr}
  .care-finder{padding:var(--sp-5)}
  body{padding-bottom:72px}
  .mobile-bar{
    display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);position:fixed;bottom:0;left:0;right:0;
    background:#fff;border-top:1px solid var(--line-2);padding:var(--sp-3);z-index:200;
    box-shadow:0 -4px 18px rgba(31,65,86,.12)
  }
  .mobile-bar .btn{font-size:var(--fs-sm)}
  .utility .wrap{justify-content:center}
  .utility a:not(.utility-phone){display:none}
  .utility-phone{margin-right:0;font-size:var(--fs-base)}
}

@media print{
  .site-header,.utility,.mobile-bar,.proto-bar,.site-footer,.skip-link{display:none!important}
  body{padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Wayfinding note under an address — which door to use. Kept out of the address
   line itself so the Google Maps query stays clean. */
.loc-entrance{color:var(--graphite);font-size:var(--fs-xs);font-style:normal}

/* ---------- Multi-select filter (Area of concern) ----------
   A patient hurt in an accident often has more than one injury, so this control
   accepts several areas at once. Built as <details> + checkboxes rather than
   <select multiple>, which is close to unusable on a phone and gives no room for
   the two option groups. Styled to match the sibling <select> controls exactly so
   the filter bar still reads as one row. */
.multi{position:relative}
.multi>summary{
  position:relative;
  list-style:none;cursor:pointer;width:100%;font:inherit;font-size:var(--fs-base);
  color:var(--ink);background:var(--tint-soft);border:2px solid var(--line-2);
  border-radius:var(--r-sm);padding:.7rem 2.2rem .7rem .85rem;
  transition:border-color .15s,background .15s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.multi>summary::-webkit-details-marker{display:none}
.multi>summary::after{
  content:"";position:absolute;right:.9rem;top:50%;width:.5rem;height:.5rem;
  margin-top:-.35rem;border-right:2px solid var(--graphite);
  border-bottom:2px solid var(--graphite);transform:rotate(45deg);pointer-events:none
}
.multi>summary:hover{border-color:var(--action)}
.multi>summary:focus-visible{
  background:#fff;border-color:var(--action);outline:none;
  box-shadow:0 0 0 3px rgba(53,110,150,.18)
}
.multi[open]>summary{background:#fff;border-color:var(--action)}
.multi-panel{
  position:absolute;z-index:40;top:calc(100% + 4px);left:0;min-width:100%;
  width:max-content;max-width:min(20rem,80vw);max-height:19rem;overflow-y:auto;
  background:#fff;border:2px solid var(--action);border-radius:var(--r-sm);
  padding:var(--sp-3);box-shadow:0 10px 28px rgba(31,65,86,.16)
}
.multi-group{
  font-size:var(--fs-xs);font-weight:700;color:var(--graphite);
  letter-spacing:.05em;text-transform:uppercase;margin:var(--sp-2) 0 var(--sp-2) .35rem
}
.multi-group:first-child{margin-top:0}
.multi-opt{
  display:flex;align-items:center;gap:var(--sp-2);padding:.4rem .35rem;
  border-radius:var(--r-sm);cursor:pointer;font-size:var(--fs-sm);
  color:var(--ink);text-transform:none;letter-spacing:0;font-weight:400;margin:0
}
.multi-opt:hover{background:var(--tint-soft)}
.multi-opt input{accent-color:var(--action);width:17px;height:17px;margin:0;flex:0 0 auto}
@media (max-width:620px){ .multi-panel{max-width:calc(100vw - 3rem)} }

/* In the homepage widget the control sits in a vertical form with the submit button
   directly beneath it, so a floating panel would cover the button — a user who ticked
   a box then reached for "Find my specialist" would hit the panel instead and need a
   second click. Here the panel opens in normal flow and pushes the button down.
   The filter bar on Find a Doctor keeps the floating panel: it has no submit button,
   results update live, and pushing a horizontal row apart would break the layout. */
.multi-flow .multi-panel{
  position:static;width:auto;max-width:none;max-height:none;
  margin-top:var(--sp-2);box-shadow:none
}

/* ==========================================================================
   LIVE FORM SUBMISSION  (MOTION_FORMS=demo|live)
   Test banner, inline result panel, per-field error state.
   Status colours are the functional tokens, kept away from --action so an
   error never reads as something to click.
   ========================================================================== */

/* Amber, not red: this is a caution about what you type, not a failure. It is
   deliberately heavy — it is the control that keeps a live-posting form from
   collecting real patient information before the BAA exists. */
.form-testbar{
  border:2px solid var(--warn);
  border-left-width:6px;
  background:#FDF7EC;
  border-radius:var(--r-sm);
  padding:var(--sp-4) var(--sp-5);
  margin-bottom:var(--sp-5)
}
.form-testbar strong{
  display:block;color:var(--warn);font-size:var(--fs-sm);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--sp-2)
}
.form-testbar p{margin:0;font-size:var(--fs-sm);color:var(--ink);line-height:1.55}
.form-testbar strong + p strong{
  display:inline;text-transform:none;letter-spacing:0;font-size:inherit;color:inherit
}

.form-result{
  margin-top:var(--sp-4);padding:var(--sp-4) var(--sp-5);
  border-radius:var(--r-sm);border:1px solid var(--line-2);
  font-size:var(--fs-sm);line-height:1.55
}
.form-result p{margin:var(--sp-2) 0 0}
.form-result strong{font-size:var(--fs-base)}
.form-result.is-pending{background:var(--tint-soft);border-color:var(--tint-mid);color:var(--graphite)}
.form-result.is-ok{background:#EDF7F1;border-color:var(--ok);border-left-width:6px;color:var(--ink)}
.form-result.is-ok strong{color:var(--ok)}
.form-result.is-error{background:#FBEFEF;border-color:var(--alert);border-left-width:6px;color:var(--ink)}
.form-result.is-error strong{color:var(--alert)}
.form-result .mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:var(--fs-xs);color:var(--graphite);white-space:nowrap
}

/* Error identity is border + icon-free text, never colour alone. */
.field.has-error input,
.field.has-error select,
.field.has-error textarea{
  border-color:var(--alert);
  box-shadow:0 0 0 3px rgba(155,44,44,.12)
}
.field-error{
  margin:var(--sp-2) 0 0;font-size:var(--fs-xs);color:var(--alert);font-weight:500
}
.choice.has-error{outline:2px solid var(--alert);outline-offset:3px;border-radius:var(--r-sm)}

form.live-form button[type=submit][disabled]{opacity:.6;cursor:not-allowed}

/* ==========================================================================
   POLICY PAGES
   Legal text is read in long runs, so the measure is tighter and the leading
   looser than body copy elsewhere.
   ========================================================================== */
.policy{max-width:68ch}
.policy p{
  font-size:var(--fs-base);line-height:1.75;color:var(--ink);
  margin:0 0 var(--sp-5)
}
.policy p:last-child{margin-bottom:0}
.policy a{color:var(--action);text-underline-offset:2px}
.policy .policy-date{
  margin-top:var(--sp-6);padding-top:var(--sp-4);
  border-top:1px solid var(--line);
  font-size:var(--fs-sm);color:var(--graphite)
}

/* ==========================================================================
   FOOTER ACCESSIBILITY NOTICE
   Sits below the copyright row, full width. Kept at readable size rather than
   fine print — an accommodations notice that is hard to read defeats itself.
   ========================================================================== */
.footer-access{
  margin-top:var(--sp-5);padding-top:var(--sp-4);
  border-top:1px solid rgba(255,255,255,.14)
}
.footer-access p{
  margin:0;max-width:90ch;
  font-size:var(--fs-sm);line-height:1.65;
  color:rgba(255,255,255,.78)
}
.footer-access strong{color:#fff}
.footer-access a{
  color:#fff;text-decoration:underline;text-underline-offset:2px;
  white-space:nowrap
}

/* ==========================================================================
   PREPARE FOR YOUR VISIT
   ========================================================================== */
.prep-block{margin-bottom:var(--sp-7)}
.prep-block:last-child{margin-bottom:0}
.prep-block h2{margin:0 0 var(--sp-3)}
.prep-block p{max-width:68ch;line-height:1.7}

.facility-list{
  list-style:none;margin:var(--sp-5) 0 var(--sp-4);padding:0;
  display:grid;gap:var(--sp-4);
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))
}
.facility{
  border:1px solid var(--line);border-radius:var(--r);
  padding:var(--sp-4) var(--sp-5);background:var(--white)
}
.facility h3{
  margin:0 0 var(--sp-2);font-size:var(--fs-md);
  color:var(--navy);line-height:1.35
}
.facility address{
  font-style:normal;font-size:var(--fs-sm);
  color:var(--graphite);line-height:1.6
}
.facility-links{
  margin:var(--sp-3) 0 0;font-size:var(--fs-sm);font-weight:500
}
.facility-links a{color:var(--action)}