/* ============================================================
   NRP — Non-Resident Pakistanis, Washington D.C.
   ============================================================ */

:root{
  --green-900:#04140D;
  --green-850:#071D12;
  --green-800:#0A2A1B;
  --green-700:#0F3A25;
  --green-600:#154A2E;
  --green-mid:#1B5334;

  --gold-100:#F6EAC6;
  --gold-200:#EBD79B;
  --gold-300:#DCC27C;
  --gold-400:#C9A44E;
  --gold-500:#B58B33;
  --gold-600:#8E6A22;

  --ivory:#FBF9F4;
  --ivory-2:#F4F0E6;
  --paper:#FFFFFF;
  --ink:#151A16;
  --ink-2:#3C453E;
  --ink-3:#6B7570;

  --line-dark:rgba(201,164,78,.26);
  --line-light:rgba(21,26,22,.11);

  --f-display:"Source Serif 4","Georgia","Times New Roman",serif;
  --f-sans:"Libre Franklin","Helvetica Neue",Arial,sans-serif;

  --max:1240px;
  --pad:clamp(20px,5vw,64px);
  --sect:clamp(76px,10vw,148px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-curtain:cubic-bezier(.76,0,.24,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip;
  /* the canvas behind the page: dark, so mobile overscroll past the footer shows the
     footer's green instead of ivory (body's bg would otherwise propagate to the canvas) */
  background:var(--green-900);overscroll-behavior-y:none}
body{
  margin:0;background:var(--ivory);color:var(--ink);
  font-family:var(--f-sans);font-weight:300;font-size:16.5px;line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;overscroll-behavior-y:none;
  -webkit-tap-highlight-color:rgba(201,164,78,.18);
}
body.locked{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.14;margin:0;letter-spacing:-.015em}
.h-xl{font-size:clamp(38px,6vw,78px)}
.h-lg{font-size:clamp(30px,4.1vw,52px)}
.h-md{font-size:clamp(23px,2.6vw,34px)}
.h-sm{font-size:clamp(19px,1.8vw,24px)}

.eyebrow{
  font-family:var(--f-sans);font-weight:400;font-size:11.5px;
  letter-spacing:.42em;text-transform:uppercase;color:var(--gold-500);
  display:flex;align-items:center;gap:16px;margin:0 0 22px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-light),transparent)}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{display:none}
.eyebrow.center::before{content:"";width:38px;height:1px;background:var(--gold-400)}
.on-dark .eyebrow{color:var(--gold-300)}
.on-dark .eyebrow::after{background:linear-gradient(90deg,var(--line-dark),transparent)}

.lead{font-size:clamp(17px,1.35vw,20px);color:var(--ink-2);line-height:1.85;font-weight:300}
.on-dark .lead{color:rgba(251,249,244,.74)}
.serif-it{font-family:var(--f-display);font-style:normal;font-weight:400}

/* ---------- Layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.wrap-wide{max-width:1480px;margin:0 auto;padding:0 var(--pad)}
section{position:relative}
.sect{padding:var(--sect) 0}
.on-dark{background:var(--green-900);color:var(--ivory)}
.on-dark h1,.on-dark h2,.on-dark h3{color:var(--ivory)}

.grain::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:.5;background-image:url("../img/noise.png");background-size:64px 64px;
}
.on-dark.grain::before{opacity:.85}
@media(max-width:900px){.grain::before{display:none}}

.sect-head{max-width:760px;margin-bottom:clamp(46px,5vw,76px)}
.sect-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* ============================================================
   INTRO — hold, ignite, split. transform/opacity only.
   ============================================================ */
.intro{display:none}
.js .intro{display:block;position:fixed;inset:0;z-index:9999;pointer-events:none;contain:strict}
.intro-half{
  position:absolute;top:0;height:100%;width:50%;overflow:hidden;
  background:var(--green-900);backface-visibility:hidden;
  transform:translate3d(0,0,0);
  transition:transform 1.15s cubic-bezier(.78,0,.16,1);
}
.intro-half.l{left:0;transform-origin:right center}
.intro-half.r{right:0;transform-origin:left center}
.intro-inner{
  position:absolute;top:0;height:100%;width:200%;
  display:grid;place-content:center;justify-items:center;text-align:center;
}
.intro-half.l .intro-inner{left:0}
.intro-half.r .intro-inner{left:-100%}
.intro-inner::before{
  content:"";position:absolute;inset:0;opacity:0;transform:scale(.72);
  background:radial-gradient(56% 46% at 50% 46%,
    rgba(29,88,55,.78) 0%,rgba(21,68,42,.58) 26%,rgba(12,46,29,.34) 48%,
    rgba(7,29,18,.14) 66%,rgba(4,20,13,0) 82%);
  animation:introGlow 1.7s var(--ease) .1s forwards;
}
.intro-inner::after{ /* dither: kills radial banding on flat dark greens */
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("../img/noise.png");background-size:64px 64px;opacity:.5;
}
.intro-inner > *{position:relative}

.intro-logo{
  height:clamp(96px,14vw,186px);width:auto;
  opacity:0;transform:translate3d(0,10px,0) scale(.94);
  animation:introLogo 1.25s cubic-bezier(.16,.84,.3,1) .22s forwards;
}
.intro-rule{
  display:block;height:1px;width:min(300px,52vw);margin:32px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold-400),transparent);
  transform:scaleX(0);animation:introRule 1.15s var(--ease) 1s forwards;
}
.intro-cap{
  display:block;margin-top:22px;font-size:10px;letter-spacing:.46em;text-transform:uppercase;
  color:rgba(246,234,198,.66);opacity:0;transform:translate3d(0,8px,0);
  animation:introCap .9s var(--ease) 1.25s forwards;
}
@keyframes introGlow{to{opacity:1;transform:scale(1)}}
@keyframes introLogo{to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes introRule{to{transform:scaleX(1)}}
@keyframes introCap{to{opacity:1;transform:translate3d(0,0,0)}}

/* seam ignites just before the split */
.intro-seam{
  position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;z-index:5;
  background:linear-gradient(180deg,transparent,var(--gold-100) 18%,#fff 50%,var(--gold-100) 82%,transparent);
  box-shadow:0 0 30px 5px rgba(246,234,198,.6);
  transform:scaleY(0);opacity:0;transform-origin:center;
  transition:transform .5s cubic-bezier(.16,.84,.3,1),opacity .45s var(--ease);
}
.intro.seam .intro-seam{transform:scaleY(1);opacity:1}

/* doors open toward the viewer */
.intro.go .intro-half.l{transform:translate3d(-100%,0,0) scale(1.06)}
.intro.go .intro-half.r{transform:translate3d(100%,0,0) scale(1.06)}
.intro.go .intro-inner{opacity:.85;transition:opacity .9s var(--ease)}
.intro.go .intro-seam{opacity:0;transform:scaleY(1.25);transition-duration:.55s}
.intro.done{display:none}

/* ---------- Nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:120;padding:20px 0;
  transition:padding .45s var(--ease),transform .5s var(--ease);
}
.js .nav{transform:translateY(-100%)}
.js body.ready .nav,.js.ready .nav{transform:none}
.nav::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .45s var(--ease);
  background:rgba(4,20,13,.9);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid rgba(201,164,78,.16);
}
@media(max-width:900px){
  .nav::after{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(4,20,13,.96)}
}
.nav.stuck{padding:11px 0}
.nav.stuck::after{opacity:1}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:flex;align-items:center;gap:13px}
.brand img{height:44px;width:auto;transition:height .45s var(--ease)}
.nav.stuck .brand img{height:36px}
.brand-txt{border-left:1px solid rgba(201,164,78,.34);padding-left:13px;line-height:1.25}
.brand-txt b{display:block;font-family:var(--f-display);font-size:16px;font-weight:600;color:var(--ivory);letter-spacing:.02em}
.brand-txt span{display:block;font-size:8.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-300)}
@media(max-width:520px){.brand-txt{display:none}}

.menu{display:flex;align-items:center;gap:32px;list-style:none;margin:0;padding:0}
.menu a{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(251,249,244,.78);position:relative;padding:6px 0;transition:color .3s}
.menu a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold-300);transition:width .4s var(--ease)}
.menu a:hover{color:var(--ivory)}
.menu a:hover::after{width:100%}
@media(max-width:1080px){.menu{display:none}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 32px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;
  border:1px solid var(--gold-400);color:var(--green-900);background:linear-gradient(135deg,var(--gold-200),var(--gold-400));
  position:relative;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease);cursor:pointer;
}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transition:left .7s var(--ease)}
@media(hover:hover){.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(181,139,51,.32)}}
@media(hover:hover){.btn:hover::after{left:130%}}
.btn-ghost{background:transparent;color:var(--gold-200);border-color:rgba(201,164,78,.5)}
.btn-ghost:hover{background:rgba(201,164,78,.1);box-shadow:none}
.btn-dark{background:var(--green-800);color:var(--gold-200);border-color:var(--green-800)}
.btn-sm{padding:12px 24px}
.btn-line{background:none;border-color:rgba(201,164,78,.55);color:var(--gold-600)}
.btn-line:hover{background:rgba(201,164,78,.08);box-shadow:none}
.nav .btn{padding:12px 24px}
@media(max-width:1080px){.nav .btn{display:none}}

.burger{display:none;width:42px;height:42px;border:1px solid rgba(201,164,78,.4);background:transparent;cursor:pointer;position:relative}
.burger i{position:absolute;left:11px;right:11px;height:1px;background:var(--gold-200);transition:.35s var(--ease)}
.burger i:nth-child(1){top:15px}.burger i:nth-child(2){top:20px}.burger i:nth-child(3){top:25px}
.burger.on i:nth-child(1){top:20px;transform:rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){top:20px;transform:rotate(-45deg)}
@media(max-width:1080px){.burger{display:block}}

.drawer{
  position:fixed;inset:0;z-index:110;background:var(--green-900);padding:120px var(--pad) 48px;
  transform:translateY(-100%);transition:transform .6s var(--ease);overflow-y:auto;
}
.drawer.on{transform:translateY(0)}
.drawer ul{list-style:none;margin:0;padding:0}
.drawer a{display:block;font-family:var(--f-display);font-size:clamp(28px,7vw,42px);color:var(--ivory);
  padding:14px 0;border-bottom:1px solid rgba(201,164,78,.14)}
.drawer .btn{margin-top:34px;width:100%}

/* ============================================================
   HERO — grid rows so the scroll cue can never collide
   ============================================================ */
.hero{
  position:relative;min-height:100svh;display:grid;grid-template-rows:1fr auto;
  background:var(--green-900);overflow:hidden;padding:clamp(120px,16vh,168px) 0 0;
}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 58%;opacity:.62;
  filter:saturate(.72) contrast(1.05);transform:scale(1.12);backface-visibility:hidden}
.js body.ready .hero-bg img{animation:kb 2.6s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes kb{to{transform:scale(1)}}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(115% 85% at 50% 108%,rgba(4,20,13,.18),rgba(4,20,13,.9) 70%),
    linear-gradient(180deg,rgba(4,20,13,.9) 0%,rgba(4,20,13,.46) 42%,rgba(4,20,13,.88) 100%);
}
.hero-in{position:relative;z-index:2;grid-row:1;align-self:center;width:100%;text-align:center;padding-bottom:24px}
.hero-mark{height:clamp(76px,11vw,116px);width:auto;margin:0 auto 30px}
.hero h1{margin:0 0 26px;color:var(--ivory)}
.hero h1 em{display:block;font-style:normal;
  background:linear-gradient(100deg,var(--gold-100) 8%,var(--gold-400) 40%,var(--gold-100) 60%,var(--gold-500) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% 100%}
body.hero-live .hero h1 em{animation:sheen 9s linear infinite}
@keyframes sheen{to{background-position:220% 0}}
.hero .kicker{font-size:11px;letter-spacing:.48em;text-transform:uppercase;color:var(--gold-300);margin:0 0 26px}
.hero p.lead{max-width:720px;margin:0 auto 42px;color:rgba(251,249,244,.78)}
.hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

.js .hero-mark,.js .hero .kicker,.js .hero h1,.js .hero p.lead,.js .hero-cta,.js .scroll-cue{opacity:0}
.js body.ready .hero-mark{animation:up .95s var(--ease) .12s forwards}
.js body.ready .hero .kicker{animation:up .95s var(--ease) .22s forwards}
.js body.ready .hero h1{animation:up 1s var(--ease) .3s forwards}
.js body.ready .hero p.lead{animation:up 1s var(--ease) .44s forwards}
.js body.ready .hero-cta{animation:up 1s var(--ease) .56s forwards}
.js body.ready .scroll-cue{animation:up 1s var(--ease) .8s forwards}
@keyframes up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.scroll-cue{
  position:relative;z-index:3;grid-row:2;justify-self:center;text-align:center;
  padding:0 0 clamp(22px,4vh,40px);
  font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;color:rgba(246,234,198,.5);
}
.scroll-cue i{display:block;width:1px;height:clamp(30px,6vh,52px);margin:12px auto 0;
  background:linear-gradient(180deg,var(--gold-400),transparent);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--gold-100)}
body.hero-live .scroll-cue i::after{animation:drop 2.4s var(--ease) infinite}
@keyframes drop{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media(max-height:640px){.scroll-cue{display:none}}

/* ---------- Reveal ---------- */
[data-rv]{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
[data-rv].in{opacity:1;transform:none}
[data-rv-d="1"]{transition-delay:.08s}[data-rv-d="2"]{transition-delay:.16s}
[data-rv-d="3"]{transition-delay:.24s}[data-rv-d="4"]{transition-delay:.32s}
[data-rv-d="5"]{transition-delay:.4s}[data-rv-d="6"]{transition-delay:.48s}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-rv]{opacity:1;transform:none}
  .js .hero-mark,.js .hero .kicker,.js .hero h1,.js .hero p.lead,.js .hero-cta,.js .scroll-cue{opacity:1;animation:none}
  .hero-bg img{transform:none;animation:none}
  .intro-logo,.intro-rule,.intro-cap{animation:none;opacity:1;transform:none;width:auto}
}

/* ---------- Stats: hairlines, no boxes ---------- */
.stats{background:var(--green-850);border-top:1px solid rgba(201,164,78,.2);border-bottom:1px solid rgba(201,164,78,.2)}
.stats-in{display:grid;grid-template-columns:repeat(3,1fr)}
.stat{padding:44px 26px;text-align:center;position:relative}
.stat+.stat::before{content:"";position:absolute;left:0;top:28%;bottom:28%;width:1px;background:rgba(201,164,78,.18)}
.stat b{display:block;font-family:var(--f-display);font-size:clamp(34px,4vw,52px);font-weight:600;line-height:1;
  background:linear-gradient(160deg,var(--gold-100),var(--gold-500));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{display:block;margin-top:10px;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:rgba(251,249,244,.56)}
@media(max-width:820px){
  .stats-in{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3){grid-column:1/-1}
  .stat:nth-child(3)::before{display:none}
  .stat:nth-child(-n+2)::after{content:"";position:absolute;left:12%;right:12%;bottom:0;height:1px;background:rgba(201,164,78,.16)}
}

/* ---------- About split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
@media(max-width:980px){.split{grid-template-columns:1fr}}
.frame{position:relative}
.frame img{width:100%;height:clamp(420px,58vw,640px);object-fit:cover;
  border-radius:min(50vw,240px) min(50vw,240px) 0 0}
.frame::before{content:"";position:absolute;inset:18px -20px -20px 20px;border:1px solid var(--gold-400);opacity:.5;z-index:-1;
  border-radius:min(50vw,240px) min(50vw,240px) 0 0}
@media(max-width:600px){.frame::before{inset:14px -14px -14px 14px}}
.frame-cap{position:absolute;left:0;bottom:0;right:0;padding:28px;background:linear-gradient(0deg,rgba(4,20,13,.94),transparent);color:var(--ivory)}
.frame-cap b{font-family:var(--f-display);font-size:21px;font-weight:600;display:block}
.frame-cap span{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-300)}

/* ---------- Promise ---------- */
.promise{background:linear-gradient(155deg,var(--green-800),var(--green-900) 60%);color:var(--ivory);text-align:center}
.promise q{quotes:none;display:block;font-family:var(--f-display);font-weight:400;font-style:normal;
  font-size:clamp(24px,3.5vw,46px);line-height:1.32;max-width:1000px;margin:0 auto;color:var(--gold-100)}
.promise .sig{margin-top:34px;font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:rgba(251,249,244,.5)}

/* ---------- Vision / Mission: borderless editorial ---------- */
.vm{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px)}
@media(max-width:900px){.vm{grid-template-columns:1fr;gap:56px}}
.vm-card{position:relative;padding-top:34px;border-top:1px solid var(--line-light)}
.vm-card::after{content:"";position:absolute;top:-1px;left:0;width:0;height:1px;background:var(--gold-400);transition:width 1.2s var(--ease) .2s}
.vm-card.in::after,[data-rv].in.vm-card::after{width:70px}
.vm-num{display:block;font-family:var(--f-display);font-size:15px;letter-spacing:.34em;
  color:var(--gold-500);margin-bottom:16px}
.vm-card h3{margin-bottom:18px}
.vm-card p{margin:0;color:var(--ink-2)}
.vm-card ul{margin:26px 0 0;padding:0;list-style:none}
.vm-card li{position:relative;padding-left:28px;margin-bottom:13px;font-size:15.5px;color:var(--ink-2)}
.vm-card li::before{content:"";position:absolute;left:0;top:11px;width:13px;height:1px;background:var(--gold-400)}

/* ---------- Core values: diamond marks, no boxes ---------- */
.creed{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(30px,3.4vw,56px) clamp(20px,2.6vw,40px)}
@media(max-width:900px){.creed{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.creed{grid-template-columns:1fr}}
.creed-item{text-align:center}
.creed-mark{
  width:72px;height:72px;margin:0 auto 24px;display:grid;place-items:center;
  border:1px solid var(--gold-400);transform:rotate(45deg);position:relative;
  transition:transform .7s var(--ease),background .7s var(--ease),box-shadow .7s var(--ease);
}
.creed-mark::before{content:"";position:absolute;inset:7px;border:1px solid rgba(201,164,78,.28)}
.creed-mark svg{width:24px;height:24px;stroke:var(--gold-500);fill:none;stroke-width:1.2;transform:rotate(-45deg)}
@media(hover:hover){.creed-item:hover .creed-mark{transform:rotate(45deg) scale(1.08);background:rgba(201,164,78,.09);box-shadow:0 12px 34px rgba(181,139,51,.16)}}
.creed-item b{display:block;font-family:var(--f-display);font-size:23px;font-weight:600;margin-bottom:8px}
.creed-item p{margin:0;font-size:14.5px;color:var(--ink-3);line-height:1.7}

/* ============================================================
   COLONNADE — six columns under one continuous entablature.
   gap:0 so the abacus + plinth of each column abut into
   an unbroken cornice and stylobate across the whole row.
   ============================================================ */
.colonnade{
  display:grid;grid-template-columns:repeat(6,1fr);gap:0;
  margin-top:clamp(44px,5vw,72px);
}
@media(max-width:1000px){.colonnade{grid-template-columns:repeat(3,1fr);row-gap:clamp(44px,6vw,68px)}}
@media(max-width:600px){.colonnade{grid-template-columns:repeat(2,1fr)}}

.colm{display:flex;flex-direction:column;text-align:center}
.colm-col{
  display:flex;flex-direction:column;align-items:center;
  height:clamp(268px,29vw,386px);
  transition:transform .7s var(--ease);
}
@media(hover:hover){.colm:hover .colm-col{transform:translateY(-6px)}}

/* --- entablature: continuous across every column --- */
.abacus{
  width:100%;height:13px;flex:0 0 13px;position:relative;
  background:linear-gradient(180deg,#F6EAC6 0%,#DCC27C 34%,#B58B33 78%,#7A5C1E 100%);
  box-shadow:0 1px 0 rgba(0,0,0,.5),0 -1px 0 rgba(246,234,198,.5);
}
.abacus::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:4px;
  background:linear-gradient(180deg,rgba(122,92,30,.9),rgba(4,20,13,0))}

/* --- capital --- */
.echinus{
  width:78%;height:24px;flex:0 0 24px;
  background:linear-gradient(180deg,#E3CE92 0%,#C9A44E 42%,#8E6A22 100%);
  clip-path:polygon(0 0,100% 0,84% 100%,16% 100%);
}

/* --- fluted shaft, tapered like real entasis --- */
.shaft{
  width:58%;flex:1 1 auto;position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  clip-path:polygon(4% 0,96% 0,100% 100%,0 100%);
  background:
    linear-gradient(90deg,
      #030F0A 0%, #082114 10%, #0F3A25 26%, #1E5236 46%,
      #1A4830 58%, #0E3121 72%, #071E13 88%, #030F0A 100%);
  transition:filter .7s var(--ease)}
.shaft::before{ /* flutes */
  content:"";position:absolute;inset:0;opacity:.6;
  background:repeating-linear-gradient(90deg,
    rgba(0,0,0,.45) 0 1.5px,
    rgba(246,234,198,.085) 1.5px 3.5px,
    rgba(0,0,0,.05) 3.5px 13px);
}
.shaft::after{ /* soft top shadow under the capital */
  content:"";position:absolute;left:0;right:0;top:0;height:26px;
  background:linear-gradient(180deg,rgba(0,0,0,.5),transparent);
}
@media(hover:hover){.colm:hover .shaft{filter:brightness(1.45) saturate(1.05)}}
.shaft svg{position:relative;width:26px;height:26px;stroke:var(--gold-100);fill:none;stroke-width:1.15;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));transition:transform .7s var(--ease)}
@media(hover:hover){.colm:hover .shaft svg{transform:translateY(-3px) scale(1.1)}}
.shaft .num{
  position:relative;font-family:var(--f-display);font-size:12.5px;letter-spacing:.22em;
  color:var(--gold-200);opacity:.9;text-shadow:0 2px 6px rgba(0,0,0,.6);
}
.shaft .num::before,.shaft .num::after{content:"";position:absolute;top:50%;width:10px;height:1px;background:rgba(235,215,155,.55)}
.shaft .num::before{left:-16px}.shaft .num::after{right:-16px}

/* --- base + continuous stylobate --- */
.base{
  width:78%;height:22px;flex:0 0 22px;
  background:linear-gradient(180deg,#8E6A22 0%,#C9A44E 52%,#E3CE92 100%);
  clip-path:polygon(16% 0,84% 0,100% 100%,0 100%);
}
.plinth{
  width:100%;height:14px;flex:0 0 14px;position:relative;
  background:linear-gradient(180deg,#F6EAC6 0%,#C9A44E 30%,#8E6A22 72%,#5A430F 100%);
  box-shadow:0 -1px 0 rgba(246,234,198,.45);
}
.plinth::after{content:"";position:absolute;left:0;right:0;top:100%;height:26px;
  background:linear-gradient(180deg,rgba(201,164,78,.22),rgba(4,20,13,0))}

.colm h3{font-size:clamp(19px,1.6vw,23px);line-height:1.2;margin:30px 0 10px;color:var(--ivory);min-height:2.4em;
  padding:0 clamp(6px,1vw,14px)}
.colm p{margin:0;font-size:13.5px;line-height:1.7;color:rgba(251,249,244,.58);
  padding:0 clamp(6px,1vw,14px)}

/* ---------- Services: ledger, no cards ---------- */
.ledger{border-top:1px solid var(--line-light)}
.ledger-row{
  position:relative;display:grid;grid-template-columns:84px 1fr 1.3fr;
  gap:clamp(14px,3vw,44px);align-items:start;padding:30px 0;
  border-bottom:1px solid var(--line-light);
  transition:padding-left .6s var(--ease),background .6s var(--ease);
}
.ledger-row::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--gold-400);transition:width .8s var(--ease)}
@media(hover:hover){.ledger-row:hover{padding-left:16px;background:linear-gradient(90deg,rgba(201,164,78,.06),transparent 60%)}}
@media(hover:hover){.ledger-row:hover::after{width:100%}}
.ledger-num{font-family:var(--f-display);font-size:32px;line-height:1;color:var(--gold-400);opacity:.75}
.ledger-row h3{font-size:clamp(23px,2.3vw,30px);line-height:1.16}
.ledger-row h3 span{display:block;font-family:var(--f-sans);font-size:10px;font-weight:400;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gold-500);margin-bottom:9px}
.ledger-row p{margin:0;font-size:15.5px;color:var(--ink-2);line-height:1.75}
@media(max-width:820px){
  .ledger-row{grid-template-columns:56px 1fr;gap:16px}
  .ledger-row p{grid-column:2}
  .ledger-num{font-size:24px;padding-top:4px}
}

/* ---------- Partnership ---------- */
.partner-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(40px,6vw,84px);align-items:center}
@media(max-width:980px){.partner-grid{grid-template-columns:1fr}}
.plist{list-style:none;margin:34px 0 0;padding:0;counter-reset:p}
.plist li{counter-increment:p;display:flex;gap:22px;align-items:flex-start;padding:20px 0;border-bottom:1px solid rgba(201,164,78,.16);transition:padding-left .5s var(--ease)}
.plist li:first-child{border-top:1px solid rgba(201,164,78,.16)}
@media(hover:hover){.plist li:hover{padding-left:10px}}
.plist li::before{content:counter(p,decimal-leading-zero);font-family:var(--f-display);font-size:15px;color:var(--gold-300);
  border:1px solid rgba(201,164,78,.4);width:38px;height:38px;display:grid;place-items:center;flex:0 0 38px;border-radius:50%}
.plist b{display:block;font-family:var(--f-display);font-size:22px;font-weight:600;color:var(--ivory);line-height:1.3}
.plist span{display:block;font-size:14.5px;color:rgba(251,249,244,.56);margin-top:3px}

/* ---------- Initiatives: seals, no boxes ---------- */
.seals{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(38px,4.4vw,68px) clamp(26px,3vw,54px)}
@media(max-width:900px){.seals{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.seals{grid-template-columns:1fr}}
.seal{text-align:center;position:relative;padding-top:6px}
.seal-ring{
  width:84px;height:84px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;position:relative;
  border:1px solid rgba(201,164,78,.55);
  transition:transform .7s var(--ease),background .7s var(--ease),box-shadow .7s var(--ease);
}
.seal-ring::before{content:"";position:absolute;inset:6px;border-radius:50%;border:1px solid rgba(201,164,78,.24)}
.seal-ring svg{width:28px;height:28px;stroke:var(--gold-500);fill:none;stroke-width:1.15}
@media(hover:hover){.seal:hover .seal-ring{transform:translateY(-6px);background:rgba(201,164,78,.08);box-shadow:0 16px 40px rgba(181,139,51,.16)}}
.seal h3{font-size:23px;margin-bottom:10px}
.seal p{margin:0 auto;font-size:14.5px;color:var(--ink-3);line-height:1.72;max-width:34ch}
.seal .who{display:block;margin-top:14px;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-500)}

/* ---------- Leadership: borderless ---------- */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
@media(max-width:940px){.people{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.people{grid-template-columns:1fr}}
.people.four{--pg:clamp(24px,3vw,44px);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--pg)}
.people.four > .person{flex:0 0 calc((100% - 3*var(--pg))/4)}
@media(max-width:1100px){.people.four > .person{flex:0 0 calc((100% - var(--pg))/2)}}
@media(max-width:560px){.people.four > .person{flex:0 0 100%}}
.person{position:relative}
.person .ph{position:relative;overflow:hidden;aspect-ratio:1/1.06;
  border-radius:min(40vw,150px) min(40vw,150px) 0 0}
.person .ph picture{display:block;width:100%;height:100%}
.person .ph img{width:100%;height:100%;object-fit:cover;object-position:top center;
  filter:grayscale(.3) contrast(1.03);transition:transform .9s var(--ease),filter .9s var(--ease);
  backface-visibility:hidden}
@media(hover:hover){.person:hover .ph img{transform:scale(1.05);filter:grayscale(0) contrast(1.05)}}
.person .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,20,13,.6),transparent 44%)}
.person .meta{padding:22px 2px 0;position:relative}
.person .meta::before{content:"";position:absolute;top:0;left:0;width:44px;height:1px;background:var(--gold-400)}
.person .role{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-300);display:block;margin-bottom:9px;line-height:1.5;min-height:3em}
.person h3{font-size:24px;color:var(--ivory);margin-bottom:9px}
.person p{margin:0;font-size:14.5px;color:rgba(251,249,244,.56);line-height:1.7}

.roster{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(30px,4vw,64px);margin-top:clamp(48px,5vw,78px)}
@media(max-width:760px){.roster{grid-template-columns:1fr}}
.roster-item{display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  padding:19px 0;border-bottom:1px solid rgba(201,164,78,.16);transition:padding-left .5s var(--ease)}
@media(hover:hover){.roster-item:hover{padding-left:10px}}
.roster-item b{font-family:var(--f-display);font-size:20px;font-weight:600;color:var(--ivory);display:block;line-height:1.3}
.roster-item span{font-size:13.5px;color:rgba(251,249,244,.55)}
.roster-item i{font-style:normal;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-400);text-align:right;flex:0 0 auto;max-width:44%}

/* ---------- Forum ---------- */
.forum{background:var(--green-900);color:var(--ivory)}
.forum h1,.forum h2,.forum h3{color:var(--ivory)}
.forum .lead{color:rgba(251,249,244,.74)}
.forum-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(40px,5vw,80px);align-items:center}
@media(max-width:980px){.forum-grid{grid-template-columns:1fr}}
.forum-cover{position:relative}
.forum-cover img{width:100%;box-shadow:0 40px 90px rgba(0,0,0,.55)}
.forum-cover::before{content:"";position:absolute;inset:-18px;border:1px solid rgba(201,164,78,.42);z-index:-1}
.badge{display:inline-flex;align-items:center;gap:11px;border:1px solid rgba(201,164,78,.42);padding:9px 18px;
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-200);margin-bottom:26px}
.badge b{color:var(--gold-100);font-weight:400}
.tri{display:grid;grid-template-columns:repeat(3,1fr);margin-top:40px;border-top:1px solid rgba(201,164,78,.22);border-bottom:1px solid rgba(201,164,78,.22)}
@media(max-width:560px){.tri{grid-template-columns:1fr}}
.tri div{padding:26px 20px;text-align:center;position:relative}
.tri div+div::before{content:"";position:absolute;left:0;top:24%;bottom:24%;width:1px;background:rgba(201,164,78,.2)}
.tri b{display:block;font-family:var(--f-display);font-size:19px;color:var(--gold-200);font-weight:600}
.tri span{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(251,249,244,.45);margin-top:7px}

/* ---------- CIE–NRP MOU feature ---------- */
.mou{display:grid;grid-template-columns:minmax(0,400px) 1fr;gap:clamp(34px,4.5vw,72px);align-items:center}
@media(max-width:900px){.mou{grid-template-columns:1fr;gap:38px}}
.mou-media{position:relative}
.mou-media video{width:100%;height:auto;display:block;background:#000;box-shadow:0 40px 90px rgba(0,0,0,.55)}
.mou-media::before{content:"";position:absolute;inset:-16px;border:1px solid rgba(201,164,78,.42);z-index:-1}
@media(max-width:900px){.mou-media{max-width:400px;margin:0 auto}}

/* ---------- Sponsor ribbon ---------- */
.ribbon{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light)}
@media(max-width:860px){.ribbon{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.ribbon{grid-template-columns:1fr}}
.ribbon-item{padding:clamp(34px,3.6vw,52px) 26px;text-align:center;position:relative;transition:background .6s var(--ease)}
.ribbon-item+.ribbon-item::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--line-light)}
@media(hover:hover){.ribbon-item:hover{background:rgba(201,164,78,.06)}}
.gem{width:16px;height:16px;margin:0 auto 20px;transform:rotate(45deg);transition:transform .6s var(--ease)}
@media(hover:hover){.ribbon-item:hover .gem{transform:rotate(45deg) scale(1.25)}}
.ribbon-item b{display:block;font-family:var(--f-display);font-size:26px;font-weight:600}
.ribbon-item span{display:block;font-size:13.5px;color:var(--ink-3);margin-top:9px;line-height:1.65}

/* ---------- CTA ---------- */
.cta{position:relative;overflow:hidden;text-align:center;color:var(--ivory)}
.cta h1,.cta h2,.cta h3{color:var(--ivory)}
.cta .lead{color:rgba(251,249,244,.74)}
.cta-bg{position:absolute;inset:0;z-index:0}
.cta-bg img{width:100%;height:100%;object-fit:cover;opacity:.42;filter:saturate(.78)}
.cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,20,13,.86),rgba(4,20,13,.92))}
.cta .wrap{position:relative;z-index:2}
.cta h2{margin-bottom:22px}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,5vw,80px)}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.field{margin-bottom:26px}
.field label{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-500);margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%;padding:11px 2px;border:0;border-bottom:1px solid var(--line-light);background:transparent;color:var(--ink);
  font-family:var(--f-sans);font-size:16px;font-weight:300;border-radius:0;transition:border-color .4s var(--ease)}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--gold-400)}
.field select{appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold-500) 50%),linear-gradient(135deg,var(--gold-500) 50%,transparent 50%);
  background-position:calc(100% - 12px) 20px,calc(100% - 7px) 20px;background-size:5px 5px;background-repeat:no-repeat;padding-right:28px}
.form-head{padding-top:34px;border-top:1px solid var(--line-light);margin-bottom:30px}
.form-note{font-size:12.5px;color:var(--ink-3);margin:16px 0 0}
.info-item{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid var(--line-light)}
.info-item svg{width:22px;height:22px;stroke:var(--gold-500);fill:none;stroke-width:1.2;flex:0 0 22px;margin-top:4px}
.info-item b{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.info-item span{font-family:var(--f-display);font-size:20px;color:var(--ink)}

/* ---------- Footer ---------- */
.foot{background:var(--green-900);color:rgba(251,249,244,.6);padding:clamp(60px,7vw,92px) 0 0}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(30px,4vw,56px);padding-bottom:56px}
@media(max-width:900px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-top{grid-template-columns:1fr}}
.foot img.fl{height:64px;width:auto;margin-bottom:20px}
.foot h4{font-family:var(--f-sans);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-300);margin:0 0 20px;font-weight:400}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:11px;font-size:14.5px}
.foot a:hover{color:var(--gold-200)}
.foot-bot{border-top:1px solid rgba(201,164,78,.16);padding:26px 0;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12px;letter-spacing:.05em}
.foot-contact{font-size:14px;line-height:1.75;margin:20px 0 0;max-width:340px;color:rgba(251,249,244,.62)}
.foot-contact a{color:rgba(251,249,244,.62);border-bottom:1px solid rgba(201,164,78,.32);transition:color .4s var(--ease)}
@media(hover:hover){.foot-contact a:hover{color:var(--gold-200)}}
.socials{display:flex;gap:10px;margin-top:22px}
.socials a{width:38px;height:38px;border:1px solid rgba(201,164,78,.3);display:grid;place-items:center;transition:.4s var(--ease)}
@media(hover:hover){.socials a:hover{background:rgba(201,164,78,.14);border-color:var(--gold-400);transform:translateY(-3px)}}
.socials svg{width:16px;height:16px;fill:var(--gold-200)}

::selection{background:var(--gold-300);color:var(--green-900)}

/* ---------- Small-screen polish ---------- */
@media(max-width:560px){
  .hero .kicker{letter-spacing:.2em;font-size:9.5px}
  .eyebrow{letter-spacing:.3em}
  .plist li{gap:16px}
  .roster-item{flex-direction:column;align-items:flex-start;gap:8px}
  .roster-item i{text-align:left;max-width:100%}
  .frame img{height:clamp(340px,86vw,520px)}
  .colm-col{height:clamp(210px,50vw,268px)}
  .shaft{gap:10px}
}


/* ============================================================
   Mobile refinements
   ============================================================ */
@media(max-width:900px){
  :root{--sect:clamp(64px,11vw,96px)}
  .sect-head{margin-bottom:clamp(34px,7vw,48px)}
  .lead{font-size:16.5px;line-height:1.8}
  .btn{padding:15px 26px}
  /* full-width, thumb-friendly buttons where they stack */
  .hero-cta .btn{flex:1 1 260px}
}

@media(max-width:640px){
  body{font-size:16px}
  .h-xl{font-size:clamp(33px,8.8vw,48px)}
  .h-lg{font-size:clamp(26px,7.2vw,36px)}
  .hero{padding-top:clamp(104px,15vh,132px)}
  .hero-mark{height:clamp(62px,17vw,84px);margin-bottom:24px}
  .hero .kicker{margin-bottom:20px}
  .hero p.lead{margin-bottom:32px}
  .hero-cta{flex-direction:column;gap:12px}
  /* column flex: the 260px basis above would become a HEIGHT — reset it */
  .hero-cta .btn{flex:0 0 auto;width:100%}
  .hero p.lead{font-size:15.5px;line-height:1.75;max-width:34em}

  .intro-logo{height:clamp(88px,26vw,128px)}
  .intro-rule{margin-top:24px}

  /* colonnade: two slimmer columns per row reads better than four cramped ones */
  .colonnade{column-gap:0}
  .colm h3{font-size:18px;margin-top:24px;min-height:0}
  .colm p{font-size:13px}
  .shaft{width:52%}
  .echinus,.base{width:74%}

  .creed-mark{width:62px;height:62px;margin-bottom:18px}
  .creed-item b{font-size:21px}
  .seal-ring{width:72px;height:72px;margin-bottom:18px}
  .seal h3{font-size:21px}

  .ledger-row{padding:24px 0}
  .ledger-row h3{font-size:22px}
  .ledger-row p{font-size:15px}

  .person .meta{padding-top:18px}
  .forum-cover::before{inset:-10px}
  .promise q{font-size:clamp(21px,6vw,30px)}
  .foot-bot{flex-direction:column;gap:10px;font-size:11.5px}
  .drawer{padding-top:104px}
}

/* Touch devices: never leave an element parked in a hover state */
@media(hover:none){
  .colm-col,.shaft,.creed-mark,.seal-ring,.ledger-row,.btn{transition:none}
}

@media(max-width:400px){
  .hero .kicker{letter-spacing:.14em;font-size:10px}
  .colonnade{grid-template-columns:repeat(2,1fr)}
}

/* Touch ergonomics: give footer + legal links a real tap target on phones.
   Link text is 14.5px/18px tall; padding takes each row to ~40px without
   changing the visual rhythm (the li margin is reduced by the same amount). */
@media(max-width:640px){
  .foot li{margin-bottom:0}
  .foot-top ul li a{display:inline-block;padding:11px 0}
  .foot-legal{gap:0 28px}
  .foot-legal a{display:inline-block;padding:10px 0}
  .socials a{width:44px;height:44px}
  .foot-contact a{display:inline-block;padding:4px 0}
}

/* ============================================================
   HERO MONUMENTS — Capitol (left) + Minar-e-Pakistan (right)
   The Capitol is the reference and is left exactly as approved.
   The Minar's width clamp is DERIVED from it so the two render at
   the same height: capitol is 680x997 (h = w x 1.466), minar is
   381x1000 (h = w x 2.625), so minar width = capitol width x 0.559.
   If you change the Capitol's clamp, recompute the Minar's.
   ============================================================ */
.monuments{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.mon{position:absolute;bottom:0;display:block}
.mon-l{left:0;width:clamp(300px,34vw,560px)}
.mon-r{right:0;width:clamp(168px,19vw,313px)}

.mon img{width:100%;height:auto;display:block;mix-blend-mode:screen}
.mon-l img{
  opacity:.5;
  filter:sepia(.42) hue-rotate(58deg) saturate(.68) brightness(.92);
  -webkit-mask-image:linear-gradient(100deg,#000 0%,#000 34%,rgba(0,0,0,.35) 74%,transparent 100%),
                     linear-gradient(180deg,transparent 0%,#000 26%,#000 84%,transparent 100%);
  mask-image:linear-gradient(100deg,#000 0%,#000 34%,rgba(0,0,0,.35) 74%,transparent 100%),
             linear-gradient(180deg,transparent 0%,#000 26%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.mon-r img{
  opacity:.62;   /* a slender tower needs more than a broad dome to read equally */
  filter:sepia(.42) hue-rotate(58deg) saturate(.68) brightness(.92);
  /* vertical ramp identical to .mon-l so both fade in at the same height */
  -webkit-mask-image:linear-gradient(260deg,#000 0%,#000 34%,rgba(0,0,0,.35) 74%,transparent 100%),
                     linear-gradient(180deg,transparent 0%,#000 26%,#000 84%,transparent 100%);
  mask-image:linear-gradient(260deg,#000 0%,#000 34%,rgba(0,0,0,.35) 74%,transparent 100%),
             linear-gradient(180deg,transparent 0%,#000 26%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}

/* keeps the centre column readable over both monuments */
.hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(58% 62% at 50% 52%,rgba(4,20,13,.88) 0%,rgba(4,20,13,.6) 46%,rgba(4,20,13,0) 78%)}

@media(max-width:820px){
  /* widths keep the 0.559 ratio so heights stay equal, and stay narrow
     enough that the two do not collide behind the copy */
  .mon-l{width:52vw}
  .mon-r{width:29.05vw}
  .mon-l img{opacity:.34}
  .mon-r img{opacity:.46}
  .hero-veil{background:radial-gradient(74% 56% at 50% 44%,
    rgba(4,20,13,.95) 0%,rgba(4,20,13,.8) 48%,rgba(4,20,13,.28) 84%,rgba(4,20,13,0) 100%)}
}
@media(max-width:520px){
  .mon-l{width:56vw}
  .mon-r{width:31.28vw}
  .mon-l img{opacity:.3}
  .mon-r img{opacity:.42}
}

/* ============================================================
   SUB-PAGE HEADER
   ============================================================ */
.phead{
  position:relative;overflow:hidden;background:var(--green-900);color:var(--ivory);
  padding:clamp(150px,20vh,214px) 0 clamp(64px,8vw,104px);
}
.phead h1,.phead h2{color:var(--ivory)}
.phead .lead{color:rgba(251,249,244,.76);max-width:640px}
.phead-bg{position:absolute;inset:0;z-index:0}
.phead-bg img{width:100%;height:100%;object-fit:cover;opacity:.3;filter:saturate(.6)}
.phead-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(4,20,13,.96) 0%,rgba(4,20,13,.82) 46%,rgba(4,20,13,.62) 100%)}
.phead .wrap{position:relative;z-index:2}
.crumb{display:flex;align-items:center;gap:12px;font-size:10.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold-300);margin-bottom:26px}
.crumb a{color:rgba(251,249,244,.62);transition:color .3s}
.crumb a:hover{color:var(--gold-200)}
.crumb i{font-style:normal;opacity:.5}
.phead-rule{width:84px;height:1px;background:var(--gold-400);margin:30px 0 26px}

/* ============================================================
   COMMITTEE TABS — a two-column tab strip on desktop that
   collapses into an accordion on mobile. Markup is interleaved
   (button, panel, button, panel...) so the mobile order is free;
   desktop just places every panel into column 2.
   ============================================================ */
.tabs{
  display:grid;grid-template-columns:minmax(230px,.82fr) 1.35fr;
  column-gap:clamp(30px,4.5vw,72px);align-items:start;
  border-top:1px solid var(--line-light);
}
.tab{
  grid-column:1;position:relative;display:flex;align-items:flex-start;gap:15px;width:100%;
  padding:17px 12px 17px 0;background:none;border:0;border-bottom:1px solid var(--line-light);
  text-align:left;cursor:pointer;color:var(--ink-3);
  font-family:var(--f-display);font-size:19px;font-weight:600;line-height:1.28;
  transition:color .45s var(--ease),padding-left .45s var(--ease);
}
.tab::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;background:var(--gold-400);
  transform:scaleY(0);transition:transform .5s var(--ease)}
.tab .tnum{font-family:var(--f-sans);font-size:10px;letter-spacing:.2em;color:var(--gold-500);
  flex:0 0 24px;padding-top:6px}
.tab[aria-expanded="true"]{color:var(--ink);padding-left:18px}
.tab[aria-expanded="true"]::before{transform:scaleY(1)}
@media(hover:hover){.tab:hover{color:var(--ink)}}
.tab:focus-visible{outline:2px solid var(--gold-400);outline-offset:3px}

.tabpanel{grid-column:2;grid-row:1 / span 99;align-self:start;display:none}
.tabpanel[data-on]{display:block;animation:tabIn .5s var(--ease)}
@keyframes tabIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.tabpanel .pico{
  width:74px;height:74px;border-radius:50%;display:grid;place-items:center;position:relative;
  border:1px solid rgba(201,164,78,.55);margin-bottom:26px;
}
.tabpanel .pico::before{content:"";position:absolute;inset:6px;border-radius:50%;border:1px solid rgba(201,164,78,.24)}
.tabpanel .pico svg{width:26px;height:26px;stroke:var(--gold-500);fill:none;stroke-width:1.15}
.tabpanel h3{font-size:clamp(26px,2.9vw,36px);margin-bottom:16px}
.tabpanel p{margin:0;color:var(--ink-2);font-size:16.5px;line-height:1.8;max-width:50ch}
.tabpanel .who{
  display:inline-block;margin-top:28px;padding-top:18px;border-top:1px solid var(--line-light);
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-500);
}

@media(max-width:900px){
  /* source order is already button,panel,button,panel — just unwind the grid */
  .tabs{display:block}
  .tab{padding:20px 12px 20px 0;font-size:20px;border-bottom:0}
  .tab[aria-expanded="true"]{padding-left:14px}
  .tab .chev{margin-left:auto;flex:0 0 auto;transition:transform .5s var(--ease);color:var(--gold-500)}
  .tab[aria-expanded="true"] .chev{transform:rotate(180deg)}
  .tabpanel{border-bottom:1px solid var(--line-light)}
  .tabpanel[data-on]{padding:0 0 30px 14px}
  .tabpanel h3{display:none}
  .tabpanel .pico{width:56px;height:56px;margin-bottom:18px}
  .tabpanel p{font-size:15.5px;max-width:none}
}
.tab .chev{display:none}
@media(max-width:900px){.tab .chev{display:block}}

/* ============================================================
   SERVICES PAGE — sticky index + entries
   ============================================================ */
.svc-layout{display:grid;grid-template-columns:minmax(200px,.68fr) 1.6fr;gap:clamp(30px,5vw,80px);align-items:start}
@media(max-width:900px){.svc-layout{grid-template-columns:1fr}}
.svc-index{position:sticky;top:110px}
@media(max-width:900px){.svc-index{display:none}}
.svc-index ol{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--line-light)}
.svc-index li{border-bottom:1px solid var(--line-light)}
.svc-index a{display:flex;gap:12px;padding:12px 0;font-size:14px;color:var(--ink-3);transition:color .4s var(--ease),padding-left .4s var(--ease)}
.svc-index a span{font-size:10px;letter-spacing:.16em;color:var(--gold-500);flex:0 0 22px;padding-top:3px}
.svc-index a:hover{color:var(--ink)}
.svc-index a.on{color:var(--ink);padding-left:10px}

.svc-entry{padding:clamp(34px,4vw,54px) 0;border-bottom:1px solid var(--line-light);display:grid;
  grid-template-columns:64px 1fr;gap:clamp(18px,2.4vw,34px);align-items:start;scroll-margin-top:120px}
.svc-entry:first-child{padding-top:0}
@media(max-width:560px){.svc-entry{grid-template-columns:1fr;gap:18px}}
.svc-entry .eico{width:56px;height:56px;border:1px solid rgba(201,164,78,.45);display:grid;place-items:center;
  transform:rotate(45deg);transition:.6s var(--ease)}
.svc-entry .eico svg{width:22px;height:22px;stroke:var(--gold-500);fill:none;stroke-width:1.2;transform:rotate(-45deg)}
@media(hover:hover){.svc-entry:hover .eico{background:rgba(201,164,78,.08)}}
.svc-entry .tag{display:block;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-500);margin-bottom:10px}
.svc-entry h3{font-size:clamp(26px,3vw,36px);margin-bottom:14px}
.svc-entry p{margin:0;color:var(--ink-2);font-size:16.5px;line-height:1.8;max-width:56ch}
.svc-entry .note{margin-top:18px;font-size:14px;color:var(--ink-3);padding-left:18px;border-left:1px solid var(--line-light)}

/* two-up feature strip used on both sub-pages */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(201,164,78,.22);
  border-top:1px solid rgba(201,164,78,.22);border-bottom:1px solid rgba(201,164,78,.22)}
@media(max-width:760px){.duo{grid-template-columns:1fr}}
.duo > div{background:var(--green-900);padding:clamp(34px,4vw,56px)}
.duo h3{font-size:clamp(23px,2.4vw,30px);margin-bottom:14px;color:var(--ivory)}
.duo p{margin:0;color:rgba(251,249,244,.62);font-size:15.5px;line-height:1.78}
.duo .n{font-family:var(--f-display);font-size:14px;letter-spacing:.32em;color:var(--gold-400);display:block;margin-bottom:18px}

/* CC BY-SA attribution for the Minar-e-Pakistan photograph (required by its licence) */
.foot-bot .credit{flex-basis:100%;font-size:10.5px;color:rgba(251,249,244,.34);letter-spacing:.02em;margin-top:6px}
.foot-bot .credit a{text-decoration:underline;text-underline-offset:2px}
.foot-bot .credit a:hover{color:var(--gold-200)}

/* ============================================================
   MOBILE HERO — lift the copy so both monuments read
   ============================================================ */
@media(max-width:640px){
  /* pull the whole column up; the monuments sit lower in the frame */
  .hero{padding-top:clamp(88px,12vh,110px)}
  .hero-in{align-self:start;padding-bottom:0}
  .hero-mark{margin-bottom:18px}
  .hero h1{margin-bottom:20px}
  .hero p.lead{margin-bottom:26px}

  /* let the background show through the primary button — same gold, less opaque */
  .hero-cta .btn:not(.btn-ghost){
    background:linear-gradient(135deg,rgba(235,215,155,.42),rgba(201,164,78,.42));
    color:var(--gold-100);border-color:rgba(201,164,78,.62);
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  }

  /* the veil was tuned for centred copy — follow the copy upward */
  .hero-veil{background:radial-gradient(74% 52% at 50% 34%,
    rgba(4,20,13,.94) 0%,rgba(4,20,13,.76) 46%,rgba(4,20,13,.24) 84%,rgba(4,20,13,0) 100%)}
}

/* ============================================================
   PARTNER TIERS — cards, each in its own metal
   ============================================================ */
#join{position:relative;overflow:hidden}
#join::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 46% at 50% 8%,rgba(201,164,78,.13),rgba(201,164,78,0) 72%)}
#join .wrap{position:relative;z-index:2}

.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
@media(max-width:1000px){.tiers{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tiers{grid-template-columns:1fr;gap:16px}}

/* per-tier metal — each card is FILLED with its own metal.
   --f1/--f2 fill gradient, --tx primary text, --tx2 body text, --rankc rank label,
   --rim internal rule, --gem gem highlight */
.t-diamond{--f1:#C6E3F6;--f2:#79AFD3;--f3:#4E8CB4;--tx:#082334;--tx2:#0F3B54;--rankc:#12506F;
  --rim:rgba(8,35,52,.34);--gem:linear-gradient(135deg,#FFFFFF,#4E8CB4)}
.t-platinum{--f1:#E2E8EE;--f2:#AEB9C6;--f3:#8B98A8;--tx:#131A22;--tx2:#26303A;--rankc:#3A4551;
  --rim:rgba(19,26,34,.32);--gem:linear-gradient(135deg,#FFFFFF,#8B98A8)}
.t-gold{--f1:#F0D68E;--f2:#C9A44E;--f3:#A57F2C;--tx:#241906;--tx2:#3C2C0A;--rankc:#543D0E;
  --rim:rgba(36,25,6,.36);--gem:linear-gradient(135deg,#FFF6DE,#A57F2C)}
.t-silver{--f1:#D9DDE0;--f2:#A2AAB0;--f3:#7E868C;--tx:#14181B;--tx2:#282F34;--rankc:#3D444A;
  --rim:rgba(20,24,27,.30);--gem:linear-gradient(135deg,#FFFFFF,#7E868C)}

.tier{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  padding:38px 28px 32px;
  color:var(--tx);
  background:
    linear-gradient(118deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,0) 34%),
    linear-gradient(160deg,var(--f1) 0%,var(--f2) 48%,var(--f3) 100%);
  border:1px solid var(--rim);
  box-shadow:0 12px 34px -22px rgba(4,20,13,.55);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
/* brighter crown along the top edge */
.tier::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,rgba(255,255,255,.9),rgba(255,255,255,.35));
  opacity:.85;transition:opacity .5s var(--ease)}
@media(hover:hover){
  .tier:hover{transform:translateY(-8px);
    box-shadow:0 30px 62px -28px rgba(4,20,13,.55)}
  .tier:hover::before{opacity:1}
  .tier:hover .tier-gem{transform:rotate(45deg) scale(1.18)}
}

.tier-gem{width:22px;height:22px;display:block;margin-bottom:22px;
  transform:rotate(45deg);background:var(--gem);
  box-shadow:0 6px 18px -8px rgba(21,26,22,.55),0 0 0 1px rgba(255,255,255,.55) inset,0 0 0 1px rgba(0,0,0,.16);
  transition:transform .6s var(--ease)}
.tier-rank{display:block;font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--rankc);margin-bottom:10px}
.tier h3{font-family:var(--f-display);font-size:27px;font-weight:600;margin:0 0 12px;color:var(--tx)}
.tier>p{font-size:14.5px;line-height:1.7;color:var(--tx2);margin:0 0 22px}

.tier-list{list-style:none;margin:auto 0 0;padding:22px 0 0;border-top:1px solid var(--rim);
  display:grid;gap:11px}
.tier-list li{position:relative;padding-left:22px;font-size:13.5px;line-height:1.55;color:var(--tx2)}
.tier-list li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;
  border-left:1px solid var(--tx);border-bottom:1px solid var(--tx);opacity:.75;
  transform:rotate(-45deg) translateY(-1px)}

.tier-note{text-align:center;max-width:60ch;margin:clamp(28px,3vw,38px) auto 0;
  font-size:13.5px;letter-spacing:.01em;color:var(--ink-3)}

@media(max-width:560px){
  .tier{padding:30px 24px 26px}
  .tier h3{font-size:24px}
}


/* ============================================================
   VERSION 1.1 — expanded site architecture
   Nav dropdowns, grouped drawer, and the page components the
   new sections need. Same tokens, same rules: hairlines and
   structural forms, never rounded cards or shadowed boxes.
   ============================================================ */

/* ---------- Anchors clear the fixed nav ---------- */
[id]{scroll-margin-top:110px}

/* ---------- Nav: six items need more room ---------- */
/* every label stays on one line — a wrapped nav item doubles the bar's height */
.menu{gap:24px}
.menu > li > a,.nav .btn,.brand-txt b{white-space:nowrap}
.nav-in{gap:24px}
.nav-in > *{flex:0 0 auto}
/* below this the six-item bar cannot hold one line — hand over to the drawer */
@media(max-width:1239px){
  .menu{display:none}
  .nav .btn{display:none}
  .burger{display:block}
}
/* 1240–1440: tighten the bar rather than let it wrap */
@media(max-width:1440px){
  .menu{gap:18px}
  .menu > li > a{font-size:11px;letter-spacing:.11em}
  .nav .btn{padding:12px 18px;font-size:11px;letter-spacing:.16em}
  .brand-txt b{font-size:15px}
}
.menu .on{color:var(--ivory)}
.menu > li > .on::after{width:100%}

.has-sub{position:relative}
.has-sub > a{display:inline-flex;align-items:center;gap:8px}
.chv{width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.7;transition:transform .35s var(--ease)}
.has-sub:hover > a .chv,.has-sub:focus-within > a .chv{transform:translateY(1px) rotate(225deg)}

.sub{
  position:absolute;top:100%;left:-22px;z-index:5;min-width:264px;list-style:none;margin:0;padding:0;
  /* transparent top border bridges the gap to the trigger without a background seam */
  border-top:18px solid transparent;background-clip:padding-box;
  background-color:var(--green-900);
  box-shadow:inset 0 0 0 1px rgba(201,164,78,.2);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.has-sub:hover > .sub,.has-sub:focus-within > .sub{opacity:1;visibility:visible;transform:none}
.sub li+li{border-top:1px solid rgba(201,164,78,.12)}
.sub a{display:block;padding:14px 22px;font-size:11px;letter-spacing:.14em;color:rgba(251,249,244,.72)}
.sub a::after{display:none}
.sub a:hover,.sub a.on{background:rgba(201,164,78,.1);color:var(--gold-100)}
@media(max-width:1239px){.sub{display:none}}

/* ---------- Drawer: grouped, not a wall of display type ---------- */
.drawer{padding:104px var(--pad) 56px}
.drawer-in{max-width:560px;margin:0 auto}
.dgroup{margin-bottom:30px}
.dhead{font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-400);
  margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid rgba(201,164,78,.22)}
.drawer .dgroup a{font-family:var(--f-display);font-size:20px;line-height:1.3;padding:11px 0;
  border-bottom:1px solid rgba(201,164,78,.1)}
.drawer .dgroup li:last-child a{border-bottom:0}
.drawer .dgroup a.on{color:var(--gold-200)}
@media(max-width:640px){.drawer{padding-top:96px}.drawer .dgroup a{font-size:18px}}

/* ---------- Impact strip: the stats row, honest about what it counts ---------- */
.impact-note{margin:26px auto 0;max-width:760px;text-align:center;font-size:13.5px;line-height:1.75;
  color:rgba(251,249,244,.56)}
.impact-note b{color:var(--gold-300);font-weight:400}

/* ---------- Notice: a hairline aside, no box ---------- */
.notice{border-left:1px solid var(--gold-400);padding:6px 0 6px 22px;margin:30px 0 0;
  font-size:14.5px;line-height:1.75;color:var(--ink-3)}
.notice b{display:block;font-family:var(--f-display);font-size:17px;color:var(--ink);
  font-weight:600;margin-bottom:5px}
.on-dark .notice,.forum .notice{border-left-color:rgba(201,164,78,.55);color:rgba(251,249,244,.6)}
.on-dark .notice b,.forum .notice b{color:var(--ivory)}

/* ---------- Plates: hairline-ruled blocks for categories and programmes ---------- */
.plates{display:grid;gap:1px;background:var(--line-light);border:1px solid var(--line-light)}
.plates.p2{grid-template-columns:repeat(2,1fr)}
.plates.p3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.plates.p3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.plates.p2,.plates.p3{grid-template-columns:1fr}}
.plate{background:var(--ivory);padding:clamp(28px,3vw,42px);position:relative;transition:background .5s var(--ease)}
@media(hover:hover){.plate:hover{background:var(--paper)}}
.plate .pn{display:block;font-family:var(--f-display);font-size:13px;letter-spacing:.3em;
  color:var(--gold-500);margin-bottom:16px}
.plate h3{font-size:clamp(21px,2.1vw,26px);margin-bottom:12px}
.plate p{margin:0;font-size:15px;line-height:1.75;color:var(--ink-2)}
.plate ul{margin:18px 0 0;padding:0;list-style:none}
.plate li{position:relative;padding-left:22px;margin-bottom:9px;font-size:14.5px;color:var(--ink-2);line-height:1.65}
.plate li::before{content:"";position:absolute;left:0;top:11px;width:11px;height:1px;background:var(--gold-400)}
.on-dark .plates{background:rgba(201,164,78,.22);border-color:rgba(201,164,78,.22)}
.on-dark .plate{background:var(--green-900)}
@media(hover:hover){.on-dark .plate:hover{background:var(--green-850)}}
.on-dark .plate p,.on-dark .plate li{color:rgba(251,249,244,.62)}
.on-dark .plate li::before{background:var(--gold-400)}

/* ---------- Programme entry: purpose / work / partners / impact ---------- */
.prog{padding:clamp(44px,5vw,72px) 0;border-bottom:1px solid var(--line-light)}
.prog:first-of-type{padding-top:0}
.prog-head{display:flex;align-items:flex-start;gap:22px;margin-bottom:30px}
.prog-num{font-family:var(--f-display);font-size:clamp(28px,3vw,40px);line-height:1;
  color:var(--gold-400);opacity:.8;flex:0 0 auto}
.prog-head h3{font-size:clamp(25px,2.8vw,34px);line-height:1.15;margin-bottom:8px}
.prog-head .who{display:block;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-500);margin-top:10px}
.prog-body{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,48px)}
@media(max-width:820px){.prog-body{grid-template-columns:1fr;gap:26px}}
.pblock h4{font-family:var(--f-sans);font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-3);font-weight:400;margin:0 0 10px}
.pblock p{margin:0;font-size:15.5px;line-height:1.78;color:var(--ink-2)}
.pblock ul{margin:0;padding:0;list-style:none}
.pblock li{position:relative;padding-left:22px;margin-bottom:8px;font-size:15px;color:var(--ink-2);line-height:1.65}
.pblock li::before{content:"";position:absolute;left:0;top:11px;width:11px;height:1px;background:var(--gold-400)}
.pblock .pending{color:var(--ink-3);font-size:14.5px;font-style:normal}

/* ---------- Sponsorship: level + contribution ---------- */
.tier-amount{display:block;font-family:var(--f-display);font-size:clamp(26px,2.6vw,34px);
  font-weight:600;line-height:1;margin:2px 0 16px;color:var(--tx)}
.tier-amount small{display:block;font-family:var(--f-sans);font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;font-weight:400;margin-top:8px;color:var(--tx2);opacity:.85}

/* ---------- Events ---------- */
.evt{display:grid;grid-template-columns:180px 1fr;gap:clamp(20px,3vw,44px);
  padding:clamp(30px,3.4vw,46px) 0;border-bottom:1px solid var(--line-light)}
.evt:first-of-type{padding-top:0}
@media(max-width:720px){.evt{grid-template-columns:1fr;gap:14px}}
.evt-when{font-family:var(--f-display);font-size:19px;line-height:1.35;color:var(--ink)}
.evt-when span{display:block;font-family:var(--f-sans);font-size:9.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold-500);margin-top:8px}
.evt h3{font-size:clamp(22px,2.3vw,29px);margin-bottom:12px}
.evt p{margin:0 0 14px;font-size:15.5px;line-height:1.78;color:var(--ink-2);max-width:60ch}
.evt-meta{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:13.5px;color:var(--ink-3)}
.evt-meta b{font-weight:400;color:var(--ink);font-family:var(--f-display);font-size:15px}
.evt-status{display:inline-block;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-600);border:1px solid rgba(201,164,78,.45);padding:5px 12px;margin-bottom:14px}

/* ---------- Empty state: honest, not apologetic ---------- */
.empty{border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light);
  padding:clamp(44px,5vw,72px) clamp(20px,4vw,56px);text-align:center}
.empty h3{font-size:clamp(21px,2.2vw,27px);margin-bottom:12px}
.empty p{margin:0 auto;max-width:56ch;font-size:15.5px;line-height:1.8;color:var(--ink-3)}

/* ---------- Detail rows: date / venue / host ---------- */
.facts{border-top:1px solid rgba(201,164,78,.22)}
.fact{display:grid;grid-template-columns:220px 1fr;gap:20px;padding:20px 0;
  border-bottom:1px solid rgba(201,164,78,.16);align-items:baseline}
@media(max-width:640px){.fact{grid-template-columns:1fr;gap:6px;padding:16px 0}}
.fact dt{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-400)}
.fact dd{margin:0;font-family:var(--f-display);font-size:19px;line-height:1.45;color:var(--ivory)}
.fact dd small{display:block;font-family:var(--f-sans);font-size:13.5px;letter-spacing:0;
  color:rgba(251,249,244,.55);margin-top:5px;line-height:1.6}
.facts.on-light{border-top-color:var(--line-light)}
.facts.on-light .fact{border-bottom-color:var(--line-light)}
.facts.on-light dt{color:var(--gold-600)}
.facts.on-light dd{color:var(--ink)}
.facts.on-light dd small{color:var(--ink-3)}

/* ---------- Contact: enquiry routes ---------- */
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-light);
  border:1px solid var(--line-light)}
@media(max-width:900px){.routes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.routes{grid-template-columns:1fr}}
.route{background:var(--ivory);padding:26px 24px}
.route b{display:block;font-family:var(--f-display);font-size:19px;font-weight:600;margin-bottom:6px}
.route span{display:block;font-size:14px;line-height:1.7;color:var(--ink-3)}
.route a{color:var(--gold-600);border-bottom:1px solid rgba(201,164,78,.4)}
.route a:hover{color:var(--ink)}

/* ---------- Legal / policy prose ---------- */
.legal{max-width:74ch}
.legal h2{font-size:clamp(23px,2.4vw,30px);margin:clamp(38px,4vw,56px) 0 14px}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{font-size:16px;line-height:1.85;color:var(--ink-2)}
.legal p{margin:0 0 16px}
.legal ul{margin:0 0 16px;padding:0;list-style:none}
.legal li{position:relative;padding-left:24px;margin-bottom:9px}
.legal li::before{content:"";position:absolute;left:0;top:13px;width:12px;height:1px;background:var(--gold-400)}
.legal .stamp{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  padding-bottom:22px;border-bottom:1px solid var(--line-light);margin-bottom:clamp(34px,4vw,50px)}

/* ---------- Leadership bios ---------- */
.person p.bio{margin-top:12px}
.person .ph.tall{aspect-ratio:1/1.14}

/* ---------- Footer additions ---------- */
.foot-org{margin:0 0 14px;line-height:1.35}
.foot-org b{display:block;font-family:var(--f-display);font-size:19px;font-weight:600;color:var(--ivory)}
.foot-org span{display:block;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-300);margin-top:5px}
.foot-sig{margin:20px 0 0;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:rgba(251,249,244,.42)}
.foot-legal{display:flex;flex-wrap:wrap;gap:10px 28px;padding:22px 0;
  border-top:1px solid rgba(201,164,78,.16);font-size:12.5px}
.foot-legal a{color:rgba(251,249,244,.6)}
.foot-legal a:hover{color:var(--gold-200)}
.foot-bot{border-top:1px solid rgba(201,164,78,.16)}

/* ---------- Buttons on light grounds ---------- */
.btn-line{color:var(--gold-600)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(30px,3.4vw,44px)}
.cta-row.center{justify-content:center}

/* ---------- Forms: paired fields + dark-ground variant ---------- */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:520px){.field-row{grid-template-columns:1fr;gap:0}}
.on-dark .form-head{border-top-color:rgba(201,164,78,.28)}
.on-dark .field label{color:var(--gold-300)}
.on-dark .field input,.on-dark .field select,.on-dark .field textarea{
  color:var(--ivory);border-bottom-color:rgba(201,164,78,.28)}
.on-dark .field input::placeholder,.on-dark .field textarea::placeholder{color:rgba(251,249,244,.34)}
.on-dark .field input:focus,.on-dark .field select:focus,.on-dark .field textarea:focus{
  border-bottom-color:var(--gold-300)}
/* native option lists render on the UA's own ground — keep them readable */
.on-dark .field select option{color:var(--ink);background:var(--ivory)}
.on-dark .form-note{color:rgba(251,249,244,.5)}
.form-note.ok{color:var(--gold-300)}
.form-note.err{color:#E2A08A}
.info-item span a{border-bottom:1px solid rgba(201,164,78,.4)}
.info-item span a:hover{color:var(--gold-600)}
.facts dd a{border-bottom:1px solid rgba(201,164,78,.4)}
.facts dd a:hover{color:var(--gold-200)}