/* ============================================================
   EgyMedica — egymedica.com
   Single stylesheet for EN (LTR) and AR (RTL) pages.
   Medical palette: clinical teal + blue accent on white.
   Brand token NAMES are kept (--green-*, --lime-400, --gold) so the
   ~70 existing usages keep working — only their values are re-skinned.
   ============================================================ */

:root {
  /* Primary brand scale — clinical teal (darkest → brightest) */
  --green-900: #0a3a40;
  --green-800: #0c4a52;
  --green-700: #0e6670;
  --green-600: #0e7c86;
  --green-500: #16a3ad;
  --lime-400: #2f9fd6;   /* accent slot — clinical blue, used in gradients/highlights */
  --ink: #16242a;
  --ink-soft: #4a5a60;
  --paper: #ffffff;
  --mist: #f1f7f8;
  --line: #dde8ea;
  --gold: #e0a13a;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(10, 58, 64, 0.10);
  --font-en: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-ar: "Tajawal", "Segoe UI", system-ui, sans-serif;
  /* Heading fonts default to the body font; the admin Typography panel can override all four
     (--font-en / --font-ar / --font-head-en / --font-head-ar) via an injected :root block. */
  --font-head-en: var(--font-en);
  --font-head-ar: var(--font-ar);
  --font: var(--font-en);
  --font-head: var(--font-head-en);
}

html[lang="ar"] { --font: var(--font-ar); --font-head: var(--font-head-ar); }
h1, h2, h3, h4 { font-family: var(--font-head); }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: var(--green-600); text-decoration: none; }
a:hover { color: var(--green-800); }
ul { list-style: none; }

.container { width: min(1140px, 92%); margin-inline: auto; }

h1, h2, h3, h4 { line-height: 1.25; color: var(--green-900); font-weight: 800; }
h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: 1.25rem; }

.kicker {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--green-600);
  margin-bottom: .6rem;
}
html[lang="ar"] .kicker { letter-spacing: 0; font-size: .9rem; }

.lead { color: var(--ink-soft); font-size: 1.1rem; max-width: 46em; }

.section { padding-block: 4.5rem; }
.section.alt { background: var(--mist); }
.section-head { margin-bottom: 2.4rem; max-width: 50em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  border: 2px solid transparent;
  transition: all .2s ease;
  cursor: pointer;
}
.btn-primary { background: var(--green-600); color: #fff; }
.btn-primary:hover { background: var(--green-800); color: #fff; transform: translateY(-2px); }
.btn-ghost { border-color: rgba(255,255,255,.65); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
.btn-outline { border-color: var(--green-600); color: var(--green-700); }
.btn-outline:hover { background: var(--green-600); color: #fff; }
.btn-whatsapp { background: #25d366; color: #06351f; }
.btn-whatsapp:hover { background: #1ebe5b; color: #06351f; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .7rem;
}
.brand img { height: 52px; width: auto; }

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a {
  color: var(--ink);
  font-weight: 600;
  font-size: .95rem;
  padding-block: .4rem;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--green-600); }
.nav a.active { color: var(--green-600); border-bottom-color: var(--green-600); }

.lang-switch {
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: .35rem 1rem;
  font-weight: 700;
  font-size: .85rem;
  color: var(--green-800);
  background: var(--mist);
  white-space: nowrap;
}
.lang-switch:hover { border-color: var(--green-600); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 42px; height: 42px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.nav-toggle span {
  width: 24px; height: 2.5px;
  background: var(--green-900);
  border-radius: 2px;
  transition: all .25s;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  background: var(--green-900);
}
.hero-slides { position: absolute; inset: 0; }
.hero-slides .slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-slides .slide.on { opacity: 1; }
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(7,42,26,.92) 25%, rgba(7,42,26,.55) 60%, rgba(7,42,26,.35));
  z-index: 1;
}
html[dir="rtl"] .hero::after {
  background: linear-gradient(-100deg, rgba(7,42,26,.92) 25%, rgba(7,42,26,.55) 60%, rgba(7,42,26,.35));
}
.hero .container { position: relative; z-index: 2; }
.hero h1 { color: #fff; max-width: 14em; }
.hero .tagline {
  color: var(--lime-400);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .85rem;
  margin-bottom: 1rem;
}
html[lang="ar"] .hero .tagline { letter-spacing: 0; font-size: 1rem; }
.hero p.sub { margin-top: 1.2rem; max-width: 36em; color: rgba(255,255,255,.85); font-size: 1.15rem; }
.hero-cta { margin-top: 2.2rem; display: flex; gap: 1rem; flex-wrap: wrap; }

/* Scroll-down cue — invites the user past the near-full-height hero */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  z-index: 2;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.10);
  border: 1.5px solid rgba(255,255,255,.45);
  backdrop-filter: blur(4px);
  animation: scroll-bob 2.2s ease-in-out infinite;
  transition: background .2s ease, border-color .2s ease;
}
.scroll-cue:hover { background: rgba(255,255,255,.22); border-color: #fff; color: #fff; }
.scroll-cue svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@keyframes scroll-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 7px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue { animation: none; }
}
@media (max-width: 640px) {
  .scroll-cue { display: none; }
}

/* ---------- Stats strip ---------- */
.stats {
  background: var(--green-900);
  color: #fff;
  padding-block: 2.6rem;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  text-align: center;
}
.stat .num {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--lime-400);
}
.stat .lbl { color: rgba(255,255,255,.8); font-size: .92rem; margin-top: .2rem; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 1.6rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.card p { color: var(--ink-soft); font-size: .97rem; }
.card .card-logo {
  height: 76px;
  display: flex;
  align-items: center;
  margin-bottom: .4rem;
}
.card .card-logo img { max-height: 76px; width: auto; max-width: 240px; object-fit: contain; }
.card .links { margin-top: auto; padding-top: .6rem; font-weight: 700; }

.badge {
  display: inline-block;
  background: var(--gold);
  color: #16242a;
  font-size: .75rem;
  font-weight: 800;
  padding: .25rem .8rem;
  border-radius: 999px;
  width: fit-content;
}
.badge.green { background: var(--green-600); }

.event-meta { display: flex; flex-direction: column; gap: .35rem; font-size: .95rem; }
.event-meta strong { color: var(--green-800); }

.socials { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--mist);
  border: 1px solid var(--line);
  color: var(--green-800);
  transition: all .2s;
}
.socials a:hover { background: var(--green-600); color: #fff; border-color: var(--green-600); }
.socials svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- Split / feature rows ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.split .pic {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.split .pic img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Icon list (services) ---------- */
.icon-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}
.icon-list li {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .9rem 1.1rem;
  font-weight: 600;
  font-size: .95rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.icon-list li::before {
  content: "✓";
  color: var(--green-600);
  font-weight: 900;
  flex-shrink: 0;
}

/* ---------- Icon grid (service items with brand icons) ---------- */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem;
}
.icon-grid li {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.3rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  text-align: center;
  font-weight: 600;
  font-size: .92rem;
  box-shadow: var(--shadow);
}
.icon-grid img { height: 48px; width: auto; }

/* ---------- Card icon / photo ---------- */
.card-icon { height: 44px; width: auto; }
.card-photo {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
  background: var(--mist);
}
.card-photo.fit-contain { object-fit: contain; }

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-inline-start: 1.8rem; display: grid; gap: 1.6rem; }
.timeline::before {
  content: "";
  position: absolute;
  inset-block: 6px;
  inset-inline-start: 5px;
  width: 2px;
  background: var(--line);
}
.timeline li { position: relative; }
.timeline li::before {
  content: "";
  position: absolute;
  inset-inline-start: -1.8rem;
  top: 8px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--green-600);
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 2px var(--green-600);
}
.timeline .year { font-weight: 800; color: var(--green-600); display: block; }

/* ---------- Gallery ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.gallery img {
  border-radius: 14px;
  width: 100%;
  height: 220px;
  object-fit: cover;
  box-shadow: var(--shadow);
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  background: linear-gradient(115deg, var(--green-900), var(--green-800) 60%, var(--green-600));
  color: #fff;
  padding-block: 4.2rem;
}
.page-hero h1 { color: #fff; }
.page-hero p { color: rgba(255,255,255,.82); max-width: 44em; margin-top: .8rem; font-size: 1.1rem; }

/* ---------- Contact ---------- */
.contact-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow);
}
.contact-card h3 { margin-bottom: .8rem; }
.contact-card ul { display: grid; gap: .55rem; color: var(--ink-soft); }
.contact-card a { font-weight: 600; direction: ltr; unicode-bidi: embed; }

.map-frame {
  border: 0;
  width: 100%;
  height: 380px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Organizing-company map card (contact page) */
.org-map{display:flex;flex-wrap:wrap;border:1px solid #d6edef;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.org-map-label{flex:1 1 260px;background:#0e7c86;color:#fff;padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:.45rem;justify-content:center}
.org-map-kicker{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.85}
.org-map-label strong{font-size:1.06rem;line-height:1.3}
.org-map-note{font-size:.88rem;line-height:1.5;opacity:.92}
.org-map .map-frame{flex:2 1 420px;height:auto;min-height:340px;border-radius:0;box-shadow:none}
[dir="rtl"] .org-map-kicker{letter-spacing:.03em}
@media (max-width:640px){.org-map-label{flex-basis:100%}.org-map .map-frame{flex-basis:100%;min-height:300px}}

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(115deg, var(--green-800), var(--green-600));
  color: #fff;
  border-radius: var(--radius);
  padding: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.85); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--green-900);
  color: rgba(255,255,255,.78);
  padding-block: 3.5rem 0;
  margin-top: 4rem;
  font-size: .95rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}
.site-footer h4 { color: #fff; margin-bottom: 1rem; font-size: 1.05rem; }
.site-footer a { color: rgba(255,255,255,.78); }
.site-footer a:hover { color: var(--lime-400); }
.site-footer ul { display: grid; gap: .5rem; }
.footer-brand {
  font-weight: 800;
  color: #fff;
  font-size: 1.3rem;
  letter-spacing: .02em;
}
.footer-brand span { color: var(--lime-400); }
.footer-socials { margin-top: 1rem; display: grid; gap: .6rem; }
.footer-socials .row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.footer-socials .row .who { font-weight: 700; color: #fff; min-width: 9.5em; }
.footer-socials a {
  display: inline-flex;
  width: 32px; height: 32px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
}
.footer-socials a:hover { background: var(--green-600); color: #fff; }
.footer-socials svg { width: 15px; height: 15px; fill: currentColor; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-block: 1.2rem;
  text-align: center;
  font-size: .85rem;
  color: rgba(255,255,255,.55);
}
.ltr-inline { direction: ltr; unicode-bidi: embed; }

/* ---------- Focus visibility ---------- */
:focus-visible { outline: 2px solid var(--green-600); outline-offset: 2px; border-radius: 2px; }
.site-footer :focus-visible, .hero :focus-visible, .page-hero :focus-visible, .cta-band :focus-visible, .stats :focus-visible { outline-color: var(--lime-400); }

/* ---------- Reveal animation (hidden state only when JS is running) ---------- */
html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .nav {
    position: fixed;
    inset-block-start: 67px;
    inset-inline: 0;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.4rem 6%;
    gap: 1.1rem;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: none;
  }
  .nav.open { display: flex; }
  .nav-toggle { display: flex; }
  .split { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero { min-height: 76vh; }
}

/* ============================================================
   Liquid-glass nav + floating header + count-up stats
   (themed to the EgyMedica medical teal palette)
   These rules are appended last so they override the base header/nav above.
   ============================================================ */
html { scroll-padding-top: 100px; }

/* Floating liquid-glass header */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent; border: none;
  padding-top: 14px; padding-bottom: 4px;
  backdrop-filter: none;
  transition: padding .3s ease;
}
.site-header .header-inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .4rem .55rem .4rem 1.2rem;
  border-radius: 999px;
  isolation: isolate;
  background: rgba(255,255,255,.30);
  box-shadow: 0 10px 30px rgba(11,61,38,.16);
  transition: background .35s ease, box-shadow .35s ease;
}
.site-header .header-inner::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -2;
  backdrop-filter: blur(22px) saturate(2) brightness(1.05);
  -webkit-backdrop-filter: blur(22px) saturate(2) brightness(1.05);
}
html.lg-svg .site-header .header-inner::before {
  backdrop-filter: url(#gl-glass) blur(2px) saturate(2) brightness(1.05);
  -webkit-backdrop-filter: blur(22px) saturate(2) brightness(1.05);
}
.site-header .header-inner::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.75), inset 0 -2px 3px rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.4);
}
.site-header.scrolled { padding-top: 8px; }
.site-header.scrolled .header-inner { background: rgba(255,255,255,.5); box-shadow: 0 8px 26px rgba(11,61,38,.22); }
@media (prefers-reduced-transparency: reduce) {
  .site-header .header-inner { background: #fff; }
  .site-header .header-inner::before { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.brand img { height: 58px; width: auto; }

/* Nav links become rounded pills that the glass indicator slides between */
.nav { position: relative; display: flex; align-items: center; gap: .6rem; }
.nav a { position: relative; z-index: 1; color: var(--ink); font-weight: 600; font-size: .95rem;
  padding: .45rem .9rem; border-radius: 999px; border-bottom: none; transition: color .3s ease; }
.nav a:hover { color: var(--green-700); }
.nav a.active { color: var(--green-700); border-bottom-color: transparent; }
.nav .lang-switch { position: relative; z-index: 1; background: rgba(255,255,255,.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* Liquid-glass sliding indicator: morphs between text links on hover, rests on .active (desktop) */
.nav-glass {
  position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 0;
  border-radius: 999px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.22));
  backdrop-filter: blur(7px) saturate(1.8) brightness(1.12);
  -webkit-backdrop-filter: blur(7px) saturate(1.8) brightness(1.12);
  box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,.95), inset 0 -3px 6px rgba(255,255,255,.32),
              inset 0 0 0 1px rgba(255,255,255,.5), 0 6px 18px rgba(11,61,38,.18);
  transition: transform .42s cubic-bezier(.34,1.25,.4,1), width .42s cubic-bezier(.34,1.25,.4,1),
              height .3s ease, opacity .35s ease;
  will-change: transform, width;
}
html.lg-svg .nav-glass { backdrop-filter: url(#gl-glass) blur(3px) saturate(1.9) brightness(1.08); }
@media (max-width: 920px) { .nav-glass { display: none; } }
@media (prefers-reduced-motion: reduce) { .nav-glass { transition: opacity .2s ease; } }

/* Clear the fixed header on every page's first section */
.hero { padding-top: 116px; }
.page-hero { padding-top: 132px; }

/* Stat numbers: keep them from reflowing while counting up */
.stat .num { font-variant-numeric: tabular-nums; }

/* Mobile: glass dropdown + active pill (appended after the base 920px block so it wins) */
@media (max-width: 920px) {
  .nav {
    position: fixed; inset-block-start: 80px; inset-inline: 4%;
    width: 92%; box-sizing: border-box;
    background: rgba(255,255,255,.80);
    backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
    flex-direction: column; align-items: stretch; padding: 1.1rem 1.2rem; gap: .7rem;
    border-radius: 22px; box-shadow: 0 18px 40px rgba(11,61,38,.22), inset 0 0 0 1px rgba(255,255,255,.5);
    border-bottom: none; display: none;
  }
  .nav.open { display: flex; }
  .nav a { width: 100%; }
  .nav a:not(.lang-switch) { transition: background .25s ease, color .25s ease, box-shadow .25s ease; }
  .nav a:not(.lang-switch).active,
  .nav a:not(.lang-switch):active,
  .nav a:not(.lang-switch):focus-visible {
    color: var(--green-700);
    background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.3));
    backdrop-filter: blur(7px) saturate(1.8) brightness(1.12);
    -webkit-backdrop-filter: blur(7px) saturate(1.8) brightness(1.12);
    box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,.95), inset 0 -3px 6px rgba(255,255,255,.32),
                inset 0 0 0 1px rgba(255,255,255,.6), 0 6px 16px rgba(11,61,38,.16);
  }
  html.lg-svg .nav a:not(.lang-switch).active,
  html.lg-svg .nav a:not(.lang-switch):active,
  html.lg-svg .nav a:not(.lang-switch):focus-visible {
    backdrop-filter: url(#gl-glass) blur(3px) saturate(1.8) brightness(1.12);
  }
  .nav-toggle { display: flex; }
}

/* ---------- Contact form (lead form) ---------- */
.lead-form { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.8rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 1rem; }
.lead-form .lf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.lead-form label { display: flex; flex-direction: column; gap: .35rem; font-weight: 600; font-size: .9rem; color: var(--ink-soft); }
.lead-form label.full { grid-column: 1 / -1; }
.lead-form input, .lead-form textarea { font: inherit; padding: .65rem .8rem; border: 1px solid var(--line);
  border-radius: 10px; color: var(--ink); background: #fff; }
.lead-form input:focus, .lead-form textarea:focus { outline: 2px solid var(--green-500); outline-offset: 1px; }
.lead-form textarea { min-height: 130px; resize: vertical; }
.lead-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lead-form button { align-self: flex-start; }
.form-ok { background: #e8f6ec; border: 1px solid #b6e0c2; color: #177a3c; border-radius: 12px;
  padding: 1rem 1.2rem; font-weight: 700; margin-bottom: 1.2rem; }
.form-err { background: #fde8e8; border: 1px solid #f5b5b5; color: #b42318; border-radius: 12px;
  padding: 1rem 1.2rem; font-weight: 700; margin-bottom: 1.2rem; }

/* GDPR consent row on lead forms */
.lead-form label.consent { flex-direction: row; align-items: flex-start; gap: .6rem; font-weight: 500; font-size: .85rem; color: var(--ink-soft); }
.lead-form label.consent input { width: auto; margin-top: .2rem; flex: 0 0 auto; }
.lead-form label.consent a { color: var(--green-600); text-decoration: underline; }

/* ============================================================
   DYNAMIC LAYER — motion, hover life, depth & accent color.
   Additive only; works for EN (LTR) and AR (RTL), and degrades
   gracefully under prefers-reduced-motion. Appended last so it wins.
   ============================================================ */

/* ---------- Ambient section glows (depth instead of flat blocks) ---------- */
.section {
  position: relative;
  background-image: radial-gradient(680px circle at 0% 100%, rgba(23,122,60,.05), transparent 60%);
}
.section.alt {
  background-color: var(--mist);
  background-image:
    radial-gradient(620px circle at 100% 0%, rgba(141,198,63,.12), transparent 58%),
    radial-gradient(520px circle at 0% 100%, rgba(23,122,60,.07), transparent 60%);
}

/* ---------- Section headings: gradient ink + accent underline ---------- */
.section-head h2 {
  display: block;
  width: fit-content;
  max-width: 100%;
  background: linear-gradient(92deg, var(--green-900) 10%, var(--green-600) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .section-head h2 { color: var(--green-900); }
}
.section-head h2::after {
  content: "";
  display: block;
  width: 56px; height: 4px;
  margin-top: .75rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green-600), var(--lime-400));
}
html[dir="rtl"] .section-head h2::after { margin-inline-start: 0; }

/* ---------- Cards: lift + gradient top-accent on hover ---------- */
.card {
  position: relative;
  overflow: hidden;
  transition: transform .32s cubic-bezier(.34,1.2,.4,1), box-shadow .32s ease, border-color .32s ease;
}
.card::before {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green-500), var(--lime-400));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.34,1.2,.4,1);
}
html[dir="rtl"] .card::before { transform-origin: right; }
.card:hover {
  transform: translateY(-7px);
  box-shadow: 0 22px 44px rgba(11,61,38,.18);
  border-color: rgba(141,198,63,.5);
}
.card:hover::before { transform: scaleX(1); }

/* ---------- Service / icon tiles & checklist: respond to hover ---------- */
.icon-grid li {
  transition: transform .3s cubic-bezier(.34,1.2,.4,1), box-shadow .3s ease;
}
.icon-grid li:hover { transform: translateY(-6px); box-shadow: 0 18px 34px rgba(11,61,38,.15); }
.icon-list li { transition: border-color .25s ease, background .25s ease, transform .25s ease; }
.icon-list li:hover { border-color: var(--green-500); background: var(--mist); transform: translateX(3px); }
html[dir="rtl"] .icon-list li:hover { transform: translateX(-3px); }

/* ---------- Image zoom inside framed pictures & gallery ---------- */
.split .pic img, .gallery img { transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.split .pic:hover img { transform: scale(1.06); }
.gallery img:hover { transform: scale(1.04); }

/* ---------- Social chips: gentle pop ---------- */
.socials a { transition: background .2s, color .2s, border-color .2s, transform .2s ease; }
.socials a:hover { transform: translateY(-3px); }

/* ---------- Primary button: shine sweep ---------- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: "";
  position: absolute; top: 0; left: -160%;
  width: 55%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-22deg);
  transition: left .6s ease;
  pointer-events: none;
}
.btn-primary:hover::after { left: 160%; }

/* ---------- Stats strip: lime glow + interactive numbers ---------- */
.stats {
  position: relative;
  background-image: radial-gradient(820px circle at 50% -40%, rgba(141,198,63,.20), transparent 60%);
}
.stat .num { display: inline-block; transition: transform .3s cubic-bezier(.34,1.2,.4,1); }
.stat:hover .num { transform: scale(1.08); }

/* ---------- Animated gradient on banners ---------- */
.cta-band, .page-hero {
  background-size: 200% 200%;
  animation: gl-gradient-shift 9s ease infinite;
}
@keyframes gl-gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---------- Hero: slow Ken Burns zoom on the active slide ---------- */
.hero-slides .slide.on { animation: gl-kenburns 7s ease-out both; }
@keyframes gl-kenburns {
  from { transform: scale(1.001); }
  to   { transform: scale(1.09); }
}

/* ---------- Hero & page-hero content: staggered entrance ---------- */
.hero .container > *, .page-hero .container > * {
  animation: gl-rise .85s cubic-bezier(.22,.7,.25,1) both;
}
.hero .container > *:nth-child(1), .page-hero .container > *:nth-child(1) { animation-delay: .08s; }
.hero .container > *:nth-child(2), .page-hero .container > *:nth-child(2) { animation-delay: .20s; }
.hero .container > *:nth-child(3), .page-hero .container > *:nth-child(3) { animation-delay: .32s; }
.hero .container > *:nth-child(4), .page-hero .container > *:nth-child(4) { animation-delay: .44s; }
@keyframes gl-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Staggered scroll-reveal (delay set inline by main.js) ---------- */
html.js .reveal { transition: opacity .7s ease, transform .7s ease; }

/* ---------- Honor reduced-motion: kill the new motion, keep the looks ---------- */
@media (prefers-reduced-motion: reduce) {
  .cta-band, .page-hero { animation: none; }
  .hero-slides .slide.on { animation: none; }
  .hero .container > *, .page-hero .container > * { animation: none; opacity: 1; transform: none; }
  .btn-primary::after { display: none; }
}

/* ============================================================
   DYNAMIC LAYER 2 — opt-in extras: scroll progress, tilt cards,
   stat accents, bolder hero, page-transition fade.
   ============================================================ */

/* 1) Scroll progress bar (added to DOM by main.js) */
.scroll-progress {
  position: fixed; top: 0; inset-inline: 0;
  height: 3px; z-index: 60;
  background: linear-gradient(90deg, var(--green-600), var(--lime-400));
  transform: scaleX(0); transform-origin: left;
  will-change: transform; pointer-events: none;
}
html[dir="rtl"] .scroll-progress { transform-origin: right; }

/* 2) Tilt cards: 3D context; freeze the transform transition while tracking the cursor */
.card { transform-style: preserve-3d; }
.card.gl-tilting { transition: box-shadow .2s ease, border-color .2s ease; }

/* 3) Stat accents: gradient underline beneath each number */
.stat .num { position: relative; padding-bottom: .5rem; }
.stat .num::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 28px; height: 3px; transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lime-400), var(--green-500));
  opacity: .9;
}

/* 4) Bolder hero: layered lime glow over the dark overlay + soft bottom bloom */
.hero::after {
  background:
    radial-gradient(900px circle at 85% 18%, rgba(141,198,63,.22), transparent 46%),
    linear-gradient(100deg, rgba(7,42,26,.92) 25%, rgba(7,42,26,.55) 60%, rgba(7,42,26,.32));
}
html[dir="rtl"] .hero::after {
  background:
    radial-gradient(900px circle at 15% 18%, rgba(141,198,63,.22), transparent 46%),
    linear-gradient(-100deg, rgba(7,42,26,.92) 25%, rgba(7,42,26,.55) 60%, rgba(7,42,26,.32));
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(720px circle at 50% 122%, rgba(43,179,90,.28), transparent 55%);
  mix-blend-mode: screen; opacity: .55;
}

/* 5) Page-transition fade — fade OUT on leave only (no arrival fade, so LCP is untouched) */
html.js body { transition: opacity .18s ease; }
html.js body.gl-leaving { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html.js body, html.js body.gl-leaving { transition: none; opacity: 1; }
}

/* ============================================================
   MOBILE MENU MOTION — hamburger morphs to X, panel slides in,
   items cascade. Appended last so it wins inside the breakpoint.
   ============================================================ */
@media (max-width: 920px) {
  /* Hamburger bars animate (both directions, since this is a transition not tied to display) */
  .nav-toggle span { transition: transform .3s cubic-bezier(.5,.2,.2,1), opacity .2s ease; transform-origin: center; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* Tap feedback on the button itself */
  .nav-toggle:active { transform: scale(.9); }

  /* Panel slides + fades in when it switches to display:flex */
  .nav.open {
    animation: gl-menu-in .34s cubic-bezier(.22,.85,.26,1) both;
    transform-origin: top center;
  }
  @keyframes gl-menu-in {
    from { opacity: 0; transform: translateY(-14px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Panel slides + fades out on close (JS keeps it flex until the animation ends) */
  .nav.open.gl-closing { animation: gl-menu-out .24s ease both; }
  @keyframes gl-menu-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-12px) scale(.97); }
  }

  /* Links cascade in under the panel */
  .nav.open a { animation: gl-menu-item .4s cubic-bezier(.22,.8,.28,1) both; }
  .nav.open a:nth-of-type(1) { animation-delay: .07s; }
  .nav.open a:nth-of-type(2) { animation-delay: .12s; }
  .nav.open a:nth-of-type(3) { animation-delay: .17s; }
  .nav.open a:nth-of-type(4) { animation-delay: .22s; }
  .nav.open a:nth-of-type(5) { animation-delay: .27s; }
  .nav.open a:nth-of-type(6) { animation-delay: .32s; }
  @keyframes gl-menu-item {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
  html[dir="rtl"] .nav.open a { animation-name: gl-menu-item-rtl; }
  @keyframes gl-menu-item-rtl {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .nav-toggle span { transition: none; }
    .nav.open, .nav.open a { animation: none; }
  }
}

/* ============================================================
   BRAND LOCKUP — official EgyMedica horizontal logo (navy + red).
   Two stacked PNGs of identical dimensions: a WHITE recolour reads over
   the dark hero at the top of every page, and the full-colour navy+red
   lockup fades in once the header is scrolled onto light content.
   (.scrolled is toggled by main.js at scrollY > 8.) Both are real
   artwork — no CSS filters — so the brand colours stay accurate.
   ============================================================ */
.brand { position: relative; display: inline-flex; line-height: 0; }
.brand .brand-logo {
  height: 46px; width: auto; display: block;
  transition: opacity .3s ease;
}
/* colour variant overlays the white one, revealed on scroll */
.brand .brand-on-light { position: absolute; top: 0; left: 0; opacity: 0; }
.site-header.scrolled .brand-on-dark { opacity: 0; }
.site-header.scrolled .brand-on-light { opacity: 1; }

/* When the glass pill is forced opaque white (reduced transparency), the
   white logo would vanish on a light pill — show the colour lockup always. */
@media (prefers-reduced-transparency: reduce) {
  .brand-on-dark { opacity: 0; }
  .brand-on-light { opacity: 1; }
}

/* Phones: shrink the lockup so it sits comfortably in the floating pill;
   object-fit:contain guarantees the whole lockup renders (never cropped). */
@media (max-width: 640px) {
  .brand .brand-logo { height: 38px; max-width: 62vw; object-fit: contain; }
}

/* ============================================================
   MILESTONE TIMELINE — PROGRESS FILL. A green fill travels down the
   gray track (1997 -> present); each dot and its year light up as the
   fill reaches them, ending at the latest (2026) milestone, which then
   pulses. JS adds .gl-animate on scroll-in and sets --td per <li> = the
   delay at which the fill passes that dot (computed from its position,
   matched to the fill duration). Gated on html.js; no-JS shows it all.
   ============================================================ */
:root { --tl-fill: 2.6s; --rail-x: 7px; }   /* tuned onto the dot centers */

/* Trim the rail (gray track ::before + green fill ::after) to run from the first
   dot down to a small end-cap just past the last (2026) milestone — no dangle.
   JS sets --tl-top and --tl-len from the real dot positions. */
.timeline { isolation: isolate; }            /* scope the rail/dot stacking order */
.timeline li { z-index: 1; }                 /* dots + year + end-cap sit ABOVE the rail */
html.js .timeline::before,
html.js .timeline::after {
  top: var(--tl-top, 6px);
  bottom: auto;
  height: var(--tl-len, calc(100% - 12px));
  inset-inline-start: var(--rail-x, 8px);   /* tuned onto the dot centers */
  z-index: 0;                               /* rail behind the dots -> looks like it connects them */
}

/* ::after is the animated green fill drawn over the gray ::before track */
html.js .timeline::after {
  content: "";
  position: absolute;
  width: 2px;
  background: linear-gradient(var(--green-500), var(--green-700));
  border-radius: 2px;
  transform: scaleY(0);
  transform-origin: top;
}
html.js .timeline.gl-animate::after { transform: scaleY(1); transition: transform var(--tl-fill) linear; }

/* Dots begin hollow/gray, then fill green when the progress reaches them */
html.js .timeline li::before {
  background: var(--paper);
  border: 2.5px solid var(--line);
  box-shadow: 0 0 0 2px var(--line);
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
html.js .timeline.gl-animate li::before {
  background: var(--green-600);
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--green-600);
  transform: scale(1.15);
  transition-delay: var(--td, 0ms);
}

/* Year label stays muted until its dot fills, then turns brand green */
html.js .timeline li .year { color: var(--ink-soft); transition: color .35s ease; }
html.js .timeline.gl-animate li .year { color: var(--green-600); transition-delay: var(--td, 0ms); }

/* Small end-cap dot terminating the line just past 2026 (added by JS inside the
   last <li>). Centered on the same rail as the milestone dots; pops + pulses
   when the fill reaches it. */
html.js .tl-end {
  position: absolute;
  inset-inline-start: calc(-1.8rem + 7.75px); /* dot center +1.75px right (user-tuned) */
  top: 62px;                                   /* dot center (14px) + 48px tail */
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 3px rgba(43,179,90,.18);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .45s cubic-bezier(.34,1.7,.5,1);
  transition-delay: var(--td, 0ms);
  pointer-events: none;
}
html.js .timeline.gl-animate .tl-end {
  transform: translate(-50%, -50%) scale(1);
  animation: gl-dot-pulse 2.2s ease-in-out infinite;
  animation-delay: calc(var(--td, 0ms) + .4s);
}
@keyframes gl-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--green-600); }
  50%      { box-shadow: 0 0 0 2px var(--green-500), 0 0 15px 4px rgba(43,179,90,.6); }
}

@media (prefers-reduced-motion: reduce) {
  html.js .timeline::after { transform: scaleY(1); transition: none; }
  html.js .timeline li::before {
    background: var(--green-600); border-color: #fff; box-shadow: 0 0 0 2px var(--green-600); transition: none; transform: none;
  }
  html.js .timeline li .year { color: var(--green-600); }
  html.js .tl-end { transform: translate(-50%, -50%) scale(1); transition: none; animation: none; }
}

/* ===== Tier-1 SEO: breadcrumbs + FAQ ===== */
.page-hero .breadcrumbs { font-size: .85rem; margin-bottom: .9rem; opacity: .9; }
.page-hero .breadcrumbs a { color: var(--lime-400); text-decoration: none; }
.page-hero .breadcrumbs a:hover { text-decoration: underline; }
.page-hero .breadcrumbs .sep { margin: 0 .5rem; opacity: .55; }
.page-hero .breadcrumbs [aria-current="page"] { color: #fff; }

.faq-list { max-width: 820px; margin: 1.6rem auto 0; }
.faq-item { border: 1px solid #e2e8e3; border-radius: 12px; padding: 0 1.1rem; margin-bottom: .8rem; background: #fff; }
.faq-item summary { cursor: pointer; list-style: none; padding: 1.1rem 0; font-weight: 700; color: var(--green-900);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--green-600); line-height: 1; flex: none; }
.faq-item[open] summary::after { content: "\2013"; }
.faq-item .faq-answer { padding: 0 0 1.1rem; color: #44524b; line-height: 1.7; }
[dir="rtl"] .faq-item summary { text-align: right; }

/* ============================================================
   DYNAMIC LAYER 3 — SYMMETRY, BALANCE & COHESION PASS
   Appended last, so these rules win on specificity ties.
   Additive only. Uses logical properties so EN (LTR) and AR (RTL)
   stay mirrored. No motion is added that isn't already disabled by
   the existing prefers-reduced-motion blocks; new ambient/depth here
   is paint-only (shadows, gradients) and therefore motion-safe.
   ============================================================ */

/* ---- New design tokens (elevation, radius, accent, motion, space) ---- */
:root {
  --elev-1: 0 1px 2px rgba(10,58,64,.06), 0 4px 12px rgba(10,58,64,.08);
  --elev-2: 0 6px 18px rgba(10,58,64,.10), 0 2px 6px rgba(10,58,64,.06);
  --elev-3: 0 18px 40px rgba(10,58,64,.16), 0 4px 12px rgba(10,58,64,.08);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --accent-grad: linear-gradient(90deg, var(--green-600), var(--lime-400));

  --ease-standard: cubic-bezier(.22,.61,.36,1);
  --ease-overshoot: cubic-bezier(.34,1.2,.4,1);
  --dur-1: .2s;
  --dur-2: .32s;
  --dur-3: .6s;

  --space-sm: 1rem;
  --space-md: 1.6rem;
  --space-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --space-2xl: clamp(3rem, 2.4rem + 3vw, 5rem);
}

/* ---- P1: fluid h3 so the type scale doesn't collapse at card level ---- */
h3 { font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.45rem); }

/* ---- P0: cap auto-fit grids at the wide breakpoint + center short rows ---- */
@media (min-width: 921px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.grid-3 > *, .grid-4 > * { min-width: 0; }
.grid { justify-items: stretch; }

/* ---- P2 (pure-CSS, safe to ship now): services icon-grid clean rows ---- */
.icon-grid { justify-content: center; }
@media (min-width: 921px) {
  .icon-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- P1: one alignment axis per page — left-align the icon tiles ---- */
.icon-grid li { align-items: flex-start; text-align: start; }

/* ---- P1: reserve the card media slot so card tops line up ---- */
.card .card-logo { min-height: 76px; }

/* ---- P0: WCAG AA on the two dark banners (raise text + darken light stop) ---- */
.page-hero p, .cta-band p { color: rgba(255,255,255,.92); }
.page-hero {
  background: linear-gradient(115deg, var(--green-900), var(--green-800) 60%, var(--green-700));
}
.cta-band {
  background: linear-gradient(115deg, var(--green-800), var(--green-700));
}

/* ---- P1: 3-tier elevation assigned by component weight ---- */
.icon-grid li, .socials a { box-shadow: var(--elev-1); }
.card, .contact-card, .lead-form, .split .pic, .gallery img { box-shadow: var(--elev-2); }
.map-frame, .cta-band { box-shadow: var(--elev-3); }
.card:hover { box-shadow: var(--elev-3); }
.icon-grid li:hover { box-shadow: var(--elev-2); }

/* ---- P1: radius scale mapped onto the ad-hoc literals ---- */
.icon-list li, .faq-item, .card-photo, .form-ok, .form-err,
.icon-grid li, .gallery img { border-radius: var(--radius-md); }
.lead-form input, .lead-form textarea { border-radius: var(--radius-sm); }

/* ---- P1: centralize the accent gradient; give gold a second home ---- */
.section-head h2::after, .scroll-progress, .card::before { background: var(--accent-grad); }
html[dir="rtl"] .section-head h2::after {
  background: linear-gradient(270deg, var(--green-600), var(--lime-400));
}
.cta-band h2 { position: relative; }
.cta-band h2::after {
  content: "";
  display: block;
  width: 56px; height: 4px;
  margin-top: .75rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--gold), var(--lime-400));
}
html[dir="rtl"] .cta-band h2::after {
  background: linear-gradient(270deg, var(--gold), var(--lime-400));
}

/* ---- P1: unify the keyboard-focus ring on forms onto the global token ---- */
.lead-form input:focus-visible, .lead-form textarea:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 2px;
}
.lead-form input:focus:not(:focus-visible),
.lead-form textarea:focus:not(:focus-visible) { outline: none; }

/* ---- P1: route the dominant hover transitions onto the motion tokens ---- */
.card {
  transition: transform var(--dur-2) var(--ease-overshoot),
              box-shadow var(--dur-2) ease, border-color var(--dur-2) ease;
}
.icon-grid li {
  transition: transform var(--dur-2) var(--ease-overshoot), box-shadow var(--dur-2) ease;
}
.stat .num { transition: transform var(--dur-2) var(--ease-overshoot); }

/* ---- P1: calm the infinite banner gradient to a one-shot settle ---- */
.cta-band, .page-hero {
  animation: gl-gradient-settle 14s var(--ease-standard) 1 both;
}
@keyframes gl-gradient-settle {
  0%   { background-position: 0% 50%; }
  60%  { background-position: 100% 50%; }
  100% { background-position: 50% 50%; }
}

/* ---- P1: layered depth on large media; resting lift on the split picture ---- */
.split .pic, .gallery img, .card-photo {
  box-shadow: 0 16px 36px rgba(11,61,38,.14), 0 3px 10px rgba(11,61,38,.07);
}
.split .pic {
  transition: transform var(--dur-3) var(--ease-standard), box-shadow var(--dur-3) ease;
}
.split:hover .pic {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px rgba(11,61,38,.22), 0 6px 16px rgba(11,61,38,.10);
}

/* ---- P1: balance the stats band's lighting (top glow + matching bottom bloom) ---- */
.stats {
  background-image:
    radial-gradient(820px circle at 50% -40%, rgba(141,198,63,.20), transparent 60%),
    radial-gradient(900px circle at 50% 150%, rgba(43,179,90,.14), transparent 60%);
}

/* ---- P2 (pure-CSS, safe now): even footer columns + anchor hero text ---- */
@media (min-width: 921px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; }
}
.hero h1 { max-width: 18em; }
.hero p.sub { max-width: 34em; }

/* ---- Optional spacing utilities (for the template margin cleanup) ---- */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.section.tight { padding-block: var(--space-lg); }

/* ---- Reduced-motion safety for the new transform-based motion only ---- */
@media (prefers-reduced-motion: reduce) {
  .cta-band, .page-hero { animation: none; }
  .split .pic { transition: none; }
  .split:hover .pic { transform: none; }
}

/* ============================================================
   DYNAMIC LAYER 4 — whole-card linking + motion tempo retune
   ============================================================ */

/* ---- Whole-card click: any card carrying a primary link becomes fully
   clickable. The link's ::after overlay stretches across the whole card
   (the card is the nearest positioned ancestor). Nested links — the social
   icons — are lifted above the overlay so they stay independently clickable. */
.card-link { cursor: pointer; }
/* the overlay must size to the CARD (position:relative), so DON'T position
   .links — a positioned .links would become the containing block and shrink
   the clickable area to just the link strip. Only lift the nested socials. */
.card-link .links a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.card-link .socials { position: relative; z-index: 2; }
/* hovering anywhere on the card lights up its link, signalling it's clickable */
.card-link:hover .links a { color: var(--green-800); }

/* ---- Motion tempo: one calmer heartbeat — shorter, shorter-travel reveal so
   the page settles faster (main.js still staggers + caps the sequence). ---- */
html.js .reveal {
  transform: translateY(18px);
  transition: opacity .55s var(--ease-standard), transform .55s var(--ease-standard);
}

/* ---- Hero Ken Burns: gentler zoom target + tighter duration so the 5s slide
   swap no longer snaps the scale mid-travel. ---- */
.hero-slides .slide.on { animation-duration: 6.4s; }
@keyframes gl-kenburns {
  from { transform: scale(1.001); }
  to   { transform: scale(1.055); }
}

/* ---- Re-assert reduced-motion LAST so the tempo retune never reintroduces
   motion for users who opted out. ---- */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { transform: none; transition: none; }
}

/* ============================================================
   DYNAMIC LAYER 5 — mobile hero sits flush under the floating menu
   The fixed header is ~89px tall on phones. The base hero reserves
   116px AND vertically centers (align-items:center), which dropped the
   tagline to ~147px — a ~58px empty band under the menu. On mobile,
   clear only the header height and top-align the content so the hero
   copy begins right beneath the menu, no dead space above it.
   ============================================================ */
@media (max-width: 920px) {
  .hero {
    padding-top: 100px;
    padding-bottom: 2.25rem;
    min-height: auto;        /* was 76vh — let the hero hug its content so there's
                                no empty image band below the CTAs before the stats */
    align-items: flex-start;
  }
  /* inner pages: same flush-under-the-menu clearance (page-hero isn't
     flex-centered, so only the top padding needs trimming — 132px -> 100px). */
  .page-hero {
    padding-top: 100px;
  }

  /* Tighten the generous desktop spacing on phones — clears the airy dead
     space inside/around sections and the oversized gap before the footer.
     (Desktop keeps 4.5rem sections + 4rem footer gap untouched.) */
  .section { padding-block: 3rem; }
  .section-head { margin-bottom: 1.75rem; }
  .site-footer { margin-top: 0; }
}

/* ============================================================
   PARTNER / EXHIBITOR WALL — a calm, uniform, responsive grid of the
   real companies & organizations that have exhibited at / partnered with
   EgyMedica. Each logo sits on its own white tile, desaturated by default
   and easing to full colour on hover/focus, so the wildly different source
   logos (colours, aspect ratios) read as one premium block.
   ============================================================ */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.logo-wall .logo {
  display: flex; align-items: center; justify-content: center;
  min-height: 128px;
  padding: 1.15rem 1.3rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(10, 58, 64, .05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.logo-wall .logo img {
  max-width: 100%; max-height: 86px; width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .82;
  transition: filter .35s ease, opacity .35s ease;
}
.logo-wall .logo:hover,
.logo-wall .logo:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(10, 58, 64, .12);
  border-color: var(--green-500);
}
.logo-wall .logo:hover img,
.logo-wall .logo:focus-within img {
  filter: grayscale(0);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .logo-wall .logo { transition: box-shadow .25s ease, border-color .25s ease; }
  .logo-wall .logo:hover, .logo-wall .logo:focus-within { transform: none; }
}
@media (max-width: 640px) {
  .logo-wall { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .logo-wall .logo { min-height: 104px; padding: .85rem 1rem; }
  .logo-wall .logo img { max-height: 70px; }
  .logo-wall .logo img { max-height: 46px; }
}

/* ============================================================
   MEDICAL LAYER — distinctly clinical touches added on top of the
   teal theme: ECG heartbeat motif, exhibition-sectors grid with
   inline medical icons, the "dates announced soon" notify band, and
   a past-editions photo gallery with a CSS-only lightbox.
   Inline icons use currentColor so each context sets the teal tone.
   All motion is gated behind prefers-reduced-motion at the end.
   ============================================================ */

/* ---- Inline medical icon base ---- */
.mi { width: 100%; height: 100%; display: block; }

/* ---- ECG / heartbeat line ---- */
.ecg { display: block; width: 100%; height: 46px; color: var(--green-500); overflow: visible; }
.ecg-base { opacity: .22; }
.ecg-pulse { opacity: 0; }
html.js .ecg-pulse {
  opacity: 1;
  stroke-dasharray: 130 870;     /* 130 of pathLength=1000 visible, sweeping */
  stroke-dashoffset: 1000;
  animation: ecg-sweep 3.4s linear infinite;
}
@keyframes ecg-sweep { to { stroke-dashoffset: 0; } }

/* Subtle ECG accent pinned to the bottom of the hero */
.hero-ecg {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  height: 40px;
  opacity: .5;
  color: var(--lime-400);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.hero-ecg .ecg { height: 40px; }
.hero-ecg .ecg-base { opacity: .35; }

/* ---- Exhibition sectors grid ---- */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.1rem;
}
@media (min-width: 921px) { .sector-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sector {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.3rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-1);
  transition: transform var(--dur-2) var(--ease-overshoot), box-shadow var(--dur-2) ease, border-color var(--dur-2) ease;
}
.sector h3 { font-size: 1.06rem; line-height: 1.3; margin: 0; color: var(--green-900); }
.sector-ic {
  flex: 0 0 auto;
  width: 50px; height: 50px;
  display: grid;
  place-items: center;
  padding: 11px;
  border-radius: 14px;
  color: var(--green-600);
  background: linear-gradient(150deg, rgba(22,163,173,.14), rgba(47,159,214,.12));
  border: 1px solid rgba(22,163,173,.22);
  transition: background var(--dur-2) ease, color var(--dur-2) ease, transform var(--dur-2) var(--ease-overshoot);
}
.sector:hover {
  transform: translateY(-5px);
  box-shadow: var(--elev-2);
  border-color: rgba(22,163,173,.5);
}
.sector:hover .sector-ic { color: #fff; background: linear-gradient(150deg, var(--green-600), var(--green-500)); transform: scale(1.05); }

/* ---- Medical card icons (home why-exhibit feature cards) ---- */
.card-ic {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  padding: 12px;
  border-radius: 14px;
  color: var(--green-600);
  background: linear-gradient(150deg, rgba(22,163,173,.14), rgba(47,159,214,.12));
  border: 1px solid rgba(22,163,173,.22);
  margin-bottom: .3rem;
  transition: background var(--dur-2) ease, color var(--dur-2) ease;
}
.card:hover .card-ic { color: #fff; background: linear-gradient(150deg, var(--green-600), var(--green-500)); }

/* ---- "Dates announced soon" notify band ---- */
.notify-card {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 2.4rem;
  align-items: center;
  padding: 2.4rem;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(680px circle at 100% 0%, rgba(47,159,214,.12), transparent 60%),
    linear-gradient(150deg, #ffffff, var(--mist));
  border: 1px solid var(--line);
  box-shadow: var(--elev-2);
}
.notify-copy .kicker { color: var(--green-600); }
.notify-copy h2 { color: var(--green-900); }
.notify-copy p { color: var(--ink-soft); margin-top: .6rem; max-width: 32em; }
.notify-ecg { margin-top: 1.2rem; color: var(--green-500); }
.notify-ecg .ecg { height: 38px; }

.notify-form .notify-row {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}
.notify-form .notify-row input { flex: 1 1 200px; }
.notify-form .notify-row button { flex: 0 0 auto; white-space: nowrap; }
.notify-form button .mi { width: 18px; height: 18px; }
.notify-form .notify-cta { display: inline-flex; align-items: center; gap: .5rem; }
.notify-form label.consent { margin-top: .2rem; }

@media (max-width: 820px) {
  .notify-card { grid-template-columns: 1fr; gap: 1.6rem; padding: 1.8rem; }
}

/* ---- Past-editions gallery + CSS-only lightbox ---- */
.pe-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 150px;
  gap: .8rem;
  grid-auto-flow: dense;
}
@media (min-width: 680px) {
  .pe-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 178px; }
  /* featured tiles create an editorial mosaic; with 10 photos this tiles gap-free */
  .pe-item:nth-child(1), .pe-item:nth-child(6) { grid-column: span 2; grid-row: span 2; }
}
.pe-item {
  display: block;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--elev-2);
  background: var(--mist);
}
.pe-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease-standard); }
.pe-item::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10,58,64,.45));
  opacity: 0;
  transition: opacity var(--dur-2) ease;
}
.pe-item:hover img, .pe-item:focus-visible img { transform: scale(1.06); }
.pe-item:hover::after, .pe-item:focus-visible::after { opacity: 1; }

.pe-box {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 4vh 4vw;
  background: rgba(8,38,42,.86);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.pe-box:target { opacity: 1; visibility: visible; }
.pe-box img {
  max-width: min(960px, 94vw);
  max-height: 80vh;
  width: auto; height: auto;
  border-radius: 12px;
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
.pe-cap { color: #fff; font-weight: 600; text-align: center; max-width: 40em; }
.pe-dismiss { position: absolute; inset: 0; cursor: zoom-out; }     /* click backdrop to close */
.pe-close {
  position: absolute;
  top: 18px; inset-inline-end: 18px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 26px; line-height: 1;
  z-index: 1;
}
.pe-close:hover { background: rgba(255,255,255,.28); color: #fff; }

/* ---- Reduced-motion: drop the new transform/sweep motion, keep the visuals ---- */
@media (prefers-reduced-motion: reduce) {
  html.js .ecg-pulse { animation: none; opacity: 0; }
  .ecg-base { opacity: .4; }
  .hero-ecg .ecg-base { opacity: .45; }
  .sector { transition: box-shadow var(--dur-2) ease, border-color var(--dur-2) ease; }
  .sector:hover { transform: none; }
  .sector:hover .sector-ic { transform: none; }
  .pe-item img { transition: none; }
  .pe-item:hover img, .pe-item:focus-visible img { transform: none; }
}

/* --- Ministry of Health patronage band --- */
.patronage{padding:1rem 0;background:#f2fafb;border-top:1px solid #d6edef;border-bottom:1px solid #d6edef}
.patronage-inner{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;text-align:center}
.patronage-logo{width:94px;height:94px;object-fit:contain;flex:0 0 auto}
.patronage-text{margin:0;display:flex;flex-direction:column;line-height:1.3}
.patronage-kicker{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green-700);font-weight:700}
.patronage-text strong{font-size:1.08rem;color:var(--green-900);font-weight:700}
[dir="rtl"] .patronage-kicker{letter-spacing:.04em}
@media (max-width:520px){.patronage-logo{width:74px;height:74px}.patronage-text strong{font-size:1rem}}