/*
 * Waqf Vision page — ported unchanged from site.legacy.css. Loaded only on
 * this page via inc/enqueue/styles.php's page-slug matching
 * (page-waqf.php -> waqf.css).
 *
 * The original scoped several rules under body.page-waqf (e.g.
 * `.page-waqf .waqf-hero`). Since this stylesheet only ever loads on this
 * one page anyway, those are flattened directly onto the base selector
 * here rather than depending on a literal "page-waqf" body class from
 * WordPress's body_class().
 */

.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%);
}
.waqf-hero .container { align-items: center; }
.waqf-hero h1 { max-width: 760px; }

.waqf-hero-symbol {
    position: relative;
    display: grid;
    min-height: 440px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.16);
    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));
    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-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-wrap { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 12px; background: var(--forest); }
.waqf-feature-grid .icon { width: 22px; height: 22px; color: white; }
.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-ecosystem .eyebrow { color: var(--white); }
.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 var(--stone); border-radius: 20px; background: var(--white); transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.waqf-support-grid article:hover { transform: translateY(-5px); border-color: var(--green); box-shadow: var(--shadow-sm); }
.waqf-support-grid .icon-wrap { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border-radius: 12px; background: var(--forest); }
.waqf-support-grid .icon { width: 22px; height: 22px; color: white; }
.waqf-support-grid h3 { color: var(--navy); font: 700 1.02rem/1.25 var(--sans); letter-spacing: -.02em; }
.waqf-support-grid p { margin-top: 7px; color: var(--slate); 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: var(--green); font: 700 2.1rem/1 var(--serif); }
.waqf-journey .icon-wrap { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 12px; background: var(--forest); }
.waqf-journey .icon { width: 22px; height: 22px; color: white; }
.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); }
/* The eyebrow ("A phased roadmap") had no override here, so it inherited
   the global .eyebrow color (dark forest green) — nearly invisible
   against this section's own dark green gradient background. */
.waqf-roadmap .section-head .eyebrow { color: var(--white); }
.waqf-trust-band { background-position: center 35%; }

/* Phased roadmap cards — same visual language as the homepage's
   campaign-stage, under this page's own priority-path/priority-stage
   class names. */
.priority-path { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
/* Same navy-to-green gradient every phase card now uses (was previously
   a near-transparent white, rgba(255,255,255,.07), which blended
   straight into this section's own dark green background). */
.priority-stage { min-height: 286px; padding: 30px; border: 1px solid rgba(158,210,189,.45); border-radius: var(--radius); background: linear-gradient(145deg,rgba(8,29,51,.78),rgba(95,155,133,.28)); }
.priority-stage > span { color: #b9e0d0; font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.priority-stage h3 { margin: 52px 0 12px; color: white; }
.priority-stage p { color: rgba(255,255,255,.72); }
/* .is-current previously stood out as solid white (a "this is the
   active phase" marker) — now matches the same gradient as every other
   phase card, per request, so all four look consistent. */
/* .is-evergreen no longer needs its own background/border-color — the
   base .priority-stage rule above now uses the same gradient, since
   every non-current phase should look like this one did. */

@media (max-width: 1080px) {
    .priority-path { grid-template-columns: repeat(2, 1fr); }
}

@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; }
}

@media (max-width: 600px) {
    .priority-path { grid-template-columns: 1fr; }
    .priority-stage { min-height: 0; padding: 24px; }
    .priority-stage h3 { margin-top: 28px; }
}

/* --- Scale-down pass, same as home/about/vision/values ---
   This page has no .page-hero-split (its hero uses .page-hero +
   .waqf-hero only), and its section headings all share .section-head
   across 6 different sections, plus .sticky-title, .service-photo-copy
   and .cta-inner at the end. All inherit global/base.css's/sections.css's
   much larger default sizes otherwise. */
.page-hero h1 {
    font-size: clamp(2.25rem, 3.4vw, 3.4rem);
}

.sticky-title h2,
.section-head h2,
.service-photo-copy h2,
.cta-inner h2,
.faq-intro h2 {
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
}

/* Same zero-gap issue as other scaled-down pages' .lead paragraphs —
   .sticky-title's .lead here never got a margin-top either. */
.sticky-title .lead {
    margin-top: 18px;
}

/* Same as home's Trust & Transparency section — the button right after
   .service-photo-copy's .lead had no spacing before it. */
.service-photo-copy .button {
    margin-top: 22px;
}