/* ═══════════════════════════════════════════════════════════════════════
   PhysioGrow shared stylesheet.

   Previously inlined in every page. Extracted so one edit reaches the whole
   site and so browsers cache it once instead of re-downloading it per page.

   Sections, in order:
     1. Site styles      (was the <style> block in <head>)
     2. Cookie banner    (was the <style> block near the footer, and it is
                          where .hidden is defined)
     3. Layout utilities (replaces the Tailwind CDN)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. SITE ─────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:          #060e1e;
      --bg-mid:      #0b1829;
      --bg-card:     rgba(14,26,48,0.75);
      --teal:        #0d9488;
      --teal-hover:  #0b8078;
      --teal-light:  #14B8A6;
      --teal-pale:   rgba(13,148,136,0.08);
      --teal-border: rgba(13,148,136,0.22);
      --white:       #ffffff;
      --text:        rgba(255,255,255,0.85);
      --text-muted:  rgba(255,255,255,0.42);
      --text-dim:    rgba(255,255,255,0.22);
      --border:      rgba(255,255,255,0.07);
      --border-teal: rgba(13,148,136,0.2);
      --r:           3px;
      --ease-spring:  cubic-bezier(0.22, 1, 0.36, 1);
      --ease-fast-in: cubic-bezier(0.55, 0, 0.68, 0.19);
    }

    html { scroll-behavior: smooth; }
    body {
      font-family: 'DM Sans', sans-serif;
      -webkit-font-smoothing: antialiased;
      background: var(--bg);
      color: var(--text);
      overflow-x: hidden;
    }
    h1, h2, .serif { font-family: 'DM Serif Display', serif !important; font-weight: 400 !important; letter-spacing: -0.025em; }

    /* ── Ambient background (matches book.html & intake.html) ── */
    .bg-ambient {
      position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
    }
    .bg-ambient::before {
      content: '';
      position: absolute; top: -20%; left: 50%; transform: translateX(-50%);
      width: 900px; height: 600px;
      background: radial-gradient(ellipse at 72% 30%, rgba(13,148,136,0.06) 0%, transparent 60%);
    }
    .grid-overlay {
      position: fixed; inset: 0; pointer-events: none; z-index: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.026) 1px, transparent 1px);
      background-size: 44px 44px;
    }

    /* ── Mobile menu ── */
    #mobile-menu { display: none; }
    #mobile-menu.open { display: block; }

    /* ── Scroll-reveal — spring easing ── */
    .rv { opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--ease-spring), transform 0.8s var(--ease-spring); }
    .rv.in { opacity: 1; transform: none; }
    .d1 { transition-delay: 0.08s; } .d2 { transition-delay: 0.18s; } .d3 { transition-delay: 0.3s; }

    /* ── Section label — editorial white ── */
    .stag {
      font-size: 0.62rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
      color: rgba(255,255,255,0.36);
      display: flex; align-items: center; gap: 0.65rem; margin-bottom: 1.25rem;
    }
    .stag::before { content: ''; display: block; width: 22px; height: 1px; background: rgba(255,255,255,0.22); }

    /* ── Credential tag ── */
    .cred {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 0.67rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
      border: 1px solid; padding: 4px 10px; border-radius: var(--r);
    }

    /* ── Buttons ── */
    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: 'DM Sans', sans-serif; font-size: 0.84rem; font-weight: 600;
      padding: 0.75rem 1.6rem; border-radius: var(--r); text-decoration: none;
      cursor: pointer; border: 1.5px solid transparent;
      transition: background 0.22s var(--ease-spring), border-color 0.22s, transform 0.28s var(--ease-spring), color 0.18s, box-shadow 0.28s var(--ease-spring);
    }
    .btn-primary { background: var(--teal); color: #fff; border-color: var(--teal); }
    .btn-primary:hover { background: var(--teal-hover); border-color: var(--teal-hover); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(13,148,136,0.38); }
    .btn-primary:active { transform: translateY(0); box-shadow: none; }
    .btn-ghost { background: transparent; color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.12); }
    .btn-ghost:hover { border-color: rgba(255,255,255,0.32); color: #fff; background: rgba(255,255,255,0.04); }
    .btn-outline-light { background: transparent; color: rgba(255,255,255,0.65); border-color: rgba(255,255,255,0.18); }
    .btn-outline-light:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.32); color: #fff; transform: translateY(-1px); }

    /* ── Nav ── */
    #site-nav {
      position: sticky; top: 0; z-index: 100;
      background: rgba(6,14,30,0.82);
      backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--border);
    }

    /* ── Hero ── */
    #hero {
      min-height: 100svh; display: flex; align-items: center;
      position: relative; overflow: hidden;
      background-color: var(--bg);
      /* WebP first with a JPEG fallback. The original clinic.jpg was
         4484x2989 and 638KB, which is roughly six times the pixels any
         browser will use. These are 2000px wide: 77KB as WebP, 173KB as
         JPEG. It sits under a 62 to 97 per cent dark gradient, so it can be
         compressed hard without any visible difference. */
      background-image: url('clinic-hero.jpg');
      background-image: image-set(url('clinic-hero.webp') type('image/webp'),
                                  url('clinic-hero.jpg')  type('image/jpeg'));
      background-size: cover; background-position: center 30%;
    }
    #hero::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(105deg, rgba(6,14,30,0.97) 42%, rgba(6,14,30,0.62) 100%);
      z-index: 1;
    }
    .hero-glow {
      position: absolute; top: 0; right: 0;
      width: 62%; height: 120%;
      background: radial-gradient(ellipse at 72% 36%, rgba(13,148,136,0.15) 0%, transparent 56%);
      z-index: 1; pointer-events: none;
      animation: hero-drift 18s ease-in-out infinite alternate;
      will-change: transform, opacity;
    }
    @keyframes hero-drift {
      0%   { transform: translate(0%, 0%) scale(1);    opacity: 1; }
      40%  { transform: translate(2%, -3%) scale(1.05); opacity: 0.85; }
      100% { transform: translate(-2%, 4%) scale(1.09); opacity: 0.78; }
    }
    #hero .hero-inner { position: relative; z-index: 2; width: 100%; }

    /* ── Data strip ── */
    .data-strip {
      background: rgba(11,24,41,0.9);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    .data-strip-grid {
      display: grid; grid-template-columns: repeat(4,1fr);
      border-left: 1px solid var(--border);
    }
    .data-cell { padding: 1.4rem 2rem; border-right: 1px solid var(--border); }
    .data-num {
      font-family: 'DM Serif Display', serif; font-size: 2rem; line-height: 1;
      color: #fff; letter-spacing: -0.02em;
      margin-bottom: 0.3rem;
    }
    .data-label {
      font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--text-dim);
    }

    /* ── Glass card ── */
    .glass-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 4px;
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    }

    /* ── Editorial service rows ── */
    .services-list { border-top: 1px solid var(--border); }
    .service-row {
      display: grid;
      grid-template-columns: 3.5rem 10rem 1fr;
      gap: 0 2.5rem;
      padding: 3rem 0;
      border-bottom: 1px solid var(--border);
      align-items: start;
      opacity: 0; transform: translateX(-32px);
      transition: opacity 0.75s var(--ease-spring), transform 0.75s var(--ease-spring);
    }
    .service-row:hover { border-bottom-color: rgba(255,255,255,0.13); }
    .service-row.in { opacity: 1; transform: none; }
    .service-row-num {
      font-family: 'DM Serif Display', serif; font-size: 0.9rem;
      color: rgba(255,255,255,0.16); padding-top: 0.2rem; line-height: 1;
    }
    .service-row-cat {
      font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
      color: rgba(255,255,255,0.28); padding-top: 0.28rem;
    }
    .service-row-title {
      font-family: 'DM Serif Display', serif;
      font-size: clamp(1.55rem, 2.4vw, 2.1rem);
      color: #fff; font-weight: 400;
      margin-bottom: 0.75rem; line-height: 1.1; letter-spacing: -0.02em;
    }
    .service-row-body {
      font-size: 0.9rem; color: var(--text-muted); line-height: 1.78; margin-bottom: 1.1rem;
      max-width: 560px;
    }
    .service-row-features {
      list-style: none; display: flex; flex-direction: column; gap: 0.4rem;
    }
    .service-row-features li {
      font-size: 0.79rem; color: rgba(255,255,255,0.38);
      display: flex; align-items: baseline; gap: 0.65rem;
    }
    .service-row-features li::before {
      content: '—'; font-size: 0.6rem; color: rgba(255,255,255,0.18); flex-shrink: 0;
    }

    /* ── Extended service row grid (adds animation column) ── */
    .service-row { grid-template-columns: 3.5rem 10rem 1fr 320px; align-items: center; }
    @media (max-width: 1100px) { .service-row { grid-template-columns: 3.5rem 10rem 1fr; } .service-anim { display: none; } }
    @media (max-width: 768px)  { .service-row { grid-template-columns: 2.5rem 1fr; } }
    @media (max-width: 540px)  { .service-row { grid-template-columns: 1fr; } .service-anim { display: block !important; width: 100% !important; } }

    /* ── Animation widget shell ── */
    .service-anim {
      width: 320px; height: 180px;
      background: rgba(14,26,48,0.6); border: 1px solid rgba(255,255,255,0.07);
      border-radius: 6px; overflow: hidden; position: relative; flex-shrink: 0;
      opacity: 0; transform: translateX(24px);
      transition: opacity 0.8s var(--ease-spring), transform 0.8s var(--ease-spring);
    }
    .service-anim.in { opacity: 1; transform: none; }

    /* ── Shared titlebar ── */
    .sa-bar {
      display: flex; align-items: center; gap: 5px;
      padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.06);
      background: rgba(6,14,30,0.5);
    }
    .sa-dot { width: 8px; height: 8px; border-radius: 50%; }
    .sa-bar-label { margin-left: 6px; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.18); }

    /* ── 01 Google Ads ── */
    .sa-ads-body { padding: 12px 14px; }
    .sa-search-bar { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 3px; padding: 7px 10px; margin-bottom: 10px; }
    .sa-search-text { font-size: 0.78rem; color: rgba(255,255,255,0.7); font-family: 'DM Sans',sans-serif; overflow: hidden; white-space: nowrap; border-right: 1.5px solid rgba(20,184,166,0.9); animation: sa-blink 0.8s step-end infinite; }
    @keyframes sa-blink { 0%,100%{border-color:rgba(20,184,166,0.9)} 50%{border-color:transparent} }
    .sa-ad-result { padding: 8px 10px; border-radius: 3px; margin-bottom: 6px; opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.4s ease; }
    .sa-ad-result.show { opacity: 1; transform: none; }
    .sa-ad-result.featured { background: rgba(13,148,136,0.08); border: 1px solid rgba(13,148,136,0.22); }
    .sa-ad-result:not(.featured) { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); }
    .sa-ad-badge { display: inline-block; font-size: 0.54rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 1px 5px; border-radius: 2px; margin-bottom: 3px; }
    .sa-ad-badge.sponsored { background: rgba(13,148,136,0.2); color: #14B8A6; }
    .sa-ad-badge.other { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.28); }
    .sa-ad-title { font-size: 0.72rem; font-weight: 600; color: #fff; line-height: 1.3; }
    .sa-ad-url { font-size: 0.62rem; color: rgba(255,255,255,0.3); margin-top: 1px; }

    /* ── 02 Local SEO ── */
    .sa-map-wrap { position: relative; height: 100%; background: linear-gradient(rgba(13,148,136,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(13,148,136,0.03) 1px,transparent 1px); background-size: 22px 22px; }
    .sa-map-road-h { position: absolute; background: rgba(255,255,255,0.06); height: 6px; border-radius: 3px; }
    .sa-map-road-v { position: absolute; background: rgba(255,255,255,0.06); width: 6px; border-radius: 3px; }
    .sa-map-pin { position: absolute; display: flex; flex-direction: column; align-items: center; opacity: 0; transform: translateY(-20px) scale(0.5); transition: opacity 0.5s var(--ease-spring), transform 0.5s var(--ease-spring); }
    .sa-map-pin.show { opacity: 1; transform: translateY(0) scale(1); }
    .sa-pin-head { width: 20px; height: 20px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center; }
    .sa-pin-head::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff; transform: rotate(45deg); }
    .sa-pin-stem { width: 2px; height: 6px; border-radius: 0 0 2px 2px; }
    .sa-pin-label { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.05em; padding: 2px 6px; border-radius: 2px; margin-top: 2px; white-space: nowrap; }
    .sa-3pack { position: absolute; bottom: 10px; left: 10px; right: 10px; background: rgba(6,14,30,0.92); border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; padding: 7px 9px; opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.4s ease; }
    .sa-3pack.show { opacity: 1; transform: none; }
    .sa-3pack-label { font-size: 0.55rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.22); margin-bottom: 5px; }
    .sa-3pack-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .sa-3pack-row:last-child { border-bottom: none; }
    .sa-3pack-num { font-size: 0.6rem; color: rgba(255,255,255,0.22); width: 10px; }
    .sa-3pack-name { font-size: 0.65rem; flex: 1; }
    .sa-3pack-stars { font-size: 0.58rem; color: rgba(255,255,255,0.3); }
    .sa-3pack-row.top .sa-3pack-name { color: #14B8A6; font-weight: 600; }
    .sa-3pack-row.top .sa-3pack-stars { color: #facc15; }
    .sa-3pack-row:not(.top) .sa-3pack-name { color: rgba(255,255,255,0.38); }
    @keyframes sa-pulse-ring { 0%{transform:scale(1);opacity:0.6} 100%{transform:scale(2.8);opacity:0} }
    .sa-pin-pulse { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(13,148,136,0.7); animation: sa-pulse-ring 1.8s ease-out infinite; pointer-events: none; }

    /* ── 03 AI Search ── */
    .sa-ai-body { padding: 12px 14px; height: calc(100% - 35px); overflow: hidden; }
    .sa-ai-question { display: flex; align-items: flex-start; gap: 7px; margin-bottom: 10px; }
    .sa-ai-avatar { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; font-size: 0.55rem; font-weight: 700; }
    .sa-ai-avatar.user { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.6); }
    .sa-ai-avatar.ai { background: rgba(13,148,136,0.25); color: #14B8A6; border: 1px solid rgba(13,148,136,0.3); }
    .sa-ai-bubble { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 3px; padding: 7px 9px; font-size: 0.71rem; color: rgba(255,255,255,0.65); line-height: 1.5; flex: 1; }
    .sa-ai-response { display: flex; align-items: flex-start; gap: 7px; opacity: 0; transform: translateY(6px); transition: opacity 0.5s ease, transform 0.5s ease; }
    .sa-ai-response.show { opacity: 1; transform: none; }
    .sa-ai-response-bubble { background: rgba(13,148,136,0.07); border: 1px solid rgba(13,148,136,0.18); border-radius: 3px; padding: 7px 9px; font-size: 0.71rem; color: rgba(255,255,255,0.65); line-height: 1.55; flex: 1; position: relative; overflow: hidden; }
    .sa-ai-highlight { color: #14B8A6; font-weight: 600; }
    .sa-ai-cursor { display: inline-block; width: 1.5px; height: 0.8em; background: #14B8A6; vertical-align: text-bottom; margin-left: 1px; animation: sa-blink 0.7s step-end infinite; }
    .sa-ai-cursor.done { display: none; }

    /* ── 04 Compliance Audit ── */
    .sa-check-body { padding: 12px 14px; }
    .sa-check-title { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.22); margin-bottom: 10px; }
    .sa-check-item { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 3px; margin-bottom: 5px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.025); transition: background 0.4s ease, border-color 0.4s ease; }
    .sa-check-item.pass { background: rgba(13,148,136,0.07); border-color: rgba(13,148,136,0.2); }
    .sa-check-item.fail { background: rgba(239,68,68,0.07); border-color: rgba(239,68,68,0.2); }
    .sa-check-icon { width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.6rem; font-weight: 700; transition: background 0.4s ease, color 0.4s ease; }
    .sa-check-item.pending .sa-check-icon { background: rgba(255,255,255,0.08); color: transparent; }
    .sa-check-item.fail .sa-check-icon { background: rgba(239,68,68,0.25); color: #ef4444; }
    .sa-check-item.pass .sa-check-icon { background: rgba(13,148,136,0.3); color: #14B8A6; }
    .sa-check-label { font-size: 0.7rem; transition: color 0.4s ease; }
    .sa-check-item.pending .sa-check-label { color: rgba(255,255,255,0.28); }
    .sa-check-item.fail .sa-check-label { color: rgba(239,68,68,0.8); }
    .sa-check-item.pass .sa-check-label { color: rgba(255,255,255,0.72); }
    .sa-check-status { margin-left: auto; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.4s ease; }
    .sa-check-item.pending .sa-check-status { color: transparent; }
    .sa-check-item.fail .sa-check-status { color: rgba(239,68,68,0.7); }
    .sa-check-item.pass .sa-check-status { color: #0d9488; }
    @keyframes sa-scan { 0%{top:0;opacity:0.6} 90%{top:100%;opacity:0.6} 100%{top:100%;opacity:0} }
    .sa-scan-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg,transparent,rgba(20,184,166,0.7),transparent); animation: sa-scan 2.4s ease-in-out infinite; pointer-events: none; }
    .sa-scan-line.done { display: none; }

    /* ── 05 Website Build ── */
    .sa-web-body { padding: 10px 12px; }
    .sa-web-url { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 3px; padding: 5px 9px; margin-bottom: 10px; }
    .sa-web-url-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(13,148,136,0.6); }
    .sa-web-url-text { font-size: 0.65rem; color: rgba(255,255,255,0.3); }
    .sa-web-block { height: 0; border-radius: 2px; overflow: hidden; margin-bottom: 5px; transition: height 0.45s var(--ease-spring), opacity 0.3s ease; opacity: 0; }
    .sa-web-block.show { opacity: 1; }
    .sa-web-block-nav { background: rgba(13,148,136,0.15); border: 1px solid rgba(13,148,136,0.2); }
    .sa-web-block-hero { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); }
    .sa-web-block-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; height: 0; overflow: hidden; margin-bottom: 5px; opacity: 0; transition: height 0.4s var(--ease-spring), opacity 0.3s ease; }
    .sa-web-block-content.show { opacity: 1; }
    .sa-web-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 2px; height: 100%; }
    .sa-web-block-footer { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); }
    .sa-web-inner-nav { display: flex; align-items: center; gap: 6px; padding: 5px 8px; height: 100%; }
    .sa-web-logo { width: 14px; height: 8px; background: rgba(13,148,136,0.7); border-radius: 1px; }
    .sa-web-navlinks { display: flex; gap: 5px; margin-left: 4px; }
    .sa-web-navlink { width: 22px; height: 4px; background: rgba(255,255,255,0.15); border-radius: 2px; }
    .sa-web-cta { margin-left: auto; width: 32px; height: 14px; background: rgba(13,148,136,0.5); border-radius: 2px; }
    .sa-web-inner-hero { padding: 8px; }
    .sa-web-h1 { width: 70%; height: 6px; background: rgba(255,255,255,0.2); border-radius: 2px; margin-bottom: 5px; }
    .sa-web-h1b { width: 50%; height: 6px; background: rgba(255,255,255,0.15); border-radius: 2px; margin-bottom: 6px; }
    .sa-web-p { width: 90%; height: 3px; background: rgba(255,255,255,0.07); border-radius: 2px; margin-bottom: 3px; }
    .sa-web-p2 { width: 75%; height: 3px; background: rgba(255,255,255,0.07); border-radius: 2px; }

    /* ── Editorial insight rows ── */
    .insights-list { border-top: 1px solid var(--border); }
    .insight-row {
      display: grid; grid-template-columns: 13rem 1fr;
      gap: 0 4rem; padding: 2.75rem 0;
      border-bottom: 1px solid var(--border);
      align-items: start;
      opacity: 0; transform: translateY(28px);
      transition: opacity 0.8s var(--ease-spring), transform 0.8s var(--ease-spring);
    }
    .insight-row.in { opacity: 1; transform: none; }

    /* Grid and flex items default to min-width:auto, so they refuse to shrink
       below their content's intrinsic width. The trend chart's SVG carries a
       300px viewBox, which dragged this row 36px wider than its track and put
       a horizontal scrollbar on the whole page at 390px. Letting the items
       shrink is the fix; the SVG scales because it has preserveAspectRatio. */
    .insight-row > *, .problem-row > *, .service-row > * { min-width: 0; }
    .insight-stat-num {
      font-family: 'DM Serif Display', serif;
      font-size: clamp(3.2rem, 5vw, 5rem); line-height: 1;
      color: #fff; letter-spacing: -0.03em;
    }
    .insight-stat-label {
      font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
      color: rgba(255,255,255,0.28); margin-top: 0.6rem;
    }
    .insight-row-head {
      font-size: 0.98rem; font-weight: 700; color: rgba(255,255,255,0.8);
      margin-bottom: 0.5rem; line-height: 1.3;
    }
    .insight-row-body {
      font-size: 0.88rem; color: var(--text-muted); line-height: 1.74;
    }

    /* ── Insight: race bars (Top 3) ── */
    .ins-race { display: flex; flex-direction: column; gap: 7px; max-width: 380px; }
    .ins-race-row { display: flex; align-items: center; gap: 8px; }
    .ins-race-label { font-size: 0.68rem; font-weight: 600; color: rgba(255,255,255,0.7); width: 90px; flex-shrink: 0; white-space: nowrap; }
    .ins-race-track { flex: 1; height: 8px; background: rgba(255,255,255,0.05); border-radius: 4px; overflow: hidden; border: 1px solid rgba(255,255,255,0.07); }
    .ins-race-bar { height: 100%; width: 0; border-radius: 4px; transition: width 1.1s cubic-bezier(0.22,1,0.36,1); }
    .ins-bar-you { background: linear-gradient(90deg, #0d9488, #14B8A6); box-shadow: 0 0 8px rgba(20,184,166,0.4); }
    .ins-bar-other { background: rgba(255,255,255,0.18); }
    .ins-race-rank { font-size: 0.62rem; font-weight: 700; width: 24px; text-align: right; transition: color 0.4s ease; color: transparent; }
    .ins-race-rank.show-you { color: #14B8A6; }
    .ins-race-rank.show-other { color: rgba(255,255,255,0.28); }

    /* ── Insight: trend chart (Now ↗) ── */
    .ins-trend-wrap { max-width: 380px; }
    .ins-trend-chart-row { display: flex; align-items: stretch; gap: 10px; min-width: 0; }
    .ins-trend-side-labels { display: flex; flex-direction: column; justify-content: space-between; flex-shrink: 0; padding: 2px 0; }
    .ins-trend-lbl-trad { font-size: 0.56rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(255,255,255,0.28); line-height: 1.3; }
    .ins-trend-lbl-ai   { font-size: 0.56rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: #14B8A6; line-height: 1.3; }
    /* min-width:0 because a flex item defaults to min-width:auto, and an
       SVG's viewBox gives it an intrinsic 300px it will not shrink below.
       Without it this chart pushes the whole page 12px wide on a 390px
       screen, which is a horizontal scrollbar on most phones. */
    .ins-trend-svg { flex: 1; min-width: 0; height: 80px; display: block; overflow: hidden; background: transparent; border: none; border-radius: 0; }


    /* ── Insight: patient journey (70%) ── */
    .ins-journey { display: flex; align-items: center; gap: 8px; max-width: 380px; }
    .ins-journey-step {
      display: flex; flex-direction: column; align-items: center; gap: 6px;
      opacity: 0; transform: translateY(10px);
      transition: opacity 0.5s var(--ease-spring), transform 0.5s var(--ease-spring);
    }
    .ins-journey-step.show { opacity: 1; transform: none; }
    .ins-journey-icon {
      width: 36px; height: 36px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.4);
      background: rgba(255,255,255,0.03);
      transition: border-color 0.4s ease, color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
    }
    .ins-journey-step.active .ins-journey-icon {
      border-color: rgba(13,148,136,0.5); color: #14B8A6;
      background: rgba(13,148,136,0.1); box-shadow: 0 0 12px rgba(13,148,136,0.2);
    }
    .ins-journey-label {
      font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em;
      text-transform: uppercase; color: rgba(255,255,255,0.28); white-space: nowrap;
      transition: color 0.4s ease;
    }
    .ins-journey-step.active .ins-journey-label { color: rgba(255,255,255,0.65); }
    .ins-journey-arrow {
      display: flex; align-items: center; flex-shrink: 0; margin-bottom: 18px;
      color: rgba(255,255,255,0.12);
      opacity: 0; transition: opacity 0.4s ease, color 0.4s ease;
    }
    .ins-journey-arrow svg { stroke: currentColor; }
    .ins-journey-arrow.show { opacity: 1; }
    .ins-journey-arrow.active { color: rgba(13,148,136,0.5); }

    /* ── Pricing card ── */
    .price-card {
      background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px;
      padding: 1.5rem; display: flex; flex-direction: column;
      backdrop-filter: blur(12px);
      opacity: 0; transform: translateY(32px);
      transition: opacity 0.75s var(--ease-spring), transform 0.75s var(--ease-spring), box-shadow 0.3s var(--ease-spring);
    }
    .price-card:not(.featured):hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,0.35); }
    .price-card.in { opacity: 1; transform: none; }
    .price-card:not(.featured).in:hover { transform: translateY(-3px); }
    .price-card.featured { border-color: var(--teal); border-width: 1.5px; }
    .price-card.featured.in { box-shadow: 0 0 0 1px var(--teal), 0 0 48px rgba(13,148,136,0.15); }

/* ── Stat card (legacy, kept for compat) ── */
    .stat-card {
      background: rgba(13,148,136,0.05);
      border: 1px solid var(--teal-border);
      border-radius: 4px; padding: 2rem;
    }

    /* ── Icon wrapper ── */
    .icon-wrap {
      width: 36px; height: 36px;
      display: flex; align-items: center; justify-content: center;
      border-radius: var(--r); border: 1px solid; margin-bottom: 1.2rem; flex-shrink: 0;
    }

    /* ── FAQ ── */
    .faq-list { border-top: 1px solid var(--border); }
    .faq-item { border-bottom: 1px solid var(--border); }
    .faq-trigger {
      width: 100%; background: none; border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: space-between; gap: 2rem;
      padding: 1.35rem 0; text-align: left;
    }
    .faq-trigger-text { font-size: 1rem; font-weight: 600; color: var(--text); line-height: 1.3; }
    .faq-plus {
      flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
      border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
      transition: background 0.2s, border-color 0.2s;
    }
    .faq-plus::after {
      content: '+'; font-size: 0.85rem; color: var(--text-muted);
      line-height: 1; transition: transform 0.28s, color 0.2s;
    }
    .faq-item.open .faq-plus { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); }
    .faq-item.open .faq-plus::after { transform: rotate(45deg); color: #fff; }
    .faq-body { max-height: 0; overflow: hidden; transition: max-height 0.38s ease, padding 0.28s ease; }
    .faq-item.open .faq-body { max-height: 300px; padding-bottom: 1.35rem; }
    .faq-body p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.75; }

    /* ── Problem section ── */
    .problem-row {
      display: grid; grid-template-columns: 80px 1fr 280px; gap: 0 2rem;
      padding: 2.5rem 0; border-bottom: 1px solid var(--border);
      align-items: center;
    }
    .problem-row:first-child { border-top: 1px solid var(--border); }
    .problem-num {
      font-family: 'DM Serif Display', serif; font-size: 3rem; font-weight: 400;
      line-height: 1; color: rgba(255,255,255,0.1);
    }
    .problem-title { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 0.5rem; }
    .problem-body  { font-size: 0.9rem; color: var(--text-muted); line-height: 1.75; }
    @media (max-width: 1100px) { .problem-row { grid-template-columns: 80px 1fr; } .prob-anim { display: none !important; } }
    @media (max-width: 540px)  { .problem-row { grid-template-columns: 1fr; } .prob-anim { display: block !important; width: 100% !important; } }

    /* ── Problem animation shell ── */
    .prob-anim {
      width: 280px; background: rgba(14,26,48,0.6);
      border: 1px solid rgba(255,255,255,0.07); border-radius: 6px;
      overflow: hidden; position: relative; flex-shrink: 0;
      opacity: 0; transform: translateX(20px);
      transition: opacity 0.7s var(--ease-spring), transform 0.7s var(--ease-spring);
    }
    .prob-anim.in { opacity: 1; transform: none; }
    .prob-anim-bar {
      display: flex; align-items: center; gap: 5px;
      padding: 7px 11px; border-bottom: 1px solid rgba(255,255,255,0.06);
      background: rgba(6,14,30,0.5);
    }
    .prob-anim-bar-dot { width: 7px; height: 7px; border-radius: 50%; }
    .prob-anim-label { margin-left: 5px; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.18); }

    /* 01 — Non-compliant copy */
    .prob-ad-wrap { padding: 11px 13px; }
    .prob-ad-line { font-size: 0.7rem; line-height: 1.6; color: rgba(255,255,255,0.55); margin-bottom: 22px; position: relative; }
    .prob-flag {
      display: inline; background: rgba(239,68,68,0.18); border-bottom: 1.5px solid rgba(239,68,68,0.7);
      color: rgba(255,255,255,0.8); border-radius: 2px; padding: 0 2px;
      position: relative;
    }
    .prob-flag-tooltip {
      position: absolute; top: calc(100% + 4px); left: 0;
      background: rgba(239,68,68,0.92); color: #fff;
      font-size: 0.54rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
      padding: 3px 7px; border-radius: 2px; white-space: nowrap;
      opacity: 0; transform: translateY(-4px);
      transition: opacity 0.3s ease, transform 0.3s ease;
      pointer-events: none; z-index: 2;
    }
    .prob-flag.show-tip .prob-flag-tooltip { opacity: 1; transform: translateY(0); }
    .prob-verdict {
      margin-top: 9px; padding: 6px 9px; border-radius: 3px;
      background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2);
      font-size: 0.65rem; font-weight: 600; color: rgba(239,68,68,0.85);
      display: flex; align-items: center; gap: 6px;
      opacity: 0; transition: opacity 0.4s ease;
    }
    .prob-verdict.show { opacity: 1; }

    /* 02 — Wrong patients */
    .prob-patients-wrap { padding: 11px 13px; display: flex; flex-direction: column; gap: 7px; }
    .prob-patient-card {
      display: flex; align-items: center; gap: 8px;
      padding: 7px 9px; border-radius: 3px;
      border: 1px solid rgba(255,255,255,0.07);
      background: rgba(255,255,255,0.03);
      opacity: 0; transform: translateX(-12px);
      transition: opacity 0.45s var(--ease-spring), transform 0.45s var(--ease-spring), border-color 0.4s, background 0.4s;
    }
    .prob-patient-card.show { opacity: 1; transform: none; }
    .prob-patient-card.wrong { border-color: rgba(234,179,8,0.25); background: rgba(234,179,8,0.05); }
    .prob-patient-card.miss { border-color: rgba(239,68,68,0.2); background: rgba(239,68,68,0.05); opacity: 0.45; }
    .prob-patient-avatar { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 700; flex-shrink: 0; }
    .prob-patient-avatar.low  { background: rgba(234,179,8,0.2);  color: #ca8a04; }
    .prob-patient-avatar.high { background: rgba(13,148,136,0.2); color: #14B8A6; }
    .prob-patient-info { flex: 1; }
    .prob-patient-name { font-size: 0.68rem; font-weight: 600; color: rgba(255,255,255,0.7); }
    .prob-patient-intent { font-size: 0.6rem; color: rgba(255,255,255,0.28); margin-top: 1px; }
    .prob-patient-tag { font-size: 0.56rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 2px 6px; border-radius: 2px; }
    .prob-patient-tag.booked { background: rgba(234,179,8,0.15); color: #ca8a04; }
    .prob-patient-tag.lost   { background: rgba(239,68,68,0.12);  color: rgba(239,68,68,0.8); }

    /* 03 — No real reporting */
    .prob-report-wrap { padding: 11px 13px; }
    .prob-report-title { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.22); margin-bottom: 8px; }
    .prob-metric-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 7px; border-radius: 2px; margin-bottom: 4px; border: 1px solid rgba(255,255,255,0.05); background: rgba(255,255,255,0.02); transition: background 0.3s, border-color 0.3s, opacity 0.4s; }
    .prob-metric-row.vanity { opacity: 0; transition: opacity 0.4s ease; }
    .prob-metric-row.vanity.show { opacity: 1; }
    .prob-metric-row.crossed { opacity: 0.3; text-decoration: line-through; }
    .prob-metric-label { font-size: 0.66rem; color: rgba(255,255,255,0.45); }
    .prob-metric-val { font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.5); }
    .prob-metric-row.real { background: rgba(13,148,136,0.08); border-color: rgba(13,148,136,0.22); opacity: 0; transition: opacity 0.5s ease; }
    .prob-metric-row.real.show { opacity: 1; }
    .prob-metric-row.real .prob-metric-label { color: rgba(255,255,255,0.7); }
    .prob-metric-row.real .prob-metric-val { color: #14B8A6; }

    @media (max-width: 480px) {
      .btn { padding: 0.68rem 1.25rem; font-size: 0.8rem; }
    }

  /* ── Teal glow divider ── */
  .teal-divider {
    position: relative; height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(13,148,136,0.28) 15%,
      rgba(20,184,166,0.55) 50%,
      rgba(13,148,136,0.28) 85%,
      transparent 100%
    );
    z-index: 2;
  }
  .teal-divider::after {
    content: ''; position: absolute;
    top: -4px; left: 50%; transform: translateX(-50%);
    width: 50%; height: 9px;
    background: radial-gradient(ellipse at center, rgba(20,184,166,0.1) 0%, transparent 70%);
    pointer-events: none;
  }


  /* ── Section animations ── */
  .problem-row { opacity: 0; transform: translateX(-24px); transition: opacity 0.75s var(--ease-spring), transform 0.75s var(--ease-spring); }
  .problem-row.in { opacity: 1; transform: none; }
  .stat-num-anim { display: inline-block; }

  /* ── Responsive ── */
  @media (max-width: 768px) {
    .service-row { grid-template-columns: 2.5rem 1fr; grid-template-rows: auto auto; gap: 0.2rem 1.25rem; }
    .service-row-cat { padding-top: 0.3rem; }
    .service-row-content { grid-column: 2; }
    .insight-row { grid-template-columns: 9rem 1fr; gap: 0 2rem; }
    .problem-row { grid-template-columns: 48px 1fr; gap: 0 1rem; padding: 2rem 0; }
    .problem-num { font-size: 2rem; }
    .data-strip-grid { grid-template-columns: repeat(2,1fr); }
    .data-cell { border-bottom: 1px solid var(--border); }
  }
  @media (max-width: 540px) {
    .service-row { grid-template-columns: 1fr; padding: 2.2rem 0; }
    .service-row-num { display: none; }
    .service-row-content { grid-column: 1; }
    .insight-row { grid-template-columns: 1fr; gap: 0.75rem 0; }
    .problem-row { grid-template-columns: 1fr; }
    .problem-num { display: none; }
    #hero .hero-inner { padding-top: 5rem !important; padding-bottom: 4rem !important; }
    .data-strip-grid { grid-template-columns: repeat(2,1fr); }
  }

  .ad1 { transition-delay: 0.12s; }
  .ad2 { transition-delay: 0.24s; }
  .ad3 { transition-delay: 0.36s; }

  /* ── Scroll sequence ── */
  .sequence-scroll-track { height: 1200vh; position: relative; }
  .sequence-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; transition: opacity 0.5s ease; }
  .sequence-inner { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
  .seq-scene { position: absolute; top: 0; left: 0; right: 0; opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; pointer-events: none; }
  .seq-scene.active { opacity: 1; transform: translateY(0); position: relative; pointer-events: auto; }
  .seq-headline { font-family: 'DM Serif Display', serif !important; font-weight: 400 !important; font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.1; color: #fff; margin-bottom: 1.2rem; }
  .seq-body { font-size: 1rem; color: var(--text-muted); line-height: 1.78; max-width: 420px; margin-bottom: 2rem; }
  .seq-dots { display: flex; gap: 8px; margin-top: 2.5rem; }
  .seq-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: background 0.3s, transform 0.3s; }
  .seq-dot.active { background: var(--teal-light); transform: scale(1.4); }
  .seq-dot.done { background: var(--teal); }
  .db-shell { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; backdrop-filter: blur(16px); box-shadow: 0 32px 80px rgba(0,0,0,0.5); }
  .db-titlebar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: rgba(6,14,30,0.6); }
  .db-wdot { width: 10px; height: 10px; border-radius: 50%; }
  .db-wtitle { margin-left: 6px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
  .db-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
  .db-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
  .db-metric { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 4px; padding: 0.85rem 1rem; }
  .db-mlabel { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.35rem; }
  .db-mvalue { font-family: 'DM Serif Display', serif; font-size: 1.5rem; line-height: 1; color: var(--text-dim); transition: color 0.6s ease; }
  .db-mvalue.lit { color: var(--teal-light); }
  .db-mvalue.bright { color: #fff; }
  .db-mdelta { font-size: 0.68rem; font-weight: 600; color: transparent; transition: color 0.4s ease; margin-top: 3px; }
  .db-mdelta.show { color: #22c55e; }
  .db-chart-wrap { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 4px; padding: 1rem; }
  .db-chart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
  .db-chart-title { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
  .db-chart-badge { font-size: 0.62rem; font-weight: 700; padding: 2px 8px; border-radius: 2px; background: rgba(34,197,94,0.1); color: transparent; transition: color 0.4s ease; }
  .db-chart-badge.show { color: #22c55e; }
  .db-chart-svg { width: 100%; height: 80px; display: block; overflow: visible; }
  .db-bookings-label { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.6rem; }
  .db-slots { display: flex; flex-direction: column; gap: 4px; }
  .db-slot { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 3px; transition: background 0.4s ease, border-color 0.4s ease; }
  .db-slot.booked { background: rgba(13,148,136,0.07); border-color: var(--teal-border); }
  .db-slot-time { font-size: 0.72rem; font-weight: 600; color: var(--text-dim); min-width: 50px; transition: color 0.4s ease; }
  .db-slot.booked .db-slot-time { color: var(--teal-light); }
  .db-slot-name { font-size: 0.72rem; color: transparent; transition: color 0.4s ease; flex: 1; }
  .db-slot.booked .db-slot-name { color: var(--text-muted); }
  .db-slot-tag { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 6px; border-radius: 2px; background: transparent; color: transparent; transition: background 0.4s ease, color 0.4s ease; }
  .db-slot.booked .db-slot-tag { background: var(--teal-pale); color: var(--teal-light); }
  .db-notif { display: flex; align-items: center; gap: 8px; padding: 0.6rem 0.85rem; background: rgba(13,148,136,0.05); border: 1px solid var(--teal-border); border-radius: 4px; opacity: 0; transform: translateY(6px); transition: opacity 0.5s ease, transform 0.5s ease; }
  .db-notif.show { opacity: 1; transform: translateY(0); }
  .db-notif-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal-light); animation: seq-pulse 2s infinite; }
  @keyframes seq-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
  .db-notif-text { font-size: 0.75rem; color: var(--text-muted); }
  .db-notif-text strong { color: var(--teal-light); font-weight: 600; }
  .seq-scroll-hint { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 1; transition: opacity 0.4s ease; z-index: 2; pointer-events: none; }
  .seq-scroll-hint.hide { opacity: 0; }
  .seq-hint-text { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
  .seq-hint-arrow { animation: seq-bounce 1.8s infinite; }
  @keyframes seq-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
  @media (max-width: 768px) {
    .sequence-inner { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 0; align-items: start; }
    .sequence-sticky { align-items: center; padding-top: 0; }
    .seq-headline { font-size: 1.6rem; }
    /* Show dashboard on mobile but compact it */
    .sequence-inner > div:last-child { display: block; }
    .db-bookings-label, .db-slots, .db-notif { display: none; }
    .db-body { gap: 0.6rem; padding: 0.75rem; }
    .db-metrics { gap: 0.4rem; }
    .db-metric { padding: 0.6rem 0.7rem; }
    .db-mvalue { font-size: 1.1rem; }
    .sequence-scroll-track { height: 700vh; }
  }

  /* Insight animations — full width on tablet, stack on mobile */
  @media (max-width: 900px) {
    .ins-race { max-width: 100%; }
    .ins-trend-wrap { max-width: 100%; }
    .ins-journey { flex-wrap: wrap; gap: 10px; max-width: 100%; }
    .ins-journey-step { flex: 1; min-width: 80px; }
  }
  /* On small mobile, show animations as full-width blocks below text */
  @media (max-width: 540px) {
    .ins-race, .ins-trend-wrap, .ins-journey { display: flex; max-width: 100%; }
    .ins-journey-arrow { display: none; }
    /* Service anims: show below content as full-width */
    .service-anim {
      display: block !important; width: 100% !important;
      margin-top: 1.25rem; transform: none !important;
    }
    .service-row { grid-template-columns: 1fr; }
    .service-row-num { display: none; }
    /* Problem anims: show below content as full-width */
    .prob-anim {
      display: block !important; width: 100% !important;
      margin-top: 1.25rem; transform: none !important;
    }
    .problem-row { grid-template-columns: 1fr; }
    .problem-num { display: none; }
  }
  

/* ── 2. COOKIE BANNER ────────────────────────────────────── */
  #pg-cookie-banner {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    z-index: 99999; width: calc(100% - 40px); max-width: 620px;
    background: rgba(11,24,41,0.95); border: 1px solid var(--border);
    border-radius: 4px; padding: 18px 22px;
    display: flex; flex-direction: column; gap: 14px;
    box-shadow: 0 8px 48px rgba(0,0,0,0.55); backdrop-filter: blur(16px);
    font-family: 'DM Sans', sans-serif; -webkit-font-smoothing: antialiased;
  }
  #pg-cookie-banner p { font-size: 13px; line-height: 1.62; color: rgba(255,255,255,0.52); margin: 0; padding-right: 26px; }
  #pg-cookie-banner a { color: var(--teal-light); text-decoration: underline; text-underline-offset: 2px; }
  .pg-cookie-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

  #pg-accept-btn { background: var(--teal); color: #fff; border: none; border-radius: 3px; padding: 8px 20px; font-size: 13px; font-weight: 600; font-family: 'DM Sans', sans-serif; cursor: pointer; transition: background 0.2s; }
  #pg-accept-btn:hover { background: var(--teal-hover); }
  #pg-manage-btn { background: transparent; color: rgba(255,255,255,0.38); border: 1px solid rgba(255,255,255,0.1); border-radius: 3px; padding: 8px 20px; font-size: 13px; font-weight: 500; font-family: 'DM Sans', sans-serif; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
  #pg-manage-btn:hover { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.22); }

  /* The X. One click, and it declines — see the script. */
  #pg-cookie-close {
    position: absolute; top: 12px; right: 12px;
    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; border-radius: 3px; cursor: pointer;
    color: rgba(255,255,255,0.3); transition: color 0.18s, background 0.18s;
  }
  #pg-cookie-close:hover { color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.06); }
  #pg-cookie-close:focus-visible { outline: 2px solid var(--teal-light); outline-offset: 1px; }

  /* Preferences panel */
  #pg-cookie-prefs { display: none; flex-direction: column; gap: 2px; border-top: 1px solid var(--border); padding-top: 13px; }
  #pg-cookie-prefs.open { display: flex; }
  .pg-pref-row { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; }
  .pg-pref-row + .pg-pref-row { border-top: 1px solid rgba(255,255,255,0.045); }
  .pg-pref-txt { flex: 1; }
  .pg-pref-name { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.82); display: block; margin-bottom: 2px; }
  .pg-pref-desc { font-size: 12px; line-height: 1.55; color: rgba(255,255,255,0.38); }
  .pg-switch { position: relative; flex-shrink: 0; width: 38px; height: 21px; margin-top: 2px; }
  .pg-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
  .pg-switch span { position: absolute; inset: 0; border-radius: 21px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.12); transition: background 0.2s, border-color 0.2s; pointer-events: none; }
  .pg-switch span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: rgba(255,255,255,0.5); transition: transform 0.2s, background 0.2s; }
  .pg-switch input:checked + span { background: rgba(13,148,136,0.5); border-color: var(--teal); }
  .pg-switch input:checked + span::after { transform: translateX(17px); background: #fff; }
  .pg-switch input:focus-visible + span { outline: 2px solid var(--teal-light); outline-offset: 2px; }
  .pg-switch input:disabled { cursor: not-allowed; }
  .pg-switch input:disabled + span { opacity: 0.45; }
  #pg-save-btn { align-self: flex-start; margin-top: 9px; background: transparent; color: var(--teal-light); border: 1px solid rgba(20,184,166,0.35); border-radius: 3px; padding: 7px 18px; font-size: 12.5px; font-weight: 600; font-family: 'DM Sans', sans-serif; cursor: pointer; transition: background 0.2s; }
  #pg-save-btn:hover { background: rgba(13,148,136,0.12); }

  #pg-cookie-banner.hidden { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT UTILITIES

   These replace the Tailwind Play CDN (cdn.tailwindcss.com), which compiled
   CSS in the browser at runtime: roughly 400KB of JavaScript on every page
   load, plus a flash of unstyled content while it worked.

   Only nineteen Tailwind classes were ever used across the site. They are
   written out here by hand at Tailwind's own default values, so the markup
   did not have to change.

   Breakpoints match Tailwind: sm 640px, md 768px, lg 1024px, min-width.

   ORDER MATTERS. .hidden must stay above the responsive display rules, so
   that a header marked `class="hidden md:flex"` is hidden on mobile and flex
   from 768px up. Reordering this section silently breaks the navigation.

   Note the site's own CSS only ever had #pg-cookie-banner.hidden, which is
   scoped to the banner. The general-purpose .hidden below was previously
   supplied by Tailwind and has to be declared explicitly now.
   ═══════════════════════════════════════════════════════════════════════ */

.hidden       { display: none; }
.grid         { display: grid; }
.items-center { align-items: center; }

.gap-4   { gap: 1rem; }
.gap-8   { gap: 2rem; }
.gap-12  { gap: 3rem; }
.gap-x-8 { column-gap: 2rem; }
.gap-y-2 { row-gap: 0.5rem; }

@media (min-width: 640px) {
  .sm\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:inline-flex  { display: inline-flex; }
}

@media (min-width: 768px) {
  .md\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:flex         { display: flex; }
  .md\:inline       { display: inline; }
  .md\:hidden       { display: none; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:gap-16       { gap: 4rem; }
  .lg\:order-1      { order: 1; }
  .lg\:order-2      { order: 2; }
}


/* ═══════════════════════════════════════════════════════════════════════
   NAVIGATION — grouped dropdowns

   CSS-first on purpose. :hover opens for pointer users and :focus-within
   opens for keyboard users, so the menus work before any JavaScript runs
   and keep working if it fails. The script only adds Escape-to-close, tap
   handling, and the mobile accordion.

   The padding-top on .nav-drop is deliberate: it bridges the gap between
   the trigger and the panel so the menu does not close while the pointer
   travels between them.
   ═══════════════════════════════════════════════════════════════════════ */

.nav-link:hover, .nav-trigger:hover, .nav-login:hover { color: #fff; }

.nav-group { position: relative; }

.nav-drop {
  position: absolute; top: 100%; left: -14px;
  min-width: 290px; padding-top: 14px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  z-index: 200;
}
.nav-group:hover > .nav-drop,
.nav-group:focus-within > .nav-drop,
.nav-group.open > .nav-drop { opacity: 1; visibility: visible; transform: none; }

/* Escape has to be able to close a panel that :focus-within is holding open,
   because a keyboard user pressing Escape expects the menu to close while
   focus stays on the trigger so they can carry on tabbing. This rule sits
   after the open rules so it wins on source order at equal specificity. The
   class is cleared as soon as focus leaves the group or the pointer enters
   it, so it never sticks. */
.nav-group.nav-closed > .nav-drop {
  opacity: 0; visibility: hidden; transform: translateY(-6px);
}

.nav-drop::before {
  content: ""; display: block;
  background: rgba(11,24,41,0.97); border: 1px solid var(--border);
  border-radius: 4px; position: absolute; inset: 14px 0 0 0;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55); backdrop-filter: blur(14px);
}

.nav-drop-item {
  position: relative; display: block; padding: 11px 16px;
  text-decoration: none; border-radius: 3px; margin: 4px 6px;
  transition: background 0.14s ease;
}
.nav-drop-item:first-child { margin-top: 10px; }
.nav-drop-item:last-child  { margin-bottom: 10px; }
.nav-drop-item:hover, .nav-drop-item:focus-visible { background: rgba(255,255,255,0.05); }

.nav-drop-title { display: block; font-size: 0.86rem; font-weight: 500; color: #fff; margin-bottom: 2px; }
.nav-drop-sub   { display: block; font-size: 0.74rem; color: var(--text-dim); line-height: 1.45; }

/* ── Mobile accordion ── */
.m-item {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  font-family: 'DM Sans', sans-serif; font-size: 0.92rem; font-weight: 500;
  color: var(--text-muted); padding: 0.7rem 0.5rem; text-decoration: none;
  background: none; border: none; cursor: pointer; text-align: left;
}
.m-trigger svg { transition: transform 0.2s ease; }
.m-group.open .m-trigger svg { transform: rotate(180deg); }
.m-group.open .m-trigger { color: #fff; }

.m-panel { display: none; padding: 0 0 0.5rem 0.9rem; border-left: 1px solid var(--border); margin-left: 0.5rem; }
.m-group.open .m-panel { display: block; }
.m-sub {
  display: block; font-size: 0.85rem; color: var(--text-dim);
  padding: 0.55rem 0.5rem; text-decoration: none;
}
.m-sub:hover { color: #fff; }


/* ═══════════════════════════════════════════════════════════════════════
   INTERACTION — the small motions that stop a page feeling like a document

   All of it respects prefers-reduced-motion at the bottom of this block.
   Nothing here moves anything that affects layout, so none of it can
   contribute to cumulative layout shift.
   ═══════════════════════════════════════════════════════════════════════ */

/* Cards that acknowledge the pointer. */
.lift-card {
  transition: transform 0.28s var(--ease-spring), border-color 0.28s ease, box-shadow 0.28s ease;
}
.lift-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-teal);
  box-shadow: 0 14px 44px rgba(0,0,0,0.4);
}

/* Staggered reveal. .rv already handles the fade; these just offset it so a
   row of three arrives as a sequence rather than a block. */
.rv.d1 { transition-delay: 0.08s; }
.rv.d2 { transition-delay: 0.16s; }
.rv.d3 { transition-delay: 0.24s; }
.rv.d4 { transition-delay: 0.32s; }

/* Numbers that count up. The JS writes the value; this keeps the width
   stable while it changes so nothing jumps. */
.count-up { font-variant-numeric: tabular-nums; }

/* A line that draws itself in when its section arrives. */
.draw-line { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400);
             transition: stroke-dashoffset 1.5s var(--ease-spring); }
.in .draw-line, .draw-line.in { stroke-dashoffset: 0; }

/* Bars that grow from nothing. */
.grow-bar { transform-origin: left center; transform: scaleX(0);
            transition: transform 1.1s var(--ease-spring); }
.in .grow-bar, .grow-bar.in { transform: scaleX(1); }

/* Sequential fade for items inside a diagram. */
.step-fade { opacity: 0; transform: translateY(8px);
             transition: opacity 0.55s ease, transform 0.55s var(--ease-spring); }
.in .step-fade, .step-fade.in { opacity: 1; transform: none; }
.in .step-fade:nth-child(2) { transition-delay: 0.18s; }
.in .step-fade:nth-child(3) { transition-delay: 0.36s; }
.in .step-fade:nth-child(4) { transition-delay: 0.54s; }

/* A quiet pulse for a single element that should draw the eye once. */
@keyframes soft-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.12); }
}
.pulse-dot { animation: soft-pulse 2.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .lift-card, .rv, .draw-line, .grow-bar, .step-fade { transition: none !important; }
  .lift-card:hover { transform: none; }
  .draw-line { stroke-dashoffset: 0; }
  .grow-bar  { transform: scaleX(1); }
  .step-fade { opacity: 1; transform: none; }
  .pulse-dot { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   SUBPAGE HERO — the same treatment as the homepage

   Identical gradient angle and stops to #hero, and the same drifting teal
   glow, so a subpage reads as the same site rather than a plain document
   with the nav bolted on. Shorter, because a subpage hero should not cost
   the reader a full screen before the content starts.
   ═══════════════════════════════════════════════════════════════════════ */

.page-hero {
  position: relative; overflow: hidden;
  background-color: var(--bg);
  background-image: url('clinic-hero.jpg');
  background-image: image-set(url('clinic-hero.webp') type('image/webp'),
                              url('clinic-hero.jpg')  type('image/jpeg'));
  background-size: cover; background-position: center 34%;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(6,14,30,0.97) 42%, rgba(6,14,30,0.62) 100%);
  z-index: 1;
}
.page-hero::after {
  content: ''; position: absolute; inset: 0; top: auto; height: 42%;
  background: linear-gradient(180deg, transparent, var(--bg));
  z-index: 1; pointer-events: none;
}
.page-hero > .hero-glow {
  position: absolute; top: 0; right: 0; width: 62%; height: 130%;
  background: radial-gradient(ellipse at 72% 36%, rgba(13,148,136,0.15) 0%, transparent 56%);
  z-index: 1; pointer-events: none;
  animation: hero-drift 18s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.page-hero > .wrap-inner { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .page-hero > .hero-glow { animation: none; }
}

/* About page hero: stacked on mobile, side by side once there is room. */
@media (min-width: 860px) {
  .about-split { grid-template-columns: 1fr 330px !important; gap: 4rem !important; }
}
