@font-face { font-family: "DM Serif Display"; src: url("/assets/fonts/dm-serif-display-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url("/assets/fonts/dm-serif-display-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "NotoNastaliq"; src: url("/assets/fonts/notonastaliq-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Nafees Nastaleeq"; src: url("/assets/fonts/nafees-nastaleeq-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
:root { --bg:#EEF1EC; --bg-alt:#F7F8F5; --card:#FFFFFF; --ink:#18241F; --ink-2:#56635D; --line:#D3D9D3;
--panel:#1E3A34; --panel-2:#27483F; --on-panel:#E6EEEA; --on-panel-2:#B4C7C0; --on-panel-strong:#FFFFFF;
--l1:#1F7A6A; --l2:#34478F; --l3:#C68A12; --l4:#8E3B5E; --accent:#E9B949; --kicker:var(--l1);
--stn-fill:#FFFFFF; --chip:#E4E9E3; --hero-bg:#EEF1EC; --head-bg:rgba(238,241,236,.93); --form-bg:#FFFFFF; --field-bg:#EEF1EC;
--halo:var(--l4); --btn-bg:var(--panel); --btn-fg:#FFFFFF; --btn-hover:var(--l1); --btn-radius:6px; --radius:8px; --card-shadow:0 1px 0 rgba(0,0,0,.04), 0 18px 40px -28px rgba(0,0,0,.35); --sketch:#2B3A34;
--display:"DM Serif Display", Georgia, serif; --text:"Figtree", system-ui, sans-serif; --h-weight:400; --h1-weight:400; --h-track:-.01em; --h1-track:-.02em; --num-weight:400; }
/* ===== Pathways core: shared by all variants; colours and fonts come from the theme ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 1rem); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.6 var(--text); -webkit-font-smoothing: antialiased; font-synthesis: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--l2); outline-offset: 3px; }
[hidden] { display: none !important; }
:root { --head-h: 76px; --gutter: clamp(1.25rem, 4vw, 2.75rem); --band: clamp(4.5rem, 2.5rem + 6vw, 7.5rem); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); position: relative; }
.band { position: relative; padding: var(--band) 0; overflow: hidden; }
.band--alt { background: var(--bg-alt); }
.band--panel { background: var(--panel); color: var(--on-panel); }
.h2 { font-family: var(--display); font-weight: var(--h-weight); font-size: clamp(2rem, 1.3rem + 2.4vw, 3.15rem); line-height: 1.1; letter-spacing: var(--h-track); max-width: 21ch; text-wrap: balance; }
.band--panel .h2 { color: var(--on-panel-strong); }
.lede { margin-top: 1rem; max-width: 58ch; font-size: 1.15rem; color: var(--ink-2); }
.band--panel .lede, .yhero .lede { color: var(--on-panel-2); }
.head { margin-bottom: clamp(2.5rem, 5vw, 3.75rem); position: relative; }
.kicker { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: .9rem; font-weight: 600; font-size: .92rem; color: var(--kicker); }
.kicker::before { content: ""; width: 22px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--l1) 0 33%, var(--l2) 33% 66%, var(--l3) 66%); }
.band--panel .kicker, .kicker--light { color: var(--accent); }
.dot { width: .7rem; height: .7rem; border-radius: 50%; flex: none; display: inline-block; }
.btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3rem; padding: .7rem 1.4rem; border-radius: var(--btn-radius); font: 600 1rem var(--text); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn--primary:hover { background: var(--btn-hover); color: var(--btn-fg); }
.btn--outline { border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--bg); }
.btn--light { background: var(--on-panel-strong); color: var(--panel); }
.btn--light:hover { background: var(--accent); color: var(--panel); }
.btn--ghost { border-color: rgba(255,255,255,.4); color: var(--on-panel-strong); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

/* progress */
.progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--l1), var(--l2), var(--l3)); }

/* header */
.header { position: sticky; top: 0; z-index: 50; background: var(--head-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.header__inner { height: var(--head-h); display: flex; align-items: center; gap: 2rem; }
.header__logo { position: relative; display: block; }
.header__logo img { height: 52px; width: auto; }
.header__logo .logo-alt { display: none; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 1.75rem; }
.nav ul { list-style: none; display: flex; gap: 1.35rem; }
.nav ul a { text-decoration: none; font-weight: 500; color: var(--ink-2); padding-block: .35rem; background: linear-gradient(var(--l2), var(--l2)) left bottom / 0 2px no-repeat; transition: color .2s ease, background-size .25s ease; }
.nav ul a:hover, .nav ul a.is-current { color: var(--ink); background-size: 100% 2px; }
.nav .btn { min-height: 2.6rem; padding: .45rem 1.1rem; }
.nav-toggle { display: none; }

/* hero */
.hero { position: relative; background: var(--hero-bg); padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem); overflow: hidden; }
.hero__wrap { position: relative; z-index: 2; }
.hero__top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 3rem; align-items: end; }
.hero h1 { font-family: var(--display); font-weight: var(--h1-weight); font-size: clamp(3rem, 1.5rem + 5.6vw, 6.4rem); line-height: .98; letter-spacing: var(--h1-track); color: var(--ink); }
.hero h1 span { display: block; }
.hero__side p { font-size: 1.2rem; color: var(--ink-2); }
.map { margin-top: clamp(2.5rem, 5vw, 4rem); }
.map__svg { width: 100%; height: auto; overflow: visible; }
.track { fill: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.t1 { stroke: var(--l1); } .t2 { stroke: var(--l2); } .t3 { stroke: var(--l3); }
.pulses { display: none; }
.stn { fill: var(--stn-fill); stroke: var(--ink); stroke-width: 3; transform-box: fill-box; transform-origin: center; }
.lbl { font: 500 13px var(--text); fill: var(--ink-2); }
.line-lbl { font: 600 14px var(--text); }
.xchg { fill: var(--stn-fill); stroke: var(--ink); stroke-width: 3.5; transform-box: fill-box; transform-origin: center; }
.xchg-lbl { font: 600 14px var(--text); fill: var(--ink); }
.term { fill: var(--ink); transform-box: fill-box; transform-origin: center; }
.term-ring { fill: none; stroke: var(--ink); stroke-width: 3; transform-box: fill-box; transform-origin: center; }
.term-lbl { font: 700 18px var(--display); fill: var(--ink); }
.term-sub { font: 500 14px var(--text); fill: var(--ink-2); }
.train rect { fill: currentColor; stroke: var(--stn-fill); stroke-width: 2.5; }
.trains { opacity: 0; transition: opacity .8s ease 2.6s; }
.is-ready .trains { opacity: 1; }
.js .track { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.js .stn, .js .xchg, .js .term, .js .term-ring { transform: scale(0); }
.js .lbl, .js .xchg-lbl, .js .term-lbl, .js .term-sub { opacity: 0; }
.is-ready .track { animation: draw 2.4s cubic-bezier(.55,.05,.35,1) .2s forwards; }
.is-ready .stn { animation: pop .4s cubic-bezier(.3,1.6,.5,1) forwards; animation-delay: var(--d); }
.is-ready .lbl { animation: fade .5s ease forwards; animation-delay: var(--d); }
.is-ready .xchg, .is-ready .xchg-lbl { animation: pop .5s cubic-bezier(.3,1.6,.5,1) 1.35s forwards, fade .5s ease 1.35s forwards; }
.is-ready .term, .is-ready .term-ring { animation: pop .6s cubic-bezier(.3,1.6,.5,1) 2.5s forwards; }
.is-ready .term-ring { animation: pop .6s cubic-bezier(.3,1.6,.5,1) 2.5s forwards, breathe 3.2s ease-in-out 3.2s infinite; }
.is-ready .term-lbl, .is-ready .term-sub { animation: fade .6s ease 2.6s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { to { transform: scale(1); } }
@keyframes fade { to { opacity: 1; } }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: .55; } }
.key { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin-top: 1.5rem; font-size: .95rem; color: var(--ink-2); }
.key span { display: inline-flex; align-items: center; gap: .55rem; }
.key i { width: 26px; height: 6px; border-radius: 3px; }

/* sketches */
.sketch { position: absolute; pointer-events: none; color: var(--sketch); z-index: 0; }

/* ribbon */
.ribbon { background: var(--panel); color: var(--on-panel-strong); }
.ribbon ul { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ribbon li { padding: 1.9rem 1.5rem; border-left: 1px solid rgba(255,255,255,.12); }
.ribbon li:first-child { border-left: 0; padding-left: 0; }
.ribbon b { display: block; font: var(--num-weight) clamp(2rem, 1.3rem + 1.8vw, 2.8rem)/1 var(--display); letter-spacing: var(--h-track); }
.ribbon li > span { display: block; margin-top: .5rem; color: var(--on-panel-2); font-size: .95rem; }

/* four core services: shared pieces (each variant lays them out its own way) */
.core-band { position: relative; }
.svc { position: relative; }
.svc__icon { width: 64px; height: 64px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.svc h3 { font-family: var(--display); font-weight: var(--h-weight); letter-spacing: var(--h-track); line-height: 1.05; }
.svc__desc { color: var(--ink-2); }
.svc__list { list-style: none; display: grid; gap: .35rem; }
.svc__list li { display: flex; align-items: center; gap: .6rem; font-weight: 500; }
.svc__list li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2.5px solid var(--c); flex: none; }
.svc__fact { font-size: .98rem; color: var(--ink-2); }
.svc__fact b { color: var(--ink); font-family: var(--display); font-weight: var(--num-weight); }
.js .svc__icon path, .js .svc__icon rect, .js .svc__icon circle { stroke-dasharray: 80; stroke-dashoffset: 80; }
.is-in .svc__icon path, .is-in .svc__icon rect, .is-in .svc__icon circle { animation: draw 1.6s ease forwards; }

/* lines */
.lines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); position: relative; }
.route { background: var(--card); border-radius: var(--radius); padding: 1.75rem 1.75rem 1.5rem; display: flex; flex-direction: column; border-top: 8px solid var(--c); box-shadow: var(--card-shadow); transition: transform .3s ease; }
.route:hover { transform: translateY(-4px); }
.route__name { display: flex; align-items: center; gap: .6rem; font: 600 .9rem var(--text); color: var(--c); }
.route h3 { margin-top: .5rem; font: var(--h-weight) 1.8rem/1.15 var(--display); letter-spacing: var(--h-track); }
.route__who { margin-top: .5rem; color: var(--ink-2); }
.route__start { margin-top: 1.25rem; font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.route ol { list-style: none; margin-top: 1rem; position: relative; padding-left: 2rem; }
.route ol::before { content: ""; position: absolute; left: .55rem; top: .5rem; bottom: .5rem; width: 5px; border-radius: 3px; background: var(--c); transform-origin: top; }
.route li { position: relative; padding: .45rem 0; font-weight: 500; }
.route li::before { content: ""; position: absolute; left: -1.75rem; top: .72rem; width: 12px; height: 12px; border-radius: 50%; background: var(--stn-fill); border: 3px solid var(--ink); }
.route li.term { font-family: var(--display); font-weight: 600; margin-top: .25rem; }
.route li.term::before { background: var(--ink); width: 16px; height: 16px; left: -1.9rem; top: .62rem; }
.route li.term span { display: block; font: 400 .9rem var(--text); color: var(--ink-2); }
.route .btn { margin-top: 1.5rem; align-self: flex-start; }
.js .route ol::before { transform: scaleY(0); transition: transform 1.2s cubic-bezier(.55,.05,.35,1); }
.js .route li { opacity: 0; transform: translateX(-8px); transition: opacity .4s ease, transform .4s ease; transition-delay: calc(.2s + var(--k) * .15s); }
.route ol.is-in::before { transform: scaleY(1); }
.route ol.is-in li { opacity: 1; transform: none; }

/* vision band */
.vision { min-height: 520px; display: flex; align-items: center; }
.vision__lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.vl { fill: none; stroke-width: 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.js .vl { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.vision.is-in .vl { animation: draw 2.6s cubic-bezier(.55,.05,.35,1) forwards; }
.vision__inner { position: relative; z-index: 1; width: 100%; }
.vision__title { max-width: 18ch; font-family: var(--display); font-weight: var(--h1-weight); font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4.4rem); line-height: 1.04; letter-spacing: var(--h1-track); color: var(--on-panel-strong); text-wrap: balance; }
.vision__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 3rem; max-width: 1000px; }
.vision__cols div { padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.2); }
.vision__cols h3 { font: 600 .92rem var(--text); color: var(--accent); }
.vision__cols p { margin-top: .4rem; color: var(--on-panel-2); }
.js .vision__title { opacity: 0; transform: translateY(16px); transition: opacity 1s ease .6s, transform 1s cubic-bezier(.2,.7,.2,1) .6s; }
.vision.is-in .vision__title { opacity: 1; transform: none; }

/* programmes */
.depth { position: relative; }
.depth__rail { position: absolute; left: 26px; right: calc((100% - 6rem) / 7 - 26px); top: 23px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--l1), var(--l2) 60%, var(--l3)); transform-origin: left; }
.js .depth__rail { transform: scaleX(0); transition: transform 1.6s cubic-bezier(.55,.05,.35,1); }
.depth.is-in .depth__rail { transform: scaleX(1); }
.depth ol { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1rem; position: relative; }
.depth .n { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--stn-fill); border: 4px solid var(--ink); font: 700 1.1rem var(--display); transition: transform .3s cubic-bezier(.3,1.6,.5,1), background-color .2s ease, color .2s ease; }
.js .depth .n { transform: scale(0); transition-delay: calc(.15s + var(--i) * .2s); }
.depth.is-in .n { transform: scale(1); }
.depth li:hover .n { background: var(--ink); color: var(--bg); transform: scale(1.12); transition-delay: 0s; }
.depth h3 { margin-top: 1rem; font: 600 1.12rem/1.25 var(--display); }
.depth p { margin-top: .35rem; font-size: .93rem; line-height: 1.45; color: var(--ink-2); }
.depth .kind { display: inline-block; margin-top: .6rem; font-size: .78rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; background: var(--chip); }
.depth__ends { display: flex; justify-content: space-between; margin-top: 1.75rem; font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.timetable { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: clamp(3rem, 5vw, 4rem); }
.timetable section { background: var(--card); border-radius: var(--radius); padding: 1.5rem 1.75rem; box-shadow: var(--card-shadow); }
.timetable h3 { font: 600 1.2rem var(--display); }
.timetable ol { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 1rem; position: relative; }
.timetable ol::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 3px; background: var(--ink); border-radius: 2px; }
.timetable li { position: relative; padding-top: 1.4rem; color: var(--ink-2); font-size: .9rem; }
.timetable li::before { content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--stn-fill); border: 3px solid var(--ink); }
.timetable b { display: block; font: var(--num-weight) 1.7rem/1 var(--display); color: var(--ink); }
.themes { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 2.5rem; }
.themes p { font-weight: 600; margin-right: .5rem; }
.themes span { padding: .5rem 1rem; border-radius: 999px; border: 1.5px solid var(--ink); font-weight: 500; font-size: .95rem; transition: background-color .2s ease, color .2s ease; }
.themes span:hover { background: var(--ink); color: var(--bg); }

/* YULP teaser + board */
.yulp__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; position: relative; z-index: 1; }
.tag { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .92rem; color: var(--accent); }
.yulp-teaser .h2 { margin-top: .9rem; }
.board { background: var(--panel-2); border-radius: calc(var(--radius) + 4px); padding: 1.25rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; position: relative; }
.board div { background: var(--panel); padding: 1.2rem 1.35rem; }
.board dt { font-size: .82rem; font-weight: 600; color: var(--on-panel-2); }
.board dd { margin-top: .3rem; font: var(--num-weight) 2.1rem/1 var(--display); color: var(--accent); }
.js .board div { opacity: 0; transform: rotateX(80deg); transform-origin: top; transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.3,1); }
.board.is-in div { opacity: 1; transform: none; }
.board.is-in div:nth-child(2) { transition-delay: .08s; } .board.is-in div:nth-child(3) { transition-delay: .16s; } .board.is-in div:nth-child(4) { transition-delay: .24s; } .board.is-in div:nth-child(5) { transition-delay: .32s; } .board.is-in div:nth-child(6) { transition-delay: .4s; } .board.is-in div:nth-child(7) { transition-delay: .48s; }

/* impact */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.stat { background: var(--card); border-radius: var(--radius); padding: 1.5rem; position: relative; overflow: hidden; box-shadow: var(--card-shadow); transition: transform .3s ease; }
.stat:hover { transform: translateY(-3px); }
.stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--c); }
.stat b { display: block; font: var(--num-weight) clamp(2rem, 1.5rem + 1.4vw, 2.7rem)/1 var(--display); letter-spacing: var(--h-track); }
.stat b ~ span { display: block; margin-top: .6rem; color: var(--ink-2); font-size: .95rem; line-height: 1.4; }
.stat--wide { grid-column: span 2; }
.stat--big { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; }
.stat--big b { font-size: clamp(3.5rem, 2rem + 5vw, 6.5rem); }
.gender { margin-top: 1.5rem; }
.gender__bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--line); }
.gender__bar i { display: block; height: 100%; transition: width 1.4s cubic-bezier(.55,.05,.35,1); }
.gender__w { background: var(--l1); width: 56%; } .gender__m { background: var(--l2); width: 44%; }
.js .gender__bar i { width: 0; }
.stats.is-in .gender__w { width: 56%; } .stats.is-in .gender__m { width: 44%; }
.gender p { display: flex; justify-content: space-between; margin-top: .5rem; font-size: .92rem; color: var(--ink-2); }
.gender p b { display: inline; font: 600 .95rem var(--text); color: var(--ink); }
.road { margin-top: clamp(1rem, 2vw, 1.5rem); background: var(--panel); color: var(--on-panel-strong); border-radius: var(--radius); padding: 1.75rem; display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center; }
.road h3 { font: 600 1.35rem var(--display); }
.road ul { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.road li b { display: block; font: var(--num-weight) 1.9rem/1 var(--display); }
.road li > span { display: block; margin-top: .4rem; color: var(--on-panel-2); font-size: .9rem; }
.note { margin-top: 1.25rem; font-size: .88rem; color: var(--ink-2); }
.marquee { margin-top: 1.5rem; display: grid; gap: .6rem; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__row { display: flex; width: max-content; }
.marquee ul { list-style: none; display: flex; gap: .6rem; padding-right: .6rem; }
.marquee li { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-weight: 500; font-size: .92rem; white-space: nowrap; }
.marquee li i { width: 8px; height: 8px; border-radius: 50%; background: var(--l1); }
.marquee__row--2 li i { background: var(--l3); }
.marquee__row--1 { animation: slide 70s linear infinite; }
.marquee__row--2 { animation: slide 80s linear infinite reverse; }
.marquee:hover .marquee__row { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }

/* people */
.people { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.person { background: var(--card); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--card-shadow); transition: transform .3s ease; }
.person:hover { transform: translateY(-3px); }
.person__mono { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; border: 5px solid var(--c); font: 700 1.3rem var(--display); }
.person h3 { margin-top: 1.1rem; font: 600 1.12rem/1.3 var(--display); }
.person p { margin-top: .3rem; color: var(--ink-2); font-size: .95rem; }
.person--small { padding: 1.1rem; display: flex; align-items: center; gap: 1rem; }
.person--small .person__mono { width: 52px; height: 52px; border-width: 4px; font-size: 1rem; flex: none; }
.person--small h3 { margin: 0; font-size: 1rem; }

/* journey */
.journey ol { list-style: none; counter-reset: j; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; position: relative; }
.journey ol::before { content: ""; position: absolute; left: 20px; right: calc((100% - 4rem) / 5 - 20px); top: 17px; height: 6px; border-radius: 3px; background: var(--ink); transform-origin: left; }
.js .journey ol::before { transform: scaleX(0); transition: transform 1.6s cubic-bezier(.55,.05,.35,1); }
.journey ol.is-in::before { transform: scaleX(1); }
.journey li { counter-increment: j; position: relative; }
.journey li::before { content: counter(j); position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--stn-fill); border: 4px solid var(--ink); font: 700 1rem var(--display); }
.journey h3 { margin-top: 1rem; font: 600 1.25rem var(--display); }
.journey p { margin-top: .35rem; color: var(--ink-2); font-size: .95rem; }

/* contact */
.contact__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; position: relative; z-index: 1; }
.desk { list-style: none; margin-top: 2rem; display: grid; gap: .75rem; }
.desk li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-radius: calc(var(--radius) - 4px); background: var(--panel-2); }
.desk span { display: flex; align-items: center; gap: .6rem; color: var(--on-panel-2); font-size: .95rem; }
.desk a { color: var(--on-panel-strong); font: 600 1.1rem var(--display); text-decoration: none; }
.desk a:hover { color: var(--accent); }
.form { background: var(--form-bg); color: var(--ink); border-radius: calc(var(--radius) + 4px); padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.field { display: grid; gap: .35rem; }
.field label { font-weight: 600; font-size: .92rem; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; font: 400 1rem var(--text); color: var(--ink); background: var(--field-bg); border: 1.5px solid transparent; border-radius: calc(var(--radius) - 6px); padding: .75rem .9rem; transition: border-color .15s ease, background-color .15s ease; }
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--l2); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hint { font-size: .9rem; color: var(--ink-2); }
.hint.is-error { color: var(--l3); font-weight: 600; }
.form .btn { justify-self: start; }

/* footer */
.footer { background: var(--panel); color: var(--on-panel-2); border-top: 1px solid rgba(255,255,255,.08); padding: 3.5rem 0 2rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.footer img { height: 64px; width: auto; }
.footer__motto { margin-top: 1rem; color: var(--on-panel-strong); font: 600 1.15rem/1.35 var(--display); max-width: 24ch; }
.footer h2 { font: 600 .95rem var(--text); color: var(--on-panel-strong); }
.footer ul { list-style: none; margin-top: .9rem; display: grid; gap: .5rem; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--on-panel-strong); }
.footer__legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .88rem; }

/* ===== YULP page ===== */
.yhero { position: relative; overflow: hidden; padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); }
.yhero .wrap { z-index: 1; }
.crumbs { display: flex; flex-wrap: wrap; gap: .3rem .6rem; font-size: .9rem; color: var(--on-panel-2); margin-bottom: 2rem; }
.crumbs a { color: var(--on-panel-2); white-space: nowrap; }
.yhero__title { margin-top: 1rem; max-width: 14ch; font-family: var(--display); font-weight: var(--h1-weight); font-size: clamp(2.8rem, 1.4rem + 5vw, 5.6rem); line-height: 1; letter-spacing: var(--h1-track); color: var(--on-panel-strong); }
.yhero__lede { font-size: 1.25rem; max-width: 52ch; }
.saw { font-family: "Noto Naskh Arabic", "Amiri", "Geeza Pro", "Traditional Arabic", "Segoe UI", serif; font-size: 1.15em; }
.years { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.years__title { font: 600 1rem var(--text); color: var(--accent); }
.years ol { list-style: none; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); margin-top: 1rem; position: relative; }
.years ol::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--l1), var(--l2), var(--l3)); transform-origin: left; }
.years li { position: relative; padding-top: 1.75rem; font-size: .85rem; color: var(--on-panel-2); }
.years li::before { content: ""; position: absolute; left: 0; top: 2px; width: 19px; height: 19px; border-radius: 50%; background: var(--panel); border: 4px solid var(--on-panel-strong); }
.years li:last-child::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 6px rgba(255, 210, 122, .25); }
.js .years ol::before { transform: scaleX(0); }
.js .years li::before { transform: scale(0); }
.js .years li span { opacity: 0; }
.is-ready .years ol::before { transition: transform 2s cubic-bezier(.55,.05,.35,1) .3s; transform: scaleX(1); }
.is-ready .years li::before { transition: transform .4s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(.4s + var(--k) * .17s); transform: scale(1); }
.is-ready .years li span { transition: opacity .4s ease; transition-delay: calc(.5s + var(--k) * .17s); opacity: 1; }
.doc__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.doc__grid .lede + .lede { margin-top: .9rem; }
.video { margin: 0; }
.video__btn { position: relative; display: block; text-decoration: none; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: var(--radius); overflow: hidden; cursor: pointer; background: linear-gradient(135deg, var(--panel), var(--panel-2)); box-shadow: var(--card-shadow); }
.video__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.video__btn:hover img { transform: scale(1.04); }
.video__play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; box-shadow: 0 0 0 0 rgba(255, 210, 122, .6); animation: ping 2.4s ease-out infinite; }
.video__play svg { width: 34px; height: 34px; fill: var(--panel); margin-left: 4px; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(255,210,122,.55); } 100% { box-shadow: 0 0 0 26px rgba(255,210,122,0); } }
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); }
.video figcaption { margin-top: .75rem; font-size: .9rem; color: var(--ink-2); }
.values { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.value { background: var(--card); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--card-shadow); position: relative; overflow: hidden; }
.value::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 140px; height: 140px; border-radius: 50%; border: 10px solid var(--c); opacity: .12; }
.value__mark { display: block; width: 44px; height: 6px; border-radius: 3px; background: var(--c); }
.value p { margin-top: 1.25rem; font: var(--h-weight) 1.45rem/1.25 var(--display); letter-spacing: var(--h-track); }
.js .value { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--k) * .1s); }
.values.is-in .value { opacity: 1; transform: none; }
.method__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.method__themes { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.25rem; }
.method__themes li { padding: 1.4rem 1.5rem; border-radius: var(--radius); background: var(--card); box-shadow: var(--card-shadow); font: var(--h-weight) 1.45rem/1.2 var(--display); border-left: 8px solid var(--c); }
.js .method__themes li { opacity: 0; transform: scale(.94); transition: opacity .5s ease, transform .5s cubic-bezier(.3,1.4,.5,1); }
.method__themes.is-in li { opacity: 1; transform: none; }
.method__themes.is-in li:nth-child(2) { transition-delay: .1s; } .method__themes.is-in li:nth-child(3) { transition-delay: .2s; } .method__themes.is-in li:nth-child(4) { transition-delay: .3s; }
.method__side { background: var(--panel); color: var(--on-panel); border-radius: var(--radius); padding: 2rem; }
.method__big { color: var(--on-panel-2); }
.method__big b { display: block; font: var(--num-weight) 5rem/1 var(--display); color: var(--accent); }
.method__side h3 { margin-top: 1.5rem; font: 600 1.1rem var(--display); color: var(--on-panel-strong); }
.method__ways { list-style: none; margin-top: .75rem; position: relative; padding-left: 1.75rem; }
.method__ways::before { content: ""; position: absolute; left: .45rem; top: .6rem; bottom: .6rem; width: 4px; border-radius: 2px; background: var(--accent); }
.method__ways li { position: relative; padding: .3rem 0; color: var(--on-panel-strong); }
.method__ways li::before { content: ""; position: absolute; left: -1.6rem; top: .65rem; width: 12px; height: 12px; border-radius: 50%; background: var(--panel); border: 3px solid var(--accent); }
.fields { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.75rem; }
.fields li { padding: .55rem 1rem; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.28); color: var(--on-panel-strong); font-weight: 500; font-size: .95rem; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.fields li:hover { background: var(--accent); border-color: var(--accent); color: var(--panel); }
.js .fields li { opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease, background-color .2s ease; transition-delay: calc(var(--k) * .06s); }
.fields.is-in li { opacity: 1; transform: none; }
.join { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 1.25rem; }
.join__card { background: var(--card); border-radius: var(--radius); padding: 1.75rem; border-top: 8px solid var(--c, var(--ink)); box-shadow: var(--card-shadow); display: flex; flex-direction: column; gap: .5rem; }
.join__card h3 { font: var(--h-weight) 1.7rem var(--display); letter-spacing: var(--h-track); }
.join__card p { color: var(--ink-2); }
.join__card a:not(.btn) { margin-top: auto; font: 600 1.2rem var(--display); text-decoration: none; }
.join__card--cta { background: var(--panel); color: var(--on-panel-strong); border-top-color: var(--accent); }
.join__card--cta p { color: var(--on-panel-2); }
.join__card--cta .btn { margin-top: auto; align-self: flex-start; }
.team__label { margin: 2.25rem 0 1rem; font: 600 1rem var(--text); color: var(--ink-2); }
.team__label:first-of-type { margin-top: 0; }
.people--2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.people--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ycta__inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.ycta__inner .h2 { max-width: 24ch; }
.ycta__inner .btns { justify-content: center; }

/* ===== Responsive ===== */
@media (max-width: 1080px) {
  .nav ul { gap: 1rem; }
  .depth ol { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 2rem; }
  .depth__rail { display: none; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people, .people--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .join { grid-template-columns: 1fr 1fr; }
  .join__card--cta { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  :root { --head-h: 66px; }
  .header__logo img { height: 44px; }
  .nav-toggle { display: inline-flex; margin-left: auto; align-items: center; gap: .5rem; min-height: 2.6rem; padding: .4rem 1rem; border-radius: 999px; border: 1.5px solid var(--ink); background: none; font: 600 .95rem var(--text); color: var(--ink); cursor: pointer; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 1rem; background: var(--bg); padding: .5rem var(--gutter) 1.5rem; border-bottom: 1px solid var(--line); }
  .js .nav { display: none; } .js .nav.is-open { display: flex; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav ul a { display: block; padding: .85rem 0; border-bottom: 1px solid var(--line); color: var(--ink); background: none; }
  .hero__top, .lines, .yulp__grid, .contact__grid, .timetable, .road, .doc__grid, .method__grid { grid-template-columns: 1fr; }
  .vision__cols { grid-template-columns: 1fr; gap: 1.25rem; }
  .vision__lines { display: none; }
  .ribbon ul { grid-template-columns: 1fr 1fr; }
  .ribbon li:nth-child(3) { border-left: 0; padding-left: 0; }
  .ribbon li { border-top: 1px solid rgba(255,255,255,.12); }
  .journey ol { grid-template-columns: 1fr; gap: 1.5rem; }
  .journey ol::before { left: 17px; right: auto; top: 20px; bottom: 20px; width: 6px; height: auto; transform-origin: top; }
  .js .journey ol::before { transform: scaleY(0); }
  .journey ol.is-in::before { transform: scaleY(1); }
  .journey li { padding-left: 3.75rem; }
  .journey li::before { position: absolute; left: 0; top: 0; }
  .journey h3 { margin-top: 0; }
  .road ul { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .lbl { display: none; }
  .years ol { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 1.25rem; }
  .years ol::before { display: none; }
}
@media (max-width: 600px) {
  .depth ol { grid-template-columns: 1fr; }
  .depth li { display: grid; grid-template-columns: 52px 1fr; column-gap: 1rem; }
  .depth li > *:not(.n) { grid-column: 2; }
  .depth .n { grid-row: 1 / span 3; }
  .depth h3 { margin-top: .6rem; }
  .depth__ends { display: none; }
  .stats, .people, .people--2, .people--5, .values, .join, .method__themes { grid-template-columns: 1fr; }
  .stat--big, .stat--wide { grid-column: auto; grid-row: auto; }
  .field-row { grid-template-columns: 1fr; }
  .board { grid-template-columns: 1fr; }
  .hero__side .btns .btn { flex: 1 1 100%; }
  .line-lbl, .xchg-lbl, .term-sub { display: none; }
  .years ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; transition-delay: 0s !important; }
  .trains, .pulses { display: none !important; }
  .marquee__row { animation: none !important; }
}

.video__label { position: absolute; left: 1rem; bottom: .9rem; color: #fff; font-weight: 600; font-size: .95rem; text-shadow: 0 1px 6px rgba(0,0,0,.5); }

/* ===== Additions: ribbon labels, programmes showcase, maps, journey + contact, YULP page ===== */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ext { font-size: .95em; }
.wrap--wide { max-width: 1440px; }

/* ribbon: "Participants from" sits above the figure */
.ribbon__pre { display: block; font-style: normal; font-size: .82rem; font-weight: 600; color: var(--accent); margin-bottom: .45rem; letter-spacing: .01em; }
.ribbon li { display: flex; flex-direction: column; justify-content: flex-end; }

/* ---------- Programmes showcase ---------- */
.showcase { position: relative; overflow: hidden; padding: clamp(5.5rem, 3rem + 7vw, 9.5rem) 0;
  background:
    radial-gradient(55% 60% at 12% 0%, color-mix(in srgb, var(--l1) 14%, transparent), transparent 70%),
    radial-gradient(50% 60% at 95% 100%, color-mix(in srgb, var(--l2) 14%, transparent), transparent 70%),
    var(--bg-alt);
  border-block: 1px solid var(--line); }
.showcase__seven { position: absolute; right: 1vw; top: 0; font: 700 clamp(18rem, 30vw, 34rem)/1 var(--display); color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--ink) 9%, transparent); pointer-events: none; z-index: 0; }
.showcase .wrap { position: relative; z-index: 1; }
.head--center { text-align: center; display: flex; flex-direction: column; align-items: center; margin-inline: auto; }
.head--center .h2, .head--center .lede { margin-inline: auto; }
.showcase__title { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.6rem); max-width: 17ch; line-height: 1.02; }
.stair { position: relative; margin-top: clamp(1rem, 3vw, 2.5rem); }
.stair__svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 0; }
.stair__svg--top { z-index: 3; }
.stair__line { fill: none; stroke: var(--ink); stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; opacity: .55; }
.stair__train { opacity: 0; transition: transform 1s cubic-bezier(.6,.05,.3,1), opacity .4s ease; }
.stair__train circle { fill: none; stroke: var(--halo, var(--accent)); stroke-width: 4; stroke-dasharray: 10 6; transform-box: fill-box; transform-origin: center; animation: spin 8s linear infinite; }
.stair.is-run .stair__train { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }
.stair__groups { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 14px; margin-bottom: 1.25rem; }
.stair__groups li { display: flex; align-items: center; gap: .6rem; font: 600 .95rem var(--text); color: var(--c); padding-bottom: .55rem; border-bottom: 4px solid var(--c); }
.stair__steps { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 14px; align-items: end; position: relative; z-index: 1; }
.step { position: relative; min-height: calc(250px + var(--i) * 48px); display: flex; flex-direction: column; padding: 2.4rem 1.2rem 1.4rem; border-radius: var(--radius); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, var(--card)), var(--card) 75%); border: 1.5px solid color-mix(in srgb, var(--c) 35%, var(--line)); box-shadow: var(--card-shadow); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background-color .35s ease; }
.step__n { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--stn-fill); border: 4px solid var(--c); color: var(--ink); font: 700 1.25rem var(--display); transition: background-color .3s ease, color .3s ease, transform .3s cubic-bezier(.3,1.6,.5,1); }
.step__kind { align-self: flex-start; font-size: .76rem; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); padding: .2rem .6rem; border-radius: 999px; }
.step h3 { margin-top: .9rem; font: var(--h-weight) clamp(1.15rem, .8rem + .8vw, 1.5rem)/1.18 var(--display); letter-spacing: var(--h-track); hyphens: auto; }
.step::after { content: attr(data-n); position: absolute; right: .9rem; bottom: .4rem; font: 700 clamp(3rem, 2rem + 3vw, 5.5rem)/1 var(--display); color: color-mix(in srgb, var(--c) 16%, transparent); pointer-events: none; }
.step p { margin-top: .5rem; font-size: .95rem; line-height: 1.5; color: var(--ink-2); }
.step.is-lit { border-color: var(--c); box-shadow: 0 26px 60px -34px var(--c); }
.step.is-lit .step__n { background: var(--c); color: #fff; }
.step.is-here { transform: translateY(-8px); }
.step.is-here .step__n { transform: translate(-50%, -50%) scale(1.15); }
.step:hover { transform: translateY(-8px); border-color: var(--c); }
.js .step { opacity: 0; transform: translateY(40px); }
.stair.is-in .step { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .35s ease; transition-delay: calc(var(--i) * .1s), calc(var(--i) * .1s), 0s, 0s; }
.stair.is-in .step.is-here, .stair.is-in .step:hover { transform: translateY(-8px); transition-delay: 0s; }
.stair__axis { position: relative; display: flex; justify-content: space-between; margin-top: 1.5rem; padding-top: 1rem; font: 600 1rem var(--text); color: var(--ink); }
.stair__axis::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--l1), var(--l4) 62%, var(--l2)); clip-path: polygon(0 40%, 97% 0, 100% 50%, 97% 100%, 0 60%); }
.showcase .timetable { margin-top: clamp(3.5rem, 6vw, 5rem); }
.showcase .themes { justify-content: center; }
.showcase .themes p { flex-basis: 100%; text-align: center; margin: 0 0 .25rem; }

/* ---------- World map ---------- */
.world { margin-top: clamp(1.5rem, 3vw, 2.25rem); background: var(--card); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: clamp(1.5rem, 3vw, 2.5rem); display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 3fr); gap: 1.5rem 2rem; align-items: center; border: 1px solid var(--line); }
.world__pre { font-weight: 600; color: var(--ink-2); font-size: 1rem; }
.world__big { font: var(--h-weight) clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem)/1.05 var(--display); letter-spacing: var(--h-track); margin: .1rem 0 .6rem; }
.world__big b { font-weight: var(--num-weight); font-size: 1.6em; color: var(--l2); letter-spacing: var(--h1-track); }
.world__big + .world__pre + .world__big b { color: var(--l1); }
.world__sub { color: var(--ink-2); font-size: .98rem; max-width: 26ch; }
.world__map { margin: 0; }
.wm { width: 100%; height: auto; overflow: visible; }
.wm-land { fill: color-mix(in srgb, var(--ink) 16%, transparent); }
.r1 { --rc: var(--l1); } .r2 { --rc: var(--l2); } .r3 { --rc: var(--l3); } .r4 { --rc: var(--l4); }
.wm-hi { fill: var(--rc); }
.wm-arc { fill: none; stroke: var(--rc); stroke-width: 1.5; opacity: .6; }
.wm-dot { fill: var(--stn-fill); stroke: var(--rc); stroke-width: 2.4; }
.wm-st--hub .wm-dot { fill: var(--ink); stroke: var(--stn-fill); stroke-width: 2.5; }
.wm-ping { fill: none; stroke: var(--rc); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.wm-st { cursor: default; }
.wm-st:hover .wm-dot { fill: var(--rc); }
.js .wm-arc { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.js .wm-hi { opacity: 0; }
.js .wm-st { opacity: 0; }
.world.is-in .wm-hi { animation: fade 1.2s ease .2s forwards; }
.world.is-in .wm-arc { animation: draw 1.4s cubic-bezier(.55,.05,.35,1) forwards; animation-delay: var(--d); }
.world.is-in .wm-st { animation: fade .4s ease forwards; animation-delay: var(--d); }
.world.is-in .wm-ping { animation: ring 2.8s ease-out infinite; animation-delay: var(--d); }
@keyframes ring { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(3.2); } }
.wm-regions { grid-column: 1 / -1; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.wm-regions li { font-size: .92rem; color: var(--ink-2); padding-left: .9rem; border-left: 4px solid var(--rc); }
.wm-regions b { display: block; color: var(--ink); font-weight: 600; }

/* ---------- Pakistan map ---------- */
.pakmap { margin-top: clamp(1rem, 2vw, 1.5rem); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; background: var(--card); border-radius: var(--radius); box-shadow: var(--card-shadow); border: 1px solid var(--line); padding: clamp(1.5rem, 3vw, 2.5rem); }
.pakmap__map { margin: 0; }
.pakmap__map figcaption { margin-top: .5rem; font-size: .8rem; color: var(--ink-2); }
.pk { width: 100%; height: auto; overflow: visible; }
.pk-base { fill: color-mix(in srgb, var(--ink) 7%, var(--card)); }
.pk-prov { fill: color-mix(in srgb, var(--ink) 8%, var(--card)); }
.pk-prov.p2 { fill: color-mix(in srgb, var(--ink) 12%, var(--card)); }
.pk-prov.p3 { fill: color-mix(in srgb, var(--ink) 5%, var(--card)); }
.pk-prov.p4 { fill: var(--l1); }
.pk-disputed { fill: color-mix(in srgb, var(--ink) 3%, var(--card)); }
.pk-inner { fill: none; stroke: var(--card); stroke-width: 2.6; stroke-linejoin: round; }
.pk-dash { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-dasharray: 7 5; }
.pk-outline { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.pk-note { font: italic 500 17px var(--text); fill: var(--ink-2); }
.pk-dot { fill: var(--stn-fill); stroke: var(--l2); stroke-width: 3.5; }
.pk-city--major .pk-dot { fill: var(--l1); stroke: var(--stn-fill); stroke-width: 3; }
.pk-ping { fill: none; stroke: var(--l1); stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pk-city:hover .pk-dot { fill: var(--l3); }
.pk-lbl { font: 700 24px var(--text); fill: var(--ink); paint-order: stroke; stroke: var(--card); stroke-width: 6px; stroke-linejoin: round; }
.js .pk-city { opacity: 0; }
.js .pk-lbl { opacity: 0; }
.pakmap.is-in .pk-city { animation: fade .35s ease forwards; animation-delay: var(--d); }
.pakmap.is-in .pk-lbl { animation: fade .5s ease forwards; animation-delay: var(--d); }
.pakmap.is-in .pk-city--major .pk-ping { animation: ring 3.2s ease-out infinite; animation-delay: var(--d); }
.pakmap__title { font: var(--h-weight) clamp(1.8rem, 1.3rem + 1.4vw, 2.5rem)/1.1 var(--display); letter-spacing: var(--h-track); }
.pakmap .lede { font-size: 1.05rem; }
.pakmap__stats { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; margin-top: 1.5rem; }
.pakmap__stats li { padding-top: .8rem; border-top: 3px solid var(--l1); }
.pakmap__stats li:nth-child(2) { border-color: var(--l2); } .pakmap__stats li:nth-child(3) { border-color: var(--l3); } .pakmap__stats li:nth-child(4) { border-color: var(--l4); }
.pakmap__stats b { display: block; font: var(--num-weight) clamp(1.7rem, 1.3rem + 1vw, 2.2rem)/1 var(--display); letter-spacing: var(--h-track); }
.pakmap__stats li > span { display: block; margin-top: .35rem; font-size: .9rem; color: var(--ink-2); }
.pakmap__cities { margin-top: 1.5rem; }
.pakmap__cities summary { cursor: pointer; font-weight: 600; color: var(--l2); }
.pakmap__cities p { margin-top: .75rem; font-size: .92rem; color: var(--ink-2); }

/* ---------- Journey inside contact ---------- */
.contact .journey { list-style: none; counter-reset: j; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; position: relative; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.contact .journey::before { content: ""; position: absolute; left: 20px; right: calc((100% - 4rem) / 5 - 20px); top: 17px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--l1), var(--l2), var(--l3)); transform-origin: left; }
.js .contact .journey::before { transform: scaleX(0); transition: transform 1.6s cubic-bezier(.55,.05,.35,1); }
.contact .journey.is-in::before { transform: scaleX(1); }
.contact .journey li { counter-increment: j; position: relative; }
.contact .journey li::before { content: counter(j); position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--panel); border: 4px solid var(--on-panel-strong); color: var(--on-panel-strong); font: 700 1rem var(--display); }
.contact .journey li:first-child::before { background: var(--accent); border-color: var(--accent); color: var(--panel); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); animation: ping2 2.4s ease-out infinite; }
@keyframes ping2 { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 18px transparent; } }
.contact .journey h3 { margin-top: 1rem; font: 600 1.25rem var(--display); color: var(--on-panel-strong); }
.contact .journey p { margin-top: .35rem; color: var(--on-panel-2); font-size: .95rem; }
.contact__sub { font: 600 1.15rem var(--display); color: var(--accent); }
.contact .desk { margin-top: 1rem; }

/* ---------- YULP page ---------- */
.yhero__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(2rem, 5vw, 4rem); align-items: end; position: relative; z-index: 1; }
.next { background: var(--panel-2); border: 1px solid rgba(255,255,255,.12); border-radius: calc(var(--radius) + 4px); padding: 1.75rem; color: var(--on-panel-strong); position: relative; overflow: hidden; }
.next::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--l1), var(--l2), var(--l3)); }
.next__tag { font-weight: 600; font-size: .85rem; color: var(--accent); }
.next__title { margin-top: .3rem; font: var(--h1-weight) 2.4rem/1 var(--display); letter-spacing: var(--h-track); }
.next__sub { margin-top: .35rem; color: var(--on-panel-2); font-size: .95rem; }
.next__dates { margin-top: 1rem; font: 600 1.15rem var(--display); }
.next__venue { color: var(--on-panel-2); font-size: .92rem; }
.count { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: 1.25rem; }
.count div { background: var(--panel); border-radius: calc(var(--radius) - 6px); padding: .7rem .4rem; text-align: center; }
.count b { display: block; font: var(--num-weight) 1.8rem/1 var(--display); color: var(--accent); font-variant-numeric: tabular-nums; }
.count span { display: block; margin-top: .3rem; font-size: .72rem; color: var(--on-panel-2); }
.next__btn { margin-top: 1.25rem; width: 100%; }
.years__next::before { background: transparent !important; border-style: dashed !important; border-color: var(--accent) !important; box-shadow: none !important; }
.years__next span { color: var(--accent); font-weight: 600; }
.years li:nth-last-child(2)::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent); }
.years ol { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
.yfacts { padding: 0; background: var(--panel-2); color: var(--on-panel-strong); }
.ribbon-list { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ribbon-list li { padding: 1.6rem 1.25rem; border-left: 1px solid rgba(255,255,255,.12); }
.ribbon-list li:first-child { border-left: 0; padding-left: 0; }
.ribbon-list b { display: block; font: var(--num-weight) clamp(1.8rem, 1.3rem + 1.4vw, 2.5rem)/1 var(--display); color: var(--accent); }
.ribbon-list li > span { display: block; margin-top: .4rem; color: var(--on-panel-2); font-size: .92rem; }
.value { padding: 2rem; }
.value__n { display: block; font: var(--num-weight) 2.6rem/1 var(--display); color: var(--c); letter-spacing: var(--h-track); }
.value p { margin-top: 1rem; }
.mm-wrap { margin: 0 0 2rem; }
.mm { width: 100%; height: auto; overflow: visible; }
.mm-line { fill: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.mm-theme { font: 600 17px var(--text); }
.mm-hub circle { fill: var(--panel); stroke: var(--accent); stroke-width: 5; }
.mm-hub__n { font: var(--num-weight) 46px var(--display); fill: var(--accent); }
.mm-hub__l { font: 600 13px var(--text); fill: var(--on-panel-2); }
.mm-stop circle { fill: var(--stn-fill); stroke: var(--ink); stroke-width: 3.5; }
.mm-stop text { font: 500 15px var(--text); fill: var(--ink); }
.js .mm-line { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.js .mm-hub, .js .mm-stop { opacity: 0; }
.mm-wrap.is-in .mm-line { animation: draw 1.8s cubic-bezier(.55,.05,.35,1) forwards; animation-delay: calc(var(--k) * .12s); }
.mm-wrap.is-in .mm-hub { animation: fade .6s ease 1.1s forwards; }
.mm-wrap.is-in .mm-stop { animation: fade .5s ease forwards; animation-delay: var(--d); }
.method__list { display: none; }
.ur { font-family: "NotoNastaliq", "Noto Nastaliq Urdu", serif; font-size: 1.15rem; line-height: 2.1; color: var(--c, var(--accent)); text-align: right; }
.join__card--cta .ur { color: var(--accent); font-size: 1.05rem; }
.join__steps { margin: .5rem 0 1.25rem 1.1rem; color: var(--on-panel-2); display: grid; gap: .3rem; }
.join__more { margin-top: 1.5rem; color: var(--ink-2); }
.join__more a { color: var(--l2); font-weight: 600; }

@media (max-width: 1080px) {
  .stair__groups { display: none; }
  .stair__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.6rem; column-gap: 14px; align-items: stretch; }
  .step { min-height: 0; }
  .stair__svg { display: none; }
  .stair__axis { display: none; }
  .wm-regions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yhero__grid { grid-template-columns: 1fr; }
  .next { max-width: 520px; }
}
@media (max-width: 900px) {
  .world, .pakmap { grid-template-columns: 1fr; }
  .contact .journey { grid-template-columns: 1fr; gap: 1.5rem; }
  .contact .journey::before { left: 17px; right: auto; top: 20px; bottom: 20px; width: 6px; height: auto; transform-origin: top; background: linear-gradient(180deg, var(--l1), var(--l2), var(--l3)); }
  .js .contact .journey::before { transform: scaleY(0); }
  .contact .journey.is-in::before { transform: scaleY(1); }
  .contact .journey li { padding-left: 3.75rem; }
  .contact .journey li::before { position: absolute; left: 0; top: 0; }
  .contact .journey h3 { margin-top: 0; }
  .ribbon-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ribbon-list li:nth-child(4) { border-left: 0; padding-left: 0; }
  .mm-wrap { display: none; }
  .method__list { display: grid; gap: 1.5rem; }
  .years ol { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
  .stair__steps { grid-template-columns: 1fr; }
  .showcase__seven { font-size: 16rem; top: -2rem; }
  .wm-regions { grid-template-columns: 1fr; }
  .ribbon-list { grid-template-columns: 1fr 1fr; }
  .ribbon-list li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .ribbon-list li:nth-child(4) { border-left: 1px solid rgba(255,255,255,.12); padding-left: 1.25rem; }
  .years ol { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .count b { font-size: 1.5rem; }
  .world__map { overflow-x: auto; margin: 0 -.5rem; padding: 0 .5rem; -webkit-overflow-scrolling: touch; }
  .wm { width: 680px; max-width: none; }
  .world__map::after { content: "Swipe to explore the map"; display: block; margin-top: .4rem; font-size: .8rem; color: var(--ink-2); }
  .pk-lbl { font-size: 34px; stroke-width: 8px; }
  .stair__steps { row-gap: 2.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .stair__train { display: none; }
}

/* flags beside each country name */
.wm-flags { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem .45rem; margin-top: .45rem; }
.wm-flags li { display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .55rem .22rem .3rem; border-radius: 999px; background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); font-size: .84rem; line-height: 1.2; }
.wm-flags .flag { width: 24px; height: 18px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.12); flex: none; }
.js .wm-flags li { opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1); transition-delay: calc(.3s + var(--k) * .04s); }
.is-in .wm-flags li { opacity: 1; transform: none; }
.wm-regions .wm-flags li { border-left: 0; padding: .22rem .55rem .22rem .3rem; }

/* ===== YULP signature page ===== */
.yhero { padding-bottom: 0; }
.yhero__word { position: absolute; right: -1vw; top: 2rem; font: 700 clamp(9rem, 22vw, 22rem)/.85 var(--display); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.07); pointer-events: none; z-index: 0; }
.yhero__title { font-size: clamp(3rem, 1.4rem + 5.6vw, 6.4rem); }
.yhero__stats { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid rgba(255,255,255,.14); position: relative; z-index: 1; }
.yhero__stats li { padding: 1.75rem 1.5rem 2.25rem; border-left: 1px solid rgba(255,255,255,.14); }
.yhero__stats li:first-child { border-left: 0; padding-left: 0; }
.yhero__stats b { display: block; font: var(--num-weight) clamp(2.4rem, 1.5rem + 2.6vw, 4rem)/1 var(--display); letter-spacing: var(--h1-track); color: var(--accent); }
.yhero__stats li > span { display: block; margin-top: .55rem; color: var(--on-panel-2); }
.js .yhero__stats li { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.yhero__stats.is-in li { opacity: 1; transform: none; }
.yhero__stats.is-in li:nth-child(2) { transition-delay: .1s; } .yhero__stats.is-in li:nth-child(3) { transition-delay: .2s; } .yhero__stats.is-in li:nth-child(4) { transition-delay: .3s; }

/* growth */
.growth-band { background: radial-gradient(60% 70% at 85% 10%, color-mix(in srgb, var(--l2) 22%, transparent), transparent 70%), var(--panel); }
.growth__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
.growth__total { text-align: right; }
.growth__total b { display: block; font: var(--num-weight) clamp(3.5rem, 2rem + 5vw, 6.5rem)/1 var(--display); letter-spacing: var(--h1-track); color: var(--accent); }
.growth__total span { color: var(--on-panel-2); }
.growth__bars { list-style: none; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: clamp(.4rem, 1.2vw, 1rem); height: 340px; align-items: end; border-bottom: 2px solid rgba(255,255,255,.25); }
.bar { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.bar__col { width: 100%; height: var(--h); border-radius: 10px 10px 0 0; background: linear-gradient(180deg, var(--l1), color-mix(in srgb, var(--l1) 35%, transparent)); transform-origin: bottom; }
.bar:nth-child(n+5) .bar__col { background: linear-gradient(180deg, var(--l2), color-mix(in srgb, var(--l2) 35%, transparent)); }
.bar:nth-child(n+8) .bar__col { background: linear-gradient(180deg, var(--l3), color-mix(in srgb, var(--l3) 35%, transparent)); }
.bar--peak .bar__col { background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent)) !important; }
.bar__v { margin-bottom: .45rem; font: var(--num-weight) clamp(.85rem, .6rem + .8vw, 1.25rem)/1 var(--display); color: var(--on-panel-strong); white-space: nowrap; }
.bar__y { position: absolute; bottom: -1.9rem; font-size: .85rem; color: var(--on-panel-2); }
.js .bar__col { transform: scaleY(0); transition: transform 1s cubic-bezier(.2,.8,.3,1); transition-delay: calc(var(--i) * .1s); }
.js .bar__v { opacity: 0; transition: opacity .5s ease; transition-delay: calc(.5s + var(--i) * .1s); }
.growth.is-in .bar__col { transform: scaleY(1); }
.growth.is-in .bar__v { opacity: 1; }
.growth-band .years { margin-top: 4rem; }

/* reach */
.reach { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(1rem, 2vw, 1.5rem); }
.reach li { background: var(--card); border-radius: var(--radius); padding: 1.5rem; border-top: 6px solid var(--c); box-shadow: var(--card-shadow); border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.reach b { display: block; font: var(--num-weight) clamp(2.2rem, 1.6rem + 1.6vw, 3rem)/1 var(--display); letter-spacing: var(--h-track); }
.reach li > span { display: block; margin-top: .5rem; color: var(--ink-2); }

/* women */
.women__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.women__ring { position: relative; margin: 0; max-width: 380px; width: 100%; justify-self: center; }
.women__ring svg { width: 100%; height: auto; transform: rotate(-90deg); }
.wr-bg { fill: none; stroke: color-mix(in srgb, var(--l2) 22%, transparent); stroke-width: 18; }
.wr-fg { fill: none; stroke: var(--l3); stroke-width: 18; stroke-linecap: round; stroke-dasharray: 60 100; stroke-dashoffset: 0; }
.js .wr-fg { stroke-dashoffset: 60; transition: stroke-dashoffset 1.8s cubic-bezier(.55,.05,.35,1) .2s; }
.women__grid.is-in .wr-fg { stroke-dashoffset: 0; }
.women__ring p { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.women__ring b { font: var(--num-weight) clamp(3.5rem, 2.4rem + 3vw, 5rem)/1 var(--display); letter-spacing: var(--h1-track); color: var(--l3); }
.women__ring p > span { color: var(--ink-2); font-weight: 600; margin-top: .3rem; }
.women__big { margin-top: 1.75rem; font-size: 1.15rem; color: var(--ink-2); }
.women__big b { display: block; font: var(--num-weight) clamp(2.6rem, 1.8rem + 2vw, 3.6rem)/1 var(--display); color: var(--ink); letter-spacing: var(--h-track); }

/* inside */
.inside { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.inside li { position: relative; padding: 1.75rem 1.5rem; border-radius: var(--radius); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 16%, var(--card)), var(--card) 70%); border: 1px solid color-mix(in srgb, var(--c) 35%, var(--line)); overflow: hidden; }
.inside b { display: block; font: var(--num-weight) clamp(2.6rem, 1.8rem + 2vw, 3.6rem)/1 var(--display); color: var(--c); letter-spacing: var(--h-track); }
.inside li > span { display: block; margin-top: .6rem; color: var(--ink-2); }
.js .inside li { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.inside.is-in li { opacity: 1; transform: none; }
.inside.is-in li:nth-child(2) { transition-delay: .1s; } .inside.is-in li:nth-child(3) { transition-delay: .2s; } .inside.is-in li:nth-child(4) { transition-delay: .3s; }

/* theme cards */
.theme-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.5rem); }
.theme-card { position: relative; background: var(--card); border-radius: var(--radius); padding: clamp(1.75rem, 3vw, 2.5rem); border: 1px solid var(--line); border-left: 10px solid var(--c); box-shadow: var(--card-shadow); overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
.theme-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -34px var(--c); }
.theme-card__n { font-size: .85rem; font-weight: 700; color: var(--c); }
.theme-card h3 { margin-top: .35rem; font: var(--h-weight) clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem)/1.1 var(--display); letter-spacing: var(--h-track); }
.theme-card__line { margin-top: .45rem; color: var(--ink-2); }
.theme-card__areas { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.theme-card__areas li { padding: .45rem .85rem; border-radius: 999px; font-size: .92rem; font-weight: 500; background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.js .theme-card { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; transition-delay: calc(var(--k) * .1s); }
.theme-cards.is-in .theme-card { opacity: 1; transform: none; }
.js .theme-card__areas li { opacity: 0; transition: opacity .4s ease; }
.theme-cards.is-in .theme-card__areas li { opacity: 1; transition-delay: .5s; }

/* ripple */
.ripple { background: radial-gradient(50% 70% at 70% 50%, color-mix(in srgb, var(--l1) 18%, transparent), transparent 70%), var(--panel); }
.ripple__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(2rem, 4vw, 3rem); align-items: center; }
.ripple .h2 { font-size: clamp(2.3rem, 1.4rem + 3vw, 3.8rem); }
.rp-wrap { margin: 0; }
.rp { width: 100%; height: auto; overflow: visible; }
.rp-ring { fill: none; stroke: var(--c); stroke-width: 3; opacity: .85; transform-box: fill-box; transform-origin: center; }
.rp-core { fill: var(--accent); }
.rp-core__t { font: 700 20px var(--display); fill: var(--panel); }
.rp-core__s { font: 600 12px var(--text); fill: var(--panel); }
.rp-wave { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: wave 3.9s ease-out infinite; }
@keyframes wave { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(6.8); } }
.rp-lbl line { stroke-width: 1.5; stroke-dasharray: 4 5; }
.rp-t { font: var(--num-weight) 31px var(--display); fill: var(--on-panel-strong); }
.rp-s { font: 500 19px var(--text); fill: var(--on-panel-2); }
.js .rp-ring { transform: scale(0); }
.js .rp-lbl { opacity: 0; }
.rp-wrap.is-in .rp-ring { transition: transform 1s cubic-bezier(.3,1.3,.5,1); transition-delay: calc(var(--k) * .35s); transform: scale(1); }
.rp-wrap.is-in .rp-lbl { transition: opacity .6s ease; transition-delay: calc(.4s + var(--k) * .35s); opacity: 1; }

/* alumni fields */
.fields-grid { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.75rem, 1.5vw, 1.25rem); }
.afield { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 1.25rem; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); box-shadow: var(--card-shadow); transition: transform .3s ease, border-color .3s ease; }
.afield:hover { transform: translateY(-4px); border-color: var(--l2); }
.afield svg { width: 40px; height: 40px; fill: none; stroke: var(--l2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.afield:nth-child(3n+2) svg { stroke: var(--l1); } .afield:nth-child(3n) svg { stroke: var(--l3); }
.afield span { font: 600 1.05rem/1.3 var(--display); }
.js .afield { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease, border-color .3s ease; transition-delay: calc(var(--k) * .06s); }
.fields-grid.is-in .afield { opacity: 1; transform: none; }

/* registration help */
.join__help { margin-top: 1.75rem; padding: 1.25rem 1.5rem; border-radius: var(--radius); background: var(--bg-alt); border: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; }
.join__help .ur { color: var(--ink); font-size: 1.1rem; }
.join__help a { color: var(--l2); font-weight: 600; }

@media (max-width: 1080px) {
  .fields-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reach, .inside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .yhero__stats { grid-template-columns: 1fr 1fr; }
  .yhero__stats li:nth-child(3) { border-left: 0; padding-left: 0; }
  .yhero__stats li { border-top: 1px solid rgba(255,255,255,.14); }
  .growth__head, .women__grid, .ripple__grid, .theme-cards { grid-template-columns: 1fr; }
  .growth__total { text-align: left; }
  .growth__bars { height: 260px; }
  .bar__v { font-size: .72rem; }
  .bar__y { font-size: .68rem; transform: rotate(-45deg); transform-origin: center; bottom: -2.2rem; }
}
@media (max-width: 600px) {
  .reach, .inside { grid-template-columns: 1fr; }
  .fields-grid { grid-template-columns: 1fr 1fr; }
  .rp { min-width: 0; }
  .rp-t { font-size: 34px; } .rp-s { font-size: 22px; }
  .yhero__word { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-wave { display: none; }
}

/* the year line now sits in the growth band, so it reveals on scroll */
.years.is-in ol::before { transition: transform 2s cubic-bezier(.55,.05,.35,1) .3s; transform: scaleX(1); }
.years.is-in li::before { transition: transform .4s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(.4s + var(--k) * .17s); transform: scale(1); }
.years.is-in li span { transition: opacity .4s ease; transition-delay: calc(.5s + var(--k) * .17s); opacity: 1; }

.value__ic { width: 46px; height: 46px; padding: 10px; border-radius: 14px; fill: none; stroke: var(--c); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; background: color-mix(in srgb, var(--c) 12%, transparent); box-sizing: content-box; display: block; }

.rp-crop { overflow: visible; }
.rp-list { display: none; list-style: none; }
@media (max-width: 900px) {
  .rp-crop .rp { width: 173%; max-width: none; display: block; }
  .rp-crop .rp-lbl { display: none; }
  .rp-crop { max-width: 460px; margin: 0 auto; overflow: hidden; }
  .rp-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; margin-top: 1.75rem; }
  .rp-list li { border-left: 3px solid var(--c); padding-left: .8rem; display: grid; gap: .2rem; }
  .rp-list b { font: var(--num-weight) 1.15rem/1.2 var(--display); color: var(--on-panel-strong); letter-spacing: var(--h-track); }
  .rp-list span { font-size: .86rem; color: var(--on-panel-2); line-height: 1.4; }
}
@media (max-width: 600px) {
  .people--2, .people--5 { grid-template-columns: 1fr 1fr; gap: .9rem; }
  .people--2 .person, .people--5 .person { padding: 1.1rem; }
  .people--2 .person__mono, .people--5 .person__mono { width: 56px; height: 56px; border-width: 4px; font-size: 1.05rem; }
  .people--2 .person h3, .people--5 .person h3 { font-size: 1rem; }
}

/* YULP mark */
.yhero__logo { margin: 1.4rem 0 0; line-height: 0; }
.yhero__logo img { display: block; width: clamp(300px, 42vw, 620px); height: auto; }
.yhero__claim { margin-top: 1.6rem; max-width: 30ch; font: var(--h-weight) clamp(1.45rem, 1rem + 1.3vw, 2.15rem)/1.22 var(--display); letter-spacing: var(--h-track); color: var(--on-panel-strong); }
.yhero__lede { margin-top: 1rem; }
.js .yhero__logo img { clip-path: inset(0 100% 0 0); }
.is-ready .yhero__logo img { clip-path: inset(0 0 0 0); transition: clip-path 1.5s cubic-bezier(.6,.05,.3,1) .15s; }
.yt-logo { margin: 1.2rem 0 0; line-height: 0; }
.yt-logo img { display: block; width: min(100%, 480px); height: auto; }
.yulp-teaser .yt-logo + .lede { margin-top: 1.5rem; }
.ycta__logo { width: clamp(240px, 30vw, 380px); height: auto; margin-bottom: 1.6rem; }
@media (prefers-reduced-motion: reduce) { .js .yhero__logo img { clip-path: none; } }

/* Part one / part two: keeps the 15-day programme apart from the figures since 2016 */
.chapter { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; padding-bottom: clamp(2rem, 4vw, 3rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--line); }
.chapter__num { display: flex; align-items: baseline; gap: .5rem; line-height: .8; }
.chapter__num b { font: var(--num-weight) clamp(5rem, 3rem + 7vw, 9.5rem)/.8 var(--display); letter-spacing: var(--h1-track); color: var(--c); }
.chapter__num > span { font: var(--h-weight) clamp(1.3rem, 1rem + 1vw, 2rem)/1 var(--display); color: var(--ink); }
.chapter__part { font-size: .9rem; font-weight: 600; color: var(--c); }
.chapter__title { margin-top: .2rem; font: var(--h-weight) clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem)/1.1 var(--display); letter-spacing: var(--h-track); }
.chapter__text { margin-top: .5rem; max-width: 56ch; color: var(--ink-2); }
.chapter--dark { border-bottom-color: rgba(255,255,255,.14); }
.chapter--dark .chapter__num > span, .chapter--dark .chapter__title { color: var(--on-panel-strong); }
.chapter--dark .chapter__text { color: var(--on-panel-2); }

.yhero__statcap { position: relative; z-index: 1; margin-top: clamp(2.5rem, 5vw, 4rem); font-size: .9rem; font-weight: 600; color: var(--on-panel-2); }
.yhero__statcap + .yhero__stats { margin-top: .9rem; }

.totals { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(1.75rem, 3vw, 2.25rem); border-top: 1px solid rgba(255,255,255,.14); }
.totals__cap { font-size: .9rem; font-weight: 600; color: var(--on-panel-2); }
.totals ul { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); margin-top: 1rem; }
.totals b { display: block; font: var(--num-weight) clamp(2.4rem, 1.6rem + 2.2vw, 3.6rem)/1 var(--display); letter-spacing: var(--h-track); color: var(--accent); }
.totals li > span { display: block; margin-top: .45rem; color: var(--on-panel-2); }
.js .totals li { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.totals.is-in li { opacity: 1; transform: none; }
.totals.is-in li:nth-child(2) { transition-delay: .1s; } .totals.is-in li:nth-child(3) { transition-delay: .2s; }

/* home: YULP boards, programme facts kept apart from figures since 2016 */
.yboards { display: grid; gap: .6rem; }
.board__cap { font-size: .88rem; font-weight: 600; color: var(--on-panel-2); }
.board__cap:not(:first-child) { margin-top: .9rem; }
.board--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 600px) {
  .chapter { grid-template-columns: 1fr; gap: .9rem; }
  .totals ul { grid-template-columns: 1fr; }
  .board--3 { grid-template-columns: 1fr 1fr 1fr; }
  .board--3 div { padding: 1rem .8rem; }
  .board--3 dd { font-size: 1.5rem; }
}

/* ===== From the YULP report: photos, objectives, topics, speakers, institutions ===== */
.photos { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; gap: clamp(.75rem, 1.6vw, 1.1rem); margin-top: clamp(2.5rem, 5vw, 4rem); height: clamp(380px, 46vw, 600px); }
.photo { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.photo--big { grid-row: 1 / span 2; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.2rem 1.1rem .9rem; font-size: .9rem; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.62)); }
.js .photos .photo { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.photos.is-in .photo { opacity: 1; transform: none; }
.photos.is-in .photo:nth-child(2) { transition-delay: .12s; } .photos.is-in .photo:nth-child(3) { transition-delay: .24s; }
.photo:hover img { transform: scale(1.04); }

.obj__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.obj__list { list-style: none; display: grid; gap: 1rem; }
.obj__list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; padding: 1.1rem 1.25rem; border-radius: var(--radius); background: var(--card); box-shadow: var(--card-shadow); border: 1px solid var(--line); }
.obj__list svg { width: 44px; height: 44px; padding: 10px; border-radius: 12px; box-sizing: border-box; fill: none; stroke: var(--c); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; background: color-mix(in srgb, var(--c) 13%, transparent); }
.obj__list span { font: var(--h-weight) 1.08rem/1.35 var(--display); letter-spacing: var(--h-track); }
.js .obj__list li { opacity: 0; transform: translateX(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * .1s); }
.obj__list.is-in li { opacity: 1; transform: none; }
.obj__list.is-in li:nth-child(2) { transition-delay: .1s; } .obj__list.is-in li:nth-child(3) { transition-delay: .2s; } .obj__list.is-in li:nth-child(4) { transition-delay: .3s; }

.topics { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem .55rem; }
.topics li { padding: .2rem 1rem; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink); }
.topics .t-ur { font-family: "NotoNastaliq", "Noto Nastaliq Urdu", serif; font-size: 1.02rem; line-height: 2.15; padding-top: 0; padding-bottom: .15rem; }
.topics .t-ur .saw { font-size: .95em; }
.topics .t-en { font-size: .95rem; line-height: 2.3; font-weight: 500; }
.topics li:nth-child(4n+1) { border-color: color-mix(in srgb, var(--l1) 45%, var(--line)); }
.topics li:nth-child(4n+2) { border-color: color-mix(in srgb, var(--l2) 45%, var(--line)); }
.topics li:nth-child(4n+3) { border-color: color-mix(in srgb, var(--l3) 45%, var(--line)); }
.topics li:nth-child(4n+4) { border-color: color-mix(in srgb, var(--l4) 45%, var(--line)); }
.js .topics li { opacity: 0; transform: scale(.94); transition: opacity .45s ease, transform .45s cubic-bezier(.3,1.4,.5,1); }
.topics.is-in li { opacity: 1; transform: none; }
.topics.is-in li:nth-child(n+8) { transition-delay: .15s; } .topics.is-in li:nth-child(n+16) { transition-delay: .3s; } .topics.is-in li:nth-child(n+24) { transition-delay: .45s; } .topics.is-in li:nth-child(n+32) { transition-delay: .6s; } .topics.is-in li:nth-child(n+40) { transition-delay: .75s; }

.speakers { padding-bottom: 0; }
.spf-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.5rem); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.spf { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 1.4rem; align-items: center; padding: 1.1rem; border-radius: calc(var(--radius) + 4px); background: var(--panel); color: var(--on-panel-strong); }
.spf img { width: 132px; height: 165px; object-fit: cover; border-radius: var(--radius); display: block; }
.spf__tag { font-size: .85rem; font-weight: 600; color: var(--accent); }
.spf h3 { margin-top: .35rem; font: var(--h-weight) clamp(1.3rem, 1rem + .9vw, 1.7rem)/1.15 var(--display); letter-spacing: var(--h-track); }
.spf p:last-child { margin-top: .45rem; color: var(--on-panel-2); }
.sp-grid { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(.8rem, 1.6vw, 1.25rem); }
.sp { background: var(--card); border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; box-shadow: var(--card-shadow); }
.sp img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--line); }
.sp h3 { margin: .75rem .8rem 0; font: 600 .95rem/1.25 var(--display); letter-spacing: var(--h-track); }
.sp p { margin: .3rem .8rem .9rem; font-size: .8rem; line-height: 1.4; color: var(--ink-2); }
.js .sp-grid .sp { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--k) * .06s); }
.sp-grid.is-in .sp { opacity: 1; transform: none; }
.js .sp-grid:not(.is-open) .sp--more { display: none; }
.sp-more__wrap { margin-top: clamp(1.5rem, 3vw, 2rem); text-align: center; }
.no-js .sp-more__wrap, html:not(.js) .sp-more__wrap { display: none; }

.from { margin-top: clamp(3rem, 6vw, 4.5rem); padding: clamp(2.25rem, 4vw, 3rem) 0 clamp(3rem, 6vw, 4.5rem); background: var(--panel); }
.from__title { font: var(--h-weight) clamp(1.3rem, 1rem + 1vw, 1.75rem)/1.2 var(--display); letter-spacing: var(--h-track); color: var(--on-panel-strong); margin-bottom: 1.5rem; }
.marquee { display: grid; gap: 1rem; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 70s linear infinite; }
.marquee__track--rev { animation-direction: reverse; animation-duration: 80s; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee ul { list-style: none; display: flex; gap: 1rem; padding-right: 1rem; }
.marquee li { flex: none; width: 168px; height: 104px; display: grid; place-items: center; padding: 12px 16px; border-radius: 14px; background: #fff; }
.marquee img { max-width: 100%; max-height: 78px; width: auto; height: auto; object-fit: contain; }
@keyframes marquee { to { transform: translateX(-50%); } }

.person__photo { display: block; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 4px solid var(--c); }

@media (max-width: 1080px) {
  .sp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .obj__grid, .spf-row { grid-template-columns: 1fr; }
  .photos { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; height: auto; }
  .photo--big { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
  .photo { aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) {
  .sp-grid { grid-template-columns: 1fr 1fr; }
  .spf { grid-template-columns: 96px minmax(0, 1fr); gap: 1rem; }
  .spf img { width: 96px; height: 120px; }
  .marquee li { width: 132px; height: 84px; }
  .marquee img { max-height: 60px; }
  .people--2 .person__photo, .people--5 .person__photo { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none; width: auto; }
  .marquee__track ul[aria-hidden] { display: none; }
  .marquee__track ul { flex-wrap: wrap; justify-content: center; }
  .photo img, .photo:hover img { transition: none; transform: none; }
}

@media (max-width: 600px) { .js .sp-grid:not(.is-open) .sp--mob { display: none; } }

/* ===== YULP: motion and life (round 4) ===== */

/* ---- Hero: a real photograph, slowly breathing, under a deep shade ---- */
.yhero--photo { min-height: min(100svh, 980px); display: flex; flex-direction: column; justify-content: flex-end; padding-top: clamp(3rem, 7vw, 6rem); background: var(--panel); isolation: isolate; }
.yhero--photo .sketch, .yhero--photo .yhero__word { display: none; }
.yhero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; opacity: 0; transition: opacity 2.2s ease; }
.yhero__img { position: absolute; inset: -4%; background: var(--ph-1) center 58% / cover no-repeat; transform-origin: 62% 60%; animation: kenburns 26s ease-in-out infinite alternate; }
.is-ready .yhero__media, html:not(.js) .yhero__media { opacity: 1; }
.yhero__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--panel) 97%, transparent) 0%, color-mix(in srgb, var(--panel) 92%, transparent) 38%, color-mix(in srgb, var(--panel) 62%, transparent) 60%, color-mix(in srgb, var(--panel) 30%, transparent) 100%),
    linear-gradient(0deg, var(--panel) 0%, color-mix(in srgb, var(--panel) 80%, transparent) 26%, transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 55%, transparent) 0%, transparent 24%); }
@keyframes kenburns { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.16) translate3d(-2.2%, -1.6%, 0); } }

/* one orchestrated load: crumbs, tag, logo wipe, claim, lede, buttons, card, figures */
.js .yhero [data-seq] { opacity: 0; transform: translateY(18px); }
.js .yhero.is-ready [data-seq] { opacity: 1; transform: none; transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); transition-delay: var(--s, 0s); }
.js .yhero aside[data-seq] { transform: translateX(28px); }
.js .yhero.is-ready aside[data-seq] { transform: none; }
.is-ready .yhero__logo img { transition-delay: .35s; transition-duration: 1.6s; }
.yhero__stats { border-top-color: rgba(255,255,255,.2); }
.yhero__stats li > span { color: color-mix(in srgb, var(--on-panel-strong) 78%, transparent); }
.yhero--photo .yhero__claim, .yhero--photo .yhero__lede { text-shadow: 0 1px 22px color-mix(in srgb, var(--panel) 85%, transparent); }
.yhero__statcap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.yhero__cap { font-weight: 500; font-size: .8rem; color: color-mix(in srgb, var(--on-panel-strong) 60%, transparent); }
.next { background: color-mix(in srgb, var(--panel-2) 82%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.dot--live { position: relative; }
.dot--live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent); animation: livepulse 2.2s ease-out infinite; }
@keyframes livepulse { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }

/* countdown digits roll when they change */
.count b { overflow: hidden; }
.count b.tick { animation: tick .5s cubic-bezier(.2,.8,.2,1); }
@keyframes tick { from { transform: translateY(-55%); opacity: .15; } to { transform: none; opacity: 1; } }

/* ---- Section rail: where you are on a long page ---- */
.rail { position: fixed; right: 18px; top: 50%; z-index: 45; display: flex; flex-direction: column; gap: 10px; transform: translate(12px, -50%); opacity: 0; pointer-events: none; transition: opacity .4s ease, transform .4s ease; }
.rail.is-on { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.rail a { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: .6rem; height: 26px; text-decoration: none; color: var(--on-panel-strong); }
.rail a::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--panel) 30%, #888); box-shadow: 0 0 0 3px color-mix(in srgb, #fff 70%, transparent); transition: transform .3s ease, background .3s ease; }
.rail a span { padding: .25rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; background: color-mix(in srgb, var(--panel) 90%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transform: translateX(6px); transition: opacity .3s ease, transform .3s ease; }
.rail a:hover span, .rail a:focus-visible span, .rail a.flash span { opacity: 1; transform: none; }
.rail a.is-here::after { background: var(--accent); transform: scale(1.35); }
@media (max-width: 1279px) { .rail { display: none; } }

/* ---- Chapters: the number counts, the days (or years) light up one by one ---- */
.pips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1.1rem; }
.pips li { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: .66rem; font-weight: 600; color: transparent; background: color-mix(in srgb, var(--c) 14%, transparent); transition: background .35s ease, color .35s ease, transform .45s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(.15s + var(--i) * .09s); }
.chapter.is-in .pips li, html:not(.js) .pips li { background: var(--c); color: var(--panel); transform: translateY(-2px); }
.pips--years li { width: auto; min-width: 46px; padding: 0 .4rem; height: 24px; border-radius: 999px; }
.chapter--dark .pips li { background: rgba(255,255,255,.12); }
.chapter--dark.is-in .pips li { background: var(--c); color: var(--panel); }
.js .chapter .chapter__num { opacity: 0; transform: scale(.92); transition: opacity .8s ease, transform 1s cubic-bezier(.2,.8,.2,1); }
.chapter.is-in .chapter__num { opacity: 1; transform: none; }

/* ---- Part two opener: a full-bleed photograph with slow parallax ---- */
.opener { position: relative; isolation: isolate; overflow: hidden; min-height: min(78svh, 760px); display: flex; align-items: flex-end; padding: clamp(5rem, 12vw, 9rem) 0 clamp(2.5rem, 5vw, 4rem); background: var(--panel); color: var(--on-panel-strong); }
.opener__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.opener__img { position: absolute; inset: -12% 0; background: var(--ph-2) center 45% / cover no-repeat; will-change: transform; }
.opener__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--panel) 2%, color-mix(in srgb, var(--panel) 72%, transparent) 38%, color-mix(in srgb, var(--panel) 15%, transparent) 75%), linear-gradient(90deg, color-mix(in srgb, var(--panel) 60%, transparent), transparent 70%); }
.opener__inner { position: relative; width: 100%; }
.chapter--open { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.opener__cap { margin-top: 1.5rem; font-size: .8rem; color: color-mix(in srgb, var(--on-panel-strong) 62%, transparent); }
.opener + .growth-band { padding-top: clamp(2rem, 4vw, 3rem); }

/* ---- Documentary: our own photo as the poster, a breathing play button ---- */
.video__poster { position: absolute; inset: 0; background: var(--ph-3) center / cover no-repeat; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.video__poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.05) 55%); }
.video__btn:hover .video__poster { transform: scale(1.05); }
.video__play { z-index: 1; }
.video__play::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--accent); animation: livepulse 2.4s ease-out infinite; }
.video__label { z-index: 1; }

/* ---- Method map: delegates keep moving along the theme lines ---- */
.mm-pulse { opacity: 0; stroke: var(--stn-fill); stroke-width: 2.5; transition: opacity .6s ease 2.4s; }
.mm-wrap.is-in .mm-pulse { opacity: 1; }

/* ---- World map: a light keeps travelling from every country to Pakistan ---- */
.wm-flow { fill: none; stroke: var(--rc); stroke-width: 3; stroke-linecap: round; stroke-dasharray: .035 .965; stroke-dashoffset: 0; opacity: 0; }
.world.is-in .wm-flow { animation: fade .5s ease forwards, flow var(--f, 3s) linear infinite; animation-delay: calc(var(--d) + 1.5s), calc(var(--d) + 1.5s); }
@keyframes flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 1; } }

/* ---- Session topics: one session after another lights up ---- */
.topics li { transition: background .5s ease, border-color .5s ease, color .5s ease, box-shadow .5s ease, transform .5s cubic-bezier(.3,1.5,.5,1), opacity .45s ease; }
.topics li.is-live { background: var(--accent); border-color: var(--accent); color: var(--panel); transform: translateY(-3px) scale(1.04); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--accent) 80%, transparent); }

/* ---- Values: one pledge at a time, the six always listed beside it ---- */
.pledge { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: stretch; }
.pledge__stage { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px; padding: clamp(1.75rem, 4vw, 3rem); border-radius: calc(var(--radius) + 6px); background: radial-gradient(80% 90% at 85% 15%, color-mix(in srgb, var(--c) 32%, transparent), transparent 70%), var(--panel); color: var(--on-panel-strong); transition: background .8s ease; }
.pledge__ic { position: absolute; right: -2%; top: -6%; width: 58%; height: auto; fill: none; stroke: var(--c); stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; opacity: .28; transition: stroke .8s ease; }
.pledge__text { position: relative; max-width: 16ch; font: var(--h1-weight) clamp(2rem, 1.2rem + 2.8vw, 3.6rem)/1.08 var(--display); letter-spacing: var(--h1-track); }
.pledge__text .w { display: inline-block; opacity: 0; transform: translateY(.45em); animation: wordin .7s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--w) * .07s); }
@keyframes wordin { to { opacity: 1; transform: none; } }
.pledge__bar { position: relative; margin-top: 1.75rem; height: 4px; border-radius: 2px; background: rgba(255,255,255,.14); overflow: hidden; }
.pledge__bar i { position: absolute; inset: 0; background: var(--c); transform-origin: left; transform: scaleX(0); }
.pledge.is-run .pledge__bar i { animation: bar 5.2s linear forwards; }
@keyframes bar { to { transform: scaleX(1); } }
.pledge__list { list-style: none; display: grid; gap: .6rem; align-content: center; }
.pledge__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; align-items: center; width: 100%; padding: .85rem 1rem; text-align: left; font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: border-color .3s ease, background .3s ease, transform .3s ease, box-shadow .3s ease; }
.pledge__item svg { width: 40px; height: 40px; padding: 9px; box-sizing: border-box; border-radius: 11px; fill: none; stroke: var(--c); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; background: color-mix(in srgb, var(--c) 12%, transparent); transition: background .3s ease, stroke .3s ease; }
.pledge__item span { font: var(--h-weight) 1.02rem/1.3 var(--display); letter-spacing: var(--h-track); }
.pledge__item:hover { border-color: var(--c); transform: translateX(-3px); }
.pledge__item[aria-pressed="true"] { border-color: var(--c); box-shadow: 0 12px 26px -18px color-mix(in srgb, var(--c) 90%, transparent); }
.pledge__item[aria-pressed="true"] svg { background: var(--c); stroke: var(--panel); }
.js .pledge__list li { opacity: 0; transform: translateX(16px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.pledge.is-in .pledge__list li { opacity: 1; transform: none; }
.pledge.is-in .pledge__list li:nth-child(2) { transition-delay: .07s; } .pledge.is-in .pledge__list li:nth-child(3) { transition-delay: .14s; }
.pledge.is-in .pledge__list li:nth-child(4) { transition-delay: .21s; } .pledge.is-in .pledge__list li:nth-child(5) { transition-delay: .28s; } .pledge.is-in .pledge__list li:nth-child(6) { transition-delay: .35s; }

/* ---- Alumni fields: icons draw themselves ---- */
.js .afield svg [pathLength] { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.fields-grid.is-in .afield svg [pathLength] { animation: draw 1.3s cubic-bezier(.55,.05,.35,1) forwards; animation-delay: calc(.35s + var(--k) * .09s); }
.afield:hover svg { transform: scale(1.08); }
.afield svg { transition: transform .4s cubic-bezier(.3,1.5,.5,1); }

/* ---- Speakers: a little life on hover ---- */
.sp { transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, opacity .5s ease; }
.sp img { transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .6s ease; }
.js .sp-grid .sp { transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1), translate .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease; transition-delay: calc(var(--k) * .06s), calc(var(--k) * .06s), 0s, 0s; }
.sp:hover { translate: 0 -5px; box-shadow: 0 22px 40px -26px rgba(0,0,0,.45); }
.sp:hover img { transform: scale(1.05); }
.sp { overflow: hidden; }
.sp > img { display: block; }
.spf img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.spf:hover img { transform: scale(1.04); }

/* ---- Closing: ripples spreading from the logo ---- */
.ycta { position: relative; overflow: hidden; isolation: isolate; padding-top: clamp(5rem, 10vw, 8rem); padding-bottom: clamp(5rem, 10vw, 8rem); }
.ycta__waves { position: absolute; left: 50%; top: 42%; width: 0; height: 0; z-index: -1; }
.ycta__waves i { position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0; animation: ripple 8s cubic-bezier(.2,.6,.3,1) infinite; }
.ycta__waves i:nth-child(2) { animation-delay: 2s; } .ycta__waves i:nth-child(3) { animation-delay: 4s; } .ycta__waves i:nth-child(4) { animation-delay: 6s; }
@keyframes ripple { 0% { transform: scale(.6); opacity: 0; } 12% { opacity: .38; } 100% { transform: scale(11); opacity: 0; } }

/* ---- Mobile ---- */
@media (max-width: 900px) {
  .yhero--photo { min-height: auto; }
  .yhero__img { background-position: 62% 60%; }
  .yhero__shade { background: linear-gradient(0deg, var(--panel) 10%, color-mix(in srgb, var(--panel) 90%, transparent) 50%, color-mix(in srgb, var(--panel) 62%, transparent) 72%, color-mix(in srgb, var(--panel) 35%, transparent) 100%); }
  .pledge { grid-template-columns: 1fr; }
  .pledge__stage { min-height: 280px; }
  .opener { min-height: 70svh; }
}
@media (max-width: 600px) {
  .pips li { width: 20px; height: 20px; border-radius: 6px; }
  .pips--years li { min-width: 40px; height: 20px; font-size: .6rem; }
  .yhero__cap { display: none; }
}

/* ---- Reduced motion: everything still, nothing hidden ---- */
@media (prefers-reduced-motion: reduce) {
  .yhero__img, .dot--live::after, .video__play::after, .ycta__waves i, .wm-flow, .mm-pulse { animation: none !important; }
  .ycta__waves, .wm-flow, .mm-pulse { display: none; }
  .js .yhero [data-seq], .js .chapter .chapter__num, .js .pledge__list li { opacity: 1; transform: none; }
  .pledge__text .w { animation: none; opacity: 1; transform: none; }
  .opener__img { transform: none !important; }
}

/* ---- Fifteen days, in pictures: a slow drifting reel ---- */
.reel-band { padding: clamp(3.5rem, 7vw, 6rem) 0; background: var(--panel); color: var(--on-panel-strong); overflow: hidden; }
.reel-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 3rem; align-items: end; margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.reel-head .h2 { color: var(--on-panel-strong); }
.reel-head .lede { color: var(--on-panel-2); max-width: 46ch; }
.reel { overflow: hidden; outline: none; }
.reel:focus-visible { box-shadow: inset 0 0 0 3px var(--accent); }
.reel__track { animation: marquee 110s linear infinite; }
.reel:hover .reel__track, .reel:focus-within .reel__track { animation-play-state: paused; }
.reel ul { list-style: none; display: flex; gap: 14px; padding-right: 14px; }
.reel li { flex: none; }
.reel figure { position: relative; margin: 0; height: clamp(240px, 30vw, 380px); border-radius: calc(var(--radius) + 2px); overflow: hidden; background: var(--panel-2); }
.reel img { height: 100%; width: auto; display: block; transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .6s ease; filter: saturate(.92); }
.reel figure:hover img { transform: scale(1.06); filter: saturate(1.05); }
.reel figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem 1rem .85rem; font-size: .88rem; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.66)); transform: translateY(6px); opacity: .92; transition: transform .5s ease, opacity .5s ease; }
.reel figure:hover figcaption { transform: none; opacity: 1; }
@media (max-width: 900px) { .reel-head { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .reel { overflow-x: auto; }
  .reel__track { animation: none; }
}

/* ---- Closing: the group photo, deep under the shade ---- */
.ycta--photo { background: linear-gradient(0deg, color-mix(in srgb, var(--panel) 90%, transparent), color-mix(in srgb, var(--panel) 82%, transparent)), var(--ph-4) center 40% / cover no-repeat, var(--panel); }

/* ===== Round 5: themes with their sessions, Pakistan districts, leadership ===== */

/* ---- Four themes: one wide row each, everything taught in it in view ---- */
.themes-x { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.tx { position: relative; display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 2fr); gap: clamp(1.5rem, 4vw, 3.5rem); padding: clamp(1.75rem, 3.5vw, 2.75rem); border-radius: calc(var(--radius) + 4px); background: var(--card); border: 1px solid var(--line); box-shadow: var(--card-shadow); overflow: hidden; }
.tx::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--c); transform-origin: top; }
.tx::after { content: ""; position: absolute; left: -10%; top: -40%; width: 45%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 14%, transparent), transparent); pointer-events: none; }
.tx__head { position: relative; z-index: 1; }
.tx__ic { width: 64px; height: 64px; padding: 15px; box-sizing: border-box; border-radius: 18px; fill: none; stroke: var(--c); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; background: color-mix(in srgb, var(--c) 13%, transparent); }
.tx h3 { margin-top: 1.1rem; font: var(--h-weight) clamp(1.8rem, 1.2rem + 1.7vw, 2.7rem)/1.05 var(--display); letter-spacing: var(--h-track); }
.tx__line { margin-top: .6rem; color: var(--ink-2); font-size: 1.05rem; max-width: 26ch; }
.tx__body { position: relative; z-index: 1; }
.tx__label { font-size: .88rem; font-weight: 600; color: var(--c); margin-bottom: .75rem; }
.tx__label + ul { margin-bottom: 1.6rem; }
.tx__body ul:last-child { margin-bottom: 0; }
.tx__areas { list-style: none; display: flex; flex-wrap: wrap; gap: .55rem; }
.tx__areas li { padding: .6rem 1.1rem; border-radius: 999px; font: 600 1.02rem/1.25 var(--display); letter-spacing: var(--h-track); color: var(--ink); background: color-mix(in srgb, var(--c) 14%, var(--card)); border: 1.5px solid color-mix(in srgb, var(--c) 45%, transparent); }
.tx__sessions { list-style: none; columns: 2; column-gap: 2rem; }
.tx__sessions li { break-inside: avoid; position: relative; padding: .45rem 0 .45rem 1.3rem; font-size: 1rem; line-height: 1.4; color: var(--ink); border-bottom: 1px dashed color-mix(in srgb, var(--ink) 14%, transparent); }
.tx__sessions li::before { content: ""; position: absolute; left: 0; top: .95rem; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.tx:hover { box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--c) 90%, transparent); }
.js .tx::before { transform: scaleY(0); }
.tx.is-in::before { transform: scaleY(1); transition: transform 1s cubic-bezier(.6,.05,.3,1); }
.js .tx__head { opacity: 0; transform: translateX(-16px); }
.tx.is-in .tx__head { opacity: 1; transform: none; transition: opacity .7s ease .1s, transform .8s cubic-bezier(.2,.7,.2,1) .1s; }
.js .tx__areas li, .js .tx__sessions li { opacity: 0; transform: translateY(8px); }
.tx.is-in .tx__areas li { opacity: 1; transform: none; transition: opacity .45s ease, transform .5s cubic-bezier(.3,1.4,.5,1); transition-delay: calc(.25s + var(--j) * .06s); }
.tx.is-in .tx__sessions li { opacity: 1; transform: none; transition: opacity .45s ease, transform .5s ease; transition-delay: calc(.65s + var(--j) * .045s); }

/* ---- Pakistan: 130 districts light up, outward from Islamabad ---- */
.pkd-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.pkd-map { margin: 0; }
.pk--districts { width: 100%; height: auto; display: block; }
.pk--districts .pk-base, .pk--districts .pk-prov, .pk--districts .pk-disputed { fill: color-mix(in srgb, var(--ink) 6%, var(--card)); }
.pk--districts .pk-prov.p2 { fill: color-mix(in srgb, var(--ink) 9%, var(--card)); }
.pk--districts .pk-prov.p4 { fill: color-mix(in srgb, var(--ink) 12%, var(--card)); }
.pkd-dot { fill: color-mix(in srgb, var(--ink) 22%, var(--card)); }
.pkd-lit { fill: var(--l1); stroke: var(--card); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.js .pkd-lit { transform: scale(0); }
.pkd-grid.is-in .pkd-lit { animation: pkdon .55s cubic-bezier(.3,1.6,.5,1) forwards; animation-delay: var(--d); }
@keyframes pkdon { to { transform: scale(1); } }
.pkd-ping { fill: none; stroke: var(--l1); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pkd-grid.is-in .pkd-ping { animation: ring 3.4s ease-out infinite; animation-delay: calc(var(--d) + .6s); }
.pkd-big { display: flex; align-items: baseline; gap: .6rem; margin-top: .4rem; line-height: .9; }
.pkd-big b { font: var(--num-weight) clamp(5rem, 3rem + 7vw, 9rem)/.85 var(--display); letter-spacing: var(--h1-track); color: var(--l1); }
.pkd-big > span { font: var(--h-weight) clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem)/1 var(--display); letter-spacing: var(--h-track); }
.pkd-line { margin-top: 1.1rem; font: var(--h-weight) clamp(1.25rem, 1rem + .8vw, 1.6rem)/1.25 var(--display); letter-spacing: var(--h-track); }
.pkd-copy .lede { margin-top: .8rem; }
.pkd-note { margin-top: 1.2rem; font-size: .82rem; color: var(--ink-2); }

/* ---- Leadership: President and Vice President in front, the team beside them ---- */
.leads-band { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(60% 80% at 85% 0%, color-mix(in srgb, var(--l2) 22%, transparent), transparent 70%), radial-gradient(50% 70% at 0% 100%, color-mix(in srgb, var(--l1) 18%, transparent), transparent 70%), var(--panel); }
.leads-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 3rem; align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
.leads-head .kicker { grid-column: 1 / -1; margin-bottom: -.4rem; }
.leads-head .h2 { color: var(--on-panel-strong); }
.leads-head .lede { color: var(--on-panel-2); }
.leads { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 2rem); }
.lead { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); align-items: end; border-radius: calc(var(--radius) + 6px); overflow: hidden; background: color-mix(in srgb, var(--panel-2) 85%, transparent); border: 1px solid rgba(255,255,255,.1); color: var(--on-panel-strong); }
.lead__photo { position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
.lead__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.lead__photo::after { content: ""; position: absolute; inset: 0; box-shadow: inset -60px 0 60px -40px color-mix(in srgb, var(--panel-2) 90%, transparent); }
.lead:hover .lead__photo img { transform: scale(1.05); }
.lead__text { padding: clamp(1.25rem, 3vw, 2.25rem); }
.lead__role { display: inline-block; padding: .35rem .8rem; border-radius: 999px; font-size: .85rem; font-weight: 700; color: var(--panel); background: var(--c); }
.lead h3 { margin-top: 1rem; font: var(--h1-weight) clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem)/1.08 var(--display); letter-spacing: var(--h-track); }
.lead__text > p:last-child { margin-top: .6rem; color: var(--on-panel-2); }
.js .lead { opacity: 0; transform: translateY(26px); }
.leads.is-in .lead { opacity: 1; transform: none; transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--k) * .15s); }
.js .lead .lead__photo img { clip-path: inset(100% 0 0 0); }
.leads.is-in .lead .lead__photo img { clip-path: inset(0 0 0 0); transition: clip-path 1.2s cubic-bezier(.6,.05,.3,1), transform 1.2s cubic-bezier(.2,.7,.2,1); transition-delay: calc(.2s + var(--k) * .15s), 0s; }
.crew { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem); margin-top: clamp(1.75rem, 3.5vw, 2.5rem); padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid rgba(255,255,255,.14); }
.crew__label { font-size: .9rem; font-weight: 600; color: var(--accent); margin-bottom: .9rem; }
.crew__list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.crew__list--small { grid-template-columns: 1fr 1fr; }
.crew .person { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); box-shadow: none; color: var(--on-panel-strong); padding: 1rem; }
.crew .person__mono { width: 52px; height: 52px; border-width: 3px; font-size: 1rem; color: var(--on-panel-strong); }
.crew .person h3 { font-size: .98rem; margin-top: .75rem; }
.crew .person p { color: var(--on-panel-2); font-size: .85rem; }
.crew .person--small { display: flex; align-items: center; gap: .75rem; padding: .75rem; }
.crew .person--small .person__mono { width: 40px; height: 40px; font-size: .85rem; }
.crew .person--small h3 { margin: 0; font-size: .92rem; }
.js .crew > div { opacity: 0; transform: translateY(14px); }
.crew.is-in > div { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }
.crew.is-in > div:nth-child(2) { transition-delay: .12s; }

@media (max-width: 1080px) {
  .lead { grid-template-columns: 1fr; }
  .lead__photo { aspect-ratio: 5 / 4; }
  .lead__photo img { object-position: center 25%; }
}
@media (max-width: 900px) {
  .tx { grid-template-columns: 1fr; }
  .tx__line { max-width: none; }
  .pkd-grid, .leads-head, .crew { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .tx__sessions { columns: 1; }
  .tx__areas li { font-size: .95rem; padding: .5rem .9rem; }
  .leads { grid-template-columns: 1fr; }
  .crew__list { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .js .tx::before, .js .tx__head, .js .tx__areas li, .js .tx__sessions li, .js .lead, .js .crew > div { opacity: 1; transform: none; }
  .js .lead .lead__photo img { clip-path: none; }
  .pkd-ping { display: none; }
  .js .pkd-lit { transform: none; }
}

.lead__tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.lead__tags span { padding: .25rem .65rem; border-radius: 999px; font-size: .85rem; color: var(--on-panel-strong); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); white-space: nowrap; }

/* ---- Leadership, round 6: guidance, programme leadership, core team with photos ---- */
.leads-label { margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 1rem; font-size: .95rem; font-weight: 600; color: var(--accent); display: flex; align-items: center; gap: .8rem; }
.leads-label::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.14); }
.leads-head + .leads-label { margin-top: 0; }
.lead--guide { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--panel-2)), color-mix(in srgb, var(--panel-2) 90%, transparent) 60%); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.lead--guide .lead__role { color: var(--panel); background: var(--accent); }
.lead__desc { margin-top: .6rem; color: var(--on-panel-2); line-height: 1.5; }
.crew-grid { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.75rem, 1.6vw, 1.25rem); }
.crew-card { border-radius: calc(var(--radius) + 2px); overflow: hidden; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--on-panel-strong); transition: translate .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, border-color .4s ease; }
.crew-card__photo { aspect-ratio: 4 / 5; overflow: hidden; }
.crew-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.crew-card__text { padding: 1rem 1.05rem 1.15rem; border-top: 3px solid var(--c); }
.crew-card h4 { font: var(--h-weight) 1.08rem/1.25 var(--display); letter-spacing: var(--h-track); }
.crew-card p { margin-top: .3rem; font-size: .88rem; font-weight: 600; color: var(--accent); }
.crew-card:hover { translate: 0 -5px; border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 24px 44px -30px rgba(0,0,0,.6); }
.crew-card:hover img { transform: scale(1.06); }
.js .crew-card { opacity: 0; transform: translateY(18px); }
.crew-grid.is-in .crew-card { opacity: 1; transform: none; transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1), translate .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, border-color .4s ease; transition-delay: calc(var(--k) * .08s), calc(var(--k) * .08s), 0s, 0s, 0s; }
@media (max-width: 1080px) { .crew-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .crew-grid { grid-template-columns: 1fr 1fr; } .crew-card h4 { font-size: .98rem; } }
@media (prefers-reduced-motion: reduce) { .js .crew-card { opacity: 1; transform: none; } }

/* ---- Registration: slim contact rows, the call to action takes the space ---- */
.join--compact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: stretch; }
.join__contacts { display: grid; gap: .75rem; align-content: start; }
.join__slim { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.2rem; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--c); box-shadow: var(--card-shadow); }
.join__slim .ur { font-size: .95rem; line-height: 1.9; text-align: left; color: var(--c); }
.join__slim h3 { font: var(--h-weight) 1.2rem/1.1 var(--display); letter-spacing: var(--h-track); }
.join__slim p:not(.ur) { margin-top: .2rem; font-size: .88rem; color: var(--ink-2); }
.join__slim a { display: inline-flex; align-items: center; gap: .45rem; flex: none; padding: .5rem .85rem; border-radius: 999px; font: 600 1rem var(--display); text-decoration: none; color: var(--ink); background: color-mix(in srgb, var(--c) 12%, transparent); transition: background .3s ease; }
.join__slim a:hover { background: color-mix(in srgb, var(--c) 24%, transparent); }
.join__slim svg { width: 16px; height: 16px; fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; }
@media (max-width: 900px) { .join--compact { grid-template-columns: 1fr; } }

/* ===== Home page, final pass ===== */
/* YULP section: the hands-raised photograph, deep under the shade, drifting with the scroll */
.yulp-teaser--photo { position: relative; overflow: hidden; isolation: isolate; }
.yt-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.yt-img { position: absolute; inset: -12% 0; background: var(--ph-1) center 55% / cover no-repeat; opacity: .62; filter: saturate(.95); will-change: transform; }
.yt-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--panel) 12%, color-mix(in srgb, var(--panel) 82%, transparent) 46%, color-mix(in srgb, var(--panel) 40%, transparent)); }
@media (max-width: 900px) { .yt-media::after { background: color-mix(in srgb, var(--panel) 84%, transparent); } }
.yulp-teaser--photo .board div { background: color-mix(in srgb, var(--panel) 88%, transparent); }

/* Leadership: portrait cards */
.hl { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.hl__card { border-radius: calc(var(--radius) + 4px); overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: var(--card-shadow); transition: translate .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease; }
.hl__photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--line); }
.hl__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.hl__text { padding: 1.1rem 1.2rem 1.3rem; border-top: 4px solid var(--c); }
.hl__role { display: inline-block; padding: .25rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 700; color: var(--ink); background: color-mix(in srgb, var(--c) 24%, transparent); }
.hl h3 { margin-top: .6rem; font: var(--h-weight) 1.2rem/1.25 var(--display); letter-spacing: var(--h-track); }
.hl__card:hover { translate: 0 -6px; box-shadow: 0 26px 48px -32px rgba(0,0,0,.45); }
.hl__card:hover img { transform: scale(1.05); }
.js .hl__card { opacity: 0; transform: translateY(20px); }
.hl.is-in .hl__card { opacity: 1; transform: none; transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1), translate .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease; transition-delay: calc(var(--k) * .1s), calc(var(--k) * .1s), 0s, 0s; }
@media (max-width: 900px) { .hl { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .js .hl__card { opacity: 1; transform: none; } .yt-img { transform: none !important; } }

/* ===== Mobile pass (9 Nov): everything below 900px / 600px ===== */
.saw { font-size: 1.3em; line-height: 1; }

@media (max-width: 900px) {
  /* home: the hub circle sits alone between the heading and the cards on a phone */
  .hub__core { display: none; }
  /* section rail never shows on phones */
  .rail { display: none !important; }
}

@media (max-width: 600px) {
  /* ---- home ---- */
  /* hero route map: zoom into where the lines meet and the vision, instead of a thin strip */
  .map { overflow: hidden; margin-left: -20px; margin-right: -20px; }
  .map__svg { width: 150%; max-width: none; margin-left: -50%; }
  .map .line-lbl { display: none; }
  /* programme cards: the big faint number no longer runs into the text */
  .step::after { font-size: 2.6rem; opacity: .7; }
  .step p { padding-right: 2.2rem; }
  /* contact rows: numbers on one line, comfortable to tap */
  .desk li { padding: .85rem 1rem; }
  .desk a { white-space: nowrap; font-size: 1rem; padding: .35rem 0; }
  .desk span { font-size: .85rem; }
  /* leadership portraits: two per row, smaller names */
  .hl__text { padding: .85rem .9rem 1rem; }
  .hl h3 { font-size: 1rem; }
  .hl__role { font-size: .8rem; }

  /* ---- YULP ---- */
  .yhero--photo .crumbs { display: none; }
  .count small, .count span:not([data-cd]) { font-size: .75rem; }
  /* fifteen day squares on one row */
  .pips { gap: 4px; }
  .pips li { width: calc((100% - 56px) / 15); min-width: 0; height: 20px; border-radius: 5px; font-size: 0; }
  .pips--years li { width: auto; min-width: 0; flex: 1 1 calc((100% - 40px) / 6); font-size: .72rem; height: 24px; }
  /* one programme at a glance: 2 x 2 instead of four tall cards */
  .inside { grid-template-columns: 1fr 1fr !important; gap: .75rem; }
  .inside li { padding: 1rem; }
  .inside b { font-size: 2.2rem; }
  /* year-by-year circles repeat the bar chart on a phone */
  .growth-band .years { display: none; }
  /* themes: sessions fold away behind a button */
  .tx { padding: 1.4rem 1.25rem 1.4rem 1.6rem; gap: 1rem; }
  .tx__ic { width: 52px; height: 52px; padding: 12px; }
  .tx h3 { margin-top: .8rem; }
  /* leadership: photo beside the text, half the height */
  .lead { grid-template-columns: 112px minmax(0, 1fr); align-items: stretch; }
  .lead__photo { aspect-ratio: auto; height: 100%; min-height: 150px; }
  .lead__photo::after { display: none; }
  .lead__text { padding: 1rem 1rem 1.1rem; }
  .lead h3 { font-size: 1.25rem; margin-top: .6rem; }
  .lead__role { font-size: .75rem; }
  .lead__desc { font-size: .85rem; }
  .lead__tags span { font-size: .72rem; padding: .2rem .5rem; }
  .crew-card__text { padding: .8rem .85rem .9rem; }
  .crew-card h4 { font-size: .95rem; }
  .crew-card p { font-size: .8rem; }
  .join__help a { display: inline-block; padding: .35rem 0; }
  /* reel: smaller photos on a phone */
  .reel figure { height: 220px; }
}

/* sessions list: a disclosure on phones, always open on larger screens */
.tx__sess > summary { list-style: none; cursor: pointer; }
.tx__sess > summary::-webkit-details-marker { display: none; }
.tx__sess > summary .tx__label { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.tx__toggle { display: none; }
@media (max-width: 600px) {
  .tx__sess > summary .tx__label { margin-bottom: 0; }
  .tx__toggle { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); font-size: 1rem; line-height: 1; transition: transform .3s ease; }
  .tx__sess[open] .tx__toggle { transform: rotate(45deg); }
  .tx__sess > summary { padding: .5rem 0; border-top: 1px dashed color-mix(in srgb, var(--ink) 16%, transparent); }
  .tx__sess[open] > summary { margin-bottom: .5rem; }
}

.yhero--photo .tag { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.55); }

/* ===== Header: registration button ===== */
.nav__reg { gap: .55rem; }
.nav__reg[aria-current] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.nav__live { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: ytlive 1.6s ease-in-out infinite; }
@keyframes ytlive { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.header__reg { display: none; }
@media (min-width: 901px) and (max-width: 1120px) {
  .nav ul { gap: .95rem; }
  .nav ul a { font-size: .97rem; }
  .nav .nav__reg { display: none; }
  .header__reg { display: inline-flex; order: 3; margin-left: 0; }
}
@media (max-width: 1120px) {
  .header__reg { align-items: center; gap: .45rem; min-height: 2.6rem; padding: .4rem .95rem; border-radius: var(--btn-radius); background: var(--btn-bg); color: var(--btn-fg); font: 600 .92rem var(--text); text-decoration: none; white-space: nowrap; }
}
@media (max-width: 900px) {
  .header__inner { gap: .5rem; }
  .header__reg { display: inline-flex; margin-left: auto; }
  .nav-toggle { margin-left: 0; }
  .nav .nav__reg { display: none; }
}
/* "اردو" pill on the English registration pages (the Urdu pages style their "English" pill in rtl.css) */
.nav__lang:lang(ur) { font-family: "NotoNastaliq", "Noto Nastaliq Urdu", serif; display: inline-block; font-size: .95rem; line-height: 1.55; padding: 0 .85rem .25rem !important; border: 1.5px solid var(--line); border-radius: 999px; background: none !important; }
.nav__lang:lang(ur):hover { border-color: var(--ink); }
.head--center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.head--center .h2, .head--center .lede { margin-inline: auto; }

/* ===== Page hero for the registration pages ===== */
.yhero--page { min-height: min(74svh, 700px); padding-bottom: clamp(3rem, 6vw, 5rem); }
.rhero__title { margin-top: 1.1rem; max-width: 15ch; font: var(--h1-weight) clamp(2.8rem, 1.3rem + 4.6vw, 5.4rem)/1 var(--display); letter-spacing: var(--h1-track); color: var(--on-panel-strong); text-shadow: 0 1px 24px color-mix(in srgb, var(--panel) 80%, transparent); }
.yhero--page .yhero__lede { max-width: 50ch; }
.yhero--page .btns { margin-top: 2rem; }
.yhero--short { min-height: min(60svh, 560px); }

/* three-step line in the hero */
.rsteps { list-style: none; display: flex; margin-top: 2.25rem; max-width: 620px; }
.rsteps li { flex: 1; position: relative; display: flex; flex-direction: column; gap: .6rem; font-size: .92rem; font-weight: 600; color: var(--on-panel-2); }
.rsteps li::before { content: ""; position: absolute; top: 17px; left: 46px; right: 8px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.24); transition: background-color .5s ease; }
.rsteps li:last-child::before { display: none; }
.rsteps li.is-done::before { background: var(--accent); }
.rsteps__n { position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 3px solid rgba(255,255,255,.45); background: var(--panel); color: #fff; font: var(--h-weight) 1.1rem/1 var(--display); transition: background-color .4s ease, border-color .4s ease, color .4s ease; }
.rsteps li.is-done .rsteps__n { background: var(--accent); border-color: var(--accent); color: var(--panel); }
.rsteps li.is-current { color: #fff; }
.rsteps li.is-current .rsteps__n { border-color: var(--accent); animation: stnring 2.2s ease-out infinite; }
@keyframes stnring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 12px transparent; } }

/* ===== Two ways to take part ===== */
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: clamp(2rem, 4vw, 3rem); }
.ways.is-in .sign { animation: hang .9s cubic-bezier(.3,1.4,.5,1) forwards; animation-delay: calc(var(--k) * .16s); }
.way { text-decoration: none; color: inherit; cursor: pointer; }
.way .sign__band { min-height: 210px; }
.way:focus-visible { outline: 3px solid var(--c); outline-offset: 4px; }
.way__next { margin-top: auto; padding-top: 1.1rem; border-top: 1px dashed var(--line); }
.way__next > p { font-size: .88rem; font-weight: 600; color: var(--ink-2); }
.way__steps { list-style: none; display: flex; margin-top: .75rem; }
.way__steps li { flex: 1; position: relative; padding-top: 24px; font-size: .9rem; font-weight: 600; color: var(--ink); line-height: 1.3; padding-right: .5rem; }
.way__steps li::before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; border: 4px solid var(--c); background: var(--stn-fill); z-index: 1; }
.way__steps li::after { content: ""; position: absolute; left: 16px; right: 0; top: 6px; height: 4px; background: var(--c); }
.way__steps li:last-child::after { display: none; }
.way__go { align-self: stretch; justify-content: center; gap: .5rem; margin-top: 1.25rem; min-height: 3.2rem; font-size: 1.05rem; background: var(--c); }
.way__chev { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.way:hover .way__go { filter: brightness(1.1); }
.way:hover .way__chev { transform: translateX(4px); }
.way__icon { width: 56px; height: 56px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.way__who { font-size: .92rem; font-weight: 600; color: rgba(255,255,255,.85); margin-bottom: .35rem; }
.way .sign__band h3 { font-size: clamp(2.2rem, 1.4rem + 2vw, 3.2rem); }
.way .svc__desc { font-size: 1.08rem; }
.way__facts { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.way__facts li { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .75rem; border-radius: 4px; background: var(--chip); font-size: .9rem; font-weight: 600; color: var(--ink); }
.way__facts li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.way__act { margin-top: auto; padding-top: 1.1rem; border-top: 1px dashed var(--line); display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; }
.way__act p { color: var(--ink-2); max-width: 30ch; }
.way__call { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.1rem; border-radius: var(--btn-radius); text-decoration: none; font: 600 1.1rem var(--text); color: var(--ink); background: color-mix(in srgb, var(--c) 14%, transparent); white-space: nowrap; transition: background-color .2s ease; }
.way__call:hover { background: color-mix(in srgb, var(--c) 26%, transparent); }
.way__call svg, .rhelp svg { width: 17px; height: 17px; fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; }

/* ===== Your route to YULP 2027 ===== */
.rroute { --gap: 1.5rem; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(2.5rem, 5vw, 4rem); }
.rroute__stop { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.rroute__stop--you { --c: var(--l2); }
.rroute__stop--us { --c: var(--l1); }
.rroute__stop::after { content: ""; position: absolute; top: 27px; left: 50%; width: calc(100% + var(--gap)); height: 6px; background: var(--l2); transform-origin: left center; z-index: 0; }
.rroute__stop:nth-child(n+3)::after { background: repeating-linear-gradient(90deg, var(--l1) 0 14px, transparent 14px 22px); }
.rroute__stop:last-child::after { display: none; }
.rroute__dot { position: relative; z-index: 1; width: 60px; height: 60px; border-radius: 50%; background: var(--stn-fill); border: 6px solid var(--c); display: grid; place-items: center; font: var(--h-weight) 1.5rem/1 var(--display); color: var(--ink); }
.rroute__stop:last-child .rroute__dot { background: var(--accent); border-color: var(--panel); }
.rroute__stop:last-child .rroute__dot::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 3px solid var(--accent); animation: termring 2.4s ease-out infinite; }
@keyframes termring { 0% { transform: scale(.75); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.rroute__who { margin-top: 1.1rem; display: inline-block; padding: .2rem .65rem; border-radius: 4px; font-size: .8rem; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.rroute__stop h3 { margin-top: .6rem; font: var(--h-weight) 1.45rem/1.15 var(--display); letter-spacing: var(--h-track); }
.rroute__stop p:not(.rroute__who) { margin-top: .5rem; color: var(--ink-2); font-size: .98rem; max-width: 26ch; }
.rroute__btns { margin-top: 2.75rem; justify-content: center; }
.js .rroute__dot { transform: scale(0); }
.js .rroute__stop::after { transform: scaleX(0); }
.js .rroute__stop h3, .js .rroute__stop p { opacity: 0; transform: translateY(8px); }
.rroute.is-in .rroute__dot { transform: scale(1); transition: transform .55s cubic-bezier(.3,1.6,.5,1) calc(var(--k) * .4s); }
.rroute.is-in .rroute__stop::after { transform: none; transition: transform .45s ease calc(var(--k) * .4s + .3s); }
.rroute.is-in .rroute__stop h3, .rroute.is-in .rroute__stop p { opacity: 1; transform: none; transition: opacity .5s ease calc(var(--k) * .4s + .15s), transform .5s ease calc(var(--k) * .4s + .15s); }

/* ===== Help and contacts ===== */
.rhelp { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.rhelp .join__contacts { display: grid; gap: .75rem; }
.join__slim .rhelp__mail { display: inline; padding: 0; background: none; border-radius: 0; font: 500 .9rem var(--text); color: var(--l2); text-decoration: underline; text-underline-offset: 2px; }
.rother { padding-block: clamp(3rem, 6vw, 4.5rem); }
.rother__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; flex-wrap: wrap; }
.rother .h2 { max-width: 24ch; color: var(--on-panel-strong); }
.rother .lede { margin-top: .6rem; }

/* ===== Information for online participation ===== */
.qa-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.qa { position: relative; }
.qa__line { position: absolute; left: 22px; top: 6px; bottom: 6px; width: 4px; border-radius: 2px; background: var(--line); }
.qa__fill { position: absolute; inset: 0; border-radius: 2px; background: var(--l1); transform-origin: top center; transform: scaleY(0); transition: transform .25s linear; }
.qa__groups, .qa__list { list-style: none; }
.qa__group + .qa__group { margin-top: 2.75rem; }
.qa__label { position: relative; margin-left: 72px; font: var(--h-weight) clamp(1.5rem, 1.2rem + .8vw, 1.9rem)/1.15 var(--display); letter-spacing: var(--h-track); }
.qa__label::before { content: ""; position: absolute; left: -60px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 4px; background: var(--panel); transform: rotate(45deg); box-shadow: 0 0 0 5px var(--bg); }
.qa__list { margin-top: 1.1rem; display: grid; gap: .9rem; }
.qa__item { position: relative; margin-left: 72px; padding: 1.25rem 1.5rem; border-radius: var(--radius); background: var(--card); box-shadow: var(--card-shadow); border-left: 4px solid transparent; transition: border-color .4s ease; }
.qa__item h3 { font: 600 1.14rem/1.35 var(--text); color: var(--ink); }
.qa__item p, .qa__a { margin-top: .45rem; color: var(--ink-2); }
.qa__a p { margin-top: 0; }
.qa__a a { color: var(--l2); font-weight: 600; white-space: nowrap; }
.qa__dot { position: absolute; left: -72px; top: 1.05rem; width: 48px; height: 48px; border-radius: 50%; background: var(--stn-fill); border: 4px solid var(--line); display: grid; place-items: center; font: var(--h-weight) 1.05rem/1 var(--display); color: var(--ink-2); transition: background-color .35s ease, border-color .35s ease, color .35s ease, transform .4s cubic-bezier(.3,1.6,.5,1); }
.qa__item.is-read { border-left-color: var(--l1); }
.qa__item.is-read .qa__dot { background: var(--l1); border-color: var(--l1); color: #fff; transform: scale(1.06); }
.qa-aside { position: sticky; top: calc(var(--head-h) + 1.5rem); }
.qa-card { position: relative; overflow: hidden; padding: 1.75rem; border-radius: calc(var(--radius) + 4px); background: var(--panel); color: var(--on-panel); }
.qa-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--l1), var(--l2), var(--l3)); }
.qa-card .kicker { color: var(--accent); }
.qa-facts { list-style: none; margin-top: 1rem; }
.qa-facts li { padding: .85rem 0; border-top: 1px solid rgba(255,255,255,.12); }
.qa-facts b { display: block; font: var(--h-weight) 1.35rem/1.15 var(--display); color: #fff; }
.qa-facts span { display: block; margin-top: .25rem; font-size: .92rem; color: var(--on-panel-2); }
.qa-meter { padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.12); }
.qa-meter p { font-size: .93rem; color: var(--on-panel-2); }
.qa-meter b { color: var(--accent); font-weight: 700; }
.qa-meter span { display: block; margin-top: .5rem; height: 6px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
.qa-meter i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s ease; }
.qa-card__btn { margin-top: 1.25rem; width: 100%; }

/* confirmation */
.confirm { display: flex; align-items: flex-start; gap: clamp(1.25rem, 3vw, 2.5rem); max-width: 900px; padding: clamp(1.75rem, 4vw, 3rem); border-radius: calc(var(--radius) + 4px); background: var(--card); border: 1px solid var(--line); box-shadow: var(--card-shadow); }
.confirm__stn { flex: none; position: relative; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--stn-fill); border: 6px solid var(--l2); font: var(--h-weight) 1.9rem/1 var(--display); color: var(--l2); transition: background-color .4s ease, border-color .4s ease, color .4s ease; }
.confirm.is-ok .confirm__stn { background: var(--l1); border-color: var(--l1); color: #fff; animation: okpop .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes okpop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.check { display: flex; align-items: flex-start; gap: .9rem; margin-top: 1.5rem; cursor: pointer; font-size: 1.12rem; font-weight: 600; color: var(--ink); }
.check input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.check__box { flex: none; width: 30px; height: 30px; margin-top: -1px; border-radius: 6px; border: 2.5px solid var(--ink-2); background: var(--card); display: grid; place-items: center; transition: background-color .25s ease, border-color .25s ease; }
.check__box svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .35s ease .05s; }
.check input:checked + .check__box { background: var(--l1); border-color: var(--l1); }
.check input:checked + .check__box svg { stroke-dashoffset: 0; }
.check input:focus-visible + .check__box { outline: 3px solid var(--l2); outline-offset: 3px; }
.check.is-shake .check__box { border-color: var(--l4); animation: shake .45s ease; }
@keyframes shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.confirm__row { margin-top: 1.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; }
.confirm__go { transition: opacity .35s ease, filter .35s ease, background-color .2s ease; }
.confirm__go.is-locked { opacity: .42; filter: grayscale(1); cursor: not-allowed; }
.confirm.is-ok .confirm__go { animation: unlock .7s cubic-bezier(.3,1.6,.5,1); }
@keyframes unlock { 0% { transform: scale(.94); } 50% { transform: scale(1.05); box-shadow: 0 0 0 8px color-mix(in srgb, var(--l1) 25%, transparent); } 100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; } }
.confirm__hint { font-size: .95rem; font-weight: 600; color: var(--l4); }
.confirm__text { margin-top: .9rem; font-size: 1.1rem; color: var(--ink-2); max-width: 46ch; }
.confirm--call .confirm__stn { border-color: var(--l1); color: var(--l1); }
.call__btn { gap: .6rem; min-height: 3.4rem; padding-inline: 1.6rem; font-size: 1.15rem; }
.call__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.confirm__alt { margin-top: 1.25rem; font-size: .95rem; color: var(--ink-2); }
.confirm__alt a { color: var(--l2); font-weight: 600; }
.confirm.is-ok .confirm__hint { color: var(--l1); }

/* ===== Registration form page ===== */
.rform { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.rform.is-in .sign { animation: hang .9s cubic-bezier(.3,1.4,.5,1) forwards; }
.rform__card .sign__band { min-height: 220px; }
.rform__card .sign__band h2 { font: var(--h-weight) clamp(1.9rem, 1.2rem + 1.6vw, 2.7rem)/1.05 var(--display); letter-spacing: var(--h-track); color: #fff; }
.rform__card .sign__body { gap: 1.1rem; padding: 1.75rem; }
.rform__btn { align-self: flex-start; min-height: 3.4rem; padding-inline: 1.6rem; font-size: 1.08rem; }
.rform__note { font-size: .95rem; color: var(--ink-2); }
.rform__note a { color: var(--l2); font-weight: 600; white-space: nowrap; }
.rform__note--warn { padding: .75rem 1rem; border-left: 4px solid var(--l3); border-radius: 4px; background: color-mix(in srgb, var(--l3) 10%, transparent); color: var(--ink); }
.nx__title { font: var(--h-weight) 1.75rem/1.1 var(--display); letter-spacing: var(--h-track); }
.nx__list { list-style: none; margin-top: 1.5rem; position: relative; }
.nx__list li { position: relative; padding: 0 0 1.6rem 2.6rem; }
.nx__list li:not(:last-child)::before { content: ""; position: absolute; left: 9px; top: 12px; height: 100%; width: 4px; background: repeating-linear-gradient(180deg, var(--l1) 0 9px, transparent 9px 15px); }
.nx__dot { position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; border: 4px solid var(--l1); background: var(--stn-fill); }
.nx__list li:last-child .nx__dot { background: var(--accent); border-color: var(--panel); }
.nx__list h3 { font: 600 1.08rem/1.3 var(--text); }
.nx__list p { margin-top: .2rem; color: var(--ink-2); }
.js .nx__list li { opacity: 0; transform: translateX(-10px); }
.nx.is-in .nx__list li { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--k) * .16s + .2s); }


@media (max-width: 1000px) {
  .qa-wrap { grid-template-columns: 1fr; }
  .qa-aside { position: static; order: -1; }
  .qa-meter, .qa-card__btn { display: none; }
  .qa-facts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.25rem; }
  .rform { grid-template-columns: 1fr; }
  .rhelp { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .ways { grid-template-columns: 1fr; }
  .rroute { --gap: 0px; grid-template-columns: 1fr; gap: 0; }
  .rroute__stop { align-items: flex-start; text-align: left; padding: 0 0 1.9rem 80px; min-height: 60px; }
  .rroute__dot { position: absolute; left: 0; top: 0; width: 54px; height: 54px; }
  .rroute__stop::after { top: 27px; left: 24px; width: 6px; height: 100%; transform-origin: center top; }
  .rroute__stop:nth-child(n+3)::after { background: repeating-linear-gradient(180deg, var(--l1) 0 12px, transparent 12px 20px); }
  .js .rroute__stop::after { transform: scaleY(0); }
  .rroute__who { margin-top: .25rem; }
  .rroute__btns { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .way__steps li { font-size: .82rem; }
  .call__btn { width: 100%; justify-content: center; }
  .yhero--page { min-height: auto; }
  .rsteps li { font-size: .82rem; }
  .rsteps__t { max-width: 11ch; }
  .way .sign__band { min-height: 0; }
  .qa__line { left: 16px; }
  .qa__label, .qa__item { margin-left: 50px; }
  .qa__label::before { left: -42px; width: 20px; height: 20px; margin-top: -10px; }
  .qa__dot { left: -50px; top: 1.1rem; width: 36px; height: 36px; border-width: 3px; font-size: .9rem; }
  .qa__item { padding: 1.1rem 1.15rem; }
  .qa-facts { grid-template-columns: 1fr; }
  .qa-facts li { padding: .7rem 0; }
  .confirm { flex-direction: column; }
  .confirm__stn { width: 60px; height: 60px; font-size: 1.5rem; }
  .confirm__go { width: 100%; }
  .rform__btn { width: 100%; justify-content: center; }
  .rother__inner .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__live, .rsteps li.is-current .rsteps__n, .rroute__stop:last-child .rroute__dot::after { animation: none !important; }
  .js .rroute__dot, .js .rroute__stop::after, .js .rroute__stop h3, .js .rroute__stop p, .js .nx__list li { transform: none !important; opacity: 1 !important; }
}
.yhero--page .yhero__shade::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--panel) 38%, transparent); }
.yhero--page .yhero__lede { color: color-mix(in srgb, var(--on-panel-strong) 88%, transparent); text-shadow: 0 1px 16px color-mix(in srgb, var(--panel) 90%, transparent); }
@media (max-width: 600px) { .rform__note a, .join__slim .rhelp__mail, .qa__item p a, .confirm__alt a { display: inline-block; padding: .45rem 0; } }
/* thank-you and not-found pages */
.simple-page { min-height: 62vh; padding-top: clamp(4rem, 10vw, 8rem); background: linear-gradient(rgba(24,36,31,.05) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(24,36,31,.05) 1px, transparent 1px) 0 0 / 32px 32px, var(--bg); }
.simple-page .h2 { max-width: 20ch; }
.simple-page .lede { margin-top: 1rem; max-width: 52ch; }

/* on-site pages */
.intro-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.intro-grid .lede a { color: var(--l2); font-weight: 600; }
.qa__steps { list-style: none; counter-reset: st; display: grid; gap: .55rem; margin-top: .2rem; }
.qa__steps li { counter-increment: st; position: relative; padding-left: 2.1rem; }
.qa__steps li::before { content: counter(st); position: absolute; left: 0; top: .05rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--l1) 14%, transparent); color: var(--l1); font: 700 .8rem/1 var(--text); }
.qa__steps b, .qa__list-in + * b { color: var(--ink); font-weight: 600; }
.qa__list-in { margin: .5rem 0 .6rem 1.2rem; display: grid; gap: .2rem; }
.hw { list-style: none; display: grid; gap: .9rem; margin-top: .4rem; padding-top: 1.1rem; border-top: 1px dashed var(--line); }
.hw li { display: flex; gap: .9rem; align-items: flex-start; }
.hw__n { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 3px solid var(--c); background: var(--stn-fill); font: var(--h-weight) .95rem/1 var(--display); color: var(--ink); }
.hw h3 { font: 600 1.05rem/1.3 var(--text); }
.hw p { margin-top: .15rem; color: var(--ink-2); font-size: .97rem; }
.nx__note { margin-top: .5rem; color: var(--ink-2); }
.nx__note a { color: var(--l2); font-weight: 600; }
@media (max-width: 860px) { .intro-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .intro-grid .lede a, .nx__note a { display: inline-block; padding: .4rem 0; } }

/* ===== Intro card above the questions (Urdu registration pages); logical properties, so it works in both directions ===== */
.rintro-band { padding-bottom: 0; }
.rintro { max-width: 960px; margin-inline: auto; padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: calc(var(--radius) + 4px); background: var(--card); box-shadow: var(--card-shadow); border-top: 6px solid var(--l2); }
.rintro__lead { font: var(--h-weight) clamp(1.3rem, 1rem + 1vw, 1.7rem)/1.6 var(--display); color: var(--ink); }
.rintro__ways { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 1.1rem; padding: 0; counter-reset: w; }
.rintro__ways--center { justify-content: center; margin: .4rem 0 .2rem; }
.rintro__ways li { counter-increment: w; display: inline-flex; align-items: center; gap: .55rem; padding: .3rem .95rem .3rem .45rem; padding-inline: .45rem .95rem; border-radius: 999px; background: var(--chip); font-weight: 600; color: var(--ink); }
.rintro__ways li::before { content: counter(w); flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--l1); color: #fff; font: 600 .85rem/1 "Figtree", sans-serif; }
.rintro__text { color: var(--ink-2); }
.rintro__text b { color: var(--ink); font-weight: 600; }
.rintro__note { margin-top: 1.25rem; padding: 1rem 1.25rem; border-inline-start: 4px solid var(--l3); border-radius: 4px; background: color-mix(in srgb, var(--l3) 10%, transparent); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.rintro__note p { margin: 0; flex: 1 1 20rem; color: var(--ink); }
.rintro__wa, .qa__num { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .45rem 1.05rem; border-radius: 999px; background: #1f8f4e; color: #fff !important; font: 600 1rem/1 "Figtree", sans-serif; text-decoration: none; white-space: nowrap; }
.rintro__wa svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.rintro__wa:hover, .qa__num:hover { background: #18733e; }
.qa__file { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border: 1.5px solid var(--line); border-radius: 6px; background: var(--bg-alt); white-space: normal !important; }
.way__head { font: 600 1.15rem/1.7 var(--text); color: var(--ink); margin: 0 0 .35rem; }
.rform__date { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .7rem; padding: .7rem 1rem; border-radius: 6px; background: var(--chip); color: var(--ink-2); }
.rform__date b { font: var(--num-weight, 600) 1.15rem/1.4 var(--display); color: var(--ink); }

/* "How do you want to take part?" strip above the two registration boxes (Urdu first page) */
.choose-strip { position: relative; overflow: hidden; margin-top: clamp(2rem, 4vw, 2.75rem); padding: 1.1rem 1.5rem 1rem; border-radius: var(--radius); background: var(--panel); text-align: center; box-shadow: var(--card-shadow); }
.choose-strip::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--l1), var(--l2), var(--l3), var(--l4)); }
.choose-strip__t { margin: 0; font: var(--h-weight) clamp(1.35rem, 1rem + 1vw, 1.8rem)/1.4 var(--display); color: #fff; }
.choose-strip + .ways { margin-top: 1.5rem; }
.ways--titled .sign__band { min-height: 150px; }
.ways--titled .sign__band h3 { font-size: clamp(1.4rem, 1rem + 1vw, 1.85rem); }
/* "go to the other way" button inside the intro note */
.rintro__go { display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; padding: .5rem 1.1rem; border-radius: var(--btn-radius, 6px); background: var(--c); color: #fff !important; font-weight: 600; text-decoration: none; white-space: nowrap; box-shadow: var(--card-shadow); transition: filter .2s ease; }
.rintro__go:hover { filter: brightness(1.1); }
.rintro__ic { width: 28px; height: 28px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rintro__chev { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transform: scaleX(-1); transition: transform .2s ease; }
.rintro__go:hover .rintro__chev { transform: scaleX(-1) translateX(-3px); }
/* questions without the side card (Urdu info pages) */
.qa-wrap--solo { grid-template-columns: minmax(0, 1fr); max-width: 1000px; margin-inline: auto; }
/* final-list dates under "Selection" on the on-site form page */
.nx__dates { list-style: none; margin: .55rem 0 0; padding: 0; display: grid; gap: .4rem; }
.nx__dates li { padding: .45rem .8rem; border-radius: 6px; background: var(--chip); color: var(--ink-2); }
.nx__dates b { color: var(--ink); font-weight: 600; white-space: nowrap; }
.nx__list .nx__dates li, [dir="rtl"] .nx__list .nx__dates li { padding: .45rem .8rem; margin: 0; }
.nx__list .nx__dates li::before, .nx__list .nx__dates li::after { content: none !important; }
/* countdown card on the registration page: on-site registration deadline */
.next__deadline { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.15); font-size: .92rem; color: var(--on-panel-2); }
.next__deadline b { display: block; margin-top: .15rem; font: var(--h-weight) 1.3rem/1.3 var(--display); color: var(--accent); }
.next__deadline + .count { margin-top: .9rem; }
h2.rintro__lead { margin: 0 0 .7rem; font-size: clamp(1.45rem, 1.1rem + 1vw, 1.9rem); }
@media (max-width: 900px) { .nav ul a.nav__lang { display: inline-block; margin-top: .7rem; border-bottom: 1.5px solid var(--line); } }

/* On-site form card: instructions first, download button after (10 Nov) */
.sign__body > .hw:first-child { margin-top: 0; padding-top: 0; border-top: 0; padding-bottom: 1.2rem; margin-bottom: .3rem; border-bottom: 1px dashed var(--line); }

/* ===== Urdu (RTL) pages: YULP 2027 registration =====
   Every rule is scoped to [dir="rtl"], so the English pages are untouched.
   (Some rules cover YULP-page parts, kept for a possible Urdu YULP page later.)
   Latin first in each stack so digits and English stay in the house fonts;
   every Urdu letter falls through to Nafees Nastaleeq. */
html[dir="rtl"] {
  --display: "DM Serif Display", "Nafees Nastaleeq", serif;
  --text: "Figtree", "Nafees Nastaleeq", serif;
  font-size: 15.5px;
}
[dir="rtl"] body { line-height: 1.95; }
[dir="rtl"] *, [dir="rtl"] *::before, [dir="rtl"] *::after { letter-spacing: 0 !important; }
[dir="rtl"] :is(h1, h2, h3, h4, .h2, .rhero__title, .yhero__claim, .next__title, .chapter__title, .pkd-big, .world__big, .way .sign__band h3,
  .rform__card .sign__band h2, .qa__label, .nx__title, .leads-label, .from__title, .pledge__text, .tx h3) { line-height: 1.65; }
[dir="rtl"] .lede, [dir="rtl"] p { line-height: 1.95; }
[dir="rtl"] .lede { font-size: 1.1rem; }
[dir="rtl"] .h2 { font-size: clamp(1.65rem, 1.15rem + 1.6vw, 2.45rem); }
[dir="rtl"] .rhero__title { font-size: clamp(2rem, 1.25rem + 2.6vw, 3.3rem); line-height: 1.5; max-width: 20ch; }
[dir="rtl"] .yhero__claim { font-size: clamp(1.3rem, 1rem + .9vw, 1.8rem); line-height: 1.7; }
[dir="rtl"] .kicker, [dir="rtl"] .tag { font-size: .95rem; line-height: 1.8; }
[dir="rtl"] .btn { line-height: 1.6; padding-top: .55rem; padding-bottom: .65rem; }
[dir="rtl"] .nav ul a { font-size: 1rem; line-height: 1.8; background-position: right bottom; }
[dir="rtl"] .nav { margin-left: 0; margin-right: auto; }
[dir="rtl"] .nav__lang { font-family: "Figtree", sans-serif; padding: .2rem .7rem !important; border: 1.5px solid var(--line); border-radius: 999px; background: none !important; }
[dir="rtl"] .nav__lang:hover { border-color: var(--ink); }
[dir="rtl"] .progress span { transform-origin: right; }
[dir="rtl"] .footer__legal, [dir="rtl"] .footer__motto { line-height: 2; }

/* hero and photo shades: the dark side follows the text to the right */
[dir="rtl"] .yhero__shade, [dir="rtl"] .opener__shade { transform: scaleX(-1); }
[dir="rtl"] .js .yhero aside[data-seq] { transform: translateX(-28px); }
[dir="rtl"] .js .yhero.is-ready aside[data-seq] { transform: none; }
[dir="rtl"] .yhero__stats li { border-left: 0; border-right: 1px solid rgba(255,255,255,.2); }
[dir="rtl"] .yhero__stats li:first-child { border-right: 0; padding-right: 0; padding-left: 1.5rem; }
[dir="rtl"] .yhero__stats li > span, [dir="rtl"] .next__venue, [dir="rtl"] .next__sub { line-height: 1.9; }
[dir="rtl"] .next::before { background: linear-gradient(270deg, var(--l1), var(--l2), var(--l3)); }
[dir="rtl"] .count span { font-size: .8rem; }
[dir="rtl"] .crumbs { line-height: 1.9; }

/* section rail on the left */
[dir="rtl"] .rail { right: auto; left: 18px; transform: translate(-12px, -50%); }
[dir="rtl"] .rail.is-on { transform: translate(0, -50%); }
[dir="rtl"] .rail a { flex-direction: row-reverse; justify-content: flex-end; }
[dir="rtl"] .rail a span { transform: translateX(-6px); line-height: 1.8; }
[dir="rtl"] .rail a:hover span, [dir="rtl"] .rail a:focus-visible span, [dir="rtl"] .rail a.flash span { transform: none; }

/* slideshows keep their left-moving loop */
[dir="rtl"] .marquee, [dir="rtl"] .reel { direction: ltr; }
[dir="rtl"] .marquee li, [dir="rtl"] .reel figcaption { direction: rtl; }
[dir="rtl"] .reel figcaption { line-height: 1.8; font-size: .9rem; }

/* maps and diagrams keep their own geometry */
[dir="rtl"] .world__map, [dir="rtl"] .mm-wrap, [dir="rtl"] .rp-crop, [dir="rtl"] .pkd-map { direction: ltr; }
[dir="rtl"] .mm text { font-family: "Nafees Nastaleeq", serif; }
[dir="rtl"] .mm .mm-theme { font-size: 22px; }
[dir="rtl"] .mm .mm-stop text { font-size: 17px; }
[dir="rtl"] .mm .mm-hub__l { font-size: 16px; }
/* ripple: rings only, with the figures listed beneath (as on phones) */
[dir="rtl"] .rp-crop { max-width: 460px; margin: 0 auto; overflow: hidden; }
[dir="rtl"] .rp-crop .rp { width: 173%; max-width: none; display: block; }
[dir="rtl"] .rp-crop .rp-lbl { display: none; }
[dir="rtl"] .rp-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.5rem; margin-top: 1.75rem; }
[dir="rtl"] .rp-list li { display: grid; gap: .1rem; }
[dir="rtl"] .rp-list b { font: var(--num-weight) 1.15rem/1.6 var(--display); color: var(--on-panel-strong); }
[dir="rtl"] .rp-list span { font-size: .95rem; color: var(--on-panel-2); line-height: 1.8; }
[dir="rtl"] .rp .rp-t { font-size: 25px; }
[dir="rtl"] .rp .rp-s { font-size: 19px; }
[dir="rtl"] .rp .rp-core__t, [dir="rtl"] .rp .rp-core__s { font-family: "Nafees Nastaleeq", serif; }
[dir="rtl"] .pkd-map text { font-family: "Nafees Nastaleeq", serif; font-size: 16px; }
[dir="rtl"] .wm-regions li { border-left: 0; padding-left: 0; border-right: 4px solid var(--rc); padding-right: .9rem; }
[dir="rtl"] .wm-regions .wm-flags li { border-right: 0; padding: .22rem .3rem .22rem .55rem; }
[dir="rtl"] .wm-flags li { line-height: 1.9; }

/* growth chart reads right to left, from 2016 */
[dir="rtl"] .years ol::before { background: linear-gradient(270deg, var(--l1), var(--l2), var(--l3), var(--l4)); }
[dir="rtl"] .years li::before { left: auto; right: 0; }
[dir="rtl"] .growth__total { text-align: left; }

/* themes */
[dir="rtl"] .tx::before { left: auto; right: 0; }
[dir="rtl"] .tx::after { left: auto; right: -10%; }
[dir="rtl"] .tx { padding-left: clamp(1.5rem, 3vw, 2.5rem); padding-right: clamp(1.75rem, 3.4vw, 2.75rem); }
[dir="rtl"] .tx__sessions li { padding-left: 0; padding-right: 1.1rem; }
[dir="rtl"] .tx__sessions li::before { left: auto; right: 0; }
[dir="rtl"] .js .tx__head { transform: translateX(16px); }
[dir="rtl"] .tx__areas li, [dir="rtl"] .tx__sessions li { line-height: 1.9; }

/* method list, values, objectives */
[dir="rtl"] .method__ways { padding-left: 0; padding-right: 1.75rem; }
[dir="rtl"] .method__ways::before { left: auto; right: .45rem; }
[dir="rtl"] .method__ways li::before { left: auto; right: -1.6rem; }
[dir="rtl"] .pledge__ic { right: auto; left: -2%; }
[dir="rtl"] .pledge__bar i { transform-origin: right; }
[dir="rtl"] .pledge__item { text-align: right; line-height: 1.9; }
[dir="rtl"] .pledge__item:hover { transform: translateX(3px); }
[dir="rtl"] .js .pledge__list li { transform: translateX(-16px); }
[dir="rtl"] .pledge__text { line-height: 1.7; }
[dir="rtl"] .js .obj__list li { transform: translateX(-18px); }
[dir="rtl"] .rp-list li { border-left: 0; padding-left: 0; border-right: 3px solid var(--c); padding-right: .8rem; }
[dir="rtl"] .video__label { left: auto; right: 1rem; }

/* registration pages */
[dir="rtl"] .join__slim { border-left: 1px solid var(--line); border-right: 5px solid var(--c); }
[dir="rtl"] .join__slim h3 { font-size: 1.15rem; }
[dir="rtl"] .join__slim a, [dir="rtl"] .way__call { font-family: "Figtree", sans-serif; }
[dir="rtl"] .rform__note--warn { border-left: 0; border-right: 4px solid var(--l3); }
[dir="rtl"] .rsteps li::before { left: 8px; right: 46px; }
[dir="rtl"] .way__steps li { padding-right: 0; padding-left: .5rem; }
[dir="rtl"] .way__steps li::before { left: auto; right: 0; }
[dir="rtl"] .way__steps li::after { left: 0; right: 16px; }
[dir="rtl"] .way:hover .way__chev { transform: translateX(-4px); }
[dir="rtl"] .way .sign__band h3 { font-size: clamp(1.8rem, 1.2rem + 1.5vw, 2.4rem); }
[dir="rtl"] .qa__line { left: auto; right: 22px; }
[dir="rtl"] .qa__label { margin-left: 0; margin-right: 72px; }
[dir="rtl"] .qa__label::before { left: auto; right: -60px; }
[dir="rtl"] .qa__item { margin-left: 0; margin-right: 72px; border-left: 0; border-right: 4px solid transparent; }
[dir="rtl"] .qa__item.is-read { border-right-color: var(--l1); }
[dir="rtl"] .qa__dot { left: auto; right: -72px; }
[dir="rtl"] .qa__item h3 { font-size: 1.05rem; line-height: 1.8; }
[dir="rtl"] .qa__steps li { padding-left: 0; padding-right: 2.1rem; }
[dir="rtl"] .qa__steps li::before { left: auto; right: 0; top: .35rem; }
[dir="rtl"] .qa__list-in { margin: .5rem 1.2rem .6rem 0; }
[dir="rtl"] .nx__list li { padding: 0 2.6rem 1.6rem 0; }
[dir="rtl"] .nx__dot { left: auto; right: 0; top: .45rem; }
[dir="rtl"] .nx__list li:not(:last-child)::before { left: auto; right: 9px; top: .9rem; }
[dir="rtl"] .hw__n { margin-top: .3rem; }
[dir="rtl"] .check { line-height: 1.9; }
[dir="rtl"] .check__box { margin-top: .35rem; }
[dir="rtl"] .qa-facts b { line-height: 1.6; }
[dir="rtl"] .confirm__hint { line-height: 1.9; }

@media (max-width: 1120px) {
  [dir="rtl"] .header__reg { margin-left: 0; }
}
@media (max-width: 900px) {
  [dir="rtl"] .header__reg { margin-left: 0; margin-right: auto; }
  [dir="rtl"] .nav { margin-right: 0; }
}
@media (max-width: 600px) {
  html[dir="rtl"] { font-size: 15px; }
  [dir="rtl"] .qa__line { right: 16px; }
  [dir="rtl"] .qa__label, [dir="rtl"] .qa__item { margin-left: 0; margin-right: 50px; }
  [dir="rtl"] .qa__label::before { left: auto; right: -42px; }
  [dir="rtl"] .qa__dot { left: auto; right: -50px; }
  [dir="rtl"] .yhero__stats li:nth-child(3) { border-right: 0; padding-right: 0; }
  [dir="rtl"] .rp-list li { border-right: 3px solid var(--c); }
}

/* calmer sizes for long Urdu text */
[dir="rtl"] .chapter__title { font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.3rem); }
[dir="rtl"] .chapter__text, [dir="rtl"] .tx__line { font-size: 1rem; }
[dir="rtl"] .tx h3 { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); }
[dir="rtl"] .pledge__text { font-size: clamp(1.45rem, 1rem + 1.2vw, 2.1rem); }
[dir="rtl"] .leads-head .h2, [dir="rtl"] .ycta .h2 { font-size: clamp(1.65rem, 1.15rem + 1.6vw, 2.45rem); }
[dir="rtl"] .lead h3 { font-size: clamp(1.3rem, 1rem + .8vw, 1.7rem); }
[dir="rtl"] .qa__label { font-size: clamp(1.3rem, 1.05rem + .6vw, 1.6rem); }
[dir="rtl"] .nx__title { font-size: 1.45rem; }
[dir="rtl"] .rform__card .sign__band h2 { font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.2rem); }

/* intro card, contact headings and form dates on the Urdu pages */
[dir="rtl"] .rintro__lead { line-height: 1.9; }
[dir="rtl"] .rintro__text, [dir="rtl"] .rintro__note p { line-height: 2; }
[dir="rtl"] .rintro__ways li { line-height: 1.9; }
[dir="rtl"] .way__head { line-height: 1.9; font-size: 1.12rem; }
[dir="rtl"] .rform__date { line-height: 1.9; }
[dir="rtl"] #help-title { line-height: 1.8; }
[dir="rtl"] .choose-strip__t { line-height: 1.85; }
[dir="rtl"] .ways--titled .sign__band h3 { font-size: clamp(1.3rem, 1rem + .9vw, 1.7rem); line-height: 1.85; }
[dir="rtl"] .rintro__go { line-height: 1.8; font-size: 1.05rem; }
[dir="rtl"] .rintro__chev { transform: none; }
[dir="rtl"] .rintro__go:hover .rintro__chev { transform: translateX(-3px); }
[dir="rtl"] .nx__dates li { line-height: 1.9; }
[dir="rtl"] .next__deadline { line-height: 1.9; }
[dir="rtl"] .next__deadline b { line-height: 1.6; }


.sketch--minaret { right: -20px; bottom: 0; width: 360px; height: 560px; opacity: .55; }
.boards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; position: relative; z-index: 1; }
.sign { background: var(--card); border-radius: 8px; overflow: hidden; box-shadow: var(--card-shadow); display: flex; flex-direction: column; transition: transform .35s ease, box-shadow .35s ease; transform-origin: top center; }
.sign:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(0,0,0,.45); }
.sign__band { position: relative; background: var(--c); color: #fff; padding: 1.4rem 1.5rem 1.3rem; min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; overflow: hidden; }
.sign__band::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 10px, transparent 10px 20px); transform: translateX(-100%); transition: transform .8s ease; }
.sign:hover .sign__band::after { transform: none; }
.sign__band .svc__icon { width: 48px; height: 48px; color: #fff; }
.sign__band h3 { font-size: clamp(1.8rem, 1.2rem + 1.4vw, 2.5rem); color: #fff; line-height: 1; position: relative; z-index: 1; }
.sign__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.sign .svc__fact { margin-top: auto; padding-top: .9rem; border-top: 1px dashed var(--line); }
.sign .svc__fact b { font-size: 1.5rem; }
.js .sign { opacity: 0; transform: translateY(-26px) rotate(-2deg); }
.boards.is-in .sign { animation: hang .9s cubic-bezier(.3,1.4,.5,1) forwards; animation-delay: calc(var(--k) * .14s); }
@keyframes hang { 0% { opacity: 0; transform: translateY(-26px) rotate(-3deg); } 55% { opacity: 1; transform: translateY(4px) rotate(1.5deg); } 80% { transform: translateY(-1px) rotate(-.6deg); } 100% { opacity: 1; transform: none; } }
@media (max-width: 1080px) { .boards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .boards { grid-template-columns: 1fr; } .sketch--minaret { display: none; } }

.hero { background:
  linear-gradient(rgba(24,36,31,.06) 1px, transparent 1px) 0 0 / 32px 32px,
  linear-gradient(90deg, rgba(24,36,31,.06) 1px, transparent 1px) 0 0 / 32px 32px,
  linear-gradient(rgba(24,36,31,.08) 1px, transparent 1px) 0 0 / 160px 160px,
  linear-gradient(90deg, rgba(24,36,31,.08) 1px, transparent 1px) 0 0 / 160px 160px, #EEF1EC; }
.hero h1 { font-size: clamp(3.2rem, 1.6rem + 6vw, 7rem); line-height: .95; }
.hero h1 span + span { font-style: italic; color: var(--l1); }
.sketch--skyline { left: 0; right: 0; bottom: 0; width: 100%; height: 260px; opacity: .28; }
.sketch--books { right: 3%; top: 2.5rem; width: 440px; opacity: .2; }
.track { stroke-width: 6; }
.ribbon b, .stat b, .board dd, .road li b, .method__big b { letter-spacing: 0; }
.depth .n, .journey li::before { font-family: var(--text); font-weight: 600; }
.route h3, .join__card h3 { font-size: 2rem; }
.vision { background: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 40px 40px, var(--panel); }
.vision__title { font-style: italic; }
.yulp-teaser::before, .yhero::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2780%27%20height%3D%2780%27%20viewBox%3D%270%200%2080%2080%27%3E%3Cpath%20d%3D%27M40.0%2C15.2%20L47.3%2C22.5%20L57.5%2C22.5%20L57.5%2C32.7%20L64.8%2C40.0%20L57.5%2C47.3%20L57.5%2C57.5%20L47.3%2C57.5%20L40.0%2C64.8%20L32.7%2C57.5%20L22.5%2C57.5%20L22.5%2C47.3%20L15.2%2C40.0%20L22.5%2C32.7%20L22.5%2C22.5%20L32.7%2C22.5Z%27%20fill%3D%27none%27%20stroke%3D%27%23E9B949%27%20stroke-opacity%3D%27.14%27%20stroke-width%3D%271%27/%3E%3Cpath%20d%3D%27M0.0%2C-24.8%20L7.3%2C-17.5%20L17.5%2C-17.5%20L17.5%2C-7.3%20L24.8%2C0.0%20L17.5%2C7.3%20L17.5%2C17.5%20L7.3%2C17.5%20L0.0%2C24.8%20L-7.3%2C17.5%20L-17.5%2C17.5%20L-17.5%2C7.3%20L-24.8%2C0.0%20L-17.5%2C-7.3%20L-17.5%2C-17.5%20L-7.3%2C-17.5Z%20M80.0%2C-24.8%20L87.3%2C-17.5%20L97.5%2C-17.5%20L97.5%2C-7.3%20L104.8%2C0.0%20L97.5%2C7.3%20L97.5%2C17.5%20L87.3%2C17.5%20L80.0%2C24.8%20L72.7%2C17.5%20L62.5%2C17.5%20L62.5%2C7.3%20L55.2%2C0.0%20L62.5%2C-7.3%20L62.5%2C-17.5%20L72.7%2C-17.5Z%20M0.0%2C55.2%20L7.3%2C62.5%20L17.5%2C62.5%20L17.5%2C72.7%20L24.8%2C80.0%20L17.5%2C87.3%20L17.5%2C97.5%20L7.3%2C97.5%20L0.0%2C104.8%20L-7.3%2C97.5%20L-17.5%2C97.5%20L-17.5%2C87.3%20L-24.8%2C80.0%20L-17.5%2C72.7%20L-17.5%2C62.5%20L-7.3%2C62.5Z%20M80.0%2C55.2%20L87.3%2C62.5%20L97.5%2C62.5%20L97.5%2C72.7%20L104.8%2C80.0%20L97.5%2C87.3%20L97.5%2C97.5%20L87.3%2C97.5%20L80.0%2C104.8%20L72.7%2C97.5%20L62.5%2C97.5%20L62.5%2C87.3%20L55.2%2C80.0%20L62.5%2C72.7%20L62.5%2C62.5%20L72.7%2C62.5Z%27%20fill%3D%27none%27%20stroke%3D%27%23E9B949%27%20stroke-opacity%3D%27.14%27%20stroke-width%3D%271%27/%3E%3C/svg%3E"); background-size: 80px 80px; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 80%); mask-image: linear-gradient(90deg, transparent 30%, #000 80%); }
.lines-band::before { content: ""; position: absolute; left: -100px; bottom: -120px; width: 520px; height: 520px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2764%27%20height%3D%2764%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cpath%20d%3D%27M32.0%2C12.2%20L37.8%2C18.0%20L46.0%2C18.0%20L46.0%2C26.2%20L51.8%2C32.0%20L46.0%2C37.8%20L46.0%2C46.0%20L37.8%2C46.0%20L32.0%2C51.8%20L26.2%2C46.0%20L18.0%2C46.0%20L18.0%2C37.8%20L12.2%2C32.0%20L18.0%2C26.2%20L18.0%2C18.0%20L26.2%2C18.0Z%27%20fill%3D%27none%27%20stroke%3D%27%231F7A6A%27%20stroke-opacity%3D%27.16%27%20stroke-width%3D%271%27/%3E%3Cpath%20d%3D%27M0.0%2C-19.8%20L5.8%2C-14.0%20L14.0%2C-14.0%20L14.0%2C-5.8%20L19.8%2C0.0%20L14.0%2C5.8%20L14.0%2C14.0%20L5.8%2C14.0%20L0.0%2C19.8%20L-5.8%2C14.0%20L-14.0%2C14.0%20L-14.0%2C5.8%20L-19.8%2C0.0%20L-14.0%2C-5.8%20L-14.0%2C-14.0%20L-5.8%2C-14.0Z%20M64.0%2C-19.8%20L69.8%2C-14.0%20L78.0%2C-14.0%20L78.0%2C-5.8%20L83.8%2C0.0%20L78.0%2C5.8%20L78.0%2C14.0%20L69.8%2C14.0%20L64.0%2C19.8%20L58.2%2C14.0%20L50.0%2C14.0%20L50.0%2C5.8%20L44.2%2C0.0%20L50.0%2C-5.8%20L50.0%2C-14.0%20L58.2%2C-14.0Z%20M0.0%2C44.2%20L5.8%2C50.0%20L14.0%2C50.0%20L14.0%2C58.2%20L19.8%2C64.0%20L14.0%2C69.8%20L14.0%2C78.0%20L5.8%2C78.0%20L0.0%2C83.8%20L-5.8%2C78.0%20L-14.0%2C78.0%20L-14.0%2C69.8%20L-19.8%2C64.0%20L-14.0%2C58.2%20L-14.0%2C50.0%20L-5.8%2C50.0Z%20M64.0%2C44.2%20L69.8%2C50.0%20L78.0%2C50.0%20L78.0%2C58.2%20L83.8%2C64.0%20L78.0%2C69.8%20L78.0%2C78.0%20L69.8%2C78.0%20L64.0%2C83.8%20L58.2%2C78.0%20L50.0%2C78.0%20L50.0%2C69.8%20L44.2%2C64.0%20L50.0%2C58.2%20L50.0%2C50.0%20L58.2%2C50.0Z%27%20fill%3D%27none%27%20stroke%3D%27%231F7A6A%27%20stroke-opacity%3D%27.16%27%20stroke-width%3D%271%27/%3E%3C/svg%3E"); border-radius: 50%; -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%); mask-image: radial-gradient(circle, #000 30%, transparent 70%); }
.impact-band .sketch--skyline { opacity: .14; height: 200px; }
.value p { font-size: 1.6rem; }
.sketch--yhero { left: 0; right: 0; bottom: 0; width: 100%; height: 220px; color: #fff; opacity: .16; }