/* ==========================================================================
   MEDITEK — "NOVA" DESIGN SYSTEM
   New interactive / 3D-accent redesign
   This file is additive: it loads AFTER assets/css/theme.css and overrides
   the visual layer while leaving all Bootstrap layout/grid classes intact.
   ========================================================================== */

:root{
  --mk-navy-950:#050b18;
  --mk-navy-900:#081633;
  --mk-navy-800:#0c2049;
  --mk-navy-700:#123069;
  --mk-navy-600:#173d86;
  --mk-blue-500:#1a56db;
  --mk-cyan-400:#17c9d6;
  --mk-cyan-300:#4fe3ea;
  --mk-teal-200:#a4f5ec;
  --mk-white:#ffffff;
  --mk-ink:#0b1730;
  --mk-ink-soft:#4a5a78;
  --mk-mist:#eef3fb;
  --mk-mist-2:#f6f9fd;
  --mk-line:rgba(11,23,48,.09);
  --mk-glass-bg:rgba(255,255,255,.62);
  --mk-glass-border:rgba(255,255,255,.55);
  --mk-glass-bg-dark:rgba(8,22,51,.55);
  --mk-glass-border-dark:rgba(255,255,255,.12);
  --mk-shadow-sm:0 4px 14px rgba(9,25,63,.08);
  --mk-shadow-md:0 14px 34px rgba(9,25,63,.14);
  --mk-shadow-lg:0 26px 60px rgba(9,25,63,.22);
  --mk-shadow-glow:0 0 0 1px rgba(23,201,214,.25), 0 18px 40px rgba(23,201,214,.18);
  --mk-radius-sm:12px;
  --mk-radius-md:20px;
  --mk-radius-lg:28px;
  --mk-radius-pill:999px;
  --mk-ease:cubic-bezier(.22,1,.36,1);
  --mk-font-display:'Outfit','Fjalla One',sans-serif;
  --mk-font-body:'Plus Jakarta Sans','Roboto',sans-serif;

  /* ---- time-of-day "atmosphere" tokens ----
     Overridden per data-theme below (assets/js/theme-time.js sets
     data-theme="day" | "night" on <html>, based on IST — day 6am-6pm,
     night 6pm-6am). These defaults ARE the night theme (also repeated
     explicitly under :root[data-theme="night"] below), since that
     matches the original always-dark hero/footer look before this
     feature existed. */
  --mk-atmo-a:#0e2c63;
  --mk-atmo-b:#081633;
  --mk-atmo-c:#050b18;
  --mk-atmo-accent:#17c9d6;
  --mk-atmo-accent-2:#4f7dff;
  --mk-on-atmo:#ffffff;
  --mk-on-atmo-soft:rgba(255,255,255,.78);
  --mk-on-atmo-faint:rgba(255,255,255,.62);
  --mk-glass-atmo-bg:rgba(255,255,255,.08);
  --mk-glass-atmo-border:rgba(255,255,255,.18);
  --mk-nav-text:rgba(255,255,255,.92);
  /* warm "highlight" used for emphasised hero text — deliberately NOT
     blue, so it never blends into the blue/navy atmosphere behind it */
  --mk-highlight-1:#ffd28a;
  --mk-highlight-2:#ffb454;
}

/* ---------- DAY (6am-6pm) — was "afternoon", now the single light theme ---------- */
:root[data-theme="day"]{
  --mk-atmo-a:#eaf6ff;
  --mk-atmo-b:#dcefff;
  --mk-atmo-c:#ffffff;
  --mk-atmo-accent:#1a56db;
  --mk-atmo-accent-2:#0f8fa6;
  --mk-on-atmo:#0b1730;
  --mk-on-atmo-soft:rgba(11,23,48,.72);
  --mk-on-atmo-faint:rgba(11,23,48,.55);
  --mk-glass-atmo-bg:rgba(11,23,48,.05);
  --mk-glass-atmo-border:rgba(11,23,48,.12);
  --mk-nav-text:var(--mk-ink);
  --mk-highlight-1:#ff8a4c;
  --mk-highlight-2:#e5501c;
}

/* ---------- NIGHT (6pm-6am) — unchanged from before; matches the :root
   defaults above, repeated explicitly here so it never silently drifts
   if the defaults are ever touched for some other reason ---------- */
:root[data-theme="night"]{
  --mk-atmo-a:#0e2c63;
  --mk-atmo-b:#081633;
  --mk-atmo-c:#050b18;
  --mk-atmo-accent:#17c9d6;
  --mk-atmo-accent-2:#4f7dff;
  --mk-on-atmo:#ffffff;
  --mk-on-atmo-soft:rgba(255,255,255,.78);
  --mk-on-atmo-faint:rgba(255,255,255,.62);
  --mk-glass-atmo-bg:rgba(255,255,255,.08);
  --mk-glass-atmo-border:rgba(255,255,255,.18);
  --mk-nav-text:rgba(255,255,255,.92);
  --mk-highlight-1:#ffd28a;
  --mk-highlight-2:#ffb454;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--mk-font-body);
  color:var(--mk-ink);
  background:var(--mk-mist-2);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,.mk-display{
  font-family:var(--mk-font-display);
  letter-spacing:-.01em;
}

a{ text-decoration:none; }

::selection{ background:var(--mk-cyan-400); color:#04121f; }

.mk-container{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 1.25rem;
}

/* ---------- perspective wrapper (enables child 3D tilt) ---------- */
.mk-tilt-scene{ perspective:1400px; }
.mk-tilt{
  transform-style:preserve-3d;
  transition:transform .5s var(--mk-ease), box-shadow .5s var(--mk-ease);
  will-change:transform;
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.mk-nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  padding:.85rem 0;
  transition:background .35s var(--mk-ease), box-shadow .35s var(--mk-ease), padding .35s var(--mk-ease);
}
.mk-nav__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  background:transparent;
  border-radius:var(--mk-radius-pill);
  padding:.35rem .5rem .35rem 1.1rem;
  transition:background .35s var(--mk-ease), box-shadow .35s var(--mk-ease), border-color .35s var(--mk-ease);
  border:1px solid transparent;
}
.mk-nav.is-scrolled{ padding:.55rem 0; }
.mk-nav.is-scrolled .mk-nav__bar{
  background:var(--mk-glass-bg);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:var(--mk-shadow-md);
  border-color:var(--mk-glass-border);
}
.mk-nav__brand{ display:flex; align-items:center; gap:.6rem; }
.mk-nav__brand img{ height:38px; width:auto; display:block; }
.mk-nav__links{
  display:flex;
  align-items:center;
  gap:.15rem;
  list-style:none;
  margin:0; padding:0;
}
.mk-nav__links a{
  display:inline-flex;
  align-items:center;
  padding:.55rem .9rem;
  border-radius:var(--mk-radius-pill);
  /* unscrolled: navbar sits transparently over the dark/atmo hero, so the
     link colour follows the current time-of-day theme (light text on
     night/evening, dark text on day) instead of a fixed dark colour that
     used to disappear against the blue hero background */
  color:var(--mk-nav-text);
  font-weight:600;
  font-size:.92rem;
  transition:background .25s ease, color .35s ease;
  white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.18);
}
.mk-nav.is-scrolled .mk-nav__links a{
  /* scrolled: bar becomes a solid white glass chip, so text is always dark here */
  color:var(--mk-ink);
  text-shadow:none;
}
.mk-nav__links a:hover,
.mk-nav__links a.active{
  background:linear-gradient(135deg,var(--mk-cyan-400),var(--mk-blue-500));
  color:#fff;
  text-shadow:none;
}
.mk-nav__cta{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.6rem 1.15rem;
  border-radius:var(--mk-radius-pill);
  background:linear-gradient(135deg,var(--mk-cyan-400),var(--mk-blue-500));
  color:#fff !important;
  font-weight:700;
  font-size:.9rem;
  box-shadow:0 10px 24px rgba(23,201,214,.35);
  transition:transform .3s var(--mk-ease), box-shadow .3s var(--mk-ease);
}
.mk-nav__cta:hover{ transform:translateY(-2px); box-shadow:0 16px 30px rgba(23,201,214,.45); color:#fff !important; }
.mk-nav__toggle{
  display:none;
  width:44px; height:44px;
  border-radius:50%;
  align-items:center; justify-content:center;
  cursor:pointer;
  /* Unscrolled, the bar sits transparently over the hero, same as the
     nav links above — so the button's own background/border and its
     bars now follow the same time-of-day tokens the links use
     (--mk-glass-atmo-bg / --mk-glass-atmo-border / --mk-nav-text)
     instead of a fixed white-circle-with-dark-lines that didn't adapt
     and could wash out against the hero in some themes. */
  border:1px solid var(--mk-glass-atmo-border);
  background:var(--mk-glass-atmo-bg);
  backdrop-filter:blur(10px) saturate(160%);
  -webkit-backdrop-filter:blur(10px) saturate(160%);
  transition:background .35s var(--mk-ease), border-color .35s var(--mk-ease);
}
.mk-nav__toggle span{ display:block; width:18px; height:2px; background:var(--mk-nav-text); position:relative; transition:background .35s ease; }
.mk-nav__toggle span::before,.mk-nav__toggle span::after{
  content:''; position:absolute; left:0; width:18px; height:2px; background:var(--mk-nav-text); transition:transform .25s ease, background .35s ease;
}
.mk-nav__toggle span::before{ top:-6px; }
.mk-nav__toggle span::after{ top:6px; }

/* Scrolled: the bar becomes a solid white glass pill (see
   .mk-nav.is-scrolled .mk-nav__bar above), same moment the nav links
   switch to a fixed dark colour for guaranteed contrast — the toggle
   button does the same thing, in every theme. */
.mk-nav.is-scrolled .mk-nav__toggle{
  background:var(--mk-white);
  border-color:var(--mk-line);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.mk-nav.is-scrolled .mk-nav__toggle span,
.mk-nav.is-scrolled .mk-nav__toggle span::before,
.mk-nav.is-scrolled .mk-nav__toggle span::after{
  background:var(--mk-ink);
}

@media (max-width: 991.98px){
  .mk-nav__toggle{ display:flex; }
  .mk-nav__links{
    position:fixed; inset:0 0 0 auto;
    width:min(320px,82vw);
    height:100vh;
    flex-direction:column;
    align-items:stretch;
    gap:.25rem;
    background:var(--mk-navy-900);
    padding:6rem 1.25rem 2rem;
    transform:translateX(100%);
    transition:transform .4s var(--mk-ease);
    box-shadow:-20px 0 50px rgba(0,0,0,.25);
  }
  .mk-nav__links.is-open{ transform:translateX(0); }
  .mk-nav__links a{ color:#fff; padding:.85rem 1rem; font-size:1.02rem; }
  .mk-nav__links a:hover,.mk-nav__links a.active{ background:rgba(255,255,255,.12); }
  .mk-nav__cta{ margin-top:.5rem; justify-content:center; }
  .mk-nav__backdrop{
    position:fixed; inset:0; background:rgba(5,11,24,.55);
    opacity:0; pointer-events:none; transition:opacity .35s ease; z-index:999;
  }
  .mk-nav__backdrop.is-open{ opacity:1; pointer-events:auto; }
}

/* dropdown ("Reports" → View Reports / Patient Portal)
   Fixed background + text on purpose, in every one of the 4 time-of-day
   themes: this panel used to inherit its text colour from the same
   `.mk-nav__links a{ color:var(--mk-nav-text) }` rule the top-level nav
   links use (so it could turn dark-on-dark or wash out depending on
   which theme was active and whether the page was scrolled — the report
   links are important enough that patients shouldn't have to fight the
   theme to read them). It's now a solid dark-navy card with light text
   that never changes, and the color/text-shadow are pinned with
   !important specifically because a same-specificity rule from the nav
   links above (color:var(--mk-nav-text), and a higher-specificity one
   for the scrolled state) would otherwise still be able to win here. */
.mk-dropdown{ position:relative; }
.mk-dropdown__menu{
  position:absolute; top:calc(100% + 10px); left:0;
  min-width:220px;
  background:var(--mk-navy-900);
  border-radius:var(--mk-radius-sm);
  box-shadow:var(--mk-shadow-lg);
  border:1px solid rgba(255,255,255,.14);
  padding:.5rem;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
  z-index:20;
}
.mk-dropdown:hover .mk-dropdown__menu,
.mk-dropdown:focus-within .mk-dropdown__menu{ opacity:1; visibility:visible; transform:translateY(0); }
.mk-dropdown__menu a{
  display:block; padding:.65rem .8rem; border-radius:10px;
  font-weight:600; font-size:.88rem;
  color:#eaf2ff !important;
  text-shadow:none !important;
}
.mk-dropdown__menu a:hover,
.mk-dropdown__menu a:focus-visible{ background:rgba(255,255,255,.14); color:#fff !important; }
@media (max-width: 991.98px){
  .mk-dropdown__menu{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:none; border-left:2px solid rgba(255,255,255,.2);
    border-radius:0 10px 10px 0;
    background:rgba(255,255,255,.08);
    display:none; margin:.3rem 0 .3rem .3rem;
  }
  .mk-dropdown.is-open .mk-dropdown__menu{ display:block; }
  .mk-dropdown__menu a{ color:#eaf2ff !important; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.mk-hero{
  position:relative;
  min-height:92vh;
  display:flex; align-items:center;
  padding-top:7rem;
  overflow:hidden;
  background:radial-gradient(120% 120% at 15% 0%, var(--mk-atmo-a) 0%, var(--mk-atmo-b) 46%, var(--mk-atmo-c) 100%);
  color:var(--mk-on-atmo);
  transition:background .8s ease, color .6s ease;
}
.mk-hero__canvas{
  position:absolute; inset:0;
  z-index:1;
  opacity:.9;
}
.mk-hero__scrim{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgba(5,11,24,0) 0%, rgba(5,11,24,.1) 60%, rgba(5,11,24,.55) 100%);
  opacity:.55;
  pointer-events:none;
}
.mk-hero__content{ position:relative; z-index:3; }
.mk-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .9rem;
  border-radius:var(--mk-radius-pill);
  background:var(--mk-glass-atmo-bg);
  border:1px solid var(--mk-glass-atmo-border);
  font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--mk-atmo-accent);
  backdrop-filter:blur(6px);
}
.mk-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--mk-atmo-accent); box-shadow:0 0 12px var(--mk-atmo-accent); }
.mk-hero h1{
  font-size:clamp(2.1rem, 4.4vw, 3.6rem);
  line-height:1.08;
  font-weight:700;
  margin:1.1rem 0 1.1rem;
  color:var(--mk-on-atmo);
}
.mk-hero h1 strong{
  /* deliberately a warm colour (never blue) so it always stands out from
     the blue/navy atmosphere behind it, in every time-of-day theme */
  background:linear-gradient(135deg,var(--mk-highlight-1),var(--mk-highlight-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mk-hero p.lead{ font-size:1.05rem; color:var(--mk-on-atmo-soft); max-width:34rem; }
.mk-hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.6rem; }

.mk-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.85rem 1.6rem;
  border-radius:var(--mk-radius-pill);
  font-weight:700; font-size:.95rem;
  border:1px solid transparent;
  transition:transform .3s var(--mk-ease), box-shadow .3s var(--mk-ease), background .3s ease, color .3s ease;
  cursor:pointer;
}
.mk-btn--primary{ background:linear-gradient(135deg,var(--mk-cyan-400),var(--mk-blue-500)); color:#fff; box-shadow:0 14px 30px rgba(23,201,214,.35); }
.mk-btn--primary:hover{ transform:translateY(-3px); box-shadow:0 20px 40px rgba(23,201,214,.45); color:#fff; }
.mk-btn--ghost{ background:var(--mk-glass-atmo-bg); color:var(--mk-on-atmo); border-color:var(--mk-glass-atmo-border); backdrop-filter:blur(6px); }
.mk-btn--ghost:hover{ background:var(--mk-glass-atmo-border); color:var(--mk-on-atmo); transform:translateY(-3px); }
.mk-btn--dark{ background:var(--mk-navy-900); color:#fff; }
.mk-btn--dark:hover{ background:var(--mk-navy-800); color:#fff; transform:translateY(-3px); }
.mk-btn--outline{ background:transparent; color:var(--mk-navy-900); border-color:var(--mk-line); }
.mk-btn--outline:hover{ background:var(--mk-navy-900); color:#fff; transform:translateY(-3px); }
.mk-btn--sm{ padding:.55rem 1.1rem; font-size:.85rem; }
.mk-btn--block{ width:100%; }

.mk-hero__stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;
  margin-top:3rem; max-width:34rem;
}
.mk-hero__stats div{ border-left:2px solid var(--mk-glass-atmo-border); padding-left:.9rem; }
.mk-hero__stats b{ display:block; font-family:var(--mk-font-display); font-size:1.6rem; color:var(--mk-on-atmo); }
.mk-hero__stats span{ font-size:.78rem; color:var(--mk-on-atmo-faint); }

/* ---- Virtual Tour trigger: the video orbits the button like a planet ----
   "Take a Virtual Trip to Our Center" sits fixed at the centre — the sun —
   and the circular video preview slowly travels around it in a full loop —
   the earth — always on screen (autoplaying, muted, looped), not hidden
   behind hover discovery, so touch/mobile visitors see it too. An inner
   counter-rotation keeps the video footage itself upright as it swings
   around, so it never looks tilted or spun. Clicking anywhere in the zone
   (or Enter/Space when focused) opens the full tour in the modal below. */
.mk-tour-peekzone{
  position:relative;
  width:100%; aspect-ratio:1/1; max-width:480px; margin-inline:auto;
  display:flex; align-items:center; justify-content:center;
}
.mk-tour-trigger{ cursor:pointer; outline:none; }

.mk-tour-btn{
  position:relative; z-index:4;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.5rem;
  border-radius:var(--mk-radius-pill);
  background:var(--mk-glass-atmo-bg);
  border:1px solid var(--mk-glass-atmo-border);
  color:var(--mk-on-atmo);
  font-weight:700; font-size:.9rem;
  backdrop-filter:blur(8px);
  cursor:pointer;
  transition:background .25s ease, transform .3s var(--mk-ease), box-shadow .3s ease;
}
.mk-tour-trigger:hover .mk-tour-btn,
.mk-tour-trigger:focus-visible .mk-tour-btn{
  background:var(--mk-glass-atmo-border);
  box-shadow:0 14px 30px rgba(23,201,214,.3);
  transform:translateY(-2px);
}
.mk-tour-btn__dot{ width:8px; height:8px; border-radius:50%; background:var(--mk-highlight-2); box-shadow:0 0 10px var(--mk-highlight-2); flex:none; }

/* the orbit itself — a faint dashed path plus a slowly-rotating carrier
   that carries the video circle around it; --mk-orbit-d controls the
   path's diameter and is overridden at the mobile breakpoint below */
.mk-tour-orbit{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  --mk-orbit-d:340px;
  --mk-peek-d:118px;
}
.mk-tour-orbit__path{
  position:absolute;
  width:var(--mk-orbit-d); height:var(--mk-orbit-d);
  border-radius:50%;
  border:1px dashed var(--mk-glass-atmo-border);
}
.mk-tour-orbit__spin{
  position:absolute;
  width:var(--mk-orbit-d); height:var(--mk-orbit-d);
  animation:mk-orbit-rotate 26s linear infinite;
}

/* the video circle — carried around the path by its parent's rotation;
   its own counter-rotation (on the inner __spin-fix wrapper) cancels
   that out so the footage itself never appears to spin or tilt */
.mk-tour-peek{
  position:absolute; top:0; left:50%;
  width:var(--mk-peek-d); height:var(--mk-peek-d);
  border-radius:50%;
  transform:translate(-50%,-50%);
  transform-origin:center center;
  box-shadow:0 20px 45px rgba(0,0,0,.45), 0 0 0 6px var(--mk-glass-atmo-bg);
  transition:box-shadow .3s ease;
}
.mk-tour-trigger:hover .mk-tour-peek,
.mk-tour-trigger:focus-visible .mk-tour-peek{
  box-shadow:0 26px 55px rgba(0,0,0,.5), 0 0 0 6px var(--mk-glass-atmo-bg);
}
.mk-tour-peek__spin-fix{
  position:absolute; inset:0; border-radius:50%; overflow:hidden;
  border:2px solid rgba(255,255,255,.35);
  animation:mk-orbit-counter-rotate 26s linear infinite;
}
.mk-tour-peek video{ width:100%; height:100%; object-fit:cover; display:block; }
.mk-tour-peek__ring{
  position:absolute; inset:-10px; border-radius:50%;
  border:2px dashed var(--mk-atmo-accent);
  opacity:.65;
  animation:mk-spin 9s linear infinite;
  pointer-events:none;
}
.mk-tour-peek__icon{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; background:rgba(5,11,24,.18);
  opacity:0; transition:opacity .25s ease;
}
.mk-tour-trigger:hover .mk-tour-peek__icon,
.mk-tour-trigger:focus-visible .mk-tour-peek__icon{ opacity:1; }
@keyframes mk-spin{ to{ transform:rotate(360deg); } }
@keyframes mk-orbit-rotate{ to{ transform:rotate(360deg); } }
@keyframes mk-orbit-counter-rotate{ to{ transform:rotate(-360deg); } }

@media (prefers-reduced-motion: reduce){
  .mk-tour-peek__ring{ animation:none; }
  .mk-tour-orbit__spin,
  .mk-tour-peek__spin-fix{ animation:none; }
}

@media (max-width:600px){
  .mk-tour-orbit{ --mk-orbit-d:230px; --mk-peek-d:88px; }
  .mk-tour-btn{ padding:.7rem 1.2rem; font-size:.82rem; }
  /* touch has no hover, so the play icon stays visible as a constant cue */
  .mk-tour-peek__icon{ opacity:1; }
}

/* ---- Welcome toast: time-of-day greeting, appears briefly on entry ----
   Text is set by assets/js/welcome-bubble.js from the current time in
   India (IST) — Good Morning / Afternoon / Evening / Night — independent
   of the coarser day/night atmosphere theme. Fully transparent glass so
   the 3D scene keeps showing through it.

   Hidden by default; JS adds .is-visible on load and removes it again
   ~2s later, so this never has to fight other hero content for space —
   it's a brief entrance toast, not a fixture that sits there permanently
   (that was the source of the cramped mobile layout before). Centred
   under the nav on every breakpoint, so there's no separate "desktop
   right-aligned vs mobile centred" positioning to keep in sync. */
.mk-welcome-bubble{
  position:absolute; top:6.2rem; left:50%; z-index:4;
  display:inline-flex; align-items:center; gap:.65rem;
  padding:.65rem 1.15rem .65rem .65rem;
  border-radius:var(--mk-radius-pill);
  background:var(--mk-glass-atmo-bg);
  border:1px solid var(--mk-glass-atmo-border);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 20px 44px rgba(0,0,0,.28);
  color:var(--mk-on-atmo);
  opacity:0;
  transform:translate(-50%,-10px) scale(.94);
  transition:opacity .4s var(--mk-ease), transform .4s var(--mk-ease), background .8s ease, color .6s ease, border-color .8s ease;
  pointer-events:none;
  max-width:calc(100vw - 2.4rem);
}
.mk-welcome-bubble.is-visible{
  opacity:1;
  transform:translate(-50%,0) scale(1);
}
.mk-welcome-bubble__icon{
  width:36px; height:36px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--mk-atmo-accent),var(--mk-atmo-accent-2));
  color:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.mk-welcome-bubble__icon svg{ display:block; }
.mk-welcome-bubble__text{ display:flex; flex-direction:column; line-height:1.28; text-align:left; }
.mk-welcome-bubble__text strong{ font-size:.86rem; font-weight:800; white-space:nowrap; }
.mk-welcome-bubble__text em{ font-style:normal; font-size:.7rem; color:var(--mk-on-atmo-soft); white-space:nowrap; }

@media (max-width:991.98px){
  .mk-welcome-bubble{ top:5.8rem; }
}
@media (max-width:600px){
  .mk-welcome-bubble{
    top:5.4rem;
    padding:.55rem 1rem .55rem .55rem;
  }
  .mk-welcome-bubble__icon{ width:30px; height:30px; }
  .mk-welcome-bubble__text strong{ font-size:.76rem; }
  .mk-welcome-bubble__text em{ font-size:.62rem; }
}

@media (prefers-reduced-motion: reduce){
  .mk-welcome-bubble{ transition:opacity .3s ease; transform:translate(-50%,0) scale(1) !important; }
}

/* scroll cue */
.mk-scrolldown{
  position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%);
  z-index:3; display:flex; flex-direction:column; align-items:center; gap:.4rem;
  color:var(--mk-on-atmo-faint); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
}
.mk-scrolldown__line{ width:1px; height:34px; background:linear-gradient(180deg, var(--mk-on-atmo-soft), transparent); animation:mk-scrolldown 1.8s ease-in-out infinite; }
@keyframes mk-scrolldown{ 0%{ transform:scaleY(.3); opacity:.3; transform-origin:top;} 50%{ transform:scaleY(1); opacity:1; } 100%{ transform:scaleY(.3); opacity:.3; transform-origin:bottom;} }

/* ==========================================================================
   SECTION HEADERS
   ========================================================================== */
.mk-section{ padding:5.5rem 0; position:relative; }
.mk-section--tight{ padding:3.5rem 0; }
.mk-section--dark{ background:var(--mk-atmo-b); color:var(--mk-on-atmo); transition:background .8s ease, color .6s ease; }
.mk-section--mist{ background:var(--mk-mist); }
.mk-kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mk-blue-500);
}
.mk-kicker::before{ content:''; width:22px; height:2px; background:var(--mk-cyan-400); display:inline-block; }
.mk-section--dark .mk-kicker{ color:var(--mk-atmo-accent); }
.mk-heading{ font-size:clamp(1.7rem,3vw,2.5rem); font-weight:700; margin:.6rem 0 0; }
.mk-sub{ color:var(--mk-ink-soft); font-size:1.02rem; max-width:42rem; }
.mk-section--dark .mk-sub{ color:var(--mk-on-atmo-soft); }

/* ==========================================================================
   DEPARTMENT / SERVICE CARDS (3D tilt)
   ========================================================================== */
.mk-dep-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
@media (max-width:900px){ .mk-dep-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .mk-dep-grid{ grid-template-columns:1fr; } }

.mk-card{
  position:relative;
  background:#fff;
  border-radius:var(--mk-radius-md);
  border:1px solid var(--mk-line);
  box-shadow:var(--mk-shadow-sm);
  padding:2rem 1.6rem;
  text-align:center;
  transition:box-shadow .4s var(--mk-ease), border-color .4s var(--mk-ease);
}
.mk-card:hover{ box-shadow:var(--mk-shadow-glow); border-color:rgba(23,201,214,.4); }
.mk-card__icon{
  width:74px; height:74px; margin:0 auto 1.1rem;
  border-radius:22px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(23,201,214,.14), rgba(26,86,219,.14));
  transform:translateZ(30px);
}
.mk-card__icon img{ width:38px; height:38px; object-fit:contain; }
.mk-card h5,.mk-card p{ transform:translateZ(20px); }
.mk-card h5{ font-weight:700; margin-bottom:.35rem; }
.mk-card a.mk-card__link{ color:var(--mk-blue-500); font-weight:700; font-size:.85rem; display:inline-flex; align-items:center; gap:.35rem; margin-top:.6rem; transform:translateZ(20px); }

/* glass panel */
.mk-glass{
  background:var(--mk-glass-bg);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--mk-glass-border);
  border-radius:var(--mk-radius-lg);
  box-shadow:var(--mk-shadow-md);
}
.mk-glass--dark{
  background:var(--mk-glass-bg-dark);
  border-color:var(--mk-glass-border-dark);
  color:#fff;
}

/* banner split w/ image */
.mk-split{ display:flex; align-items:center; gap:3rem; }
.mk-split__media{ flex:1; }
.mk-split__body{ flex:1; }
@media (max-width:900px){ .mk-split{ flex-direction:column; } }

.mk-media-frame{
  position:relative;
  border-radius:var(--mk-radius-lg);
  overflow:hidden;
  box-shadow:var(--mk-shadow-lg);
  transform:rotateY(0deg);
}
.mk-media-frame img{ width:100%; display:block; }
.mk-media-frame::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(23,201,214,.12), transparent 60%);
  pointer-events:none;
}
.mk-media-frame--circle{ border-radius:50%; aspect-ratio:1/1; }
.mk-media-frame--circle img{ height:100%; object-fit:cover; }

/* floating badge on media */
.mk-float-badge{
  position:absolute; bottom:-1.2rem; left:1.5rem;
  background:#fff;
  border-radius:var(--mk-radius-sm);
  box-shadow:var(--mk-shadow-lg);
  padding:.9rem 1.2rem;
  display:flex; align-items:center; gap:.8rem;
  z-index:5;
}
.mk-float-badge b{ font-family:var(--mk-font-display); font-size:1.3rem; color:var(--mk-navy-900); display:block; line-height:1; }
.mk-float-badge span{ font-size:.72rem; color:var(--mk-ink-soft); }

/* ==========================================================================
   DOCTORS / TEAM CARDS
   ========================================================================== */
.mk-doc-card{
  background:#fff; border-radius:var(--mk-radius-md);
  padding:2rem 1.4rem; text-align:center;
  border:1px solid var(--mk-line);
  box-shadow:var(--mk-shadow-sm);
  height:100%;
  transition:box-shadow .4s var(--mk-ease);
}
.mk-doc-card:hover{ box-shadow:var(--mk-shadow-md); }
.mk-doc-card img{ width:120px; height:120px; object-fit:cover; border-radius:50%; margin:0 auto 1rem; border:4px solid var(--mk-mist); }
.mk-doc-card h5{ font-weight:700; margin-bottom:.15rem; }
.mk-doc-card .role{ color:var(--mk-blue-500); font-weight:600; font-size:.85rem; }
.mk-doc-card .meta{ color:var(--mk-ink-soft); font-size:.82rem; }

/* testimonials */
.mk-testi{ padding:2.2rem; }
.mk-testi .stars{ color:#ffb340; }
.mk-testi h2{ font-size:1.5rem; font-weight:700; }
.mk-testi img{ width:76px; height:76px; border-radius:50%; object-fit:cover; }

/* blog cards */
.mk-blog-card{
  background:#fff; border-radius:var(--mk-radius-md); overflow:hidden;
  border:1px solid var(--mk-line); box-shadow:var(--mk-shadow-sm); height:100%;
  transition:box-shadow .4s var(--mk-ease), transform .4s var(--mk-ease);
}
.mk-blog-card:hover{ box-shadow:var(--mk-shadow-md); transform:translateY(-6px); }
.mk-blog-card img{ width:100%; height:190px; object-fit:cover; }
.mk-blog-card .body{ padding:1.4rem; }
.mk-tag{ display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--mk-blue-500); background:rgba(26,86,219,.08); padding:.25rem .6rem; border-radius:var(--mk-radius-pill); }

/* forms */
.mk-form-panel{
  background:#fff; border-radius:var(--mk-radius-lg);
  border:1px solid var(--mk-line);
  box-shadow:var(--mk-shadow-lg);
  padding:2.4rem;
  position:relative;
  overflow:hidden;
}
.mk-form-panel::before{
  content:''; position:absolute; top:-60px; right:-60px; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(23,201,214,.18), transparent 70%);
}
.mk-form-control,
.mk-form-panel .form-control,
.mk-form-panel .form-select,
.mk-form-panel input.form-control,
.mk-form-panel textarea.form-control,
.form-livedoc-control{
  border:1px solid var(--mk-line) !important;
  background:var(--mk-mist-2) !important;
  border-radius:14px !important;
  padding:.85rem 1rem !important;
  font-size:.94rem;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.mk-form-panel .form-control:focus,
.mk-form-panel .form-select:focus,
.form-livedoc-control:focus{
  border-color:var(--mk-cyan-400) !important;
  box-shadow:0 0 0 4px rgba(23,201,214,.15) !important;
  background:#fff !important;
}
#msgshow{ font-weight:600; margin-bottom:.5rem; }

/* pricing / package cards */
.mk-pricing{
  background:#fff; border-radius:var(--mk-radius-md); border:1px solid var(--mk-line);
  box-shadow:var(--mk-shadow-sm); padding:2rem; height:100%;
  transition:box-shadow .4s var(--mk-ease), transform .4s var(--mk-ease);
  position:relative;
}
.mk-pricing:hover{ box-shadow:var(--mk-shadow-glow); transform:translateY(-4px); }
.mk-pricing .list-group-item{ border:none; padding:.4rem 0; background:transparent; }
.mk-pricing .price-row{ display:flex; align-items:baseline; gap:.6rem; margin:1rem 0; }
.mk-pricing .price-row .offer{ font-family:var(--mk-font-display); font-size:1.7rem; font-weight:700; color:var(--mk-navy-900); }
.mk-pricing .price-row .mrp{ text-decoration:line-through; color:var(--mk-ink-soft); font-size:.9rem; }
.mk-pricing .off-badge{ background:linear-gradient(135deg,var(--mk-cyan-400),var(--mk-blue-500)); color:#fff; font-weight:700; font-size:.72rem; padding:.25rem .55rem; border-radius:var(--mk-radius-pill); }

/* gallery */
.mk-gallery-item{ position:relative; border-radius:16px; overflow:hidden; display:block; box-shadow:var(--mk-shadow-sm); }
.mk-gallery-item img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .5s var(--mk-ease); }
.mk-gallery-item:hover img{ transform:scale(1.08); }
.mk-gallery-item .cap{
  position:absolute; inset:auto 0 0 0; padding:.9rem 1rem;
  background:linear-gradient(0deg, rgba(5,11,24,.82), transparent);
  color:#fff; font-weight:700; font-size:.9rem;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.mk-footer{ background:var(--mk-atmo-c); color:var(--mk-on-atmo-soft); padding-top:4.5rem; transition:background .8s ease, color .6s ease; }
.mk-footer h5{ color:var(--mk-on-atmo); font-weight:700; margin-bottom:1.1rem; font-size:1rem; }
.mk-footer a{ color:var(--mk-on-atmo-faint); }
.mk-footer a:hover{ color:var(--mk-atmo-accent); }
.mk-footer .mk-foot-links li{ margin-bottom:.6rem; }
.mk-footer__bottom{ border-top:1px solid var(--mk-glass-atmo-border); margin-top:2.5rem; padding:1.4rem 0; font-size:.85rem; }
.mk-footer__social{ display:flex; gap:.6rem; margin-top:1rem; }
.mk-footer__social a{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--mk-glass-atmo-bg); border:1px solid var(--mk-glass-atmo-border); transition:background .25s ease, transform .25s ease;
}
.mk-footer__social a:hover{ background:linear-gradient(135deg,var(--mk-cyan-400),var(--mk-blue-500)); transform:translateY(-3px); color:#fff; }
/* phones: leave room under the footer so its last rows (social icons,
   credits) can scroll up clear of the fixed WhatsApp / Online Reports
   buttons instead of ending up underneath them */
@media (max-width:600px){
  .mk-footer__bottom{ padding-bottom:8.5rem; }
}

/* ==========================================================================
   VIRTUAL TOUR MODAL
   ========================================================================== */
.mk-tour-modal{
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s ease, visibility .35s ease;
}
.mk-tour-modal.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
.mk-tour-modal__backdrop{ position:absolute; inset:0; background:rgba(5,11,24,.82); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.mk-tour-modal__panel{
  position:relative; z-index:1; width:min(920px,100%);
  background:var(--mk-navy-950); border-radius:var(--mk-radius-lg);
  padding:1.2rem; box-shadow:var(--mk-shadow-lg);
  transform:scale(.94) translateY(14px);
  transition:transform .4s var(--mk-ease);
}
.mk-tour-modal.is-open .mk-tour-modal__panel{ transform:scale(1) translateY(0); }
.mk-tour-modal__frame{ border-radius:var(--mk-radius-md); overflow:hidden; aspect-ratio:16/9; background:#000; }
.mk-tour-modal__frame video{ width:100%; height:100%; object-fit:cover; display:block; }
.mk-tour-modal__caption{ color:rgba(255,255,255,.7); text-align:center; margin:1rem 0 .3rem; font-size:.9rem; }
.mk-tour-modal__close{
  position:absolute; top:-16px; right:-16px; width:38px; height:38px; border-radius:50%;
  background:#fff; border:none; font-size:1.4rem; line-height:1; color:var(--mk-navy-900);
  cursor:pointer; box-shadow:var(--mk-shadow-md); transition:transform .25s ease;
}
.mk-tour-modal__close:hover{ transform:rotate(90deg); }
@media (max-width:600px){
  .mk-tour-modal__close{ top:-14px; right:0; }
}

/* ==========================================================================
   FLOATING ACTION BUTTONS  (WhatsApp / phone)
   ========================================================================== */
.mk-fab-stack{
  position:fixed; right:18px; bottom:22px; z-index:1050;
  display:flex; flex-direction:column; align-items:flex-end; gap:.7rem;
}
.mk-fab{
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px rgba(9,25,63,.3);
  transition:transform .3s var(--mk-ease), box-shadow .3s var(--mk-ease);
  position:relative;
}
.mk-fab:hover{ transform:translateY(-4px) scale(1.05); }
.mk-fab--whatsapp{ background:#25D366; }
.mk-fab--whatsapp svg{ width:30px; height:30px; fill:#fff; transform-origin:50% 55%; animation:mk-buzz 4.6s ease-in-out infinite; }
.mk-fab--whatsapp::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid #25D366; opacity:.55;
  animation:mk-pulse 2.2s ease-out infinite;
}
@keyframes mk-pulse{ 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(1.55); opacity:0; } }

/* "Buzz" — a quick phone-style vibration wobble on the icon itself,
   most of the animation is idle (0%-91%/99%-100%) so it reads as a
   periodic buzz rather than a constant wiggle. Used on the two
   floating buttons patients are most likely to not recognise at a
   glance (WhatsApp / Online Reports) — see .mk-fab-label--always
   below for the other half of that fix (always-on text labels). */
@keyframes mk-buzz{
  0%, 91%, 100% { transform:rotate(0deg); }
  92% { transform:rotate(-12deg); }
  93% { transform:rotate(11deg); }
  94% { transform:rotate(-9deg); }
  95% { transform:rotate(8deg); }
  96% { transform:rotate(-6deg); }
  97% { transform:rotate(4deg); }
  98% { transform:rotate(-2deg); }
  99% { transform:rotate(0deg); }
}
@media (prefers-reduced-motion: reduce){
  .mk-fab--whatsapp svg,
  .mk-fab--report svg{ animation:none; }
}

/* "meteor" accent — a bright streak that swoops into the WhatsApp icon
   to catch the eye. Plays exactly 3 times (animation-iteration-count:3)
   shortly after the page loads, then stops for good — it's an attention
   cue, not an ongoing distraction. */
.mk-fab__meteor{
  position:absolute; top:1px; right:2px; z-index:2;
  width:22px; height:3px; border-radius:999px;
  background:linear-gradient(90deg, transparent, #fff 65%, #fff);
  box-shadow:0 0 6px 1px rgba(255,255,255,.8);
  transform-origin:right center;
  opacity:0; pointer-events:none;
  animation:mk-meteor 2.4s ease-out 3;
  animation-delay:1.2s;
}
@keyframes mk-meteor{
  0%   { opacity:0; transform:translate(32px,-32px) rotate(-45deg) scaleX(.35); }
  8%   { opacity:1; }
  34%  { opacity:1; transform:translate(0,0) rotate(-45deg) scaleX(1); }
  44%  { opacity:0; transform:translate(-3px,3px) rotate(-45deg) scaleX(1.3); }
  100% { opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .mk-fab__meteor{ animation:none; opacity:0; }
}

.mk-fab--call{ width:48px; height:48px; background:var(--mk-navy-900); }
.mk-fab--call svg{ width:22px; height:22px; fill:#fff; }
.mk-fab-label{
  position:absolute; right:70px; top:50%; transform:translateY(-50%);
  background:var(--mk-navy-900); color:#fff; font-size:.78rem; font-weight:700;
  padding:.4rem .8rem; border-radius:8px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.mk-fab:hover .mk-fab-label{ opacity:1; }

/* Two of these buttons are icon-only circles that patients have no way
   to decode at a glance (especially on a phone, where the hover
   tooltip above never even triggers) — "WhatsApp" and "Online Reports"
   are shown as a small permanent tag instead of something you have to
   discover by hovering. */
.mk-fab-label--always{
  opacity:1;
  background:linear-gradient(135deg,var(--mk-navy-900),var(--mk-navy-800));
  box-shadow:0 6px 16px rgba(9,25,63,.35);
}

/* ---- Online Reports — mirrors the stack above but pinned to the LEFT
   edge instead of the right (see inc/nav.php for why this exists). ---- */
.mk-fab-stack--left{ left:18px; right:auto; align-items:flex-start; }
.mk-fab--report{ background:linear-gradient(135deg,var(--mk-cyan-400),var(--mk-blue-500)); }
.mk-fab--report svg{ width:26px; height:26px; fill:#fff; transform-origin:50% 55%; animation:mk-buzz 5.2s ease-in-out infinite; }
.mk-fab--report::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--mk-cyan-400); opacity:.55;
  animation:mk-pulse 2.2s ease-out infinite;
}
/* label hangs off the right of a left-edge button, not the left */
.mk-fab-stack--left .mk-fab-label{ right:auto; left:70px; }

/* Auto-shown WhatsApp prompt — wording switches between "chat with us"
   and "we're closed, leave a message" based on the branch's real hours
   (assets/js/theme-time.js sets data-branch-open on <html>; see the
   inline script in inc/nav.php). Appears once, shortly after load;
   dismissible, and remembered for the rest of that browsing session. */
.mk-fab-tip{
  position:fixed; right:18px; bottom:94px; z-index:1049;
  max-width:215px;
  background:#fff; color:var(--mk-navy-900);
  border-radius:14px; padding:.75rem 1.7rem .75rem .9rem;
  box-shadow:var(--mk-shadow-lg);
  font-size:.82rem; font-weight:600; line-height:1.42;
  opacity:0; transform:translateY(10px) scale(.96);
  pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;
}
.mk-fab-tip.is-visible{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.mk-fab-tip[data-open="false"]{ background:var(--mk-navy-950); color:#fff; }
.mk-fab-tip[data-open="false"] .mk-fab-tip__close{ background:rgba(255,255,255,.14); color:#fff; }
.mk-fab-tip[data-open="false"] .mk-fab-tip__arrow{ background:var(--mk-navy-950); box-shadow:none; }
.mk-fab-tip p{ margin:0; }
.mk-fab-tip__close{
  position:absolute; top:.4rem; right:.5rem;
  width:20px; height:20px; border-radius:50%; border:none;
  background:var(--mk-mist); color:var(--mk-ink-soft);
  font-size:.9rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.mk-fab-tip__arrow{
  position:absolute; right:26px; bottom:-6px;
  width:12px; height:12px; background:#fff;
  transform:rotate(45deg);
  box-shadow:2px 2px 4px rgba(9,25,63,.08);
}
@media (max-width:600px){
  .mk-fab-stack{ right:12px; bottom:14px; }
  .mk-fab--whatsapp{ width:50px; height:50px; }
  .mk-fab--whatsapp svg{ width:26px; height:26px; }
  .mk-fab--call{ width:42px; height:42px; }
  .mk-fab-label{ display:none; }
  /* ...but the always-on WhatsApp/Online Reports tags stay, just smaller,
     since these are the two buttons patients need to actually recognise
     on a phone — hover never happens on a touch screen. */
  .mk-fab-label--always{ display:block; font-size:.66rem; padding:.32rem .55rem; right:62px; }
  .mk-fab-tip{ right:12px; bottom:78px; max-width:180px; font-size:.78rem; padding:.65rem 1.5rem .65rem .8rem; }
  .mk-fab-tip__arrow{ right:22px; }
  /* right:auto is required here — the `.mk-fab-stack{ right:12px }` rule a
     few lines up would otherwise also apply to this LEFT stack, stretching
     it invisibly across the full screen width and sitting on top of the
     WhatsApp/Call buttons (and anything else in the bottom strip), so taps
     on them never reached the link. */
  .mk-fab-stack--left{ left:12px; right:auto; bottom:14px; }
  .mk-fab--report{ width:50px; height:50px; }
  .mk-fab--report svg{ width:22px; height:22px; }
  .mk-fab-stack--left .mk-fab-label--always{ right:auto; left:62px; }
}

/* ==========================================================================
   BREADCRUMB / INNER PAGE HERO
   ========================================================================== */
.mk-inner-hero{
  position:relative; overflow:hidden;
  padding:9.5rem 0 4rem;
  background:radial-gradient(120% 140% at 85% 0%, var(--mk-atmo-a) 0%, var(--mk-atmo-b) 55%, var(--mk-atmo-c) 100%);
  color:var(--mk-on-atmo); text-align:center;
  transition:background .8s ease, color .6s ease;
}
.mk-inner-hero h1{ font-size:clamp(1.8rem,3.6vw,2.7rem); font-weight:700; margin:0; }
.mk-inner-hero .crumbs{ font-size:.85rem; color:var(--mk-on-atmo-faint); margin-top:.7rem; }
.mk-inner-hero .crumbs a{ color:var(--mk-on-atmo-soft); }
.mk-inner-hero__grid{
  position:absolute; inset:0; opacity:.25;
  background-image:linear-gradient(var(--mk-glass-atmo-border) 1px, transparent 1px), linear-gradient(90deg, var(--mk-glass-atmo-border) 1px, transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(circle at 50% 30%, black, transparent 70%);
}

/* article / legal text pages */
.mk-prose{ max-width:840px; }
.mk-prose h3{ font-weight:700; margin:1.7rem 0 .8rem; font-size:1.25rem; color:var(--mk-navy-900); }
.mk-prose p{ color:var(--mk-ink-soft); line-height:1.75; margin-bottom:1rem; }
.mk-prose ul{ color:var(--mk-ink-soft); line-height:1.8; }
.mk-prose img{ border-radius:var(--mk-radius-md); box-shadow:var(--mk-shadow-md); }

/* scroll reveal helper */
.mk-reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--mk-ease), transform .8s var(--mk-ease); }
.mk-reveal.is-visible{ opacity:1; transform:translateY(0); }
.mk-reveal-delay-1{ transition-delay:.08s; }
.mk-reveal-delay-2{ transition-delay:.16s; }
.mk-reveal-delay-3{ transition-delay:.24s; }

/* back to top */
.mk-totop{
  position:fixed; left:18px; bottom:92px; z-index:1040;
  width:44px; height:44px; border-radius:50%;
  background:var(--mk-navy-900); color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .3s ease, transform .3s ease;
}
.mk-totop.is-visible{ opacity:1; pointer-events:auto; transform:translateY(0); }
/* sits just above the Online Reports button instead of hidden underneath it */
@media (max-width:600px){
  .mk-totop{ left:12px; bottom:76px; width:40px; height:40px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}