/* ==========================================================================
   Ittihad Society — "Stone & Thread" design system  (v2)
   Arches of the Nablus old city give the shape language; tatreez cross-stitch
   in thread-red is the only ornament. Text never sits on a photo without a
   solid or guaranteed-dark surface, so every pairing below meets WCAG AA.
   ========================================================================== */

:root{
  /* palette */
  --ink:#17241C;        /* body text            16.1:1 on white */
  --ink-2:#4A564E;      /* secondary text        7.4:1 on white, 6.6:1 on sage */
  --olive-900:#15291F;
  --olive:#1E3B2C;      /* dark surfaces */
  --olive-600:#2F5D46;  /* primary actions, white text 7.6:1 */
  --olive-100:#DCE6DD;
  --sage:#EDF1EA;       /* alternate section surface */
  --paper:#FFFFFF;
  --line:#D5DDD3;
  --thread:#A3242F;     /* tatreez red: donate + stitching, white text 7.0:1 */
  --thread-700:#861B25;
  --gold:#D9B35B;       /* only on dark surfaces, 7.9:1 on olive */
  /* text on dark surfaces */
  --on-dark:#F3F6F1;
  --on-dark-2:#C3CFC6;  /* 8.3:1 on olive */

  --bg:var(--paper); --surface:var(--paper); --text:var(--ink); --muted:var(--ink-2);
  --primary:var(--olive-600);

  --f-display:"Reem Kufi","IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-text:"IBM Plex Sans Arabic",system-ui,"Segoe UI",Tahoma,sans-serif;
  --font:var(--f-text); /* legacy alias */

  --wrap:1240px;
  --gutter:clamp(1.1rem,4vw,2.5rem);
  --sec:clamp(4rem,9vw,7.5rem);
  --r-sm:6px; --r:14px; --r-lg:22px;
  --lift:0 1px 0 rgba(23,36,28,.04),0 18px 40px -24px rgba(23,36,28,.35);
  --head-h:78px;
  color-scheme:light;
  /* aliases for v1 token names still referenced by older markup or admin content */
  --olive-700:var(--olive-600); --olive-500:#3E7A5C;
  --stone-50:var(--paper); --stone-100:var(--sage); --stone-300:var(--line);
  --pomegranate-700:var(--thread-700); --pomegranate-500:var(--thread); --pomegranate-100:#F8E7E8;
  --saffron-600:#7A5A12; --saffron-500:var(--gold); --saffron-100:#F6EDD6;
  --ink-60:var(--ink-2); --r-md:var(--r); --r-pill:999px; --shadow:var(--lift);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head-h) + 12px)}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.75 var(--f-text);
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px)}
img,video,svg{max-width:100%;display:block}
img{height:auto}
a{color:var(--olive-600);text-underline-offset:.2em}
a:hover{color:var(--olive)}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.25;color:inherit;margin:0 0 .5em;letter-spacing:0}
h1{font-size:clamp(2.3rem,5.2vw,4.1rem);line-height:1.15}
h2{font-size:clamp(1.75rem,3.3vw,2.6rem)}
h3{font-size:1.2rem;font-family:var(--f-text);font-weight:600;line-height:1.45}
p{margin:0 0 1em;max-width:68ch}
.lead{font-size:1.2rem;color:var(--ink)}
::selection{background:var(--olive-600);color:#fff}
:focus-visible{outline:3px solid var(--thread);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sr-only:focus{position:fixed;inset-block-start:10px;inset-inline-start:10px;width:auto;height:auto;clip:auto;z-index:100;
  background:var(--olive);color:#fff;padding:.6rem 1rem;border-radius:var(--r-sm)}
.wrap{width:min(100% - 2*var(--gutter),var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - 2*var(--gutter),760px);margin-inline:auto}
[data-reveal]{opacity:1}  /* content is never hidden waiting for JS */

/* ---------- arch: the Nablus stone arch as a frame ---------- */
.arch{margin:0;position:relative;overflow:hidden;border-radius:100vmax 100vmax var(--r) var(--r);
  background:var(--olive-100);isolation:isolate}
.arch img,.arch video{width:100%;height:100%;object-fit:cover}

/* ---------- stitch: tatreez band ---------- */
.stitch{height:28px;background:url("/assets/img/tatreez-band.svg") repeat-x center/auto 28px;opacity:.75}
.stitch--gold{background-image:url("/assets/img/tatreez-band-gold.svg");background-color:var(--olive-900);height:48px;opacity:1}
.rule-tatreez{height:30px;margin:2rem 0;background:url("/assets/img/tatreez-band.svg") repeat-x center/auto 30px;border:0}

/* ---------- buttons ---------- */
.btn{--h:50px;display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:var(--h);
  padding:0 1.5em;border-radius:var(--r-sm);border:1.5px solid transparent;cursor:pointer;
  font:600 1rem/1.2 var(--f-text);text-decoration:none;white-space:nowrap;
  transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}
.btn svg{width:18px;height:18px}
.btn-sm{--h:40px;padding:0 1.05em;font-size:.94rem}
.btn-lg{--h:56px;padding:0 1.8em;font-size:1.06rem}
.btn-primary{background:var(--olive-600);color:#fff}
.btn-primary:hover{background:var(--olive);color:#fff}
.btn-donate{background:var(--thread);color:#fff}
.btn-donate:hover{background:var(--thread-700);color:#fff}
.btn-outline{background:transparent;color:var(--olive);border-color:currentColor}
.btn-outline:hover{background:var(--olive);border-color:var(--olive);color:#fff}
.btn-gold{background:var(--gold);color:var(--olive-900)}
.btn-gold:hover{background:#E6C679;color:var(--olive-900)}
.btn-on-dark{background:#fff;color:var(--olive)}
.btn-on-dark:hover{background:var(--sage);color:var(--olive)}
.btn-ghost-light,.btn-on-red{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-ghost-light:hover,.btn-on-red:hover{background:#fff;color:var(--olive);border-color:#fff}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
.site-head.is-stuck{border-bottom-color:var(--line);box-shadow:0 10px 30px -24px rgba(23,36,28,.45)}
.site-head__inner{display:flex;align-items:center;gap:1.25rem;min-height:var(--head-h)}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--ink);flex-shrink:0}
.brand__mark img{width:48px;height:48px}
.brand__text{display:flex;flex-direction:column;line-height:1.25}
.brand__ar{font:700 1.02rem/1.3 var(--f-display);color:var(--olive)}
.brand__en{font-size:.78rem;color:var(--ink-2)}
.nav{display:flex;align-items:center;gap:.15rem;margin-inline-start:auto}
.nav>a,.navdrop__btn{position:relative;display:inline-flex;align-items:center;gap:.3em;padding:.55rem .75rem;
  color:var(--ink);text-decoration:none;font:500 .97rem/1.2 var(--f-text);background:none;border:0;cursor:pointer;border-radius:var(--r-sm)}
.nav>a:hover,.navdrop__btn:hover{color:var(--olive-600);background:var(--sage)}
.nav>a[aria-current="page"]{color:var(--olive)}
.nav>a[aria-current="page"]::after{content:"";position:absolute;inset-inline:.75rem;bottom:.2rem;height:2px;background:var(--thread)}
.navdrop{position:relative}
.navdrop__btn svg{width:15px;height:15px;transition:transform .2s}
.navdrop.is-open .navdrop__btn svg{transform:rotate(180deg)}
.navdrop__panel{position:absolute;top:calc(100% + 8px);inset-inline-end:0;width:320px;padding:.5rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--lift);
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s,transform .18s,visibility .18s}
.navdrop.is-open .navdrop__panel{opacity:1;visibility:visible;transform:none}
.navdrop__item{display:flex;align-items:center;gap:.75rem;padding:.7rem;border-radius:10px;text-decoration:none;color:var(--ink)}
.navdrop__item:hover{background:var(--sage);color:var(--ink)}
.navdrop__ico{flex:0 0 38px;height:38px;display:grid;place-items:center;border-radius:10px;background:var(--olive-100);color:var(--olive)}
.navdrop__ico svg{width:20px;height:20px}
.navdrop__txt{flex:1;display:flex;flex-direction:column;line-height:1.35}
.navdrop__txt strong{font-weight:600;font-size:.95rem}
.navdrop__txt em{font-style:normal;font-size:.82rem;color:var(--ink-2)}
.navdrop__ext svg{width:15px;height:15px;color:var(--ink-2)}
.head-actions{display:flex;align-items:center;gap:.6rem}
.lang-switch{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.lang-switch a{padding:.45rem .7rem;font-size:.85rem;text-decoration:none;color:var(--ink-2)}
.lang-switch a[aria-current="true"]{background:var(--olive);color:#fff}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;cursor:pointer;place-items:center}
.burger span,.burger span::before,.burger span::after{display:block;width:18px;height:2px;background:var(--olive);position:relative;transition:transform .2s,opacity .2s}
.burger span::before,.burger span::after{content:"";position:absolute;inset-inline-start:0}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1320px){
  .brand__en{display:none}
  .burger{display:grid}
  .nav{position:fixed;inset:var(--head-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;margin:0;
    max-height:calc(100dvh - var(--head-h));overflow:auto;background:#fff;padding:.75rem var(--gutter) 1.5rem;
    border-bottom:1px solid var(--line);box-shadow:0 30px 40px -30px rgba(23,36,28,.4);
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s}
  .nav.is-open{opacity:1;visibility:visible;transform:none}
  .nav>a,.navdrop__btn{padding:.95rem .25rem;font-size:1.06rem;border-bottom:1px solid var(--line);border-radius:0;width:100%;justify-content:space-between}
  .nav>a[aria-current="page"]::after{display:none}
  .navdrop__panel{position:static;width:auto;box-shadow:none;border:0;padding:.25rem 0 .5rem;display:none;opacity:1;visibility:visible;transform:none}
  .navdrop.is-open .navdrop__panel{display:block}
}
@media (max-width:560px){
  .head-actions .btn-donate{display:none}
  .brand__ar{font-size:.92rem;max-width:15ch}
  .lang-switch a{padding:.4rem .55rem}
}

/* ---------- hero (home): text on paper, media in an arch ---------- */
.hero{position:relative;background:linear-gradient(180deg,var(--sage) 0%,var(--paper) 78%);overflow:hidden}
.hero__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:center;
  padding-block:clamp(2.5rem,6vw,5rem) clamp(2.5rem,6vw,4.5rem)}
.hero__eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-weight:500;color:var(--thread);margin-bottom:1.25rem}
.hero__eyebrow::before{content:"";width:28px;height:2px;background:currentColor}
.hero h1{color:var(--olive);margin-bottom:1.25rem}
.hero__ar{display:block}
.hero__place{display:block;font:500 clamp(1.1rem,2vw,1.4rem)/1.5 var(--f-text);color:var(--ink-2);margin-top:.6rem}
.hero__lead{font-size:clamp(1.08rem,1.5vw,1.22rem);color:var(--ink-2);max-width:52ch;margin-bottom:2rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem}
.hero__link{display:inline-block;margin-top:1.5rem;color:var(--olive);font-weight:600}
.hero__visual{position:relative;padding-inline-start:clamp(1rem,4vw,3rem);padding-bottom:2.5rem}
.hero__media{aspect-ratio:4/5;max-height:640px;width:100%;box-shadow:var(--lift)}
.hero__media .hero__bg{position:absolute;inset:0}
.hero__media picture{display:contents}
.hero__bg-fallback{position:absolute;inset:0;opacity:0}
.hero.is-image .hero__bg,.hero.no-video .hero__bg{display:none}
.hero.is-image .hero__bg-fallback,.hero.no-video .hero__bg-fallback{opacity:1}
.hero__inset{position:absolute;inset-inline-start:0;bottom:0;width:40%;aspect-ratio:3/4;border:6px solid var(--paper);box-shadow:var(--lift)}
.hero__seal{position:absolute;inset-inline-end:-.5rem;top:12%;display:flex;align-items:center;gap:.7rem;
  background:var(--paper);padding:.7rem 1.1rem .7rem .8rem;border-radius:var(--r);box-shadow:var(--lift)}
.hero__seal img{width:52px;height:52px}
.hero__seal span{display:flex;flex-direction:column;font-size:.82rem;color:var(--ink-2);line-height:1.3}
.hero__seal strong{display:block;font:700 1.5rem/1 var(--f-display);color:var(--thread)}
.hero__since,.hero__video,.hero__scrim{display:none}
@media (max-width:900px){
  .hero__inner{grid-template-columns:1fr}
  .hero__visual{max-width:520px;margin-inline:auto;width:100%}
  .hero__media{aspect-ratio:1/1}
}

/* ---------- hero--photo (hospital, inner banners): photo + guaranteed scrim ---------- */
.hero--photo{background:var(--olive-900);color:var(--on-dark);min-height:clamp(520px,72vh,720px);display:flex;align-items:flex-end}
.hero--photo>.hero__media{position:absolute;inset:0;aspect-ratio:auto;max-height:none;box-shadow:none;border-radius:0}
.hero--photo>.hero__media img,.hero--photo>.hero__media video{width:100%;height:100%;object-fit:cover}
.hero--photo>.hero__scrim{display:block;position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(15,30,22,.94) 0%,rgba(15,30,22,.78) 45%,rgba(15,30,22,.35) 100%)}
.hero--photo .hero__inner{position:relative;grid-template-columns:1fr;padding-block:6rem 3.5rem}
.hero--photo .hero__text{max-width:760px}
.hero--photo h1{color:#fff}
.hero--photo .hero__eyebrow{color:var(--gold)}
.hero--photo .hero__place{color:var(--on-dark-2)}
.hero--photo .hero__lead{color:var(--on-dark)}
.hero--photo .btn-outline{color:#fff;border-color:rgba(255,255,255,.75)}
.hero--photo .btn-outline:hover{background:#fff;color:var(--olive);border-color:#fff}
.hero__back{margin-top:1.75rem}
.hero__back a{color:var(--on-dark-2)}
.hero__back a:hover{color:#fff}

/* ---------- quick access ---------- */
.quickbar{background:var(--paper);border-bottom:1px solid var(--line)}
.quickbar__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.quick{position:relative;display:flex;align-items:center;gap:.9rem;padding:1.4rem 1.1rem;text-decoration:none;color:var(--ink);
  border-inline-start:1px solid var(--line);transition:background-color .2s}
.quick:first-child{border-inline-start:0}
.quick:hover{background:var(--sage);color:var(--ink)}
.quick__ico{flex:0 0 46px;height:46px;display:grid;place-items:center;border-radius:50%;background:var(--olive-100);color:var(--olive)}
.quick__ico svg{width:22px;height:22px}
.quick__txt{display:flex;flex-direction:column;line-height:1.35}
.quick__txt strong{font-weight:600}
.quick__txt em{font-style:normal;font-size:.86rem;color:var(--ink-2)}
.quick__tag{position:absolute;top:.6rem;inset-inline-end:.7rem;font-size:.72rem;font-weight:600;color:var(--thread);
  background:#F8E7E8;padding:.1rem .5rem;border-radius:99px}
@media (max-width:900px){.quickbar__grid{grid-template-columns:repeat(2,1fr)}
  .quick:nth-child(3){border-inline-start:0}.quick:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:480px){.quick{padding:1.1rem .6rem;gap:.6rem}.quick__ico{flex-basis:38px;height:38px}.quick__txt em{display:none}}

/* ---------- sections ---------- */
.section{padding-block:var(--sec);background:var(--paper)}
.section--paper,.section--stone{background:var(--paper)}
.section--sage,.section--stone+.section--stone{background:var(--sage)}
.section--tight{padding-block:clamp(2.5rem,5vw,4rem)}
.section--ink,.section--olive{background:var(--olive);color:var(--on-dark)}
/* every text element inside a dark section inherits the light palette */
.section--ink :is(h1,h2,h3,h4,p,li,span,strong,em,label,.eyebrow),
.section--olive :is(h1,h2,h3,h4,p,li,span,strong,em,label,.eyebrow){color:inherit}
.section--ink p,.section--olive p{color:var(--on-dark-2)}
.section--ink a:not(.btn),.section--olive a:not(.btn){color:var(--gold)}
.sec-head{max-width:720px;margin-bottom:clamp(2rem,4vw,3.25rem)}
.sec-head p{color:var(--ink-2);font-size:1.1rem}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head--center p{margin-inline:auto}
.sec-head--split{max-width:none;display:flex;justify-content:space-between;align-items:end;gap:1.5rem;flex-wrap:wrap}
.sec-head--split h2{margin:0}
.sec-head--split p{margin:0;max-width:44ch}
.eyebrow{display:inline-block;font-weight:600;font-size:.95rem;color:var(--thread);margin-bottom:.6rem}
.grid{display:grid;gap:1.5rem}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.grid-2{grid-template-columns:1fr}}
.icon-badge{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--olive-100);color:var(--olive)}
.icon-badge svg{width:26px;height:26px}
.icon-badge.is-red{background:#F8E7E8;color:var(--thread)}
.icon-badge.is-gold{background:#F6EDD6;color:#7A5A12}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:.8fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.about__photo{aspect-ratio:3/4;box-shadow:var(--lift)}
.about__text h2{color:var(--olive)}
.values{list-style:none;padding:0;margin:2rem 0;display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1.5rem}
.value{display:flex;align-items:center;gap:.75rem;font-weight:600;color:var(--ink);line-height:1.4}
.value__ico{flex:0 0 42px;height:42px;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--thread);color:var(--thread)}
.value__ico svg{width:20px;height:20px}
.value h3{margin:0}
@media (max-width:860px){.about{grid-template-columns:1fr}.about__photo{max-width:420px;aspect-ratio:4/5}}
@media (max-width:480px){.values{grid-template-columns:1fr}}

/* ---------- stats ---------- */
.stats-band{background:var(--paper);border-block:1px solid var(--line)}
.stats{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:clamp(1.75rem,4vw,2.75rem) 1.25rem;border-inline-start:1px solid var(--line);display:flex;flex-direction:column;gap:.35rem}
.stat:first-child{border-inline-start:0}
.stat__num{font:700 clamp(2.4rem,4.6vw,3.6rem)/1 var(--f-display);color:var(--olive);font-variant-numeric:tabular-nums}
.stat__lbl{color:var(--ink-2);font-size:.98rem;line-height:1.45}
.section--olive .stats{border:0}
.section--olive .stat{border-color:rgba(255,255,255,.15)}
.section--olive .stat__num{color:var(--gold)}
.section--olive .stat__lbl{color:var(--on-dark-2)}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr}.stat:nth-child(3){border-inline-start:0}.stat:nth-child(n+3){border-top:1px solid var(--line)}}

/* ---------- institutions ---------- */
.inst-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.inst{position:relative;background:var(--paper);border-radius:var(--r);border:1px solid var(--line);transition:border-color .2s,box-shadow .25s}
.inst:hover{border-color:#BCC8BB;box-shadow:var(--lift)}
.inst__inner{position:relative;height:100%}
.inst__face--front{height:100%;display:flex;flex-direction:column}
.inst__body{padding:1.5rem 1.5rem 1.25rem;display:flex;flex-direction:column;flex:1}
.inst__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem}
.inst__badge{width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:var(--olive-100);color:var(--olive)}
.inst--red .inst__badge{background:#F8E7E8;color:var(--thread)}
.inst--gold .inst__badge{background:#F6EDD6;color:#7A5A12}
.inst__badge svg{width:26px;height:26px}
.inst__badge--photo{overflow:hidden}.inst__badge--photo img{width:100%;height:100%;object-fit:cover}
.inst__est{font-size:.85rem;color:var(--ink-2)}
.inst h3{font-family:var(--f-text);font-weight:700;font-size:1.15rem;margin-bottom:.4rem}
.inst__link{color:var(--ink);text-decoration:none}
.inst__link:hover{color:var(--olive-600)}
.inst__body>p{color:var(--ink-2);font-size:.97rem;margin-bottom:1.25rem}
.inst__open{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;padding:.4rem 0;
  background:none;border:0;cursor:pointer;color:var(--olive-600);font:600 .95rem var(--f-text)}
.inst__open svg{width:18px;height:18px;transition:transform .2s}
.inst.is-open .inst__open svg{transform:rotate(45deg)}
.inst__face--back{position:absolute;inset:0;z-index:2;padding:1.5rem;border-radius:inherit;background:var(--olive);color:var(--on-dark);
  display:flex;flex-direction:column;overflow:auto;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .22s,transform .22s,visibility .22s}
.inst.is-open .inst__face--back{opacity:1;visibility:visible;transform:none}
.inst__face--back h3{color:#fff;padding-inline-end:2rem}
.inst__meta{color:var(--gold);font-size:.9rem;margin-bottom:.6rem}
.inst__detail{color:var(--on-dark-2);font-size:.96rem}
.inst__more{margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;color:#fff;font-weight:600}
.inst__more:hover{color:var(--gold)}
.inst__more svg{width:18px;height:18px;fill:none;stroke:currentColor}
[dir="rtl"] .inst__more svg,[dir="rtl"] .news-card__more svg{transform:scaleX(-1)}
.inst__close{position:absolute;top:.75rem;inset-inline-end:.75rem;width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;font-size:1.4rem;line-height:1}
.inst__close:hover{background:rgba(255,255,255,.22)}
.inst__corner{display:none}
/* the hospital leads the grid */
.inst--lead{grid-column:1/-1}
.inst--lead .inst__face--front{flex-direction:row}
.inst--lead .inst__photo{margin:0;flex:0 0 52%;min-height:300px;border-radius:var(--r) 0 0 var(--r);overflow:hidden}
[dir="rtl"] .inst--lead .inst__photo{border-radius:0 var(--r) var(--r) 0}
.inst--lead .inst__photo img{width:100%;height:100%;object-fit:cover}
.inst--lead .inst__body{padding:clamp(1.5rem,4vw,3rem);justify-content:center}
.inst--lead h3{font-family:var(--f-display);font-size:clamp(1.5rem,2.6vw,2rem)}
.inst--lead .inst__body>p{font-size:1.06rem}
@media (max-width:980px){.inst-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.inst-grid{grid-template-columns:1fr}
  .inst--lead .inst__face--front{flex-direction:column}
  .inst--lead .inst__photo,[dir="rtl"] .inst--lead .inst__photo{flex-basis:auto;min-height:220px;border-radius:var(--r) var(--r) 0 0}}

/* ---------- timeline: horizontal story ---------- */
.tl{list-style:none;margin:0;padding:.5rem max(var(--gutter),calc((100vw - var(--wrap))/2)) 1.5rem;scroll-padding-inline:max(var(--gutter),calc((100vw - var(--wrap))/2));display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(250px,300px);gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;
  scrollbar-color:var(--gold) transparent;position:relative}
.tl:focus-visible{outline-offset:-3px}
.tl__item{scroll-snap-align:start;position:relative;padding:0 1.5rem 0 0;display:flex;flex-direction:column}
[dir="rtl"] .tl__item{padding:0 0 0 1.5rem}
.tl__year{font:700 clamp(2rem,3.5vw,2.6rem)/1 var(--f-display);color:var(--gold)}
.tl__dot{position:relative;display:block;height:22px;margin:1rem 0}
.tl__dot::before{content:"";position:absolute;inset-inline:0 -1.5rem;top:50%;height:1px;background:rgba(255,255,255,.28)}
.tl__dot::after{content:"";position:absolute;inset-inline-start:0;top:50%;width:13px;height:13px;margin-top:-6.5px;
  transform:rotate(45deg);background:var(--thread);box-shadow:0 0 0 4px var(--olive)}
.tl__text{color:var(--on-dark);font-size:1rem;line-height:1.65;margin:0}
.section--ink .tl__text{color:var(--on-dark)}
.section--ink .tl__year{color:var(--gold)}

/* ---------- programmes ---------- */
.progs-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.progs{border-top:1px solid var(--line)}
.prog{display:flex;align-items:center;gap:1.1rem;padding:1.35rem .25rem;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);
  transition:background-color .2s,padding .2s}
.prog:hover{background:var(--sage);padding-inline:1rem;color:var(--ink)}
.prog__ico{flex:0 0 50px;height:50px;display:grid;place-items:center;border-radius:50%;background:#F8E7E8;color:var(--thread)}
.prog__ico svg{width:24px;height:24px}
.prog__name{flex:1;font:700 1.12rem/1.45 var(--f-text)}
.prog__go{font-weight:600;color:var(--thread);white-space:nowrap}
.prog h3{margin:0}
@media (max-width:860px){.progs-wrap{grid-template-columns:1fr}}

/* ---------- news ---------- */
.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.news-card{display:flex;flex-direction:column;background:var(--paper);border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.news-card__media{position:relative;display:block;aspect-ratio:16/10;background:var(--olive-100);overflow:hidden}
.news-card__media img,.news-card__media video{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.news-card:hover .news-card__media img{transform:scale(1.03)}
.news-card__tag{position:absolute;top:.8rem;inset-inline-start:.8rem;background:var(--paper);color:var(--olive);font-size:.78rem;font-weight:600;padding:.2rem .65rem;border-radius:99px}
.news-card__play{position:absolute;inset:0;display:grid;place-items:center}
.news-card__play span{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.95);color:var(--thread);font-size:1.2rem;padding-inline-start:4px}
.news-card__body{padding:1.35rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
.news-card__date{font-size:.85rem;color:var(--ink-2);margin-bottom:.4rem}
.news-card h3{font-weight:700;font-size:1.18rem;margin-bottom:.5rem}
.news-card h3 a{color:var(--ink);text-decoration:none}
.news-card h3 a:hover{color:var(--olive-600)}
.news-card p{color:var(--ink-2);font-size:.96rem;margin:0}
.news-card__more{margin-top:auto;padding-top:1rem;display:inline-flex;align-items:center;gap:.4rem;font-weight:600;text-decoration:none}
.news-card__more svg{width:18px;height:18px;fill:none;stroke:currentColor}
.news-card--feature{grid-column:span 2;grid-row:span 2}
.news-card--feature .news-card__media{aspect-ratio:16/9;flex:1}
.news-card--feature h3{font-size:clamp(1.4rem,2.4vw,1.85rem)}
@media (max-width:980px){.news-grid{grid-template-columns:1fr 1fr}.news-card--feature{grid-column:1/-1;grid-row:auto}}
@media (max-width:640px){.news-grid{grid-template-columns:1fr}}

/* ---------- donate band ---------- */
.donate-band{background:var(--olive);color:var(--on-dark);padding-block:var(--sec);position:relative;overflow:hidden}
.donate-band__inner{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.donate-band h2{color:#fff;font-size:clamp(2rem,4vw,3.1rem)}
.donate-band p{color:var(--on-dark-2);font-size:1.15rem;max-width:50ch}
.band-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.donate-band__photo{aspect-ratio:4/5;max-width:420px;justify-self:end;width:100%;border:6px solid rgba(255,255,255,.08)}
/* the legacy inline donate band used inside other pages */
.section .donate-band{border-radius:var(--r-lg);padding:clamp(2rem,5vw,3.5rem)}
@media (max-width:860px){.donate-band__inner{grid-template-columns:1fr}.donate-band__photo{justify-self:start;max-width:340px}}

/* ---------- inner page head ---------- */
.page-head{background:var(--olive);color:var(--on-dark);padding-block:clamp(3.5rem,8vw,6rem) clamp(2.5rem,6vw,4rem);position:relative}
.page-head::after{content:"";position:absolute;inset-inline:0;bottom:0;height:34px;
  background:url("/assets/img/tatreez-band-gold.svg") repeat-x center/auto 34px;opacity:.55}
.page-head h1{color:#fff;margin-bottom:.4rem}
.page-head p,.page-head__lead{color:var(--on-dark-2);font-size:1.15rem;max-width:60ch}
.page-head .eyebrow{color:var(--gold)}
.page-head--slim{padding-block:clamp(2.5rem,5vw,3.5rem) clamp(2.5rem,5vw,3.5rem)}
.page-head--slim h1{font-size:clamp(1.8rem,3.6vw,2.8rem)}
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.9rem;color:var(--on-dark-2);margin-bottom:1rem}
.crumbs a{color:var(--on-dark-2)}.crumbs a:hover{color:#fff}

/* ---------- placeholder pages ---------- */
.wip{text-align:center;padding:clamp(2rem,6vw,4rem) 1rem;border:1px dashed #B9C5B8;border-radius:var(--r-lg);background:var(--sage)}
.wip__ico{font-size:2.4rem;margin-bottom:.5rem}
.wip h2{color:var(--olive)}
.wip p{margin-inline:auto;color:var(--ink-2)}

/* ---------- departments / doctors ---------- */
.dept-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.dept{display:flex;align-items:center;gap:.85rem;padding:1.1rem 1.2rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);font-weight:600;color:var(--ink)}
.dept__ico{flex:0 0 44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--olive-100);color:var(--olive);transition:background-color .2s,color .2s}
.dept__ico svg{width:22px;height:22px}
.dept:hover .dept__ico{background:var(--olive-600);color:#fff}
.doc-note{background:#FBF4E4;border-inline-start:4px solid #B58A2C;color:#4A3A12;padding:1rem 1.25rem;border-radius:var(--r-sm);margin-bottom:2rem;font-size:.95rem}
/* The roster is a reading surface, not a gallery.
   It began as a narrow 220px column with 0.83rem credentials, which was too
   small to read — especially for an older visitor looking up a doctor before a
   hospital visit. It is now a wide two-column card: the portrait sits beside the
   text instead of above it, so every line has room, and the type is a full
   reading size. Text uses the neutral ink colours rather than brand olive,
   because this is information to be read, not a heading to be admired. */
.doc-grid{display:grid;grid-template-columns:1fr;gap:1.15rem;align-items:start}
.doc{display:flex;gap:1.15rem;text-align:start;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);padding:1.1rem;
  box-shadow:0 1px 2px rgba(21,41,31,.04)}
.doc__photo{flex:0 0 128px;aspect-ratio:4/5;align-self:flex-start;
  border-radius:14px;overflow:hidden;background:var(--olive-100);
  display:grid;place-items:center;margin:0}
.doc__photo img{width:100%;height:100%;object-fit:cover;display:block}
.doc__ph svg{width:44px;height:44px;color:var(--olive-600)}
.doc__head{display:grid;gap:.1rem;margin-bottom:.45rem}
.doc h3{font-weight:700;margin:0;font-size:1.16rem;line-height:1.35;color:var(--ink)}
.doc__spec{color:var(--olive-700);font-size:.98rem;font-weight:600;line-height:1.6;margin:0}

/* ---------- appointment + forms ---------- */
.appt{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.appt__intro h2{color:var(--olive)}
.appt__intro p{color:var(--ink-2)}
.appt__points{list-style:none;padding:0;margin:1.5rem 0 2rem;display:grid;gap:.75rem}
.appt__points li{display:flex;align-items:center;gap:.7rem;font-weight:500}
.appt__points li::before{content:"";flex:0 0 10px;height:10px;transform:rotate(45deg);background:var(--thread)}
.appt__form{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.5rem,4vw,2.5rem);box-shadow:var(--lift)}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field label{font-weight:600;font-size:.95rem;color:var(--ink)}
.field label span{color:var(--thread)}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:.7rem .9rem;border:1.5px solid #C4CEC3;border-radius:var(--r-sm);
  background:#fff;color:var(--ink);font:400 1rem/1.5 var(--f-text);transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--olive-600);box-shadow:0 0 0 4px rgba(47,93,70,.15)}
.field-note{font-size:.88rem;color:var(--ink-2);margin:.9rem 0 0}
.appt__form .btn{width:100%}
.form-msg{padding:.9rem 1.1rem;border-radius:var(--r-sm);font-weight:500;margin-bottom:1.25rem}
.form-msg--ok{background:#E3F1E7;color:#17482C;border:1px solid #A9CFB5}
.form-msg--err{background:#FBE9EA;color:#7A1720;border:1px solid #EBB9BD}
@media (max-width:860px){.appt{grid-template-columns:1fr}}
@media (max-width:480px){.field-row{grid-template-columns:1fr}}

/* ---------- careers ---------- */
.howto{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem;counter-reset:s}
.howto__step{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.75rem 1.5rem}
.howto__n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--olive);color:#fff;font:700 1.2rem var(--f-display);margin-bottom:1rem}
.howto__step h3{font-weight:700}
.howto__step p{color:var(--ink-2);font-size:.97rem}
.howto__btn{margin-top:.5rem}
.apply-cta{margin-top:2.5rem;padding:clamp(1.5rem,4vw,2.5rem);border-radius:var(--r-lg);background:var(--sage);text-align:center}
.apply-cta p{margin-inline:auto;color:var(--ink-2)}

/* ---------- institution page ---------- */
.stat-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .9rem;border-radius:99px;background:var(--olive-100);color:var(--olive);font-weight:600;font-size:.92rem}

/* ---------- article ---------- */
.post-media{margin:0 0 2rem;border-radius:var(--r-lg);overflow:hidden}
.post-media img,.post-media video{width:100%}
.post-lead{font-size:1.25rem;color:var(--ink);font-weight:500}
.post-body{font-size:1.1rem;line-height:1.9}
.post-body p{max-width:none}
.post-body img{border-radius:var(--r)}
.post-foot{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.post-share{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}

/* ---------- footer ---------- */
.site-foot{background:var(--olive-900);color:var(--on-dark-2);padding:clamp(3rem,7vw,5rem) 0 1.5rem}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1.25fr 1fr 1.15fr;gap:clamp(1.5rem,2.5vw,2.5rem)}
.foot-brand{display:flex;align-items:center;gap:.9rem;margin-bottom:1.1rem}
.foot-brand img{width:56px;height:56px;background:#fff;border-radius:50%;padding:4px}
.foot-brand__name{display:block;color:#fff;font:700 1.05rem/1.35 var(--f-display)}
.foot-brand__sub{font-size:.85rem;color:var(--on-dark-2)}
.foot-about{font-size:.95rem;max-width:36ch;color:var(--on-dark-2)}
.site-foot h3{color:var(--gold);font:700 1rem var(--f-display);margin-bottom:1rem}
.foot-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.foot-list a{color:var(--on-dark);text-decoration:none}
.foot-list a:hover{color:var(--gold);text-decoration:underline}
.foot-list--contact li{display:flex;align-items:center;gap:.6rem}
.foot-ico svg{width:18px;height:18px;color:var(--gold)}
.foot-bottom{margin-top:3rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem;font-size:.88rem;color:var(--on-dark-2)}
@media (max-width:1000px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* ---------- chatbot ---------- */
.chatbot{position:fixed;inset-block-end:max(1.1rem,env(safe-area-inset-bottom,0px));inset-inline-end:1.1rem;z-index:60}
.chatbot__fab{width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:var(--olive-600);color:#fff;box-shadow:0 14px 30px -12px rgba(23,36,28,.6);transition:background-color .2s,transform .2s}
.chatbot__fab:hover{background:var(--olive)}
.chatbot__fab svg{width:26px;height:26px}
.chatbot__fab-x{display:none;font-size:1.7rem;line-height:1}
.chatbot.is-open .chatbot__fab-ico{display:none}
.chatbot.is-open .chatbot__fab-x{display:block}
.chatbot__panel{position:absolute;inset-block-end:72px;inset-inline-end:0;width:min(370px,calc(100vw - 2.2rem));max-height:min(560px,calc(100dvh - 120px));
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 30px 60px -30px rgba(23,36,28,.55);overflow:hidden}
.chatbot__panel[hidden]{display:none}
.chatbot__head{display:flex;align-items:center;gap:.65rem;padding:.9rem 1rem;background:var(--olive);color:#fff}
.chatbot__head img{background:#fff;border-radius:50%;padding:2px}
.chatbot__who{flex:1;display:flex;flex-direction:column;line-height:1.3}
.chatbot__who strong{font-weight:600}
.chatbot__who span{font-size:.8rem;color:var(--on-dark-2)}
.chatbot__reset,.chatbot__close{width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;font-size:1.3rem}
.chatbot__reset svg{width:17px;height:17px}
.chatbot__reset:hover,.chatbot__close:hover{background:rgba(255,255,255,.24)}
.chatbot__log{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem;background:var(--sage)}
.chatbot__msg{max-width:85%;padding:.65rem .9rem;border-radius:16px;font-size:.95rem;line-height:1.6;white-space:pre-wrap}
.chatbot__msg--bot{align-self:flex-start;background:#fff;color:var(--ink);border:1px solid var(--line);border-start-start-radius:4px}
.chatbot__msg--user{align-self:flex-end;background:var(--olive-600);color:#fff;border-start-end-radius:4px}
.chatbot__msg--typing{color:var(--ink-2);font-style:italic}
.chatbot__quick{display:flex;flex-wrap:wrap;gap:.4rem;padding:.6rem 1rem;background:var(--sage)}
.chatbot__quick[hidden]{display:none}
.chatbot__chip{border:1px solid #BCC8BB;background:#fff;color:var(--olive);border-radius:99px;padding:.35rem .8rem;font:500 .85rem var(--f-text);cursor:pointer}
.chatbot__chip:hover{background:var(--olive);color:#fff;border-color:var(--olive)}
.chatbot__form{display:flex;gap:.5rem;padding:.75rem;border-top:1px solid var(--line)}
.chatbot__form input{flex:1;min-height:44px;padding:.5rem .8rem;border:1.5px solid #C4CEC3;border-radius:var(--r-sm);font:400 .95rem var(--f-text);color:var(--ink)}
.chatbot__form input:focus{outline:0;border-color:var(--olive-600)}
.chatbot__form button{width:44px;height:44px;border:0;border-radius:var(--r-sm);background:var(--thread);color:#fff;cursor:pointer;display:grid;place-items:center}
.chatbot__form button svg{width:19px;height:19px}
[dir="rtl"] .chatbot__form button svg{transform:scaleX(-1)}
.chatbot__note{margin:0;padding:0 1rem .75rem;font-size:.76rem;color:var(--ink-2)}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---------- print ---------- */
@media print{.site-head,.chatbot,.stitch,.hero__visual,.donate-band__photo{display:none}.section,.donate-band{padding-block:1.5rem}}

/* ---------- small-screen header fit ---------- */
@media (max-width:560px){
  .site-head__inner{gap:.5rem;min-height:66px}
  :root{--head-h:66px}
  .brand{flex:1 1 auto;min-width:0;gap:.5rem}
  .brand__mark img{width:40px;height:40px}
  .brand__text{min-width:0}
  .brand__ar{font-size:.84rem;max-width:none;line-height:1.35}
  .head-actions{gap:.4rem;flex-shrink:0}
  .lang-switch a{padding:.35rem .5rem;font-size:.8rem}
  .burger{width:40px;height:40px}
}

.donate-band--olive{background:var(--olive-600)}
.donate-band--red{background:var(--thread)}
.section .donate-band h2{font-size:clamp(1.5rem,2.6vw,2rem)}

/* ==========================================================================
   v3 additions
   ========================================================================== */

/* ---------- wide hero: media at its true 16:9 inside a shallow arch ---------- */
.hero--wide{background:linear-gradient(180deg,var(--sage) 0%,var(--paper) 62%)}
.hero__head{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,5vw,4.5rem);align-items:end;
  padding-block:clamp(2.25rem,5vw,4rem) clamp(1.75rem,3.5vw,2.75rem)}
.hero__head h1{margin:0}
.hero__head .hero__lead{margin-bottom:1.5rem}
.hero__stage{position:relative;padding-bottom:clamp(2.5rem,5vw,4rem)}
.arch-wide{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:16/9;width:100%;
  border-radius:50% 50% var(--r-lg) var(--r-lg) / 16% 16% var(--r-lg) var(--r-lg);
  background:var(--olive-100);box-shadow:0 40px 80px -48px rgba(23,36,28,.6)}
.arch-wide .hero__bg,.arch-wide .hero__bg-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.arch-wide picture{display:contents}
.hero--wide .hero__seal{top:auto;bottom:calc(clamp(2.5rem,5vw,4rem) + 1.25rem);inset-inline-end:clamp(1rem,3vw,2rem)}
.hero__scroll{position:absolute;bottom:calc(clamp(2.5rem,5vw,4rem) - 1.4rem);inset-inline-start:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.25rem;border-radius:99px;background:var(--paper);
  color:var(--olive);font-weight:600;text-decoration:none;box-shadow:var(--lift);white-space:nowrap}
[dir="rtl"] .hero__scroll{transform:translateX(50%)}
.hero__scroll svg{width:18px;height:18px}
.hero__scroll:hover{color:var(--thread)}
@media (max-width:900px){.hero__head{grid-template-columns:1fr;align-items:start}}
@media (max-width:640px){
  .arch-wide{border-radius:50% 50% var(--r) var(--r) / 12% 12% var(--r) var(--r)}
  .hero--wide .hero__seal{display:none}
  .hero__scroll{font-size:.9rem;padding:.6rem 1rem}
}

/* ---------- institution cards with real photos ---------- */
.inst__photo{margin:0;aspect-ratio:16/10;overflow:hidden;border-radius:var(--r) var(--r) 0 0;background:var(--olive-100)}
.inst__photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.inst:hover .inst__photo img{transform:scale(1.04)}
.inst:not(.inst--lead) .inst__body{padding-top:1.1rem}
.inst:not(.inst--lead) .inst__top{margin-top:-2.4rem;margin-bottom:.8rem}
.inst:not(.inst--lead) .inst__badge{border:4px solid var(--paper);position:relative}
.inst:not(.inst--lead) .inst__est{padding-top:1.6rem}
.inst--lead .inst__photo{aspect-ratio:auto}

/* ---------- institutions mega menu ---------- */
.navdrop--wide .navdrop__panel{width:min(640px,calc(100vw - 2rem));display:grid;grid-template-columns:1fr 1fr;gap:.15rem;padding:.6rem;
  inset-inline-end:auto;inset-inline-start:50%;transform:translate(-50%,-4px)}
[dir="rtl"] .navdrop--wide .navdrop__panel{transform:translate(50%,-4px)}
.navdrop--wide.is-open .navdrop__panel{transform:translate(-50%,0)}
[dir="rtl"] .navdrop--wide.is-open .navdrop__panel{transform:translate(50%,0)}
.navdrop--wide .navdrop__item{padding:.55rem .6rem}
.navdrop--wide .navdrop__txt strong{font-size:.9rem;line-height:1.35}
.navdrop__ico svg{fill:none;stroke:currentColor}
.navdrop__item--lead{grid-column:1/-1;background:var(--sage)}
.navdrop__item--lead .navdrop__ico{background:#F8E7E8;color:var(--thread)}
.navdrop__all{grid-column:1/-1;display:block;text-align:center;padding:.7rem;margin-top:.25rem;border-top:1px solid var(--line);
  font-weight:600;color:var(--olive-600);text-decoration:none;border-radius:0 0 10px 10px}
.navdrop__all:hover{background:var(--sage)}
@media (max-width:1320px){
  .navdrop--wide .navdrop__panel,[dir="rtl"] .navdrop--wide .navdrop__panel,
  .navdrop--wide.is-open .navdrop__panel,[dir="rtl"] .navdrop--wide.is-open .navdrop__panel{transform:none;width:auto;grid-template-columns:1fr}
}

/* ---------- sound toggle ---------- */
.sound-toggle{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-sm);border:1px solid var(--line);
  background:#fff;color:var(--olive);cursor:pointer}
.sound-toggle:hover{background:var(--sage)}
.sound-toggle svg{width:19px;height:19px}
.sound-toggle__off{display:none}
.sound-toggle[aria-pressed="false"] .sound-toggle__on{display:none}
.sound-toggle[aria-pressed="false"] .sound-toggle__off{display:block;color:var(--ink-2)}
@media (max-width:400px){.sound-toggle{width:36px;height:36px}}

/* ---------- timeline: self-scrolling track ---------- */
.tl-viewport{position:relative}
.tl-viewport.is-auto{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tl-viewport.is-auto .tl{overflow:visible;width:max-content;padding-inline:0;scroll-snap-type:none;
  grid-auto-columns:300px;animation:tl-run var(--tl-dur,80s) linear infinite}
/* reading direction: in Arabic the story travels from right to left */
@keyframes tl-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes tl-run-rtl{from{transform:translateX(0)}to{transform:translateX(50%)}}
[dir="rtl"] .tl-viewport.is-auto .tl{animation-name:tl-run-rtl}
.tl-viewport.is-paused .tl,.tl-viewport.is-offscreen .tl{animation-play-state:paused}
.tl-controls{display:flex;justify-content:flex-end;margin-top:.75rem}
.tl-toggle{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:99px;cursor:pointer;
  background:transparent;color:var(--on-dark);border:1px solid rgba(255,255,255,.35);font:500 .9rem var(--f-text)}
.tl-toggle:hover{background:rgba(255,255,255,.1)}
.tl-toggle svg{width:14px;height:14px}
.tl-toggle__play{display:none}
.tl-toggle.is-paused .tl-toggle__pause{display:none}
.tl-toggle.is-paused .tl-toggle__play{display:block}
.section--ink .tl-toggle span{color:var(--on-dark)}

/* ---------- brand intro (once per session) ---------- */
#ittihad-preloader{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#fff;
  transition:opacity .7s ease,visibility .7s ease}
#ittihad-preloader.ip-done{opacity:0;visibility:hidden}
.ip-inner{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1rem}
#ittihad-intro{width:min(62vw,340px);aspect-ratio:720/686;height:auto;object-fit:cover;background:#fff}
.ip-label{margin:0;text-align:center;font:700 clamp(1rem,2.6vw,1.25rem)/1.4 var(--f-display);color:var(--olive)}
.ip-label span{display:block;font:500 .88rem var(--f-text);color:var(--thread);margin-top:.2rem}
.ip-bar{width:min(52vw,220px);height:3px;border-radius:3px;background:var(--olive-100);overflow:hidden}
.ip-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--olive-600),var(--thread));transition:width .25s linear}
.ip-skip{position:absolute;bottom:max(1.5rem,env(safe-area-inset-bottom,0px));inset-inline-end:1.5rem;padding:.55rem 1.2rem;
  border-radius:99px;border:1px solid var(--line);background:#fff;color:var(--ink-2);font:500 .9rem var(--f-text);cursor:pointer}
.ip-skip:hover{color:var(--olive);border-color:var(--olive)}
body.ip-lock{overflow:hidden}

/* ---------- content pages ---------- */
.prose{font-size:1.08rem;line-height:1.9}
.prose p{max-width:70ch}
.prose h2{color:var(--olive);margin-top:2.5rem}
.prose h3{font-family:var(--f-display);color:var(--olive);font-size:1.3rem;margin-top:1.75rem}
.page-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(2rem,5vw,4rem);align-items:start}
.page-aside{position:sticky;top:calc(var(--head-h) + 1.5rem);display:grid;gap:1rem}
.aside-card{background:var(--sage);border-radius:var(--r);padding:1.4rem}
.aside-card h3{font-size:1rem;margin-bottom:.75rem;color:var(--olive)}
.aside-card ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.aside-card a{text-decoration:none;font-weight:500}
.aside-card a:hover{text-decoration:underline}
.toc a{color:var(--ink)}
@media (max-width:900px){.page-grid{grid-template-columns:1fr}.page-aside{position:static}}

.eras{list-style:none;padding:0;margin:2rem 0;display:grid;gap:1.25rem;counter-reset:era}
.era{position:relative;padding:1.5rem 1.5rem 1.5rem 1.5rem;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  border-inline-start:4px solid var(--thread)}
.era__when{font:700 1.4rem/1 var(--f-display);color:var(--thread);margin-bottom:.35rem}
.era h3{margin:0 0 .6rem;font-size:1.15rem;font-family:var(--f-text);font-weight:700;color:var(--ink)}
.era ul{margin:0;padding-inline-start:1.2rem;color:var(--ink-2)}
.era li{margin-bottom:.35rem}

.checks{list-style:none;padding:0;margin:1.5rem 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.checks li{display:flex;gap:.8rem;padding:1.1rem 1.2rem;background:var(--sage);border-radius:var(--r);line-height:1.6}
.checks li::before{content:"";flex:0 0 12px;height:12px;margin-top:.45em;transform:rotate(45deg);background:var(--thread)}

.quote{margin:2rem 0;padding:1.75rem 2rem;background:var(--olive);color:var(--on-dark);border-radius:var(--r-lg);position:relative}
.quote p{color:var(--on-dark);font-size:1.15rem;max-width:none;margin:0}
.quote cite{display:block;margin-top:1rem;color:var(--gold);font-style:normal;font-weight:600}

.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);margin:1.25rem 0}
.data-table{width:100%;border-collapse:collapse;min-width:560px;font-size:.97rem}
.data-table th,.data-table td{padding:.85rem 1rem;text-align:start;border-bottom:1px solid var(--line);vertical-align:top}
.data-table th{background:var(--sage);color:var(--olive);font-weight:700}
.data-table tr:last-child td{border-bottom:0}
.data-table tbody tr:hover{background:#FAFBF9}
.data-table .role{color:var(--thread);font-weight:600}
.note{font-size:.92rem;color:var(--ink-2)}

.doc-list{list-style:none;padding:0;margin:1rem 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.75rem}
.doc-list a{display:flex;align-items:center;gap:.8rem;padding:1rem 1.1rem;border:1px solid var(--line);border-radius:var(--r);
  text-decoration:none;color:var(--ink);background:var(--paper);transition:border-color .2s,background-color .2s}
.doc-list a:hover{border-color:var(--olive-600);background:var(--sage)}
.doc-list svg{flex:0 0 22px;width:22px;height:22px;color:var(--thread)}

.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem}
.contact-card{display:flex;flex-direction:column;gap:.35rem;padding:1.6rem;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.contact-card__ico{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--olive-100);color:var(--olive);margin-bottom:.6rem}
.contact-card__ico svg{width:22px;height:22px}
.contact-card h3{margin:0;font-size:1.05rem}
.contact-card a,.contact-card p{font-size:1.05rem;margin:0}
.map-frame{margin-top:2rem;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);aspect-ratio:21/9;background:var(--sage)}
.map-frame iframe{width:100%;height:100%;border:0}

.give-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.25rem}
.give-card{scroll-margin-top:calc(var(--head-h) + 20px);display:flex;flex-direction:column;padding:1.75rem;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.give-card:target{border-color:var(--thread);box-shadow:0 0 0 3px #F8E7E8}
.give-card__ico{width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:#F8E7E8;color:var(--thread);margin-bottom:1rem}
.give-card__ico svg{width:26px;height:26px}
.give-card h3{font-family:var(--f-display);font-size:1.25rem}
.give-card p{color:var(--ink-2);flex:1}

.gallery{columns:3 260px;column-gap:1rem}
.gallery figure{margin:0 0 1rem;break-inside:avoid;border-radius:var(--r);overflow:hidden;background:var(--olive-100)}
.gallery img{width:100%;height:auto;transition:transform .5s}
.gallery a:hover img{transform:scale(1.03)}
.hero--inst{min-height:clamp(380px,52vh,520px)}
.hero--inst .crumbs{color:var(--on-dark-2)}
.hero--inst .crumbs span{margin:0 .15rem}
.hero--inst h1{font-size:clamp(1.9rem,4.2vw,3.1rem)}

.nav>a,.navdrop__btn{white-space:nowrap}
@media (min-width:1321px) and (max-width:1480px){.nav>a,.navdrop__btn{padding-inline:.55rem;font-size:.94rem}.brand__en{display:none}}
.page-grid>*{min-width:0}
@media (max-width:900px){.page-grid{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   DONATION PLEDGE
   Reuses the appointment form conventions (.appt__form, .field, .field-row,
   .form-msg, .field-note) so the two forms cannot drift apart visually.
   Only the two pieces the appointment form does not have are added here.
   ========================================================================== */
.field--check{margin-bottom:1.25rem}
.checkline{display:flex;align-items:flex-start;gap:.7rem;cursor:pointer;font-size:.95rem;
  line-height:1.6;color:var(--ink)}
.checkline input{width:20px;height:20px;min-height:0;flex:none;margin-top:.2rem;
  accent-color:var(--olive-600);cursor:pointer}
/* the programme cards carry a button that prefills the pledge form */
.give-card .btn[data-pledge]{margin-top:auto}

/* ==========================================================================
   TIMELINE — visible scroll affordance
   The auto-scroll is disabled for anyone with reduced-motion enabled (correct
   for accessibility), which left a horizontal scroller with nothing indicating
   there was more to see. These arrows and edge fades appear in every mode, so
   the row is always obviously navigable.
   ========================================================================== */
.tl-viewport{position:relative}
.tl-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:42px;height:42px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.4);color:#fff;
  display:grid;place-items:center;backdrop-filter:blur(6px);
  transition:background-color .2s,border-color .2s,opacity .2s}
.tl-nav:hover{background:rgba(255,255,255,.28);border-color:#fff}
.tl-nav:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.tl-nav svg{width:18px;height:18px}
.tl-nav[disabled]{opacity:.25;cursor:default;pointer-events:none}
.tl-nav--prev{inset-inline-start:.5rem}
.tl-nav--next{inset-inline-end:.5rem}
[dir="rtl"] .tl-nav svg{transform:scaleX(-1)}

/* edge fades tell the eye the row continues */
.tl-viewport::before,.tl-viewport::after{content:"";position:absolute;top:0;bottom:2.2rem;width:64px;
  pointer-events:none;z-index:2;opacity:0;transition:opacity .25s}
.tl-viewport::before{inset-inline-start:0;background:linear-gradient(to var(--fade-dir,right),var(--ink),transparent)}
.tl-viewport::after{inset-inline-end:0;background:linear-gradient(to var(--fade-dir2,left),var(--ink),transparent)}
[dir="rtl"] .tl-viewport{--fade-dir:left;--fade-dir2:right}
.tl-viewport.has-prev::before{opacity:1}
.tl-viewport.has-next::after{opacity:1}

/* hint line under the row */
.tl-hint{font-size:.85rem;color:var(--on-dark-2);text-align:center;margin:.2rem 0 0}
@media (max-width:640px){.tl-nav{width:38px;height:38px}}

/* ==========================================================================
   GALLERY
   Rows of three that share a height, so the grid reads as a considered layout
   rather than a ragged set of boxes. Captions sit under each image and the
   whole tile opens a lightbox.
   ========================================================================== */
.gallery__count{margin-top:.9rem;font-size:.95rem;color:var(--on-dark-2)}
.gallery__count bdi{color:var(--gold);font-weight:700;font-size:1.15rem;
  font-variant-numeric:tabular-nums}

.gallery__row{display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:1rem;
  margin-bottom:1rem}
.gallery__row:has(.gallery__item:only-child){grid-template-columns:1fr}
.gallery__row:has(.gallery__item:nth-child(2):last-child){grid-template-columns:1.2fr 1fr}

.gallery__item{margin:0;display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--lift);
  transition:transform .3s cubic-bezier(.2,.9,.25,1),box-shadow .3s}
.gallery__item:hover{transform:translateY(-4px);box-shadow:0 26px 50px -26px rgba(18,48,31,.5)}

.gallery__btn{display:block;position:relative;padding:0;border:0;cursor:zoom-in;
  background:var(--sage);width:100%;aspect-ratio:4/3;overflow:hidden}
.gallery__item--wide .gallery__btn{aspect-ratio:16/10}
.gallery__btn img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.2,.9,.25,1)}
.gallery__item:hover .gallery__btn img{transform:scale(1.045)}

.gallery__zoom{position:absolute;inset-block-end:.6rem;inset-inline-end:.6rem;
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:rgba(21,41,31,.72);color:#fff;opacity:0;transform:translateY(6px);
  transition:opacity .25s,transform .25s;backdrop-filter:blur(4px)}
.gallery__zoom svg{width:17px;height:17px}
.gallery__item:hover .gallery__zoom,
.gallery__btn:focus-visible .gallery__zoom{opacity:1;transform:none}
.gallery__btn:focus-visible{outline:3px solid var(--olive-600);outline-offset:-3px}

.gallery__cap{padding:.85rem 1rem 1rem;display:grid;gap:.25rem}
.gallery__cap strong{font-family:var(--f-text);font-weight:700;font-size:.98rem;
  color:var(--ink);line-height:1.5}
.gallery__cap span{font-size:.87rem;line-height:1.65;color:var(--ink-2)}

@media (max-width:820px){
  .gallery__row,.gallery__row:has(.gallery__item:nth-child(2):last-child){grid-template-columns:1fr 1fr}
  .gallery__item--wide .gallery__btn{aspect-ratio:4/3}
}
@media (max-width:560px){
  .gallery__row,.gallery__row:has(.gallery__item:nth-child(2):last-child){grid-template-columns:1fr}
}

/* ---------------- lightbox ---------------- */
.lightbox{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1.25rem}
.lightbox__backdrop{position:absolute;inset:0;background:rgba(10,22,15,.9);
  backdrop-filter:blur(6px);animation:lbIn .25s ease}
.lightbox__box{position:relative;max-width:min(1100px,94vw);max-height:92vh;margin:0;
  display:flex;flex-direction:column;background:var(--paper);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.7);
  animation:lbUp .3s cubic-bezier(.2,.9,.25,1)}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
@keyframes lbUp{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.lightbox__box img{max-width:100%;max-height:74vh;object-fit:contain;display:block;background:#0d1a12}
.lightbox__cap{padding:.9rem 3.2rem .9rem 1.1rem;display:grid;gap:.2rem}
.lightbox__cap strong{font-family:var(--f-text);font-size:1rem}
.lightbox__cap span{font-size:.9rem;color:var(--ink-2);line-height:1.6}
.lightbox__cap:empty{display:none}
.lightbox__close{position:absolute;inset-block-start:.6rem;inset-inline-end:.6rem;
  width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;z-index:2;
  background:rgba(21,41,31,.8);color:#fff;font-size:1.5rem;line-height:1;
  display:grid;place-items:center;transition:background-color .2s}
.lightbox__close:hover{background:var(--olive-700)}
@media (prefers-reduced-motion:reduce){
  .lightbox__backdrop,.lightbox__box{animation:none}
}

/* ==========================================================================
   CENTENARY SEAL — donation band
   The seal is NOT a plain circle: it is a circular medallion inside a
   rounded-square frame with corner ornament, and it carries the very line that
   heads this band. Masking it to a circle — or cropping to the medallion —
   clips that frame and cuts the artwork, so it is shown whole, seated on a soft
   gold halo, exactly as designed.
   ========================================================================== */
.seal-figure{margin:0;display:grid;place-items:center;align-self:center;
  position:relative;isolation:isolate}
.seal-figure img{width:min(360px,44vw);height:auto;display:block;
  border-radius:18px;
  box-shadow:0 26px 60px -26px rgba(0,0,0,.7)}
/* a soft gold halo behind the seal, to seat it on the dark panel */
.seal-figure::before{content:"";position:absolute;z-index:-1;
  width:min(500px,60vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(217,179,91,.22) 0%,rgba(217,179,91,.06) 55%,transparent 74%)}
@media (max-width:760px){
  .seal-figure img{width:min(280px,72vw);border-radius:14px}
  .seal-figure::before{width:min(360px,84vw)}
}

/* ==========================================================================
   HOSPITAL — designed banner
   This banner is an artwork that already contains the hospital name, the
   tagline and a booking button, so the page shows it whole with no overlay text
   (otherwise everything would appear twice). The button in the picture cannot be
   clicked, so a real link is laid exactly over it.
   ========================================================================== */
/* the positioning context must be the IMAGE box, not the section, or the
   hotspot drifts by whatever sits above the banner */
.hero--banner{display:block;line-height:0}
/* The shared .hero gives the media box a fixed height. That box is SHORTER than
   the 16:9 banner, so the artwork was being clipped and the hotspot — positioned
   inside that box — landed in the wrong place. Height must follow the image. */
.hero--banner .hero__media{position:relative;display:block;width:100%;margin:0;
  height:auto;min-height:0;max-height:none;aspect-ratio:auto;overflow:visible}
.hero--banner .hero__media img{width:100%;height:auto;display:block}

/* ---------------------------------------------------------------------------
   A real button under the banner.
   The button inside the artwork is only pixels — it cannot be focused, read by
   a screen reader, or clicked with the keyboard. This is the accessible control,
   and it stays visible so nobody has to guess that the picture is clickable.
   --------------------------------------------------------------------------- */
.hero-banner-cta{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;
  align-items:center;padding:1rem clamp(1rem,4vw,2rem);
  background:var(--paper);border-bottom:1px solid var(--line)}
.hero-banner-cta .btn{min-width:0}
@media (max-width:560px){
  .hero-banner-cta{flex-direction:column;align-items:stretch}
  .hero-banner-cta .btn{width:100%}
}

/* ==========================================================================
   FORM CARDS INSIDE DARK SECTIONS — keep their own palette
   The rule above gives every text element inside a dark section the light
   palette, so that headings and body copy stay readable on olive. But a form
   card is a WHITE panel sitting inside that section: its labels and help text
   were inheriting the cream colour and became invisible on white.
   A card resets the palette for its own contents; anything dark-on-dark is the
   real bug this prevents.
   ========================================================================== */
.section--ink .appt__form,
.section--olive .appt__form,
.section--ink .acard,
.section--olive .acard{background:var(--paper);color:var(--ink)}

.section--ink .appt__form :is(h1,h2,h3,h4,p,li,span,strong,em,label,.eyebrow),
.section--olive .appt__form :is(h1,h2,h3,h4,p,li,span,strong,em,label,.eyebrow),
.section--ink .acard :is(h1,h2,h3,h4,p,li,span,strong,em,label,.eyebrow),
.section--olive .acard :is(h1,h2,h3,h4,p,li,span,strong,em,label,.eyebrow){color:inherit}

.section--ink .appt__form p,
.section--olive .appt__form p,
.section--ink .acard p,
.section--olive .acard p{color:var(--ink-2)}

/* form controls keep dark text on their white fields */
.section--ink .appt__form input,
.section--ink .appt__form select,
.section--ink .appt__form textarea,
.section--olive .appt__form input,
.section--olive .appt__form select,
.section--olive .appt__form textarea{color:var(--ink);background:#fff}
.section--ink .appt__form input::placeholder,
.section--ink .appt__form textarea::placeholder,
.section--olive .appt__form input::placeholder,
.section--olive .appt__form textarea::placeholder{color:#8A938C;opacity:1}
.section--ink .appt__form .field-note,
.section--olive .appt__form .field-note{color:var(--ink-2)}
/* links inside a white card must NOT be gold-on-white */
.section--ink .appt__form a:not(.btn),
.section--olive .appt__form a:not(.btn){color:var(--olive-600)}

/* gallery: admin-only notice when the gallery columns are not yet present */
.gallery__notice{background:var(--saffron-100,#F6EDD6);border:1px solid #DEC98C;color:#6b5310;
  border-radius:var(--r);padding:.85rem 1.1rem;margin-bottom:1.5rem;
  font-size:.9rem;line-height:1.7;max-width:70ch}
.gallery__notice strong{color:#4a3a08}

/* ==========================================================================
   LIGHTBOX — must be hidden while the [hidden] attribute is set
   .lightbox sets display:grid, and that OUTRANKS the browser's built-in
   handling of the hidden attribute. The element therefore stayed on screen as a
   full-page dark backdrop with a spinner-like close button — which made the
   gallery look permanently stuck, with the page's own content barely visible
   behind it. Stating it explicitly is the fix.
   ========================================================================== */
.lightbox[hidden]{display:none !important}
body:has(.lightbox:not([hidden])){overflow:hidden}

/* ==========================================================================
   FIX (v4): invisible menu links were catching taps on mobile.
   A hidden drawer's dropdown panels forced `visibility: visible` (and the
   institutions panel forced `display: grid`), which overrides the hidden
   parent, so invisible hospital / orphans-home links sat over the page.
   A closed menu is now non-interactive at every level.
   ========================================================================== */
.navdrop:not(.is-open) > .navdrop__panel{visibility:hidden;pointer-events:none}
@media (max-width:1320px){
  .nav:not(.is-open){visibility:hidden;pointer-events:none}
  .nav:not(.is-open) *{pointer-events:none}
  .navdrop__panel{visibility:inherit}
  .navdrop:not(.is-open) > .navdrop__panel,
  .navdrop--wide:not(.is-open) > .navdrop__panel{display:none!important}
}

/* ==========================================================================
   v4 menu: nodes, grouped institutions mega panel, sub-nodes
   ========================================================================== */
.site-head__inner{position:relative}
.navdrop__panel{top:calc(100% + 4px)}               /* smaller gap under the heading */
.navdrop__btn[aria-expanded="true"]{color:var(--olive);background:var(--sage)}
.navdrop--mega{position:static}
.navdrop--mega .navdrop__panel{inset-inline:0;width:auto;max-width:1100px;margin-inline:auto;top:calc(100% - 6px);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.25rem 1rem;padding:1.1rem 1.1rem .6rem;transform:translateY(-4px)}
.navdrop--mega.is-open .navdrop__panel{transform:none}
.navgroup{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.navgroup__title{margin:0 0 .35rem;padding:0 .6rem .45rem;border-bottom:2px solid var(--thread);font:700 .82rem var(--f-text);
  color:var(--thread);letter-spacing:0}
.navdrop--mega .navdrop__item{padding:.5rem .6rem;align-items:flex-start}
.navdrop--mega .navdrop__txt strong{font-size:.9rem;line-height:1.4}
.navdrop--mega .navdrop__ico{flex-basis:34px;height:34px}
.navdrop--mega .navdrop__ico svg{width:18px;height:18px}
.navdrop--mega .navdrop__all{grid-column:1/-1}
.navdrop__item--lead{grid-column:auto;background:transparent}
.navsub{border-radius:10px}
.navsub.is-open{background:var(--sage)}
.navsub__row{display:flex;align-items:stretch}
.navsub__row .navdrop__item{flex:1;min-width:0}
.navsub__btn{flex:0 0 34px;display:grid;place-items:center;border:0;background:transparent;border-radius:8px;cursor:pointer;color:var(--olive-600)}
.navsub__btn:hover{background:var(--olive-100)}
.navsub__btn svg{width:16px;height:16px;transition:transform .2s}
.navsub.is-open .navsub__btn svg{transform:rotate(180deg)}
.navsub__panel{display:none;padding:.15rem .6rem .6rem calc(.6rem + 34px + .75rem)}
[dir="rtl"] .navsub__panel{padding:.15rem calc(.6rem + 34px + .75rem) .6rem .6rem}
.navsub.is-open .navsub__panel{display:grid;gap:.1rem}
.navsub__panel a{padding:.4rem .5rem;border-radius:8px;text-decoration:none;color:var(--ink);font-size:.88rem;font-weight:500}
.navsub__panel a:hover{background:var(--paper);color:var(--olive-600)}
.navsub__panel a::before{content:"";display:inline-block;width:6px;height:6px;margin-inline-end:.5rem;transform:rotate(45deg);background:var(--thread);vertical-align:middle}
@media (max-width:1320px){
  .navdrop--mega .navdrop__panel{grid-template-columns:1fr;padding:.25rem 0 .5rem;max-width:none;transform:none}
  .navgroup__title{margin-top:.6rem}
  .navdrop__btn[aria-expanded="true"]{background:transparent}
}

/* ---------- annual statements ---------- */
.ar-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:var(--r);margin-bottom:2rem;background:var(--paper)}
.ar-stats div{padding:1.25rem 1.4rem;display:flex;flex-direction:column;gap:.2rem;border-inline-start:1px solid var(--line)}
.ar-stats div:first-child{border-inline-start:0}
.ar-stats strong{font:700 2rem/1 var(--f-display);color:var(--olive)}
.ar-stats span{color:var(--ink-2);font-size:.92rem}
.ar-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.chip{border:1.5px solid var(--line);background:var(--paper);color:var(--ink);border-radius:99px;padding:.45rem 1rem;font:600 .9rem var(--f-text);cursor:pointer}
.chip:hover{border-color:var(--olive-600)}
.chip.is-on{background:var(--olive);border-color:var(--olive);color:#fff}
.ar-years{display:grid;gap:2.25rem}
.ar-year{display:grid;grid-template-columns:120px 1fr;gap:1.5rem;align-items:start}
.ar-year[hidden]{display:none}
.ar-year__label{position:sticky;top:calc(var(--head-h) + 1rem);margin:0;font:700 clamp(2rem,4vw,2.8rem)/1 var(--f-display);color:var(--thread)}
.ar-docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.ar-doc{display:flex;align-items:flex-start;gap:1rem;padding:1.25rem;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  text-decoration:none;color:var(--ink);border-inline-start:4px solid var(--olive-600);transition:box-shadow .2s,transform .2s,border-color .2s}
.ar-doc:hover{box-shadow:var(--lift);transform:translateY(-2px);color:var(--ink)}
.ar-doc[hidden]{display:none}
.ar-doc--thread{border-inline-start-color:var(--thread)}
.ar-doc--gold{border-inline-start-color:#B58A2C}
.ar-doc__ico{flex:0 0 46px;height:46px;display:grid;place-items:center;border-radius:12px;background:var(--sage);color:var(--olive)}
.ar-doc--thread .ar-doc__ico{background:#F8E7E8;color:var(--thread)}
.ar-doc--gold .ar-doc__ico{background:#F6EDD6;color:#7A5A12}
.ar-doc__ico svg{width:24px;height:24px}
.ar-doc__body{flex:1;display:flex;flex-direction:column;gap:.2rem;min-width:0}
.ar-doc__kind{font-size:.8rem;font-weight:700;color:var(--ink-2)}
.ar-doc__body strong{font-size:1.05rem;line-height:1.45}
.ar-doc__body em{font-style:normal;color:var(--ink-2);font-size:.92rem}
.ar-doc__meta{font-size:.8rem;color:var(--ink-2);margin-top:.3rem}
.ar-doc__go{flex:0 0 36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--sage);color:var(--olive);transition:background-color .2s,color .2s}
.ar-doc:hover .ar-doc__go{background:var(--olive);color:#fff}
.ar-doc__go svg{width:18px;height:18px}
@media (max-width:700px){.ar-year{grid-template-columns:1fr;gap:.75rem}.ar-year__label{position:static}.ar-stats strong{font-size:1.6rem}.ar-docs{grid-template-columns:1fr}}

/* ==========================================================================
   v4 polish
   ========================================================================== */

/* ---------- institution logo cards: the logo is the hero of the card ---------- */
.inst:not(.inst--lead) .inst__photo{aspect-ratio:16/10;background:linear-gradient(180deg,#fff,var(--sage));display:grid;place-items:center;
  border-bottom:1px solid var(--line)}
.inst:not(.inst--lead) .inst__photo img{width:100%;height:100%;object-fit:contain;padding:1rem 1.25rem;transition:transform .5s ease}
.inst:not(.inst--lead):hover .inst__photo img{transform:scale(1.05)}
.inst:has(.inst__photo):not(.inst--lead) .inst__badge{display:none}
.inst:has(.inst__photo):not(.inst--lead) .inst__top{margin-top:0;margin-bottom:.5rem;min-height:0}
.inst:has(.inst__photo):not(.inst--lead) .inst__est{padding-top:0;display:inline-block;background:var(--sage);color:var(--olive);
  font-weight:600;font-size:.78rem;padding:.15rem .6rem;border-radius:99px}
.inst{transition:border-color .2s,box-shadow .25s,transform .25s}
.inst:hover{transform:translateY(-3px)}

/* ---------- page-to-page transitions (Chrome/Edge/Safari; others just navigate) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .22s ease both}
::view-transition-new(root){animation:vt-in .34s cubic-bezier(.2,.7,.2,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
.site-head{view-transition-name:site-head}
::view-transition-old(site-head),::view-transition-new(site-head){animation:none}

/* slim progress bar shown the moment a link is followed */
.nav-progress{position:fixed;top:0;inset-inline:0;height:3px;z-index:300;pointer-events:none;
  background:linear-gradient(90deg,var(--olive-600),var(--thread),var(--gold));transform-origin:0 50%;transform:scaleX(0);opacity:0}
[dir="rtl"] .nav-progress{transform-origin:100% 50%}
.nav-progress.is-on{opacity:1;animation:np-run 2.4s cubic-bezier(.1,.7,.2,1) forwards}
@keyframes np-run{0%{transform:scaleX(0)}40%{transform:scaleX(.55)}100%{transform:scaleX(.92)}}

/* ---------- gentle scroll-in: scroll-driven where supported, never hides content otherwise ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .sec-head,.inst,.news-card,.prog,.stat,.give-card,.ar-doc,.era,.contact-card,.gallery figure,.howto__step,.dept,.doc{
      animation:rise both linear;animation-timeline:view();animation-range:entry 0% entry 38%}
    @keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  }
}

/* ---------- transparency teaser (home) ---------- */
.trust{padding-block:clamp(3rem,6vw,4.5rem);background:var(--paper)}
.trust__inner{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1.25rem,4vw,3rem);align-items:center;padding:clamp(1.5rem,4vw,2.5rem);
  border:1px solid var(--line);border-radius:var(--r-lg);background:
  radial-gradient(120% 140% at 100% 0%,#F6EDD6 0%,transparent 55%),linear-gradient(180deg,#fff,var(--sage))}
.trust__seal{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:var(--olive);color:var(--gold);
  font:700 1.6rem/1 var(--f-display);box-shadow:0 0 0 6px #fff,0 0 0 7px var(--line)}
.trust h2{margin:0 0 .35rem;color:var(--olive);font-size:clamp(1.4rem,2.6vw,2rem)}
.trust p{margin:0;color:var(--ink-2)}
@media (max-width:760px){.trust__inner{grid-template-columns:1fr;text-align:center;justify-items:center}}

/* ---------- "continue exploring" strip on inner pages ---------- */
.explore{padding-block:clamp(3rem,6vw,4.5rem);background:var(--sage);border-top:1px solid var(--line)}
.explore h2{font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--olive);margin-bottom:1.25rem}
.explore__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.explore__card{display:flex;flex-direction:column;gap:.5rem;padding:1.35rem;border-radius:var(--r);background:var(--paper);border:1px solid var(--line);
  text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s,border-color .2s}
.explore__card:hover{transform:translateY(-3px);box-shadow:var(--lift);border-color:#BCC8BB;color:var(--ink)}
.explore__ico{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--olive-100);color:var(--olive)}
.explore__ico svg{width:22px;height:22px;fill:none;stroke:currentColor}
.explore__card strong{font-size:1.02rem}
.explore__card em{font-style:normal;color:var(--ink-2);font-size:.9rem;line-height:1.5}
.explore__card--give .explore__ico{background:#F8E7E8;color:var(--thread)}
@media (max-width:980px){.explore__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.explore__grid{grid-template-columns:1fr}}

/* timeline keeps moving (gently) even when the device asks for reduced motion;
   this overrides the global reduced-motion kill-switch for this one element */
@media (prefers-reduced-motion:reduce){
  .tl-viewport.is-auto .tl{animation:tl-run var(--tl-dur,160s) linear infinite!important}
  [dir="rtl"] .tl-viewport.is-auto .tl{animation-name:tl-run-rtl!important}
  .tl-viewport.is-paused .tl,.tl-viewport.is-offscreen .tl{animation-play-state:paused!important}
}

/* ==========================================================================
   v5: glass header + hospital building hero
   ========================================================================== */

/* ---------- frosted-glass sticky header (desktop and mobile) ---------- */
.site-head{position:sticky;top:0;background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:saturate(1.8) blur(18px);backdrop-filter:saturate(1.8) blur(18px);
  border-bottom:1px solid rgba(255,255,255,.5);box-shadow:0 1px 0 rgba(23,36,28,.06);
  transition:background-color .3s,box-shadow .3s,border-color .3s}
.site-head.is-stuck{background:rgba(255,255,255,.74);border-bottom-color:rgba(23,36,28,.08);
  box-shadow:0 10px 30px -18px rgba(23,36,28,.35)}
.site-head::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(163,36,47,.35),rgba(217,179,91,.45),rgba(47,93,70,.35),transparent);opacity:0;transition:opacity .3s}
.site-head.is-stuck::after{opacity:1}
.brand__mark img{transition:transform .3s}
.site-head.is-stuck .brand__mark img{transform:scale(.9)}
.navdrop__panel{background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6)}
.lang-switch,.sound-toggle{background:rgba(255,255,255,.7)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-head,.site-head.is-stuck{background:#fff}
  .navdrop__panel{background:#fff}
}
@media (max-width:1320px){ .nav{background:rgba(255,255,255,.96)} }

/* ---------- hospital building hero ---------- */
.hero--building{position:relative;min-height:clamp(600px,88vh,860px);display:flex;align-items:stretch;
  background:var(--olive-900);color:#fff;overflow:hidden;margin-top:calc(-1 * var(--head-h))}
.hero--building .hero__media{position:absolute;inset:0}
.hero--building .hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
@media (prefers-reduced-motion:no-preference){
  .hero--building .hero__media img{animation:kenburns 18s ease-out both}
  @keyframes kenburns{from{transform:scale(1.08)}to{transform:scale(1)}}
}
.hero--building .hero__scrim{position:absolute;inset:0;background:
  linear-gradient(0deg,rgba(10,22,16,.92) 0%,rgba(10,22,16,.55) 34%,rgba(10,22,16,0) 62%),
  linear-gradient(180deg,rgba(10,22,16,.35) 0%,rgba(10,22,16,0) 22%)}
.hb{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;
  padding-top:calc(var(--head-h) + 4rem);padding-bottom:clamp(2rem,5vw,3.5rem);width:min(100% - 2*var(--gutter),var(--wrap))}
.hb__card{position:relative;max-width:640px;padding:3.2rem clamp(1.4rem,3vw,2.2rem) clamp(1.4rem,3vw,2rem);
  background:rgba(12,26,19,.46);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-lg);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.hb__badge{position:absolute;top:0;inset-inline-start:clamp(1.4rem,3vw,2.2rem);transform:translateY(-50%);display:flex;align-items:center;gap:.75rem}
.hb__logo{width:88px;height:88px;border-radius:50%;object-fit:cover;background:#fff;border:4px solid #fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.4),0 14px 30px -12px rgba(0,0,0,.6)}
.hb__since{background:var(--thread);color:#fff;font-weight:700;font-size:.85rem;padding:.3rem .8rem;border-radius:99px;
  box-shadow:0 8px 18px -10px rgba(0,0,0,.6)}
.hb__eyebrow{margin:0 0 .6rem;color:var(--gold);font-weight:600;font-size:.95rem}
.hb h1{color:#fff;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.2;margin-bottom:.8rem;text-shadow:0 2px 20px rgba(0,0,0,.35)}
.hb__lead{color:rgba(255,255,255,.9);font-size:clamp(1.02rem,1.4vw,1.15rem);max-width:52ch;margin-bottom:1.5rem}
.hb__cta{display:flex;flex-wrap:wrap;gap:.75rem}
.hb__facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem;flex-shrink:0}
.hb__facts li>*,.hb__facts li{display:flex}
.hb__facts li{flex-direction:column}
.hb__facts li,.hb__facts a{min-width:170px}
.hb__facts li:not(:has(a)),.hb__facts a{flex-direction:column;padding:.8rem 1.1rem;border-radius:var(--r);text-decoration:none;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.hb__facts a{background:rgba(163,36,47,.55);border-color:rgba(255,255,255,.28)}
.hb__facts a:hover{background:rgba(163,36,47,.8);color:#fff}
.hb__facts strong{font:700 1.5rem/1.1 var(--f-display);color:#fff}
.hb__facts span{font-size:.85rem;color:rgba(255,255,255,.85)}
@media (max-width:980px){
  .hb{flex-direction:column;align-items:stretch}
  .hb__facts{flex-direction:row;flex-wrap:wrap}
  .hb__facts li{flex:1 1 150px}
  .hero--building .hero__scrim{background:linear-gradient(0deg,rgba(10,22,16,.94) 0%,rgba(10,22,16,.6) 45%,rgba(10,22,16,.1) 75%)}
}
@media (max-width:560px){
  .hb{padding-top:calc(var(--head-h) + 12rem)}
  .hb__logo{width:72px;height:72px}
  .hb__card{padding-top:2.8rem}
  .hb__cta .btn{flex:1 1 100%}
}
.hero--building .hero__media picture{position:absolute;inset:0;display:block}
.hero--building .hero__media picture img{position:absolute;inset:0}
.hero--building>.hero__media{aspect-ratio:auto;max-height:none;height:auto;width:auto;inset:0;border-radius:0;box-shadow:none}

/* ==========================================================================
   v6: solid sub-menus + page-turn curtain transition
   ========================================================================== */

/* sub-menus: solid white, no glass (glass stays on the header bar only) */
.navdrop__panel{background:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:0 24px 50px -24px rgba(23,36,28,.35),0 2px 6px rgba(23,36,28,.06)}

/* the soft cross-fade is replaced by the curtain below */
@view-transition{navigation:none}

/* ---------- page-turn curtain ----------
   Direction follows reading order: in Arabic the curtain travels right-to-left,
   in English left-to-right. Arrival: it starts covering and sweeps off.
   Departure (html.pt-leave): it sweeps back on, then the next page loads. */
.pt{position:fixed;inset:0;z-index:250;pointer-events:none;overflow:hidden}
.pt__panel{position:absolute;inset:0;display:grid;place-items:center;
  background:radial-gradient(90% 80% at 50% 50%,#24473A 0%,var(--olive) 55%,var(--olive-900) 100%);
  --pt-off:101%;transform:translateX(0);will-change:transform;
  animation:pt-reveal .62s cubic-bezier(.76,0,.24,1) .08s both}
[dir="rtl"] .pt__panel{--pt-off:-101%}
@keyframes pt-reveal{from{transform:translateX(0)}to{transform:translateX(var(--pt-off))}}

/* gold tatreez band on the leading edge */
.pt__stitch{position:absolute;top:50%;width:120vh;height:38px;background:var(--olive-900) url("/assets/img/tatreez-band-gold.svg") repeat-x center/auto 30px;
  inset-inline-end:0;transform:translate(50%,-50%) rotate(90deg);box-shadow:0 0 40px rgba(0,0,0,.35)}
[dir="rtl"] .pt__stitch{transform:translate(-50%,-50%) rotate(90deg)}
.pt__logo{width:112px;height:112px;border-radius:50%;background:#fff;display:grid;place-items:center;
  box-shadow:0 0 0 6px rgba(255,255,255,.12),0 20px 50px -20px rgba(0,0,0,.6);animation:pt-logo-out .5s ease both}
.pt__logo img{width:84px;height:84px}
@keyframes pt-logo-out{from{transform:scale(1);opacity:1}to{transform:scale(.8);opacity:0}}

/* the page itself settles in as the curtain leaves */
@media (prefers-reduced-motion:no-preference){
  body>main,body>.site-foot{animation:pt-page-in .7s cubic-bezier(.2,.7,.2,1) .18s both}
  @keyframes pt-page-in{from{opacity:.4;transform:perspective(1400px) rotateY(var(--pt-tilt,4deg)) scale(.985)}to{opacity:1;transform:none}}
  [dir="rtl"]{--pt-tilt:-4deg}
}

/* departure */
html.pt-leave .pt{pointer-events:auto}
html.pt-leave .pt__panel{--pt-from:-101%;animation:pt-cover .46s cubic-bezier(.76,0,.24,1) both}
[dir="rtl"].pt-leave .pt__panel{--pt-from:101%}
@keyframes pt-cover{from{transform:translateX(var(--pt-from))}to{transform:translateX(0)}}
html.pt-leave .pt__logo{animation:pt-logo-in .4s .12s ease both}
@keyframes pt-logo-in{from{transform:scale(.7) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:no-preference){
  html.pt-leave body>main,html.pt-leave body>.site-foot{animation:pt-page-out .46s cubic-bezier(.6,0,.4,1) both;transform-origin:50% 30%}
  @keyframes pt-page-out{to{opacity:.5;transform:perspective(1400px) rotateY(calc(var(--pt-tilt,4deg) * -1.5)) scale(.96)}}
}

/* reduced motion: a quick fade instead of a sweep */
@media (prefers-reduced-motion:reduce){
  .pt__panel{animation:pt-fade-out .25s ease both!important}
  html.pt-leave .pt__panel{animation:pt-fade-in .2s ease both!important}
  .pt__stitch{display:none}
  @keyframes pt-fade-out{from{opacity:1}to{opacity:0}}
  @keyframes pt-fade-in{from{opacity:0}to{opacity:1}}
}
@media print{.pt{display:none}}

/* ==========================================================================
   v9: hospital lead card — warm limestone, blended photo, Palestinian flag seam
   ========================================================================== */
.inst--lead{background:linear-gradient(135deg,#FFFDF9 0%,#FBF3E6 55%,#F6EAD6 100%);border-color:#EADCC4;
  box-shadow:0 30px 60px -40px rgba(120,80,30,.45);overflow:hidden}
.inst--lead:hover{border-color:#DFCBA8;transform:none}
.inst--lead .inst__face--front{position:relative}
/* photo: fills its half, no black band, fades softly into the text side */
.inst--lead .inst__photo{position:relative;flex:0 0 55%;min-height:420px;margin:0;background:#E9DCC6;border-radius:0!important}
.inst--lead .inst__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 55%;
  -webkit-mask-image:linear-gradient(to left,#000 82%,transparent 100%);mask-image:linear-gradient(to left,#000 82%,transparent 100%)}
[dir="ltr"] .inst--lead .inst__photo img{-webkit-mask-image:linear-gradient(to right,#000 82%,transparent 100%);mask-image:linear-gradient(to right,#000 82%,transparent 100%)}
.inst--lead:hover .inst__photo img{transform:scale(1.03)}
/* warm glow over the photo so its golden light meets the card tone */
.inst--lead .inst__photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(90,50,20,.18),transparent 40%)}
/* the Palestinian flag as a slim seam where photo and text meet */
.inst--lead .inst__photo::before{content:"";position:absolute;top:0;bottom:0;inset-inline-end:0;width:10px;z-index:2;
  background:linear-gradient(180deg,#000 0 33.33%,#fff 33.33% 66.66%,#149954 66.66% 100%);box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.inst--lead .inst__body{position:relative;padding:clamp(1.75rem,4vw,3rem)}
.inst--lead .inst__body::before{content:"";position:absolute;top:0;inset-inline-start:0;width:0;height:0;z-index:3;
  border-block-start:34px solid #E4312B;border-inline-end:34px solid transparent}   /* the flag's red triangle, at the seam's top */
.inst--lead .inst__badge{background:#FBE3E2;color:var(--thread)}
.inst--lead .inst__est{background:#fff;border:1px solid #EADCC4;padding:.2rem .7rem;border-radius:99px;color:#7A5A2A;font-weight:600}
.inst--lead h3 .inst__link{color:var(--olive)}
.inst--lead .inst__body>p{color:#5A5145}
.lead-facts{list-style:none;margin:.25rem 0 1.5rem;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.lead-facts li{display:flex;flex-direction:column;gap:.15rem;padding:.85rem .9rem;border-radius:var(--r);background:rgba(255,255,255,.75);
  border:1px solid #EADCC4}
.lead-facts strong{font:700 1.35rem/1.1 var(--f-display);color:var(--thread)}
.lead-facts span{font-size:.8rem;line-height:1.4;color:#6B6152}
.lead-cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:.75rem}
.inst--lead .inst__open{margin-top:.25rem}
@media (max-width:640px){
  .inst--lead .inst__photo{min-height:240px}
  .inst--lead .inst__photo img,[dir="ltr"] .inst--lead .inst__photo img{-webkit-mask-image:linear-gradient(to top,transparent 0,#000 16%);mask-image:linear-gradient(to top,transparent 0,#000 16%)}
  .inst--lead .inst__photo::before{top:auto;inset-inline:0;bottom:0;width:auto;height:8px;
    background:linear-gradient(90deg,#000 0 33.33%,#fff 33.33% 66.66%,#149954 66.66% 100%)}
  .inst--lead .inst__body::before{border-block-start-width:26px;border-inline-end-width:26px}
  .lead-facts{grid-template-columns:1fr 1fr 1fr}.lead-facts strong{font-size:1.1rem}
}

/* ==========================================================================
   GIVING SECTION — live need
   Additive only. The existing .prog card keeps its layout; when a programme has
   a real figure behind it we add one small line and a footnote.
   ========================================================================== */
.prog--stat{position:relative}
.prog__stat{display:block;font:500 .84rem var(--f-text);color:var(--thread);
  margin-top:.15rem}
.progs__note{margin-top:1.5rem;font-size:.95rem;line-height:1.85;color:var(--ink-2);
  max-width:78ch}
.progs__note a{color:var(--olive-600);font-weight:600;white-space:nowrap}
.progs__note a:hover{text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   ABOUT — onward links
   A small panel that closes a section with the obvious next step. Additive:
   the existing document list above it is untouched.
   ========================================================================== */
.about-cta{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  margin-top:1.5rem;padding:1.1rem 1.25rem;background:var(--sage);
  border:1px solid var(--line);border-radius:var(--r)}
.about-cta__txt{display:grid;gap:.2rem;min-width:0}
.about-cta__txt strong{font:700 1rem var(--f-text);color:var(--ink)}
.about-cta__txt span{font-size:.9rem;line-height:1.65;color:var(--ink-2);max-width:62ch}
.about-cta .btn{flex:none}
@media (max-width:560px){
  .about-cta{flex-direction:column;align-items:stretch}
  .about-cta .btn{width:100%}
}

/* ==========================================================================
   CAREERS — vacancy cards
   Additive. Uses the same tokens as the rest of the site (arch radius, olive,
   gold, thread) so the new vacancies list belongs to the existing design.
   ========================================================================== */
.jobgrid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.job{display:flex;flex-direction:column;gap:.7rem;background:var(--paper);
  border:1px solid var(--line);border-top:3px solid var(--olive-600);
  border-radius:var(--r);padding:1.25rem 1.3rem 1.4rem;box-shadow:var(--lift)}
.job__top{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:space-between}
.job__type{font:600 .78rem var(--f-text);color:var(--olive-700);background:var(--olive-100);
  border-radius:999px;padding:.2rem .7rem}
.job__deadline{font-size:.78rem;color:var(--ink-2)}
.job h3{margin:0;font:700 1.12rem/1.4 var(--f-display);color:var(--ink)}
.job__meta{font-size:.85rem;color:var(--ink-2)}
.job__reqs{font-size:.9rem;line-height:1.75;color:var(--ink-2);
  background:var(--sage);border-radius:calc(var(--r) - 6px);padding:.7rem .85rem}
.job__reqs strong{display:block;color:var(--ink);font-size:.85rem;margin-bottom:.15rem}
.job__reqs p{margin:0;white-space:pre-line}
.job__apply{margin-top:auto;align-self:flex-start;gap:.5rem}
.job__apply svg{width:1rem;height:1rem}
.sec-head--center{text-align:center;margin-inline:auto}
.wrap-narrow{max-width:760px}
@media (max-width:520px){
  .job__apply{align-self:stretch;justify-content:center}
}

/* keeps the heading and the live sponsorship note in the same grid column */
.progs-intro{min-width:0}
.progs-intro .sec-head{margin-bottom:0}

/* careers: two-button call to action */
.apply-cta__btns{display:flex;flex-wrap:wrap;gap:.6rem}
@media (max-width:560px){.apply-cta__btns{flex-direction:column;align-items:stretch}
  .apply-cta__btns .btn{width:100%;justify-content:center}}

/* ==========================================================================
   ANNUAL STATEMENTS — search bar
   Additive. The existing type chips keep their appearance; a year select is
   placed beside them on the same line so the two read as one search.
   ========================================================================== */
.ar-search{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-bottom:1rem}
.ar-search .ar-filter{margin-bottom:0}
.ar-yearsel{display:flex;align-items:center;gap:.5rem}
.ar-yearsel label{font:600 .9rem var(--f-text);color:var(--ink-2)}
.ar-yearsel select{padding:.45rem 2rem .45rem .9rem;border:1.5px solid var(--line);border-radius:99px;
  background:var(--paper);color:var(--ink);font:600 .9rem var(--f-text);cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 1.1rem) calc(50% + 2px),calc(100% - .75rem) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.ar-yearsel select:hover{border-color:var(--olive-600)}
.ar-yearsel select:focus-visible{outline:2px solid var(--olive-600);outline-offset:2px}
.ar-clear{border:0;background:none;color:var(--thread);font:600 .88rem var(--f-text);
  cursor:pointer;padding:.35rem .2rem;text-decoration:underline;text-underline-offset:3px}
.ar-clear:hover{color:var(--olive-700)}
.ar-count{margin:0 0 1.75rem;font-size:.9rem;color:var(--ink-2);min-height:1.2em}
@media (max-width:640px){
  .ar-search{gap:.6rem}
  .ar-yearsel{width:100%}
  .ar-yearsel select{flex:1}
}

/* careers step 1: two Facebook pages side by side */
.howto__btns{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.35rem}
.howto__btns .howto__btn{margin-top:0}
@media (max-width:520px){
  .howto__btns{flex-direction:column;align-items:stretch}
  .howto__btns .howto__btn{width:100%;justify-content:center;text-align:center}
}

/* ==========================================================================
   FOOTER — Radio Palestine + in-house credit
   The radio is a plain <audio> element: nothing streams until it is pressed,
   and there is no third-party frame to be blocked by the server CSP.
   ========================================================================== */
.foot-radio{margin-top:.35rem}
.foot-radio__btn{display:flex;align-items:center;gap:.6rem;width:100%;
  border:1.5px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);
  color:var(--on-dark);border-radius:99px;padding:.5rem .85rem;
  font:600 .9rem var(--f-text);cursor:pointer;text-align:start;
  transition:background-color .2s,border-color .2s}
.foot-radio__btn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
.foot-radio__btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.foot-radio__ico{flex:0 0 30px;height:30px;display:grid;place-items:center;
  border-radius:50%;background:var(--thread);color:#fff}
.foot-radio__ico svg{width:17px;height:17px}
.foot-radio__txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.foot-radio__txt strong{font-weight:700}
.foot-radio__txt em{font-style:normal;font-size:.76rem;color:var(--on-dark-2)}

/* the four little bars, still until playing */
.foot-radio__bars{display:none;margin-inline-start:auto;align-items:flex-end;gap:2px;height:16px}
.foot-radio__bars i{width:3px;border-radius:2px;background:var(--gold);height:5px}
.foot-radio.is-playing .foot-radio__bars{display:flex}
.foot-radio.is-playing .foot-radio__bars i{animation:radio-bar .9s ease-in-out infinite}
.foot-radio.is-playing .foot-radio__bars i:nth-child(2){animation-delay:.15s}
.foot-radio.is-playing .foot-radio__bars i:nth-child(3){animation-delay:.3s}
.foot-radio.is-playing .foot-radio__bars i:nth-child(4){animation-delay:.45s}
@keyframes radio-bar{0%,100%{height:4px}50%{height:15px}}
/* reduced motion: show a steady dot instead of animating */
@media (prefers-reduced-motion:reduce){
  .foot-radio.is-playing .foot-radio__bars i{animation:none;height:9px}
  .foot-radio__btn{transition:none}
}
.foot-radio.is-playing .foot-radio__btn{background:rgba(217,179,91,.18);border-color:var(--gold)}
.foot-radio__btn[aria-pressed="true"] .foot-radio__ico{background:var(--gold);color:#3A2A08}

/* the in-house credit line */
.foot-credit{display:inline-flex;align-items:center;gap:.5rem;max-width:64ch;text-align:center}
.foot-credit__ico{flex:0 0 26px;height:26px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.1);color:var(--gold)}
.foot-credit__ico svg{width:15px;height:15px}
@media (max-width:640px){
  .foot-credit{max-width:100%}
  .foot-bottom{gap:.75rem}
}

/* ==========================================================================
   FOOTER — Palestine TV badge + the live overlay
   ========================================================================== */
.foot-tv{margin-top:.6rem}
.foot-tv__btn{display:flex;align-items:center;gap:.6rem;width:100%;
  border:1.5px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);
  color:var(--on-dark);border-radius:99px;padding:.5rem .85rem;
  font:600 .9rem var(--f-text);cursor:pointer;text-align:start;
  transition:background-color .2s,border-color .2s}
.foot-tv__btn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
.foot-tv__btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.foot-tv__ico{flex:0 0 30px;height:30px;display:grid;place-items:center;
  border-radius:50%;background:var(--thread);color:#fff}
.foot-tv__ico svg{width:17px;height:17px}
.foot-tv__txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.foot-tv__txt strong{font-weight:700}
.foot-tv__txt em{font-style:normal;font-size:.76rem;color:var(--on-dark-2)}

/* the overlay */
.tvmodal{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:clamp(.75rem,3vw,2rem)}
.tvmodal[hidden]{display:none !important}
.tvmodal__backdrop{position:absolute;inset:0;background:rgba(8,18,12,.93);backdrop-filter:blur(3px)}
.tvmodal__box{position:relative;width:min(1000px,96vw);max-height:94vh;overflow:auto;
  background:var(--olive-900);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r);box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
.tvmodal__head{display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.12)}
.tvmodal__head strong{flex:1;font:700 .98rem var(--f-text);color:var(--on-dark);min-width:0}
.tvmodal__dot{flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:var(--thread);
  box-shadow:0 0 0 4px rgba(200,60,60,.22);animation:tv-pulse 1.8s ease-in-out infinite}
@keyframes tv-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.tvmodal__alt{font:600 .82rem var(--f-text);color:var(--gold);white-space:nowrap;
  text-decoration:underline;text-underline-offset:3px}
.tvmodal__x{flex:0 0 36px;width:36px;height:36px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;font-size:1.5rem;line-height:1;display:grid;place-items:center}
.tvmodal__x:hover{background:rgba(255,255,255,.26)}
.tvmodal__stage{position:relative;aspect-ratio:16/9;background:#000}
.tvmodal__frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.tvmodal__note{margin:0;padding:.7rem 1rem .9rem;font-size:.78rem;color:var(--on-dark-2)}
body.tv-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){.tvmodal__dot{animation:none}}
@media (max-width:560px){
  .tvmodal{padding:0}
  .tvmodal__box{width:100vw;max-height:100dvh;border-radius:0;border:0;
    display:flex;flex-direction:column;justify-content:center}
  .tvmodal__alt{display:none}
}

/* ==========================================================================
   MESSAGES AND CHIPS INSIDE DARK SECTIONS — keep their own colours
   ==========================================================================
   .form-msg--ok / --err set their own background AND their own text colour, but
   they are <p> elements inside .section--ink, and:
       .section--ink p  { color: var(--on-dark-2) }   specificity 0,1,1
       .form-msg--ok    { color: #17482C }            specificity 0,1,0  <- loses
   The section won, so the "saved" and error messages were painted light-on-light
   and were almost unreadable.

   Rather than patching each message class, this states the rule once: anything
   that brings its own background brings its own text colour too, and is exempt
   from the section's forced palette. That covers messages, chips and any future
   component of the same shape.
   ========================================================================== */
.section--ink .form-msg,
.section--olive .form-msg,
.section--ink .msg-inline,
.section--olive .msg-inline{color:inherit}
.section--ink .form-msg--ok,
.section--olive .form-msg--ok{color:#17482C}
.section--ink .form-msg--err,
.section--olive .form-msg--err{color:#7A1720}

/* a message must stay readable on a phone in bright light, too */
.form-msg{line-height:1.7}

/* ==========================================================================
   ABOUT — vision, mission, objectives
   Content from the society's own profile document, presented as three linked
   panels so it reads as one statement rather than three loose paragraphs.
   ========================================================================== */
.about-blocks{display:grid;gap:1.1rem;margin:2rem 0 2.5rem}
.about-block{position:relative;background:var(--sage);border:1px solid var(--line);
  border-radius:var(--r);padding:1.3rem 1.4rem 1.4rem}
.about-block::before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;
  width:4px;height:100%;border-start-start-radius:var(--r);border-end-start-radius:var(--r)}
.about-block--vision::before{background:var(--olive-600)}
.about-block--mission::before{background:var(--thread)}
.about-block--objectives::before{background:var(--gold)}
.about-block h3{display:flex;align-items:center;gap:.55rem;margin:0 0 .6rem;
  font:700 1.08rem/1.4 var(--f-display);color:var(--olive-900)}
.about-block__ico{flex:0 0 auto;color:var(--thread);font-size:.95rem}
.about-block--objectives .about-block__ico{color:#B58A2C}
.about-block p{margin:0;line-height:1.9;color:var(--ink)}

.about-objectives{margin:0;padding:0;list-style:none;display:grid;gap:.55rem}
.about-objectives li{position:relative;padding-inline-start:1.5rem;line-height:1.85;color:var(--ink)}
.about-objectives li::before{content:"";position:absolute;inset-inline-start:.25rem;
  inset-block-start:.62em;width:7px;height:7px;border-radius:50%;
  background:var(--olive-600);opacity:.55}
@media (max-width:640px){
  .about-block{padding:1.1rem 1.15rem 1.2rem}
}

/* ==========================================================================
   ABOUT — registration and legal details
   A definition list rather than a table: it reads as label/value pairs, wraps
   properly on a phone, and needs no horizontal scrolling.
   ========================================================================== */
.about-legal{margin:2rem 0 2.5rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);overflow:hidden}
.about-legal__title{margin:0;padding:.85rem 1.2rem;background:var(--olive-900);
  color:var(--on-dark);font:700 1rem var(--f-display);
  border-bottom:1px solid var(--line)}
.about-legal__list{margin:0}
.about-legal__row{display:grid;grid-template-columns:minmax(9rem,14rem) 1fr;
  gap:1rem;padding:.72rem 1.2rem;border-bottom:1px solid var(--line)}
.about-legal__row:last-child{border-bottom:0}
.about-legal__row:nth-child(even){background:var(--sage)}
.about-legal__row dt{margin:0;font-weight:600;color:var(--olive-900);font-size:.92rem}
.about-legal__row dd{margin:0;color:var(--ink);line-height:1.7}
.about-legal__row dd bdi{unicode-bidi:isolate}
@media (max-width:560px){
  .about-legal__row{grid-template-columns:1fr;gap:.2rem;padding:.7rem 1rem}
  .about-legal__row dt{font-size:.85rem;color:var(--ink-2)}
}

/* The legal panel's title sits on --olive-900. It inherited --ink and rendered
   dark-on-dark — the same trap as .form-msg inside .section--ink. Stating the
   colour explicitly, and with enough specificity to survive the section rule. */
.about-legal .about-legal__title,
.section--ink .about-legal .about-legal__title,
.section--olive .about-legal .about-legal__title{color:var(--on-dark)}

/* ==========================================================================
   ABOUT — download the full profile
   A panel rather than a bare link: the file is worth explaining before someone
   downloads it, and it should look deliberate rather than an afterthought.
   ========================================================================== */
.doc-download{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  margin:1.75rem 0 0;padding:1.15rem 1.25rem;
  background:var(--sage);border:1px solid var(--line);
  border-inline-start:4px solid var(--thread);border-radius:var(--r)}
.doc-download__ico{flex:0 0 46px;height:46px;display:grid;place-items:center;
  border-radius:12px;background:#F8E7E8;color:var(--thread)}
.doc-download__ico svg{width:24px;height:24px}
.doc-download__body{flex:1;min-width:220px;display:grid;gap:.3rem}
.doc-download__body strong{font:700 1rem/1.5 var(--f-text);color:var(--ink)}
.doc-download__body span{font-size:.9rem;line-height:1.75;color:var(--ink-2);max-width:70ch}
.doc-download__btn{flex:none}
@media (max-width:560px){
  .doc-download{flex-direction:column;align-items:stretch}
  .doc-download__btn{width:100%;justify-content:center}
}

/* ==========================================================================
   DOCTORS — roster layout
   Two cards per row on a wide screen, one on a phone. Everything is sized for
   reading: 1rem credentials with generous line-height, and the credentials in a
   two-column list so a doctor with eight of them does not become a tall thin
   column of text.
   ========================================================================== */
.doc__body{flex:1;min-width:0;display:flex;flex-direction:column}
.doc__bio{margin:0;padding:0;list-style:none;display:grid;gap:.42rem;
  font-size:1rem;line-height:1.75;color:var(--ink)}
.doc__bio li{position:relative;padding-inline-start:1.2rem}
.doc__bio li::before{content:"";position:absolute;inset-inline-start:.1rem;
  inset-block-start:.65em;width:6px;height:6px;border-radius:50%;
  background:var(--olive-500)}

/* a hairline between the portrait and the text keeps the eye on one doctor */
.doc__rule{display:none}

@media (min-width:700px){
  .doc-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1180px){
  /* a doctor with many credentials gets a wider share of the row */
  .doc-grid{grid-template-columns:repeat(auto-fit,minmax(470px,1fr))}
}
@media (max-width:430px){
  .doc{flex-direction:column;gap:.9rem;padding:1rem}
  .doc__photo{flex:none;width:100%;max-width:190px;align-self:center}
}
@media print{
  .doc{break-inside:avoid;box-shadow:none}
}
/* ==========================================================================
   EXPLORE — the question at the foot of every inner page
   The block used to be titled "Continue exploring" on every page. It now asks a
   question written for that page, so it reads as a prompt from a person rather
   than a heading from a template. Styled as a question: a little larger, with a
   gold rule beneath so it separates from the section above it.
   ========================================================================== */
.explore{padding-block:3.25rem 3.5rem;background:var(--sage);
  border-top:1px solid var(--line)}
.explore__ask{font-family:var(--f-display);font-size:clamp(1.15rem,2.4vw,1.45rem);
  line-height:1.6;color:var(--olive-900);margin:0 auto 1.9rem;max-width:44ch;text-align:center}
.explore__ask::after{content:"";display:block;width:52px;height:3px;margin:.85rem auto 0;
  background:var(--gold);border-radius:3px}
.explore__grid{display:grid;gap:.85rem;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.explore__card{display:flex;gap:.8rem;align-items:flex-start;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:.95rem 1.05rem;text-decoration:none;color:inherit;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.explore__card strong{display:block;font:700 1rem/1.5 var(--f-text);color:var(--ink)}
.explore__card em{display:block;font-style:normal;font-size:.88rem;line-height:1.65;
  color:var(--ink-2);margin-top:.15rem}
@media (hover:hover){
  .explore__card:hover{transform:translateY(-3px);border-color:var(--olive-500);
    box-shadow:0 8px 22px rgba(21,41,31,.09)}
}
.explore__card--give{background:var(--olive-900);border-color:var(--olive-900)}
.explore__card--give strong{color:#fff}
.explore__card--give em{color:rgba(255,255,255,.78)}
.explore__card:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media (max-width:520px){
  .explore__grid{grid-template-columns:1fr}
  .explore__ask{font-size:1.1rem}
}

/* ==========================================================================
   HERO — one slide, or a rotating set
   With a single slide nothing below applies beyond the base: no dots, no fade,
   no rotation. The slideshow only engages when the office publishes two or more.
   ========================================================================== */
/* ==========================================================================
   HERO SLIDES — stacking by grid, not by absolute positioning.
   The first attempt used `position:absolute; inset:0` for the slides, which
   collapsed the active slide to ZERO HEIGHT: the video inside was playing happily
   at currentTime 1.36s inside a 1240x0 box, so the homepage showed an empty pale
   arch. Grid puts every slide in the same cell, so the cell is sized by the
   slides' own content and nothing can collapse. This works for an image, a video
   and an unknown aspect ratio without measuring anything.
   ========================================================================== */
.hero__media{position:relative;display:grid;grid-template-areas:'slide'}
.hero__slide{grid-area:slide;opacity:0;transition:opacity .9s ease;
  pointer-events:none;min-width:0}
.hero__slide.is-active{opacity:1;pointer-events:auto}
.hero__slide img,.hero__slide video{width:100%;height:100%;object-fit:cover;display:block}

/* Crossfade is presentation only. Anyone who asked their system to reduce motion
   gets an instant swap, which is the point of the setting. */
@media (prefers-reduced-motion:reduce){
  .hero__slide{transition:none}
}

/* The dots belong on the photograph, not in the gap beneath it. .hero__stage
   carries a bottom padding (for the scroll cue), so anchoring to `bottom:0` of
   the stage put them 675px below the media on a wide screen. The offset lifts them
   back onto the image by exactly that padding. */
.hero__dots{position:absolute;inset-inline-start:50%;transform:translateX(-50%);
  inset-block-end:4.5rem;display:flex;gap:.5rem;z-index:4}
.hero__dot{width:11px;height:11px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.45);cursor:pointer;
  box-shadow:0 0 0 1px rgba(0,0,0,.18);transition:background .2s,transform .2s}
.hero__dot:hover{background:rgba(255,255,255,.75)}
.hero__dot.is-active{background:#fff;transform:scale(1.25)}
.hero__dot:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media (max-width:640px){.hero__dots{inset-block-end:.6rem}.hero__dot{width:9px;height:9px}}

/* A blank eyebrow or lead should not leave a gap where it would have been. */
[data-hero-slot]:empty{display:none}