/* NeuroAxis Clinic - main.css : GENERATED FILE, DO NOT EDIT */
/* Source: assets\css\src  -  rebuild with build-css.ps1 */
/* Built: 2026-09-08 10:40 */

/* ===== tokens.css ===== */
/* ==========================================================================
   NeuroAxis Clinic — Design Tokens
   Single source of truth for colour, type, space, radius, shadow, motion.
   Every value below is derived from the NeuroAxis logo. Do not introduce
   colours outside this file.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     1. BRAND PALETTE  (sampled from the logo)
     --------------------------------------------------------------------- */

  /* Deep navy — the darkest blue in the wordmark / right brain hemisphere */
  --c-navy-900: #071938;
  --c-navy-800: #0c2350;
  --c-navy-700: #122f66;   /* primary surface: header, footer */
  --c-navy-600: #1a3d82;

  /* Royal blue — the mid blue of the circuit traces */
  --c-royal-600: #1b3f95;
  --c-royal-500: #2450b5;
  --c-royal-400: #3f6fd1;

  /* Teal / cyan — the left hemisphere + "Clinic" wordmark */
  --c-teal-700: #217f92;
  --c-teal-600: #2b98ad;
  --c-teal-500: #3aa9bd;   /* primary accent */
  --c-teal-400: #5cc0d2;
  --c-teal-300: #8fd6e3;
  --c-teal-100: #dff2f6;

  /* Neutrals — the soft off-white logo plate and grey nodes */
  --c-white: #ffffff;
  --c-grey-50: #f7f9fc;
  --c-grey-100: #eef2f8;
  --c-grey-200: #e1e8f1;
  --c-grey-300: #cbd6e4;
  --c-grey-400: #9aabc2;
  --c-grey-500: #6b7f9b;
  --c-grey-600: #4c5f79;
  --c-grey-700: #33455c;

  /* Functional (forms only — kept in-family, low saturation) */
  --c-success: #1f8a70;
  --c-error: #b23b47;

  /* ---------------------------------------------------------------------
     2. SEMANTIC ROLES  — use these in components, not raw palette values
     --------------------------------------------------------------------- */
  --color-bg: var(--c-white);
  --color-bg-soft: var(--c-grey-50);
  --color-bg-muted: var(--c-grey-100);
  --color-bg-invert: var(--c-navy-700);

  --color-text: var(--c-navy-900);
  --color-text-body: var(--c-grey-700);
  --color-text-muted: var(--c-grey-500);
  --color-text-invert: var(--c-white);
  --color-text-invert-muted: rgba(255, 255, 255, 0.72);

  --color-primary: var(--c-navy-700);
  --color-primary-hover: var(--c-navy-800);
  --color-accent: var(--c-teal-500);
  --color-accent-hover: var(--c-teal-600);

  --color-border: var(--c-grey-200);
  --color-border-strong: var(--c-grey-300);
  --color-border-invert: rgba(255, 255, 255, 0.14);

  --color-focus: var(--c-teal-500);

  /* Brand gradients (used sparingly: hero wash, icon plates, CTA band) */
  --gradient-brand: linear-gradient(135deg, var(--c-navy-800) 0%, var(--c-royal-600) 55%, var(--c-teal-700) 100%);
  --gradient-accent: linear-gradient(135deg, var(--c-teal-500) 0%, var(--c-royal-500) 100%);
  --gradient-soft: linear-gradient(180deg, var(--c-white) 0%, var(--c-grey-50) 100%);

  /* Glass surfaces — only on top of dark/photographic backgrounds */
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-bg-strong: rgba(255, 255, 255, 0.14);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-blur: blur(14px);

  /* ---------------------------------------------------------------------
     3. TYPOGRAPHY
     Headings: Plus Jakarta Sans (geometric, matches the logo wordmark)
     Body:     Inter (high legibility at small sizes)
     --------------------------------------------------------------------- */
  --font-heading: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Fluid type scale — 1.250 (major third) at mobile, 1.333 at desktop.
     clamp(min, preferred, max) so nothing needs a media query. */
  --fs-xs: 0.75rem;                                   /* 12px  labels      */
  --fs-sm: 0.875rem;                                  /* 14px  captions    */
  /* Body copy is a flat 16px. It was 15px at mobile widths, which is tight
     for reading and — because form controls inherit it — made iOS Safari
     zoom the page whenever a field took focus. Desktop was already 16px, so
     nothing changes there. */
  --fs-base: 1rem;                                    /* 16 body           */
  --fs-md: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);   /* 16→18 lead body   */
  --fs-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);/* 18→22 h5 / lead   */
  --fs-xl: clamp(1.3rem, 1.15rem + 0.7vw, 1.75rem);   /* 21→28 h4          */
  --fs-2xl: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem); /* 24→34 h3          */
  --fs-3xl: clamp(1.85rem, 1.4rem + 1.9vw, 2.75rem);  /* 30→44 h2          */
  --fs-4xl: clamp(2.15rem, 1.5rem + 2.9vw, 3.5rem);   /* 34→56 h1          */

  --lh-tight: 1.14;
  --lh-snug: 1.28;
  --lh-normal: 1.55;
  --lh-relaxed: 1.72;

  --ls-tight: -0.022em;
  --ls-snug: -0.012em;
  --ls-normal: 0;
  --ls-wide: 0.06em;
  --ls-wider: 0.14em;   /* eyebrow / overline labels */

  /* ---------------------------------------------------------------------
     4. SPACING  — 4px base, t-shirt named
     --------------------------------------------------------------------- */
  --sp-1: 0.25rem;   /*  4 */
  --sp-2: 0.5rem;    /*  8 */
  --sp-3: 0.75rem;   /* 12 */
  --sp-4: 1rem;      /* 16 */
  --sp-5: 1.25rem;   /* 20 */
  --sp-6: 1.5rem;    /* 24 */
  --sp-7: 2rem;      /* 32 */
  --sp-8: 2.5rem;    /* 40 */
  --sp-9: 3rem;      /* 48 */
  --sp-10: 4rem;     /* 64 */
  --sp-11: 5rem;     /* 80 */
  --sp-12: 6.5rem;   /* 104 */

  /* Vertical rhythm for <section> — fluid so mobile never feels padded-out */
  --section-y: clamp(3.25rem, 2rem + 6vw, 6.5rem);
  --section-y-sm: clamp(2.25rem, 1.5rem + 3.5vw, 4rem);

  /* ---------------------------------------------------------------------
     5. LAYOUT
     --------------------------------------------------------------------- */
  --container-max: 1200px;
  --container-wide: 1360px;
  --container-narrow: 780px;
  --container-pad: clamp(1.125rem, 0.6rem + 2.4vw, 2.5rem);

  --header-h: 76px;
  --header-h-scrolled: 66px;
  --topbar-h: 40px;

  /* ---------------------------------------------------------------------
     6. RADIUS
     --------------------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* ---------------------------------------------------------------------
     7. SHADOWS  — tinted navy, never neutral black
     --------------------------------------------------------------------- */
  --sh-xs: 0 1px 2px rgba(7, 25, 56, 0.06);
  --sh-sm: 0 2px 8px rgba(7, 25, 56, 0.06), 0 1px 2px rgba(7, 25, 56, 0.04);
  --sh-md: 0 8px 24px rgba(7, 25, 56, 0.08), 0 2px 6px rgba(7, 25, 56, 0.04);
  --sh-lg: 0 18px 44px rgba(7, 25, 56, 0.11), 0 4px 12px rgba(7, 25, 56, 0.05);
  --sh-xl: 0 32px 72px rgba(7, 25, 56, 0.16), 0 8px 20px rgba(7, 25, 56, 0.06);
  --sh-accent: 0 12px 28px rgba(58, 169, 189, 0.32);
  --sh-primary: 0 12px 28px rgba(18, 47, 102, 0.28);
  --sh-inset-line: inset 0 -1px 0 var(--color-border);

  /* ---------------------------------------------------------------------
     8. MOTION
     --------------------------------------------------------------------- */
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-slower: 720ms;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);        /* default UI easing  */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* micro-interactions */

  --t-fast: var(--dur-fast) var(--ease-out);
  --t-base: var(--dur-base) var(--ease-out);
  --t-slow: var(--dur-slow) var(--ease-out);

  /* ---------------------------------------------------------------------
     9. Z-INDEX SCALE — every layer declared here, nowhere else
     --------------------------------------------------------------------- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 250;
  --z-float: 300;
  --z-overlay: 400;
  --z-drawer: 500;
  --z-modal: 600;
  --z-toast: 700;
  --z-skip: 999;
}

/* ===== base.css ===== */
/* ==========================================================================
   NeuroAxis Clinic — Base
   Modern reset + global element defaults + typography scale application.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The mobile drawer and the WhatsApp panel are fixed elements parked
     off-screen to the right. `clip` contains them without creating a scroll
     container the way `hidden` would — so no stray horizontal scroll, and
     position: sticky keeps working. */
  overflow-x: clip;
  /* Anchor targets clear the sticky header */
  scroll-padding-top: calc(var(--header-h) + var(--sp-6));
  -moz-tab-size: 4;
  tab-size: 4;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--color-text-body);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Locks background scroll while the mobile drawer is open */
body.is-locked {
  overflow: hidden;
  /* Compensates for the removed scrollbar so the layout does not shift */
  padding-right: var(--scrollbar-w, 0px);
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Sprite icons carry their own fill/stroke presentation attributes on the
   <symbol>, so colour them with `color:` (currentColor) — never `stroke:`. */
svg {
  stroke-width: 1.7;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

address {
  font-style: normal;
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-text);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

h1 { font-size: var(--fs-4xl); font-weight: var(--fw-extrabold); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-xl);  line-height: var(--lh-snug); letter-spacing: var(--ls-snug); }
h5 { font-size: var(--fs-lg);  line-height: var(--lh-snug); letter-spacing: var(--ls-snug); font-weight: var(--fw-semibold); }
h6 { font-size: var(--fs-md);  line-height: var(--lh-snug); letter-spacing: var(--ls-snug); font-weight: var(--fw-semibold); }

p {
  text-wrap: pretty;
}

p + p {
  margin-top: var(--sp-4);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--t-fast);
}

a:hover {
  color: var(--color-accent-hover);
}

strong, b {
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

small {
  font-size: var(--fs-sm);
}

::selection {
  background-color: var(--c-teal-300);
  color: var(--c-navy-900);
}

/* --------------------------------------------------------------------------
   Focus — visible, on-brand, keyboard-only
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Dark surfaces need a light ring to stay visible */
.u-on-dark :focus-visible,
.site-header--dark :focus-visible,
.site-footer :focus-visible,
.nav-drawer :focus-visible {
  outline-color: var(--c-teal-300);
}

/* --------------------------------------------------------------------------
   Skip link — first tab stop on every page
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: var(--z-skip);
  padding: var(--sp-3) var(--sp-5);
  background-color: var(--color-primary);
  color: var(--color-text-invert);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-lg);
  transform: translateY(calc(-100% - var(--sp-6)));
  transition: transform var(--t-base);
}

.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--color-text-invert);
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--wide   { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

.section {
  position: relative;
  padding-block: var(--section-y);
}

/* Skip layout and paint for sections still well below the fold. These pages
   run to 6000px+, and most of that is never seen before the first scroll.
   contain-intrinsic-size keeps the scrollbar honest so the page does not
   jump as sections come into range. */
@supports (content-visibility: auto) {
  .section--deferred {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
  }
}

.section--sm      { padding-block: var(--section-y-sm); }
.section--flush-t { padding-top: 0; }
.section--flush-b { padding-bottom: 0; }
.section--soft    { background-color: var(--color-bg-soft); }
.section--muted   { background-color: var(--color-bg-muted); }
.section--invert  { background: var(--gradient-brand); color: var(--color-text-invert-muted); }

.section--invert h1,
.section--invert h2,
.section--invert h3,
.section--invert h4,
.section--invert h5,
.section--invert h6 {
  color: var(--color-text-invert);
}

/* Hairline divider between two same-coloured stacked sections */
.section--divided {
  border-top: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   Section heading block  (eyebrow → title → intro)
   -------------------------------------------------------------------------- */
.section-head {
  max-width: 44rem;
  margin-bottom: var(--sp-9);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-accent-hover);
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--gradient-accent);
}

.section--invert .eyebrow { color: var(--c-teal-300); }

.section-head__title {
  margin-bottom: var(--sp-4);
}

.section-head__intro {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

.section--invert .section-head__intro { color: var(--color-text-invert-muted); }

/* --------------------------------------------------------------------------
   Decorative neural background wash (subtle, non-essential)
   -------------------------------------------------------------------------- */
.neural-wash {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

.neural-wash > * {
  position: absolute;
}

.neural-wash svg {
  width: 100%;
  height: 100%;
  fill: none;
}

/* Keeps real content above any decorative layer */
.section > .container {
  position: relative;
  z-index: var(--z-base);
}

/* ===== layout.css ===== */
/* ==========================================================================
   NeuroAxis Clinic — Layout
   Top bar · Header · Desktop navigation · Mobile drawer · Footer
   Desktop nav switches on at 1024px (--bp-nav in js/main.js must match).
   ========================================================================== */

/* ==========================================================================
   TOP UTILITY BAR
   ========================================================================== */
.topbar {
  background-color: var(--c-navy-900);
  color: var(--color-text-invert-muted);
  font-size: var(--fs-xs);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  min-height: var(--topbar-h);
}

.topbar__group {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--color-text-invert-muted);
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
}

a.topbar__item:hover { color: var(--c-teal-300); }

.topbar__item svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--c-teal-400);
}

.social-list {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.social-link {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-circle);
  color: var(--color-text-invert-muted);
  background-color: rgba(255, 255, 255, 0.07);
  transition: background-color var(--t-base), color var(--t-base), transform var(--t-base);
}

.social-link svg { width: 15px; height: 15px; }

.social-link:hover {
  background-color: var(--c-teal-500);
  color: var(--c-navy-900);
  transform: translateY(-2px);
}

@media (max-width: 1023px) {
  .topbar { display: none; }
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) var(--glass-blur);
  -webkit-backdrop-filter: saturate(180%) var(--glass-blur);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--t-base), background-color var(--t-base), border-color var(--t-base);
}

.site-header.is-stuck {
  background-color: rgba(255, 255, 255, 0.97);
  box-shadow: var(--sh-md);
  border-bottom-color: transparent;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--header-h);
  transition: min-height var(--t-base);
}

.site-header.is-stuck .site-header__inner { min-height: var(--header-h-scrolled); }

/* --------------------------------------------------------------------------
   Brand lockup
   -------------------------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex: none;
  color: var(--color-text);
}

.brand:hover { color: var(--color-text); }

/* The mark is detailed (compass points reach well past the brain), so it needs
   a little more height than a simple glyph would to stay legible. */
.brand__mark {
  width: auto;
  height: 52px;
  flex: none;
  transition: transform var(--dur-slow) var(--ease-spring);
}

.brand:hover .brand__mark { transform: scale(1.05) rotate(-2deg); }

.site-header.is-stuck .brand__mark { height: 46px; }

.brand__text { display: grid; line-height: 1.1; }

.brand__name {
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tight);
  color: var(--c-navy-700);
  white-space: nowrap;
}

.brand__name em {
  font-style: normal;
  color: var(--c-teal-600);
}

.brand__sub {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

@media (max-width: 400px) {
  .brand__mark { height: 44px; }
  .brand__name { font-size: 1.0625rem; }
  .brand__sub  { font-size: 0.625rem; letter-spacing: 0.06em; }
}

/* --------------------------------------------------------------------------
   Desktop navigation
   -------------------------------------------------------------------------- */
.nav-desktop { display: none; }

@media (min-width: 1024px) {
  .nav-desktop { display: block; margin-inline-start: auto; }
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item { position: relative; }

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.625rem 0.9375rem;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-snug);
  color: var(--color-text-body);
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: color var(--t-fast), background-color var(--t-fast);
}

/* Animated underline — a teal rule that wipes in from the left */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0.9375rem;
  right: 0.9375rem;
  bottom: 0.25rem;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--gradient-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.nav-link:hover,
.nav-link[aria-expanded="true"] { color: var(--c-navy-700); }

.nav-link:hover::after,
.nav-item:focus-within > .nav-link::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); }

.nav-link[aria-current="page"] {
  color: var(--c-navy-700);
  font-weight: var(--fw-semibold);
}

.nav-link__caret {
  width: 15px;
  height: 15px;
  stroke-width: 2;
  transition: transform var(--t-base);
}

.nav-link[aria-expanded="true"] .nav-link__caret { transform: rotate(180deg); }

/* --- Dropdown panel ------------------------------------------------------ */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 0.625rem);
  /* Right-anchored so a wide panel can never overflow the viewport edge */
  right: -0.5rem;
  z-index: var(--z-dropdown);
  width: min(38rem, calc(100vw - 3rem));
  padding: var(--sp-4);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--t-base),
    transform var(--t-base),
    visibility var(--t-base);
}

/* Invisible bridge so the pointer can travel from link to panel */
.nav-dropdown::before {
  content: "";
  position: absolute;
  top: -0.75rem;
  left: 0;
  right: 0;
  height: 0.75rem;
}

.nav-item.is-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-dropdown__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
  color: var(--color-text-body);
  transition: background-color var(--t-fast), color var(--t-fast);
}

.nav-dropdown__link:hover {
  background-color: var(--c-grey-50);
  color: var(--c-navy-700);
}

.nav-dropdown__link:hover .nav-dropdown__icon {
  background: var(--gradient-accent);
  color: var(--c-white);
}

.nav-dropdown__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--r-xs);
  background-color: var(--c-teal-100);
  color: var(--c-teal-700);
  transition: background var(--t-base), color var(--t-base);
}

.nav-dropdown__icon svg {
  width: 19px;
  height: 19px;
}

.nav-dropdown__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background-color: var(--c-grey-50);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Header actions
   -------------------------------------------------------------------------- */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: none;
}

/* The child selector is deliberate: components.css loads after this file, so a
   bare `.header-actions__cta` would lose to `.btn { display: inline-flex }`. */
.header-actions > .header-actions__cta { display: none; }

@media (min-width: 1024px) {
  .header-actions > .header-actions__cta { display: inline-flex; }
}

/* Compact call button shown on mobile beside the hamburger */
.header-call {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-circle);
  background-color: var(--c-teal-100);
  color: var(--c-teal-700);
  transition: background-color var(--t-base), color var(--t-base), transform var(--t-base);
}

.header-call svg {
  width: 20px;
  height: 20px;
}

.header-call:hover {
  background: var(--gradient-accent);
  color: var(--c-white);
  transform: translateY(-2px);
}

@media (min-width: 1024px) {
  .header-call { display: none; }
}

/* --------------------------------------------------------------------------
   Hamburger
   -------------------------------------------------------------------------- */
.nav-toggle {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  background-color: var(--c-grey-100);
  color: var(--c-navy-700);
  transition: background-color var(--t-base);
}

.nav-toggle:hover { background-color: var(--c-grey-200); }

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
}

.nav-toggle__box {
  position: relative;
  width: 22px;
  height: 16px;
}

.nav-toggle__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: var(--r-pill);
  background-color: currentColor;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) linear, width var(--t-base);
}

.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: 7px; width: 70%; }
.nav-toggle__bar:nth-child(3) { top: 14px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; transform: translateX(-8px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   MOBILE NAVIGATION DRAWER
   ========================================================================== */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background-color: rgba(7, 25, 56, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base), visibility var(--t-base);
}

.nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  width: min(23rem, 88vw);
  background-color: var(--color-bg);
  box-shadow: -24px 0 60px rgba(7, 25, 56, 0.22);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
  overscroll-behavior: contain;
}

.nav-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

@media (min-width: 1024px) {
  .nav-drawer,
  .nav-overlay { display: none; }
}

.nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--color-border);
  flex: none;
}

.nav-drawer__close {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--r-circle);
  background-color: var(--c-grey-100);
  color: var(--c-navy-700);
  transition: background-color var(--t-base), transform var(--t-base);
}

.nav-drawer__close:hover { background-color: var(--c-grey-200); transform: rotate(90deg); }

.nav-drawer__close svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.nav-drawer__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-5);
}

.nav-drawer__list {
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
  display: grid;
  gap: var(--sp-1);
}

.nav-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-4);
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
  color: var(--color-text);
  text-align: left;
  border-radius: var(--r-sm);
  transition: background-color var(--t-fast), color var(--t-fast);
}

.nav-drawer__link:hover { background-color: var(--c-grey-50); color: var(--c-navy-700); }

.nav-drawer__link[aria-current="page"] {
  background-color: var(--c-teal-100);
  color: var(--c-teal-700);
}

.nav-drawer__link svg {
  width: 18px;
  height: 18px;
  flex: none;
  stroke-width: 2;
  transition: transform var(--t-base);
}

.nav-drawer__link[aria-expanded="true"] {
  background-color: var(--c-grey-50);
  color: var(--c-navy-700);
}

.nav-drawer__link[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Accordion sub-menu — height animated by JS via --panel-h */
.nav-drawer__sub {
  display: grid;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-out);
}

.nav-drawer__sub.is-open { max-height: var(--panel-h, 32rem); }

.nav-drawer__sublink {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.75rem var(--sp-4) 0.75rem var(--sp-5);
  margin-inline-start: var(--sp-4);
  border-inline-start: 2px solid var(--color-border);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  transition: color var(--t-fast), border-color var(--t-fast);
}

.nav-drawer__sublink:hover {
  color: var(--c-teal-700);
  border-inline-start-color: var(--c-teal-500);
}

.nav-drawer__sub li:first-child .nav-drawer__sublink { padding-top: var(--sp-3); }
.nav-drawer__sub li:last-child .nav-drawer__sublink  { padding-bottom: var(--sp-4); }

.nav-drawer__actions {
  display: grid;
  gap: var(--sp-3);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--color-border);
}

.nav-drawer__foot {
  flex: none;
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
  background-color: var(--c-grey-50);
  border-top: 1px solid var(--color-border);
}

.nav-drawer__contact {
  display: grid;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
}

.nav-drawer__contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--color-text-muted);
  font-weight: var(--fw-medium);
}

.nav-drawer__contact a:hover { color: var(--c-teal-700); }

.nav-drawer__contact svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--c-teal-600);
}

.nav-drawer__foot .social-list .social-link {
  background-color: var(--c-grey-200);
  color: var(--c-navy-700);
}

.nav-drawer__foot .social-list .social-link:hover {
  background-color: var(--c-teal-500);
  color: var(--c-white);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  position: relative;
  background: linear-gradient(170deg, var(--c-navy-800) 0%, var(--c-navy-900) 100%);
  color: var(--color-text-invert-muted);
  overflow: hidden;
}

.site-footer::before {
  /* Faint neural grid, purely decorative */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(58, 169, 189, 0.16), transparent 42%),
    radial-gradient(circle at 85% 80%, rgba(36, 80, 181, 0.2), transparent 45%);
  pointer-events: none;
}

.site-footer__main {
  position: relative;
  padding-block: var(--sp-11) var(--sp-9);
}

.site-footer__grid {
  display: grid;
  gap: var(--sp-9) var(--sp-8);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: 1.5fr 1.15fr 0.9fr 1.05fr; gap: var(--sp-8); }
}

/* The mark is navy and teal, so on the navy footer it sits on a white chip
   rather than directly on the background. */
.footer-brand__mark {
  height: 76px;
  width: auto;
  margin-bottom: var(--sp-5);
  background-color: var(--c-white);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  box-shadow: var(--sh-md);
}

.footer-brand__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  max-width: 32ch;
  margin-bottom: var(--sp-5);
}

.footer-col__title {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-white);
  margin-bottom: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.footer-col__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(58, 169, 189, 0.5), transparent);
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--color-text-invert-muted);
  transition: color var(--t-fast), transform var(--t-fast), gap var(--t-fast);
}

.footer-links a::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: var(--r-circle);
  background-color: var(--c-teal-500);
  opacity: 0.6;
  transition: opacity var(--t-fast), transform var(--t-fast);
}

.footer-links a:hover {
  color: var(--c-white);
  gap: var(--sp-3);
}

.footer-links a:hover::before { opacity: 1; transform: scale(1.4); }

/* --- OPD locations column ------------------------------------------------ */
.footer-opd {
  display: grid;
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-opd li {
  display: grid;
  gap: 3px;
  padding-inline-start: var(--sp-4);
  border-inline-start: 2px solid rgba(58, 169, 189, 0.45);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: rgba(255, 255, 255, 0.6);
}

.footer-opd strong {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-white);
}

.footer-opd a {
  justify-self: start;
  margin-top: 2px;
  font-weight: var(--fw-semibold);
  color: var(--c-teal-300);
}

.footer-opd a:hover { color: var(--c-white); }

.footer-contact {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.footer-contact__item {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--color-text-invert-muted);
}

.footer-contact__item:hover { color: var(--c-white); }

.footer-contact__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-xs);
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--color-border-invert);
  color: var(--c-teal-400);
  transition: background-color var(--t-base), color var(--t-base);
}

.footer-contact__item:hover .footer-contact__icon {
  background-color: var(--c-teal-500);
  color: var(--c-navy-900);
}

.footer-contact__icon svg {
  width: 16px;
  height: 16px;
}

.footer-contact__label {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1px;
}

.footer-contact__value {
  font-weight: var(--fw-medium);
  word-break: break-word;
}

.site-footer .social-link {
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-border-invert);
}

.site-footer .social-link svg { width: 17px; height: 17px; }

/* --- Disclaimer + bottom bar --------------------------------------------- */
.site-footer__note {
  position: relative;
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--color-border-invert);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: rgba(255, 255, 255, 0.55);
}

.site-footer__bottom {
  position: relative;
  border-top: 1px solid var(--color-border-invert);
  padding: var(--sp-5) 0 calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
}

.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.55);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__legal a { color: rgba(255, 255, 255, 0.62); }
.site-footer__legal a:hover { color: var(--c-teal-300); }

/* Extra bottom room on small screens so the FABs never cover footer links */
@media (max-width: 640px) {
  .site-footer__bottom { padding-bottom: calc(var(--sp-9) + env(safe-area-inset-bottom, 0px)); }
}

/* The footer's "View on Google Maps" link.
   Colour, weight and alignment already come from `.footer-opd a`, which the
   phone link below it also uses - this only lays the icon beside the label
   and keeps the row a comfortable tap target on a phone. */
.footer-opd__map {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* The pair must never split across two lines with the icon stranded. */
  white-space: nowrap;
}

.footer-opd__map svg {
  width: 14px;
  height: 14px;
  flex: none;
}

/* ===== components.css ===== */
/* ==========================================================================
   NeuroAxis Clinic — Components
   Buttons · Cards · Icon plates · Forms · Appointment CTA · Location cards
   ========================================================================== */

/* ==========================================================================
   BUTTONS
   .btn + one variant (--primary | --accent | --outline | --ghost | --white)
   + optional size (--sm | --lg) + optional --block
   ========================================================================== */
.btn {
  --btn-bg: var(--color-primary);
  --btn-fg: var(--color-text-invert);
  --btn-bd: transparent;
  --btn-sh: var(--sh-sm);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.875rem 1.625rem;
  min-height: 48px;                 /* comfortable touch target */
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-pill);
  box-shadow: var(--btn-sh);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--t-fast),
    box-shadow var(--t-base),
    background-color var(--t-base),
    border-color var(--t-base),
    color var(--t-base);
}

/* Micro-interaction: a soft sheen sweeps across on hover */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.22) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform var(--dur-slow) var(--ease-out);
}

.btn:hover::after { transform: translateX(120%); }

.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: 60ms; }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
  transform: none;
}

.btn__icon {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform var(--t-base);
}

.btn:hover .btn__icon--arrow { transform: translateX(3px); }

/* --- Variants ------------------------------------------------------------ */
.btn--primary {
  --btn-bg: var(--color-primary);
  --btn-sh: var(--sh-primary);
}
.btn--primary:hover { --btn-bg: var(--color-primary-hover); box-shadow: 0 16px 34px rgba(18, 47, 102, 0.34); }

.btn--accent {
  --btn-bg: var(--color-accent);
  --btn-fg: var(--c-navy-900);
  --btn-sh: var(--sh-accent);
}
.btn--accent:hover { --btn-bg: var(--c-teal-400); box-shadow: 0 16px 34px rgba(58, 169, 189, 0.4); }

/* On navy/gradient surfaces the accent button needs an edge to separate from
   the teal end of the background wash. */
.appointment-cta .btn--accent,
.site-footer .btn--accent,
.section--invert .btn--accent { --btn-bd: rgba(255, 255, 255, 0.32); }

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--color-primary);
  --btn-bd: var(--color-border-strong);
  --btn-sh: none;
}
.btn--outline:hover {
  --btn-bd: var(--color-accent);
  --btn-fg: var(--color-accent-hover);
  --btn-bg: var(--c-teal-100);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--color-text-body);
  --btn-sh: none;
}
.btn--ghost:hover { --btn-bg: var(--color-bg-muted); --btn-fg: var(--color-primary); }

/* For use on navy / gradient surfaces */
.btn--white {
  --btn-bg: var(--c-white);
  --btn-fg: var(--color-primary);
  --btn-sh: 0 12px 28px rgba(7, 25, 56, 0.28);
}
.btn--white:hover { --btn-fg: var(--color-accent-hover); }

.btn--glass {
  --btn-bg: var(--glass-bg-strong);
  --btn-fg: var(--c-white);
  --btn-bd: var(--glass-border);
  --btn-sh: none;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.btn--glass:hover { --btn-bg: rgba(255, 255, 255, 0.22); }

.btn--whatsapp {
  --btn-bg: #1faa54;
  --btn-fg: var(--c-white);
  --btn-sh: 0 12px 28px rgba(31, 170, 84, 0.3);
}
.btn--whatsapp:hover { --btn-bg: #189046; }

/* --- Sizes --------------------------------------------------------------- */
.btn--sm {
  padding: 0.625rem 1.125rem;
  min-height: 40px;
  font-size: var(--fs-xs);
}
.btn--sm .btn__icon { width: 15px; height: 15px; }

.btn--lg {
  padding: 1.0625rem 2.125rem;
  min-height: 56px;
  font-size: var(--fs-base);
}
.btn--lg .btn__icon { width: 20px; height: 20px; }

.btn--block { display: flex; width: 100%; }

/* --- Text link with arrow ------------------------------------------------ */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-accent-hover);
}

.link-arrow svg {
  width: 16px;
  height: 16px;
  transition: transform var(--t-base);
}

.link-arrow:hover svg { transform: translateX(4px); }

/* ==========================================================================
   BADGES / PILLS
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.4375rem 0.875rem;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  border-radius: var(--r-pill);
  background-color: var(--c-teal-100);
  color: var(--c-teal-700);
  border: 1px solid rgba(58, 169, 189, 0.24);
}

.badge--navy   { background-color: var(--c-grey-100); color: var(--c-navy-700); border-color: var(--color-border); }
.badge--glass  {
  background-color: var(--glass-bg-strong);
  color: var(--c-white);
  border-color: var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.badge__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-circle);
  background-color: currentColor;
  flex: none;
}

/* ==========================================================================
   ICON PLATE — rounded square holding a line icon
   ========================================================================== */
.icon-plate {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: var(--r-md);
  background: var(--c-teal-100);
  color: var(--c-teal-700);
  transition: background var(--t-base), color var(--t-base), transform var(--t-base);
}

.icon-plate svg {
  width: 26px;
  height: 26px;
}

.icon-plate--sm { width: 42px; height: 42px; border-radius: var(--r-sm); }
.icon-plate--sm svg { width: 20px; height: 20px; }

.icon-plate--lg { width: 66px; height: 66px; border-radius: var(--r-lg); }
.icon-plate--lg svg { width: 32px; height: 32px; }

.icon-plate--navy     { background: var(--c-grey-100); color: var(--c-navy-700); }
.icon-plate--gradient { background: var(--gradient-accent); color: var(--c-white); }
.icon-plate--glass {
  background: var(--glass-bg-strong);
  color: var(--c-white);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* ==========================================================================
   CARD — base premium surface
   ========================================================================== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-7);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.card--flush   { padding: 0; overflow: hidden; }
.card--soft    { background-color: var(--color-bg-soft); }
.card--elevate { box-shadow: var(--sh-md); border-color: transparent; }

/* Lift-on-hover — apply only to cards that are actually interactive */
.card--hover:hover,
.card--hover:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: rgba(58, 169, 189, 0.35);
}

.card--hover:hover .icon-plate {
  background: var(--gradient-accent);
  color: var(--c-white);
  transform: scale(1.05);
}

/* Accent rule that grows across the top edge on hover */
.card--rule::before {
  content: "";
  position: absolute;
  top: -1px;
  left: var(--sp-7);
  right: var(--sp-7);
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--gradient-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}

.card--rule:hover::before,
.card--rule:focus-within::before { transform: scaleX(1); }

.card--glass {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: none;
  color: var(--color-text-invert-muted);
}

.card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  margin-bottom: var(--sp-3);
}

.card__text {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

.card__body   { flex: 1; }
.card__footer { margin-top: var(--sp-6); }

/* Whole-card click target that keeps the real link keyboard-accessible */
.card__link-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* ==========================================================================
   CARD GRID
   ========================================================================== */
.card-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
}

.card-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.card-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.card-grid--tight { gap: var(--sp-4); }

/* ==========================================================================
   FEATURE / EXPERTISE CARD
   ========================================================================== */
.feature-card { gap: var(--sp-5); }

.feature-card .card__title { margin-bottom: 0; }

.feature-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

/* ==========================================================================
   OPD / LOCATION CARD  (reusable)
   ========================================================================== */
.location-card {
  gap: var(--sp-5);
  padding: var(--sp-7);
  overflow: hidden;
}

.location-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}

.location-card__titles { min-width: 0; }

.location-card__name {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  color: var(--color-text);
  margin-bottom: var(--sp-1);
}

.location-card__tag {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-accent-hover);
}

.location-card__meta {
  display: grid;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--color-border);
}

.location-card__row {
  margin: 0;
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
}

.location-card__row svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--c-teal-600);
}

.location-card__row strong {
  display: block;
  color: var(--color-text);
  font-weight: var(--fw-semibold);
}

/* Opening hours — one row per schedule block (a location can have several) */
.location-card__hours {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Days above time, always — side-by-side wraps unpredictably between cards
   and makes an otherwise uniform row of locations look ragged. */
.location-card__hours li {
  display: grid;
  gap: 1px;
  padding-bottom: var(--sp-2);
  border-bottom: 1px dashed var(--color-border);
}

.location-card__hours li:last-child { border-bottom: 0; padding-bottom: 0; }

.location-card__days {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.location-card__time {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  white-space: nowrap;
}

.location-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-5);
}

.location-card__actions .btn { flex: 1 1 9rem; }

/* ==========================================================================
   EXPERTISE CARD — icon, title, patient-friendly line, Learn more
   ========================================================================== */
.expertise-card {
  gap: var(--sp-4);
  padding: var(--sp-6);
}

.expertise-card .card__title {
  font-size: var(--fs-md);
  margin-bottom: 0;
}

.expertise-card .card__text {
  font-size: var(--fs-sm);
  flex: 1;
}

.expertise-card .card__footer { margin-top: var(--sp-4); }

/* ==========================================================================
   APPOINTMENT CTA BAND  (reusable)
   ========================================================================== */
.appointment-cta {
  position: relative;
  overflow: hidden;
  background: var(--gradient-brand);
  border-radius: var(--r-2xl);
  padding: clamp(2rem, 1rem + 4vw, 3.75rem);
  color: var(--color-text-invert-muted);
  isolation: isolate;
}

/* Full-bleed variant sits edge-to-edge instead of inside a container */
.appointment-cta--flush { border-radius: 0; }

.appointment-cta__glow {
  position: absolute;
  z-index: -1;
  width: 34rem;
  height: 34rem;
  border-radius: var(--r-circle);
  filter: blur(70px);
  opacity: 0.42;
  pointer-events: none;
}

.appointment-cta__glow--a { top: -18rem; right: -10rem; background: var(--c-teal-500); }
.appointment-cta__glow--b { bottom: -22rem; left: -12rem; background: var(--c-royal-400); opacity: 0.3; }

.appointment-cta__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
}

.appointment-cta__content { flex: 1 1 26rem; }

.appointment-cta__title {
  color: var(--color-text-invert);
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-4);
}

.appointment-cta__text {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  max-width: 34rem;
}

.appointment-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  flex: 0 1 auto;
}

/* On narrow screens both actions go full width so the edges line up */
@media (max-width: 899px) {
  .appointment-cta__actions { width: 100%; }
  .appointment-cta__actions .btn { flex: 1 1 100%; }
}

/* Once there is room, stack the two actions so the band stays balanced
   instead of leaving a hole under a single row of buttons. */
@media (min-width: 900px) {
  .appointment-cta__actions {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    min-width: 17rem;
  }
}

.appointment-cta__note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--color-text-invert-muted);
}

.appointment-cta__note svg {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex: none;
  color: var(--c-teal-300);
}

/* Light variant for pages that already use a dark section above */
.appointment-cta--light {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.appointment-cta--light .appointment-cta__title { color: var(--color-text); }
.appointment-cta--light .appointment-cta__glow  { display: none; }
.appointment-cta--light .appointment-cta__note  { color: var(--color-text-muted); }

/* ==========================================================================
   CONTACT / QUICK INFO TILE
   ========================================================================== */
.info-tile {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

a.info-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: rgba(58, 169, 189, 0.35);
}

.info-tile__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.info-tile__value {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  word-break: break-word;
}

/* ==========================================================================
   FORMS
   ========================================================================== */
.form {
  display: grid;
  gap: var(--sp-5);
}

.form-row {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.field { display: grid; gap: var(--sp-2); }

.field__label {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.field__req {
  color: var(--c-error);
  margin-left: 2px;
}

.field__hint {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.field__control {
  width: 100%;
  padding: 0.875rem 1.0625rem;
  min-height: 50px;
  font-size: var(--fs-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
  appearance: none;
}

.field__control::placeholder { color: var(--c-grey-400); }

.field__control:hover { border-color: var(--c-grey-400); }

.field__control:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(58, 169, 189, 0.18);
}

.field__control:disabled {
  background-color: var(--color-bg-muted);
  cursor: not-allowed;
}

textarea.field__control {
  min-height: 8.5rem;
  resize: vertical;
  line-height: var(--lh-normal);
}

select.field__control {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7f9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px;
  padding-right: 3rem;
  cursor: pointer;
}

/* Invalid state is only shown after the user has interacted */
.field__control[aria-invalid="true"] {
  border-color: var(--c-error);
}

.field__control[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 4px rgba(178, 59, 71, 0.16);
}

.field__error {
  display: none;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-error);
}

.field__error.is-visible { display: block; }

/* Checkbox / consent */
.check {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}

.check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--color-accent);
  cursor: pointer;
}

/* Form-level status message */
.form__status {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  display: none;
}

.form__status.is-visible { display: block; }
.form__status--ok  { background-color: rgba(31, 138, 112, 0.1); color: var(--c-success); }
.form__status--err { background-color: rgba(178, 59, 71, 0.09); color: var(--c-error); }

/* ==========================================================================
   FLOATING ACTION BUTTONS  (WhatsApp + Call)
   ========================================================================== */
.float-actions {
  position: fixed;
  right: clamp(0.875rem, 0.5rem + 1.2vw, 1.5rem);
  bottom: clamp(0.875rem, 0.5rem + 1.2vw, 1.75rem);
  z-index: var(--z-float);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  /* Clears iOS home indicator */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.float-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: var(--r-circle);
  color: var(--c-white);
  box-shadow: 0 10px 26px rgba(7, 25, 56, 0.26);
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--t-base);
}

.float-btn svg { width: 26px; height: 26px; }

.float-btn:hover,
.float-btn:focus-visible {
  transform: translateY(-3px) scale(1.06);
  color: var(--c-white);
  box-shadow: 0 16px 34px rgba(7, 25, 56, 0.3);
}

.float-btn--whatsapp { background-color: #25d366; }
.float-btn--whatsapp:hover { background-color: #1fb857; }

.float-btn--call {
  background: var(--gradient-accent);
}

/* Pulsing halo — draws the eye without moving the button itself */
.float-btn__pulse {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: currentColor;
  opacity: 0.45;
  animation: fab-pulse 2.6s var(--ease-out) infinite;
  pointer-events: none;
  z-index: -1;
}

.float-btn--whatsapp .float-btn__pulse { color: #25d366; }
.float-btn--call .float-btn__pulse     { color: var(--c-teal-500); }

@keyframes fab-pulse {
  0%   { transform: scale(1); opacity: 0.45; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* Desktop label that expands on hover */
.float-btn__label {
  position: absolute;
  right: calc(100% + 0.75rem);
  padding: 0.4375rem 0.8125rem;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  color: var(--c-white);
  background-color: var(--c-navy-800);
  border-radius: var(--r-xs);
  box-shadow: var(--sh-md);
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity var(--t-base), transform var(--t-base);
}

.float-btn:hover .float-btn__label,
.float-btn:focus-visible .float-btn__label {
  opacity: 1;
  transform: translateX(0);
}

/* Back-to-top sits with the FABs but only appears after scrolling */
.float-btn--top {
  background-color: var(--c-white);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  width: 44px;
  height: 44px;
  margin-inline-start: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
}

.float-btn--top svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.float-btn--top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (max-width: 640px) {
  .float-btn { width: 50px; height: 50px; }
  .float-btn svg { width: 24px; height: 24px; }
  .float-btn__label { display: none; }
}

/* ==========================================================================
   WHATSAPP ENQUIRY PANEL
   Opens only on click — never on page load. Anchored above the floating
   actions on desktop; a bottom sheet on small screens.
   ========================================================================== */
.wa-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background-color: rgba(7, 25, 56, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base), visibility var(--t-base);
}

.wa-backdrop.is-open { opacity: 1; visibility: visible; }

/* The sheet treatment — and so the backdrop — is a small-screen behaviour */
@media (min-width: 640px) {
  .wa-backdrop { display: none; }
}

.wa-panel {
  position: fixed;
  z-index: var(--z-modal);
  right: clamp(0.875rem, 0.5rem + 1.2vw, 1.5rem);
  bottom: calc(clamp(0.875rem, 0.5rem + 1.2vw, 1.75rem) + 3.5rem + var(--sp-3));
  display: flex;
  flex-direction: column;
  width: min(23rem, calc(100vw - 2rem));
  max-height: min(34rem, calc(100vh - 9rem));
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.98);
  transform-origin: bottom right;
  transition:
    opacity var(--t-base),
    transform var(--dur-base) var(--ease-out),
    visibility var(--t-base);
}

.wa-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

@media (max-width: 639px) {
  .wa-panel {
    right: 0;
    left: 0;
    bottom: 0;
    width: auto;
    max-height: 88vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    transform: translateY(100%);
  }

  .wa-panel.is-open { transform: none; }
}

.wa-panel__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: none;
  padding: var(--sp-4) var(--sp-5);
  background-color: #1faa54;
  color: var(--c-white);
}

.wa-panel__avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--r-circle);
  background-color: rgba(255, 255, 255, 0.2);
}

.wa-panel__avatar svg { width: 22px; height: 22px; }

.wa-panel__title {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: 1.25;
}

.wa-panel__sub {
  display: block;
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.86);
}

.wa-panel__close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  margin-inline-start: auto;
  border-radius: var(--r-circle);
  background-color: rgba(255, 255, 255, 0.18);
  color: var(--c-white);
  transition: background-color var(--t-base);
}

.wa-panel__close:hover { background-color: rgba(255, 255, 255, 0.32); }
.wa-panel__close svg { width: 18px; height: 18px; stroke-width: 2; }

.wa-panel__body {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Compact form controls — this panel is small */
.wa-panel__body .field__label { font-size: var(--fs-xs); }

.wa-panel__body .field__control {
  min-height: 44px;
  padding: 0.625rem 0.875rem;
  font-size: var(--fs-sm);
}

.wa-panel__body textarea.field__control { min-height: 5rem; }
.wa-panel__body select.field__control { background-position: right 0.75rem center; padding-right: 2.5rem; }

.wa-panel__alt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-border);
}

.wa-panel__note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.wa-panel__note svg {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  flex: none;
  color: var(--c-teal-600);
}

/* ===== sections.css ===== */
/* ==========================================================================
   NeuroAxis Clinic — Section patterns
   Page-level compositions built from the design system.
     1. Hero
     2. Consultation locations
     3. About the doctor
     4. Expertise grid
     5. Why NeuroAxis
     6. Emergency / patient education strip
     7. Appointment section
     8. Blog preview
   ========================================================================== */

/* ==========================================================================
   1. HERO — full-bleed brand gradient, copy left, doctor portrait right
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(118deg, var(--c-navy-900) 0%, var(--c-navy-800) 34%, var(--c-royal-600) 72%, var(--c-teal-700) 100%);
  color: var(--color-text-invert-muted);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(3rem, 2rem + 4vw, 4.5rem);
}

/* Soft light pooling behind the portrait */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -26%;
  right: -8%;
  width: 46rem;
  height: 46rem;
  border-radius: var(--r-circle);
  background: radial-gradient(circle, rgba(92, 192, 210, 0.34) 0%, rgba(92, 192, 210, 0) 66%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -40%;
  left: -14%;
  width: 40rem;
  height: 40rem;
  border-radius: var(--r-circle);
  background: radial-gradient(circle, rgba(36, 80, 181, 0.42) 0%, rgba(36, 80, 181, 0) 70%);
  pointer-events: none;
}

/* Decorative neural field across the whole band */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.5;
}

.hero__bg svg {
  position: absolute;
  top: 50%;
  right: -6%;
  width: min(62rem, 105%);
  height: auto;
  transform: translateY(-50%);
}

.hero__inner {
  position: relative;
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 992px) {
  .hero__inner { grid-template-columns: 1.08fr 0.92fr; }
}

.hero .eyebrow { color: var(--c-teal-300); }

/* No max-width: the grid column bounds the measure and `text-wrap: balance`
   evens the lines out. Sized a step below the global h1 — at the full display
   size this headline breaks into five lines in a half-width column. */
.hero__title {
  margin-block: var(--sp-2) var(--sp-5);
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.9rem);
  color: var(--c-white);
}

/* Accent phrase — a light teal, since the standard gradient text goes dark.
   Kept on one line so the hyphen never falls at a line break. */
.hero__title em {
  font-style: normal;
  color: var(--c-teal-300);
  white-space: nowrap;
}


.hero__text {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: rgba(255, 255, 255, 0.78);
  max-width: 38rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

@media (max-width: 420px) {
  .hero__actions .btn { width: 100%; }
}

/* Trust line under the CTAs — glass, so it sits on the gradient */
.hero__trust {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-3);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.hero__trust-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--r-circle);
  background: var(--gradient-accent);
  color: var(--c-white);
}

.hero__trust-avatar svg { width: 20px; height: 20px; }

.hero__trust-text {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-white);
  line-height: 1.3;
}

.hero__trust-text small {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: rgba(255, 255, 255, 0.66);
}

/* --------------------------------------------------------------------------
   Portrait — sits on a halo of concentric rings, flush to the hero's base
   -------------------------------------------------------------------------- */
.hero__portrait {
  position: relative;
  align-self: end;
  justify-self: center;
  width: 100%;
  max-width: 30rem;
  /* Cancels the section's bottom padding so the figure meets the edge */
  margin-bottom: calc(-1 * clamp(3rem, 2rem + 4vw, 4.5rem));
}

.hero__portrait-halo {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 118%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  pointer-events: none;
}

.hero__portrait-halo::before,
.hero__portrait-halo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-circle);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.hero__portrait-halo::after {
  inset: 12%;
  border-color: rgba(92, 192, 210, 0.3);
}

.hero__portrait-glow {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 92%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: var(--r-circle);
  background: radial-gradient(circle, rgba(92, 192, 210, 0.3) 0%, rgba(92, 192, 210, 0) 68%);
  pointer-events: none;
}

.hero__portrait img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  /* Grounds the cut-out against the gradient */
  filter: drop-shadow(0 32px 48px rgba(7, 25, 56, 0.42));
}

/* --- Framed variant -------------------------------------------------------
   The cut-out treatment above assumes a subject on transparency. A normal
   rectangular photograph needs a frame instead, or it reads as a stray
   screenshot pasted onto the gradient.

   The frame is a card: rounded, hairline-bordered, lifted off the navy by a
   deep shadow, with a teal wash along the top edge tying it to the accent.
   It also sits above the section edge rather than bleeding into it, since a
   clipped bottom corner would look like a mistake.

   Swapping in a real cut-out later is a two-step change: point the src at the
   PNG and drop `hero__portrait--framed` from the element. */
.hero__portrait--framed {
  margin-bottom: 0;
  padding: 0.5rem;
  border-radius: calc(var(--r-lg) + 0.5rem);
  background: linear-gradient(
    160deg,
    rgba(92, 192, 210, 0.28),
    rgba(255, 255, 255, 0.06) 42%,
    rgba(255, 255, 255, 0.02)
  );
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 32px 64px rgba(7, 25, 56, 0.5),
    0 4px 12px rgba(7, 25, 56, 0.3);
}

.hero__portrait--framed img {
  border-radius: var(--r-lg);
  /* A rectangle needs no drop-shadow — the frame casts it instead. */
  filter: none;
}

@media (max-width: 991px) {
  .hero__portrait {
    max-width: 22rem;
    margin-bottom: calc(-1 * clamp(3rem, 2rem + 4vw, 4.5rem));
  }

  .hero__portrait--framed {
    margin-bottom: 0;
  }
}

/* Floating info chips beside the portrait */
.hero__chip {
  position: absolute;
  z-index: var(--z-raised);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--r-md);
  box-shadow: 0 18px 40px rgba(7, 25, 56, 0.32);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  line-height: 1.35;
}

.hero__chip svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--c-teal-600);
}

.hero__chip small {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
}

/* Positioned to clear the figure's head and torso, not sit across them.
   `--b` used to sit at bottom: 24%, which in the supplied photograph lands
   squarely on the name embroidered on the coat — the one part of the image
   that must stay readable. It is pushed to the lower edge, below the badge
   and across the folded arms, where it covers nothing that carries meaning. */
.hero__chip--a { top: 6%; left: -20%; }
.hero__chip--b { bottom: 5%; right: -16%; }

@media (max-width: 1200px) {
  .hero__chip--a { left: -8%; }
  .hero__chip--b { right: -6%; }
}

@media (max-width: 560px) {
  .hero__chip { font-size: 0.6875rem; padding: var(--sp-2) var(--sp-3); }
  .hero__chip--a { top: 2%; left: -2%; }
  .hero__chip--b { bottom: 4%; right: -2%; }
}

/* --------------------------------------------------------------------------
   Scroll cue
   -------------------------------------------------------------------------- */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--sp-6);
  z-index: var(--z-raised);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  transform: translateX(-50%);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.hero__scroll:hover { color: var(--c-white); }

.hero__scroll-ring {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-circle);
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: border-color var(--t-base), background-color var(--t-base);
}

.hero__scroll:hover .hero__scroll-ring {
  border-color: var(--c-teal-300);
  background: rgba(255, 255, 255, 0.16);
}

.hero__scroll-ring svg {
  width: 18px;
  height: 18px;
  animation: scroll-bob 1.9s var(--ease-in-out) infinite;
}

@keyframes scroll-bob {
  0%, 100% { transform: translateY(-3px); opacity: 0.65; }
  50%      { transform: translateY(3px); opacity: 1; }
}

/* Only where there is room between the copy and the portrait */
@media (min-width: 1100px) {
  .hero__scroll { display: flex; }
}

/* ==========================================================================
   2. CONSULTATION LOCATIONS
   ========================================================================== */
.locations-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  align-items: stretch;
}

.locations-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  max-width: 46rem;
  margin: var(--sp-8) auto 0;
  padding: var(--sp-4) var(--sp-5);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.locations-note svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: none;
  color: var(--c-teal-600);
}

/* ==========================================================================
   3. ABOUT THE DOCTOR
   ========================================================================== */
.doctor {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .doctor { grid-template-columns: 0.85fr 1.15fr; }
}

.doctor__media { position: relative; }

.doctor__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--gradient-brand);
  box-shadow: var(--sh-xl);
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--sp-7);
}

.doctor__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder shown until a real photograph is supplied */
.doctor__placeholder {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
  color: rgba(255, 255, 255, 0.82);
}

.doctor__placeholder-mark {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: var(--r-circle);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.doctor__placeholder-mark svg { width: 44px; height: 44px; color: var(--c-white); }

.doctor__placeholder strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  color: var(--c-white);
}

.doctor__placeholder span {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  max-width: 22ch;
  display: block;
}

/* Small card overlapping the portrait */
/* Anchored bottom-LEFT. On the right it landed directly under the name
   embroidered on the coat and crowded it; the left of the frame is clean
   desk, so the card sits there over nothing that has to stay readable. */
.doctor__badge {
  position: absolute;
  left: clamp(-1rem, -2vw, -0.5rem);
  bottom: var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  max-width: 15rem;
}

.doctor__badge svg { width: 22px; height: 22px; flex: none; color: var(--c-teal-600); }

.doctor__badge strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  color: var(--color-text);
}

.doctor__badge span { font-size: var(--fs-xs); color: var(--color-text-muted); }

.doctor__body p + p { margin-top: var(--sp-4); }

.doctor__points {
  display: grid;
  gap: var(--sp-4);
  margin: var(--sp-7) 0 0;
  padding: 0;
  list-style: none;
}

.doctor__points li {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: start;
  gap: var(--sp-3);
  font-size: var(--fs-base);
  color: var(--color-text-body);
}

.doctor__points svg {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--c-teal-600);
}

.doctor__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

/* ==========================================================================
   4. EXPERTISE GRID
   ========================================================================== */
.expertise-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
}

/* The 7th card fills the remaining track on a 4-up row instead of stranding */
@media (min-width: 1140px) {
  .expertise-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   5. WHY NEUROAXIS
   ========================================================================== */
.why-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.why-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-7);
  border-radius: var(--r-lg);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.why-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: rgba(58, 169, 189, 0.35);
}

.why-card:hover .icon-plate {
  background: var(--gradient-accent);
  color: var(--c-white);
}

.why-card__num {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-6);
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  color: var(--c-grey-100);
  pointer-events: none;
}

.why-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  color: var(--color-text);
}

.why-card__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

/* ==========================================================================
   6. EMERGENCY / PATIENT EDUCATION STRIP
   ========================================================================== */
.emergency {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-2xl);
  background: var(--gradient-brand);
  padding: clamp(2rem, 1rem + 4vw, 3.5rem);
  color: var(--color-text-invert-muted);
  isolation: isolate;
}

.emergency::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -14rem;
  right: -8rem;
  width: 32rem;
  height: 32rem;
  border-radius: var(--r-circle);
  background: var(--c-teal-500);
  filter: blur(80px);
  opacity: 0.32;
  pointer-events: none;
}

.emergency__inner {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 900px) {
  .emergency__inner { grid-template-columns: 0.9fr 1.1fr; }
}

.emergency__title {
  color: var(--color-text-invert);
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-4);
}

.emergency__text {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

.emergency__list {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.emergency__list li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--c-white);
}

/* Teal marker with a soft halo — a warning cue that stays on-brand */
.emergency__list li::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: var(--r-circle);
  background-color: var(--c-teal-400);
  box-shadow: 0 0 0 4px rgba(58, 169, 189, 0.22);
}

.emergency__callout {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-white);
}

.emergency__callout svg {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  flex: none;
  color: var(--c-teal-300);
}

/* ==========================================================================
   7. APPOINTMENT SECTION
   ========================================================================== */
.appointment {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 980px) {
  .appointment { grid-template-columns: 0.85fr 1.15fr; }
}

.appointment__aside {
  display: grid;
  gap: var(--sp-5);
}

.appointment__panel {
  padding: var(--sp-7);
  border-radius: var(--r-lg);
  background: var(--gradient-brand);
  color: var(--color-text-invert-muted);
  box-shadow: var(--sh-lg);
}

.appointment__panel h3 {
  color: var(--color-text-invert);
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-3);
}

.appointment__panel p {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.appointment__contacts {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--color-border-invert);
}

.appointment__contact {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-white);
}

.appointment__contact:hover { color: var(--c-teal-300); }

.appointment__contact svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--c-teal-400);
}

.appointment__form {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}

.appointment__form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}

.appointment__form-actions .btn { flex: 1 1 13rem; }

.appointment__disclaimer {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
}

.appointment__disclaimer svg {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  flex: none;
  color: var(--c-teal-600);
}

/* ==========================================================================
   8. BLOG PREVIEW
   ========================================================================== */
.blog-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.blog-card--linked:hover,
.blog-card--linked:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: rgba(58, 169, 189, 0.35);
}

.blog-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--c-grey-100) 0%, var(--c-teal-100) 100%);
  color: var(--c-teal-700);
  overflow: hidden;
}

.blog-card__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card__thumb svg { width: 40px; height: 40px; opacity: 0.55; }

.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
  padding: var(--sp-6);
}

.blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-accent-hover);
}

.blog-card__meta span:not(:first-child) { color: var(--color-text-muted); }

.blog-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--color-text);
}

.blog-card__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  flex: 1;
}

.blog-card__foot { margin-top: var(--sp-2); }

/* Placeholder state — no invented articles, just what is coming */
.blog-card--placeholder .blog-card__thumb { background: var(--c-grey-100); color: var(--c-grey-400); }
.blog-card--placeholder .blog-card__title { color: var(--color-text-muted); }

/* ==========================================================================
   9. BREADCRUMB
   ========================================================================== */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin: 0 0 var(--sp-6);
  padding: 0;
  list-style: none;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.breadcrumb li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: var(--r-circle);
  background-color: var(--c-grey-300);
}

.breadcrumb a {
  color: var(--color-text-muted);
  font-weight: var(--fw-medium);
}

.breadcrumb a:hover { color: var(--color-accent-hover); }

.breadcrumb [aria-current="page"] {
  color: var(--color-text);
  font-weight: var(--fw-semibold);
}

/* ==========================================================================
   10. ABOUT HERO — portrait left, introduction right
   ========================================================================== */
.about-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--gradient-soft);
  padding-block: clamp(2rem, 1rem + 4vw, 4rem) clamp(3rem, 2rem + 5vw, 5.5rem);
}

.about-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -30%;
  right: -14%;
  width: 42rem;
  height: 42rem;
  border-radius: var(--r-circle);
  background: radial-gradient(circle, rgba(58, 169, 189, 0.18) 0%, rgba(58, 169, 189, 0) 68%);
  pointer-events: none;
}

.about-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -40%;
  left: -18%;
  width: 38rem;
  height: 38rem;
  border-radius: var(--r-circle);
  background: radial-gradient(circle, rgba(36, 80, 181, 0.12) 0%, rgba(36, 80, 181, 0) 70%);
  pointer-events: none;
}

.about-hero__inner {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .about-hero__inner { grid-template-columns: 0.8fr 1.2fr; }
}

.about-hero__title { margin-block: var(--sp-2) var(--sp-3); }

.about-hero__subtitle {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--color-accent-hover);
  margin-bottom: var(--sp-5);
}

.about-hero__text {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

.about-hero__text + .about-hero__text { margin-top: var(--sp-4); }

.about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

@media (max-width: 420px) {
  .about-hero__actions .btn { width: 100%; }
}

.about-hero__facts {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  margin-top: var(--sp-8);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--color-border);
}

.about-hero__fact {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.about-hero__fact strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  color: var(--color-text);
}

/* ==========================================================================
   11. PROFESSIONAL PROFILE
   ========================================================================== */
.profile {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 900px) {
  .profile { grid-template-columns: 1.4fr 0.6fr; }

  .profile__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-6));
  }
}

.profile__body p + p { margin-top: var(--sp-4); }

.profile__aside {
  display: grid;
  gap: var(--sp-5);
}

.fact-list {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fact-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
}

.fact-list svg {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--c-teal-600);
}

.fact-list strong {
  display: block;
  color: var(--color-text);
  font-weight: var(--fw-semibold);
}

/* Placeholder panel for details the clinic has not supplied yet.
   Fill it in or delete the whole block — never invent its contents. */
.credentials-note {
  padding: var(--sp-6);
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--r-md);
  background-color: var(--color-bg-soft);
}

.credentials-note__label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.credentials-note__label svg { width: 15px; height: 15px; color: var(--c-teal-600); }

.credentials-note p {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

/* ==========================================================================
   12. CLINICAL APPROACH TIMELINE
   Vertical rail by default; a single horizontal run once all six steps fit.
   ========================================================================== */
.approach__list {
  /* Step count drives the horizontal layout and the rail inset.
     Override per instance, e.g. style="--approach-cols:5". */
  --approach-cols: 6;
  position: relative;
  display: grid;
  gap: var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The rail */
.approach__list::before {
  content: "";
  position: absolute;
  left: 27px;                 /* node centre */
  top: 28px;                  /* starts at the first node */
  bottom: 0;
  width: 2px;
  border-radius: var(--r-pill);
  /* Fades out past the last node instead of trailing into empty space */
  background: linear-gradient(180deg, var(--c-teal-400) 0%, var(--c-royal-500) 78%, transparent 100%);
  opacity: 0.35;
}

.approach__step {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: start;
  /* Steps stretch to the tallest in the row; without this the surplus is
     shared between the auto rows and each step's text starts at a
     different height. */
  align-content: start;
  gap: var(--sp-5);
}

.approach__node {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-circle);
  /* Opaque so the rail does not run through the node */
  background-color: var(--color-bg);
  border: 2px solid var(--c-teal-300);
  color: var(--c-teal-700);
  box-shadow: var(--sh-sm);
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base), transform var(--t-base);
}

.approach__node svg { width: 24px; height: 24px; }

.approach__step:hover .approach__node {
  background: var(--gradient-accent);
  border-color: transparent;
  color: var(--c-white);
  transform: scale(1.06);
}

.approach__num {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  color: var(--color-accent-hover);
}

.approach__title {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  color: var(--color-text);
  margin-bottom: var(--sp-2);
}

.approach__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

@media (min-width: 1180px) {
  .approach__list {
    grid-template-columns: repeat(var(--approach-cols), minmax(0, 1fr));
    gap: var(--sp-5);
  }

  /* Rail runs node-centre to node-centre: half a column inset each side */
  .approach__list::before {
    left: calc(50% / var(--approach-cols));
    right: calc(50% / var(--approach-cols));
    top: 27px;
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, var(--c-teal-400), var(--c-royal-500));
  }

  .approach__step {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: var(--sp-4);
  }
}

/* ==========================================================================
   13. AREAS OF CARE — compact link tiles
   ========================================================================== */
.care-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.care-tile {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.care-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: rgba(58, 169, 189, 0.35);
}

.care-tile:hover .icon-plate {
  background: var(--gradient-accent);
  color: var(--c-white);
}

.care-tile__label {
  flex: 1;
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
  color: var(--color-text);
}

.care-tile__arrow {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--c-teal-600);
  transition: transform var(--t-base);
}

.care-tile:hover .care-tile__arrow { transform: translateX(4px); }

/* ==========================================================================
   14. PATIENT-CENTERED PHILOSOPHY
   ========================================================================== */
.philosophy {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-2xl);
  background: var(--gradient-brand);
  padding: clamp(2rem, 1rem + 4vw, 3.75rem);
  color: var(--color-text-invert-muted);
}

.philosophy::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -16rem;
  left: -6rem;
  width: 34rem;
  height: 34rem;
  border-radius: var(--r-circle);
  background: var(--c-teal-500);
  filter: blur(84px);
  opacity: 0.3;
  pointer-events: none;
}

.philosophy__lead {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--c-white);
  max-width: 30ch;
  margin-bottom: var(--sp-4);
  text-wrap: balance;
}

.philosophy__intro {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  max-width: 52ch;
  margin-bottom: var(--sp-8);
}

.philosophy__grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.philosophy__item {
  padding: var(--sp-6);
  border-radius: var(--r-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.philosophy__item h3 {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-md);
  color: var(--c-white);
  margin-bottom: var(--sp-3);
}

.philosophy__item h3 svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--c-teal-300);
}

.philosophy__item p {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

/* ==========================================================================
   15. PAGE HERO — the light hero used by every inner page
   (the dark gradient hero stays the home page's signature)
   ========================================================================== */
.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--gradient-soft);
  padding-block: clamp(1.75rem, 1rem + 3vw, 3rem) clamp(3rem, 2rem + 5vw, 5rem);
}

.page-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -34%;
  right: -10%;
  width: 42rem;
  height: 42rem;
  border-radius: var(--r-circle);
  background: radial-gradient(circle, rgba(58, 169, 189, 0.18) 0%, rgba(58, 169, 189, 0) 68%);
  pointer-events: none;
}

.page-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -46%;
  left: -14%;
  width: 38rem;
  height: 38rem;
  border-radius: var(--r-circle);
  background: radial-gradient(circle, rgba(36, 80, 181, 0.12) 0%, rgba(36, 80, 181, 0) 70%);
  pointer-events: none;
}

.page-hero__inner {
  max-width: 54rem;
  margin-inline: auto;
  text-align: center;
}

.page-hero__inner .breadcrumb { justify-content: center; }

.page-hero__title { margin-block: var(--sp-2) var(--sp-5); }

.page-hero__text {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

.page-hero__text + .page-hero__text { margin-top: var(--sp-4); }

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

@media (max-width: 420px) {
  .page-hero__actions .btn { width: 100%; }
}

/* Quick-jump pills — also the page's internal links to each condition */
.page-hero__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  max-width: 58rem;
  margin: var(--sp-9) auto 0;
  padding-top: var(--sp-7);
  border-top: 1px solid var(--color-border);
}

.page-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.5rem 0.9375rem;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-body);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-xs);
  transition: transform var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}

.page-hero__chip svg { width: 15px; height: 15px; color: var(--c-teal-600); }

.page-hero__chip:hover {
  transform: translateY(-2px);
  border-color: rgba(58, 169, 189, 0.45);
  color: var(--c-navy-700);
  box-shadow: var(--sh-sm);
}

/* Decorative motion lines behind a page hero (movement disorders) */
.page-hero__motion {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.55;
}

.page-hero__motion svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(78rem, 118%);
  height: auto;
  transform: translate(-50%, -50%);
}

/* Circular variant — for a centred graphic rather than lines across the band */
.page-hero__motion--orbit { opacity: 0.75; }
.page-hero__motion--orbit svg { width: min(36rem, 82%); }

/* ==========================================================================
   16. CONDITION CARDS
   ========================================================================== */
.condition-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

@media (min-width: 1024px) {
  .condition-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Seven conditions + one prompt card = three complete rows */
  .condition-card--cta { grid-column: span 2; }
}

.condition-card {
  gap: var(--sp-4);
  padding: var(--sp-7);
}

.condition-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  color: var(--color-text);
}

.condition-card__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

.condition-card__symptoms {
  margin-top: auto;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--color-border);
}

.condition-card__label {
  display: block;
  margin-bottom: var(--sp-3);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.symptom-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.symptom-list li {
  padding: 0.3125rem 0.6875rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-navy-700);
  background-color: var(--c-grey-100);
  border-radius: var(--r-pill);
}

.condition-card__foot { margin-top: var(--sp-5); }

/* The closing prompt card, spanning the last row's spare columns */
.condition-card--cta {
  background: var(--gradient-brand);
  border-color: transparent;
  color: var(--color-text-invert-muted);
  justify-content: center;
}

.condition-card--cta .condition-card__title { color: var(--c-white); font-size: var(--fs-lg); }
.condition-card--cta .condition-card__text { color: var(--color-text-invert-muted); max-width: 46ch; }

.condition-card--cta .condition-card__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* ==========================================================================
   17. WHEN TO CONSULT
   ========================================================================== */
.consult {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 900px) {
  .consult { grid-template-columns: 0.85fr 1.15fr; }

  .consult__intro {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-6));
  }
}

.consult__list {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Single column, for when the list has few enough items that two columns
   leave it much shorter than the text beside it */
.consult__list--stack { grid-template-columns: 1fr; }

.consult__item {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: start;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-text-body);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.consult__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: rgba(58, 169, 189, 0.35);
}

.consult__item svg {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--c-teal-600);
}

/* ==========================================================================
   18. CONDITION PAGE — symptoms, evaluation & treatment
   ========================================================================== */
.symptom-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.symptom-card {
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.symptom-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-md);
  border-color: rgba(58, 169, 189, 0.35);
}

.symptom-card:hover .icon-plate {
  background: var(--gradient-accent);
  color: var(--c-white);
}

.symptom-card__label {
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
  color: var(--color-text);
  line-height: var(--lh-snug);
}

.treatment-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.treatment-card {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  padding: var(--sp-6);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.treatment-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: rgba(58, 169, 189, 0.35);
}

.treatment-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.treatment-card__head svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--c-teal-600);
}

.treatment-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  color: var(--color-text);
}

.treatment-card__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

/* A treatment that carries a selection caveat gets a visible qualifier */
.treatment-card__note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-xs);
  background-color: var(--c-teal-100);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--c-teal-700);
}

.treatment-card__note svg {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  flex: none;
}

/* ==========================================================================
   18b. TREMOR COMPARISON — waveform cards
   The traces are informative, not decoration: amplitude shows when each kind
   of tremor appears across the rest-to-movement axis.
   ========================================================================== */
.tremor-compare {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
}

.tremor-card {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
  padding: var(--sp-7);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.tremor-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-lg);
  border-color: rgba(58, 169, 189, 0.35);
}

.tremor-card__wave {
  padding: var(--sp-5) var(--sp-4) var(--sp-3);
  background-color: var(--color-bg-soft);
  border-radius: var(--r-md);
}

.tremor-card__wave svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.tremor-card__axis {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.tremor-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  color: var(--color-text);
}

.tremor-card__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

/* ==========================================================================
   18e. COMPARISON CARDS — "typical" beside "worth assessing"
   The accented side is the one to act on; the neutral side is deliberately
   quiet, so the section reassures as much as it prompts.
   ========================================================================== */
.compare-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
}

.compare-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-7);
  border-radius: var(--r-lg);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg);
  box-shadow: var(--sh-sm);
}

.compare-card--typical { background-color: var(--color-bg-soft); }

.compare-card--assess {
  border-color: rgba(58, 169, 189, 0.45);
  box-shadow: var(--sh-md);
}

.compare-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.compare-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-snug);
  color: var(--color-text);
}

.compare-card__intro {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

.compare-list {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.compare-list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-text-body);
}

.compare-list svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.compare-card--typical .compare-list svg { color: var(--c-grey-400); }
.compare-card--assess .compare-list svg { color: var(--c-teal-600); }

/* ==========================================================================
   18d. NERVE STUDY CARDS — explaining a test before the patient meets it
   ========================================================================== */
.study-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

/* Flex rather than grid so the "what it feels like" box can be pushed to the
   bottom — otherwise it lands at a different height in each card. */
.study-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-7);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.study-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-lg);
  border-color: rgba(58, 169, 189, 0.35);
}

.study-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.study-card__abbr {
  display: grid;
  place-items: center;
  min-width: 68px;
  height: 46px;
  padding-inline: var(--sp-3);
  flex: none;
  border-radius: var(--r-sm);
  background: var(--gradient-accent);
  color: var(--c-white);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.06em;
}

.study-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-snug);
  color: var(--color-text);
}

.study-card__row { display: grid; gap: var(--sp-2); }

.study-card__label {
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.study-card__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

/* What the test actually feels like — the thing patients most want to know */
.study-card__feel {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: auto;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-sm);
  background-color: var(--c-teal-100);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-teal-700);
}

.study-card__feel svg {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex: none;
}

/* ==========================================================================
   18c. SYMPTOM SELECTOR — tablist of symptom cards with a detail panel
   ========================================================================== */
.selector {
  display: grid;
  gap: var(--sp-6);
}

.selector__tabs {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.selector__tab {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  background-color: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  cursor: pointer;
  transition: transform var(--t-base), box-shadow var(--t-base),
              border-color var(--t-base), background-color var(--t-base);
}

.selector__tab:hover {
  transform: translateY(-4px);
  border-color: rgba(58, 169, 189, 0.45);
  box-shadow: var(--sh-md);
}

.selector__tab[aria-selected="true"] {
  border-color: var(--c-teal-500);
  background-color: var(--c-teal-100);
  box-shadow: var(--sh-md);
}

.selector__tab[aria-selected="true"] .icon-plate {
  background: var(--gradient-accent);
  color: var(--c-white);
}

.selector__label {
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-snug);
  color: var(--color-text);
}

.selector__panel {
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

/* Without JS every panel renders, so they need separating */
.selector__panel + .selector__panel { margin-top: var(--sp-4); }

.selector__panel-title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  color: var(--color-text);
  margin-bottom: var(--sp-4);
}

.selector__panel p {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

.selector__panel p + p { margin-top: var(--sp-3); }

.selector__points {
  display: grid;
  gap: var(--sp-3);
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
}

.selector__points li {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-text-body);
}

.selector__points svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--c-teal-600);
}

/* ==========================================================================
   18g. QUICK CONTACT STRIP — a row of .info-tile links
   ========================================================================== */
.quick-strip {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

/* ==========================================================================
   18f. LOCATION BLOCK — full details beside a map
   ========================================================================== */
.location-blocks {
  display: grid;
  gap: var(--sp-6);
}

.location-block {
  display: grid;
  grid-template-columns: 1fr;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: box-shadow var(--t-base), border-color var(--t-base);
}

.location-block:hover {
  box-shadow: var(--sh-md);
  border-color: rgba(58, 169, 189, 0.3);
}

@media (min-width: 880px) {
  .location-block { grid-template-columns: 1.05fr 0.95fr; }
}

.location-block__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}

.location-block__map { padding: var(--sp-5); }

@media (min-width: 880px) {
  .location-block__map { padding: var(--sp-5) var(--sp-5) var(--sp-5) 0; }
}

/* Map slot stays an obvious placeholder until a real embed is pasted in */
.map-placeholder {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-3);
  height: 100%;
  min-height: 15rem;
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  background-color: var(--color-bg-soft);
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--r-md);
}

.map-placeholder svg { width: 32px; height: 32px; color: var(--c-teal-600); }

.map-placeholder strong {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.map-placeholder span {
  max-width: 30ch;
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
}

/* Once an <iframe> replaces the placeholder it inherits these */
.location-block__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 15rem;
  border: 0;
  border-radius: var(--r-md);
}

/* ==========================================================================
   19. FAQ — native <details>, so it works without JavaScript
   ========================================================================== */
.faq {
  display: grid;
  gap: var(--sp-4);
  max-width: 52rem;
  margin-inline: auto;
}

.faq__item {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}

.faq__item[open] {
  border-color: rgba(58, 169, 189, 0.35);
  box-shadow: var(--sh-md);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-snug);
  color: var(--color-text);
}

/* Safari still needs the vendor pseudo-element to hide the default marker */
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }

.faq__q:hover { color: var(--c-navy-700); }

.faq__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--r-circle);
  background-color: var(--c-teal-100);
  color: var(--c-teal-700);
  transition: transform var(--t-base), background var(--t-base), color var(--t-base);
}

.faq__icon svg { width: 17px; height: 17px; }

.faq__item[open] .faq__icon {
  transform: rotate(180deg);
  background: var(--gradient-accent);
  color: var(--c-white);
}

.faq__a {
  padding: 0 var(--sp-6) var(--sp-6);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

.faq__a p + p { margin-top: var(--sp-3); }

/* ==========================================================================
   20. STICKY MOBILE APPOINTMENT BAR
   Shown once the hero has scrolled away; hidden on desktop, where the
   header already carries a Book Appointment button.
   ========================================================================== */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(180%) var(--glass-blur);
  -webkit-backdrop-filter: saturate(180%) var(--glass-blur);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -10px 30px rgba(7, 25, 56, 0.13);
  transform: translateY(115%);
  visibility: hidden;
  transition: transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
}

.sticky-cta.is-visible {
  transform: translateY(0);
  visibility: visible;
}

.sticky-cta .btn { flex: 1; }

.sticky-cta__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--r-circle);
  background-color: #1faa54;
  color: var(--c-white);
  transition: background-color var(--t-base), transform var(--t-base);
}

.sticky-cta__icon svg { width: 24px; height: 24px; }
.sticky-cta__icon:hover { background-color: #189046; color: var(--c-white); transform: translateY(-2px); }

@media (min-width: 1024px) {
  .sticky-cta { display: none; }
}

/* ==========================================================================
   21. URGENT NOTICE — inline, high-prominence, deliberately not alarmist
   Navy and teal rather than red: this is guidance, not fear-based marketing.
   ========================================================================== */
.urgent-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  max-width: 46rem;
  margin: var(--sp-8) auto 0;
  padding: var(--sp-5) var(--sp-6);
  text-align: left;
  background-color: var(--c-navy-900);
  color: rgba(255, 255, 255, 0.8);
  border-radius: var(--r-md);
  border-left: 4px solid var(--c-teal-500);
  box-shadow: var(--sh-lg);
}

.urgent-notice__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--r-circle);
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--c-teal-300);
}

.urgent-notice__icon svg { width: 22px; height: 22px; }

.urgent-notice strong {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  color: var(--c-white);
}

.urgent-notice p {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.urgent-notice p + p { margin-top: var(--sp-3); }

.urgent-notice a {
  color: var(--c-teal-300);
  font-weight: var(--fw-semibold);
}

.urgent-notice a:hover { color: var(--c-white); }

/* ==========================================================================
   22. BE FAST — stroke recognition tiles (sits on the emergency band)
   ========================================================================== */
.fast-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.fast-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.fast-card__letter {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-sm);
  background: var(--gradient-accent);
  color: var(--c-navy-900);
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: var(--fw-extrabold);
  line-height: 1;
}

.fast-card__title {
  margin-bottom: 3px;
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  color: var(--c-white);
}

.fast-card__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: rgba(255, 255, 255, 0.72);
}

/* The final letter is the action, so it carries more weight */
.fast-card--action {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
}

.fast-card--action .fast-card__letter {
  background: var(--c-white);
  color: var(--c-navy-900);
}

.fast-card--action .fast-card__text { color: rgba(255, 255, 255, 0.86); }

/* Keep the floating actions and the footer clear of the bar */
@media (max-width: 1023px) {
  body.has-sticky-cta .float-actions {
    bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
  }

  /* The bar already carries WhatsApp; the floating one would be a duplicate
     sitting directly above it. The call button stays, since it is distinct. */
  body.has-sticky-cta .float-btn--whatsapp { display: none; }

  body.has-sticky-cta .site-footer__bottom {
    padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ==========================================================================
   20. PROSE — long-form body copy for articles and legal pages
   A narrow measure and generous leading; the design system's own type scale
   rather than browser defaults.
   ========================================================================== */
.prose {
  max-width: 44rem;
  margin-inline: auto;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--color-text-body);
}

.prose > * + * { margin-top: var(--sp-5); }

.prose h2 {
  margin-top: var(--sp-9);
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-snug);
}

.prose h3 {
  margin-top: var(--sp-7);
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-snug);
}

.prose h2 + p,
.prose h3 + p { margin-top: var(--sp-4); }

.prose ul,
.prose ol {
  display: grid;
  gap: var(--sp-3);
  padding-inline-start: var(--sp-6);
}

.prose li { padding-inline-start: var(--sp-2); }
.prose li::marker { color: var(--c-teal-600); }

.prose a {
  color: var(--color-accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose a:hover { color: var(--c-navy-700); }

.prose strong { color: var(--color-text); }

.prose blockquote {
  margin-inline: 0;
  padding: var(--sp-5) var(--sp-6);
  border-inline-start: 3px solid var(--c-teal-500);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background-color: var(--color-bg-soft);
  font-size: var(--fs-base);
}

.prose figure { margin: var(--sp-7) 0; }
.prose img { border-radius: var(--r-md); }

.prose figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-align: center;
}

.prose hr {
  margin-block: var(--sp-8);
  border-top: 1px solid var(--color-border);
}

/* Article meta row under the title */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-5);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.article-meta__cat { color: var(--color-accent-hover); }

.article-figure {
  max-width: 60rem;
  margin: 0 auto var(--sp-9);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-md);
}

.article-figure img { width: 100%; height: auto; display: block; }

/* Legal pages: a small "last reviewed" stamp */
.doc-stamp {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background-color: var(--c-grey-100);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
}

/* ==========================================================================
   DYNAMIC CONTENT
   Styles for the three things the admin panel drives: an OPD marked closed,
   the team grid, and the reader that opens a blog post in place.

   Everything here is built from the existing tokens and mirrors components
   already on the site, so nothing about the design changes — these are the
   states that simply had no markup before.
   ========================================================================== */

/* --- An OPD marked closed in the panel ---------------------------------- */
/* Shown as closed rather than removed. Someone who already knows the clinic
   needs to be told it is shut, or they travel there anyway. */
.location-card.is-closed,
.location-block.is-closed {
  opacity: 0.82;
}

.location-card__closed {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  background-color: #fdf6e7;
  border: 1px solid #f0dcae;
  color: #6b4e12;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

/* --- Team --------------------------------------------------------------- */
/* The section stays hidden until the panel has visible members, so the page
   is unchanged until someone is actually added. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--sp-6);
}

.team-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

.team-card__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--gradient-brand);
  display: grid;
  place-items: center;
}

.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-card__mark {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--r-circle);
  background-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.team-card__mark svg { width: 26px; height: 26px; }

.team-card__body { padding: var(--sp-5); }

.team-card__name {
  margin: 0;
  font-size: var(--fs-lg);
  font-family: var(--font-heading);
  color: var(--color-text);
}

.team-card__role {
  margin: var(--sp-1) 0 0;
  color: var(--c-teal-700);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
}

.team-card__qual {
  margin: var(--sp-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.team-card__bio {
  margin: var(--sp-3) 0 0;
  color: var(--color-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

/* --- Blog reader -------------------------------------------------------- */
/* There is no per-post page, so a post opens over the listing. This is a real
   modal — focus trapped, Escape closes, backdrop click closes — unlike the
   WhatsApp panel, which is a disclosure and deliberately is not. */
body.has-modal { overflow: hidden; }

.post-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--sp-5);
}

.post-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(7, 25, 56, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: fade-in var(--dur-base) var(--ease-out) both;
}

.post-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(46rem, 100%);
  max-height: min(85vh, 52rem);
  background-color: var(--color-bg);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  overflow: hidden;
  animation: modal-rise var(--dur-base) var(--ease-out) both;
}

@keyframes modal-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.post-modal__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-bg);
}

.post-modal__title {
  flex: 1;
  margin: 0;
  font-size: var(--fs-xl);
  font-family: var(--font-heading);
  line-height: var(--lh-snug);
  color: var(--color-text);
}

.post-modal__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-circle);
  background-color: var(--color-bg-soft);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}

.post-modal__close:hover {
  color: var(--color-text);
  background-color: var(--c-grey-200);
}

.post-modal__close svg { width: 18px; height: 18px; }

.post-modal__body {
  overflow-y: auto;
  padding: var(--sp-6);
  -webkit-overflow-scrolling: touch;
}

.post-modal__note {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  margin: var(--sp-6) 0 0;
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  background-color: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.post-modal__note svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--c-teal-600);
}

/* "Read Article" is a button, not a link, because it goes nowhere. It has to
   be reset to look like the .link-arrow it sits in place of. */
button.link-arrow {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

@media (max-width: 640px) {
  .post-modal { padding: 0; }
  .post-modal__panel {
    width: 100%;
    max-height: 100vh;
    height: 100%;
    border-radius: 0;
  }
  .post-modal__head { padding: var(--sp-4) var(--sp-5); }
  .post-modal__body { padding: var(--sp-5); }
}

/* ==========================================================================
   EMBEDDED CLINIC MAP  (contact page)

   Replaces the dashed .map-placeholder once a real embed is rendered. The
   frame is keyless: https://www.google.com/maps?q=...&output=embed, so there
   is no Maps JavaScript API, no API key and no billing account involved.
   ========================================================================== */
.location-map {
  position: relative;
  /* aspect-ratio rather than a fixed height: the frame then scales with the
     column instead of letterboxing on a phone. */
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-soft);
}

.location-map__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* `.location-block__map iframe` (0,1,1) predates this wrapper and sets
   min-height: 15rem for an embed pasted straight into the slot. A minimum
   always beats a height, so that 240px floor was overriding the 100% above
   and pushing the frame past the wrapper's aspect ratio — clipped by
   overflow:hidden, so it read as a map with its bottom sliced off.

   Two class names here (0,2,0) to outrank it, releasing the floor only for
   frames that sit inside this wrapper. The original rule still governs any
   iframe pasted into the slot by hand. */
.location-map .location-map__frame {
  min-height: 0;
}

.location-map__dir {
  width: 100%;
  margin-top: var(--sp-4);
}

@media (min-width: 880px) {
  /* Beside the details column the map is taller than it is wide, so a squarer
     ratio reads better and stops the card growing past its text. */
  .location-map { aspect-ratio: 1 / 1; }
  .location-map__dir { width: auto; }
}

/* The home page card's link through to that clinic's map. Uses the existing
   .link-arrow styling; this only spaces it from the buttons above. */
.location-card__more {
  margin-top: var(--sp-4);
}

/* ===== animations.css ===== */
/* ==========================================================================
   NeuroAxis Clinic — Global Animation System
   Scroll-reveal utilities driven by IntersectionObserver (js/main.js) plus a
   small set of ambient keyframes. Everything degrades to "already visible"
   when JS is off, and everything is disabled under reduced-motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Scroll reveal
   Usage:  <div data-reveal>                 → fade + rise
           <div data-reveal="left">          → slide from the left
           <div data-reveal="right">         → slide from the right
           <div data-reveal="zoom">          → scale up
           <div data-reveal data-reveal-delay="2">  → 2 × 90ms stagger
   The `.js-reveal-ready` class is set on <html> by JS, so non-JS visitors
   never see hidden content.
   -------------------------------------------------------------------------- */
.js-reveal-ready [data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity var(--dur-slower) var(--ease-out),
    transform var(--dur-slower) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.js-reveal-ready [data-reveal="up"],
.js-reveal-ready [data-reveal=""]      { transform: translateY(28px); }
.js-reveal-ready [data-reveal="down"]  { transform: translateY(-24px); }
.js-reveal-ready [data-reveal="left"]  { transform: translateX(-36px); }
.js-reveal-ready [data-reveal="right"] { transform: translateX(36px); }
.js-reveal-ready [data-reveal="zoom"]  { transform: scale(0.94); }
.js-reveal-ready [data-reveal="fade"]  { transform: none; }

.js-reveal-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Stagger steps — 90ms apart */
[data-reveal-delay="1"] { --reveal-delay: 90ms; }
[data-reveal-delay="2"] { --reveal-delay: 180ms; }
[data-reveal-delay="3"] { --reveal-delay: 270ms; }
[data-reveal-delay="4"] { --reveal-delay: 360ms; }
[data-reveal-delay="5"] { --reveal-delay: 450ms; }
[data-reveal-delay="6"] { --reveal-delay: 540ms; }

/* Auto-stagger for direct children of a group */
.js-reveal-ready [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-slower) var(--ease-out),
    transform var(--dur-slower) var(--ease-out);
}

.js-reveal-ready [data-reveal-group].is-revealed > * {
  opacity: 1;
  transform: none;
}

.js-reveal-ready [data-reveal-group].is-revealed > *:nth-child(1) { transition-delay: 0ms; }
.js-reveal-ready [data-reveal-group].is-revealed > *:nth-child(2) { transition-delay: 90ms; }
.js-reveal-ready [data-reveal-group].is-revealed > *:nth-child(3) { transition-delay: 180ms; }
.js-reveal-ready [data-reveal-group].is-revealed > *:nth-child(4) { transition-delay: 270ms; }
.js-reveal-ready [data-reveal-group].is-revealed > *:nth-child(5) { transition-delay: 360ms; }
.js-reveal-ready [data-reveal-group].is-revealed > *:nth-child(6) { transition-delay: 450ms; }
.js-reveal-ready [data-reveal-group].is-revealed > *:nth-child(7) { transition-delay: 540ms; }
.js-reveal-ready [data-reveal-group].is-revealed > *:nth-child(n + 8) { transition-delay: 630ms; }

/* --------------------------------------------------------------------------
   Ambient keyframes
   -------------------------------------------------------------------------- */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -14px, 0); }
}

@keyframes slow-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Draws a stroked SVG path — used on the decorative neural lines */
@keyframes trace-line {
  from { stroke-dashoffset: var(--trace-length, 400); }
  to   { stroke-dashoffset: 0; }
}

/* Node blink along the neural graphic */
@keyframes node-glow {
  0%, 100% { opacity: 0.35; r: 3; }
  50%      { opacity: 1; r: 4.5; }
}

.anim-drift {
  animation: drift 7s var(--ease-in-out) infinite;
}

.anim-drift--slow  { animation-duration: 11s; }
.anim-drift--delay { animation-delay: -3.5s; }

.anim-spin-slow { animation: slow-spin 44s linear infinite; }

.anim-trace {
  stroke-dasharray: var(--trace-length, 400);
  animation: trace-line 3.4s var(--ease-out) forwards;
}

.anim-node { animation: node-glow 3.2s var(--ease-in-out) infinite; }

.anim-fade-in { animation: fade-in var(--dur-slow) var(--ease-out) both; }
.anim-rise-in { animation: rise-in var(--dur-slower) var(--ease-out) both; }

/* --------------------------------------------------------------------------
   Reduced motion — one global off-switch
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js-reveal-ready [data-reveal],
  .js-reveal-ready [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .btn:hover,
  .card--hover:hover,
  .float-btn:hover,
  a.info-tile:hover { transform: none !important; }

  .float-btn__pulse { display: none; }
}

/* ===== touch.css ===== */
/* ==========================================================================
   NeuroAxis Clinic — Touch target sizing
   ==========================================================================

   A measurement pass across all eleven pages at 390px found a long tail of
   controls under the 44px minimum: icon-only social links at 38px, the
   WhatsApp panel's close button at 34px, "Learn More" links at 22px, footer
   links at 15px, and every .btn--sm at 40px.

   These are corrected only on narrow or touch-driven viewports, so the
   desktop composition is untouched — a 44px social icon in the top bar would
   look clumsy with a mouse and does not need to be that large there.

   The query pairs a width test with a pointer test on purpose. `pointer:
   coarse` alone is unreliable: touch-capable laptops report `fine`, and it
   cannot be verified in a headless browser, which means the rules would ship
   untested. The width arm covers every phone and tablet in portrait; the
   pointer arm catches large touch screens above 1024px.

   Reference: WCAG 2.5.8 Target Size (Minimum) asks for 24x24 CSS px; 44x44
   is the Apple HIG / Material figure and the one used here.
   ========================================================================== */

@media (max-width: 1023px), (pointer: coarse) {

  /* --- Buttons ---------------------------------------------------------- */
  .btn--sm {
    min-height: 44px;
    padding-block: 0.75rem;
  }

  /* --- Icon-only controls -----------------------------------------------
     The footer selector is `.site-footer .social-link` (0,2,0), which beats a
     bare `.social-link` even inside a media query — media queries add no
     specificity. Both are listed so the footer icons actually grow. */
  .social-link,
  .site-footer .social-link,
  .nav-drawer__foot .social-list .social-link {
    width: 44px;
    height: 44px;
  }

  .nav-drawer__close,
  .wa-panel__close,
  .header-call {
    width: 44px;
    height: 44px;
  }

  .sticky-cta__icon {
    width: 52px;
    height: 52px;
  }

  /* --- Text links that act as calls to action --------------------------- */
  /* "Learn More →" on cards, and the arrow links in section footers.
     Negative inline margin keeps the text optically aligned with the
     paragraph above it while the tap area grows. */
  .link-arrow {
    min-height: 44px;
    padding-block: 0.6875rem;
    padding-inline: 0.25rem;
    margin-inline: -0.25rem;
  }

  .page-hero__chip {
    min-height: 44px;
    padding-block: 0.625rem;
  }

  .appointment__contact,
  .footer-contact__item {
    min-height: 44px;
    align-items: center;
  }

  /* The phone and email rows inside the mobile drawer measured 22px tall —
     half the minimum, on the one surface that is only ever used by thumb.
     They are the drawer's primary conversion path, so they get the full 44. */
  .nav-drawer__contact a {
    min-height: 44px;
  }

  /* --- Footer and breadcrumb link lists --------------------------------- */
  /* Stacked lists of short links: give each row real height rather than
     relying on the WCAG spacing exception. */
  .footer-links a {
    min-height: 40px;
    align-items: center;
  }

  .site-footer__legal a,
  .breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  .footer-opd a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* --- Form controls ----------------------------------------------------
     Anything under 16px makes iOS Safari zoom the page on focus, which then
     leaves the layout scaled and the user hunting for the next field. Every
     control that a thumb can land in is pinned to 16px. */
  .field__control,
  .wa-panel__body .field__control,
  select.field__control,
  textarea.field__control {
    font-size: 16px;
  }

  .check input[type="checkbox"] {
    width: 22px;
    height: 22px;
  }

  /* The label is the real target for a checkbox — make it comfortable. */
  .check {
    min-height: 44px;
    align-content: center;
  }
}

/* ==========================================================================
   Hover effects belong to pointers that can hover.
   On touch, :hover sticks after a tap and leaves cards looking stuck in a
   lifted state, so the transforms are confined to hover-capable devices.
   ========================================================================== */
@media (hover: none) {
  .card--hover:hover,
  .why-card:hover,
  .care-tile:hover,
  .info-tile:hover,
  .symptom-card:hover,
  .treatment-card:hover,
  .tremor-card:hover,
  .study-card:hover,
  .consult__item:hover,
  .blog-card--linked:hover,
  .location-block:hover,
  .btn:hover,
  .float-btn:hover {
    transform: none;
  }
}

/* ===== utilities.css ===== */
/* ==========================================================================
   NeuroAxis Clinic — Utilities
   Small, single-purpose helpers. Prefer a component class when one exists.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */
.u-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Display / flow
   -------------------------------------------------------------------------- */
.u-flex        { display: flex; }
.u-inline-flex { display: inline-flex; }
.u-grid        { display: grid; }
.u-block       { display: block; }

.u-wrap        { flex-wrap: wrap; }
.u-items-center{ align-items: center; }
.u-items-start { align-items: flex-start; }
.u-justify-between { justify-content: space-between; }
.u-justify-center  { justify-content: center; }
.u-col         { flex-direction: column; }
.u-grow        { flex: 1; }

.u-gap-2 { gap: var(--sp-2); }
.u-gap-3 { gap: var(--sp-3); }
.u-gap-4 { gap: var(--sp-4); }
.u-gap-5 { gap: var(--sp-5); }
.u-gap-6 { gap: var(--sp-6); }
.u-gap-8 { gap: var(--sp-8); }

/* --------------------------------------------------------------------------
   Spacing (margin only — padding belongs to components)
   -------------------------------------------------------------------------- */
.u-mt-0 { margin-top: 0; }
.u-mt-2 { margin-top: var(--sp-2); }
.u-mt-3 { margin-top: var(--sp-3); }
.u-mt-4 { margin-top: var(--sp-4); }
.u-mt-5 { margin-top: var(--sp-5); }
.u-mt-6 { margin-top: var(--sp-6); }
.u-mt-7 { margin-top: var(--sp-7); }
.u-mt-8 { margin-top: var(--sp-8); }
.u-mt-9 { margin-top: var(--sp-9); }

.u-mb-0 { margin-bottom: 0; }
.u-mb-2 { margin-bottom: var(--sp-2); }
.u-mb-3 { margin-bottom: var(--sp-3); }
.u-mb-4 { margin-bottom: var(--sp-4); }
.u-mb-5 { margin-bottom: var(--sp-5); }
.u-mb-6 { margin-bottom: var(--sp-6); }
.u-mb-8 { margin-bottom: var(--sp-8); }

.u-mx-auto { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Text
   -------------------------------------------------------------------------- */
.u-text-center { text-align: center; }
.u-text-left   { text-align: left; }

.u-text-sm  { font-size: var(--fs-sm); }
.u-text-md  { font-size: var(--fs-md); }
.u-text-lg  { font-size: var(--fs-lg); }

.u-lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
}

.u-muted    { color: var(--color-text-muted); }
.u-accent   { color: var(--color-accent-hover); }
.u-navy     { color: var(--c-navy-700); }
.u-invert   { color: var(--color-text-invert); }

.u-semibold { font-weight: var(--fw-semibold); }
.u-bold     { font-weight: var(--fw-bold); }
.u-heading  { font-family: var(--font-heading); }

.u-uppercase {
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

/* Gradient headline word — keep to one or two words per heading */
.u-gradient-text {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.u-measure        { max-width: 62ch; }
.u-measure-narrow { max-width: 46ch; }

.u-nowrap { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Surface
   -------------------------------------------------------------------------- */
.u-bg-soft   { background-color: var(--color-bg-soft); }
.u-bg-muted  { background-color: var(--color-bg-muted); }
.u-bg-brand  { background: var(--gradient-brand); }

.u-round-md { border-radius: var(--r-md); }
.u-round-lg { border-radius: var(--r-lg); }
.u-round-xl { border-radius: var(--r-xl); }

.u-shadow-sm { box-shadow: var(--sh-sm); }
.u-shadow-md { box-shadow: var(--sh-md); }
.u-shadow-lg { box-shadow: var(--sh-lg); }

.u-relative { position: relative; }
.u-overflow-hidden { overflow: hidden; }

/* --------------------------------------------------------------------------
   Responsive visibility
   Mobile-first breakpoints used across the site:
     sm 480 · md 640 · lg 768 · xl 1024 (nav switch) · 2xl 1280
   -------------------------------------------------------------------------- */
@media (max-width: 639px)  { .u-hide-sm-down { display: none !important; } }
@media (max-width: 767px)  { .u-hide-md-down { display: none !important; } }
@media (max-width: 1023px) { .u-hide-lg-down { display: none !important; } }
@media (min-width: 640px)  { .u-hide-sm-up   { display: none !important; } }
@media (min-width: 768px)  { .u-hide-md-up   { display: none !important; } }
@media (min-width: 1024px) { .u-hide-lg-up   { display: none !important; } }

/* Print — strip chrome, keep content readable */
@media print {
  .topbar,
  .site-header,
  .nav-drawer,
  .nav-overlay,
  .float-actions,
  .appointment-cta { display: none !important; }

  body { color: #000; background: #fff; }
  .site-footer { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* Honeypot wrapper.
   Positioned off-canvas rather than display:none — some bots skip fields that
   are display:none, and a few browsers skip them on autofill too. Kept out of
   the tab order and out of the accessibility tree by the markup. */
.u-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}