/* USTADAH — site styles. Mobile-first. */
:root{
  --em-900:#0E3B30; --em-800:#154A3D; --em-700:#1D5C4B; --em-500:#3A7D66; --em-100:#DCE8E0;
  --ivory:#FAF6EE; --paper:#FFFDF8; --mist:#EFE7D8; --line:#E3D9C6; --line-2:#D9CCB3;
  --sand-100:#F2EADB; --sand-200:#EADFC9; --sand-300:#E4D5BA;
  --gold-500:#B08D57; --gold-300:#D4B98A; --gold-700:#765A30;
  --ink:#1E2320; --body:#3A423E; --muted:#4B544F; --muted-2:#6B635A;
  --apricot:#F4DCC8; --terracotta:#8C4428;
  --danger:#A23B2A;
  --f-display:"Newsreader",Georgia,"Times New Roman",serif;
  --f-body:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-quran:"Amiri Quran","Amiri","Traditional Arabic",serif;
  --f-kufi:"Reem Kufi","Noto Kufi Arabic",sans-serif;
  --f-naskh:"Noto Naskh Arabic","Amiri",serif;
  --gutter:20px; --max:1200px; --radius:24px;
  --shadow:0 22px 44px -24px rgba(14,59,48,.38);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivory);color:var(--ink);font:500 16px/1.65 var(--f-body);text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:var(--em-800)}
a:hover{color:var(--em-900)}
a,button,summary,label[for],.opt{cursor:pointer}
:focus-visible{outline:3px solid var(--gold-500);outline-offset:3px;border-radius:6px}
h1,h2,h3,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul[role=list],ol[role=list]{list-style:none;padding:0}
[lang=ar]{font-feature-settings:normal}
[hidden]{display:none!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:12px;z-index:100;padding:12px 18px;border-radius:10px;background:var(--em-900);color:var(--ivory);font-weight:700;text-decoration:none}
.skip:focus{left:16px}
.wrap{width:100%;max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.section{padding:64px 0}
.section--tight{padding:40px 0}
.eyebrow{display:block;font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-700)}
.h1{font-family:var(--f-display);font-weight:400;font-size:clamp(42px,6.2vw,84px);line-height:1.0;letter-spacing:-.022em;text-wrap:balance}
.h2{font-family:var(--f-display);font-weight:400;font-size:clamp(32px,4vw,52px);line-height:1.1;letter-spacing:-.015em;text-wrap:balance}
.h3{font-family:var(--f-display);font-weight:500;font-size:clamp(22px,2.2vw,26px);line-height:1.18}
.lead{font-size:clamp(17px,1.6vw,20px);line-height:1.62;color:var(--body);text-wrap:pretty}
.muted{color:var(--muted)}
em.accent,.accent{font-style:italic;color:var(--em-700)}
.stack{display:flex;flex-direction:column;gap:16px}
.stack-lg{display:flex;flex-direction:column;gap:28px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.section-head{display:flex;flex-direction:column;gap:14px;margin-bottom:36px;max-width:720px}
.section-head--split{max-width:none}
@media(min-width:900px){.section-head--split{flex-direction:row;justify-content:space-between;align-items:flex-end}.section-head--split>div{max-width:680px}}
.center{text-align:center;align-items:center;margin-left:auto;margin-right:auto}

/* Arabic */
.quran{font-family:var(--f-quran);line-height:1.9;font-weight:400}
.kufi{font-family:var(--f-kufi)}
.naskh{font-family:var(--f-naskh);line-height:1.9}

/* Buttons */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;font:700 16px/1 var(--f-body);text-decoration:none;border:1.5px solid transparent;transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .15s ease}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--em-800);color:var(--ivory)}
.btn--primary:hover{background:var(--em-900);color:var(--ivory);box-shadow:0 12px 24px -12px rgba(14,59,48,.6)}
.btn--secondary{border-color:var(--em-800);color:var(--em-800);background:transparent}
.btn--secondary:hover{background:var(--sand-100);color:var(--em-900)}
.btn--light{background:var(--ivory);color:var(--em-900);font-weight:800}
.btn--light:hover{background:var(--mist);color:var(--em-900)}
.btn--lg{min-height:58px;padding:0 32px;font-size:17px}
.btn--block{width:100%}
.btn[disabled]{background:#D9D4C8;color:var(--muted-2);cursor:not-allowed}
.link-arrow{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;text-decoration:none}
.link-arrow svg{transition:transform .2s ease}
.link-arrow:hover svg{transform:translateX(3px)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(250,246,238,.94);backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand svg{width:36px;height:36px;flex-shrink:0}
.brand__name{display:flex;flex-direction:column;gap:3px}
.brand__word{font-weight:800;letter-spacing:.2em;font-size:17px;line-height:1}
.brand__tag{display:none;font-size:9.5px;letter-spacing:.22em;color:var(--gold-700);font-weight:700;line-height:1}
.nav{display:none}
.nav a{font-size:15px;font-weight:600;color:var(--muted);text-decoration:none;padding:10px 0 8px;border-bottom:2px solid transparent}
.nav a:hover{color:var(--em-800)}
.nav a[aria-current=page]{color:var(--em-800);font-weight:700;border-bottom-color:var(--gold-500)}
.header-actions{display:flex;align-items:center;gap:6px}
.header-actions .btn{min-height:44px;padding:0 16px;font-size:14px}
@media(max-width:359px){.brand__word{letter-spacing:.12em}}
.menu-btn{width:48px;height:48px;display:grid;place-items:center;border:0;background:transparent;border-radius:12px;color:var(--ink)}
.menu-btn:hover{background:var(--mist)}
@media(min-width:1024px){
  .site-header .wrap{height:84px}
  .brand svg{width:42px;height:42px}
  .brand__word{font-size:19px}
  .brand__tag{display:block}
  .nav{display:flex;gap:32px;align-items:center}
  .menu-btn{display:none}
  .header-actions .btn{min-height:48px;padding:0 24px;font-size:15px}
}

/* Mobile menu */
.mobile-menu{position:fixed;inset:0;z-index:80;background:var(--em-900);color:var(--ivory);display:flex;flex-direction:column;padding:0 var(--gutter) 28px;overflow-y:auto}
.mobile-menu[hidden]{display:none}
.mobile-menu__top{display:flex;justify-content:space-between;align-items:center;height:68px}
.mobile-menu__top .brand{color:var(--ivory)}
.mobile-menu .menu-btn{color:var(--ivory)}
.mobile-menu .menu-btn:hover{background:rgba(255,255,255,.08)}
.mobile-menu nav{display:flex;flex-direction:column;margin-top:16px}
.mobile-menu nav a{min-height:60px;display:flex;align-items:center;border-bottom:1px solid rgba(250,246,238,.14);color:var(--ivory);text-decoration:none;font-family:var(--f-display);font-size:28px}
.mobile-menu nav a[aria-current=page]{color:var(--gold-300)}
.mobile-menu__cta{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;gap:12px}
body.menu-open{overflow:hidden}

/* Hero */
.hero{position:relative;overflow:hidden}
.hero__bg{position:absolute;inset:0;pointer-events:none;opacity:.09}
.hero__grid{position:relative;display:grid;gap:40px;padding-top:32px;padding-bottom:56px;align-items:center}
.hero__copy{display:flex;flex-direction:column;gap:22px}
.bismillah{display:flex;align-items:center;gap:14px;justify-content:flex-start}
.bismillah p{font-size:22px;color:var(--em-800);line-height:1.8}
.bismillah svg{width:12px;height:12px;flex-shrink:0}
.audience{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:6px;padding:0;list-style:none;max-width:620px}
.audience a{display:flex;flex-direction:column;gap:2px;height:100%;padding:10px 12px;border-radius:16px;border:1px solid var(--line);background:var(--paper);text-decoration:none;color:var(--ink);min-height:44px;transition:border-color .2s ease,transform .2s ease}
.audience a:hover{border-color:var(--em-800);transform:translateY(-2px)}
.audience b{font-size:11px;font-weight:800;letter-spacing:.14em}
.audience span{font-size:13px;color:var(--muted);line-height:1.4}
@media(min-width:560px){.audience{gap:12px}.audience a{padding:12px 16px}.audience b{font-size:12px}.audience span{font-size:14px}}
.hero__visual{position:relative;height:460px}
.door{position:absolute;top:0;left:50%;width:min(100%,380px);height:100%;transform:translateX(-50%);border-radius:190px 190px 22px 22px;background:var(--em-900);overflow:hidden;box-shadow:0 50px 100px -50px rgba(14,59,48,.7)}
.door svg.door__art{position:absolute;inset:0;width:100%;height:100%}
.door__outline{position:absolute;top:-14px;left:50%;width:min(calc(100% + 28px),408px);height:calc(100% + 14px);transform:translateX(-50%);pointer-events:none}
.mushaf{position:absolute;left:50%;bottom:36px;width:86%;max-width:420px;aspect-ratio:460/250;transform:translateX(-50%)}
.mushaf svg{position:absolute;inset:0;width:100%;height:100%}
.mushaf__page{position:absolute;top:22%;width:40%;height:58%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px}
.mushaf__page--ar{right:6%}
.mushaf__page--en{left:6%}
.mushaf__page .quran{font-size:clamp(18px,2vw,27px);color:var(--em-900);line-height:1.8}
.mushaf__page p.tr{font-family:var(--f-display);font-style:italic;font-size:clamp(12px,1.25vw,17px);line-height:1.35;color:var(--ink)}
.mushaf__page small{font-size:9.5px;letter-spacing:.16em;font-weight:800;color:var(--gold-700)}
.hero__note{position:absolute;left:0;top:46%;width:236px;display:none;gap:12px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:16px 18px;box-shadow:var(--shadow)}
.hero__note .ico{flex-shrink:0;width:40px;height:40px;border-radius:12px;background:var(--em-100);display:grid;place-items:center}
.hero__note strong{display:block;font-size:15px}
.hero__note span{font-size:13.5px;line-height:1.45;color:var(--muted)}
.hero__cue{display:none}
@media(min-width:900px){
  .hero__grid{grid-template-columns:1.05fr .95fr;gap:48px;padding-top:0;padding-bottom:0;min-height:calc(100vh - 84px);max-height:900px}
  .hero__visual{height:100%;min-height:640px;align-self:stretch}
  .door{top:40px;left:auto;right:0;transform:none;width:min(92%,520px);height:calc(100% - 40px);border-radius:260px 260px 0 0}
  .door__outline{top:14px;left:auto;right:-14px;transform:none;width:min(calc(92% + 28px),548px);height:calc(100% - 14px)}
  .hero__note{display:flex}
  .hero__copy{padding-bottom:40px}
  .hero__cue{display:inline-flex;position:absolute;left:var(--gutter);bottom:22px}
}
@media(min-width:1240px){.hero__cue{left:calc((100vw - var(--max))/2)}}
.glow{animation:glow 6s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.7}50%{opacity:1}}
.draw path{stroke-dasharray:2000;stroke-dashoffset:2000;animation:draw 2.4s ease-out .2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.bob{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.cue{align-items:center;gap:10px;min-height:44px;font-size:14px;font-weight:700;color:var(--muted);text-decoration:none}
.cue span{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center}

/* Path finder */
.finder{background:var(--paper);border:1px solid var(--line);border-radius:28px;padding:24px 20px;display:grid;gap:24px}
.finder h2{font-family:var(--f-display);font-weight:400;font-size:clamp(24px,2.4vw,30px);line-height:1.2}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{min-height:44px;padding:10px 18px;border-radius:999px;border:1.5px solid var(--line-2);background:var(--ivory);color:var(--ink);font:600 15px/1.3 var(--f-body);text-align:left;transition:background .2s ease,border-color .2s ease,color .2s ease}
.chip:hover{border-color:var(--em-800)}
.chip[aria-pressed=true]{background:var(--em-800);border-color:var(--em-800);color:var(--ivory)}
.finder__result{min-height:150px;border-radius:20px;background:var(--sand-100);padding:22px 24px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.finder__result .title{font-family:var(--f-display);font-size:26px;line-height:1.15}
@media(min-width:900px){.finder{grid-template-columns:1.5fr 1fr;padding:36px 40px;align-items:center}}

/* Philosophy */
.philo{display:grid;gap:36px}
@media(min-width:900px){.philo{grid-template-columns:1fr 1fr;gap:96px}.philo__body{padding-top:44px}}
.hadith{position:relative;background:var(--sand-100);border-radius:110px 22px 22px 22px;padding:32px 28px 28px 36px;display:flex;flex-direction:column;gap:14px}
.hadith blockquote{font-family:var(--f-display);font-size:clamp(19px,1.8vw,22px);line-height:1.5}
.hadith figcaption{font-size:13.5px;font-weight:600;color:#5C5443}
.hadith figcaption a{color:#5C5443}

/* Course cards */
.courses{display:grid;gap:20px}
@media(min-width:640px){.courses{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.courses{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}}
.card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:24px;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card--dark{background:var(--em-900);border-color:var(--em-900);color:var(--ivory)}
.card__arch{height:160px;margin:14px 14px 0;border-radius:140px 140px 14px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.card__arch .kufi{font-size:22px}
.card__body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:12px;flex-grow:1}
.card__level{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:800;letter-spacing:.14em}
.meter{display:flex;gap:4px}
.meter i{width:18px;height:4px;border-radius:2px;background:var(--line-2)}
.card p{font-size:15px;line-height:1.6;color:var(--muted)}
.card--dark p{color:#D8D2C4}
.card dl{margin-top:auto;padding-top:14px;border-top:1px solid #EAE1CF;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:13.5px}
.card--dark dl{border-top-color:rgba(250,246,238,.16)}
.card dt{color:var(--muted-2)}
.card--dark dt{color:#B9C4BC}
.card dd{font-weight:700}
.card .link-arrow{margin-top:4px;font-size:15px}
.card--dark .link-arrow{color:#F2E3C3}
.t-beg .card__arch{background:var(--em-100);color:var(--em-700)} .t-beg .card__level{color:var(--em-700)} .t-beg .meter i:first-child{background:var(--em-700)}
.t-hifz .card__arch{background:var(--sand-200);color:var(--gold-700)} .t-hifz .card__level{color:var(--gold-700)} .t-hifz .meter i{background:var(--gold-500)}
.t-adv .card__arch{background:var(--em-700);color:var(--gold-300)} .t-adv .card__level{color:var(--gold-300)} .t-adv .meter i{background:var(--gold-300)}
.t-kids .card__arch{background:var(--apricot);color:var(--terracotta)} .t-kids .card__level{color:var(--terracotta)}

/* Dark band */
.band{position:relative;background:var(--em-900);color:var(--ivory);overflow:hidden}
.band__pattern{position:absolute;inset:0;opacity:.09;pointer-events:none}
.band .wrap{position:relative}
.pillars{display:grid;gap:28px}
@media(min-width:640px){.pillars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.pillars{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}}
.pillar{display:flex;flex-direction:column;gap:12px;padding-top:24px;border-top:1px solid rgba(212,185,138,.35)}
.pillar h3{font-size:19px;font-weight:700}
.pillar p{font-size:15.5px;line-height:1.6;color:#D8D2C4}
.band .lead{color:#D8D2C4}

/* Steps */
.steps{list-style:none;padding:0;display:grid;gap:26px;position:relative}
.step{display:flex;gap:18px;align-items:flex-start}
.step__num{flex-shrink:0;width:56px;height:56px;position:relative;display:grid;place-items:center;font-family:var(--f-display);font-size:22px;color:var(--em-800)}
.step__num svg{position:absolute;inset:0}
.step__num b{position:relative;font-weight:400}
.step--last .step__num{color:var(--ivory)}
.step h3{font-size:18px;font-weight:700;margin-bottom:4px}
.step p{font-size:15.5px;color:var(--muted);line-height:1.6}
.steps__path{display:none}
@media(min-width:900px){
  .steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;text-align:center}
  .step{flex-direction:column;align-items:center}
  .step__num{width:80px;height:80px;font-size:26px}
  .step p{max-width:240px}
  .steps__path{display:block;position:absolute;top:10px;left:0;width:100%;height:60px}
}

/* Trust / teacher promise */
.promise{display:grid;gap:20px}
@media(min-width:900px){.promise{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
.promise__item{background:var(--paper);border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:10px}
.promise__item h3{font-size:18px;font-weight:700}
.promise__item p{font-size:15px;color:var(--muted)}
.ico-tile{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--em-100);color:var(--em-800)}

/* CTA panel */
.cta{position:relative;overflow:hidden;background:var(--em-800);border-radius:32px;padding:56px 24px;text-align:center;color:var(--ivory);display:flex;flex-direction:column;align-items:center;gap:18px}
.cta__arch{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cta>*:not(svg){position:relative}
.cta .lead{color:#E1DBCD;max-width:560px}
.cta .kufi{color:var(--gold-300);font-size:24px}
.cta a.text{color:var(--ivory);font-weight:700;text-underline-offset:5px;min-height:44px;display:inline-flex;align-items:center}
@media(min-width:900px){.cta{padding:88px 80px}}

/* Page hero (inner pages) */
.page-hero{padding:40px 0 32px}
.page-hero--tint{background:var(--em-100);padding:40px 0 48px;position:relative;overflow:hidden}
.crumbs{font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current]{color:var(--ink);font-weight:700}
@media(min-width:900px){.page-hero{padding:72px 0 48px}.page-hero--tint{padding:64px 0 80px}}

/* Course rows (courses page) */
.course-rows{display:flex;flex-direction:column;gap:20px}
.course-row{display:grid;gap:20px;background:var(--paper);border:1px solid var(--line);border-radius:28px;padding:16px;transition:box-shadow .25s ease}
.course-row:hover{box-shadow:var(--shadow)}
.course-row--dark{background:var(--em-900);border-color:var(--em-900);color:var(--ivory)}
.course-row__arch{height:180px;border-radius:150px 150px 18px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.course-row__arch .kufi{font-size:28px}
.course-row__main{display:flex;flex-direction:column;gap:12px;padding:0 8px}
.course-row__main p{color:var(--muted);font-size:16.5px}
.course-row--dark .course-row__main p{color:#D8D2C4}
.ticks{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14.5px;font-weight:600}
.ticks li{display:flex;gap:6px;align-items:center}
.course-row__side{display:flex;flex-direction:column;gap:14px;padding:0 8px 8px}
.course-row__side dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14.5px}
.course-row__side dt{color:var(--muted-2)}
.course-row--dark .course-row__side dt{color:#B9C4BC}
.course-row__side dd{font-weight:700}
@media(min-width:900px){
  .course-row{grid-template-columns:280px 1fr 280px;gap:36px;align-items:center;padding:20px 32px 20px 20px}
  .course-row__arch{height:280px}
  .course-row__side{border-left:1px solid #EAE1CF;padding:0 0 0 28px}
  .course-row--dark .course-row__side{border-left-color:rgba(250,246,238,.18)}
}
.t-beg.course-row .course-row__arch{background:var(--em-100);color:var(--em-700)}
.t-hifz.course-row .course-row__arch{background:var(--sand-200);color:var(--gold-700)}
.t-adv.course-row .course-row__arch{background:var(--em-700);color:var(--gold-300)}
.t-kids.course-row .course-row__arch{background:var(--apricot);color:var(--terracotta)}

/* Course detail */
.detail{display:grid;gap:48px;padding-top:40px;padding-bottom:72px}
@media(min-width:1000px){.detail{grid-template-columns:minmax(0,1fr) 360px;gap:72px;align-items:start;padding-top:64px;padding-bottom:96px}}
.facts{background:var(--paper);border:1px solid var(--line);border-radius:28px;padding:24px;display:flex;flex-direction:column;gap:20px;box-shadow:var(--shadow)}
@media(min-width:1000px){.facts{position:sticky;top:108px}}
.facts__arch{height:150px;border-radius:130px 130px 16px 16px;background:var(--em-900);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.facts__arch .quran{font-size:26px;color:var(--ivory)}
.facts__arch small{font-size:10.5px;letter-spacing:.18em;font-weight:700;color:var(--gold-300)}
.facts dl{display:grid;grid-template-columns:auto 1fr;gap:12px 18px;font-size:15px}
.facts dt{color:var(--muted-2)}
.facts dd{font-weight:700}
.fit{list-style:none;padding:0;display:grid;gap:12px}
@media(min-width:640px){.fit{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fit li{display:flex;gap:12px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:16px 18px;font-size:16px;line-height:1.55}
.fit svg{flex-shrink:0;margin-top:2px}
.topics{list-style:none;padding:0;margin-left:22px;border-left:2px dashed #C9A66B;display:flex;flex-direction:column}
.topics li{position:relative;padding:0 0 24px 38px}
.topics li:last-child{padding-bottom:0}
.topics .n{position:absolute;left:-23px;top:0;width:44px;height:44px;border-radius:50%;background:var(--ivory);border:2px solid var(--em-800);color:var(--em-800);display:grid;place-items:center;font-weight:800;font-size:14px}
.topics li:first-child .n{background:var(--em-800);color:var(--ivory)}
.topics h3{font-size:18px;font-weight:700;padding-top:9px;margin-bottom:2px}
.topics p{font-size:15.5px;color:var(--muted)}
.tiles{display:grid;gap:16px}
@media(min-width:760px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tile{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:10px}
.tile h3{font-size:18px;font-weight:700}
.tile p{font-size:15px;color:var(--muted)}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:12px}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:0 22px}
.faq summary{min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:17px;font-weight:700;list-style:none;padding:14px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex-shrink:0;transition:transform .2s ease}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq details p{padding:0 0 20px;font-size:15.5px;color:var(--muted);line-height:1.7}
.faq details p+p{margin-top:-8px}

/* Values */
.values{display:grid;gap:18px}
@media(min-width:640px){.values{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.values{grid-template-columns:repeat(4,minmax(0,1fr))}}
.value{background:var(--paper);border:1px solid var(--line);border-radius:120px 120px 20px 20px;padding:44px 26px 30px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.value .kufi{font-size:38px;color:var(--em-700);line-height:1.3}
.value h3{font-size:19px;font-weight:700}
.value p{font-size:15px;color:var(--muted)}

/* Two col generic */
.split{display:grid;gap:36px;align-items:center}
@media(min-width:900px){.split{grid-template-columns:1.15fr .85fr;gap:72px}}
.arch-panel{position:relative;height:420px;border-radius:200px 200px 24px 24px;background:var(--em-900);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:0 32px}
.arch-panel .kufi{font-size:clamp(56px,7vw,84px);color:var(--ivory);line-height:1.3;position:relative}
.arch-panel p{position:relative;font-family:var(--f-display);font-style:italic;font-size:20px;color:#E6DAC2}
.arch-panel svg{position:absolute;inset:0;width:100%;height:100%}

.quote-band{background:var(--sand-100);text-align:center}
.quote-band .naskh{font-size:clamp(28px,3.4vw,40px);color:var(--em-800)}
.quote-band blockquote{font-family:var(--f-display);font-size:clamp(24px,2.6vw,32px);line-height:1.35;max-width:860px;margin:10px auto}
.quote-band cite{font-style:normal;font-size:14px;font-weight:600;color:#5C5443}
.quote-band cite a{color:#5C5443}

.panel-dark{background:var(--em-900);color:var(--ivory);border-radius:32px;padding:36px 24px;display:grid;gap:32px}
.panel-dark .lead{color:#D8D2C4}
.panel-dark ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:14px}
.panel-dark li{display:flex;gap:14px;align-items:flex-start;font-size:16px;line-height:1.55}
.panel-dark a{color:#F2E3C3}
@media(min-width:900px){.panel-dark{grid-template-columns:1fr 1fr;padding:56px;gap:56px;align-items:center}}

.soft{background:var(--sand-100);border-radius:28px;padding:32px 24px}
@media(min-width:900px){.soft{padding:44px 48px}}

/* Prose (legal, resources) */
.prose{max-width:720px}
.prose h2{font-family:var(--f-display);font-weight:400;font-size:30px;line-height:1.2;margin:40px 0 12px}
.prose h3{font-size:18px;font-weight:700;margin:24px 0 8px}
.prose p,.prose li{font-size:16.5px;line-height:1.75;color:var(--body)}
.prose p+p{margin-top:14px}
.prose ul{padding-left:22px;display:flex;flex-direction:column;gap:6px;margin-top:10px}
.note{font-size:14px;color:var(--muted-2);border-left:3px solid var(--gold-500);padding:4px 0 4px 14px;margin-top:24px}

.glossary{display:grid;gap:14px}
@media(min-width:760px){.glossary{grid-template-columns:repeat(2,minmax(0,1fr))}}
.term{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px 22px;display:flex;flex-direction:column;gap:6px}
.term__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.term__head h3{font-size:18px;font-weight:700}
.term__head .naskh{font-size:24px;color:var(--em-700);line-height:1.5}
.term p{font-size:15px;color:var(--muted)}

/* Enrollment form */
.enroll{display:grid;gap:40px;padding-top:32px;padding-bottom:80px}
@media(min-width:1000px){.enroll{grid-template-columns:420px minmax(0,1fr);gap:72px;align-items:start;padding-top:64px;padding-bottom:112px}}
.form-card{background:var(--paper);border:1px solid var(--line);border-radius:28px;padding:24px 20px;box-shadow:var(--shadow)}
@media(min-width:760px){.form-card{padding:40px 44px}}
.progress-meta{display:flex;justify-content:space-between;font-size:13px;margin-bottom:12px}
.progress-meta b{font-weight:800;letter-spacing:.14em;color:var(--gold-700);font-size:12.5px}
.bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:28px}
.bar span{height:6px;border-radius:3px;background:var(--line);transition:background .3s ease}
.bar span.on{background:var(--em-800)}
fieldset{border:0;padding:0;margin:0 0 28px;min-width:0}
legend{padding:0;font-family:var(--f-display);font-size:clamp(24px,2.4vw,30px);line-height:1.2;margin-bottom:14px}
legend.small{font-family:var(--f-body);font-size:16px;font-weight:800;margin-bottom:12px}
.opts{display:grid;gap:10px}
.opts--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px){.opts--4{grid-template-columns:repeat(4,minmax(0,1fr))}.opts--c2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.opt{position:relative;display:block}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt span{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:60px;padding:12px 16px;border-radius:16px;border:1.5px solid var(--line-2);background:#fff;font-weight:600;font-size:15.5px;line-height:1.35;transition:border-color .2s ease,background .2s ease}
.opt small{font-size:13.5px;font-weight:500;color:var(--muted)}
.opt:hover span{border-color:var(--em-800)}
.opt input:checked+span{border:2px solid var(--em-800);background:var(--em-100);color:var(--em-900);font-weight:800}
.opt input:focus-visible+span{outline:3px solid var(--gold-500);outline-offset:3px}
.opt--pill span{min-height:44px;border-radius:999px;padding:0 18px;flex-direction:row;align-items:center}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.field label{font-size:14.5px;font-weight:700}
.field label small{font-weight:500;color:var(--muted-2)}
.field input,.field select,.field textarea{min-height:52px;border-radius:12px;border:1.5px solid var(--line-2);background:#fff;padding:0 16px;font:500 16px/1.5 var(--f-body);color:var(--ink);width:100%}
.field textarea{padding:14px 16px;resize:vertical;min-height:120px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--em-800);outline:3px solid rgba(176,141,87,.45);outline-offset:1px}
.field .err{display:none;font-size:13.5px;color:var(--danger);font-weight:600}
.field.invalid input{border:2px solid var(--danger)}
.field.invalid .err{display:block}
.grid-2{display:grid;gap:0 20px}
@media(min-width:760px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--body);margin:6px 0 4px}
.consent input{width:22px;height:22px;accent-color:var(--em-800);margin:0;flex-shrink:0}
.form-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:24px;border-top:1px solid #EAE1CF;margin-top:8px}
.form-nav .btn--ghost{background:transparent;border:0;color:var(--em-800);font-weight:700;min-height:52px;padding:0 12px}
.form-nav .hint{font-size:13.5px;color:var(--muted-2)}
.step-panel[hidden]{display:none}
.done{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding:32px 8px}
.form-status{font-size:14px;color:var(--danger);font-weight:600;margin-top:12px}
.aside-card{background:var(--sand-100);border-radius:24px;padding:26px;display:flex;flex-direction:column;gap:16px}
.aside-card ol{list-style:none;padding:0;display:flex;flex-direction:column;gap:14px;font-size:15.5px;color:var(--body)}
.aside-card li{display:flex;gap:14px}
.num{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--em-800);color:var(--ivory);display:grid;place-items:center;font-weight:800;font-size:13px}
.contact-link{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 18px;border-radius:16px;border:1px solid var(--line);background:var(--paper);text-decoration:none;color:var(--ink);font-weight:600}
.contact-link:hover{border-color:var(--em-800)}

/* Footer */
.site-footer{background:var(--em-900);color:#EFE7D8;padding:56px 0 32px}
.site-footer a{color:#EFE7D8;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer-grid{display:grid;gap:32px}
@media(min-width:760px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1.3fr;gap:48px}}
.footer-grid h2{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--gold-300);margin-bottom:12px}
.footer-grid ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:4px}
.footer-grid li a{display:inline-flex;min-height:36px;align-items:center;font-size:15px}
.footer-about p{font-size:15px;line-height:1.65;color:#CFC6B4;max-width:340px;margin-top:14px}
.footer-about .kufi{font-size:22px;color:var(--gold-300);margin-top:10px}
.footer-bottom{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;margin-top:40px;padding-top:22px;border-top:1px solid rgba(239,231,216,.18);font-size:13px;color:#B9B09F}
.footer-bottom a{color:#B9B09F}

/* Sticky mobile CTA */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(250,246,238,.97);border-top:1px solid var(--line);box-shadow:0 -12px 24px -16px rgba(14,59,48,.35);transform:translateY(110%);transition:transform .3s ease}
.sticky-cta.show{transform:none}
.sticky-cta .btn{width:100%}
@media(min-width:900px){.sticky-cta{display:none}}
body.has-sticky .site-footer{padding-bottom:110px}
@media(min-width:900px){body.has-sticky .site-footer{padding-bottom:32px}}

/* Reveal */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .draw path{stroke-dashoffset:0}
  .reveal{opacity:1;transform:none}
}

.saw{font-family:var(--f-naskh);font-weight:400;line-height:1;font-size:1.45em;vertical-align:-.12em}
.page-hero--dark .crumbs,.page-hero--dark .crumbs a,.page-hero--dark .crumbs [aria-current]{color:#E1DBCD}