/* ==========================================================================
   Option C: Pulse
   Dark and immersive (template-parts/c/, js/motion.js, css/motion.css): a
   full-screen hero with a live nerve-network canvas, a rotating headline
   word, glowing buttons, services that slide sideways as you scroll, figures
   that count up, cursor spotlights on glass cards, a timeline that draws
   itself, and a dark-styled map. The whole site, interior pages included,
   is themed dark.
   ========================================================================== */

:root {
  --bg: #08132a;
  --panel: rgba(255, 255, 255, .04);
  --border: rgba(205, 248, 255, .12);
  --text: #c8d3e6;
  --muted: #93a3bd;
  --line: rgba(205, 248, 255, .12);
  --smoke: #0e1d3a;
  --cyan-ink: #5fdcf0;
  --radius-lg: 24px;
}

html, body { overflow-x: clip; }
body { background: var(--bg); color: var(--text); }
h1, h2, h3, h4, h5, h6, strong { color: var(--white); }
a { color: var(--cyan); }
a:hover { color: var(--white); }
.btn { border-radius: 999px; }
.btn-secondary { color: var(--white); border-color: rgba(255, 255, 255, .5); }
.btn-secondary:hover { background: var(--white); color: var(--navy); }
.btn-phone { background: rgba(255, 255, 255, .08); }
.section-white, .section-alt, .section-cream { background: transparent; }
.section-header p { color: var(--muted); }
.section-label { color: var(--cyan); }

/* ---------- Dark glass header ---------- */
.site-header { background: rgba(8, 19, 42, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.header-top { background: transparent; border-bottom: 1px solid var(--line); color: var(--muted); }
.header-top a { color: var(--white); }
.header-main { border-bottom: 1px solid var(--line); }
.logo, .logo-text { color: var(--white); }
.logo-text span { color: var(--cyan-pale); }
.nav-links a { color: #dbe4f3; }
.nav-links a:hover { color: var(--white); }
.nav-links .sub-menu, .nav-links .children { background: #0b1730; border-color: var(--border); }
.mobile-toggle span { background: var(--white); }

/* ---------- Hero ---------- */
.h-hero {
  position: relative; display: grid; align-items: center; min-height: calc(100vh - 122px); overflow: hidden;
  background: radial-gradient(circle at 70% 30%, rgba(7, 204, 236, .18), transparent 50%), radial-gradient(circle at 20% 80%, rgba(58, 100, 168, .3), transparent 50%), var(--bg);
}
.h-network { position: absolute; inset: 0; width: 100%; height: 100%; }
.h-hero-copy { position: relative; max-width: 1000px; padding-top: 4rem; padding-bottom: 6rem; text-align: center; }
.h-hero .section-label { justify-content: center; }
.h-hero h1 { font-size: clamp(3rem, 7.5vw, 6.2rem); line-height: 1.02; letter-spacing: -0.03em; filter: drop-shadow(0 0 28px rgba(7, 204, 236, .3)); }
.h-rotate-line { font: 600 clamp(1.4rem, 2.6vw, 2rem) var(--font-head); color: #dbe4f3; }
.h-rotator { text-align: left; }
.h-rotator > span { color: var(--cyan); }
.h-lead { max-width: 640px; margin: 1rem auto 0; font-size: 1.15rem; color: var(--muted); }
.h-hero .hero-buttons { justify-content: center; }
.h-scroll-cue { position: absolute; bottom: 1.5rem; left: 50%; width: 26px; height: 42px; margin-left: -13px; border: 2px solid rgba(205, 248, 255, .5); border-radius: 14px; }
.h-scroll-cue span { position: absolute; top: 8px; left: 50%; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--cyan); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ---------- Sideways services rail ---------- */
.h-rail-pin { padding: 4.5rem 0; }
.h-rail.is-pinned .h-rail-pin { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; height: 100vh; padding: 0; overflow: hidden; }
.h-rail-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.h-rail-head h2 { margin: 0; }
.h-rail-all { font-family: var(--font-head); font-weight: 700; }
.h-rail-track { display: flex; gap: 1.5rem; padding: .5rem max(1.5rem, calc((100vw - 1200px) / 2 + 1.5rem)); will-change: transform; }
.h-rail:not(.is-pinned) .h-rail-track { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.h-rail:not(.is-pinned) .h-rail-track::-webkit-scrollbar { display: none; }
.h-card {
  flex: 0 0 340px; display: flex; flex-direction: column; gap: .6rem; padding: 1.25rem 1.25rem 1.75rem; scroll-snap-align: start;
  border: 1px solid var(--border); border-radius: 26px; background: var(--panel); color: var(--text);
  transition: border-color .3s ease, transform .4s var(--ease-out);
}
.h-card:hover { transform: translateY(-6px); border-color: rgba(7, 204, 236, .6); color: var(--text); }
.h-card-no { font: 700 .85rem var(--font-head); letter-spacing: .2em; color: var(--cyan); }
.h-card-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; }
.h-card strong { font: 700 1.25rem/1.3 var(--font-head); }
.h-card-text { font-size: .95rem; color: var(--muted); }
.h-rail-bar { height: 3px; margin-top: 2rem; overflow: hidden; border-radius: 3px; background: var(--line); }
.h-rail-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), #3a64a8); transform: scaleX(0); transform-origin: left; }
.h-rail:not(.is-pinned) .h-rail-bar { display: none; }

/* ---------- Figures ---------- */
.h-figures-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.h-figure { display: flex; flex-direction: column; gap: .4rem; padding: 2rem; border: 1px solid var(--border); border-radius: 26px; background: var(--panel); }
.h-figure strong { font: 700 clamp(1.8rem, 3.6vw, 2.8rem)/1.1 var(--font-head); }
.h-figure [data-count] { color: var(--cyan); }
.h-figure-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: .5rem; border-radius: 14px; background: rgba(7, 204, 236, .14); color: var(--cyan); }
.h-figure > span:last-child { color: var(--muted); }

/* ---------- Doctor ---------- */
.h-doctor-card { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 3rem; align-items: center; padding: clamp(2rem, 5vw, 3.5rem); border: 1px solid var(--border); border-radius: 32px; background: var(--panel); }
.h-doctor-ring { padding: 6px; border-radius: 50%; background: conic-gradient(from var(--spin), var(--cyan), transparent 40%, var(--cyan) 70%, transparent); animation: spin 6s linear infinite; }
.h-doctor-ring img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 22%; border: 4px solid var(--bg); border-radius: 50%; }
.h-doctor-role { color: var(--cyan); font-weight: 600; }

/* ---------- Timeline that draws itself ---------- */
.h-line { --p: 1; position: relative; max-width: 760px; margin: 0 auto; padding-left: 4rem; list-style: none; counter-reset: step; }
.motion-ready .h-line { --p: 0; }
.h-line::before, .h-line::after { content: ''; position: absolute; left: 19px; top: 8px; width: 2px; }
.h-line::before { bottom: 8px; background: var(--line); }
.h-line::after { height: calc(var(--p) * (100% - 16px)); background: linear-gradient(var(--cyan), #3a64a8); box-shadow: 0 0 12px var(--cyan); }
.h-line li { position: relative; padding-bottom: 2.5rem; counter-increment: step; }
.h-line li::before {
  content: counter(step); position: absolute; z-index: 1; top: 0; left: -4rem; display: grid; place-items: center; width: 40px; height: 40px;
  border: 2px solid var(--line); border-radius: 50%; background: var(--bg); font: 700 1rem var(--font-head); color: var(--muted);
  transition: border-color .4s ease, color .4s ease, box-shadow .4s ease;
}
.h-line li.is-in::before { border-color: var(--cyan); color: var(--white); box-shadow: 0 0 18px rgba(7, 204, 236, .6); }
.h-line p { margin: 0; color: var(--muted); }

/* ---------- FAQ (markup shared with G) ---------- */
.g-accordion { max-width: 820px; margin: 0 auto; }
.g-accordion details { margin-bottom: .8rem; border: 1px solid var(--border); border-radius: 18px; background: var(--panel); }
.g-accordion summary { position: relative; padding: 1.3rem 4rem 1.3rem 1.5rem; list-style: none; cursor: pointer; font: 700 1.1rem/1.35 var(--font-head); color: var(--white); }
.g-accordion summary::-webkit-details-marker { display: none; }
.g-accordion summary::before, .g-accordion summary::after { content: ''; position: absolute; top: 50%; right: 1.5rem; width: 16px; height: 2px; margin-top: -1px; background: var(--cyan); transition: transform .3s var(--ease-out); }
.g-accordion summary::after { transform: rotate(90deg); }
.g-accordion details[open]:not(.is-closing) summary::after { transform: rotate(0deg); }
.g-answer p { margin: 0; padding: 0 1.5rem 1.4rem; }

/* ---------- Visit ---------- */
.h-visit-wrap { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 32px; }
.h-visit-wrap iframe, .location-map iframe { display: block; width: 100%; height: 480px; border: 0; filter: invert(.92) hue-rotate(180deg) saturate(.6) brightness(.9); }
.h-visit-card { position: absolute; top: 50%; right: 2rem; width: min(360px, 85%); padding: 1.75rem; border: 1px solid var(--border); border-radius: 24px; background: rgba(8, 19, 42, .85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transform: translateY(-50%); }

/* ---------- Shared parts and interior pages, themed dark ---------- */
.cta { background: radial-gradient(circle at 50% 0%, rgba(7, 204, 236, .25), transparent 60%), #0b1a36; }
.footer { background: #050d1d; }
.page-header { background: radial-gradient(circle at 80% 20%, rgba(7, 204, 236, .2), transparent 45%), #0b1a36; }
.entry-content-wide > .section:nth-child(even) { background: rgba(255, 255, 255, .02); }
.feature-card, .treatment-card, .service-detail, .post-card, .location-card, .contact-info-card, .faq-card, .step-card { background: var(--panel); border-color: var(--border); }
.feature-card p, .faq-card p, .step-card p, .value p { color: var(--muted); }
.feature-icon, .value-icon { background: rgba(7, 204, 236, .14); color: var(--cyan); box-shadow: none; }
.service-tag { background: rgba(255, 255, 255, .05); border-color: var(--border); color: var(--text); }
.insurance-list .service-tag { background: rgba(255, 255, 255, .06); }
.form-group label { color: var(--white); }
.form-control { background: rgba(255, 255, 255, .06); border-color: var(--border); color: var(--white); }
.form-control::placeholder { color: var(--muted); }
.contact-phone-lg { color: var(--white); }
.step-number { background: var(--cyan); color: var(--ink); }
.small-print, .form-note, .entry-meta { color: var(--muted); }
.illustration, .about-content img { box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6); }

@media (prefers-reduced-motion: reduce) {
  .h-scroll-cue span, .h-doctor-ring { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .nav-links { background: #0b1730; border-bottom-color: var(--border); }
  .nav-links > li > a { border-bottom-color: var(--border); }
}

@media (max-width: 900px) {
  .h-figures-grid, .h-doctor-card { grid-template-columns: 1fr; }
  .h-doctor-card { text-align: center; }
  .h-doctor-ring { width: 200px; margin: 0 auto; }
  .h-card { flex-basis: 280px; }
  .h-visit-card { position: static; width: auto; margin: 0; transform: none; border-radius: 0; }
  .h-visit-wrap iframe { height: 320px; }
}

@media (max-width: 640px) {
  .h-hero { min-height: calc(100vh - 72px); }
  .h-hero-copy { padding-top: 3rem; padding-bottom: 5rem; }
  .h-line { padding-left: 3.5rem; }
  .h-line li::before { left: -3.5rem; }
}