/* ==========================================================================
   دانشگاه الف — LIGHT theme, art-school identity
   Palette: Prussian #051231 · Orange #ffae00 · Dark-cyan #568b90 · Dust #d8d8d8 · Onyx #131313
   Vazir (display) + Space Mono (Latin/data). RTL.
   ========================================================================== */

@font-face{font-family:"Anjoman";src:url("../fonts/anjoman/Anjoman-FaNum-ExtraLight.woff") format("woff");font-weight:200;font-display:swap}
@font-face{font-family:"Anjoman";src:url("../fonts/anjoman/Anjoman-FaNum-Light.woff") format("woff");font-weight:300;font-display:swap}
@font-face{font-family:"Anjoman";src:url("../fonts/anjoman/Anjoman-FaNum-Regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Anjoman";src:url("../fonts/anjoman/Anjoman-FaNum-Medium.woff") format("woff");font-weight:500;font-display:swap}
@font-face{font-family:"Anjoman";src:url("../fonts/anjoman/Anjoman-FaNum-SemiBold.woff") format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"Anjoman";src:url("../fonts/anjoman/Anjoman-FaNum-Bold.woff") format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"Anjoman";src:url("../fonts/anjoman/Anjoman-FaNum-ExtraBold.woff") format("woff");font-weight:800;font-display:swap}
@font-face{font-family:"Anjoman";src:url("../fonts/anjoman/Anjoman-FaNum-Black.woff") format("woff");font-weight:900;font-display:swap}
/* Space Mono — self-hosted (no external Google Fonts dependency) */
@font-face{font-family:"Space Mono";src:url("../fonts/space-mono/SpaceMono-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Space Mono";src:url("../fonts/space-mono/SpaceMono-Bold.ttf")    format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Space Mono";src:url("../fonts/space-mono/SpaceMono-Italic.ttf")  format("truetype");font-weight:400;font-style:italic;font-display:swap}

:root{
  --prussian:#051231;
  --onyx:#131313;
  --orange:#ffae00;
  --orange-deep:#e09c00;
  --accent-text:#8f6200; /* amber for small TEXT/icons on light — WCAG AA (4.9:1) */
  --cyan:#568b90;
  --cyan-text:#406d71;   /* darker cyan for small TEXT on light — AA (5.3:1) */
  --dust:#d8d8d8;

  --bg:#f3f5f8;          /* page background (light) */
  --surface:#ffffff;     /* cards / raised */
  --surface-2:#eef1f6;   /* alt sections — subtle, almost-continuous with --bg */
  --text:#2a2f3a;        /* body text */
  --text-dim:#646b7e;    /* muted — AA on bg/white/alt (≥4.5:1) */
  --heading:#051231;     /* headings (prussian) */
  --dark:#051231;        /* intentional dark blocks (footer/manifesto/hero) */

  --line:rgba(5,18,49,.10);        /* hairline — lighter, more refined */
  --line-strong:rgba(5,18,49,.16);  /* subtle emphasis */
  --line-dark:rgba(216,216,216,.14); /* lines on dark blocks */

  /* Latin display face. Anjoman sits in the fallback chain on purpose: Space Mono
     ships no Persian glyphs, so Persian text used to fall straight through to
     `ui-monospace` and render as DejaVu Sans Mono — a visibly different typeface
     from the rest of the page, on every kicker, card tag, card CTA and footer
     heading. Latin (spine label, marquee) still resolves to Space Mono first. */
  --mono:"Space Mono", "Anjoman", ui-monospace, monospace;
  /* Persian meta face: same stack minus the Latin-first entry, so a rule that only
     ever carries Persian never depends on which glyph happens to be missing. */
  --meta:"Anjoman", "Tahoma", sans-serif;
  --sans:"Anjoman","Tahoma",sans-serif;

  --maxw:1320px;
  /* The 64px side spine is removed (owner request: it read as a white strip on
     desktop). Kept as 0 rather than deleting every var(--spine) reference so
     the drawer/bar inset math stays valid and the change is one line. */
  --spine:0px;
  --gutter:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.7,0,.2,1);
  --shadow:0 1px 2px rgba(5,18,49,.04), 0 8px 24px -10px rgba(5,18,49,.15);    /* tighter, cleaner */
  --shadow-sm:0 1px 2px rgba(5,18,49,.03), 0 3px 10px -6px rgba(5,18,49,.12);   /* softer */
  --shadow-lg:0 2px 4px rgba(5,18,49,.05), 0 20px 48px -16px rgba(5,18,49,.22);  /* refined */

  /* new: radius scale, durations, easing, focus ring */
  --r-xs:6px;
  --r-sm:10px;
  --r:14px;
  --r-lg:20px;
  --r-pill:999px;
  --dur:.2s;
  --dur-md:.34s;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ring:0 0 0 2px var(--surface),0 0 0 5px var(--heading);
}

*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--text);direction:rtl;line-height:1.9;
  overflow-x:hidden;padding-right:var(--spine);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--orange);color:var(--onyx)}
h1,h2,h3,h4{color:var(--heading);font-weight:900;line-height:1.16;letter-spacing:0}
p{color:var(--text)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--surface-2)}
::-webkit-scrollbar-thumb{background:var(--cyan);border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--orange)}
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--heading);border-radius:2px}

.mono{font-family:var(--mono);letter-spacing:.18em;text-transform:uppercase;font-size:.74rem}
.mt-0{margin-top:0}

/* ---------- Spine ---------- */
.spine{position:fixed;top:0;right:0;bottom:0;width:var(--spine);z-index:70;display:flex;flex-direction:column;
  align-items:center;justify-content:space-between;padding:12px 0;pointer-events:none;border-left:1px solid var(--line)}
/* Spine removed (see --spine above): keep the element out of the render tree
   entirely rather than a zero-width fixed box. */
.spine{display:none}
.spine__label{font-family:var(--mono);font-size:.62rem;letter-spacing:.4em;color:var(--text-dim);
  writing-mode:vertical-rl;transform:rotate(180deg);text-transform:uppercase}
.spine__rule{flex:1;width:2px;margin:18px 0;background:var(--line-strong);position:relative;overflow:hidden}
.spine__fill{position:absolute;inset:0;background:var(--orange);transform-origin:top;height:var(--scrollp,0%)}
.spine__mark{font-family:var(--sans);font-weight:900;font-size:2.4rem;color:var(--orange);line-height:1}

/* ---------- Layout ---------- */
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
/* Unified section rhythm (Harvard "Informed Aging"-style):
   - tighter top/bottom padding
   - subtle alt bg (almost continuous with default — not zebra)
   - hairline rule between consecutive sections so they read as one continuous flow */
.section{padding-block:clamp(64px,6.5vw,88px);position:relative}
.section + .section{border-top:1px solid var(--line)}
.section--alt{background:var(--surface-2)}
.section--brand{background:var(--surface-2)}
.grid{display:grid;gap:clamp(20px,2.6vw,40px)}
.c2{grid-template-columns:repeat(2,1fr)}
.c3{grid-template-columns:repeat(3,1fr)}
.c4{grid-template-columns:repeat(4,1fr)}

.kicker{display:inline-flex;align-items:center;gap:12px;font-family:var(--meta);font-size:.72rem;
  letter-spacing:0;text-transform:uppercase;color:var(--accent-text);margin-bottom:20px}
.kicker::before{content:"";width:42px;height:1px;background:var(--orange)}
.sec-head{margin-bottom:clamp(24px,3.2vw,44px);max-width:26ch}
.sec-head h2{font-size:clamp(1.75rem,3.6vw,2.75rem)}
/* .split h2 sits outside .sec-head, so it never picked up the section-heading
   scale and was rendering at the browser default 24px while every other
   section heading rendered at 44px. Same clamp as .sec-head h2 and .cta h2,
   so sec-head / split / cta headings share one scale at every viewport. */
.split h2{font-size:clamp(1.75rem,3.6vw,2.75rem)}
.sec-head.center{margin-inline:auto;text-align:center;max-width:30ch}
.sec-head.center .kicker{justify-content:center}
.sec-head p{margin-top:16px;color:var(--text-dim);font-size:1.05rem;font-weight:400;line-height:1.9}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);font-weight:700;font-size:.88rem;
  letter-spacing:.04em;text-transform:none;padding:17px 30px;position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--r-sm);box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),background-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.btn svg{width:18px;height:18px}
.btn--solid{background:var(--orange);color:var(--onyx);border:none}
.btn--solid:hover{background:var(--orange-deep);color:var(--onyx);transform:translateY(-2px);box-shadow:var(--shadow);transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),background-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out)}
.btn--ghost{border:1px solid var(--line-strong);color:var(--heading);background:transparent}
.btn--ghost:hover{background:rgba(255,174,0,.10);color:var(--onyx);border-color:var(--orange);transform:translateY(-2px);box-shadow:var(--shadow-sm);transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),background-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out)}
.btn--dark{background:var(--prussian);color:#fff;border:none}
.btn--dark:hover{background:var(--orange);color:var(--onyx);transform:translateY(-2px);box-shadow:var(--shadow);transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),background-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out)}
.btn--light{background:var(--prussian);color:#fff;border:none}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow);transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),background-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out)}
.btn:active{transform:translateY(-2px) scale(.97);transition:transform .12s var(--ease-out)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
/* buttons placed on dark blocks */
.is-dark .btn--ghost,.hero .btn--ghost,.cta .btn--ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.is-dark .btn--ghost:hover,.hero .btn--ghost:hover{background:rgba(255,255,255,.12);color:#fff;border-color:var(--orange);transform:translateY(-2px);box-shadow:var(--shadow-sm);transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),background-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out)}

/* ---------- Ministry strip (narrow prussian bar with MSRT text) ---------- */
.ministry{background:#000;text-align:center;padding:6px 0;display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--meta);font-size:.68rem;letter-spacing:0;color:rgba(255,255,255,.85);border-bottom:1px solid rgba(255,255,255,.06);text-decoration:none;transition:color .3s}
.ministry:hover{color:#fff;text-decoration:underline}
/* ---------- Top bar (dark prussian strip) ---------- */
.topbar{background:var(--prussian);border-bottom:1px solid rgba(255,255,255,.08);font-family:var(--meta);font-size:.68rem;letter-spacing:0;color:#aeb6c9;position:relative}
.topbar::after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--orange),transparent);opacity:.3}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:40px;flex-wrap:wrap}
.topbar a:hover{color:var(--orange)}
.topbar__info{display:flex;gap:26px;flex-wrap:wrap}
.topbar__info span{display:inline-flex;gap:8px;align-items:center}
.topbar svg{width:14px;height:14px;opacity:.7}
.topbar__social{display:flex;gap:14px;align-items:center}
.topbar__social a{display:inline-flex}
.topbar__social img{width:16px;height:16px;filter:grayscale(1) brightness(2)}
.topbar__social a:hover img{filter:none}
.topbar__social svg{width:15px;height:15px;color:#aeb6c9}
.topbar__social a:hover svg{color:var(--orange)}

/* ---------- Header (dark, academic) ---------- */
/* The APPLE-LANGUAGE block at the end of this file owns the header's material,
   position and scrolled state. These base declarations are kept only for the
   properties it does not set (the ::after blur carrier, the ::before accent, and
   the .container flex shell that legacy pages may still reference). The dark
   `background` and `position:sticky` are removed so the Apple bar is not painted
   over by the old navy. */
.header{position:relative;z-index:60;background:transparent;
  border-bottom:1px solid transparent;transition:border-color .4s,background .4s,box-shadow .4s}
/* The frosted-glass blur lives on a pseudo-element, NOT on .header itself.
   backdrop-filter on an element filters everything painted inside it, including its own
   descendants - and the off-canvas drawer (nav#mainnav) is a descendant of .header, so the
   open menu was rendered through this 16px blur and became completely unreadable. On a
   pseudo-element the filter applies only to that pseudo-element's own backdrop, i.e. the
   page behind the bar, so the drawer's text stays sharp.
   This also stops .header acting as the containing block for the drawer's
   position:fixed, which a backdrop-filter ancestor would otherwise do. */
.header::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.header::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--orange),transparent);opacity:0;transition:opacity .4s}
.header.scrolled{border-bottom-color:rgba(0,0,0,.06);background:transparent;box-shadow:none}
.header.scrolled::before{opacity:1}
.header .container{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:92px;position:relative}
.brand{display:flex;align-items:center;gap:15px}
.brand__badge{width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.08);display:grid;place-items:center;flex-shrink:0;
  box-shadow:0 6px 18px rgba(0,0,0,.2);position:relative;overflow:hidden}
.brand__badge::before{content:"";position:absolute;inset:0;border-radius:16px;background:linear-gradient(135deg,rgba(255,174,0,.12),transparent);opacity:0;transition:opacity .4s}
.brand:hover .brand__badge::before{opacity:1}
.brand__badge img{height:38px;width:auto;display:block}
.brand__txt b{display:block;color:#fff;font-size:1.16rem;font-weight:900;letter-spacing:-.02em;line-height:1.2}
.brand__txt small{display:block;color:rgba(255,255,255,.5);font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase}
.nav{display:flex;gap:2px;align-items:center}
.nav>a,.nav__item>a{padding:6px 10px;font-size:.82rem;font-weight:500;color:rgba(255,255,255,.8);position:relative;transition:color .3s var(--ease-out);display:inline-flex;align-items:center;gap:3px;letter-spacing:.01em}
.nav>a::after,.nav__item>a::after{content:"";position:absolute;bottom:8px;right:15px;left:15px;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease-out)}
.nav>a:hover,.nav>a.active,.nav__item>a:hover{color:var(--orange)}
.nav>a:hover::after,.nav>a.active::after,.nav__item:hover>a::after{transform:scaleX(1)}
.nav>a:focus-visible,.nav__item>a:focus-visible{outline:none;border-radius:6px;background:rgba(255,174,0,.12);color:var(--orange)}
.header__cta{display:flex;align-items:center;gap:14px}
.header__cta .btn{padding:11px 22px}
.burger{display:none;width:40px;height:40px;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(255,255,255,.04);transition:border-color .3s,background .3s,box-shadow .3s;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.burger:hover{border-color:var(--orange);background:rgba(255,174,0,.08);box-shadow:0 0 0 3px rgba(255,174,0,.15)}
.burger:active{transform:scale(.97);transition:transform .12s var(--ease-out)}
.burger span{display:block;width:20px;height:1.5px;background:#fff;margin:5px auto;transition:color .3s,background-color .3s,border-color .3s,transform .3s,box-shadow .3s,opacity .3s,filter .3s}
/* z-index 55, deliberately BELOW .header (60). The drawer nav#mainnav is a
   descendant of .header, so its own z-index:95 is local to the header's
   stacking context and cannot lift it above this backdrop in the root
   context. At z-index:90 the blurred backdrop painted OVER the open menu and
   made it unreadable. Below the header it still dims and blurs the page
   content, while the drawer and the bar that opens it stay sharp. */
.nav-backdrop{position:fixed;inset:0;background:rgba(5,18,49,.6);opacity:0;visibility:hidden;transition:color .3s,background-color .3s,border-color .3s,transform .3s,box-shadow .3s,opacity .3s,filter .3s;z-index:55;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.nav-backdrop.show{opacity:1;visibility:visible}

/* mega menu */
.nav__item{position:relative}
.nav__item>a{cursor:pointer}
.nav__item .chev{width:12px;height:12px;transition:transform .4s;color:rgba(255,255,255,.6)}
.nav__item:hover .chev,.nav__item.is-open .chev,.nav__item:focus-within .chev{transform:rotate(180deg);color:var(--orange)}

.nav__toggle{font:inherit;padding:6px 10px;font-size:.82rem;font-weight:500;color:rgba(255,255,255,.8);
  display:inline-flex;align-items:center;gap:4px;cursor:pointer;transition:color .3s var(--ease),background .3s;border-radius:8px}
.nav__toggle:hover{color:var(--orange);background:rgba(255,174,0,.06)}

/* panel: breakout to full-width on desktop (.nav__item[data-panel]{position:static} at >880px) */
.nav__panel{position:absolute;top:100%;left:0;right:0;
  /* Opaque, not 98% alpha. The hero photo is a bright, high-contrast image and
     showed straight through the panel, which read as a rendering fault rather
     than glass. */
  background:linear-gradient(180deg,#0e1d3a,#14264a);
  border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.06);
  padding:32px 0 28px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);
  transition:opacity .35s var(--ease-out),transform .35s var(--ease-out),visibility .35s;
  box-shadow:0 24px 60px rgba(0,0,0,.4);z-index:50}
/* Hover bridge. The panel is anchored to the bottom of .header, which is ~6px
   taller than the nav row, so there was a 13px band of dead space between the
   toggle and the panel. Travelling down through it lost :hover and the panel
   snapped shut mid-animation. This invisible strip sits directly above the panel
   and is deliberately NOT pointer-events:none — it has to be a hit target so
   that hovering it keeps .nav__panel:hover true. */
.nav__panel::after{content:"";position:absolute;left:0;right:0;bottom:100%;height:18px}

/* hover open (panel inside .nav__item — direct descendant works) */
.nav__item:hover .nav__panel,.nav__panel:hover,
/* JS click/open fallback */
.nav__item.is-open .nav__panel{opacity:1;visibility:visible;pointer-events:auto;transform:none}

.nav__panel-inner{display:flex;gap:clamp(32px,4vw,56px);align-items:flex-start;
  max-width:var(--maxw);margin-inline:auto;padding:8px var(--gutter) 4px}
.nav__col{display:flex;flex-direction:column;gap:4px;min-width:0}
.nav__col-title{font-size:.8rem;font-weight:700;color:var(--orange);
  margin-bottom:4px;padding-bottom:8px;border-bottom:2px solid rgba(255,174,0,.15);letter-spacing:.02em}
.nav__panel a,.nav__link-single{display:flex;align-items:center;gap:10px;padding:10px 16px;color:rgba(255,255,255,.7);font-size:.88rem;font-weight:500;
  border-radius:8px;transition:color .25s var(--ease-out),background .25s var(--ease-out),transform .2s var(--ease-out);line-height:1.4;position:relative}
.nav__panel a:hover,.nav__link-single:hover{background:rgba(255,174,0,.08);color:#fff;transform:translateX(-4px)}
.nav__panel a:focus-visible,.nav__link-single:focus-visible{outline:none;background:rgba(255,174,0,.12);color:var(--orange)}
.nav__col a.active,.nav__link-single.active{color:var(--orange);background:rgba(255,174,0,.06)}
/* nav-thumb removed — cleaner text-only mega menu */

/* desktop: break panels out to full-width (relative to .header via position:sticky) */
@media(min-width:881px){.nav__item[data-panel]{position:static}}

/* portal dropdown — small */
.nav__menu{position:absolute;top:100%;right:0;min-width:240px;background:linear-gradient(180deg,rgba(14,29,58,.98),rgba(20,38,70,.96));
  border:1px solid rgba(255,255,255,.08);border-radius:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.35),0 8px 20px rgba(0,0,0,.15);
  padding:14px 8px 8px;opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(8px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;z-index:80}
.nav__menu::before{content:"";position:absolute;top:-6px;right:24px;width:12px;height:12px;background:rgba(14,29,58,.98);
  border:1px solid rgba(255,255,255,.08);border-right:none;border-bottom:none;transform:rotate(45deg);box-shadow:-2px -2px 8px rgba(0,0,0,.08)}
.nav__item:hover .nav__menu,.nav__menu:hover,.nav__item:focus-within .nav__menu{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.nav__menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;color:rgba(255,255,255,.75);font-size:.85rem;font-weight:500;
  border-radius:8px;margin:2px 0;transition:color .25s var(--ease-out),background .25s var(--ease-out),transform .25s var(--ease-out)}
.nav__menu a:last-child{border-bottom:0}
.nav__menu a:hover{background:rgba(255,174,0,.08);color:#fff;transform:translateX(-4px)}
.nav__menu a:focus-visible{outline:none;background:rgba(255,174,0,.12);color:var(--orange)}
.nav__menu a svg{width:18px;height:18px;color:var(--orange);flex-shrink:0}
.nav__menu small{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;color:rgba(255,255,255,.35);text-transform:none}

/* notification-dot nav toggle glow — for the live ticker etc. */
.nav__toggle--glow{position:relative}
.nav__toggle--glow::after{content:"";position:absolute;top:50%;left:4px;width:6px;height:6px;border-radius:50%;background:#ff4757;box-shadow:0 0 8px #ff4757;transform:translateY(-50%)}

/* ---------- HERO (dark image, fixes deformation) ---------- */
.hero{position:relative;min-height:100svh;overflow:hidden;background:var(--prussian);display:flex;align-items:flex-end}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1s var(--ease-io)}
.slide.active{opacity:1;visibility:visible}
.slide__bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.1);transition:transform 8s linear}
.slide.active .slide__bg{transform:scale(1)}
.slide__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(5,18,49,.7),transparent 40%)}
.slide__bg--fallback{background:radial-gradient(80% 120% at 90% 8%,#0e2150,transparent 55%),
  radial-gradient(60% 90% at 0% 100%,rgba(86,139,144,.5),transparent 60%),linear-gradient(180deg,var(--prussian),#02060f)}
.slide--video .slide__bg::after{background:linear-gradient(0deg,rgba(5,18,49,.7),transparent 25%)}
.slide__video{position:absolute;inset:0;z-index:0;overflow:hidden}
.slide__video iframe,.slide__video video{width:100%;height:100%;border:0;object-fit:cover}
@media(prefers-reduced-motion:reduce){
  /* The hero photo crossfade is a 1s opacity transition on .slide, declared
     unconditionally. With reduce set it must not animate: site.js also stops the
     6s autoplay, so the first slide simply stays put. */
  .slide{transition:none}
  .slide__video video{animation:none}
}
.hero__inner{position:relative;z-index:3;width:100%}
.hero .container{padding-bottom:clamp(56px,9vh,118px);padding-top:150px}
.hero__content{max-width:20ch}
.hero__num{display:inline-block;font-family:var(--mono);font-size:.82rem;letter-spacing:.3em;color:var(--orange);margin-bottom:26px}
.hero h1{font-size:clamp(2.6rem,8.5vw,7.5rem);font-weight:900;letter-spacing:0;line-height:1.18;color:#fff;margin-bottom:26px;padding-bottom:.12em}
.hero h1 .ln{display:block}
.hero__sub{max-width:46ch;font-size:clamp(1rem,1.5vw,1.28rem);font-weight:400;color:#d6dcea;line-height:1.75;margin-bottom:38px}
.hero__actions{display:flex;gap:16px;flex-wrap:wrap}
/* hero entrance — hidden only while GSAP is active and motion is allowed;
   no-JS and prefers-reduced-motion users see the text without JS */
@media(prefers-reduced-motion:no-preference){
  /* Targets .hero__actions, where the CTAs live now. It used to say .hero__side,
     which no longer exists — left as-is the buttons would never be pre-hidden and
     the entrance would start from a visible state and jump. */
  html.gsap .hero h1,html.gsap .hero .hero__sub,html.gsap .hero .hero__actions .btn{opacity:0}
}
.hero__alef{position:absolute;right:-3vw;bottom:-14vh;z-index:1;font-family:var(--sans);font-weight:900;
  font-size:min(128vh,1400px);line-height:.8;color:rgba(255,174,0,.06);
  -webkit-text-stroke:1.5px rgba(255,174,0,.16);pointer-events:none;user-select:none}
/* slider nav: dots (loader) above + arrows below, both centered at bottom */
/* The dots live in a reserved band BELOW the CTA row, not at a guessed offset.
   They used to sit at a fixed `bottom`, which cannot work: the hero is 100svh with
   bottom-anchored content, so the buttons' distance from the hero's bottom edge
   changes with the viewport. At short viewports the dots landed on the buttons,
   and raising them made them land on the sub-copy or the headline instead.
   Pinning them near the bottom edge and guaranteeing the container reserves that
   band makes a collision impossible at any size. */
.hero__dots{position:absolute;bottom:26px;left:0;right:0;z-index:5;display:flex;gap:10px;justify-content:center;pointer-events:none}
.hero__dots button{width:24px;height:2px;background:rgba(255,255,255,.3);position:relative;overflow:hidden;pointer-events:auto;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.hero__dots button:active{transform:scale(.97);transition:transform .12s var(--ease-out)}
.hero__dots button.active::after{content:"";position:absolute;inset:0;background:var(--orange);transform-origin:right;animation:dotfill 6s linear}
@keyframes dotfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Anchored to the inline edges and vertically centred, NOT to the bottom.
   At bottom:40px the arrows landed on top of the two hero CTA buttons
   ("مشاهده رشته‌ها" / "تماس با ما"), and the centre strip above them is
   already taken by .hero__dots at bottom:110px. inset-inline + space-between
   puts prev at the inline-start and next at the inline-end (RTL-correct: prev
   on the right) and clears the bottom-anchored content entirely. */
.hero__arrows{position:absolute;top:50%;bottom:auto;transform:translateY(-50%);
  inset-inline:clamp(14px,3vw,44px);z-index:4;display:flex;gap:8px;justify-content:space-between}
.hero__arrows button{width:40px;height:40px;border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;color:#fff;transition:color .3s,background-color .3s,border-color .3s,transform .3s,box-shadow .3s,opacity .3s,filter .3s;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.hero__arrows button:hover{background:var(--orange);color:var(--onyx);border-color:var(--orange)}
.hero__arrows button:active{transform:scale(.97);transition:transform .12s var(--ease-out)}
.hero__arrows svg{width:14px;height:14px}
.scroll-hint{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);z-index:5;font-family:var(--mono);font-size:.62rem;letter-spacing:.4em;color:#aeb6c9;writing-mode:vertical-rl}

/* ---------- Ticker ---------- */
.marquee{background:var(--orange);color:var(--onyx);overflow:hidden;padding:14px 0;white-space:nowrap;border-radius:var(--r-sm)}
.marquee__track{display:inline-flex;animation:scroll-x 30s linear infinite}
.marquee span{font-family:var(--mono);font-weight:700;font-size:.84rem;letter-spacing:.2em;text-transform:uppercase;display:inline-flex;align-items:center;padding:0 28px;border-left:1px solid rgba(19,19,19,.22)}
@keyframes scroll-x{to{transform:translateX(50%)}}
.marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}

/* ---------- Figures ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden}
.stat{padding:clamp(26px,4vw,50px) 8px clamp(18px,3vw,34px);border-bottom:1px solid var(--line-strong);border-left:1px solid var(--line);position:relative;transition:background var(--dur-md) var(--ease-out)}
.stat:first-child{border-left:0}
.stat:hover{background:var(--surface-2)}
.stat__n{font-family:var(--sans);font-weight:900;font-size:clamp(2.6rem,5.5vw,4.6rem);color:var(--heading);line-height:.95;font-variant-numeric:tabular-nums;letter-spacing:0}
.stat__l{margin-top:12px;font-family:var(--meta);font-size:.7rem;letter-spacing:0;text-transform:uppercase;color:var(--text-dim)}
.stat::after{content:"";position:absolute;top:0;right:0;width:0;height:3px;background:var(--orange);transition:width .5s var(--ease-out)}
.stat:hover::after{width:100%}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,90px);align-items:center}
.split__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm)}
.split__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.split__media:hover img{transform:scale(1.04)}
.split__media .ph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim)}
.list{margin-top:28px;display:grid;gap:0}
.list li{display:flex;gap:16px;align-items:flex-start;color:var(--heading);font-weight:500;padding:16px 0;border-top:1px solid var(--line)}
.list li:last-child{border-bottom:1px solid var(--line)}
.list svg{width:20px;height:20px;color:var(--cyan);flex-shrink:0;margin-top:5px}

/* ---------- Index list ---------- */
.index{border-top:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden}
.index__row{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(16px,3vw,40px);
  padding:clamp(18px,3vw,34px) clamp(28px,5vw,68px) clamp(18px,3vw,34px) clamp(8px,2vw,28px);
  border-bottom:1px solid var(--line-strong);overflow:hidden;transition:background-color var(--dur-md),color var(--dur-md)}
.index__row::before{content:"";position:absolute;inset:0;z-index:0;background:var(--orange);transform:translateX(-101%);transition:transform .55s var(--ease)}
.index__row:hover::before{transform:translateX(0)}
.index__row::after{display:none}
.index__row{padding-left:clamp(20px,3vw,40px)}
.index__row>*{position:relative;z-index:1}
.index__idx{font-family:var(--meta);font-size:.78rem;letter-spacing:0;color:var(--accent-text);transition:color var(--dur-md)}
.index__fa{font-weight:900;font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.18;letter-spacing:0;color:var(--heading);transition:color var(--dur-md),transform .55s var(--ease)}
.index__en{font-family:var(--mono);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--text-dim);transition:color var(--dur-md);justify-self:start}
.index__row:hover .index__idx,.index__row:hover .index__fa,.index__row:hover .index__en{color:var(--onyx)}
.index__row:hover .index__fa{transform:translateX(-14px)}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
  transition:border-color var(--dur-md) var(--ease-out),transform var(--dur-md) var(--ease-out),box-shadow var(--dur-md) var(--ease-out)}
.card:hover,.card:focus-within{border-color:var(--orange);box-shadow:var(--shadow)}
.card__media{display:block;aspect-ratio:4/3;overflow:hidden;position:relative;background:linear-gradient(135deg,var(--cyan),var(--prussian))}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.card:hover .card__media img{transform:scale(1.04)}
.card__tag{position:absolute;top:12px;right:12px;z-index:2;background:var(--orange);color:var(--onyx);font-family:var(--meta);font-size:.64rem;font-weight:700;letter-spacing:0;text-transform:uppercase;padding:6px 14px;border-radius:var(--r-pill);box-shadow:var(--shadow-sm)}
.card__body{padding:26px;flex:1;display:flex;flex-direction:column}
.card__body h3,.card__title{font-size:1.26rem;font-weight:900;letter-spacing:0;margin-bottom:12px;line-height:1.25;color:var(--heading)}
.card__title a{color:inherit}
.card__meta{font-family:var(--meta);color:var(--text-dim);font-size:.68rem;letter-spacing:0;text-transform:uppercase;display:flex;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.card__meta span{display:inline-flex;gap:7px;align-items:center}
.card__meta svg{width:14px;height:14px;color:var(--cyan)}
.card__body p{font-size:.95rem;font-weight:400;color:var(--text-dim);line-height:1.9}
.card__link{margin-top:18px;align-self:flex-start;font-family:var(--meta);font-size:.74rem;letter-spacing:0;text-transform:uppercase;color:var(--heading);display:inline-flex;gap:10px;align-items:center;border-bottom:1px solid var(--orange);padding-bottom:4px}
.card__link svg{width:16px;height:16px;color:var(--accent-text);transition:transform .3s}
.card__link:hover svg{transform:translateX(-6px)}
.card--course:hover .card__title,.card--course:focus-within .card__title{color:var(--accent-text)}
.card--course .meta-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:auto;padding-top:16px}
.pill{font-family:var(--meta);font-size:.62rem;letter-spacing:0;text-transform:uppercase;padding:7px 12px;border:1px solid var(--line-strong);color:var(--text-dim);display:inline-flex;gap:6px;align-items:center;border-radius:var(--r-pill)}
.pill svg{width:13px;height:13px;color:var(--cyan)}
.pill--deg{border-color:var(--cyan);color:var(--cyan-text)}
/* status badges — EVT tickets, requests, notices (matches admin badges) */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--r-pill);font-size:.74rem;font-weight:600;background:rgba(5,18,49,.06);color:var(--heading);border:1px solid var(--line-strong)}
.badge--ok{background:#e7f6ee;color:#1f7a4d;border-color:#bfe6cf}
.badge--warn{background:#fdf3e0;color:#b45309;border-color:#fde68a}
.badge--err{background:#fbeceb;color:#c0392b;border-color:#f0c9c5}

/* ---------- Tiles ---------- */
.tile{position:relative;border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,38px);overflow:hidden;background:var(--surface);transition:border-color var(--dur-md) var(--ease-out),transform var(--dur-md) var(--ease-out),box-shadow var(--dur-md) var(--ease-out);cursor:default}
.tile:hover,.tile:focus-visible{border-color:var(--orange);box-shadow:var(--shadow)}
.tile__ico{width:54px;height:54px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:var(--r-sm);color:var(--cyan);margin-bottom:22px;transition:color var(--dur),background-color var(--dur),border-color var(--dur),transform var(--dur),box-shadow var(--dur)}
.tile:hover .tile__ico{background:var(--orange);color:var(--onyx);border-color:var(--orange);transform:scale(1.05);box-shadow:var(--shadow-sm)}
.tile__ico svg{width:28px;height:28px}
.tile h3{font-size:1.18rem;font-weight:900;letter-spacing:0;margin-bottom:6px}
.tile p{font-size:.9rem;font-weight:400;color:var(--text-dim);line-height:1.9}
.tile__big{position:absolute;left:14px;bottom:-18px;font-family:var(--mono);font-size:4rem;font-weight:700;color:rgba(5,18,49,.04)}

/* ---------- Admission steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);border-radius:var(--r-lg);overflow:hidden}
.step{position:relative;background:var(--surface);padding:clamp(26px,3vw,44px);display:block;transition:background .4s,box-shadow .4s}
.step:hover{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--orange)}
.step__n{display:inline-flex;font-family:var(--meta);font-size:.74rem;letter-spacing:0;color:var(--accent-text);margin-bottom:16px}
.step h3{font-size:1.15rem;font-weight:900;letter-spacing:0;margin-bottom:10px}
.step p{font-size:.9rem;font-weight:400;color:var(--text-dim)}

/* ---------- Table ---------- */
.table-wrap{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;min-width:560px;background:var(--surface)}
table.tbl th,table.tbl td{padding:18px 22px;text-align:right;border-bottom:1px solid var(--line)}
table.tbl thead th{background:var(--prussian);color:#fff;font-family:var(--meta);font-size:.7rem;letter-spacing:0;text-transform:uppercase}
table.tbl tbody tr{transition:background var(--dur)}
table.tbl tbody tr:hover{background:var(--surface-2)}
table.tbl .val{color:var(--accent-text);font-family:var(--mono);font-weight:700;white-space:nowrap}

/* ---------- Filter toolbar ---------- */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:clamp(26px,4vw,48px);padding-bottom:22px;border-bottom:1px solid var(--line-strong)}
.toolbar__row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;width:100%}
.search{position:relative;flex:1;min-width:220px}
.search input{width:100%;padding:14px 46px 14px 16px;border:1px solid var(--line-strong);background:var(--surface);color:var(--heading);font:inherit;border-radius:var(--r-sm)}
.search input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,174,0,.15)}
.search svg{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--text-dim)}
.select{position:relative}
.select select{appearance:none;-webkit-appearance:none;padding:14px 40px 14px 18px;border:1px solid var(--line-strong);background:var(--surface);color:var(--heading);font:inherit;font-size:.9rem;cursor:pointer;min-width:170px;border-radius:var(--r-sm)}
.select select:focus{outline:none;border-color:var(--orange)}
.select::after{content:"▾";position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--text-dim);pointer-events:none}
.toolbar__count{font-family:var(--meta);font-size:.7rem;letter-spacing:0;text-transform:uppercase;color:var(--text-dim);white-space:nowrap}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{font-family:var(--meta);font-size:.7rem;letter-spacing:0;text-transform:uppercase;padding:11px 20px;border:1px solid var(--line-strong);color:var(--text);background:transparent;cursor:pointer;transition:color .3s,background-color .3s,border-color .3s,transform .3s,box-shadow .3s,opacity .3s,filter .3s;border-radius:var(--r-pill);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.chip:hover{border-color:var(--cyan);color:var(--heading)}
.chip:active{transform:scale(.97);transition:transform .12s var(--ease-out)}
.chip.active{background:var(--orange);color:var(--onyx);border-color:var(--orange)}
.filter-grid .card.is-hidden{display:none}
.filter-grid .card.is-enter{opacity:0;transform:translateY(20px)}
.filter-grid .card{transition:opacity .45s var(--ease),transform .45s var(--ease),border-color .4s,box-shadow .5s}

/* single-course specs */
.spec{display:flex;gap:14px;flex-wrap:wrap;margin:8px 0 26px}
.spec__item{border:1px solid var(--line-strong);padding:16px 22px;min-width:140px;background:var(--surface);border-radius:var(--r-sm)}
.spec__k{font-family:var(--meta);font-size:.64rem;letter-spacing:0;text-transform:uppercase;color:var(--text-dim)}
.spec__v{color:var(--heading);font-weight:900;font-size:1.1rem;margin-top:6px}
.empty{padding:60px 0;text-align:center;color:var(--text-dim);font-family:var(--meta);letter-spacing:0;text-transform:uppercase;font-size:.8rem}

/* ---------- Video section ---------- */
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px)}
.video{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;transition:border-color .4s var(--ease-out),transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.video:hover,.video:focus-within{border-color:var(--orange);box-shadow:var(--shadow)}
.video__frame{position:relative;aspect-ratio:16/9;background:var(--prussian)}
.video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video__body{padding:20px 22px}
.video__body h3{font-size:1.1rem;font-weight:900;color:var(--heading);margin-bottom:6px}
.video__body p{font-size:.88rem;color:var(--text-dim)}
.video--lazy{cursor:pointer}
.video--lazy .video__poster{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--prussian))}
.video--lazy .video__play{width:66px;height:66px;border-radius:50%;background:var(--orange);display:grid;place-items:center;color:var(--onyx);transition:transform .3s}
.video--lazy:hover .video__play{transform:scale(1.1)}
.video--lazy .video__play svg{width:26px;height:26px;margin-right:-3px}

/* ---------- CTA ---------- */
.cta{position:relative;overflow:hidden;padding:clamp(48px,8vw,108px) clamp(28px,5vw,80px);text-align:center;background:linear-gradient(135deg,var(--orange),#ffbe24);color:var(--onyx);border-radius:var(--r-lg)}
.cta::before{content:"ا";position:absolute;left:-4%;top:50%;transform:translateY(-50%);font-weight:900;font-size:min(120%,42vh);line-height:.7;color:rgba(19,19,19,.07);pointer-events:none}
.cta>*{position:relative;z-index:1}
.cta .kicker{color:var(--onyx)}.cta .kicker::before{background:var(--onyx)}
.cta h2{color:var(--onyx);font-size:clamp(1.75rem,3.6vw,2.75rem);margin-bottom:16px}
.cta p{color:rgba(19,19,19,.72);max-width:54ch;margin:0 auto 34px;font-weight:500}
.cta .hero__actions{justify-content:center}
.cta .btn--solid{background:var(--prussian);color:#fff}.cta .btn--solid::after{background:var(--onyx)}.cta .btn--solid:hover{color:#fff}
.cta .btn--light{background:var(--prussian);color:#fff}

/* ---------- Page hero ---------- */
/* page hero (above-fold band on every non-home page) — tightened for unified rhythm */
.phero{position:relative;padding-block:clamp(96px,10vw,140px) clamp(32px,4vw,56px);overflow:hidden;background:var(--surface-2)}
.phero::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 130% at 96% 0%,rgba(86,139,144,.16),transparent 55%),radial-gradient(50% 90% at 0% 100%,rgba(255,174,0,.10),transparent 60%)}
.phero .container{position:relative}
.crumb{display:flex;gap:10px;font-family:var(--meta);font-size:.7rem;letter-spacing:0;text-transform:uppercase;color:var(--text-dim);margin-bottom:24px}
.crumb a:hover{color:var(--accent-text)}
.phero h1{font-size:clamp(2.4rem,8vw,6rem);letter-spacing:-.04em;line-height:1.16}
.phero p{margin-top:18px;color:var(--text);max-width:60ch;font-weight:400;font-size:1.06rem;line-height:1.9}

/* ---------- Contact ---------- */
.cgrid{display:grid;grid-template-columns:1fr 1.15fr;gap:46px;align-items:start}
.info{display:flex;gap:18px;padding:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);transition:border-color var(--dur-md) var(--ease-out),transform var(--dur-md) var(--ease-out),box-shadow var(--dur-md) var(--ease-out)}
.info:hover,.info:focus-visible{border-color:var(--orange);box-shadow:var(--shadow-sm)}
.info__ico{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:var(--r-sm);color:var(--cyan);flex-shrink:0}
.info__ico svg{width:22px;height:22px}.info__ico img{width:22px;height:22px}
.info h3{color:var(--heading);font-family:var(--meta);font-size:.72rem;letter-spacing:0;text-transform:uppercase;margin-bottom:6px}
.info p,.info a{color:var(--text-dim);font-size:.94rem;font-weight:400;line-height:1.9}
.info a:hover{color:var(--accent-text)}
.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(26px,4vw,46px);box-shadow:var(--shadow-sm)}
.field{margin-bottom:20px}
.field label{display:block;margin-bottom:9px;font-family:var(--meta);font-size:.7rem;letter-spacing:0;text-transform:uppercase;color:var(--text)}
.field input,.field select,.field textarea{width:100%;padding:14px 16px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--bg);color:var(--heading);font:inherit;transition:border-color var(--dur),box-shadow var(--dur),background var(--dur)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--orange);box-shadow:var(--ring);background:var(--surface)}
.field textarea{resize:vertical;min-height:140px}
.map{border:1px solid var(--line);border-radius:var(--r);width:100%;min-height:360px}

/* ---------- Note ---------- */
.note{border:1px solid rgba(255,174,0,.4);background:rgba(255,174,0,.1);padding:22px 26px;display:flex;gap:16px;color:#7a5a06;font-weight:500;border-radius:var(--r)}
.note svg{width:24px;height:24px;flex-shrink:0;color:var(--accent-text)}
.note a{color:var(--accent-text);border-bottom:1px solid var(--orange-deep);font-weight:700}

/* ---------- Accordion ---------- */
.acc{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__item:last-child{border-bottom:none}
.acc__q{width:100%;display:flex;justify-content:space-between;gap:18px;align-items:center;padding:26px 24px;font-weight:900;color:var(--heading);text-align:right;font-size:clamp(1.05rem,2vw,1.3rem);transition:color var(--dur) var(--ease-out),background-color var(--dur) var(--ease-out)}
.acc__q:hover{color:var(--accent-text);background:var(--surface-2)}
.acc__q svg{width:24px;height:24px;color:var(--accent-text);transition:transform var(--dur) var(--ease-out);flex-shrink:0}
.acc__item.open .acc__q svg{transform:rotate(45deg)}
.acc__a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease-out)}
.acc__a div{padding:0 24px 26px;color:var(--text-dim);font-weight:400;line-height:1.9}

/* ---------- Footer (dark prussian) ---------- */
.footer{position:relative;overflow:hidden;background:var(--prussian);color:#aeb6c9;border-top:3px solid var(--orange);padding-top:clamp(64px,9vw,116px)}
.footer__grid,.fbottom{position:relative;z-index:1}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:48px;padding-bottom:54px}
.footer .brand b{color:#fff}.footer .brand small{color:#8a93ab}
.footer p{color:#8a93ab;font-size:.94rem;font-weight:400;margin-top:18px;line-height:1.9}
.footer h3{color:#fff;font-family:var(--meta);font-size:.8rem;letter-spacing:0;text-transform:uppercase;margin-bottom:18px}
.footer ul{display:grid;gap:13px}
.footer ul a{color:#aeb6c9;font-size:.95rem;font-weight:400;transition:color var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.footer ul a:hover{color:var(--orange);transform:translateX(-4px)}
.fcontact li{display:flex;gap:11px;margin-bottom:15px;font-size:.9rem;font-weight:400;color:#8a93ab}
.fcontact svg{width:17px;height:17px;color:var(--orange);flex-shrink:0;margin-top:5px}
.fsocial{display:flex;gap:12px;margin-top:20px}
.fsocial a{width:44px;height:44px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-pill);display:grid;place-items:center;transition:color var(--dur) var(--ease-out),background-color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.fsocial a:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.fsocial svg{width:18px;height:18px;color:#fff}
.fsocial a:hover svg{color:var(--onyx)}
.fsocial img{width:18px;height:18px;filter:grayscale(1) brightness(3)}
.fsocial a:hover img{filter:none}
.fbottom{border-top:1px solid rgba(255,255,255,.08);padding-block:26px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#8a93ab}
.fbottom a{color:var(--orange)}

/* ---------- HERO actions on a phone ----------
   Measured at 360px: the two CTAs were 153x86 and 155x62 side by side — the
   longer label wrapped to two lines, so the pair had mismatched heights, spanned
   89% of the screen, overlapped .hero__dots and overflowed the viewport by 4px.
   The row stopped stretching because .hero__side carries align-self:flex-end, so
   each button sized to its own content. align-items:stretch + flex:1 1 0
   equalises them, nowrap stops the wrap, and tighter padding/font keeps both
   labels on one line while staying well above the 44px tap floor. */
@media(max-width:880px){
  .hero__side{gap:10px;align-items:stretch;width:100%;padding-bottom:0}
  .hero__side .btn{
    flex:1 1 0;min-width:0;white-space:nowrap;
    padding:0 10px;font-size:.82rem;gap:6px;height:52px;
    justify-content:center;align-items:center;
  }
  .hero__side .btn svg{width:15px;height:15px;flex:0 0 auto}
}

/* ---------- Reveal (GSAP-driven; hidden only while GSAP active & motion allowed) ---------- */
@media(prefers-reduced-motion:no-preference){
  html.gsap .reveal{opacity:0;transform:translateY(28px)}
  /* word-mask text reveals — JS splits headings into .wmask units (words only,
     Persian-safe); hidden state lives here so no-JS / RM users see full text */
  html.gsap .wmask{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
  html.gsap .wmask>*{display:inline-block;will-change:transform;transform:translateY(115%)}
  /* scroll-storytelling layers (transform-only, compositor-friendly) */
  .slide__bg,.hero__alef{will-change:transform}
  /* page-hero title is word-animated by GSAP — kill the CSS keyframe so the
     two don't stack into one punchy double-motion */
  html.gsap .phero h1{animation:none}
  /* Desktop only. will-change:transform makes the header the containing block for
     position:fixed descendants, and the off-canvas drawer (nav#mainnav) is one of
     them. On a phone that made the drawer's inset:0 resolve against the header
     box (y=89, just below the ministry and top bars) instead of the viewport, so
     the menu opened 100px too low and overflowed the bottom by 89px. The
     drawer's own padding-top:100px shows it was designed to be viewport-anchored.
     Above 880px there is no drawer, so the hint is harmless and stays. */
}
@media(min-width:881px){
  html.gsap .header{will-change:transform}
}

/* ---------- Responsive ---------- */
@media(max-width:1040px){
  .footer__grid{grid-template-columns:1fr 1fr}
  .c4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(3){border-left:0}
  .steps{grid-template-columns:1fr}
  .video-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:880px){
  :root{--spine:0px}
  .spine{display:none}
  .split,.cgrid{grid-template-columns:1fr}
  .c3{grid-template-columns:1fr 1fr}
  .topbar__info{display:none}
  .burger{display:block}
  .header__cta .btn--ghost{display:none}
  .nav{position:fixed;inset:0 0 0 auto;width:min(340px,88vw);height:100svh;background:rgba(14,29,58,.98);flex-direction:column;align-items:stretch;padding:100px 22px calc(30px + env(safe-area-inset-bottom, 0px));gap:0;transform:translateX(100%);transition:transform .5s var(--ease);z-index:95;border-left:1px solid rgba(255,255,255,.08);overflow-y:auto;box-shadow:-24px 0 40px rgba(0,0,0,.3)}
  .nav::before{content:"";position:absolute;top:0;left:0;right:0;height:72px;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent);pointer-events:none}
  .nav.open{transform:none}
  .nav>a,.nav__item>a,.nav__toggle{padding:16px 14px;font-size:1.08rem;border-bottom:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.8)}
  .nav>a::after{display:none}
  .nav__menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-bottom:1px solid rgba(255,255,255,.06);padding:0 0 8px;min-width:0;background:transparent}
  .nav__menu a{padding:10px 14px;margin:2px 0;border-radius:8px;color:rgba(255,255,255,.7)}
  .nav__menu a:hover{background:rgba(255,174,0,.1);color:var(--orange);transform:none;padding-right:14px}
  .nav__item:hover .chev{transform:none}
  .nav__item.is-open .chev{transform:rotate(180deg);color:var(--orange)}
  .nav__panel{position:static;opacity:0;visibility:hidden;max-height:0;overflow:hidden;transform:none;box-shadow:none;border:0;padding:0;background:transparent;transition:opacity .35s,max-height .4s,padding .35s}
  /* The old open state capped the panel at max-height:600px with overflow:hidden.
     Stacked, the four columns are ~1042px tall, so 442px of the menu was simply
     clipped away: it animated open, hit the cap, and the lower half "disappeared".
     The drawer itself is height:100svh and scrolls, so the panel needs no cap of
     its own — max-height:none can never clip, whatever the content grows to.
     The height transition is replaced by an opacity+slide reveal, which does not
     depend on knowing the content height. */
  .nav__item.is-open .nav__panel{opacity:1;visibility:visible;max-height:none;overflow:visible;padding:0 0 8px;transform:none;animation:panelIn .34s var(--ease) both}
  @keyframes panelIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .nav__panel-inner{flex-direction:column;gap:0}
  .nav__col{gap:0}
  .nav__col-title{color:rgba(255,255,255,.5);font-size:.85rem;letter-spacing:0;text-transform:none;
    padding:10px 14px;border-bottom:none;border-top:1px solid rgba(255,255,255,.06);margin-bottom:0}
  .nav__panel a,.nav__link-single{padding:12px 16px;margin:2px 0;border-radius:8px;color:rgba(255,255,255,.7);font-size:.95rem;transform:none}
  .nav__panel a:hover,.nav__link-single:hover{background:rgba(255,174,0,.1);color:#fff;transform:none;padding-right:16px}
  .index__en{display:none}
  .hero__alef{font-size:66vh}
  .video-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .c2,.c3,.c4{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr}
  .hero__arrows{display:none}
  .index__row{grid-template-columns:auto 1fr}
  .video-grid{grid-template-columns:1fr}
  .toolbar__row{flex-direction:column;align-items:stretch}
  .select select{width:100%}
}

/* ---------- Reduced motion ----------
   Strip the cyber glitch/chromatic/clip-path effects but keep a soft fade-in
   so RM users still see a transition (zero motion = "broken" UX).
   Selector specificity (.hero h1 = 0,1,1) beats * (0,0,0), so the explicit
   animation-duration on hero elements wins over the global *{animation-duration:.001s}. */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important}
  .reveal{opacity:1;transform:none}
  .slide__bg{transform:none!important}
  /* zero out the cyber-specific *visual* effects… */
  .hero h1,.hero__sub,.hero__side,.hero__side .btn,.btn{transform:none!important;filter:none!important;clip-path:none!important;text-shadow:none!important;box-shadow:none!important}
   /* hero text/buttons are hidden only under no-preference+GSAP, so under
      reduced motion they are already visible — nothing to re-allow here. */
  .ticker__caret,.ticker__dot{animation:none!important}
}


/* ==========================================================================
   REFINEMENT — badge logo · hero split (text right / buttons left) ·
   news typewriter ticker · unified social icons
   ========================================================================== */

/* brand logo badge (translucent glass on dark header) */
.brand__badge{width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.08);display:grid;place-items:center;flex-shrink:0;
  box-shadow:0 6px 18px rgba(0,0,0,.2)}
.brand__badge img{height:38px;width:auto;display:block}
.brand__badge--ghost{background:transparent;box-shadow:none;width:auto;height:auto;border-radius:0}
.brand__txt b{display:block;color:#fff;font-size:1.16rem;font-weight:900;letter-spacing:-.02em;line-height:1.2}
.brand__txt small{display:block;color:rgba(255,255,255,.5);font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase}
.footer .brand__txt b{color:#fff}.footer .brand__txt small{color:#8a93ab}

/* HERO split: text on the right (wide), buttons stacked on the left */
.hero__alef{display:none}                 /* removed transparent shape */
.hero__row{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(28px,5vw,90px);width:100%}
.hero__text{flex:1 1 auto;max-width:none}
.hero__text .hero__sub{max-width:60ch}
.hero h1{max-width:none}
.hero__side{flex:0 0 auto;display:flex;flex-direction:column;gap:14px;align-items:stretch;padding-bottom:8px}
.hero__side .btn{justify-content:center;min-width:240px}
@media(max-width:820px){
  .hero__row{flex-direction:column;align-items:flex-start;gap:26px}
  .hero__side{flex-direction:row;flex-wrap:wrap;width:100%}
  .hero__side .btn{min-width:0;flex:1}
}

/* NEWS TICKER — narrow typewriter bar */
.ticker{background:var(--prussian);color:#fff;border-top:1px solid rgba(255,255,255,.06);border-bottom:3px solid var(--orange)}
.ticker__in{display:flex;align-items:center;gap:0;min-height:54px}
.ticker__tag{display:inline-flex;align-items:center;gap:9px;background:var(--orange);color:var(--onyx);
  font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 18px;white-space:nowrap;align-self:stretch;align-items:center}
.ticker__dot{width:8px;height:8px;border-radius:50%;background:var(--onyx);animation:tpulse 1.3s linear infinite}
@keyframes tpulse{50%{opacity:.25;transform:scale(.8)}}
.ticker__type{flex:1;min-width:0;display:inline-flex;align-items:center;gap:1px;padding-inline:20px;
  font-family:var(--sans);font-weight:500;font-size:1rem;color:#dfe4f1;white-space:nowrap;overflow:hidden}
.ticker__type:hover{color:#fff}
.ticker__caret{color:var(--orange);font-weight:700;margin-right:1px;animation:tblink 1s steps(1) infinite}
@keyframes tblink{50%{opacity:0}}
@media(max-width:560px){.ticker__type{font-size:.9rem}}

/* UNIFIED social icons — identical shape, size & colour via mask */
.soc{display:inline-block;width:19px;height:19px;background:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.topbar__social{display:flex;gap:16px;align-items:center}
.topbar__social a{display:inline-flex;color:#aeb6c9;transition:color .25s,transform .25s}
.topbar__social a:hover{color:var(--orange);transform:translateY(-1px)}
.fsocial a{width:44px;height:44px;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;color:#fff;transition:color .3s var(--ease-out),background-color .3s var(--ease-out),border-color .3s var(--ease-out),transform .3s var(--ease-out),box-shadow .3s var(--ease-out),opacity .3s,filter .3s}
.fsocial a:hover{background:var(--orange);border-color:var(--orange);color:var(--onyx);transform:translateY(-3px)}

/* header polish — thin */
.topbar .container{min-height:30px}
.topbar .container{gap:10px}
.topbar{font-size:.6rem;letter-spacing:.06em}
.topbar svg{width:11px;height:11px}
.topbar__info{gap:16px}
.topbar__social{gap:10px}
.topbar__social svg{width:12px;height:12px}
.header .container{min-height:46px}
.header .container{gap:14px}
.brand{gap:6px}
.brand__badge{width:34px;height:34px;border-radius:8px}
.brand__badge img{height:20px}
.brand__txt b{font-size:.9rem;font-weight:800}
.brand__txt small{font-size:.5rem;letter-spacing:.12em}
.nav{gap:1px}
.nav>a,.nav__item>a{padding:6px 10px;font-size:.8rem;gap:3px;font-weight:500;color:rgba(255,255,255,.8)}
.nav>a::after,.nav__item>a::after{bottom:4px;right:10px;left:10px}
.nav__item .chev{width:12px;height:12px}
.header__cta .btn{padding:8px 16px;font-size:.78rem}
.burger{width:36px;height:36px;border-radius:8px}
.burger span{width:16px;height:1.5px;margin:4px auto}

/* ==========================================================================
   TWEAK PASS — hero bottom placement · one-line heads · index arrow ·
   bigger manifesto
   ========================================================================== */

/* #2 hero: anchor slide content to the BOTTOM band (text right / buttons left) */
.slide{display:flex;align-items:flex-end}
.hero .container{padding-top:120px;padding-bottom:clamp(48px,8vh,96px)}
.hero__text{max-width:62ch}

/* #4 section headings sit on one line (the ch-at-body-size cap was too narrow) */
.sec-head{max-width:none}
.sec-head.center{max-width:none}
.sec-head h2{max-width:none}
.sec-head p{max-width:62ch}
.sec-head.center p{max-width:60ch;margin-inline:auto}

/* #5 remove the hover arrow that overlapped the latin label */
.index__row::after{display:none}
.index__row{padding-left:clamp(20px,3vw,40px)}

/* #6 manifesto — bigger, signature dark band */
.section--paper{background:var(--surface-2)}
.manifesto{position:relative;overflow:hidden;background:var(--prussian);padding-block:clamp(90px,13vw,190px)}
.manifesto .kicker{color:var(--orange)}
.manifesto .kicker::before{background:var(--orange)}
.manifesto__q{font-weight:900;letter-spacing:0;line-height:1.34;font-size:clamp(2.1rem,5.4vw,5rem);color:#fff;max-width:24ch;padding-block:.06em}
.manifesto__q mark{background:var(--orange);color:var(--onyx);padding:0 .1em;border-radius:2px}
.manifesto__by{margin-top:40px;font-family:var(--meta);font-size:.84rem;letter-spacing:0;text-transform:uppercase;color:#aeb6c9;display:flex;align-items:center;gap:14px}
.manifesto__by::before{content:"";width:54px;height:1px;background:var(--orange)}
.manifesto::after{content:"ا";position:absolute;left:-2%;top:50%;transform:translateY(-50%);font-weight:900;font-size:min(160%,66vh);line-height:.7;color:rgba(255,255,255,.05);pointer-events:none}

/* ==========================================================================
   TWEAK PASS 2 — hero sized to fit (≤2 lines) · all headlines ≤2 lines ·
   cohesive CTA buttons
   ========================================================================== */

/* hero: smaller display so the title + both buttons fit the viewport */
.hero h1{font-size:clamp(2.1rem,5.4vw,5rem);line-height:1.18}
.hero__sub{font-size:clamp(1rem,1.4vw,1.18rem)}
.hero .container{padding-top:96px;padding-bottom:clamp(40px,6vh,72px)}
/* fit hero into the viewport BELOW the sticky header (topbar+header≈130px)
   so the bottom-anchored content stays on screen */
.hero{min-height:calc(100svh - 130px)}
@media(max-width:880px){
  .hero{min-height:calc(100svh - 92px)}
}
@media(max-width:560px){
  /* Was calc(100svh - 92px). 92px is the DESKTOP header height; on a phone the
     stack above the hero is the ministry bar + topbar + header = 136px, so the
     hero was 44px too tall and pushed the CTA row past the fold. Scoped to
     phones: at 561-880 the headline is much larger (8.5vw), the content is
     taller than the shortened hero, and subtracting 136px there made the hero
     overflow upward into .hero__dots instead. */
  .hero{min-height:calc(100svh - 136px)}
}
/* reliable bottom anchoring of the hero content */
.slide{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch}
.hero__inner{width:100%}
/* buttons side-by-side (less vertical space → both always fit on the left) */
.hero__side{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px}
.hero__side .btn{min-width:0}
/* desktop: text on the right, buttons on the left, BOTH BOTTOM-ALIGNED via
   flex(align-items:flex-end). Buttons sit above the prev/next arrows; text's
   visible bottom (sub) lines up with the buttons' bottom edge. */
@media(min-width:821px){
  .hero__row{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:clamp(28px,5vw,90px);width:100%;padding-bottom:64px}
  .hero__text{flex:1 1 auto;max-width:none;text-align:right;padding-bottom:0}
  /* kill the sub's margin-bottom so the text wrapper's bottom edge IS the sub's bottom edge */
  .hero__text .hero__sub{margin-bottom:0}
  .hero__side{position:static;flex:0 0 auto;display:flex;flex-direction:row;flex-wrap:nowrap;gap:12px;margin:0;align-self:flex-end;opacity:1;transform:none}
  .hero__side .btn{min-width:0}
}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* headlines: full text, balanced over ≤2 lines, never truncated/clipped */
.hero h1,.phero h1,.sec-head h2,.cta h2,.manifesto__q,.split h2{text-wrap:balance;overflow:visible}
h1,h2,h3,h4{line-height:1.24}
.hero h1{line-height:1.26}
/* keep display headings sized so the full Persian title fits two lines */
.sec-head h2{font-size:clamp(1.75rem,3.6vw,2.75rem)}
.phero h1{font-size:clamp(2.2rem,6vw,4.6rem)}
.cta h2{font-size:clamp(1.75rem,3.6vw,2.75rem)}

/* CTA buttons — match the site's wipe + lift interaction, clean on orange.
   INTENTIONALLY GLOBAL (not .home-scoped): `.cta` is a shared band on ~10 inner
   pages and the hover/wipe rules right below it are global too. Scoping only the
   transition silently changed the feel of every inner CTA band. Homepage-only
   SIZING lives further down, in the HOMEPAGE ELEVATION block. */
.cta .btn{transition:transform .35s var(--ease-out),color .4s var(--ease-out),border-color .4s,box-shadow .35s}
.cta .btn:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(19,19,19,.22)}
.cta .btn--solid{background:var(--onyx);color:#fff}
.cta .btn--solid::after{background:var(--prussian)}
.cta .btn--solid:hover{color:#fff}
.cta .btn--ghost{background:transparent;border:1.5px solid var(--onyx);color:var(--onyx)}
.cta .btn--ghost::after{background:var(--onyx)}
.cta .btn--ghost:hover{color:#fff;border-color:var(--onyx)}
.cta .btn--light{background:var(--onyx);color:#fff}

/* ==========================================================================
   A11Y / WIG PASS — skip link, main, light form messages, portal button,
   touch + theming defaults
   ========================================================================== */
html{color-scheme:light;-webkit-tap-highlight-color:transparent}
a,button,[role=button],input,select,textarea,label,summary{touch-action:manipulation}

/* skip-to-content */
.skip-link{position:fixed;top:-64px;right:14px;z-index:200;background:var(--prussian);color:#fff;
  padding:12px 18px;border-radius:0 0 10px 10px;font-weight:700;transition:top .2s var(--ease)}
.skip-link:focus{top:0}
#main{display:block}
#main:focus{outline:none}
.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}

/* mobile nav drawer: contain scroll */
.nav{overscroll-behavior:contain}

/* portal dropdown is now a <button> — match the nav link look + open-on-click */
.nav__item.is-open .nav__menu{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.nav__item.is-open .chev,.nav__toggle[aria-expanded="true"] .chev{transform:rotate(180deg);color:var(--orange)}

/* light, accessible form status messages (replaces dark-theme inline notes) */
.formmsg{display:flex;gap:12px;align-items:center;padding:13px 16px;margin-bottom:18px;border:1px solid;font-weight:500}
.formmsg svg{width:22px;height:22px;flex-shrink:0}
.formmsg--ok{background:#e7f6ee;border-color:#bfe6cf;color:#1f7a4d}
.formmsg--err{background:#fbeceb;border-color:#f0c9c5;color:#c0392b}

/* inline per-field form errors (contact) */
.field-err{display:block;margin-top:7px;color:#c0392b;font-size:.82rem;font-weight:600}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.12)}

/* ==========================================================================
   NEWS / EVENTS page composition — featured-frame + grid + chips/search + focus
   ========================================================================== */

/* Featured big card (image on one side, body on the other) */
.feat-news{display:grid;grid-template-columns:1.15fr 1fr;gap:0;background:var(--surface);border:1px solid var(--line);overflow:hidden;position:relative;transition:border-color .4s,box-shadow .5s}
.feat-news:hover{border-color:var(--orange);box-shadow:var(--shadow)}
.feat-news__media{display:block;aspect-ratio:16/10;overflow:hidden;position:relative;background:var(--paper)}
.feat-news__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.feat-news:hover .feat-news__media img{transform:scale(1.04)}
.feat-news__body{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,4vw,56px);gap:18px}
.feat-news__tag{display:inline-flex;align-self:flex-start;background:var(--orange);color:var(--onyx);font-family:var(--meta);font-size:.66rem;letter-spacing:0;text-transform:uppercase;padding:8px 16px;font-weight:700}
.feat-news__title{font-size:clamp(1.6rem,3.4vw,2.7rem);font-weight:900;letter-spacing:0;line-height:1.22;color:var(--heading);text-wrap:balance;overflow:visible}
.feat-news__title a{color:inherit}
.feat-news__title a:hover{color:var(--accent-text)}
.feat-news__sub{color:var(--text-dim);font-size:1rem;line-height:1.7;max-width:54ch}
.feat-news__meta{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--meta);font-size:.7rem;letter-spacing:0;text-transform:uppercase;color:var(--text-dim);align-items:center}
.feat-news__meta svg{width:14px;height:14px;color:var(--cyan)}
.feat-news__meta span{display:inline-flex;gap:8px;align-items:center}
@media(max-width:880px){
  .feat-news{grid-template-columns:1fr}
  .feat-news__media{aspect-ratio:16/9}
}

/* Search/topic band (prussian, like Imperial's navy bar) */
.news-search{background:var(--prussian);padding:22px;margin:28px 0 36px}
.news-search__in{display:grid;grid-template-columns:1.4fr 1fr auto;gap:10px;align-items:stretch}
.news-search__q,.news-search__sel{font-family:var(--sans);background:#fff;border:0;padding:14px 18px;font-size:.95rem;color:var(--text);min-width:0;border-radius:0}
.news-search__q::placeholder{color:var(--text-dim);font-family:var(--sans)}
.news-search__sel{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;cursor:pointer;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text) 50%),linear-gradient(135deg,var(--text) 50%,transparent 50%);background-position:calc(100% - 18px) center,calc(100% - 12px) center;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-left:38px}
[dir="rtl"] .news-search__sel{background-position:18px center,12px center;padding-left:18px;padding-right:38px}
.news-search__q:focus,.news-search__sel:focus{outline:2px solid var(--orange);outline-offset:2px}
.news-search__btn{padding:14px 24px;border:0;cursor:pointer;justify-content:center;min-width:140px}
.news-search__btn svg{width:16px;height:16px}
@media(max-width:720px){.news-search__in{grid-template-columns:1fr}}

/* News card — title-led composition */
.card--news{background:var(--surface);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;transition:border-color .4s var(--ease-out),transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.card--news:hover,.card--news:focus-within{border-color:var(--orange);box-shadow:var(--shadow)}
.card--news .card__media{display:block;aspect-ratio:16/10;overflow:hidden;position:relative}
.card--news .card__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card--news:hover .card__media img{transform:scale(1.05)}
.card--news .card__body{padding:18px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.card--news .card__title{font-size:1.05rem;font-weight:800;letter-spacing:0;line-height:1.32;color:var(--heading);text-wrap:balance}
.card--news .card__title a{color:inherit}
.card--news .card__title a:hover{color:var(--accent-text)}

/* CTA tile inside the grid (orange, Imperial's lime equivalent) */
.cta-tile{background:var(--orange);color:var(--onyx);padding:clamp(24px,3vw,32px);display:flex;flex-direction:column;justify-content:center;gap:12px;border:1px solid var(--orange);border-radius:var(--r);transition:transform .4s var(--ease),box-shadow .4s}
.cta-tile .kicker{color:var(--onyx)}
.cta-tile .kicker::before{background:var(--onyx)}
.cta-tile h3{font-size:1.45rem;font-weight:900;letter-spacing:0;line-height:1.2;color:var(--onyx)}
.cta-tile .card__link{color:var(--onyx);border-color:var(--onyx);margin-top:6px}
.cta-tile:hover{box-shadow:0 14px 32px rgba(19,19,19,.18)}

/* Focus-on-category block (split: intro + 3 horizontal preview cards) */
.focus-cat{display:grid;grid-template-columns:1fr 2fr;gap:clamp(24px,4vw,56px);align-items:start}
.focus-cat__intro .kicker{margin-bottom:8px}
.focus-cat__intro h2{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:900;letter-spacing:0;line-height:1.18;margin:10px 0 14px;color:var(--heading)}
.focus-cat__intro p{color:var(--text-dim);max-width:36ch;margin-bottom:18px;line-height:1.75}
.focus-cat__list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.focus-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:border-color .4s var(--ease-out),transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.focus-card:hover,.focus-card:focus-within{border-color:var(--orange);box-shadow:var(--shadow)}
.focus-card__media{display:block;aspect-ratio:16/10;overflow:hidden}
.focus-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.focus-card:hover .focus-card__media img{transform:scale(1.04)}
.focus-card__body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:8px}
.focus-card__tag{font-family:var(--meta);font-size:.62rem;letter-spacing:0;text-transform:uppercase;color:var(--accent-text);align-self:flex-start}
.focus-card h4{font-size:.95rem;font-weight:800;letter-spacing:0;line-height:1.34;color:var(--heading);text-wrap:balance}
.focus-card h4 a{color:inherit}.focus-card h4 a:hover{color:var(--accent-text)}
@media(max-width:980px){.focus-cat{grid-template-columns:1fr}.focus-cat__list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.focus-cat__list{grid-template-columns:1fr}}

/* ==========================================================================
   BLOG / ARTICLES — featured panel + 3-up mini grid (Imperial-inspired)
   ========================================================================== */

/* Featured: orange panel (left) + image (right), equal-height side-by-side */
.blog-feat{display:grid;grid-template-columns:1fr 1fr;gap:0;overflow:hidden;position:relative;min-height:clamp(360px,42vw,560px)}
.blog-feat__panel{background:var(--orange);color:var(--onyx);padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:center;gap:18px}
.blog-feat__panel .kicker{color:var(--onyx)}
.blog-feat__panel .kicker::before{background:var(--onyx)}
.blog-feat__title{font-size:clamp(1.8rem,3.6vw,3rem);font-weight:900;letter-spacing:0;line-height:1.16;color:var(--onyx);text-wrap:balance;overflow:visible}
.blog-feat__title a{color:inherit}
.blog-feat__title a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.blog-feat__intro{font-size:1.05rem;font-weight:500;line-height:1.7;color:var(--onyx);max-width:42ch}
.blog-feat__cta{display:inline-flex;align-items:center;gap:10px;font-family:var(--meta);font-weight:700;font-size:.82rem;letter-spacing:0;text-transform:uppercase;color:var(--onyx);border-bottom:2px solid var(--onyx);padding-bottom:6px;align-self:flex-start;margin-top:6px;transition:gap .3s var(--ease)}
.blog-feat__cta:hover{gap:14px}
.blog-feat__cta svg{width:18px;height:18px}
.blog-feat__meta{display:inline-flex;gap:8px;align-items:center;font-family:var(--meta);font-size:.7rem;letter-spacing:0;text-transform:uppercase;color:var(--onyx);margin-top:10px}
.blog-feat__meta svg{width:14px;height:14px}
.blog-feat__media{display:block;position:relative;overflow:hidden;background:var(--paper)}
.blog-feat__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.blog-feat__media:hover img{transform:scale(1.04)}
@media(max-width:880px){
  .blog-feat{grid-template-columns:1fr;min-height:auto}
  .blog-feat__media{aspect-ratio:16/9}
}

/* --- regulations page (آیین‌نامه‌ها) --- */
.toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.toc__item{display:inline-flex;padding:8px 18px;background:var(--surface);border:1px solid var(--line);border-radius:6px;font-size:.88rem;font-weight:500;color:var(--heading);transition:border-color .3s var(--ease-out),color .3s var(--ease-out),transform .3s var(--ease-out);text-decoration:none}
.toc__item:hover{border-color:var(--orange);color:var(--orange-deep);transform:translateY(-1px)}
.toc__sub{font-size:.82rem;padding:6px 14px;margin-right:4px}
.toc__sub::before{content:"· ";color:var(--text-dim)}
.defs{display:grid;gap:0;margin-top:20px}
.defs__item{padding:16px 0;border-bottom:1px solid var(--line)}
.defs__item:first-child{border-top:1px solid var(--line)}
.defs__item strong{display:block;font-size:1rem;color:var(--heading);margin-bottom:4px}
.defs__item p{font-size:.93rem;color:var(--text-dim);line-height:1.7;margin:0}
.regs{margin-top:8px}
.regs__p{padding:10px 0;font-size:.95rem;line-height:1.75;color:var(--text);border-bottom:1px solid var(--line)}
.regs__p:first-child{margin-top:0}
.regs .list{margin-top:0}
.regs .list li{padding:10px 0;font-size:.93rem;font-weight:400}
/* --- /regulations --- */

/* 3-up mini cards (compact: image-led + title + 1-line intro, no card chrome) */
.blog-mini{display:flex;flex-direction:column;gap:14px;background:transparent;border:0}
.blog-mini__media{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--paper)}
.blog-mini__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.blog-mini:hover .blog-mini__media img{transform:scale(1.04)}
.blog-mini__title{font-size:1.05rem;font-weight:800;letter-spacing:0;line-height:1.32;color:var(--heading);text-wrap:balance}
.blog-mini__title a{color:inherit;border-bottom:1px solid transparent;transition:border-color .3s,color .3s}
.blog-mini__title a:hover{color:var(--accent-text);border-bottom-color:var(--orange)}
.blog-mini__intro{color:var(--text-dim);font-size:.92rem;line-height:1.65;margin-top:-2px}
/* on the articles LIST page the .blog-mini also participates in .filter-grid */
.filter-grid .blog-mini{transition:opacity .45s var(--ease),transform .45s var(--ease)}

/* --- gallery grid (multi-image) --- */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.gallery-grid__item{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:10px;background:var(--surface-2)}
.gallery-grid__item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gallery-grid__item:hover img{transform:scale(1.05)}
@media(max-width:600px){.gallery-grid{grid-template-columns:repeat(2,1fr);gap:8px}}

/* ==========================================================================
   MODERN ENHANCEMENTS — smooth animations, back-to-top, refined interactions
   ========================================================================== */

/* Back-to-top button */
.totop{position:fixed;bottom:calc(32px + env(safe-area-inset-bottom,0px));left:32px;z-index:80;width:48px;height:48px;border-radius:14px;
  background:var(--prussian);color:#fff;display:grid;place-items:center;cursor:pointer;
  box-shadow:0 6px 24px rgba(5,18,49,.2);border:1px solid rgba(255,255,255,.1);
  opacity:0;visibility:hidden;transform:translateY(16px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s,
    background .3s,box-shadow .3s;pointer-events:none}
.totop.show{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.totop:hover{background:var(--orange);color:var(--onyx);box-shadow:0 10px 32px rgba(5,18,49,.25);transform:translateY(-3px)}
.totop svg{width:20px;height:20px;transition:transform .3s}
.totop:hover svg{transform:translateY(-3px)}
@media(max-width:880px){.totop{bottom:20px;left:20px;width:42px;height:42px;border-radius:12px}}

/* Anchor offset for fixed 92px header */
[id]{scroll-margin-top:92px}
@media(max-width:880px){[id]{scroll-margin-top:78px}}

/* Notch / home-indicator insets */
@supports(padding:max(0px)){
  .ministry,.topbar{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .hero{padding-top:max(0px,env(safe-area-inset-top))}
  @media(max-width:880px){.totop{bottom:max(20px,env(safe-area-inset-bottom));left:max(20px,env(safe-area-inset-left))}}
}

/* Page hero entrance animation */
.phero{animation:pheroIn .7s var(--ease) both}
@keyframes pheroIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.phero .crumb{animation:pheroIn .6s var(--ease) .15s both}
.phero h1{animation:pheroIn .6s var(--ease) .25s both}
.phero p{animation:pheroIn .6s var(--ease) .35s both}

/* Staggered reveal for grid items — GSAP batch stagger handles timing */

/* Refined card hover — inner glow + smoother lift */
.card::before,.tile::before,.video::before,.card--news::before,.focus-card::before{content:"";position:absolute;inset:0;
  border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 0 1px var(--orange);transition:opacity .4s var(--ease);z-index:2}
.card:hover::before,.tile:hover::before,.video:hover::before,.card--news:hover::before,.focus-card:hover::before{opacity:1}
.card,.tile,.video,.card--news,.focus-card{position:relative}

/* Stat hover — progress bar grow */
.stat__bar{position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--line-strong);overflow:hidden}
.stat__bar-fill{height:100%;background:var(--orange);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
.stat:hover .stat__bar-fill{transform:scaleX(1)}

/* Mega menu panel — subtle gradient shift on hover.
   Opaque on purpose: at 98% alpha the bright hero photograph read straight
   through the panel, which looked like a rendering fault rather than glass. */
.nav__panel{background:linear-gradient(165deg,#0e1d3a,#14264a);
  transition:opacity .3s var(--ease-out),transform .3s var(--ease-out),visibility .3s,background .6s var(--ease-out)}
.nav__item:hover .nav__panel{background:linear-gradient(165deg,#122444,#182d55)}

/* Smooth reveal for all section entrances */
.section{animation:sectionIn .6s var(--ease) both}
@keyframes sectionIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Smooth stat entrance */
.stat__n{transition:color .3s}
.stat:hover .stat__n{color:var(--orange-deep)}

/* Pill hover — elevate */
.pill{transition:color .3s var(--ease-out),background .3s var(--ease-out),border-color .3s var(--ease-out),transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.pill:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(5,18,49,.08);border-color:var(--orange);color:var(--heading)}

/* CTA tile — smoother glow */
.cta-tile{transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),background .4s var(--ease-out)}
.cta-tile:hover{background:linear-gradient(135deg,var(--orange),#ffbe24)}

/* Index row — smoother entrance */
.index__row{transition:color .4s var(--ease-out),padding .3s var(--ease-out)}
.index__row:hover{padding-right:clamp(36px,6vw,80px)}

/* Accordion — smoother open/close */
.acc__a{transition:max-height .5s var(--ease-out)}
.acc__q svg{transition:transform .5s var(--ease-out)}

/* ===== Search overlay ===== */
.search-overlay{position:fixed;inset:0;z-index:200;background:rgba(5,18,49,.92);backdrop-filter:blur(6px);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s}
.search-overlay[hidden]{display:none}
.search-overlay:not([hidden]){opacity:1;visibility:visible}
.search-overlay:not([hidden]) .search-overlay__inner{opacity:1;transform:none}
.search-overlay.closing{opacity:0;visibility:hidden}
.search-overlay.closing .search-overlay__inner{opacity:0;transform:translateY(-16px)}
.search-overlay__inner{width:clamp(300px,90vw,680px);display:flex;gap:8px;opacity:0;transform:translateY(-16px);transition:opacity .3s var(--ease) .05s,transform .3s var(--ease) .05s}
.search-overlay__inner form{display:flex;flex:1;gap:8px}
.search-overlay__input{flex:1;padding:16px 20px;border:2px solid var(--line-strong);border-radius:16px;background:var(--cream);color:var(--text);font:inherit;font-size:1.1rem;direction:rtl}
.search-overlay__input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(232,119,34,.15)}
.search-overlay__go,.search-overlay__close{padding:12px 20px;border:none;border-radius:16px;cursor:pointer;font:inherit;display:grid;place-items:center;transition:background .2s,transform .15s}
.search-overlay__go,.search-overlay__close:active{transform:scale(.95)}
.search-overlay__go{background:var(--orange);color:#fff;font-weight:600;padding:12px 28px}
.search-overlay__go:hover{background:var(--orange-deep)}
.search-overlay__close{background:rgba(255,255,255,.1);color:#fff;width:52px}
.search-overlay__close:hover{background:rgba(255,255,255,.2)}
.search-overlay__close svg{width:22px;height:22px;transition:transform .3s}
.search-overlay__close:hover svg{transform:rotate(90deg)}

/* Search icon in header */
.search-btn{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center;transition:color .3s,background .3s,border-color .3s,transform .15s;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.search-btn:hover{background:rgba(255,174,0,.08);color:var(--orange);border-color:var(--orange)}
.search-btn:active{transform:scale(.97);transition:transform .12s var(--ease-out)}
.search-btn:hover svg{transform:rotate(15deg) scale(1.1)}
.search-btn svg{width:20px;height:20px;transition:transform .3s var(--ease)}

/* ===== Search results page ===== */
.search-page{padding-top:48px;padding-bottom:80px;min-height:50vh}
.search-page__form{margin-bottom:32px}
.search-page__box{display:flex;gap:8px;align-items:center;background:var(--cream);border:2px solid var(--line);border-radius:20px;padding:4px 20px 4px 4px;transition:border-color .3s,box-shadow .3s}
.search-page__box:focus-within{border-color:var(--orange);box-shadow:0 0 0 4px rgba(232,119,34,.1)}
.search-page__icon{width:20px;height:20px;color:var(--text-dim);flex-shrink:0}
.search-page__input{flex:1;padding:14px 12px;border:none;background:transparent;font:inherit;font-size:1rem;direction:rtl;color:var(--text)}
.search-page__input:focus{outline:none}
.search-page__submit{padding:10px 24px;border:none;border-radius:14px;background:var(--orange);color:#fff;font:inherit;font-weight:600;cursor:pointer;flex-shrink:0}
.search-page__submit:hover{background:var(--orange-deep)}
.search-page__meta{padding:8px 4px 20px;color:var(--text-dim);font-size:.95rem}
.search-page__results{display:flex;flex-direction:column;gap:32px}
.search-page__group-title{font-size:1.05rem;font-weight:600;color:var(--heading);margin-bottom:12px;padding-bottom:6px;border-bottom:2px solid var(--orange)}
.search-page__item{display:block;padding:14px 16px;border-radius:12px;background:var(--cream);margin-bottom:8px;text-decoration:none;transition:background .2s,transform .2s,box-shadow .2s}
.search-page__item:hover{background:var(--cream-alt);transform:translateY(-2px);box-shadow:0 4px 12px rgba(5,18,49,.06)}
.search-page__item:active{transform:scale(.98)}
.search-page__item-title{display:block;font-weight:600;color:var(--heading);margin-bottom:4px}
.search-page__item-desc{display:block;font-size:.9rem;color:var(--text-dim);line-height:1.6}
.search-page__empty{text-align:center;padding:80px 20px;color:var(--text-dim)}

/* ============================================================
   Rotating + draggable rail (short courses / workshops / tours)
   One track holds every active item. It drifts on its own, stops
   while the pointer or keyboard focus is on it, and can be thrown
   sideways with a press-drag-release (with inertia on release).
   ============================================================ */
.rail{position:relative;margin-top:8px}
/* The track is the CLIP WINDOW and must never move. It used to be the transformed
   element, which slid the whole overflow box sideways: the left of the rail went
   blank and the cards hung past the right edge of the screen, worsening on every
   auto-rotate step until the rail was entirely off-screen. `overflow-x:auto` is
   kept as the no-JS fallback (the list still scrolls); the .is-js class below
   switches to a fixed clip so the transform is the only thing that moves. */
.rail__track{
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;touch-action:pan-y;
  -webkit-user-select:none;user-select:none;
  overscroll-behavior-x:contain;
}
.rail__track.is-js{overflow-x:hidden}
.rail__inner{
  display:flex;gap:clamp(16px,1.6vw,26px);
  padding:6px max(20px,4vw) 30px;
  /* .rail sits OUTSIDE .container, so NEITHER inline edge matched the page grid.
     Rebuild both: --gutter plus the centreing slack --maxw leaves at wide viewports
     is exactly the distance from a track edge to the container's content edge.
     The shorthand set both edges to max(20px,4vw), so patching only the start would
     leave the rail asymmetric -- the end gets the same inset. */
  padding-inline-start:calc(var(--gutter) + max(0px,(100% - var(--maxw))/2));
  padding-inline-end:calc(var(--gutter) + max(0px,(100% - var(--maxw))/2));
  width:max-content;
  will-change:transform;
}
.rail__track::-webkit-scrollbar{display:none}
.rail__track.is-grabbing{cursor:grabbing}
.rail__track.is-draggable.is-grabbing .card{transform:none;translate:none}

/* JS drives x with translate3d; a plain overflow-x:auto is the no-JS fallback
   (the card list still scrolls horizontally, just without the auto-rotate). */
.rail__item{
  flex:0 0 clamp(240px,25vw,320px);
  width:clamp(240px,25vw,320px);
  scroll-snap-align:start;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;
}
/* NB: this must stay INSIDE a (prefers-reduced-motion:no-preference) block, matching
   the rest of the reveal system in this file. Outside it the cards would sit at
   opacity:0 for reduced-motion users — no animation, and no content either. */
@media(prefers-reduced-motion:no-preference){
  html.gsap .rail__item.reveal{opacity:0;transform:translateY(28px)}
}
.rail__tag{background:var(--heading);color:#fff;border:0}
.rail__tag--course{background:var(--prussian)}
.rail__tag--workshop{background:var(--orange);color:#1a1206}
.rail__tag--tour{background:var(--cyan);color:#fff}

.rail__nav{display:flex;gap:8px}
.rail__arrow{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);color:var(--heading);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);transition:background .2s,color .2s,border-color .2s,transform .2s,opacity .2s;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.rail__arrow svg{width:20px;height:20px}
.rail__arrow:hover{background:var(--prussian);color:#fff;border-color:var(--prussian)}
.rail__arrow:active{transform:scale(.97);transition:transform .12s var(--ease-out)}
.rail__arrow[disabled]{opacity:.35;pointer-events:none}

.rail__hint{
  display:flex;align-items:center;gap:8px;justify-content:center;
  color:var(--text-dim);font-size:.82rem;margin:2px auto 0;max-width:32rem;text-align:center;
}
.rail__hint svg{width:16px;height:16px;flex-shrink:0;animation:railNudge 2.6s var(--ease) infinite}
@keyframes railNudge{0%,100%{transform:translateX(0);opacity:.55}50%{transform:translateX(-6px);opacity:1}}

.rail__links{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.rail__links a{color:var(--heading);font-weight:700;font-size:.92rem;border-bottom:1px solid var(--orange);padding-bottom:3px}
.rail__links a:hover{color:var(--accent-text)}

/* While the pointer is down we drive the transform ourselves, so any GSAP reveal
   transform on the cards must not fight it. */
.rail.is-held .rail__item{transition:none}

/* Touch: no hover, so the "drag me" affordance is meaningless — drop the hint.
   The arrow buttons are deliberately KEPT here: on touch and on keyboard-only
   desktops they are the only pointer-free way to move the rail, so hiding them
   under (hover:none) would be an accessibility regression. */
@media(hover:none){
  .rail__hint{display:none}
  .rail__track{cursor:default}
}
@media(prefers-reduced-motion:reduce){
  .rail__hint svg{animation:none}
  .rail__item{transition:none}
}

/* ==========================================================================
   TOUCH TAP TARGETS
   A "polish" pass shrank several controls unconditionally: .soc to 19px,
   .burger to 36px, .hero__dots button to 24x2, .topbar__social a to no padding
   at all. On a mouse none of that matters. On a phone it means a 2px-tall
   carousel dot and a 19px social icon are the only things standing between the
   user and the control.

   Keyed on (pointer:coarse) rather than a width, because a 360px-wide desktop
   window is still a mouse (no need for 44px targets) while a tablet in
   landscape at 1024px absolutely needs them. Where a control is visually small
   (the 2px hero dot) the hit area is grown with padding/a pseudo-element so the
   appearance is unchanged.
   ========================================================================== */
@media(pointer:coarse){

  /* --- hero carousel dots: 24x2 -> 44x44 hit area, identical 24x2 visual ---
     The bar is drawn by ::before (track) and ::after (the timed fill), both
     inset to the original 24px width, so the dots look exactly as before. */
  .hero__dots{gap:10px}
  .hero__dots button{width:44px;height:44px;background:transparent;overflow:visible;border-radius:8px}
  .hero__dots button::before{content:"";position:absolute;top:50%;left:10px;right:10px;height:2px;margin-top:-1px;background:rgba(255,255,255,.3);border-radius:2px}
  .hero__dots button.active::before{background:rgba(255,255,255,.42)}
  .hero__dots button.active::after{top:50%;left:10px;right:10px;bottom:auto;height:2px;margin-top:-1px;border-radius:2px}

  /* --- topbar social icons: 19x19 -> 44x44 --- */
  .topbar__social{gap:4px}
  .topbar__social a{width:44px;height:44px;display:grid;place-items:center;border-radius:10px}
  .topbar__social a:active{background:rgba(255,174,0,.12)}
  .topbar__social .soc{width:19px;height:19px}
  .topbar__social svg{width:17px;height:17px}

  /* --- header controls --- */
  .burger{width:44px;height:44px;border-radius:10px}
  .search-btn{width:44px;height:44px}
  .brand{min-height:44px}
  .ministry{min-height:44px;padding-block:10px}

  /* The logo must never be squeezed. It is the one header element that cannot
     usefully shrink, and with `flex:0 1 auto` a crowded header crushed it to
     10px wide at 320px — an invisible logo. */
  .brand{flex-shrink:0}
  .header__cta{flex-shrink:0}

  /* --- the horizontal desktop nav, which is what a tablet in landscape gets.
     At 1024px the nav is still a row of text links and its dropdown toggles
     were 36px tall. --- */
  .nav>a,.nav__item>a,.nav__toggle{min-height:44px;display:inline-flex;align-items:center}
  .nav__menu a{min-height:44px;align-items:center}
  .nav__panel a,.nav__link-single{min-height:44px;align-items:center}

  /* --- hero pager arrows: DELIBERATELY left at their designed 40x40.
     The stylesheet already hides .hero__arrows below 560px, so these are never a
     touch target on a phone. A previous pass here forced them to 44x44, which
     only made them visually too big and pushed them out of place on tablet and
     landscape widths, where they are a secondary control next to the dots. --- */

  /* --- card / tile CTAs: the primary action on every card --- */
  .card__link{min-height:44px;align-items:center}

  /* --- rail controls: 42px arrows and 31px "see all" links --- */
  .rail__arrow{width:44px;height:44px}
  .rail__links a{min-height:44px;display:inline-flex;align-items:center}

  /* --- header CTA: padding gave 39px, two short of the floor.
     Deliberately does NOT set `display`. `.header__cta .btn` ties on specificity
     with `.header__cta .btn--ghost{display:none}` from the 880px block, and being
     later it would win and re-show the ghost button on phones. The parent is
     already `display:flex;align-items:center`, so min-height alone is enough. --- */
  .header__cta .btn{min-height:44px}

  /* --- at 320-360px the brand (120px, now unshrinkable) plus search + login +
     enrol + burger no longer fit, and the row overflowed off the left edge in
     RTL. Drop the secondary "enrol" button from the header at that width; it
     stays reachable from the burger menu and the footer. --- */
  @media(max-width:360px){
    .header__cta .btn--solid{display:none}
  }

  /* --- footer contact list: standalone rows, so they can take the full height --- */
  .fcontact li{min-height:44px;align-items:center}
  .fcontact svg{margin-top:0}
  .fsocial a{width:44px;height:44px}

  /* --- inline links inside a sentence: WCAG 2.5.8 exempts these, but vertical
     padding grows the hit area without touching the line box, so it costs
     nothing visually. --- */
  .fbottom a,.ministry a{padding-block:14px}
  .info p a{padding-block:11px;display:inline-block}

  /* --- card title links: on every listing page this is the PRIMARY way to open
     a course/workshop/tour, and it was only 26-33px tall. --- */
  .card__title a,.blog-mini__title a,.blog-feat__title a,.home-news__item h4 a,.home-news__feat h3 a{
    display:inline-flex;align-items:center;min-height:44px
  }
  .card__title a:hover,.blog-mini__title a:hover,.home-news__item h4 a:hover,.home-news__feat h3 a:hover{transform:none}

  /* --- breadcrumb trail: a navigation control, not prose. Short labels like
     "خانه" are only ~27px of text, so pad the inline axis too. --- */
  .crumb a{display:inline-flex;align-items:center;min-height:44px;padding-inline:9px}

  /* --- the button class used for card CTAs ("ثبت‌نام در ورکشاپ") was 30px.
     NB: these two rules are deliberately NOT combined into one selector list.
     A selector list takes the specificity of its most specific member, so
     `.card__body .b,.btn{...}` would make the whole block (0,2,0) and, being
     later in the file, it beat `.header__cta .btn--ghost{display:none}` from the
     880px block — re-showing the ghost button on phones. That squeezed the
     header CTA to 256px and collapsed the logo to 10px at 320px wide.
     Keeping them apart preserves each selector's own specificity. --- */
  .card__body .b,.card__body .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .btn,.b{min-height:44px;display:inline-flex;align-items:center;justify-content:center}

  /* --- native checkboxes/radios render at 13px, which is not a usable target.
     The wrapping <label> is already tappable, so this only has to reach the
     WCAG 2.5.8 minimum of 24px to be comfortably hittable. --- */
  input[type=checkbox],input[type=radio]{
    width:24px;height:24px;min-width:24px;accent-color:var(--orange)
  }

  /* --- feature CTA + ticker link --- */
  .blog-feat__cta{min-height:44px;display:inline-flex;align-items:center}
  .ticker__type{min-height:44px;display:inline-flex;align-items:center}
}

/* iOS zoom fix: prevent auto-zoom on focus when font-size < 16px */
@media (pointer:coarse){
  input,textarea,select{font-size:16px}
}


/* Reserve the band the hero dots occupy.
   The dots are pinned at bottom:26px and are 2px tall, so they occupy 26-28px of
   the hero's bottom edge. The slide content is bottom-anchored, so the CTA row
   lands wherever the container's bottom padding puts it — previously 24-72px
   depending on breakpoint, which is why the row and the dots collided at some
   viewport heights. A padding floor of 76px guarantees the row always clears the
   dots' band at every size, and keeps the earlier fix (the CTA row fitting above
   the fold on a phone) intact because the hero is min-height, not a fixed height. */
.hero .container{padding-bottom:76px}
@media(max-width:560px){
  .hero .container{padding-bottom:64px}
  .hero__dots{bottom:20px}
}
/* ==========================================================================
   MEGA MENU — editorial headings + card grids
   --------------------------------------------------------------------------
   The previous panel was a flat list of 17 undifferentiated text links in four
   columns, with a large dead band under the links because the columns were
   unequal. This restyles it as a hybrid, per the chosen direction:

     - EDITORIAL headings: larger, tighter, with a small index number, so each
       group reads as a titled section rather than another list.
     - CARD grid: each link becomes a card with an accent bar that animates in on
       hover, a subtle lift, and a clear active state. Cards wrap into a grid so
       short and long columns end at the same depth instead of leaving a void.

   Everything is scoped to .nav__panel so the portal dropdown (.nav__menu) keeps
   its own treatment.
   ========================================================================== */

.nav__panel{
  padding:0;
  background:linear-gradient(180deg,#0e1d3a,#111f3d 55%,#0d1a33);
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 28px 70px rgba(0,0,0,.5);
}

/* A hairline of brand colour along the top edge, so the panel reads as a
   deliberate surface rather than a dropdown that happens to be dark. */
.nav__panel::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--orange) 22%,var(--orange) 78%,transparent);
  opacity:.55;
}
/* the hover bridge (see above) must sit above this hairline, not under it */
.nav__panel::before{
  content:"";position:absolute;top:auto;left:0;right:0;bottom:100%;height:18px;
}

.nav__item:hover .nav__panel{background:linear-gradient(180deg,#122444,#152a4c 55%,#122340)}

.nav__panel-inner{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:0 clamp(20px,2.4vw,40px);
  align-items:start;
  max-width:var(--maxw);
  margin-inline:auto;
  padding:30px var(--gutter) 34px;
}

/* ---------- column ---------- */
.nav__col{
  display:flex;flex-direction:column;gap:8px;
  min-width:0;
  padding-top:2px;
}

/* ---------- EDITORIAL heading ---------- */
.nav__col-title{
  display:flex;align-items:baseline;gap:9px;
  font-family:var(--sans);
  font-size:1.02rem;font-weight:800;letter-spacing:0;line-height:1.25;
  color:#fff;
  text-transform:none;
  margin:0 0 4px;
  padding:0 0 12px;
  border-bottom:1px solid rgba(255,174,0,.28);
  position:relative;
}
/* index number, editorial style */
.nav__col-title::before{
  counter-increment:mega;
  content:counter(mega,decimal-leading-zero);
  font-family:var(--mono);
  font-size:.68rem;font-weight:600;letter-spacing:.1em;
  color:var(--orange);
  opacity:.85;
  flex:0 0 auto;
}
.nav__panel-inner{counter-reset:mega}

/* ---------- CARD grid ---------- */
.nav__col{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(122px,1fr));
  gap:6px;
}
.nav__col-title{grid-column:1/-1}

.nav__panel a,
.nav__link-single{
  position:relative;
  display:flex;align-items:center;
  min-height:40px;
  padding:8px 10px 8px 12px;
  border-radius:10px;
  border:1px solid transparent;
  background:rgba(255,255,255,.035);
  color:rgba(255,255,255,.82);
  font-size:.8rem;font-weight:600;line-height:1.3;
  text-decoration:none;
  transition:background-color .22s var(--ease),color .22s var(--ease),
             border-color .22s var(--ease),transform .22s var(--ease);
}
/* accent bar that wipes in on hover */
.nav__panel a::before,
.nav__link-single::before{
  content:"";position:absolute;left:0;top:50%;
  width:3px;height:0;border-radius:0 3px 3px 0;
  background:var(--orange);
  transform:translateY(-50%);
  transition:height .24s var(--ease);
}
.nav__panel a:hover,
.nav__link-single:hover{
  background:rgba(255,174,0,.1);
  border-color:rgba(255,174,0,.32);
  color:#fff;
  transform:translateY(-1px);
}
.nav__panel a:hover::before,
.nav__link-single:hover::before{height:60%}

.nav__panel a:focus-visible,
.nav__link-single:focus-visible{
  outline:none;
  border-color:var(--orange);
  background:rgba(255,174,0,.12);
  color:#fff;
}

/* current page — must be obvious, not just a tint */
.nav__panel a.active,
.nav__link-single.active{
  background:rgba(255,174,0,.16);
  border-color:rgba(255,174,0,.5);
  color:#fff;
  font-weight:800;
}
.nav__panel a.active::before,
.nav__link-single.active::before{height:100%}

/* a single link with no children, sitting in the grid */
.nav__link-single{
  grid-column:span 1;
  font-size:.9rem;
}

/* ---------- MOBILE: the same cards, stacked as an accordion ---------- */
@media(max-width:880px){
  .nav__panel-inner{
    display:flex;flex-direction:column;gap:0;
    padding:0;
  }
  .nav__col{
    display:flex;flex-direction:column;gap:5px;
    width:100%;
  }
  .nav__col-title{
    font-size:.82rem;letter-spacing:.06em;font-weight:700;
    color:rgba(255,255,255,.62);
    margin:14px 0 2px;padding:0 0 8px;
    text-transform:uppercase;
  }
  .nav__col-title::before{display:none}
  .nav__panel a,
  .nav__link-single{
    min-height:46px;
    padding:12px 14px 12px 16px;
    font-size:.92rem;font-weight:600;
    background:rgba(255,255,255,.03);
    border-radius:9px;
  }
  .nav__panel a::before,.nav__link-single::before{display:none}
  .nav__panel a:hover,.nav__link-single:hover{transform:none}
  /* a divider between groups reads better than a border on every row */
  .nav__col + .nav__col,
  .nav__col + .nav__link-single{border-top:1px solid rgba(255,255,255,.07);padding-top:12px;margin-top:10px}
}

/* --- Inline anchors sitting in prose notices (.note) are only ~26px tall on a
   phone. They already paint their underline with border-bottom, so padding
   would push the underline off the text; expand the HIT AREA with a pseudo
   element instead and leave the visual exactly where it is. --- */
@media (pointer:coarse){
  .note a{position:relative}
  .note a::after{content:"";position:absolute;inset:-9px -6px}
}

/* --- Hover LIFT was silently dead on every revealed card/tile.
   After a reveal GSAP pins ALL FOUR transform channels inline on the element:
     translate:none; rotate:none; scale:none; transform:translate(0px,0px)
   An inline style outranks every selector, so a plain `.card:hover{transform:
   translateY(-4px)}` could never apply (pre-existing: HEAD had the same dead
   rule). The lift therefore rides `translate` — the same composite channel GSAP
   reserves — with `!important`, the one legitimate use of it: overriding a
   third-party library's inline declaration. It composes with the inline
   `transform` rather than being replaced by it. transition-property is extended
   (durations cycle from the rules above) so the lift eases instead of snapping. --- */
.card,.tile,.video,.info,.card--news,.focus-card{
  transition-property:border-color,box-shadow,transform,translate;
}
.cta-tile{transition-property:transform,box-shadow,background,translate}
/* NOTE: `transform` must NOT also carry a lift on these selectors — the two
   channels are additive (translate → rotate → scale → transform), so an
   element without GSAP's inline pin would move 8px instead of 4px. `translate`
   is the single source of the lift.
   Touch override lives in the hover:none block at END of file (deliberately
   after this rule: equal specificity + !important resolves by source order).
   On hover-capable pointers the !important still beats GSAP's inline pin. */
.card:hover,.card:focus-within,
.tile:hover,.tile:focus-visible,
.info:hover,.info:focus-visible,
.focus-card:hover,.focus-card:focus-within{translate:0 -4px!important}
.video:hover,.video:focus-within,
.card--news:hover,.card--news:focus-within,
.cta-tile:hover{translate:0 -6px!important}

/* ---------- Reduced transparency: solidify frosted glass ----------
   Lives at end of file DELIBERATELY: equal-specificity rules later in the
   cascade win, and .search-overlay (~line 1098) would otherwise override it.
   Never stack translucent surfaces. */
@media(prefers-reduced-transparency:reduce){
  .header::after{background:rgba(10,26,58,.98);-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav-backdrop{background:rgba(5,18,49,.9);-webkit-backdrop-filter:none;backdrop-filter:none}
  .search-overlay{background:rgba(5,18,49,.98);-webkit-backdrop-filter:none;backdrop-filter:none}
  /* NOTE: the homepage `.home` surfaces are overridden at the very END of this
     file, not here — the HOMEPAGE block below is appended after this rule, and
     `.home .header` (0,2,0) outranks `.header` (0,1,0) regardless of order. */
}

/* ---------- Sticky-hover fix: neutralize hover lifts on touch devices ----------
   On touch screens :hover fires on tap and sticks, so any transform/translate/
   box-shadow lift becomes a persistent offset. Keep color/border-color shifts
   for visual feedback, but disable all positional lifts. Class-driven states
   (.is-open, .active, .show) and functional open rules (.nav__item:hover
   .nav__menu, .nav__panel:hover) are NOT touched.
   The card/tile translate-lift IS listed below: this block sits after the lift
   rules, so equal-specificity !important resolves in its favor on touch.
   FOCUS selectors are deliberately absent: focus does
   not stick on touch, and neutralizing box-shadow there would kill the keyboard
   focus ring (WCAG 2.4.7). State-transforms (wipe/underline) neutralize to
   their REST value, not `none` — `none` IS their on-state. Press (:active)
   rules carry !important so instant press feedback wins over latched :hover. */
/* ==========================================================================
   HOMEPAGE ELEVATION — Button system, News editorial, Rail premium, Events badges
   ========================================================================== */

 /* --- Button size variants (append, don't rewrite base .btn) --- */
 .btn--sm{padding:10px 18px;font-size:.8rem;gap:8px}
 .btn--lg{padding:18px 36px;font-size:.98rem;gap:12px}
 .btn--sm svg{width:16px;height:16px}
 .btn--lg svg{width:20px;height:20px}

 /* Hero side-by-side row sizing lives in the HOMEPAGE block below, scoped to the
    >=1024px desktop breakpoint. An earlier 821px copy of this rule was dead there
    and contradicted the tablet stack, so it was removed rather than merged. */

 /* --- Section head split helper (replaces inline flex on homepage) --- */
 .sec-head--split{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;max-width:none}
 .sec-head--split .sec-head__actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
 @media(max-width:720px){
   .sec-head--split{align-items:flex-start}
   .sec-head--split .sec-head__actions{width:100%;justify-content:flex-start}
 }

 /* --- Header CTA: normalize to .btn--sm scale --- */
 .home .header__cta .btn{padding:10px 18px;font-size:.8rem;gap:8px}
 .home .header__cta .btn svg{width:16px;height:16px}   /* scoped: else inner headers inherit it */

 /* --- CTA band: both buttons .btn--lg (already solid/ghost, just size) --- */
 .home .cta .btn{padding:18px 36px;font-size:.98rem;gap:12px;min-height:56px}
 .home .cta .btn svg{width:20px;height:20px}   /* scoped: else inner CTA bands inherit it */

 /* ==========================================================================
    NEWS — Editorial featured + list layout
    ========================================================================== */
 .home-news{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(20px,2.6vw,32px)}
 /* index.php omits .home-news__list entirely when there is only one post, so the
    featured card must span the whole grid instead of leaving a 40% void */
 .home-news__feat:only-child{grid-column:1/-1}
 .home-news__feat .card__media{aspect-ratio:16/9}
 .home-news__feat h3{font-size:clamp(1.4rem,2.4vw,2rem)}
 .home-news__list{display:flex;flex-direction:column;gap:16px}
 .home-news__item{
   display:grid;grid-template-columns:180px 1fr;
   background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
   transition:border-color var(--dur-md) var(--ease-out),transform var(--dur-md) var(--ease-out),translate var(--dur-md) var(--ease-out),box-shadow var(--dur-md) var(--ease-out)
 }
 .home-news__item:hover,.home-news__item:focus-within{border-color:var(--orange);box-shadow:var(--shadow);translate:0 -4px}
 .home-news__item .card__media{aspect-ratio:4/3;overflow:hidden;background:var(--surface-2)}
 .home-news__item .card__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
 .home-news__item:hover .card__media img{transform:scale(1.04)}
 .home-news__item .card__body{padding:18px 20px;display:flex;flex-direction:column;justify-content:center;gap:8px}
 .home-news__item .card__tag{position:static;top:auto;right:auto;z-index:auto;display:inline-flex;align-self:flex-start;font-family:var(--meta);font-size:.6rem;letter-spacing:0;text-transform:uppercase;color:var(--accent-text);background:transparent;padding:0;box-shadow:none}
 .home-news__item h4{font-size:1.02rem;font-weight:800;letter-spacing:0;line-height:1.35;color:var(--heading);text-wrap:balance;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.64em}
 .home-news__item .card__meta{font-family:var(--meta);font-size:.68rem;letter-spacing:0;text-transform:uppercase;color:var(--text-dim);display:flex;gap:12px}
 .home-news__item .card__meta svg{width:12px;height:12px;color:var(--cyan)}
 .home-news__item p{font-size:.88rem;color:var(--text-dim);line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.55em}
 .home-news__item h4 a:hover,.home-news__feat h3 a:hover{color:var(--accent-text)}

 @media(max-width:880px){
   .home-news{grid-template-columns:1fr}
   .home-news__item{grid-template-columns:140px 1fr}
 }
 @media(max-width:560px){
   .home-news__item{grid-template-columns:1fr}
   .home-news__item .card__media{aspect-ratio:16/9}
 }

 /* ==========================================================================
    RAIL — Premium cards + header/nav polish
    ========================================================================== */
 .rail__item .card__media{aspect-ratio:16/10}
 .rail__item h3{
   font-size:1.08rem;line-height:1.35;
   display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em
 }
 .rail__item .card__body{padding:22px}
 .rail__item .card__body p{
   display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.55em
 }
 .rail__item:hover{translate:0 -6px!important;box-shadow:var(--shadow-lg)}

 .rail__tag{font-weight:700;box-shadow:var(--shadow-sm)}

 .rail__links{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
 .rail__links a{
   display:inline-flex;align-items:center;gap:8px;
   padding:10px 20px;border:1px solid var(--line-strong);border-radius:var(--r-pill);
   font-weight:700;font-size:.92rem;color:var(--heading);background:transparent;
   transition:border-color var(--dur) var(--ease-out),background-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out)
 }
 .rail__links a:hover{border-color:var(--orange);background:rgba(255,174,0,.10);color:var(--accent-text)}

 .rail__arrow:focus-visible{outline:none;box-shadow:var(--ring)}

 /* ==========================================================================
    EVENTS — Date badge overlay on media
    ========================================================================== */
 .card__media .card__date{
   position:absolute;bottom:12px;right:12px;z-index:2;
   background:#fff;border-radius:10px;padding:6px 12px;text-align:center;
   box-shadow:var(--shadow-sm);line-height:1.2
 }
 .card__media .card__date b{display:block;font-size:1.1rem;font-weight:900;color:var(--heading)}
 .card__media .card__date i{
   font-style:normal;font-family:var(--mono);font-size:.62rem;
   letter-spacing:.08em;color:var(--text-dim)
 }

 /* ==========================================================================
    Sticky-hover fix: neutralize hover lifts on touch devices
    (moved to end, after new hover rules above)
    ========================================================================== */
 @media (hover:none){
   .btn:hover,.btn--solid:hover,.btn--ghost:hover,.btn--dark:hover,.btn--light:hover,
   .burger:hover,
   .chip:hover,
   .hero__arrows button:hover,
   .rail__arrow:hover,
   .search-btn:hover,
   .nav>a:hover,.nav__item>a:hover,.nav__toggle:hover,
   .nav__panel a:hover,.nav__link-single:hover,
   .nav__menu a:hover,
   .card:hover,
   .tile:hover,
   .video:hover,
   .info:hover,
   .card--news:hover,
   .cta-tile:hover,
   .split__media:hover,
   .index__row:hover,
   .pill:hover,
   .toc__item:hover,
   .feat-news:hover,
   .focus-card:hover,
   .blog-feat__media:hover,
   .blog-mini:hover,
   .gallery-grid__item:hover,
   .fsocial a:hover,
   .topbar__social a:hover,
   .topbar a:hover,
   .footer ul a:hover,
   .totop:hover,.totop:hover svg,
   .search-page__item:hover,
   .card__link:hover svg,
   .tile:hover .tile__ico,
   .video--lazy:hover .video__play,
   .split__media:hover img,.card:hover .card__media img,.card--news:hover .card__media img,
   .blog-mini:hover .blog-mini__media img,.blog-feat__media:hover img,
   .feat-news:hover .feat-news__media img,.focus-card:hover .focus-card__media img,
   .gallery-grid__item:hover img,.home-news__item:hover .card__media img,
   .search-btn:hover svg,.search-overlay__close:hover svg,
   .home-news__item:hover,
   .rail__links a:hover,
   .rail__item:hover{transform:none!important;translate:none!important;box-shadow:none!important}
   /* state-transforms: neutralize to REST, never to `none` */
   .index__row:hover .index__fa{transform:none!important}
   .index__row:hover::before{transform:translateX(-101%)!important}
   .nav>a:hover::after,.nav__item:hover>a::after{transform:scaleX(0)!important}
   .nav__item:hover .chev{transform:none!important}
   .btn:active,.burger:active,.chip:active,.hero__dots button:active,
   .hero__arrows button:active,.rail__arrow:active,.search-btn:active{transform:translateY(-2px) scale(.97)!important}
 }

/* ==========================================================================
   HOMEPAGE — Harvard/Stanford lander style
   All rules scoped to .home so inner pages are untouched.
   ========================================================================== */


/* ministry + topbar no longer exist as bands (folded into the drawer).
   Kept so any page still rendering them keeps them hidden on the homepage. */
.home .ministry,
.home .topbar {
  display: none;
}

/* ---------- B) FULL-VIEWPORT HERO ---------- */
/* The hero is 100dvh TALL, but it can never grow: every child (.slide, .hero__alef,
   .hero__dots, .hero__arrows) is position:absolute, so the hero has ZERO in-flow
   content and its height is always exactly min-height. The base `overflow:hidden`
   then clips whatever does not fit.
   That is structural, not fixable in CSS: the h1/sub are per-slide (DB-driven), so
   they must live inside the absolutely-positioned .slide to crossfade. An earlier
   revision of this comment wrongly claimed a long headline "grows the hero".
   Mitigation is therefore to BOUND the copy so it degrades with an ellipsis
   instead of being sliced mid-glyph — see the -webkit-line-clamp rules below. */
.home .hero {
  min-height: 100svh;
  min-height: 100dvh;
}

/* Container: top padding only clears the fixed header (~47px + breathing room).
   The bottom offset lives on .hero__inner so it is not applied twice. */
.home .hero .container {
  padding-top: clamp(96px, 13vh, 150px);
  padding-bottom: 0;
}

/* Stronger scrim at top for nav readability over any photo */
.home .slide__bg::after {
  background: linear-gradient(180deg, rgba(2,8,20,.72) 0%, rgba(2,8,20,.35) 45%, rgba(5,18,49,.6) 100%);
}

/* Video slides: same gradient override */
.home .slide--video .slide__bg::after {
  background: linear-gradient(180deg, rgba(2,8,20,.72) 0%, rgba(2,8,20,.35) 45%, rgba(5,18,49,.6) 100%);
}

/* ---------- C) DESKTOP (≥1024px): text bottom-right, CTA buttons bottom-left, dots centered ---------- */
@media (min-width: 1024px) {
  .home .hero__inner {
    position: relative;
    display: flex;
    align-items: flex-end;
    /* bottom offset clears the centred dots band (dots sit at bottom:28px) */
    padding-bottom: clamp(84px, 12vh, 140px);
  }

  .home .hero__row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    gap: clamp(24px, 4vw, 80px);
    padding: 0;
  }

  .home .hero__text {
    /* Percentage-based, NOT ch-based: 58ch is only ~460px and forced the headline
       onto 3 lines. 62% of the container keeps a strong measure at every width. */
    flex: 1 1 62%;
    min-width: 0;
    max-width: none;
    text-align: right;
  }

  .home .hero__text h1 {
    color: #fff;
    /* bounded by viewport HEIGHT as well as width, so a tall/short window
       cannot push the headline off the top of the fixed 100dvh band */
    font-size: min(clamp(2.4rem, 5vw, 5rem), 11vh);
    line-height: 1.15;
    margin-bottom: 18px;
    /* the hero cannot grow (see B), so cap the copy rather than clip it.
       Safe here: the GSAP word-splitter only targets .manifesto__q, not this h1. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .home .hero__sub {
    color: #d6dcea;
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.75;
    /* 0 keeps the text block's bottom edge flush with the CTA baseline
       (preserves the base .hero__text .hero__sub{margin-bottom:0} intent) */
    margin-bottom: 0;
    max-width: 60ch;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .home .hero__side {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    gap: 14px;
    align-items: center;
  }

  .home .hero__side .btn {
    min-height: 52px;
    min-width: 180px;
    font-size: .92rem;
  }

  .home .hero__dots {
    bottom: 28px;
    left: 0;
    right: 0;
    justify-content: center;
    z-index: 5;
  }
}

/* Arrows hidden at EVERY homepage width — the centred dots are the single
   paging control, so the hero looks the same on a phone and on a desktop. */
.home .hero__arrows {
  display: none;
}

/* ---------- D) TABLET + MOBILE (≤1023px): centered stack ---------- */
/* Breakpoint is 1023 (not 820) because the 821–1023 band cannot fit a 62% text
   column plus two 180px CTAs side-by-side without pushing the CTAs off-screen. */
@media (max-width: 1023px) {
  .home .hero__inner {
    /* display:flex is REQUIRED here: it is only set in the >=1024px block above,
       so without it `align-items`/`justify-content` are inert on a block box and
       the short-viewport (max-height:450px) anchoring fix would do nothing. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 0;
    padding-bottom: clamp(72px, 11vh, 96px);
  }

  .home .hero__row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    padding-bottom: 0;
  }

  .home .hero__text {
    max-width: 90vw;
    text-align: center;
  }

  .home .hero__text h1 {
    font-size: min(clamp(1.9rem, 9vw, 3.4rem), 9vh);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .home .hero__sub {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .home .hero__side {
    width: 100%;
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  .home .hero__side .btn {
    width: 100%;
    max-width: 320px;
    min-height: 48px;
  }

  .home .hero__dots {
    bottom: 18px;
  }

  /* Ticker below hero flows naturally — no extra rules needed */
}

/* ---------- E) NEWS BAR (ticker) directly below hero, no gap ---------- */
.home .hero {
  margin-bottom: 0;
}
.home .ticker {
  margin-top: 0;
  border-radius: 0;
}

/* ---------- F) Section order ---------- */
/* Scroll sequence (user-specified, now implemented in index.php):
   hero -> news ticker (small last-news bar) -> rail (short courses / workshops / tours)
   -> events -> disciplines (study fields) -> admission path -> about -> manifesto
   -> articles -> news -> CTA.
   The markup blocks were moved verbatim: no query, variable, URL or guard changed. */

/* ---------- G) Short landscape (h<=450px): keep the stack clear of the fixed header ---------- */
/* On a 360-450px band the centred stack can be taller than the band itself.
   `align-items:flex-start` anchors it below the header so the overflow falls
   toward the fold instead of sliding up under the fixed nav; the type is shrunk
   so it normally fits outright. There is no hard hero height, so the hero simply
   grows a little rather than clipping. */
@media (max-height: 450px) {
  /* must clear the new 70px-tall bar, not the old 47px one */
  .home .hero .container { padding-top: 88px; }
  .home .hero__inner {
    align-items: flex-start;
    padding-bottom: 40px;
  }
  .home .hero__text h1 {
    font-size: clamp(1.6rem, 5.2vh, 2.2rem);
    -webkit-line-clamp: 2;
  }
  .home .hero__sub { font-size: .9rem; line-height: 1.5; -webkit-line-clamp: 2; }
  .home .hero__side .btn { min-height: 44px; }
  .home .hero__dots { bottom: 12px; }
}

/* Phone held sideways (short AND narrow): the base `.slide{align-items:flex-end}`
   pins the copy to the bottom of a ~360px band, so anything that does not fit is
   pushed off the TOP and under the fixed header. Anchor to the top instead, so the
   overflow falls below the fold. Narrow-only so a short desktop window keeps its
   intentional bottom-anchored Harvard alignment. */
@media (max-width: 1023px) and (max-height: 450px) {
  /* Both axes are needed: below 880px the base sets .slide to
     `flex-direction:column; justify-content:flex-end`, so the vertical axis is the
     MAIN axis and `align-items` alone cannot move the copy off the bottom. */
  .home .slide { align-items: flex-start; justify-content: flex-start; }
  .home .hero__inner { justify-content: flex-start; }
}
/* ==========================================================================
   REDUCED TRANSPARENCY — homepage surfaces
   MUST stay at the very end of the file. The HOMEPAGE block above is appended
   after the main reduced-transparency block and matches its specificity, so an
   override placed there would be beaten by the later `.home .header::after`.
   Without this, the homepage keeps a 55%-alpha scrim and a 16px backdrop blur
   under exactly the setting this codebase added to remove them.
   ========================================================================== */
@media (prefers-reduced-transparency: reduce) {
  .home .header::after { background: rgba(10, 26, 58, .98); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .home .header.scrolled { background: rgba(10, 26, 58, .98); }
  .home .header.scrolled::after { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .home .header.scrolled::before { opacity: 1; }
}


/* ==========================================================================
   APPLE-LANGUAGE HEADER
   Replaces the Imperial port. Principles applied:
   - TRANSLUCENCY over paint: real backdrop blur, hairline separators, no thick
     2px framing rules (Imperial) — 0.5px hairlines like iOS/macOS dividers.
   - RESTRAINT: one hairline, not four. The logo gets breathing room, not a rule.
   - TYPOGRAPHY: SF-like optical sizing, tighter tracking on the wordmark, a
     clear size ramp (11/13/15/22) instead of Imperial's flat 0.8rem everywhere.
   - MOTION: spring curves, short durations, transform/opacity only.
   - MATERIALS: layered translucency (thin bar -> heavy scrim) matching iOS.
   - FEEDBACK: tinted press states and a visible focus ring, like UIKit.
   ========================================================================== */

.header{
  /* Material tokens. The bar is "thin" material; the drawer is "heavy". */
  --bar-material:rgba(251,251,253,.72);
  --bar-material-opaque:rgba(251,251,253,.94);
  --bar-hairline:rgba(60,60,67,.14);
  --bar-ink:#1d1d1f;
  --bar-ink-2:rgba(60,60,67,.72);
  --bar-ink-3:rgba(60,60,67,.44);
  --bar-tint:rgba(0,122,255,.10);
  --bar-radius:10px;

  /* Imperial-style full-screen dark drawer tokens */
  --drawer-ink:#f4f1ea;
  --drawer-ink-2:rgba(244,241,234,.62);
  --drawer-hairline:rgba(244,241,234,.16);
  --accent:var(--orange);
  --spring:cubic-bezier(.32,.72,0,1);
  --spring-soft:cubic-bezier(.25,.46,.45,.94);
  --dur-fast:.22s;
  --dur:.34s;

  position:relative;z-index:60;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- The bar: logo, spacer, search, menu ---------- */
.header__inner{
  position:relative;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:0 16px;
  max-width:var(--maxw);margin-inline:auto;
  padding:0 var(--gutter);height:52px;                 /* 52pt bar, like iOS toolbars */
  transition:height var(--dur) var(--spring);
}
/* ONE hairline, at the bottom. Apple uses a single separator, not a frame. */
.js .header__inner:after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:.5px;
  background:var(--bar-hairline);
  transition:opacity var(--dur) var(--spring);
}
@media (min-width:1024px){
  .header__inner{padding-inline:var(--gutter)}
}
@media (max-width:1023px){
  .header__inner{padding-inline:var(--gutter);gap:0 10px}
}

/* Logo: tight tracking, optical size. No vertical rule (that was Imperial). */
.header__logo{
  display:flex;align-items:center;
  padding-block:10px;                          /* hit target >=44px tall overall */
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.header__logo img{
  height:auto;max-height:22px;max-width:none;width:auto;display:block;
  transition:opacity var(--dur-fast) var(--spring),transform var(--dur) var(--spring);
}
.header__logo:hover img{opacity:.72}
.header__logo:active img{transform:scale(.97);opacity:.6}
/* The JS sets a class when a current user is signed in; nothing visual needed
   here, but the old rule is removed so no stale vertical rule survives. */

/* The lockup is two rasters of the same mark: a dark navy one and an inverse
   recoloured to cream (gold seal preserved). Only one is displayed at a time —
   the dark one on light surfaces (inner pages, and the scrolled frosted bar) and
   the inverse while the transparent bar sits on the hero photo. See the comment
   in inc/header.php for why a single file cannot serve both. */
/* Only one is displayed at a time. The img-qualified selectors are load-bearing:
   `.header__logo img` below is (0,1,1) and would otherwise beat these (0,1,0)
   rules and show BOTH rasters stacked — which is exactly what happened: the
   cream file stayed visible over the frosted bar and washed the logo out. */
.header__logo img.header__logo-light{display:none}
.header--overlay:not(.scrolled) .header__logo img.header__logo-dark{display:none}
.header--overlay:not(.scrolled) .header__logo img.header__logo-light{display:block}

/* Buttons cluster — pinned to the trailing edge (the 1fr middle column is the
   search's; the buttons take the last auto track). */
.header__buttons{display:none;align-items:center;gap:10px;justify-self:end}
.js .header__buttons{display:flex}
@media (max-width:1023px){.header__buttons{gap:4px}}

/* ---------- Search: a rounded capsule field, iOS style ---------- */
.header__search{display:none;justify-self:end;width:fit-content}
.header__search form{
  display:flex;align-items:center;gap:6px;
  background:rgba(118,118,128,.12);           /* iOS "secondary fill" */
  border-radius:var(--bar-radius);
  padding:5px 8px 5px 10px;
  transition:background var(--dur-fast) var(--spring),box-shadow var(--dur-fast) var(--spring);
}
.header__search form:focus-within{
  background:#fff;
  box-shadow:0 0 0 3px var(--bar-tint);
}
.header__search input{
  appearance:none;background:transparent;border:0;outline:0;
  font-family:inherit;font-size:.8125rem;line-height:1.4;
  color:var(--bar-ink);width:150px;padding:2px 0;
}
.header__search input::placeholder{color:var(--bar-ink-3)}
.header__search button{
  appearance:none;background:transparent;border:0;cursor:pointer;padding:0;
  color:var(--bar-ink-3);display:inline-flex;border-radius:6px;
  transition:color var(--dur-fast) var(--spring);
}
.header__search button svg{width:16px;height:16px}
.header__search button:hover{color:var(--bar-ink)}
.header__search-toggle{
  appearance:none;background:transparent;border:0;cursor:pointer;
  display:none;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;color:var(--bar-ink);
  -webkit-tap-highlight-color:transparent;
  transition:background var(--dur-fast) var(--spring);
}
.header__search-toggle svg{width:19px;height:19px;pointer-events:none}
.header__search-toggle:hover{background:rgba(118,118,128,.12)}
.header__search-toggle:active{background:rgba(118,118,128,.22)}

/* ---------- Menu button: pure symbol, SF-Symbols-like, no text ---------- */
.header__nav-open{
  appearance:none;background:transparent;border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  color:var(--bar-ink);
  -webkit-tap-highlight-color:transparent;
  transition:background var(--dur-fast) var(--spring),transform var(--dur-fast) var(--spring);
}
.header__nav-open:hover{background:rgba(118,118,128,.12)}
.header__nav-open:active{background:rgba(118,118,128,.22);transform:scale(.94)}
/* The 2px-line span from Imperial is gone; Apple uses a glyph. The glyph is the
   ::before/::after pair below, drawn as a 2-line "hamburger" with even strokes. */
.header__nav-open span{
  position:relative;display:block;width:19px;height:14px;
}
.header__nav-open span:before,.header__nav-open span:after{
  content:"";position:absolute;left:0;right:0;height:2px;border-radius:1px;
  background:currentColor;
  transition:transform var(--dur) var(--spring),opacity var(--dur-fast) linear;
}
.header__nav-open span:before{top:2px}
.header__nav-open span:after{bottom:2px}
/* (The old "hamburger morphs into ×" rules lived here and are gone: the sheet now
   covers the bar and carries its own Close control, and the JS adds .drawer-open
   to .header — never .is-open to this button — so those rules were unreachable. */

/* ---------- No-JS fallback: visible nested sitemap, hidden when JS is on ---------- */
.header__nav-fallback{
  display:block;max-width:var(--maxw);margin-inline:auto;
  padding:0 22px 14px;
}
.header__nav-fallback ul{list-style:none;margin:0;padding:0}
.header__nav-fallback>ul{display:flex;flex-wrap:wrap;gap:6px 20px}
.header__nav-fallback>ul>li{display:flex;flex-direction:column;gap:2px}
.header__nav-fallback-label{font-size:.8125rem;font-weight:600;color:var(--bar-ink-2)}
.header__nav-fallback ul ul{gap:2px 14px;flex-direction:row;flex-wrap:wrap}
.header__nav-fallback a{font-size:.875rem;color:var(--bar-ink);text-decoration:none}
.header__nav-fallback a:hover{text-decoration:underline}
.js .header__nav-fallback{display:none}

/* ==========================================================================
   DRAWER — Transparent full-screen dark menu with backdrop blur
   Translucent navy (rgba(5,18,49,.72)) + backdrop-filter blur(18px) saturate(140%).
   Grid layout with wordmark and nav in column 1 (right third in RTL), close button
   at inline-end (left). Nav list uses a continuous hairline rail on inline-start
   with orange badges. Staggered CSS entrance for nav rows.
   ========================================================================== */
.header__overlay{
  /* Drawer tokens (also defined on .header for the bar, but overlay is a sibling so needs its own) */
  --drawer-ink:#f4f1ea;
  --drawer-ink-2:rgba(244,241,234,.8);
  --drawer-hairline:rgba(244,241,234,.16);
  --accent:var(--orange);
  /* Motion tokens mirrored from .header: custom properties inherit only into
     descendants and the overlay is .header's sibling, so without these every
     transition below that names var(--dur-fast)/var(--spring) is dropped. */
  --dur-fast:.22s;
  --spring:cubic-bezier(.32,.72,0,1);
  --spring-soft:cubic-bezier(.25,.46,.45,.94);

  position:fixed;inset:0;z-index:100000;
  /* The sheet is position:fixed, so it spans the full viewport — but the page is
     inset by `body{padding-right:var(--spine)}`. Without this the sheet's
     .container centres in the viewport while the page's centres in
     viewport-minus-spine, and the nav lands ~37px off the start-edge grid that
     every section heading on the site aligns to. Padding trims the CONTENT box only, so the
     navy background still paints edge to edge and covers the spine. inline-start
     is the right side in RTL, matching body's padding-right. --spine is
     currently 0px everywhere (spine removed), so this is a no-op that keeps
     the alignment correct if a spine ever returns. */
  padding-inline-start:var(--spine);
  background:rgba(5,18,49,.85);
  background:color-mix(in srgb, var(--prussian) 85%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  overflow-y:auto;overscroll-behavior:contain;
  opacity:1;visibility:visible;
  transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),visibility 0s;
}
.header__overlay.hidden{
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),visibility 0s var(--dur);
  pointer-events:none;
}

/* Fallback for browsers without backdrop-filter support */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header__overlay{background:var(--prussian)}
}

/* Reduced transparency: disable backdrop blur, use solid background */
@media (prefers-reduced-transparency: reduce) {
  .header__overlay{
    background:var(--prussian);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}

/* Staggered entrance for nav rows — only when overlay is visible (not .hidden) */
.header__overlay:not(.hidden) .header__nav--global>ul>li{
  opacity:1;
  transform:translateY(0);
}
.header__overlay .header__nav--global>ul>li{
  opacity:0;
  transform:translateY(10px);
  transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);
  transition-delay:0s; /* base; overridden per child when open */
}

/* Stagger delays for up to 8 top-level items */
.header__overlay:not(.hidden) .header__nav--global>ul>li:nth-child(1){transition-delay:0ms}
.header__overlay:not(.hidden) .header__nav--global>ul>li:nth-child(2){transition-delay:40ms}
.header__overlay:not(.hidden) .header__nav--global>ul>li:nth-child(3){transition-delay:80ms}
.header__overlay:not(.hidden) .header__nav--global>ul>li:nth-child(4){transition-delay:120ms}
.header__overlay:not(.hidden) .header__nav--global>ul>li:nth-child(5){transition-delay:160ms}
.header__overlay:not(.hidden) .header__nav--global>ul>li:nth-child(6){transition-delay:200ms}
.header__overlay:not(.hidden) .header__nav--global>ul>li:nth-child(7){transition-delay:240ms}
.header__overlay:not(.hidden) .header__nav--global>ul>li:nth-child(8){transition-delay:280ms}

/* Reduced motion: disable translate/stagger, keep fast opacity fade only */
@media (prefers-reduced-motion: reduce) {
  .header__overlay{
    transition-duration:200ms;
    transition-timing-function:ease-out;
  }
  .header__overlay .header__nav--global>ul>li{
    transform:none;
    transition:opacity 200ms ease-out;
    transition-delay:0s !important;
  }
  .header__overlay:not(.hidden) .header__nav--global>ul>li{
    transform:none;
  }
}

/* The sheet scrolls (the nav is taller than a laptop viewport). The global
   scrollbar track is --surface-2, a near-white, and in RTL the vertical
   scrollbar sits on the LEFT — which put a bright 10px stripe down the edge of
   a near-black sheet. Re-tint it to the cream ink for this surface only. */
.header__overlay::-webkit-scrollbar{width:10px}
.header__overlay::-webkit-scrollbar-track{background:rgba(244,241,234,.05)}
.header__overlay::-webkit-scrollbar-thumb{background:rgba(244,241,234,.26);border-radius:6px}
.header__overlay::-webkit-scrollbar-thumb:hover{background:rgba(244,241,234,.45)}
.header__overlay{scrollbar-color:rgba(244,241,234,.26) rgba(244,241,234,.05);scrollbar-width:thin}

/* Sheet: full viewport grid, 1fr 2fr columns. Both wordmark and nav in col 1. */
.header__drawer{
  display:grid;
  grid-auto-flow:column;
  grid-template-columns:1fr 2fr;
  grid-template-rows:auto 1fr;
  width:100%;
  min-height:100dvh;
  /* Block padding ONLY. The sheet already sits inside .container, so the inline
     gutter is the container's --gutter. Declaring a second inline padding here
     double-applied it and pulled the nav ~30px off the page grid (1271) that
     every section heading on the site aligns to. */
  padding-block:clamp(40px,5vh,60px);
}

/* Wordmark at top of column 1 */
.header__drawer-wordmark{
  grid-column:1/2;
  grid-row:1;
  display:flex;
  align-items:center;
  gap:14px;
  padding-block:8px 24px;
}
.header__drawer-wordmark img{
  width:30px;height:30px;flex-shrink:0;
}
.header__drawer-wordmark span{
  font-family:var(--sans);
  font-weight:900;
  font-size:clamp(1.25rem,2.6vw,2rem);
  letter-spacing:.04em;
  line-height:1.1;
  color:var(--drawer-ink);
}

/* Close button at inline-end (left in RTL), top of sheet */
.header__drawer-close{
  grid-column:2/3;
  grid-row:1;
  justify-self:end;
  align-self:start;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:var(--r-sm);
  color:var(--drawer-ink);
  background:transparent;
  border:1px solid var(--drawer-hairline);
  min-height:44px;
  min-width:44px;
  transition:background var(--dur-fast) var(--spring),border-color var(--dur-fast) var(--spring),color var(--dur-fast) var(--spring);
}
.header__drawer-close:hover{
  background:rgba(244,241,234,.08);
  border-color:var(--drawer-ink-2);
}
.header__drawer-close:active{
  background:rgba(244,241,234,.14);
}
.header__drawer-close-label{
  font-size:.875rem;
  font-weight:500;
}
.header__drawer-close-x{
  width:20px;height:20px;
  flex-shrink:0;
}

/* Nav pane in column 1, row 2 (spans full height) */
.header__pane{
  display:none;
  grid-column:1/2;
  grid-row:2;
  min-height:0; /* allows overflow scrolling */
}
.header__pane--global.is-active{
  display:block;
}

.header__nav ul{list-style:none;margin:0;padding:0}
.header__nav--global>ul{position:relative}

/* Imperial's signature: one CONTINUOUS hairline down the nav, with the orange
   badges hanging outside it and the labels inside. A pseudo-element, not a
   per-row border — per-row borders would break at every gap and read as dashes.
   Measured geometry from the list's start edge (RTL): the row is
   `padding:14px 4px` so content starts at 4; the badge is a 24px circle in a
   26px `26px 1fr` track, so it spans 4..28; the gap is 14px so the label starts
   at 44. 35px therefore sits 7px clear of the badge and 9px before the label
   (exact mid-gap would be 36; the 1px bias is not perceptible). If you change the
   badge track width, the 14px gap or the 4px row padding, re-derive this.
   --rail-inset is a shared token because the sub-list indent is measured from
   this rule; if the two drift apart, expanded sub-items cross the rule.
   A logical offset, so it mirrors to the left in an LTR locale. */
.header__nav--global{--rail-inset:35px}
.header__nav--global>ul:before{
  content:"";
  position:absolute;
  inset-block:0;
  inset-inline-start:var(--rail-inset);
  width:1px;
  /* Slightly stronger than --drawer-hairline: a 1px rule at .16 alpha nearly
     disappears against --prussian. */
  background:rgba(244,241,234,.24);
}

/* Primary row: grid with badge column (26px) + content column (1fr) */
.header__leaf,.header__list-toggle{
  display:grid;
  grid-template-columns:26px 1fr;
  align-items:center;
  gap:0 14px;
  width:100%;
  padding:14px 4px;
  font-family:inherit;
  font-size:clamp(1.3125rem,1.9vw,1.75rem);
  font-weight:700;
  letter-spacing:0;
  color:var(--drawer-ink);
  text-decoration:none;
  background:none;
  border:0;
  text-align:start;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color var(--dur-fast) var(--spring);
}
.header__leaf:active,.header__list-toggle:active{color:var(--drawer-ink-2)}
.header__leaf[aria-current],.header__list-toggle[aria-current]{color:var(--accent)}

/* Badge column — orange circle with chevron */
.header__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;height:24px;
  min-width:24px;
  border-radius:50%;
  border:1.5px solid var(--orange);
  color:var(--orange);
  font-size:10px;
  line-height:1;
  transition:border-color var(--dur-fast) var(--spring),color var(--dur-fast) var(--spring),transform var(--dur) var(--spring);
}
.header__list-toggle[aria-expanded="true"] .header__badge{
  transform:rotate(180deg);
  transition:transform var(--dur) var(--spring);
}
.header__list-toggle .header__badge .header__chev{
  width:12px;height:12px;
  color:currentColor;
}

/* Placeholder badge for leaf rows (no children) so labels align */
.header__leaf .header__badge-placeholder{
  width:24px;height:24px;
  visibility:hidden;
}

/* Sub-list: flat, indented, hairline-separated items.
   The selector is qualified to (0,2,0) for a real, measured reason:
   `.header__nav ul{...padding:0}` is a (0,1,1) reset that also matches every
   `.header__list`, so a bare `.header__list` at (0,1,0) loses and the indent
   silently collapses to 0.
   The four sides are written as logical longhands instead of a `padding`
   shorthand — that is STYLE, not a fix. I originally assumed a physical
   shorthand beat a later logical longhand in the same block and wrote that here;
   measuring it showed the longhand WINS (padding:0 then
   padding-inline-start:22px => 22px). The shorthand was never the culprit —
   specificity was, and always was. The longhand form is kept because it reads
   more clearly next to the logical border, not because it is required.
   The indent is measured from the nav's rail (--rail-inset) so expanded
   sub-items land clear of it instead of running through it, and the list carries
   no vertical border of its own — two parallel rules read as noise where
   Imperial draws exactly one. */
.header__nav--global .header__list{
  margin-block:8px 16px;
  padding-block:0;
  padding-inline-end:0;
  padding-inline-start:calc(var(--rail-inset) + 28px);
  border-inline-start:0;
  background:transparent;
  border-radius:0;
  overflow:visible;
}
@media (max-width:1023px){
  .header__nav--global .header__list{padding-inline-start:calc(var(--rail-inset) + 18px)}
}
@media (max-width:560px){
  .header__nav--global .header__list{padding-inline-start:calc(var(--rail-inset) + 14px)}
}
.header__list li{
  border-bottom:1px solid var(--drawer-hairline);
}
.header__list li:last-child{
  border-bottom:0;
}
.header__list a{
  display:block;
  padding:10px 0;
  font-size:clamp(1.0625rem,1.4vw,1.25rem);
  color:var(--drawer-ink-2);
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:color var(--dur-fast) var(--spring);
}
.header__list a:active{color:var(--drawer-ink)}
.header__list a:hover{color:var(--drawer-ink)}
.header__list a[aria-current="page"]{color:var(--accent);font-weight:600}
/* Portal descriptions under سامانه‌ها. The dimming lives in the COLOUR, not in
   `opacity` — --drawer-ink-2 is already cream at 62% (6.7:1 on --prussian) and
   multiplying by opacity:.7 dropped it to 3.9:1, under the 4.5:1 AA floor for
   this 13-16px size. Size carries the hierarchy instead. */
.header__list a small{
  display:block;
  font-size:clamp(.8125rem,1.1vw,1rem);
  color:var(--drawer-ink-2);
  margin-top:2px;
}

/* Subgroup heading inside an expanded list (e.g. "رشته‌های کارشناسی"). */
/* Subgroup heading inside an expanded list (e.g. "رشته‌های کارشناسی").
   This is the ONLY label telling a user which category the links beneath it
   belong to, so it has to be readable. --accent-text is documented at the top of
   this file as the amber for small text on LIGHT backgrounds; on the navy sheet
   it measured 3.4:1 (3.0:1 with the opacity) and failed AA. --orange is the
   brand accent and measures 9.9:1 on --prussian. */
.header__list-heading{
  padding:8px 0 4px;
  font-size:clamp(.8125rem,1.1vw,1rem);
  font-weight:600;
  letter-spacing:.02em;
  color:var(--orange);
}

/* Contact + socials + ministry: restyled to cream tokens */
.header__drawer-contact{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-block-start:28px;
  padding-block-start:22px;
  border-top:1px solid var(--drawer-hairline);
}
.header__drawer-contact-link,.header__drawer-contact-plain{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:.9375rem;
  color:var(--drawer-ink-2);
  text-decoration:none;
}
.header__drawer-contact-link svg,.header__drawer-contact-plain svg{
  width:18px;height:18px;
  flex:0 0 auto;
  color:var(--drawer-ink-2);
}
.header__drawer-contact-link:hover{color:var(--accent)}
/* There is no `.header__social` base rule anywhere, so this span was display:block
   and its `gap` was inert — the icons were spaced only by source whitespace. Made
   it a flex row, and gave each link a 44px box (WCAG 2.2 SC 2.5.5): the bare .soc
   is 20x20, which is under even the 24x24 AA minimum. */
.header__social--drawer{
  display:flex;align-items:center;
  gap:14px;margin-block-start:8px;
}
.header__social--drawer a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;
  border-radius:var(--r-sm);
  transition:background var(--dur-fast) var(--spring);
}
.header__social--drawer a:hover{background:rgba(244,241,234,.08)}
.header__social--drawer .soc{
  width:20px;height:20px;
  background-color:var(--drawer-ink-2);
  transition:background-color var(--dur-fast) var(--spring);
}
.header__social--drawer a:hover .soc{background-color:var(--accent)}
/* inline-block + block padding takes the tap row from 21px to 27px, clearing the
   24x24 WCAG 2.2 SC 2.5.8 minimum for a standalone link (this is not inline text
   inside a sentence, so the inline exception does not apply). */
.header__drawer-ministry{
  display:inline-block;
  margin-block-start:12px;
  padding-block:3px;
  font-size:.8125rem;
  line-height:1.6;
  color:var(--drawer-ink-2);
  text-decoration:none;
}
.header__drawer-ministry:hover{color:var(--accent);text-decoration:underline}

/* User links: separate block below with larger top margin, cream color */
.header__user-links{
  margin-block-start:32px;
  padding-block-start:24px;
  border-top:1px solid var(--drawer-hairline);
}
.header__user-links ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.header__user-links a{
  display:block;
  padding:12px 0;
  font-size:clamp(1.0625rem,1.4vw,1.25rem);
  color:var(--drawer-ink);
  text-decoration:none;
  font-weight:500;
  -webkit-tap-highlight-color:transparent;
  transition:color var(--dur-fast) var(--spring);
}
.header__user-links a:hover{color:var(--accent)}

/* The bar NO LONGER rises above the sheet. Remove the apple.com z-index raise.
   The bar stays at its normal z-index (60) while the drawer is at 100000.
   The hamburger no longer morphs — the close button is inside the sheet. */
/* (`.header.drawer-open` used to raise the bar above the sheet and strip its
   backdrop. The sheet now covers the bar and has its own Close, so there is
   nothing left for that class to do beyond what .drawer-open does in JS. The
   empty rules that were here are removed rather than left as comments. */

/* Mobile: collapse drawer grid to single column */
@media (max-width:1023px){
  .header__drawer{
    grid-template-columns:1fr;
    grid-template-rows:auto auto 1fr;
  }
  .header__drawer-wordmark{grid-column:1;grid-row:1}
  .header__drawer-close{grid-column:1;grid-row:2;justify-self:end}
  .header__pane{grid-column:1;grid-row:3}
}

/* ---------- Responsive ---------- */
@media (min-width:1024px){
  .header__inner{padding-inline:var(--gutter)}
  .header__search{display:flex}
  .header__search-toggle{display:none}
}
@media (max-width:1023px){
  .header__inner{padding-inline:var(--gutter);gap:0 10px}
  /* Explicit placement: the full-width search (grid-column:1/-1) advances the
     auto-placement cursor to row 2, which would otherwise push the buttons to an
     implicit third row. Pin logo+buttons to row 1 and search to row 2. */
  .header__logo{grid-row:1;grid-column:1}
  .header__buttons{grid-row:1;grid-column:3}
  .header__search{
    display:none;grid-row:2;grid-column:1/-1;width:100%;
    padding:8px 0 12px;margin:0;
  }
  .header__search.toggled{display:flex}
  .header__search.toggled form{flex:1;width:100%}
  .header__search.toggled input{flex:1;width:100%;min-width:0}
  /* Over the hero the bar is transparent, so a pale iOS fill reads as a
     mistake (a short grey pill floating under the menu). The open row is a
     dark sheet instead: same navy as the drawer, edge to edge. The negative
     inline margin cancels the bar's --gutter so the sheet spans full width;
     grid-row:2 keeps it inside the bar's own box, never over the hero. */
  .header--overlay .header__search.toggled{
    background:rgba(5,18,49,.92);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    backdrop-filter:blur(18px) saturate(140%);
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
    border-top:1px solid rgba(244,241,234,.16);
  }
  /* Frosted bar: the bar already has its own material, so the row stays
     transparent and only inherits the hairline — no second background. */
  .header--overlay.scrolled .header__search.toggled{
    background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;
    margin-inline:0;padding-inline:0;
    border-top:.5px solid var(--bar-hairline);padding-top:8px;
  }
  .header__search-toggle{display:inline-flex}
  .header__search input{width:100%}
  .header__inner{grid-template-rows:52px auto;height:auto;padding-block:0}
  .header__logo{padding-block:12px}
}
@media(max-width:1040px){
  .footer__grid{grid-template-columns:1fr 1fr}
  .c4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(3){border-left:0}
  .steps{grid-template-columns:1fr}
  .video-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:880px){
  :root{--spine:0px}
  .spine{display:none}
  .split,.cgrid{grid-template-columns:1fr}
  .c3{grid-template-columns:1fr 1fr}
  .topbar__info{display:none}
  .burger{display:block}
  .header__cta .btn--ghost{display:none}
  .nav{position:fixed;inset:0 0 0 auto;width:min(340px,88vw);height:100svh;background:rgba(14,29,58,.98);flex-direction:column;align-items:stretch;padding:100px 22px calc(30px + env(safe-area-inset-bottom, 0px));gap:0;transform:translateX(100%);transition:transform .5s var(--ease);z-index:95;border-left:1px solid rgba(255,255,255,.08);overflow-y:auto;box-shadow:-24px 0 40px rgba(0,0,0,.3)}
  .nav::before{content:"";position:absolute;top:0;left:0;right:0;height:72px;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent);pointer-events:none}
  .nav.open{transform:none}
  .nav>a,.nav__item>a,.nav__toggle{padding:16px 14px;font-size:1.08rem;border-bottom:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.8)}
  .nav>a::after{display:none}
  .nav__menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-bottom:1px solid rgba(255,255,255,.06);padding:0 0 8px;min-width:0;background:transparent}
  .nav__menu a{padding:10px 14px;margin:2px 0;border-radius:8px;color:rgba(255,255,255,.7)}
  .nav__menu a:hover{background:rgba(255,174,0,.1);color:var(--orange);transform:none;padding-right:14px}
  .nav__item:hover .chev{transform:none}
  .nav__item.is-open .chev{transform:rotate(180deg);color:var(--orange)}
  .nav__panel{position:static;opacity:0;visibility:hidden;max-height:0;overflow:hidden;transform:none;box-shadow:none;border:0;padding:0;background:transparent;transition:opacity .35s,max-height .4s,padding .35s}
  /* The old open state capped the panel at max-height:600px with overflow:hidden.
     Stacked, the four columns are ~1042px tall, so 442px of the menu was simply
     clipped away: it animated open, hit the cap, and the lower half "disappeared".
     The drawer itself is height:100svh and scrolls, so the panel needs no cap of
     its own — max-height:none can never clip, whatever the content grows to.
     The height transition is replaced by an opacity+slide reveal, which does not
     depend on knowing the content height. */
  .nav__item.is-open .nav__panel{opacity:1;visibility:visible;max-height:none;overflow:visible;padding:0 0 8px;transform:none;animation:panelIn .34s var(--ease) both}
  @keyframes panelIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .nav__panel-inner{flex-direction:column;gap:0}
  .nav__col{gap:0}
  .nav__col-title{color:rgba(255,255,255,.5);font-size:.85rem;letter-spacing:0;text-transform:none;
    padding:10px 14px;border-bottom:none;border-top:1px solid rgba(255,255,255,.06);margin-bottom:0}
  .nav__panel a,.nav__link-single{padding:12px 16px;margin:2px 0;border-radius:8px;color:rgba(255,255,255,.7);font-size:.95rem;transform:none}
  .nav__panel a:hover,.nav__link-single:hover{background:rgba(255,174,0,.1);color:#fff;transform:none;padding-right:16px}
  .index__en{display:none}
  .hero__alef{font-size:66vh}
  .video-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .c2,.c3,.c4{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr}
  .hero__arrows{display:none}
  .index__row{grid-template-columns:auto 1fr}
  .video-grid{grid-template-columns:1fr}
  .toolbar__row{flex-direction:column;align-items:stretch}
  .select select{width:100%}
}

/* ---------- Reduced motion ----------
   Strip the cyber glitch/chromatic/clip-path effects but keep a soft fade-in
   so RM users still see a transition (zero motion = "broken" UX).
   Selector specificity (.hero h1 = 0,1,1) beats * (0,0,0), so the explicit
   animation-duration on hero elements wins over the global *{animation-duration:.001s}. */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important}
  .reveal{opacity:1;transform:none}
  .slide__bg{transform:none!important}
  /* zero out the cyber-specific *visual* effects… */
  .hero h1,.hero__sub,.hero__side,.hero__side .btn,.btn{transform:none!important;filter:none!important;clip-path:none!important;text-shadow:none!important;box-shadow:none!important}
   /* hero text/buttons are hidden only under no-preference+GSAP, so under
      reduced motion they are already visible — nothing to re-allow here. */
  .ticker__caret,.ticker__dot{animation:none!important}
}

/* ==========================================================================
   HOMEPAGE ELEVATION — Button system, News editorial, Rail premium, Events badges
   ========================================================================== */

 /* --- Button size variants (append, don't rewrite base .btn) --- */
 .btn--sm{padding:10px 18px;font-size:.8rem;gap:8px}
 .btn--lg{padding:18px 36px;font-size:.98rem;gap:12px}
 .btn--sm svg{width:16px;height:16px}
 .btn--lg svg{width:20px;height:20px}

 /* Hero side-by-side row sizing lives in the HOMEPAGE block below, scoped to the
    >=1024px desktop breakpoint. An earlier 821px copy of this rule was dead there
    and contradicted the tablet stack, so it was removed rather than merged. */

 /* --- Section head split helper (replaces inline flex on homepage) --- */
 .sec-head--split{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;max-width:none}
 .sec-head--split .sec-head__actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
 @media(max-width:720px){
   .sec-head--split{align-items:flex-start}
   .sec-head--split .sec-head__actions{width:100%;justify-content:flex-start}
 }

 /* --- Header CTA: normalize to .btn--sm scale --- */
 .home .header__cta .btn{padding:10px 18px;font-size:.8rem;gap:8px}
 .home .header__cta .btn svg{width:16px;height:16px}   /* scoped: else inner headers inherit it */

 /* --- CTA band: both buttons .btn--lg (already solid/ghost, just size) --- */
 .home .cta .btn{padding:18px 36px;font-size:.98rem;gap:12px;min-height:56px}
 .home .cta .btn svg{width:20px;height:20px}   /* scoped: else inner CTA bands inherit it */

 /* ==========================================================================
    NEWS — Editorial featured + list layout
    ========================================================================== */
 .home-news{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(20px,2.6vw,32px)}
 /* index.php omits .home-news__list entirely when there is only one post, so the
    featured card must span the whole grid instead of leaving a 40% void */
 .home-news__feat:only-child{grid-column:1/-1}
 .home-news__feat .card__media{aspect-ratio:16/9}
 .home-news__feat h3{font-size:clamp(1.4rem,2.4vw,2rem)}
 .home-news__list{display:flex;flex-direction:column;gap:16px}
 .home-news__item{
   display:grid;grid-template-columns:180px 1fr;
   background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
   transition:border-color var(--dur-md) var(--ease-out),transform var(--dur-md) var(--ease-out),translate var(--dur-md) var(--ease-out),box-shadow var(--dur-md) var(--ease-out)
 }
 .home-news__item:hover,.home-news__item:focus-within{border-color:var(--orange);box-shadow:var(--shadow);translate:0 -4px}
 .home-news__item .card__media{aspect-ratio:4/3;overflow:hidden;background:var(--surface-2)}
 .home-news__item .card__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
 .home-news__item:hover .card__media img{transform:scale(1.04)}
 .home-news__item .card__body{padding:18px 20px;display:flex;flex-direction:column;justify-content:center;gap:8px}
 .home-news__item .card__tag{position:static;top:auto;right:auto;z-index:auto;display:inline-flex;align-self:flex-start;font-family:var(--meta);font-size:.6rem;letter-spacing:0;text-transform:uppercase;color:var(--accent-text);background:transparent;padding:0;box-shadow:none}
 .home-news__item h4{font-size:1.02rem;font-weight:800;letter-spacing:0;line-height:1.35;color:var(--heading);text-wrap:balance;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.64em}
 .home-news__item .card__meta{font-family:var(--meta);font-size:.68rem;letter-spacing:0;text-transform:uppercase;color:var(--text-dim);display:flex;gap:12px}
 .home-news__item .card__meta svg{width:12px;height:12px;color:var(--cyan)}
 .home-news__item p{font-size:.88rem;color:var(--text-dim);line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.55em}
 .home-news__item h4 a:hover,.home-news__feat h3 a:hover{color:var(--accent-text)}

 @media(max-width:880px){
   .home-news{grid-template-columns:1fr}
   .home-news__item{grid-template-columns:140px 1fr}
 }
 @media(max-width:560px){
   .home-news__item{grid-template-columns:1fr}
   .home-news__item .card__media{aspect-ratio:16/9}
 }

 /* ==========================================================================
    RAIL — Premium cards + header/nav polish
    ========================================================================== */
 .rail__item .card__media{aspect-ratio:16/10}
 .rail__item h3{
   font-size:1.08rem;line-height:1.35;
   display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em
 }
 .rail__item .card__body{padding:22px}
 .rail__item .card__body p{
   display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.55em
 }
 .rail__item:hover{translate:0 -6px!important;box-shadow:var(--shadow-lg)}

 .rail__tag{font-weight:700;box-shadow:var(--shadow-sm)}

 .rail__links{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
 .rail__links a{
   display:inline-flex;align-items:center;gap:8px;
   padding:10px 20px;border:1px solid var(--line-strong);border-radius:var(--r-pill);
   font-weight:700;font-size:.92rem;color:var(--heading);background:transparent;
   transition:border-color var(--dur) var(--ease-out),background-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out)
 }
 .rail__links a:hover{border-color:var(--orange);background:rgba(255,174,0,.10);color:var(--accent-text)}

 .rail__arrow:focus-visible{outline:none;box-shadow:var(--ring)}

 /* ==========================================================================
    EVENTS — Date badge overlay on media
    ========================================================================== */
 .card__media .card__date{
   position:absolute;bottom:12px;right:12px;z-index:2;
   background:#fff;border-radius:10px;padding:6px 12px;text-align:center;
   box-shadow:var(--shadow-sm);line-height:1.2
 }
 .card__media .card__date b{display:block;font-size:1.1rem;font-weight:900;color:var(--heading)}
 .card__media .card__date i{
   font-style:normal;font-family:var(--mono);font-size:.62rem;
   letter-spacing:.08em;color:var(--text-dim)
 }

 /* ==========================================================================
    Sticky-hover fix: neutralize hover lifts on touch devices
    (moved to end, after new hover rules above)
    ========================================================================== */
 @media (hover:none){
   .btn:hover,.btn--solid:hover,.btn--ghost:hover,.btn--dark:hover,.btn--light:hover,
   .burger:hover,
   .chip:hover,
   .hero__arrows button:hover,
   .rail__arrow:hover,
   .search-btn:hover,
   .nav>a:hover,.nav__item>a:hover,.nav__toggle:hover,
   .nav__panel a:hover,.nav__link-single:hover,
   .nav__menu a:hover,
   .card:hover,
   .tile:hover,
   .video:hover,
   .info:hover,
   .card--news:hover,
   .cta-tile:hover,
   .split__media:hover,
   .index__row:hover,
   .pill:hover,
   .toc__item:hover,
   .feat-news:hover,
   .focus-card:hover,
   .blog-feat__media:hover,
   .blog-mini:hover,
   .gallery-grid__item:hover,
   .fsocial a:hover,
   .topbar__social a:hover,
   .topbar a:hover,
   .footer ul a:hover,
   .totop:hover,.totop:hover svg,
   .search-page__item:hover,
   .card__link:hover svg,
   .tile:hover .tile__ico,
   .video--lazy:hover .video__play,
   .split__media:hover img,.card:hover .card__media img,.card--news:hover .card__media img,
   .blog-mini:hover .blog-mini__media img,.blog-feat__media:hover img,
   .feat-news:hover .feat-news__media img,.focus-card:hover .focus-card__media img,
   .gallery-grid__item:hover img,.home-news__item:hover .card__media img,
   .search-btn:hover svg,.search-overlay__close:hover svg,
   .home-news__item:hover,
   .rail__links a:hover,
   .rail__item:hover{transform:none!important;translate:none!important;box-shadow:none!important}
   /* state-transforms: neutralize to REST, never to `none` */
   .index__row:hover .index__fa{transform:none!important}
   .index__row:hover::before{transform:translateX(-101%)!important}
   .nav>a:hover::after,.nav__item:hover>a::after{transform:scaleX(0)!important}
   .nav__item:hover .chev{transform:none!important}
   .btn:active,.burger:active,.chip:active,.hero__dots button:active,
   .hero__arrows button:active,.rail__arrow:active,.search-btn:active{transform:translateY(-2px) scale(.97)!important}
 }

/* ==========================================================================
   HOMEPAGE — Harvard/Stanford lander style
   All rules scoped to .home so inner pages are untouched.
   ========================================================================== */


/* ministry + topbar no longer exist as bands (folded into the drawer).
   Kept so any page still rendering them keeps them hidden on the homepage. */
.home .ministry,
.home .topbar {
  display: none;
}

/* ---------- B) FULL-VIEWPORT HERO ---------- */
/* The hero is 100dvh TALL, but it can never grow: every child (.slide, .hero__alef,
   .hero__dots, .hero__arrows) is position:absolute, so the hero has ZERO in-flow
   content and its height is always exactly min-height. The base `overflow:hidden`
   then clips whatever does not fit.
   That is structural, not fixable in CSS: the h1/sub are per-slide (DB-driven), so
   they must live inside the absolutely-positioned .slide to crossfade. An earlier
   revision of this comment wrongly claimed a long headline "grows the hero".
   Mitigation is therefore to BOUND the copy so it degrades with an ellipsis
   instead of being sliced mid-glyph — see the -webkit-line-clamp rules below. */
.home .hero {
  min-height: 100svh;
  min-height: 100dvh;
}

/* Container: top padding only clears the fixed header (~47px + breathing room).
   The bottom offset lives on .hero__inner so it is not applied twice. */
.home .hero .container {
  padding-top: clamp(96px, 13vh, 150px);
  padding-bottom: 0;
}

/* Stronger scrim at top for nav readability over any photo */
.home .slide__bg::after {
  background: linear-gradient(180deg, rgba(2,8,20,.72) 0%, rgba(2,8,20,.35) 45%, rgba(5,18,49,.6) 100%);
}

/* Video slides: same gradient override */
.home .slide--video .slide__bg::after {
  background: linear-gradient(180deg, rgba(2,8,20,.72) 0%, rgba(2,8,20,.35) 45%, rgba(5,18,49,.6) 100%);
}

/* ---------- C) DESKTOP (≥1024px): text bottom-right, CTA buttons bottom-left, dots centered ---------- */
@media (min-width: 1024px) {
  .home .hero__inner {
    position: relative;
    display: flex;
    align-items: flex-end;
    /* bottom offset clears the centred dots band (dots sit at bottom:28px) */
    padding-bottom: clamp(84px, 12vh, 140px);
  }

  .home .hero__row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    gap: clamp(24px, 4vw, 80px);
    padding: 0;
  }

  .home .hero__text {
    /* Percentage-based, NOT ch-based: 58ch is only ~460px and forced the headline
       onto 3 lines. 62% of the container keeps a strong measure at every width. */
    flex: 1 1 62%;
    min-width: 0;
    max-width: none;
    text-align: right;
  }

  .home .hero__text h1 {
    color: #fff;
    /* bounded by viewport HEIGHT as well as width, so a tall/short window
       cannot push the headline off the top of the fixed 100dvh band */
    font-size: min(clamp(2.4rem, 5vw, 5rem), 11vh);
    line-height: 1.15;
    margin-bottom: 18px;
    /* the hero cannot grow (see B), so cap the copy rather than clip it.
       Safe here: the GSAP word-splitter only targets .manifesto__q, not this h1. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .home .hero__sub {
    color: #d6dcea;
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.75;
    /* 0 keeps the text block's bottom edge flush with the CTA baseline
       (preserves the base .hero__text .hero__sub{margin-bottom:0} intent) */
    margin-bottom: 0;
    max-width: 60ch;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .home .hero__side {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    gap: 14px;
    align-items: center;
  }

  .home .hero__side .btn {
    min-height: 52px;
    min-width: 180px;
    font-size: .92rem;
  }

  .home .hero__dots {
    bottom: 28px;
    left: 0;
    right: 0;
    justify-content: center;
    z-index: 5;
  }
}

/* Arrows hidden at EVERY homepage width — the centred dots are the single
   paging control, so the hero looks the same on a phone and on a desktop. */
.home .hero__arrows {
  display: none;
}

/* ---------- D) TABLET + MOBILE (≤1023px): centered stack ---------- */
/* Breakpoint is 1023 (not 820) because the 821–1023 band cannot fit a 62% text
   column plus two 180px CTAs side-by-side without pushing the CTAs off-screen. */
@media (max-width: 1023px) {
  .home .hero__inner {
    /* display:flex is REQUIRED here: it is only set in the >=1024px block above,
       so without it `align-items`/`justify-content` are inert on a block box and
       the short-viewport (max-height:450px) anchoring fix would do nothing. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 0;
    padding-bottom: clamp(72px, 11vh, 96px);
  }

  .home .hero__row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    padding-bottom: 0;
  }

  .home .hero__text {
    max-width: 90vw;
    text-align: center;
  }

  .home .hero__text h1 {
    font-size: min(clamp(1.9rem, 9vw, 3.4rem), 9vh);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .home .hero__sub {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .home .hero__side {
    width: 100%;
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  .home .hero__side .btn {
    width: 100%;
    max-width: 320px;
    min-height: 48px;
  }

  .home .hero__dots {
    bottom: 18px;
  }

  /* Ticker below hero flows naturally — no extra rules needed */
}

/* ---------- E) NEWS BAR (ticker) directly below hero, no gap ---------- */
.home .hero {
  margin-bottom: 0;
}
.home .ticker {
  margin-top: 0;
  border-radius: 0;
}

/* ---------- F) Section order ---------- */
/* Scroll sequence (user-specified, now implemented in index.php):
   hero -> news ticker (small last-news bar) -> rail (short courses / workshops / tours)
   -> events -> disciplines (study fields) -> admission path -> about -> manifesto
   -> articles -> news -> CTA.
   The markup blocks were moved verbatim: no query, variable, URL or guard changed. */

/* ---------- G) Short landscape (h<=450px): keep the stack clear of the fixed header ---------- */
/* On a 360-450px band the centred stack can be taller than the band itself.
   `align-items:flex-start` anchors it below the header so the overflow falls
   toward the fold instead of sliding up under the fixed nav; the type is shrunk
   so it normally fits outright. There is no hard hero height, so the hero simply
   grows a little rather than clipping. */
@media (max-height: 450px) {
  /* must clear the new 70px-tall bar, not the old 47px one */
  .home .hero .container { padding-top: 88px; }
  .home .hero__inner {
    align-items: flex-start;
    padding-bottom: 40px;
  }
  .home .hero__text h1 {
    font-size: clamp(1.6rem, 5.2vh, 2.2rem);
    -webkit-line-clamp: 2;
  }
  .home .hero__sub { font-size: .9rem; line-height: 1.5; -webkit-line-clamp: 2; }
  .home .hero__side .btn { min-height: 44px; }
  .home .hero__dots { bottom: 12px; }
}

/* Phone held sideways (short AND narrow): the base `.slide{align-items:flex-end}`
   pins the copy to the bottom of a ~360px band, so anything that does not fit is
   pushed off the TOP and under the fixed header. Anchor to the top instead, so the
   overflow falls below the fold. Narrow-only so a short desktop window keeps its
   intentional bottom-anchored Harvard alignment. */
@media (max-width: 1023px) and (max-height: 450px) {
  /* Both axes are needed: below 880px the base sets .slide to
     `flex-direction:column; justify-content:flex-end`, so the vertical axis is the
     MAIN axis and `align-items` alone cannot move the copy off the bottom. */
  .home .slide { align-items: flex-start; justify-content: flex-start; }
  .home .hero__inner { justify-content: flex-start; }
}
/* ==========================================================================
   REDUCED TRANSPARENCY — homepage surfaces
   MUST stay at the very end of the file. The HOMEPAGE block above is appended
   after the main reduced-transparency block and matches its specificity, so an
   override placed there would be beaten by the later `.home .header::after`.
   Without this, the homepage keeps a 55%-alpha scrim and a 16px backdrop blur
   under exactly the setting this codebase added to remove them.
   ========================================================================== */
@media (prefers-reduced-transparency: reduce) {
  .home .header::after { background: rgba(10, 26, 58, .98); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .home .header.scrolled { background: rgba(10, 26, 58, .98); }
  .home .header.scrolled::after { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .home .header.scrolled::before { opacity: 1; }
}


/* ==========================================================================
   APPLE-LANGUAGE HEADER
   Replaces the Imperial port. Principles applied:
   - TRANSLUCENCY over paint: real backdrop blur, hairline separators, no thick
     2px framing rules (Imperial) — 0.5px hairlines like iOS/macOS dividers.
   - RESTRAINT: one hairline, not four. The logo gets breathing room, not a rule.
   - TYPOGRAPHY: SF-like optical sizing, tighter tracking on the wordmark, a
     clear size ramp (11/13/15/22) instead of Imperial's flat 0.8rem everywhere.
   - MOTION: spring curves, short durations, transform/opacity only.
   - MATERIALS: layered translucency (thin bar -> heavy scrim) matching iOS.
   - FEEDBACK: tinted press states and a visible focus ring, like UIKit.
   ========================================================================== */

.header{
  /* Material tokens. The bar is "thin" material; the drawer is "heavy". */
  --bar-material:rgba(251,251,253,.72);
  --bar-material-opaque:rgba(251,251,253,.94);
  --bar-hairline:rgba(60,60,67,.14);
  --bar-ink:#1d1d1f;
  --bar-ink-2:rgba(60,60,67,.72);
  --bar-ink-3:rgba(60,60,67,.44);
  --bar-tint:rgba(0,122,255,.10);
  --bar-radius:10px;

  /* Imperial-style full-screen dark drawer tokens */
  --drawer-ink:#f4f1ea;
  --drawer-ink-2:rgba(244,241,234,.62);
  --drawer-hairline:rgba(244,241,234,.16);
  --accent:var(--orange);
  --spring:cubic-bezier(.32,.72,0,1);
  --spring-soft:cubic-bezier(.25,.46,.45,.94);
  --dur-fast:.22s;
  --dur:.34s;

  position:relative;z-index:60;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- Homepage: bar floats over hero as translucent thin material ---------- */
.header--overlay{
  /* Spine inset on the START side, i.e. the RIGHT in RTL — that is where the
     spine actually lives (`.spine{right:0}` + `body{padding-right:var(--spine)}`).
     This was `inset-inline:0 var(--spine)`, which resolves in RTL to
     right:0 / left:64px: the bar was inset from the wrong edge, so it spanned
     64..1440 while the hero and the page span 0..1376, and the logo sat ~68px
     right of the container grid (1276). Also note the spine is z-index:70 and the
     bar is 60, so a full-bleed bar would sit UNDER the spine's vertical label. */
  position:fixed;inset-block-start:0;inset-inline:var(--spine) 0;
  background:transparent;z-index:60;
}
.header--overlay .header__inner{height:52px}
/* On mobile the bar grows to a second row when the search is toggled open.
   This must come AFTER the rule above and match its specificity, or the
   52px height wins and the search row is clipped. */
@media (max-width:1023px){
  .header--overlay .header__inner{height:auto}
}
/* Transparent means no seam. The hairline was painted at opacity:1 across the
   hero, which drew a hard 1px light edge at the bottom of an otherwise invisible
   bar — the single loudest thing saying "menu bar" instead of "transparent".
   It now arrives WITH the frosted material on scroll, where it belongs. */
.header--overlay .header__inner:after{background:rgba(255,255,255,.22);opacity:0}
.header--overlay.scrolled .header__inner:after{opacity:1}
.header--overlay{--bar-ink:#fff;--bar-ink-2:rgba(255,255,255,.78);--bar-ink-3:rgba(255,255,255,.55);
  --bar-tint:rgba(255,255,255,.20)}
.header--overlay .header__search form{background:rgba(255,255,255,.16)}
.header--overlay .header__search form:focus-within{background:rgba(255,255,255,.94);box-shadow:0 0 0 3px rgba(255,255,255,.28)}
.header--overlay .header__search input{color:#fff}
.header--overlay .header__search input::placeholder{color:rgba(255,255,255,.6)}
.header--overlay .header__search button{color:rgba(255,255,255,.75)}
.header--overlay .header__search button:hover{color:#fff}
.header--overlay .header__search-toggle:hover{background:rgba(255,255,255,.16)}
/* Focused field goes white — so the ink must flip dark with it. Without this
   the typed query is white-on-white (the input color stays #fff from the rule
   above). Covers both the desktop capsule and the mobile dark sheet. */
.header--overlay .header__search form:focus-within input{color:#1d1d1f}
.header--overlay .header__search form:focus-within input::placeholder{color:rgba(60,60,67,.44)}
.header--overlay .header__search form:focus-within button{color:rgba(60,60,67,.6)}
/* NO header scrim. The hero already carries .slide__bg::after (top-down, .55 at
   y=0 fading out) — layering a second .28 gradient over it stacked to ~.80 alpha,
   which painted a distinct dark rectangle exactly the height of the bar. One
   gradient, owned by the hero, is what "transparent over the hero" means. The
   rule is kept rather than deleted so .scrolled:before (opacity:0) and the
   reduced-transparency overrides still have something to target. */
.header--overlay:before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:transparent;
  opacity:1;transition:opacity var(--dur) var(--spring);
}
.header--overlay.scrolled{
  background:rgba(251,251,253,.94);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
}
.header--overlay.scrolled .header__inner:after{background:var(--bar-hairline)}
.header--overlay.scrolled .header__inner{
  --bar-ink:#1d1d1f;--bar-ink-2:rgba(60,60,67,.72);--bar-ink-3:rgba(60,60,67,.44);
  --bar-tint:rgba(0,122,255,.10);
}
.header--overlay.scrolled .header__search form{background:rgba(118,118,128,.12)}
.header--overlay.scrolled .header__search input{color:#1d1d1f}
.header--overlay.scrolled .header__search input::placeholder{color:rgba(60,60,67,.44)}
.header--overlay.scrolled .header__search button{color:rgba(60,60,67,.6)}
.header--overlay.scrolled .header__search button:hover{color:#1d1d1f}
.header--overlay.scrolled .header__search-toggle:hover{background:rgba(118,118,128,.12)}
.header--overlay.scrolled:before{opacity:0}

/* ---------- Focus ring (system-wide, keyboard only) ---------- */
.header :focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;border-radius:6px;
}
.header--overlay :focus-visible{outline-color:var(--accent)}
.header__overlay :focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;border-radius:6px;
}

/* ---------- Reduced motion ---------- */
/* ==========================================================================
   HOMEPAGE STEP 3 — order, trust band, notice row, static quote
   Appended as one block rather than scattered, so the relationship between the
   new elements is readable. The type scale is deliberately left alone here: the
   hero measure and band rhythm are what changed, not the whole palette.
   ========================================================================== */

/* ---------- Hero: one text block, rendered once, bottom-anchored ----------
   The text used to be inside every .slide, giving three <h1>s and two CTAs in
   opposite corners (.hero__side at x=157, .hero__text at x=611). It is now a
   single right-aligned column under the proposition, and .hero__inner keeps the
   z-index:3 it already had so it sits above the absolutely-positioned slides. */
.hero .container{padding-top:0;padding-bottom:clamp(60px,10vh,110px)}
.hero__inner{display:flex;align-items:flex-end}
/* A flex ITEM sizes to its content unless told otherwise, so the .container inside
   .hero__inner shrink-wrapped to 904px (760px of copy + 144px of gutter) while every
   other .container on the page fills to --maxw:1320px. The hero copy therefore began
   208px to the LEFT of where every section h2 begins — the page had two different
   right margins and the hero was on neither grid. width:100% lets max-width and
   margin-inline:auto do their normal job; the flex box is still what bottom-anchors
   the copy against the dots. */
.hero__inner > .container{width:100%}
.hero__text{max-width:760px}
.hero h1{
  font-size:clamp(2rem,4.2vw,3.75rem);   /* was clamp(2.6rem,8.5vw,7.5rem) = 120px at 1440 */
  font-weight:300;                       /* Anjoman 300 is loaded and was unused */
  letter-spacing:0;line-height:1.16;
  color:#fff;margin-bottom:18px;padding-bottom:0;
  max-width:760px;                       /* two-line window for this sentence is 736–1294px */
}
.hero__sub{
  max-width:600px;font-size:clamp(.98rem,1.15vw,1.12rem);
  color:#d6dcea;line-height:1.75;margin-bottom:26px;
}
.hero__actions{gap:12px;flex-wrap:wrap;margin-bottom:0}
/* One filled action per viewport. A second filled button on the same screen
   forces the visitor to choose between two equal promises. */
.hero__student{margin:14px 0 0;font-size:.875rem;color:#b9c2d6;line-height:1.6}
.hero__student a{color:#fff;text-decoration:underline;text-underline-offset:4px;padding:8px 0}
.hero__student a:hover{color:var(--orange)}

/* ---------- Hero: solid content card + header gradient ----------
   The reference sets the hero copy in a SOLID panel anchored to the bottom of the
   photo, and fades a gradient behind the transparent bar. Alef's copy previously
   floated straight on the image with no scrim at all — .hero__text was
   background:transparent / position:static, and .hero had no pseudo-elements at
   all — so legibility depended entirely on whichever photo happened to be uploaded.

   The panel is OPAQUE --prussian, not translucent and not blurred: the nav sheet
   already showed that a translucent dark surface needs a reduced-transparency
   fallback, and this photo is already dark so translucency would buy nothing. The
   1px light border is what makes the panel read as a panel over a dark image.

   .hero is display:flex, so ::before would become a flex item and steal width;
   position:absolute removes it from the flex flow. It sits at z-index 2 — above
   the absolutely-positioned slides, below .hero__inner (z-index:3). */
.hero::before{
  content:"";
  position:absolute;inset-block-start:0;inset-inline:0;
  height:clamp(120px,18vh,190px);
  background:linear-gradient(to bottom,rgba(5,18,49,.78),rgba(5,18,49,0));
  pointer-events:none;z-index:2;
}
/* Hero copy sits DIRECTLY on the photo: no panel, no background, no border, no
   shadow. The Imperial reference sets its hero copy in a solid black card, but a
   card is a different composition, not a restyle — it boxed the headline in and
   broke the photograph. Legibility is handled where it belongs, by darkening the
   IMAGE with the .hero::before gradient above rather than by backing the text.
   max-width keeps the measure readable; the right alignment and the measure were
   already correct before the card and are unchanged. */
.home .hero__text{
  max-width:760px;
  background:none;
  border:0;
  padding:0;
  box-shadow:none;
}
@media (max-width:1023px){
  .home .hero__text{max-width:none}
}

/* ---------- Hero h1: defeat the legacy desktop override ----------
   site.css carries `.home .hero__text h1 { font-size: min(clamp(2.4rem,5vw,5rem),11vh);
   -webkit-line-clamp:3 }` inside `@media (min-width:1024px)`. That is specificity
   (0,2,1) and sits EARLIER in the file, so a plain `.hero h1` cannot win it: the
   headline still measured 72px at 1440x900 instead of the 60px the new scale calls
   for, and it was still being clipped to 3 lines by a rule written for a much
   shorter string. Matching the selector here is what actually moves the value. */
.home .hero__text h1{
  font-size:clamp(2rem,4.2vw,3.75rem);
  font-weight:300;
  letter-spacing:0;line-height:1.16;
  margin-bottom:18px;padding-bottom:0;
  max-width:760px;
  display:block;-webkit-line-clamp:none;overflow:visible;
}
@media (min-width:1024px){
  .home .hero__text h1{font-size:clamp(2rem,4.2vw,3.75rem)}
  .home .hero__sub{max-width:600px;font-size:clamp(.98rem,1.15vw,1.12rem)}
}

/* ---------- Hero: fit a short viewport ----------
   At 740x360 and 780x360 (landscape phone) the hero measured 384px inside a 360px
   viewport: `.home .hero .container` sets padding-top:13vh and the desktop rule sets
   .hero__inner padding-bottom:12vh, so the text column plus both offsets overran
   100dvh and pushed the slide dots to y=370 — below the fold. The visitor could read
   the proposition but could not reach the control that advances it.
   Selectors match the legacy ones (0,3,0 / 0,2,0) so these values actually win. */
@media (max-height:520px){
  .home .hero .container{padding-top:clamp(60px,16vh,84px);padding-bottom:0}
  .home .hero__inner{padding-bottom:48px}
  .home .hero__text h1{font-size:clamp(1.5rem,3.4vw,2.1rem);margin-bottom:10px}
  .home .hero__sub{font-size:.92rem;line-height:1.5;margin-bottom:14px}
  .home .hero__actions .btn{min-height:44px;padding-inline:18px}
  .home .hero__student{margin-top:6px;font-size:.8rem}
  .home .hero__dots{bottom:12px}
  .hero__arrows{display:none}
}
@media (max-height:520px) and (max-width:700px){
  .home .hero .container{padding-top:58px}
  .home .hero__inner{padding-bottom:44px}
  .home .hero__sub{display:none}
  .home .hero__student{margin-top:4px}
}

/* ---------- Latest notices: three real links, no timer ----------
   Replaces the typewriter ticker, which rewrote its own href every 55ms — the
   link under the visitor's finger changed destination mid-tap — and whose four
   items were three <li data-href>, unreachable by keyboard. */
.notices{background:var(--surface);border-bottom:1px solid var(--line)}
.notices__in{display:flex;align-items:center;gap:14px;min-height:44px;padding-block:9px}
.notices__label{
  flex:0 0 auto;font-family:var(--meta);font-size:.7rem;letter-spacing:0;
  color:var(--accent-text);font-weight:700;white-space:nowrap;
}
.notices__label::after{content:"";display:inline-block;width:22px;height:1px;background:var(--orange);vertical-align:middle;margin-inline-start:8px}
.notices__list{display:flex;gap:18px;overflow:hidden;flex:1 1 auto;list-style:none;margin:0;padding:0}
.notices__list li{min-width:0}
.notices__list a{
  display:block;font-size:.82rem;color:var(--text-dim);text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:340px;
  padding:4px 0;transition:color var(--dur-fast) var(--ease-out);
}
.notices__list a:hover{color:var(--heading)}
@media(max-width:700px){
  .notices__in{flex-wrap:wrap;gap:4px 12px}
  .notices__list{gap:12px}
  .notices__list a{font-size:.78rem;max-width:64vw}
}

/* ---------- Trust band ----------
   The two top rows (ministry affiliation, legal name) do the work that numbers
   cannot: they answer "is this a real institution?". The counts underneath are
   a live COUNT over the catalogue plus the owner's own teacher figure. */
.trust{padding-block:26px 30px;border-bottom:1px solid var(--line)}
.trust__affil{font-size:.9rem;font-weight:500;line-height:1.7;margin:0 0 4px}
.trust__affil a{color:var(--heading);text-decoration:none;border-bottom:1px solid var(--orange);padding-bottom:2px;transition:color var(--dur-fast) var(--ease-out)}
.trust__affil a:hover{color:var(--accent-text)}
.trust__legal{font-size:.8rem;color:var(--text-dim);margin:0;line-height:1.7}
/* Compact cells. The base .stat carries clamp(26px,4vw,50px) top padding and a
   4.6rem figure, which alone renders the band 314px tall. */
.stats--trust{grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);margin-top:16px;border-radius:0}
.stats--trust .stat{padding:10px 8px 0}
.stats--trust .stat__n{font-size:clamp(2rem,3.4vw,3.5rem);line-height:1;letter-spacing:0}
.stats--trust .stat__l{margin-top:4px;font-size:.78rem;line-height:1.5;letter-spacing:0;text-transform:none}
/* Two equal tracks across the full container, each figure at its inline start.
   Fixed 200px tracks left ~70% of the rule empty, which read as a broken band
   rather than a deliberate one. */
@media(min-width:880px){.stats--trust{grid-template-columns:repeat(2,1fr)}}
.stats--trust .stat{justify-items:start;text-align:start}
@media(max-width:480px){
  .stats--trust{grid-template-columns:1fr}
  .stats--trust .stat{padding-inline:0}
}

/* ---------- Admission path: the price/conditions line ----------
   ac_courses.price and price_note exist but are empty for all 22 active rows, and
   admin/courses.php has no input for them. So no figure is printed — the line
   routes to the contact path instead, which is what the reference sites do
   (Imperial places "How can I fund my studies?" after "How do I apply?"). */
.apply-note{margin:20px 0 0;max-width:46ch;font-size:.85rem;line-height:1.7;color:var(--text-dim)}

/* ---------- About: dates line ----------
   Replaces about_short as the line directly under the heading. It states both
   dates together, which is what about_body itself explains year by year. */
.about__dates{margin:0 0 14px;max-width:60ch;font-size:.95rem;line-height:1.7;color:var(--text-dim)}

/* ---------- Quote band: static ----------
   Dropped the GSAP pin that cost 900px of scrubbed scroll (a 708px section inside
   a 1,608px pin-spacer) for one sentence with no links. */
.manifesto{padding-block:clamp(56px,8vw,104px);background:var(--prussian)}
.manifesto .container{max-width:760px;text-align:center;margin-inline:auto}
.manifesto__q{
  font-size:clamp(1.5rem,2.6vw,2.25rem);font-weight:300;letter-spacing:0;
  line-height:1.5;color:#fff;max-width:460px;margin:0 auto 18px;
}
.manifesto__by{
  margin:0;font-family:var(--meta);font-size:.8rem;letter-spacing:0;
  text-transform:none;color:#aeb6c9;justify-content:center;
}
.manifesto__by::before{content:none}

/* ---------- News: one list, and it is a list ----------
   .home-news__list was a <div> holding <article>s; it is now a <ul>/<li>, so the
   items are a real list for assistive tech. */
.home-news__list{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.home-news__item{display:flex;gap:16px;align-items:flex-start}
.home-news__item .card__media{flex:0 0 132px;border-radius:var(--r-sm);overflow:hidden}
.home-news__item .card__media img{width:100%;height:88px;object-fit:cover;display:block}
.home-news__item .card__body{padding:0;min-width:0}
.home-news__item h4{margin:2px 0 6px;font-size:1rem;line-height:1.5}
.home-news__item h4 a{color:var(--heading);text-decoration:none}
.home-news__item h4 a:hover{color:var(--accent-text)}
.home-news__item .card__tag{position:static;display:inline-flex;margin-bottom:4px}
@media(max-width:700px){
  .home-news__item .card__media{flex:0 0 96px}
  .home-news__item .card__media img{height:72px}
}

/* ---------- Final CTA: phone is a link, conditions are a text link ----------
   Exactly one filled button. The phone is a ghost button (a real action), the
   admission conditions drop to an underlined text link. */
.cta__tel{font-variant-numeric:tabular-nums}
.cta__tel svg{width:17px;height:17px;flex:0 0 auto}
.cta__link{color:var(--onyx);text-decoration:underline;text-underline-offset:4px;font-size:.88rem;font-weight:600;align-self:center;padding:8px 4px}
.cta__link:hover{color:#fff}
.cta .hero__actions{gap:14px;justify-content:center}

/* ---------- Hero on a phone: stack, keep the tap targets ----------
   The old rule squeezed two side-by-side buttons to 153x86 / 155x62 with
   mismatched heights. Stacked, each is full width and equal height. */
@media(max-width:700px){
  .hero__actions{flex-direction:column;align-items:stretch;width:100%}
  .hero__actions .btn{width:100%;justify-content:center;min-height:52px;white-space:nowrap}
  .hero h1{max-width:100%;font-size:clamp(1.75rem,7vw,2.25rem)}
  .hero .container{padding-bottom:clamp(48px,9vh,72px)}
  .cta__link{align-self:center}
}

@media (prefers-reduced-motion:reduce){
  .header *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------- Reduced transparency ----------
   The sheet is translucent (85% prussian + blur), so under
   prefers-reduced-transparency it falls back to solid --prussian with no blur.
   An earlier revision of this comment claimed the sheet was opaque; it is not. */
@media (prefers-reduced-transparency:reduce){
  .header--overlay{background:rgba(251,251,253,.98)}
  .header--overlay.scrolled{background:#fbfbfd;-webkit-backdrop-filter:none;backdrop-filter:none}
  .header--overlay:before{background:transparent;opacity:0}
  /* The toggled mobile search sheet is navy+blur like the drawer: same deal. */
  .header--overlay .header__search.toggled{background:var(--prussian);-webkit-backdrop-filter:none;backdrop-filter:none}
}