@font-face { font-family: "Noto Sans"; src: url("../fonts/noto-sans-latin.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Noto Serif"; src: url("../fonts/noto-serif-latin.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }

:root {
    --navy: #081d33;
    --green: #5f9b85;
    --forest: #326b57;
    --blue: #2d6f9f;
    --ivory: #f7f4ee;
    --sage: #eaf2ee;
    --charcoal: #243039;
    --slate: #5d6a71;
    --stone: #d6e0db;
    --white: #fff;
    --serif: "Noto Serif", Georgia, "Times New Roman", serif;
    --sans: "Noto Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --shadow-sm: 0 12px 36px rgba(8, 29, 51, .08);
    --shadow-lg: 0 28px 80px rgba(8, 29, 51, .16);
    --radius: 28px;
    --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--charcoal); background: var(--ivory); font-family: var(--sans); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
.icon { width:1em;height:1em;flex:0 0 auto; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; }
h1, h2, h3 { margin: 0; color: var(--navy); font-family: var(--serif); line-height: 1.05; letter-spacing: -.035em; }
h1 { font-size: clamp(3rem, 7.4vw, 6.75rem); }
h2 { font-size: clamp(2.25rem, 4.6vw, 4.3rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); line-height: 1.2; }
p { margin: 0; }

.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 9999; top: 12px; left: 12px; transform: translateY(-160%); padding: 12px 18px; border-radius: 999px; background: var(--white); color: var(--navy); font-weight: 700; }
.skip-link:focus { transform: none; }
.page-loader { display: none; position: fixed; z-index: 9998; inset: 0; place-items: center; background: var(--ivory); transition: opacity .5s ease, visibility .5s ease; }
.js .page-loader { display: grid; }
.page-loader img { animation: loaderPulse 1.1s ease-in-out infinite; }
.page-loader.is-hidden { opacity: 0; visibility: hidden; }
@keyframes loaderPulse { 50% { transform: scale(.9); opacity: .55; } }

.site-header { position: relative; z-index: 100; background: rgba(247, 244, 238, .94); }
.utility-bar { background: var(--navy); color: rgba(255,255,255,.78); font-size: .78rem; }
.utility-inner { display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: 24px; }
.utility-inner div { display: flex; gap: 24px; }
.utility-inner a { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; transition: color .2s; }
.utility-inner a:hover { color: var(--white); }
.utility-inner .icon { width: 15px; height: 15px; }
.nav-wrap { border-bottom: 1px solid rgba(8,29,51,.09); }
.nav-inner { display: flex; min-height: 94px; align-items: center; justify-content: space-between; gap: 32px; }
.brand { flex: 0 0 auto; }
.brand img { width: 300px; }
.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav > a:not(.button) { position: relative; color: var(--navy); font-size: .9rem; font-weight: 700; text-decoration: none; }
.site-nav > a:not(.button)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -9px; height: 2px; background: var(--green); transition: right .3s var(--ease); }
.site-nav > a:hover::after, .site-nav > a[aria-current="page"]::after { right: 0; }
.menu-toggle { display: none; border: 0; background: transparent; color: var(--navy); font-weight: 800; }
.menu-toggle .icon { width: 25px; height: 25px; }

.button { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border: 1px solid transparent; border-radius: 999px; background: var(--navy); color: var(--white); font-weight: 800; line-height: 1; text-decoration: none; box-shadow: 0 10px 30px rgba(8,29,51,.14); transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s; }
.button:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(8,29,51,.23); }
.button .icon { width: 19px; height: 19px; }
.button-small { min-height: 44px; padding: 12px 18px; font-size: .86rem; }
.button-light { background: var(--white); color: var(--navy); }
.button-ghost { border-color: rgba(255,255,255,.35); background: transparent; color: var(--white); box-shadow: none; }
.button-forest { background: var(--forest); }
.text-link { display: inline-flex; align-items: center; gap: 9px; color: var(--blue); font-weight: 800; text-decoration: none; }
.text-link .icon { width: 18px; transition: transform .25s var(--ease); }
.text-link:hover .icon { transform: translateX(5px); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; color: var(--forest); font-size: .76rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.lead { max-width: 760px; color: var(--slate); font-size: clamp(1.08rem, 2vw, 1.3rem); line-height: 1.7; }

.home-hero { position: relative; overflow: hidden; padding: 72px 0 86px; background: var(--navy); }
.home-hero::after { content: ""; position: absolute; right: -10vw; bottom: -34vw; width: 68vw; height: 68vw; border: 1px solid rgba(95,155,133,.25); border-radius: 50%; box-shadow: 0 0 0 7vw rgba(95,155,133,.04), 0 0 0 14vw rgba(95,155,133,.025); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: clamp(42px, 6vw, 84px); }
.home-hero h1 { max-width: 760px; color: var(--white); }
.home-hero h1 em { color: #8dc5ae; font-style: normal; }
.home-hero .eyebrow { color: #9bcab7; }
.hero-copy > p:not(.eyebrow) { max-width: 660px; margin-top: 28px; color: rgba(255,255,255,.77); font-size: clamp(1.08rem, 2vw, 1.3rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-visual { position: relative; }
.hero-image-frame { overflow: hidden; border-radius: 180px 180px var(--radius) var(--radius); box-shadow: var(--shadow-lg); }
.hero-image-frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.image-note { position: absolute; right: -12px; bottom: 22px; max-width: 230px; padding: 14px 18px; border-radius: 18px 0 0 18px; background: rgba(247,244,238,.95); color: var(--navy); font-size: .78rem; font-weight: 800; box-shadow: var(--shadow-sm); }
.hero-stats { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: -28px; border-radius: 24px; background: var(--white); box-shadow: var(--shadow-lg); }
.hero-stat { padding: 27px 30px; border-right: 1px solid var(--stone); }
.hero-stat:last-child { border-right: 0; }
.hero-stat strong { display: block; color: var(--navy); font-family: var(--serif); font-size: 2.1rem; line-height: 1; }
.hero-stat span { display: block; margin-top: 8px; color: var(--slate); font-size: .88rem; }

.section { padding: clamp(82px, 10vw, 138px) 0; }
.section-sage { background: var(--sage); }
.section-navy { background: var(--navy); color: rgba(255,255,255,.76); }
.section-navy h2, .section-navy h3 { color: var(--white); }
.section-head { display: grid; grid-template-columns: .9fr 1.1fr; align-items: end; gap: 48px; margin-bottom: 60px; }
.section-head .lead { justify-self: end; }
.purpose-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 72px; align-items: center; }
.purpose-copy h2 { margin-bottom: 28px; }
.purpose-copy .lead { margin-bottom: 30px; }
.purpose-visual { position: relative; padding: 25px 0 25px 25px; }
.purpose-visual::before { content: ""; position: absolute; inset: 0 18% 0 0; border: 1px solid var(--green); border-radius: var(--radius); }
.purpose-visual img { position: relative; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.pillar-list { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--stone); border-left: 1px solid var(--stone); }
.pillar { min-height: 190px; padding: 28px; border-right: 1px solid var(--stone); border-bottom: 1px solid var(--stone); background: rgba(255,255,255,.58); transition: transform .35s var(--ease), background .35s, box-shadow .35s; }
.pillar:hover { z-index: 2; transform: translateY(-8px); background: var(--white); box-shadow: var(--shadow-sm); }
.pillar .number { color: var(--green); font-family: var(--serif); font-size: 1rem; }
.pillar h3 { margin: 26px 0 9px; font-size: 1.35rem; }
.pillar p { color: var(--slate); font-size: .9rem; line-height: 1.55; }
.institution-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.institution-card { display: flex; min-height: 270px; flex-direction: column; padding: 30px; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: rgba(255,255,255,.05); transition: transform .35s var(--ease), background .35s, border-color .35s; }
.institution-card:hover { transform: translateY(-7px); border-color: rgba(141,197,174,.55); background: rgba(255,255,255,.09); }
.institution-card .icon { width: 32px; height: 32px; color: #8dc5ae; }
.institution-card h3 { margin: auto 0 12px; font-size: 1.55rem; }
.institution-card p { font-size: .92rem; line-height: 1.55; }
.institution-card .status { margin-top: 18px; color: #9bcab7; font-size: .73rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.cta-band { position: relative; overflow: hidden; padding: clamp(70px, 8vw, 104px) 0; background: var(--forest); color: rgba(255,255,255,.8); }
.cta-band::before { content: "RAF"; position: absolute; right: -10px; top: 50%; transform: translateY(-52%); color: rgba(255,255,255,.06); font-family: var(--serif); font-size: 18vw; font-weight: 700; line-height: 1; }
.cta-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.cta-inner h2 { max-width: 760px; color: var(--white); }
.cta-inner p { max-width: 690px; margin-top: 18px; font-size: 1.12rem; }
.cta-actions { display: flex; flex: 0 0 auto; flex-direction: column; gap: 12px; }

/* Inner pages */
.page-hero { position: relative; overflow: hidden; padding: clamp(78px, 10vw, 132px) 0; background: var(--navy); color: rgba(255,255,255,.78); }
.page-hero::after { content: ""; position: absolute; width: 420px; height: 420px; right: -150px; top: -180px; border: 1px solid rgba(141,197,174,.25); border-radius: 50%; box-shadow: 0 0 0 70px rgba(141,197,174,.04), 0 0 0 140px rgba(141,197,174,.025); }
.page-hero h1 { max-width: 930px; color: var(--white); font-size: clamp(3.2rem, 7.2vw, 6.4rem); }
.page-hero .lead { max-width: 790px; margin-top: 28px; color: rgba(255,255,255,.74); }
.page-hero .eyebrow { color: #9bcab7; }
.page-hero .container { position: relative; z-index: 2; }
.page-hero-split .container { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 72px; }
.page-hero-split h1 { font-size: clamp(3rem, 6.1vw, 5.5rem); }
.page-hero-media { position: relative; overflow: hidden; border-radius: 140px 140px 24px 24px; box-shadow: var(--shadow-lg); }
.page-hero-media img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; }
.page-hero-image { min-height: 600px; display: flex; align-items: end; background-position: center; background-size: cover; }
.page-hero-image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,29,51,.97) 0%, rgba(8,29,51,.82) 48%, rgba(8,29,51,.32) 100%); }
.page-hero-image::after { display: none; }
.page-hero-image .container { padding-bottom: 20px; }
.page-hero-image h1, .page-hero-image .lead { max-width: 740px; }
.concept-label { position: absolute; right: 20px; bottom: 20px; z-index: 3; padding: 9px 14px; border-radius: 999px; background: rgba(247,244,238,.92); color: var(--navy); font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.intro-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(48px, 8vw, 110px); }
.intro-grid .sticky-title { position: sticky; top: 120px; align-self: start; }
.prose > * + * { margin-top: 22px; }
.prose p, .prose li { color: var(--slate); font-size: 1.05rem; }
.prose ul { margin: 22px 0 0; padding-left: 1.25rem; }
.quote-panel { margin-top: 36px; padding: 34px; border-left: 4px solid var(--green); border-radius: 0 22px 22px 0; background: var(--sage); color: var(--navy); font-family: var(--serif); font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.4; }
.mission-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.mission-card { min-height: 380px; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(32px, 5vw, 58px); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
.mission-card:nth-child(2) { background: var(--navy); color: rgba(255,255,255,.75); }
.mission-card:nth-child(2) h2 { color: var(--white); }
.mission-card .kicker { color: var(--green); font-size: .78rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.mission-card p:last-child { margin-top: 28px; font-size: 1.08rem; }
.timeline { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.timeline::before { content: ""; position: absolute; top: 14px; left: 8%; right: 8%; height: 1px; background: var(--stone); }
.timeline-item { position: relative; padding-top: 48px; }
.timeline-item::before { content: ""; position: absolute; top: 7px; left: 0; width: 15px; height: 15px; border: 5px solid var(--ivory); border-radius: 50%; background: var(--green); box-shadow: 0 0 0 1px var(--green); }
.timeline-item .year { color: var(--forest); font-weight: 900; }
.timeline-item h3 { margin: 12px 0; }
.timeline-item p { color: var(--slate); }
.leadership-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.leader-card { padding: 34px; border: 1px solid var(--stone); border-radius: 24px; background: var(--white); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.leader-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); }
.leader-card .role { display: block; margin: 9px 0 18px; color: var(--forest); font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.leader-card p { color: var(--slate); }

.ecosystem-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.ecosystem-card { position: relative; overflow: hidden; min-height: 360px; display: flex; flex-direction: column; padding: 40px; border: 1px solid var(--stone); border-radius: var(--radius); background: var(--white); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.ecosystem-card:hover { transform: translateY(-6px); border-color: var(--green); box-shadow: var(--shadow-lg); }
.ecosystem-card::after { content: attr(data-number); position: absolute; right: -5px; top: -24px; color: rgba(95,155,133,.1); font-family: var(--serif); font-size: 8rem; font-weight: 800; line-height: 1; }
.ecosystem-card .icon-wrap { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 50%; background: var(--sage); color: var(--forest); }
.ecosystem-card .icon { width: 24px; height: 24px; }
.ecosystem-card h2 { margin: auto 0 14px; font-size: clamp(1.7rem, 3vw, 2.45rem); }
.ecosystem-card p { max-width: 560px; color: var(--slate); }
.ecosystem-card .status { width: fit-content; margin-top: 22px; padding: 7px 12px; border-radius: 999px; background: var(--sage); color: var(--forest); font-size: .72rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.ecosystem-card.is-active { border: 0; background: var(--navy); color: rgba(255,255,255,.72); }
.ecosystem-card.is-active h2 { color: var(--white); }
.ecosystem-card.is-active p { color: rgba(255,255,255,.72); }
.ecosystem-card.is-active .status { background: rgba(141,197,174,.14); color: #add7c6; }
.ecosystem-card.is-active .icon-wrap { background: rgba(255,255,255,.1); color: #add7c6; }
.card-link { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-top: 20px; color: var(--blue); font-size: .84rem; font-weight: 900; text-decoration: none; }
.is-active .card-link { color: #add7c6; }
.card-link .icon { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.card-link:hover .icon { transform: translateX(5px); }
.architecture-row { display: grid; grid-template-columns: 1fr 2.1fr; gap: 50px; align-items: center; }
.architecture-diagram { display: grid; gap: 12px; }
.parent-node { display:flex;align-items:center;justify-content:center;gap:13px;padding: 24px; border-radius: 18px; background: var(--navy); color: var(--white); font-family: var(--serif); font-size: 1.35rem; text-align: center; }
.parent-node img { width:40px;filter:brightness(0) invert(1); }
.child-nodes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.child-node { display: grid; min-height: 96px; place-items: center; align-content:center;gap:8px;padding: 12px; border: 1px solid var(--stone); border-radius: 14px; background: var(--white); color: var(--navy); font-size: .78rem; font-weight: 800; text-align: center;transition:.3s var(--ease); }
.child-node:hover { transform:translateY(-4px);border-color:var(--green);box-shadow:var(--shadow-sm); }
.child-node .icon { width:22px;height:22px;color:var(--forest); }

.program-feature { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: var(--radius); background: var(--navy); color: rgba(255,255,255,.75); box-shadow: var(--shadow-lg); }
.program-feature img { width: 100%; height: 100%; object-fit: cover; }
.program-feature-copy { padding: clamp(36px, 6vw, 70px); }
.program-feature-copy h2 { color: var(--white); }
.program-feature-copy > p { margin-top: 22px; }
.program-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0; }
.program-meta span { padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.09); color: #c7e1d6; font-size: .78rem; font-weight: 800; }
.program-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.program-card { display: flex; min-height: 360px; flex-direction: column; padding: 32px; border: 1px solid var(--stone); border-radius: 24px; background: var(--white); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.program-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-sm); }
.program-card .icon { width: 28px; height: 28px; color: var(--forest); }
.program-card h3 { margin: 38px 0 16px; }
.program-card p { color: var(--slate); }
.program-card .program-time { margin-top: auto; padding-top: 24px; color: var(--navy); font-size: .82rem; font-weight: 900; }
.program-card.has-image { min-height:520px;padding:0;overflow:hidden; }
.program-card.has-image .card-thumb { width:100%;aspect-ratio:1.55;object-fit:cover;transition:transform .75s var(--ease); }
.program-card-body { display:flex;flex:1;flex-direction:column;padding:26px; }
.program-card.has-image .icon-badge { margin-top:-49px;position:relative; }
.program-card.has-image h3 { margin:22px 0 13px; }
.program-card.has-image .card-link { margin-top:14px; }
.learning-triad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.learning-step { padding: 34px; border-top: 3px solid var(--green); background: var(--white); }
.learning-step h3 { margin-bottom: 14px; }
.learning-step p { color: var(--slate); }
.masjid-offerings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.masjid-offering { padding: 36px; border-radius: 24px; background: var(--white); box-shadow: var(--shadow-sm); }
.masjid-offering .icon { width: 30px; height: 30px; color: var(--forest); }
.masjid-offering h3 { margin: 40px 0 14px; }
.masjid-offering p { color: var(--slate); }
.admission-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 46px; }
.admission-step { padding: 27px; border-radius: 22px; background: rgba(255,255,255,.08); }
.admission-step strong { display: grid; width: 38px; height: 38px; place-items: center; margin-bottom: 24px; border-radius: 50%; background: #9bcab7; color: var(--navy); }
.admission-step h3 { margin-bottom: 10px; font-size: 1.2rem; }
.admission-step p { font-size: .9rem; }

.impact-hero-card { display: grid; grid-template-columns: 1.2fr .8fr; gap: 22px; margin-top: -86px; position: relative; z-index: 4; }
.impact-hero-card > div { padding: clamp(30px, 5vw, 54px); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-lg); }
.impact-hero-card > div:last-child { background: var(--forest); color: rgba(255,255,255,.78); }
.impact-hero-card h2 { font-size: clamp(2rem, 3.5vw, 3.2rem); }
.impact-hero-card > div:last-child h2 { color: var(--white); }
.impact-hero-card p { margin-top: 18px; color: var(--slate); }
.impact-hero-card > div:last-child p { color: rgba(255,255,255,.78); }
.evidence-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.evidence-card { padding: 36px; border-radius: 24px; background: var(--white); box-shadow: var(--shadow-sm); }
.evidence-card strong { color: var(--green); font-family: var(--serif); font-size: clamp(2.8rem, 5vw, 4.5rem); line-height: 1; }
.evidence-card h3 { margin: 18px 0 12px; }
.evidence-card p { color: var(--slate); }
.governance-list { display: grid; gap: 1px; border-radius: var(--radius); overflow: hidden; background: var(--stone); }
.governance-item { display: grid; grid-template-columns: 58px 1fr; gap: 22px; padding: 30px; background: var(--white); }
.governance-item .icon { width: 30px; height: 30px; color: var(--forest); }
.governance-item p { margin-top: 8px; color: var(--slate); }

.donate-hero { padding-bottom: 164px; }
.donation-wrap { position: relative; z-index: 5; display: grid; grid-template-columns: .72fr 1.28fr; gap: 28px; margin-top: -96px; align-items: start; }
.donation-assurance, .donation-panel { border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-lg); }
.donation-assurance { padding: 36px; }
.donation-assurance h2 { font-size: 1.7rem; }
.section-navy .donation-assurance h2,.section-navy .donation-panel h2 { color:var(--navy); }
.assurance-list { display: grid; gap: 22px; margin-top: 28px; }
.assurance-item { display: grid; grid-template-columns: 38px 1fr; gap: 14px; }
.assurance-item .icon { width: 22px; height: 22px; color: var(--forest); }
.assurance-item strong { color: var(--navy); }
.assurance-item p { margin-top: 3px; color: var(--slate); font-size: .88rem; }
.donation-panel { padding: clamp(28px, 5vw, 52px); }
.donation-progress { display: flex; gap: 8px; margin-bottom: 38px; }
.donation-progress span { height: 5px; flex: 1; border-radius: 999px; background: var(--stone); transition: background .25s; }
.donation-progress span.is-active { background: var(--green); }
.donation-step[hidden] { display: none; }
.donation-step h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.donation-step > p { margin-top: 12px; color: var(--slate); }
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 28px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice label { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 12px; padding: 19px 20px; border: 2px solid var(--stone); border-radius: 18px; color: var(--navy); font-weight: 800; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.choice label:hover { transform: translateY(-2px); border-color: var(--green); }
.choice input:focus-visible + label { outline: 3px solid rgba(45,111,159,.28); outline-offset: 2px; }
.choice input:checked + label { border-color: var(--forest); background: var(--sage); }
.amount-grid { grid-template-columns: repeat(3, 1fr); }
.custom-amount { margin-top: 14px; }
.custom-amount label { display: block; margin-bottom: 8px; color: var(--navy); font-weight: 800; }
.input-prefix { position: relative; }
.input-prefix span { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--slate); font-weight: 900; }
.input-prefix input { width: 100%; min-height: 56px; padding: 14px 18px 14px 36px; border: 2px solid var(--stone); border-radius: 16px; background: var(--white); color: var(--navy); }
.input-prefix input:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(45,111,159,.12); }
.donation-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 34px; }
.button-back { border-color: var(--stone); background: transparent; color: var(--navy); box-shadow: none; }
.donation-summary { display: grid; gap: 1px; overflow: hidden; margin-top: 28px; border: 1px solid var(--stone); border-radius: 18px; background: var(--stone); }
.summary-row { display: flex; justify-content: space-between; gap: 20px; padding: 17px 20px; background: var(--white); }
.summary-row span { color: var(--slate); }
.secure-note { display: flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--slate); font-size: .84rem; }
.secure-note .icon { width: 18px; color: var(--forest); }

.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: -68px; position: relative; z-index: 4; }
.contact-card { min-height: 250px; padding: 34px; border-radius: 24px; background: var(--white); box-shadow: var(--shadow-lg); }
.contact-card .icon { width: 30px; height: 30px; color: var(--forest); }
.contact-card h2 { margin: 32px 0 14px; font-size: 1.55rem; }
.contact-card p { color: var(--slate); }
.contact-card a { display: inline-block; margin-top: 18px; color: var(--blue); font-weight: 800; text-decoration: none; }
.visit-panel { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: var(--radius); background: var(--navy); color: rgba(255,255,255,.74); }
.visit-panel > div { padding: clamp(38px, 6vw, 72px); }
.visit-panel h2 { color: var(--white); }
.visit-panel p { margin-top: 20px; }
.visit-panel .map-side { display: grid; min-height: 460px; place-items: center; background: linear-gradient(rgba(8,29,51,.25), rgba(8,29,51,.25)), url('../img/learning-commons.webp') center/cover; }
.map-marker { display: grid; width: 112px; height: 112px; place-items: center; border: 12px solid rgba(255,255,255,.25); border-radius: 50%; background: var(--white); color: var(--forest); background-clip: padding-box; }
.map-marker .icon { width: 36px; height: 36px; }
.faq-list { display: grid; gap: 12px; max-width: 900px; margin: 46px auto 0; }
.faq-list details { border: 1px solid var(--stone); border-radius: 18px; background: var(--white); }
.faq-list summary { padding: 22px 26px; color: var(--navy); font-weight: 800; cursor: pointer; }
.faq-list details p { padding: 0 26px 24px; color: var(--slate); }
.legal { max-width: 820px; }
.legal h2 { margin: 48px 0 18px; font-size: 2rem; }
.legal p + p { margin-top: 16px; }
.legal ul { color: var(--slate); }

.site-footer { padding: 76px 0 28px; background: #061526; color: rgba(255,255,255,.7); }
.footer-grid { display: grid; grid-template-columns: 1.8fr repeat(3, 1fr); gap: 54px; }
.footer-brand img { width: 310px; margin-bottom: 25px; }
.footer-brand p { max-width: 430px; font-family: var(--serif); font-size: 1.15rem; line-height: 1.55; }
.site-footer h2 { margin-bottom: 19px; color: var(--white); font-family: var(--sans); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.site-footer a { display: block; width: fit-content; margin: 8px 0; text-decoration: none; transition: color .2s; }
.site-footer a:hover { color: var(--white); }
.site-footer address { font-style: normal; }
.footer-phone { color: #9bcab7; font-weight: 800; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 58px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); font-size: .8rem; }
.footer-bottom div { display: flex; gap: 22px; }

.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (max-width: 1060px) {
    .brand img { width: 250px; }
    .site-nav { gap: 16px; }
    .site-nav > a:not(.button) { font-size: .82rem; }
    .institution-grid, .pillar-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
    .utility-inner > p { display: none; }
    .utility-inner { justify-content: flex-end; }
    .nav-inner { min-height: 80px; }
    .brand img { width: 228px; }
    .js .menu-toggle { display: inline-flex; align-items: center; gap: 8px; }
    .site-nav { display: grid; gap: 0; width: 100%; padding: 18px 0 26px; }
    .js .site-nav { position: absolute; top: 100%; left: 0; right: 0; padding-inline: 20px; border-bottom: 1px solid var(--stone); background: var(--ivory); box-shadow: var(--shadow-sm); visibility: hidden; opacity: 0; transform: translateY(-10px); transition: .25s var(--ease); }
    .js .site-nav.is-open { visibility: visible; opacity: 1; transform: none; }
    .site-nav > a:not(.button) { padding: 13px 4px; font-size: .95rem; }
    .site-nav > a:not(.button)::after { bottom: 8px; }
    .site-nav .button { margin-top: 10px; }
    .hero-grid, .purpose-grid, .section-head { grid-template-columns: 1fr; }
    .home-hero { padding-top: 54px; }
    .hero-visual { max-width: 580px; }
    .hero-image-frame img { aspect-ratio: 4 / 3; }
    .section-head .lead { justify-self: start; }
    .cta-inner { align-items: flex-start; flex-direction: column; }
    .cta-actions { flex-direction: row; flex-wrap: wrap; }
    .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; }
    .footer-grid > div:last-child { grid-column: 2 / -1; }
    .page-hero-split .container, .intro-grid, .architecture-row, .program-feature, .impact-hero-card, .donation-wrap, .visit-panel { grid-template-columns: 1fr; }
    .page-hero-media { max-width: 620px; border-radius: 90px 90px 24px 24px; }
    .intro-grid .sticky-title { position: static; }
    .mission-grid, .ecosystem-grid, .leadership-grid { grid-template-columns: 1fr; }
    .timeline, .program-grid, .learning-triad, .evidence-grid, .contact-grid, .masjid-offerings { grid-template-columns: repeat(2, 1fr); }
    .admission-steps { grid-template-columns: repeat(2, 1fr); }
    .child-nodes { grid-template-columns: repeat(2, 1fr); }
    .donation-wrap { margin-top: -80px; }
    .donation-assurance { order: 2; }
    .contact-grid { margin-top: -48px; }
}

@media (max-width: 600px) {
    .container { width: min(100% - 28px, 1180px); }
    .utility-inner a:last-child { display: none; }
    .brand img { width: 210px; }
    .menu-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    h1 { font-size: clamp(2.7rem, 14vw, 4.4rem); }
    .home-hero { padding-bottom: 64px; }
    .hero-actions .button { width: 100%; }
    .hero-stats { grid-template-columns: 1fr; margin-top: 16px; }
    .hero-stat { padding: 22px 24px; border-right: 0; border-bottom: 1px solid var(--stone); }
    .hero-stat:last-child { border-bottom: 0; }
    .pillar-list, .institution-grid { grid-template-columns: 1fr; }
    .pillar { min-height: 0; }
    .purpose-visual { padding: 14px 0 14px 14px; }
    .section { padding: 78px 0; }
    .cta-actions, .cta-actions .button { width: 100%; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 38px 24px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-grid > div:last-child { grid-column: 1 / -1; }
    .footer-bottom { align-items: flex-start; flex-direction: column; }
    .page-hero-image { min-height: 520px; }
    .page-hero-image::before { background: linear-gradient(90deg, rgba(8,29,51,.94), rgba(8,29,51,.74)); }
    .timeline, .program-grid, .learning-triad, .evidence-grid, .contact-grid, .masjid-offerings { grid-template-columns: 1fr; }
    .timeline::before { left: 7px; top: 0; bottom: 0; width: 1px; height: auto; }
    .timeline-item { padding: 0 0 38px 38px; }
    .timeline-item::before { top: 7px; }
    .ecosystem-card { min-height: 320px; padding: 30px; }
    .choice-grid, .amount-grid, .admission-steps { grid-template-columns: 1fr; }
    .donation-actions { flex-direction: column-reverse; }
    .donation-actions .button { width: 100%; }
    .contact-grid { margin-top: -26px; }
}

/* Seven-service architecture and Waqf campaign */
.services-dropdown {
    left: -210px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(680px, 78vw);
}
.services-dropdown a:first-child,
.services-dropdown a:last-child { background: #f2f7f4; }

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.service-card {
    position: relative;
    min-height: 244px;
    padding: 30px;
    overflow: hidden;
    border: 1px solid rgba(8,29,51,.09);
    border-radius: var(--radius);
    background: rgba(255,255,255,.92);
    color: var(--slate);
    box-shadow: 0 14px 34px rgba(8,29,51,.06);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.75) 48%, transparent 66%);
    transform: translateX(-120%);
    transition: transform .75s var(--ease);
    pointer-events: none;
}
.service-card:hover { transform: translateY(-7px); border-color: rgba(95,155,133,.52); box-shadow: 0 26px 58px rgba(8,29,51,.13); }
.service-card:hover::after { transform: translateX(120%); }
.service-card h3 { margin: 26px 0 10px; color: var(--navy); font-size: 1.42rem; }
.service-card-link { display: block; color: var(--slate); text-decoration: none; }
.service-card-link .card-link { display: flex; margin-top: 22px; }
.compact-service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.compact-service-grid .service-card { min-height: 270px; }

.service-roadmap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
.service-step { padding: 30px; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); background: rgba(255,255,255,.065); }
.service-step > strong { color: #9ed2bd; font: 700 2.4rem/1 var(--serif); }
.service-step h3 { margin: 42px 0 12px; color: white; }
.service-step p { color: rgba(255,255,255,.7); }
.service-photo-copy { max-width: 750px; }
.service-photo-copy .eyebrow { color: #b9e0d0; }
.service-photo-copy h2 { color: white; }
.service-photo-copy .lead { margin-top: 20px; color: rgba(255,255,255,.82); }

.waqf-hero { background-image: radial-gradient(circle at 8% 20%, rgba(141,197,174,.18), transparent 30%), linear-gradient(145deg,#061526,#0d3440); }
.waqf-model-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.model-stat { padding:32px; border:1px solid rgba(255,255,255,.15); border-radius:var(--radius); background:rgba(255,255,255,.07); }
.model-stat span { color:#b9e0d0; font-size:.73rem; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }
.model-stat strong { display:block; margin:20px 0 12px; color:white; font:700 clamp(2.4rem,4vw,4rem)/1 var(--serif); }
.model-stat p { color:rgba(255,255,255,.68); }
.model-stat.is-gap { background:linear-gradient(145deg,rgba(95,155,133,.32),rgba(255,255,255,.07)); border-color:rgba(158,210,189,.45); }
.model-note { display:flex; align-items:flex-start; gap:12px; max-width:920px; margin:28px auto 0; padding:18px 22px; border-radius:16px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.72); font-size:.85rem; }
.model-note .icon { flex:0 0 auto; color:#9ed2bd; }
.waqf-flow { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:flow; }
.waqf-flow article { position:relative; min-height:280px; padding:30px; border:1px solid rgba(8,29,51,.09); border-radius:var(--radius); background:white; box-shadow:var(--shadow-sm); }
.waqf-flow article::after { content:""; position:absolute; top:56px; right:-19px; width:20px; height:2px; background:var(--green); z-index:2; }
.waqf-flow article:last-child::after { display:none; }
.waqf-flow article > strong { position:absolute; top:24px; right:24px; color:rgba(8,29,51,.18); font:700 2.2rem/1 var(--serif); }
.waqf-flow h3 { margin:28px 0 10px; }
.priority-path,.campaign-stages { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.priority-stage,.campaign-stage { min-height:286px; padding:30px; border:1px solid rgba(255,255,255,.14); border-radius:var(--radius); background:rgba(255,255,255,.07); }
.priority-stage > span,.campaign-stage > span { color:#b9e0d0; font-size:.7rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.priority-stage h3,.campaign-stage h3 { margin:52px 0 12px; color:white; }
.priority-stage p,.campaign-stage p { color:rgba(255,255,255,.72); }
.priority-stage.is-current,.campaign-stage.is-active { background:white; border-color:white; box-shadow:0 26px 65px rgba(0,0,0,.2); }
.priority-stage.is-current > span,.campaign-stage.is-active > span { color:var(--forest); }
.priority-stage.is-current h3,.campaign-stage.is-active h3 { color:var(--navy); }
.priority-stage.is-current p,.campaign-stage.is-active p { color:var(--slate); }
.priority-stage.is-evergreen,.campaign-stage.is-waqf { background:linear-gradient(145deg,rgba(8,29,51,.78),rgba(95,155,133,.28)); border-color:rgba(158,210,189,.45); }
.governance-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px; }
.governance-grid article { display:flex; align-items:flex-start; gap:14px; padding:18px; border-radius:16px; background:var(--sage); }
.governance-grid .icon { flex:0 0 auto; color:var(--forest); }
.governance-grid h3 { font-size:1rem; }
.governance-grid p { margin-top:5px; font-size:.84rem; }

.waqf-home-band { color:white; background-color:var(--forest); background-image:radial-gradient(circle at 78% 20%,rgba(158,210,189,.2),transparent 28%),linear-gradient(145deg,#164c42,#276a5b); }
.waqf-home-band h2 { color:white; }
.waqf-home-band .lead { color:rgba(255,255,255,.78); }
.waqf-home-visual { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:24px; padding:40px; border:1px solid rgba(255,255,255,.16); border-radius:var(--radius); background:rgba(8,29,51,.22); backdrop-filter:blur(10px); }
.waqf-home-visual img { filter:brightness(0) invert(1); opacity:.88; }
.waqf-home-visual strong { display:block; font:700 clamp(4rem,7vw,6rem)/.8 var(--serif); }
.waqf-home-visual span { display:block; max-width:220px; margin-top:14px; color:#c7e1d6; font-weight:800; }
.waqf-home-visual p { grid-column:1/-1; padding-top:22px; border-top:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.7); }

.card-as-link { display:block; color:inherit; text-decoration:none; }
.card-as-link .card-link { display:flex; margin-top:20px; }
.card-as-link:hover { transform:translateY(-8px); }
.donation-appeal blockquote { max-width:650px; margin:28px 0 0; padding-left:22px; border-left:2px solid #9ed2bd; color:rgba(255,255,255,.9); font:italic 1.12rem/1.7 var(--serif); }
.donation-appeal cite { display:block; margin-top:7px; color:#b9e0d0; font:800 .7rem/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; }
.vision-progress { padding:30px 0; background:white; border-bottom:1px solid rgba(8,29,51,.08); }
.vision-progress .container { display:grid; grid-template-columns:280px 1fr; align-items:center; gap:42px; }
.vision-progress span { color:var(--forest); font-size:.7rem; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }
.vision-progress strong { display:block; color:var(--navy); font:700 2rem/1.15 var(--serif); }
.vision-progress p { font-size:.82rem; }
.vision-progress ol { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; list-style:none; }
.vision-progress li { position:relative; padding:24px 6px 9px; border-top:4px solid #dce8e3; color:var(--slate); font-size:.68rem; font-weight:800; text-align:center; }
.vision-progress li::before { content:""; position:absolute; top:-8px; left:50%; width:12px; height:12px; border:3px solid white; border-radius:50%; background:#c5d7cf; transform:translateX(-50%); }
.vision-progress li.is-live { border-color:var(--green); }
.vision-progress li.is-live::before { background:var(--green); }
.vision-progress li.is-foundation { border-color:var(--navy); color:var(--navy); }
.vision-progress li.is-foundation::before { background:var(--navy); }
.page-donate .donation-wrap { margin-top:0; }
.page-donate .section-gradient .institution-grid { grid-template-columns:repeat(5,1fr); }
.page-donate .section-gradient .institution-card { min-width:0; }
.page-donate .section-gradient .card-body { padding:22px; }
.page-donate .section-gradient .institution-card h3 { font-size:1.2rem; }
.giving-methods { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.giving-methods article { min-height:280px; padding:32px; border:1px solid rgba(8,29,51,.09); border-radius:var(--radius); background:#f7faf8; transition:.3s var(--ease); }
.giving-methods article:hover { transform:translateY(-7px); box-shadow:var(--shadow-lg); background:white; }
.giving-methods article > .icon { width:34px; height:34px; color:var(--forest); }
.giving-methods h3 { margin:42px 0 12px; }

/* Vertical quick giving and on-brand social controls */
.sticky-donate {
    top:50%;
    padding:17px 12px;
    border-radius:0 18px 18px 0;
    background:linear-gradient(180deg,#a83b35,#ca574e);
    writing-mode:vertical-rl;
    transform:translateY(-50%) rotate(180deg);
}
.sticky-donate:hover { padding:22px 12px 17px; box-shadow:0 18px 42px rgba(168,59,53,.34); }
.sticky-donate .icon { transform:rotate(180deg); }
.sticky-connect { background:linear-gradient(165deg,#174e43,#5f9b85); border:1px solid rgba(255,255,255,.18); }
.sticky-connect a { color:white; }
.sticky-connect a:hover { background:rgba(255,255,255,.94); color:var(--forest); }

@media (max-width: 1080px) {
    .services-dropdown { left:-330px; }
    .compact-service-grid,.waqf-flow,.priority-path,.campaign-stages { grid-template-columns:repeat(2,1fr); }
    .waqf-flow article:nth-child(2)::after { display:none; }
    .page-donate .section-gradient .institution-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 820px) {
    .services-dropdown { width:100%; grid-template-columns:1fr; }
    .nav-group.is-open .services-dropdown { max-height:680px; }
    .service-grid,.service-roadmap,.waqf-model-grid,.giving-methods { grid-template-columns:1fr 1fr; }
    .vision-progress .container { grid-template-columns:1fr; gap:24px; }
    .page-donate .section-gradient .institution-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 600px) {
    .service-grid,.service-roadmap,.waqf-model-grid,.compact-service-grid,.waqf-flow,.priority-path,.campaign-stages,.giving-methods,.governance-grid,.page-donate .section-gradient .institution-grid { grid-template-columns:1fr; }
    .service-card,.service-step,.model-stat,.waqf-flow article,.priority-stage,.campaign-stage,.giving-methods article { min-height:0; padding:24px; }
    .service-step h3,.priority-stage h3,.campaign-stage h3,.giving-methods h3 { margin-top:28px; }
    .waqf-flow article::after { display:none; }
    .waqf-home-visual { grid-template-columns:72px 1fr; padding:26px; }
    .waqf-home-visual img { width:72px; height:72px; }
    .vision-progress ol { grid-template-columns:repeat(4,1fr); row-gap:18px; }
    .sticky-donate { top:auto; padding:12px 15px; border-radius:999px; writing-mode:horizontal-tb; transform:none; }
    .sticky-donate:hover { padding:12px 18px; }
    .sticky-donate .icon { transform:none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    [data-reveal] { opacity: 1; transform: none; }
}

/* 2026 institutional redesign */
h1 { font-size: clamp(2.7rem, 5.6vw, 5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.65rem); }
.page-hero h1 { font-size: clamp(2.8rem, 5.4vw, 4.9rem); }
.page-hero-split h1 { font-size: clamp(2.7rem, 5vw, 4.6rem); }
.site-header { position: sticky; top: 0; backdrop-filter: blur(18px); transition: box-shadow .3s var(--ease); }
.site-header.is-scrolled { box-shadow: 0 15px 45px rgba(8,29,51,.12); }
.utility-bar { max-height: 38px; overflow: hidden; transition: max-height .35s var(--ease), opacity .25s; }
.site-header.is-scrolled .utility-bar { max-height: 0; opacity: 0; }
.site-header.is-scrolled .nav-inner { min-height: 72px; }
.nav-inner { transition: min-height .35s var(--ease); }
.site-nav { gap: 21px; }
.nav-group { position: relative; }
.nav-parent { position: relative; padding: 12px 0; border: 0; background: transparent; color: var(--navy); font-size: .9rem; font-weight: 800; cursor: pointer; }
.nav-parent::after { content:""; position:absolute; left:0; right:100%; bottom:5px; height:2px; background:var(--green); transition:right .3s var(--ease); }
.nav-group:is(:hover,:focus-within,.is-open,.is-current) .nav-parent::after { right:0; }
.nav-parent span { display:inline-block; margin-left:3px; transition:transform .25s; }
.nav-group:is(:hover,:focus-within,.is-open) .nav-parent span { transform:rotate(180deg); }
.nav-dropdown { position:absolute; top:calc(100% + 10px); left:-22px; display:grid; width:310px; padding:12px; border:1px solid rgba(8,29,51,.09); border-radius:20px; background:rgba(255,255,255,.98); box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transform:translateY(-8px); transition:.25s var(--ease); }
.nav-group:is(:hover,:focus-within,.is-open) .nav-dropdown { opacity:1; visibility:visible; transform:none; }
.nav-dropdown a { display:grid; padding:13px 14px; border-radius:13px; color:var(--navy); text-decoration:none; }
.nav-dropdown a:hover,.nav-dropdown a[aria-current="page"] { background:var(--sage); }
.nav-dropdown strong { font-size:.88rem; }
.nav-dropdown span { color:var(--slate); font-size:.72rem; font-weight:500; }
.urgent-nav { display:inline-flex; align-items:center; gap:7px; color:#a83b35 !important; }
.urgent-nav > span { width:8px; height:8px; border-radius:50%; background:#d55249; box-shadow:0 0 0 0 rgba(213,82,73,.45); animation:urgentPulse 1.8s infinite; }
@keyframes urgentPulse { 70% { box-shadow:0 0 0 9px rgba(213,82,73,0); } 100% { box-shadow:0 0 0 0 rgba(213,82,73,0); } }

.button { position:relative; overflow:hidden; isolation:isolate; }
.button::before { content:""; position:absolute; z-index:-1; inset:-2px auto -2px -45%; width:34%; transform:skewX(-20deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.44),transparent); transition:left .6s var(--ease); }
.button:hover::before { left:120%; }
.button:active { transform:translateY(0) scale(.97); }
.button:focus-visible,.nav-parent:focus-visible,.site-nav a:focus-visible { outline:3px solid #7fc5f0; outline-offset:4px; }

.monogram-field { position:relative; overflow:hidden; }
.monogram-field::before { content:""; position:absolute; inset:0; pointer-events:none; background-image:url('../img/raf-icon.svg'); background-repeat:repeat; background-size:170px; opacity:.026; transform:rotate(-7deg) scale(1.08); }
.monogram-field > * { position:relative; }
.section-white { background:var(--white); }
.section-ivory { background:var(--ivory); }
.section-forest { background:var(--forest); color:rgba(255,255,255,.8); }
.section-forest h2,.section-forest h3 { color:var(--white); }
.section-blue { background:#e9f2f8; }
.section-gradient { background:linear-gradient(135deg,#eef6f2 0%,#fff 48%,#e9f2f8 100%); }
.section-photo { position:relative; min-height:580px; display:flex; align-items:center; color:white; background-position:center; background-size:cover; }
.section-photo::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,29,51,.96),rgba(8,29,51,.65),rgba(8,29,51,.25)); }
.section-photo > * { position:relative; }

.media-card { position:relative; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow-lg); }
.media-card img { width:100%; height:100%; min-height:360px; object-fit:cover; transition:transform .8s var(--ease); }
.media-card:hover img,.photo-card:hover img,.program-card:hover .card-thumb { transform:scale(1.045); }
.photo-card { position:relative; overflow:hidden; min-height:360px; border-radius:24px; background:var(--navy); box-shadow:var(--shadow-sm); }
.photo-card img { width:100%; height:100%; min-height:360px; object-fit:cover; transition:transform .8s var(--ease); }
.photo-card-overlay { position:absolute; inset:auto 0 0; padding:70px 28px 26px; color:white; background:linear-gradient(transparent,rgba(8,29,51,.92)); }
.photo-card-overlay h3 { color:white; }
.photo-card-overlay p { margin-top:8px; color:rgba(255,255,255,.75); font-size:.9rem; }

.institution-card.has-thumb { min-height:390px; padding:0; overflow:hidden; }
.institution-card.has-thumb .card-thumb { width:100%; aspect-ratio:1.35; object-fit:cover; transition:transform .7s var(--ease); }
.institution-card.has-thumb .card-body { display:flex; flex:1; flex-direction:column; padding:25px; }
.institution-card.has-thumb h3 { margin:16px 0 10px; }
.institution-card.has-thumb .status { margin-top:auto; padding-top:18px; }
.institution-card:hover .card-thumb { transform:scale(1.06); }
.icon-badge { display:grid; width:50px; height:50px; place-items:center; border-radius:16px; background:var(--sage); color:var(--forest); box-shadow:0 8px 22px rgba(8,29,51,.12); }
.icon-badge .icon { width:25px;height:25px; }

.prayer-section { background:var(--white); }
.prayer-shell { display:grid; grid-template-columns:.7fr 1.3fr; overflow:hidden; border-radius:32px; background:var(--navy); box-shadow:var(--shadow-lg); }
.prayer-date { position:relative; padding:clamp(34px,5vw,62px); color:rgba(255,255,255,.77); background:linear-gradient(155deg,var(--forest),var(--navy)); }
.prayer-date::after { content:""; position:absolute; right:-65px; bottom:-65px; width:210px;height:210px;border:1px solid rgba(255,255,255,.15);border-radius:50%;box-shadow:0 0 0 35px rgba(255,255,255,.035),0 0 0 70px rgba(255,255,255,.02); }
.prayer-date .icon { width:42px;height:42px;color:#b9e0d0; }
.prayer-date h2 { margin:26px 0 16px;color:white; }
.hijri-date { margin-top:34px;padding-top:25px;border-top:1px solid rgba(255,255,255,.18); }
.hijri-date strong { display:block;color:white;font-family:var(--serif);font-size:1.65rem; }
.prayer-times { display:grid; grid-template-columns:repeat(3,1fr); padding:clamp(28px,4vw,52px); gap:12px; background:#f7faf8; }
.prayer-time { padding:22px;border:1px solid var(--stone);border-radius:18px;background:white;transition:.3s var(--ease); }
.prayer-time:hover { transform:translateY(-4px);border-color:var(--green);box-shadow:var(--shadow-sm); }
.prayer-time span { display:block;color:var(--slate);font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em; }
.prayer-time strong { display:block;margin-top:5px;color:var(--navy);font-family:var(--serif);font-size:1.4rem; }
.prayer-status { grid-column:1/-1;color:var(--slate);font-size:.8rem; }

.faq-section { background:#eef3f0; }
.faq-layout { display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(44px,7vw,90px);align-items:start; }
.faq-intro { position:sticky;top:120px; }
.faq-intro p:last-child { margin-top:20px;color:var(--slate); }
.faq-list { display:grid;gap:12px; }
.faq-item { border:1px solid rgba(8,29,51,.1);border-radius:18px;background:rgba(255,255,255,.86);box-shadow:0 8px 26px rgba(8,29,51,.035); }
.faq-item summary { display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 24px;color:var(--navy);font-weight:800;cursor:pointer;list-style:none; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary span { display:grid;flex:0 0 30px;width:30px;height:30px;place-items:center;border-radius:50%;background:var(--sage);color:var(--forest);font-size:1.2rem;transition:transform .25s; }
.faq-item[open] summary span { transform:rotate(45deg); }
.faq-item > div { padding:0 24px 23px;color:var(--slate); }

.sticky-actions { position:fixed;z-index:90;inset:50% 0 auto;pointer-events:none; }
.sticky-donate,.sticky-connect { position:absolute;pointer-events:auto;box-shadow:var(--shadow-lg); }
.sticky-donate { left:0;display:flex;align-items:center;gap:9px;padding:13px 17px 13px 13px;border-radius:0 999px 999px 0;background:#a83b35;color:white;font-weight:900;text-decoration:none;transition:.3s var(--ease); }
.sticky-donate:hover { padding-left:20px;background:#bf473f; }
.sticky-donate .icon { width:19px;height:19px; }
.sticky-connect { right:0;display:grid;padding:7px;border-radius:18px 0 0 18px;background:rgba(255,255,255,.94);backdrop-filter:blur(14px); }
.sticky-connect a { display:grid;width:42px;height:42px;place-items:center;border-radius:12px;color:var(--navy);transition:.25s; }
.sticky-connect a:hover { background:var(--navy);color:white;transform:translateX(-3px); }
.sticky-connect .icon { width:19px;height:19px; }

.site-footer { position:relative;overflow:hidden;padding-top:0; }
.footer-appeal { display:flex;align-items:center;justify-content:space-between;gap:40px;padding-block:70px;border-bottom:1px solid rgba(255,255,255,.12); }
.footer-appeal h2 { max-width:760px;color:white; }
.footer-appeal .eyebrow { color:#a9d6c4; }
.mega-footer-grid { display:grid;grid-template-columns:1.5fr .7fr .85fr 1fr 1.25fr;gap:42px;padding-block:70px; }
.mega-footer-grid h2 { margin-bottom:20px;color:white;font-family:var(--sans);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase; }
.mega-footer-grid a { display:block;margin-top:10px;color:rgba(255,255,255,.68);text-decoration:none;transition:color .2s; }
.mega-footer-grid a:hover { color:white; }
.footer-socials { display:flex;gap:9px;margin-top:26px; }
.footer-socials a { display:grid;width:42px;height:42px;place-items:center;margin:0;border:1px solid rgba(255,255,255,.17);border-radius:50%; }
.footer-socials a:hover { background:white;color:var(--navy);transform:translateY(-2px); }
.footer-socials .icon { width:18px;height:18px; }
.footer-map iframe { width:100%;height:210px;border:0;border-radius:20px;filter:saturate(.4) contrast(1.05); }
.footer-signature { width:100%;margin-bottom:-.08em;color:rgba(255,255,255,.42);font-family:var(--serif);font-size:clamp(4.2rem,13vw,12rem);font-weight:900;line-height:.75;letter-spacing:-.075em;text-align:center;white-space:nowrap; }

.campaign-hero { position:relative;overflow:hidden;padding:clamp(76px,10vw,130px) 0;background:var(--navy);color:white; }
.campaign-hero::before { content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,29,51,.98) 0%,rgba(8,29,51,.88) 45%,rgba(8,29,51,.35) 100%),var(--campaign-image) center/cover; }
.campaign-hero .container { position:relative; }
.campaign-hero h1 { max-width:800px;color:white; }
.campaign-hero .lead { margin-top:25px;color:rgba(255,255,255,.8); }
.campaign-range { display:inline-flex;align-items:center;gap:12px;margin-top:28px;padding:12px 18px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(255,255,255,.08);backdrop-filter:blur(12px);font-weight:800; }
.campaign-range strong { color:#a9d6c4; }
.campaign-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:18px; }
.campaign-card { padding:32px;border-radius:24px;background:white;box-shadow:var(--shadow-sm);transition:.35s var(--ease); }
.campaign-card:hover { transform:translateY(-7px);box-shadow:var(--shadow-lg); }
.campaign-card .icon { width:30px;height:30px;color:var(--forest); }
.campaign-card h3 { margin:34px 0 13px; }
.campaign-card p { color:var(--slate); }

.values-orbit { position:relative;display:grid;width:min(820px,100%);aspect-ratio:1;margin:30px auto 0;place-items:center; }
.values-orbit::before,.values-orbit::after { content:"";position:absolute;border:1px solid rgba(95,155,133,.28);border-radius:50%; }
.values-orbit::before { inset:16%; }
.values-orbit::after { inset:30%;border-style:dashed; }
.values-core { position:relative;z-index:3;display:grid;width:25%;aspect-ratio:1;place-items:center;border-radius:50%;background:var(--navy);box-shadow:0 22px 70px rgba(8,29,51,.25); }
.values-core img { width:63%;filter:brightness(0) invert(1); }
.value-node { --a:0deg;position:absolute;left:50%;top:50%;display:grid;width:145px;min-height:112px;place-items:center;padding:15px;border:1px solid var(--stone);border-radius:22px;background:white;box-shadow:var(--shadow-sm);text-align:center;transform:translate(-50%,-50%) rotate(var(--a)) translateY(-290px) rotate(calc(-1 * var(--a)));transition:.35s var(--ease); }
.value-node:hover { border-color:var(--green);box-shadow:0 0 0 5px rgba(95,155,133,.12),var(--shadow-lg); }
.value-node strong { display:block;color:var(--navy);font-family:var(--serif);font-size:1.1rem; }
.value-node span { color:var(--slate);font-size:.72rem;line-height:1.35; }

.enquiry-shell { display:grid;grid-template-columns:.78fr 1.22fr;overflow:hidden;border-radius:30px;background:white;box-shadow:var(--shadow-lg); }
.enquiry-intro { padding:clamp(34px,5vw,60px);background:var(--forest);color:rgba(255,255,255,.8); }
.enquiry-intro h2 { color:white; }
.enquiry-intro p { margin-top:20px; }
.enquiry-form { display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:clamp(30px,5vw,58px); }
.form-field { display:grid;gap:7px; }
.form-field.full { grid-column:1/-1; }
.form-field label { color:var(--navy);font-size:.82rem;font-weight:800; }
.form-field input,.form-field select,.form-field textarea { width:100%;padding:13px 15px;border:1px solid var(--stone);border-radius:13px;background:#fbfcfb;color:var(--charcoal); }
.form-field input:focus,.form-field select:focus,.form-field textarea:focus { outline:3px solid rgba(45,111,159,.16);border-color:var(--blue); }
.form-consent { grid-column:1/-1;display:flex;gap:10px;color:var(--slate);font-size:.78rem; }
.form-consent input { margin-top:5px; }
.form-honeypot { position:absolute!important;left:-9999px!important; }
.form-notice { grid-column:1/-1;padding:14px 16px;border-radius:12px;background:var(--sage);color:var(--forest);font-size:.85rem; }

@media (max-width:1120px) {
    .site-nav { gap:14px; }
    .site-nav > a:not(.button),.nav-parent { font-size:.8rem; }
    .mega-footer-grid { grid-template-columns:1.35fr repeat(3,1fr); }
    .footer-map { grid-column:1/-1; }
}
@media (max-width:820px) {
    .site-header.is-scrolled .nav-inner { min-height:66px; }
    .site-nav { align-items:stretch; }
    .nav-group { border-bottom:1px solid var(--stone); }
    .nav-parent { width:100%;display:flex;justify-content:space-between;padding:14px 4px;font-size:.95rem;text-align:left; }
    .nav-dropdown { position:static;width:100%;max-height:0;padding:0;border:0;border-radius:0;box-shadow:none;opacity:1;visibility:hidden;overflow:hidden;transform:none;background:transparent;transition:max-height .3s var(--ease); }
    .nav-group.is-open .nav-dropdown { max-height:320px;padding:0 0 10px;visibility:visible; }
    .nav-dropdown a { padding:10px 14px; }
    .prayer-shell,.faq-layout,.enquiry-shell { grid-template-columns:1fr; }
    .faq-intro { position:static; }
    .prayer-times { grid-template-columns:repeat(2,1fr); }
    .mega-footer-grid { grid-template-columns:1fr 1fr; }
    .footer-brand,.footer-map { grid-column:1/-1; }
    .campaign-grid { grid-template-columns:1fr 1fr; }
    .value-node { position:static;transform:none!important;width:100%;min-height:100px; }
    .values-orbit { grid-template-columns:1fr 1fr;gap:14px;aspect-ratio:auto; }
    .values-orbit::before,.values-orbit::after { display:none; }
    .values-core { grid-column:1/-1;width:150px;margin:0 auto 16px; }
}
@media (max-width:600px) {
    h1 { font-size:clamp(2.45rem,11vw,3.6rem); }
    h2 { font-size:clamp(1.9rem,9vw,3rem); }
    .sticky-actions { inset:auto 0 14px; }
    .sticky-donate { left:12px;border-radius:999px;padding:12px 15px; }
    .sticky-connect { right:12px;display:flex;border-radius:999px;padding:5px; }
    .sticky-connect a { width:37px;height:37px; }
    .footer-appeal { align-items:flex-start;flex-direction:column; }
    .mega-footer-grid { grid-template-columns:1fr; }
    .footer-brand,.footer-map { grid-column:auto; }
    .footer-signature { font-size:19vw; }
    .prayer-times,.campaign-grid,.enquiry-form,.values-orbit { grid-template-columns:1fr; }
    .form-field.full,.form-consent,.values-core { grid-column:auto; }
    .section-photo::before { background:rgba(8,29,51,.84); }
}

/* Non-blocking brand loader: motion without hiding page content. */
.js .page-loader { display:block;position:fixed;z-index:9998;inset:0 0 auto;height:3px;background:transparent;pointer-events:none; }
.page-loader img { display:none; }
.page-loader::after { content:"";display:block;width:38%;height:100%;background:linear-gradient(90deg,var(--green),#9ed2bd);box-shadow:0 0 16px rgba(95,155,133,.65);animation:loaderTrack .85s var(--ease) infinite; }
.page-loader.is-hidden { opacity:0;visibility:hidden; }
@keyframes loaderTrack { from { transform:translateX(-110%); } to { transform:translateX(370%); } }

/* Section rhythm and contrast refinement */
:root {
    --mist-blue: #dce8ef;
    --deep-sage: #d9e8e0;
}

.architectural-lines {
    background-image:
        linear-gradient(115deg, transparent 0 68%, rgba(141,197,174,.07) 68% 68.12%, transparent 68.12%),
        linear-gradient(25deg, transparent 0 76%, rgba(255,255,255,.055) 76% 76.12%, transparent 76.12%);
    background-size: 420px 420px, 520px 520px;
}

/* Keep the logo texture intentional: one principal moment per page. */
.home-hero.monogram-field::before,
.prayer-section.monogram-field::before,
.cta-band.monogram-field::before,
#program-inquiry.monogram-field::before,
.page-donate .section-forest.monogram-field::before,
.page-urgent .section-sage.monogram-field::before { display: none; }

/* A full-width spiritual chapter now separates purpose from the values system. */
.prayer-section {
    background-color: var(--navy);
    background-image:
        radial-gradient(circle at 14% 30%, rgba(95,155,133,.22), transparent 30%),
        linear-gradient(135deg, #061526 0%, #0b2944 58%, #123a48 100%);
}
.prayer-shell {
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 32px 90px rgba(0,0,0,.3);
}
.prayer-times { background: #eef3f5; }

/* FAQs are a distinct cool-blue utility chapter rather than another sage panel. */
.faq-section {
    background: var(--mist-blue);
    box-shadow: inset 0 7px 0 rgba(45,111,159,.14);
}
.faq-item {
    border-color: rgba(8,29,51,.14);
    background: rgba(255,255,255,.94);
    box-shadow: 0 12px 30px rgba(8,29,51,.055);
}
.faq-item summary span { background: #e4eef3; }

/* About: leadership becomes the decisive dark chapter before FAQs. */
.section-navy .lead { color: rgba(255,255,255,.72); }
.leadership-section .leader-card {
    border-color: rgba(255,255,255,.14);
    background: rgba(255,255,255,.075);
    box-shadow: none;
    backdrop-filter: blur(10px);
}
.leadership-section .leader-card:hover {
    border-color: rgba(141,197,174,.55);
    background: rgba(255,255,255,.11);
    box-shadow: 0 20px 50px rgba(0,0,0,.18);
}
.leadership-section .leader-card h3 { color: var(--white); }
.leadership-section .leader-card .role { color: #a9d6c4; }
.leadership-section .leader-card p { color: rgba(255,255,255,.7); }

/* Institutions: active work, a dark horizon, then future-facing cards. */
.ecosystem-grid { grid-template-columns: repeat(6, 1fr); }
.ecosystem-grid .ecosystem-card { grid-column: span 3; }
.ecosystem-grid .ecosystem-card.is-active {
    grid-column: span 3;
    min-height: 300px;
}
.ecosystem-grid details.ecosystem-card:nth-of-type(n+3) { grid-column: span 2; }
.section-sage:has(.ecosystem-grid) { padding-block: clamp(82px, 8vw, 108px); }
.ecosystem-grid .ecosystem-card { padding: 30px; }
.ecosystem-grid .ecosystem-card h2 { font-size: clamp(1.65rem, 2.45vw, 2.15rem); }
details.ecosystem-card.is-future {
    display: block;
    min-height: 0;
    padding: 0;
    background: rgba(255,255,255,.88);
}
details.ecosystem-card.is-future summary {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 52px 1fr 34px;
    align-items: center;
    gap: 18px;
    min-height: 142px;
    padding: 26px 28px;
    color: var(--navy);
    cursor: pointer;
    list-style: none;
}
details.ecosystem-card.is-future summary::-webkit-details-marker { display: none; }
details.ecosystem-card.is-future summary strong {
    display: block;
    font-family: var(--serif);
    font-size: 1.45rem;
    line-height: 1.15;
}
details.ecosystem-card.is-future summary small {
    display: block;
    margin-top: 7px;
    color: var(--forest);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
details.ecosystem-card.is-future summary b {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 50%;
    background: var(--sage);
    color: var(--forest);
    font-size: 1.2rem;
    transition: transform .25s var(--ease), background .25s;
}
details.ecosystem-card.is-future[open] summary b { transform: rotate(45deg); background: var(--deep-sage); }
.ecosystem-future-copy { padding: 0 28px 26px; color: var(--slate); }
.ecosystem-divider {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    align-items: end;
    gap: 54px;
    overflow: hidden;
    margin: 20px 0;
    padding: clamp(36px, 4.5vw, 50px);
    border-radius: var(--radius);
    background-color: var(--navy);
    color: rgba(255,255,255,.72);
    box-shadow: var(--shadow-lg);
}
.ecosystem-divider h2 { color: var(--white); font-size: clamp(2rem, 3vw, 2.75rem); }
.ecosystem-divider .eyebrow { color: #a9d6c4; }
.ecosystem-divider > p { max-width: 600px; font-size: 1.08rem; }

/* Programs: one flagship, two visual anchors, then four compact pathways. */
.section-white:has(.program-grid) {
    background-color: var(--navy);
    background-image: linear-gradient(145deg, #081d33, #0b2944 72%, #123a48);
}
.section-white:has(.program-grid) h2 { color: var(--white); }
.section-white:has(.program-grid) .lead { color: rgba(255,255,255,.72); }
.program-grid { grid-template-columns: repeat(12, 1fr); }
.program-grid .program-card { grid-column: span 3; }
.program-grid .program-card:nth-child(-n+2) { grid-column: span 6; }
.program-grid .program-card:nth-child(-n+2) .card-thumb {
    max-height: 240px;
    aspect-ratio: 2.2;
}
.program-grid .program-card:nth-child(-n+2) .program-card-body { padding: 24px 28px 28px; }
.program-grid .program-card:nth-child(n+3) {
    min-height: 270px;
    padding: 24px;
}
.program-grid .program-card:nth-child(n+3) .card-thumb { display: none; }
.program-grid .program-card:nth-child(n+3) .program-card-body { padding: 0; }
.program-grid .program-card:nth-child(n+3) .icon-badge { margin-top: 0; }
.program-grid .program-card:nth-child(n+3) h3 { margin-top: 24px; }
.section-white:has(.program-grid) .program-card h3 { color: var(--navy); }

/* Impact: metrics become a full-color evidence chapter; governance stays crisp white. */
.page-impact .section:has(.evidence-grid) {
    background-color: var(--navy);
    background-image:
        radial-gradient(circle at 90% 10%, rgba(95,155,133,.18), transparent 30%),
        linear-gradient(145deg, #061526, #0b2944);
}
.page-impact .section:has(.evidence-grid) h2 { color: var(--white); }
.page-impact .section:has(.evidence-grid) .lead { color: rgba(255,255,255,.72); }
.page-impact .section:has(.evidence-grid) .evidence-card { border: 1px solid rgba(255,255,255,.14); }
.page-impact .section:has(.governance-list) { background: var(--white); }

/* Campaign photography remains readable while the right side visibly carries the place. */
.campaign-hero::before {
    background:
        linear-gradient(90deg, rgba(8,29,51,.98) 0%, rgba(8,29,51,.82) 43%, rgba(8,29,51,.12) 100%),
        var(--campaign-image) center / cover;
}
.page-urgent .section-sage {
    background-color: var(--navy);
    color: rgba(255,255,255,.76);
}
.page-urgent .section-sage h2 { color: var(--white); }
.page-urgent .section-sage .lead { color: rgba(255,255,255,.75); }
.page-urgent .section-sage .eyebrow { color: #a9d6c4; }
.page-urgent .section-sage .button:not(.button-forest) { background: var(--white); color: var(--navy); }

/* Contact cards now bridge into a full navy visit chapter. */
.section-white:has(.visit-panel) {
    margin-top: -110px;
    padding-top: calc(clamp(82px, 10vw, 138px) + 110px);
    background-color: var(--navy);
    background-image: linear-gradient(145deg, #081d33, #0b2944);
}
.section-white:has(.visit-panel) .visit-panel {
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.055);
    box-shadow: 0 28px 80px rgba(0,0,0,.25);
}

/* Preserve the mega-footer while improving proportion on shorter pages. */
.footer-appeal { padding-block: 56px; }
.mega-footer-grid { padding-block: 56px; }
.footer-bottom { margin-top: 12px; }
.footer-signature { font-size: clamp(4rem, 11vw, 10rem); }

@media (max-width: 820px) {
    .ecosystem-grid { grid-template-columns: 1fr 1fr; }
    .ecosystem-grid .ecosystem-card,
    .ecosystem-grid .ecosystem-card.is-active,
    .ecosystem-grid details.ecosystem-card:nth-of-type(n+3) { grid-column: span 1; }
    .ecosystem-divider { grid-template-columns: 1fr; }
    .program-grid { grid-template-columns: 1fr 1fr; }
    .program-grid .program-card,
    .program-grid .program-card:nth-child(-n+2) { grid-column: span 1; }
}

@media (max-width: 600px) {
    .architectural-lines { background-size: 280px 280px, 360px 360px; }
    .ecosystem-grid,
    .program-grid { grid-template-columns: 1fr; }
    .ecosystem-grid .ecosystem-card,
    .ecosystem-grid .ecosystem-card.is-active { min-height: 0; padding: 24px; }
    .ecosystem-grid .ecosystem-card h2 { margin: 20px 0 10px; }
    details.ecosystem-card.is-future { padding: 0; }
    details.ecosystem-card.is-future summary { min-height: 118px; padding: 20px; }
    details.ecosystem-card.is-future summary strong { font-size: 1.25rem; }
    .ecosystem-future-copy { padding: 0 20px 22px; }
    .ecosystem-divider { margin: 8px 0; padding: 28px 24px; }
    .ecosystem-divider h2 { font-size: 2rem; }
    .program-grid .program-card:nth-child(-n+2) { min-height: 420px; }
    .program-grid .program-card:nth-child(-n+2) .card-thumb { max-height: 190px; }
    .program-grid .program-card:nth-child(n+3) { min-height: 230px; }
    .institution-card.has-thumb { min-height: 0; }
    .institution-card.has-thumb .card-thumb { aspect-ratio: 2 / 1; }
    .institution-card.has-thumb .card-body { padding: 20px; }
    .campaign-card { padding: 26px; }
    .campaign-card h3 { margin-top: 24px; }
    .campaign-hero::before {
        background:
            linear-gradient(90deg, rgba(8,29,51,.94), rgba(8,29,51,.65)),
            var(--campaign-image) 65% center / cover;
    }
    .section-white:has(.visit-panel) {
        margin-top: -54px;
        padding-top: 132px;
    }
    .footer-appeal,
    .mega-footer-grid { padding-block: 46px; }
}

/* Final cascade overrides for expanded navigation and fixed quick actions. */
@media (min-width: 981px) {
    .nav-dropdown.services-dropdown {
        left: -210px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: min(680px, 78vw);
    }
    .sticky-donate {
        top: 50%;
        padding: 17px 12px;
        border-radius: 0 18px 18px 0;
        background: linear-gradient(180deg,#a83b35,#ca574e);
        writing-mode: vertical-rl;
        transform: translateY(-50%) rotate(180deg);
    }
    .sticky-donate:hover { padding: 22px 12px 17px; }
    .sticky-donate .icon { transform: rotate(180deg); }
}
.sticky-connect {
    background: linear-gradient(165deg,#174e43,#5f9b85);
    border: 1px solid rgba(255,255,255,.18);
}
.sticky-connect a { color: white; }
.sticky-connect a:hover { background: rgba(255,255,255,.94); color: var(--forest); }
@media (max-width: 980px) {
    .nav-dropdown.services-dropdown { width: 100%; grid-template-columns: 1fr; }
    .nav-group.is-open .services-dropdown { max-height: 680px; }
}
@media (max-width: 600px) {
    .sticky-donate {
        top: auto;
        padding: 12px 15px;
        border-radius: 999px;
        writing-mode: horizontal-tb;
        transform: none;
    }
    .sticky-donate:hover { padding: 12px 18px; }
    .sticky-donate .icon { transform: none; }
}
.page-donate .campaign-hero::before {
    background:
        linear-gradient(90deg,rgba(8,29,51,.98) 0%,rgba(8,29,51,.9) 43%,rgba(8,29,51,.32) 70%,rgba(8,29,51,.08) 100%),
        var(--campaign-image) 76% center / cover;
}
.home-hero h1,
.campaign-hero h1 { font-size: clamp(3rem, 6.1vw, 5.7rem); }
@media (min-width: 981px) and (max-width: 1120px) {
    .nav-dropdown.services-dropdown { left: -330px; }
}
@media (max-width: 600px) {
    .campaign-hero h1 { font-size: clamp(2.45rem, 11vw, 3.6rem); }
    .page-donate .campaign-hero::before {
        background:
            linear-gradient(90deg,rgba(8,29,51,.94),rgba(8,29,51,.62)),
            var(--campaign-image) 62% center / cover;
    }
}

/* Visual QA corrections: paired edge rails, readable light roadmaps and denser mobile journeys. */
.section-head h2 { font-size: clamp(2rem, 3.45vw, 3.25rem); }
.home-hero h1,
.campaign-hero h1 { font-size: clamp(3rem, 5.5vw, 5.2rem); }

@media (min-width: 601px) {
    .sticky-actions {
        inset: 50% 0 auto;
        --edge-rail-height: 184px;
    }
    .sticky-donate,
    .sticky-connect {
        top: 0;
        height: var(--edge-rail-height);
        transform: translateY(-50%);
    }
    .sticky-donate {
        min-height: var(--edge-rail-height);
        justify-content: center;
        padding: 16px 12px;
        border-radius: 0 18px 18px 0;
        writing-mode: vertical-rl;
        transform: translateY(-50%) rotate(180deg);
    }
    .sticky-donate:hover {
        padding: 21px 12px 16px;
        transform: translateY(-50%) rotate(180deg) translateY(3px);
    }
    .sticky-donate .icon { transform: rotate(180deg); }
    .sticky-connect { justify-content: center; }
}

.section-white .service-step {
    border-color: rgba(8,29,51,.1);
    background: linear-gradient(145deg, var(--sage), #f9fbfa);
    box-shadow: 0 16px 38px rgba(8,29,51,.07);
}
.section-white .service-step h3 { color: var(--navy); }
.section-white .service-step p { color: var(--slate); }
.section-white .service-step > strong { color: var(--forest); }

.page-donate .section-gradient .institution-card {
    border-color: rgba(8,29,51,.1);
    background: rgba(255,255,255,.94);
    color: var(--slate);
    box-shadow: 0 16px 40px rgba(8,29,51,.08);
}
.page-donate .section-gradient .institution-card:hover {
    border-color: rgba(95,155,133,.5);
    background: var(--white);
    box-shadow: 0 24px 54px rgba(8,29,51,.14);
}
.page-donate .section-gradient .institution-card h3 { color: var(--navy); }
.page-donate .section-gradient .institution-card p { color: var(--slate); }

.button-small,
.card-link { font-size: .875rem; }

@media (max-width: 600px) {
    .section { padding-block: 68px; }
    .section-head { gap: 20px; margin-bottom: 38px; }
    .section-head h2 { font-size: clamp(1.9rem, 8.2vw, 2.65rem); }

    .sticky-actions {
        inset: auto 0 14px;
        height: 47px;
        transform: none;
    }
    .sticky-donate,
    .sticky-connect {
        top: 0;
        height: 47px;
        min-height: 47px;
        transform: none;
    }
    .sticky-donate {
        left: 12px;
        justify-content: center;
        padding: 12px 15px;
        border-radius: 999px;
        writing-mode: horizontal-tb;
    }
    .sticky-donate:hover { padding: 12px 18px; transform: none; }
    .sticky-donate .icon { transform: none; }
    .sticky-connect { right: 12px; }

    .institution-grid .institution-card.has-thumb {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        min-height: 190px;
    }
    .institution-card.has-thumb .card-thumb {
        width: 112px;
        height: 100%;
        min-height: 190px;
        aspect-ratio: auto;
    }
    .institution-card.has-thumb .card-body { min-width: 0; padding: 19px; }
    .institution-card.has-thumb .icon-badge { display: none; }
    .institution-card.has-thumb h3 { margin: 0 0 8px; font-size: 1.18rem; }
    .institution-card.has-thumb p { font-size: .84rem; }
    .institution-card.has-thumb .status { margin-top: 13px; padding-top: 0; font-size: .66rem; }
    .institution-card.has-thumb .card-link { margin-top: 12px; font-size: .76rem; }

    .compact-service-grid .service-card,
    .masjid-offering {
        display: grid;
        grid-template-columns: 50px minmax(0, 1fr);
        column-gap: 15px;
        min-height: 0;
        padding: 20px;
    }
    .compact-service-grid .service-card .icon-badge,
    .masjid-offering > .icon { grid-row: 1 / span 3; }
    .compact-service-grid .service-card h3,
    .masjid-offering h3 { margin: 0 0 7px; font-size: 1.18rem; }
    .compact-service-grid .service-card p,
    .compact-service-grid .service-card .card-link,
    .masjid-offering p { grid-column: 2; }
    .compact-service-grid .service-card .card-link { margin-top: 10px; }

    .ecosystem-grid .ecosystem-card.is-active {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        column-gap: 16px;
        min-height: 0;
    }
    .ecosystem-grid .ecosystem-card.is-active .icon-wrap { grid-row: 1 / span 4; }
    .ecosystem-grid .ecosystem-card.is-active h2 { margin: 0 0 10px; font-size: 1.45rem; }
    .ecosystem-grid .ecosystem-card.is-active p,
    .ecosystem-grid .ecosystem-card.is-active .status,
    .ecosystem-grid .ecosystem-card.is-active .card-link { grid-column: 2; }

    .program-grid .program-card:nth-child(-n+2) { min-height: 360px; }
    .program-grid .program-card:nth-child(-n+2) .card-thumb { max-height: 155px; }
    .program-grid .program-card:nth-child(n+3) { min-height: 0; padding: 20px; }
    .program-grid .program-card:nth-child(n+3) h3 { margin-top: 17px; }
    .program-grid .program-card:nth-child(n+3) .program-time { padding-top: 16px; }
}

details.program-card-compact {
    display: block;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}
.program-grid details.program-card-compact:nth-child(n+3):nth-child(-n+5) { grid-column: span 4; }
.program-grid details.program-card-compact:nth-child(n+6) { grid-column: span 6; }
.program-card-compact summary {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 16px;
    min-height: 138px;
    padding: 24px;
    color: var(--navy);
    cursor: pointer;
    list-style: none;
}
.program-card-compact summary::-webkit-details-marker { display: none; }
.program-card-compact summary strong { display: block; font-family: var(--serif); font-size: 1.3rem; line-height: 1.18; }
.program-card-compact summary small { display: block; margin-top: 7px; color: var(--forest); font-size: .74rem; font-weight: 800; line-height: 1.4; }
.program-card-compact summary b { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--sage); color: var(--forest); transition: transform .25s var(--ease); }
.program-card-compact[open] summary b { transform: rotate(45deg); }
.program-compact-copy { padding: 0 24px 24px 90px; }
.program-compact-copy p { color: var(--slate); }
.program-card-compact[open] { box-shadow: 0 18px 44px rgba(8,29,51,.14); }

@media (max-width: 820px) {
    .program-grid details.program-card-compact:nth-child(n+3) { grid-column: span 1; }
}
@media (max-width: 600px) {
    .program-card-compact summary { min-height: 112px; padding: 18px; }
    .program-card-compact summary strong { font-size: 1.15rem; }
    .program-compact-copy { padding: 0 18px 20px 84px; }
}

/* Compact prayer utility and directional edge treatment. */
@media (min-width: 601px) {
    .sticky-donate,
    .sticky-donate:hover {
        left: 0;
        /* The rail is rotated for bottom-to-top text, so radii are assigned
           to the pre-rotation left side to render on the visual right side. */
        border-radius: 18px 0 0 18px;
    }
}

.prayer-section { padding-block: clamp(60px, 6vw, 82px); }
.prayer-shell {
    grid-template-columns: minmax(310px, .72fr) minmax(0, 1.48fr);
    border-radius: 26px;
}
.prayer-date {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(30px, 3.5vw, 46px);
}
.prayer-kicker { display: flex; align-items: center; gap: 13px; }
.prayer-kicker .icon { width: 28px; height: 28px; flex: 0 0 auto; }
.prayer-kicker .eyebrow { margin: 0; color: #b9e0d0; }
.prayer-date h2 {
    max-width: 430px;
    margin: 22px 0 24px;
    font-size: clamp(2.15rem, 3.2vw, 3.25rem);
    line-height: 1.02;
}
.prayer-calendar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.18);
}
.prayer-calendar span {
    display: block;
    margin-bottom: 6px;
    color: rgba(255,255,255,.6);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.prayer-calendar strong {
    display: block;
    color: white;
    font-family: var(--serif);
    font-size: clamp(1.02rem, 1.35vw, 1.3rem);
    line-height: 1.25;
}
.prayer-times {
    align-content: center;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: clamp(24px, 3vw, 36px);
}
.prayer-time {
    min-height: 98px;
    padding: 18px 20px;
    border-radius: 16px;
}
.prayer-time strong { margin-top: 8px; font-size: 1.28rem; }
.prayer-status { margin: 5px 0 0; }

@media (min-width: 981px) {
    .prayer-shell { display: block; }
    .prayer-date {
        display: grid;
        grid-template-columns: minmax(220px, .9fr) minmax(300px, 1.25fr) minmax(330px, 1fr);
        align-items: center;
        gap: 32px;
        padding: 27px 36px;
    }
    .prayer-date h2 {
        margin: 0;
        font-size: clamp(2rem, 2.55vw, 2.75rem);
    }
    .prayer-calendar {
        gap: 20px;
        padding: 2px 0 2px 28px;
        border-top: 0;
        border-left: 1px solid rgba(255,255,255,.18);
    }
    .prayer-times {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 9px;
        padding: 20px 28px 17px;
    }
    .prayer-time { min-height: 86px; padding: 16px; }
    .prayer-time strong { font-size: 1.16rem; }
    .prayer-status { margin: 2px 0 0; }
}

@media (max-width: 760px) {
    .prayer-shell { grid-template-columns: 1fr; }
    .prayer-date { padding: 30px; }
    .prayer-date h2 { max-width: 520px; font-size: clamp(2rem, 7vw, 2.75rem); }
    .prayer-times { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .sticky-donate,
    .sticky-donate:hover {
        left: 0;
        padding: 12px 16px 12px 14px;
        border-radius: 0 16px 16px 0;
    }
    .prayer-section { padding-block: 52px; }
    .prayer-shell { border-radius: 22px; }
    .prayer-date { padding: 27px 24px 25px; }
    .prayer-date::after { width: 150px; height: 150px; }
    .prayer-date h2 { margin: 18px 0 20px; font-size: 2.2rem; }
    .prayer-calendar { gap: 14px; padding-top: 17px; }
    .prayer-calendar strong { font-size: 1rem; }
    .prayer-times {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        padding: 20px;
    }
    .prayer-time { min-height: 84px; padding: 15px 16px; }
    .prayer-time strong { font-size: 1.16rem; }
    .prayer-status { margin-top: 4px; font-size: .75rem; }
}

/* White practice cards inside the navy Values chapter need their own text palette. */
.section-navy .learning-step {
    color: var(--navy);
    border-radius: 0 0 18px 18px;
    box-shadow: 0 16px 38px rgba(0,0,0,.14);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.section-navy .learning-step h3 { color: var(--navy); }
.section-navy .learning-step p { color: var(--slate); }
.section-navy .learning-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 50px rgba(0,0,0,.2);
}

/* Content-strategy navigation and eight-path refinements. */
.vision-progress ol { grid-template-columns: repeat(8, 1fr); }
@media (min-width: 1121px) {
    .site-nav { gap: 16px; }
    .site-nav > a:not(.button), .nav-parent { font-size: .82rem; }
}
@media (min-width: 981px) {
    .nav-dropdown.services-dropdown { right: -60px; left: auto; width: min(720px, 78vw); }
}
@media (max-width: 980px) {
    .nav-group.is-open .nav-dropdown { max-height: 560px; }
    .nav-group.is-open .services-dropdown { max-height: 850px; }
}

/* 2026-09-17 full-site visual QA: contrast, impact and Waqf refinements. */
.section-navy .eyebrow,
.section-forest .eyebrow,
.campaign-hero .eyebrow,
.cta-band .eyebrow { color: #c4e6d8; }

.section-navy .prose p,
.section-navy .prose li,
.section-forest .prose p,
.section-forest .prose li,
.section-forest .lead { color: rgba(255,255,255,.82); }

.section-navy .card-link,
.section-forest .card-link { color: #c4e6d8; }

.section-navy .governance-item h3 { color: var(--navy); }
.section-navy .governance-item p { color: var(--slate); }
.section-navy .governance-item .card-link { color: var(--blue); }

.section-sage .cta-inner h2,
.section-white .cta-inner h2 { color: var(--navy); }
.section-sage .cta-inner p,
.section-white .cta-inner p { color: var(--slate); }

.mission-card .kicker { color: #285f4c; }
.mission-card:nth-child(2) .kicker { color: #c4e6d8; }
.waqf-home-band .eyebrow { color: #c4e6d8; }
.pillar .number { color: #285f4c; }
.section-white:has(.program-grid) .eyebrow,
.enquiry-intro .eyebrow { color: #c4e6d8; }
.page-urgent .section-sage .cta-inner h2 { color: var(--white); }
.page-urgent .section-sage .cta-inner p { color: rgba(255,255,255,.78); }
.vision-progress li span { color: #285f4c; }
.section-photo { background-color: var(--navy); }
.sticky-donate { background-color: #a83b35; }

.institution-card.has-thumb {
    color: var(--slate);
    border-color: rgba(8,29,51,.09);
    background: var(--white);
    box-shadow: 0 12px 34px rgba(8,29,51,.075);
}
.institution-card.has-thumb:hover {
    border-color: rgba(50,107,87,.38);
    background: var(--white);
    box-shadow: 0 24px 54px rgba(8,29,51,.13);
}
.institution-card.has-thumb h3 { color: var(--navy); }
.institution-card.has-thumb .status { color: #285f4c; }
.institution-card.has-thumb .card-link { color: var(--blue); }

.section-white .campaign-stage:not(.is-active),
.section-gradient .campaign-stage:not(.is-active) {
    border-color: rgba(8,29,51,.11);
    background: rgba(255,255,255,.9);
    box-shadow: 0 13px 36px rgba(8,29,51,.07);
}
.section-white .campaign-stage:not(.is-active) > span,
.section-gradient .campaign-stage:not(.is-active) > span { color: #285f4c; }
.section-white .campaign-stage:not(.is-active) h3,
.section-gradient .campaign-stage:not(.is-active) h3 { color: var(--navy); }
.section-white .campaign-stage:not(.is-active) p,
.section-gradient .campaign-stage:not(.is-active) p { color: var(--slate); }
.section-white .campaign-stage .card-link,
.section-gradient .campaign-stage .card-link,
.section-navy .campaign-stage.is-active .card-link { color: var(--blue); }

/* A more editorial, premium presentation of verified participation figures. */
.impact-section {
    position: relative;
    padding: clamp(48px, 6vw, 78px) 0;
    overflow: hidden;
}
.impact-section-overlap {
    z-index: 5;
    margin-top: -42px;
    padding: 0 0 clamp(58px, 7vw, 86px);
    background: var(--ivory);
}
.impact-ribbon {
    position: relative;
    display: grid;
    grid-template-columns: minmax(260px, .8fr) minmax(0, 1.7fr);
    align-items: stretch;
    overflow: hidden;
    border: 1px solid rgba(158,210,189,.3);
    border-radius: 30px;
    background-color: #0b2b3b;
    background-image:
        radial-gradient(circle at 92% 0, rgba(141,197,174,.22), transparent 34%),
        linear-gradient(135deg, #071a2f 0%, #0b2b3b 58%, #174f49 100%);
    color: rgba(255,255,255,.8);
    box-shadow: 0 28px 74px rgba(8,29,51,.2);
}
.impact-ribbon::after {
    content: "RAF";
    position: absolute;
    right: -14px;
    bottom: -30px;
    color: rgba(255,255,255,.035);
    font: 800 9rem/1 var(--serif);
    pointer-events: none;
}
.impact-ribbon-intro {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(30px, 4vw, 48px);
    border-right: 1px solid rgba(255,255,255,.14);
}
.impact-ribbon-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #c4e6d8;
    font-size: .71rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.impact-ribbon-tag .icon { width: 18px; height: 18px; }
.impact-ribbon h2 {
    max-width: 440px;
    margin-top: 18px;
    color: var(--white);
    font-size: clamp(1.8rem, 3vw, 2.75rem);
    line-height: 1.08;
}
.impact-ribbon-intro p { margin-top: 16px; color: rgba(255,255,255,.69); font-size: .88rem; }
.impact-ribbon-metrics {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
}
.impact-ribbon-metrics:has(.impact-metric:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.impact-metric {
    display: flex;
    min-height: 230px;
    flex-direction: column;
    justify-content: center;
    padding: 30px 24px;
    border-right: 1px solid rgba(255,255,255,.13);
    transition: background .3s var(--ease), transform .3s var(--ease);
}
.impact-metric:last-child { border-right: 0; }
.impact-metric:hover { background: rgba(255,255,255,.075); transform: translateY(-3px); }
.impact-metric strong { color: var(--white); font: 750 clamp(2.7rem, 4.5vw, 4.4rem)/.95 var(--serif); letter-spacing: -.05em; }
.impact-metric span { margin-top: 17px; color: #c4e6d8; font-size: .79rem; font-weight: 900; letter-spacing: .045em; text-transform: uppercase; }
.impact-metric small { margin-top: 7px; color: rgba(255,255,255,.62); font-size: .76rem; line-height: 1.4; }

/* Waqf: a vision page with explicit development-state cues. */
.waqf-hero-symbol {
    position: relative;
    display: grid;
    min-height: 470px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 180px 180px 28px 28px;
    background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(95,155,133,.18));
    box-shadow: 0 30px 80px rgba(0,0,0,.25);
}
.waqf-hero-symbol::before,
.waqf-hero-symbol::after {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    border: 1px solid rgba(158,210,189,.18);
    border-radius: 50%;
}
.waqf-hero-symbol::after { width: 250px; height: 250px; }
.waqf-hero-symbol img { position: relative; z-index: 1; width: min(58%, 230px); filter: brightness(0) invert(1); opacity: .9; }
.waqf-hero-symbol p { position: absolute; z-index: 2; right: 24px; bottom: 24px; left: 24px; padding: 18px 20px; border-radius: 16px; background: rgba(8,29,51,.72); backdrop-filter: blur(12px); }
.waqf-hero-symbol strong,
.waqf-hero-symbol span { display: block; }
.waqf-hero-symbol strong { color: var(--white); font-family: var(--serif); font-size: 1.25rem; }
.waqf-hero-symbol span { margin-top: 3px; color: #c4e6d8; font-size: .8rem; }
.waqf-principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.waqf-principles article { min-height: 280px; padding: 30px; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: rgba(255,255,255,.065); }
.waqf-principles .icon { width: 31px; height: 31px; color: #b9e0d0; }
.waqf-principles h3 { margin: 48px 0 13px; color: var(--white); }
.waqf-principles p { color: rgba(255,255,255,.74); }
.waqf-caution { margin: 26px 0; padding: 18px 20px; border-left: 3px solid var(--forest); background: var(--sage); color: var(--charcoal); font-size: .9rem; }
.waqf-flow h3 { color: var(--navy); }
.waqf-flow p { color: var(--slate); }

@media (max-width: 980px) {
    .impact-ribbon { grid-template-columns: 1fr; }
    .impact-ribbon-intro { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
    .impact-metric { min-height: 180px; }
    .waqf-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .impact-section-overlap { margin-top: 0; padding-top: 22px; }
    .impact-ribbon { border-radius: 23px; }
    .impact-ribbon-intro { padding: 28px 24px; }
    .impact-ribbon-metrics,
    .impact-ribbon-metrics:has(.impact-metric:nth-child(3):last-child) { grid-template-columns: 1fr 1fr; }
    .impact-metric { min-height: 150px; padding: 23px 20px; border-right: 1px solid rgba(255,255,255,.13); border-bottom: 1px solid rgba(255,255,255,.13); }
    .impact-metric:nth-child(2n) { border-right: 0; }
    .impact-metric:nth-last-child(-n+2) { border-bottom: 0; }
    .impact-ribbon-metrics:has(.impact-metric:nth-child(3):last-child) .impact-metric:last-child { grid-column: 1 / -1; border-right: 0; }
    .impact-metric strong { font-size: 2.65rem; }
    .waqf-principles { grid-template-columns: 1fr; }
    .waqf-principles article { min-height: 0; }
    .waqf-hero-symbol { min-height: 360px; border-radius: 120px 120px 24px 24px; }
}
@media (max-width: 820px) {
    .vision-progress ol { grid-template-columns: repeat(4, 1fr); }
}

/* 2026-09-17 homepage flow, campaign parity and typography refinement */
h1,
.home-hero h1,
.campaign-hero h1,
.page-hero h1,
.page-hero-split h1 {
    font-weight: 600;
}
h1 { font-size: clamp(2.65rem, 4.8vw, 4.65rem); }
.home-hero h1,
.campaign-hero h1 { font-size: clamp(2.75rem, 4.55vw, 4.45rem); }
.page-hero h1 { font-size: clamp(2.7rem, 4.7vw, 4.55rem); }
.page-hero-split h1 { font-size: clamp(2.6rem, 4.35vw, 4.2rem); }

.impact-section {
    padding: clamp(70px, 7.5vw, 104px) 0;
    background: var(--ivory);
}
.impact-section.section-white { background: var(--white); }
.impact-section.section-navy { background: var(--navy); }
.impact-section.section-forest { background: var(--forest); }
.impact-section-overlap {
    margin-top: 0;
    padding: clamp(70px, 7.5vw, 104px) 0;
}

.ecosystem-count {
    font-variant-numeric: lining-nums tabular-nums;
    font-style: normal;
    transform: none;
}

.projects-feature-section {
    background-image:
        radial-gradient(circle at 87% 12%, rgba(95,155,133,.2), transparent 31%),
        linear-gradient(145deg, #071a2f 0%, #0a2d3c 64%, #174e43 100%);
}
.projects-feature-section .section-head { border-bottom-color: rgba(255,255,255,.14); }
.projects-feature-section .campaign-stage:not(.is-active) {
    border-color: rgba(158,210,189,.24);
    background: rgba(255,255,255,.075);
    box-shadow: none;
}
.projects-feature-section .campaign-stage:not(.is-active) > span { color: #b9e0d0; }
.projects-feature-section .campaign-stage:not(.is-active) h3 { color: var(--white); }
.projects-feature-section .campaign-stage:not(.is-active) p { color: rgba(255,255,255,.72); }

.vision-progress ol { grid-template-columns: repeat(8, 1fr); }
.urgent-eyebrow { color: #ffd0cb; }

@media (min-width: 821px) and (max-width: 1240px) {
    .nav-inner { gap: 20px; }
    .brand img { width: 270px; }
    .site-nav { gap: 12px; }
    .site-nav > a:not(.button),
    .nav-parent { font-size: .76rem; }
    .site-nav .button-small { padding-inline: 15px; }
}

@media (max-width: 700px) {
    h1,
    .home-hero h1,
    .campaign-hero h1,
    .page-hero h1,
    .page-hero-split h1 { font-size: clamp(2.2rem, 9.5vw, 3rem); }
    .impact-section,
    .impact-section-overlap { padding: 64px 0; }
    .vision-progress ol { grid-template-columns: repeat(2, 1fr); }
}

/* 2026-09-17 Waqf planning page: source-led financial storytelling. */
.page-waqf .waqf-hero {
    background-image:
        radial-gradient(circle at 84% 20%, rgba(134,205,175,.2), transparent 30%),
        linear-gradient(145deg, #06182b 0%, #0a3040 60%, #185748 100%);
}
.page-waqf .waqf-hero .container { align-items: center; }
.page-waqf .waqf-hero h1 { max-width: 760px; }
.waqf-hero-symbol {
    min-height: 440px;
    border-radius: 170px 170px 28px 28px;
    background:
        radial-gradient(circle at 50% 46%, rgba(151,214,188,.18), transparent 33%),
        linear-gradient(160deg, rgba(255,255,255,.1), rgba(8,29,51,.32));
}
.waqf-orbit {
    position: relative;
    z-index: 1;
    display: grid;
    width: 260px;
    height: 260px;
    place-items: center;
    border: 1px solid rgba(184,226,209,.25);
    border-radius: 50%;
}
.waqf-orbit::before,
.waqf-orbit::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(184,226,209,.13);
    border-radius: 50%;
}
.waqf-orbit::before { inset: -44px; }
.waqf-orbit::after { inset: 28px; }
.waqf-orbit img { width: 165px; filter: brightness(0) invert(1); opacity: .94; }
.waqf-hero-message {
    position: absolute;
    z-index: 3;
    right: 24px;
    bottom: 24px;
    left: 24px;
    padding: 20px 22px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    background: rgba(5,24,42,.76);
    backdrop-filter: blur(14px);
}
.waqf-hero-message span,
.waqf-hero-message strong,
.waqf-hero-message small { display: block; }
.waqf-hero-message span { color: #a8d9c5; font-size: .7rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.waqf-hero-message strong { margin-top: 5px; color: var(--white); font: 700 1.35rem/1.2 var(--serif); }
.waqf-hero-message small { margin-top: 6px; color: rgba(255,255,255,.66); }

.waqf-definition-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(50px,8vw,110px); align-items: start; }
.waqf-definition-copy > p:not(.waqf-definition-lead) { max-width: 720px; margin-top: 20px; color: var(--slate); }
.waqf-definition-lead { color: var(--navy); font: 600 clamp(1.45rem,2.6vw,2.1rem)/1.45 var(--serif); }
.waqf-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 38px; }
.waqf-feature-grid article { min-height: 220px; padding: 26px; border: 1px solid var(--stone); border-radius: 22px; background: #f9fbfa; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.waqf-feature-grid article:hover { transform: translateY(-5px); border-color: rgba(95,155,133,.55); box-shadow: var(--shadow-sm); }
.waqf-feature-grid .icon { width: 27px; height: 27px; color: var(--forest); }
.waqf-feature-grid h3 { margin: 32px 0 9px; font-size: 1.25rem; }
.waqf-feature-grid p { color: var(--slate); font-size: .88rem; }

.waqf-ecosystem {
    color: var(--white);
    background:
        radial-gradient(circle at 88% 10%, rgba(157,213,190,.18), transparent 31%),
        linear-gradient(145deg, #0b2733 0%, #164f45 100%);
}
.waqf-ecosystem .section-head { border-bottom-color: rgba(255,255,255,.14); }
.waqf-ecosystem .section-head h2 { color: var(--white); }
.waqf-ecosystem .section-head .lead { color: rgba(255,255,255,.72); }
.waqf-support-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.waqf-support-grid article { display: flex; min-height: 150px; align-items: flex-start; gap: 16px; padding: 24px; border: 1px solid rgba(255,255,255,.13); border-radius: 20px; background: rgba(255,255,255,.06); transition: transform .3s var(--ease), background .3s, border-color .3s; }
.waqf-support-grid article:hover { transform: translateY(-5px); border-color: rgba(176,224,204,.42); background: rgba(255,255,255,.1); }
.waqf-support-grid .icon { width: 25px; height: 25px; flex: 0 0 auto; color: #b7e1d0; }
.waqf-support-grid h3 { color: var(--white); font: 700 1.02rem/1.25 var(--sans); letter-spacing: -.02em; }
.waqf-support-grid p { margin-top: 7px; color: rgba(255,255,255,.65); font-size: .78rem; line-height: 1.45; }

.waqf-financial { background: #edf3f6; }
.waqf-financial-shell { overflow: hidden; border: 1px solid #cfdee3; border-radius: 32px; background: var(--white); box-shadow: 0 28px 70px rgba(8,29,51,.1); }
.waqf-kpis { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.waqf-kpis article { padding: 34px; border-right: 1px solid #dbe6e8; }
.waqf-kpis article:last-child { border-right: 0; }
.waqf-kpis article.is-gap { background: linear-gradient(145deg, #173f48, #276d5d); }
.waqf-kpis span { display: block; min-height: 42px; color: var(--forest); font-size: .7rem; font-weight: 900; letter-spacing: .095em; text-transform: uppercase; }
.waqf-kpis strong { display: block; margin-top: 12px; color: var(--navy); font: 720 clamp(2.35rem,4.4vw,4rem)/1 var(--serif); letter-spacing: -.055em; }
.waqf-kpis small { display: block; margin-top: 12px; color: var(--slate); font-weight: 700; }
.waqf-kpis .is-gap span { color: #c2e7d8; }
.waqf-kpis .is-gap strong { color: var(--white); }
.waqf-kpis .is-gap small { color: rgba(255,255,255,.7); }
.waqf-gap-panel { display: grid; grid-template-columns: 1fr .86fr; gap: 54px; padding: 42px; border-top: 1px solid #dbe6e8; }
.waqf-gap-panel h3 { margin: 12px 0 16px; max-width: 680px; font-size: clamp(1.55rem,2.6vw,2.2rem); }
.waqf-gap-panel p:not(.eyebrow) { color: var(--slate); }
.waqf-bars { align-self: center; padding: 28px; border-radius: 22px; background: #f3f7f6; }
.waqf-bar-label { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 8px; color: var(--navy); font-size: .79rem; font-weight: 800; }
.waqf-bar-label:not(:first-child) { margin-top: 22px; }
.waqf-bar-track { height: 13px; overflow: hidden; border-radius: 999px; background: #dce6e2; }
.waqf-bar-track span { display: block; height: 100%; border-radius: inherit; }
.waqf-bar-track .is-revenue { background: linear-gradient(90deg, #2f6d5b, #79b29a); }
.waqf-bar-track .is-delta { background: linear-gradient(90deg, #c14a40, #df7669); }
.waqf-data-note { display: flex; max-width: 970px; align-items: flex-start; gap: 12px; margin: 24px auto 0; color: var(--slate); font-size: .8rem; }
.waqf-data-note .icon { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 2px; color: var(--forest); }

.waqf-scenarios-section { background-image: radial-gradient(circle at 90% 10%,rgba(95,155,133,.18),transparent 28%), linear-gradient(145deg,#061629,#0a2d3b); }
.waqf-formula { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 18px; margin-bottom: 24px; padding: 20px 28px; border: 1px solid rgba(255,255,255,.13); border-radius: 20px; background: rgba(255,255,255,.055); color: rgba(255,255,255,.76); text-align: center; }
.waqf-formula strong { color: #9bd0bb; font-size: 1.6rem; }
.waqf-formula span { font-size: .8rem; font-weight: 800; }
.waqf-scenarios { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.waqf-scenarios article { min-height: 380px; padding: 36px; border: 1px solid rgba(255,255,255,.14); border-radius: 28px; background: rgba(255,255,255,.06); }
.waqf-scenarios article.is-highlighted { background: linear-gradient(145deg, rgba(95,155,133,.34), rgba(255,255,255,.075)); border-color: rgba(174,222,202,.45); }
.waqf-scenarios article > p:first-child { color: #b9e0d0; font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.waqf-scenarios article > strong { display: block; margin: 36px 0 8px; color: var(--white); font: 700 clamp(3.6rem,7vw,6rem)/.9 var(--serif); }
.waqf-scenarios h3 { color: var(--white); font-size: clamp(1.45rem,2.4vw,2.05rem); }
.waqf-scenario-math { width: fit-content; margin-top: 26px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.1); color: #cae8dc; font-size: .76rem; font-weight: 800; }
.waqf-scenario-copy { margin-top: 20px; color: rgba(255,255,255,.68); }
.waqf-risk-note { display: flex; align-items: flex-start; gap: 14px; margin-top: 22px; padding: 22px 24px; border-left: 3px solid #8fc8b1; border-radius: 0 16px 16px 0; background: rgba(255,255,255,.07); color: rgba(255,255,255,.72); font-size: .84rem; }
.waqf-risk-note .icon { width: 22px; height: 22px; flex: 0 0 auto; color: #b9e0d0; }

.waqf-journey { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.waqf-journey article { position: relative; min-height: 260px; padding: 30px; border: 1px solid var(--stone); border-radius: 24px; background: var(--white); box-shadow: 0 14px 34px rgba(8,29,51,.055); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.waqf-journey article:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); }
.waqf-journey article > strong { position: absolute; top: 24px; right: 26px; color: rgba(8,29,51,.15); font: 700 2.1rem/1 var(--serif); }
.waqf-journey .icon { width: 28px; height: 28px; color: var(--forest); }
.waqf-journey h3 { margin: 46px 0 12px; font-size: 1.32rem; }
.waqf-journey p { color: var(--slate); font-size: .88rem; }

.waqf-roadmap { color: var(--white); background: linear-gradient(145deg,#164c42,#286c5d); }
.waqf-roadmap .section-head { border-bottom-color: rgba(255,255,255,.14); }
.waqf-roadmap .section-head h2 { color: var(--white); }
.waqf-roadmap .section-head .lead { color: rgba(255,255,255,.72); }
.waqf-trust-band { background-position: center 35%; }

@media (max-width: 980px) {
    .waqf-definition-grid { grid-template-columns: 1fr; gap: 34px; }
    .waqf-support-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .waqf-gap-panel { grid-template-columns: 1fr; gap: 30px; }
    .waqf-journey { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 700px) {
    .waqf-hero-symbol { min-height: 350px; }
    .waqf-orbit { width: 210px; height: 210px; }
    .waqf-orbit img { width: 132px; }
    .waqf-feature-grid,
    .waqf-support-grid,
    .waqf-kpis,
    .waqf-scenarios,
    .waqf-journey { grid-template-columns: 1fr; }
    .waqf-feature-grid article,
    .waqf-support-grid article,
    .waqf-journey article { min-height: 0; }
    .waqf-kpis article { padding: 28px; border-right: 0; border-bottom: 1px solid #dbe6e8; }
    .waqf-kpis article:last-child { border-bottom: 0; }
    .waqf-gap-panel { padding: 28px; }
    .waqf-bars { padding: 22px; }
    .waqf-formula { grid-template-columns: 1fr; gap: 8px; }
    .waqf-formula strong { transform: rotate(90deg); }
    .waqf-scenarios article { min-height: 0; padding: 28px; }
}

/* 2026-09-18 premium mega navigation. */
.mega-menu-intro,
.mega-menu-grid { min-width: 0; }
.mega-menu-intro p,
.mega-menu-intro strong,
.mega-menu-intro span,
.mega-link-copy strong,
.mega-link-copy small { display: block; }

@media (min-width: 981px) {
    .nav-dropdown,
    .nav-dropdown.services-dropdown {
        top: calc(100% + 14px);
        left: auto;
        display: block;
        padding: 0;
        overflow: visible;
        border: 1px solid rgba(95,155,133,.38);
        border-radius: 27px;
        background:
            radial-gradient(circle at 8% 0%, rgba(130,192,167,.15), transparent 30%),
            linear-gradient(145deg, rgba(255,255,255,.99), rgba(245,249,247,.985));
        box-shadow:
            0 34px 90px rgba(8,29,51,.24),
            0 8px 24px rgba(8,29,51,.1),
            inset 0 0 0 1px rgba(255,255,255,.9);
        opacity: 0;
        visibility: hidden;
        transform: translateY(14px) scale(.985);
        transform-origin: 50% 0;
        transition: opacity .24s ease, visibility .24s ease, transform .34s var(--ease);
    }
    .nav-dropdown.foundation-dropdown { left: -300px; width: min(850px, 76vw); }
    .nav-dropdown.services-dropdown { right: -420px; width: min(980px, 86vw); }
    .nav-dropdown::before {
        content: "";
        position: absolute;
        right: 0;
        bottom: 100%;
        left: 0;
        height: 16px;
    }
    .nav-dropdown::after {
        content: "";
        position: absolute;
        z-index: 4;
        top: -1px;
        right: 28px;
        left: 28px;
        height: 3px;
        border-radius: 0 0 999px 999px;
        background: linear-gradient(90deg, transparent, #6fb397 26%, #1f5f51 50%, #6fb397 74%, transparent);
        box-shadow: 0 0 20px rgba(95,155,133,.58);
    }
    .nav-group:is(:hover,:focus-within,.is-open) .nav-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }
    .mega-menu-intro {
        position: relative;
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 18px;
        overflow: hidden;
        min-height: 120px;
        padding: 24px 26px;
        border-bottom: 1px solid rgba(8,29,51,.1);
        border-radius: 26px 26px 0 0;
        background:
            linear-gradient(110deg, rgba(8,29,51,.98), rgba(18,73,65,.96)),
            var(--navy);
    }
    .mega-menu-intro::after {
        content: "RAF";
        position: absolute;
        right: 18px;
        bottom: -31px;
        color: rgba(255,255,255,.045);
        font: 800 7.5rem/1 var(--serif);
        letter-spacing: -.08em;
        pointer-events: none;
    }
    .foundation-dropdown .mega-menu-intro { grid-template-columns: auto 1fr; }
    .mega-menu-mark {
        position: relative;
        z-index: 1;
        display: grid !important;
        width: 62px;
        height: 62px;
        place-items: center;
        border: 1px solid rgba(186,226,209,.3);
        border-radius: 20px;
        background: rgba(255,255,255,.08);
        box-shadow: inset 0 1px rgba(255,255,255,.12), 0 12px 28px rgba(0,0,0,.17);
    }
    .mega-menu-mark img { width: 42px; filter: brightness(0) invert(1); opacity: .92; }
    .mega-menu-intro > div { position: relative; z-index: 1; }
    .mega-menu-intro .mega-menu-kicker {
        color: #a9d8c5;
        font-size: .65rem;
        font-weight: 900;
        letter-spacing: .14em;
        text-transform: uppercase;
    }
    .mega-menu-intro > div > strong { margin-top: 4px; color: var(--white); font: 700 1.25rem/1.25 var(--serif); }
    .mega-menu-intro p { margin-top: 5px; color: rgba(255,255,255,.65); font-size: .72rem; line-height: 1.45; }
    .mega-menu-feature {
        position: relative;
        z-index: 2;
        display: inline-flex !important;
        min-height: 40px;
        align-items: center;
        gap: 8px;
        padding: 10px 14px !important;
        border: 1px solid rgba(255,255,255,.19) !important;
        border-radius: 999px !important;
        background: rgba(255,255,255,.09) !important;
        color: var(--white) !important;
        font-size: .7rem;
        font-weight: 800;
        white-space: nowrap;
        box-shadow: none !important;
    }
    .mega-menu-feature:hover { background: rgba(255,255,255,.16) !important; transform: translateY(-2px); }
    .mega-menu-feature .icon { width: 15px; height: 15px; }
    .mega-menu-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 9px;
        padding: 14px;
    }
    .institutions-menu-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .nav-dropdown .mega-menu-grid > a {
        position: relative;
        display: grid;
        grid-template-columns: 43px minmax(0,1fr) 18px;
        align-items: center;
        gap: 12px;
        min-height: 78px;
        padding: 12px 13px;
        overflow: hidden;
        border: 1px solid rgba(8,29,51,.075);
        border-radius: 17px;
        background: rgba(255,255,255,.72);
        color: var(--navy);
        opacity: 0;
        transform: translateY(10px);
        transition:
            opacity .25s ease,
            transform .34s var(--ease),
            border-color .3s ease,
            background .3s ease,
            box-shadow .3s ease;
    }
    .nav-dropdown .mega-menu-grid > a::before {
        content: "";
        position: absolute;
        top: -50%;
        bottom: -50%;
        left: -42%;
        width: 28%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
        transform: skewX(-18deg);
        transition: left .7s var(--ease);
        pointer-events: none;
    }
    .nav-group:is(:hover,:focus-within,.is-open) .mega-menu-grid > a { opacity: 1; transform: none; }
    .nav-group:is(:hover,:focus-within,.is-open) .mega-menu-grid > a:nth-child(2) { transition-delay: .025s; }
    .nav-group:is(:hover,:focus-within,.is-open) .mega-menu-grid > a:nth-child(3) { transition-delay: .05s; }
    .nav-group:is(:hover,:focus-within,.is-open) .mega-menu-grid > a:nth-child(4) { transition-delay: .075s; }
    .nav-group:is(:hover,:focus-within,.is-open) .mega-menu-grid > a:nth-child(5) { transition-delay: .1s; }
    .nav-group:is(:hover,:focus-within,.is-open) .mega-menu-grid > a:nth-child(6) { transition-delay: .125s; }
    .nav-group:is(:hover,:focus-within,.is-open) .mega-menu-grid > a:nth-child(7) { transition-delay: .15s; }
    .nav-group:is(:hover,:focus-within,.is-open) .mega-menu-grid > a:nth-child(8) { transition-delay: .175s; }
    .nav-group:is(:hover,:focus-within,.is-open) .mega-menu-grid > a:nth-child(9) { transition-delay: .2s; }
    .nav-dropdown .mega-menu-grid > a:hover,
    .nav-dropdown .mega-menu-grid > a:focus-visible,
    .nav-dropdown .mega-menu-grid > a[aria-current="page"] {
        z-index: 2;
        border-color: rgba(74,145,119,.55);
        background: linear-gradient(135deg, #fff, #edf7f2);
        box-shadow: 0 12px 30px rgba(8,29,51,.12), 0 0 0 3px rgba(95,155,133,.09), 0 0 25px rgba(95,155,133,.13);
        transform: translateY(-3px) translateX(2px);
    }
    .nav-dropdown .mega-menu-grid > a:hover::before { left: 118%; }
    .mega-link-icon {
        position: relative;
        display: grid !important;
        width: 43px;
        height: 43px;
        place-items: center;
        border: 1px solid rgba(95,155,133,.22);
        border-radius: 14px;
        background: linear-gradient(145deg, #eff7f3, #e1eee8);
        color: var(--forest) !important;
        transition: color .3s, background .3s, transform .35s var(--ease), box-shadow .3s;
    }
    .mega-link-icon .icon { width: 21px; height: 21px; }
    .mega-menu-grid > a:hover .mega-link-icon,
    .mega-menu-grid > a:focus-visible .mega-link-icon,
    .mega-menu-grid > a[aria-current="page"] .mega-link-icon {
        color: var(--white) !important;
        background: linear-gradient(145deg, #285f50, #65a58d);
        box-shadow: 0 8px 19px rgba(50,107,87,.26), 0 0 18px rgba(95,155,133,.18);
        transform: translateY(-2px) rotate(-3deg) scale(1.04);
    }
    .mega-link-copy { min-width: 0; color: inherit !important; }
    .mega-link-copy strong { color: var(--navy); font: 800 .78rem/1.25 var(--sans); letter-spacing: -.015em; }
    .mega-link-copy small { margin-top: 4px; color: var(--slate); font-size: .63rem; font-weight: 520; line-height: 1.35; }
    .mega-link-arrow {
        display: grid !important;
        width: 18px;
        height: 18px;
        place-items: center;
        color: rgba(8,29,51,.28) !important;
        transform: translateX(-3px);
        transition: color .3s, transform .35s var(--ease);
    }
    .mega-link-arrow .icon { width: 16px; height: 16px; }
    .mega-menu-grid > a:hover .mega-link-arrow,
    .mega-menu-grid > a:focus-visible .mega-link-arrow,
    .mega-menu-grid > a[aria-current="page"] .mega-link-arrow { color: var(--forest) !important; transform: translateX(2px); }
}

@media (min-width: 981px) and (max-width: 1180px) {
    .nav-dropdown.foundation-dropdown { left: -250px; width: min(800px, 78vw); }
    .nav-dropdown.services-dropdown { right: -330px; width: min(930px, 90vw); }
    .mega-menu-grid { gap: 7px; padding: 12px; }
    .nav-dropdown .mega-menu-grid > a { min-height: 74px; padding: 10px; }
}

@media (max-width: 980px) {
    .nav-dropdown.foundation-dropdown,
    .nav-dropdown.services-dropdown { width: 100%; }
    .nav-dropdown .mega-menu-intro { display: none; }
    .nav-dropdown .mega-menu-grid,
    .nav-dropdown .institutions-menu-grid { display: grid; grid-template-columns: 1fr; gap: 5px; padding: 5px 0 10px; }
    .nav-dropdown .mega-menu-grid > a {
        display: grid;
        grid-template-columns: 38px minmax(0,1fr) 16px;
        align-items: center;
        gap: 11px;
        padding: 10px 12px;
        border: 1px solid transparent;
        border-radius: 14px;
        background: rgba(255,255,255,.45);
    }
    .nav-dropdown .mega-menu-grid > a:hover,
    .nav-dropdown .mega-menu-grid > a[aria-current="page"] { border-color: rgba(95,155,133,.28); background: var(--sage); }
    .mega-link-icon { display: grid !important; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: rgba(95,155,133,.12); color: var(--forest) !important; }
    .mega-link-icon .icon { width: 19px; height: 19px; }
    .mega-link-copy { color: inherit !important; }
    .mega-link-copy strong { color: var(--navy); font-size: .8rem; }
    .mega-link-copy small { margin-top: 2px; color: var(--slate); font-size: .66rem; }
    .mega-link-arrow { display: grid !important; color: var(--forest) !important; }
    .mega-link-arrow .icon { width: 14px; height: 14px; }
    .nav-group.is-open .foundation-dropdown { max-height: 650px; }
    .nav-group.is-open .services-dropdown { max-height: 930px; }
}