/* Ask Neuro patient-first page and component system.
   Loaded after page-local styles so every template shares one visual language. */

/* ==========================================================================
   TYPOGRAPHY SYSTEM — the single shared scale for every primary page/hero
   heading, section heading, card heading and eyebrow label sitewide.

   .page-title is the ONE rule every main H1 uses (homepage hero, every
   sub-page hero, every legal page) — no page gets its own font-size for its
   primary heading. Long headings should wrap onto a second line (control
   that with `max-width` on the heading or its wrapper) rather than getting
   a page-specific font-size override.

   .section-title / .card-title exist for the next level down (H2 section
   intros / card headings) so those can converge on a shared scale too,
   without being forced to the same size as .page-title.
   ========================================================================== */
.page-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 350;
  font-size: clamp(3.2rem, 5.2vw, 5rem);
  line-height: 1.03;
  letter-spacing: -.045em;
}

.section-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.card-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.2;
}

@media (max-width: 768px) {
  .page-title {
    font-size: clamp(2.45rem, 10vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: -.035em;
  }
}

/* Simple editorial About page, inspired by a restrained team-directory layout */
.about-simple-page .about-legacy-section {
  display: none !important;
}

.about-simple-page .floating-emergency {
  display: none;
}

.about-simple-main {
  background: #f7f6f1;
  color: var(--text-primary);
}

.about-simple-shell {
  max-width: 960px;
}

.about-simple-intro {
  position: relative;
  padding: clamp(150px, 16vw, 220px) 0 clamp(84px, 10vw, 132px);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.about-simple-intro::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 3%;
  width: min(720px, 78vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192, 218, 216, .38), rgba(226, 217, 238, .2) 48%, transparent 72%);
  filter: blur(26px);
  transform: translateY(-42%);
  pointer-events: none;
}

.about-simple-intro .about-simple-shell {
  position: relative;
  z-index: 1;
}

.about-simple-kicker {
  display: block;
  margin-bottom: 28px;
  color: var(--teal);
  font: 750 .76rem/1.2 'Inter', sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Typography (font-size/line-height/letter-spacing) comes from .page-title
   on the h1 itself — this rule only controls layout. */
.about-simple-intro h1 {
  max-width: 820px;
  margin: 0;
}

.about-simple-copy {
  max-width: 720px;
  margin-top: 40px;
}

.about-simple-copy p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 1.08rem;
  line-height: 1.72;
}

.about-simple-copy p+p {
  margin-top: 20px;
}

.about-simple-details,
.about-simple-pillars {
  padding: clamp(82px, 10vw, 128px) 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.about-editorial-heading {
  max-width: 760px;
  margin-bottom: 38px;
}

.about-editorial-heading h2,
.about-reach-heading h2 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(2.5rem, 5.5vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -.04em;
}

.about-mission-copy {
  max-width: 720px;
}

.about-mission-copy p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 1.04rem;
  line-height: 1.74;
}

.about-mission-copy p+p {
  margin-top: 18px;
}

.about-principles,
.about-pillar-list {
  margin-top: 62px;
  border-top: 1px solid var(--border-strong);
}

.about-principles article,
.about-pillar-list article {
  display: grid;
  grid-template-columns: 56px minmax(210px, .7fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 30px 0;
  border-bottom: 1px solid var(--border);
}

.about-principles article>span,
.about-pillar-list article>span {
  color: var(--teal);
  font: 750 .75rem/1.4 'Inter', sans-serif;
  letter-spacing: .1em;
}

.about-principles h3,
.about-pillar-list h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  line-height: 1.16;
}

.about-principles p,
.about-pillar-list p {
  max-width: 560px;
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* Three pillars — centered "what we do" heading, flanked by rules */
.about-pillars-heading {
  max-width: 620px;
  margin: 0 auto 60px;
  text-align: center;
}

.about-pillars-heading.about-editorial-heading {
  max-width: 700px;
}

.about-pillars-kicker.about-simple-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 22px;
}

.about-pillars-kicker::before,
.about-pillars-kicker::after {
  content: "";
  flex: 1 1 auto;
  max-width: 64px;
  height: 1px;
  background: var(--border-strong);
}

.about-pillars-heading h2 {
  margin: 0 auto;
}

/* Three pillars — infographic layout: large accent-ringed medallions on a
   connecting line, each holding its own icon, badge, title and copy. */
.about-pillar-infographic {
  --pillar-gap: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pillar-gap);
  align-items: start;
  border-top: none;
  margin-top: 54px;
}

.about-pillar-infographic article {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  aspect-ratio: 1;
  padding: 14% 12%;
  border-radius: 50%;
  border: 2px solid var(--pillar-accent, var(--teal));
  background: radial-gradient(circle at 50% 32%, #fff 0%, color-mix(in srgb, var(--pillar-accent, var(--teal)) var(--pillar-fill-mix, 10%), white) 90%);
  text-align: center;
}

.about-pillar-infographic article:nth-child(1) {
  --pillar-accent: #002879;
}

.about-pillar-infographic article:nth-child(2) {
  --pillar-accent: #0895b3;
}

.about-pillar-infographic article:nth-child(3) {
  --pillar-accent: #e5d4b7;
  /* This accent is too pale for white badge text to stay legible on, so this
     pillar alone swaps its badge number to dark text via --pillar-num-color
     (see .about-pillar-num) — everything else still derives from
     --pillar-accent as normal. It's also too pale to read as a shadow color
     (invisible against the section's own near-white background, unlike
     pillars 1-2's much more saturated accents), so --pillar-shadow overrides
     just the box-shadow tint with a darker, still on-palette tone instead.
     Same problem hits the inner fill — 16% of an already-pale color reads as
     plain white — so --pillar-fill-mix raises that mix percentage just for
     this circle so its cream tint is actually visible. */
  --pillar-num-color: var(--navy);
  --pillar-fill-mix: 55%;
  --pillar-shadow: #a89f88;
}

.about-pillar-infographic article:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: var(--pillar-gap);
  height: 2px;
  background: var(--pillar-accent, var(--teal));
  transform: translateY(-50%);
}

.about-pillar-infographic article:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + (var(--pillar-gap) / 2));
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pillar-accent, var(--teal));
  transform: translate(-50%, -50%);
  z-index: 1;
}

.about-pillar-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 30%;
  min-width: 52px;
  margin: 0 auto 14px;
  color: var(--navy);
}

.about-pillar-icon svg:not(.about-pillar-spark),
.about-pillar-icon img {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  object-fit: contain;
}

/* Small radiating "shine" mark above each icon glyph */
.about-pillar-spark {
  width: 60%;
  height: auto;
  margin-bottom: 2px;
  opacity: .55;
}

.about-pillar-num {
  position: absolute;
  top: -18px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pillar-accent, var(--teal));
  color: var(--pillar-num-color, #fff);
  font: 750 .82rem/1 'Inter', sans-serif;
  letter-spacing: .02em;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .14);
  transform: translateX(-50%);
}

.about-pillar-infographic h3 {
  margin: 0 0 8px;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.2;
  font-weight: 600;
}

.about-pillar-infographic p {
  max-width: 84%;
  margin: 0 auto;
  font-size: .86rem;
  line-height: 1.5;
}

.about-simple-reach {
  padding: clamp(82px, 10vw, 120px) 0;
  border-bottom: 1px solid var(--border);
  background: #e9e5da;
}

.about-reach-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, .42fr);
  gap: 50px;
  align-items: end;
}

.about-reach-heading>p {
  margin: 0 0 8px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.about-stat-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 58px 0 0;
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}

.about-stat-list>div {
  padding: 28px 22px 30px 0;
}

.about-stat-list>div+div {
  padding-left: 22px;
  border-left: 1px solid var(--border-strong);
}

.about-stat-list dt {
  color: var(--teal);
  font: 450 clamp(2.2rem, 4vw, 3.4rem)/1 'Source Serif 4', serif;
  letter-spacing: -.035em;
}

.about-stat-list dd {
  margin: 10px 0 0;
  color: var(--text-secondary);
  font-size: .82rem;
}

.about-simple-pillars {
  position: relative;
  overflow: hidden;
  background: #f7f6f1;
}

/* Soft color blooms in the section's corners, echoed by the pillar circles'
   own accent colors — purely decorative, sit behind .container via z-index. */
.about-simple-pillars::before,
.about-simple-pillars::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 46vw;
  height: 46vw;
  max-width: 620px;
  max-height: 620px;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}

.about-simple-pillars::before {
  top: -18%;
  left: -12%;
  background: radial-gradient(circle, rgba(0, 40, 121, .14), transparent 70%);
}

.about-simple-pillars::after {
  bottom: -22%;
  right: -12%;
  background: radial-gradient(circle, rgba(8, 149, 179, .16), transparent 70%);
}

.about-simple-pillars>.container {
  position: relative;
  z-index: 1;
}

.about-simple-team {
  padding: clamp(82px, 10vw, 132px) 0;
}

.about-team-header {
  max-width: 760px;
  margin-bottom: 56px;
}

.about-team-header h2 {
  margin: 0 0 20px;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1;
}

.about-team-header p {
  max-width: 700px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 1.04rem;
  line-height: 1.7;
}

.about-team-list {
  border-top: 1px solid var(--border-strong);
}

.about-team-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 54px);
  align-items: start;
  padding: 42px 0;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 110px;
}

.about-team-row img,
.about-team-avatar {
  width: 170px;
  height: 170px;
  display: block;
  object-fit: cover;
  object-position: center top;
  border-radius: 18px;
  background: var(--surface-elevated);
  filter: saturate(.9);
}

.about-team-avatar {
  background-image: url("../assets/team/ask-neuro-team-illustrations.webp");
  background-repeat: no-repeat;
  background-size: 400% auto;
  background-color: #f5f0e9;
}

.about-team-avatar-1 {
  background-position: 0% center;
}

.about-team-avatar-2 {
  background-position: 33.333% center;
}

.about-team-avatar-3 {
  background-position: 66.666% center;
}

.about-team-avatar-4 {
  background-position: 100% center;
}

.about-team-body h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.15;
}

.about-team-role {
  margin: 8px 0 20px;
  color: var(--teal);
  font-size: .84rem;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.about-team-body>p:last-child {
  max-width: 670px;
  margin-bottom: 0;
  color: var(--text-secondary);
  font-size: .98rem;
  line-height: 1.72;
}

@media (max-width: 640px) {
  .about-simple-intro {
    padding: 124px 0 76px;
  }

  .about-principles article,
  .about-pillar-list article {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 14px;
  }

  .about-principles p,
  .about-pillar-list p {
    grid-column: 2;
  }

  .about-pillar-infographic {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .about-pillar-infographic article {
    max-width: 240px;
    margin: 0 auto;
    padding: 14% 14%;
  }

  .about-pillar-infographic article::before,
  .about-pillar-infographic article::after {
    display: none;
  }

  .about-pillar-infographic p {
    max-width: 88%;
  }

  .about-reach-heading {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .about-stat-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-stat-list>div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--border-strong);
  }

  .about-stat-list>div:nth-child(4) {
    border-top: 1px solid var(--border-strong);
  }

  .about-team-row {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 18px;
    padding: 30px 0;
  }

  .about-team-row img,
  .about-team-avatar {
    width: 92px;
    height: 108px;
    border-radius: 14px;
  }

  .about-team-role {
    margin-bottom: 12px;
    font-size: .72rem;
  }

  .about-team-body>p:last-child {
    font-size: .9rem;
  }
}

/* ==========================================================================
   HOMEPAGE HERO — single source of truth for the entire hero banner.
   (index.html only: .hero / .hero-grid / .hero-content / .hero-eyebrow /
   .hero-trust / .hero-ctas / .hero h1 / .hero-portrait are unique to the
   homepage hero, so nothing here reaches any other section or page.)

   Structure: the light dotted/network background (index_bg.webp) is the
   section's own CSS background-image; the neural-network portrait
   (hero-index.jpg) is a separate <img> layer (.hero-portrait) placed
   beside the text column, never behind it.
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 108px 0 64px;
  border-bottom: 1px solid var(--border);
  background-image:
    linear-gradient(90deg, rgba(247, 246, 241, .5) 0%, rgba(247, 246, 241, .32) 30%, rgba(247, 246, 241, .12) 55%, rgba(247, 246, 241, 0) 78%),
    url("../assets/banners/index_bg.webp");
  background-color: var(--bg);
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
}

.hero::before,
.hero::after {
  display: none;
}

.hero .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: none;
}

/* Above the 1280px tier (where .hero-content gets an explicit 52% cap) this
   had no max-width at all, so on large/wide monitors it could grow wide
   enough to run under .hero-portrait — confirmed at 1920px (h1/quickstats
   column overlapping the portrait image by ~585px). .hero-portrait's own
   width caps at 960px regardless of viewport, so a fixed cap here stays
   safely clear of it at every width from 1281px up through 2560px+. */
.hero-content {
  max-width: 560px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
  margin: 0 0 20px;
  color: var(--brand-blue);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hero-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-blue);
  flex-shrink: 0;
}

/* Typography (font-size/line-height/letter-spacing) comes from .page-title
   on the h1 itself — this rule only controls layout/color. */
.hero h1 {
  max-width: clamp(360px, 64vw, 620px);
  margin: 0;
  color: var(--navy-dark);
}

.hero h1 .highlight {
  display: inline;
  color: var(--teal);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 34px 0 26px;
}

.hero-ctas .btn {
  padding: 19px 34px;
  font-size: 1.05rem;
  /* Equal pill width regardless of label length ("Call Emergency Helpline"
     vs "Book an Appointment") — sized to fit the longer label plus a small
     buffer; .btn's own justify-content:center keeps the shorter label
     centered inside the extra width. */
  min-width: 300px;
}

.hero-ctas .btn-appointment {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
}

.hero-ctas .btn-appointment:hover {
  background: #08205F;
  border-color: #08205F;
}

.hero-trust {
  margin-top: 18px;
  font-size: .85rem;
  color: var(--text-muted);
}

.hero-quickstats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-quickstat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 12px;
  border-right: 1px solid var(--border);
}

.hero-quickstat:last-child {
  border-right: none;
  padding-right: 0;
}

.hero-quickstat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand-blue-light);
  color: var(--brand-blue);
  flex-shrink: 0;
}

.hero-quickstat-icon svg {
  width: 16px;
  height: 16px;
}

.hero-quickstat .num {
  display: block;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--navy-dark);
  line-height: 1.15;
  white-space: nowrap;
}

.hero-quickstat .label {
  display: block;
  font-size: .875rem;
  color: var(--text-muted);
  line-height: 1.3;
  margin-top: 2px;
  max-width: 120px;
}

/* A sibling of .container (not a grid column) so its size is driven by the
   hero's own width instead of being boxed into the shared 1180px content
   container — that's what lets it read as large/dominant on the right.
   Absolutely positioned with top:10%/bottom:0 rather than a transform — a
   transform here would create a new stacking context and stop mix-blend-mode
   on the image inside from seeing through to the hero's own background.
   margin-top:auto (not margin-block:auto) absorbs any leftover space above
   the image so the box stays pinned flush against bottom:0 — i.e. touching
   the hero's own bottom edge — instead of being vertically centered. */
.hero-portrait {
  display: block;
  position: absolute;
  top: 10%;
  bottom: 0;
  right: 0;
  margin-top: auto;
  width: 50vw;
  max-width: 960px;
  height: 82vh;
  max-height: 880px;
}

.hero-portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 22%;
  border-radius: 0;
  mix-blend-mode: multiply;
}

.hero-portrait .hero-annotation {
  display: none;
}

.hero-annotation {
  position: absolute;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  white-space: nowrap;
}

.hero-annotation-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .18);
  flex-shrink: 0;
}

/* Below wide-desktop widths the left column's fixed-width elements (CTA
   buttons, stat row) no longer leave enough room next to a vw-sized
   portrait — scale both sides down together here instead of letting them
   collide. */
@media (max-width: 1280px) {
  .hero-content {
    max-width: 52%;
  }

  .hero h1 {
    max-width: 100%;
  }

  .hero-ctas .btn {
    padding: 15px 26px;
    font-size: .92rem;
    min-width: 254px;
  }

  .hero-quickstat .num {
    font-size: 1.4rem;
  }

  .hero-quickstat .label {
    font-size: .78rem;
    max-width: 100px;
  }

  .hero-portrait {
    width: 44vw;
    max-width: 460px;
    height: 420px;
    max-height: none;
  }
}

/* Tablet: still side-by-side, just a smaller, tighter portrait column */
@media (max-width: 900px) {
  .hero {
    min-height: 0;
  }

  .hero-content {
    /* Narrower than the 1280px tier's 52% — at this width the portrait's own
       right-offset + vw-width leaves less room, so a wider text column would
       overlap it (verified by measuring both boxes across 640-900px). */
    max-width: 50%;
  }

  .hero-portrait {
    width: 46vw;
    max-width: 400px;
    height: 360px;
  }
}

/* Narrower text/spacing tier — layout stays side-by-side (that's the 900px tier above),
   this just tightens the headline size and hero padding for shorter viewports */
@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding: 88px 0 30px;
  }

  .hero-ctas {
    margin-top: 32px;
  }
}

/* Mobile: text stacks first, the portrait becomes its own block below it
   rather than sitting beside (or behind) the copy — keeps headline and CTAs perfectly clean. */
@media (max-width: 640px) {
  .hero {
    background-image:
      linear-gradient(180deg, rgba(247, 246, 241, .9) 0%, rgba(247, 246, 241, .68) 40%, rgba(247, 246, 241, .9) 62%, var(--bg) 78%),
      url("../assets/banners/index_bg.webp");
    background-position: center, center top;
  }

  .hero {
    flex-direction: column;
  }

  .hero-content {
    max-width: none;
  }

  .hero-portrait {
    position: static;
    top: auto;
    bottom: auto;
    right: auto;
    margin: 24px auto 0;
    width: min(88%, 400px);
    max-width: none;
    height: auto;
    max-height: none;
    aspect-ratio: 6400 / 4267;
  }

  .hero-portrait img {
    object-fit: contain;
  }

  .hero-quickstats {
    flex-direction: column;
    gap: 14px;
  }

  .hero-quickstat {
    border-right: none;
    padding-right: 0;
  }
}

@media (max-width: 480px) {
  .hero {
    background-size: auto 100%;
  }

  .hero-ctas {
    flex-direction: column;
  }
}

/* Clara-style editorial serif for major headlines, sitewide */
h1 {
  font-weight: 350;
}

h2,
h3,
h4,
h5 {
  font-weight: 400;
}

/* Shared page shells — animated gradient banner */
.page-hero,
.about-page-hero,
.appointment-page-hero,
.diseases-hero,
.disease-detail-hero,
.cs-hero,
.f-hero,
.placement-hero {
  position: relative;
  display: flex !important;
  align-items: center;
  height: 800px !important;
  min-height: 800px !important;
  max-height: 800px !important;
  padding: 72px 0 !important;
  overflow: hidden;
  border-bottom: 0 !important;
  background-color: #1a2130 !important;
  background-image: url("../assets/banners/gradient-wave-1.webp") !important;
  background-size: cover !important;
  background-position: 30% 50% !important;
  background-repeat: no-repeat !important;
  color: #fff !important;
  animation: heroBannerPan 26s ease-in-out infinite alternate;
}

.page-hero::before,
.about-page-hero::before,
.appointment-page-hero::before,
.diseases-hero::before,
.disease-detail-hero::before,
.cs-hero::before,
.f-hero::before,
.placement-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(13, 20, 24, .5);
  z-index: 0;
}

.page-hero>.container,
.about-page-hero>.container,
.appointment-page-hero>.container,
.diseases-hero>.container,
.disease-detail-hero>.container,
.cs-hero>.container,
.f-hero>.container,
.placement-hero>.container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 100%;
  overflow: hidden;
}

@keyframes heroBannerPan {
  0% {
    background-position: 15% 35%;
  }

  100% {
    background-position: 85% 65%;
  }
}

@media (prefers-reduced-motion: reduce) {

  .page-hero,
  .about-page-hero,
  .appointment-page-hero,
  .diseases-hero,
  .disease-detail-hero,
  .cs-hero,
  .f-hero,
  .placement-hero {
    animation: none;
  }
}

/* Typography (font-family/font-size/font-weight/line-height/letter-spacing)
   comes from .page-title on the h1 itself — this rule only controls layout
   and color (white, to read against the dark animated hero background). */
.page-hero h1,
.about-page-hero h1,
.appointment-page-hero h1,
.diseases-hero h1,
.disease-detail-hero h1,
.cs-hero h1,
.f-hero h1,
.placement-hero h1 {
  max-width: 830px;
  margin-block: 16px 20px;
  color: #fff !important;
}

.page-hero p,
.about-page-hero p,
.appointment-page-hero p,
.diseases-hero p,
.disease-detail-hero p,
.cs-hero p,
.f-hero p,
.placement-hero p {
  color: rgba(255, 255, 255, .82) !important;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.7;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

.page-hero .breadcrumb,
.about-page-hero .breadcrumb,
.appointment-page-hero .breadcrumb,
.diseases-hero .breadcrumb,
.disease-detail-hero .breadcrumb,
.cs-hero .breadcrumb,
.f-hero .breadcrumb,
.placement-hero .breadcrumb {
  color: rgba(255, 255, 255, .65) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

.page-hero .breadcrumb a,
.about-page-hero .breadcrumb a,
.appointment-page-hero .breadcrumb a,
.diseases-hero .breadcrumb a,
.disease-detail-hero .breadcrumb a,
.cs-hero .breadcrumb a,
.f-hero .breadcrumb a,
.placement-hero .breadcrumb a {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

.page-hero .breadcrumb .sep,
.about-page-hero .breadcrumb .sep,
.appointment-page-hero .breadcrumb .sep,
.diseases-hero .breadcrumb .sep,
.disease-detail-hero .breadcrumb .sep,
.cs-hero .breadcrumb .sep,
.f-hero .breadcrumb .sep,
.placement-hero .breadcrumb .sep {
  color: rgba(255, 255, 255, .4) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* Disease category label needs a light chip to stay legible over the dark banner */
.disease-detail-hero #hero-category {
  display: inline-flex !important;
  align-items: center;
  background: rgba(255, 255, 255, .92) !important;
  padding: 5px 12px;
  border-radius: 999px;
}

/* Hero stat callouts (fellowship, case studies) need to read on the dark banner too */
.f-hero span[data-target],
.cs-hero div[data-target] {
  color: #fff !important;
}

.f-hero span[data-target]+div,
.cs-hero div[data-target]+div {
  color: rgba(255, 255, 255, .7) !important;
}

/* The banner image now carries the visual — retire the secondary side portraits */
.subpage-hero-image,
.appointment-hero-visual,
.f-hero-illus {
  display: none !important;
}

.subpage-hero-grid,
.appointment-hero-grid,
.f-hero-inner {
  grid-template-columns: 1fr !important;
}

.breadcrumb {
  min-height: 32px;
  margin-bottom: 22px;
  color: var(--text-muted) !important;
}

.breadcrumb a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--teal) !important;
  font-weight: 700;
  text-underline-offset: 4px;
}

.breadcrumb .sep {
  color: var(--border-strong) !important;
}

.section-header {
  margin-bottom: clamp(36px, 5vw, 58px);
}

.section-header p {
  color: var(--text-secondary);
}

/* Home */
.home-metrics-band {
  padding: 32px 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.home-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  max-width: none;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: none;
}

.home-metrics .hero-stat {
  min-height: 126px;
  padding: 26px 28px;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.home-metrics .hero-stat:last-child {
  border-right: 0;
}

.home-metrics .hero-stat .num {
  color: var(--teal);
  font-size: clamp(1.8rem, 3vw, 2.35rem);
}

.home-metrics .hero-stat .label {
  max-width: 210px;
  margin-top: 10px;
  color: var(--text-secondary);
  font-size: .86rem;
  line-height: 1.45;
}

.services-panel {
  background: linear-gradient(135deg, var(--teal-light) 0%, var(--purple-pale) 100%);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 5vw, 48px);
}

.services-panel .section-header {
  margin-bottom: clamp(28px, 4vw, 40px);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.service-card {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  background: var(--surface);
}

.service-card::before {
  display: none;
}

.service-card:hover {
  border-color: var(--card-accent, var(--teal));
}

.service-card-text {
  flex: 1;
  min-width: 0;
}

.service-card-text h3 {
  font-size: 1rem;
  margin-bottom: 6px;
}

.service-card-text p {
  font-size: .82rem;
  line-height: 1.5;
}

.service-card-visual {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-card-visual img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

@media (max-width: 900px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-card {
    flex-direction: row;
  }
}

.home-cover-section {
  padding: clamp(92px, 11vw, 150px) 0;
  background: #fff;
}

.services-panel.home-cover-layout {
  display: grid;
  grid-template-columns: minmax(310px, .82fr) minmax(460px, 1fr);
  gap: clamp(64px, 10vw, 150px);
  align-items: start;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.home-cover-intro {
  position: sticky;
  top: 140px;
  max-width: 480px;
  margin: 0;
}

.home-cover-kicker {
  display: block;
  margin-bottom: 26px;
  color: var(--teal);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.home-cover-intro h2 {
  margin: 0;
  color: var(--navy-dark);
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-size: clamp(3.2rem, 5.2vw, 4.7rem);
  font-weight: 420;
  line-height: .98;
  letter-spacing: -.055em;
}

.home-cover-intro>p {
  max-width: 420px;
  margin: 28px 0 0;
  color: var(--text-secondary);
  font-size: 1.04rem;
  line-height: 1.55;
}

.home-cover-directory-link,
.home-cover-learn {
  color: var(--purple);
  font-size: .88rem;
  font-weight: 750;
  text-decoration: none;
}

.home-cover-learn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.home-cover-directory-link {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  margin-top: 28px;
}

.home-cover-directory-link span,
.home-cover-learn span {
  transition: transform var(--transition);
}

.home-cover-directory-link:hover span,
.home-cover-directory-link:focus-visible span,
.home-cover-item:hover .home-cover-learn span,
.home-cover-item:focus-visible .home-cover-learn span {
  transform: translateX(4px);
}

.services-grid.home-cover-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.service-card.home-cover-item {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  min-height: 138px;
  padding: 14px 0 34px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--navy-dark);
  box-shadow: none !important;
  transition: transform var(--transition), color var(--transition);
}

.service-card.home-cover-item+.home-cover-item {
  padding-top: 34px;
}

.service-card.home-cover-item:hover,
.service-card.home-cover-item:focus-visible {
  border-color: transparent;
  background: transparent;
  color: var(--teal);
  transform: translateX(7px);
}

.home-cover-item .service-card-text {
  grid-column: 2;
}

.home-cover-item .service-card-text h3 {
  max-width: 510px;
  margin: 0 0 12px;
  color: currentColor;
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  font-weight: 420;
  line-height: 1.08;
  letter-spacing: -.04em;
}

.home-cover-item .service-card-visual {
  grid-column: 1;
  grid-row: 1;
  width: 72px;
  height: 72px;
  border: #dbe1e7 solid 1px;
  border-radius: 50%;
  background: #ffffff !important;
  padding: 10px;
}

.home-cover-item .service-card-visual img {
  width: 54px;
  height: 54px;
  filter: grayscale(1) contrast(1.15) sepia(.3) hue-rotate(130deg) saturate(1.8);
  opacity: .88;
}

@media (max-width: 900px) {
  .services-panel.home-cover-layout {
    grid-template-columns: 1fr;
    gap: 64px;
  }

  .home-cover-intro {
    position: static;
    max-width: 680px;
  }
}

@media (max-width: 560px) {
  .home-cover-section {
    padding: 78px 0;
  }

  .home-cover-intro h2 {
    font-size: clamp(2.8rem, 14vw, 3.65rem);
  }

  .service-card.home-cover-item {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 17px;
    min-height: 108px;
    padding-bottom: 24px;
  }

  .service-card.home-cover-item+.home-cover-item {
    padding-top: 24px;
  }

  .home-cover-item .service-card-visual {
    width: 56px;
    height: 56px;
  }

  .home-cover-item .service-card-visual img {
    width: 42px;
    height: 42px;
  }

  .home-cover-item .service-card-text h3 {
    font-size: clamp(1.45rem, 8vw, 1.9rem);
  }
}

.how-bg {
  background: var(--surface-elevated) !important;
}

.steps-grid::before {
  height: 1px;
  background: var(--border-strong);
}

.step-num {
  width: 72px;
  height: 72px;
  border-width: 1px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--navy-dark);
}

/* Home experience */
.home-experience {
  background: var(--bg);
}

.home-experience-layout {
  display: grid;
  grid-template-columns: minmax(360px, .78fr) minmax(0, 1.22fr);
  align-items: start;
}

.home-experience-visual {
  position: sticky;
  top: 96px;
  min-height: 720px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  background: #dceeea;
}

.home-experience-visual-copy {
  position: relative;
  z-index: 3;
  max-width: 340px;
  padding: 50px 46px 0;
}

.home-experience-visual-copy span {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--teal);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.home-experience-visual-copy h2 {
  color: var(--navy-dark);
  font-size: clamp(2.35rem, 3.4vw, 3.45rem);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.home-experience-portrait {
  position: absolute;
  inset: 178px 0 0;
  overflow: hidden;
}

.home-experience-portrait::before {
  position: absolute;
  z-index: 0;
  right: -80px;
  bottom: -90px;
  width: 420px;
  height: 420px;
  border: 1px solid color-mix(in srgb, var(--teal) 18%, transparent);
  border-radius: 50%;
  content: "";
}

.home-experience-portrait>img {
  position: absolute;
  z-index: 1;
  right: -8%;
  bottom: -17%;
  width: 92%;
  height: auto;
  mix-blend-mode: multiply;
  object-fit: contain;
}

.home-experience-chat {
  position: absolute;
  z-index: 2;
  max-width: 230px;
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 12px;
  color: var(--navy-dark);
  font-size: .8rem;
  font-weight: 650;
  line-height: 1.45;
}

.chat-patient {
  top: 220px;
  right: 28px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.chat-care {
  top: 284px;
  left: 26px;
  background: #b9e0d8;
}

.home-experience-journey {
  border: 1px solid var(--border);
  border-left: 0;
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  background: var(--surface);
}

.home-experience-step {
  padding: clamp(48px, 5.2vw, 72px) clamp(34px, 4.5vw, 62px);
  border-bottom: 1px solid var(--border);
}

.home-experience-step:last-child {
  border-bottom: 0;
}

.home-experience-number {
  display: inline-flex;
  min-width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  margin-bottom: 26px;
  border-radius: 14px;
  background: var(--surface-strong);
  color: var(--navy-dark);
  font-size: .86rem;
  font-weight: 800;
}

.home-experience-step-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .78fr);
  gap: clamp(30px, 5vw, 58px);
  align-items: start;
}

.home-experience-step-copy h3 {
  margin-bottom: 14px;
  color: var(--navy-dark);
  font-size: clamp(1.65rem, 2.5vw, 2.45rem);
  line-height: 1.15;
  letter-spacing: -.035em;
}

.home-experience-step-copy p {
  max-width: 560px;
  color: var(--text-secondary);
  font-size: .98rem;
  line-height: 1.8;
}

.home-experience-actions {
  display: flex;
  margin-top: 28px;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.home-experience-actions .btn,
.home-experience-call {
  width: 100%;
  min-height: 52px;
  justify-content: center;
  /* Box shape, not the site-wide pill .btn falls back to (styles.css'
     later cascade layers redefine .btn's border-radius up to 999px) —
     matches .home-experience-call's own border-radius: var(--radius-md)
     just below, so both actions in this group read as one consistent
     pair. Scoped to this button group only; other .btn-appointment
     buttons elsewhere on the site are unaffected. */
  border-radius: var(--radius-md);
}

.home-experience-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
  color: var(--teal);
  font-weight: 750;
}

.home-experience-call svg {
  flex-shrink: 0;
}

.home-experience-call:hover {
  border-color: var(--teal);
  background: var(--surface-strong);
}

.home-experience-benefits {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-elevated);
  list-style: none;
}

.home-experience-benefits li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--navy-dark);
  font-size: .9rem;
  font-weight: 650;
}

.home-experience-benefits img {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  object-fit: contain;
}

.about-section {
  background: var(--surface) !important;
}

/* About */

.subpage-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
}

.blend-hero {
  min-height: 430px;
}

.blend-hero::before {
  width: min(90%, 390px);
  height: auto;
  aspect-ratio: 1;
  border: 1px solid var(--border);
  background: var(--surface-elevated);
}

.about-grid {
  gap: clamp(44px, 7vw, 88px);
  align-items: start;
}

.mission-list {
  margin-top: 34px;
  border-top: 1px solid var(--border);
}

.mission-item {
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
}

.mission-icon,
.feature-icon,
.benefit-card .icon {
  border: 1px solid var(--border);
  background: var(--surface-elevated) !important;
}

.ask-neuro-logo-block {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  background: var(--surface-elevated) !important;
  box-shadow: none !important;
}

.ask-neuro-logo-block [style*="background:var(--bg)"] {
  border: 1px solid var(--border);
  background: var(--surface) !important;
}

.pillars-grid {
  gap: 1px !important;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--border);
}

.pillars-grid>div {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--surface) !important;
}

.pillars-grid>div>div:first-child {
  width: 4px !important;
  height: auto !important;
  right: auto !important;
  bottom: 0;
}

.team-profile-index {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
}

.team-profile-index a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: .82rem;
  font-weight: 700;
}

.team-profile-index a:hover {
  border-color: var(--teal);
  background: var(--surface-elevated);
  color: var(--navy-dark);
}

.team-grid {
  gap: 1px !important;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--border);
}

.team-person {
  min-width: 0;
  border: 0;
  border-radius: 0;
  padding: 20px 20px 28px;
}

.team-portrait {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg) !important;
  background-color: var(--surface-elevated);
}

/* Appointment */

/* Shorter hero than the other page banners — this page's copy block is short,
   so the shared 800px height (set further up for .page-hero/.about-page-hero/
   etc.) leaves too much empty space. Scoped to .appointment-page-hero only. */
.appointment-page-hero {
  height: 740px !important;
  min-height: 740px !important;
  max-height: 740px !important;
  padding: 68px 0 !important;
}

/* Hero visual: the neuro profile PNG (real alpha transparency, no white
   background to strip) sits as a foreground layer directly on the hero — a
   sibling of .container, not nested inside it — so it paints above the
   banner without being boxed into .container's own stacking context. It
   replaces the retired widget card; the copy column keeps its second grid
   track reserved as empty space so text never runs under the image on
   desktop. (The narrower-viewport media queries below collapse this back to
   a single column.) */
.appointment-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 460px);
}

.appointment-hero-cta {
  margin-top: 8px;
}

/* The copy column's grid track reservation (see .appointment-hero-grid
   comment above) is neutralized sitewide by the unconditional
   `.appointment-hero-grid { grid-template-columns: 1fr !important }` rule
   further up this file, so the paragraph would otherwise run the full
   container width and under the profile image on desktop — cap it
   explicitly instead. */
.appointment-hero-copy p {
  max-width: 560px;
}

.appointment-hero-profile {
  position: absolute;
  right: -3%;
  bottom: 0;
  z-index: 2;
  width: min(72%, 860px);
  height: 140%;
  max-width: none;
  object-fit: contain;
  object-position: right bottom;
  pointer-events: none;
  opacity: 0.95;
}

.appointment-widget-card,
.appointment-emergency-card {
  border: 1px solid var(--border) !important;
  background: color-mix(in srgb, var(--surface) 94%, transparent) !important;
  box-shadow: none !important;
}

.appointment-widget-card {
  border-radius: var(--radius-xl) !important;
}

.info-strip {
  border: 0;
  border-radius: 0;
  background: none;
}

.info-strip-heading {
  width: min(100%, 760px);
  margin: 0 auto clamp(38px, 5vw, 56px);
  text-align: center;
}

.info-strip-kicker {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--teal);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.info-strip-heading h2 {
  color: var(--navy-dark);
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 1.08;
  letter-spacing: -.04em;
}

.info-strip-heading p {
  max-width: 620px;
  margin: 18px auto 0;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.7;
}

.info-strip-card {
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}

.appointment-process {
  margin-bottom: clamp(76px, 8vw, 112px);
  padding-top: clamp(12px, 2vw, 28px);
}

.appointment-process-header {
  max-width: 900px;
  width: 100%;
  margin: 0 auto clamp(36px, 5vw, 54px);
  text-align: center;
}

.appointment-process-kicker {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--teal);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.appointment-process-header h2 {
  color: var(--navy-dark);
  font-size: clamp(2.2rem, 4.4vw, 3.8rem);
  line-height: 1.08;
  letter-spacing: -.04em;
}

.appointment-process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(210px, auto));
  gap: 22px;
}

.appointment-process-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: #f8f8f5;
}

.appointment-process-card-top {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.appointment-process-card-top>img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.appointment-process-number {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 50%;
  background: var(--surface);
  color: var(--navy-dark);
  font-size: .88rem;
  font-weight: 800;
}

.appointment-process-card h3 {
  max-width: 300px;
  margin-bottom: 10px;
  color: var(--navy-dark);
  font-size: 1.12rem;
  line-height: 1.35;
}

.appointment-process-card p {
  max-width: 360px;
  color: var(--text-secondary);
  font-size: .92rem;
  line-height: 1.75;
}

.process-step-1 {
  grid-column: 1;
  grid-row: 1 / 3;
  min-height: 462px;
  background: var(--surface-strong);
}

.process-step-2 {
  grid-column: 2;
  grid-row: 1;
}

.process-step-3 {
  grid-column: 2;
  grid-row: 2;
}

.process-step-4 {
  grid-column: 3;
  grid-row: 1;
}

.process-step-5 {
  grid-column: 3;
  grid-row: 2;
}

.appointment-process-visual {
  position: absolute;
  right: 28px;
  bottom: 28px;
  width: 156px;
  height: 156px;
}

.appointment-process-visual::before,
.appointment-process-visual::after,
.appointment-process-visual span {
  position: absolute;
  content: "";
  border-radius: 50%;
}

.appointment-process-visual::before {
  inset: 0;
  background: color-mix(in srgb, var(--teal) 12%, transparent);
}

.appointment-process-visual::after {
  inset: 22px;
  border: 1px solid color-mix(in srgb, var(--teal) 24%, transparent);
}

.appointment-process-visual span {
  inset: 44px;
  background: var(--surface);
}

.appointment-process-visual img {
  position: absolute;
  z-index: 1;
  inset: 50%;
  width: 58px;
  height: 58px;
  transform: translate(-50%, -50%);
  object-fit: contain;
}

.appt-grid {
  grid-template-columns: minmax(0, .82fr) minmax(420px, 1.18fr);
  gap: clamp(40px, 7vw, 82px);
  align-items: start;
}

.appointment-booking-header {
  width: min(100%, 820px);
  margin: 0 auto clamp(40px, 5vw, 58px);
  text-align: center;
}

.appointment-booking-kicker {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--teal);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.appointment-booking-header h2 {
  color: var(--navy-dark);
  font-size: clamp(2.35rem, 4.8vw, 4.2rem);
  line-height: 1.06;
  letter-spacing: -.045em;
}

.appointment-booking-header p {
  max-width: 650px;
  margin: 18px auto 0;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.7;
}

.appointment-support-layout {
  grid-template-columns: minmax(0, 1.06fr) minmax(420px, .94fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
}

.appointment-support-layout .appt-form-card {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  padding: clamp(34px, 4vw, 52px);
  border: 0 !important;
  border-radius: 0 !important;
}

.appointment-support-panel {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  max-width: none;
  min-height: 100%;
  padding: clamp(38px, 4.5vw, 58px);
  border-left: 1px solid var(--border);
  background: #f7f6f1;
}

.appointment-support-kicker {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--teal);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.appointment-support-panel h3 {
  max-width: 520px;
  color: var(--navy-dark);
  font-size: clamp(1.9rem, 3vw, 2.85rem);
  line-height: 1.08;
  letter-spacing: -.04em;
}

.appointment-support-intro {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.appointment-support-intro p {
  color: var(--text-secondary);
  font-size: .96rem;
  line-height: 1.75;
}

.appointment-support-panel .feature-list {
  margin-top: 30px !important;
}

.appointment-support-panel .feature-item {
  padding: 16px 0;
}

.appointment-emergency-callout {
  margin-top: 30px;
  padding: 22px;
  border: 1px solid rgba(184, 58, 46, .2);
  border-radius: var(--radius-lg);
  background: var(--red-light);
}

.feature-item {
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
}

.appt-form-card,
.apply-form-card,
.f-form-card {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}

.form-section-title {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  color: var(--teal) !important;
}

.consult-label,
.time-label,
.role-label {
  min-height: 48px;
  border-width: 1px !important;
  border-color: var(--border-strong) !important;
  border-radius: var(--radius-md) !important;
  background: var(--surface) !important;
}

.consult-label:hover,
.time-label:hover,
.role-label:hover {
  border-color: var(--teal) !important;
  background: var(--surface-elevated) !important;
}

.consult-radio:checked+.consult-label,
.time-radio:checked+.time-label,
.role-checkbox:checked+.role-label {
  border-color: var(--teal) !important;
  background: var(--surface-strong) !important;
  color: var(--navy-dark) !important;
}

.urgency-bar {
  border: 1px solid #dcc7a9 !important;
  border-radius: var(--radius-lg) !important;
  background: var(--orange-light) !important;
}

/* Disease directory */

.search-bar {
  max-width: 580px;
  min-height: 56px;
  border: 1px solid var(--border-strong) !important;
  border-radius: 999px;
  background: var(--surface) !important;
  box-shadow: none !important;
}

.search-bar input {
  min-height: 44px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.filter-bar,
.cs-filters {
  gap: 8px;
}

.filter-pill,
.cs-filter-btn {
  min-height: 44px;
  padding: 9px 16px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 999px !important;
  background: var(--surface) !important;
  color: var(--text-secondary) !important;
}

.filter-pill:hover,
.cs-filter-btn:hover {
  border-color: var(--teal) !important;
  background: var(--surface-elevated) !important;
  color: var(--navy-dark) !important;
}

.filter-pill.active,
.cs-filter-btn.active {
  border-color: var(--teal) !important;
  background: var(--teal) !important;
  color: #fff !important;
}

.diseases-grid {
  gap: 1px !important;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--border);
}

.disease-card {
  min-height: 285px;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 30px !important;
  background: var(--surface) !important;
}

.disease-card:hover {
  background: var(--surface-elevated) !important;
}

.disease-card::after {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
}

.disease-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
}

/* Disease detail */

.disease-detail-hero .container>div:first-child {
  max-width: 880px;
}

.disease-layout {
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: clamp(44px, 7vw, 86px);
  padding-block: 76px 112px;
}

.content-block {
  margin-bottom: 18px;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.content-block h2 {
  color: var(--navy-dark) !important;
  font-size: 1.3rem;
}

.symptom-item,
.course-prognosis,
.advance-card,
.age-group-card {
  border: 1px solid var(--border) !important;
  background: var(--surface-subtle) !important;
  box-shadow: none !important;
}

.advance-card:hover,
.age-group-card:hover {
  border-color: var(--teal) !important;
  background: var(--surface-elevated) !important;
}

.diagnosis-num {
  border-radius: var(--radius-sm);
  background: var(--teal);
}

.emergency-callout {
  border: 1px solid #dcb5ae !important;
  border-radius: var(--radius-lg) !important;
  background: var(--red-light) !important;
}

.sidebar-card,
.disclaimer-box {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--surface) !important;
}

.toc-item {
  min-height: 42px;
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
}

.toc-item:hover,
.toc-item.active {
  background: var(--surface-elevated) !important;
  color: var(--navy-dark) !important;
}

.related-tag {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-color: var(--border-strong) !important;
  background: var(--surface) !important;
}

/* Impact stories */

.cs-hero::before,
.cs-hero::after {
  opacity: .35;
}

/* Full-height hero with a large foreground neural-head image, matching the
   appointment/fellowship hero pattern: the image is a sibling of .container
   (not nested in the grid) so it can be absolutely positioned against the
   hero itself, independent of the text column's width. */
.cs-hero {
  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;
  padding: 44px 0 !important;
}

.cs-hero-profile {
  position: absolute;
  right: 5%;
  bottom: 0;
  z-index: 2;
  height: 125%;
  width: auto;
  /* Height-driven sizing alone gives a constant pixel width regardless of
     viewport width, which would collide with the text column on narrower
     desktop widths — cap it so it scales down with the viewport and always
     leaves the copy column clear.

     This max-width, not the `height` above, is what actually governs the
     rendered size: the source image (612×408, a 1.5 ratio) is far wider
     than the box's own ratio here, so object-fit:contain is always
     width-bound against this cap — `height` has enough slack (125% of a
     100vh-tall hero) that it never becomes the limiting dimension.
     Raising `height` alone is a no-op; raising this is what makes the
     image (and therefore its visible height) larger. */
  max-width: 56vw;
  object-fit: contain;
  object-position: bottom right;
  pointer-events: none;
}

.cs-featured {
  overflow: hidden;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}

.cs-featured-image {
  background: var(--surface-elevated) !important;
  border-right: 1px solid var(--border);
}

.cs-grid {
  gap: 1px !important;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--border);
}

.cs-card {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--surface) !important;
}

.cs-card-image {
  border-bottom: 1px solid var(--border);
  filter: saturate(.74);
}

.cs-card:hover {
  background: var(--surface-elevated) !important;
}

.cs-read-more {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--teal) !important;
  font-weight: 800 !important;
}

.outcomes-band {
  border-block: 1px solid var(--border) !important;
  background: var(--surface-elevated) !important;
  color: var(--text-primary) !important;
}

.outcomes-band h2,
.outcomes-band .num,
.outcomes-band .label {
  color: var(--text-primary) !important;
}

.outcomes-grid {
  gap: 1px !important;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  background: var(--border);
}

.outcome-stat {
  min-height: 132px;
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--surface) !important;
}

.outcome-stat .num {
  font-size: clamp(2rem, 3.6vw, 2.7rem);
  line-height: 1;
}

.outcome-stat .label {
  max-width: 240px;
  margin-top: 12px;
  font-size: .84rem;
  line-height: 1.45;
}

.cs-modal-overlay {
  background: rgba(13, 40, 36, .68) !important;
  backdrop-filter: blur(8px);
}

.cs-modal {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}

.cs-modal-close {
  width: 44px !important;
  height: 44px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface-elevated) !important;
}

/* Fellowship */

.f-hero::before,
.f-hero::after {
  opacity: .25 !important;
}

.f-hero-inner {
  align-items: center;
}

.f-hero-illus {
  border: 1px solid var(--border) !important;
  border-radius: 50% !important;
  background: var(--surface-elevated) !important;
  box-shadow: none !important;
}

/* Full-height hero with a large foreground doctor/hologram image. The image
   is a sibling of .container (not nested in the grid) so it can be
   absolutely positioned against the hero itself, independent of the text
   column's width. */
.f-hero {
  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;
  padding: 44px 0 !important;
}

.f-hero-profile {
  position: absolute;
  right: 5%;
  bottom: 0;
  z-index: 2;
  height: 92%;
  width: auto;
  /* Height-driven sizing alone gives a constant pixel width regardless of
     viewport width, which collides with the text column on anything
     narrower than ~1860px — cap it so it scales down with the viewport
     and always leaves the copy column clear. */
  max-width: 46vw;
  object-fit: contain;
  object-position: bottom right;
  pointer-events: none;
}

.audience-tabs {
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-elevated);
}

.audience-tab {
  min-height: 44px;
  border-radius: 999px !important;
}

.audience-tab.active {
  background: var(--surface) !important;
  color: var(--navy-dark) !important;
  box-shadow: none !important;
}

.role-row,
.perk-row,
.pyramid-row,
.partner-card,
.benefit-card {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}

.overview-card {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.roles-list,
.pyramid-list {
  gap: 12px !important;
}

.pyramid-row:hover,
.role-row:hover,
.perk-row:hover {
  border-color: var(--teal) !important;
  background: var(--surface-elevated) !important;
}

.p-num,
.step-num {
  background: var(--surface-elevated) !important;
  color: var(--teal) !important;
}

.perks-grid,
.why-partner-grid {
  gap: 1px !important;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--border);
}

.perk-row,
.why-partner-grid>* {
  border: 0 !important;
  border-radius: 0 !important;
}

/* Placement */

.benefits-grid,
.colleges-grid {
  gap: 1px !important;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--border);
}

.benefit-card,
.colleges-grid>* {
  border: 0 !important;
  border-radius: 0 !important;
}

.placement-form-wrapper {
  padding: clamp(64px, 8vw, 96px) 0 !important;
  border-block: 1px solid var(--border) !important;
  border-inline: 0 !important;
  border-radius: 0 !important;
  background: var(--surface-subtle) !important;
  box-shadow: none !important;
}

.placement-form-grid,
.placement-form-grid>*,
.placement-info,
.placement-form-grid .apply-form-card {
  min-width: 0;
  width: 100%;
}

.students-table {
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
}

.students-table th {
  /* The 4th column header wraps its text in .visually-hidden
     (position:absolute, no top/left) for the "Actions" column. With no
     positioned ancestor, its containing block was the viewport rather than
     this cell, so its static-position calculation escaped the table's own
     (properly clipped, overflow-x:auto-wrapped) box entirely and pushed
     document.documentElement.scrollWidth out to the table's unclipped
     natural width — a real, page-level horizontal scrollbar at narrow
     viewports, confirmed empirically (~31px at 320px). */
  position: relative;
  background: var(--surface-elevated) !important;
  color: var(--navy-dark) !important;
}

.add-student-btn,
.remove-row-btn {
  min-height: 44px;
}

.remove-row-btn {
  min-width: 44px;
}

/* Legal templates */
.legal-content {
  margin-top: 40px;
  padding: clamp(28px, 5vw, 54px) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}

.legal-content h2 {
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  font-size: 1.35rem;
}

.legal-content h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.legal-content a {
  color: var(--teal);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* Footer and persistent actions */
.footer {
  padding-top: clamp(64px, 8vw, 96px);
}

.footer-grid {
  gap: clamp(30px, 5vw, 64px);
}

.footer-logo-img {
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-sm);
  background: #fff;
}

.footer-col a,
.footer-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-underline-offset: 4px;
}

.footer-col a:hover,
.footer-links a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-emergency-box {
  border: 1px solid rgba(255, 255, 255, .16) !important;
  background: rgba(255, 255, 255, .06) !important;
}

.footer-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.footer-cta {
  min-height: 44px;
  padding: 11px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: transparent;
  border: 1px solid #374151;
  border-radius: 10px;
  color: #A7ADB8;
  font-size: .88rem;
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
  transition: transform var(--transition), border-color var(--transition), color var(--transition);
}

.footer-cta:hover,
.footer-cta:focus-visible {
  color: #fff;
  border-color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}

.footer-cta span {
  font-size: 1.15rem;
  line-height: 1;
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.footer-social-link {
  width: 44px;
  height: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: transparent;
  border: 1px solid #374151;
  color: #A7ADB8;
  transition: border-color var(--transition), color var(--transition), transform var(--transition);
}

.footer-social-link svg {
  width: 20px;
  height: 20px;
}

.footer-social-link:hover,
.footer-social-link:focus-visible {
  color: #fff;
  border-color: #fff;
  transform: translateY(-2px);
}

.legal-footer-social {
  justify-content: center;
  margin: 0 0 24px;
}

.legal-footer-cta {
  justify-content: center;
  margin: 0 0 16px;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .footer:has(.legal-footer-cta) {
    padding-top: 56px !important;
  }
}

.footer-social-link-text {
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}

@media (max-width: 520px) {
  .footer-cta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .footer-cta {
    padding-inline: 12px;
    font-size: .8rem;
  }
}

.floating-emergency {
  right: 18px;
  bottom: 18px;
  gap: 8px;
}

.floating-btn {
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  box-shadow: none !important;
}

.floating-btn.appt-float {
  background: var(--surface) !important;
  border-color: var(--border-strong);
  color: var(--navy-dark) !important;
}

.floating-btn.emergency-float {
  background: var(--teal) !important;
  color: #fff !important;
}

button:disabled,
.btn:disabled,
[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: .5 !important;
  transform: none !important;
}

/* Load sequence and section motion */
.hero-content,
.about-page-hero .subpage-hero-grid>*,
.appointment-hero-grid>*,
.diseases-hero .subpage-hero-grid>*,
.cs-hero-inner>*,
.f-hero-inner>*,
.placement-hero .container>* {
  opacity: 0;
  transform: translateY(14px);
}

body.is-ready .hero-content,
body.is-ready .about-page-hero .subpage-hero-grid>*,
body.is-ready .appointment-hero-grid>*,
body.is-ready .diseases-hero .subpage-hero-grid>*,
body.is-ready .cs-hero-inner>*,
body.is-ready .f-hero-inner>*,
body.is-ready .placement-hero .container>* {
  opacity: 1;
  transform: none;
  transition: opacity 360ms ease, transform 360ms ease;
}

body.is-ready .hero-content,
body.is-ready .appointment-hero-grid> :first-child,
body.is-ready .subpage-hero-grid> :first-child,
body.is-ready .cs-hero-inner> :first-child,
body.is-ready .f-hero-inner> :first-child {
  transition-delay: 40ms;
}

body.is-ready .appointment-hero-grid> :last-child,
body.is-ready .subpage-hero-grid> :last-child,
body.is-ready .cs-hero-inner> :last-child,
body.is-ready .f-hero-inner> :last-child {
  transition-delay: 130ms;
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 340ms ease, transform 340ms ease;
}

.reveal.revealed {
  opacity: 1;
  transform: none;
}

@media (max-width: 1100px) {
  .home-experience-layout {
    grid-template-columns: 1fr;
  }

  .home-experience-visual {
    position: relative;
    top: auto;
    min-height: 640px;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  .home-experience-portrait>img {
    right: 0;
    bottom: -24%;
    width: min(68%, 540px);
  }

  .home-experience-journey {
    border-top: 0;
    border-left: 1px solid var(--border);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  }

  .page-hero,
  .about-page-hero,
  .appointment-page-hero,
  .diseases-hero,
  .disease-detail-hero,
  .cs-hero,
  .f-hero,
  .placement-hero {
    padding: 124px 0 0 !important;
  }

  .subpage-hero-grid,
  .appointment-hero-grid,
  .f-hero-inner,
  .cs-hero-inner {
    grid-template-columns: 1fr !important;
  }

  .subpage-hero-image,
  .appointment-hero-visual,
  .f-hero-illus {
    width: min(100%, 520px);
  }

  /* Below the side-by-side breakpoint the copy column already goes full-width
     (grid-template-columns: 1fr above), so drop the profile image out of its
     absolute overlay and into normal flow, stacked under the CTA instead of
     floating over it. Height switches to auto so the stacked copy + image
     content isn't clipped by the fixed 800px hero height. */
  .appointment-page-hero {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex-direction: column;
    align-items: stretch;
  }

  .appointment-page-hero>.container {
    overflow: visible;
  }

  .appointment-hero-profile {
    position: static;
    display: block;
    width: min(70%, 360px);
    height: auto;
    margin: 8px auto 0;
    right: auto;
    bottom: auto;
    object-fit: initial;
  }

  /* Fellowship hero: same treatment as the appointment hero above — below the
     side-by-side breakpoint, drop the doctor image out of its absolute
     overlay and into normal flow, stacked under the stats instead of
     floating over the text. */
  .f-hero {
    height: auto !important;
    min-height: 0 !important;
    flex-direction: column;
    align-items: stretch;
  }

  .f-hero>.container {
    overflow: visible;
  }

  .f-hero-profile {
    position: static;
    display: block;
    width: min(70%, 380px);
    height: auto;
    margin: 24px auto 0;
    right: auto;
    bottom: auto;
    object-fit: initial;
  }

  /* Case studies hero: same treatment as the appointment/fellowship heroes
     above — below the side-by-side breakpoint, drop the neural-head image
     out of its absolute overlay and into normal flow, stacked under the
     stats instead of floating over the text. */
  .cs-hero {
    height: auto !important;
    min-height: 0 !important;
    flex-direction: column;
    align-items: stretch;
  }

  .cs-hero>.container {
    overflow: visible;
  }

  .cs-hero-profile {
    position: static;
    display: block;
    width: min(70%, 380px);
    height: auto;
    margin: 24px auto 0;
    right: auto;
    bottom: auto;
    object-fit: initial;
  }

  .appt-grid {
    grid-template-columns: 1fr;
  }

  .appt-info {
    max-width: 760px;
  }

  .appointment-support-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .appointment-support-layout .appt-form-card {
    grid-column: 1;
    grid-row: 1;
  }

  .appointment-support-panel {
    grid-column: 1;
    grid-row: 2;
    max-width: none;
    border-top: 1px solid var(--border);
    border-left: 0;
  }

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

  .process-step-1 {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .process-step-2 {
    grid-column: 2;
    grid-row: 1;
  }

  .process-step-3 {
    grid-column: 2;
    grid-row: 2;
  }

  .process-step-4 {
    grid-column: 1;
    grid-row: 3;
  }

  .process-step-5 {
    grid-column: 2;
    grid-row: 3;
  }

  .diseases-grid,
  .cs-grid,
  .info-strip,
  .why-partner-grid {
    /* These previously jumped straight from their desktop column count to a
       single column at 768px (see the 768px block below) with nothing in
       between for the 769-1100px tablet band — give them the same
       3-desktop/4-desktop -> 2-tablet -> 1-mobile cascade the other card
       grids already use. */
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Diseases hero gets its own, higher breakpoint (1350px, not the 1100px
   the appointment/fellowship/case-studies heroes above use) — measured
   empirically: .diseases-hero-profile is a plain absolute-positioned image
   (no grid track reserving space for it, unlike those three), and at
   right:3%/height:80% it overlaps the h1 in a row layout below ~1350px
   wide. Rather than shrink the heading down to an unreasonably narrow
   column to clear that, this pairs a higher stacking breakpoint with the
   same right/height as the desktop rule (see the .diseases-hero-profile
   desktop rule and the ≤1350px rule in diseases.html for the matching
   position:static switch) so the side-by-side layout is only used where
   it's actually safe. (This rule intentionally repeats right/height —
   see diseases.html's own .diseases-hero-profile rule for why height,
   not max-width, is what actually controls this image's size.) */
.diseases-hero-profile {
  right: 0%;
  height: 80%;
}

@media (max-width: 1350px) {
  .diseases-hero {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 768px) {
  body {
    padding-bottom: 68px;
  }

  .page-hero,
  .about-page-hero,
  .appointment-page-hero,
  .diseases-hero,
  .disease-detail-hero,
  .cs-hero,
  .f-hero,
  .placement-hero {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 106px 0 56px !important;
  }

  .page-hero>.container,
  .about-page-hero>.container,
  .appointment-page-hero>.container,
  .diseases-hero>.container,
  .disease-detail-hero>.container,
  .cs-hero>.container,
  .f-hero>.container,
  .placement-hero>.container {
    max-height: none;
    overflow: visible;
  }

  .subpage-hero-image,
  .appointment-hero-visual,
  .f-hero-illus {
    min-height: 280px;
  }

  .appointment-hero-profile {
    width: min(78%, 300px);
    margin-top: 20px;
  }

  .f-hero-profile {
    width: min(80%, 300px);
    margin-top: 20px;
  }

  .cs-hero-profile {
    width: min(80%, 300px);
    margin-top: 20px;
  }

  .home-metrics-band {
    padding-block: 20px;
  }

  .home-metrics {
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
  }

  .home-metrics .hero-stat {
    min-height: 104px;
    padding: 22px 24px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .home-metrics .hero-stat:last-child {
    border-bottom: 0;
  }

  .pillars-grid,
  .team-grid,
  .info-strip,
  .diseases-grid,
  .cs-grid,
  .benefits-grid,
  .colleges-grid,
  .perks-grid,
  .why-partner-grid {
    grid-template-columns: 1fr !important;
  }

  .service-card {
    min-height: 0;
  }

  .home-experience-visual {
    min-height: 570px;
  }

  .home-experience-visual-copy {
    padding: 34px 28px 0;
  }

  .home-experience-visual-copy h2 {
    max-width: 300px;
    font-size: clamp(2.4rem, 11vw, 3.3rem);
  }

  .home-experience-portrait {
    inset: 150px 0 0;
  }

  .home-experience-portrait>img {
    right: -8%;
    bottom: -18%;
    width: min(92%, 460px);
  }

  .home-experience-step {
    padding: 40px 26px;
  }

  .home-experience-step-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .home-experience-benefits {
    padding: 22px;
  }

  .appointment-support-panel {
    padding: 34px;
  }

  .appointment-process {
    margin-bottom: 68px;
  }

  .appointment-process-header {
    margin-bottom: 30px;
    text-align: left;
  }

  .appointment-process-header h2 {
    font-size: clamp(2.1rem, 10vw, 3rem);
  }

  .appointment-process-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 14px;
  }

  .process-step-1,
  .process-step-2,
  .process-step-3,
  .process-step-4,
  .process-step-5 {
    grid-column: auto;
    grid-row: auto;
  }

  .process-step-1 {
    min-height: 390px;
  }

  .appointment-process-card {
    padding: 24px;
  }

  /* The decorative circle graphic has no responsive treatment at all
     upstream — at a ~300px-wide card (24px padding on a full-width mobile
     column) a 156px circle anchored 28px from the corner eats over half the
     card and can sit on top of step-1's heading/paragraph if they wrap to
     more lines than the 390px min-height budget. Shrink it and its
     concentric rings/icon proportionally. */
  .appointment-process-visual {
    width: 96px;
    height: 96px;
    right: 18px;
    bottom: 18px;
  }

  .appointment-process-visual::after {
    inset: 14px;
  }

  .appointment-process-visual span {
    inset: 27px;
  }

  .appointment-process-visual img {
    width: 36px;
    height: 36px;
  }

  .disease-layout {
    grid-template-columns: 1fr;
    padding-block: 54px 82px;
  }

  .disease-sidebar {
    position: static;
  }

  .content-block {
    padding: 24px;
  }

  .cs-featured {
    grid-template-columns: 1fr !important;
  }

  .cs-featured-image {
    min-height: 240px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .floating-emergency {
    right: 12px;
    bottom: 12px;
    left: 12px;
    flex-direction: row;
  }

  .floating-emergency .appt-float {
    display: none;
  }

  body:has(.f-hero) .floating-emergency .appt-float,
  body:has(.about-page-hero) .floating-emergency .appt-float {
    display: inline-flex;
  }

  .floating-btn {
    flex: 1;
    justify-content: center;
  }

  .audience-tabs {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--radius-lg);
  }

  .audience-tab {
    width: 100%;
    justify-content: flex-start;
  }

  .audience-tab span {
    display: inline !important;
  }

  .legal-content {
    margin-top: 28px;
  }
}

@media (max-width: 520px) {
  .home-experience-visual {
    min-height: 540px;
  }

  .home-experience-portrait>img {
    right: -20%;
    bottom: -13%;
    width: 118%;
  }

  .home-experience-chat {
    max-width: 174px;
    padding: 9px 11px;
    font-size: .75rem;
  }

  .chat-patient {
    top: 54px;
    right: 14px;
  }

  .chat-care {
    top: 122px;
    left: 14px;
  }

  .appointment-support-panel {
    padding: 26px;
  }

  .appointment-support-panel h3 {
    font-size: 2.25rem;
  }

  .navbar-inner>.navbar-logo {
    min-width: 0;
    flex: 1 1 auto;
  }

  .navbar-inner>.navbar-logo .navbar-logo-img {
    max-width: 118px;
  }

  .navbar-inner>.btn {
    width: auto;
    min-width: 138px;
    flex: 0 0 auto;
    padding-inline: 14px;
  }

  .subpage-hero-image,
  .appointment-hero-visual,
  .f-hero-illus {
    display: none !important;
  }

  .consult-type-grid,
  .time-grid,
  .role-select-grid,
  .age-group-grid {
    grid-template-columns: 1fr !important;
  }

  .appt-form-card,
  .apply-form-card,
  .f-form-card {
    padding: 24px !important;
  }

  .floating-btn {
    padding-inline: 12px;
    font-size: .78rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .hero-content,
  .about-page-hero .subpage-hero-grid>*,
  .appointment-hero-grid>*,
  .diseases-hero .subpage-hero-grid>*,
  .cs-hero-inner>*,
  .f-hero-inner>*,
  .placement-hero .container>*,
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===== FAQ ===== */
.faq-section {
  padding: clamp(64px, 8vw, 96px) 0;
}

.faq-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(40px, 6vw, 56px);
}

.faq-header .section-label {
  margin: 0 auto 20px;
}

.faq-header h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.7rem);
  line-height: 1.15;
}

.faq-list {
  max-width: 760px;
  margin: 0 auto;
  border-top: 1px solid var(--border);
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  cursor: pointer;
  list-style: none;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: var(--text-primary);
  min-height: 44px;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item .faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.faq-item .faq-icon::before,
.faq-item .faq-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--text-muted);
  transform: translate(-50%, -50%);
  transition: transform var(--transition), opacity var(--transition);
}

.faq-item .faq-icon::before {
  width: 14px;
  height: 1.5px;
}

.faq-item .faq-icon::after {
  width: 1.5px;
  height: 14px;
}

.faq-item[open] .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.faq-item p {
  margin: 0 0 24px;
  max-width: 62ch;
  color: var(--text-secondary);
}

/* ===== Site-wide header aligned to the shared page grid ===== */
.navbar {
  top: 0 !important;
  background: #f7f6f0 !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: none !important;
  transition: background-color var(--transition), border-color var(--transition) !important;
}

.navbar>.container {
  width: min(calc(100% - 64px), 1180px) !important;
  margin-inline: auto !important;
  padding: 0 !important;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.navbar.scrolled>.container {
  box-shadow: none;
}

.navbar-inner {
  height: 80px;
}

.navbar-nav a {
  border-radius: var(--radius-md);
}

.navbar-emergency {
  border-radius: var(--radius-md) !important;
}

.hamburger {
  margin-right: 4px;
}

.mobile-nav {
  top: 80px !important;
  left: 0 !important;
  right: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 16px 36px rgba(20, 20, 30, .12) !important;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Every primary content shell and every hero uses the same horizontal grid. */
.container,
.hero>.container,
.page-hero>.container,
.about-page-hero>.container,
.appointment-page-hero>.container,
.diseases-hero>.container,
.disease-detail-hero>.container,
.cs-hero>.container,
.f-hero>.container,
.placement-hero>.container {
  width: min(calc(100% - 64px), 1180px) !important;
  margin-inline: auto !important;
}

@media (max-width: 768px) {
  .navbar>.container {
    width: calc(100% - 32px) !important;
  }

  .container,
  .hero>.container,
  .page-hero>.container,
  .about-page-hero>.container,
  .appointment-page-hero>.container,
  .diseases-hero>.container,
  .disease-detail-hero>.container,
  .cs-hero>.container,
  .f-hero>.container,
  .placement-hero>.container {
    width: calc(100% - 32px) !important;
  }

  .navbar-inner {
    height: 72px;
  }

  .mobile-nav {
    top: 72px !important;
  }
}