/* ==========================================================================
   Dr. Brianna — Medical & Cosmetic Dermatology
   --------------------------------------------------------------------------
   Palette roles (strict):
     --white  page background, dominant surface
     --black  ALL text, buttons, nav, primary structure
     --tint   NON-TEXT ONLY — section washes, hover states, borders, accents.
              Black text on --tint passes contrast, so --tint may carry a full
              section background; text is never coloured --tint.
   Homepage sections alternate --white / --tint down the page.
   ========================================================================== */

:root {
  --white: #FFFFFF;
  --black: #000000;
  --tint:  #DDF1FD;

  /* derived, still black ink — used for secondary copy and hairlines */
  --black-soft: rgba(0, 0, 0, 0.66);
  --rule: rgba(0, 0, 0, 0.14);
  --rule-tint: #DDF1FD;
  --shadow: 0 14px 34px rgba(0, 0, 0, 0.10);

  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Jost', Helvetica, Arial, sans-serif;

  --nav-h: 4.5rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body { margin: 0; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--sans);
  color: var(--black);
  background: var(--white);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

ul { list-style: none; margin: 0; padding: 0; }

img { max-width: 100%; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOutDown {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(10px); }
}

/* ---------- SHARED SECTION SHELL ---------- */

/* Every band on the site is a .section; the wash alternates by adding
   .section-tint. No section is full-viewport-height — this site's content
   is page-based rather than a single scrolling deck. */
.section {
  width: 100%;
  background: var(--white);
  padding: 5.5rem 2rem;
}

.section-tint {
  background: var(--tint);
}

.section-inner {
  max-width: 68rem;
  margin: 0 auto;
}

.section-inner-narrow {
  max-width: 46rem;
}

.section-heading {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.1rem, 3.6vw, 3.1rem);
  line-height: 1.08;
  margin: 0 0 1.75rem;
  color: var(--black);
  text-wrap: balance;
}

.section-heading-center {
  text-align: center;
}

.body-text {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--black);
  margin: 0 0 1.25rem;
  max-width: 42rem;
}

.body-text:last-child { margin-bottom: 0; }

/* Emphasis for named credentials within a paragraph — same rule style as
   .text-link's hover state (2px black border-bottom), just always on. */
.credential {
  font-weight: 700;
  border-bottom: 2px solid var(--black);
  padding-bottom: 2px;
}

/* The standard "keep going" link: black ink, tint underline. */
.text-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--black);
  border-bottom: 2px solid var(--tint);
  padding-bottom: 2px;
  transition: border-color 0.2s ease;
}

.text-link:hover,
.text-link:focus-visible {
  border-bottom-color: var(--black);
}

.btn {
  display: inline-block;
  background: var(--black);
  color: var(--white);
  padding: 1.05rem 2.2rem;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 2px solid var(--black);
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.btn:hover,
.btn:focus-visible {
  background: var(--tint);
  color: var(--black);
  transform: translateY(-2px);
}

:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 3px;
}

/* ---------- TOP NAV (persistent, injected by script.js) ---------- */

#site-nav { display: block; }

.topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
}

.topnav-inner {
  max-width: 82rem;
  margin: 0 auto;
  min-height: var(--nav-h);
  padding: 0 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.nav-logo {
  display: block;
  height: 2.1rem;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-left: auto;
}

/* Never wrap: the row holds its natural width so a viewport too narrow
   for the full menu overflows measurably, which is the signal script.js
   uses to swap in the hamburger (see fitNav). */
.nav-links > li { flex: 0 0 auto; }

.nav-link,
.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  background: none;
  border: none;
  padding: 0.35rem 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--black);
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus-visible,
.nav-link.is-current {
  border-bottom-color: var(--tint);
}

.nav-link.is-current { border-bottom-color: var(--black); }

.nav-cta {
  padding: 0.7rem 1.4rem;
  border-radius: 10px;
  background: var(--black);
  color: var(--white);
  border-bottom: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.nav-cta:hover,
.nav-cta:focus-visible {
  background: var(--tint);
  color: var(--black);
  border-bottom: none;
}

.nav-dropdown { position: relative; }

.nav-dropdown-toggle .chev {
  width: 9px;
  height: 6px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.nav-dropdown.open .chev { transform: rotate(180deg); }

.nav-dropdown-panel {
  display: none;
  position: absolute;
  top: calc(100% + 0.9rem);
  left: -1rem;
  min-width: 11rem;
  background: var(--white);
  border: 1px solid var(--tint);
  border-radius: 12px;
  padding: 0.9rem 1.2rem;
  box-shadow: var(--shadow);
  z-index: 60;
}

.nav-dropdown.open .nav-dropdown-panel { display: block; }

.nav-dropdown-panel li + li { margin-top: 0.55rem; }

.nav-dropdown-panel a {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--black);
  white-space: nowrap;
  border-bottom: 2px solid var(--tint);
  padding-bottom: 1px;
  transition: border-color 0.2s ease;
}

.nav-dropdown-panel a:hover,
.nav-dropdown-panel a:focus-visible { border-bottom-color: var(--black); }

/* ---------- MOBILE NAV (hamburger fallback) ---------- */

.mobile-nav {
  display: none;
  position: relative;
  margin-left: auto;
}

/* swap driven by measured overflow in script.js, not a width guess */
.nav-collapsed .nav-links { display: none; }
.nav-collapsed .mobile-nav { display: block; }

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  /* 44px square: smallest comfortable thumb target */
  width: 44px;
  height: 44px;
  background: var(--white);
  border: 1px solid var(--tint);
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
}

/* three bars -> an X: each bar keeps its own transform origin at center,
   so rotating it in place after sliding it to the middle bar's position
   (their stacked centers are 6px apart — see the gap/height math above)
   reads as one continuous X rather than a bar spinning off-axis. */
.nav-toggle .bar {
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--black);
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.nav-toggle.is-open .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open .bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Full-screen panel, not a dropdown: it starts right under the sticky top
   bar (which stays visible and in place above it) and fills the rest of
   the viewport. [hidden] needs an explicit override here — an author
   `display` on .mobile-menu would otherwise outrank the UA [hidden] rule
   at equal specificity and the panel would never actually hide. */
.mobile-menu[hidden] { display: none; }

.mobile-menu {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--white);
  z-index: 60;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 2rem 2rem 3rem;
  overflow-y: auto;
}

/* Closing plays this once (script.js adds the class, then swaps in
   [hidden] once it finishes) instead of the instant cut [hidden] alone
   would give it. 0.22s — quicker than any single word's 0.6s fade-in,
   let alone the full ~1s staggered reveal — so dismissing feels snappy
   next to the more leisurely, delightful entrance. */
.mobile-menu.closing {
  animation: fadeOutDown 0.22s ease forwards;
}

/* Body scroll locks behind the full-screen panel while it's open. */
body.nav-menu-open { overflow: hidden; }

/* .mobile-menu-link (a class, not the > a combinator) so .mobile-menu-cta
   below — same specificity, later in the file — can still win back its
   own font treatment for the one entry that isn't a plain "word". */
.mobile-menu-link {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 8vw, 2.25rem);
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--black);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  width: fit-content;
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
}

/* Every entry is a direct <a> child of the panel (the Services group is
   already flattened into plain links by script.js), so position alone
   staggers all of them, CTA included — each fades/lifts in on its own
   beat, the same entrance the hero text uses, restarting every time the
   panel goes from [hidden] to shown. */

.mobile-menu > a:nth-child(1) { animation-delay: 0.1s; }
.mobile-menu > a:nth-child(2) { animation-delay: 0.16s; }
.mobile-menu > a:nth-child(3) { animation-delay: 0.22s; }
.mobile-menu > a:nth-child(4) { animation-delay: 0.28s; }
.mobile-menu > a:nth-child(5) { animation-delay: 0.34s; }
.mobile-menu > a:nth-child(6) { animation-delay: 0.4s; }
.mobile-menu > a:nth-child(7) { animation-delay: 0.46s; }
.mobile-menu > a:nth-child(8) { animation-delay: 0.52s; }
.mobile-menu > a:nth-child(9) { animation-delay: 0.58s; }

.mobile-menu-link:hover,
.mobile-menu-link:focus-visible,
.mobile-menu-link:active {
  border-bottom-color: var(--tint);
}

/* the page you're already on, underlined the same way it is in the
   desktop nav (.nav-link.is-current) */
.mobile-menu-link.is-current {
  border-bottom-color: var(--black);
}

/* Book an Appointment keeps the site's normal CTA-pill treatment (small
   uppercase sans, filled black) rather than the large serif words around
   it — it's a button, not one of the "words," and staying visually
   consistent with every other Book an Appointment button is what makes
   it read as the one actionable item here. */
.mobile-menu-cta {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: normal;
  justify-content: center;
  width: 100%;
  margin-top: 0.75rem;
  padding: 1rem 1rem;
  border-radius: 10px;
  background: var(--black);
  color: var(--white);
  border-bottom: none;
  white-space: nowrap;
}

.mobile-menu-cta:hover {
  background: var(--tint);
  color: var(--black);
}

/* ---------- HERO ---------- */

/* No bottom padding: the portrait bleeds all the way to the section's
   own bottom edge (see .hero-portrait-wrap's align-self below), rather
   than floating with a gap underneath it. */
.hero {
  background: var(--white);
  padding: 4rem 2rem 0;
}

.hero-inner {
  max-width: 76rem;
  margin: 0 auto;
  min-height: calc(82vh - var(--nav-h));
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 2.5rem;
}

.hero-copy {
  text-align: left;
}

.hero-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.75rem, 6.4vw, 5.25rem);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--black);
  opacity: 0;
  animation: fadeInUp 0.9s ease forwards;
  animation-delay: 0.15s;
}

/* tucked close under the name, on purpose — this and .hero-name read as
   one lockup, with .hero-tagline starting the next beat below */
.hero-subheading {
  margin: 0.5rem 0 0;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--black);
  opacity: 0;
  animation: fadeInUp 0.9s ease forwards;
  animation-delay: 0.5s;
}

.hero-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 2.2vw, 1.65rem);
  line-height: 1.3;
  margin: 1.5rem 0 0;
  color: var(--black);
  opacity: 0;
  animation: fadeInUp 0.9s ease forwards;
  animation-delay: 0.85s;
}

/* a short tint rule under the subheading: accent, never ink */
.hero-rule {
  display: block;
  width: 4.5rem;
  height: 4px;
  border-radius: 2px;
  background: var(--tint);
  margin: 2.25rem 0 0;
  opacity: 0;
  animation: fadeIn 0.9s ease forwards;
  animation-delay: 1.1s;
}

.hero-cta {
  margin-top: 2.25rem;
  font-size: 0.85rem;
  opacity: 0;
  animation: fadeInUp 0.9s ease forwards;
  animation-delay: 1.3s;
}

/* align-self (not the row's align-items) bottom-docks just this column,
   so the photo's own bottom edge always touches the section's bottom
   edge while the copy column stays vertically centered beside it. */
.hero-portrait-wrap {
  display: flex;
  justify-content: flex-end;
  align-self: end;
  opacity: 0;
  animation: fadeIn 1.1s ease forwards;
  animation-delay: 0.35s;
}

.hero-portrait {
  display: block;
  width: 100%;
  max-width: 25rem;
  height: auto;
}

/* ---------- CREDENTIAL STRIP (full-width trust bar under the hero) ---------- */

/* Flat band, edge to edge — no card, no shadow, no border around the
   whole strip. Hairlines top/bottom only, so it reads as its own band
   rather than bleeding into the tint section right after it. */
.credential-strip {
  background: var(--tint);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 1.75rem 2rem;
}

.credential-strip-inner {
  max-width: 68rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* Same uppercase/letter-spacing treatment as .nav-link — the established
   sans-serif system, not a new typeface. */
.credential-strip-item {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--black);
  text-align: center;
}

.credential-strip-divider {
  width: 1px;
  height: 1rem;
  background: rgba(0, 0, 0, 0.22);
  margin: 0 1.75rem;
  flex-shrink: 0;
}

/* Just above the stacking breakpoint, the three names don't quite fit
   one line at full desktop spacing — tighten rather than let it wrap
   awkwardly mid-item. */
@media (min-width: 901px) and (max-width: 1100px) {
  .credential-strip-item { font-size: 0.62rem; letter-spacing: 0.14em; }
  .credential-strip-divider { margin: 0 1rem; }
}

/* ---------- SERVICE CARDS ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
  margin-top: 2.5rem;
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 2.5rem 2.25rem;
  background: var(--white);
  border: 1px solid var(--tint);
  border-radius: 16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  background: var(--tint);
}

.service-card h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.6rem;
  margin: 0;
  color: var(--black);
}

.service-card p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--black);
}

.service-card .text-link { margin-top: auto; padding-top: 0.75rem; }

/* ---------- SPLIT ROW (copy beside a media slot) ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

.split-wide-text { grid-template-columns: 1.1fr 0.9fr; }

/* Media placeholders ------------------------------------------------------
   These boxes reserve the real asset's aspect ratio, so dropping the final
   video/photo in changes the contents without reflowing the page. */
.media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--tint);
  border: 1px dashed rgba(0, 0, 0, 0.25);
  border-radius: 16px;
  color: var(--black-soft);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
}

.media-video { aspect-ratio: 16 / 9; }

/* the real video, once dropped in, occupies the same 16:9 slot */
.home-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  background: var(--tint);
  object-fit: cover;
}

.media-portrait { aspect-ratio: 3 / 4; max-width: 26rem; }

/* the real portrait, once dropped in, occupies the same slot */
.portrait-photo {
  display: block;
  width: 100%;
  max-width: 26rem;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  border-radius: 16px;
  background: var(--tint);
}

/* ---------- SOCIAL LINKS ---------- */

.social-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 2.25rem;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.9rem 1.6rem;
  border: 2px solid var(--black);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--white);
  transition: background 0.2s ease, transform 0.2s ease;
}

.social-link:hover,
.social-link:focus-visible {
  background: var(--tint);
  transform: translateY(-2px);
}

.social-link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: currentColor;
}

/* ---------- INSTAGRAM FEED (live, via Taggbox) ---------- */

.ig-feed {
  height: 34rem;
  max-height: 70vh;
  margin-top: 2.25rem;
  border-radius: 10px;
  overflow: hidden;
}

/* ---------- AS SEEN IN ---------- */

.logo-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 2.5rem 0 2.25rem;
}

/* The features page carries a variable number of outlets (currently
   seven), so unlike .logo-row's fixed 4-item grid, this is flexbox with
   justify-content:center — a wrapped incomplete last row centers itself
   automatically instead of leaving a lone logo stranded on the left. */
.logo-row-6 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.logo-row-6 .logo-box {
  flex: 0 0 calc((100% - 2 * 1.25rem) / 3);
  max-width: calc((100% - 2 * 1.25rem) / 3);
}

.logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 6rem;
  padding: 1rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--tint);
  border-radius: 12px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--black);
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.logo-box:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  background: var(--tint);
}

.logo-box img {
  display: block;
  max-width: 100%;
  max-height: 2.25rem;
  width: auto;
  height: auto;
}

.media-contact {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--black);
  text-align: center;
}

.media-contact-cta {
  margin: 1.5rem 0 0;
  text-align: center;
}

.inline-link {
  color: var(--black);
  border-bottom: 2px solid var(--tint);
  padding-bottom: 1px;
  font-weight: 600;
  transition: border-color 0.2s ease;
}

.inline-link:hover,
.inline-link:focus-visible { border-bottom-color: var(--black); }

/* ---------- TESTIMONIALS ---------- */

.quote-stack {
  display: flex;
  flex-direction: column;
  gap: 2.75rem;
  margin-top: 2.5rem;
}

.quote-block {
  width: 62%;
  margin: 0;
}

.quote-left  { align-self: flex-start; text-align: left; }
.quote-right { align-self: flex-end;   text-align: right; }

.quote-block blockquote {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.02rem, 1.45vw, 1.22rem);
  line-height: 1.65;
  color: var(--black);
  text-wrap: pretty;
}

/* ---------- CLOSING CTA ---------- */

.cta-section { text-align: center; }

.cta-heading {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.12;
  margin: 0 0 2.25rem;
  color: var(--black);
  text-wrap: balance;
}

/* ---------- SUBPAGE HEAD ---------- */

.page-head {
  background: var(--tint);
  padding: 4.5rem 2rem 4rem;
  text-align: center;
}

.page-head-inner { max-width: 56rem; margin: 0 auto; }

.page-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.05;
  margin: 0;
  color: var(--black);
  text-wrap: balance;
}

.page-subtitle {
  margin: 1.1rem 0 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--black);
  text-wrap: balance;
}

/* .page-head is always a tint wash, so a link's usual tint underline
   would vanish into it -- ink it black here, same fix as elsewhere. */
.page-head .inline-link { border-bottom-color: var(--black); }

/* ---------- ABOUT PAGE ---------- */

.about-split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 3.5rem;
  align-items: start;
}

.about-photo-col { position: sticky; top: calc(var(--nav-h) + 2rem); }

/* Columbia / Yale / Weill Cornell, the three schools named in her bio.
   Sits directly under the portrait inside the same sticky column, so it
   scrolls and sticks together with her rather than on its own timing. */
.school-crests {
  display: block;
  width: 100%;
  max-width: 26rem;
  height: auto;
  margin-top: 1.5rem;
}

.about-body p {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--black);
  margin: 0 0 1.5rem;
}

.about-body p:last-child { margin-bottom: 0; }

/* ---------- SERVICES PAGES (scannable pill lists) ---------- */

.service-group + .service-group { margin-top: 3.5rem; }

.group-heading {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.85rem;
  margin: 0 0 0.35rem;
  color: var(--black);
}

.group-rule {
  display: block;
  width: 3.5rem;
  height: 4px;
  border-radius: 2px;
  background: var(--tint);
  margin: 0 0 1.5rem;
}

/* On a tint band the rule would disappear, so it inks black there. */
.section-tint .group-rule,
.section-tint .hero-rule { background: var(--black); }

.subgroup + .subgroup { margin-top: 2rem; }

.subgroup-heading {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--black);
  margin: 0 0 1rem;
}

/* Pills, not prose: these lists are long and meant to be scanned. */
.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.pill-list li {
  padding: 0.6rem 1.1rem;
  background: var(--tint);
  border: 1px solid var(--tint);
  border-radius: 999px;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--black);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* inverted on a tint band so the pills stay legible against the wash */
.section-tint .pill-list li {
  background: var(--white);
  border-color: var(--white);
}

.pill-list li:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

/* ---------- FEATURES PAGE: PRESS INDEX ---------- */

/* A numbered newspaper-style article list: serif headline, a byline-style
   outlet/year line, thin hairline rules between entries. The number is a
   CSS counter, not typed content, so appending a new <li> renumbers
   everything automatically. */
.press-list {
  counter-reset: press;
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.press-item {
  counter-increment: press;
  border-bottom: 1px solid var(--rule);
}

.press-link {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  align-items: baseline;
  gap: 0.25rem 1rem;
  padding: 1.5rem 0;
}

.press-link::before {
  content: counter(press, decimal-leading-zero);
  grid-row: 1 / 3;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--black-soft);
  font-variant-numeric: tabular-nums;
}

.press-headline {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--black);
  text-wrap: pretty;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease;
  /* .press-headline is a grid item of .press-link, so it's blockified and
     stretches to fill its 1fr column by default — pin it to its own
     content width instead, so the hover underline traces the headline's
     own text, not the full row. */
  width: fit-content;
  max-width: 100%;
}

.press-link:hover .press-headline,
.press-link:focus-visible .press-headline {
  border-bottom-color: var(--tint);
}

.press-meta {
  grid-column: 2;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--black-soft);
}

/* ---------- BRAND PARTNERSHIPS PAGE ---------- */

/* Flexbox rather than grid: with justify-content:center, a wrapped
   incomplete last line (5 tiles / 3 columns leaves 2 on the final row)
   centers itself automatically — grid has no equivalent for that without
   extra markup or nth-child hacks. */
.brand-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem 2rem;
}

.brand-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  flex: 0 0 calc((100% - 4rem) / 3);
  max-width: calc((100% - 4rem) / 3);
}

/* Light tint placeholder behind the embed — Instagram's own blockquote
   already carries a native loading skeleton (the grey placeholder blocks
   baked into its markup) that paints immediately, so this is only ever
   visible for an instant before that, and again fills the gap in height
   between that skeleton and the real iframe embed.js swaps in. */
.brand-embed-wrap {
  width: 100%;
  max-width: 540px;
  min-height: 590px;
  background: var(--tint);
  border-radius: 12px;
  overflow: hidden;
}

/* Instagram hard-codes min-width:326px inline (on both the placeholder
   blockquote and the iframe that replaces it), which is wider than the
   content column on ~360px phones and clips the card's right edge. */
.brand-embed-wrap .instagram-media { min-width: 0 !important; }

/* The brand's own logo, above the embed rather than below. The wrap is a
   fixed-height box (not the image itself) so every tile reserves the same
   vertical space here regardless of that brand's own logo proportions —
   a short wide wordmark and a tall stacked lockup both center within it,
   which keeps every row's embeds starting at the same height instead of
   drifting down under whichever logo happens to render tallest. */
.brand-tile-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 1.65rem;
}

.brand-tile-logo {
  display: block;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
}

@media (max-width: 900px) {
  .brand-tile {
    flex-basis: calc((100% - 2rem) / 2);
    max-width: calc((100% - 2rem) / 2);
  }
}

@media (max-width: 768px) {
  .brand-tile { flex-basis: 100%; max-width: 100%; }
  .brand-tile-logo-wrap { height: 2.1rem; }
}

/* ---------- SITE FOOTER (persistent, injected by script.js) ---------- */

.site-footer {
  background: var(--black);
  color: var(--white);
}

.site-footer-inner {
  max-width: 68rem;
  margin: 0 auto;
  padding: 4rem 2rem 3rem;
}

.footer-heading {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.75rem;
  margin: 0 0 1.75rem;
  color: var(--white);
}

.footer-block + .footer-block {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

/* two locations, side by side on desktop with a divider between them */
.locations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.location {
  padding: 0 2.5rem;
}

.location:first-child { padding-left: 0; }

.location + .location {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  padding-right: 0;
}

.location h4 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0 0 0.65rem;
  color: var(--white);
}

.location address {
  font-style: normal;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--white);
  margin: 0 0 0.9rem;
}

.location-hours { margin: 0; }

.location-hours li {
  font-size: 0.85rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
}

.footer-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.5rem;
  margin: 0;
}

.footer-contact li {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--white);
}

.footer-link {
  color: var(--white);
  border-bottom: 2px solid var(--tint);
  padding-bottom: 1px;
  transition: border-color 0.2s ease;
}

.footer-link:hover,
.footer-link:focus-visible { border-bottom-color: var(--white); }

.site-footer :focus-visible { outline-color: var(--tint); }

.footer-credit {
  margin: 3rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.78rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
}

/* ---------- REDUCED MOTION ---------- */

.reduced-motion .hero-name,
.reduced-motion .hero-tagline,
.reduced-motion .hero-subheading,
.reduced-motion .hero-rule {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.reduced-motion .service-card:hover,
.reduced-motion .social-link:hover,
.reduced-motion .logo-box:hover,
.reduced-motion .pill-list li:hover,
.reduced-motion .btn:hover { transform: none; }

/* ---------- RESPONSIVE: BELOW 900px ---------- */

@media (max-width: 900px) {
  .about-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  .about-photo-col { position: static; }

  .portrait-photo,
  .media-portrait { max-width: 22rem; margin: 0 auto; }

  .school-crests { max-width: 22rem; margin: 1.5rem auto 0; }

  .split,
  .split-wide-text {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  /* photo stacks under the text rather than beside it */
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    gap: 2.5rem;
  }

  .hero-portrait-wrap { justify-content: center; }

  .hero-portrait { max-width: 18rem; }

  /* stacked, centered; dividers rotate from vertical bars to thin
     horizontal rules between lines rather than disappearing. Shares the
     hero's own 900px breakpoint rather than the usual 768px one — the
     three institution names don't fit on one line below that width, and
     switching in step with the hero avoids an in-between zone where the
     row would wrap mid-item. */
  .credential-strip { padding: 1.5rem 1.5rem; }

  .credential-strip-inner {
    flex-direction: column;
    gap: 0.85rem;
  }

  .credential-strip-divider {
    width: 2rem;
    height: 1px;
    margin: 0;
  }

  .card-grid { grid-template-columns: minmax(0, 1fr); }

  .logo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .logo-row-6 .logo-box {
    flex-basis: calc((100% - 1.25rem) / 2);
    max-width: calc((100% - 1.25rem) / 2);
  }

  /* stacked, with the divider moving from the side to between them */
  .locations { grid-template-columns: minmax(0, 1fr); }

  .location { padding: 0; }

  .location + .location {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    margin-top: 2rem;
    padding-top: 2rem;
  }
}

/* ---------- RESPONSIVE: BELOW 768px ---------- */

@media (max-width: 768px) {
  .section { padding: 3.5rem 1.5rem; }

  /* no bottom padding here either — the photo should touch the section's
     bottom edge on mobile the same way it does on desktop */
  .hero { padding: 4.5rem 1.5rem 0; min-height: 0; }

  .topnav-inner { padding: 0 1.5rem; gap: 1rem; }

  /* fallback for the no-JS case; with script.js running, fitNav has
     already collapsed the nav well before this width */
  .nav-links { display: none; }
  .mobile-nav { display: block; }

  .page-head { padding: 3rem 1.5rem; }

  /* one column, flush left — right-ragged body copy reads poorly on a
     phone, so the alternating alignment gives way to plain readability */
  .quote-block { width: 100%; text-align: left; }

  .service-card { padding: 2rem 1.5rem; }

  .site-footer-inner { padding: 3rem 1.5rem 2.5rem; }

  /* ----- touch targets -----
     Standalone controls reach 44px. Links inside a sentence are left
     alone: padding them to 44px would overlap the lines above and below,
     and WCAG exempts inline links for exactly that reason. */
  .text-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* block-level flex, not inline-flex: each top-level entry (Home, About,
     Medical Services, ...) needs its own line, and inline-flex was letting
     them sit side by side like wrapped text instead of stacking. */
  .mobile-menu-link {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* nine menu entries: on short phones, tighten the stack so it fits
   without scrolling */
@media (max-width: 768px) and (max-height: 760px) {
  .mobile-menu { gap: 0.4rem; padding: 1.25rem 2rem 2rem; }
  .mobile-menu-link { font-size: clamp(1.4rem, 6.5vw, 1.75rem); min-height: 40px; }
  .mobile-menu-cta { font-size: 0.85rem; margin-top: 0.5rem; }
}

@media (max-width: 480px) {
  .logo-row { grid-template-columns: minmax(0, 1fr); }
  .logo-row-6 .logo-box { flex-basis: 100%; max-width: 100%; }
  .footer-contact { gap: 0.5rem; flex-direction: column; }
}