/* ==========================================================================
   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 */
  /*
   * The rose family.
   *
   * This is a society founded and run by women, and the palette had nothing of
   * that in it — olive, stone and a single tatreez red. Rose was chosen rather
   * than pink: it is the colour already present in Palestinian tatreez
   * embroidery, it sits beside the olive without fighting it, and it keeps the
   * dignity a hospital and an orphan-care institution need. Nothing here is
   * decoration for its own sake; each tone has a job and a measured contrast.
   *
   *   --rose-700  text and small UI        6.7:1 on white, 5.9:1 on sage
   *   --rose      large text, icons, rules 4.0:1 on white — never body copy
   *   --rose-gold accents on dark surfaces 4.4:1 on olive
   *   --blush     a surface a shade warmer than sage
   *   --blush-100 hairlines and card edges
   */
  --rose-700:#8E4458;
  --rose:#B4687A;
  --rose-gold:#C98B96;
  --blush:#FBF1F3;
  --blush-100:#F0DCE1;
  --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:939px){
  .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 ---------- */
/*
 * Calm is decided in two places now: the visitor's system, and the site's own
 * motion switch. The media query stays as the default and as the fallback for
 * anyone without JavaScript; :not(.motion-on) is what lets someone keep the
 * system setting for everything else and still see this site move. The
 * .motion-off rule is the opposite case — motion turned off here by choice,
 * on a system that never asked for it.
 */
@media (prefers-reduced-motion:reduce){
  html:not(.motion-on),html:not(.motion-on) *,html:not(.motion-on) *::before,html:not(.motion-on) *::after{
    transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
html.motion-off,html.motion-off *,html.motion-off *::before,html.motion-off *::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:939px){
  .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)}
/* The aside gives way at 1080px, not 900.
   Between those two widths the 300px sidebar left the reading column at about
   520px — narrower than the board table needs — so the table scrolled
   sideways inside a page that otherwise looked fine. Measured: at 1080px the
   column is 700px, which clears the table with room; below that one column is
   simply the better use of the width. */
@media (max-width:1080px){.page-grid{grid-template-columns:1fr}.page-aside{position:static}}
/* Once the aside sits under the article rather than beside it, its cards have
   the full width to themselves and look stranded. Side by side they read as a
   footer to the page, which is what they have become. */
@media (min-width:620px) and (max-width:1080px){
  .page-aside{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));align-items:start}
}

.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}

/* Below 620px no column arrangement fits, so each row becomes a small card:
   the heading of each column is printed beside its value from the data-label
   the markup carries. Sideways scrolling to read a name is worse than a taller
   page, and on a phone it is close to unusable. */
@media (max-width:620px){
  .table-wrap{overflow-x:visible;border:0;border-radius:0}
  .data-table{min-width:0;display:block}
  .data-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .data-table tbody,.data-table tr,.data-table td{display:block;width:100%}
  .data-table tr{border:1px solid var(--line);border-radius:var(--r);margin-bottom:.7rem;background:#fff;padding:.3rem .2rem}
  .data-table tr:last-child{margin-bottom:0}
  .data-table tbody tr:hover{background:#fff}
  .data-table td{border-bottom:0;padding:.42rem .95rem;display:flex;gap:.75rem;align-items:baseline}
  .data-table td:empty{display:none}
  .data-table td::before{content:attr(data-label);flex:0 0 7.5rem;color:var(--ink-2);font-size:.85rem;font-weight:600}
  .data-table td:first-child{font-weight:600;font-size:1.02rem;padding-top:.7rem}
  .data-table td:first-child::before{display:none}
  .data-table td:first-child{display:flex;align-items:center}
  .data-table tr td:last-child{padding-bottom:.7rem}
}
.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}

/* --------------------------------------------------------------------------
   How narrow the full menu may get before it becomes the burger.

   It used to fold away below 1320px, which is wider than most laptops: a
   1024-wide window — and any window on a screen running Windows display
   scaling, which shrinks the page's own idea of its width — got the burger
   even though there was room for the menu. Measured laid out, the five menu
   items, the wordmark and the actions need about 990px side by side, so the
   fold now happens at 999px and two tiers of tightening carry it down to
   there:

     1481px and up   the menu at full size
     1200–1480px     slightly tighter spacing, the English name dropped
     940–1199px      tighter again, and the sound button steps aside —
                     it is a nicety, and the menu is not
     939px and below the burger

   At 940px the header needs 841px, so the fold is set with room to spare
   rather than at the exact width where it would start to crowd.

   The numbers below were taken from the rendered header, not estimated;
   navfit.js re-measures them.
   -------------------------------------------------------------------------- */
@media (max-width:1480px){
  .brand__en{display:none}
}
@media (min-width:940px) and (max-width:1480px){
  .nav>a,.navdrop__btn{padding-inline:.55rem;font-size:.94rem}
}
@media (min-width:940px) and (max-width:1199px){
  .nav{gap:0}
  .nav>a,.navdrop__btn{padding-inline:.34rem;font-size:.88rem}
  .navdrop__btn svg{margin-inline-start:.1rem}
  .brand__ar{font-size:.95rem}
  .brand__mark img{width:40px;height:40px}
  .head-actions{gap:.35rem}
  .sound-toggle{display:none}
  .head-actions .btn-donate{padding-inline:.7rem;font-size:.88rem}
  .lang-switch a{padding:.35rem .5rem;font-size:.85rem}
}
.page-grid>*{min-width:0}
@media (max-width:1080px){.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:939px){
  .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:939px){
  .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 ---------- */
/* The keyframes are declared outside the query on purpose: defined inside it
   they would not exist at all on a system asking for reduced motion, and the
   .motion-on rule below — a visitor who turned motion back on for this site —
   would animate to nothing. */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    html:not(.motion-off) :is(.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%}
  }
  html.motion-on :is(.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%}
}

/* ---------- 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:939px){ .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%}
@keyframes kenburns{from{transform:scale(1.08)}to{transform:scale(1)}}
@media (prefers-reduced-motion:no-preference){
  html:not(.motion-off) .hero--building .hero__media img{animation:kenburns 18s ease-out both}
}
html.motion-on .hero--building .hero__media img{animation:kenburns 18s ease-out both}
.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 */
@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}
@media (prefers-reduced-motion:no-preference){
  html:not(.motion-off) body>main,html:not(.motion-off) body>.site-foot{animation:pt-page-in .7s cubic-bezier(.2,.7,.2,1) .18s both}
}
html.motion-on body>main,html.motion-on body>.site-foot{animation:pt-page-in .7s cubic-bezier(.2,.7,.2,1) .18s both}

/* 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}}
@keyframes pt-page-out{to{opacity:.5;transform:perspective(1400px) rotateY(calc(var(--pt-tilt,4deg) * -1.5)) scale(.96)}}
@media (prefers-reduced-motion:no-preference){
  html:not(.motion-off).pt-leave body>main,html:not(.motion-off).pt-leave body>.site-foot{animation:pt-page-out .46s cubic-bezier(.6,0,.4,1) both;transform-origin:50% 30%}
}
html.motion-on.pt-leave body>main,html.motion-on.pt-leave body>.site-foot{animation:pt-page-out .46s cubic-bezier(.6,0,.4,1) both;transform-origin:50% 30%}

/*
 * Reduced motion: still a direction, just a much smaller one.
 *
 * This used to be a plain fade, and a plain fade reads as the page simply
 * appearing — which is what it was reported as. Someone who asks their system
 * for less motion is asking not to be thrown around, not to be given nothing;
 * so the curtain keeps the same right-to-left sense of travel and the same
 * easing, but moves a short distance instead of the full width of the screen,
 * and the gold band that races across the viewport stays hidden.
 *
 * The full-width sweep is still what everyone else sees. It returns the moment
 * «تقليل الحركة» is turned off in Windows (Settings ▸ Accessibility ▸ Visual
 * effects ▸ Animation effects), on macOS under Accessibility ▸ Display, or in
 * the equivalent setting on a phone.
 */
@media (prefers-reduced-motion:reduce){
  html:not(.motion-on) .pt__panel{--pt-slide:44px;animation:pt-calm-out .34s cubic-bezier(.4,0,.2,1) both!important}
  html:not(.motion-on)[dir="rtl"] .pt__panel{--pt-slide:-44px}
  html:not(.motion-on).pt-leave .pt__panel{animation:pt-calm-in .3s cubic-bezier(.4,0,.2,1) both!important}
  html:not(.motion-on) .pt__stitch{display:none}
  html:not(.motion-on) .pt__logo{animation:pt-calm-logo .3s ease both!important}
  html:not(.motion-on).pt-leave .pt__logo{animation:pt-calm-logo-in .26s ease both!important}
}
/* The keyframes live outside the query so the .motion-off rules below — motion
   switched off here, on a system that never asked for it — have something to
   animate to. */
@keyframes pt-calm-out{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(var(--pt-slide))}}
@keyframes pt-calm-in{from{opacity:0;transform:translateX(calc(var(--pt-slide) * -1))}to{opacity:1;transform:translateX(0)}}
@keyframes pt-calm-logo{from{opacity:1}to{opacity:0}}
@keyframes pt-calm-logo-in{from{opacity:0}to{opacity:1}}
html.motion-off .pt__panel{--pt-slide:44px;animation:pt-calm-out .34s cubic-bezier(.4,0,.2,1) both!important}
html.motion-off[dir="rtl"] .pt__panel{--pt-slide:-44px}
html.motion-off.pt-leave .pt__panel{animation:pt-calm-in .3s cubic-bezier(.4,0,.2,1) both!important}
html.motion-off .pt__stitch{display:none}
html.motion-off .pt__logo{animation:pt-calm-logo .3s ease both!important}
html.motion-off.pt-leave .pt__logo{animation:pt-calm-logo-in .26s ease both!important}
@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}

/* ---------------------------------------------------------------------------
   The publications hub and the presidents list reuse .give-card.
   On the publications hub the whole card is a link, which made every line of
   text inside it inherit the underline meant for inline links.
   --------------------------------------------------------------------------- */
a.give-card,
a.give-card:hover{text-decoration:none}
a.give-card h3,
a.give-card p,
a.give-card .note{text-decoration:none}
a.give-card h3{text-decoration:none}

/* ==========================================================================
   OCTOBER 2026 — the graphical pass

   Three additions, in one place so they can be read together: a picture at the
   head of each menu panel, a proper empty state for a section with nothing in
   it yet, and the centenary shield. All three lean on the rose tokens declared
   at the top of this file.
   ========================================================================== */

/* ---------- the picture at the head of a menu panel ---------------------- */
/*
 * A dropdown that is only a list of links tells you nothing about the place it
 * leads to. The picture is decorative, so it is hidden from assistive software
 * and never carries meaning the text does not already give.
 *
 * It is dropped on phones. There the panel is already inside a full-screen
 * sheet and every pixel of height costs a link the reader can see.
 */
.navdrop__art{display:none}
@media (min-width:940px){
  .navdrop__panel{padding-top:0;overflow:hidden}
  .navdrop__art{
    display:block;position:relative;margin:0 0 .45rem;overflow:hidden;
    border-bottom:1px solid var(--blush-100);background:var(--blush);
    /* inherit would resolve against the figure, not the panel, so the radius is
       named outright — a square corner over a rounded panel is the notch that
       was showing along the top edge. */
    border-start-start-radius:var(--r);border-start-end-radius:var(--r)}
  /* 360x118 — the drawing's own shape, so nothing is cropped and no shape is
     cut through the middle at the top edge. */
  .navdrop__art svg{display:block;width:100%;height:auto;aspect-ratio:360/118}
  /* The caption sits under the drawing rather than over it. Laid on top it
     needed a dark scrim, and the scrim fell exactly across the tatreez band —
     the best part of the picture — to light up one line of text. */
  .navdrop__art figcaption{
    padding:.5rem .9rem .55rem;
    font:600 .8rem/1.45 var(--f-text);color:var(--rose-700);
    background:var(--blush)}
  /* the mega panel is a grid; its band spans every column */
  .navdrop--mega .navdrop__art{grid-column:1/-1}
  /* the band variant: no scene, just the stitching and the caption */
  .navdrop__art--band{
    height:auto;padding:0;background:var(--olive-900);
    display:flex;align-items:center;justify-content:flex-start;
    border-bottom:0}
  .navdrop__art--band::before{
    content:"";flex:none;align-self:stretch;width:100%;position:absolute;inset:0;
    background:url("/assets/img/tatreez-band-gold.svg") repeat-x center/auto 30px;opacity:.5}
  .navdrop__art--band figcaption{position:relative;inset:auto;background:none;padding:.85rem 1.1rem}
}

/* ---------- a section with nothing in it yet ----------------------------- */
/*
 * These pages replace a grey emoji. An empty section is not a fault — it is
 * work the office has not filed yet — so the illustration is an embroidery
 * hoop part-way through its motif, and the words say what will appear here
 * rather than apologising.
 */
.empty{max-width:34rem;margin-inline:auto;text-align:center;padding:2.6rem 1.25rem 2.9rem}
.empty__art{width:148px;height:148px;margin:0 auto .9rem;display:block}
.empty h2{font-size:clamp(1.15rem,2.6vw,1.45rem);color:var(--olive);margin:0 0 .5rem}
.empty p{color:var(--ink-2);line-height:1.8;margin:0 auto 1.4rem;max-width:30rem}
.empty__hint{
  display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.3rem;
  padding:.4rem .85rem;border-radius:999px;
  background:var(--blush);border:1px solid var(--blush-100);
  color:var(--rose-700);font:600 .82rem/1 var(--f-text)}
.empty__hint::before{
  content:"";width:7px;height:7px;transform:rotate(45deg);background:var(--rose);flex:none}
@media (max-width:520px){
  .empty{padding:2rem .75rem 2.2rem}
  .empty__art{width:118px;height:118px}
}

/* ---------- the centenary shield ----------------------------------------- */
/*
 * A hundred years is the single largest fact about this society, and the site
 * stated it only in words. The plaque is photographed on white, so it is given
 * a blush field and a stitched rule rather than a box, and it sits beside the
 * sentence it illustrates instead of floating above it.
 */
.centenary{background:
  radial-gradient(70% 90% at 78% 12%,rgba(201,139,150,.18),transparent 62%),
  linear-gradient(180deg,var(--blush) 0%,var(--paper) 86%)}
.centenary__grid{
  display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);
  gap:clamp(1.6rem,5vw,4rem);align-items:center}
.centenary__plate{position:relative;margin:0}
.centenary__plate img{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 22px 26px rgba(142,68,88,.30)) drop-shadow(0 3px 4px rgba(23,36,28,.14))}
.centenary__plate::after{
  content:"";position:absolute;inset-inline-start:-10px;inset-block:14% 14%;width:3px;
  border-radius:3px;background:repeating-linear-gradient(
    to bottom,var(--rose) 0 9px,transparent 9px 17px)}
.centenary__eyebrow{color:var(--rose-700)}
.centenary h2{color:var(--olive);margin-bottom:.9rem}
.centenary__lead{font-size:clamp(1.02rem,1.9vw,1.14rem);line-height:1.85;color:var(--ink-2);margin-bottom:1.3rem}
.centenary__facts{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.5rem;padding:0;list-style:none}
.centenary__facts li{
  display:inline-flex;align-items:baseline;gap:.4rem;
  padding:.5rem .9rem;border-radius:999px;
  background:var(--paper);border:1px solid var(--blush-100);
  font:500 .9rem/1 var(--f-text);color:var(--ink-2)}
.centenary__facts b{font:700 1.05rem/1 var(--f-display);color:var(--rose-700)}
@media (max-width:860px){
  .centenary__grid{grid-template-columns:1fr;justify-items:center;text-align:center}
  .centenary__plate{max-width:300px}
  .centenary__plate::after{display:none}
  .centenary__facts{justify-content:center}
}

/* ---------- a stitched rule, for the seam between two sections ----------- */
/*
 * Drawn in CSS rather than loaded as an image: it is three gradients, it takes
 * the page's own colours, and it costs no request.
 */
.stitch-rule{height:14px;border:0;margin:0;background:
  repeating-linear-gradient(90deg,var(--rose) 0 10px,transparent 10px 20px) center/auto 2px no-repeat,
  repeating-linear-gradient(90deg,var(--olive-100) 0 6px,transparent 6px 12px) center/auto 2px no-repeat;
  opacity:.7}

/* ---------- small feminine touches on what was already here -------------- */
/* The eyebrow above a section heading now reads in rose; it is the one line of
   colour on most pages and the olive repeated it for no reason. */
.section--paper .eyebrow,.page-head .eyebrow{color:var(--rose-700)}
/* The quick tiles' icon discs pick up a blush ground so the row under the hero
   is not four identical grey circles. */
.quick__ico{background:var(--blush);color:var(--rose-700)}
.quick:hover .quick__ico{background:var(--blush-100)}
/* A card lifts into blush rather than grey. */
.give-card:hover,.explore__card:hover{border-color:var(--rose-gold)}

/* ==========================================================================
   منسوبي الجمعية — the membership page
   ========================================================================== */
.mem-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);
  gap:clamp(1.6rem,5vw,3.5rem);align-items:start}
.mem-intro h2{color:var(--olive);margin-bottom:.8rem}
.mem-intro .lead{font-size:clamp(1.02rem,1.9vw,1.14rem);line-height:1.9;color:var(--ink);margin-bottom:1rem}
.mem-intro p{line-height:1.9;color:var(--ink-2)}

.mem-points{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.mem-points li{padding:.85rem 1rem;border:1px solid var(--blush-100);border-radius:var(--r);
  background:var(--blush)}
.mem-points strong{display:block;font:700 .98rem/1.5 var(--f-text);color:var(--rose-700)}
.mem-points em{display:block;font-style:normal;font-size:.88rem;line-height:1.7;color:var(--ink-2);margin-top:.15rem}

.mem-card{background:var(--sage);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.3rem 1.4rem}
.mem-card h3{margin:0 0 .7rem;font-size:1.02rem;color:var(--olive)}
.mem-card .alist{margin:0 0 .9rem;padding-inline-start:1.1rem}
.mem-card .alist li{margin:.3rem 0;font-size:.92rem;line-height:1.7}
.mem-req{display:inline-block;margin-inline-start:.3rem;padding:.08rem .45rem;border-radius:999px;
  background:var(--rose-700);color:#fff;font-size:.72rem;font-weight:600;vertical-align:middle}

.mem-narrow{max-width:46rem}
.mem-check{display:flex;gap:.7rem;align-items:flex-end;flex-wrap:wrap}
.mem-check .afield{flex:1 1 16rem;margin:0}

/* the answer to a lookup: three states, each saying plainly which it is */
.mem-answer{border-radius:var(--r);padding:.95rem 1.15rem;margin:0 0 1.1rem;
  border:1px solid var(--line);background:var(--paper)}
.mem-answer p{margin:0;line-height:1.75}
.mem-answer--found{border-color:#9CC3AC;background:#F2F8F4}
.mem-answer--none{border-color:var(--blush-100);background:var(--blush)}
.mem-answer--none .btn{margin-top:.8rem}
.mem-answer--err{border-color:#E3B4B4;background:#FDF4F4}

.mem-form{display:grid;gap:1rem}
.mem-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}
.mem-form .afield{margin:0}
.mem-form label{display:block;font-weight:600;margin-bottom:.35rem;color:var(--ink)}
.mem-star{color:var(--thread)}
/* Both forms on the page share one field style. The lookup used to miss out,
   because the rule named .mem-form only — and its single input rendered at the
   browser's default size, next to a full-width form. */
.mem-form input[type="text"],.mem-form input[type="email"],.mem-form input[type="tel"],
.mem-check input[type="text"]{
  width:100%;padding:.72rem .85rem;border:1px solid var(--line);border-radius:var(--r-sm);
  font:inherit;font-size:1rem;background:var(--paper);transition:border-color .15s,background .15s}
.mem-form input:focus,.mem-check input:focus{outline:none;border-color:var(--olive-600);background:#fff}
.mem-check label{display:block;font-weight:600;margin-bottom:.35rem;color:var(--ink)}
.mem-check .btn{flex:0 0 auto;padding-block:.72rem}
.mem-form input[type="file"]{width:100%;font-size:.92rem}
.mem-form .help{margin:.3rem 0 0;font-size:.85rem;color:var(--ink-2);line-height:1.6}
.mem-submit{margin-top:.5rem}
.mem-submit .anote{margin-top:.7rem}

/* the ID field, with its verdict shown as it is typed */
.nid{position:relative}
.nid input{font-variant-numeric:tabular-nums;letter-spacing:.14em;padding-inline-end:2.4rem!important}
.nid__mark{position:absolute;inset-inline-end:.75rem;top:50%;transform:translateY(-50%);
  font-size:1.05rem;line-height:1;pointer-events:none;font-weight:700}
.nid.is-ok input{border-color:#2F7D4F;background:#F4FAF6}
.nid.is-ok .nid__mark::before{content:"\2713";color:#2F7D4F}
.nid.is-bad input{border-color:#C06A1E;background:#FFFAF4}
.nid.is-bad .nid__mark::before{content:"!";color:#C06A1E}
.help.is-ok{color:#2F7D4F;font-weight:600}
.help.is-bad{color:#C06A1E;font-weight:600}

@media (max-width:860px){
  .mem-intro{grid-template-columns:1fr}
  .mem-aside{order:-1}
}
@media (max-width:520px){
  .mem-check{flex-direction:column;align-items:stretch}
  .mem-check .btn{width:100%}
}

/* ==========================================================================
   فراشة — the guide butterfly

   It is positioned in PAGE coordinates rather than viewport ones, so once it
   perches above a button it stays there while the reader scrolls, the way a
   real one would. Every movement is a transform on a composited layer, so the
   browser never re-lays-out the page to fly it across.

   Three rules this component must never break:
     · it cannot take a click — pointer-events:none on all of it, so it can
       sit above تبرّع الآن without ever being in the way;
     · it stops — it settles after a long stillness, and the header's motion
       switch ends it at any time;
     · it does not exist for anyone who asked for less motion.
   ========================================================================== */
.bf{
  /* left, not inset-inline-start. The page is RTL, so the logical property
     anchors the element to the RIGHT edge — and then every x computed from
     getBoundingClientRect(), which is physical, pushed it off the screen.
     Transforms are not direction-aware either, so the anchor must not be. */
  position:absolute;top:0;left:0;z-index:60;
  width:var(--bf-size,46px);pointer-events:none;
  transform:translate3d(var(--bf-x,0px),var(--bf-y,0px),0);
  transition:transform var(--bf-dur,1.5s) cubic-bezier(.42,.02,.34,1),opacity .55s ease;
  opacity:0;will-change:transform}
.bf[hidden]{display:none}
.bf.is-live{opacity:1}
.bf.is-gone{opacity:0}
.bf__arc,.bf__tilt{display:block}
.bf__svg{display:block;width:100%;height:auto;
  transform:perspective(260px) rotateX(var(--bf-pitch,0deg));transform-origin:50% 50%}
/* the shadow lives on the un-rotated layer, so it always falls straight down
   however the creature is turned */
.bf__arc{filter:drop-shadow(0 6px 10px rgba(58,38,48,.28))}

/* the arc: the butterfly rises through the middle of a flight and comes down
   again, which is what stops a journey reading as a slide */
.bf.is-flying .bf__arc{animation:bf-arc var(--bf-dur,1.5s) cubic-bezier(.3,0,.4,1) both}
@keyframes bf-arc{0%{transform:translateY(0)}48%{transform:translateY(var(--bf-lift,-54px))}100%{transform:translateY(0)}}

/* banking into the direction of travel */
.bf__tilt{transform:rotate(var(--bf-rot,0deg));transition:transform var(--bf-dur,1.5s) ease-in-out}
.bf__svg{transition:transform var(--bf-dur,1.5s) ease-in-out}

/*
 * The flap. Each wing hinges at the body: the right wing's bbox starts at the
 * body, so it turns about its own leading edge, and the left wing about its
 * trailing one. transform-box:fill-box is what makes those percentages mean
 * the wing's own box rather than the whole drawing.
 */
.bf__wing{transform-box:fill-box;animation:bf-flap var(--bf-flap,2.6s) ease-in-out infinite}
.bf__wing--r{transform-origin:0% 50%}
.bf__wing--l{transform-origin:100% 50%}
@keyframes bf-flap{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.3)}}
.bf.is-flying .bf__wing{--bf-flap:.17s}
.bf.is-resting .bf__wing{--bf-flap:3.2s}
.bf.is-still .bf__wing{animation:none;transform:none}

/* following the cursor: the script drives position every frame, so the
   CSS transition must not smooth it a second time */
.bf.is-following{transition:opacity .55s ease}
.bf.is-following .bf__tilt{transition:none}
.bf.is-following .bf__svg{transition:none}
.bf.is-following .bf__wing{--bf-flap:.2s}
.bf.is-following.is-calm .bf__wing{--bf-flap:.85s}

/* smaller, and a shorter journey, where the screen is small and the chat
   bubble already occupies a corner */
@media (max-width:939px){
  .bf{--bf-size:34px;--bf-lift:-34px}
}

/*
 * Nobody who asked their system for less motion sees this at all. The script
 * also refuses to start in that case; this is the belt to its braces, and it
 * covers the moment before the script has run.
 */
@media (prefers-reduced-motion:reduce){
  html:not(.motion-on) .bf{display:none!important}
}
html.motion-off .bf{display:none!important}
@media print{.bf{display:none}}

/* ---------- the motion switch in the header ---------------------------- */
/*
 * Matches the sound toggle beside it, because they do the same kind of job:
 * both turn off something the site does that not everyone wants.
 */
.motion-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}
.motion-toggle:hover{background:var(--sage)}
.motion-toggle svg{width:19px;height:19px}
.motion-toggle__off{display:none}
.motion-toggle[aria-pressed="false"] .motion-toggle__on{display:none}
.motion-toggle[aria-pressed="false"] .motion-toggle__off{display:block;color:var(--ink-2)}
.motion-toggle:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media (max-width:400px){.motion-toggle{width:36px;height:36px}}
/*
 * It stays visible where the header is tight, unlike the sound button.
 * Measured: the header needs 841px of 940 at that width, so a 40px control
 * fits with room. And hiding it there would have hidden it from exactly the
 * person who needs it most — a 1008px laptop is the width this was built for.
 */
@media (min-width:940px) and (max-width:1199px){.motion-toggle{width:34px;height:34px}}

/*
 * Below 760px the two toggles together push the header wider than the screen.
 * The sound button gives way rather than the motion one: muting a sound is a
 * preference, stopping animation is an accessibility need, and the site's
 * sounds are already silent until something plays.
 */
@media (max-width:759px){
  .sound-toggle{display:none}
}

/* ==========================================================================
   الهيكلية — the organization chart (public page)
   ========================================================================== */
.oc-section{padding-block:clamp(1.5rem,4vw,3rem)}
.oc-bar{display:flex;flex-wrap:wrap;gap:.7rem 1.4rem;justify-content:space-between;align-items:center;margin-bottom:.9rem}
.oc-bar__group{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.oc-bar__lbl{font-size:.85rem;color:var(--ink-60);margin-inline-end:.2rem}
.oc-btn{min-width:42px;height:42px;padding:0 .8rem;border-radius:var(--r-sm);cursor:pointer;
  border:1px solid rgba(23,36,28,.2);background:#fff;color:var(--olive-900);font:600 1.05rem var(--f-text);
  display:inline-flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.oc-btn--txt{font-size:.9rem}
.oc-btn:hover:not(:disabled){background:var(--olive-100);border-color:var(--olive-500)}
.oc-btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.oc-btn:disabled{opacity:.5;cursor:progress}

.oc-stage{position:relative;height:clamp(420px,72vh,820px);border-radius:var(--r-lg);overflow:hidden;
  border:1px solid rgba(23,36,28,.12);background:
    radial-gradient(circle at 1px 1px,rgba(23,36,28,.09) 1px,transparent 0) 0 0/24px 24px,#FBFAF6}
.oc-stage:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.oc-stage:fullscreen{border-radius:0;height:100vh}
.oc-svg{display:block;width:100%;height:100%;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.oc-svg.is-panning{cursor:grabbing}
.oc-hint{position:absolute;inset-inline:0;bottom:.6rem;margin:0;text-align:center;font-size:.8rem;color:var(--ink-60);
  pointer-events:none;opacity:.85}
.oc-noscript{padding:2rem;text-align:center}
.oc-node{cursor:pointer;transition:opacity .2s}
.oc-node.is-dim{opacity:.22}
.oc-link{transition:opacity .2s}
.oc-link.is-dim{opacity:.15}
.oc-node:hover .oc-box{filter:drop-shadow(0 4px 8px rgba(23,36,28,.25))}
.oc-node.is-selected .oc-box{stroke:var(--gold);stroke-width:3}

.oc-text{margin-top:1.4rem;border:1px solid rgba(23,36,28,.12);border-radius:var(--r);background:#fff}
.oc-text>summary{cursor:pointer;padding:.9rem 1.2rem;font-weight:600;list-style:none}
.oc-text>summary::-webkit-details-marker{display:none}
.oc-text>summary::before{content:"▾";display:inline-block;margin-inline-end:.5rem;transition:transform .2s}
.oc-text:not([open])>summary::before{transform:rotate(90deg)}
html[dir="rtl"] .oc-text:not([open])>summary::before{transform:rotate(-90deg)}
.oc-tree{padding:0 1.2rem 1.2rem}
.oc-tree ul{list-style:none;margin:.35rem 0 0;padding-inline-start:1.3rem;border-inline-start:2px solid var(--olive-100)}
.oc-tree>ul{padding-inline-start:0;border:0}
.oc-tree li{margin:.45rem 0}
.oc-tree li>strong{display:block}
.oc-tree li>span{display:block;font-size:.9rem;color:var(--ink-60)}

/* printing: only the chart, landscape */
#oc-print{display:none}
@media print{
  body.oc-printing>*:not(#oc-print){display:none!important}
  body.oc-printing #oc-print{display:block!important;padding:0}
  body.oc-printing #oc-print h1{font-size:18pt;margin:0 0 6mm;color:#000}
  body.oc-printing #oc-print svg{width:100%;height:auto;max-height:175mm}
  @page{size:A4 landscape;margin:12mm}
}

/* ---- the register in numbers (/members) ---- */
.mem-figs{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:2rem}
.mem-fig{background:#fff;border:1px solid rgba(18,48,31,.1);border-radius:var(--r-lg,16px);padding:1.2rem;display:flex;flex-direction:column;gap:.3rem}
.mem-fig b{font-size:2.2rem;line-height:1;color:var(--olive-700,#2F5D3F);font-variant-numeric:tabular-nums}
.mem-fig span{font-size:.92rem;color:var(--ink-60,#5a6b60)}
.mem-bars__title{font-size:1.05rem;margin:0 0 .8rem}
.mem-bars{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;max-width:680px}
.mem-bars li{display:grid;grid-template-columns:4.2rem 1fr 3.2rem;gap:.7rem;align-items:center}
.mem-bars__label{font-variant-numeric:tabular-nums;color:var(--ink-60,#5a6b60);font-size:.9rem}
.mem-bars__track{height:14px;border-radius:99px;background:rgba(18,48,31,.08);overflow:hidden}
.mem-bars__bar{display:block;height:100%;border-radius:99px;background:var(--olive-500,#4C8A63)}
.mem-bars__n{font-variant-numeric:tabular-nums;font-weight:600;font-size:.9rem}