/* ============================================================================
   OSI Patient Education
   -------------------------------------------------------------------------
   Tokens are defined by ./site/design-dna.json (v1). Edit the DNA first;
   this file is the implementation.
   TSAOG-inspired palette + structure, editorial serif display, generous air.
   ========================================================================= */

/* Serif body + system-sans chrome. One family loaded; sans is system stack. */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap');

/* -- Tokens ---------------------------------------------------------------- */
:root {
  /* Brand palette — restrained practice color + warm paper + one accent */
  --navy:         #0B2A4A;    /* primary */
  --navy-dark:    #04162B;    /* hover / utility bar */
  --sage:         #3F8069;    /* accent — used sparingly (active states, CTAs) */
  --sage-dark:    #2B5E4C;
  --sage-tint:    #E5EEE8;

  /* Legacy hues — retained for existing pages during migration; do not use in new rules. */
  --blue:         #1E5A9C;
  --blue-dark:    #143E6D;
  --blue-tint:    #E9EFF7;
  --teal:         #14A3B8;
  --teal-dark:    #0F8494;
  --teal-tint:    #E4F4F6;
  --sage-mid:     #6FA48F;
  --sage-wash:    #F1F6F2;
  --sky:          #7FB3E4;
  --sky-tint:     #F2F6FB;

  /* Neutral gray scale */
  --ink:          #1B1B1B;
  --gray-900:     #111827;
  --gray-700:     #374151;    /* body copy muted */
  --gray-500:     #6B7280;    /* meta, captions */
  --gray-300:     #CBD2DB;    /* hairlines */
  --gray-100:     #EEF1F5;
  --gray-50:      #F7F8FA;

  /* Semantic */
  --paper:        #F7F4EE;    /* warm cream — site background */
  --paper-sink:   #EFEAE0;    /* slightly deeper tone for alt sections */
  --text:         var(--ink);
  --text-muted:   var(--gray-700);
  --text-light:   var(--gray-500);
  --rule:         #D6CFC0;    /* warm hairline — harmonizes with paper */
  --rule-light:   #E4DED1;
  --rule-ink:     #1B1B1B;    /* emphasis hairline */
  --bg:           var(--paper);
  --bg-alt:       var(--paper-sink);
  --bg-band:      var(--paper-sink);

  --success:      #1F8A5A;
  --warning:      #B8761E;
  --error:        #B42318;

  /* Typography — serif body, system sans chrome */
  --font:         ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Source Serif 4", "Source Serif Pro", Charter, Georgia, "Times New Roman", serif;

  --fs-xs:        0.8125rem;    /* 13px */
  --fs-sm:        0.9375rem;    /* 15px */
  --fs-base:      1rem;         /* 16px */
  --fs-body:      1.0625rem;    /* 17px */
  --fs-lg:        1.25rem;      /* 20px */
  --fs-h3:        1.25rem;
  --fs-h2:        clamp(1.5rem, 2.1vw, 1.9rem);
  --fs-h1:        clamp(1.95rem, 2.9vw, 2.6rem);
  --fs-display:   clamp(2.4rem, 3.8vw, 3.25rem);

  /* Tracking — let type breathe; no tight display headings */
  --tracking-tight: -0.005em;
  --tracking-snug:  0;
  --tracking-wide:  0.12em;

  /* Layout — tiered responsive system.
     Tiers: mobile (<700) / tablet (700–1319) / desktop (1320–1599) / wide (1600+).
     --content-max caps the primary container width. The clamp() expression
     keeps content readable at every tier while letting desktop monitors
     genuinely use their horizontal real estate. --article-max caps the
     reading line-length inside articles regardless of container width. */
  --content-max:  clamp(320px, 92vw, 1440px);
  --content-wide: clamp(320px, 95vw, 1680px);
  --article-max:  72ch;
  --gutter:       clamp(1.25rem, 3.5vw, 2.75rem);

  /* Shape — tight editorial rectangles, pill kept only for avatars */
  --r-sm:         4px;
  --r-md:         6px;
  --r-lg:         8px;
  --r-xl:         12px;
  --r-pill:       999px;    /* avatars only */

  /* Motion — near zero */
  --ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring:  cubic-bezier(0.34, 1.2, 0.64, 1);
  --dur-micro:    120ms;
  --dur-normal:   200ms;
  --dur-macro:    300ms;

  /* Elevation scale — four steps, from flat to lifted.
     Pattern: near-flat hairlines for cards at rest, a slightly stronger
     ambient + key shadow on hover, reserved depth for popovers/menus. */
  --shadow-sm:    0 1px 0 rgba(11, 42, 74, 0.04);
  --shadow-md:    0 1px 2px rgba(11, 42, 74, 0.06), 0 2px 4px rgba(11, 42, 74, 0.04);
  --shadow-lg:    0 4px 12px rgba(11, 42, 74, 0.08), 0 2px 4px rgba(11, 42, 74, 0.04);
  --shadow-xl:    0 12px 32px rgba(11, 42, 74, 0.12), 0 4px 8px rgba(11, 42, 74, 0.06);

  /* Focus ring — one token, one spacing offset, used everywhere.
     The outline sits outside the element so rounded corners read clean. */
  --focus-ring:   0 0 0 3px rgba(63, 128, 105, 0.45);
  --focus-color:  var(--sage-dark);

  /* Scroll-driven header — tuned for wordmark logo aspect ratio */
  --logo-h:       80px;
  --header-pad:   1rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 140px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);    /* serif long-form body */
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* UI chrome — nav, buttons, meta, forms — stays sans */
.site-header, .site-footer, .nav-box, .tab-nav, .breadcrumb,
.btn-primary, .btn-hero, .btn-appt, .btn-secondary,
.c-hero__eyebrow, .c-section-head__tag, .c-funnel,
.sidebar-card__heading, .c-fact__label, .related-list__dim,
input, select, textarea, button {
  font-family: var(--font);
}

img, svg { display: block; max-width: 100%; }

::selection { background: var(--sage-tint); color: var(--navy); }

a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 150ms var(--ease), text-decoration-thickness 150ms var(--ease), text-underline-offset 150ms var(--ease);
}
a:hover {
  color: var(--navy-dark);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Global focus-visible pattern — same ring everywhere.
   Using :focus-visible (not :focus) means the ring only shows for keyboard
   users, not for mouse clicks — cleaner visually, still fully accessible. */
*:focus { outline: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--navy);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: var(--tracking-snug);
  margin: 0 0 0.5em;
}
h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: 1.08;
}
h2 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: var(--tracking-tight); margin-top: 2rem; }
h3 { font-size: var(--fs-h3); font-weight: 600; margin-top: 1.5rem; }
h4 { font-size: var(--fs-lg); margin-top: 1.25rem; font-weight: 600; }

/* Display-size headlines: serif, editorial */
.page-title h1,
.bio-hero__intro h1,
.appt-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
}

p { margin: 0 0 1rem; }
ul, ol { padding-left: 1.25rem; margin: 0 0 1rem; }
li { margin-bottom: 0.4em; }
li::marker { color: var(--text-muted); }
strong { font-weight: 700; color: var(--text); }

hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* -- Reveal (animation removed) ------------------------------------------- */
/* Scroll-triggered reveal animation was removed for a steadier, more
   editorial feel — content shows instantly as the page loads. The class
   hooks are kept so existing markup stays valid. */
.js-reveal .reveal,
.js-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}

/* -- Site header ----------------------------------------------------------- */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 50;
  transition: border-color 200ms var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--rule-ink);
}

.site-header__utility {
  background: var(--navy);
  color: #fff;
  font-size: var(--fs-xs);
  letter-spacing: 0.01em;
}
.site-header__utility-inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 0.45rem var(--gutter);
  display: flex;
  justify-content: flex-end;
  gap: 1.6rem;
}
.site-header__utility a {
  color: #fff;
  text-decoration: none;
  opacity: 0.88;
  transition: opacity 150ms var(--ease);
}
.site-header__utility a:hover { opacity: 1; }

.site-header__main {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: var(--header-pad) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  transition: padding 220ms var(--ease);
}
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--navy);
  transition: opacity 180ms var(--ease);
}
.brand:hover { opacity: 0.82; }
.brand__mark,
.brand__logo {
  display: block;
  width: auto;
  color: var(--navy);
  /* height lives in nextgen.css — two states via .is-scrolled class */
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  font-size: var(--fs-sm);
  font-weight: 500;
}
.site-header__nav a {
  color: var(--navy);
  text-decoration: none;
  transition: color 150ms var(--ease);
}
.site-header__nav a:hover { color: var(--blue); }
.site-header__nav a[aria-current="page"] { color: var(--blue); }

.btn-appt {
  background: var(--teal);
  color: #fff;
  padding: 0.55rem 1.25rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-sm);
  display: inline-block;
  border: 1px solid var(--teal);
  box-shadow: var(--shadow-sm);
  transition:
    background var(--dur-normal) var(--ease),
    border-color var(--dur-normal) var(--ease),
    transform var(--dur-normal) var(--ease),
    box-shadow var(--dur-normal) var(--ease);
}
.btn-appt:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-appt:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 820px) {
  :root { --logo-h: 64px; }
  .site-header__nav { gap: 0.9rem; }
  /* Nav link visibility on mobile is controlled by the hamburger drawer
     rules in nextgen.css — do NOT blanket-hide links here. */
}

/* -- Breadcrumb ------------------------------------------------------------ */
.breadcrumb {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0.9rem var(--gutter) 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.breadcrumb li {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.breadcrumb li + li::before {
  content: "›";
  color: var(--text-light);
}
.breadcrumb a {
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color 150ms var(--ease), color 150ms var(--ease);
}
.breadcrumb a:hover {
  border-bottom-color: currentColor;
  color: var(--blue-dark);
}
.breadcrumb [aria-current] { color: var(--text-muted); font-weight: 500; }

/* -- Page title (condition pages) ----------------------------------------- */
.page-title {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 1.25rem var(--gutter) 2rem;
}
.page-title h1 {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  max-width: 20ch;
}
.page-title__subtitle {
  margin: 0.75rem 0 0;
  color: var(--text-muted);
  font-size: var(--fs-lg);
  font-weight: 400;
  max-width: 55ch;
  line-height: 1.45;
}

/* -- Tab navigation (condition pages) -------------------------------------
   Horizontally-scrollable tab bar. On mobile the track overflows; we use a
   right-side fade mask to signal scrollability without showing scrollbars.
   This is a common "scroll snap hint" pattern used on Apple / editorial sites. */
.tab-nav {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  z-index: 40;
  position: relative;
}
.tab-nav__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.tab-nav__inner::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex;
  align-items: center;
  padding: 0.95rem 1.25rem;
  color: var(--navy);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--fs-sm);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  scroll-snap-align: start;
  transition: color 150ms var(--ease), border-color 150ms var(--ease), background 150ms var(--ease);
  min-height: 48px;
}
.tab:hover { color: var(--blue); background: rgba(11, 42, 74, 0.03); }
.tab:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: -4px;
  border-radius: var(--r-sm);
}
.tab.is-active { color: var(--blue); border-bottom-color: var(--blue); }
/* Mobile: right-edge fade hint that tabs continue off-screen.
   The fade is a pseudo-element on the .tab-nav so it sits on top of the
   scrolling track without affecting its width. */
@media (max-width: 700px) {
  .tab-nav { padding-right: 0; }
  .tab-nav::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 1px;
    width: 28px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(247, 244, 238, 0) 0%, var(--paper) 85%);
  }
  .tab { padding: 0.9rem 1rem; font-size: 0.88rem; }
  .tab:first-child { padding-left: var(--gutter); }
}

/* -- Page grid (condition pages) ------------------------------------------ */
.page-grid {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 2.5rem var(--gutter) 4rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 3rem;
}
@media (max-width: 900px) {
  .page-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

.content {
  max-width: var(--article-max);
  font-size: var(--fs-body);
  line-height: 1.65;
}
.content > section {
  padding: 0 0 2.5rem;
  border-bottom: 1px solid var(--rule-light);
  margin-bottom: 2.5rem;
}
.content > section:last-child { border-bottom: 0; }
.content > section > h2 {
  margin-top: 0;
  color: var(--navy);
  font-size: var(--fs-h2);
  font-weight: 700;
}

/* -- Sidebar (condition pages) -------------------------------------------- */
.sidebar { font-size: var(--fs-sm); }
.sidebar__sticky {
  position: sticky;
  top: 140px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media (max-width: 900px) { .sidebar__sticky { position: static; } }

.sidebar-card {
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 1.5rem;
}
.sidebar-card__heading {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 0.6rem;
}
.sidebar-card p { font-size: var(--fs-sm); margin: 0 0 0.8rem; color: var(--text); line-height: 1.5; }
.sidebar-card--blue { background: var(--blue-tint); border-color: #C9E0F2; }

.btn-primary {
  display: block;
  text-align: center;
  background: var(--teal);
  color: #fff;
  padding: 0.75rem 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-sm);
  transition:
    background var(--dur-normal) var(--ease),
    transform var(--dur-normal) var(--ease),
    box-shadow var(--dur-normal) var(--ease);
}
.btn-primary:hover {
  background: var(--teal-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.sidebar-phone {
  display: block;
  color: var(--navy);
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
  margin-top: 0.5rem;
  text-align: center;
  letter-spacing: var(--tracking-tight);
}
.sidebar-phone:hover { color: var(--blue); }

.related-list { list-style: none; padding: 0; margin: 0; }
.related-list li { margin: 0; border-bottom: 1px solid var(--rule-light); }
.related-list li:last-child { border-bottom: 0; }
.related-list a {
  display: block;
  padding: 0.65rem 0;
  color: var(--blue);
  text-decoration: none;
  font-size: var(--fs-sm);
  line-height: 1.4;
  transition: color 150ms var(--ease), padding-left 180ms var(--ease);
}
.related-list a:hover {
  color: var(--navy);
  padding-left: 0.25rem;
}
.related-list .related-list__dim {
  color: var(--text-light);
  font-weight: 400;
  font-size: var(--fs-xs);
  display: block;
}

/* -- Physician lineup ----------------------------------------------------- */
.provider-list { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.9rem; }
.provider-list li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 0.8rem;
  align-items: center;
  margin: 0;
}
.portrait {
  width: 48px; height: 48px; border-radius: 50%;
  background: #fff; border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--navy); font-size: 0.875rem;
  overflow: hidden; flex-shrink: 0;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.provider-name { font-weight: 700; color: var(--navy); font-size: var(--fs-sm); margin: 0; line-height: 1.3; }
.provider-role { color: var(--text-muted); font-size: var(--fs-xs); margin: 0; line-height: 1.3; }

.physicians {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.25rem 0;
}
.physician-card {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.physician-card:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.physician-card__portrait {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--bg-alt); border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--navy); font-size: 1.125rem;
  margin-bottom: 0.25rem; overflow: hidden;
}
.physician-card__portrait img { width: 100%; height: 100%; object-fit: cover; }
.physician-card__name { font-size: var(--fs-lg); font-weight: 700; color: var(--navy); margin: 0; line-height: 1.2; }
.physician-card__role {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); font-weight: 600; margin: 0;
}
.physician-card__focus-label {
  margin-top: 0.5rem; font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text);
}
.physician-card__focus { font-size: var(--fs-sm); color: var(--text); margin: 0; line-height: 1.45; }

/* -- Fill-in blanks (shown only inside editorial panel on landing) -------- */
.blank {
  display: inline;
  padding: 0.08em 0.4em;
  border: 1px dashed #C79E45;
  background: #FFF8E6;
  color: #7A5408;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.82em;
  font-weight: 500;
  border-radius: 2px;
  line-height: 1.3;
}
.blank--block { display: block; padding: 0.5rem 0.75rem; font-size: 0.82em; line-height: 1.4; margin: 0.25rem 0; }
.blank::before { content: "["; opacity: 0.55; margin-right: 0.15em; }
.blank::after  { content: "]"; opacity: 0.55; margin-left: 0.15em; }

.blank--suggest {
  border-color: var(--blue);
  background: var(--blue-tint);
  color: var(--blue-dark);
}
.blank--suggest::before { content: "SUGGEST: ["; opacity: 0.75; margin-right: 0.2em; }
.blank--suggest::after  { content: "]"; opacity: 0.75; }

/* Editorial placeholders are hidden from public view by default.
   Reveal them by adding ?editorial=1 to the URL — a tiny JS flag sets
   a class on <html> and the rule below flips them back on.
   This keeps the site free of visible placeholders while Sam still has
   an easy way to locate every slot that needs real content. */
html:not(.show-editorial) .blank--suggest,
html:not(.show-editorial) .blank {
  display: none;
}
/* When a whole button wraps a blank placeholder, the button becomes empty
   and loses its affordance. Flag it as a disabled "coming soon" pill so
   the layout still reads cleanly in place of the missing PDF link. */
html:not(.show-editorial) .forms-list__btn:has(> .blank) {
  display: inline-flex;
  pointer-events: none;
  background: var(--gray-50);
  color: var(--text-light);
  border-color: var(--rule-light);
  font-style: normal;
  cursor: default;
}
html:not(.show-editorial) .forms-list__btn:has(> .blank)::before {
  content: "Coming soon";
  font-weight: 500;
  letter-spacing: 0.02em;
}
html:not(.show-editorial) .forms-list__btn:has(> .blank)::after { content: ""; }
/* Editorial mode: banner + restored blank visibility. */
html.show-editorial::before {
  content: "Editorial mode — SUGGEST placeholders visible (remove ?editorial=1 to hide)";
  display: block;
  position: sticky;
  top: 0;
  z-index: 2000;
  background: #B8761E;
  color: #fff;
  font: 600 0.78rem/1 var(--font);
  letter-spacing: 0.04em;
  padding: 0.5rem 1rem;
  text-align: center;
}

/* -- Performed-by attribution --------------------------------------------- */
.attribution {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: center;
  padding: 0.85rem 1rem;
  background: var(--bg-alt);
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-sm);
  margin: 0.75rem 0 1.5rem;
}
.attribution__label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--navy);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.attribution__value { color: var(--text); }

/* -- Callout -------------------------------------------------------------- */
.callout {
  clear: both;
  background: var(--blue-tint);
  border-left: 3px solid var(--blue);
  padding: 1.15rem 1.35rem;
  margin: 1.5rem 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.callout p { margin: 0; }
.callout p + p { margin-top: 0.5rem; }
.callout__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}

/* -- Anatomy figure ------------------------------------------------------- */
.figure {
  float: right;
  width: 185px;
  margin: 0.15rem 0 1.25rem 1.75rem;
  padding: 0.65rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: #fff;
}
@media (max-width: 720px) { .figure { float: none; width: 100%; margin: 1.25rem 0; } }
/* Clearfix — ensures floated figures don't bleed into the next block */
.content > section::after {
  content: "";
  display: table;
  clear: both;
}
.figure svg,
.figure img { display: block; width: 100%; height: auto; border-radius: var(--r-md); }
/* X-ray variant: light frame (matches the page), dark matte directly behind
   the image only — X-rays read better against black without dominating the layout. */
.figure--xray {
  background: #fff;
  border-color: var(--rule);
  padding: 0.75rem 0.75rem 0.85rem;
}
.figure--xray img {
  background: #0c0c0e;
  padding: 0.5rem;
  border-radius: var(--r-sm);
}
.figure--xray figcaption { color: var(--text-muted); margin-top: 0.75rem; padding: 0 0.25rem; }
.figure--xray figcaption strong { color: var(--navy); }
.figure figcaption {
  margin-top: 0.65rem;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.45;
}
.figure figcaption strong {
  display: block; color: var(--navy); font-size: var(--fs-sm); margin-bottom: 0.25rem;
}
.anatomy { color: var(--navy); }
.anatomy .stroke { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.anatomy .stroke-fine { fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; }
.anatomy .fill-tint { fill: var(--blue-tint); stroke: none; }
.anatomy .fill-blue { fill: var(--blue); stroke: none; }
.anatomy .label { font-family: var(--font); font-size: 10px; font-weight: 600; fill: var(--text); }
.anatomy .leader { fill: none; stroke: var(--text-muted); stroke-width: 0.75; }

/* -- Treatment list ------------------------------------------------------- */
.treatment-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.5rem;
  counter-reset: treatment;
  display: grid;
  gap: 1.25rem;
}
.treatment-list li {
  counter-increment: treatment;
  padding: 0 0 1.25rem 2.75rem;
  border-bottom: 1px solid var(--rule-light);
  position: relative;
  margin: 0;
}
.treatment-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.treatment-list li::before {
  content: counter(treatment);
  position: absolute;
  left: 0; top: 0;
  width: 1.85rem; height: 1.85rem;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.treatment-list h3 { margin-top: 0; font-size: var(--fs-lg); }
.treatment-list p:last-child { margin-bottom: 0; }

/* ===========================================================================
   LANDING PAGE — Apple-grade composition
   =========================================================================*/

/* -- Apple-style hero ----------------------------------------------------- */
.apple-hero {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, #F6F9FC 100%);
  overflow: hidden;
  padding: clamp(4rem, 8vw, 7rem) var(--gutter) clamp(3rem, 6vw, 5rem);
  min-height: 82vh;
  display: flex;
  align-items: center;
}
.apple-hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto auto;
  width: 60vw; height: 60vw;
  max-width: 900px; max-height: 900px;
  background: radial-gradient(closest-side, rgba(0, 112, 185, 0.08), transparent 70%);
  pointer-events: none;
}
.apple-hero__grid {
  max-width: var(--content-wide);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) {
  .apple-hero { min-height: auto; padding-top: clamp(3rem, 8vw, 5rem); }
  .apple-hero__grid { grid-template-columns: 1fr; gap: 2.5rem; text-align: left; }
  .apple-hero__visual { justify-self: center; max-width: 340px; width: 100%; }
}
.apple-hero__eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--blue);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin: 0 0 1.4rem;
  padding: 0.35rem 0.85rem;
  background: var(--blue-tint);
  border-radius: var(--r-sm);
}
.apple-hero__title {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--navy);
  margin: 0 0 1.75rem;
  max-width: 14ch;
}
.apple-hero__title em {
  font-style: normal;
  color: var(--blue);
  display: inline-block;
}
.apple-hero__lede {
  font-size: clamp(1.125rem, 0.7vw + 0.95rem, 1.4rem);
  color: var(--gray-700);
  line-height: 1.45;
  max-width: 44ch;
  margin: 0 0 2.25rem;
  font-weight: 400;
}
.apple-hero__cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}
.btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 1rem 2rem;
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
  letter-spacing: 0.005em;
  transition: background 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease-spring), box-shadow 180ms var(--ease);
  white-space: nowrap;
}
.btn-hero--primary {
  background: var(--blue);
  color: #fff;
  border: 1px solid var(--blue);
  box-shadow: var(--shadow-sm);
}
.btn-hero--primary:hover {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn-hero--ghost {
  background: transparent;
  color: var(--blue);
  border: 1px solid transparent;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.btn-hero--ghost::after {
  content: "›";
  font-size: 1.3em;
  line-height: 0.9;
  transform: translateY(-1px);
  transition: transform 220ms var(--ease);
}
.btn-hero--ghost:hover { color: var(--blue-dark); }
.btn-hero--ghost:hover::after { transform: translate(4px, -1px); }

.apple-hero__visual {
  position: relative;
  color: var(--navy);
  animation: markFloat 7s ease-in-out infinite;
}
.apple-hero__visual svg {
  width: 100%;
  height: auto;
  max-width: 480px;
  filter: drop-shadow(0 30px 50px rgba(0, 40, 85, 0.18));
}
@keyframes markFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .apple-hero__visual { animation: none; }
}

/* -- Quick facts strip (phone / hours / insurance) ------------------------ */
.quickfacts {
  background: #fff;
  border-bottom: 1px solid var(--rule);
}
.quickfacts__inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 1.75rem var(--gutter) 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem 2.5rem;
  align-items: start;
}
.quickfacts__item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.25rem 0;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.quickfacts__item + .quickfacts__item {
  border-left: 1px solid var(--rule-light);
  padding-left: 2.5rem;
}
@media (max-width: 720px) {
  .quickfacts__item + .quickfacts__item {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--rule-light);
    padding-top: 1.25rem;
  }
}
.quickfacts__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-light);
  font-weight: 700;
}
.quickfacts__big {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1vw + 1rem, 1.75rem);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.1;
  letter-spacing: var(--tracking-snug);
}
.quickfacts__sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.45;
}
.quickfacts__sub a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}
.quickfacts__sub a:hover { text-decoration: underline; }
.quickfacts__item--phone .quickfacts__big { color: var(--navy); }
.quickfacts__item--phone:hover .quickfacts__big { color: var(--teal-dark); }
.quickfacts__item--phone:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
  border-radius: var(--r-sm);
}

/* -- Section band (generic wrapper, Apple alternating feel) --------------- */
.band {
  padding: clamp(4rem, 8vw, 7rem) var(--gutter);
  position: relative;
}
.band__inner {
  max-width: var(--content-wide);
  margin: 0 auto;
}
.band--gray { background: var(--gray-50); }
.band--dark {
  background: var(--navy);
  color: #E7ECF3;
  position: relative;
}
.band--dark::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal) 0%, var(--sage) 100%);
  z-index: 1;
}
.band--dark h1, .band--dark h2, .band--dark h3, .band--dark h4 { color: #fff; }
.band--dark a { color: #7FC4EB; }
.band--dark a:hover { color: #B8DCF2; }

.band__eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 1rem;
}
.band--dark .band__eyebrow { color: #7FC4EB; }
.band__title {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--navy);
  margin: 0 0 1rem;
  max-width: 18ch;
}
.band--dark .band__title { color: #fff; }
.band__lede {
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.3rem);
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 52ch;
  margin: 0 0 2.5rem;
}
.band--dark .band__lede { color: #BECBDD; }

/* -- Why OSI feature strip ------------------------------------------------ */
.why-osi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
}
.why-osi__item {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.why-osi__icon {
  width: 44px;
  height: 44px;
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.why-osi__icon svg { width: 100%; height: 100%; display: block; }
.why-osi__title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
  letter-spacing: var(--tracking-snug);
}
.why-osi__copy {
  font-size: var(--fs-base);
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
  max-width: 32ch;
}

/* -- Region tab nav (landing) --------------------------------------------- */
.region-tabs {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  z-index: 40;
}
.region-tabs__inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.region-tabs__inner::-webkit-scrollbar { display: none; }
.region-tabs a {
  display: inline-block;
  padding: 0.95rem 1.25rem;
  color: var(--navy);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--fs-sm);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 150ms var(--ease), border-color 150ms var(--ease);
}
.region-tabs a:hover { color: var(--blue); }
.region-tabs a.is-active { color: var(--blue); border-bottom-color: var(--blue); }

/* -- Directory (landing) -------------------------------------------------- */
.directory {
  background: var(--sky-tint);
  border-top: 1px solid rgba(11, 42, 74, 0.06);
  border-bottom: 1px solid rgba(11, 42, 74, 0.06);
  padding: clamp(3rem, 6vw, 5rem) var(--gutter);
}
.directory__inner {
  max-width: var(--content-wide);
  margin: 0 auto;
}
.directory__section-title {
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--navy);
  margin: 0 0 0.5rem;
  line-height: 1.05;
  position: relative;
  padding-bottom: 0.6rem;
}
.directory__section-title::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 0.6rem;
  background: linear-gradient(90deg, var(--sage) 0%, var(--teal) 100%);
  border-radius: 2px;
}
.directory__section-lede {
  color: var(--text-muted);
  margin: 0 0 2.5rem;
  max-width: 58ch;
  font-size: var(--fs-lg);
  line-height: 1.5;
}

/* -- Region tiles --------------------------------------------------------- */
.region-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}
.region-tile {
  background: #ffffff;
  border: 1px solid rgba(11, 42, 74, 0.08);
  border-radius: var(--r-xl);
  padding: 2rem 2rem 1.5rem;
  transition:
    border-color 240ms var(--ease),
    box-shadow 240ms var(--ease),
    transform 240ms var(--ease);
  scroll-margin-top: 160px;
  position: relative;
  box-shadow: var(--shadow-sm);
}
.region-tile:hover {
  border-color: rgba(63, 128, 105, 0.45);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.region-tile__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule-light);
  position: relative;
}
.region-tile__icon {
  width: 34px;
  height: 34px;
  color: var(--teal);
  fill: currentColor;
  flex: 0 0 auto;
  transition: color 300ms var(--ease), transform 300ms var(--ease);
}
.region-tile:hover .region-tile__icon { color: var(--navy); transform: translateY(-1px); }

/* Region numeral — editorial index number, Source Serif, navy */
.region-tile__num {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 500;
  line-height: 1;
  color: var(--navy);
  opacity: 0.22;
  letter-spacing: -0.02em;
  transition: opacity 280ms var(--ease), color 280ms var(--ease);
  user-select: none;
}
.region-tile:hover .region-tile__num {
  opacity: 0.55;
  color: var(--sage-dark);
}

/* Region dot — legacy marker, retained for any non-landing use */
.region-tile__dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(20, 163, 184, 0.16);
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.region-tile:hover .region-tile__dot { transform: scale(1.1); }

.region-tile__dot[data-region="hip"]      { background: var(--navy);      box-shadow: 0 0 0 4px rgba(11, 42, 74, 0.14); }
.region-tile__dot[data-region="knee"]     { background: var(--teal);      box-shadow: 0 0 0 4px rgba(20, 163, 184, 0.18); }
.region-tile__dot[data-region="shoulder"] { background: var(--blue);      box-shadow: 0 0 0 4px rgba(30, 90, 156, 0.16); }
.region-tile__dot[data-region="elbow"]    { background: var(--sage);      box-shadow: 0 0 0 4px rgba(107, 158, 126, 0.20); }
.region-tile__dot[data-region="hand"]     { background: var(--teal-dark); box-shadow: 0 0 0 4px rgba(15, 132, 148, 0.16); }
.region-tile__dot[data-region="spine"]    { background: var(--blue-dark); box-shadow: 0 0 0 4px rgba(20, 62, 109, 0.16); }
.region-tile__dot[data-region="foot"]     { background: var(--sage-dark); box-shadow: 0 0 0 4px rgba(74, 125, 93, 0.20); }
.region-tile__dot[data-region="trauma"]   { background: var(--warning);   box-shadow: 0 0 0 4px rgba(184, 118, 30, 0.18); }
.region-tile__label {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
}
.region-tile__list { list-style: none; padding: 0; margin: 0; position: relative; }
.region-tile__list li { margin: 0; font-size: var(--fs-sm); }
.region-tile__list a,
.region-tile__list .disabled {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--rule-light);
  color: var(--navy);
  text-decoration: none;
  font-weight: 500;
  transition: color 150ms var(--ease), padding-left 220ms var(--ease);
}
.region-tile__list li:first-child a,
.region-tile__list li:first-child .disabled { border-top: 0; }
.region-tile__list a::after {
  content: "›";
  color: var(--blue);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}
.region-tile__list a:hover { color: var(--blue); padding-left: 0.35rem; }
.region-tile__list a:hover::after { opacity: 1; transform: translateX(4px); }
.region-tile__list .disabled { color: var(--text-light); cursor: default; font-weight: 400; }
.region-tile__list .disabled::after {
  content: "Coming soon";
  font-size: var(--fs-xs);
  color: var(--text-light);
  font-weight: 500;
  text-transform: none;
}

/* -- "Meet the practice" dark band grid ----------------------------------- */
.practice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.practice-grid__card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  transition: background 200ms var(--ease), transform 200ms var(--ease);
}
.practice-grid__card:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}
.practice-grid__card h3 {
  color: #fff;
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: 0 0 0.85rem;
  letter-spacing: var(--tracking-snug);
}
.practice-grid__card ul { list-style: none; padding: 0; margin: 0; }
.practice-grid__card li {
  color: #D2DEEC;
  font-size: var(--fs-sm);
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  line-height: 1.45;
}
.practice-grid__card li:last-child { border-bottom: 0; }
.practice-grid__card li strong { color: #fff; font-weight: 600; }

/* -- Editorial notes (collapsible SUGGEST panel) -------------------------- */
.editorial-notes {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 2rem var(--gutter) 3rem;
  border-top: 1px dashed var(--rule);
}
.editorial-notes summary {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.5rem 0;
  letter-spacing: 0.02em;
  list-style: none;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.editorial-notes summary::-webkit-details-marker { display: none; }
.editorial-notes summary::before {
  content: "▸";
  font-size: 0.8em;
  color: var(--blue);
  transition: transform 180ms var(--ease);
}
.editorial-notes[open] summary::before { transform: rotate(90deg); }
.editorial-notes summary:hover { color: var(--navy); }
.editorial-notes__inner {
  margin-top: 1rem;
  padding: 1.5rem;
  background: var(--gray-50);
  border-radius: var(--r-lg);
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.55;
}
.editorial-notes__inner p { margin: 0 0 0.75rem; }
.editorial-notes__inner p:last-child { margin-bottom: 0; }
.editorial-notes__inner ul { padding-left: 1.1rem; margin: 0; }
.editorial-notes__inner li { margin-bottom: 0.5rem; }

/* -- Footer --------------------------------------------------------------- */
.site-footer {
  background: var(--navy-dark);
  color: #C5D0E0;
  padding: 3.5rem var(--gutter) 2rem;
  font-size: var(--fs-sm);
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--teal) 0%, var(--sage) 100%);
}
.site-footer__inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 3rem;
}
@media (max-width: 720px) { .site-footer__inner { grid-template-columns: 1fr; gap: 2rem; } }
.site-footer h4 {
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0 0 1rem;
}
.site-footer a { color: #C5D0E0; text-decoration: none; transition: color 150ms var(--ease); }
.site-footer a:hover { color: #fff; }
.site-footer p { line-height: 1.55; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.45rem; font-size: var(--fs-sm); }
.site-footer__disclaimer {
  max-width: var(--content-wide);
  margin: 3rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-xs);
  color: #8897AE;
  line-height: 1.55;
}

/* ============================================================================
   PRACTICE PAGES (insurance / forms / appointment)
   ========================================================================= */

/* -- Appointment hero ------------------------------------------------------ */
.appt-hero {
  margin: 1.5rem 0 2rem;
  padding: 2rem 2.25rem;
  background: linear-gradient(135deg, #F7F7F9 0%, #EEF3FA 100%);
  border: 1px solid var(--rule-light);
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.appt-hero__phone {
  font-size: clamp(2.25rem, 4vw + 1rem, 3.25rem);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--navy);
  text-decoration: none;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.appt-hero__phone:hover { color: var(--blue-dark); }
.appt-hero__note {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-light);
  letter-spacing: 0.02em;
}

/* -- Contact grid (portal / email / fax) ---------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 2rem;
}
.contact-grid__card {
  padding: 1.75rem 1.5rem;
  background: #fff;
  border: 1px solid var(--rule-light);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 220ms var(--ease), transform 220ms var(--ease), border-color 220ms var(--ease);
}
.contact-grid__card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: var(--sage);
}
.contact-grid__card h3 {
  margin: 0 0 0.5rem;
  font-size: var(--fs-lg);
  color: var(--navy);
  letter-spacing: var(--tracking-snug);
}
.contact-grid__card p {
  margin: 0 0 1rem;
  font-size: var(--fs-base);
  color: var(--text-muted);
  line-height: 1.5;
}
.contact-grid__card .btn-primary { width: 100%; text-align: center; }
.contact-grid__big {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: var(--tracking-snug);
  font-variant-numeric: tabular-nums;
  margin: 0.25rem 0 0;
}

/* -- Checklist (first-visit, what-to-bring) ------------------------------- */
.checklist {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 2rem;
  counter-reset: checklist;
}
.checklist li {
  position: relative;
  padding: 0.9rem 1rem 0.9rem 3.25rem;
  border-bottom: 1px solid var(--rule-light);
  font-size: var(--fs-base);
  color: var(--text);
  line-height: 1.5;
}
.checklist li:last-child { border-bottom: 0; }
.checklist li::before {
  counter-increment: checklist;
  content: counter(checklist);
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-sm);
  background: var(--blue-tint);
  color: var(--navy);
  font-size: 0.875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.checklist strong { color: var(--navy); font-weight: 700; }

/* -- Locations list ------------------------------------------------------- */
.locations-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.5rem 1.5rem;
}
.locations-list li {
  padding: 1rem 0;
  border-top: 1px solid var(--rule-light);
  font-size: var(--fs-base);
  color: var(--text-muted);
  line-height: 1.5;
}
.locations-list strong { color: var(--navy); font-size: var(--fs-lg); display: block; margin-bottom: 0.25rem; }

/* -- Plans list (insurance) ----------------------------------------------- */
.plans-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}
.plans-list > li {
  padding: 0.55rem 1rem;
  background: var(--gray-50);
  border: 1px solid var(--rule-light);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.3;
}
.plans-list > li:has(.blank) {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  display: block;
  width: 100%;
}

/* -- Forms list (patient forms page) -------------------------------------- */
.forms-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 2rem;
}
.forms-list > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--rule-light);
}
.forms-list > li:first-child { border-top: 1px solid var(--rule-light); }
.forms-list__meta h3 {
  margin: 0 0 0.25rem;
  font-size: var(--fs-lg);
  color: var(--navy);
  letter-spacing: var(--tracking-snug);
  font-weight: 600;
}
.forms-list__meta p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.4;
}
.forms-list__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  background: #fff;
  color: var(--blue);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: all 150ms var(--ease);
  white-space: nowrap;
}
.forms-list__btn::after { content: "↓"; font-weight: 700; }
.forms-list__btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
@media (max-width: 640px) {
  .forms-list > li { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .forms-list__btn { align-self: stretch; justify-content: center; }
}

/* ============================================================================
   PROVIDERS
   ========================================================================= */

/* -- Providers index grid (on providers.html + landing) ------------------- */
.providers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
  gap: 1.5rem 1.75rem;
  justify-content: center;
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.provider-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--rule-light);
  transition: transform 340ms var(--ease), box-shadow 340ms var(--ease), border-color 340ms var(--ease);
  position: relative;
}
/* Thin sage→teal accent strip across the top of every card */
.provider-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sage) 0%, var(--teal) 100%);
  opacity: 0.55;
  transition: opacity 340ms var(--ease);
  z-index: 2;
  pointer-events: none;
}
.provider-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(63, 128, 105, 0.35);
  color: inherit;
}
.provider-card:hover::before { opacity: 1; }
.provider-card__photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  /* Warm duotone backdrop — peeks through portraits with transparent edges */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(20, 163, 184, 0.12) 0%, rgba(20, 163, 184, 0) 55%),
    linear-gradient(165deg, #EAF4F7 0%, #F3F6F2 55%, #EDF1E9 100%);
  position: relative;
  isolation: isolate;
}
.provider-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  /* Subtle editorial treatment at rest — slightly muted, warmer, more unified */
  filter: saturate(0.88) contrast(1.02);
  transition: transform 620ms var(--ease), filter 420ms var(--ease);
}
/* Soft navy→sage wash over the photo at rest; clears on hover for a "color-burst" reveal */
.provider-card__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 42, 74, 0) 55%, rgba(11, 42, 74, 0.22) 100%);
  opacity: 1;
  transition: opacity 420ms var(--ease);
  z-index: 1;
  pointer-events: none;
}
.provider-card:hover .provider-card__photo img {
  transform: scale(1.04);
  filter: saturate(1.05) contrast(1.03);
}
.provider-card:hover .provider-card__photo::after { opacity: 0; }
.provider-card__body {
  padding: 1.5rem 1.5rem 1.75rem;
}
.provider-card__role {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.5rem;
}
.provider-card__name {
  margin: 0 0 0.35rem;
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--navy);
  letter-spacing: var(--tracking-snug);
  line-height: 1.2;
}
.provider-card__focus {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--text-muted);
  line-height: 1.45;
}
.provider-card__more {
  margin-top: 1.25rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 180ms var(--ease);
}
.provider-card__more::after {
  content: "→";
  font-weight: 500;
  transition: transform 220ms var(--ease);
  display: inline-block;
}
.provider-card:hover .provider-card__more { color: var(--navy); }
.provider-card:hover .provider-card__more::after { transform: translateX(4px); }

/* -- Bio hero (individual physician page) --------------------------------- */
.bio-hero {
  max-width: var(--content-wide);
  margin: 1rem auto 3.5rem;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(280px, 1.15fr) 2fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 820px) { .bio-hero { grid-template-columns: 1fr; } }
.bio-hero__portrait {
  aspect-ratio: 3 / 4;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: linear-gradient(135deg, #E8F2FA, #F7F7F9);
  box-shadow: var(--shadow-lg);
  max-width: 420px;
  justify-self: center;
  width: 100%;
}
.bio-hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.bio-hero__eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1rem;
  padding: 0.3rem 0.75rem;
  background: var(--blue-tint);
  border-radius: var(--r-sm);
}
.bio-hero h1 {
  font-size: clamp(2rem, 4vw + 1rem, 3.5rem);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 0.5rem;
  color: var(--navy);
  font-weight: 700;
}
.bio-hero h1 em {
  font-style: normal;
  color: inherit;
  font-weight: 500;
  opacity: 0.55;
}
.bio-hero__title {
  font-size: var(--fs-lg);
  color: var(--text-muted);
  margin: 0 0 1rem;
  line-height: 1.4;
}
.bio-hero__pullquote {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--navy);
  border-left: 3px solid var(--teal);
  padding: 0.35rem 0 0.35rem 0.9rem;
  margin: 0 0 1.6rem;
  max-width: 52ch;
}
.bio-hero__pullquote strong { color: var(--teal); font-weight: 700; }
.bio-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.bio-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  transition: all 150ms var(--ease);
}
.bio-hero__chip:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.bio-hero__chip--primary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.bio-hero__chip--primary:hover { background: var(--navy-dark); color: #fff; }

/* -- Bio body ------------------------------------------------------------- */
.bio-body {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter) 3rem;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 820px) { .bio-body { grid-template-columns: 1fr; } }
.bio-body__narrative p {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 1.25rem;
}
/* Drop cap removed — didn't fit the clinical tone. */
.bio-facts {
  background: var(--gray-50);
  border-radius: var(--r-lg);
  padding: 2rem 1.75rem;
  align-self: start;
  position: sticky;
  top: 140px;
}
.bio-facts h3 {
  margin: 0 0 1.25rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.bio-facts dl {
  margin: 0;
  display: grid;
  gap: 1rem;
}
.bio-facts dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-light);
  margin-bottom: 0.2rem;
}
.bio-facts dd {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.45;
}
.bio-facts dd + dt { border-top: 1px solid var(--rule-light); padding-top: 1rem; }

/* -- PA-C panel (tucked below physician) ---------------------------------- */
.pac-section {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--gray-50) 100%);
  border-top: 1px solid var(--rule-light);
  padding: 3.5rem 0 4rem;
  margin-top: 2rem;
}
.pac-section__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.pac-section__lead {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.75rem;
}
.pac-section__title {
  font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2rem);
  color: var(--navy);
  letter-spacing: var(--tracking-snug);
  margin: 0 0 2rem;
  line-height: 1.2;
}
.pac-card {
  background: #fff;
  border: 1px solid var(--rule-light);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.pac-card__summary {
  list-style: none;
  cursor: pointer;
  padding: 1.5rem 1.75rem;
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 1.25rem;
  align-items: center;
  transition: background 150ms var(--ease);
}
.pac-card__summary::-webkit-details-marker { display: none; }
.pac-card__summary:hover { background: var(--gray-50); }
.pac-card__photo {
  width: 80px;
  height: 80px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: linear-gradient(135deg, #E8F2FA, #F7F7F9);
}
.pac-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.pac-card__meta h3 {
  margin: 0 0 0.2rem;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--navy);
  letter-spacing: var(--tracking-snug);
}
.pac-card__meta p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.pac-card__toggle {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}
.pac-card__toggle::after {
  content: "▾";
  font-size: 0.9em;
  transition: transform 200ms var(--ease);
}
.pac-card[open] .pac-card__toggle::after { transform: rotate(180deg); }
.pac-card[open] .pac-card__toggle .pac-card__toggle-label::before { content: "Collapse"; }
.pac-card__toggle-label::before { content: "Read full bio"; }
.pac-card__body {
  padding: 0 1.75rem 2rem;
  border-top: 1px solid var(--rule-light);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  padding-top: 1.75rem;
}
@media (max-width: 720px) {
  .pac-card__summary { grid-template-columns: 64px 1fr; }
  .pac-card__toggle { grid-column: 1 / -1; justify-content: flex-start; }
  .pac-card__photo { width: 64px; height: 64px; }
  .pac-card__body { grid-template-columns: 1fr; padding: 1.5rem 1.5rem 1.75rem; }
}
.pac-card__body p {
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 1rem;
}
.pac-card__facts {
  background: var(--gray-50);
  border-radius: var(--r-md);
  padding: 1.25rem;
  font-size: var(--fs-sm);
}
.pac-card__facts dl { margin: 0; display: grid; gap: 0.75rem; }
.pac-card__facts dt {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-light);
  margin-bottom: 0.15rem;
}
.pac-card__facts dd { margin: 0; color: var(--text); line-height: 1.45; }

/* -- Landing providers preview (on index.html) ---------------------------- */
.providers-preview {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: clamp(4rem, 7vw, 6rem) var(--gutter) clamp(3rem, 5vw, 4rem);
}
.providers-preview__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.providers-preview__head h2 {
  font-size: clamp(1.75rem, 3vw + 1rem, 3rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--navy);
  margin: 0;
  font-weight: 700;
  position: relative;
  padding-bottom: 0.5rem;
}
.providers-preview__head h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 0.6rem;
  background: linear-gradient(90deg, var(--sage) 0%, var(--teal) 100%);
  border-radius: 2px;
}
.providers-preview__head h2 em { font-style: normal; color: var(--blue); font-weight: 500; }
.providers-preview__head a {
  color: var(--navy);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  letter-spacing: 0.01em;
}
.providers-preview__head a::after { content: "→"; transition: transform 200ms var(--ease); }
.providers-preview__head a:hover::after { transform: translateX(3px); }

/* Landing override: compact 5-up row so the whole team fits on one MacBook
   screen. The larger 3+2 spanned layout is kept for the dedicated
   /practice/providers.html page. */
.providers-preview .providers-grid--full {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  max-width: var(--content-max);
  margin: 0 auto;
}
.providers-preview .providers-grid--full .provider-card,
.providers-preview .providers-grid--full .provider-card:nth-child(4),
.providers-preview .providers-grid--full .provider-card:nth-child(5) {
  grid-column: auto;
}
.providers-preview .providers-grid--full .provider-card__photo {
  aspect-ratio: 4 / 5;
}
.providers-preview .providers-grid--full .provider-card__body {
  padding: 0.85rem 0.95rem 1rem;
  gap: 0.25rem;
}
.providers-preview .providers-grid--full .provider-card__name {
  font-size: 0.95rem;
  line-height: 1.15;
}
.providers-preview .providers-grid--full .provider-card__role {
  font-size: 0.65rem;
  letter-spacing: 0.04em;
}
.providers-preview .providers-grid--full .provider-card__focus {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-muted);
  /* Clamp focus blurb to 3 lines so cards stay evenly sized */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.providers-preview .providers-grid--full .provider-card__more {
  font-size: 0.75rem;
  padding-top: 0.5rem;
}

/* Responsive fallbacks — 3-up on medium screens, 2-up on small, 1-up mobile */
@media (max-width: 1080px) {
  .providers-preview .providers-grid--full {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .providers-preview .providers-grid--full {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .providers-preview .providers-grid--full {
    grid-template-columns: 1fr;
  }
}

/* Full card variant — square hoverable cards, full info inside.
   Layout: 3 surgeons top row, 2 PAs centered below (uses 6-col grid). */
.providers-grid--full {
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
  max-width: var(--content-wide);
  justify-content: stretch;
}
.providers-grid--full .provider-card { grid-column: span 2; }
/* 4th & 5th cards (the two PAs) center on bottom row */
.providers-grid--full .provider-card:nth-child(4) { grid-column: 2 / span 2; }
.providers-grid--full .provider-card:nth-child(5) { grid-column: 4 / span 2; }

@media (max-width: 900px) {
  .providers-grid--full { grid-template-columns: repeat(2, 1fr); }
  .providers-grid--full .provider-card,
  .providers-grid--full .provider-card:nth-child(4),
  .providers-grid--full .provider-card:nth-child(5) { grid-column: auto; }
  /* On 2-col, center Twitero (the orphan surgeon) and last PA pair stays 2-up */
  .providers-grid--full .provider-card:nth-child(3) { grid-column: 1 / -1; justify-self: center; max-width: 420px; width: 100%; }
}
@media (max-width: 560px) {
  .providers-grid--full { grid-template-columns: 1fr; }
  .providers-grid--full .provider-card:nth-child(3) { max-width: none; }
}
.providers-grid--full .provider-card {
  display: flex;
  flex-direction: column;
}
.providers-grid--full .provider-card__photo {
  aspect-ratio: 4 / 5;
}
.providers-grid--full .provider-card__body {
  padding: 1.15rem 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}
.providers-grid--full .provider-card__name {
  font-size: 1.15rem;
  margin: 0;
  order: 1;
}
.providers-grid--full .provider-card__role {
  margin: 0;
  order: 2;
  font-size: 0.72rem;
}
.providers-grid--full .provider-card__focus {
  font-size: var(--fs-sm);
  line-height: 1.45;
  margin: 0.25rem 0 0;
  order: 3;
}
.providers-grid--full .provider-card__facts {
  order: 4;
  margin: 0.5rem 0 0;
}
.providers-grid--full .provider-card__more {
  order: 5;
  margin-top: auto;
  padding-top: 0.75rem;
}

/* Rich card variant — wider cards w/ credentials + practice-area facts */
.providers-grid--rich {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.75rem;
  max-width: var(--content-wide);
}
.providers-grid--rich .provider-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0;
  align-items: stretch;
}
@media (max-width: 560px) {
  .providers-grid--rich .provider-card {
    grid-template-columns: 1fr;
  }
}
.providers-grid--rich .provider-card__photo {
  aspect-ratio: 1 / 1.25;
  min-height: 100%;
}
@media (max-width: 560px) {
  .providers-grid--rich .provider-card__photo {
    aspect-ratio: 3 / 2;
  }
}
.providers-grid--rich .provider-card__body {
  padding: 1.15rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.providers-grid--rich .provider-card__name {
  font-size: 1.15rem;
  margin-bottom: 0.15rem;
}
.providers-grid--rich .provider-card__role {
  margin-bottom: 0.25rem;
}
.providers-grid--rich .provider-card__focus {
  font-size: var(--fs-sm);
  line-height: 1.45;
  margin-bottom: 0.25rem;
}
.provider-card__facts {
  margin: 0.35rem 0 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 0.75rem;
  font-size: 0.78rem;
  line-height: 1.4;
  border-top: 1px solid var(--rule-light);
  padding-top: 0.75rem;
}
.provider-card__facts dt {
  color: var(--text-light);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.68rem;
  padding-top: 0.1rem;
}
.provider-card__facts dd {
  margin: 0;
  color: var(--text);
}
.providers-preview__foot {
  margin: 2.5rem auto 0;
  max-width: var(--content-wide);
  padding: 0 var(--gutter);
  text-align: center;
}
.providers-preview__foot a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  font-size: var(--fs-base);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 200ms var(--ease);
}
.providers-preview__foot a:hover { color: var(--teal-dark); }

/* ============================================================================
   CARE TEAMS  (surgeon + PA pairing, providers.html)
   ========================================================================= */
.care-teams {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(3rem, 5vw, 5rem);
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.care-team {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  background: #fff;
  border: 1px solid var(--rule-light);
  border-radius: var(--r-xl);
  padding: 1.75rem 2rem;
  box-shadow: 0 1px 0 rgba(11, 42, 74, 0.03);
  transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.care-team:hover {
  border-color: #D6E0EE;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.care-team--solo {
  grid-template-columns: 1fr;
}
.care-team--solo .provider-chip--lead {
  max-width: 620px;
}

/* Joiner column: vertical divider + centered "works with" label */
.care-team__joiner {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 90px;
}
.care-team__joiner::before {
  content: "";
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 50%;
  width: 1px;
  background: var(--rule-light);
}
.care-team__joiner-label {
  position: relative;
  background: #fff;
  padding: 0.35rem 0.65rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--text-light);
  letter-spacing: 0.01em;
}

@media (max-width: 820px) {
  .care-team {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 1.5rem 1.25rem;
  }
  .care-team__joiner {
    min-width: 0;
    padding: 0.75rem 0;
    justify-content: flex-start;
  }
  .care-team__joiner::before {
    top: 50%;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
  }
  .care-team__joiner-label {
    padding: 0 0.65rem 0 0;
  }
}

/* Provider chip — shared building block for lead (MD) + PA cards */
.provider-chip {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: 0.25rem;
  border-radius: var(--r-md);
  transition: background 180ms var(--ease);
}
.provider-chip:hover { background: var(--gray-50); color: inherit; }
.provider-chip__photo {
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #E8F2FA, #F7F7F9);
  flex-shrink: 0;
}
.provider-chip--lead .provider-chip__photo {
  width: 132px;
  height: 132px;
}
.provider-chip--pa .provider-chip__photo {
  width: 96px;
  height: 96px;
}
.provider-chip__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 400ms var(--ease);
}
.provider-chip:hover .provider-chip__photo img { transform: scale(1.03); }
.provider-chip__body { min-width: 0; }
.provider-chip__role {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--blue);
  font-weight: 700;
  margin-bottom: 0.35rem;
  line-height: 1.3;
}
.provider-chip__name {
  font-family: var(--font-display);
  color: var(--navy);
  font-weight: 600;
  margin: 0 0 0.4rem;
  letter-spacing: var(--tracking-snug);
  line-height: 1.15;
}
.provider-chip--lead .provider-chip__name { font-size: 1.5rem; }
.provider-chip--pa .provider-chip__name { font-size: 1.15rem; }
.provider-chip__focus {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.provider-chip__facts {
  margin: 0.6rem 0 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3rem 0.75rem;
  font-size: 0.78rem;
  line-height: 1.4;
  border-top: 1px solid var(--rule-light);
  padding-top: 0.6rem;
}
.provider-chip__facts dt {
  color: var(--text-light);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.68rem;
  padding-top: 0.1rem;
}
.provider-chip__facts dd {
  margin: 0;
  color: var(--text);
}
.provider-chip__more {
  display: inline-block;
  margin-top: 0.7rem;
  color: var(--blue);
  font-weight: 600;
  font-size: var(--fs-sm);
}
.provider-chip:hover .provider-chip__more { color: var(--teal-dark); }

/* In landing care-teams, chips need to align top so facts+more don't collapse */
.providers-preview .provider-chip { align-items: flex-start; }
.providers-preview .provider-chip__photo { margin-top: 0.2rem; }

@media (max-width: 560px) {
  .provider-chip {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .provider-chip__photo {
    width: 112px !important;
    height: 112px !important;
  }
}


/* -- Print ---------------------------------------------------------------- */
/* ============================================================================
   Hero — full-bleed photo with overlay copy (replaces apple-hero circle)
   ========================================================================= */
.hero-photo {
  position: relative;
  width: 100%;
  min-height: clamp(480px, 72vh, 760px);
  overflow: hidden;
  isolation: isolate;
  background: var(--navy-dark);
}
.hero-photo__image {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}
.hero-photo__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
  /* subtle warm-lift, no duotone */
  filter: saturate(1.02) contrast(1.02);
}
.hero-photo__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg,
      rgba(11, 42, 74, 0.88) 0%,
      rgba(11, 42, 74, 0.62) 38%,
      rgba(11, 42, 74, 0.10) 72%,
      rgba(11, 42, 74, 0.02) 100%),
    linear-gradient(180deg,
      rgba(11, 42, 74, 0.00) 60%,
      rgba(11, 42, 74, 0.35) 100%);
  pointer-events: none;
}
.hero-photo__content {
  position: relative;
  z-index: 2;
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: clamp(4rem, 10vw, 8rem) var(--gutter) clamp(3rem, 8vw, 6rem);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: inherit;
  justify-content: center;
}
.hero-photo__eyebrow {
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #E8E2D4;
  margin: 0 0 1.4rem;
  padding: 0.1rem 0 0.1rem 0.7rem;
  border-left: 2px solid var(--sage);
  display: inline-block;
}
.hero-photo__title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: #fff;
  margin: 0 0 1.25rem;
  max-width: 22ch;
}
.hero-photo__title em {
  font-style: italic;
  font-weight: 400;
  color: inherit;
}
.hero-photo__lede {
  font-size: clamp(1.0625rem, 0.6vw + 0.95rem, 1.2rem);
  color: rgba(255, 255, 255, 0.94);
  line-height: 1.55;
  max-width: 52ch;
  margin: 0 0 2rem;
  font-weight: 400;
  font-family: var(--font-display);
}
.hero-photo__cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}
.hero-photo__caption {
  position: absolute;
  z-index: 2;
  bottom: clamp(1rem, 2vw, 1.75rem);
  right: clamp(1rem, 3vw, 2.5rem);
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  font-weight: 500;
}
@media (max-width: 720px) {
  .hero-photo__scrim {
    background:
      linear-gradient(180deg,
        rgba(11, 42, 74, 0.35) 0%,
        rgba(11, 42, 74, 0.55) 40%,
        rgba(11, 42, 74, 0.85) 100%);
  }
  .hero-photo__title { max-width: 100%; }
  .hero-photo__caption { position: static; margin: 0 var(--gutter) 1.25rem; text-align: left; }
}

/* Light ghost button for photo hero overlay */
.btn-hero--ghost-light {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 1rem 1.75rem;
}
.btn-hero--ghost-light::after {
  content: "›";
  font-size: 1.3em;
  line-height: 0.9;
  margin-left: 0.35rem;
  transform: translateY(-1px);
  transition: transform 220ms var(--ease);
  display: inline-block;
}
.btn-hero--ghost-light:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
  transform: translateY(-2px);
}
.btn-hero--ghost-light:hover::after { transform: translate(4px, -1px); }

/* Re-point primary hero button to teal (was --blue) */
.btn-hero--primary {
  background: var(--teal);
  border-color: var(--teal);
}
.btn-hero--primary:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
}

/* ============================================================================
   Meet-OSI photo band (editorial: tall photo + copy, asymmetric)
   ========================================================================= */
.meet-band {
  background:
    linear-gradient(115deg, var(--blue-tint) 0%, var(--sage-tint) 55%, var(--sage-tint) 100%);
  border-top: 1px solid rgba(11, 42, 74, 0.06);
  border-bottom: 1px solid rgba(74, 125, 93, 0.12);
  padding: clamp(4rem, 8vw, 7rem) var(--gutter);
}
.meet-band__inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
@media (max-width: 860px) {
  .meet-band__inner { grid-template-columns: 1fr; gap: 2.5rem; }
}
.meet-band__photos {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1rem;
  align-items: start;
}
.meet-band__photo {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.meet-band__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.meet-band__photo--tall { aspect-ratio: 4 / 5; }
.meet-band__photo--short {
  aspect-ratio: 4 / 5;
  margin-top: 2.5rem;
}
@media (max-width: 860px) {
  .meet-band__photo--short { margin-top: 0; }
}
.meet-band__copy .eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--teal-dark);
  margin: 0 0 1rem;
}
.meet-band__copy h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 1.4rem;
  max-width: 18ch;
  position: relative;
  padding-bottom: 0.6rem;
}
.meet-band__copy h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 0.6rem;
  background: linear-gradient(90deg, var(--sage) 0%, var(--teal) 100%);
  border-radius: 2px;
}
.meet-band__copy h2 em {
  font-style: italic;
  color: var(--teal-dark);
  font-weight: 400;
}
.meet-band__lede {
  font-size: var(--fs-lg);
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 52ch;
  margin: 0 0 1.75rem;
}
.meet-band__points {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  gap: 0.85rem;
}
.meet-band__points li {
  padding: 0 0 0 1.75rem;
  position: relative;
  font-size: var(--fs-base);
  color: var(--text);
  line-height: 1.55;
}
.meet-band__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(20, 163, 184, 0.18);
}
.meet-band__points strong { color: var(--navy); font-weight: 600; }
.meet-band__cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.meet-band__hours {
  margin-top: 1rem;
  font-size: var(--fs-sm);
  color: var(--text-light);
  font-style: italic;
  line-height: 1.5;
}

/* -- Plan your visit (first-visit essentials) ----------------------------- */
.first-visit {
  background: var(--sage-tint);
  border-top: 1px solid rgba(74, 125, 93, 0.14);
  border-bottom: 1px solid rgba(74, 125, 93, 0.14);
  padding: clamp(4rem, 8vw, 7rem) var(--gutter);
  position: relative;
}
.first-visit::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sage) 0%, var(--teal) 100%);
}
.first-visit__inner {
  max-width: var(--content-wide);
  margin: 0 auto;
}
.first-visit__eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--sage-dark);
  margin: 0 0 1rem;
}
.first-visit h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 0.9rem;
  max-width: 22ch;
  position: relative;
  padding-bottom: 0.6rem;
}
.first-visit h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 0.6rem;
  background: linear-gradient(90deg, var(--sage) 0%, var(--teal) 100%);
  border-radius: 2px;
}
.first-visit__lede {
  font-size: var(--fs-lg);
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 62ch;
  margin: 0 0 2.75rem;
}
.first-visit__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.25rem;
}
.first-visit__card {
  background: #fff;
  border: 1px solid rgba(11, 42, 74, 0.08);
  border-radius: var(--r-xl);
  padding: 1.75rem 1.5rem 1.5rem;
  position: relative;
  transition:
    border-color 240ms var(--ease),
    box-shadow 240ms var(--ease),
    transform 240ms var(--ease);
  box-shadow: var(--shadow-sm);
}
.first-visit__card:hover {
  border-color: rgba(107, 158, 126, 0.55);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.first-visit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  margin-bottom: 1rem;
  color: var(--sage-dark);
  background: var(--sage-tint);
}
.first-visit__icon--forms     { color: var(--blue);      background: var(--blue-tint); }
.first-visit__icon--bring     { color: var(--sage-dark); background: var(--sage-tint); }
.first-visit__icon--insurance { color: var(--teal-dark); background: var(--teal-tint); }
.first-visit__icon--portal    { color: var(--navy);      background: var(--sky-tint); }
.first-visit__card h3 {
  font-family: var(--font);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 0.6rem;
  letter-spacing: var(--tracking-snug);
}
.first-visit__card p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 0.9rem;
}
.first-visit__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}
.first-visit__bullets li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.5;
}
.first-visit__bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.58em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sage);
}
.first-visit__inline-list {
  color: var(--text);
  font-weight: 500;
  line-height: 1.5;
}
.first-visit__note {
  color: var(--text-light);
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.first-visit__link {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms var(--ease), color 150ms var(--ease);
}
.first-visit__link:hover {
  color: var(--blue-dark);
  border-bottom-color: var(--blue);
}
.first-visit__footer {
  margin-top: 2.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid rgba(11, 42, 74, 0.08);
  border-left: 3px solid var(--sage);
}
.first-visit__footer p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.55;
}
.first-visit__footer strong { color: var(--navy); font-weight: 700; }
.first-visit__footer a { color: var(--blue); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(30, 90, 156, 0.2); }
.first-visit__footer a:hover { border-bottom-color: var(--blue); }

/* ============================================================================
   Locations photo strip (honest small-practice flex)
   ========================================================================= */
.locations-strip {
  padding: clamp(4rem, 7vw, 6rem) var(--gutter);
  background: #fff;
  border-top: 1px solid var(--rule-light);
}
.locations-strip__head {
  max-width: var(--content-wide);
  margin: 0 auto 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: end;
  justify-content: space-between;
}
.locations-strip__head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 500;
  color: var(--navy);
  margin: 0;
  letter-spacing: -0.02em;
  position: relative;
  padding-bottom: 0.6rem;
}
.locations-strip__head h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 0.6rem;
  background: linear-gradient(90deg, var(--sage) 0%, var(--teal) 100%);
  border-radius: 2px;
}
.locations-strip__head p {
  font-size: var(--fs-base);
  color: var(--text-muted);
  margin: 0;
  max-width: 44ch;
}
.locations-strip__grid {
  max-width: var(--content-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}
.location-card {
  background: #fff;
  border: 1px solid var(--rule-light);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform var(--dur-normal) var(--ease),
              box-shadow var(--dur-normal) var(--ease),
              border-color var(--dur-normal) var(--ease);
}
.location-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--sage);
}
.location-card__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--gray-100);
}
.location-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 420ms var(--ease);
}
.location-card:hover .location-card__photo img { transform: scale(1.03); }
.location-card__body {
  padding: 1rem 1.1rem 1.1rem;
}
.location-card__city {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 0.2rem;
  letter-spacing: var(--tracking-snug);
}
.location-card__meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin: 0;
  letter-spacing: 0.01em;
}

@media print {
  .site-header, .tab-nav, .region-tabs, .sidebar, .btn-appt, .breadcrumb,
  .apple-hero__visual, .editorial-notes, .apple-hero::before,
  .hero-photo__scrim, .hero-photo__caption { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .page-grid { grid-template-columns: 1fr; padding: 0; }
  .content { max-width: none; }
  h1, h2, h3 { color: #000; page-break-after: avoid; }
  .attribution, .callout { border-left-color: #000; }
  .blank { border-color: #888; background: #f5f5f5; color: #000; }
  .site-footer { background: #fff; color: #000; }
  .site-footer a { color: #000; }
  .site-footer__disclaimer { border-top-color: #000; color: #000; }
  .band--dark { background: #fff; color: #000; }
  .band--dark * { color: #000 !important; }
}

/* Inter tightening override (added by review build) */
h1, h2, h3, .hero-photo__title, .directory__section-title { letter-spacing: -0.022em; }