/* ==========================================================================
   Carevana Home Health — Design Tokens
   Colors pulled directly from the Carevana Brand Guidelines (Dec 2021):
   Navy #273067, Coral #EB5F5F, Soft Grey #F2F2F2. Typefaces kept from the
   original design direction: Fraunces (display) + Inter (body) + IBM Plex
   Mono (labels/data).
   ========================================================================== */

:root {
  /* Color — from brand guidelines, page 9 */
  --navy: #273067;
  --coral: #EB5F5F;
  --soft-grey: #F2F2F2;

  --bg: var(--soft-grey);
  --surface: #FFFFFF;
  --ink: var(--navy);
  --ink-soft: #565F82;
  --ink-faint: #8B92AE;
  --primary: var(--navy);
  --primary-dark: #1B2148;
  --primary-tint: #E8E9F1;
  --accent: var(--coral);
  --accent-tint: #FDECEC;
  --line: #E1E1E1;
  --line-strong: #CDCFDC;
  --focus: #1E67C7;

  /* Type — kept from the original design (client likes these) */
  --font-display: "Fraunces", "Iowan Old Style", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* Scale */
  --step--1: clamp(0.83rem, 0.8rem + 0.1vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.35rem + 0.7vw, 1.9rem);
  --step-3: clamp(1.9rem, 1.6rem + 1.3vw, 2.6rem);
  --step-4: clamp(2.4rem, 1.9rem + 2.2vw, 3.6rem);
  --step-5: clamp(3rem, 2.2rem + 3.6vw, 5rem);

  /* Layout */
  --max-w: 1180px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --space-section: clamp(3.5rem, 3rem + 2vw, 7rem);
}

@media (prefers-color-scheme: dark) {
  :root { color-scheme: light; }
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--step-5); font-weight: 500; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }

p { margin: 0 0 1em; color: var(--ink-soft); }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  margin: 0 0 1em;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 3px;
  background: var(--accent);
  display: inline-block;
}

.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* ---------- Top utility bar ---------- */
.topbar {
  background: var(--primary-dark);
  color: #F2F2F2;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.topbar .wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  gap: 1rem;
}
.topbar a { text-decoration: none; opacity: 0.92; }
.topbar a:hover { opacity: 1; text-decoration: underline; }
.topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.topbar-item svg { width: 13px; height: 13px; flex: none; }

/* ---------- Header / Nav ---------- */
header.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 0;
  position: relative;
}
.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.logo img { height: 42px; width: auto; }

.nav-links {
  display: flex;
  gap: 2.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
}
.nav-links a {
  text-decoration: none;
  color: var(--ink-soft);
  padding: 0.3rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"] {
  color: var(--ink);
  border-color: var(--accent);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn-block { width: 100%; }

/* Hamburger toggle: morphs into an X when open, so the same tap target
   works as both "open" and "close" — no separate close button needed. */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  flex: none;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  margin: 5px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Base state: the mobile dropdown is hidden at every width until phone
   mode below turns it into a real toggle-able panel. Missing a base
   rule here was the bug that made it render as a permanent bullet list
   stacked under the desktop nav. */
.mobile-panel { display: none; }

/* Phone mode triggers on EITHER a narrow width (portrait phones) OR a
   short height (phones in landscape can be wider than 860px — e.g. a
   Pixel 8 landscape is ~915px wide — but they're still phones, so the
   short-height check catches that case and keeps the hamburger instead
   of flipping to full desktop tabs). Tablets stay comfortably above
   500px tall even in landscape, so they correctly keep the full tabs. */
@media (max-width: 860px), (max-height: 500px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .logo img { height: 32px; }
  .mobile-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px -12px rgba(30,38,33,0.15);
    max-height: calc(100vh - 100%);
    overflow-y: auto;
  }
  .mobile-panel.open { display: block; }
  .mobile-panel ul {
    list-style: none; margin: 0; padding: 1rem 1.5rem;
    display: flex; flex-direction: column; gap: 1rem;
  }
  .mobile-panel a { text-decoration: none; color: var(--ink); font-size: 1.05rem; }
  .mobile-panel .btn { margin-top: 0.5rem; }
}

/* Portrait phones (and portrait tablets, which have plenty of width to
   spare): stack the Call button onto its own full-width row beneath the
   logo/hamburger row, showing the complete phone number. */
@media (max-width: 860px) and (min-height: 501px) {
  .nav { flex-wrap: wrap; row-gap: 0.7rem; }
  .logo { order: 1; }
  .nav-toggle { order: 2; }
  .nav-cta { display: contents; }
  .nav-cta .btn {
    order: 3;
    flex: 1 1 100%;
    justify-content: center;
    padding: 0.7rem 0.85rem;
    font-size: 0.88rem;
  }
}

/* Landscape phones (short height): a full-width second row would eat too
   much of the limited vertical space and risks overlapping page content
   below, so keep everything compact on a single row instead, with a
   short "Call" label rather than the full number. */
/* Landscape phones (short height): plenty of horizontal room here (a
   phone is much wider than tall in landscape), so keep the single-row
   layout but show the full phone number rather than shortening it —
   only the earlier two-row *stacking* was the height problem, not the
   button's own width. */
@media (max-height: 500px) {
  .nav-cta { gap: 0.6rem; }
  .nav-cta .btn { padding: 0.55rem 1rem; font-size: 0.88rem; }
  .topbar { padding: 0; }
  .topbar .wrap { padding-top: 0.3rem; padding-bottom: 0.3rem; }
}

@media (max-width: 360px) and (min-height: 501px) {
  .logo img { height: 28px; }
  .nav-cta { gap: 0.35rem; }
  .nav-cta .btn { padding: 0.55rem 0.7rem; font-size: 0.8rem; }
  .topbar { font-size: 0.68rem; }
}

/* ---------- Hero ---------- */
.hero {
  padding: clamp(3rem, 4vw, 5.5rem) 0 var(--space-section);
}
.hero-inner { max-width: 620px; }
.hero h1 { margin-bottom: 0.4em; }
.hero .lede {
  font-size: var(--step-1);
  color: var(--ink-soft);
  max-width: 46ch;
}
.hero-actions {
  display: flex;
  gap: 1rem;
  margin: 2rem 0 2.5rem;
  flex-wrap: wrap;
}

/* Full-bleed photo hero (homepage): image fills the section behind the
   text, with a navy scrim so the text stays readable over any part of
   the photo — same pattern as the reference example, adapted to our
   brand color instead of a generic dark overlay. */
.hero-photo {
  position: relative;
  overflow: hidden;
  background: var(--primary-dark);
  padding: 0;
}
.hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
}
/* The photo and the text block share the same grid cell (row 1), so the
   row's height is driven by hero-photo-text's real content, and hero-bg
   (height: 100%) stretches to match it automatically — no JS, no guessed
   pixel height, and no reference-point issues from breaking out of a
   narrow centered column. hero-photo-actions sits in row 2, in normal
   flow below, on the plain background. */
.hero-photo-text {
  grid-row: 1;
  grid-column: 1;
  position: relative;
  z-index: 1;
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.hero-bg {
  grid-row: 1;
  grid-column: 1;
  /* Absolutely positioned grid items are explicitly excluded from the
     grid's auto-row-height calculation (per the CSS Grid spec), while
     grid-row/grid-column placement still sizes and positions them to
     exactly match that cell. Without this, a non-absolute hero-bg
     contributes its own image's intrinsic aspect ratio to the row's
     height — harmless for the wide homepage photo, but it blew the
     row way out on the About page's nearly-square image, creating a
     large gap between the text and the buttons/next section below. */
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(20,25,58,0.88) 0%,
    rgba(20,25,58,0.74) 42%,
    rgba(20,25,58,0.5) 72%,
    rgba(20,25,58,0.22) 100%);
}
/* Lighter scrim for pages whose source photo is already dark/blue-toned
   (like the About page's duotone graphic) — the standard scrim made an
   already-dark image nearly invisible. */
.hero-photo-light .hero-overlay {
  background: linear-gradient(100deg,
    rgba(20,25,58,0.55) 0%,
    rgba(20,25,58,0.42) 45%,
    rgba(20,25,58,0.28) 100%);
}
/* Push the crop down at every size so the "PATIENT + CARE = CAREVANA"
   graphic (which sits roughly 60% down the source photo) lands below
   the text instead of directly behind it. */
.hero-photo-light .hero-bg img { object-position: center 78%; }
/* The About page photo's "PATIENT + CARE = CAREVANA" graphic sits in the
   lower-middle of the source image. On wide desktop screens the text is
   short (wraps to fewer lines), so the grid row auto-sizes short too —
   correctly avoiding a gap, but a short, very wide crop of a near-square
   photo ends up showing only its top portion, cropping the graphic out
   entirely. Giving the row a bit of guaranteed height on wide screens
   only, plus shifting the visible crop down, keeps the graphic in frame
   without reintroducing the gap problem on narrower/taller layouts. */
@media (min-width: 1000px) {
  .hero-photo-light .hero-photo-text { min-height: 560px; }
}
.hero-photo .wrap { position: relative; z-index: 2; }
.hero-photo .hero-inner { max-width: 540px; margin-left: 0; margin-right: auto; }
.hero-photo h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 2.9rem); }
.hero-photo .eyebrow { color: var(--accent-tint); text-shadow: 0 1px 10px rgba(0,0,0,0.6); }
.hero-photo .eyebrow::before { background: var(--accent); }
.hero-photo h1 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.5); }
.hero-photo .lede { color: rgba(255,255,255,0.96); text-shadow: 0 1px 12px rgba(0,0,0,0.6); }
.hero-photo .pulse-divider path { stroke: var(--accent); }
.hero-photo .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.55); }
.hero-photo .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.hero-photo .btn-primary { background: var(--accent); }
.hero-photo .btn-primary:hover { background: #D9482F; }
.hero-photo .chip {
  background: rgba(20,25,58,0.62);
  color: #fff;
  border-color: rgba(255,255,255,0.28);
}
.hero-photo-actions {
  grid-row: 2;
  grid-column: 1;
  padding-top: 1rem;
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.hero-photo .pulse-divider { margin: 0 0 1rem; }
.hero-photo-actions .hero-actions { margin: 0 0 1.5rem; }
@media (max-width: 700px), (max-height: 500px) {
  .hero-bg img { object-position: center 10%; }
  .hero-overlay {
    background: linear-gradient(165deg,
      rgba(20,25,58,0.82) 0%,
      rgba(20,25,58,0.6) 50%,
      rgba(20,25,58,0.42) 100%);
  }
  .hero-photo-light .hero-overlay {
    background: linear-gradient(165deg,
      rgba(20,25,58,0.5) 0%,
      rgba(20,25,58,0.38) 55%,
      rgba(20,25,58,0.26) 100%);
  }
  .hero-photo .hero-inner { max-width: none; }
  .hero-photo h1 { font-size: clamp(1.7rem, 1.3rem + 3vw, 2.4rem); }
  .hero-photo-actions {
    padding-top: 0.75rem;
    padding-bottom: 2.5rem;
  }
  .hero-photo .pulse-divider { margin: 0 0 0.75rem; }
  .hero-photo-actions .hero-actions { margin: 0 0 1.5rem; }
}

.pulse-divider {
  width: 100%;
  max-width: 640px;
  height: 48px;
  margin: 1rem 0 2.5rem;
  overflow: visible;
}
.pulse-divider path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: draw 1.6s ease-out 0.2s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.trust-chips {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 0.7rem 1rem;
}
@media (max-width: 480px) { .trust-chips { grid-template-columns: max-content; } }
.chip {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--primary-dark);
  background: var(--primary-tint);
  border: 1px solid #D2DED7;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  text-align: center;
}

/* ---------- Sections ---------- */
section { padding: var(--space-section) 0; }
.section-head { max-width: 640px; margin-bottom: 2.75rem; }
.section-alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---------- Services grid ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.service-card {
  background: var(--surface);
  padding: 2rem 1.8rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.service-card:hover { background: var(--accent-tint); }
.service-card .icon { width: 34px; height: 34px; color: var(--coral); }
.service-card h3 { font-size: 1.1rem; margin-bottom: 0.2em; }
.service-card p { font-size: 0.92rem; margin: 0; }
.service-card .go {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent);
  letter-spacing: 0.02em;
}

/* ---------- Why / features columns ---------- */
.cols-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem;
}
.feature .num {
  font-family: var(--font-mono);
  color: var(--ink-faint);
  font-size: 0.85rem;
  margin-bottom: 0.6rem;
  display: block;
}
.feature h3 { margin-bottom: 0.4em; }

/* ---------- Testimonials ---------- */
.google-reviews-embed { min-height: 200px; }
.testimonial-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.testimonial {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.8rem;
}
.testimonial p { color: var(--ink); font-size: 1rem; font-style: italic; }
.testimonial-meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.2rem;
}
.avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--primary-tint);
  color: var(--primary-dark);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
}
.testimonial-meta .name { font-weight: 600; font-size: 0.9rem; }
.testimonial-meta .role { font-size: 0.8rem; color: var(--ink-faint); }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--primary-dark);
  color: #F2F2F2;
}
.cta-band h2, .cta-band p { color: #F2F2F2; }
.cta-band .eyebrow { color: var(--accent-tint); }
.cta-band .eyebrow::before { background: var(--accent); }

/* ---------- Forms ---------- */
.form-grid {
  display: grid;
  gap: 1.1rem;
  max-width: 560px;
}
.field label {
  display: block;
  font-size: 0.85rem;
  font-family: var(--font-mono);
  margin-bottom: 0.4rem;
  color: inherit;
  opacity: 0.85;
}
.field input, .field textarea, .field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}
.cta-band .field input, .cta-band .field textarea, .cta-band .field select {
  border-color: rgba(239,237,230,0.3);
  background: rgba(255,255,255,0.06);
  color: #fff;
}
.cta-band .field input::placeholder, .cta-band .field textarea::placeholder { color: rgba(239,237,230,0.5); }
.field textarea { resize: vertical; min-height: 120px; }
.consent {
  display: flex;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: inherit;
  opacity: 0.85;
  align-items: flex-start;
}
.consent input { margin-top: 0.25rem; }
.consent a { text-decoration: underline; }
.form-note { font-size: 0.8rem; opacity: 0.7; margin-top: 0.5rem; }
.form-success {
  display: none;
  background: var(--primary-tint);
  border: 1px solid #D2DED7;
  color: var(--primary-dark);
  padding: 1rem 1.2rem;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
}
.form-success.show { display: block; }

/* ---------- Service detail page ---------- */
.detail-hero { padding-bottom: 3rem; }
.detail-hero .eyebrow { font-size: var(--step-1); }
.detail-hero h1 { font-size: var(--step-4); }
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
  gap: 3rem;
  align-items: start;
}
@media (max-width: 780px) { .detail-grid { grid-template-columns: 1fr; } }
.includes-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.includes-list li {
  display: flex; gap: 0.7rem; align-items: flex-start;
  font-size: 0.95rem; color: var(--ink-soft);
}
.includes-list svg { flex: none; width: 18px; height: 18px; margin-top: 0.15rem; color: var(--accent); }
.side-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.6rem;
}
.side-card h3 { font-size: 1rem; }
.related-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.related-list a {
  text-decoration: none; color: var(--ink-soft); font-size: 0.92rem;
  border-bottom: 1px dotted var(--line-strong);
  display: block; padding-bottom: 0.4rem;
}
.related-list a:hover { color: var(--primary); border-color: var(--primary); }

/* ---------- Service areas ---------- */
.area-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
  gap: 3rem;
  align-items: center;
}
@media (max-width: 860px) { .area-layout { grid-template-columns: 1fr; } }
.area-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.9rem;
}
.area-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  font-weight: 600;
  font-size: 0.98rem;
}
.area-list svg { flex: none; width: 20px; height: 20px; color: var(--accent); }
.map-embed {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-embed img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- Footer ---------- */
footer.site-footer {
  background: var(--primary-dark);
  color: #C7CAE6;
  padding: var(--space-section) 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2rem;
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-accreditation {
  padding: 1.8rem 0 2rem;
  border-top: 1px solid rgba(199,202,230,0.15);
  border-bottom: 1px solid rgba(199,202,230,0.15);
}
.footer-accreditation h4 {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #9EA3D1;
  margin: 0 0 0.6rem;
}
.footer-accreditation p { color: #C7CAE6; margin: 0 0 1rem; font-size: 0.92rem; }
.accreditation-row {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.accreditation-row img { height: 130px; width: auto; }
.accreditation-row img:last-child { height: 116px; }
.footer-logo { margin-bottom: 1rem; }
.footer-logo img { height: 40px; width: auto; display: block; }
.footer-grid h4 {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #9EA3D1;
  margin-bottom: 1rem;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer-grid ul li { display: flex; align-items: flex-start; gap: 0.6rem; color: #C7CAE6; font-size: 0.92rem; }
.footer-grid ul li svg { flex: none; width: 16px; height: 16px; margin-top: 0.15rem; color: #8B92C4; }
.footer-grid a { color: #C7CAE6; text-decoration: none; font-size: 0.92rem; }
.footer-grid a:hover { text-decoration: underline; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.8rem 1rem;
  padding-top: 1.5rem; font-size: 0.8rem; color: #9EA3D1;
}
.footer-bottom a { color: #9EA3D1; }
.footer-legal-links { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.footer-legal-links a {
  text-decoration: none;
  padding: 0 0.85rem;
  border-left: 1px solid rgba(199,202,230,0.25);
  line-height: 1;
}
.footer-legal-links a:first-child { padding-left: 0; border-left: none; }
.footer-legal-links a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .footer-accreditation { padding: 1.5rem 0; }
  .accreditation-row { flex-wrap: wrap; gap: 1.2rem; }
}

/* ---------- Utility page (legal) ---------- */
.legal h2 { font-size: var(--step-2); margin-top: 2em; }
.legal p, .legal li { color: var(--ink-soft); }

/* ---------- 404 ---------- */
.error-page { text-align: center; padding: 6rem 0; }
.error-page .code { font-family: var(--font-mono); color: var(--accent); font-size: 1rem; letter-spacing: 0.1em; }