*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    /* ── Palette (light → dark) ── */
    --p1: #f8f9fa;   /* bright-snow     */
    --p2: #e9ecef;   /* platinum        */
    --p3: #dee2e6;   /* alabaster-grey  */
    --p4: #ced4da;   /* pale-slate      */
    --p5: #adb5bd;   /* pale-slate-2    */
    --p6: #6c757d;   /* slate-grey      */
    --p7: #495057;   /* iron-grey       */
    --p8: #343a40;   /* gunmetal        */
    --p9: #212529;   /* carbon-black    */

    /* ── Text tokens ── */
    --on-light-heading:  #212529;
    --on-light-body:     #495057;
    --on-light-muted:    #6c757d;
    --on-light-border:   #ced4da;
    --on-light-placeholder: #adb5bd;

    --on-dark-heading:   #f8f9fa;
    --on-dark-body:      #dee2e6;
    --on-dark-muted:     #adb5bd;
    --on-dark-border:    #495057;
    --on-dark-placeholder: #6c757d;

    /* ── Accent (works on both light & dark) ── */
    --accent: #5a8a6a;      /* muted sage green – homeopathy appropriate */
    --accent-light: #dff0e6;

    /* ── Fonts ── */
    --font-display: 'DM Serif Display', serif;
    --font-body: 'Inter', sans-serif;
    --font-logo: 'Caveat', cursive;
  }

  html { scroll-behavior: smooth; }
  body { font-family: var(--font-body); color: var(--on-light-body); background: var(--p1); line-height: 1.6; overflow-x: hidden; }

  /* ════════════════════════════════
     PARALLAX — fixed image layer
     Sits behind everything (z-index:-1).
     Only visible through .parallax-gap
     strips placed between sections,
     from HERO down to TESTIMONIALS.
     JS shifts it up/down on scroll —
     it's oversized + offset so the
     motion never exposes an edge.
  ════════════════════════════════ */
  .parallax-bg {
    position: fixed;
    top: -220px;
    left: 0;
    width: 100%;
    height: calc(100vh + 440px);
    z-index: -1;
    background-image: url('./assets/parallax/parallax1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
  }
  .parallax-gap {
    height: clamp(160px, 20vw, 320px);
    background: transparent; /* transparent = the fixed image shows through */
  }
  @media (max-width: 640px) {
    .parallax-gap { height: clamp(100px, 26vw, 180px); }
  }

  /* ════════════════════════════════
     NAV  — "liquid glass" treatment
     Same layout as before (logo left, links center, CTAs right) — only
     the surface itself changed: deep blur, layered inset highlights for
     a glass-like top edge, a mouse-following glare, and a pill that
     slides behind whichever link is hovered. The nav's own light/dark
     toggle only affects these --nav-* variables — the rest of the page
     is untouched either way.
  ════════════════════════════════ */
  nav {
    --nav-glass-bg: color-mix(in srgb, var(--p1) 55%, transparent);
    --nav-glass-border: rgba(255, 255, 255, 0.6);
    --nav-glass-shadow: rgba(33, 37, 41, 0.10);
    --nav-glass-highlight: rgba(255, 255, 255, 0.85);
    --nav-glass-caustic: rgba(255, 255, 255, 0.35);
    --nav-reflection-start: rgba(255, 255, 255, 0.55);
    --nav-glare-color: rgba(255, 255, 255, 0.6);
    --nav-pill-bg: rgba(255, 255, 255, 0.6);
    --nav-icon-color: var(--on-light-body);
    --nav-icon-active: var(--accent);

    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 48px; height: 72px;
    background: var(--nav-glass-bg);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow:
      0 16px 40px -16px var(--nav-glass-shadow),
      inset 0 1px 1px -1px var(--nav-glass-highlight),
      inset 0 -1px 2px -1px var(--nav-glass-caustic);
    border-bottom: 1px solid var(--nav-glass-border);
    transition: background .5s ease, border-color .5s ease, box-shadow .5s ease;
  }
  nav[data-theme="dark"] {
    --nav-glass-bg: rgba(20, 21, 23, 0.55);
    --nav-glass-border: rgba(255, 255, 255, 0.12);
    --nav-glass-shadow: rgba(0, 0, 0, 0.5);
    --nav-glass-highlight: rgba(255, 255, 255, 0.18);
    --nav-glass-caustic: rgba(255, 255, 255, 0.05);
    --nav-reflection-start: rgba(255, 255, 255, 0.12);
    --nav-glare-color: rgba(255, 255, 255, 0.18);
    --nav-pill-bg: rgba(255, 255, 255, 0.14);
    --nav-icon-color: rgba(255, 255, 255, 0.6);
    --nav-icon-active: var(--accent-light);
  }
  /* Thin curved reflection across the top of the bar — the "wet glass" look */
  nav::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 50%;
    background: linear-gradient(180deg, var(--nav-reflection-start) 0%, transparent 100%);
    pointer-events: none;
  }
  /* Radial highlight that follows the cursor across the whole bar */
  .nav-glare {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity .3s ease;
    background: radial-gradient(circle 160px at var(--x, 50%) var(--y, 50%), var(--nav-glare-color) 0%, transparent 100%);
    mix-blend-mode: overlay;
    pointer-events: none;
  }
  nav:hover .nav-glare { opacity: 1; }

  .nav-logo { position: relative; z-index: 2; font-family: var(--font-logo); font-size: 26px; color: var(--on-light-heading); text-decoration: none; }
  .nav-logo img {
    height: 70px;   
    width: auto;
    display: block;
  }
  .nav-links {
    position: relative; z-index: 2;
    display: flex; align-items: center; gap: 4px;
  }
  /* The pill that slides behind whichever link is hovered */
  .nav-active-pill {
    position: absolute; top: 4px; left: 0;
    height: calc(100% - 8px);
    background: var(--nav-pill-bg);
    border-radius: 99px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06), inset 0 1px 1px rgba(255,255,255,.5);
    opacity: 0;
    transition: transform .45s cubic-bezier(.34,1.2,.64,1), width .45s cubic-bezier(.34,1.2,.64,1), opacity .25s ease, background .5s ease;
    pointer-events: none;
    z-index: 0;
  }
  .nav-links.pill-visible .nav-active-pill { opacity: 1; }
  .nav-links a {
    position: relative; z-index: 1;
    padding: 8px 16px; border-radius: 99px;
    font-size: 14px; color: var(--nav-icon-color); text-decoration: none; font-weight: 500;
    transition: color .2s;
  }
  .nav-links a:hover { color: var(--nav-icon-active); }

  .nav-ctas { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; }
  .nav-theme-btn {
    position: relative; z-index: 2;
    width: 36px; height: 36px; border-radius: 50%;
    background: transparent; border: none; cursor: pointer;
    color: var(--nav-icon-color);
    display: flex; align-items: center; justify-content: center;
    transition: color .3s ease;
  }
  .nav-theme-btn:hover { color: var(--nav-icon-active); }
  .nav-theme-icon-wrap { position: relative; width: 18px; height: 18px; }
  .nav-theme-icon-wrap svg {
    position: absolute; top: 0; left: 0;
    transition: transform .5s cubic-bezier(.34,1.2,.64,1), opacity .4s ease;
  }
  .nav-theme-icon-wrap .nav-sun { opacity: 1; transform: rotate(0deg) scale(1); }
  .nav-theme-icon-wrap .nav-moon { opacity: 0; transform: rotate(-90deg) scale(0); }
  nav[data-theme="dark"] .nav-theme-icon-wrap .nav-sun { opacity: 0; transform: rotate(90deg) scale(0); }
  nav[data-theme="dark"] .nav-theme-icon-wrap .nav-moon { opacity: 1; transform: rotate(0deg) scale(1); }

  /* Buttons – light context */
  .btn-outline-light {
    padding: 8px 20px; border: 1.5px solid var(--on-light-heading);
    background: transparent; border-radius: 6px; font-size: 14px;
    cursor: pointer; font-family: var(--font-body); color: var(--on-light-heading);
    transition: all .2s;
  }
  .btn-outline-light:hover { background: var(--on-light-heading); color: var(--p1); }

  .btn-solid-light {
    padding: 8px 20px; background: var(--on-light-heading); color: var(--p1);
    border: none; border-radius: 6px; font-size: 14px;
    cursor: pointer; font-family: var(--font-body); transition: background .2s;
  }
  .btn-solid-light:hover { background: var(--p8); }

  /* Buttons – dark context */
  .btn-outline-dark {
    padding: 8px 20px; border: 1.5px solid var(--on-dark-body);
    background: transparent; border-radius: 6px; font-size: 14px;
    cursor: pointer; font-family: var(--font-body); color: var(--on-dark-body);
    transition: all .2s;
  }
  .btn-outline-dark:hover { background: var(--on-dark-body); color: var(--p9); }

  .btn-solid-dark {
    padding: 8px 20px; background: var(--on-dark-heading); color: var(--p9);
    border: none; border-radius: 6px; font-size: 14px;
    cursor: pointer; font-family: var(--font-body); transition: background .2s;
  }
  .btn-solid-dark:hover { background: var(--p3); }

  .link-arrow-light {
    font-size: 14px; color: var(--on-light-body); text-decoration: none;
    display: flex; align-items: center; gap: 6px; font-weight: 500;
    transition: color .2s;
  }
  .link-arrow-light:hover { color: var(--accent); }

  .link-arrow-dark {
    font-size: 14px; color: var(--on-dark-body); text-decoration: none;
    display: flex; align-items: center; gap: 6px; font-weight: 500;
    transition: color .2s;
  }
  .link-arrow-dark:hover { color: var(--on-dark-heading); }

  /* Eyebrow */
  .eyebrow {
    font-size: 12px; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; margin-bottom: 16px;
  }
  .eyebrow-light { color: var(--on-light-muted); }
  .eyebrow-dark  { color: var(--on-dark-muted); }

  /* ════════════════════════════════
     HERO  — bright-snow #f8f9fa
  ════════════════════════════════ */
  .hero {
    display: grid; grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - 72px);
    align-items: center;
    padding: 80px 48px 80px 96px;
    gap: 60px;
    position: relative;
    overflow: hidden;
  }
  /* Background-only layer: this is the thing that blurs + fades as you
     scroll past the hero. Sits behind .hero-content and .hero-image,
     which stay fully still/crisp (see the scroll script near the bottom). */
  .hero-bg-scroll {
    position: absolute; inset: 0;
    background: color-mix(in srgb, var(--p1) 55%, transparent);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    z-index: 0;
    will-change: filter, opacity;
  }
  .hero-content { max-width: 520px; position: relative; z-index: 1; }
  .hero h1 {
    font-family: var(--font-display);
    font-size: clamp(42px, 5vw, 64px);
    line-height: 1.08; font-weight: 400;
    color: var(--on-light-heading); margin-bottom: 24px;
  }
  .hero p {
    font-size: 16px; color: var(--on-light-body);
    max-width: 420px; line-height: 1.7; margin-bottom: 36px;
  }
  /* Show more/less toggle for the hero paragraph — inactive (full text
     always shown) except inside the mobile breakpoint below, where
     .hero-p-hidden gets display:none until .hero-desc.expanded is toggled. */
  .hero-p-toggle {
    display: none;
    background: none; border: none; padding: 0; margin-left: 4px;
    font-family: var(--font-body); font-size: inherit; font-weight: 600;
    color: var(--accent); text-decoration: underline; cursor: pointer;
  }
  .hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
  .hero-ctas .btn-solid-light,
  .hero-ctas .btn-outline-light { padding: 12px 28px; font-size: 15px; }
  /* Mobile-only stand-in for the nav's Contact button (nav hides its own
     Contact button on small screens — see .btn-outline-light rules below).
     Hidden on desktop/tablet; swapped in for "Book appointment" on mobile. */
  .hero-ctas .hero-contact-btn { display: none; }
  /* ── HERO IMAGE FRAME ── */
  .hero-image {
    height: 540px;
    border-radius: 20px;
    position: relative;
    z-index: 1;
    /* overflow visible: side cards peek out of the glass frame */
    overflow: visible;
    padding: 14px;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px rgba(33, 37, 41, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }

  /* ── 3D DECK CAROUSEL ── */

  /* The inner container is the 3D viewport */
  .hero-image-inner {
    position: relative;
    width: 100%; height: 100%;
    border-radius: 12px;
    /* perspective set here so cards 3D-transform inside this frame */
    perspective: 1400px;
    /* do NOT clip — side cards should be visible */
    overflow: visible;
  }

  /* The deck: a positioned layer that holds all cards stacked */
  #heroSlider {
    position: relative;
    width: 100%; height: 100%;
    transform-style: preserve-3d;
  }

  /* Every slide is absolutely stacked, full size of the inner frame.
     Default state = HIDDEN. Any slide not explicitly given card-pos-0/1/2
     by the JS (i.e. every slide beyond the visible front three, no matter
     how many total slides exist) stays invisible and out of the way here.
     This is what makes the deck safe to add/remove images from freely. */
  .hero-slide {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #000;
    transform-origin: 50% 60%;
    will-change: transform, opacity, filter;
    transition:
      transform  420ms cubic-bezier(0.22, 0.61, 0.36, 1),
      opacity    300ms ease,
      filter     300ms ease,
      box-shadow 200ms ease;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);

    /* hidden/parked state */
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transform: translate3d(0, 30px, -260px) scale(0.86);
  }

  /* ── 3 position states (0 = front, 1 = back-left, 2 = back-right) ── */
  .hero-slide.card-pos-0 {
    transform: translate3d(0, 0, 0) rotateZ(0deg) scale(1);
    z-index: 3;
    opacity: 1;
    filter: none;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.40);
  }

  .hero-slide.card-pos-1 {
    transform: translate3d(-88px, 18px, -180px) rotateZ(-5deg) scale(0.94);
    z-index: 2;
    opacity: 0.82;
    filter: saturate(0.85) brightness(0.88);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  }

  .hero-slide.card-pos-2 {
    transform: translate3d(88px, 18px, -180px) rotateZ(5deg) scale(0.94);
    z-index: 1;
    opacity: 0.82;
    filter: saturate(0.85) brightness(0.88);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  }

  /* Deal-in animation: new front card flies in from depth */
  .hero-slide.deal-in {
    animation: heroDealIn 400ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  @keyframes heroDealIn {
    from {
      transform: translate3d(0, 40px, -380px) rotateZ(6deg) scale(0.84);
      opacity: 0;
      filter: blur(2px) brightness(0.85);
    }
    to {
      transform: translate3d(0, 0, 0) rotateZ(0deg) scale(1);
      opacity: 1;
      filter: none;
    }
  }

  /* Nav arrow buttons on the deck */
  .hero-deck-nav {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--on-light-heading);
    font-size: 20px; line-height: 1;
    display: grid; place-items: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    transition: background 0.15s, transform 0.1s;
  }
  .hero-deck-nav:hover  { background: rgba(255, 255, 255, 0.28); transform: translateY(-50%) scale(1.06); }
  .hero-deck-nav:active { transform: translateY(-50%) scale(0.97); }
  .hero-deck-nav.prev   { left: -18px; }
  .hero-deck-nav.next   { right: -18px; }

  /* ════════════════════════════════
     STATS  — platinum #e9ecef
     (dark stats-inner card, adapted from
     reference "stats-inner" component)
  ════════════════════════════════ */
  .stats { padding: 80px 48px; background: var(--p2); }
  .stats-inner {
    max-width: 1280px; margin: 0 auto;
    background: var(--p9); border-radius: 36px;
    padding: 80px 60px; color: var(--on-dark-body);
    display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px; align-items: end;
    box-shadow: 0 40px 80px -30px rgba(20,20,20,.45),
      0 16px 32px -12px rgba(20,20,20,.25),
      inset 0 1px 0 rgba(255,255,255,.08), inset 0 -3px 8px rgba(0,0,0,.5);
    position: relative; overflow: hidden;
  }
  .stats-inner::before {
    content: ''; position: absolute; width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(90,138,106,.35), transparent 65%);
    top: -200px; right: -100px; filter: blur(40px);
  }
  .stats-inner::after {
    content: ''; position: absolute; width: 350px; height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(223,240,230,.2), transparent 65%);
    bottom: -150px; left: 20%; filter: blur(30px);
  }
  .stats-inner h3 {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(28px, 3vw, 42px); line-height: 1.15;
    color: var(--on-dark-heading); position: relative; z-index: 1;
  }
  .stats-inner h3 em {
    font-style: italic;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .stat-block { position: relative; z-index: 1; }
  .stat-block .num {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(44px, 4.5vw, 68px); line-height: 1;
    color: var(--on-dark-heading);
    display: flex; align-items: baseline; gap: 4px;
  }
  .stat-block .num small { font-size: .42em; color: var(--on-dark-muted); font-weight: 500; }
  .stat-block .lbl {
    font-size: 12px; text-transform: uppercase; letter-spacing: .16em;
    color: var(--on-dark-muted); margin-top: 14px; padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.12);
  }

  /* ════════════════════════════════
     DIFFERENCE  — alabaster-grey #dee2e6
  ════════════════════════════════ */
  .difference { padding: 100px 48px; background: var(--p3); }
  .difference-header {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 60px; margin-bottom: 64px;
  }
  .difference-header h2 {
    font-family: var(--font-display);
    font-size: clamp(30px, 3.5vw, 44px);
    font-weight: 400; line-height: 1.2;
    color: var(--on-light-heading);
  }
  .difference-header p { color: var(--on-light-body); font-size: 15px; line-height: 1.7; padding-top: 12px; }
  .diff-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-bottom: 48px; }
  .diff-card-img {
    width: 100%; aspect-ratio: 4/3;
    border-radius: 6px; object-fit: cover;
    display: block; margin-bottom: 20px;
    background: var(--p4);
  }
  .diff-card h3 {
    font-family: var(--font-display); font-size: 18px;
    font-weight: 400; color: var(--on-light-heading);
    margin-bottom: 10px; line-height: 1.3;
  }
  .diff-card p { font-size: 13px; color: var(--on-light-body); line-height: 1.6; }
  .diff-footer { display: flex; gap: 20px; align-items: center; }

  /* ════════════════════════════════
     TREATMENTS  — pale-slate #ced4da
  ════════════════════════════════ */
  .treatments { padding: 100px 48px; background: var(--p4); text-align: center; }
  .treatments h2 {
    font-family: var(--font-display);
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 400; color: var(--on-light-heading); margin-bottom: 16px;
  }
  .treatments > p {
    color: var(--on-light-body); font-size: 15px;
    max-width: 560px; margin: 0 auto 56px; line-height: 1.7;
  }
  .treat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-bottom: 48px; text-align: left; }
  .treat-card { background: var(--p3); border-radius: 8px; overflow: hidden; }
  .treat-card-img {
    width: 100%; height: 180px;
    object-fit: cover; display: block;
    background: var(--p5);
  }
  .treat-card-body { padding: 20px; }
  .treat-card h3 {
    font-family: var(--font-display); font-size: 17px;
    font-weight: 400; color: var(--on-light-heading);
    margin-bottom: 10px; line-height: 1.3;
  }
  .treat-card p { font-size: 13px; color: var(--on-light-body); line-height: 1.6; }
  .treat-footer { display: flex; gap: 24px; align-items: center; justify-content: center; }

  /* ════════════════════════════════
     JOURNEY  — pale-slate #ced4da (repeat)
  ════════════════════════════════ */
  .journey { padding: 100px 48px; background: black; text-align: center; }
  .journey h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 400; color: white; margin-bottom: 16px;
  }
  .journey > p {
    color: var(--on-light-body); font-size: 15px;
    max-width: 520px; margin: 0 auto 28px; line-height: 1.7;
  }
  /* thin divider between treatments & journey */
  .journey { border-top: 1px solid var(--on-light-border); }
  .journey-ctas { display: flex; gap: 20px; justify-content: center; margin-bottom: 60px; }

  /* ── Journey carousel ──
     Auto-rotating 3D ring of cards, adapted from a radio-driven fan
     carousel: same "one card popped to the front, the rest receding
     around it" language, but driven by a JS interval instead of
     radio inputs/arrows, and with no hover or touch interactions —
     the ring just turns by itself. */
  .journey-carousel {
    position: relative; width: 100%; max-width: 500px;
    margin: 0 auto; height: 380px;
    perspective: 1400px;
  }
  .journey-wheel {
    position: absolute; inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.9s cubic-bezier(.65, 0, .35, 1);
  }
  .journey-card {
    position: absolute; top: 50%; left: 50%;
    width: 190px; height: 260px;
    margin: -130px 0 0 -95px;
    transform-style: preserve-3d;
    transform: rotateY(calc(var(--i) * var(--step))) translateZ(var(--radius));
    transition: transform 0.9s cubic-bezier(.65, 0, .35, 1), opacity 0.9s ease, filter 0.9s ease;
  }
  .journey-card:not(.is-active) { opacity: .45; filter: saturate(.6); }
  .journey-card-face {
    position: relative; width: 100%; height: 100%;
    border-radius: 16px; overflow: hidden;
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-light) 100%);
    box-shadow: 0 20px 36px -14px rgba(33,37,41,.28), 0 8px 16px -6px rgba(33,37,41,.18);
    transition: box-shadow 0.4s ease;
  }
  .journey-card.is-active .journey-card-face {
    box-shadow: 0 28px 50px -16px rgba(33,37,41,.4), 0 14px 26px -8px rgba(33,37,41,.24);
  }
  .journey-card-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover;
  }
  .journey-card-face::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(33,37,41,0) 45%, rgba(33,37,41,.75) 100%);
  }
  .journey-card-num {
    position: absolute; top: 18px; left: 18px; z-index: 2;
    font-family: var(--font-display); font-size: 15px; letter-spacing: .5px;
    color: var(--on-dark-heading); background: rgba(33,37,41,.55);
    padding: 3px 9px; border-radius: 20px;
  }
  .journey-card-title {
    position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2;
    font-family: var(--font-display); font-size: 20px; font-weight: 400;
    color: var(--on-dark-heading); margin: 0;
  }
  .journey-dots {
    display: flex; justify-content: center; gap: 8px; margin-top: 36px;
  }
  .journey-dots span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--on-light-border);
    transition: background 0.4s ease, transform 0.4s ease;
  }
  .journey-dots span.is-active {
    background: var(--accent); transform: scale(1.3);
  }

  /* ════════════════════════════════
     DOCTOR PROFILE — single doctor detail, matches reference screenshot
  ════════════════════════════════ */
  .doctor-profile {
    padding: 100px 48px; background: black;
    position: relative; overflow: hidden;
    margin: 10px; border:8px solid grey; border-radius: 18px;
  }
  .doctor-profile::before {
    content: "";
    position: absolute; inset: 0;
    background-image: url("./assets/doctors/doctor-background1.png");
    background-size: 500px auto;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 0;
  }
  .doctor-profile::after {
    content: "";
    position: absolute; inset: 0;
    background: black;
    opacity: 0.4;
    z-index: 0;
  }
  .doctor-profile-inner {
    max-width: 1040px; margin: 0 auto;
    display: grid; grid-template-columns: 340px 1fr; gap: 64px;
    align-items: stretch;
    position: relative; z-index: 1;
  }
  .doctor-photo { border-radius: 14px; overflow: hidden; background: darkslategray; }
  .doctor-photo img {
    width: 100%; height: 100%; object-fit:cover; display: block;
    aspect-ratio: 340 / 430;   object-position: center 30%;
  }

  .doctor-info { display: flex; flex-direction: column; justify-content: space-between; padding: 4px 0; }
  .doctor-info-top { display: flex; flex-direction: column; }

  .doctor-name {
    font-family: var(--font-body); font-weight: 600;
    font-size: clamp(28px, 3vw, 38px); line-height: 1.15;
    color: white; margin-bottom: 8px;
  }
  .doctor-specialty { font-size: 18px; color: whitesmoke; margin-bottom: 24px; }

  .doctor-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; }
  .doctor-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 20px;
    background: grey; border: 1px solid var(--on-light-border);
    font-size: 12.5px; color: white; white-space: nowrap;
  }
  .doctor-tag-icon { color: var(--accent); font-weight: 700; font-size: 12px; }

  .doctor-info-bottom { display: flex; flex-direction: column; align-items: flex-start; }
  .doctor-bio {
    font-size: 14.5px; line-height: 1.75; color: whitesmoke;
    max-width: 320px; margin-bottom: 22px;
  }
  .doctor-cta { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }

  @media (max-width: 760px) {
    .doctor-profile-inner { grid-template-columns: 1fr; gap: 32px; }
    .doctor-photo { max-width: 320px; margin: 0 auto; width: 100%; }
    .doctor-info { justify-content: normal; gap: 28px; text-align: center; }
    .doctor-info-top { align-items: center; }
    .doctor-tags { justify-content: center; }
    .doctor-info-bottom { align-items: center; }
    .doctor-bio { max-width: 420px; }
  }


  /* ════════════════════════════════
     SOCIAL ORBIT  — slate-grey #6c757d  ← DARK
  ════════════════════════════════ */
  /* ════════════════════════════════
     DUO ROW — testimonials (left) / journey (right), 50/50
     Stacks back to a single column on narrower screens (falls
     through to each section's existing responsive rules below).
  ════════════════════════════════ */
  .duo-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(600px, 100%), 1fr));
  }
  .duo-row > .testimonials,
  .duo-row > .journey {
    padding: 90px 32px;
    overflow: hidden;
  }

  .testimonials { padding: 100px 48px; background: var(--p6); text-align: center; }
  .testimonials h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 400; color: var(--on-dark-heading); margin-bottom: 10px;
  }
  .testimonials > p { color: var(--on-dark-body); font-size: 15px; margin-bottom: 56px; }

  /* Social list — simple stylish vertical stack, replaces the
     old rotating orbit. Left accent bar + icon pop + slide-in on
     hover, nothing fancier than that. */
  .social-list-wrap { max-width: 420px; margin: 0 auto; text-align: left; }

  .social-rating {
    display: flex; align-items: center; gap: 16px;
    padding: 18px 22px; margin-bottom: 28px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
  }
  .social-rating-score {
    font-family: var(--font-display); font-size: 32px;
    font-weight: 400; color: var(--on-dark-heading); line-height: 1;
  }
  .social-rating-meta { display: flex; flex-direction: column; gap: 4px; }
  .social-rating-stars { font-size: 13px; color: #f4b942; letter-spacing: 1px; }
  .social-rating-count { font-size: 12px; color: var(--on-dark-muted); }

  .social-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .social-item {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 16px;
    padding: 13px 18px 13px 21px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    text-decoration: none; color: var(--on-dark-body);
    transition: background .3s ease, border-color .3s ease, transform .35s cubic-bezier(.34,1.15,.64,1);
  }
  .social-item::before {
    content: ''; position: absolute; left: 0; top: 10%; bottom: 10%; width: 3px;
    border-radius: 2px; background: var(--acc); transform: scaleY(0);
    transform-origin: bottom; transition: transform .35s ease;
  }
  .social-item:hover {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.2);
    transform: translateX(7px);
  }
  .social-item:hover::before { transform: scaleY(1); }

  .social-item-icon {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: transform .35s cubic-bezier(.34,1.4,.64,1);
  }
  .social-item:hover .social-item-icon { transform: scale(1.12) rotate(-6deg); }

  .social-item-text { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
  .social-item-name { font-size: 14px; font-weight: 600; letter-spacing: .01em; color: var(--on-dark-heading); }
  .social-item-sub { font-size: 12px; color: var(--on-dark-muted); }

  .social-item-arrow {
    font-size: 17px; color: var(--on-dark-muted); flex-shrink: 0;
    transition: transform .3s ease, color .3s ease;
  }
  .social-item:hover .social-item-arrow { transform: translateX(4px); color: var(--on-dark-heading); }

  .social-item-google   { --acc: #4285f4; }
  .social-item-instagram{ --acc: #cc2366; }
  .social-item-whatsapp { --acc: #25d366; }
  .social-item-facebook { --acc: #1877f2; }
  .social-item-maps     { --acc: #34a853; }
  .social-item-youtube  { --acc: #ff0000; }

  .social-item-google .social-item-icon   { background: #fff; color: #3c4043; }
  .social-item-instagram .social-item-icon{ background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); color: #fff; }
  .social-item-whatsapp .social-item-icon { background: #25d366; color: #fff; }
  .social-item-facebook .social-item-icon { background: #1877f2; color: #fff; }
  .social-item-maps .social-item-icon     { background: #34a853; color: #fff; font-size: 18px; }
  .social-item-youtube .social-item-icon  { background: #ff0000; color: #fff; }

  @media (max-width: 560px) {
    .social-rating { padding: 14px 16px; gap: 12px; }
    .social-rating-score { font-size: 24px; }
    .social-item { padding: 11px 14px 11px 17px; gap: 12px; }
    .social-item-icon { width: 36px; height: 36px; }
    .social-item-name { font-size: 13px; }
    .social-item-sub { font-size: 11px; }
  }

  /* ════════════════════════════════
     BOOKING  — slate-grey #6c757d (repeat)
  ════════════════════════════════ */
  .booking {
    padding: 0; background: var(--p6);
    display: grid; grid-template-columns: 1fr 1fr;
    min-height: 600px;
    margin: 48px;
    border-radius: 28px;
    overflow: hidden;
    box-shadow:
      0 40px 80px -30px rgba(20, 20, 20, 0.35),
      0 16px 32px -12px rgba(20, 20, 20, 0.20),
      0 1px 0 rgba(255, 255, 255, 0.06) inset;
  }
  .booking-image {
    background: url('./assets/doctors/booking.png') center/cover;
    border-radius: 0;
    min-height: 500px;
  }
  .booking-panel {
    padding: 64px 52px;
    display: flex; flex-direction: column; justify-content: center;
    background: var(--p8);
  }
  .booking-panel h2 {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.8vw, 36px);
    font-weight: 400; color: var(--on-dark-heading); margin-bottom: 8px;
  }
  .booking-panel > .booking-sub {
    color: var(--on-dark-muted); font-size: 14px; margin-bottom: 36px; line-height: 1.6;
  }

  /* ── Row grid: two-column fields ── */
  .bk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 20px; margin-bottom: 20px; }
  .bk-grid.bk-single { grid-template-columns: 1fr; }

  /* ── Field wrapper ── */
  .bk-field { display: flex; flex-direction: column; gap: 7px; }
  .bk-field label {
    font-size: 11px; font-weight: 600; letter-spacing: .10em;
    text-transform: uppercase; color: var(--on-dark-muted);
  }
  .bk-field input,
  .bk-field select,
  .bk-field textarea {
    padding: 11px 14px;
    background: var(--p7);
    border: 1.5px solid var(--on-dark-border);
    border-radius: 8px;
    font-size: 14px; font-family: var(--font-body);
    color: var(--on-dark-heading);
    outline: none;
    transition: border-color .2s, background .2s;
    appearance: none; -webkit-appearance: none;
  }
  .bk-field input::placeholder,
  .bk-field select::placeholder,
  .bk-field textarea::placeholder { color: var(--on-dark-placeholder); }
  .bk-field input:focus,
  .bk-field select:focus,
  .bk-field textarea:focus {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--p7) 90%, var(--accent) 10%);
  }
  .bk-required { color: #ff6b6b; font-weight: 700; }

  /* ── Invalid field state ── */
  .bk-field.invalid input,
  .bk-field.invalid select,
  .bk-field.invalid textarea {
    border-color: #ff6b6b;
    background: color-mix(in srgb, var(--p7) 88%, #ff6b6b 12%);
  }
  .bk-field-error {
    font-size: 11.5px; color: #ff6b6b; margin-top: 2px;
    display: none;
  }
  .bk-field.invalid .bk-field-error { display: block; }
  .bk-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236c757d' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
  }
  .bk-field textarea { resize: vertical; min-height: 88px; }

  /* ── Time-slot buttons ── */
  .bk-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px; border-radius: 10px; outline: 1.5px solid transparent; outline-offset: 4px; transition: outline-color .2s; }
  .bk-slots.invalid { outline-color: #ff6b6b; }
  .bk-slot {
    padding: 9px 4px; text-align: center;
    font-size: 13px; font-family: var(--font-body);
    color: var(--on-dark-body);
    background: var(--p7);
    border: 1.5px solid var(--on-dark-border);
    border-radius: 8px; cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
  }
  .bk-slot:hover { border-color: var(--accent); color: var(--on-dark-heading); }
  .bk-slot.active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--p7) 80%, var(--accent) 20%);
    color: var(--on-dark-heading);
  }
  .bk-slot:disabled,
  .bk-slot.disabled {
    opacity: .38;
    text-decoration: line-through;
    cursor: not-allowed;
    pointer-events: none;
  }
  .bk-slot-label-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 6px;
  }
  .bk-slot-label {
    font-size: 11px; font-weight: 600; letter-spacing: .10em;
    text-transform: uppercase; color: var(--on-dark-muted);
    margin-bottom: 0;
  }
  .bk-slot-hint {
    font-size: 12px; color: var(--on-dark-muted); margin-bottom: 10px;
  }
  .bk-live-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600; letter-spacing: .04em;
    color: #6bda8f;
  }
  .bk-live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #3ddc76;
    box-shadow: 0 0 0 0 rgba(61, 220, 118, .6);
    animation: bkLivePulse 1.8s ease-out infinite;
  }
  @keyframes bkLivePulse {
    0%   { box-shadow: 0 0 0 0 rgba(61, 220, 118, .55); }
    70%  { box-shadow: 0 0 0 7px rgba(61, 220, 118, 0); }
    100% { box-shadow: 0 0 0 0 rgba(61, 220, 118, 0); }
  }

  /* ── Submit ── */
  .bk-submit {
    width: 100%; padding: 14px;
    background: var(--on-dark-heading); color: var(--p9);
    border: none; border-radius: 10px;
    font-size: 15px; font-weight: 600; font-family: var(--font-body);
    cursor: pointer; margin-top: 8px;
    transition: background .2s, transform .1s;
    letter-spacing: .02em;
  }
  .bk-submit:hover { background: var(--p3); }
  .bk-submit:active { transform: scale(.99); }
  .bk-submit:disabled,
  .bk-submit.is-disabled {
    opacity: .45;
    background: var(--on-dark-muted);
  }
  .bk-submit.is-disabled:hover { background: var(--on-dark-muted); }

  .bk-form-warning {
    display: none;
    align-items: center; gap: 8px;
    font-size: 13px; color: #ff6b6b;
    background: color-mix(in srgb, var(--p7) 85%, #ff6b6b 15%);
    border: 1px solid color-mix(in srgb, #ff6b6b 40%, transparent);
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 14px;
  }
  .bk-form-warning.show { display: flex; }

  /* ════════════════════════════════
     NEWSLETTER  — iron-grey #495057
  ════════════════════════════════ */
  .newsletter {
    padding: 80px 96px; background: var(--p7);
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 80px; align-items: center;
  }
  .newsletter-content h2 {
    font-family: var(--font-display);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 400; color: var(--on-dark-heading);
    margin-bottom: 14px; line-height: 1.25;
  }
  .newsletter-content p { color: var(--on-dark-body); font-size: 14px; line-height: 1.7; margin-bottom: 24px; }
  .newsletter-form { display: flex; gap: 0; }
  .newsletter-form input {
    flex: 1; padding: 11px 16px;
    border: 1.5px solid var(--on-dark-border); border-right: none;
    border-radius: 6px 0 0 6px; font-size: 14px;
    font-family: var(--font-body); outline: none;
    background: var(--p8); color: var(--on-dark-heading);
  }
  .newsletter-form input::placeholder { color: var(--on-dark-placeholder); }
  .newsletter-form input:focus { border-color: var(--on-dark-heading); }
  .newsletter-form button {
    padding: 11px 20px; background: var(--on-dark-heading);
    color: var(--p9); border: none; border-radius: 0 6px 6px 0;
    font-size: 14px; cursor: pointer; font-family: var(--font-body);
  }
  .newsletter-form button:hover { background: var(--p3); }
  .newsletter-fine { font-size: 12px; color: var(--on-dark-muted); margin-top: 10px; }
  .newsletter-image {
    height: 220px; border-radius: 8px;
    background: url('https://images.unsplash.com/photo-1515377905703-c4788e51af15?w=600&q=80') center/cover;
  }

  /* ════════════════════════════════
     INSIGHTS  — gunmetal #343a40
  ════════════════════════════════ */
  .insights { padding: 100px 48px; background: var(--p8); }
  .insights-header {
    display: flex; justify-content: space-between;
    align-items: flex-end; margin-bottom: 48px;
  }
  .insights-header h2 {
    font-family: var(--font-display);
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 400; color: var(--on-dark-heading); margin-top: 8px;
  }
  .insights-header p { color: var(--on-dark-body); font-size: 14px; max-width: 380px; }
  .insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .insight-card { background: var(--p7); border-radius: 8px; overflow: hidden; }
  .insight-thumb {
    width: 100%; height: 200px;
    background: var(--p6); display: flex; align-items: center;
    justify-content: center; color: var(--on-dark-muted);
  }
  .insight-body { padding: 24px; }
  .insight-meta { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
  .insight-tag {
    font-size: 11px; font-weight: 600; padding: 3px 10px;
    background: rgba(255,255,255,0.1); color: var(--on-dark-heading);
    border-radius: 20px;
  }
  .insight-time { font-size: 12px; color: var(--on-dark-muted); }
  .insight-body h3 {
    font-family: var(--font-display); font-size: 18px;
    font-weight: 400; color: var(--on-dark-heading);
    margin-bottom: 10px; line-height: 1.35;
  }
  .insight-body p { font-size: 13px; color: var(--on-dark-body); line-height: 1.6; margin-bottom: 16px; }
  .read-more {
    font-size: 13px; color: var(--on-dark-body); text-decoration: none;
    font-weight: 500; display: flex; align-items: center; gap: 6px; transition: color .2s;
  }
  .read-more:hover { color: var(--on-dark-heading); }
  .insights-view-all { display: flex; justify-content: flex-end; margin-top: 36px; }

  /* ════════════════════════════════
     CONTACT  — gunmetal #343a40 (repeat)
  ════════════════════════════════ */
  .contact {
    padding: 100px 96px; background: var(--p8);
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 80px; align-items: start;
    border-top: 1px solid var(--on-dark-border);
  }
  .contact-content h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 400; color: var(--on-dark-heading); margin-bottom: 12px;
  }
  .contact-content > p { color: var(--on-dark-body); font-size: 15px; line-height: 1.7; margin-bottom: 40px; }

  /* Info items — icon + label + value */
  .contact-info { display: flex; flex-direction: column; gap: 32px; margin-bottom: 44px; }
  .contact-info-item { display: flex; align-items: flex-start; gap: 16px; }
  .contact-info-icon {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1.5px solid var(--on-dark-border);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 2px;
    color: var(--accent);
  }
  .contact-info-icon svg { width: 18px; height: 18px; stroke: currentColor; }
  .contact-info-label {
    font-size: 11px; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--accent);
    margin-bottom: 6px;
  }
  .contact-info-value {
    font-size: 15px; color: var(--on-dark-heading); line-height: 1.6;
  }

  /* Social pills */
  .contact-socials { display: flex; gap: 12px; }
  .contact-social-btn {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--p7); border: 1px solid var(--on-dark-border);
    display: flex; align-items: center; justify-content: center;
    color: var(--on-dark-body); text-decoration: none;
    font-size: 18px; transition: border-color .2s, color .2s;
  }
  .contact-social-btn:hover { border-color: var(--on-dark-heading); color: var(--on-dark-heading); }
  .contact-social-btn svg { width: 20px; height: 20px; }
  .contact-image {
    height: 480px; border-radius: 10px;
    background: url('https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=600&q=80') center/cover;
  }

  /* ════════════════════════════════
     FOOTER  — carbon-black #212529
  ════════════════════════════════ */
  footer {
    background: var(--p9);
    border-top: 1px solid var(--on-dark-border);
    padding: 60px 48px 0;
  }
  .footer-top {
    display: grid; grid-template-columns: 160px 1fr 1fr 1fr 280px;
    gap: 48px; padding-bottom: 48px;
  }
  .footer-logo { font-family: var(--font-logo); font-size: 24px; color: var(--on-dark-heading); }
  .footer-logo img {height: 80px; width: auto;}
  .footer-col h4 { font-size: 13px; font-weight: 600; color: var(--on-dark-heading); margin-bottom: 16px; }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .footer-col ul li a { font-size: 13px; color: var(--on-dark-muted); text-decoration: none; transition: color .2s; }
  .footer-col ul li a:hover { color: var(--on-dark-heading); }
  .footer-subscribe h4 { font-size: 13px; font-weight: 600; color: var(--on-dark-heading); margin-bottom: 10px; }
  .footer-subscribe p { font-size: 13px; color: var(--on-dark-muted); line-height: 1.5; margin-bottom: 16px; }
  .footer-sub-form { display: flex; gap: 0; }
  .footer-sub-form input {
    flex: 1; padding: 9px 14px;
    border: 1.5px solid var(--on-dark-border); border-right: none;
    border-radius: 6px 0 0 6px; font-size: 13px;
    font-family: var(--font-body); outline: none;
    background: var(--p8); color: var(--on-dark-heading);
  }
  .footer-sub-form input::placeholder { color: var(--on-dark-placeholder); }
  .footer-sub-form input:focus { border-color: var(--on-dark-heading); }
  .footer-sub-form button {
    padding: 9px 16px; background: var(--on-dark-heading);
    color: var(--p9); border: none; border-radius: 0 6px 6px 0;
    font-size: 13px; cursor: pointer; font-family: var(--font-body);
  }
  .footer-sub-form button:hover { background: var(--p3); }
  .footer-sub-fine { font-size: 11px; color: var(--on-dark-muted); margin-top: 10px; line-height: 1.5; }
  .footer-bottom {
    border-top: 1px solid var(--on-dark-border); padding: 20px 0;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 16px;
  }
  .footer-legal { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
  .footer-legal span { font-size: 12px; color: var(--on-dark-muted); }
  .footer-legal a { font-size: 12px; color: var(--on-dark-muted); text-decoration: none; transition: color .2s; }
  .footer-legal a:hover { color: var(--on-dark-heading); }
  .footer-social { display: flex; gap: 14px; }
  .footer-social a {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--p8); border: 1px solid var(--on-dark-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: var(--on-dark-muted); text-decoration: none; transition: all .2s;
  }
  .footer-social a:hover { border-color: var(--on-dark-heading); color: var(--on-dark-heading); }

  /* ── UTILS ── */
  .img-placeholder svg { opacity: 0.45; }

  /* ════════════════════════════════
     TABLET ≤1024px
  ════════════════════════════════ */
  @media (max-width: 1024px) {
    nav { padding: 0 48px; }
    .hero { grid-template-columns: 1fr 1fr; padding: 48px 24px; gap: 24px; min-height: auto; }
    .hero-content { max-width: none; }
    .hero h1 { font-size: clamp(22px, 4.2vw, 34px); margin-bottom: 16px; }
    .hero p { font-size: 13px; max-width: 100%; margin-bottom: 22px; }
    .hero-ctas { gap: 10px; }
    .hero-ctas .btn-solid-light,
    .hero-ctas .btn-outline-light { padding: 9px 16px; font-size: 12px; }
    .hero-image { height: 260px; padding: 10px; border-radius: 14px; }
    .hero-slide.card-pos-1 { transform: translate3d(-46px, 10px, -100px) rotateZ(-5deg) scale(0.94); }
    .hero-slide.card-pos-2 { transform: translate3d(46px, 10px, -100px) rotateZ(5deg) scale(0.94); }
    .hero-deck-nav { width: 30px; height: 30px; font-size: 16px; border-radius: 8px; }
    .hero-deck-nav.prev { left: -12px; }
    .hero-deck-nav.next { right: -12px; }
    .stats { padding: 60px 32px; }
    .stats-inner { grid-template-columns: 1fr 1fr; padding: 50px 32px; gap: 32px; }
    .difference { padding: 72px 32px; }
    .difference-header { grid-template-columns: 1fr; gap: 20px; }
    .diff-cards { grid-template-columns: 1fr 1fr; gap: 24px; }
    .treatments { padding: 72px 32px; }
    .treat-cards { grid-template-columns: 1fr 1fr; gap: 20px; }
    .journey { padding: 72px 32px; }
    .journey-carousel { height: 380px; }
    .journey-card { width: 190px; height: 260px; margin: -130px 0 0 -95px; }
    .doctor-profile { padding: 72px 32px; }
    .testimonials { padding: 72px 32px; }
    .booking { grid-template-columns: 1fr; margin: 32px; border-radius: 22px; }
    .booking-image { min-height: 300px; }
    .booking-panel { padding: 48px 32px; }
    .newsletter { grid-template-columns: 1fr; padding: 60px 32px; gap: 36px; }
    .newsletter-image { height: 200px; }
    .insights { padding: 72px 32px; }
    .insights-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .insights-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .contact { grid-template-columns: 1fr; padding: 72px 32px; gap: 40px; }
    .contact-image { height: 280px; }
    .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; padding: 40px 0; }
    footer { padding: 0 32px 0; }
    .footer-bottom { padding: 20px 0; }
  }

  /* ════════════════════════════════
     LARGE MOBILE ≤640px
  ════════════════════════════════ */
  @media (max-width: 640px) {
    nav { padding: 0 16px; height: 60px; }
    .nav-links { display: none; }
    .nav-ctas { gap: 8px; }
    .nav-ctas,
    .nav-ctas .btn-solid-light { padding: 7px 14px; font-size: 13px; }
    .btn-outline-light {display: none;}
    .nav-theme-btn {display: none;}
    .hero { grid-template-columns: 1fr 1fr; padding: 32px 14px; gap: 14px; min-height: auto; }
    .hero h1 { font-size: clamp(16px, 6vw, 22px); line-height: 1.15; margin-bottom: 10px; }
    .hero p { font-size: 11px; margin-bottom: 16px; line-height: 1.5; }
    .hero-p-hidden { display: none; }
    .hero-desc.expanded .hero-p-hidden { display: inline; }
    .hero-p-toggle { display: inline; font-size: 11px; }
    .hero-ctas { flex-direction: row; gap: 8px; }
    .hero-ctas .btn-solid-light,
    .hero-ctas .btn-outline-light { width: auto; text-align: center; padding: 7px 10px; font-size: 10px; }
    /* Swap: hide "Book appointment", show "Contact" in its place */
    .hero-ctas .btn-solid-light { display: none; }
    .hero-ctas .hero-contact-btn { display: inline-block; }
    .hero-image { height: 170px; padding: 7px; border-radius: 10px; }
    .hero-slide.card-pos-1 { transform: translate3d(-28px, 6px, -60px) rotateZ(-5deg) scale(0.94); }
    .hero-slide.card-pos-2 { transform: translate3d(28px, 6px, -60px) rotateZ(5deg) scale(0.94); }
    .hero-deck-nav { width: 22px; height: 22px; font-size: 12px; border-radius: 6px; }
    .hero-deck-nav.prev { left: -8px; }
    .hero-deck-nav.next { right: -8px; }
    .stats { padding: 56px 16px; }
    .stats-inner { grid-template-columns: 1fr 1fr; padding: 36px 24px; gap: 24px; }
    .stats-inner h3 { font-size: 26px; }
    .stat-block .num { font-size: 32px; }
    .link-ctas { flex-direction: column; align-items: flex-start; gap: 14px; }
    .difference { padding: 56px 16px; }
    .difference-header h2 { font-size: 26px; }
    .diff-cards { grid-template-columns: 1fr; gap: 28px; }
    .diff-footer { flex-direction: column; align-items: flex-start; gap: 14px; }
    .treatments { padding: 56px 16px; }
    .treatments h2 { font-size: 26px; }
    .treat-cards { grid-template-columns: 1fr; gap: 20px; }
    .treat-footer { flex-direction: column; gap: 14px; }
    .journey { padding: 56px 16px; }
    .journey h2 { font-size: 26px; }
    .journey-ctas { flex-direction: column; gap: 12px; }
    .journey-ctas .btn-outline-light { width: 100%; text-align: center; }
    .journey-carousel { height: 320px; perspective: 1000px; }
    .journey-card { width: 160px; height: 220px; margin: -110px 0 0 -80px; }
    .journey-card-title { font-size: 17px; }
    .doctor-profile { padding: 56px 16px; }
    .testimonials { padding: 56px 16px; }
    .testimonials h2 { font-size: 26px; }
    .testimonials-track { max-width: 100%; }
    .testimonial-card { padding: 24px 16px; }
    .testimonial-card blockquote { font-size: 15px; }
    .booking { margin: 16px; border-radius: 18px; }
    .booking-image { min-height: 220px; }
    .booking-panel { padding: 40px 16px; }
    .bk-grid { grid-template-columns: 1fr; }
    .bk-slots { grid-template-columns: repeat(2, 1fr); }
    .newsletter { padding: 56px 16px; gap: 28px; }
    .newsletter-content h2 { font-size: 22px; }
    .newsletter-form { flex-direction: column; }
    .newsletter-form input { border-right: 1.5px solid var(--on-dark-border); border-radius: 6px 6px 0 0; }
    .newsletter-form button { border-radius: 0 0 6px 6px; padding: 11px; }
    .newsletter-image { height: 180px; }
    .insights { padding: 56px 16px; }
    .insights-grid { grid-template-columns: 1fr; }
    .insights-header { flex-direction: column; gap: 8px; }
    .insights-header h2 { font-size: 24px; }
    .contact { padding: 56px 16px; gap: 32px; }
    .contact-content h2 { font-size: 28px; }
    .contact-image { height: 220px; }
    footer { padding: 0 16px 0; }
    .footer-top { grid-template-columns: 1fr; gap: 28px; padding: 40px 0; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px 0; }
    .footer-legal { flex-direction: column; align-items: flex-start; gap: 8px; }
    .footer-sub-form { flex-direction: column; }
    .footer-sub-form input { border-right: 1.5px solid var(--on-dark-border); border-radius: 6px 6px 0 0; }
    .footer-sub-form button { border-radius: 0 0 6px 6px; }
  }

  /* ════════════════════════════════
     SMALL MOBILE ≤375px
  ════════════════════════════════ */
  @media (max-width: 375px) {
    nav { padding: 0 12px; height: 56px; }
    .nav-logo { font-size: 22px; }
    .nav-ctas .btn-outline-light { display: none; }
    .nav-theme-btn {display: none;}
    .nav-ctas .btn-solid-light { padding: 7px 14px; font-size: 12px; }
    .hero { padding: 22px 10px; gap: 10px; }
    .hero h1 { font-size: clamp(13px, 6vw, 18px); line-height: 1.1; margin-bottom: 8px; }
    .hero p { font-size: 9px; margin-bottom: 12px; }
    .hero-image { height: 140px; padding: 6px; border-radius: 8px; }
    .hero-ctas { gap: 6px; }
    .hero-ctas .btn-solid-light,
    .hero-ctas .btn-outline-light { font-size: 9px; padding: 6px 8px; }
    .hero-slide.card-pos-1 { transform: translate3d(-20px, 4px, -45px) rotateZ(-5deg) scale(0.94); }
    .hero-slide.card-pos-2 { transform: translate3d(20px, 4px, -45px) rotateZ(5deg) scale(0.94); }
    .hero-deck-nav { width: 18px; height: 18px; font-size: 10px; border-radius: 5px; }
    .hero-deck-nav.prev { left: -6px; }
    .hero-deck-nav.next { right: -6px; }
    .stats { padding: 44px 12px; }
    .stats-inner { padding: 28px 16px; border-radius: 24px; }
    .stats-inner h3 { font-size: 20px; }
    .stat-block .num { font-size: 26px; }
    .stat-block .lbl { font-size: 11px; }
    .difference { padding: 44px 12px; }
    .difference-header h2 { font-size: 22px; }
    .difference-header p { font-size: 13px; }
    .diff-card h3 { font-size: 15px; }
    .diff-card p { font-size: 12px; }
    .treatments { padding: 44px 12px; }
    .treatments h2 { font-size: 22px; }
    .treatments > p { font-size: 13px; }
    .treat-card h3 { font-size: 15px; }
    .treat-card p { font-size: 12px; }
    .journey { padding: 44px 12px; }
    .journey h2 { font-size: 22px; }
    .journey > p { font-size: 13px; }
    .journey-carousel { height: 280px; }
    .journey-card { width: 140px; height: 190px; margin: -95px 0 0 -70px; }
    .journey-card-title { font-size: 15px; }
    .journey-card-num { font-size: 12px; padding: 2px 7px; }
    .doctor-profile { padding: 44px 12px; }
    .hiring-banner h3 { font-size: 24px; }
    .hiring-banner p { font-size: 13px; }
    .testimonials { padding: 44px 12px; }
    .testimonials h2 { font-size: 22px; }
    .testimonials > p { font-size: 13px; }
    .testimonial-card { padding: 20px 12px; }
    .testimonial-card blockquote { font-size: 14px; }
    .booking { margin: 12px; border-radius: 14px; }
    .booking-image { min-height: 180px; }
    .booking-panel { padding: 32px 12px; }
    .booking-panel h2 { font-size: 22px; }
    .booking-panel > .booking-sub { font-size: 13px; }
    .newsletter { padding: 44px 12px; }
    .newsletter-content h2 { font-size: 20px; }
    .newsletter-content p { font-size: 13px; }
    .newsletter-image { height: 140px; }
    .insights { padding: 44px 12px; }
    .insights-header h2 { font-size: 20px; }
    .insight-body h3 { font-size: 15px; }
    .insight-body p { font-size: 12px; }
    .contact { padding: 44px 12px; }
    .contact-content h2 { font-size: 24px; }
    .contact-content p { font-size: 13px; }
    .contact-image { height: 180px; }
    footer { padding: 0 12px 0; }
    .footer-logo { font-size: 20px; }
    .footer-col h4 { font-size: 12px; }
    .footer-col ul li a { font-size: 12px; }
    .footer-subscribe h4 { font-size: 12px; }
    .footer-subscribe p { font-size: 12px; }
    .footer-bottom { padding: 16px 0; }
    .footer-legal span, .footer-legal a { font-size: 11px; }
    .eyebrow { font-size: 11px; }
    .btn-outline-light, .btn-solid-light,
    .btn-outline-dark, .btn-solid-dark { font-size: 13px; }
    .link-arrow-light, .link-arrow-dark { font-size: 13px; }
  }

  /* ════════════════════════════════
     EXTRA SMALL ≤320px
  ════════════════════════════════ */
  @media (max-width: 320px) {
    nav { padding: 0 10px; }
    .nav-logo { font-size: 20px; }
    .hero { padding: 16px 8px; gap: 8px; }
    .hero h1 { font-size: 12px; line-height: 1.1; margin-bottom: 6px; }
    .hero p { font-size: 8px; margin-bottom: 8px; }
    .hero-ctas { gap: 5px; }
    .hero-ctas .btn-solid-light,
    .hero-ctas { font-size: 8px; padding: 5px 7px; }
    .btn-outline-light {display: none;}
    .nav-theme-btn {display: none;}
    .hero-image { height: 120px; padding: 5px; border-radius: 7px; }
    .hero-slide.card-pos-1 { transform: translate3d(-16px, 3px, -36px) rotateZ(-5deg) scale(0.94); }
    .hero-slide.card-pos-2 { transform: translate3d(16px, 3px, -36px) rotateZ(5deg) scale(0.94); }
    .hero-deck-nav { width: 15px; height: 15px; font-size: 9px; border-radius: 4px; }
    .hero-deck-nav.prev { left: -5px; }
    .hero-deck-nav.next { right: -5px; }
    .stats { padding: 36px 10px; }
    .stats-inner { padding: 22px 12px; }
    .stat-block .num { font-size: 22px; }
    .stat-block .lbl { font-size: 10px; }
    .difference { padding: 36px 10px; }
    .difference-header h2 { font-size: 20px; }
    .treatments { padding: 36px 10px; }
    .treatments h2 { font-size: 20px; }
    .journey { padding: 36px 10px; }
    .journey h2 { font-size: 20px; }
    .journey-carousel { height: 240px; perspective: 800px; }
    .journey-card { width: 120px; height: 165px; margin: -83px 0 0 -60px; }
    .doctor-profile { padding: 36px 10px; }
    .testimonials { padding: 36px 10px; }
    .testimonials h2 { font-size: 20px; }
    .booking { margin: 8px; border-radius: 12px; }
    .booking-panel { padding: 28px 10px; }
    .booking-panel h2 { font-size: 20px; }
    .newsletter { padding: 36px 10px; }
    .newsletter-content h2 { font-size: 18px; }
    .insights { padding: 36px 10px; }
    .insights-header h2 { font-size: 18px; }
    .contact { padding: 36px 10px; }
    .contact-content h2 { font-size: 20px; }
    footer { padding: 0 10px 0; }
    .footer-top { padding: 32px 0; gap: 24px; }
  }

  /* Reduce backdrop-filter blur radius on smaller screens: compositing
     large blurs is GPU-expensive and disproportionately costly on
     lower-powered mobile devices. */
  @media (max-width: 760px) {
    #siteNav,
    .hero-bg-scroll {
      backdrop-filter: blur(12px) saturate(180%);
      -webkit-backdrop-filter: blur(12px) saturate(180%);
    }
    .hero-image-inner {
      backdrop-filter: blur(10px) saturate(180%);
      -webkit-backdrop-filter: blur(10px) saturate(180%);
    }
    .hero-deck-nav {
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
  }