/* ============================================================
   GREATFAITH MANAGED CARE: GLOBAL STYLESHEET
   Mobile Primary Care Practice | California
   ============================================================ */

/* ---- SELF-HOSTED FONTS ----
   Previously loaded with @import from fonts.googleapis.com, which put a
   render-blocking chain in front of first paint: HTML -> styles.css ->
   Google CSS -> font files, across two extra origins. These are the same
   latin woff2 files Google serves, now local, so there is one origin and no
   import chain. All four families are SIL Open Font License 1.1, which
   permits bundling with the project.

   Only the weights the stylesheet actually uses are declared. Two of these
   were previously missing and were being synthesized by the browser:
   Cormorant Garamond italic 700 (the hero <em>) and Playfair Display 500
   (the mobile submenu), so both now render with real glyphs. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/cormorant-garamond-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/cormorant-garamond-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic; font-weight: 700; font-display: swap;
  src: url('/fonts/cormorant-garamond-latin-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/playfair-display-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/playfair-display-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/playfair-display-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/playfair-display-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/montserrat-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/montserrat-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/montserrat-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/montserrat-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
}

/* ---- CSS VARIABLES ---- */
:root {
  /* Backgrounds */
  --bg-page:        #F7F9FC;   /* cool near-white page base */
  --bg-white:       #FFFFFF;
  --bg-cream:       #EAF0F7;   /* repurposed: pale blue-gray (was warm cream) */
  --bg-cream-deep:  #DEE7F1;   /* repurposed: soft blue-gray */
  --bg-dark:        #1F375B;   /* Greatfaith navy: dark sections & dark text */
  --bg-black:       #14273F;   /* Greatfaith deep navy */

  /* Greatfaith Brand (navy) */
  --navy:           #1F375B;
  --navy-deep:      #14273F;
  --navy-soft:      #2E4E7E;
  --ink-strong:     #0D1B30;   /* near-black navy for text on gold/white buttons */

  /* Gold Palette */
  --gold:           #C9941A;
  --gold-light:     #F1BD40;
  --gold-bright:    #F5D87A;
  --gold-dark:      #7A5218;
  --gold-muted:     #E2C06B;
  --gold-subtle-bg: #EAF1F8;   /* repurposed: pale blue chip bg (was warm gold) */

  /* Gradient */
  --grad-gold:      linear-gradient(135deg, #F5D87A 0%, #F1BD40 42%, #C9941A 100%);
  --grad-gold-soft: linear-gradient(135deg, #F7FAFD 0%, #E9F0F8 100%);   /* now a cool soft wash (name kept for compatibility) */
  --grad-hero:      linear-gradient(180deg, rgba(14,28,50,0.85) 0%, rgba(20,38,66,0.62) 52%, rgba(14,28,50,0.88) 100%);   /* navy hero overlay (photo visible, text-safe, navy-dominant) */

  /* Text */
  --text-ink:       #1A1A1A;
  --text-warm:      #5C4F3D;
  --text-muted:     #9A8F7E;
  --text-light:     rgba(255,255,255,0.65);

  /* Semantic tokens (Greatfaith) */
  --primary:        var(--navy);
  --secondary:      var(--navy-soft);
  --accent:         var(--gold);
  --bg-light:       var(--bg-page);
  --text-primary:   var(--text-ink);
  --text-secondary: var(--text-warm);
  --border:         rgba(31,55,91,0.14);
  --focus:          var(--navy);
  --btn-hover:      #16294A;
  --hero-overlay:   rgba(20,39,63,0.55);
  --card-bg:        var(--bg-white);

  /* Section background system (clean, bright, medical) */
  --section-white:     #FFFFFF;
  --section-soft:      #F7F9FC;   /* soft off-white */
  --section-gray:      #EDF1F6;   /* very light gray */
  --section-blue-soft: #E9F0F8;   /* pale blue */
  --section-navy:      var(--navy);
  --border-cool:       rgba(31,55,91,0.10);   /* blue-gray hairline for cards/sections */

  /* Typography */
  --font-display:   'Cormorant Garamond', Georgia, serif;
  --font-heading:   'Playfair Display', Georgia, serif;
  --font-ui:        'Montserrat', -apple-system, sans-serif;
  --font-body:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Sizing */
  --max-w:          1200px;
  --max-w-wide:     1360px;

  /* Radius */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  28px;

  /* Shadow */
  --sh-sm:   0 2px 12px rgba(0,0,0,0.06);
  --sh-md:   0 8px 32px rgba(0,0,0,0.09);
  --sh-lg:   0 20px 60px rgba(0,0,0,0.12);
  --sh-gold: 0 8px 28px rgba(201,148,26,0.22);

  /* Motion */
  --ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --t:      all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  /* Section spacing */
  --section-y: 88px;
  /* Compact sections (notices, single-callout bands) that should read as a
     lighter beat than a full content section but still scale responsively. */
  --section-y-sm: 52px;

  /* Gap between a section header and the grid/content it introduces.
     These are adjacent siblings, so the header's margin-bottom and the
     grid's margin-top collapse to a single gap of this value. */
  --header-gap: 44px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; overflow-x: clip; max-width: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg-page);
  color: var(--text-ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  max-width: 100%;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, select, textarea { font-family: inherit; }

/* ---- ICONS ----
   Replaces the Font Awesome webfont. Sized in em and filled with currentColor
   so every existing rule that set font-size and color on the old <i> element
   keeps working unchanged. */
.ic {
  width: 1em;
  height: 1em;
  fill: currentColor;
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/* Visible keyboard focus indicator (Greatfaith navy) */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, .h1 {
  font-family: var(--font-display);
  font-size: clamp(46px, 6.5vw, 78px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--text-ink);
}
h2, .h2 {
  font-family: var(--font-heading);
  font-size: clamp(30px, 4vw, 50px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--navy);
}
h3, .h3 {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy);
}
p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.78;
  color: var(--text-warm);
}
.lead {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-warm);
}
.label-tag {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 28px;
}
.container--wide {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 0 28px;
}
.section { padding: var(--section-y) 0; }
/* Section rhythm helpers, so per-page spacing stays responsive instead of
   being pinned to a fixed pixel value in an inline style. */
.section--compact     { padding: var(--section-y-sm) 0; }
.section--compact-top { padding: var(--section-y-sm) 0 0; }
.section--lead-in     { padding: var(--section-y-sm) 0 var(--section-y); }
.section--cream     { background: var(--section-blue-soft); }
.section--white     { background: var(--section-white); }
.section--soft      { background: var(--section-soft); }
.section--gray      { background: var(--section-gray); }
.section--blue      { background: var(--section-blue-soft); }
.section--dark      { background: var(--section-navy); }
.section--gold-soft { background: var(--section-gray); }
.text-center { text-align: center; }

.section-header { margin-bottom: var(--header-gap); }
.section-header .label-tag { margin-bottom: 14px; }
.section-header h2 { margin-bottom: 18px; }
.section-header p { max-width: 580px; }
.section-header.centered { text-align: center; }
.section-header.centered p { margin: 0 auto; }

.gold-line {
  display: block;
  width: 48px;
  height: 3px;
  background: var(--grad-gold);
  border-radius: 2px;
  margin: 20px 0;
}
.section-header.centered .gold-line { margin: 20px auto; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 36px;
  border-radius: var(--r-sm);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: var(--t);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  transition: left 0.55s ease;
}
.btn:hover::before { left: 100%; }

.btn-gold {
  background: var(--grad-gold);
  color: var(--ink-strong);
  box-shadow: var(--sh-gold);
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(201,148,26,0.32);
}

.btn-outline {
  background: transparent;
  color: var(--text-ink);
  border: 1.5px solid rgba(26,26,26,0.25);
}
.btn-outline:hover {
  background: var(--text-ink);
  color: var(--bg-white);
  border-color: var(--text-ink);
  transform: translateY(-2px);
}

.btn-outline-gold {
  background: transparent;
  color: var(--gold);
  border: 1.5px solid rgba(201,148,26,0.4);
}
.btn-outline-gold:hover {
  background: var(--grad-gold);
  color: var(--ink-strong);
  border-color: transparent;
  transform: translateY(-2px);
}

.btn-white {
  background: var(--bg-white);
  color: var(--ink-strong);
}
.btn-white:hover {
  background: var(--bg-cream);
  transform: translateY(-2px);
}

.btn-outline-white {
  background: transparent;
  color: var(--bg-white);
  border: 1.5px solid rgba(255,255,255,0.3);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.6);
  transform: translateY(-2px);
}

.btn-lg { padding: 18px 48px; font-size: 14px; }
.btn-sm { padding: 10px 24px; font-size: 12px; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 22px 0;
  transition: var(--t);
}
/* Suppress transition on initial solid-state paint (dark-hero pages) */
.navbar.no-transition {
  transition: none !important;
}
.navbar.scrolled {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 14px 0;
  box-shadow: 0 2px 24px rgba(0,0,0,0.07);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* flex-shrink:0 keeps the horizontal logo from being squeezed narrower than
   its natural ratio when the nav runs out of room. */
.nav-logo { flex-shrink: 0; display: flex; align-items: center; }
.nav-logo img {
  height: 42px;
  width: auto;
  max-width: none;
  transition: var(--t);
}
.navbar.scrolled .nav-logo img { height: 36px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav-links a {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-ink);
  position: relative;
  transition: var(--t);
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 1.5px;
  background: var(--grad-gold);
  transition: width 0.3s var(--ease);
  border-radius: 2px;
}
.nav-links a:hover,
.nav-links a.active { color: var(--gold); }
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

.nav-right {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}
.nav-phone {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-ink);
  letter-spacing: 0.03em;
  transition: var(--t);
}
.nav-phone i, .nav-phone .ic { color: var(--gold); font-size: 13px; }
.nav-phone:hover { color: var(--gold); }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--text-ink);
  border-radius: 2px;
  transition: var(--t);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Menu */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg-white);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  padding: 80px 24px 48px;
  overflow-y: auto;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 600;
  color: var(--text-ink);
  text-align: center;
  transition: var(--t);
}
.mobile-nav a:hover { color: var(--gold); }
/* Without this the CTA inherits the 34px menu-link type from `.mobile-nav a`
   (0,1,1 beats `.btn`'s 0,1,0) and wraps onto two oversized lines. */
.mobile-nav .btn {
  margin-top: 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.08em;
}
.mobile-nav-close {
  position: absolute;
  top: 22px; right: 24px;
  font-size: 22px;
  color: var(--text-ink);
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
  transition: var(--t);
}
.mobile-nav-close:hover { color: var(--gold); }

/* ============================================================
   SERVICES SUBMENU (Phase 8)
   ============================================================ */
/* ---- Desktop dropdown ---- */
.nav-has-sub { position: relative; display: flex; align-items: center; gap: 2px; }
.nav-sub-toggle {
  background: none; border: none; cursor: pointer;
  color: var(--text-ink); padding: 6px 4px; line-height: 1;
  display: inline-flex; align-items: center; font-size: 11px;
  transition: var(--t);
}
.nav-sub-toggle:hover { color: var(--gold); }
.nav-sub-toggle i, .nav-sub-toggle .ic { transition: transform 0.25s var(--ease); }
.nav-has-sub.open .nav-sub-toggle i, .nav-has-sub.open .nav-sub-toggle .ic { transform: rotate(180deg); }
.nav-submenu {
  position: absolute;
  top: calc(100% + 14px);
  left: -14px;
  min-width: 236px;
  list-style: none;
  background: var(--bg-white);
  border: 1px solid var(--border-cool);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
  z-index: 300;
}
/* Invisible bridge so the pointer can cross the gap without the menu closing */
.nav-submenu::before {
  content: ''; position: absolute;
  top: -16px; left: 0; right: 0; height: 16px;
}
.nav-has-sub.open .nav-submenu,
.nav-has-sub:focus-within .nav-submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-submenu li { margin: 0; }
.nav-submenu a {
  display: block;
  font-family: var(--font-ui);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.02em; text-transform: none;
  color: var(--text-ink);
  padding: 10px 14px; border-radius: var(--r-sm);
  white-space: nowrap;
}
.nav-submenu a::after { display: none; }
.nav-submenu a:hover,
.nav-submenu a:focus-visible { background: var(--section-blue-soft); color: var(--navy); }
.nav-submenu a.active,
.nav-submenu a[aria-current="page"] { color: var(--gold); font-weight: 600; }

/* ---- Mobile accordion ---- */
.mobile-sub { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mobile-sub-head { display: inline-flex; align-items: center; gap: 6px; }
.mobile-sub-toggle {
  background: none; border: none; cursor: pointer;
  color: var(--text-ink); padding: 8px; line-height: 1;
  display: inline-flex; align-items: center; font-size: 18px;
}
.mobile-sub-toggle i, .mobile-sub-toggle .ic { transition: transform 0.25s var(--ease); }
.mobile-sub.open .mobile-sub-toggle i, .mobile-sub.open .mobile-sub-toggle .ic { transform: rotate(180deg); }
.mobile-submenu {
  display: none;
  flex-direction: column; align-items: center; gap: 16px;
  margin-top: 2px;
}
.mobile-sub.open .mobile-submenu { display: flex; }
.mobile-submenu a {
  font-family: var(--font-heading);
  font-size: 20px; font-weight: 500;
  color: var(--text-warm);
}
.mobile-submenu a:hover,
.mobile-submenu a.active,
.mobile-submenu a[aria-current="page"] { color: var(--gold); }
.mobile-sub-head a.active { color: var(--gold); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  /* Not a full 100vh: the hero card already makes this ~860px tall, which
     overflowed a standard 720px laptop viewport and pushed the buttons and
     trust row below the fold. */
  min-height: 88vh;
  display: flex;
  align-items: center;
  /* Deep navy base so the hero is never white before the first slide decodes.
     The photograph now lives in .hero-slideshow and the navy wash that used to
     be the first background layer is now .hero-overlay. */
  background: var(--navy-deep);
  position: relative;
  overflow: hidden;
  padding: 112px 0 72px;
}

/* ---- HERO SLIDESHOW ----
   A decorative photography layer behind the hero copy. Only the photograph
   rotates: the heading, paragraph, buttons and trust row live in .hero-inner
   and never change. */
.hero-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* Crossfade only. No sliding, zooming or Ken Burns movement, and nothing
     that could change the hero height mid-transition. */
  transition: opacity 850ms var(--ease);
}
.hero-slide.is-active { opacity: 1; }
.hero-slide picture { display: contents; }
.hero-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* cover + a per-slide focal point: never contain, never stretch, so no
     letterboxing or empty frame can appear at any viewport. */
  object-fit: cover;
  object-position: var(--slide-pos, center);
}

/* Per-slide focal points, chosen after looking at each crop rather than
   applying one universal center crop. */
.hero-slide--arrival      { --slide-pos: center center; }
.hero-slide--conversation { --slide-pos: center 34%; }
.hero-slide--assessment   { --slide-pos: center 42%; }

/* The navy wash sits above the photographs and below .hero-inner, so its
   value never changes while a crossfade is running. */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--grad-hero);
}
/* A light left-to-right shield on top of the shared wash. The copy column is
   left-aligned on desktop and two of the three slides are bright interiors, so
   this keeps the white and gold text readable without flattening the
   photograph. Deliberately gentle: --grad-hero already does most of the work. */
.hero-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(14,28,50,0.30) 0%, rgba(14,28,50,0.14) 42%, rgba(14,28,50,0) 68%);
}

/* ---- HERO SLIDESHOW CONTROLS ---- */
.hero-controls-wrap {
  position: absolute;
  left: 0; right: 0; bottom: 22px;
  z-index: 3;
}
.hero-controls-wrap[hidden] { display: none; }
.hero-controls {
  display: flex;
  align-items: center;
  /* The pause control sits clear of the selector so the indicators keep their
     clean dot and pill reading. */
  gap: 22px;
}

/* ---- Slide selector ----
   Muted circular dots for inactive slides, a wider gold pill for the active
   one. Active state is carried by shape and width as well as colour. */
.hero-dots { display: flex; align-items: center; gap: 15px; }
.hero-dot {
  width: 8px;
  height: 8px;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.42);
  cursor: pointer;
  position: relative;
  transition: width 0.3s var(--ease), background 0.25s var(--ease);
}
/* Invisible tall target so the small pip stays comfortably tappable. It spans
   the pip plus half the gap on each side, so neighbouring targets meet without
   overlapping and a tap always selects the indicator it looks nearest to. */
.hero-dot::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: calc(100% + 15px);
  height: 44px;
  transform: translate(-50%, -50%);
}
.hero-dot:hover { background: rgba(255,255,255,0.7); }
.hero-dot.is-current,
.hero-dot[aria-current="true"] {
  width: 30px;
  background: var(--gold-light);
}

/* ---- Pause and play ----
   Deliberately understated: no filled circle or border, so it reads as a small
   utility control rather than part of the selector. */
.hero-ctrl {
  width: 26px; height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255,255,255,0.62);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: color 0.25s var(--ease);
}
.hero-ctrl:hover { color: var(--gold-bright); }
.hero-ctrl:focus-visible,
.hero-dot:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 4px; }
/* js/main.js adds .hero-slideshow--static when the visitor asks for reduced
   motion. Autoplay never starts in that state, so a pause control would have
   nothing to pause; manual navigation stays available and switches instantly. */
.hero-slideshow--static .hero-slide { transition: none; }
.hero-slideshow--static ~ .hero-controls-wrap .hero-ctrl--toggle { display: none; }
/* Gold top accent to match the interior page heroes */
.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad-gold);
  z-index: 2;
}
.hero::after {
  content: '';
  position: absolute;
  top: -20%; right: -15%;
  width: 60vw; height: 60vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 66%);
  pointer-events: none;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 72px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero-content { max-width: 640px; }

.hero h1 { margin-bottom: 26px; color: var(--bg-white); }
.hero h1 em {
  font-style: italic;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-desc {
  font-size: 19px;
  line-height: 1.73;
  color: rgba(255,255,255,0.86);
  margin-bottom: 34px;
}
.hero-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 38px;
}
.hero-trust {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.16);
}
.hero-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  letter-spacing: 0.03em;
}
.hero-trust-item i, .hero-trust-item .ic { color: var(--gold); font-size: 14px; }

/* Hero Card (right side) */
.hero-visual {
  display: flex;
  justify-content: center;
}
.hero-card {
  background: var(--bg-white);
  border-radius: var(--r-xl);
  padding: 38px 34px;
  box-shadow: var(--sh-lg);
  border: 1px solid rgba(201,148,26,0.12);
  width: 100%;
  max-width: 430px;
  position: relative;
  overflow: hidden;
}
.hero-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad-gold);
}
.hero-card-logo {
  display: block;
  width: 88px;
  height: auto;
  margin: 0 auto 22px;
}
.hero-card-tagline {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 600;
  color: var(--text-ink);
  margin-bottom: 6px;
}
.hero-card-sub {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 24px;
}
.hero-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}
.hero-stat {
  background: var(--bg-cream);
  border-radius: var(--r-md);
  padding: 15px 12px;
  text-align: center;
}
.hero-stat-num {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 5px;
}
.hero-stat-lbl {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-warm);
}
.hero-card-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
/* Contact rows share one look whether or not they are links, so the plain-text
   fax row matches the phone and email rows exactly. Only the links get :hover. */
.hero-card-contact a,
.hero-card-contact .hero-card-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-warm);
  transition: var(--t);
}
.hero-card-contact i, .hero-card-contact .ic { color: var(--gold); width: 16px; font-size: 13px; }
.hero-card-contact a:hover { color: var(--gold); }

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust-bar {
  background: var(--bg-dark);
  padding: 22px 0;
}
/* The five items need about 1156px at a 40px gap, which overflowed the 1200px
   container by a few pixels and pushed the last item onto its own row. The bar
   now uses the wider container token and a gap that scales with the viewport,
   so all five sit on one row wherever they genuinely fit, and still wrap
   cleanly once the viewport is too narrow for them. */
.trust-bar > .container { max-width: var(--max-w-wide); }
.trust-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 2.4vw, 40px);
  flex-wrap: wrap;
}
.trust-item {
  display: flex;
  align-items: center;
  /* Individual labels never break mid-phrase; the row wraps between items. */
  white-space: nowrap;
  gap: 9px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.trust-item i, .trust-item .ic { color: var(--gold-light); font-size: 15px; }
.trust-sep {
  width: 1px; height: 22px;
  background: rgba(255,255,255,0.12);
}

/* ============================================================
   WHAT WE DO (Intro)
   ============================================================ */
.intro-section { padding: var(--section-y) 0; }
.intro-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}
.intro-content .label-tag { margin-bottom: 14px; }
.intro-content h2 { margin-bottom: 22px; }
.intro-content .lead { margin-bottom: 18px; }
.intro-content p:not(.lead) { margin-bottom: 32px; }
.intro-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}
.pill {
  padding: 7px 18px;
  border-radius: 100px;
  border: 1.5px solid rgba(201,148,26,0.28);
  background: var(--gold-subtle-bg);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-dark);
  letter-spacing: 0.04em;
}
.intro-visual { position: relative; }
.intro-visual-card {
  border-radius: var(--r-xl);
  aspect-ratio: 3/4;
  background: var(--section-soft);
  border: 1px solid var(--border-cool);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.intro-visual-icon {
  font-size: 110px;
  color: var(--gold);
  opacity: 0.18;
}
.intro-logo-centered {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.intro-logo-centered img {
  width: 180px;
  opacity: 0.55;
}
/* Full-bleed photo inside intro card */
.intro-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: inherit;
}
.intro-visual-card picture {
  display: contents;
}
.intro-float-badge {
  position: absolute;
  bottom: -18px;
  left: -24px;
  background: var(--bg-white);
  border-radius: var(--r-md);
  padding: 18px 22px;
  box-shadow: var(--sh-md);
  border: 1px solid rgba(201,148,26,0.12);
  display: flex;
  align-items: center;
  gap: 14px;
}
.float-badge-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--grad-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-dark);
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: var(--sh-gold);
}
.float-badge-lbl {
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.float-badge-val {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-ink);
}

/* ============================================================
   SERVICES GRID
   ============================================================ */
.services-section { padding: var(--section-y) 0; }
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: var(--header-gap);
}
.svc-card {
  background: var(--bg-white);
  border-radius: var(--r-lg);
  /* Keep in sync with the negative margins on .svc-card-media, which bleed
     the photo out to the card edges. */
  padding: 32px 30px;
  border: 1px solid rgba(0,0,0,0.05);
  transition: var(--t);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  /* Column layout lets the "Learn More" link pin to the bottom so cards with
     different copy lengths still line up. */
  display: flex;
  flex-direction: column;
}
.svc-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.svc-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--sh-md);
  border-color: rgba(201,148,26,0.14);
}
.svc-card:hover::after { transform: scaleX(1); }
.svc-icon {
  width: 62px; height: 62px;
  border-radius: 16px;
  background: var(--gold-subtle-bg);
  border: 1px solid rgba(201,148,26,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--gold);
  margin-bottom: 26px;
  transition: var(--t);
}
.svc-card:hover .svc-icon {
  background: var(--grad-gold);
  color: var(--bg-dark);
  border-color: transparent;
  box-shadow: var(--sh-gold);
}
.svc-card h3 { font-size: 21px; margin-bottom: 12px; }
.svc-card p { font-size: 15px; line-height: 1.72; margin-bottom: 22px; }
.svc-card .svc-link { margin-top: auto; align-self: flex-start; }
.svc-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold);
  transition: var(--t);
}
.svc-link i, .svc-link .ic { transition: transform 0.3s var(--ease); }
.svc-card:hover .svc-link i, .svc-card:hover .svc-link .ic { transform: translateX(5px); }

/* ============================================================
   WHY CHOOSE US
   ============================================================ */
.why-section { padding: var(--section-y) 0; }
.why-inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: center;
}
.why-visual { position: relative; overflow: hidden; }
.why-img-wrap {
  border-radius: var(--r-xl);
  aspect-ratio: 3/4;
  background: linear-gradient(145deg, #FDF6E3 0%, #F5E8B0 100%);
  border: 1px solid rgba(201,148,26,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.why-img-logo {
  width: 55%;
  opacity: 0.35;
}
/* Full-bleed photo inside why card */
.why-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: inherit;
}
.why-img-wrap picture {
  display: contents;
}
.why-float {
  position: absolute;
  top: 36px; right: -16px;
  background: var(--bg-dark);
  color: var(--bg-white);
  border-radius: var(--r-md);
  padding: 22px 26px;
  text-align: center;
  box-shadow: var(--sh-md);
}
.why-float-num {
  display: block;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1;
}
.why-float-lbl {
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-top: 5px;
}

.why-content .label-tag { margin-bottom: 14px; }
.why-content h2 { margin-bottom: 18px; }
.why-content > p { margin-bottom: 38px; }
.why-list { display: flex; flex-direction: column; gap: 22px; }
.why-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.why-item-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--grad-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-dark);
  font-size: 17px;
  flex-shrink: 0;
  box-shadow: var(--sh-gold);
}
.why-item-body h4 {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-ink);
  margin-bottom: 5px;
  letter-spacing: 0;
  text-transform: none;
}
.why-item-body p { font-size: 14px; line-height: 1.65; }

/* ============================================================
   BENEFITS
   ============================================================ */
.benefits-section { padding: var(--section-y) 0; }
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: var(--header-gap);
}
.benefit-card {
  background: var(--bg-white);
  border-radius: var(--r-lg);
  padding: 40px 34px;
  text-align: center;
  border: 1px solid rgba(0,0,0,0.05);
  transition: var(--t);
  position: relative;
}
.benefit-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-md);
}
.benefit-icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--gold-subtle-bg);
  border: 1px solid rgba(201,148,26,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 26px;
  font-size: 30px;
  color: var(--gold);
  transition: var(--t);
}
.benefit-card:hover .benefit-icon {
  background: var(--grad-gold);
  color: var(--bg-dark);
  border-color: transparent;
  box-shadow: var(--sh-gold);
}
.benefit-card h3 { font-size: 20px; margin-bottom: 12px; }
.benefit-card p { font-size: 15px; }

/* ============================================================
   HOMEPAGE: CARE FACTS
   Deep navy band that sits between the pale-blue services grid and the
   navy "How It Works" section; the darker tone plus the gold hairline
   keeps the two dark sections visually separate.
   ============================================================ */
.facts-section {
  background: var(--bg-black);
  padding: var(--section-y-sm) 0;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(201,148,26,0.20);
}
.facts-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 25%, rgba(201,148,26,0.09) 0%, transparent 58%);
  pointer-events: none;
}
.facts-section > .container { position: relative; z-index: 1; }
.facts-section .label-tag { color: var(--gold-light); }
.facts-section h2 { color: var(--bg-white); }
.facts-section .section-header p { color: var(--text-light); }
.facts-section .gold-line { margin: 18px auto; }
.facts-section .section-header { margin-bottom: 34px; }

.facts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  list-style: none;
}
.fact-item {
  text-align: center;
  padding: 4px 20px;
  position: relative;
}
/* Thin gold separators between columns */
.fact-item + .fact-item::before {
  content: '';
  position: absolute;
  left: 0; top: 6%;
  width: 1px; height: 88%;
  background: rgba(201,148,26,0.22);
}
.fact-value {
  /* Fixed-height flex box so the shorter "South Bay" value shares a baseline
     band with the numerals and every label starts at the same height. */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(50px, 5.2vw, 66px);
  font-family: var(--font-display);
  font-size: clamp(46px, 5vw, 62px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--gold-light);
  /* tabular figures keep the box a fixed width while the value counts up */
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}
.fact-value--text {
  font-family: var(--font-heading);
  font-size: clamp(26px, 2.9vw, 36px);
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}
.fact-label {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bg-white);
  margin-bottom: 8px;
}
.fact-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.62);
  max-width: 250px;
  margin: 0 auto;
}

/* Entrance is opt-in: main.js adds .facts-animate only when it can actually
   animate, so the facts stay visible with no JS, with no IntersectionObserver,
   and under reduced motion. Never style the section hidden by default. */
.facts-animate .fact-item {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.facts-animate.is-in .fact-item { opacity: 1; transform: none; }
.facts-animate.is-in .fact-item:nth-child(2) { transition-delay: 0.07s; }
.facts-animate.is-in .fact-item:nth-child(3) { transition-delay: 0.14s; }
.facts-animate.is-in .fact-item:nth-child(4) { transition-delay: 0.21s; }

@media (max-width: 1024px) {
  .facts-grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  /* At two columns only the middle rule is meaningful */
  .fact-item::before { display: none; }
  .fact-item:nth-child(even)::before { display: block; }
}

@media (max-width: 600px) {
  /* One compact row per fact: value on the left, text on the right, so a
     single fact never fills the screen. */
  .facts-grid { grid-template-columns: 1fr; row-gap: 0; }
  .fact-item {
    display: grid;
    grid-template-columns: 76px 1fr;
    column-gap: 18px;
    align-items: center;
    text-align: left;
    padding: 17px 0;
  }
  .fact-item::before,
  .fact-item:nth-child(even)::before { display: none; }
  .fact-item + .fact-item { border-top: 1px solid rgba(255,255,255,0.10); }
  .fact-value {
    grid-row: 1 / span 2;
    font-size: 42px;
    min-height: 0;
    margin-bottom: 0;
  }
  .fact-value--text { font-size: 18px; line-height: 1.22; }
  .fact-label { margin-bottom: 4px; }
  .fact-desc { max-width: none; margin: 0; }
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.hiw-section {
  background: var(--bg-dark);
  padding: var(--section-y) 0;
  position: relative;
  overflow: hidden;
}
.hiw-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at 75% 40%, rgba(201,148,26,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.hiw-section .section-header .label-tag { color: var(--gold-light); }
.hiw-section h2 { color: var(--bg-white); }
.hiw-section .section-header p { color: var(--text-light); }
.hiw-section .gold-line { margin: 20px auto; }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: var(--header-gap);
  position: relative;
}
.steps::before {
  content: '';
  position: absolute;
  top: 44px;
  left: calc(16.7% + 22px);
  right: calc(16.7% + 22px);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201,148,26,0.35) 20%,
    rgba(241,189,64,0.50) 50%,
    rgba(201,148,26,0.35) 80%,
    transparent 100%
  );
}
.step { text-align: center; }
.step-num {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: rgba(201,148,26,0.09);
  border: 1px solid rgba(201,148,26,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 26px;
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  color: var(--gold-light);
  position: relative;
  z-index: 1;
  transition: var(--t);
}
.step:hover .step-num {
  background: rgba(201,148,26,0.16);
  border-color: rgba(201,148,26,0.5);
}
.step-i {
  font-size: 22px;
  color: var(--gold-light);
  margin-bottom: 14px;
}
.step h3 { color: var(--bg-white); font-size: 21px; margin-bottom: 12px; }
.step p { color: var(--text-light); font-size: 15px; line-height: 1.72; }

/* ============================================================
   STATS
   ============================================================ */
.stats-section {
  padding: 80px 0;
  background: var(--section-gray);
  border-top: 1px solid var(--border-cool);
  border-bottom: 1px solid var(--border-cool);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  text-align: center;
}
.stat-item {
  padding: 32px 24px;
  position: relative;
}
.stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 20%; right: 0;
  height: 60%;
  width: 1px;
  background: rgba(201,148,26,0.22);
}
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(44px, 5vw, 64px);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-lbl {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-warm);
}

/* ============================================================
   WHO WE SERVE
   ============================================================ */
.serve-section { padding: var(--section-y) 0; }
.serve-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: var(--header-gap);
}
.serve-card {
  background: var(--bg-white);
  border-radius: var(--r-lg);
  padding: 30px 26px;
  border: 1px solid rgba(201,148,26,0.09);
  display: flex;
  align-items: flex-start;
  gap: 18px;
  transition: var(--t);
}
.serve-card:hover {
  background: var(--gold-subtle-bg);
  border-color: rgba(201,148,26,0.22);
  transform: translateY(-3px);
  box-shadow: var(--sh-sm);
}
.serve-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--grad-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-dark);
  font-size: 17px;
  flex-shrink: 0;
}
/* h3 is carried alongside h4 so these cards can sit under a section h2
   without skipping a heading level; both render identically. */
.serve-card h2,
.serve-card h3,
.serve-card h4 {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-ink);
  margin-bottom: 5px;
  letter-spacing: 0;
  text-transform: none;
}
.serve-card p { font-size: 13px; line-height: 1.62; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-section { padding: var(--section-y) 0; }
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: var(--header-gap);
}
.t-card {
  background: var(--bg-white);
  border-radius: var(--r-lg);
  padding: 34px 30px;
  border: 1px solid rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
  transition: var(--t);
}
.t-card::before {
  content: '\201C';
  font-family: var(--font-display);
  font-size: 130px;
  color: rgba(201,148,26,0.08);
  position: absolute;
  top: -14px; left: 16px;
  line-height: 1;
  pointer-events: none;
}
.t-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.t-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 18px;
}
.t-stars i, .t-stars .ic { color: var(--gold-light); font-size: 13px; }
.t-text {
  font-size: 15px;
  font-style: italic;
  line-height: 1.78;
  color: var(--text-warm);
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}
.t-author {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.t-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--grad-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  color: var(--bg-dark);
  flex-shrink: 0;
}
.t-name {
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-ink);
  margin-bottom: 2px;
}
.t-role { font-size: 12px; color: var(--text-muted); }

/* ============================================================
   INSURANCE
   One large card: explanation and CTA on the left, accepted plan
   categories and the coverage disclaimer on the right. The category
   chips are static information, so they carry no hover or focus
   affordance that would suggest they are filters or links.
   ============================================================ */
.insurance-section { padding: var(--section-y) 0; }

.insurance-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--border-cool);
  background: linear-gradient(160deg, #FFFFFF 0%, #F7FAFD 46%, var(--section-blue-soft) 100%);
  box-shadow: var(--sh-md);
  padding: 46px 48px;
}
/* Restrained warm-gold wash in the top corner, purely decorative.
   Covers the whole card and fades to fully transparent, otherwise the
   gradient box edge shows up as a hard vertical seam. */
.insurance-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 62% at 88% 14%, rgba(201,148,26,0.11) 0%, rgba(201,148,26,0) 72%);
  pointer-events: none;
}
/* DOM order is lead, plans, cta, which is already the correct reading and
   mobile order. Named areas move the CTA under the left column on desktop
   without reordering the markup, so no display:contents is needed. */
.insurance-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "lead  plans"
    "cta   plans";
  gap: 26px 56px;
  align-items: stretch;
}
.insurance-lead  { grid-area: lead;  align-self: start; }
.insurance-cta   { grid-area: cta;   align-self: start; }
/* Stretches across both rows and pushes the disclaimer to the bottom, so the
   right column does not leave a tall gap beneath the chips. */
.insurance-plans {
  grid-area: plans;
  display: flex;
  flex-direction: column;
}

.insurance-icon {
  width: 54px; height: 54px;
  border-radius: 15px;
  background: var(--gold-subtle-bg);
  border: 1px solid rgba(201,148,26,0.20);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  font-size: 23px;
  margin-bottom: 18px;
}
.insurance-lead h2 {
  /* Smaller than a full section heading: this sits inside a card, and the
     global h2 size wrapped to three lines and unbalanced the two columns. */
  font-size: clamp(26px, 2.9vw, 36px);
  margin-bottom: 16px;
}
.insurance-lead p { margin-bottom: 18px; }
.insurance-cta { margin-top: 26px; }
.insurance-cta-note {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-muted);
  margin-top: 14px;
  max-width: 40ch;
}

.insurance-plans h3 {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 16px;
}
.plan-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
}
.plan-chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 100px;
  border: 1px solid rgba(31,55,91,0.16);
  background: rgba(255,255,255,0.92);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.35;
}
.plan-chips .ic { color: var(--gold); font-size: 11px; }

.insurance-disclaimer {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--border-cool);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-warm);
}

@media (max-width: 900px) {
  /* Stacks into the required order: icon, eyebrow, heading, explanation,
     chips, disclaimer, then CTA. */
  .insurance-card { padding: 34px 28px; }
  .insurance-inner {
    grid-template-columns: 1fr;
    grid-template-areas: "lead" "plans" "cta";
    gap: 26px;
  }
  .insurance-cta { margin-top: 0; }
}

@media (max-width: 520px) {
  .insurance-card { padding: 28px 20px; border-radius: var(--r-lg); }
  .plan-chips { gap: 8px; }
  .plan-chips li { padding: 8px 13px; font-size: 12.5px; }
  .insurance-cta .btn { width: 100%; }
  .insurance-cta-note { max-width: none; }
}

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section {
  /* Centralized CTA background image; override per page with --cta-img if needed */
  --cta-img: url('/Images/cta-request-visit.webp');
  background-color: var(--navy);
  background-image:
    linear-gradient(180deg, rgba(18,36,60,0.90) 0%, rgba(28,48,80,0.82) 50%, rgba(18,36,60,0.92) 100%),
    var(--cta-img);
  background-position: center, var(--cta-pos, center 35%);
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  padding: var(--section-y) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-section > .container { position: relative; z-index: 1; }
.cta-section::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 900px; height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,148,26,0.10) 0%, transparent 68%);
  pointer-events: none;
}
.cta-section .label-tag { color: var(--gold-light); margin-bottom: 18px; }
.cta-section h2 { color: var(--bg-white); max-width: 680px; margin: 0 auto 18px; }
.cta-section > .container > p {
  color: var(--text-light);
  font-size: 18px;
  max-width: 540px;
  margin: 0 auto 34px;
}
.cta-btns {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-contacts {
  display: flex;
  gap: 44px;
  justify-content: center;
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-wrap: wrap;
}
.cta-contact-i {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cta-icon-box {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(201,148,26,0.11);
  border: 1px solid rgba(201,148,26,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light);
  font-size: 17px;
}
.cta-contact-lbl {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 4px;
}
.cta-contact-val {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--bg-white);
  transition: var(--t);
}
.cta-contact-i a:hover .cta-contact-val { color: var(--gold-light); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--bg-black);
  padding: 68px 0 32px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 28px;
}
.footer-logo { height: 34px; width: auto; margin-bottom: 18px; display: block; flex-shrink: 0; }
.footer-brand p {
  font-size: 13.5px;
  line-height: 1.75;
  color: rgba(255,255,255,0.45);
  margin-bottom: 22px;
}
.footer-socials { display: flex; gap: 10px; }
.footer-socials a {
  width: 36px; height: 36px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.45);
  font-size: 14px;
  transition: var(--t);
}
.footer-socials a:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(201,148,26,0.08);
}
.footer-col h2,
.footer-col h5 {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bg-white);
  margin-bottom: 16px;
}
.footer-links { display: flex; flex-direction: column; gap: 11px; }
.footer-links a {
  font-size: 13.5px;
  color: rgba(255,255,255,0.45);
  transition: var(--t);
}
.footer-links a:hover { color: var(--gold); }
.footer-contact-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.footer-contact-row i, .footer-contact-row .ic {
  color: var(--gold-light);
  font-size: 12.5px;
  margin-top: 2px;
  flex-shrink: 0;
  width: 14px;
}
.footer-contact-row span,
.footer-contact-row a {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  line-height: 1.55;
  transition: var(--t);
}
.footer-contact-row a:hover { color: var(--gold); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.footer-bottom p {
  font-size: 12.5px;
  color: rgba(255,255,255,0.28);
}
.footer-note {
  color: rgba(255,255,255,0.42) !important;
  max-width: 560px;
  text-align: right;
  text-wrap: balance;
}
@media (max-width: 640px) {
  .footer-note { text-align: left; }
}
.footer-legal {
  display: flex;
  gap: 22px;
}
.footer-legal a {
  font-size: 12.5px;
  color: rgba(255,255,255,0.28);
  transition: var(--t);
}
.footer-legal a:hover { color: var(--gold); }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  /* Note: --page-hero-img must use a ROOT-ABSOLUTE url('/Images/...') because a
     relative url() inside a custom property resolves against the stylesheet
     (/css/), not the document, which 404s. Absolute paths are base-independent. */
  position: relative;
  isolation: isolate;
  background-color: var(--navy);
  background-image: var(--grad-hero), var(--page-hero-img, none);
  background-position: center, var(--page-hero-position, var(--page-hero-pos, center));
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  /* Top padding clears the fixed navbar; both values scale down at the
     responsive breakpoints so the hero does not eat a phone screen. */
  padding: 148px 0 84px;
  text-align: center;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 25% 55%, rgba(201,148,26,0.09) 0%, transparent 60%);
  pointer-events: none;
}
.page-hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad-gold);
}
.page-hero .label-tag { color: var(--gold-light); margin-bottom: 18px; }
.page-hero h1 { color: var(--bg-white); margin-bottom: 18px; }
.page-hero .lead { color: var(--text-light); max-width: 620px; margin: 0 auto; }
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-top: 28px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.35);
  position: relative;
  z-index: 1;
}
.breadcrumb a { color: var(--gold-light); transition: var(--t); }
.breadcrumb a:hover { color: var(--bg-white); }
.breadcrumb i, .breadcrumb .ic { font-size: 9px; }
.page-hero > .container { position: relative; z-index: 1; }

/* ============================================================
   SHARED CONTENT COMPONENTS (Phase 3)
   ============================================================ */
/* Two-column content block (text + supporting card/list) */
.content-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: center;
}
.content-split.reverse { direction: rtl; }
.content-split.reverse > * { direction: ltr; }

/* The global reset zeroes margins on p/h2, and these blocks are plain divs
   with no component-specific typography rules, so headings and paragraphs
   were rendering flush against one another. Give them a reading rhythm.
   The final paragraph drops its margin so a following .check-list (which
   brings its own 26px top margin) does not double up. */
.content-split > div > h2 { margin-bottom: 16px; }
.content-split > div > p  { margin-bottom: 18px; }
.content-split > div > p:last-of-type { margin-bottom: 0; }

/* Check list with gold accent icons */
.check-list { display: flex; flex-direction: column; gap: 14px; margin: 26px 0 0; }
.check-list li {
  display: flex; gap: 13px; align-items: flex-start;
  font-family: var(--font-body);
  font-size: 15px; line-height: 1.6; color: var(--text-warm);
}
.check-list li i, .check-list li .ic { color: var(--gold); font-size: 14px; margin-top: 4px; flex-shrink: 0; }
.check-list li strong { color: var(--navy); font-weight: 600; }

/* ---- Shared media frame ----
   Every photograph on the site sits in a frame that defines the aspect ratio;
   the image then fills that frame edge to edge with no letterboxing. Set
   --media-pos on the frame (or any ancestor) to steer the crop, e.g.
   `style="--media-pos: center 35%"` keeps faces in frame on square sources.
   To add a new kind of frame, give it an aspect-ratio and add it to both
   selector lists below. */
.photo-card,
.svc-card-media {
  position: relative;
  overflow: hidden;
}
.photo-card > img,
.svc-card-media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--media-pos, 50% 50%);
}

/* Supporting photo card */
.photo-card {
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  border: 1px solid var(--border-cool);
  aspect-ratio: 4/3;
}

/* Notice / disclaimer boxes */
.notice {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px 24px;
  border-radius: var(--r-md);
  background: var(--section-blue-soft);
  border: 1px solid var(--border-cool);
  border-left: 4px solid var(--navy);
}
.notice i, .notice .ic { color: var(--navy); font-size: 20px; margin-top: 2px; flex-shrink: 0; }
.notice h2,
.notice h3,
.notice h4 {
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--navy); margin-bottom: 6px;
}
.notice p { font-size: 14px; line-height: 1.65; color: var(--text-warm); margin: 0; }
.notice a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.notice a:hover { color: var(--gold); }
.notice--emergency a { color: #8f2a2a; }
.notice--emergency {
  background: #FBEEEE;
  border-color: rgba(178,58,58,0.25);
  border-left-color: #B23A3A;
}
.notice--emergency i, .notice--emergency .ic, .notice--emergency h2, .notice--emergency h3, .notice--emergency h4 { color: #A83232; }

/* Telehealth callout: sits under a services grid as a supporting note, so it is
   centred to the grid width and gets a gold left edge to read as an addition
   rather than as another service card. */
.notice--telehealth {
  margin: 34px auto 0;
  max-width: 760px;
  border-left-color: var(--gold);
}
.notice--telehealth .svc-link { margin-top: 12px; }

/* Supporting-service cards. Same .serve-card component, but tinted so they read
   on a white section and stay visually secondary to the three core service
   cards above them. These cards carry no link because the services have no
   dedicated pages yet, so nothing here is a fake clickable target. */
.serve-grid--support .serve-card {
  background: var(--section-blue-soft);
  border-color: var(--border-cool);
}
.serve-grid--support .serve-card:hover {
  background: var(--section-blue-soft);
  border-color: rgba(201,148,26,0.28);
  transform: none;
  box-shadow: none;
}

/* One photograph per mobile supporting service, sitting above the icon grid.
   Reuses .photo-card so the media frame, ratio and radius match the rest of the
   site; only the row layout and the small caption are new. */
.support-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: var(--header-gap);
}
.support-feature { margin: 0; }
.support-feature figcaption {
  margin-top: 12px;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-warm);
}

/* Single dual-delivery clarification under the supporting-service grid. */
.support-note {
  max-width: 760px;
  margin: 30px auto 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
}
.support-note a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.support-note a:hover { color: var(--gold); }

/* Qualifier paragraph under a settings list. Deliberately quieter than body
   copy so the list stays the focus while the caveat remains readable. */
.setting-note {
  margin-top: 22px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ============================================================
   SERVICES PAGE: CORE-SERVICE SUMMARIES
   Each summary reuses .content-split (alternating with .reverse) and
   .photo-card, so it inherits the existing responsive grid, media frame
   and spacing tokens rather than introducing a parallel system.
   ============================================================ */
.svc-summary + .svc-summary {
  margin-top: var(--section-y);
  padding-top: var(--section-y);
  border-top: 1px solid var(--border-cool);
}
.svc-summary-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.svc-summary-head .svc-icon {
  width: 52px; height: 52px;
  font-size: 22px;
  margin-bottom: 0;
  border-radius: 14px;
}
.svc-summary-head h3 {
  font-size: clamp(23px, 2.6vw, 30px);
  margin: 0;
}

/* "Who this may help" + "Care may include" sit side by side on desktop
   and stack on narrow screens. */
.svc-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 30px;
  margin-top: 22px;
}
.svc-facts h4 {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 10px;
}
.svc-facts ul { display: flex; flex-direction: column; gap: 8px; }
.svc-facts li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-warm);
}
.svc-facts li i, .svc-facts li .ic { color: var(--gold); font-size: 11px; margin-top: 5px; flex-shrink: 0; }
.svc-summary-cta { margin-top: 24px; }
.svc-summary .notice { margin-top: 22px; }

@media (max-width: 600px) {
  .svc-facts { grid-template-columns: 1fr; gap: 20px; }
}

/* While the split is two columns, let the photo match the height of the text
   beside it. Centering a fixed 4:3 frame next to a taller text column left a
   band of empty space above and below the image. */
@media (min-width: 901px) {
  .svc-summary .content-split { align-items: stretch; }
  .svc-summary .photo-card { height: 100%; aspect-ratio: auto; }
}

/* Once the split stacks, lead with the photo instead of leaving it stranded
   below the "Explore" button at the end of the section. */
@media (max-width: 900px) {
  .svc-summary .content-split > div:last-child { order: -1; }
  .svc-summary .content-split { gap: 28px; }
}

/* ============================================================
   SERVICES PAGE: COMMON QUESTIONS
   Native details/summary, so answers are present and expandable with no
   JavaScript. The heading stays inside summary for a correct outline.
   ============================================================ */
.faq { border-top: 1px solid var(--border-cool); }
.faq-entry { border-bottom: 1px solid var(--border-cool); }
.faq-entry > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 2px;
  cursor: pointer;
  list-style: none;
  transition: color 0.25s var(--ease);
}
.faq-entry > summary::-webkit-details-marker { display: none; }
.faq-entry > summary h3 {
  font-family: var(--font-heading);
  font-size: clamp(16.5px, 1.7vw, 18.5px);
  font-weight: 600;
  color: var(--navy);
  margin: 0;
}
/* Chevron drawn in CSS so no icon request is added */
.faq-entry > summary::after {
  content: '';
  width: 9px; height: 9px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  margin-right: 4px;
  flex-shrink: 0;
  transition: transform 0.25s var(--ease);
}
.faq-entry[open] > summary::after { transform: rotate(-135deg); }
.faq-entry > summary:hover h3 { color: var(--gold-dark); }
.faq-entry > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.faq-answer { padding: 0 2px 22px; }
.faq-answer p { font-size: 15px; line-height: 1.72; margin: 0; }
.faq-answer a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.faq-answer a:hover { color: var(--gold-dark); }

@media (max-width: 600px) {
  .faq-entry > summary { padding: 17px 2px; gap: 14px; }
  .faq-answer { padding-bottom: 18px; }
}

/* ============================================================
   SERVICES PAGE: HOW MOBILE CARE WORKS
   Five across on desktop, a readable vertical list on smaller screens.
   ============================================================ */
.flow-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin-top: var(--header-gap);
}
.flow-step { text-align: center; }
.flow-num {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--gold-subtle-bg);
  border: 1px solid rgba(201,148,26,0.24);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--gold-dark);
  flex-shrink: 0;
}
.flow-step h3 {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-ink);
  margin-bottom: 6px;
}
.flow-step p { font-size: 14px; line-height: 1.6; }

@media (max-width: 900px) {
  .flow-list { grid-template-columns: 1fr; gap: 18px; max-width: 620px; margin-left: auto; margin-right: auto; }
  .flow-step { display: flex; gap: 16px; text-align: left; align-items: flex-start; }
  .flow-num { margin: 0; width: 40px; height: 40px; font-size: 19px; }
}

/* Step / process list (numbered) reused via .steps on light bg */
.steps-light { counter-reset: step; }
.steps-light .step-num {
  background: var(--navy); color: #fff;
}

/* Related services cards reuse .services-grid + .svc-card.
   An aspect ratio (not a fixed height) keeps the crop identical at every
   breakpoint; a fixed height made the frame swing from 1.96 to 2.22 between
   mobile and tablet and letterboxed square sources by more than half. */
.svc-card-media {
  aspect-ratio: 16 / 9;
  margin: -32px -30px 24px;
  border-bottom: 1px solid var(--border-cool);
}
.svc-card-media > img { transition: transform 0.5s var(--ease); }
.svc-card:hover .svc-card-media > img { transform: scale(1.05); }

@media (max-width: 900px) {
  .content-split { grid-template-columns: 1fr; gap: 44px; }
}

/* ============================================================
   SERVICES PAGE
   ============================================================ */
.svc-detail { padding: var(--section-y) 0; }
.svc-detail.alt { background: var(--bg-cream); }
.svc-detail-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.svc-detail.alt .svc-detail-inner { direction: rtl; }
.svc-detail.alt .svc-detail-content { direction: ltr; }
.svc-detail-visual {
  --svc-bg-position: center;
  --svc-bg-size: cover;
  border-radius: var(--r-xl);
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, rgba(253,248,236,0.34) 0%, rgba(245,216,122,0.10) 46%, rgba(201,148,26,0.16) 100%);
  border: 1px solid rgba(201,148,26,0.13);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.52),
    0 14px 40px rgba(122,82,24,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  direction: ltr;
}
/* Photo layer fills the card and stays clipped to the existing rounded corners. */
.svc-detail-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--svc-bg);
  background-size: var(--svc-bg-size);
  background-position: var(--svc-bg-position);
  background-repeat: no-repeat;
  opacity: 1;
  filter: saturate(0.96) contrast(1.02) brightness(0.94);
  transform: scale(1.01);
  z-index: 0;
}
.svc-detail-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(145deg, rgba(255,250,241,0.08) 0%, rgba(241,189,64,0.08) 42%, rgba(201,148,26,0.18) 100%),
    radial-gradient(circle at 50% 46%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 36%, rgba(122,82,24,0.08) 100%);
  z-index: 1;
}
/* The icon remains centered as a soft brand mark above image and glaze. */
.svc-detail-visual i, .svc-detail-visual .ic {
  font-size: clamp(86px, 9vw, 110px);
  color: rgba(255,247,226,0.52);
  filter: drop-shadow(0 8px 22px rgba(122,82,24,0.10));
  position: relative;
  z-index: 2;
}
.svc-detail-content .label-tag { margin-bottom: 14px; }
.svc-detail-content h2 { margin-bottom: 18px; }
.svc-detail-content > p { margin-bottom: 30px; }
.svc-feat-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 34px; }
.svc-feat-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}
.svc-feat-item i, .svc-feat-item .ic {
  color: var(--gold);
  font-size: 15px;
  margin-top: 3px;
  flex-shrink: 0;
}
.svc-feat-item span { font-size: 15px; color: var(--text-warm); line-height: 1.62; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-story-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.mission-visual-wrap {
  position: relative;
  overflow: hidden;
}
.mission-visual-card {
  border-radius: var(--r-xl);
  aspect-ratio: 3 / 4;
  background: linear-gradient(145deg, #FDF6E3 0%, #F5E8B0 100%);
  border: 1px solid rgba(201,148,26,0.13);
  overflow: hidden;
  position: relative;
}
.mission-visual-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.mission-quote-card {
  position: absolute;
  right: 0;
  bottom: 0;
  background: var(--bg-dark);
  color: white;
  border-radius: var(--r-md);
  padding: 28px 32px;
  max-width: 280px;
  box-shadow: var(--sh-lg);
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: var(--header-gap);
}
.value-card {
  background: var(--bg-white);
  border-radius: var(--r-lg);
  padding: 36px 30px;
  text-align: center;
  border: 1px solid rgba(0,0,0,0.05);
  transition: var(--t);
}
.value-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
.value-icon {
  width: 72px; height: 72px;
  border-radius: 20px;
  background: var(--gold-subtle-bg);
  border: 1px solid rgba(201,148,26,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  font-size: 26px;
  color: var(--gold);
  transition: var(--t);
}
.value-card:hover .value-icon {
  background: var(--grad-gold);
  color: var(--bg-dark);
  border-color: transparent;
  box-shadow: var(--sh-gold);
}
.value-card h3 { font-size: 19px; margin-bottom: 12px; }
.value-card p { font-size: 14px; line-height: 1.72; }

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: var(--header-gap);
}
.team-card {
  background: var(--bg-white);
  border-radius: var(--r-lg);
  padding: 36px 30px;
  text-align: center;
  border: 1px solid rgba(0,0,0,0.05);
  transition: var(--t);
}
.team-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.team-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--grad-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 30px;
  color: var(--bg-dark);
}
.team-card h3 { font-size: 18px; margin-bottom: 5px; }
.team-role {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.team-card p { font-size: 14px; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-section { padding: var(--section-y) 0; }
.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 80px;
}
.contact-info .label-tag { margin-bottom: 14px; }
.contact-info h2 { margin-bottom: 18px; }
.contact-info > p { margin-bottom: 40px; }
.contact-items { display: flex; flex-direction: column; gap: 24px; }
.c-item { display: flex; gap: 18px; align-items: flex-start; }
.c-icon {
  width: 50px; height: 50px;
  border-radius: 12px;
  background: var(--grad-gold);
  display: flex; align-items: center; justify-content: center;
  color: var(--bg-dark);
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: var(--sh-gold);
}
.c-lbl {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.c-val {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-ink);
}
.c-val a { transition: var(--t); }
.c-val a:hover { color: var(--gold); }

.form-wrap {
  background: var(--bg-cream);
  border-radius: var(--r-xl);
  padding: 48px;
  border: 1px solid rgba(201,148,26,0.1);
}
.form-wrap h3 { margin-bottom: 8px; }
.form-wrap > p { margin-bottom: 32px; font-size: 15px; }
.form-group { margin-bottom: 22px; }
.form-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-warm);
  margin-bottom: 8px;
}
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1.5px solid rgba(0,0,0,0.1);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-ink);
  background: var(--bg-white);
  transition: var(--t);
  outline: none;
  appearance: none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(31,55,91,0.15);
}
.form-textarea { resize: vertical; min-height: 130px; line-height: 1.65; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* Required marker and optional hint. The asterisk is aria-hidden because the
   input's own required state already conveys this to assistive technology. */
.form-req { color: var(--gold); font-weight: 700; }
.form-optional {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}
/* Anti-spam honeypot. Kept out of view without display:none so it still submits
   with the form, and out of the tab order and the accessibility tree via the
   attributes on the markup. */
.form-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

/* Short expectation-setting note under a field, quieter than the label. */
.form-hint {
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-muted);
}
.form-submit { width: 100%; justify-content: center; padding: 17px; }
.form-consent {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 16px;
  line-height: 1.6;
}

/* ---- Inquiry switcher (segmented control) ---- */
.inquiry-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin: 22px 0 24px;
  background: var(--section-blue-soft);
  border: 1px solid var(--border-cool);
  border-radius: 100px;
}
.inquiry-tab {
  padding: 11px 14px;
  border: none;
  border-radius: 100px;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--navy-soft);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
  white-space: nowrap;
}
.inquiry-tab:hover { color: var(--navy); }
.inquiry-tab[aria-selected="true"] {
  background: var(--navy);
  color: var(--bg-white);
  box-shadow: 0 1px 4px rgba(20,39,63,0.18);
}
.inquiry-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.inquiry-panel[hidden] { display: none; }
.inquiry-desc {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-warm);
  margin-bottom: 20px;
}

/* ---- Privacy, emergency and status blocks ---- */
.form-privacy-note,
.form-emergency {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 13px 15px;
  border-radius: var(--r-sm);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 22px;
}
.form-privacy-note {
  background: rgba(255,255,255,0.75);
  border: 1px solid var(--border-cool);
  color: var(--text-warm);
}
.form-privacy-note .ic { color: var(--navy); font-size: 15px; margin-top: 2px; }
.form-emergency {
  background: #FBEEEE;
  border: 1px solid rgba(178,58,58,0.25);
  border-left: 4px solid #B23A3A;
  color: #6d3232;
  margin-top: 4px;
}
.form-emergency .ic { color: #A83232; font-size: 15px; margin-top: 2px; }

/* Status region. Moved here from a page-specific <style> block in contact.html
   so the form components live in one cacheable place; that block also still
   targeted the old <i> icon element, which no longer exists. */
.form-status {
  display: none;
  font-size: 14px;
  line-height: 1.6;
  margin-top: 16px;
  border-radius: var(--r-sm);
}
.form-status.is-visible {
  display: block;
  padding: 13px 16px;
  border: 1px solid transparent;
}
.form-status.is-success {
  background: #ECF6EF;
  border-color: rgba(40,120,70,0.28);
  color: #1F5B39;
}
.form-status.is-error {
  background: #FBEEEE;
  border-color: rgba(178,58,58,0.28);
  color: #8f2a2a;
}

.expect-list { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }
.expect-list li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-warm);
}
.expect-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

/* Both labels measure comfortably side by side down to 320px, so the
   segmented control is kept at every common phone width. Below that the two
   controls stack rather than clipping either label. */
@media (max-width: 330px) {
  .inquiry-switch { grid-template-columns: 1fr; border-radius: var(--r-md); }
  .inquiry-tab { border-radius: var(--r-sm); }
}

@media (prefers-reduced-motion: reduce) {
  .inquiry-tab { transition: none; }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-section { padding: var(--section-y) 0; }
.faq-list { max-width: 780px; margin: var(--header-gap) auto 0; }
.faq-item { border-bottom: 1px solid rgba(0,0,0,0.08); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-ink);
  gap: 24px;
  transition: var(--t);
  user-select: none;
}
.faq-q:hover { color: var(--gold); }
.faq-q i, .faq-q .ic { color: var(--gold); font-size: 13px; transition: transform 0.3s var(--ease); flex-shrink: 0; }
.faq-item.open .faq-q i, .faq-item.open .faq-q .ic { transform: rotate(180deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s var(--ease), padding 0.3s ease;
}
.faq-a-inner { padding: 0 0 24px; font-size: 15px; color: var(--text-warm); line-height: 1.78; }
.faq-item.open .faq-a { max-height: 400px; }

/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */
/* Reveal content is visible by default. The hidden starting state applies only
   under .reveal-enabled, which main.js puts on <html> when it has confirmed
   IntersectionObserver support and that reduced motion is off. If the script
   never runs, fails, or bails out, these rules simply never apply and the
   content stays visible. */
.reveal-enabled .reveal   { opacity: 0; transform: translateY(34px); }
.reveal-enabled .reveal-l { opacity: 0; transform: translateX(-42px); }
.reveal-enabled .reveal-r { opacity: 0; transform: translateX(42px); }

/* Transitions are switched on one frame after the hidden state lands, so the
   initial hide is instant. Without this the elements would animate from their
   visible default down to hidden, i.e. fade out before fading back in. */
.reveal-ready .reveal,
.reveal-ready .reveal-l,
.reveal-ready .reveal-r {
  transition: opacity 0.72s var(--ease), transform 0.72s var(--ease);
}

.reveal-enabled .reveal.in,
.reveal-enabled .reveal-l.in,
.reveal-enabled .reveal-r.in { opacity: 1; transform: none; }

.d1 { transition-delay: 0.08s; }
.d2 { transition-delay: 0.16s; }
.d3 { transition-delay: 0.24s; }
.d4 { transition-delay: 0.32s; }
.d5 { transition-delay: 0.40s; }
.d6 { transition-delay: 0.48s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  :root { --section-y: 72px; --section-y-sm: 44px; --header-gap: 38px; }

  .page-hero { padding: 132px 0 72px; }

  .hero-inner,
  .intro-grid,
  .why-inner,
  .about-story-inner,
  .contact-inner { grid-template-columns: 1fr; gap: 52px; }

  .hero {
    text-align: center;
    min-height: 0;
    padding: 128px 0 92px;
  }
  .hero-content { max-width: 100%; }
  .hero-cta, .hero-trust { justify-content: center; }
  .hero-visual { display: none; }

  /* Each slide gets its own mobile focal point rather than inheriting the
     desktop one. Slide 1 uses 78% rather than the old "right": the mobile hero
     is much taller than that landscape crop, and anchoring hard right pushed
     the clinician out of frame on narrow phones, leaving only the door. */
  .hero-slide--arrival      { --slide-pos: 78% center; }
  .hero-slide--conversation { --slide-pos: center 30%; }
  .hero-slide--assessment   { --slide-pos: center 34%; }

  /* The copy is centred at this breakpoint, so the left-side text shield is
     replaced by an even wash and the controls move under the copy. */
  .hero-overlay::after {
    background: linear-gradient(180deg, rgba(14,28,50,0.22) 0%, rgba(14,28,50,0.10) 50%, rgba(14,28,50,0.30) 100%);
  }
  .hero-controls { justify-content: center; }

  /* Single-column .content-split would otherwise stretch a photo to the full
     container width (829x622 at this breakpoint), which dominates the page. */
  .photo-card { max-width: 620px; margin-left: auto; margin-right: auto; }

  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }

  .services-grid,
  .benefits-grid,
  .values-grid,
  .team-grid { grid-template-columns: repeat(2, 1fr); }

  .steps { grid-template-columns: 1fr 1fr; }
  .steps::before { display: none; }

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

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

  /* Three supporting-service photos stay on one row here; at 768px they stack
     with the rest of the grids below. */
  .support-features { gap: 18px; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2)::after { display: none; }

  .svc-detail.alt .svc-detail-inner { direction: ltr; }
  .svc-detail-inner { grid-template-columns: 1fr; gap: 48px; }

  .intro-float-badge { position: static; margin-top: 20px; }
  .why-float { right: 0; }
}

/* The desktop nav needs ~900px to lay out; below that the logo was being
   squeezed out of its natural ratio. Switch to the hamburger before that
   happens, independently of the layout breakpoints below. */
@media (max-width: 960px) {
  .nav-links, .nav-phone { display: none; }
  .nav-toggle { display: flex; }
}

@media (max-width: 768px) {
  :root { --section-y: 56px; --section-y-sm: 36px; --header-gap: 32px; }

  .page-hero {
    padding: 116px 0 60px;
    background-position: center, var(--page-hero-position-mobile, var(--page-hero-position, var(--page-hero-pos, center)));
    /* A page may supply a portrait crop of the SAME scene for phones. Only the
       matched rule resolves, so exactly one hero image is ever downloaded.
       Pages that do not set --page-hero-img-mobile keep their desktop image. */
    background-image: var(--grad-hero), var(--page-hero-img-mobile, var(--page-hero-img, none));
  }

  .hero { padding: 112px 0 84px; }

  .services-grid,
  .benefits-grid,
  .values-grid,
  .team-grid,
  .steps,
  .testimonials-grid,
  .serve-grid,
  .support-features,
  .stats-grid,
  .form-row { grid-template-columns: 1fr; }

  /* Footer stays two-up here; stacking all five columns made it 1400px tall. */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px 28px; }
  .footer-brand { grid-column: 1 / -1; }

  .stat-item::after { display: none; }

  .cta-contacts { flex-direction: column; align-items: center; gap: 24px; }

  .form-wrap { padding: 32px 22px; }
  .contact-inner { grid-template-columns: 1fr; gap: 48px; }

  .trust-bar-inner { gap: 20px; }
  .trust-sep { display: none; }

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

  .why-float { position: static; margin-top: -16px; }
  /* Mobile WebP is now cropped to the subject area (y=650–1950 of original).
     aspect-ratio matches the 600×435 crop; object-position centers it. */
  .why-img-wrap { aspect-ratio: 4/3; }
  .why-photo    { object-position: center center; }
}

@media (max-width: 520px) {
  .container { padding: 0 18px; }

  /* Logo and CTA are both flex-shrink:0, so they must be sized to fit rather
     than squeezed: at 390px the row is logo + gap + CTA + hamburger. */
  .nav-logo img,
  .navbar.scrolled .nav-logo img { height: 30px; }
  .nav-inner { gap: 12px; }
  .nav-right { gap: 10px; }
  .nav-right .btn { padding: 9px 14px; font-size: 10.5px; letter-spacing: 0.05em; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }
  .cta-btns { flex-direction: column; align-items: center; }
  .cta-btns .btn { width: 100%; max-width: 300px; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .insurance-pills { gap: 10px; }
  /* Prevent any standalone button from blowing out its container */
  .btn { white-space: normal; max-width: 100%; }
}

/* Narrow phones (360px and below): the logo, CTA and hamburger no longer fit
   on one row, and the hamburger must never be clipped. The mobile menu still
   opens with a full-width "Request a Visit" button, so the CTA is one tap
   away rather than lost. */
@media (max-width: 360px) {
  .nav-right > .btn { display: none; }
}

/* ============================================================
   ACCESSIBILITY & LEGAL PAGES (Phase 4)
   ============================================================ */
/* Screen-reader-only utility */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Skip to content link */
.skip-link {
  position: fixed; top: 8px; left: 8px;
  z-index: 3000;
  background: var(--navy); color: #fff;
  padding: 10px 18px; border-radius: var(--r-sm);
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translateY(0); outline: 3px solid var(--gold); outline-offset: 2px; }

/* Keep anchored/focused targets clear of the sticky navbar */
#main-content { outline: none; }
:target { scroll-margin-top: 96px; }
main [id] { scroll-margin-top: 96px; }

/* External-link indicator */
.external-link i, .external-link .ic { font-size: 0.8em; margin-left: 4px; }

/* ---- Legal / document pages ---- */
.legal-body { padding: var(--section-y) 0; background: var(--section-white); }
.legal-layout { max-width: 820px; margin: 0 auto; }
.legal-updated {
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  letter-spacing: 0.02em; color: var(--text-muted);
  margin-bottom: 8px;
}
.doc-actions { margin: 8px 0 34px; }
.btn-print {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  color: var(--navy); background: var(--section-blue-soft);
  border: 1px solid var(--border-cool); border-radius: var(--r-sm);
  padding: 9px 16px; cursor: pointer;
}
.btn-print:hover { background: #e2ebf6; }

/* Table of contents */
.legal-toc {
  background: var(--section-soft);
  border: 1px solid var(--border-cool);
  border-radius: var(--r-md);
  padding: 22px 26px; margin-bottom: 40px;
}
.legal-toc h2 {
  font-family: var(--font-ui) !important; font-size: 12px !important;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--navy); margin-bottom: 14px;
}
.legal-toc ol { list-style: decimal; padding-left: 20px; columns: 2; column-gap: 32px; }
.legal-toc li { margin-bottom: 8px; break-inside: avoid; }
.legal-toc a { color: var(--text-warm); font-size: 14px; }
.legal-toc a:hover { color: var(--gold); text-decoration: underline; }
@media (max-width: 600px) { .legal-toc ol { columns: 1; } }

/* Legal content typography */
.legal-content { font-size: 16px; line-height: 1.75; color: var(--text-warm); }
.legal-content h2 {
  font-size: clamp(22px, 3vw, 28px); margin: 44px 0 14px;
  padding-top: 12px; scroll-margin-top: 96px;
}
.legal-content h2:first-of-type { margin-top: 8px; }
.legal-content h3 { font-size: 19px; margin: 26px 0 10px; }
.legal-content p { font-size: 16px; margin-bottom: 16px; color: var(--text-warm); }
.legal-content ul, .legal-content ol { margin: 0 0 18px 0; padding-left: 24px; }
.legal-content ul { list-style: disc; }
.legal-content ol { list-style: decimal; }
.legal-content li { margin-bottom: 9px; line-height: 1.7; }
.legal-content a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.legal-content a:hover { color: var(--gold); }
.legal-content strong { color: var(--navy); }

/* Draft review banner */
.draft-banner {
  background: #FBEEEE;
  border: 1px solid rgba(178,58,58,0.3);
  border-left: 5px solid #B23A3A;
  border-radius: var(--r-md);
  padding: 18px 22px; margin-bottom: 34px;
  display: flex; gap: 14px; align-items: flex-start;
}
.draft-banner i, .draft-banner .ic { color: #A83232; font-size: 20px; margin-top: 2px; }
.draft-banner strong { color: #8f2a2a; display: block; margin-bottom: 3px; font-family: var(--font-ui); }
.draft-banner p { margin: 0; font-size: 14px; color: #6d3232; }

/* Open Payments website notice (homepage + notices page) */
.op-notice {
  background: var(--section-blue-soft);
  border: 1px solid var(--border-cool);
  border-radius: var(--r-lg);
  padding: 30px 34px;
  max-width: 960px; margin: 0 auto;
}
.op-notice h2 {
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy);
  margin-bottom: 12px;
}
.op-notice p { font-size: 15px; line-height: 1.7; color: var(--text-warm); margin-bottom: 14px; }
.op-notice a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.op-notice a:hover { color: var(--gold); }
.op-notice .op-link { display: inline-flex; align-items: center; gap: 7px; }

.print-only { display: none; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-l, .reveal-r { opacity: 1 !important; transform: none !important; }
  /* Belt and braces: main.js already skips adding .facts-animate under
     reduced motion, so the facts render at their final values immediately. */
  .facts-animate .fact-item { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .navbar, .mobile-nav, .skip-link, .footer, .cta-section,
  .doc-actions, .breadcrumb, .op-notice, .page-hero .label-tag { display: none !important; }

  body { background: #fff !important; color: #000 !important; }

  .page-hero {
    background: none !important;
    color: #000 !important;
    min-height: 0 !important;
    padding: 0 0 10px !important;
    text-align: left !important;
  }
  .page-hero::before, .page-hero::after { display: none !important; }
  .page-hero h1, .page-hero h1 em, .page-hero .lead {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    background: none !important;
  }
  .legal-body, .legal-content, .legal-content p, .legal-content li { color: #000 !important; }
  .legal-body { padding: 0 !important; }
  .legal-content h2, .legal-content h3, .legal-content strong { color: #000 !important; }
  .legal-toc { border: 1px solid #999; }
  .draft-banner { border: 2px solid #000; background: #fff !important; }
.draft-banner i, .draft-banner .ic, .draft-banner strong, .draft-banner p { color: #000 !important; }
  .print-only { display: block !important; margin-bottom: 16px; font-size: 12px; }
  a { color: #000 !important; text-decoration: underline; }
  /* Show URLs for external links in print */
  .legal-content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; word-break: break-all; }
  main [id] { scroll-margin-top: 0; }
  section { break-inside: auto; }
  h2, h3 { break-after: avoid; }
}