:root {
    --sqa-green:#0B3D2E;
    --sqa-green2:#14513f;
    --sqa-gold:#C8A951;
    --sqa-gold2:#E6C76B;
    --sqa-cream:#FBF8EF;
    --sqa-soft:#F6F1E6;
    --sqa-ink:#12352B;
    --sqa-muted:#6B7A73;
    --sqa-line:#E9DEC9;
    --sqa-white:#fff
}

.grand-container {
    width:min(1480px,calc(100% - 42px));
    margin-inline:auto
}

.grand-section {
    padding:105px 0;
    position:relative;
    overflow:hidden
}

.grand-soft {
    background:linear-gradient(180deg,#fff 0%,#fbf8ef 100%)
}

.grand-cream {
    background:#fbf8ef
}

.grand-eyebrow {
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--sqa-gold);
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.16em;
    font-size:12px;
    margin-bottom:16px
}

.grand-hero {
    min-height:calc(100vh - 120px);
    position:relative;
    overflow:hidden;
    background:#08291f;
    color:white;
    display:flex;
    align-items:center
}

.grand-hero-bg {
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:0;
    transform:scale(1.02);
    transition:opacity 1.1s ease,transform 6s ease
}

.grand-hero-bg.is-active {
    opacity:1;
    transform:scale(1.08)
}

.grand-hero-shade {
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(5,31,23,.88) 0%,rgba(11,61,46,.72) 45%,rgba(11,61,46,.28) 100%),radial-gradient(circle at 75% 30%,rgba(200,169,81,.25),transparent 35%)
}

.grand-hero-inner {
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(0,760px) 1fr;
    gap:60px;
    align-items:center;
    padding:90px 0
}

.grand-kicker {
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    border:1px solid rgba(230,199,107,.45);
    border-radius:999px;
    background:rgba(255,255,255,.1);
    backdrop-filter:blur(10px);
    font-weight:800;
    color:#fff3c9;
    margin-bottom:24px
}

.grand-hero h1 {
    font-family:Inter,system-ui,sans-serif;
    font-size:clamp(42px,6vw,88px);
    line-height:.98;
    font-weight:900;
    letter-spacing:-.06em;
    max-width:850px
}

.grand-hero p {
    font-size:clamp(17px,2vw,22px);
    line-height:1.7;
    color:rgba(255,255,255,.86);
    max-width:720px;
    margin:24px 0 0
}

.grand-hero-actions,.grand-final-actions {
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:34px
}

.grand-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:15px 24px;
    border-radius:999px;
    font-weight:900;
    transition:.25s ease;
    text-decoration:none
}

.grand-btn:hover {
    transform:translateY(-3px)
}

.grand-btn-gold {
    background:linear-gradient(135deg,var(--sqa-gold),var(--sqa-gold2));
    color:#073126;
    box-shadow:0 16px 35px rgba(200,169,81,.28)
}

.grand-btn-light {
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.26);
    color:white
}

.grand-btn-outline {
    border:1px solid rgba(255,255,255,.35);
    color:white;
    background:rgba(255,255,255,.08)
}

.grand-hero-points {
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:28px;
    color:#fff4cf;
    font-weight:700
}

.grand-hero-points span {
    display:inline-flex;
    gap:8px;
    align-items:center
}

.grand-hero-points i {
    color:var(--sqa-gold2)
}

.grand-hero-panel {
    display:grid;
    gap:18px;
    align-self:end
}

.grand-panel-card {
    background:rgba(255,255,255,.92);
    color:var(--sqa-ink);
    border-radius:34px;
    padding:26px;
    border:1px solid rgba(200,169,81,.35);
    box-shadow:0 25px 70px rgba(0,0,0,.18)
}

.grand-panel-card.alt {
    transform:translateX(42px);
    background:rgba(251,248,239,.92)
}

.grand-panel-card span {
    display:block;
    color:var(--sqa-gold);
    font-weight:900;
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:.14em
}

.grand-panel-card strong {
    display:block;
    font-size:25px;
    margin:8px 0;
    color:var(--sqa-green)
}

.grand-panel-card p {
    color:#60746c;
    margin:0;
    font-size:15px;
    line-height:1.6
}

.grand-trust-strip {
    background:#fff;
    border-bottom:1px solid var(--sqa-line);
    box-shadow:0 12px 40px rgba(11,61,46,.06);
    position:relative;
    z-index:4
}

.grand-trust-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px
}

.grand-trust-grid div {
    padding:28px 24px;
    border-right:1px solid var(--sqa-line)
}

.grand-trust-grid b {
    display:block;
    color:var(--sqa-green);
    font-size:26px;
    letter-spacing:-.03em
}

.grand-trust-grid span {
    color:var(--sqa-muted);
    font-weight:600
}

.grand-two-col {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center
}

.grand-two-col.reverse {
    grid-template-columns:1fr 1fr
}

.grand-copy h2,.grand-section-head h2,.grand-split-head h2 {
    font-size:clamp(34px,4vw,58px);
    line-height:1.06;
    color:var(--sqa-ink);
    font-weight:900;
    letter-spacing:-.055em
}

.grand-copy p,.grand-section-head p {
    font-size:17px;
    line-height:1.85;
    color:var(--sqa-muted);
    margin-top:18px
}

.grand-mini-list {
    display:grid;
    gap:12px;
    margin-top:24px
}

.grand-mini-list span {
    font-weight:800;
    color:var(--sqa-green);
    display:flex;
    gap:10px;
    align-items:center
}

.grand-mini-list i {
    color:var(--sqa-gold)
}

.grand-image-combo {
    position:relative;
    min-height:520px
}

.grand-image-combo img,.grand-photo-frame img,.grand-course img,.grand-teacher img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block
}

.grand-image-combo .main {
    position:absolute;
    right:0;
    top:0;
    width:78%;
    height:430px;
    border-radius:44px;
    box-shadow:0 30px 80px rgba(11,61,46,.16);
    background:#eee
}

.grand-image-combo .small {
    position:absolute;
    left:0;
    bottom:0;
    width:46%;
    height:250px;
    border-radius:34px;
    border:10px solid #fff;
    box-shadow:0 25px 60px rgba(11,61,46,.18);
    background:#eee
}

.grand-image-badge {
    position:absolute;
    right:42px;
    bottom:30px;
    background:#fff;
    color:var(--sqa-green);
    border:1px solid var(--sqa-line);
    box-shadow:0 18px 45px rgba(11,61,46,.14);
    border-radius:999px;
    padding:14px 18px;
    font-weight:900
}

.grand-image-badge i {
    color:var(--sqa-gold)
}

.grand-section-head {
    text-align:center;
    max-width:860px;
    margin:0 auto 52px
}

.grand-feature-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px
}

.grand-feature,.grand-level,.grand-process,.grand-review,.grand-empty {
    background:#fff;
    border:1px solid var(--sqa-line);
    border-radius:32px;
    padding:32px;
    box-shadow:0 18px 45px rgba(11,61,46,.06);
    transition:.25s ease
}

.grand-feature:hover,.grand-level:hover,.grand-course:hover,.grand-teacher:hover {
    transform:translateY(-6px);
    box-shadow:0 28px 70px rgba(11,61,46,.12)
}

.grand-feature i,.grand-level i,.grand-empty i {
    width:58px;
    height:58px;
    border-radius:20px;
    background:#f8efd9;
    color:var(--sqa-gold);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    margin-bottom:22px
}

.grand-feature h3,.grand-level h3,.grand-process h3 {
    color:var(--sqa-green);
    font-size:22px;
    font-weight:900;
    margin-bottom:12px
}

.grand-feature p,.grand-level p,.grand-process p {
    color:var(--sqa-muted);
    line-height:1.7
}

.grand-split-head {
    display:flex;
    justify-content:space-between;
    gap:30px;
    align-items:end;
    margin-bottom:45px
}

.grand-split-head a {
    color:var(--sqa-green);
    font-weight:900;
    border-bottom:2px solid var(--sqa-gold);
    padding-bottom:6px
}

.grand-course-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px
}

.grand-course,.grand-teacher {
    background:#fff;
    border:1px solid var(--sqa-line);
    border-radius:34px;
    overflow:hidden;
    box-shadow:0 18px 50px rgba(11,61,46,.07);
    transition:.25s ease
}

.grand-course img {
    height:245px;
    background:linear-gradient(135deg,#eef4ef,#f8efd9)
}

.grand-course div,.grand-teacher div {
    padding:28px
}

.grand-course span {
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.14em;
    color:var(--sqa-gold);
    font-weight:900
}

.grand-course h3,.grand-teacher h3 {
    font-size:26px;
    color:var(--sqa-green);
    font-weight:900;
    margin:8px 0
}

.grand-course p,.grand-teacher p {
    color:var(--sqa-muted);
    line-height:1.7
}

.grand-course a,.grand-teacher a {
    display:inline-flex;
    margin-top:18px;
    color:var(--sqa-green);
    font-weight:900
}

.grand-experience {
    background:linear-gradient(180deg,#fff,#f9f6ee)
}

.grand-photo-frame {
    height:560px;
    border-radius:44px;
    overflow:hidden;
    box-shadow:0 25px 70px rgba(11,61,46,.15);
    background:#eee
}

.grand-check-row {
    display:flex;
    gap:16px;
    margin-top:22px;
    padding:20px;
    border:1px solid var(--sqa-line);
    border-radius:24px;
    background:#fff
}

.grand-check-row i {
    color:var(--sqa-gold);
    font-size:20px;
    margin-top:3px
}

.grand-check-row b {
    display:block;
    color:var(--sqa-green);
    font-size:18px
}

.grand-check-row span {
    color:var(--sqa-muted);
    line-height:1.6
}

.grand-teacher-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px
}

.grand-teacher img {
    height:360px;
    background:linear-gradient(135deg,#eef4ef,#f8efd9)
}

.grand-process-section {
    background:linear-gradient(135deg,#08291f,#0b3d2e 60%,#14513f);
    color:white
}

.grand-section-head.light h2,.grand-section-head.light p {
    color:white
}

.grand-process-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px
}

.grand-process {
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.14);
    box-shadow:none;
    color:white
}

.grand-process b {
    color:var(--sqa-gold2);
    font-size:34px
}

.grand-process h3 {
    color:white
}

.grand-process p {
    color:rgba(255,255,255,.76)
}

.grand-level-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px
}

.grand-wide-banner {
    position:relative;
    min-height:520px;
    display:flex;
    align-items:center;
    color:white;
    overflow:hidden
}

.grand-wide-bg {
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    background-color:#0b3d2e
}

.grand-wide-overlay {
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(5,31,23,.84),rgba(11,61,46,.54),rgba(11,61,46,.12))
}

.grand-wide-content {
    position:relative;
    z-index:2;
    max-width:1480px
}

.grand-wide-content h2 {
    font-size:clamp(34px,5vw,66px);
    line-height:1.05;
    font-weight:900;
    letter-spacing:-.05em;
    max-width:780px
}

.grand-wide-content p {
    max-width:640px;
    font-size:19px;
    line-height:1.8;
    color:rgba(255,255,255,.82);
    margin:20px 0 0
}

.grand-parent-list {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:26px
}

.grand-parent-list div {
    background:white;
    border:1px solid var(--sqa-line);
    border-radius:20px;
    padding:18px;
    font-weight:800;
    color:var(--sqa-green);
    display:flex;
    gap:12px;
    align-items:center
}

.grand-parent-list i {
    color:var(--sqa-gold)
}

.grand-faq-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px
}

.grand-faq {
    background:white;
    border:1px solid var(--sqa-line);
    border-radius:24px;
    padding:22px 24px;
    box-shadow:0 12px 35px rgba(11,61,46,.05)
}

.grand-faq summary {
    cursor:pointer;
    color:var(--sqa-green);
    font-weight:900;
    font-size:18px
}

.grand-faq p {
    color:var(--sqa-muted);
    line-height:1.7;
    margin-top:14px
}

.grand-review-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px
}

.grand-stars {
    color:var(--sqa-gold);
    margin-bottom:15px
}

.grand-review p {
    color:var(--sqa-muted);
    line-height:1.8;
    font-size:17px
}

.grand-review strong {
    display:block;
    color:var(--sqa-green);
    margin-top:18px
}

.grand-review small {
    color:var(--sqa-muted)
}

.grand-empty {
    text-align:center;
    max-width:650px;
    margin:0 auto
}

.grand-empty h3 {
    font-size:28px;
    color:var(--sqa-green);
    font-weight:900
}

.grand-empty p {
    color:var(--sqa-muted);
    margin:10px 0 24px
}

.grand-final {
    background:linear-gradient(135deg,#0b3d2e,#14513f);
    padding:90px 0;
    color:white;
    position:relative;
    overflow:hidden
}

.grand-final:before {
    content:"";
    position:absolute;
    inset:auto -10% -40% auto;
    width:520px;
    height:520px;
    border-radius:999px;
    background:rgba(200,169,81,.18);
    filter:blur(5px)
}

.grand-final-box {
    position:relative;
    z-index:2;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.18);
    border-radius:42px;
    padding:48px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px
}

.grand-final h2 {
    font-size:clamp(34px,4vw,58px);
    line-height:1.05;
    font-weight:900;
    letter-spacing:-.05em;
    max-width:760px
}

.grand-final p {
    color:rgba(255,255,255,.78);
    font-size:18px;
    line-height:1.7;
    max-width:690px;
    margin-top:14px
}

.sqa-grand-reveal {
    opacity:0;
    transform:translateY(26px);
    transition:opacity .75s ease,transform .75s ease
}

.sqa-grand-reveal.is-visible {
    opacity:1;
    transform:translateY(0)
}

@media(max-width:1100px) {
    .grand-hero-inner,.grand-two-col {
        grid-template-columns:1fr
    }

    .grand-hero-panel {
        display:none
    }

    .grand-feature-grid,.grand-course-grid {
        grid-template-columns:1fr 1fr
    }

    .grand-process-grid,.grand-level-grid {
        grid-template-columns:1fr 1fr
    }

    .grand-trust-grid {
        grid-template-columns:1fr 1fr
    }

    .grand-final-box {
        display:block
    }

    .grand-final-actions {
        margin-top:28px
    }

}

@media(max-width:720px) {
    .grand-container {
        width:min(100% - 26px,1480px)
    }

    .grand-section {
        padding:70px 0
    }

    .grand-hero {
        min-height:720px
    }

    .grand-hero-inner {
        padding:70px 0
    }

    .grand-hero h1 {
        font-size:44px
    }

    .grand-trust-grid,.grand-feature-grid,.grand-course-grid,.grand-teacher-grid,.grand-process-grid,.grand-level-grid,.grand-faq-grid,.grand-review-grid,.grand-parent-list {
        grid-template-columns:1fr
    }

    .grand-trust-grid div {
        border-right:0;
        border-bottom:1px solid var(--sqa-line)
    }

    .grand-split-head {
        display:block
    }

    .grand-split-head a {
        display:inline-flex;
        margin-top:18px
    }

    .grand-image-combo {
        min-height:420px
    }

    .grand-image-combo .main {
        width:100%;
        height:330px
    }

    .grand-image-combo .small {
        width:55%;
        height:170px
    }

    .grand-photo-frame {
        height:380px
    }

    .grand-wide-banner {
        min-height:560px
    }

    .grand-final-box {
        padding:30px
    }

    .grand-btn {
        width:100%
    }

}

/* -------------------------------------------------------
   Targeted mobile fix:
   Learning Experience section
   "Not just classes — a guided Quran routine"
------------------------------------------------------- */
@media (max-width: 720px) {
    .grand-experience .grand-two-col.reverse {
        display:flex !important;
        flex-direction:column !important;
        gap:35px !important;
    }

    .grand-experience .grand-photo-frame {
        width:100% !important;
        height:300px !important;
        margin:0 !important;
    }

    .grand-experience .grand-copy {
        width:100% !important;
    }

    .grand-experience .grand-check-row {
        width:100% !important;
        display:flex !important;
        align-items:flex-start !important;
        gap:14px !important;
        padding:16px !important;
        margin-top:16px !important;
        box-sizing:border-box !important;
    }

    .grand-experience .grand-check-row i {
        flex:0 0 auto !important;
        margin-top:4px !important;
    }

    .grand-experience .grand-check-row div {
        min-width:0 !important;
    }

    .grand-experience .grand-check-row b,
    .grand-experience .grand-check-row span {
        display:block !important;
        word-break:normal !important;
        overflow-wrap:break-word !important;
    }
}