:root{
    --bg:#121212; --surface:#1A1A1C; --card:#1C2337;
    --border:#252E45; --borderLight:#2E3850;
    --red:#FF3B30; --redDark:#B02820; --redDim:rgba(255,59,48,0.14);
    --brand:#BA45EB; --brandDark:#8113AF; --brandDim:rgba(186,69,235,0.14);
    --green:#00C853; --greenDim:rgba(0,200,83,0.14);
    --blue:#0A84FF; --blueDim:rgba(10,132,255,0.14);
    --purple:#BF5AF2; --purpleDim:rgba(191,90,242,0.14);
    --warn:#9010BF; --warnDim:rgba(144,16,191,0.2);
    --teal:#30D5C8; --tealDim:rgba(48,213,200,0.14);
    --text:#F0F3FA; --sub:#8B9CB0; --muted:#38465A;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:var(--bg);color:var(--text);min-height:100vh}
  a{color:inherit;text-decoration:none}
  input,textarea,select,button{font-family:inherit}
  ::-webkit-scrollbar{width:4px;height:4px}
  ::-webkit-scrollbar-thumb{background:var(--muted);border-radius:3px}
  .leaflet-control-zoom a{background:var(--card)!important;color:var(--text)!important;border-color:var(--border)!important}

  /* Footer safety disclaimer: bottom-right below the divider on desktop,
     above the divider (full-width) on mobile — see footer-top-row media
     query below for the mobile override. */
  .footer-disclaimer-mobile{display:none}
  .footer-disclaimer-desktop{display:inline}

  /* ── Keyboard focus visibility (WCAG 2.4.7) ───────────────────────────
     Every interactive element (native or role="button") gets a visible
     amber ring on keyboard focus only — :focus-visible skips it for mouse/
     touch clicks so it never clutters the pointer-driven interactions. */
  a:focus-visible, button:focus-visible, input:focus-visible,
  select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible{
    outline:2px solid var(--warn);
    outline-offset:2px;
    border-radius:4px;
  }

  /* ── Type system: Lexend for nav + headings (display), Helvetica for body ─
     Body copy is inline-styled with the Helvetica stack (BODY_FF in app.js);
     these rules re-assert Lexend on the nav tabs and heading/display elements,
     so !important is needed to win over their inline font-family. The Nastaliq
     fallback is kept so Urdu headings still render correctly. */
  .nav-tab-btn, .join-nav-btn,
  h1, h2, h3,
  .stat-counter, .fr-alt-card-head, .bf-label,
  .hero-sub, .hero-cta-text{
    font-family:'Lexend','Noto Nastaliq Urdu',sans-serif !important;
  }

  /* Urdu/Pashto rendering is handled entirely through per-glyph font fallback:
     'Noto Nastaliq Urdu' is appended to the app's Lexend/Noto Sans stacks (see
     BODY_FF/HEAD_FF in app.js), so the browser only substitutes it for
     Arabic-script characters while every Latin element — the logo wordmark,
     brand names, numbers — keeps its original font and metrics. No global
     override here: forcing Nastaliq onto every element (as before) changed the
     logo's font and its tall line metrics shifted the whole layout on switch. */

  @keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

  /* ── Form success checkmark: circle draws in, then the tick strokes on ── */
  .success-check{overflow:visible}
  .success-check-circle{stroke-width:2;stroke-dasharray:145;stroke-dashoffset:145;animation:successCircle .5s ease-out forwards}
  .success-check-mark{stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:32;stroke-dashoffset:32;animation:successMark .35s ease-out .45s forwards}
  @keyframes successCircle{to{stroke-dashoffset:0}}
  @keyframes successMark{to{stroke-dashoffset:0}}
  @keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
  @keyframes slideInLeft{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:translateX(0)}}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,59,48,.45)}70%{box-shadow:0 0 0 14px rgba(255,59,48,0)}}
  .sc1{animation:fadeUp .4s .10s both}.sc2{animation:fadeUp .4s .22s both}.sc3{animation:fadeUp .4s .34s both}

  /* Nearest-hospitals floating card: row hover feedback */
  .hosp-row{transition:background-color .18s ease}
  .hosp-row:hover{background:rgba(255,255,255,0.06)!important}

  /* Thinner, subtler scroll indicator for the nearest-hospitals list —
     the popup's own height is unchanged, just the scrollbar thumb. */
  .nearest-hosp-scroll{scrollbar-width:thin;scrollbar-color:rgba(223,164,248,0.4) transparent}
  .nearest-hosp-scroll::-webkit-scrollbar{width:4px}
  .nearest-hosp-scroll::-webkit-scrollbar-track{background:transparent;margin-top:4px}
  .nearest-hosp-scroll::-webkit-scrollbar-thumb{background:rgba(223,164,248,0.4);border-radius:4px}

  /* ── Resources card interactions ───────────────────────────────────── */
  .res-photo{
    position:absolute;inset:0;
    background-size:cover;
    transition:transform .7s cubic-bezier(.22,1,.36,1), filter .5s ease;
    will-change:transform;
  }
  .res-card-wrap{cursor:pointer;transition:box-shadow .35s ease}
  .res-card-wrap:hover .res-photo{transform:scale(1.06);filter:brightness(1.08)}
  .res-card-wrap:hover{box-shadow:0 12px 40px rgba(0,0,0,.35)}
  .res-arrow{transition:transform .3s cubic-bezier(.22,1,.36,1)}
  .res-card-wrap:not(.is-open):hover .res-arrow{transform:translateX(6px)}
  /* Resource dropdown org rows */
  .res-org{transition:background-color .2s ease}
  .res-org + .res-org{border-top:1px solid var(--border)}
  /* The dropdown background is now #1A1A1C, so the hovered row lifts to a
     lighter tint (an equal --surface hover would be invisible against it). */
  .res-org:hover{background:rgba(255,255,255,0.06);border-top-color:transparent}
  .res-org:hover + .res-org{border-top-color:transparent}
  /* Number pill starts as Accent 1 (#F6E2FE) and shifts to Secondary on hover.
     The base colour is set inline (higher specificity), so the hover swap needs
     !important to win — otherwise the pill just stayed its near-white base. */
  .res-call{transition:transform .2s ease, background-color .2s ease}
  .res-call:hover{transform:translateY(-1px) scale(1.03);background:#DFA4F8!important}

  @keyframes dropdownOpen{
    0%   {opacity:0;transform:translateY(-8px);margin-top:0}
    35%  {opacity:.4}
    100% {opacity:1;transform:translateY(0);margin-top:10px}
  }
  .res-dropdown{
    animation:dropdownOpen .55s cubic-bezier(.22,1,.36,1) both;
  }
  /* Resource card rows: two equal cards by default. When one is open it grows
     to the resource-list width [calc(75% - 100px)] and its row-mate takes the
     rest; the list opens flush beneath the selected card (right-aligned when the
     right card is selected). A definite width keeps the list flush to its side
     inside the stretch flex column. Full width on mobile (single column). */
  .res-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr));gap:20px}
  /* The list is a grid child spanning the full row, then sized and aligned to
     match the selected card [calc(75% - 180px), left or right]. */
  .res-dropdown-3q{grid-column:1/-1;width:calc(75% - 180px);justify-self:start}
  .res-dropdown-3q.res-dropdown-right{justify-self:end}
  @media (min-width:761px){
    .res-row-open-left{grid-template-columns:calc(75% - 180px) 1fr!important}
    .res-row-open-right{grid-template-columns:1fr calc(75% - 180px)!important}
  }
  @media (max-width:760px){
    .res-row{grid-template-columns:1fr}
    .res-dropdown-3q{width:100%}
    /* Single column: when the top card of a row is open, move its list directly
       beneath it (above the row's second card) instead of below both cards. */
    .res-row-open-left > *:nth-child(2){order:1}
  }
  /* Gentle easing for the card width/position morph (and the surrounding
     crossfade) when a category is opened/closed via the View Transitions API. */
  ::view-transition-group(res-card-0),
  ::view-transition-group(res-card-1),
  ::view-transition-group(res-card-2),
  ::view-transition-group(res-card-3),
  ::view-transition-group(root){
    animation-duration:.45s;
    animation-timing-function:cubic-bezier(.22,1,.36,1);
  }

  #map-overlays{position:absolute;inset:0;pointer-events:none}
  #map-overlays > *{pointer-events:auto}

  /* ── Map page: collapsible results panel (overlaid on the map) ──────── */
  .crumb-link{transition:color .18s ease}
  .crumb-link:hover{color:#fff!important}

  .hosp-card{transition:background-color .18s ease}
  .hosp-card:hover{background:rgba(255,255,255,0.05)}
  .hosp-card.is-closest{margin-bottom:6px}
  .hosp-card.is-closest:hover{background:rgba(223,164,248,0.12)!important}
  .hosp-card + .hosp-card{border-top:1px solid var(--border)}
  .hosp-card.is-closest + .hosp-card{border-top:none}
  /* Clamp the result-card note to two lines */
  .hosp-card-note{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .map-panel-scroll{scrollbar-width:thin;scrollbar-color:var(--muted) transparent}
  .map-panel-scroll::-webkit-scrollbar{width:5px}
  .map-panel-scroll::-webkit-scrollbar-thumb{background:var(--muted);border-radius:4px}

  .nav-scroll{display:flex;gap:22px;align-items:center;overflow-x:auto;scrollbar-width:none}
  .nav-scroll::-webkit-scrollbar{display:none}

  /* ── CTA hover interactions ─────────────────────────────────────────── */
  .cta-btn{transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, filter .25s ease}
  .cta-btn:hover{transform:translateY(-3px) scale(1.035);filter:brightness(1.1)}
  .cta-btn:active{transform:translateY(-1px) scale(1.01);filter:brightness(1)}

  .nav-tab-btn{transition:color .2s ease, transform .2s ease, border-color .2s ease}
  .nav-tab-btn:hover{color:#fff!important;transform:translateY(-1px)}
  /* "Join Us" sits beside the 1122 CTA and stays in the secondary colour,
     including on hover (it must not turn white like the other nav tabs). */
  .join-nav-btn{color:#DFA4F8!important}
  .join-nav-btn:hover{color:#E7C4FB!important}
  /* Join Us sits beside the 1122 CTA on desktop, but drops into the nav row
     (as a capsule) on mobile so the header is two bars, not three. */
  .join-nav-mobile{display:none}
  @media (max-width:640px){
    .join-nav-desktop{display:none!important}
    .join-nav-mobile{display:inline-flex!important}
    /* Join Us form (mobile): the two audience tabs split the full form width
       50/50, and the submit button is centred with a little space above it. */
    .join-tabs{gap:0!important}
    .join-tab-btn{flex:1;text-align:center!important}
    .join-submit{align-self:center!important;margin-top:8px}
  }

  /* Landing-page "Immediate Action" + FAQ share the hero's 1920px container and
     page padding, but the hero VIDEO is inset on its right by the audio-controls
     column (40px) plus the gap. On desktop, inset these sections' right edge by
     the same amount so their content lines up with the video's width. On mobile
     the controls are an overlay and the video is full-width, so no inset. */
  @media (min-width:761px){
    .landing-video-align{padding-inline-end:calc(40px + clamp(10px,1.2vw,16px))}
  }

  .lang-btn{transition:transform .2s ease, border-color .2s ease, background-color .2s ease}
  .lang-btn:hover{transform:translateY(-1px);border-color:var(--borderLight)!important}

  .logo-btn{transition:transform .2s ease}
  .logo-btn:hover{transform:scale(1.03)}

  .footer-link{display:inline-block;transition:transform .2s ease, opacity .2s ease}
  .footer-link:hover{transform:translateY(-2px);opacity:.8}

  .phone-pill{display:inline-block;transition:transform .2s ease, filter .2s ease}
  .phone-pill:hover{transform:translateY(-2px) scale(1.04);filter:brightness(1.15)}

  .text-link-alt{transition:opacity .2s ease, text-decoration-thickness .2s ease}
  .text-link-alt:hover{opacity:1}

  .icon-btn{transition:transform .2s ease, background-color .2s ease}
  .icon-btn:hover{transform:scale(1.12);background:var(--borderLight)!important}

  .join-tab-btn{cursor:pointer;transition:transform .2s ease, border-color .2s ease, color .2s ease}
  .join-tab-btn:not(.is-active):hover{transform:translateY(-1px);border-color:var(--borderLight)!important;color:var(--text)!important}

  /* ── About page advocacy pillars ─────────────────────────────────────── */
  .about-pillar{transition:transform .25s cubic-bezier(.22,1,.36,1), border-color .25s ease, box-shadow .25s ease}
  .about-pillar:hover{transform:translateY(-4px);border-color:var(--borderLight);box-shadow:0 12px 32px rgba(0,0,0,.3)}

  /* ── Blog card + post interactions ───────────────────────────────────── */
  .blog-card{transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, border-color .25s ease}
  .blog-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.35);border-color:rgba(246,226,254,0.55)}
  .blog-photo{transition:transform .6s cubic-bezier(.22,1,.36,1)}
  .blog-card:hover .blog-photo{transform:scale(1.06)}

  .read-now-btn{transition:opacity .2s ease}
  .read-now-btn:hover{opacity:.75}
  .read-now-arrow{transition:transform .25s cubic-bezier(.22,1,.36,1)}
  .read-now-btn:hover .read-now-arrow{transform:translateX(4px)}

  .back-link{transition:transform .2s ease, opacity .2s ease}
  .back-link:hover{transform:translateX(-4px);opacity:.85}

  /* ── FAQ accordion ─────────────────────────────────────────────────── */
  .faq-item{transition:border-color .2s ease}
  .faq-item.is-open{border-color:#DFA4F8!important}
  .faq-item:not(.is-open):hover{border-color:var(--borderLight)!important}
  .faq-icon-badge{color:var(--sub);transition:color .2s ease}
  .faq-item.is-open .faq-icon-badge{color:#DFA4F8}
  .faq-plus{transition:transform .3s cubic-bezier(.22,1,.36,1)}
  .faq-item.is-open .faq-plus{transform:rotate(45deg)}
  .faq-answer{max-height:0;opacity:0;margin-top:0;overflow:hidden;transition:max-height .35s cubic-bezier(.22,1,.36,1), opacity .3s ease, margin-top .35s ease}
  .faq-item.is-open .faq-answer{max-height:400px;opacity:1;margin-top:14px}

  /* ── Chatbot widget ────────────────────────────────────────────────── */
  .chat-fab{transition:transform .2s ease, box-shadow .2s ease}
  .chat-fab:hover{transform:scale(1.08)}
  .chat-fab:active{transform:scale(0.97)}
  @keyframes chatPopIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
  .chat-panel{animation:chatPopIn .22s cubic-bezier(.22,1,.36,1) both}
  .chat-prompt-btn{transition:transform .2s ease, border-color .2s ease, background-color .2s ease}
  .chat-prompt-btn:hover{transform:translateY(-1px);border-color:var(--borderLight)}
  /* No chatPopIn mount animation here: on the home page the capsule enters via
     the .nav-hidden slide-in (see the landing reveal block), and a filled
     keyframe animation would override that transform. */
  .chat-capsule{transition:transform .2s ease, box-shadow .2s ease}
  .chat-capsule:hover{transform:translateY(-2px);box-shadow:0 0 30px rgba(144,16,191,0.6),0 10px 28px rgba(0,0,0,0.4)}
  .chat-capsule:active{transform:translateY(0) scale(0.98)}

  /* Glowing light-purple "orb" avatar for the chatbot — a glassy sphere built
     from stacked layers: a sharp specular highlight (glass sheen), two soft
     wispy bands drifting slowly to feel like they're swirling inside the
     glass, and a base radial gradient (pale DFA4F8 core, swirling into
     brand-purple BA45EB bands, dark at the rim) for the sphere's own
     shading. Breathes via box-shadow. */
  .chat-orb{
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(circle at 30% 20%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 9%),
      radial-gradient(ellipse 58% 14% at 62% 30%, rgba(223,164,248,0.75) 0%, rgba(223,164,248,0) 70%),
      radial-gradient(ellipse 70% 12% at 40% 50%, rgba(186,69,235,0.65) 0%, rgba(186,69,235,0) 70%),
      radial-gradient(ellipse 66% 13% at 58% 70%, rgba(186,69,235,0.6) 0%, rgba(186,69,235,0) 72%),
      radial-gradient(ellipse 46% 10% at 34% 82%, rgba(223,164,248,0.5) 0%, rgba(223,164,248,0) 74%),
      radial-gradient(circle at 34% 30%, #F6E2FE 0%, #DFA4F8 25%, #BA45EB 60%, #4B0A66 100%);
    background-repeat:no-repeat;
    box-shadow:
      inset 0 -5px 10px rgba(0,0,0,0.4),
      inset 0 5px 9px rgba(255,255,255,0.35),
      0 0 16px 2px rgba(223,164,248,0.6),
      0 0 34px 8px rgba(186,69,235,0.35);
    animation:orbGlow 3.5s ease-in-out infinite, orbSwirl 8s ease-in-out infinite;
  }
  /* A second set of translucent wisp bands rotating inside the glass, layered over
     the base sphere via ::before, gives the sense of liquid swirling within. */
  .chat-orb::before{
    content:"";
    position:absolute;
    inset:-25%;
    border-radius:50%;
    background:
      radial-gradient(ellipse 50% 12% at 50% 38%, rgba(223,164,248,0.55) 0%, rgba(223,164,248,0) 68%),
      radial-gradient(ellipse 60% 11% at 48% 62%, rgba(186,69,235,0.5) 0%, rgba(186,69,235,0) 70%);
    background-repeat:no-repeat;
    mix-blend-mode:screen;
    animation:orbRotate 7s linear infinite;
    pointer-events:none;
  }
  @keyframes orbGlow{
    0%,100%{box-shadow:inset 0 -5px 10px rgba(0,0,0,0.4),inset 0 5px 9px rgba(255,255,255,0.35),0 0 16px 2px rgba(223,164,248,0.6),0 0 34px 8px rgba(186,69,235,0.35)}
    50%{box-shadow:inset 0 -5px 10px rgba(0,0,0,0.4),inset 0 5px 9px rgba(255,255,255,0.35),0 0 22px 5px rgba(223,164,248,0.75),0 0 44px 12px rgba(186,69,235,0.45)}
  }
  @keyframes orbSwirl{
    0%,100%{background-position:30% 20%, 62% 30%, 40% 50%, 58% 70%, 34% 82%, 34% 30%}
    50%{background-position:32% 17%, 54% 36%, 48% 44%, 50% 76%, 40% 76%, 34% 30%}
  }
  @keyframes orbRotate{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
  }

  /* ── "Immediate Action": eyebrow/heading/CTA on the left, three numbered
     steps on the right. The steps share one vertical connector line (drawn
     once behind all three number-rings via ::before) instead of each card
     drawing its own segment, so it reads as a single continuous timeline. */
  .fr-alt-grid{
    display:grid;grid-template-columns:minmax(260px,360px) 1fr;align-items:start;
  }
  .fr-alt-heading{grid-column:1;grid-row:1;padding-top:6px}
  .fr-alt-row{grid-column:2;grid-row:1;position:relative;display:flex;flex-direction:column;gap:20px}
  .fr-alt-row::before{
    content:"";position:absolute;top:26px;bottom:26px;left:26px;width:2px;
    background:rgba(186,69,235,0.55);
  }
  /* Indented by the number-circle's width + its gap to the card (52px + 22px)
     so the warning box's left edge lines up with the Rinse/Ring/Remove cards
     above it, instead of the wider circle-to-edge span of .fr-alt-row. */
  .fr-alt-warn{grid-column:2;grid-row:2;margin-top:14px;margin-left:74px}
  .fr-alt-num-circle{position:relative;z-index:1}
  .fr-alt-card{
    transition:background-color .25s ease, border-color .25s ease, transform .25s cubic-bezier(.22,1,.36,1);
  }
  .fr-alt-card:hover, .fr-alt-card:focus-visible{
    border-color:#DFA4F8!important;
    transform:translateX(4px);
  }
  @media (max-width:860px){
    .fr-alt-grid{grid-template-columns:1fr}
    .fr-alt-heading{grid-column:1;grid-row:1;padding-top:0}
    .fr-alt-row{grid-column:1;grid-row:2}
    .fr-alt-warn{grid-column:1;grid-row:3}
  }

  /* ── Scroll reveal: sections rise into place as they enter view ──────── */
  .reveal{opacity:0;transform:translateY(32px);transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
  .reveal.is-visible{opacity:1;transform:translateY(0)}

  /* ── Landing nav + chat reveal ────────────────────────────────────────
     On the home page the nav slides down from the top edge and the chat bot
     slides in from the right on first scroll. initNavReveal() toggles
     .nav-hidden on #root (present while at the very top). The header keeps its
     sticky layout space while hidden, so revealing it causes no layout shift.
     Non-home pages and reduced-motion users never get .nav-hidden. */
  #site-header{transition:transform .55s cubic-bezier(.22,1,.36,1), opacity .4s ease}
  #chat-fab-wrap{transition:transform .55s cubic-bezier(.22,1,.36,1), opacity .4s ease, box-shadow .2s ease}
  .nav-hidden #site-header{transform:translateY(-100%);opacity:0;pointer-events:none}
  .nav-hidden #chat-fab-wrap{transform:translateX(135%);opacity:0;pointer-events:none}
  .nav-hidden[dir="rtl"] #chat-fab-wrap{transform:translateX(-135%)}
  /* On the landing frame (nav hidden) the hero is pulled up into the empty
     space the hidden header leaves, so the heading sits higher; it settles
     back down as the nav slides in. --header-h is measured in initNavReveal. */
  .hero-lift{transition:margin-top .55s cubic-bezier(.22,1,.36,1)}
  .nav-hidden .hero-lift{margin-top:calc(-1 * var(--header-h, 60px))}

  /* ── Micro-interactions ───────────────────────────────────────────────
     All of the below are additive polish on top of the existing hover/reveal
     layer, and are automatically disabled by the prefers-reduced-motion rule
     at the bottom of this file. They use `animation ... backwards` (rather
     than a transition on `transform`) for entrance effects so they never lock
     the transform property and leave the elements' own hover lifts intact. */

  /* Staggered cascade: grid cards fan in one after another once their section
     reveals, instead of the whole grid appearing as a single block. */
  @keyframes cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
  .reveal.is-visible .blog-card,
  .reveal.is-visible .about-pillar{animation:cardIn .55s cubic-bezier(.22,1,.36,1) backwards}
  .reveal.is-visible .blog-card:nth-child(2),
  .reveal.is-visible .about-pillar:nth-child(2){animation-delay:.08s}
  .reveal.is-visible .blog-card:nth-child(3),
  .reveal.is-visible .about-pillar:nth-child(3){animation-delay:.16s}
  .reveal.is-visible .blog-card:nth-child(4),
  .reveal.is-visible .about-pillar:nth-child(4){animation-delay:.24s}

  /* Hero content rises in on load, one line at a time. */
  @keyframes heroUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
  .hero-anim > *{animation:heroUp .7s cubic-bezier(.22,1,.36,1) backwards}
  .hero-anim > *:nth-child(1){animation-delay:.06s}
  .hero-anim > *:nth-child(2){animation-delay:.16s}
  .hero-anim > *:nth-child(3){animation-delay:.26s}

  /* Text inputs / selects: a single accent-1 stroke on focus, no glow ring —
     letting the :focus-visible outline below stack on top gave a doubled,
     concentric-ring look, so it's suppressed here the same way #chat-input is. */
  .join-form-card input, .join-form-card select, .join-form-card textarea, #chat-input{
    transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  }
  .join-form-card input:focus, .join-form-card select:focus,
  .join-form-card textarea:focus{
    border-color:#F6E2FE!important;
    box-shadow:none;
  }
  .join-form-card input:focus-visible, .join-form-card select:focus-visible,
  .join-form-card textarea:focus-visible{
    outline:none;
  }
  /* Chat input keeps a single secondary-colour stroke on focus: no glow ring,
     and no offset :focus-visible outline (which post-rebrand is also purple and
     read as a second concentric stroke). Its own border is the focus cue. */
  #chat-input:focus{border-color:#DFA4F8!important;box-shadow:none}
  #chat-input:focus-visible{outline:none}

  /* Blog grid card: the mustard arrowhead nudges right on card hover. */
  .blog-card-arrow{transition:transform .3s cubic-bezier(.22,1,.36,1)}
  .blog-card:hover .blog-card-arrow{transform:translateX(5px)}

  /* The chat "restart" icon spins a quarter-turn on hover. */
  .icon-btn.spin-hover svg{transition:transform .35s cubic-bezier(.22,1,.36,1)}
  .icon-btn.spin-hover:hover svg{transform:rotate(-90deg)}

  /* Press feedback for the header nav tabs and language pills. */
  .nav-tab-btn:active{transform:translateY(0) scale(.96)}
  .lang-btn:active{transform:scale(.94)}

  /* Circular language + mute controls on the hero video. */
  .hero-vid-ctrls button{transition:transform .18s ease, background-color .2s ease, border-color .2s ease}
  .hero-vid-ctrls button:hover{transform:scale(1.08)}
  .hero-vid-ctrls button:active{transform:scale(.95)}

  /* Two independent hero <video> elements, swapped by plain CSS display
     instead of a shared element's src — see heroPortrait's comment in app.js
     for why. Whichever one matches the viewport is visible from first paint,
     so its `autoplay` attribute just works with no JS involved. */
  .hero-video-mobile{display:none}
  /* Landscape frame on desktop; portrait on mobile so the 1080x1920 mobile
     clip fills its box instead of being cropped into the wide landscape strip. */
  .hero-video-frame{aspect-ratio:1920/800}
  @media (max-width:760px){
    .hero-video-desktop{display:none}
    .hero-video-mobile{display:block}
    .hero-video-frame{aspect-ratio:1080/1920}
    /* On the tall portrait frame the controls overlap the video's top-right
       corner instead of sitting beside it, and switch from the purple accent
       to a white outline so they stay legible against the video rather than
       blending into it. */
    .hero-vid-ctrls{position:absolute;top:14px;right:14px;z-index:2;gap:8px}
    .hero-vid-ctrls .hero-audio-pill{background:rgba(10,12,20,0.38)!important;border-color:rgba(255,255,255,0.6)!important;color:#fff!important;backdrop-filter:blur(2px)}
    .hero-vid-ctrls .hero-audio-pill.is-active{background:rgba(255,255,255,0.28)!important;border-color:#fff!important}
  }

  /* ── Responsive: header drops to two rows instead of clipping/crowding ─
     The grid centering (1fr auto 1fr) only makes sense on one row, so mobile
     switches the row back to flex-wrap, same as before the centering fix. */
  @media (max-width:640px){
    .site-header-inner{display:flex!important;flex-wrap:wrap;row-gap:8px;padding:9px 12px 10px!important}
    .brand-wordmark{font-size:20px!important}
    .lang-btn{padding:2px 7px!important;font-size:9.5px!important}
    /* Language pills + 1122 CTA stay grouped and pinned to the top-right, so
       the language tabs always sit right beside the call button. */
    .header-controls{margin-left:auto!important;flex-shrink:0}
    .call-pill{padding:5px 10px!important}
    /* Secondary nav: its own centred row that collapses on scroll-down and
       re-appears on scroll-up (see initHeaderScrollHide + .nav-collapsed). */
    .nav-scroll{
      order:3;flex:1 1 100%!important;justify-content:center!important;gap:16px!important;
      max-height:52px;overflow:hidden;
      transition:max-height .32s cubic-bezier(.22,1,.36,1), opacity .25s ease, margin-top .32s ease;
    }
    .nav-collapsed .nav-scroll{max-height:0!important;opacity:0;margin-top:-8px!important;pointer-events:none}
  }

  /* ── Responsive: stats wrap to a 2x2 grid on small screens, with the
     divider borders reflowed so each cell is separated cleanly. */
  @media (max-width:640px){
    .stats-item{flex:1 1 50%!important;min-width:0!important}
    .stats-item:nth-child(3){border-left:none!important}   /* left column, row 2 */
    .stats-item:nth-child(n+3){border-top:1px solid var(--border)} /* row 2 top rule */
  }

  /* ── Responsive: keep "Hospitals Near Me" clear of the mobile browser's
     bottom URL bar / home-indicator area ────────────────────────────── */
  @media (max-width:760px){
    .near-me-btn{bottom:calc(env(safe-area-inset-bottom,0px) + 30px)!important}
    /* Results panel takes only the top half of the map so the pins (and the
       selected hospital) stay visible below it. Its body already scrolls. */
    .map-panel{bottom:auto!important;height:48vh!important}
  }

  /* ── Responsive: on mobile the org info stacks on its own full-width row
     with the phone CTA underneath, instead of the two sitting side by side
     (which squeezed the org name into 2–3 wrapped lines) ─────────────── */
  @media (max-width:640px){
    .res-org{flex-direction:column;align-items:flex-start;gap:0;text-align:left}
    .res-org .res-org-dot{display:none}
    .res-org > div{width:100%}
    .res-org .res-call{align-self:flex-start;margin-top:12px;padding:8px 14px!important;justify-content:flex-start}
  }

  /* ── Responsive: condense the blog featured post so "Read Now" is
     visible in one viewport without scrolling ──────────────────────── */
  @media (max-width:760px){
    .blog-featured-btn{gap:16px!important}
    .blog-featured-photo{height:160px!important}
    .bf-label{font-size:11px!important}
    .bf-title{font-size:22px!important;margin:8px 0 6px!important;line-height:1.2!important}
    .bf-byline{margin-bottom:8px!important;font-size:12px!important}
    .bf-excerpt{
      margin:0 0 14px!important;
      font-size:14px!important;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
  }

  /* ── Responsive: hide the "Coming Soon" blog placeholders on mobile, where
     empty greyed cards read as broken rather than as upcoming content ──── */
  @media (max-width:640px){
    .blog-coming-soon{display:none!important}
  }

  /* ── Responsive: footer stacks nav links above the logo/email block ──── */
  @media (max-width:760px){
    .footer-top-row{flex-direction:column-reverse!important;align-items:flex-start!important;gap:36px!important}
    .footer-nav{text-align:left!important}
    .footer-disclaimer-mobile{display:block!important}
    .footer-disclaimer-desktop{display:none!important}
  }

  /* ── Responsive: condense the Join Us page's form to fit one viewport ─── */
  @media (max-width:640px){
    .join-hero-grid{padding-top:20px!important;padding-bottom:24px!important}
    .join-tabs{margin-bottom:10px!important}
    .join-form-card{gap:9px!important}
    .join-form-card label{margin-bottom:2px!important}
    .join-form-card input, .join-form-card select{padding:9px 12px!important}
    .join-form-card button{padding:11px 28px!important}
  }

  /* ── Responsive: the form's divider only reads correctly side-by-side with
     the image column — once the grid stacks, drop the border/indent ────── */
  @media (max-width:800px){
    .join-form-col{border-inline-start:none!important;padding-inline-start:0!important}
  }

  @media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}