/* ==========================================================================
   Madina Tul Ilm Education High School System, Multan
   madinatulilm.edu.pk  —  stylesheet
   ========================================================================== */

:root{
  /* Palette drawn from the school crest and from Multan's glazed tilework */
  --green-900:#0a2718;
  --green-800:#0f3823;
  --green-700:#164a2c;
  --green-600:#1d5c37;
  --green-100:#dfe9df;
  --gold-700:#8e6222;
  --gold-600:#a8762c;
  --gold-500:#c19340;
  --gold-400:#d8b16a;
  --gold-200:#ecd9ae;
  --cream-50:#fdfbf5;
  --cream-100:#f8f3e7;
  --cream-200:#efe7d3;
  --cream-300:#e2d7bd;
  --ink:#1c1a16;
  --ink-soft:#4e493f;
  --ink-faint:#77705f;
  --maroon:#7c2420;
  --rule:#d9cfb6;

  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Archivo","Segoe UI",Tahoma,sans-serif;
  --urdu:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq",serif;

  --wrap:1180px;
  --gutter:clamp(1.15rem,4vw,3rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--cream-50);color:var(--ink);
  font-family:var(--sans);font-size:1.0125rem;line-height:1.72;
  font-weight:400;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--green-700);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--gold-700)}
h1,h2,h3,h4,h5{font-family:var(--serif);font-weight:600;line-height:1.16;margin:0;letter-spacing:-.01em;color:var(--green-900)}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.05em;padding-left:1.15em}
li{margin-bottom:.4em}
hr{border:0;border-top:1px solid var(--rule);margin:2.5rem 0}
::selection{background:var(--gold-200);color:var(--green-900)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.urdu{font-family:var(--urdu);direction:rtl;line-height:2.35}
/* Urdu accent lines sit inside left-aligned English blocks, so keep the glyph
   shaping RTL but align the line with its English sibling rather than letting
   it drift to the far right of a wide container. */
.wordmark__urdu,.hero__urdu,.pagehead__urdu,.stage__urdu,
.footer__motto,.footer__brand span,.callout__urdu{text-align:left}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--green-800);color:#fff;padding:.7rem 1.1rem;z-index:200}
.skip:focus{left:.5rem;top:.5rem}
:focus-visible{outline:2.5px solid var(--gold-600);outline-offset:2px}

/* --------------------------------------------------------------- utility bar */
.utility{background:var(--green-900);color:var(--green-100);font-size:.795rem;letter-spacing:.015em}
.utility .wrap{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;align-items:center;min-height:2.5rem;padding-block:.4rem}
.utility a{color:var(--green-100);text-decoration:none}
.utility a:hover{color:var(--gold-400)}
.utility__item{display:inline-flex;align-items:center;gap:.42rem;white-space:nowrap}
.utility__item svg{width:13px;height:13px;flex:none;opacity:.75}
.utility__spacer{margin-left:auto}
.utility__badge{
  display:inline-flex;align-items:center;gap:.45rem;
  border:1px solid rgba(216,177,106,.45);color:var(--gold-400);
  padding:.16rem .6rem;border-radius:2px;font-size:.735rem;
  text-transform:uppercase;letter-spacing:.09em;font-weight:600;
}

/* ----------------------------------------------------------------- masthead */
.masthead{background:var(--cream-100);border-bottom:1px solid var(--rule);position:relative}
.masthead::after{content:"";position:absolute;inset:auto 0 0;height:3px;
  background:linear-gradient(90deg,var(--green-700) 0 34%,var(--gold-500) 34% 66%,var(--green-700) 66%)}
.masthead .wrap{display:flex;align-items:center;gap:clamp(.85rem,2.4vw,1.5rem);padding-block:1.05rem 1.15rem}
/* The school's own crest. Portrait proportions, so it is sized by width and
   allowed to stand slightly taller than the wordmark beside it. */
.crest{width:clamp(74px,10vw,108px);flex:none}
.crest img,.crest svg{width:100%;height:auto;display:block}
/* The crest carries a dark subtitle beneath its ribbon, so on the dark green
   footer it needs a light panel behind it to stay legible. */
.crest--chip{width:78px;background:var(--cream-50);border-radius:4px;padding:.42rem .3rem;
  box-shadow:0 1px 0 rgba(0,0,0,.25)}
.wordmark{min-width:0;flex:0 1 auto;margin-right:auto}
.wordmark__name{
  font-family:var(--serif);font-weight:700;color:var(--green-900);
  font-size:clamp(1.06rem,2.85vw,1.72rem);line-height:1.1;letter-spacing:-.015em;margin:0;
}
.wordmark__name a{color:inherit;text-decoration:none}
.wordmark__urdu{font-family:var(--urdu);direction:rtl;color:var(--gold-700);
  font-size:clamp(.85rem,2.1vw,1.15rem);line-height:2;margin:.16rem 0 .1rem}
.wordmark__meta{font-size:.775rem;color:var(--ink-faint);letter-spacing:.055em;text-transform:uppercase;font-weight:500}
.masthead__aside{display:none;text-align:right;flex:none;font-size:.8rem;line-height:1.5;color:var(--ink-soft)}
.masthead__aside strong{display:block;font-family:var(--serif);font-size:1.06rem;color:var(--green-800)}
@media(min-width:1000px){.masthead__aside{display:block}}

/* --------------------------------------------------------------------- nav */
.nav{background:var(--green-800);position:sticky;top:0;z-index:100;box-shadow:0 1px 0 rgba(0,0,0,.2)}
.nav .wrap{display:flex;align-items:stretch;gap:0}
.nav__toggle{
  display:flex;align-items:center;gap:.55rem;background:none;border:0;cursor:pointer;
  color:var(--cream-100);font-family:var(--sans);font-size:.87rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;padding:.9rem 0;margin-right:auto;
}
.nav__toggle svg{width:17px;height:17px}
.nav__list{display:none;list-style:none;margin:0;padding:0 0 .6rem}
.nav__list.is-open{display:block}
.nav__list a{
  display:block;color:var(--cream-100);text-decoration:none;font-size:.905rem;
  padding:.62rem .2rem;border-bottom:1px solid rgba(255,255,255,.09);font-weight:500;
}
.nav__list a .u{font-family:var(--urdu);font-size:.82em;opacity:.62;margin-left:.5rem}
.nav__list a:hover,.nav__list a[aria-current=page]{color:var(--gold-400)}
@media(min-width:1000px){
  .nav__toggle{display:none}
  .nav__list{display:flex!important;padding:0;gap:.1rem;flex-wrap:wrap}
  .nav__list a{
    border-bottom:0;padding:.98rem .82rem;font-size:.845rem;letter-spacing:.028em;
    position:relative;white-space:nowrap;
  }
  .nav__list a .u{display:none}
  .nav__list a::after{
    content:"";position:absolute;left:.82rem;right:.82rem;bottom:.5rem;height:2px;
    background:var(--gold-500);transform:scaleX(0);transition:transform .18s ease;
  }
  .nav__list a:hover::after,.nav__list a[aria-current=page]::after{transform:scaleX(1)}
  .nav__list a[aria-current=page]{color:#fff}
}

/* -------------------------------------------------------------------- hero */
.hero{position:relative;background:var(--green-900);overflow:hidden}
.hero__img{position:absolute;inset:0}
.hero__img img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero__img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,39,24,.9) 0%,rgba(10,39,24,.62) 42%,rgba(10,39,24,.88) 100%)}
.hero__body{position:relative;padding-block:clamp(3.1rem,8vw,6.2rem)}
.hero__kicker{
  display:inline-flex;align-items:center;gap:.5rem;color:var(--gold-400);
  font-size:.755rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  border-top:1px solid rgba(216,177,106,.5);border-bottom:1px solid rgba(216,177,106,.5);
  padding:.34rem 0;margin-bottom:1.3rem;
}
.hero h1{color:#fff;font-size:clamp(1.85rem,5.4vw,3.5rem);font-weight:600;max-width:22ch;letter-spacing:-.022em}
.hero h1 em{font-style:normal;color:var(--gold-400)}
.hero__urdu{font-family:var(--urdu);direction:rtl;color:var(--gold-200);
  font-size:clamp(1rem,2.6vw,1.5rem);line-height:2.1;margin:.85rem 0 0;opacity:.92}
.hero__lede{color:rgba(255,255,255,.87);font-size:clamp(1rem,1.5vw,1.11rem);max-width:56ch;margin-top:1.15rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem}

/* free-education flag — the single most important message on the site */
.freeflag{
  background:var(--gold-500);color:var(--green-900);
  border-top:1px solid var(--gold-600);border-bottom:1px solid var(--gold-600);
}
.freeflag .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.4rem;padding-block:.85rem}
.freeflag__lead{font-family:var(--serif);font-weight:700;font-size:clamp(1.02rem,2.3vw,1.3rem);letter-spacing:-.01em}
.freeflag__sub{font-size:.875rem;font-weight:500;color:#4a3410}
.freeflag__urdu{font-family:var(--urdu);direction:rtl;font-size:1.02rem;line-height:2;margin-left:auto;color:var(--green-900)}

/* ------------------------------------------------------------------ buttons */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);
  font-size:.875rem;font-weight:600;letter-spacing:.055em;text-transform:uppercase;
  padding:.82rem 1.4rem;border:1.5px solid transparent;border-radius:2px;
  text-decoration:none;cursor:pointer;transition:background .16s,color .16s,border-color .16s;
}
.btn--gold{background:var(--gold-500);color:var(--green-900);border-color:var(--gold-500)}
.btn--gold:hover{background:var(--gold-400);border-color:var(--gold-400);color:var(--green-900)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.btn--green{background:var(--green-700);color:#fff;border-color:var(--green-700)}
.btn--green:hover{background:var(--green-600);border-color:var(--green-600);color:#fff}
.btn--outline{background:transparent;color:var(--green-800);border-color:var(--green-700)}
.btn--outline:hover{background:var(--green-700);color:#fff}

/* ------------------------------------------------------------------ facts */
.facts{background:var(--green-800);color:#fff;border-bottom:3px solid var(--gold-600)}
.facts__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
@media(min-width:760px){.facts__grid{grid-template-columns:repeat(4,1fr)}}
.fact{padding:1.5rem clamp(.9rem,2vw,1.5rem);border-right:1px solid rgba(255,255,255,.11);border-bottom:1px solid rgba(255,255,255,.11)}
@media(min-width:760px){.fact{border-bottom:0}.fact:last-child{border-right:0}}
.fact__v{font-family:var(--serif);font-size:clamp(1.3rem,3vw,1.85rem);font-weight:600;color:var(--gold-400);line-height:1.1;display:block}
.fact__k{font-size:.755rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:.4rem;font-weight:500}

/* ----------------------------------------------------------------- section */
.section{padding-block:clamp(2.9rem,6.5vw,5.2rem)}
.section--cream{background:var(--cream-100)}
.section--green{background:var(--green-800);color:rgba(255,255,255,.9)}
.section--green h2,.section--green h3{color:#fff}
.section--tight{padding-block:clamp(2rem,4.5vw,3.2rem)}
.section__head{margin-bottom:clamp(1.6rem,3.5vw,2.6rem);max-width:64ch}
.eyebrow{
  display:block;font-size:.755rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold-700);font-weight:700;margin-bottom:.7rem;
}
.section--green .eyebrow{color:var(--gold-400)}
.section__head h2{font-size:clamp(1.5rem,3.6vw,2.32rem);letter-spacing:-.018em}
.section__head h2::after{content:"";display:block;width:52px;height:2px;background:var(--gold-500);margin-top:.85rem}
.section__head p{margin-top:1rem;color:var(--ink-soft);font-size:1.04rem}
.section--green .section__head p{color:rgba(255,255,255,.78)}

/* ------------------------------------------------------------- split layout */
.split{display:grid;gap:clamp(1.6rem,4vw,3.2rem)}
@media(min-width:900px){
  .split{grid-template-columns:1.08fr .92fr;align-items:start}
  .split--even{grid-template-columns:1fr 1fr}
  .split--aside{grid-template-columns:1.35fr .65fr}
  .split--flip>*:first-child{order:2}
}
.figure{margin:0}
.figure img{border:1px solid var(--rule)}
.figure figcaption{font-size:.8rem;color:var(--ink-faint);margin-top:.6rem;font-style:italic;line-height:1.5}
.prose h3{font-size:1.2rem;margin:1.9rem 0 .6rem}
.prose h3:first-child{margin-top:0}
.prose>p:last-child{margin-bottom:0}

/* ------------------------------------------------------------------- cards */
.grid{display:grid;gap:1.4rem}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
.grid--4{grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.grid--2{grid-template-columns:repeat(2,1fr)}.grid--3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.grid--3{grid-template-columns:repeat(3,1fr)}.grid--4{grid-template-columns:repeat(4,1fr)}}

.card{background:#fff;border:1px solid var(--rule);border-top:3px solid var(--green-700);padding:1.5rem 1.4rem;display:flex;flex-direction:column}
.card--gold{border-top-color:var(--gold-500)}
.card__n{font-family:var(--serif);font-size:.9rem;color:var(--gold-700);font-weight:700;letter-spacing:.05em}
.card h3{font-size:1.13rem;margin:.5rem 0 .55rem}
.card p{font-size:.945rem;color:var(--ink-soft);margin-bottom:0}
.card ul{font-size:.925rem;color:var(--ink-soft);margin-top:.7rem;margin-bottom:0;padding-left:1.05em}
.card__foot{margin-top:auto;padding-top:1rem}
.card__link{font-size:.83rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;text-decoration:none}
.card__link::after{content:" →"}

/* stage cards (Play Group → Class 10) */
.stage{background:#fff;border:1px solid var(--rule);overflow:hidden;display:flex;flex-direction:column}
.stage img{width:100%;aspect-ratio:4/3;object-fit:cover}
.stage__body{padding:1.35rem 1.3rem;display:flex;flex-direction:column;flex:1}
.stage__tag{
  display:inline-block;background:var(--green-100);color:var(--green-800);
  font-size:.715rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.24rem .55rem;border-radius:2px;align-self:flex-start;margin-bottom:.7rem;
}
.stage h3{font-size:1.16rem;margin-bottom:.2rem}
.stage__urdu{font-family:var(--urdu);direction:rtl;color:var(--gold-700);font-size:.95rem;line-height:2;margin:0 0 .55rem}
.stage p{font-size:.925rem;color:var(--ink-soft);margin-bottom:.85rem}
.stage__list{list-style:none;padding:0;margin:auto 0 0;border-top:1px solid var(--cream-200);padding-top:.85rem;font-size:.87rem}
.stage__list li{display:flex;justify-content:space-between;gap:1rem;margin:0;padding:.32rem 0;color:var(--ink-soft)}
.stage__list li span:last-child{color:var(--green-800);font-weight:600;text-align:right}

/* ------------------------------------------------------------ notice board */
.notices{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule)}
.notice{display:grid;gap:.15rem .95rem;padding:1.05rem 0;border-bottom:1px solid var(--rule);margin:0}
@media(min-width:620px){.notice{grid-template-columns:6.9rem 1fr auto;align-items:baseline}}
.notice__date{font-family:var(--serif);font-size:.83rem;color:var(--gold-700);font-weight:600;letter-spacing:.02em;padding-right:.5rem}
.notice__t{font-family:var(--serif);font-size:1.04rem;color:var(--green-900);font-weight:600;line-height:1.35}
.notice__d{font-size:.895rem;color:var(--ink-soft);grid-column:1/-1}
@media(min-width:620px){.notice__d{grid-column:2/-1}}
.notice__tag{
  font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:.2rem .5rem;border-radius:2px;white-space:nowrap;align-self:center;
}
.notice__tag--admission{background:var(--green-100);color:var(--green-800)}
.notice__tag--exam{background:#f6e5e4;color:var(--maroon)}
.notice__tag--holiday{background:var(--cream-200);color:var(--gold-700)}
.notice__tag--event{background:#e6e9f2;color:#2f4372}

/* -------------------------------------------------------------- pef panel */
.pef{border:1px solid var(--gold-400);background:linear-gradient(180deg,var(--cream-100),#fff);padding:clamp(1.4rem,3vw,2.2rem)}
.pef__seal{
  width:60px;height:60px;flex:none;border-radius:50%;background:var(--green-700);
  display:grid;place-items:center;color:var(--gold-400);font-family:var(--serif);
  font-weight:700;font-size:1.02rem;letter-spacing:.02em;border:2px solid var(--gold-500);
}
.pef__top{display:flex;gap:1.1rem;align-items:center;margin-bottom:1.15rem}
.pef__top h3{font-size:1.2rem;margin:0}
.pef__top span{font-size:.8rem;color:var(--ink-faint);letter-spacing:.05em;text-transform:uppercase;font-weight:600}
.pef__list{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.pef__list li{display:flex;gap:.65rem;font-size:.93rem;color:var(--ink-soft);margin:0}
.pef__list li::before{content:"✓";color:var(--green-600);font-weight:700;flex:none}

/* ------------------------------------------------------------------ tables */
.table-scroll{overflow-x:auto;border:1px solid var(--rule);background:#fff}
table{width:100%;border-collapse:collapse;font-size:.925rem;min-width:32rem}
caption{text-align:left;font-size:.8rem;color:var(--ink-faint);padding:.75rem .9rem;font-style:italic;border-bottom:1px solid var(--rule)}
th,td{text-align:left;padding:.72rem .9rem;border-bottom:1px solid var(--cream-200);vertical-align:top}
thead th{background:var(--green-800);color:#fff;font-size:.755rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600;border-bottom:0}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:var(--cream-50)}
td strong{color:var(--green-800)}

/* ------------------------------------------------------------------ gallery */
.gallery{display:grid;gap:.7rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.gallery{grid-template-columns:repeat(4,1fr)}}
.gallery figure{margin:0;position:relative;overflow:hidden;background:var(--green-900)}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .45s ease,opacity .3s}
.gallery figure:hover img{transform:scale(1.045);opacity:.92}
.gallery figcaption{
  position:absolute;inset:auto 0 0;padding:1.9rem .8rem .6rem;color:#fff;font-size:.795rem;
  background:linear-gradient(180deg,transparent,rgba(10,39,24,.88));font-weight:500;
}

/* -------------------------------------------------------------------- steps */
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:1.15rem}
.step{counter-increment:s;display:grid;grid-template-columns:2.6rem 1fr;gap:1.1rem;margin:0;align-items:start}
.step::before{
  content:counter(s);font-family:var(--serif);font-weight:700;font-size:1.06rem;
  width:2.6rem;height:2.6rem;border-radius:50%;background:var(--green-700);color:var(--gold-400);
  display:grid;place-items:center;
}
.step h3{font-size:1.06rem;margin:.28rem 0 .32rem}
.step p{font-size:.93rem;color:var(--ink-soft);margin:0}

/* ---------------------------------------------------------------- callouts */
.callout{border-left:4px solid var(--gold-500);background:var(--cream-100);padding:1.15rem 1.3rem;margin:1.7rem 0}
.callout--green{border-left-color:var(--green-600);background:var(--green-100)}
.callout--maroon{border-left-color:var(--maroon);background:#f8eceb}
.callout h3{font-size:1.03rem;margin-bottom:.4rem}
.callout p:last-child{margin-bottom:0}
.callout__urdu{font-family:var(--urdu);direction:rtl;font-size:1rem;line-height:2.2;color:var(--green-800)}

.todo{
  display:inline-block;background:#fff5d6;border:1px dashed var(--gold-600);color:var(--gold-700);
  font-family:var(--sans);font-size:.775rem;font-weight:700;letter-spacing:.05em;
  padding:.1rem .45rem;border-radius:2px;white-space:nowrap;
}

/* ------------------------------------------------------------------- forms */
.form{display:grid;gap:1.05rem}
.field{display:grid;gap:.35rem}
.field label{font-size:.815rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--green-800)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:.97rem;padding:.72rem .8rem;
  border:1px solid var(--cream-300);border-radius:2px;background:#fff;color:var(--ink);width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green-600);outline:none;box-shadow:0 0 0 3px rgba(29,92,55,.13)}
.field textarea{min-height:7rem;resize:vertical}
.field__hint{font-size:.79rem;color:var(--ink-faint)}
@media(min-width:640px){.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}}

/* ------------------------------------------------------------ contact bits */
.contact-list{list-style:none;padding:0;margin:0;display:grid;gap:1.15rem}
.contact-list li{display:grid;grid-template-columns:1.9rem 1fr;gap:.85rem;margin:0}
.contact-list svg{width:18px;height:18px;color:var(--gold-600);margin-top:.28rem}
.contact-list dt,.contact-list b{display:block;font-size:.755rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}
.contact-list a{font-weight:500}
.map-frame{border:1px solid var(--rule);background:var(--cream-200);line-height:0}
.map-frame iframe{width:100%;height:340px;border:0;display:block}
@media(min-width:900px){.map-frame iframe{height:420px}}

.wa{display:inline-flex;align-items:center;gap:.55rem;background:#1d8a4f;color:#fff;text-decoration:none;
  font-size:.875rem;font-weight:600;padding:.75rem 1.2rem;border-radius:2px;letter-spacing:.03em}
.wa:hover{background:#17703f;color:#fff}
.wa svg{width:17px;height:17px}

/* ------------------------------------------------------------------- pager */
.pagehead{background:var(--green-800);color:#fff;position:relative;overflow:hidden}
.pagehead::before{
  content:"";position:absolute;inset:0;opacity:.13;
  background-image:radial-gradient(circle at 1px 1px,var(--gold-400) 1px,transparent 0);
  background-size:15px 15px;
}
.pagehead .wrap{position:relative;padding-block:clamp(2.1rem,5.5vw,3.6rem)}
.crumb{font-size:.79rem;color:rgba(255,255,255,.62);margin-bottom:.85rem;letter-spacing:.03em}
.crumb a{color:rgba(255,255,255,.82);text-decoration:none}
.crumb a:hover{color:var(--gold-400)}
.pagehead h1{color:#fff;font-size:clamp(1.7rem,4.6vw,2.85rem);letter-spacing:-.02em}
.pagehead__urdu{font-family:var(--urdu);direction:rtl;color:var(--gold-200);font-size:clamp(.95rem,2.3vw,1.3rem);line-height:2.1;margin-top:.5rem}
.pagehead p{color:rgba(255,255,255,.82);max-width:60ch;margin:1rem 0 0;font-size:1.03rem}

/* ------------------------------------------------------------------- CTA */
.cta{background:var(--green-900);color:#fff;text-align:center}
.cta .wrap{padding-block:clamp(2.6rem,6vw,4.2rem)}
.cta h2{color:#fff;font-size:clamp(1.45rem,3.6vw,2.2rem);max-width:26ch;margin-inline:auto}
.cta p{color:rgba(255,255,255,.8);max-width:52ch;margin:1rem auto 0}
.cta__btns{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:1.8rem}

/* ------------------------------------------------------------------ footer */
.footer{background:var(--green-900);color:rgba(255,255,255,.72);font-size:.9rem;border-top:3px solid var(--gold-600)}
.footer__main{display:grid;gap:2.1rem;padding-block:clamp(2.4rem,5vw,3.4rem)}
@media(min-width:820px){.footer__main{grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2.6rem}}
.footer h2,.footer h3{color:#fff;font-size:.79rem;letter-spacing:.12em;text-transform:uppercase;font-family:var(--sans);font-weight:700;margin-bottom:1.05rem}
.footer a{color:rgba(255,255,255,.72);text-decoration:none}
.footer a:hover{color:var(--gold-400)}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin-bottom:.55rem}
.footer__brand{display:flex;gap:.9rem;align-items:flex-start;margin-bottom:1.1rem}
.footer__brand strong{font-family:var(--serif);color:#fff;font-size:1.02rem;display:block;line-height:1.25}
.footer__brand span{font-family:var(--urdu);direction:rtl;color:var(--gold-400);font-size:.9rem;line-height:2}
.footer__motto{font-family:var(--urdu);direction:rtl;color:var(--gold-400);font-size:1.12rem;line-height:2.1;margin:0}
.footer__mottoen{font-style:italic;color:rgba(255,255,255,.6);font-size:.85rem;margin:.1rem 0 0}
.footer__bar{border-top:1px solid rgba(255,255,255,.13);padding-block:1.15rem;font-size:.8rem;
  display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;color:rgba(255,255,255,.52)}
.footer__bar .sp{margin-left:auto}

/* --------------------------------------------------------------- preview UI
   Only used by the single-file preview build, never by the deployed site. */
.pv-bar{position:sticky;top:0;z-index:300;background:#0a2718;border-bottom:1px solid rgba(216,177,106,.3);
  display:flex;gap:.3rem;align-items:center;padding:.5rem .8rem;overflow-x:auto}
.pv-bar b{color:var(--gold-400);font-family:var(--sans);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;white-space:nowrap;margin-right:.6rem;flex:none}
.pv-bar button{background:transparent;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.8);
  font-family:var(--sans);font-size:.775rem;padding:.34rem .7rem;border-radius:2px;cursor:pointer;white-space:nowrap}
.pv-bar button:hover{border-color:var(--gold-500);color:#fff}
.pv-bar button.on{background:var(--gold-500);border-color:var(--gold-500);color:var(--green-900);font-weight:600}
.pv-page{display:none}
.pv-page.on{display:block}

@media print{.nav,.utility,.pv-bar,.cta,.hero__cta{display:none}body{background:#fff}}