/* =========================================================================
   Extra Care — Base + Components
   ========================================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--t-body); line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
body[dir="rtl"]{ font-family:var(--font-ar); }
/* Phone numbers should always render in LTR form, even when sitting inside an
   Arabic RTL block. Bidi-isolate any tel:/wa.me link so the digits don't reorder. */
a[href^="tel:"], a[href*="wa.me/"]{ unicode-bidi:isolate; }
a[href^="tel:"] > *, a[href*="wa.me/"] > *{ unicode-bidi:plaintext; }
/* Any element explicitly marked as a phone number */
.phone, [data-phone]{ direction:ltr; unicode-bidi:isolate; }

/* Arabic letters must connect — kill ALL letter-spacing + text-transform in RTL mode so ligatures form correctly */
body[dir="rtl"], body[dir="rtl"] *{ letter-spacing:0 !important; text-transform:none !important; word-spacing:normal; font-feature-settings:"liga","calt","kern"; -webkit-font-feature-settings:"liga","calt","kern"; text-rendering:optimizeLegibility; }
body[dir="rtl"] h1,body[dir="rtl"] h2,body[dir="rtl"] h3{ line-height:1.35; }
body[dir="rtl"] .eyebrow{ font-weight:700; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
::selection{ background:color-mix(in oklch,var(--accent) 26%,transparent); }

h1,h2,h3,h4{ font-weight:700; line-height:1.04; letter-spacing:-.022em; margin:0; text-wrap:balance; }
p{ margin:0; }
.lead{ font-size:var(--t-lead); line-height:1.45; color:var(--gray); font-weight:400; letter-spacing:-.01em; text-wrap:pretty; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-wide{ max-width:var(--container-wide); }
.section{ padding-block:var(--section-y); position:relative; }
.eyebrow{
  font-family:var(--font-accent); font-weight:800; font-size:var(--t-eyebrow);
  letter-spacing:.32em; text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow.muted{ color:var(--gray); }
.eyebrow::before{
  content:""; inline-size:26px; block-size:2px; background:currentColor; opacity:.9;
}
.eyebrow.no-rule::before{ display:none; }
/* On phones the eyebrow text wraps, leaving the dash awkwardly on its own line —
   hide the decorative dash on small screens. */
@media (max-width:560px){ .eyebrow::before{ display:none; } }
.num{ font-family:var(--font-accent); font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }

/* hairline rule */
.hair{ block-size:1px; background:var(--hair); border:0; }
.hair-v{ inline-size:1px; background:var(--hair); }

/* ---------- buttons ---------- */
.btn{
  --bg:var(--ink); --fg:#fff;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6em; white-space:nowrap;
  padding:.95em 1.6em; border-radius:var(--r-pill);
  background:var(--bg); color:var(--fg);
  font-weight:600; letter-spacing:-.01em; border:1px solid transparent;
  transition:transform var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
  will-change:transform; isolation:isolate; text-align:center;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn:active{ transform:translateY(0); }
.btn--accent{ --bg:var(--accent); --fg:#fff; box-shadow:var(--shadow-accent); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); border-color:var(--hair); }
.btn--ghost:hover{ border-color:var(--ink); box-shadow:none; }
.btn--light{ --bg:#fff; --fg:var(--ink); }
.btn .ar{ transition:transform var(--d-fast) var(--e-out); }
.btn:hover .ar{ transform:translateX(3px); }
body[dir="rtl"] .btn:hover .ar{ transform:translateX(-3px) scaleX(-1); }
body[dir="rtl"] .btn .ar{ transform:scaleX(-1); }

.link-arrow{ display:inline-flex; align-items:center; gap:.5em; font-weight:600; color:var(--accent); }
.link-arrow .ar{ transition:transform var(--d-fast) var(--e-out); }
.link-arrow:hover .ar{ transform:translateX(4px); }
body[dir="rtl"] .link-arrow .ar{ transform:scaleX(-1); }

/* ---------- chips / tags ---------- */
.chip{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.45em .9em; border-radius:var(--r-pill);
  border:1px solid var(--hair); background:var(--bg);
  font-size:.86rem; font-weight:500; color:var(--gray);
}
.chip .dot{ inline-size:7px; block-size:7px; border-radius:50%; background:var(--accent); }

/* ---------- reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--e-out), transform .9s var(--e-out); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal][data-reveal="fade"]{ transform:none; }
[data-reveal-d="1"]{ transition-delay:.08s; }
[data-reveal-d="2"]{ transition-delay:.16s; }
[data-reveal-d="3"]{ transition-delay:.24s; }
[data-reveal-d="4"]{ transition-delay:.32s; }
[data-reveal-d="5"]{ transition-delay:.40s; }
[data-reveal-d="6"]{ transition-delay:.48s; }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:120;
  block-size:var(--nav-h); display:flex; align-items:center;
  transition:background .4s var(--e-out), border-color .4s var(--e-out), backdrop-filter .4s;
  border-block-end:1px solid transparent;
}
.nav.scrolled{ background:color-mix(in oklch,var(--bg) 80%,transparent); backdrop-filter:blur(18px) saturate(1.4); border-block-end-color:var(--hair); }
.nav.on-dark{ color:#fff; }
.nav.on-dark.scrolled{ background:color-mix(in oklch,var(--ink-2) 72%,transparent); border-block-end-color:rgba(255,255,255,.1); }
.nav__row{ display:flex; align-items:center; gap:1rem; width:100%; }
.nav__links{ gap:.1rem; }
.nav__brand{ display:flex; align-items:center; gap:.7rem; font-family:var(--font-accent); font-weight:800; letter-spacing:-.01em; }
.nav__brand .em{ inline-size:30px; block-size:30px; flex:none; }
.nav .btn{ padding:.7em 1.15em; font-size:.92rem; }
.nav__brand .wm{ font-size:1.06rem; line-height:1.05; white-space:nowrap; }
.nav__brand .wm small{ display:block; font-family:var(--font-sans); font-weight:600; font-size:.6rem; letter-spacing:.26em; color:var(--gray); text-transform:uppercase; margin-block-start:2px; }
.nav.on-dark .nav__brand .wm small{ color:var(--gray-2); }
.nav__links{ display:flex; align-items:center; gap:.3rem; margin-inline-start:auto; }
.nav__links a{ padding:.45em .62em; border-radius:var(--r-pill); font-weight:500; font-size:.92rem; color:inherit; opacity:.82; transition:opacity .25s, background .25s; }
.nav__links a:hover{ opacity:1; background:color-mix(in oklch,currentColor 8%,transparent); }
.nav__links a.active{ opacity:1; color:var(--accent); }
.nav__tools{ display:flex; align-items:center; gap:.5rem; }
.lang-toggle{ display:inline-flex; align-items:stretch; padding:0; border:1px solid var(--hair); border-radius:var(--r-pill); font-family:var(--font-accent); font-weight:700; font-size:.72rem; letter-spacing:.04em; overflow:hidden; line-height:1; }
.nav.on-dark .lang-toggle{ border-color:rgba(255,255,255,.18); }
.lang-toggle button{ display:inline-flex; align-items:center; justify-content:center; min-inline-size:34px; padding:.55em .8em; border:none; background:transparent; color:inherit; opacity:.5; cursor:pointer; transition:opacity .25s, background .25s, color .25s; }
.lang-toggle button.active{ opacity:1; background:var(--accent); color:#fff; }
.nav.on-dark .lang-toggle button.active{ background:#fff; color:var(--ink); }
.nav__burger{ display:none; flex:none; inline-size:44px; block-size:44px; border-radius:var(--r-pill); border:1px solid var(--hair); align-items:center; justify-content:center; background:transparent; }
.nav__burger span{ position:relative; inline-size:18px; block-size:2px; background:currentColor; transition:.3s; }
.nav__burger span::before,.nav__burger span::after{ content:""; position:absolute; inset-inline:0; block-size:2px; background:currentColor; transition:.3s; }
.nav__burger span::before{ inset-block-start:-6px; } .nav__burger span::after{ inset-block-start:6px; }

/* emergency pill */
.emerg{ display:inline-flex; align-items:center; gap:.45em; padding:.5em .8em; border-radius:var(--r-pill); background:color-mix(in oklch,var(--lab-deep) 12%,transparent); color:var(--lab-deep); font-weight:600; font-size:.84rem; white-space:nowrap; border:1px solid color-mix(in oklch,var(--lab-deep) 22%,transparent); }
.emerg .pulse{ inline-size:8px; block-size:8px; border-radius:50%; background:var(--lab-deep); box-shadow:0 0 0 0 color-mix(in oklch,var(--lab-deep) 60%,transparent); animation:emergpulse 2s var(--e-out) infinite; }
@keyframes emergpulse{ 0%{ box-shadow:0 0 0 0 color-mix(in oklch,var(--lab-deep) 55%,transparent);} 70%{ box-shadow:0 0 0 9px transparent;} 100%{ box-shadow:0 0 0 0 transparent;} }

/* mobile menu */
.mmenu{ position:fixed; inset:0; z-index:130; background:var(--bg); transform:translateY(-101%); transition:transform .55s cubic-bezier(.65,0,.35,1); display:flex; flex-direction:column; padding:0 var(--gutter) 1.6rem; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.mmenu.open{ transform:none; }
.mmenu__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:1rem; border-block-end:1px solid var(--hair); margin-block-end:.8rem; position:sticky; top:0; background:var(--bg); z-index:2; }
.mmenu__brand{ display:flex; align-items:center; gap:.7rem; font-family:var(--font-accent); font-weight:800; letter-spacing:-.01em; }
.mmenu__brand .em{ inline-size:28px; block-size:28px; flex:none; }
.mmenu__brand .wm{ font-size:1.02rem; line-height:1.05; }
.mmenu__brand .wm small{ display:block; font-family:var(--font-sans); font-weight:600; font-size:.58rem; letter-spacing:.26em; color:var(--gray); text-transform:uppercase; margin-block-start:2px; }
.mmenu__close{ inline-size:44px; block-size:44px; border-radius:50%; border:1px solid var(--hair); background:transparent; color:var(--ink); display:grid; place-items:center; cursor:pointer; transition:background .25s, border-color .25s, transform .25s; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.mmenu__close:hover, .mmenu__close:focus-visible{ background:var(--bg-soft); border-color:var(--ink); transform:rotate(90deg); }
.mmenu__close svg{ display:block; }
.mmenu a{ font-size:1.6rem; font-weight:700; letter-spacing:-.015em; padding-block:.7rem; border-block-end:1px solid var(--hair); display:flex; align-items:center; justify-content:space-between; color:var(--ink); }
.mmenu a:hover, .mmenu a:focus-visible{ color:var(--accent); }
.mmenu a .ar{ color:var(--gray); transition:transform .25s, color .25s; }
.mmenu a:hover .ar, .mmenu a:focus-visible .ar{ color:var(--accent); transform:translateX(4px); }
body[dir="rtl"] .mmenu a:hover .ar, body[dir="rtl"] .mmenu a:focus-visible .ar{ transform:translateX(-4px); }
.mmenu .mm-foot{ margin-block-start:auto; display:flex; flex-direction:column; gap:.7rem; padding-block-start:1.6rem; }
.mmenu .mm-foot > *{ width:100%; }
.mmenu .mm-foot .btn{ inline-size:100%; padding:1em 1.2em; font-size:1rem; }
.mmenu .emerg{ display:inline-flex; align-items:center; justify-content:center; gap:.6em; padding:.85em 1.2em; border-radius:var(--r-pill); border:1px solid color-mix(in oklch,var(--lab-deep) 60%,transparent); background:color-mix(in oklch,var(--lab-deep) 8%,transparent); color:var(--lab-deep); font-weight:600; font-size:.95rem; }
.mmenu .mm-lang{ inline-size:100%; padding-block:1rem 0; border-block-start:1px solid var(--hair); margin-block-start:.6rem; display:flex; justify-content:center; }
.mmenu .mm-lang .lang-toggle{ inline-size:100%; max-inline-size:240px; justify-content:center; }
.mmenu .mm-lang .lang-toggle button{ flex:1; min-inline-size:50px; padding:.8em 1.2em; font-size:.85rem; }

/* ---------- ECG hairline divider ---------- */
.ecg{ position:relative; block-size:60px; overflow:hidden; }
.ecg svg{ position:absolute; inset-block-start:50%; translate:0 -50%; inline-size:100%; block-size:48px; }
.ecg path{ fill:none; stroke:var(--hair); stroke-width:1.4; }
.ecg path.live{ stroke:var(--accent); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:13 87; stroke-dashoffset:100; filter:drop-shadow(0 0 5px color-mix(in oklch,var(--accent) 60%,transparent)); }
.ecg.in path.live{ animation:ecgsweep 2.8s linear infinite; }
@keyframes ecgsweep{ from{ stroke-dashoffset:100; } to{ stroke-dashoffset:0; } }
.ecg--divider{ margin-block:clamp(.6rem,2.4vw,1.8rem); }
.ecg--full.ecg--full{ max-inline-size:none; padding-inline:0; margin-inline:0; width:100%; box-sizing:border-box; }
.ecg--full svg{ inset-inline-start:0; }

/* ---------- Schedule modal (CMS) ---------- */
.xc-modal-wrap{ position:fixed; inset:0; z-index:9000; display:grid; place-items:center; padding:1rem; }
.xc-modal-bg{ position:absolute; inset:0; background:rgba(15,20,28,.55); backdrop-filter:blur(6px); animation:xcFade .25s var(--e-out); }
.xc-modal{ position:relative; background:#fff; color:var(--ink); border-radius:var(--r-xl); padding:clamp(1.5rem,3vw,2.4rem); max-inline-size:min(460px,92vw); inline-size:100%; box-shadow:0 30px 80px -20px rgba(0,0,0,.4); animation:xcPop .35s var(--e-out); }
.xc-modal h3{ font-size:1.5rem; letter-spacing:-.02em; margin-block-end:.2rem; }
.xc-modal__sub{ color:var(--gray); font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; margin-block-end:1.4rem; }
.xc-modal__close{ position:absolute; inset-block-start:.9rem; inset-inline-end:.9rem; inline-size:36px; block-size:36px; border-radius:50%; border:1px solid var(--hair); background:transparent; font-size:1.4rem; line-height:1; display:grid; place-items:center; cursor:pointer; z-index:2; transition:background .2s; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.xc-modal__close:hover{ background:var(--bg-soft); }
.xc-modal__close > *{ pointer-events:none; }
.xc-schedule{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.6rem; }
.xc-schedule li{ display:flex; justify-content:space-between; align-items:center; padding:.85rem 1rem; background:var(--bg-soft); border-radius:var(--r-md); border:1px solid var(--hair); }
.xc-schedule li b{ font-weight:700; }
.xc-schedule li span{ color:var(--gray); font-weight:500; font-variant-numeric:tabular-nums; }
.xc-schedule__empty{ text-align:center; color:var(--gray); padding:1.5rem !important; }
@keyframes xcFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes xcPop{ from{ opacity:0; transform:translateY(20px) scale(.96); } to{ opacity:1; transform:none; } }

/* ---------- footer ---------- */
.footer{ background:var(--ink-2); color:#fff; padding-block:clamp(3.5rem,6vw,6rem) 2.5rem; position:relative; overflow:hidden; }
.footer a{ color:rgba(255,255,255,.72); transition:color .25s; }
.footer a:hover{ color:#fff; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem; }
.footer__brand .em{ inline-size:44px; block-size:44px; margin-block-end:1.2rem; }
.footer h5{ font-family:var(--font-accent); font-weight:800; font-size:.76rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gray-2); margin:0 0 1.1rem; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.footer .fam{ display:flex; gap:.6rem; flex-wrap:wrap; margin-block-start:1rem; }
.footer .fam .b{ display:inline-flex; align-items:center; gap:.5em; padding:.4em .8em; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.14); font-size:.82rem; }
.footer .fam .b .d{ inline-size:8px; block-size:8px; border-radius:50%; }
.footer__bottom{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-block-start:3rem; padding-block-start:1.6rem; border-block-start:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.5); font-size:.85rem; }
.footer__mag a{ color:rgba(255,255,255,.78); text-decoration:underline; text-decoration-color:rgba(255,255,255,.25); text-underline-offset:3px; transition:color .25s, text-decoration-color .25s; }
.footer__mag a:hover{ color:#fff; text-decoration-color:#fff; }

/* ---------- bilingual visibility ---------- */
.i18n-ar{ display:none; }
body[dir="rtl"] .i18n-en{ display:none; }
body[dir="rtl"] .i18n-ar{ display:revert; }

/* ---------- utilities ---------- */
.stack{ display:flex; flex-direction:column; }
.cluster{ display:flex; flex-wrap:wrap; align-items:center; }
.gap-s{ gap:.6rem; } .gap-m{ gap:1rem; } .gap-l{ gap:2rem; }
.mt-s{ margin-block-start:1rem; } .mt-m{ margin-block-start:2rem; } .mt-l{ margin-block-start:3rem; }
.center{ text-align:center; } .muted{ color:var(--gray); }
.maxw-sm{ max-width:46ch; } .maxw-md{ max-width:60ch; }
.grid{ display:grid; }
.skip{ position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:.8em 1.2em; border-radius:0 0 var(--r-sm) 0; z-index:200; }
.skip:focus{ left:0; }
:focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* ---------- custom cursor (desktop only) ---------- */
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; pointer-events:none; z-index:99999; border-radius:50%; mix-blend-mode:difference; transition:opacity .2s; }
.cursor-dot{ inline-size:6px; block-size:6px; background:#fff; }
.cursor-ring{ inline-size:30px; block-size:30px; border:1.5px solid #fff; transition:width .25s var(--e-out), height .25s var(--e-out), opacity .25s; }
.cursor-ring.hot{ inline-size:52px; block-size:52px; }
.cursor-ring.press{ inline-size:22px; block-size:22px; }
@media (pointer:coarse){ .cursor-dot,.cursor-ring{ display:none; } }
/* Hide the OS cursor on desktop (where the custom cursor takes over) */
@media (pointer:fine){
  html, body, a, button, input, textarea, select, label, [role="button"], .btn, .nav__brand, .door, .doccard, .tcard2, .fcard, .bcell, .navbtn{ cursor:none !important; }
  /* When hovering an iframe (Google Maps), JS adds .using-iframe to body so
     the OS cursor takes over again — otherwise the user sees no cursor at all */
  body.using-iframe, body.using-iframe *{ cursor:auto !important; }
  body.using-iframe .cursor-dot, body.using-iframe .cursor-ring{ opacity:0; }
  /* At non-100% browser zoom, custom cursor positioning gets unreliable —
     hand control back to the OS cursor */
  body.zoomed, body.zoomed *{ cursor:auto !important; }
  body.zoomed .cursor-dot, body.zoomed .cursor-ring{ opacity:0; }
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .nav__links{ display:none; }
  .nav__burger{ display:inline-flex; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  /* Hide redundant items on mobile — they all live inside the mobile menu */
  .nav__tools .lang-toggle{ display:none; }
  .nav__tools .btn--accent{ display:none; }
  .nav__tools .emerg{ display:none; }
  .nav__tools{ margin-inline-start:auto; }
}
@media (max-width:560px){
  .footer__grid{ grid-template-columns:1fr; }
  .nav__tools .emerg span.lbl{ display:none; }
  .nav__tools .emerg{ padding:.5em .8em; }
  .nav__brand .wm{ font-size:.95rem; }
  .nav__brand .em{ inline-size:26px; block-size:26px; }
}
@media (max-width:380px){
  .nav__tools .emerg{ display:none; }
}

/* Make sure mobile menu sits above EVERYTHING including the intro overlay */
.mmenu{ z-index:9998 !important; }
/* Make burger tap-friendly */
.nav__burger{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
/* Slightly smaller mmenu link sizes so they fit */
@media (max-width:560px){
  .mmenu a{ font-size:1.55rem; padding-block:.4rem; }
}
/* (mm-lang styling lives near the mobile menu rules above) */

/* ============== Mobile-specific safety net ============== */
@media (max-width:980px){
  /* No element should ever cause horizontal scroll */
  html, body{ overflow-x:clip; max-inline-size:100vw; }
  /* Make every actionable link a generous tap target */
  .mmenu a{ min-block-size:44px; }
  .btn{ min-block-size:44px; }
  /* Mobile menu uses its own sticky header so no extra padding-top is needed */
}
@media (max-width:560px){
  /* Map and form sections shouldn't pinch */
  .wrap{ padding-inline:clamp(1rem,4vw,1.4rem); }
  /* Long phone numbers and links must not break the layout */
  .infolist span, .loccard .links a{ word-break:break-word; }
  /* Footer columns stack with breathing room */
  .footer__grid{ gap:2rem; }
  .footer__bottom{ flex-direction:column; gap:.4rem; align-items:flex-start; font-size:.78rem; }
  /* Schedule modal: use full screen on tiny phones */
  .xc-modal{ padding:1.2rem; }
  /* Smaller emerg pill on tiny screens */
  .nav__tools .emerg{ font-size:.78rem; }
}
@media (max-width:380px){
  /* Squeeze the brand wordmark sub-label */
  .nav__brand .wm small{ display:none; }
}
/* Hide-on-mobile utility (applied to elements that don't fit a 2-col grid cleanly on phones) */
@media (max-width:560px){ .hide-mobile{ display:none !important; } }
/* Hide trailing phone-number suffixes on buttons on mobile — the icon is enough context */
@media (max-width:560px){ .phone-num{ display:none !important; } }

/* ---------- floating WhatsApp button ---------- */
.wa-fab{
  position:fixed; inset-block-end:clamp(1rem,3vw,1.7rem); inset-inline-end:clamp(1rem,3vw,1.7rem);
  z-index:115; display:grid; place-items:center;
  inline-size:56px; block-size:56px; padding:0; border-radius:50%;
  background:#25D366; color:#fff;
  box-shadow:0 10px 30px -8px rgba(37,211,102,.7), var(--shadow-md);
  transition:transform .3s var(--e-out), box-shadow .3s;
}
.wa-fab:hover{ transform:translateY(-3px) scale(1.05); }
/* When footer is in view, lift the FAB above it so it never overlaps text.
   Track instantly (no transform transition) so it sits still instead of bobbing. */
.wa-fab--tucked{ transform:translateY(calc(-1 * var(--tuck, 0px))); transition:none; }
.wa-fab--tucked:hover{ transform:translateY(calc(-3px - var(--tuck, 0px))) scale(1.05); }
.wa-fab svg{ inline-size:28px; block-size:28px; display:block; }
.wa-fab__lbl{ display:none; }

/* ---------- page-transition curtain (exit) + arrival fade ---------- */
.xc-curtain{
  position:fixed; inset:0; z-index:400; background:var(--accent);
  display:grid; place-items:center; pointer-events:none;
  transform:translateY(100%); transition:transform .5s var(--e-inout);
}
.xc-curtain__em{ inline-size:clamp(64px,9vw,108px); aspect-ratio:1; filter:drop-shadow(0 8px 30px rgba(0,0,0,.25)); opacity:0; transition:opacity .3s; }
body.xc-leaving .xc-curtain{ transform:translateY(0); pointer-events:all; }
body.xc-leaving .xc-curtain__em{ opacity:1; }
@media (prefers-reduced-motion:no-preference){
  main{ animation:xc-pagein .6s var(--e-out) both; }
}
@keyframes xc-pagein{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .ecg path.live{ animation:none !important; stroke-dasharray:none !important; opacity:.55; }
}

/* ===================== MOTION LAYER ===================== */
[data-reveal]{ opacity:0; transform:translateY(38px); transition:opacity .8s var(--e-out), transform .8s var(--e-out); transition-delay:var(--rd,0s); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal][data-reveal="fade"]{ transform:none; }
[data-reveal] img{ transform:scale(1.09); transition:transform 1.5s var(--e-out) var(--rd,0s); }
[data-reveal].in img{ transform:scale(1); }
/* nav link underline grow */
.nav__links a{ position:relative; }
.nav__links a::after{ content:""; position:absolute; inset-block-end:.2em; inset-inline:.62em; block-size:2px; background:currentColor; transform:scaleX(0); transform-origin:inline-start; transition:transform .35s var(--e-out); opacity:.5; border-radius:2px; }
.nav__links a:hover::after{ transform:scaleX(1); }
.nav__links a.active::after{ transform:scaleX(1); background:var(--accent); opacity:1; }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  [data-reveal] img{ transform:none !important; }
}

/* ===================== ENTRANCE SCREEN ===================== */
html.intro-active, html.intro-active body{ overflow:hidden; }
html.intro-done #xc-intro{ display:none; }
#xc-intro{ position:fixed; inset:0; z-index:9999; overflow:hidden; background:transparent; }
#xc-intro .xc-intro__panel{ position:absolute; inset-inline:0; block-size:50.6%; will-change:transform; transition:transform 1.05s cubic-bezier(.76,0,.24,1); background:#16131a; }
/* Gradient peaks moved AWAY from the seam (top panel peak at 50% of its height, bottom panel peak at 50% of its height) so both halves have the same dark color at the centerline — no visible band. */
.xc-intro__panel--t{ inset-block-start:0; background-image:radial-gradient(120% 130% at 50% 50%, color-mix(in oklch,#0099D6 18%,#16131a), transparent 72%); }
.xc-intro__panel--b{ inset-block-end:0; background-image:radial-gradient(120% 130% at 50% 50%, color-mix(in oklch,#7C51A1 16%,#16131a), transparent 72%); }
.xc-intro__grid{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.6;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:clamp(40px,5vw,58px) clamp(40px,5vw,58px);
  -webkit-mask:radial-gradient(72% 62% at 50% 50%,#000 30%,transparent 76%); mask:radial-gradient(72% 62% at 50% 50%,#000 30%,transparent 76%);
  transition:opacity .6s ease; }
.xc-intro__core{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; padding:2rem; text-align:center; transition:opacity .55s ease, transform .9s var(--e-out); }
.xc-intro__em{ inline-size:clamp(120px,17vw,210px); aspect-ratio:1; filter:drop-shadow(0 22px 60px rgba(0,0,0,.55)); }
.xc-intro__wm{ font-family:var(--font-accent); font-weight:800; letter-spacing:-.01em; font-size:clamp(1.7rem,4.5vw,2.95rem); color:#fff; opacity:0; transform:translateY(16px); }
.xc-intro__tag{ font-family:var(--font-accent); font-weight:700; letter-spacing:.34em; text-transform:uppercase; font-size:.7rem; color:rgba(255,255,255,.5); opacity:0; transform:translateY(12px); }
.xc-intro__bar{ inline-size:min(230px,44vw); block-size:2px; background:rgba(255,255,255,.13); border-radius:2px; overflow:hidden; margin-block-start:1rem; opacity:0; }
.xc-intro__bar span{ display:block; block-size:100%; inline-size:0; border-radius:2px; background:linear-gradient(90deg,#0099D6,#7C51A1 38%,#D38729 70%,#6FA542); }
#xc-intro.show .xc-intro__wm{ animation:xcIntroUp .9s var(--e-out) 1.25s forwards; }
#xc-intro.show .xc-intro__tag{ animation:xcIntroUp .9s var(--e-out) 1.5s forwards; }
#xc-intro.show .xc-intro__bar{ animation:xcIntroFade .4s ease .4s forwards; }
#xc-intro.show .xc-intro__bar span{ animation:xcIntroBar 2.5s cubic-bezier(.5,0,.2,1) .35s forwards; }
@keyframes xcIntroUp{ to{ opacity:1; transform:none; } }
@keyframes xcIntroFade{ to{ opacity:1; } }
@keyframes xcIntroBar{ 0%{ inline-size:0; } 78%{ inline-size:90%; } 100%{ inline-size:100%; } }
#xc-intro.exit .xc-intro__panel--t{ transform:translateY(-101%); }
#xc-intro.exit .xc-intro__panel--b{ transform:translateY(101%); }
#xc-intro.exit .xc-intro__core{ opacity:0; transform:translateY(-26px) scale(.94); }
#xc-intro.exit .xc-intro__grid{ opacity:0; }
@media (prefers-reduced-motion:reduce){
  #xc-intro .xc-intro__panel{ transition:transform .4s ease; }
  #xc-intro.show .xc-intro__wm,#xc-intro.show .xc-intro__tag{ animation:none; opacity:1; transform:none; }
  #xc-intro.show .xc-intro__bar span{ animation:none; inline-size:100%; }
}