/* =================================================================
   PT Clinic Template — Inner Page Styles (inner-pages.css)
   Rehab CEOs Design System v1.1

   Loaded by all inner pages alongside styles.css.
   Do NOT load on index.html (homepage uses app.js + styles.css only).
   ================================================================= */

/* =================================================================
   [data-reveal] SCROLL ANIMATION SYSTEM
   IntersectionObserver adds .is-visible — CSS does the rest.
   Hidden-until-revealed state only applies once page.js confirms it will
   actually run the reveal (html.reveal-armed, set at the top of page.js
   before initReveals() runs). If JS never runs at all, [data-reveal]
   content is never hidden in the first place — same fallback pattern as
   .no-gsap on the homepage, just inverted since this system has no CDN
   dependency to fail. */

.reveal-armed [data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

.reveal-armed [data-reveal="left"]  { transform: translateX(-50px); }
.reveal-armed [data-reveal="right"] { transform: translateX(50px); }
.reveal-armed [data-reveal="scale"] { transform: scale(0.92); }
[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible,
[data-reveal="scale"].is-visible { transform: none; }

/* stagger: section is transparent container; children reveal sequentially */
[data-reveal="stagger"] { opacity: 1; transform: none; transition: none; }
.reveal-armed [data-reveal="stagger"] > * {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal="stagger"].is-visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s; }
[data-reveal="stagger"].is-visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.10s; }
[data-reveal="stagger"].is-visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.20s; }
[data-reveal="stagger"].is-visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.30s; }
[data-reveal="stagger"].is-visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.40s; }
[data-reveal="stagger"].is-visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.50s; }
[data-reveal="stagger"].is-visible > *:nth-child(7) { opacity: 1; transform: none; transition-delay: 0.60s; }
[data-reveal="stagger"].is-visible > *:nth-child(8) { opacity: 1; transform: none; transition-delay: 0.70s; }
[data-reveal="stagger"].is-visible > *:nth-child(9) { opacity: 1; transform: none; transition-delay: 0.80s; }
[data-reveal="stagger"].is-visible > *:nth-child(10) { opacity: 1; transform: none; transition-delay: 0.90s; }
/* Catch-all: containers can hold more than 10 items (FAQ lists, "who this is for"
   checklists, the full team grid) — without this, anything past #10 stays
   opacity:0 forever because is-visible never gets a nth-child match for it. */
[data-reveal="stagger"].is-visible > *:nth-child(n+11) { opacity: 1; transform: none; transition-delay: 0.90s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal="stagger"] > * {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* ================================================================= NAV ACTIVE STATE */
.nav-link[aria-current="page"] { color: #FFFFFF !important; }   /* header is navy now */
.nav-link[aria-current="page"]::after {
  content: ""; position: absolute; bottom: 0; left: 0;
  width: 100%; height: 1px; background: var(--color-accent);
}

/* ================================================================= INNER PAGE HERO */
.inner-hero {
  position: relative;
  min-height: 52vh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--header-h) + clamp(52px, 9vh, 100px)) var(--section-pad-h) clamp(56px, 8vh, 96px);
  overflow: hidden;
  background: var(--bg-secondary);
}

/* ambient teal bloom — lifts the hero above a plain dark panel */
.inner-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(52% 72% at 90% 15%, var(--color-accent-glow), transparent 68%);
}

.inner-hero-bg {
  position: absolute;
  inset: -20% 0;           /* extra height above so parallax doesn't reveal edges */
  z-index: 0;
  will-change: transform;
}
.inner-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
  display: block;
}
.inner-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(4,23,38,0.72) 0%,
    rgba(4,23,38,0.60) 45%,
    rgba(4,23,38,0.92) 100%);
}

.inner-hero-content {
  position: relative;
  z-index: 2;
}

.page-breadcrumb {
  display: flex; align-items: center; gap: 0.55rem;
  margin-bottom: 1.4rem;
  font-family: var(--font-body);
  font-size: 0.76rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted);
}
.page-breadcrumb a { display: inline-block; color: var(--text-muted); padding: 0.85rem 0.15rem; margin: -0.85rem -0.15rem; transition: color var(--duration-fast); }
.page-breadcrumb a:hover { color: var(--color-accent); }
.page-breadcrumb .sep { opacity: 0.4; }

.inner-hero .section-label { margin-bottom: 1rem; }

.inner-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5.5vw, 5.2rem);
  font-weight: 700; line-height: 0.97; letter-spacing: -0.03em;
  color: var(--text-primary);
  max-width: 16ch;
  margin-top: 0.4rem;
  overflow-wrap: break-word;
  word-break: break-word;
}
/* Kinetic Identity word-resolve spans, added by initKineticType() in page.js */
.inner-hero h1 .k-word { display: inline-block; }

.inner-hero-sub {
  margin-top: 1.4rem; max-width: 52ch;
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.7; font-weight: 300;
}

/* ================================================================= SHARED INNER PAGE BOOKING FORM */
.inner-form-section { position: relative; overflow: hidden; }
.inner-form-section::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(52% 62% at 80% 76%, var(--color-accent-glow), transparent 70%);
}
.inner-form-inner {
  display: grid; grid-template-columns: 1fr 1.5fr;
  gap: clamp(2.5rem, 5vw, 5rem); align-items: start;
}
.inner-form-text .section-label { color: var(--color-accent); }
.inner-form-text .t-h2 { margin-bottom: 1.2rem; }
.inner-form-text .t-body { color: var(--text-secondary); max-width: 44ch; margin-top: 1rem; }
.inner-form-phone { margin-top: 2.2rem; }
.inner-form-phone .t-label { color: var(--text-muted); display: block; margin-bottom: 0.5rem; }
.inner-form-phone a {
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 600;
  color: var(--text-primary); transition: color var(--duration-fast);
}
.inner-form-phone a:hover { color: var(--color-accent); }
.inner-form-embed {
  background: var(--bg-tertiary); border: 1px solid rgba(242,244,247,0.1);
  border-radius: 14px; padding: 0.5rem;
}
.inner-form-embed iframe { border-radius: 10px; }

/* ================================================================= ABOUT — ORIGIN STORY (light) */
.about-origin.section-light::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 72% at 96% 6%, rgba(50,65,88,0.32), transparent 70%),
    radial-gradient(44% 54% at 2% 96%, rgba(16,30,28,0.16), transparent 68%);
}

.about-story-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2.5rem, 6vw, 6.5rem); align-items: center;
}

.about-story-text .section-head { margin-bottom: clamp(1.8rem, 3vw, 2.8rem); }
.about-story-text .t-body { color: var(--text-body-light); }
.about-story-text .t-body + .t-body { margin-top: 1.3rem; }

.about-story-pull {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 400;
  line-height: 1.22; letter-spacing: -0.01em;
  color: var(--color-accent-dim);
  border-left: 2px solid var(--color-accent-dim);
  padding-left: 1.4rem;
  margin-bottom: 2rem;
}

.about-story-photo {
  position: relative; border-radius: 14px; overflow: hidden;
  aspect-ratio: 3/4;
  box-shadow: 0 32px 72px rgba(7,35,56,0.22);
}
.about-story-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-story-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  mix-blend-mode: soft-light;
  background: linear-gradient(155deg, var(--color-accent-dim) 0%, transparent 52%, var(--color-accent) 100%);
  opacity: 0.36;
}

/* ================================================================= ABOUT — PHILOSOPHY (dark) */
.about-philosophy {
  background: linear-gradient(180deg, #071F31, #061B2B);
  text-align: center;
}
.about-philosophy::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(62% 78% at 50% 105%, var(--color-accent-glow), transparent 70%);
}

.about-philosophy-lede {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.9rem, 4.2vw, 4rem); font-weight: 400;
  line-height: 1.15; letter-spacing: -0.02em;
  color: var(--text-primary);
  max-width: 820px; margin: 0 auto clamp(1.4rem, 2vw, 2rem);
}
.about-philosophy-lede em { color: var(--color-accent); font-style: inherit; }
.about-philosophy-sub {
  text-align: center; max-width: 58ch; margin: 0 auto clamp(3rem, 5vw, 5.5rem);
  color: var(--text-secondary);
}
.about-philosophy .section-head { text-align: center; max-width: none; margin-bottom: clamp(2rem, 3vw, 3rem); }
.about-philosophy .section-head .t-h2 { color: var(--text-primary); }

.about-pillars {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 2.5vw, 2.2rem);
  text-align: left;
}
.about-pillar {
  padding: clamp(1.8rem, 2.6vw, 2.6rem); border-radius: 14px;
  border: 1px solid rgba(242,244,247,0.1);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  transition: border-color var(--duration-base), background var(--duration-base), transform var(--duration-base) var(--ease-smooth);
}
.about-pillar:hover {
  border-color: rgba(167,182,204,0.35);
  background: rgba(167,182,204,0.03);
  transform: translateY(-4px);
}
.about-pillar-icon { margin-bottom: 1.4rem; }
.about-pillar-icon svg {
  width: 40px; height: 40px; fill: none;
  stroke: var(--color-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.about-pillar h3 { margin-bottom: 0.7rem; color: var(--text-primary); }
.about-pillar .t-body { color: var(--text-secondary); font-size: 0.97rem; }

/* ================================================================= ABOUT — TEAM (reuses homepage .team-grid styles) */
/* No new CSS needed — .team-grid, .team-card, .team-photo, .team-name, .team-cred
   are all in styles.css and apply here automatically. */

/* Template default was 6 team members (an even fit for 3-col/2-col grids); this
   client ships 15, which isn't evenly divisible by 2, so the tablet breakpoint
   left a lone orphaned card. Flex+wrap+center so any team size lands clean. */
.about-team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(2rem, 4vw, 3.5rem); }
.about-team-grid .team-card { flex: 1 1 calc(33.333% - clamp(2rem, 4vw, 3.5rem) * 2 / 3); min-width: 260px; }

/* ================================================================= ABOUT — FACILITY PHOTOS (dark) */
.about-facility {
  background: linear-gradient(180deg, #061A2A, #061927);
}
.about-facility::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(52% 60% at 12% 58%, var(--color-accent-2-glow), transparent 68%);
}

.about-photos-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  grid-template-rows: auto auto;
  gap: 16px;
}
/* About: "Off the Clock" family photos, closing the light team section */
.about-family {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.6rem, 4vw, 4rem); align-items: center;
  margin-top: clamp(3.5rem, 7vw, 6rem);
}
.about-family-text .t-h3 { margin: 0.6rem 0 0.9rem; }
.about-family-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.8rem, 1.6vw, 1.4rem); }
.about-family-item { margin: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 14px 36px rgba(0,0,0,0.14); }
.about-family-item img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
@media (max-width: 860px) {
  .about-family { grid-template-columns: 1fr; }
}
.about-photo-item {
  position: relative; border-radius: 12px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
}
.about-photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-photo-item:first-child {
  grid-row: span 2;
}
.about-photo-item:first-child img { height: 100%; aspect-ratio: auto; }
.about-photo-item:not(:first-child) img { aspect-ratio: 4/3; }
.about-photo-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1rem 1.2rem 0.9rem;
  background: linear-gradient(to top, rgba(4,23,38,0.82), transparent);
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: #F2F4F7;   /* was 70% white over photos, 3.9:1 */
}

/* ================================================================= ABOUT — TRUST SIGNALS (light) */
.about-trust.section-light::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(54% 66% at 5% 5%, rgba(90,115,150,0.28), transparent 68%),
    radial-gradient(46% 56% at 95% 92%, rgba(50,65,88,0.24), transparent 68%);
}

.about-trust-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2vw, 1.8rem);
  margin-top: clamp(2.4rem, 4vw, 4rem);
}
.trust-item {
  display: flex; align-items: flex-start; gap: 1.1rem;
  padding: 1.5rem 1.6rem; border-radius: 12px;
  background: rgba(255,255,255,0.52); border: 1px solid rgba(7,35,56,0.11);
  box-shadow: 0 8px 24px rgba(7,35,56,0.06);
  transition: border-color var(--duration-base), background var(--duration-base), transform var(--duration-base) var(--ease-smooth), box-shadow var(--duration-base);
}
.trust-item:hover {
  border-color: rgba(74,148,166,0.45); background: rgba(255,255,255,0.85);
  transform: translateY(-3px); box-shadow: 0 18px 40px rgba(50,80,90,0.14);
}
.trust-icon { flex: none; width: 38px; height: 38px; }
.trust-icon svg {
  width: 100%; height: 100%; fill: none;
  stroke: var(--color-accent-dim); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.trust-label { font-weight: 600; font-size: 0.98rem; color: var(--text-on-light); margin-bottom: 0.35rem; font-family: var(--font-body); }
.trust-body { font-size: 0.88rem; color: var(--text-body-light); line-height: 1.55; }

/* ================================================================= ABOUT — BOOKING FORM (dark) */
.about-booking {
  background: linear-gradient(180deg, #071E30, #061B2B);
  position: relative; overflow: hidden;
}
.about-booking::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 58% at 80% 78%, var(--color-accent-glow), transparent 70%);
}

/* ================================================================= SERVICES LANDING */
.services-overview {
  background: linear-gradient(180deg, #061B2B, #071F31);
  position: relative;
}
.services-overview::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(55% 65% at 92% 8%, var(--color-accent-glow), transparent 66%),
    radial-gradient(42% 54% at 4% 94%, var(--color-accent-2-glow), transparent 66%);
}

.services-grid-wrap { position: relative; z-index: 1; }

/* Featured service (Physical Therapy) — full-width flagship card */
.service-card-featured {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
  padding: clamp(2.2rem, 4vw, 3.6rem) clamp(2rem, 4vw, 3.2rem);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(167,182,204,0.07) 0%, rgba(255,255,255,0.03) 100%);
  border: 1px solid rgba(167,182,204,0.2);
  text-decoration: none; color: inherit;
  margin-bottom: clamp(1.4rem, 2.5vw, 2rem);
  transition: border-color var(--duration-base), background var(--duration-base), transform var(--duration-base) var(--ease-smooth), box-shadow var(--duration-base);
  box-shadow: 0 2px 40px rgba(167,182,204,0.04);
}
.service-card-featured:hover {
  border-color: rgba(167,182,204,0.45);
  background: linear-gradient(135deg, rgba(167,182,204,0.10) 0%, rgba(255,255,255,0.04) 100%);
  transform: translateY(-3px);
  box-shadow: 0 24px 60px rgba(167,182,204,0.1);
}
.service-card-featured-label {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: 0.9rem; display: block;
}
.service-card-featured-icon {
  width: 52px; height: 52px; margin-bottom: 1.4rem;
  background: rgba(167,182,204,0.08); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.service-card-featured-icon svg {
  width: 28px; height: 28px; fill: none;
  stroke: var(--color-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.service-card-featured h2 {
  font-family: var(--font-display); font-size: clamp(1.9rem, 3.5vw, 3rem);
  font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; color: var(--text-primary);
  margin-bottom: 1rem;
}
.service-card-featured-body { color: var(--text-secondary); font-size: clamp(0.97rem, 1.1vw, 1.06rem); line-height: 1.7; max-width: 46ch; }
.service-card-featured-arrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-top: 1.8rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em;
  color: var(--color-accent); transition: gap var(--duration-fast);
}
.service-card-featured:hover .service-card-featured-arrow { gap: 1rem; }
.service-card-featured-meta {
  display: flex; flex-direction: column; gap: 1rem;
}
.service-feature-pill {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.9rem 1.2rem; border-radius: 10px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(242,244,247,0.08);
}
.service-feature-pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent); flex: none;
}
.service-feature-pill-text { font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); }

/* Regular service cards — 3-up, wraps and centers so a non-multiple-of-3
   count (this build ships 9, but the count is content-driven) never left-packs
   a ragged last row the way a fixed repeat(3,1fr) grid would. */
.services-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1rem, 1.8vw, 1.5rem);
}
.service-card {
  flex: 1 1 calc(33.333% - clamp(1rem, 1.8vw, 1.5rem) * 2 / 3);
  min-width: 260px;
  display: block; text-decoration: none; color: inherit;
  padding: clamp(1.6rem, 2.5vw, 2.2rem);
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(242,244,247,0.09);
  transition: border-color var(--duration-base), background var(--duration-base), transform var(--duration-base) var(--ease-smooth), box-shadow var(--duration-base);
}
/* 8 service cards: 4 + 4 on wide desktop, 2-col below that, so no row is left short */
@media (min-width: 1200px) {
  .service-card { flex-basis: calc(25% - clamp(1rem, 1.8vw, 1.5rem) * 3 / 4); min-width: 0; }
}
@media (min-width: 1025px) and (max-width: 1199px) {
  .service-card { flex-basis: calc(50% - clamp(1rem, 1.8vw, 1.5rem) / 2); }
}
.service-card:hover {
  border-color: rgba(167,182,204,0.3);
  background: rgba(167,182,204,0.04);
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.25);
}
.service-card-icon {
  width: 44px; height: 44px; margin-bottom: 1.3rem;
  background: rgba(167,182,204,0.07); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.service-card-icon svg {
  width: 24px; height: 24px; fill: none;
  stroke: var(--color-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.service-card h3 {
  font-family: var(--font-body); font-weight: 600; font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--text-primary); margin-bottom: 0.55rem; line-height: 1.25;
}
.service-card-desc { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; }
.service-card-link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-top: 1.2rem; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-accent); transition: gap var(--duration-fast);
}
.service-card:hover .service-card-link { gap: 0.75rem; }

/* ================================================================= SERVICE CHILD PAGES */

/* Section 1 — What Is [Service]: dark split with image */
.service-intro {
  background: linear-gradient(180deg, #071F31, #061B2C);
  position: relative; overflow: hidden;
}
.service-intro::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(55% 68% at 96% 10%, var(--color-accent-glow), transparent 66%);
}
.service-intro > .section-shell { position: relative; z-index: 1; }
.service-intro-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 7rem); align-items: center;
}
.service-intro-text .section-label { color: var(--color-accent); }
.service-intro-text .t-h2 { margin-bottom: 1.2rem; }
.service-intro-text .t-body { color: var(--text-secondary); }
.service-intro-text .t-body + .t-body { margin-top: 1rem; }
.service-key-facts { margin-top: clamp(1.8rem, 3vw, 2.6rem); display: flex; flex-direction: column; gap: 0.8rem; }
.service-key-fact {
  display: flex; align-items: flex-start; gap: 0.9rem;
  font-size: 0.93rem; color: var(--text-secondary); line-height: 1.55;
}
.service-key-fact-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent); flex: none; margin-top: 0.45em;
}
.service-intro-image {
  position: relative; border-radius: 16px; overflow: hidden;
  aspect-ratio: 4/3; box-shadow: 0 32px 72px rgba(0,0,0,0.45);
}
.service-intro-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-intro-image::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(167,182,204,0.08) 0%, transparent 60%);
}

/* Section 2 — Who It Helps: light with 3-col condition list */
.service-who { position: relative; overflow: hidden; }
.service-who.section-light::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(52% 64% at 97% 6%, rgba(50,65,88,0.28), transparent 66%),
    radial-gradient(42% 52% at 3% 96%, rgba(90,115,150,0.18), transparent 66%);
}
.service-who > .section-shell { position: relative; z-index: 1; }
.service-who .section-head .t-h2 { color: #071D2E; }
.service-who .section-head .t-body { color: var(--text-body-light); }
.service-who .section-head .section-label { color: var(--color-accent-dim); }
/* Item count is content-driven (6 on the shortest bio page, 17 on insurance-plans)
   and rarely divides evenly by 3 — flex+wrap+center so the last row never
   left-packs with empty phantom tracks. */
.service-who-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(0.6rem, 1.2vw, 1rem);
  margin-top: clamp(2rem, 3.5vw, 3.2rem);
}
.who-item {
  flex: 1 1 calc(33.333% - clamp(0.6rem, 1.2vw, 1rem) * 2 / 3);
  min-width: 220px;
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.9rem 1.1rem; border-radius: 10px;
  background: rgba(255,255,255,0.6); border: 1px solid rgba(7,35,56,0.09);
  transition: border-color var(--duration-base), background var(--duration-base);
}
.who-item:hover { border-color: rgba(167,182,204,0.35); background: rgba(255,255,255,0.88); }
.who-item-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent-dim); flex: none; margin-top: 0.45em;
}
.who-item-text { font-size: 0.9rem; color: var(--text-on-light); font-weight: 500; line-height: 1.4; }

/* Section 3 — What to Expect: dark numbered steps */
.service-process {
  background: linear-gradient(180deg, #061B2A, #071E30);
  position: relative; overflow: hidden;
}
.service-process::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(48% 60% at 8% 92%, var(--color-accent-glow), transparent 66%);
}
.service-process > .section-shell { position: relative; z-index: 1; }
.process-steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.4rem, 4vw, 4rem);
}
.process-step { position: relative; padding-top: 1rem; }
.process-step::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 1px; background: rgba(242,244,247,0.1);
}
.process-num {
  font-family: var(--font-display); font-size: clamp(2.8rem, 5vw, 4.5rem);
  font-weight: 700; line-height: 1; letter-spacing: -0.04em;
  color: var(--color-accent); opacity: 0.65;   /* 3.35:1 on the lightest navy panel (large-text AA) */
  margin-bottom: 1rem; display: block;
}
.process-step h3 {
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--text-primary);
  margin-bottom: 0.6rem; line-height: 1.25;
}
.process-step .t-body { color: var(--text-secondary); font-size: 0.92rem; }
.process-step-cta { margin-top: 1.2rem; }
.inner-hero-cta { margin-top: 1.8rem; }
/* Process steps rendered inside a light section (condition pages) need dark-on-light colors */
.section-light .process-step::before { background: rgba(7,35,56,0.12); }
.section-light .process-num { color: var(--color-accent-deep); opacity: 0.7; }
.section-light .process-step h3 { color: var(--text-on-light); }
.section-light .process-step .t-body { color: var(--text-body-light); }

/* Section 4 — Outcomes: light with benefit grid */
.service-outcomes { position: relative; overflow: hidden; }
.service-outcomes.section-light::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(56% 68% at 94% 94%, rgba(50,65,88,0.24), transparent 68%);
}
.service-outcomes > .section-shell { position: relative; z-index: 1; }
.service-outcomes .section-head .t-h2 { color: #071D2E; }
.service-outcomes .section-head .t-body { color: var(--text-body-light); }
.service-outcomes .section-head .section-label { color: var(--color-accent-dim); }
.outcomes-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(2rem, 3.5vw, 3.2rem);
}
.outcome-item {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.3rem 1.5rem; border-radius: 12px;
  background: rgba(255,255,255,0.6); border: 1px solid rgba(7,35,56,0.09);
}
.outcome-icon {
  width: 36px; height: 36px; flex: none; border-radius: 8px;
  background: rgba(167,182,204,0.1); display: flex; align-items: center; justify-content: center;
}
.outcome-icon svg {
  width: 18px; height: 18px; fill: none;
  stroke: var(--color-accent-dim); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.outcome-item h3 {
  font-family: var(--font-body); font-weight: 600; font-size: 0.97rem;
  color: var(--text-on-light); margin-bottom: 0.3rem;
}
.outcome-item p { font-size: 0.86rem; color: var(--text-body-light); line-height: 1.55; }
/* Testimonials page: source tag under each reviewer name */
.outcome-item .review-source {
  display: block; margin-bottom: 0.45rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-body-light);
}

/* Section 5 — Testimonial: dark editorial */
.service-testimonial {
  background: linear-gradient(180deg, #082236, #071E2F);
  position: relative; overflow: hidden;
}
.service-testimonial::before {
  content: "\201C"; position: absolute; left: -1%; top: -8%; z-index: 0;
  font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: clamp(14rem, 28vw, 34rem); color: rgba(167,182,204,0.04);
  pointer-events: none;
}
.service-testimonial > .section-shell { position: relative; z-index: 1; }
.service-testimonial .section-label { color: var(--color-accent); }
.service-quote-wrap { max-width: 900px; }
.service-quote {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.4rem, 2.8vw, 2.4rem); font-weight: 400;
  line-height: 1.28; letter-spacing: -0.01em;
  color: var(--text-primary); margin-top: 1.4rem;
}
.service-quote-cite {
  display: block; margin-top: 1.6rem;
  font-style: normal; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-secondary);
}
.service-quote-cite span { color: var(--text-muted); }

/* Section 6 — Related Services: dark with 3 link cards */
.service-related {
  background: linear-gradient(180deg, #061B2C, #061B2A);
  position: relative; overflow: hidden;
}
.service-related::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 62% at 50% 110%, var(--color-accent-glow), transparent 68%);
}
.service-related > .section-shell { position: relative; z-index: 1; }

/* Light variant — breaks the consecutive-dark run after testimonial */
.service-related.section-light {
  background: linear-gradient(180deg, #F0F3F6, #E0E5EC);
}
.service-related.section-light::before {
  background:
    radial-gradient(52% 64% at 5% 5%, rgba(90,115,150,0.2), transparent 66%),
    radial-gradient(44% 54% at 96% 96%, rgba(50,65,88,0.16), transparent 66%);
}
.service-related.section-light .section-head .t-h2 { color: #071D2E; }
.service-related.section-light .section-head .section-label { color: var(--color-accent-dim); }
.service-related.section-light .related-card {
  background: rgba(255,255,255,0.62);
  border-color: rgba(7,35,56,0.1);
}
.service-related.section-light .related-card:hover {
  border-color: rgba(167,182,204,0.4);
  background: rgba(255,255,255,0.9);
}
.service-related.section-light .related-card h3 { color: var(--text-on-light); }
.service-related.section-light .related-card p { color: var(--text-body-light); }
.service-related.section-light .related-card-icon { background: rgba(167,182,204,0.1); }
.service-related.section-light .related-card-icon svg { stroke: var(--color-accent-dim); }
.service-related.section-light .related-card-arrow { color: var(--color-accent-dim); }
.related-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.8rem);
  margin-top: clamp(2.2rem, 3.5vw, 3.5rem);
}
.related-card {
  display: block; text-decoration: none; color: inherit;
  padding: clamp(1.4rem, 2.2vw, 2rem);
  border-radius: 14px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(242,244,247,0.09);
  transition: border-color var(--duration-base), background var(--duration-base),
              transform var(--duration-base) var(--ease-smooth);
}
.related-card:hover {
  border-color: rgba(167,182,204,0.28);
  background: rgba(167,182,204,0.03);
  transform: translateY(-3px);
}
.related-card-icon {
  width: 40px; height: 40px; margin-bottom: 1.1rem;
  background: rgba(167,182,204,0.07); border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
}
.related-card-icon svg {
  width: 22px; height: 22px; fill: none;
  stroke: var(--color-accent); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.related-card h3 {
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(0.97rem, 1.2vw, 1.06rem);
  color: var(--text-primary); margin-bottom: 0.4rem;
}
.related-card p { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.55; }
.related-card-arrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 1rem; font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-accent); transition: gap var(--duration-fast);
}
.related-card:hover .related-card-arrow { gap: 0.7rem; }

/* Responsive for service child page sections */
@media (max-width: 1024px) {
  .service-intro-grid { grid-template-columns: 1fr; }
  .service-intro-image { aspect-ratio: 16/9; max-height: 380px; }
  .process-steps { grid-template-columns: 1fr; gap: 1.8rem; }
  .outcomes-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .who-item { flex-basis: calc(50% - clamp(0.6rem, 1.2vw, 1rem) / 2); }
  .related-grid { grid-template-columns: 1fr; }
}

/* ================================================================= WHAT WE TREAT LANDING */
.conditions-section {
  background: linear-gradient(180deg, #F0F3F6, #E0E5EC);
  position: relative;
  overflow: hidden;
  color: var(--text-on-light);
}
.conditions-section::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(56% 64% at 3% 8%, rgba(90,115,150,0.22), transparent 66%),
    radial-gradient(44% 52% at 97% 96%, rgba(50,65,88,0.18), transparent 66%);
}
.conditions-section > .section-shell { position: relative; z-index: 1; }
/* Force readable text on the cream background */
.conditions-section .t-h2 { color: #071D2E; }
.conditions-section .t-h3 { color: var(--text-on-light); }
.conditions-section .t-body { color: var(--text-body-light); }
.conditions-section .section-label { color: var(--color-accent-dim); }

.condition-group { margin-bottom: clamp(3rem, 5vw, 5.5rem); }
.condition-group:last-child { margin-bottom: 0; }

.condition-group-header {
  display: flex; align-items: center; gap: 1.2rem;
  margin-bottom: clamp(1.4rem, 2.5vw, 2rem);
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(7,35,56,0.12);
}
.condition-group-icon {
  width: 40px; height: 40px; flex: none;
  background: rgba(167,182,204,0.12); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.condition-group-icon svg {
  width: 22px; height: 22px; fill: none;
  stroke: var(--color-accent-dim); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.condition-group-label {
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent-dim);
}
.condition-group-count {
  margin-left: auto; font-size: 0.75rem; font-weight: 500;
  color: var(--text-body-light); letter-spacing: 0.04em;   /* was 40% navy, 2.3:1 */
}

/* Per-category groups hold uneven counts (4, 3, 5, 2...) — flex+wrap+center
   so a group that doesn't divide evenly by 3 centers its last row instead of
   a fixed-column grid left-packing it with empty phantom tracks. */
.condition-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1rem, 1.8vw, 1.5rem);
}
/* Four-card groups sit 2 x 2 instead of 3 + 1 stretched */
@media (min-width: 1025px) {
  .condition-grid--four .condition-card { flex-basis: calc(50% - clamp(1rem, 1.8vw, 1.5rem) / 2); }
}
.condition-card {
  flex: 1 1 calc(33.333% - clamp(1rem, 1.8vw, 1.5rem) * 2 / 3);
  min-width: 240px;
  display: block; text-decoration: none; color: inherit;
  padding: clamp(1.4rem, 2vw, 1.9rem);
  border-radius: 14px;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(7,35,56,0.1);
  box-shadow: 0 6px 20px rgba(7,35,56,0.06);
  transition: border-color var(--duration-base), background var(--duration-base),
              transform var(--duration-base) var(--ease-smooth), box-shadow var(--duration-base);
}
.condition-card:hover {
  border-color: rgba(167,182,204,0.4);
  background: rgba(255,255,255,0.92);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(50,80,90,0.12);
}
.condition-card-icon {
  width: 38px; height: 38px; margin-bottom: 1.1rem;
}
.condition-card-icon svg {
  width: 100%; height: 100%; fill: none;
  stroke: var(--color-accent-dim); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.condition-card h3 {
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(0.97rem, 1.2vw, 1.08rem);
  color: var(--text-on-light); margin-bottom: 0.5rem; line-height: 1.25;
}
.condition-card-desc {
  font-size: 0.87rem; color: var(--text-body-light); line-height: 1.6;
}
.condition-card-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 1.1rem; font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-accent-dim);
  transition: gap var(--duration-fast), color var(--duration-fast);
}
.condition-card:hover .condition-card-link { gap: 0.7rem; color: var(--color-accent-dim); }

/* ================================================================= SERVICES BOOKING */
.services-booking {
  background: linear-gradient(180deg, #071E30, #061B2B);
  position: relative;
}
.services-booking::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 58% at 80% 78%, var(--color-accent-glow), transparent 70%);
}

/* ================================================================= CONDITION CHILD PAGES */

/* Section 1: Understanding [Condition] — dark, empathetic split */
.condition-understanding {
  background: linear-gradient(180deg, #071F31, #061B2C);
  position: relative; overflow: hidden;
}
.condition-understanding::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(55% 68% at 6% 94%, var(--color-accent-glow), transparent 66%);
}
.condition-understanding > .section-shell { position: relative; z-index: 1; }
.condition-understanding-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 7rem); align-items: center;
}
.condition-understanding-text .section-label { color: var(--color-accent); }
.condition-understanding-text .t-h2 { margin-bottom: 1.2rem; }
.condition-understanding-text .t-body { color: var(--text-secondary); }
.condition-understanding-text .t-body + .t-body { margin-top: 1rem; }
.condition-stat-row {
  display: flex; gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(1.8rem, 3vw, 2.6rem); flex-wrap: wrap;
}
.condition-stat { display: flex; flex-direction: column; }
.condition-stat-num {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1; letter-spacing: -0.03em;
  color: var(--color-accent);
}
.condition-stat-label {
  font-size: 0.8rem; font-weight: 500; color: var(--text-secondary);
  margin-top: 0.3rem; max-width: 14ch; line-height: 1.4;
}
.condition-understanding-image {
  position: relative; border-radius: 16px; overflow: hidden;
  aspect-ratio: 4/3; box-shadow: 0 32px 72px rgba(0,0,0,0.45);
}
.condition-understanding-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.condition-understanding-image::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(167,182,204,0.06) 0%, transparent 55%);
}

/* Section 2: Symptoms — light */
.condition-symptoms { position: relative; overflow: hidden; }
.condition-symptoms.section-light::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(52% 64% at 5% 7%, rgba(90,115,150,0.22), transparent 66%),
    radial-gradient(44% 54% at 96% 94%, rgba(50,65,88,0.18), transparent 66%);
}
.condition-symptoms > .section-shell { position: relative; z-index: 1; }
.condition-symptoms .section-head .t-h2 { color: #071D2E; }
.condition-symptoms .section-head .t-body { color: var(--text-body-light); }
.condition-symptoms .section-head .section-label { color: var(--color-accent-dim); }
.symptoms-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.8vw, 1.5rem);
  margin-top: clamp(2rem, 3.5vw, 3.2rem);
}
.symptom-item {
  padding: clamp(1.2rem, 1.8vw, 1.6rem);
  border-radius: 12px;
  background: rgba(255,255,255,0.62); border: 1px solid rgba(7,35,56,0.09);
  transition: border-color var(--duration-base), background var(--duration-base);
}
.symptom-item:hover { border-color: rgba(167,182,204,0.35); background: rgba(255,255,255,0.9); }
.symptom-item-icon {
  width: 36px; height: 36px; margin-bottom: 0.9rem;
  background: rgba(167,182,204,0.1); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.symptom-item-icon svg {
  width: 20px; height: 20px; fill: none;
  stroke: var(--color-accent-dim); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.symptom-item h3 {
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  color: var(--text-on-light); margin-bottom: 0.3rem; line-height: 1.25;
}
.symptom-item p { font-size: 0.84rem; color: var(--text-body-light); line-height: 1.55; }

/* Section 3: How We Treat It — dark */
.condition-treatment {
  background: linear-gradient(180deg, #061B2B, #071E2F);
  position: relative; overflow: hidden;
}
.condition-treatment::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 62% at 96% 8%, var(--color-accent-glow), transparent 66%);
}
.condition-treatment > .section-shell { position: relative; z-index: 1; }
.treatment-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 7rem); align-items: start;
}
.treatment-text .section-label { color: var(--color-accent); }
.treatment-text .t-h2 { margin-bottom: 1.2rem; }
.treatment-text .t-body { color: var(--text-secondary); margin-top: 1rem; }
.treatment-tools-list {
  display: flex; flex-direction: column; gap: 0.8rem;
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
}
.treatment-tool {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.95rem 1.2rem; border-radius: 10px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(242,244,247,0.08);
  text-decoration: none; color: inherit;
  transition: border-color var(--duration-base), background var(--duration-base);
}
.treatment-tool:hover { border-color: rgba(167,182,204,0.28); background: rgba(167,182,204,0.04); }
.treatment-tool-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-accent); flex: none; opacity: 0.65;
}
.treatment-tool-name { font-weight: 500; font-size: 0.93rem; color: var(--text-primary); flex: 1; }
.treatment-tool-arrow {
  font-size: 0.78rem; color: var(--color-accent); opacity: 0;
  transition: opacity var(--duration-fast);
}
.treatment-tool:hover .treatment-tool-arrow { opacity: 1; }
.treatment-note {
  margin-top: 1.4rem; padding: 1.1rem 1.3rem; border-radius: 10px;
  background: rgba(167,182,204,0.05); border: 1px solid rgba(167,182,204,0.14);
  font-size: 0.87rem; color: var(--text-secondary); line-height: 1.6;
}
.treatment-note strong { color: var(--text-primary); font-weight: 500; }

/* Responsive for condition child pages */
@media (max-width: 1024px) {
  .condition-understanding-grid { grid-template-columns: 1fr; }
  .condition-understanding-image { aspect-ratio: 16/9; max-height: 380px; }
  .treatment-split { grid-template-columns: 1fr; }
  .symptoms-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .symptoms-grid { grid-template-columns: 1fr; }
}

/* ================================================================= CONTACT PAGE */
.contact-section {
  background: linear-gradient(180deg, #071D2E, #061B2A);
  position: relative;
  overflow: hidden;
  padding: var(--section-pad-v) 0;
}
.contact-section::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(52% 64% at 6% 8%, var(--color-accent-glow), transparent 66%),
    radial-gradient(40% 52% at 96% 96%, var(--color-accent-2-glow), transparent 66%);
}
.contact-section > .section-shell { position: relative; z-index: 1; }

.contact-split {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: start;
}

/* Left: GHL form embed */
.contact-form-col .inner-form-embed { margin-top: 0; }
.contact-form-head { margin-bottom: clamp(1.8rem, 3vw, 2.8rem); }
.contact-form-head .section-label { color: var(--color-accent); }
.contact-form-head .t-h2 { margin-top: 0.6rem; margin-bottom: 0; }
.contact-friction-note {
  margin-top: 1rem;
  font-size: 0.88rem; color: var(--text-secondary); line-height: 1.6;
}
.contact-friction-note strong { color: var(--text-primary); font-weight: 500; }

/* Right: Clinic info */
.contact-info-col { padding-top: 0.4rem; }

.contact-info-block {
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}
.contact-info-label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-muted); display: block; margin-bottom: 0.9rem;
  padding-bottom: 0.7rem; border-bottom: 1px solid rgba(242,244,247,0.08);
}
.contact-info-item {
  display: flex; align-items: flex-start; gap: 1rem;
  margin-bottom: 1.1rem;
}
.contact-info-item:last-child { margin-bottom: 0; }
.contact-info-icon {
  width: 36px; height: 36px; flex: none;
  background: rgba(167,182,204,0.07); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; margin-top: 0.1rem;
}
.contact-info-icon svg {
  width: 18px; height: 18px; fill: none;
  stroke: var(--color-accent); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.contact-info-item-text { flex: 1; }
.contact-info-item-title {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 0.25rem; display: block;
}
.contact-info-item a,
.contact-info-item address {
  font-style: normal;
  color: var(--text-primary); font-size: 0.97rem; line-height: 1.55;
  transition: color var(--duration-fast);
}
.contact-info-item a:hover { color: var(--color-accent); }

/* Hours grid */
.contact-hours-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1.5rem;
}
.contact-hours-row {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: 0.88rem; padding: 0.45rem 0;
  border-bottom: 1px solid rgba(242,244,247,0.06);
}
.contact-hours-row:last-child { border-bottom: none; }
.contact-hours-day { color: var(--text-secondary); font-weight: 400; }
.contact-hours-time { color: var(--text-primary); font-weight: 500; text-align: right; }
.contact-hours-time.is-closed { color: var(--text-muted); }

/* Map embed */
.contact-map {
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(242,244,247,0.1);
  height: 240px; margin-top: clamp(1.8rem, 3vw, 2.6rem);
  background: rgba(255,255,255,0.04);
}
.contact-map iframe {
  width: 100%; height: 100%;
  border: none; display: block;
  filter: saturate(0.3) brightness(0.75);
}

/* ================================================================= RESPONSIVE */
@media (max-width: 1024px) {
  .inner-hero { min-height: 46vh; }
  .about-story-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-story-photo { aspect-ratio: 3/2; max-height: 440px; order: -1; }
  .about-pillars { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .about-team-grid .team-card { flex-basis: calc(50% - clamp(2rem, 4vw, 3.5rem) / 2); }
  .about-photos-grid { grid-template-columns: 1fr 1fr; }
  .about-photo-item:first-child { grid-row: span 1; }
  .about-photo-item:first-child img { aspect-ratio: 4/3; height: auto; }
  .inner-form-inner { grid-template-columns: 1fr; }
  .about-trust-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card-featured { grid-template-columns: 1fr; }
  .service-card { flex-basis: calc(50% - clamp(1rem, 1.8vw, 1.5rem) / 2); }
  .condition-card { flex-basis: calc(50% - clamp(1rem, 1.8vw, 1.5rem) / 2); }
  .contact-split { grid-template-columns: 1fr; }
  .contact-info-col { padding-top: 0; }
}

@media (max-width: 767px) {
  /* About pillars: 2-col tablet step before collapsing at 640px */
  .about-pillars { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .inner-hero { min-height: 56vh; align-items: center; padding-top: calc(var(--header-h) + 2rem); }
  .inner-hero h1 { font-size: clamp(2.1rem, 9vw, 3.2rem); }
  .about-team-grid .team-card { flex-basis: 100%; }
  .about-photos-grid { grid-template-columns: 1fr; }
  .about-trust-grid { grid-template-columns: 1fr; }
  .about-pillars { grid-template-columns: 1fr; }
  .about-philosophy-lede { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .service-card { flex-basis: 100%; }
  .condition-card { flex-basis: 100%; }
  /* Contact hours: single column on small phones */
  .contact-hours-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  /* Service who-grid: single column on small phones */
  .who-item { flex-basis: 100%; }
}

/* ===================================================================
   ACCENT-ON-LIGHT CONTRAST FIX, inner pages
   The matching block at the end of styles.css does not reach these,
   because inner-pages.css loads AFTER styles.css and the rules here
   have equal specificity, so they win on order. This is the template's
   own documented bug #7 pattern, hit from the other direction: the fix
   has to live in the later file.
   --color-accent-dim #4A94A6 measures 2.83:1 on the #ECE8E0 ground;
   --color-accent-deep #32505A measures 7.07:1.
   Measured by tools/qa.mjs.
   =================================================================== */
.service-who .section-head .section-label,
.service-outcomes .section-head .section-label,
.condition-symptoms .section-head .section-label,
.service-related.section-light .section-head .section-label,
.service-related.section-light .related-card-arrow,
.conditions-section .section-label,
.section-light .process-num,
.condition-card-link,
.condition-card:hover .condition-card-link,
.condition-group-label {
  color: var(--color-accent-deep);
}
.section-light .process-num { opacity: 0.7; }   /* 3.69:1 worst light ground */

/* Inline prose link affordance, inner pages. inner-pages.css loads after
   styles.css, so the light-ground variants have to be repeated here to win
   the cascade, same reason as the accent contrast block above. */
main .t-body a:not([class]),
main .inner-hero-sub a:not([class]),
main li a:not([class]) {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.section-light .t-body a:not([class]),
.section-light li a:not([class]),
.service-who .t-body a:not([class]),
.service-outcomes .t-body a:not([class]),
.condition-symptoms .t-body a:not([class]) { color: var(--color-accent-deep); }

/* PREVENTIVE GUARD for the template's known light-section bug.
   .service-key-fact and .service-key-fact-dot are coloured for the dark
   service-intro section and have no light-context override, so moving that
   component into any section-light wrapper would render near-white on
   near-white. No current page does, but the guard costs nothing. */
.section-light .service-key-fact { color: var(--text-body-light); }
.section-light .service-key-fact-dot { background: var(--color-accent-deep); }

/* ===================================================================
   INNER HERO LEGIBILITY OVER PHOTOGRAPHY
   Measured against the actual painted pixels behind the text, not against
   a nominal background colour. On the inner hero the content block is
   bottom-aligned, so the breadcrumb and eyebrow sit in the LIGHTEST band
   of the overlay gradient, over a real photo:
     .page-breadcrumb a   --text-muted #6B6560   measured 1.29:1  (invisible)
     .inner-hero .section-label  accent #63B4C6  measured 3.66:1  (under AA)
     .inner-hero h1 / .inner-hero-sub            9.24:1 / 4.83:1  (pass, untouched)
   The breadcrumb is a navigation control on all 48 inner pages, so 1.29:1
   is a functional defect, not a polish item. Colour only: no change to the
   overlay, the layout, or the type scale.
   =================================================================== */
.inner-hero .page-breadcrumb a,
.inner-hero .page-breadcrumb [aria-current="page"] { color: rgba(242,244,247,0.80); }
.inner-hero .page-breadcrumb .sep { color: rgba(242,244,247,0.42); }
.inner-hero .page-breadcrumb a:hover { color: #C3CEDD; }
/* lighter tint of the brand accent, for use only over photography */
.inner-hero .section-label { color: #C3CEDD; }

/* Overlay darkened from 0.72/0.60/0.92 to 0.86/0.78/0.94.
   Fixing the four hero text colours individually got them to roughly 4.0:1
   to 5.5:1, which straddles the AA line because the ground changes with
   whichever of the six real clinic photos a page uses. Darkening the
   overlay once puts every element comfortably clear on every photo instead
   of tuning colours per image. It also suits this client's photography,
   which is all brightly lit empty rooms: more subdued reads as art
   direction rather than as a snapshot. Same three-stop gradient, same
   geometry, alpha values only. */
.inner-hero-bg::after {
  background: linear-gradient(180deg,
    rgba(4,23,38,0.86) 0%,
    rgba(4,23,38,0.78) 45%,
    rgba(4,23,38,0.94) 100%);
}