/* A clearer surface hierarchy for the public site's light appearance. */
:root[data-theme="light"] {
  --paper: #dfe5ed;
  --surface: #e7edf5;
  --consultation-surface: #ffffff;
  --procedure-card: #ffffff;
  --procedure-hover: #f2f6fc;
  --muted: #515e70;
  --blue: #1e54d7;
  --blue-soft: #dce7fb;
  --line: #b4c0ce;
  --line-hover: #8d9fb5;
}

/* One cool vignette follows the video's 4:3 frame at every viewport size. */
:root[data-theme="light"] .hero-motion-art {
  isolation: isolate;
}
:root[data-theme="light"] .hero-motion-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("/assets/hero-motion/hero-vignette-cool-20261008.svg") center top / contain no-repeat;
}
:root[data-theme="light"] .hero-motion-art video {
  position: relative;
  z-index: 1;
  opacity: 1;
  mix-blend-mode: multiply;
}
:root[data-theme="light"] .hero-motion-art::after {
  z-index: 2;
}
@media (max-width: 760px) {
  :root[data-theme="light"] .hero-motion-art::before {
    opacity: 0.8;
  }
  :root[data-theme="light"] .hero-motion-art video {
    opacity: 0.56;
  }
}

/* The planning card uses the light palette, including its numbered steps. */
:root[data-theme="light"] .care-map {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: none;
}
:root[data-theme="light"] .care-map-intro,
:root[data-theme="light"] .care-map-steps p,
:root[data-theme="light"] .care-map-footer {
  color: var(--muted);
}
:root[data-theme="light"] .care-map-number {
  background: var(--canvas);
  color: var(--blue);
  border-color: var(--line);
}
:root[data-theme="light"] .care-map-steps li:first-child .care-map-number {
  background: var(--action);
  color: #ffffff;
  border-color: var(--action);
}
:root[data-theme="light"] .care-map-steps li:not(:last-child)::after {
  background: var(--line);
}
:root[data-theme="light"] .care-map-footer {
  border-color: var(--line);
}
:root[data-theme="light"] .care-dot {
  background: var(--blue);
}

/* White procedure cards stand out against the alternating grey sections. */
:root[data-theme="light"] .services {
  --procedure-panel-refined: var(--canvas);
  --procedure-line-refined: var(--line);
}
:root[data-theme="light"] .services .service-row[open] {
  background: #f3f7fd;
}

/* Neutral, visible brand marks behind the portraits; matched card outlines. */
:root[data-theme="light"] .team {
  --team-card-background: var(--surface);
  --team-watermark-opacity: 0.3;
}
:root[data-theme="light"] .team .team-photo::before {
  filter: grayscale(1) brightness(0.65);
}

/* Both consultation offers have a defined surface, including Coming soon. */
:root[data-theme="light"] .offer-muted {
  background: var(--surface);
}