/* =========================================================
   Wahat Al-Tib Specialized Medical Complex — site styles
   Design direction: _bmad-output/planning-artifacts/design-direction.md (liquid glass, Oct 2026)
   Layout uses CSS logical properties, so Arabic (RTL) mirrors automatically.
   ========================================================= */

/* ---------- Fonts (self-hosted, no third-party requests) ----------
   Alexandria (variable; by Egyptian designer Mohamed Gaber): headings, numbers, buttons, navigation.
   IBM Plex Sans Arabic (400/600): reading text in both scripts. Arabic files are subset with pyftsubset. */
@font-face{font-family:'Alexandria';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/alexandria-arabic-wght-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:'Alexandria';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/alexandria-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2');unicode-range:U+060C,U+061B,U+061F,U+0621-0652,U+0660-0669,U+066B-066C,U+0670,U+200C-200F,U+FD3E-FD3F}
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2');unicode-range:U+060C,U+061B,U+061F,U+0621-0652,U+0660-0669,U+066B-066C,U+0670,U+200C-200F,U+FD3E-FD3F}
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}


/* ---------- Tokens ---------- */
:root{
  /* Palette v3 (design-team review 2026-10-30): three working teals + one deep, flat fills, gold as a single line */
  --ink:#0E2A35;            /* headings, body text (15:1 on white) */
  --ink-soft:#435E6A;       /* secondary text (6.4:1 on canvas) */
  --brand:#14485D;          /* logo teal: primary buttons, icons, active states (white on it 9.9:1) */
  --brand-hover:#0F3D4D;
  --deep:#0B3341;           /* the one dark stop for deep panels */
  --link:#1A6977;           /* links, focus ring on light (6.3:1 on white) */
  --accent:#2B8B9B;         /* decoration only: bullets, small graphics. Not for text (3.99:1) */
  --mint:#7FD9C2;           /* on dark only: focus ring, small accents */
  --gold:#C5A059;           /* solid 3px rules only */
  --emergency:#B42318;      /* flat; white on it 6.6:1 */
  --emergency-tint:#FFF4F2;
  --pulse:#E5484D;          /* 8px live dot only */
  --whatsapp:#075E54;       /* WhatsApp's dark green; white on it 7.7:1 */
  --canvas:#F4F8F8;
  --hairline:rgba(20,72,93,.10);
  --hairline-dark:rgba(255,255,255,.14);
  --on-dark-soft:rgba(255,255,255,.78);
  --tile-bg:rgba(43,139,155,.10);

  /* Glass: one recipe */
  --glass-fill:rgba(255,255,255,.70);
  --glass-fill-strong:rgba(255,255,255,.88);
  --glass-edge:rgba(255,255,255,.85);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px var(--hairline), 0 12px 32px -18px rgba(11,51,65,.18);
  --glass-shadow-hover:inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(20,72,93,.14), 0 18px 40px -18px rgba(11,51,65,.26);
  --glass-blur:blur(16px) saturate(130%);
  --dark-glass:rgba(255,255,255,.08);
  --dark-edge:rgba(255,255,255,.16);

  /* legacy names kept so older selectors resolve to the new palette */
  --brand-700:var(--brand); --brand-800:var(--brand-hover); --brand-900:var(--deep); --brand-950:var(--deep);
  --teal-600:var(--link); --teal-400:var(--accent); --emergency-2:var(--pulse);
  --tile:var(--tile-bg); --tile-red:var(--emergency); --tile-shadow:none;

  --font-display:"Alexandria", "Segoe UI", system-ui, sans-serif;
  --font-text:"Plex Arabic", "Segoe UI", system-ui, sans-serif;

  --wrap:1200px;
  --shell:1296px;
  --gutter:24px;
  --r-xl:28px;
  --r-lg:20px;
  --r-md:14px;
  --r-sm:12px;
  --header-h:64px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-block-start:calc(var(--header-h) + 32px); background:var(--canvas)}
body{
  position:relative; isolation:isolate; margin:0; min-block-size:100vh; color:var(--ink); background:var(--canvas);
  font-family:var(--font-text); font-size:1.03rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* The light behind the glass: soft brand-colour pools, fixed so glass surfaces pick them up as you scroll */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(46vw 40vw at 4% 0%, rgba(127,217,194,.30), transparent 70%),
    radial-gradient(42vw 38vw at 100% 22%, rgba(43,139,155,.16), transparent 70%),
    radial-gradient(50vw 40vw at 50% 60%, rgba(255,255,255,.9), transparent 70%),
    linear-gradient(180deg, #F4F8F8, #EAF2F3);
}
html[lang="ar"] body{font-size:1.09rem; line-height:1.8}
img,svg,iframe{display:block; max-inline-size:100%}
a{color:var(--teal-600); text-underline-offset:.2em; text-decoration-thickness:1px}
a:hover{color:var(--brand-700)}
p,ul,ol,dl,dd,h1,h2,h3,figure{margin:0}
ul[role="list"],ol[role="list"]{list-style:none; padding:0}
h1,h2,h3{font-family:var(--font-display); font-weight:500; color:var(--ink); line-height:1.2; letter-spacing:-.015em; text-wrap:balance}
html[lang="ar"] :is(h1,h2,h3){font-weight:600; letter-spacing:0; line-height:1.35}
bdi{unicode-bidi:isolate}
bdi[dir="ltr"]{white-space:nowrap}
[hidden]{display:none!important}
.ico{inline-size:1.25em; block-size:1.25em; flex:none}
[dir="rtl"] .chev{transform:scaleX(-1)}

.wrap{inline-size:min(100% - 2*var(--gutter), var(--wrap)); margin-inline:auto}
@media (max-width:640px){ :root{--gutter:16px; --r-xl:26px} }

.skip-link{position:absolute; inset-block-start:-100%; inset-inline-start:1rem; z-index:300; background:var(--brand-700); color:#fff; padding:.7rem 1.1rem; border-radius:0 0 12px 12px; text-decoration:none}
.skip-link:focus-visible{inset-block-start:0}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--teal-600); outline-offset:3px; border-radius:10px}
:where(.hero,.site-footer,.mobile-actions,.task-panel) :focus-visible{outline-color:var(--mint)}

/* ---------- Glass surfaces ----------
   Light glass: translucent white over the colour pools, blurred and saturated, with a bright top edge
   and a specular rim (the ::before gradient border). */
:is(.dept-link,.dept-panel,.clinic-list,.values li,.facility-list li,.vmp,.form-panel,.chips,.visit-info,.emergency-inner,.page-header,.doctor-card,.testimonial-card){
  background:var(--glass-fill);
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-shadow);
}
/* Real blur only where something moves behind the surface */
:is(.header-inner,.facts){
  background:var(--glass-fill-strong);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-shadow);
}
:is(.header-inner,.facts,.dept-link,.dept-panel,.clinic-list,.values li,.facility-list li,.vmp,.form-panel,.visit-info,.emergency-inner,.page-header,.task-panel,.mobile-actions){position:relative}
:is(.header-inner,.task-panel,.mobile-actions)::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(145deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.15) 32%, rgba(255,255,255,0) 55%, rgba(255,255,255,.55) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  :is(.header-inner,.facts){background:rgba(255,255,255,.96)}
}
@media (prefers-reduced-transparency:reduce){
  :is(.header-inner,.facts,.dept-link,.dept-panel,.clinic-list,.values li,.facility-list li,.vmp,.form-panel,.chips,.visit-info,.emergency-inner,.page-header){background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none}
  .mobile-actions,.task-panel{
  border-radius:var(--r-lg); padding:1.4rem 1.1rem .9rem; color:#fff;
  background:var(--dark-glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid var(--dark-edge); box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
}

/* Icon tiles: glossy brand gradient with a real medical icon */
.dept-ico,.value-ico,.clinic-row .dept-ico{
  display:grid; place-items:center; flex:none; inline-size:52px; block-size:52px; border-radius:var(--r-md);
  background:var(--tile-bg); color:var(--brand); position:relative;
}

.dept-ico .ico,.value-ico .ico{inline-size:30px; block-size:30px; position:relative; z-index:1}

/* ---------- Buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-block-size:48px; padding:.6rem 1.35rem; border:1px solid transparent; border-radius:999px;
  font-family:var(--font-display); font-size:.95rem; font-weight:500; line-height:1.2; text-decoration:none; cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .2s, background-color .2s, color .2s;
}
.btn .ico{inline-size:1.25em; block-size:1.25em}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--brand); color:#fff; border-color:transparent; box-shadow:0 1px 2px rgba(11,51,65,.12)}
.btn-primary:hover{background:var(--brand-hover); color:#fff; box-shadow:0 6px 16px -8px rgba(11,51,65,.45)}
.btn-quiet{background:rgba(255,255,255,.8); color:var(--brand); border-color:var(--hairline); box-shadow:0 1px 2px rgba(11,51,65,.06)}
.btn-quiet:hover{background:#fff; color:var(--deep); border-color:rgba(20,72,93,.2)}
.btn-emergency{background:var(--emergency); color:#fff; border-color:transparent; box-shadow:0 1px 2px rgba(180,35,24,.2)}
.btn-emergency:hover{background:#951C13; color:#fff}
.btn-sm{min-block-size:42px; padding:.45rem 1rem; font-size:.9rem}
.btn-lg{min-block-size:54px; padding:.8rem 1.6rem; font-size:1rem}
.btn-block{inline-size:100%}
.btn.is-loading,.btn:disabled{opacity:.6; pointer-events:none}
.actions{display:flex; flex-wrap:wrap; gap:.75rem}
.text-link{display:inline-flex; align-items:center; min-block-size:44px; padding-inline:1.1rem; border-radius:999px; font-family:var(--font-display); font-weight:500; font-size:.95rem; color:var(--brand); text-decoration:none; background:rgba(255,255,255,.8); border:1px solid var(--hairline)}
.text-link:hover{background:#fff; color:var(--brand-900)}

/* ---------- Utility line (desktop) ---------- */
.utility-bar{font-size:.84rem; color:var(--ink-soft)}
.utility-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-block-size:40px}
.utility-bar a{display:inline-flex; align-items:center; gap:.5rem; color:inherit; text-decoration:none}
.utility-bar a:hover{color:var(--ink)}
.utility-emergency{color:var(--emergency)!important; font-weight:600}
.utility-emergency bdi{color:var(--ink)}
.utility-link .ico{inline-size:1.05rem; block-size:1.05rem; color:var(--teal-400)}
.pulse{inline-size:8px; block-size:8px; border-radius:50%; background:var(--emergency-2); box-shadow:0 0 0 4px rgba(229,72,77,.2)}
@media (max-width:760px){ .utility-bar{display:none} }

/* ---------- Floating glass header ---------- */
.site-header{position:sticky; inset-block-start:10px; z-index:100; padding-block:0}
.header-inner{display:flex; align-items:center; gap:1.25rem; block-size:var(--header-h); padding-inline:.75rem .6rem; border-radius:22px; transition:box-shadow .25s}
[dir="rtl"] .header-inner{padding-inline:.75rem .6rem}
.site-header.is-stuck .header-inner{box-shadow:var(--glass-shadow-hover)}
.brand{display:flex; align-items:center; gap:.65rem; color:var(--ink); text-decoration:none; margin-inline-end:auto}
.brand-mark{inline-size:44px; block-size:44px; border-radius:50%}
.brand-text{display:flex; flex-direction:column; line-height:1.15}
.brand-name{font-family:var(--font-display); font-size:1.08rem; font-weight:600; color:var(--brand-700)}
.brand-sub{font-size:.74rem; color:var(--ink-soft)}
.site-nav{display:flex; align-items:center; gap:.15rem}
.site-nav a{padding:.5rem .95rem; border-radius:999px; font-family:var(--font-display); font-size:.92rem; color:var(--ink); text-decoration:none; transition:background-color .2s, color .2s}
.site-nav a:hover{background:rgba(255,255,255,.75); color:var(--brand-700)}
.site-nav a.is-active{background:#fff; color:var(--brand); font-weight:600; box-shadow:0 0 0 1px var(--hairline), 0 2px 6px -2px rgba(11,51,65,.15)}
.header-actions{display:flex; align-items:center; gap:.45rem}
.lang-toggle{min-block-size:42px; padding:.4rem .95rem; border:1px solid var(--hairline); border-radius:999px; background:rgba(255,255,255,.8); color:var(--ink); font-family:var(--font-text); font-size:.9rem; cursor:pointer}
.lang-toggle:hover{background:#fff}
.nav-toggle{display:none; inline-size:44px; block-size:44px; padding:0; border:1px solid var(--hairline); border-radius:50%; background:rgba(255,255,255,.8); color:var(--ink); cursor:pointer}
.nav-toggle svg{inline-size:22px; block-size:22px; margin:auto}
@media (max-width:1060px){
  .nav-toggle{display:grid; place-items:center}
  .site-nav{position:absolute; inset-inline:0; inset-block-start:calc(100% + 8px); display:none; flex-direction:column; align-items:stretch; gap:.15rem; padding:.5rem; border-radius:22px;
    background:var(--glass-fill-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow-hover)}
  .site-nav.is-open{display:flex}
  .site-nav a{padding:.9rem 1rem; border-radius:14px; font-size:1rem}
}
@media (max-width:640px){
  .header-inner{gap:.5rem; padding-inline:.5rem}
  .brand-sub,.header-phone{display:none}
}

/* ---------- Hero: deep-teal panel with light pools and a glass task panel ---------- */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  inline-size:min(100% - 2*var(--gutter), var(--shell)); margin:18px auto 0; border-radius:var(--r-xl);
  color:#fff;
  background:
    radial-gradient(50% 75% at 90% 0%, rgba(127,217,194,.18), transparent 65%),
    linear-gradient(160deg, var(--brand) 0%, var(--deep) 100%);
}

.hero-grid{position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; padding-block:clamp(3.25rem,6vw,5.5rem) clamp(5rem,8vw,7rem)}
.hero-title{color:#fff; font-size:clamp(2.4rem,1.5rem + 3.6vw,3.9rem); line-height:1.07; letter-spacing:-.028em; max-inline-size:14ch}
html[lang="ar"] .hero-title{font-size:clamp(2.5rem,1.6rem + 3.8vw,4.1rem); line-height:1.25; max-inline-size:12ch}
.horizon{display:block; inline-size:64px; block-size:3px; margin-block:1.6rem 1.4rem; border-radius:2px; background:var(--gold)}
.hero-lede{max-inline-size:44ch; font-size:clamp(1.05rem,1rem + .3vw,1.2rem); color:var(--on-dark-soft)}
.hero-mark{position:absolute; inset-inline-end:-4%; inset-block-start:50%; transform:translateY(-50%); inline-size:min(720px,62vw); aspect-ratio:296/284; background:var(--mint); opacity:.05; pointer-events:none; z-index:-1;
  -webkit-mask:url(../img/logo-mark.webp) no-repeat center / contain; mask:url(../img/logo-mark.webp) no-repeat center / contain}

.task-panel{
  border-radius:var(--r-lg); padding:1.4rem 1.1rem .9rem; color:#fff;
  background:var(--dark-glass); -webkit-backdrop-filter:blur(26px) saturate(160%); backdrop-filter:blur(26px) saturate(160%);
  border:1px solid var(--dark-edge); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 30px 60px -20px rgba(0,0,0,.45);
}
.task-panel::before{background:linear-gradient(145deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 70%, rgba(127,217,194,.25) 100%)!important}
.task-title{color:#fff; font-size:1.2rem; padding-inline:.6rem; margin-block-end:.6rem}
.task-list{display:grid; gap:.35rem}
.task{display:flex; align-items:center; gap:.95rem; padding:.75rem .6rem; border-radius:var(--r-md); color:#fff; text-decoration:none; transition:background-color .2s}
.task:hover{background:rgba(255,255,255,.1); color:#fff}
.task-ico{display:grid; place-items:center; inline-size:48px; block-size:48px; border-radius:var(--r-md); flex:none; color:#fff; background:rgba(255,255,255,.1); border:1px solid var(--hairline-dark)}
.task-ico .ico{inline-size:28px; block-size:28px}
.task-text{display:grid; gap:.1rem; flex:1}
.task-text strong{font-family:var(--font-display); font-weight:500; font-size:1.04rem}
html[lang="ar"] .task-text strong{font-weight:600}
.task-text small{font-size:.86rem; color:var(--on-dark-soft)}
.task .chev{inline-size:18px; block-size:18px; color:rgba(255,255,255,.7)}
.task.is-urgent .task-ico{background:var(--emergency); border-color:transparent}
.task.is-urgent strong{color:#fff}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr; padding-block:2.5rem 5.5rem} }

/* ---------- Facts: a glass bar that overlaps the hero ---------- */
.facts-band{position:relative; z-index:2; margin-block-start:-58px}
.facts-band-mist{margin-block-start:0; padding-block:1rem}
ul.facts{display:grid; grid-template-columns:repeat(4,1fr); border-radius:var(--r-lg); padding:.4rem}
.facts li{display:grid; gap:.3rem; padding:1.4rem 1.6rem}
.facts li + li{border-inline-start:1px solid var(--hairline)}
.fact-num{font-family:var(--font-display); font-size:clamp(2rem,1.5rem + 1.6vw,2.7rem); font-weight:500; line-height:1; font-variant-numeric:tabular-nums; color:var(--brand)}

.fact-label{font-size:.95rem; color:var(--ink-soft)}
@media (max-width:760px){
  ul.facts{grid-template-columns:1fr 1fr}
  .facts li{padding:1.1rem 1.1rem}
  .facts li:nth-child(odd){border-inline-start:0}
  .facts li:nth-child(n+3){border-block-start:1px solid var(--hairline)}
}

/* ---------- Sections ---------- */
.section{padding-block:clamp(4rem,2.75rem + 4.5vw,7rem)}
.section-mist{background:transparent}
.section-head{display:grid; gap:.75rem; margin-block-end:2.25rem; max-inline-size:62ch}
.split-head{display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; max-inline-size:none}
.split-head > div{display:grid; gap:.75rem; max-inline-size:56ch}
.section-title{font-size:clamp(1.75rem,1.35rem + 1.5vw,2.5rem)}
.section-lede{font-size:1.08rem; color:var(--ink-soft); max-inline-size:58ch}
.prose{color:var(--ink-soft); font-size:1.08rem; max-inline-size:60ch; margin-block-start:1rem}
.narrow-block > *{max-inline-size:760px}
@media (max-width:700px){ .split-head{flex-direction:column; align-items:flex-start} }

/* Cards lift slightly when pointed at */
@media (hover:hover){
  :is(.dept-link,.dept-panel,.values li,.facility-list li){transition:transform .25s var(--ease), box-shadow .25s}
  :is(.dept-link,.dept-panel,.values li,.facility-list li):hover{transform:translateY(-3px); box-shadow:var(--glass-shadow-hover)}
}

/* ---------- Department index (home) ---------- */
.dept-index{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.dept-link{display:flex; gap:1rem; align-items:flex-start; padding:1.35rem; border-radius:var(--r-lg); color:var(--ink); text-decoration:none; block-size:100%}
.dept-link > span:last-child{display:grid; gap:.3rem}
.dept-link strong{font-family:var(--font-display); font-weight:500; font-size:1.1rem}
html[lang="ar"] .dept-link strong{font-weight:600}
.dept-link small{font-size:.93rem; color:var(--ink-soft)}
.dept-link:hover{color:var(--ink)}
.dept-link:hover strong{color:var(--teal-600)}
@media (max-width:900px){ .dept-index{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .dept-index{grid-template-columns:1fr} }

/* ---------- Emergency card ---------- */
.emergency-band{padding-block:.5rem}
.emergency-inner{display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:clamp(1.5rem,3vw,2.25rem); border-radius:var(--r-xl); background:var(--emergency-tint)!important; border-color:rgba(180,35,24,.14)!important; box-shadow:none!important}

.emergency-copy{position:relative; display:flex; gap:1.1rem; align-items:flex-start; max-inline-size:62ch}
.emergency-copy > .ico{inline-size:56px; block-size:56px; padding:13px; border-radius:var(--r-md); background:rgba(180,35,24,.10); color:var(--emergency)}
.emergency-title{font-size:clamp(1.35rem,1.1rem + .9vw,1.8rem); color:var(--emergency); margin-block-end:.35rem}
.emergency-copy p{color:#5B2A25}
.emergency-inner .actions{position:relative}
.emergency-band .btn-quiet{color:var(--emergency); border-color:rgba(180,35,24,.18)}
@media (max-width:860px){ .emergency-inner{flex-direction:column; align-items:flex-start} }

/* ---------- Visit ---------- */
.visit-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:18px; align-items:stretch}
.visit-info{display:grid; gap:1.5rem; align-content:start; padding:clamp(1.5rem,3vw,2.25rem); border-radius:var(--r-xl)}
.info-list{display:grid}
.info-list > div{display:grid; grid-template-columns:9rem 1fr; gap:1rem; padding-block:.95rem; border-block-end:1px solid var(--hairline)}
.info-list > div:first-child{border-block-start:1px solid var(--hairline)}
.info-list dt{font-size:.92rem; color:var(--ink-soft)}
.phone-lines{display:flex; flex-wrap:wrap; gap:.25rem 1rem}
.phone-lines a{display:inline-flex; min-block-size:32px; align-items:center; white-space:nowrap}
.map-frame{min-block-size:440px; border-radius:var(--r-xl); overflow:hidden; background:var(--glass-fill); border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow); padding:6px}
.map-frame iframe{inline-size:100%; block-size:100%; min-block-size:424px; border:0; border-radius:calc(var(--r-xl) - 8px)}
@media (max-width:860px){ .visit-grid{grid-template-columns:1fr} .map-frame{min-block-size:300px} .map-frame iframe{min-block-size:284px} }
@media (max-width:480px){ .info-list > div{grid-template-columns:1fr; gap:.2rem} }

/* ---------- Inner page header: a light glass panel ---------- */
.page-header{position:relative; overflow:hidden; inline-size:min(100% - 2*var(--gutter), var(--shell)); margin:18px auto 0; border-radius:var(--r-xl);
  padding-block:clamp(2.5rem,1.75rem + 3vw,4.5rem) clamp(2.25rem,1.5rem + 3vw,3.75rem)}
.page-header::after{content:""; position:absolute; inset-inline-end:3%; inset-block:8% -10%; aspect-ratio:296/284; background:var(--brand); opacity:.05; pointer-events:none;
  -webkit-mask:url(../img/logo-mark.webp) no-repeat center / contain; mask:url(../img/logo-mark.webp) no-repeat center / contain}
.page-header .wrap{position:relative; z-index:1}
.breadcrumb{display:flex; flex-wrap:wrap; gap:.5rem; font-size:.88rem; color:var(--ink-soft); margin-block-end:1.25rem}
.breadcrumb a{color:var(--teal-600)}
.page-title{font-size:clamp(2.1rem,1.5rem + 2.4vw,3.3rem); letter-spacing:-.022em}
.page-title::after{content:""; display:block; inline-size:56px; block-size:3px; margin-block-start:1.1rem; border-radius:2px; background:var(--gold)}
.page-lede{margin-block-start:1rem; max-inline-size:60ch; font-size:1.12rem; color:var(--ink-soft)}
@media (max-width:700px){ .page-header::after{inset-block:auto -20%; inline-size:70vw; opacity:.05} }

/* ---------- Department groups ---------- */
.chips{display:inline-flex; flex-wrap:wrap; gap:.3rem; padding:.35rem; margin-block-end:2.5rem; border-radius:999px}
.chip{min-block-size:42px; padding:.45rem 1.1rem; border:0; border-radius:999px; background:transparent; color:var(--ink); font-family:var(--font-display); font-size:.92rem; cursor:pointer; transition:background-color .2s, color .2s, box-shadow .2s}
.chip:hover{background:rgba(255,255,255,.75)}
.chip[aria-pressed="true"]{background:var(--brand); color:#fff}
@media (max-width:640px){ .chips{border-radius:22px} }
.dept-group + .dept-group{margin-block-start:3.25rem}
.group-head{display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-block-end:1.25rem}
.group-title{font-size:clamp(1.4rem,1.2rem + .8vw,1.8rem)}
.group-head p{color:var(--ink-soft); font-size:.98rem}
.dept-grid{display:grid; gap:14px}
.dept-grid-clinics,.dept-grid-support{grid-template-columns:repeat(3,1fr)}
.dept-grid-emergency{grid-template-columns:repeat(4,1fr)}
.dept-panel{display:flex; flex-direction:column; gap:.75rem; padding:1.5rem; border-radius:var(--r-lg); scroll-margin-block-start:calc(var(--header-h) + 40px)}
.dept-panel:target{box-shadow:0 0 0 3px rgba(43,139,155,.35), var(--glass-shadow-hover)}
.dept-panel h3{font-size:1.2rem; margin-block-start:.25rem}
.dept-panel > p{color:var(--ink-soft); font-size:.97rem}
.dept-panel.is-er .dept-ico{background:rgba(180,35,24,.10); color:var(--emergency)}
.dept-panel.is-er{background:var(--emergency-tint); border-color:rgba(180,35,24,.14)}
.services{display:grid; gap:.35rem; padding-block:.25rem; margin-block-end:auto}
.services li{position:relative; padding-inline-start:1.1rem; font-size:.94rem}
.services li::before{content:""; position:absolute; inset-inline-start:0; inset-block-start:.7em; inline-size:6px; block-size:6px; border-radius:50%; background:var(--accent)}
.panel-action{display:inline-flex; align-items:center; gap:.5rem; align-self:flex-start; min-block-size:42px; margin-block-start:.5rem; padding:.4rem 1rem; border-radius:999px; font-family:var(--font-display); font-weight:500; font-size:.92rem; text-decoration:none; color:var(--brand); background:var(--tile-bg); transition:background-color .2s}
.panel-action:hover{background:rgba(20,72,93,.13); color:var(--brand-900)}
.panel-action .ico{inline-size:1.2em; block-size:1.2em}
.dept-panel.is-er .panel-action{color:var(--emergency); background:rgba(180,35,24,.08); border-color:rgba(180,35,24,.12)}
@media (max-width:1020px){ .dept-grid-emergency{grid-template-columns:repeat(2,1fr)} }
@media (max-width:900px){ .dept-grid-clinics,.dept-grid-support{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .dept-grid-clinics,.dept-grid-support,.dept-grid-emergency{grid-template-columns:1fr} .dept-panel{padding:1.25rem} }

/* ---------- Appointments ---------- */
.booking-layout{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,5vw,4.5rem); align-items:start}
.booking-aside{display:grid; gap:1.5rem; position:sticky; inset-block-start:calc(var(--header-h) + 40px)}
.steps{counter-reset:step; display:grid; gap:1rem}
.steps li{counter-increment:step; display:grid; grid-template-columns:2.25rem 1fr; gap:.8rem; align-items:baseline; color:var(--ink-soft)}
.steps li::before{content:counter(step); display:grid; place-items:center; inline-size:2.25rem; block-size:2.25rem; border-radius:50%; font-family:var(--font-display); font-size:.92rem; color:var(--brand-700); background:var(--glass-fill); border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow)}
html[lang="ar"] .steps li::before{content:counter(step, arabic-indic)}
.aside-note{font-size:.95rem; color:var(--ink-soft)}
ul.clinic-list{display:grid; padding:.5rem 1.25rem; border-radius:var(--r-xl)}
.clinic-row{display:flex; align-items:center; gap:1rem; padding-block:.85rem}
.clinic-row + .clinic-row{border-block-start:1px solid var(--hairline)}
.clinic-row .dept-ico{inline-size:46px; block-size:46px; border-radius:14px}
.clinic-row .dept-ico .ico{inline-size:26px; block-size:26px}
.clinic-row h3{flex:1; font-size:1.12rem}
@media (max-width:860px){ .booking-layout{grid-template-columns:1fr} .booking-aside{position:static} }

/* Doctor directory (hidden until the real roster is published) */
.filter-bar{display:grid; grid-template-columns:1fr 280px; gap:.75rem; margin-block:3rem 1.5rem}
.filter-bar input,.filter-bar select{min-block-size:50px; padding:.6rem 1.1rem; border:1px solid rgba(20,72,93,.16); border-radius:999px; background:rgba(255,255,255,.75); font:inherit; color:var(--ink)}
.doctor-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.doctor-card{display:flex; flex-direction:column; gap:.4rem; padding:1.5rem; border-radius:var(--r-lg)}
.doctor-card .btn{margin-block-start:auto; align-self:flex-start}
.doctor-avatar{inline-size:64px; block-size:64px; border-radius:50%; background:var(--tile-bg); color:var(--brand); display:grid; place-items:center; margin-block-end:.5rem}
.doctor-avatar svg{inline-size:30px}
.doctor-badge{display:none}
.doctor-card h3{font-size:1.15rem}
.doctor-rank{color:var(--ink-soft); font-size:.95rem}
.specialty-badge{align-self:flex-start; padding:.15rem .7rem; border-radius:999px; background:rgba(20,72,93,.08); color:var(--brand-700); font-size:.82rem}
.doctor-qualifications{font-size:.88rem; color:var(--ink-soft); margin-block-end:.75rem}
.cards-more{margin-block-start:1.5rem; color:var(--ink-soft)}
@media (max-width:600px){ .filter-bar{grid-template-columns:1fr} }

/* Hidden home placeholders (styled for when they are published) */
.section-dark{background:transparent}
.testimonial-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.testimonial-card{padding:1.5rem; border-radius:var(--r-lg)}
@media (max-width:860px){ .testimonial-grid{grid-template-columns:1fr} }

.cta-line{display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; padding:clamp(1.5rem,3vw,2.25rem); border-radius:var(--r-xl);
  background:var(--glass-fill); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow)}
.cta-line > div{display:grid; gap:.5rem}

/* ---------- About ---------- */
.story-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,6vw,5rem); align-items:start}
ul.vmp{display:grid; padding:.5rem 1.6rem; border-radius:var(--r-xl)}
.vmp li{padding-block:1.3rem}
.vmp li + li{border-block-start:1px solid var(--hairline)}
.vmp h3{font-size:1.15rem; margin-block-end:.35rem}

.vmp p{color:var(--ink-soft)}
.values{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.values-3{grid-template-columns:repeat(3,1fr)}
.values li{display:grid; gap:.6rem; align-content:start; padding:1.5rem; border-radius:var(--r-lg)}
.values .value-ico{margin-block-end:.4rem}
.values h3{font-size:1.15rem}
.values p{color:var(--ink-soft); font-size:.97rem}
.facility-list{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.facility-list li{display:flex; gap:1rem; padding:1.5rem; border-radius:var(--r-lg)}
.facility-list h3{font-size:1.12rem; margin-block-end:.3rem}
.facility-list p{color:var(--ink-soft); font-size:.97rem}
@media (max-width:900px){ .story-grid{grid-template-columns:1fr} .values{grid-template-columns:1fr 1fr} .values-3{grid-template-columns:1fr} }
@media (max-width:600px){ .values,.facility-list{grid-template-columns:1fr} }

/* ---------- Careers form ---------- */
.apply-grid{display:grid; grid-template-columns:.75fr 1.25fr; gap:clamp(2rem,5vw,4.5rem); align-items:start}
.apply-aside{display:grid; gap:1.5rem; position:sticky; inset-block-start:calc(var(--header-h) + 40px)}
.form-panel{display:grid; gap:1.25rem; padding:clamp(1.25rem,3vw,2.25rem); border-radius:var(--r-xl)}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1rem}
.form-group{display:grid; gap:.45rem; align-content:start; min-inline-size:0}
.form-group.is-wide{grid-column:1 / -1}
.form-group > label:first-child{font-size:.93rem; font-weight:600; color:var(--ink)}
.form-group input,.form-group select,.form-group textarea{
  inline-size:100%; min-block-size:50px; padding:.65rem 1rem; border:1px solid rgba(20,72,93,.18); border-radius:var(--r-sm);
  background:rgba(255,255,255,.82); font:inherit; font-size:1rem; color:var(--ink); box-shadow:inset 0 1px 2px rgba(11,51,65,.06); transition:border-color .2s, box-shadow .2s, background-color .2s;
}
.form-group textarea{min-block-size:110px; resize:vertical}
.form-group input::placeholder,.form-group textarea::placeholder{color:#6F8790}
.form-group input:hover,.form-group select:hover,.form-group textarea:hover{border-color:var(--teal-400); background:#fff}
.form-group input:focus-visible,.form-group select:focus-visible,.form-group textarea:focus-visible,.filter-bar input:focus-visible,.filter-bar select:focus-visible{border-color:var(--teal-600); background:#fff; outline:2px solid var(--teal-600); outline-offset:1px; box-shadow:0 0 0 4px rgba(26,105,119,.12)}
.form-group.is-invalid input,.form-group.is-invalid select,.form-group.is-invalid textarea,.form-group.is-invalid .file-dropzone{border-color:var(--emergency); background:#FFF6F5}
.err{font-size:.85rem; color:var(--emergency)}
.err:empty{display:none}
html[dir="rtl"] input[type="tel"],html[dir="rtl"] input[type="email"]{text-align:right}
.file-dropzone{position:relative; display:grid; justify-items:center; gap:.4rem; padding:1.5rem; border:1.5px dashed rgba(26,105,119,.4); border-radius:var(--r-md); background:rgba(255,255,255,.55); text-align:center; cursor:pointer; transition:background-color .2s, border-color .2s}
.file-dropzone:hover,.file-dropzone.is-dragging{border-color:var(--teal-600); background:rgba(255,255,255,.85)}
.file-dropzone:focus-within{outline:2px solid var(--teal-600); outline-offset:2px}
.file-dropzone input{position:absolute; inline-size:1px; block-size:1px; opacity:0; pointer-events:none}
.file-dropzone .ico{inline-size:34px; block-size:34px; color:var(--teal-400)}
.file-dropzone strong{font-weight:600; font-size:.95rem}
.file-name{font-size:.9rem; font-weight:600; color:var(--brand-700); word-break:break-all}
.file-name:empty{display:none}
.file-note{font-size:.84rem; color:var(--ink-soft)}
.consent{display:flex; gap:.75rem; align-items:flex-start; min-block-size:44px; font-size:.93rem; color:var(--ink-soft); cursor:pointer}
.consent input{inline-size:22px; block-size:22px; margin:0; margin-block-start:.15rem; flex:none; accent-color:var(--brand-700)}
.form-note{font-size:.88rem; color:var(--ink-soft)}
.form-summary{font-size:.93rem; font-weight:600; color:var(--emergency)}
.form-summary:empty{display:none}
@media (max-width:900px){ .apply-grid{grid-template-columns:1fr} .apply-aside{position:static} }
@media (max-width:600px){ .form-grid{grid-template-columns:1fr} }

.toast{position:fixed; z-index:300; left:50%; inset-block-end:1.5rem; inline-size:max-content; max-inline-size:min(92vw,520px); padding:1rem 1.3rem; border-radius:var(--r-md); color:#fff;
  background:rgba(11,51,65,.82); -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%); border:1px solid rgba(255,255,255,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 18px 40px rgba(0,0,0,.25);
  transform:translateX(-50%) translateY(140%); opacity:0; pointer-events:none; transition:transform .3s var(--ease), opacity .3s}
.toast.is-visible{transform:translateX(-50%) translateY(0); opacity:1; pointer-events:auto}
.toast a{color:var(--mint); font-weight:600; margin-inline-start:.35rem}

/* ---------- Footer: deep-teal panel ---------- */
.site-footer{position:relative; overflow:hidden; isolation:isolate; inline-size:min(100% - 2*var(--gutter), var(--shell)); margin:clamp(2rem,4vw,3.5rem) auto 18px; border-radius:var(--r-xl);
  color:var(--on-dark-soft); padding-block:3.5rem 1.5rem; font-size:.95rem;
  background:radial-gradient(45% 70% at 100% 0%, rgba(127,217,194,.14), transparent 60%), linear-gradient(160deg, var(--brand), var(--deep))}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr .8fr; gap:2.5rem}
.footer-brand{display:grid; gap:1rem; align-content:start; max-inline-size:36ch}
.footer-id{display:flex; align-items:center; gap:.85rem}
.footer-logo{inline-size:60px; block-size:60px; border-radius:50%}
.footer-name{display:block; font-family:var(--font-display); font-size:1.15rem; font-weight:600; color:#fff}
.footer-id small{color:rgba(255,255,255,.72); font-size:.82rem}
.footer-emergency{font-size:.88rem; padding:.85rem 1rem; border-radius:var(--r-sm); background:rgba(255,255,255,.06); border:1px solid var(--hairline-dark); border-inline-start:3px solid var(--pulse)}
.footer-heading{font-family:var(--font-display); font-size:1rem; font-weight:500; color:#fff; margin-block-end:.9rem}
.footer-col ul{display:grid; gap:.15rem}
.footer-col li{min-block-size:40px; display:flex; align-items:center}
.footer-col a{color:rgba(255,255,255,.86); text-decoration:none}
.footer-col a:hover{color:#fff; text-decoration:underline}
.footer-bottom{margin-block-start:2.5rem; padding-block-start:1.5rem; border-block-start:1px solid rgba(255,255,255,.12); font-size:.85rem; color:rgba(255,255,255,.72)}
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .footer-grid{grid-template-columns:1fr; gap:2rem} }

/* ---------- WhatsApp button (desktop) and glass dock (phones) ---------- */
.fab-whatsapp{position:fixed; inset-block-end:1.5rem; inset-inline-end:1.5rem; z-index:90; inline-size:56px; block-size:56px; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--whatsapp); border:1px solid rgba(255,255,255,.25); box-shadow:0 10px 24px -10px rgba(7,94,84,.6); transition:transform .2s var(--ease)}
.fab-whatsapp:hover{transform:translateY(-2px) scale(1.03); color:#fff}
.fab-whatsapp .ico{inline-size:30px; block-size:30px}
.mobile-actions{display:none}
@media (max-width:760px){
  body > .mobile-actions{
    position:fixed; z-index:95; inset-inline:12px; inset-block-end:calc(10px + env(safe-area-inset-bottom));
    display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:6px; border-radius:26px;
    background:rgba(11,51,65,.86); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    border:1px solid var(--hairline-dark); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 16px 32px -14px rgba(7,37,48,.55);
  }
  .mobile-actions::before{background:linear-gradient(145deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 70%, rgba(127,217,194,.2) 100%)!important}
  .mobile-actions a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem; min-block-size:56px; border-radius:20px; color:#fff; text-decoration:none; font-family:var(--font-display); font-size:.8rem}
  .mobile-actions .ico{inline-size:24px; block-size:24px}
  .mobile-actions .ma-call{background:var(--emergency)}
  .mobile-actions .ma-wa .ico{color:#7FE3A8}
  .mobile-actions .ma-map .ico{color:var(--mint)}
  .fab-whatsapp{display:none}
  body{padding-block-end:calc(86px + env(safe-area-inset-bottom))}
  .toast{inset-block-end:calc(92px + env(safe-area-inset-bottom))}
}

/* ---------- Motion & print ---------- */
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition:none!important; animation:none!important} .btn:hover,:is(.dept-link,.dept-panel,.values li,.facility-list li):hover{transform:none} }
@media print{
  body::before,.utility-bar,.site-header,.fab-whatsapp,.mobile-actions,.map-frame,.form-panel{display:none}
  .hero,.site-footer{background:#fff; color:#000} .hero-title{color:#000}
}

@media (max-width:600px){ ul.clinic-list{padding:.25rem .9rem} ul.vmp{padding:.25rem 1.2rem} }

/* =========================================================
   Cover display (home): a clear media stage, with the slogan card and the task panel
   overlapping its bottom edge. Media is set per slide in index.html (data-image / data-video / data-poster).
   ========================================================= */
.cover{position:relative; margin-block-start:18px; --cover-overlap:110px} /* how far the cards overlap the stage */
.cover-stage{position:relative; overflow:hidden; isolation:isolate; inline-size:min(100% - 2*var(--gutter), var(--shell)); margin-inline:auto;
  block-size:clamp(400px, 58vh, 600px); border-radius:var(--r-xl); background:var(--deep); container-type:size}
.cover-media{position:absolute; inset:0; z-index:-2}
.cover-media-item{position:absolute; inset:0; opacity:0; transition:opacity 1.1s var(--ease); background-size:cover; background-position:center}
.cover-media-item.is-active{opacity:1}
.cover-media-item video{position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover}
.cover-media--welcome{background:radial-gradient(50% 75% at 85% 10%, rgba(127,217,194,.22), transparent 65%), linear-gradient(160deg, var(--brand), var(--deep))}
.cover-media--emergency{background:radial-gradient(48% 70% at 70% 30%, rgba(180,35,24,.36), transparent 65%), linear-gradient(160deg, var(--brand), var(--deep))}
.cover-media--clinics{background:radial-gradient(55% 80% at 70% 20%, rgba(43,139,155,.55), transparent 65%), linear-gradient(160deg, var(--brand), var(--deep))}
.cover-media--careers{background:radial-gradient(50% 75% at 72% 22%, rgba(127,217,194,.32), transparent 65%), linear-gradient(160deg, var(--brand), var(--deep))}
@keyframes coverZoom{from{transform:scale(1.06)} to{transform:scale(1)}}
.cover-media-item.is-active.has-media{animation:coverZoom 9s ease-out both}
.cover-media-item.is-active.has-video{animation:none} /* the clip has its own motion */
/* Play-once clips (they end on the logo): fill the whole stage */
.cover-media-item[data-once]{background:var(--brand)}
.cover-media-item .cover-clip{inset:0; inline-size:100%; block-size:100%; object-fit:cover; object-position:50% 50%}
img.cover-clip{position:absolute}

/* Branded artwork until real media is added: centred in the visible part of the stage */
.cover-art{position:absolute; inset-inline:0; margin-inline:auto; inset-block-start:10%; block-size:62%; aspect-ratio:1; color:var(--mint); opacity:.16; pointer-events:none}
.cover-art .cover-icon{inline-size:100%; block-size:100%}
.cover-art--mark{aspect-ratio:296/284; background:var(--mint); opacity:.12;
  -webkit-mask:url(../img/logo-mark.webp) no-repeat center / contain; mask:url(../img/logo-mark.webp) no-repeat center / contain}
.has-media .cover-art{display:none}

/* Only a soft bottom fade where the cards overlap, so the media stays clear */
.cover-shade{position:absolute; inset:auto 0 0 0; block-size:38%; z-index:-1; pointer-events:none; opacity:0; transition:opacity .8s var(--ease);
  background:linear-gradient(180deg, transparent, rgba(11,51,65,.45))}
.cover.media-on .cover-shade{opacity:1}

/* Controls: a small dark-glass pill in the top corner of the stage */
.cover-controls{display:none; position:absolute; inset-block-start:18px; inset-inline-end:18px; z-index:2; align-items:center; gap:.4rem; padding:.15rem .5rem; border-radius:999px;
  background:rgba(11,51,65,.55); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--hairline-dark)}
.cover.is-enhanced .cover-controls{display:flex}
.cover-dots{display:flex; gap:.15rem}
.cover-dot{display:grid; align-items:center; inline-size:40px; block-size:40px; padding:0 4px; border:0; background:none; cursor:pointer}
.cover-dot-bar{position:relative; display:block; block-size:4px; border-radius:2px; background:rgba(255,255,255,.3); overflow:hidden}
.cover-dot-bar::after{content:""; position:absolute; inset-block:0; inset-inline-start:0; inline-size:0; border-radius:inherit; background:#fff}
.cover-dot:hover .cover-dot-bar{background:rgba(255,255,255,.45)}
.cover-dot.is-active .cover-dot-bar::after{inline-size:100%}
@keyframes coverProgress{from{inline-size:0} to{inline-size:100%}}
.cover.is-running .cover-dot.is-active .cover-dot-bar::after{animation:coverProgress var(--cover-duration, 7s) linear both}
.cover :focus-visible{outline-color:var(--mint)}

/* Below the stage: slogan card + task panel, pulled up to overlap the stage's bottom edge */
.cover-below{position:relative; z-index:2; display:grid; grid-template-columns:1.25fr .75fr; gap:18px; align-items:end; margin-block-start:calc(-1 * var(--cover-overlap))}
.cover-card{padding:clamp(1.4rem,2.6vw,2.1rem); border-radius:var(--r-lg); color:var(--ink);
  background:var(--glass-fill-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow-hover)}
.cover-stack{display:grid}
.cover-slide{grid-area:1 / 1; align-self:start; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear .5s}
.cover-slide.is-active{opacity:1; visibility:visible; transform:none; transition:opacity .5s var(--ease) .1s, transform .5s var(--ease) .1s, visibility 0s}
.cover-tag{display:inline-flex; align-items:center; gap:.5rem; margin-block-end:.8rem; padding:.25rem .8rem; border-radius:999px; font-size:.84rem; color:var(--brand); background:var(--tile-bg)}
#coverSlide1 .cover-tag{color:var(--emergency); background:rgba(180,35,24,.08)}
#coverSlide1 .cover-tag::before{content:""; inline-size:7px; block-size:7px; border-radius:50%; background:var(--pulse)}
.cover .hero-title{color:var(--ink); font-family:var(--font-display); font-weight:500; font-size:clamp(1.9rem,1.3rem + 2.2vw,2.9rem); line-height:1.12; letter-spacing:-.022em; max-inline-size:20ch}
html[lang="ar"] .cover .hero-title{font-weight:600; line-height:1.3; letter-spacing:0; font-size:clamp(2rem,1.4rem + 2.3vw,3rem)}
.cover .horizon{margin-block:1rem .9rem; inline-size:56px}
.cover .hero-lede{color:var(--ink-soft); font-size:1.05rem; max-inline-size:52ch; margin-block-end:1.3rem}
.cover .actions{gap:.75rem}
.cover .btn-light{background:var(--brand); color:#fff}
.cover .btn-light:hover{background:var(--brand-hover); color:#fff}

/* Task panel next to the card: solid deep teal so it reads over media and page alike */
.cover .task-panel{background:rgba(11,51,65,.94); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border-color:var(--hairline-dark); box-shadow:0 24px 48px -24px rgba(7,37,48,.6)}

.cover + .facts-band{margin-block-start:2.5rem}

@media (max-width:980px){
  .cover{--cover-overlap:72px}
  .cover-below{grid-template-columns:1fr}
  .cover-stage{block-size:clamp(300px, 62vw, 480px)}
}
@media (max-width:600px){
  .cover-stage{block-size:clamp(250px, 72vw, 340px)}
  .cover{--cover-overlap:56px}
  .cover-below{gap:14px}
  .cover-art{block-size:56%; inset-block-start:8%}
  .cover-controls{inset-block-start:12px; inset-inline-end:12px}
  .cover-dot{inline-size:32px}
}
@media (prefers-reduced-motion:reduce){
  .cover-slide,.cover-slide.is-active,.cover-media-item{transition:none}
  .cover-media-item.is-active.has-media{animation:none}
}