/*
==============================================================================
QAAF / NOUR QURAN ACADEMY
MERGED MASTER CSS
------------------------------------------------------------------------------
1) Original stylesheet preserved in full.
2) Premium visual layer appended after the original stylesheet.
3) No Razor names, bindings, image paths, routes, JS hooks or functionality
   are intentionally changed by this merge.
==============================================================================
*/

:root{
 --green:#0b594a;--deep:#063b32;--gold:#c9a45c;--gold2:#d9bd78;--cream:#f7f3ea;
 --paper:#fffdf8;--ink:#17231f;--muted:#718079;--line:#e6dfd0;--shadow:0 18px 50px rgba(4,43,36,.10)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{text-decoration:none;color:inherit}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,253,248,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-shell{max-width:1400px;margin:auto;padding:10px 28px;display:flex;align-items:center;gap:28px}.brand{width:205px;display:block}.brand img{display:block;width:100%;height:auto}.nav-shell nav{display:flex;gap:25px;align-items:center;justify-content:center;flex:1}.nav-shell nav a{font-size:12px;font-weight:600}.nav-shell nav a:hover{color:var(--gold)}
.menu{display:none;border:0;background:none;font-size:22px}.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:6px;padding:13px 22px;font-size:11px;font-weight:800;letter-spacing:.2px;transition:.2s}.btn.gold{background:var(--gold);color:#fff;box-shadow:0 8px 25px #c9a45c30}.btn.gold:hover{transform:translateY(-2px);background:#b89148}.btn.dark{background:var(--deep);color:#fff}.btn.outline{border-color:#e5d6aa;color:#fff;background:#063b3280}.btn:hover{transform:translateY(-2px)}
.hero{min-height:590px;position:relative;display:flex;align-items:center;overflow:hidden;background:var(--deep)}.hero-image,.hero-overlay{position:absolute;inset:0}.hero-image img{width:100%;height:100%;object-fit:cover;object-position:center}.hero-overlay{background:linear-gradient(90deg,rgba(2,35,30,.88),rgba(2,35,30,.42) 60%,rgba(2,35,30,.35))}
.hero-copy{position:relative;z-index:2;max-width:1200px;width:100%;margin:auto;padding:100px 6%;color:#fff}.hero-copy h1{font:500 clamp(48px,6vw,82px)/.98 Georgia,serif;margin:16px 0 20px}.hero-copy h1 em,h1 em,h2 em{color:var(--gold2);font-style:italic}.hero-copy p{max-width:540px;font-size:15px;line-height:1.75;color:#e8eee9}.actions{display:flex;gap:12px;margin-top:28px}.eyebrow{font-size:10px;letter-spacing:2.4px;font-weight:900;color:var(--green)}.eyebrow.light{color:#e3ca8c}
.section{max-width:1250px;margin:auto;padding:90px 28px}.center{text-align:center}.section-title{margin-bottom:38px}.section-title h2,h2{font:500 clamp(32px,4vw,52px)/1.08 Georgia,serif;margin:10px 0 15px}.section-title p{color:var(--muted)}
.verse{background:#f2eadb;padding:35px 25px}.verse-frame{max-width:930px;margin:auto;text-align:center;padding:35px 40px;border:1px solid #d9bd78;border-radius:22px;background:#fffaf0;box-shadow:var(--shadow);position:relative}.verse-deco{font:32px Georgia;color:var(--gold);position:absolute;left:24px;top:25px}.arabic{font:46px/1.8 Georgia,serif;direction:rtl;margin:10px 0;color:var(--deep)}.verse p{font:italic 16px Georgia;color:#4e5d55}.verse small{color:var(--gold);font-weight:700;font-size:10px;letter-spacing:1px}
.about-home{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}.about-image{border-radius:26px;overflow:hidden;box-shadow:var(--shadow)}.about-image img{display:block;width:100%}.about-home p{font-size:14px;line-height:1.9;color:var(--muted)}.mini-features{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:28px}.mini-features span{color:var(--gold);font-size:19px}.mini-features b{display:block;color:var(--ink);font-size:11px;margin-top:5px}
.services-home,.articles-home{background:#fbf8f0}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.service-card,.article-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.04);transition:.25s}.service-card:hover,.article-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.service-card img,.article-card img{width:100%;height:190px;object-fit:cover;display:block}.service-card>div,.article-card>div{padding:20px}.service-card h3,.article-card h3{font:600 21px Georgia;margin:0 0 8px}.service-card p,.article-card p{font-size:12px;line-height:1.7;color:var(--muted)}.service-card span,.article-card span,.text-link{color:var(--green);font-size:11px;font-weight:800}.stats{background:var(--deep);color:#fff;display:grid;grid-template-columns:repeat(4,1fr);padding:40px 8%;text-align:center}.stats div{border-right:1px solid #d9bd7830}.stats div:last-child{border:0}.stats b{display:block;font:500 34px Georgia;color:var(--gold2)}.stats span{font-size:10px;color:#d3dfd9}
.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:950px;margin:auto}.price-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px 25px;text-align:center;box-shadow:0 8px 25px rgba(0,0,0,.04)}.price-card.popular{border:2px solid var(--gold);transform:translateY(-10px)}.popular-tag{position:absolute;left:50%;top:-13px;transform:translateX(-50%);background:var(--gold);color:#fff;padding:6px 14px;border-radius:30px;font-size:8px;font-weight:900;white-space:nowrap}.price-card h3{font:600 24px Georgia;margin:5px}.price-card small,.price-card>span{font-size:10px;color:var(--muted)}.price{font:500 46px Georgia;margin:20px 0 2px}.price sup{font-size:20px;color:var(--gold)}.price-card .btn{margin:20px 0;width:100%}.price-card ul{text-align:left;padding-left:18px;color:var(--muted);font-size:10px;line-height:2}
.row{display:flex;justify-content:space-between;align-items:end}.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.article-card small{color:var(--gold);font-weight:800;font-size:9px;letter-spacing:1px}.split-panel{display:grid;grid-template-columns:1fr 1fr;gap:20px}.trial-panel,.contact-panel{border-radius:24px;padding:55px;background:#f1eadb}.contact-panel{background:#fff;border:1px solid var(--line)}.split-panel p{color:var(--muted);line-height:1.7}
.cta-band{background:var(--deep);color:#fff;padding:55px max(28px,calc((100% - 1200px)/2));display:flex;justify-content:space-between;align-items:center;gap:30px}.cta-band h2{margin:8px 0}.cta-band p{color:#c9d5cf}
.page-hero{background:var(--deep);color:#fff;padding:75px max(28px,calc((100% - 1200px)/2));text-align:center}.page-hero h1{font:500 clamp(42px,6vw,68px) Georgia;margin:14px 0}.page-hero p{color:#d5dfda}.form-section{max-width:1000px}.form-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:35px;box-shadow:var(--shadow)}.form-card.narrow{max-width:480px;margin:auto}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}label{font-size:10px;font-weight:800;color:var(--muted);display:block}input,select,textarea{display:block;width:100%;margin-top:7px;border:1px solid #ddd7ca;border-radius:8px;background:#fffdf8;padding:12px;font:inherit;color:var(--ink)}textarea{min-height:130px;resize:vertical}.form-card>label{margin:18px 0}.contact-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:start}.contact-info p{color:var(--muted)}
.teacher-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.teacher-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}.teacher-card img{width:100%;height:300px;object-fit:cover}.teacher-card div{padding:18px}.teacher-card h3{font:600 22px Georgia;margin:0 0 6px}.teacher-card small{color:var(--muted)}
.article-detail{max-width:900px}.article-detail>img{width:100%;max-height:520px;object-fit:cover;border-radius:22px}.article-detail p,.article-body{font-size:16px;line-height:1.9;color:var(--muted)}
.portal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.portal-grid>div{background:#fff;border:1px solid var(--line);border-radius:18px;padding:25px}.portal-grid small{color:var(--gold);font-weight:800}.portal-grid h2{font-size:30px}
.admin-shell{min-height:80vh;display:grid;grid-template-columns:250px 1fr;background:#f7f3ea}.admin-shell aside{background:var(--deep);color:#fff;padding:30px 22px;display:flex;flex-direction:column;gap:8px}.admin-shell aside a{padding:12px;border-radius:8px;font-size:12px}.admin-shell aside a:hover,.admin-shell aside a.active{background:#ffffff12;color:var(--gold2)}.admin-main{padding:55px;max-width:1300px}.admin-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:30px 0}.admin-cards>div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}.admin-cards small,.admin-cards b{display:block}.admin-cards small{color:var(--muted)}.admin-cards b{font:500 30px Georgia;margin-top:10px}.admin-panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:25px}.table-wrap{overflow:auto}.table-wrap table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line)}th,td{text-align:left;padding:14px;border-bottom:1px solid var(--line);font-size:12px}.pill{background:#e9f1ed;color:var(--green);padding:5px 9px;border-radius:20px;font-size:9px;font-weight:800}
.footer{background:#052f29;color:#dce5df;padding:55px 6% 18px}.footer-grid{max-width:1250px;margin:auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:45px}.footer-logo{width:220px;margin-bottom:15px}.footer p{font-size:11px;line-height:1.8;color:#aebfb7;max-width:330px}.footer h4{color:#fff;font:600 16px Georgia}.footer a{display:block;font-size:10px;color:#b9c8c1;margin:10px 0}.footer a:hover{color:var(--gold2)}.footer-bottom{max-width:1250px;margin:35px auto 0;padding-top:15px;border-top:1px solid #ffffff15;display:flex;justify-content:space-between;font-size:9px;color:#8da39a}.toast{position:fixed;right:25px;bottom:25px;z-index:100;background:var(--deep);color:#fff;padding:15px 20px;border-radius:10px;box-shadow:var(--shadow);font-size:11px}
@media(max-width:900px){.nav-shell nav{display:none}.menu{display:block;margin-left:auto}.nav-open .nav-shell{flex-wrap:wrap}.nav-open nav{display:flex;order:5;width:100%;flex-direction:column;padding:15px}.nav-shell>.btn{display:none}.brand{width:175px}.hero{min-height:620px}.hero-copy{padding:80px 28px}.about-home,.split-panel,.contact-layout{grid-template-columns:1fr}.service-grid,.article-grid,.teacher-grid{grid-template-columns:1fr 1fr}.package-grid{grid-template-columns:1fr}.price-card.popular{transform:none}.stats{grid-template-columns:1fr 1fr;gap:25px}.stats div:nth-child(2){border:0}.form-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.admin-shell{grid-template-columns:1fr}.admin-shell aside{display:none}.admin-main{padding:30px}.admin-cards{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.service-grid,.article-grid,.teacher-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:8px}.arabic{font-size:31px}.hero-copy h1{font-size:48px}}

/* NOUR QURAN ACADEMY — PORTAL UI */
.portal{max-width:1200px;margin:0 auto;padding:70px 6%}
.portal-header{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:42px}
.portal-header h1{font:500 clamp(40px,5vw,64px) Georgia,serif;color:var(--deep);margin:12px 0}
.portal-header h1 em{color:var(--gold2);font-style:italic}
.portal-header p{color:var(--muted);max-width:620px}
.portal-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:30px}
.portal-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:25px;box-shadow:var(--shadow)}
.portal-card small{display:block;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.portal-card strong{display:block;font:600 38px Georgia,serif;color:var(--deep);margin:12px 0 5px}
.portal-card span{color:var(--green);font-size:13px}
.portal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.portal-item{background:#fff;border:1px solid var(--line);border-radius:15px;padding:22px;color:var(--deep);font-weight:700;text-decoration:none;transition:.2s ease}
.portal-item:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:var(--shadow)}
@media(max-width:900px){.portal-cards{grid-template-columns:1fr 1fr}.portal-grid{grid-template-columns:1fr 1fr}.portal-header{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.portal{padding:45px 22px}.portal-cards,.portal-grid{grid-template-columns:1fr}}
/* =========================================================
   NOUR QURAN ACADEMY — STUDENT DASHBOARD
   ========================================================= */

.student-dashboard{
    min-height:100vh;
    display:grid;
    grid-template-columns:255px 1fr;
    background:#f7f3ea;
}

.student-sidebar{
    background:var(--deep);
    color:#fff;
    min-height:100vh;
    padding:28px 18px;
    position:sticky;
    top:0;
    height:100vh;
    display:flex;
    flex-direction:column;
}

.student-brand{
    padding:5px 10px 28px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.student-brand img{
    width:185px;
    max-width:100%;
}

.student-profile-mini{
    display:flex;
    align-items:center;
    gap:11px;
    padding:22px 10px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.student-profile-mini strong,
.student-top-profile strong{
    display:block;
    font-size:12px;
}

.student-profile-mini span,
.student-top-profile span{
    display:block;
    color:#9fb3aa;
    font-size:9px;
    margin-top:3px;
}

.student-avatar{
    width:38px;
    height:38px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--gold);
    color:#fff;
    font:600 17px Georgia;
    flex:none;
}

.student-avatar.small{
    width:34px;
    height:34px;
    font-size:14px;
}

.student-nav{
    padding-top:16px;
    overflow:auto;
    flex:1;
}

.student-nav a{
    display:flex;
    align-items:center;
    gap:12px;
    color:#c7d3ce;
    padding:10px 12px;
    margin:2px 0;
    border-radius:7px;
    font-size:11px;
    font-weight:600;
    transition:.2s;
}

.student-nav a span{
    width:18px;
    text-align:center;
    color:#9fb8ae;
    font-size:13px;
}

.student-nav a:hover,
.student-nav a.active{
    background:rgba(255,255,255,.08);
    color:#fff;
}

.student-nav a.active{
    color:var(--gold2);
    box-shadow:inset 3px 0 0 var(--gold);
}

.student-nav a.active span{
    color:var(--gold2);
}

.student-nav-label{
    color:#69877d;
    font-size:8px;
    letter-spacing:1.8px;
    font-weight:900;
    margin:20px 12px 7px;
}

.student-sidebar-bottom{
    border-top:1px solid rgba(255,255,255,.08);
    padding-top:15px;
}

.student-sidebar-bottom a{
    color:#a9bbb4;
    font-size:10px;
    padding:8px 10px;
    display:block;
}

.student-main{
    min-width:0;
    padding:35px 42px 50px;
}

.student-topbar{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:30px;
    margin-bottom:35px;
}

.student-mobile-logo{
    display:none;
}

.student-welcome>span,
.panel-eyebrow{
    font-size:9px;
    letter-spacing:2px;
    font-weight:900;
    color:var(--green);
}

.student-welcome h1{
    font:500 clamp(34px,4vw,52px) Georgia,serif;
    color:var(--deep);
    margin:9px 0 8px;
}

.student-welcome h1 em{
    color:var(--gold);
    font-style:italic;
}

.student-welcome p{
    margin:0;
    color:var(--muted);
    font-size:12px;
}

.student-top-actions{
    display:flex;
    align-items:center;
    gap:18px;
}

.student-icon-button{
    width:38px;
    height:38px;
    border:1px solid var(--line);
    border-radius:50%;
    background:#fff;
    color:var(--green);
}

.student-top-profile{
    display:flex;
    align-items:center;
    gap:9px;
}

.student-stat-grid{
    display:grid;
    grid-template-columns:1.35fr repeat(3,1fr);
    gap:15px;
    margin-bottom:18px;
}

.student-stat-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:17px;
    padding:22px;
    box-shadow:0 8px 30px rgba(4,43,36,.05);
}

.student-stat-card.featured{
    background:var(--deep);
    color:#fff;
}

.stat-icon{
    width:34px;
    height:34px;
    border-radius:9px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f1eadb;
    color:var(--green);
    margin-bottom:18px;
}

.featured .stat-icon{
    background:rgba(217,189,120,.13);
    color:var(--gold2);
}

.student-stat-card small{
    display:block;
    font-size:8px;
    letter-spacing:1.5px;
    font-weight:900;
    color:var(--muted);
}

.featured small{
    color:#9eb1aa;
}

.student-stat-card strong{
    display:block;
    font:500 35px Georgia,serif;
    margin:8px 0 3px;
    color:var(--deep);
}

.featured strong{
    color:#fff;
}

.stat-status{
    font-size:10px;
    color:var(--green);
}

.featured p{
    margin:10px 0 0;
    color:#b6c7c0;
    font-size:9px;
}

.progress-line{
    height:5px;
    background:#e9e5dc;
    border-radius:10px;
    overflow:hidden;
    margin-top:10px;
}

.progress-line span{
    display:block;
    height:100%;
    background:var(--gold);
    border-radius:10px;
}

.student-content-grid,
.student-bottom-grid{
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:18px;
    margin-bottom:18px;
}

.student-panel{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:25px;
    box-shadow:0 8px 30px rgba(4,43,36,.04);
}

.student-panel-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin-bottom:22px;
}

.student-panel-heading h2{
    font-size:27px;
    margin:7px 0 0;
}

.student-panel-heading h2 em{
    color:var(--gold);
}

.student-panel-heading>a{
    color:var(--green);
    font-size:9px;
    font-weight:800;
    white-space:nowrap;
}

.learning-row{
    display:grid;
    grid-template-columns:40px 1fr 110px;
    gap:14px;
    align-items:center;
    padding:15px 0;
    border-top:1px solid #eee9df;
}

.learning-icon{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#f4efe4;
}

.learning-info strong{
    display:block;
    font-size:12px;
    color:var(--deep);
}

.learning-info span{
    display:block;
    font-size:9px;
    color:var(--muted);
    margin-top:4px;
}

.learning-score strong{
    display:block;
    font-size:10px;
    text-align:right;
    color:var(--green);
}

.learning-score>div{
    height:4px;
    background:#eee9df;
    margin-top:6px;
    border-radius:5px;
}

.learning-score>div span{
    display:block;
    height:100%;
    background:var(--gold);
    border-radius:5px;
}

.next-class{
    background:linear-gradient(145deg,#fff,#f5f0e5);
}

.next-class-date{
    display:flex;
    align-items:center;
    gap:10px;
    margin:10px 0 20px;
}

.next-class-date strong{
    font:500 45px Georgia;
    color:var(--deep);
}

.next-class-date span{
    font-size:9px;
    font-weight:900;
    line-height:1.5;
    color:var(--gold);
}

.next-class-info h3{
    font:600 19px Georgia;
    margin:0 0 7px;
    color:var(--deep);
}

.next-class-info p{
    color:var(--muted);
    font-size:10px;
    margin:0 0 15px;
}

.class-meta{
    display:flex;
    gap:12px;
    color:var(--green);
    font-size:9px;
    font-weight:700;
}

.student-class-button{
    width:100%;
    margin-top:24px;
}

.hifz-summary{
    display:flex;
    align-items:center;
    gap:25px;
}

.hifz-circle{
    width:115px;
    height:115px;
    border-radius:50%;
    border:8px solid #eee8db;
    border-top-color:var(--gold);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    flex:none;
}

.hifz-circle strong{
    font:500 31px Georgia;
    color:var(--deep);
}

.hifz-circle span{
    font-size:9px;
    color:var(--muted);
}

.hifz-details strong{
    font-size:9px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:1px;
}

.hifz-details h3{
    font:500 22px Georgia;
    color:var(--deep);
    margin:6px 0;
}

.hifz-details p{
    margin:0;
    color:var(--muted);
    font-size:10px;
}

.hifz-details small{
    color:var(--muted);
    font-size:8px;
}

.evaluation-message{
    display:flex;
    gap:15px;
    background:#faf7ef;
    border-radius:12px;
    padding:17px;
}

.evaluation-avatar{
    width:40px;
    height:40px;
    border-radius:50%;
    background:var(--green);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font:500 17px Georgia;
    flex:none;
}

.evaluation-message strong{
    font:600 15px Georgia;
    color:var(--deep);
}

.evaluation-message p{
    font-size:10px;
    line-height:1.7;
    color:var(--muted);
    margin:7px 0;
}

.evaluation-message small{
    font-size:8px;
    color:var(--gold);
}

.student-verse{
    background:#f1eadb;
    border:1px solid #e3d6ba;
    border-radius:18px;
    text-align:center;
    padding:25px;
    position:relative;
}

.student-verse-mark{
    color:var(--gold);
    font-size:25px;
}

.student-arabic{
    direction:rtl;
    color:var(--deep);
    font:34px/1.8 Georgia,serif;
    margin:5px 0;
}

.student-verse>span{
    color:#68776f;
    font:italic 11px Georgia;
}

.student-verse b{
    color:var(--gold);
}

@media(max-width:1100px){
    .student-dashboard{
        grid-template-columns:220px 1fr;
    }

    .student-main{
        padding:30px;
    }

    .student-stat-grid{
        grid-template-columns:1fr 1fr;
    }

    .student-stat-card.featured{
        grid-column:span 2;
    }
}

@media(max-width:850px){
    .student-dashboard{
        display:block;
    }

    .student-sidebar{
        display:none;
    }

    .student-main{
        padding:28px 20px 40px;
    }

    .student-mobile-logo{
        display:block;
    }

    .student-mobile-logo img{
        width:155px;
    }

    .student-topbar{
        flex-wrap:wrap;
    }

    .student-top-actions{
        width:100%;
        justify-content:flex-end;
    }

    .student-content-grid,
    .student-bottom-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:560px){
    .student-main{
        padding:22px 15px 35px;
    }

    .student-welcome h1{
        font-size:35px;
    }

    .student-stat-grid{
        grid-template-columns:1fr 1fr;
    }

    .student-stat-card.featured{
        grid-column:span 2;
    }

    .student-stat-card{
        padding:17px;
    }

    .student-stat-card strong{
        font-size:29px;
    }

    .learning-row{
        grid-template-columns:38px 1fr;
    }

    .learning-score{
        grid-column:2;
    }

    .hifz-summary{
        align-items:flex-start;
        flex-direction:column;
    }

    .student-arabic{
        font-size:27px;
    }
}


/* ================= STUDENT INNER PAGES ================= */

.portal-page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.portal-page-card,.portal-detail-hero,.portal-video-card,.table-card,.quiz-card,.certificate-card,.settings-card,.profile-card,.quran-reading-card,.revision-header,.attendance-summary>div{background:#fff;border:1px solid var(--line);border-radius:18px;padding:25px;box-shadow:0 8px 30px rgba(4,43,36,.04)}
.portal-page-card.featured{background:var(--deep);color:#fff}
.portal-page-card h2,.portal-detail-hero h2,.portal-video-card h2,.quran-reading-card h2,.revision-header h2{font:500 27px Georgia;color:var(--deep);margin:9px 0}
.featured h2{color:#fff}
.portal-page-card p,.portal-detail-hero p,.portal-video-card p,.quran-reading-card p,.revision-header p{font-size:11px;line-height:1.7;color:var(--muted)}
.portal-row{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:16px 0;font-size:9px;color:var(--muted)}
.portal-row b{color:var(--green)}
.course-progress{height:6px;background:#e9e5dc;border-radius:10px;overflow:hidden;margin:20px 0 8px}
.course-progress span{display:block;height:100%;background:var(--gold);border-radius:10px}
.portal-link{color:var(--green);font-size:10px;font-weight:800}
.portal-disabled{border:0;background:#eeeae1;color:#999;border-radius:7px;padding:10px 16px;font-size:9px}
.portal-detail-hero{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;background:linear-gradient(135deg,#fff,#f5f0e4)}
.portal-big-number{font:500 70px Georgia;color:var(--gold)}
.portal-big-number small{font-size:24px}
.portal-section-title{margin:25px 0 12px}
.portal-section-title h2{font:500 28px Georgia;color:var(--deep)}
.portal-section-title em{color:var(--gold)}
.lesson-list{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.lesson-row{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:15px;padding:17px 22px;border-bottom:1px solid #eee9df}
.lesson-row:last-child{border-bottom:0}
.lesson-row>span:first-child{width:32px;height:32px;border-radius:50%;background:#f2ede2;display:flex;align-items:center;justify-content:center;color:var(--green);font-size:11px}
.lesson-row.done>span:first-child{background:#e2eee8;color:var(--green)}
.lesson-row.current{background:#fffaf0}
.lesson-row b{display:block;font-size:11px;color:var(--deep)}
.lesson-row small{display:block;color:var(--muted);font-size:8px;margin-top:4px}
.lesson-row strong{font-size:8px;color:#8c938e}
.lesson-row a{font-size:9px;color:var(--green);font-weight:800}
.portal-video-card{display:grid;grid-template-columns:1.25fr 1fr;gap:25px}
.fake-video{min-height:280px;border-radius:14px;background:linear-gradient(135deg,#063d34,#122b27);display:flex;align-items:center;justify-content:center}
.fake-video div{width:58px;height:58px;border-radius:50%;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center}
.video-info{display:flex;flex-direction:column;justify-content:center}
.live-class-card{padding:35px;background:var(--deep);color:#fff;border-radius:20px}
.live-class-card h2{font:500 34px Georgia;margin:12px 0 7px}
.live-class-card p{color:#b8c8c1;font-size:11px}
.live-badge{display:inline-block;color:#f0c778;font-size:9px;font-weight:900;letter-spacing:1.5px}
.schedule-week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.day-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center}
.day-card small{display:block;color:var(--green);font-weight:900;font-size:8px}
.day-card strong{display:block;font:500 30px Georgia;margin:10px 0;color:var(--deep)}
.day-card span{display:block;color:var(--gold);font-size:8px;font-weight:800}
.day-card em{font-size:8px;color:#aaa;font-style:normal}
.upcoming-list{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.upcoming-list>div{display:grid;grid-template-columns:180px 1fr 80px;padding:18px 22px;border-bottom:1px solid #eee9df;font-size:10px}
.upcoming-list>div:last-child{border:0}
.upcoming-list span{color:var(--deep);font-weight:700}
.upcoming-list strong{color:var(--muted);text-align:right}
.assignment-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.task-status{font-size:8px;font-weight:900;letter-spacing:1px}
.task-status.pending{color:#b07c19}.task-status.complete{color:var(--green)}
.quiz-list{display:grid;gap:14px}
.quiz-card{display:flex;justify-content:space-between;align-items:center}
.quiz-card h2{font:500 23px Georgia;margin:7px 0;color:var(--deep)}
.quiz-card p{font-size:9px;color:var(--muted)}
.table-card{overflow:auto}
.table-card table{width:100%;border-collapse:collapse;font-size:10px}
.table-card th{font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;text-align:left;padding:12px;border-bottom:1px solid var(--line)}
.table-card td{padding:15px 12px;border-bottom:1px solid #eee9df;color:var(--deep)}
.status-pill{display:inline-block;padding:5px 9px;border-radius:20px;font-size:8px;font-weight:800}
.status-pill.success{background:#e4f0e9;color:#17634f}
.status-pill.danger{background:#f7e6df;color:#a44932}
.attendance-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:18px}
.attendance-summary small{display:block;font-size:8px;letter-spacing:1.5px;color:var(--muted);font-weight:900}
.attendance-summary strong{display:block;font:500 38px Georgia;color:var(--deep);margin:8px 0}
.attendance-summary span{font-size:9px;color:var(--green)}
.progress-dashboard{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:20px}
.progress-card{background:#fff;border:1px solid var(--line);border-radius:17px;padding:22px}
.progress-card>div:first-child{display:flex;justify-content:space-between}
.progress-card b{font-size:11px;color:var(--deep)}
.progress-card strong{font:500 24px Georgia;color:var(--gold)}
.progress-card small{font-size:8px;color:var(--muted)}
.quran-reading-card{max-width:800px}
.arabic-large{direction:rtl;text-align:center;font:55px Georgia;color:var(--deep);padding:25px}
.hifz-dashboard{display:grid;grid-template-columns:1.5fr 1fr;gap:18px}
.hifz-main,.hifz-stats>div{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px}
.hifz-main h2{font:500 32px Georgia;color:var(--deep);margin:8px 0}
.hifz-progress-ring{width:150px;height:150px;border-radius:50%;border:12px solid #eee8db;border-top-color:var(--gold);display:flex;align-items:center;justify-content:center;font:500 35px Georgia;color:var(--deep);margin:25px 0}
.hifz-stats{display:grid;gap:12px}
.hifz-stats strong{display:block;font:500 30px Georgia;color:var(--gold)}
.hifz-stats span{font-size:9px;color:var(--muted)}
.revision-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.revision-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.revision-grid>div{background:#fff;border:1px solid var(--line);border-radius:17px;padding:25px}
.revision-grid strong{display:block;font:500 32px Georgia;color:var(--deep)}
.revision-grid span{font-size:9px;color:var(--muted)}
.certificate-card{text-align:center;max-width:700px;margin:auto;padding:45px}
.certificate-icon{font-size:45px;color:var(--gold);margin-bottom:15px}
.certificate-card h2{font:500 32px Georgia;color:var(--deep)}
.certificate-card p{font-size:11px;color:var(--muted)}
.messages-list{display:grid;gap:12px}
.message-card{display:grid;grid-template-columns:45px 1fr auto;gap:15px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:17px;padding:20px}
.message-card.unread{border-left:4px solid var(--gold);background:#fffaf1}
.message-avatar{width:40px;height:40px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font:500 16px Georgia}
.message-card b{font-size:11px;color:var(--deep)}
.message-card span{display:block;color:var(--muted);font-size:8px;margin-top:4px}
.message-card p{font-size:10px;color:#66756d;line-height:1.6}
.message-card>strong{color:var(--gold);font-size:8px}
.profile-layout{display:grid;grid-template-columns:260px 1fr;gap:18px}
.profile-card{text-align:center}
.profile-big-avatar{width:90px;height:90px;border-radius:50%;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;font:500 38px Georgia;margin:0 auto 15px}
.profile-card h2{font:500 25px Georgia;color:var(--deep);margin:0}
.profile-card p{font-size:9px;color:var(--muted)}
.settings-card h2{font:500 27px Georgia;color:var(--deep);margin:8px 0 25px}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:25px}
.settings-grid label{font-size:9px;font-weight:800;color:var(--muted)}
.settings-grid input{margin-top:7px}

@media(max-width:900px){
.portal-page-grid,.assignment-grid{grid-template-columns:1fr 1fr}
.schedule-week{grid-template-columns:repeat(4,1fr)}
.portal-video-card,.hifz-dashboard,.profile-layout{grid-template-columns:1fr}
}
@media(max-width:600px){
.portal-page-grid,.assignment-grid,.progress-dashboard,.attendance-summary,.revision-grid,.settings-grid{grid-template-columns:1fr}
.schedule-week{grid-template-columns:repeat(2,1fr)}
.portal-detail-hero,.revision-header,.quiz-card{display:block}
.quiz-card .btn{margin-top:15px}
.upcoming-list>div{grid-template-columns:1fr;gap:6px}
.upcoming-list strong{text-align:left}
.lesson-row{grid-template-columns:35px 1fr}
.lesson-row>a,.lesson-row>strong{grid-column:2}
.portal-video-card{display:block}
.fake-video{min-height:200px;margin-bottom:20px}
}

/* ================================
   STUDENT PORTAL SHELL
   ================================ */

.portal-layout{
    min-height:100vh;
    display:grid;
    grid-template-columns:250px 1fr;
    background:#f7f2e8;
}

.portal-sidebar{
    position:sticky;
    top:0;
    height:100vh;
    background:#043f35;
    color:#fff;
    padding:28px 18px;
    display:flex;
    flex-direction:column;
    overflow-y:auto;
}

.portal-brand{
    padding:0 10px 24px;
    border-bottom:1px solid rgba(255,255,255,.12);
    margin-bottom:20px;
}

.portal-brand img{
    width:155px;
    max-width:100%;
    display:block;
}

.portal-sidebar nav{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.portal-sidebar nav a{
    display:flex;
    align-items:center;
    gap:8px;
    color:#e8f0ec;
    text-decoration:none;
    padding:11px 12px;
    border-radius:9px;
    font-size:13px;
    font-weight:700;
    transition:.2s ease;
}

.portal-sidebar nav a:hover{
    background:rgba(255,255,255,.08);
    color:#fff;
}

.portal-sidebar nav a:first-child{
    background:rgba(255,255,255,.10);
    border-left:3px solid #d0a653;
}

.portal-nav-title{
    margin:22px 10px 7px;
    color:#b7c9c1;
    font-size:9px;
    letter-spacing:2px;
    font-weight:900;
}

.portal-sidebar-bottom{
    margin-top:auto;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.12);
}

.portal-sidebar-bottom a{
    color:#dce8e3;
    text-decoration:none;
    font-size:12px;
}

.portal-main{
    min-width:0;
    background:#f7f2e8;
}

.portal-topbar{
    height:72px;
    background:#fffdf8;
    border-bottom:1px solid #e7dfd0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 38px;
}

.portal-topbar small{
    display:block;
    color:#0b6254;
    font-size:9px;
    letter-spacing:2px;
    font-weight:900;
}

.portal-topbar strong{
    display:block;
    margin-top:4px;
    color:#063f35;
    font-size:17px;
}

.portal-logout{
    color:#0b6254;
    text-decoration:none;
    font-size:12px;
    font-weight:800;
}

.portal-content{
    min-height:calc(100vh - 72px);
    padding:0;
}

@media(max-width:900px){
    .portal-layout{
        grid-template-columns:1fr;
    }

    .portal-sidebar{
        position:relative;
        height:auto;
    }

    .portal-sidebar nav{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .portal-sidebar-bottom{
        margin-top:20px;
    }

    .portal-topbar{
        padding:0 20px;
    }
}

@media(max-width:560px){
    .portal-sidebar nav{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   MAIN WEBSITE — LANGUAGE SWITCHER
========================================================= */

.language-switcher{
    display:flex;
    align-items:center;
    gap:4px;
    margin-left:18px;
    padding:4px;
    border:1px solid #e7dfd0;
    border-radius:10px;
    background:#fffdf8;
}

.language-switcher a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:34px;
    height:28px;
    padding:0 7px;
    border-radius:7px;
    color:#49635c;
    text-decoration:none;
    font-size:9px;
    font-weight:800;
    transition:.2s ease;
}

.language-switcher a:hover{
    color:#063d34;
    background:#f4efe4;
}

.language-switcher a.active{
    color:#fff;
    background:#063d34;
}

/* Arabic website direction */
html[dir="rtl"] body{
    direction:rtl;
}

html[dir="rtl"] .language-switcher{
    margin-left:0;
    margin-right:18px;
}

html[dir="rtl"] .nav,
html[dir="rtl"] .navbar,
html[dir="rtl"] header nav{
    direction:rtl;
}

html[dir="rtl"] .language-switcher{
    direction:ltr;
}

@media(max-width:800px){
    .language-switcher{
        margin-left:8px;
    }

    html[dir="rtl"] .language-switcher{
        margin-right:8px;
    }
}
/* =========================================================
   QAAF PREMIUM WEBSITE LAYER
   Applies to:
   Home / About / Contact / Trial
   Keeps existing portal/admin styles intact.
========================================================= */

/* ---------- GLOBAL POLISH ---------- */

:root{
    --qaaf-green:#0b594a;
    --qaaf-deep:#063b32;
    --qaaf-gold:#c9a45c;
    --qaaf-gold-light:#e1c889;
    --qaaf-cream:#f7f3ea;
    --qaaf-paper:#fffdf8;
    --qaaf-ink:#17231f;
    --qaaf-muted:#718079;
    --qaaf-line:#e6dfd0;
    --qaaf-shadow:0 24px 70px rgba(4,43,36,.12);
    --qaaf-shadow-soft:0 12px 38px rgba(4,43,36,.07);
}

body{
    overflow-x:hidden;
}

::selection{
    background:var(--qaaf-gold);
    color:#fff;
}

.btn{
    min-height:46px;
    border-radius:8px;
    padding:13px 24px;
    letter-spacing:.35px;
    position:relative;
    overflow:hidden;
}

.btn::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.16) 50%,transparent 75%);
    transform:translateX(-120%);
    transition:.55s ease;
}

.btn:hover::after{
    transform:translateX(120%);
}


/* ---------- SHARED PAGE HERO ---------- */

.page-hero{
    position:relative;
    min-height:430px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:90px 28px;
    background:
        radial-gradient(circle at 78% 20%,rgba(201,164,92,.16),transparent 30%),
        radial-gradient(circle at 15% 80%,rgba(255,255,255,.06),transparent 28%),
        var(--qaaf-deep);
}

.page-hero::before{
    content:"";
    position:absolute;
    width:460px;
    height:460px;
    border:1px solid rgba(225,200,137,.16);
    border-radius:50%;
    right:-180px;
    top:-220px;
}

.page-hero::after{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    border:1px solid rgba(225,200,137,.10);
    border-radius:50%;
    left:-150px;
    bottom:-180px;
}

.page-hero-content{
    position:relative;
    z-index:2;
    width:min(900px,100%);
    text-align:center;
}

.page-hero h1{
    max-width:900px;
    margin:18px auto 16px;
    font:500 clamp(45px,6vw,78px)/1.02 Georgia,serif;
    letter-spacing:-1.5px;
}

.page-hero h1 em{
    color:var(--qaaf-gold-light);
    font-style:italic;
}

.page-hero p{
    max-width:600px;
    margin:0 auto;
    font-size:14px;
    line-height:1.8;
    color:#d6e1dc;
}

.page-hero-glow{
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(201,164,92,.06);
    filter:blur(20px);
    right:12%;
    top:10%;
}

.hero-divider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin-top:28px;
}

.hero-divider span{
    width:70px;
    height:1px;
    background:rgba(225,200,137,.42);
}

.hero-divider i{
    color:var(--qaaf-gold-light);
    font-style:normal;
    font-size:13px;
}


/* ---------- ABOUT PAGE ---------- */

.about-premium{
    max-width:1320px;
    padding-top:105px;
    padding-bottom:100px;
}

.about-premium-grid{
    display:grid;
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    gap:75px;
    align-items:center;
}

.about-visual{
    position:relative;
    padding:18px;
}

.about-image-frame{
    position:relative;
    overflow:hidden;
    border-radius:28px;
    background:#efe7d7;
    box-shadow:var(--qaaf-shadow);
}

.about-image-frame img{
    width:100%;
    display:block;
    transition:transform .8s ease;
}

.about-image-frame:hover img{
    transform:scale(1.025);
}

.about-image-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 55%,rgba(6,59,50,.16));
    pointer-events:none;
}

.about-experience-card{
    position:absolute;
    right:24px;
    bottom:24px;
    display:flex;
    align-items:center;
    gap:13px;
    min-width:190px;
    padding:16px 18px;
    border-radius:14px;
    background:rgba(255,253,248,.95);
    border:1px solid rgba(255,255,255,.8);
    box-shadow:0 15px 45px rgba(4,43,36,.18);
    backdrop-filter:blur(12px);
}

.about-experience-card strong{
    color:var(--qaaf-gold);
    font:500 37px Georgia,serif;
}

.about-experience-card span{
    color:var(--qaaf-muted);
    font-size:9px;
    line-height:1.5;
    font-weight:800;
}

.about-decoration{
    position:absolute;
    width:90px;
    height:90px;
    border:1px solid rgba(201,164,92,.45);
    border-radius:50%;
    z-index:-1;
}

.about-decoration-one{
    left:-8px;
    top:-8px;
}

.about-decoration-two{
    right:-8px;
    bottom:-8px;
    width:65px;
    height:65px;
}

.about-content{
    max-width:650px;
}

.about-content h2{
    margin:12px 0 5px;
    font-size:clamp(36px,4vw,57px);
    line-height:1.04;
}

.about-content h2 em{
    display:block;
    color:var(--qaaf-gold);
    font-style:italic;
}

.about-content h3{
    margin:13px 0 20px;
    color:var(--qaaf-green);
    font:500 22px Georgia,serif;
}

.about-line{
    width:70px;
    height:2px;
    background:var(--qaaf-gold);
    margin:0 0 27px;
}

.about-content p{
    color:var(--qaaf-muted);
    font-size:13px;
    line-height:1.95;
    margin:0 0 17px;
}

.about-content .about-lead{
    color:#43544d;
    font-size:15px;
    line-height:1.9;
}

.about-signature{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:28px;
    padding-top:20px;
    border-top:1px solid var(--qaaf-line);
}

.signature-line{
    width:42px;
    height:1px;
    background:var(--qaaf-gold);
    flex:none;
}

.about-signature strong{
    color:var(--qaaf-deep);
    font:500 14px Georgia,serif;
}

.about-values{
    max-width:none;
    background:
        radial-gradient(circle at 10% 20%,rgba(201,164,92,.08),transparent 28%),
        #faf7ef;
}

.about-values .section-title{
    max-width:760px;
    margin:0 auto 48px;
}

.about-values .section-title h2{
    color:var(--qaaf-deep);
}

.about-values .section-title p{
    line-height:1.8;
}

.about-values-grid{
    max-width:1250px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.about-value-card{
    position:relative;
    background:#fff;
    border:1px solid var(--qaaf-line);
    border-radius:20px;
    padding:29px 24px 27px;
    overflow:hidden;
    box-shadow:var(--qaaf-shadow-soft);
    transition:.3s ease;
}

.about-value-card:hover{
    transform:translateY(-7px);
    box-shadow:var(--qaaf-shadow);
    border-color:#dcc68f;
}

.about-value-card.featured{
    background:var(--qaaf-deep);
    color:#fff;
}

.about-value-number{
    position:absolute;
    right:20px;
    top:17px;
    color:#d8ccb3;
    font-size:9px;
    font-weight:900;
    letter-spacing:1.5px;
}

.featured .about-value-number{
    color:rgba(225,200,137,.55);
}

.about-value-icon{
    width:47px;
    height:47px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:13px;
    background:#f4eee2;
    margin-bottom:22px;
    font-size:20px;
}

.featured .about-value-icon{
    background:rgba(225,200,137,.12);
}

.about-value-card h3{
    margin:0 0 10px;
    font:600 20px Georgia,serif;
    color:var(--qaaf-deep);
}

.featured h3{
    color:#fff;
}

.about-value-card p{
    margin:0;
    color:var(--qaaf-muted);
    font-size:11px;
    line-height:1.8;
}

.featured p{
    color:#b8c9c2;
}

.about-cta{
    background:
        radial-gradient(circle at 80% 20%,rgba(201,164,92,.14),transparent 30%),
        var(--qaaf-deep);
    color:#fff;
    padding:72px 28px;
}

.about-cta-inner{
    max-width:1200px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
}

.about-cta h2{
    max-width:680px;
    margin:10px 0;
    font-size:clamp(32px,4vw,52px);
}

.about-cta h2 em{
    color:var(--qaaf-gold-light);
}

.about-cta p{
    max-width:600px;
    margin:0;
    color:#b9c9c3;
    line-height:1.8;
    font-size:12px;
}


/* ---------- CONTACT PAGE ---------- */

.contact-premium{
    max-width:1320px;
    padding-top:100px;
    padding-bottom:100px;
}

.contact-layout-premium{
    display:grid;
    grid-template-columns:.82fr 1.18fr;
    gap:70px;
    align-items:start;
}

.contact-info-premium{
    padding-top:20px;
}

.contact-info-premium h2{
    font-size:clamp(37px,4vw,57px);
    margin:12px 0 18px;
}

.contact-info-premium h2 em{
    color:var(--qaaf-gold);
}

.contact-lead{
    max-width:520px;
    color:var(--qaaf-muted);
    font-size:14px;
    line-height:1.9;
}

.contact-info-list{
    margin-top:34px;
    display:grid;
    gap:15px;
}

.contact-info-item{
    display:flex;
    align-items:center;
    gap:15px;
    padding:16px;
    border:1px solid var(--qaaf-line);
    border-radius:14px;
    background:#fff;
    box-shadow:0 8px 25px rgba(4,43,36,.035);
}

.contact-icon{
    width:43px;
    height:43px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:none;
    border-radius:12px;
    background:#f3ecdf;
    color:var(--qaaf-green);
    font-size:17px;
}

.contact-info-item span{
    display:block;
    color:var(--qaaf-muted);
    font-size:8px;
    letter-spacing:1.4px;
    text-transform:uppercase;
    font-weight:900;
    margin-bottom:5px;
}

.contact-info-item strong{
    display:block;
    color:var(--qaaf-deep);
    font-size:12px;
}

.contact-note{
    display:flex;
    gap:14px;
    margin-top:24px;
    padding:19px;
    border-radius:16px;
    background:#f6f0e4;
    border:1px solid #eadfc9;
}

.contact-note-icon{
    color:var(--qaaf-gold);
    font-size:18px;
}

.contact-note strong{
    color:var(--qaaf-deep);
    font:600 16px Georgia,serif;
}

.contact-note p{
    color:var(--qaaf-muted);
    font-size:10px;
    line-height:1.7;
    margin:6px 0 0;
}

.contact-form-wrap{
    position:relative;
}

.contact-form-wrap::before{
    content:"";
    position:absolute;
    width:130px;
    height:130px;
    border:1px solid rgba(201,164,92,.35);
    border-radius:50%;
    right:-35px;
    bottom:-35px;
    z-index:-1;
}

.contact-form-card{
    padding:42px;
    border-radius:24px;
    box-shadow:var(--qaaf-shadow);
}

.form-heading{
    margin-bottom:30px;
}

.form-heading>span{
    color:var(--qaaf-green);
    font-size:9px;
    letter-spacing:2px;
    font-weight:900;
}

.form-heading h3{
    color:var(--qaaf-deep);
    font:500 31px Georgia,serif;
    margin:9px 0;
}

.form-heading h3 em{
    color:var(--qaaf-gold);
}

.form-heading p{
    color:var(--qaaf-muted);
    font-size:11px;
    line-height:1.7;
    margin:0;
}

.premium-form{
    display:grid;
    gap:17px;
}

.premium-form label{
    color:#617069;
    font-size:9px;
    letter-spacing:.2px;
}

.premium-form label>span{
    display:block;
    margin-bottom:7px;
}

.premium-form input,
.premium-form select,
.premium-form textarea{
    margin-top:0;
    border-radius:10px;
    padding:14px 15px;
    border:1px solid #ded8cc;
    background:#fffdf8;
    outline:none;
    transition:.2s ease;
}

.premium-form input:focus,
.premium-form select:focus,
.premium-form textarea:focus{
    border-color:var(--qaaf-gold);
    box-shadow:0 0 0 3px rgba(201,164,92,.11);
}

.premium-form textarea{
    min-height:145px;
}

.contact-submit{
    width:100%;
    margin-top:4px;
}

.contact-submit span,
.trial-form-footer .btn span{
    margin-left:9px;
}

.contact-bottom,
.trial-bottom{
    position:relative;
    overflow:hidden;
    text-align:center;
    color:#fff;
    padding:80px 28px;
    background:
        radial-gradient(circle at 50% 0,rgba(201,164,92,.16),transparent 36%),
        var(--qaaf-deep);
}

.contact-bottom-inner,
.trial-bottom-inner{
    max-width:780px;
    margin:auto;
}

.contact-bottom h2,
.trial-bottom h2{
    margin:12px 0;
    color:#fff;
    font-size:clamp(34px,4vw,53px);
}

.contact-bottom h2 em,
.trial-bottom h2 em{
    color:var(--qaaf-gold-light);
}

.contact-bottom p,
.trial-bottom p{
    color:#b9c9c3;
    font-size:12px;
    line-height:1.8;
    margin:0 0 25px;
}


/* ---------- TRIAL PAGE ---------- */

.trial-premium{
    max-width:1400px;
    padding-top:90px;
    padding-bottom:100px;
}

.trial-layout{
    display:grid;
    grid-template-columns:.72fr 1.28fr;
    gap:55px;
    align-items:start;
}

.trial-intro{
    position:sticky;
    top:105px;
}

.trial-intro h2{
    max-width:480px;
    font-size:clamp(40px,4.5vw,61px);
    margin:12px 0 18px;
    line-height:1.02;
}

.trial-intro h2 em{
    display:block;
    color:var(--qaaf-gold);
}

.trial-lead{
    max-width:520px;
    color:var(--qaaf-muted);
    font-size:13px;
    line-height:1.9;
}

.trial-benefits{
    display:grid;
    gap:13px;
    margin-top:34px;
}

.trial-benefit{
    display:flex;
    gap:14px;
    padding:15px;
    border:1px solid var(--qaaf-line);
    border-radius:14px;
    background:#fff;
}

.trial-benefit-icon{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:none;
    border-radius:11px;
    background:#f3ecdf;
    color:var(--qaaf-green);
}

.trial-benefit h3{
    margin:0 0 4px;
    color:var(--qaaf-deep);
    font:600 15px Georgia,serif;
}

.trial-benefit p{
    margin:0;
    color:var(--qaaf-muted);
    font-size:9px;
    line-height:1.65;
}

.trial-quote{
    display:flex;
    gap:12px;
    align-items:flex-start;
    margin-top:25px;
    padding:18px 20px;
    background:var(--qaaf-deep);
    border-radius:16px;
    color:#fff;
}

.trial-quote>span{
    color:var(--qaaf-gold-light);
    font:500 35px Georgia,serif;
    line-height:.7;
}

.trial-quote p{
    margin:0;
    color:#c2d0ca;
    font:italic 13px/1.7 Georgia,serif;
}

.trial-form-wrap{
    position:relative;
}

.trial-form-wrap::after{
    content:"";
    position:absolute;
    width:160px;
    height:160px;
    border:1px solid rgba(201,164,92,.28);
    border-radius:50%;
    right:-65px;
    top:-65px;
    z-index:-1;
}

.trial-form-card{
    padding:42px;
    border-radius:24px;
    box-shadow:var(--qaaf-shadow);
}

.validation-summary{
    color:#a44932;
    font-size:10px;
}

.form-section-label{
    padding-top:5px;
    color:var(--qaaf-green);
    font-size:8px;
    letter-spacing:2px;
    font-weight:900;
}

.trial-form-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding-top:4px;
}

.trial-form-note{
    display:flex;
    gap:8px;
    align-items:flex-start;
    max-width:350px;
}

.trial-form-note>span{
    color:var(--qaaf-gold);
    font-size:12px;
}

.trial-form-note p{
    margin:0;
    color:var(--qaaf-muted);
    font-size:9px;
    line-height:1.6;
}


/* ---------- HOMEPAGE PREMIUM UPGRADES ---------- */

.hero{
    min-height:650px;
}

.hero::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border:1px solid rgba(225,200,137,.15);
    border-radius:50%;
    right:-160px;
    bottom:-220px;
    z-index:1;
    pointer-events:none;
}

.hero-copy{
    max-width:1280px;
}

.hero-copy h1{
    letter-spacing:-1.8px;
}

.hero-copy p{
    font-size:15px;
}

.about-home{
    max-width:1320px;
    padding-top:105px;
    padding-bottom:105px;
}

.about-image{
    border-radius:28px;
    box-shadow:var(--qaaf-shadow);
    position:relative;
}

.about-image::after{
    content:"";
    position:absolute;
    inset:14px;
    border:1px solid rgba(255,255,255,.38);
    border-radius:19px;
    pointer-events:none;
}

.services-home{
    padding-top:100px;
    padding-bottom:100px;
}

.service-card{
    border-radius:20px;
    box-shadow:var(--qaaf-shadow-soft);
}

.service-card:hover{
    border-color:#dcc68f;
}

.service-card img{
    height:210px;
}

.service-card h3{
    line-height:1.25;
}

.section-title h2{
    letter-spacing:-.6px;
}

.section-title>p{
    max-width:700px;
    margin-left:auto;
    margin-right:auto;
    line-height:1.8;
}

.stats{
    padding-top:50px;
    padding-bottom:50px;
}

.price-card{
    transition:.3s ease;
}

.price-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--qaaf-shadow);
}

.price-card.popular:hover{
    transform:translateY(-15px);
}

.article-card{
    transition:.3s ease;
}

.article-card img{
    height:215px;
}

.split-panel{
    gap:0;
    max-width:1250px;
}

.split-panel .trial-panel,
.split-panel .contact-panel{
    border-radius:0;
    min-height:300px;
}

.split-panel .trial-panel{
    border-radius:24px 0 0 24px;
}

.split-panel .contact-panel{
    border-radius:0 24px 24px 0;
}

.cta-band{
    min-height:210px;
}


/* ---------- OUR LEARNING JOURNEY ---------- */

.learning-journey{
    position:relative;
    max-width:none;
    background:
        radial-gradient(circle at 10% 20%,rgba(201,164,92,.08),transparent 28%),
        #faf7ef;
    padding-top:105px;
    padding-bottom:100px;
    overflow:hidden;
}

.learning-journey::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border:1px solid rgba(201,164,92,.16);
    border-radius:50%;
    right:-210px;
    top:-190px;
}

.learning-journey .section-title{
    position:relative;
    z-index:1;
    max-width:800px;
    margin-left:auto;
    margin-right:auto;
}

.learning-journey .section-title h2{
    color:var(--qaaf-deep);
}

.learning-journey .section-title h3{
    color:var(--qaaf-deep);
    font:600 22px Georgia,serif;
    margin:27px 0 9px;
}

.learning-journey .section-title strong{
    display:inline-block;
    margin-top:18px;
    color:var(--qaaf-green);
    font-size:10px;
    letter-spacing:1.7px;
}

.learning-video-grid{
    max-width:1250px;
    margin:48px auto 0;
    grid-template-columns:repeat(3,1fr);
    position:relative;
    z-index:1;
}

.video-card{
    display:flex;
    flex-direction:column;
}

.video-preview{
    position:relative;
    height:230px;
    overflow:hidden;
    background:var(--qaaf-deep);
}

.video-preview img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .65s ease;
}

.video-card:hover .video-preview img{
    transform:scale(1.055);
}

.video-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(6,59,50,.08),rgba(6,59,50,.70));
}

.video-play{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-left:3px;
    border-radius:50%;
    background:rgba(201,164,92,.96);
    color:#fff;
    font-size:18px;
    box-shadow:0 12px 30px rgba(0,0,0,.22);
    transition:.25s ease;
}

.video-card:hover .video-play{
    transform:translate(-50%,-50%) scale(1.08);
}

.video-label{
    position:absolute;
    left:16px;
    bottom:15px;
    color:#fff;
    font-size:8px;
    letter-spacing:1.8px;
    font-weight:900;
}

.video-card>div:last-child{
    flex:1;
}

.video-card>div:last-child .eyebrow{
    font-size:8px;
    margin-bottom:7px;
}

.video-card>div:last-child h3{
    margin-bottom:8px;
}

.learning-journey-footer{
    position:relative;
    z-index:1;
    max-width:750px;
    margin:58px auto 0;
    text-align:center;
}

.learning-journey-footer h3{
    margin:0 0 5px;
    color:var(--qaaf-deep);
    font:500 31px Georgia,serif;
}

.learning-journey-footer p{
    margin:4px 0;
    color:var(--qaaf-muted);
    font-size:12px;
}

.learning-journey-footer .btn{
    margin-top:22px;
}


/* ---------- RESPONSIVE PREMIUM ---------- */

@media(max-width:1100px){

    .about-premium-grid{
        gap:45px;
    }

    .about-values-grid{
        grid-template-columns:1fr 1fr;
    }

    .contact-layout-premium{
        gap:40px;
    }

    .trial-layout{
        gap:35px;
    }

    .learning-video-grid{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:900px){

    .page-hero{
        min-height:390px;
    }

    .about-premium-grid,
    .contact-layout-premium,
    .trial-layout{
        grid-template-columns:1fr;
    }

    .about-content{
        max-width:none;
    }

    .trial-intro{
        position:relative;
        top:auto;
    }

    .about-cta-inner{
        flex-direction:column;
        align-items:flex-start;
    }

    .contact-form-card,
    .trial-form-card{
        padding:30px;
    }

    .learning-video-grid{
        grid-template-columns:1fr 1fr;
    }

    .split-panel .trial-panel,
    .split-panel .contact-panel{
        border-radius:20px;
    }

    .split-panel .trial-panel{
        border-radius:20px 20px 0 0;
    }

    .split-panel .contact-panel{
        border-radius:0 0 20px 20px;
    }
}

@media(max-width:600px){

    .page-hero{
        min-height:350px;
        padding:75px 22px;
    }

    .page-hero h1{
        font-size:43px;
    }

    .page-hero p{
        font-size:12px;
    }

    .hero-divider span{
        width:45px;
    }

    .about-premium,
    .contact-premium,
    .trial-premium{
        padding-top:70px;
        padding-bottom:70px;
    }

    .about-visual{
        padding:8px;
    }

    .about-experience-card{
        right:15px;
        bottom:15px;
        min-width:165px;
        padding:12px;
    }

    .about-experience-card strong{
        font-size:30px;
    }

    .about-values-grid{
        grid-template-columns:1fr;
    }

    .about-content h2,
    .trial-intro h2,
    .contact-info-premium h2{
        font-size:40px;
    }

    .contact-form-card,
    .trial-form-card{
        padding:22px;
    }

    .trial-form-footer{
        align-items:stretch;
        flex-direction:column;
    }

    .trial-form-footer .btn{
        width:100%;
    }

    .learning-journey{
        padding-top:75px;
        padding-bottom:75px;
    }

    .learning-video-grid{
        grid-template-columns:1fr;
        margin-top:35px;
    }

    .video-preview{
        height:220px;
    }

    .learning-journey-footer{
        margin-top:45px;
    }

    .learning-journey-footer h3{
        font-size:27px;
    }

    .about-cta{
        padding:60px 22px;
    }

    .contact-bottom,
    .trial-bottom{
        padding:65px 22px;
    }
}

/* =========================================================
   QAAF — COMPACT MAIN HEADER
   Keep the desktop header clean and proportional.
   ========================================================= */

.site-header{
    min-height:88px;
}

.site-header .nav-shell{
    max-width:1400px;
    min-height:88px;
    height:88px;
    padding:6px 28px;
    gap:24px;
}

.site-header .brand{
    width:205px;
    height:76px;
    flex:0 0 205px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.site-header .brand img{
    width:100%;
    height:auto;
    max-height:72px;
    max-width:205px;
    object-fit:contain;
}

.site-header .nav-shell nav{
    gap:24px;
}

.site-header .nav-shell nav a{
    font-size:11px;
}

.site-header .nav-shell > .btn{
    flex:0 0 auto;
    padding:11px 19px;
    font-size:10px;
}

/* Compact language selector.
   It stays a small control instead of becoming a full-width bar. */
.site-header .language-switcher{
    width:max-content;
    max-width:max-content;
    display:flex;
    position:absolute;
    right:175px;
    top:50%;
    transform:translateY(-50%);
    margin:0;
    padding:3px;
    gap:2px;
    border-radius:8px;
    z-index:55;
}

.site-header .language-switcher a{
    min-width:30px;
    height:25px;
    font-size:8px;
    border-radius:5px;
}

/* =========================================================
   QAAF — SPIRITUAL JOURNEYS IMAGE SCALE
   Smaller, cleaner destination imagery.
   ========================================================= */

.split-panel .journey-panel-image{
    display:block;
    width:100%;
    height:175px;
    object-fit:cover;
    border-radius:14px;
}

.split-panel .trial-panel > div:first-child{
    margin-bottom:22px !important;
}

.split-panel .trial-panel > div:first-child > div{
    min-width:0;
}

.split-panel .trial-panel > div:first-child small{
    font-size:9px;
    letter-spacing:.5px;
}

.split-panel .contact-panel > .journey-panel-image{
    height:220px;
    margin-bottom:2px;
}

/* Keep Section 07 from becoming visually oversized */
.split-panel .trial-panel,
.split-panel .contact-panel{
    padding:38px;
}

.split-panel .trial-panel h2,
.split-panel .contact-panel h2{
    font-size:34px;
    line-height:1.12;
}

.split-panel .trial-panel p,
.split-panel .contact-panel p{
    font-size:11px;
    line-height:1.65;
}

/* Desktop: destination images remain compact */
@media(min-width:901px){
    .split-panel .trial-panel > div:first-child{
        grid-template-columns:1fr 1fr !important;
    }
}

/* Tablet / mobile */
@media(max-width:900px){
    .site-header{
        min-height:78px;
    }

    .site-header .nav-shell{
        min-height:78px;
        height:78px;
        padding:5px 20px;
    }

    .site-header .brand{
        width:175px;
        height:66px;
        flex-basis:175px;
    }

    .site-header .brand img{
        width:100%;
        height:auto;
        max-height:62px;
        max-width:175px;
    }

    .site-header .language-switcher{
        position:static;
        transform:none;
        margin-left:8px;
    }

    .split-panel .trial-panel,
    .split-panel .contact-panel{
        padding:28px;
    }

    .split-panel .trial-panel > div:first-child{
        grid-template-columns:1fr 1fr !important;
    }

    .split-panel .contact-panel > .journey-panel-image{
        height:190px;
    }
}

@media(max-width:560px){
    .site-header .brand{
        width:150px;
        height:58px;
        flex-basis:150px;
    }

    .site-header .brand img{
        width:100%;
        height:auto;
        max-height:54px;
        max-width:150px;
    }

    .split-panel .trial-panel > div:first-child{
        grid-template-columns:1fr !important;
    }

    .split-panel .journey-panel-image,
    .split-panel .contact-panel > .journey-panel-image{
        height:180px;
    }
}

/* =========================================================
   QAAF — FIX HEADER / LOGO OVERLAP
   ========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 110px !important;
}

.site-header .nav-shell {
    min-height: 110px !important;
    height: 110px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    box-sizing: border-box;
    align-items: center;
}

/* Logo */
.site-header .nav-shell .brand {
    width: 205px !important;
    height: 94px !important;
    flex: 0 0 205px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: visible !important;
}

.site-header .nav-shell .brand img {
    display: block !important;
    width: auto !important;
    height: 94px !important;
    max-width: none !important;
    max-height: 94px !important;
    object-fit: contain !important;
}

/* Keep the content below the header */
.hero,
.hero-section,
.home-hero,
main {
    position: relative;
    z-index: 1;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .site-header {
        min-height: 90px !important;
    }

    .site-header .nav-shell {
        min-height: 90px !important;
        height: 90px !important;
    }

    .site-header .nav-shell .brand {
        width: 175px !important;
        height: 76px !important;
        flex-basis: 175px !important;
    }

    .site-header .nav-shell .brand img {
        height: 76px !important;
        max-height: 76px !important;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 560px) {

    .site-header {
        min-height: 76px !important;
    }

    .site-header .nav-shell {
        min-height: 76px !important;
        height: 76px !important;
    }

    .site-header .nav-shell .brand {
        width: 150px !important;
        height: 64px !important;
        flex-basis: 150px !important;
    }

    .site-header .nav-shell .brand img {
        height: 64px !important;
        max-height: 64px !important;
    }
}

/* =========================================================
   QAAF — FINAL HEADER SPACING FIX
   Prevent the logo from crossing into the Hero section.
   ========================================================= */

.site-header {
    min-height: 125px !important;
    height: 125px !important;
    overflow: visible !important;
}

.site-header .nav-shell {
    min-height: 125px !important;
    height: 125px !important;
    box-sizing: border-box !important;
    align-items: center !important;
}

.site-header .nav-shell .brand {
    width: 205px !important;
    height: 100px !important;
    flex: 0 0 205px !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
}

.site-header .nav-shell .brand img {
    width: auto !important;
    height: 100px !important;
    max-width: none !important;
    max-height: 100px !important;
    display: block !important;
    object-fit: contain !important;
}

@media (max-width: 900px) {
    .site-header {
        min-height: 90px !important;
        height: 90px !important;
    }

    .site-header .nav-shell {
        min-height: 90px !important;
        height: 90px !important;
    }

    .site-header .nav-shell .brand {
        width: 175px !important;
        height: 76px !important;
        flex-basis: 175px !important;
    }

    .site-header .nav-shell .brand img {
        height: 76px !important;
        max-height: 76px !important;
    }
}

@media (max-width: 560px) {
    .site-header {
        min-height: 76px !important;
        height: 76px !important;
    }

    .site-header .nav-shell {
        min-height: 76px !important;
        height: 76px !important;
    }

    .site-header .nav-shell .brand {
        width: 150px !important;
        height: 64px !important;
        flex-basis: 150px !important;
    }

    .site-header .nav-shell .brand img {
        height: 64px !important;
        max-height: 64px !important;
    }
}


/* =========================================================
   ABOUT QAAF — THREE EQUAL VALUES
   ========================================================= */

.about-home .about-values{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    margin:28px 0 30px;
    width:100%;
}

.about-home .about-value{
    min-width:0;
    min-height:150px;
    padding:24px 14px 20px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fffdf8;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    box-sizing:border-box;
    box-shadow:0 8px 25px rgba(0,0,0,.035);
}

.about-home .about-value-icon{
    width:48px;
    height:48px;
    margin-bottom:14px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(198,160,82,.12);
    color:var(--gold);
    font:700 22px/1 Georgia,serif;
    flex:0 0 48px;
}

.about-home .about-value h2{
    margin:0 !important;
    color:var(--ink);
    font:600 19px/1.25 Georgia,serif;
    letter-spacing:-.2px;
}

@media(max-width:900px){
    .about-home .about-values{
        gap:12px;
        margin-top:24px;
    }

    .about-home .about-value{
        min-height:135px;
        padding:20px 10px 18px;
    }

    .about-home .about-value-icon{
        width:42px;
        height:42px;
        flex-basis:42px;
        font-size:19px;
        margin-bottom:11px;
    }

    .about-home .about-value h2{
        font-size:16px;
    }
}

@media(max-width:620px){
    .about-home .about-values{
        grid-template-columns:1fr;
        gap:12px;
    }

    .about-home .about-value{
        min-height:112px;
        flex-direction:row;
        justify-content:flex-start;
        text-align:left;
        padding:16px 18px;
    }

    .about-home .about-value-icon{
        margin:0 14px 0 0;
    }

    .about-home .about-value h2{
        font-size:18px;
    }
}


/* =========================================================
   ABOUT QAAF — THREE EQUAL VALUES
   ========================================================= */

.about-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 28px 0 30px;
}

.about-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 170px;
    padding: 24px 14px;
    text-align: center;
    background: #fffdf8;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-sizing: border-box;
}

.about-value-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 58px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: rgba(198,160,82,.12);
    font-size: 27px;
    line-height: 1;
}

.about-value h2 {
    margin: 0 !important;
    color: var(--ink) !important;
    font-family: Georgia, serif !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
    letter-spacing: -.2px;
}

@media (max-width: 1000px) {
    .about-values {
        gap: 14px;
    }

    .about-value {
        min-height: 155px;
        padding: 20px 10px;
    }

    .about-value-icon {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
        font-size: 24px;
    }

    .about-value h2 {
        font-size: 18px !important;
    }
}

@media (max-width: 700px) {
    .about-values {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .about-value {
        min-height: 125px;
        padding: 20px 15px;
    }

    .about-value h2 {
        font-size: 22px !important;
    }
}

/* =========================================================
   QAAF — FINAL ABOUT VALUES OVERRIDE
   All three titles are intentionally identical in size.
   ========================================================= */
.about-home .about-values .about-value h2,
.about-home .about-values .about-value h2 em {
    font-size: 24px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

.about-home .about-values .about-value h2 {
    color: var(--ink) !important;
}

@media (max-width: 1000px) {
    .about-home .about-values .about-value h2,
    .about-home .about-values .about-value h2 em {
        font-size: 19px !important;
    }
}

@media (max-width: 700px) {
    .about-home .about-values .about-value h2,
    .about-home .about-values .about-value h2 em {
        font-size: 22px !important;
    }
}



/* ==========================================================================
   PREMIUM VISUAL LAYER
   The original CSS above remains the base system.
   This layer provides the upgraded global visual direction.
   ========================================================================== */

/* ==========================================================================
   QAAF — PREMIUM GLOBAL UI OVERRIDE
   Purpose: Visual redesign only.
   Does NOT change Razor markup, names, bindings, images, routes or JS.
   Load this file AFTER /css/site.css
   ========================================================================== */

:root {
  --qaaf-ink: #18201c;
  --qaaf-ink-2: #26332d;
  --qaaf-cream: #f7f4ed;
  --qaaf-paper: #fcfbf8;
  --qaaf-sand: #e9e1d2;
  --qaaf-gold: #b69255;
  --qaaf-gold-soft: #d7bd8a;
  --qaaf-muted: #68716b;
  --qaaf-line: rgba(24, 32, 28, .10);
  --qaaf-radius: 24px;
  --qaaf-shadow: 0 22px 60px rgba(20, 25, 22, .10);
  --qaaf-shadow-hover: 0 30px 80px rgba(20, 25, 22, .16);
  --qaaf-max: 1240px;
}

/* ---------- Global ---------- */

html {
  scroll-behavior: smooth;
}

body {
  background: var(--qaaf-paper);
  color: var(--qaaf-ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--qaaf-gold);
  color: #fff;
}

.section,
.stats,
.cta-band,
.split-panel {
  position: relative;
}

.section {
  max-width: var(--qaaf-max);
  margin-inline: auto;
  padding: clamp(88px, 9vw, 140px) 28px;
}

.section-title {
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: 58px;
}

.section-title .eyebrow,
.eyebrow {
  color: var(--qaaf-gold);
  font-size: .70rem;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.section-title h2 {
  margin: 0;
  font-size: clamp(2.5rem, 5vw, 4.6rem);
  line-height: .98;
  letter-spacing: -.045em;
  font-weight: 650;
}

.section-title h2 em,
.about-tagline em,
h1 em,
h2 em,
h3 em {
  color: var(--qaaf-gold);
  font-style: normal;
}

.section-title p {
  max-width: 650px;
  margin: 22px auto 0;
  color: var(--qaaf-muted);
  font-size: 1rem;
  line-height: 1.8;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: min(860px, 92vh);
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #18201c;
}

.hero-image,
.hero-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-image img {
  object-fit: cover;
  object-position: center;
  transform: scale(1.015);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(13, 19, 16, .86) 0%,
      rgba(13, 19, 16, .63) 42%,
      rgba(13, 19, 16, .20) 78%,
      rgba(13, 19, 16, .08) 100%),
    linear-gradient(0deg, rgba(13, 19, 16, .45), transparent 45%);
}

.hero-overlay {
  display: none;
}

.hero-copy {
  width: min(var(--qaaf-max), 100%);
  margin-inline: auto;
  padding: 130px 28px 100px;
  color: #fff;
}

.hero-copy .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--qaaf-gold-soft);
  margin-bottom: 24px;
}

.hero-copy h1 {
  max-width: 850px;
  margin: 0;
  font-size: clamp(3.5rem, 7vw, 7.5rem);
  line-height: .91;
  letter-spacing: -.065em;
  font-weight: 600;
}

.hero-copy h1 em {
  color: #e3c891;
}

.hero-copy p {
  max-width: 650px;
  margin: 32px 0 0;
  color: rgba(255,255,255,.82);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.8;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

/* ---------- Buttons ---------- */

.btn {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    border-color .25s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn.gold {
  background: var(--qaaf-gold);
  color: #fff;
  box-shadow: 0 12px 28px rgba(182,146,85,.24);
}

.btn.gold:hover {
  background: #a78349;
  box-shadow: 0 16px 36px rgba(182,146,85,.34);
}

.btn.outline {
  border-color: rgba(255,255,255,.34);
  color: #fff;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
}

.btn.outline:hover {
  border-color: rgba(255,255,255,.65);
  background: rgba(255,255,255,.10);
}

.btn.dark {
  background: var(--qaaf-ink);
  color: #fff;
}

/* ---------- About ---------- */

.about-home {
  max-width: 1320px;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(50px, 7vw, 110px);
  align-items: center;
}

.about-image {
  overflow: hidden;
  border-radius: 2px;
  box-shadow: var(--qaaf-shadow);
  background: var(--qaaf-sand);
}

.about-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}

.about-image:hover img {
  transform: scale(1.035);
}

.about-tagline {
  display: grid;
  gap: 14px;
  margin: 0 0 34px;
}

.about-value {
  display: block;
  font-size: clamp(1.55rem, 2.4vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -.035em;
}

.about-value-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-right: 10px;
  border: 1px solid rgba(182,146,85,.35);
  border-radius: 50%;
  font-size: .9rem;
  vertical-align: 2px;
}

.about-home > div:last-child > p {
  max-width: 680px;
  color: var(--qaaf-muted);
  line-height: 1.9;
}

.about-home .btn {
  margin-top: 16px;
}

/* ---------- Service Sections ---------- */

.services-home {
  background: var(--qaaf-paper);
}

.services-home {
  max-width: none;
}

.services-home > .section-title,
.services-home > .service-grid {
  max-width: var(--qaaf-max);
  margin-inline: auto;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.service-card {
  position: relative;
  overflow: hidden;
  min-height: 100%;
  border: 1px solid var(--qaaf-line);
  border-radius: var(--qaaf-radius);
  background: rgba(255,255,255,.76);
  box-shadow: 0 8px 30px rgba(20,25,22,.045);
  transition:
    transform .35s cubic-bezier(.2,.7,.2,1),
    box-shadow .35s ease,
    border-color .35s ease;
}

.service-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--qaaf-shadow-hover);
  border-color: rgba(182,146,85,.32);
}

.service-card > img {
  display: block;
  width: 100%;
  height: 205px;
  object-fit: cover;
  background: var(--qaaf-sand);
}

.service-card > div {
  padding: 26px 25px 29px;
}

.service-card h3 {
  margin: 0;
  font-size: 1.18rem;
  line-height: 1.2;
  letter-spacing: -.025em;
}

.service-card p {
  margin: 12px 0 0;
  color: var(--qaaf-muted);
  font-size: .91rem;
  line-height: 1.7;
}

/* Give sections visual breathing room */
.services-home + .services-home {
  border-top: 1px solid rgba(24,32,28,.04);
}

/* ---------- Service section rhythm ---------- */

.services-home + .services-home {
  border-top: 1px solid rgba(24, 32, 28, .04);
}

/* ---------- Ijazah ---------- */

.services-home[aria-labelledby="programs-heading-04"] {
  background: var(--qaaf-ink);
  color: #fff;
}

.services-home[aria-labelledby="programs-heading-04"] .section-title p,
.services-home[aria-labelledby="programs-heading-04"] .service-card p {
  color: rgba(255,255,255,.66);
}

.services-home[aria-labelledby="programs-heading-04"] .service-card {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.10);
}

.services-home[aria-labelledby="programs-heading-04"] .service-card h3 {
  color: #fff;
}

.services-home[aria-labelledby="programs-heading-04"] .service-card:hover {
  background: rgba(255,255,255,.085);
  border-color: rgba(215,189,138,.35);
}

/* ---------- Spiritual Journeys ---------- */

.spiritual-journeys-home {
  max-width: none;
  background:
    radial-gradient(circle at 15% 10%, rgba(182,146,85,.11), transparent 28%),
    var(--qaaf-cream);
}

.spiritual-intro,
.spiritual-destination-grid {
  max-width: var(--qaaf-max);
  margin-inline: auto;
}

.spiritual-destination-grid {
  display: grid;
  gap: 34px;
}

.spiritual-destination-card {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  overflow: hidden;
  border: 1px solid var(--qaaf-line);
  border-radius: 30px;
  background: var(--qaaf-paper);
  box-shadow: var(--qaaf-shadow);
}

.spiritual-destination-card:nth-child(even) {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}

.spiritual-destination-card:nth-child(even) .spiritual-destination-image-wrap {
  order: 2;
}

.spiritual-destination-image-wrap {
  min-height: 620px;
  overflow: hidden;
}

.spiritual-destination-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}

.spiritual-destination-card:hover .spiritual-destination-image {
  transform: scale(1.035);
}

.spiritual-destination-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(36px, 5vw, 74px);
}

.spiritual-destination-content h3 {
  max-width: 640px;
  margin: 0;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: .98;
  letter-spacing: -.05em;
}

.spiritual-destination-content > p {
  color: var(--qaaf-muted);
  line-height: 1.8;
}

.spiritual-destination-highlights {
  display: grid;
  gap: 0;
  margin: 22px 0 8px;
  border-top: 1px solid var(--qaaf-line);
}

.spiritual-highlight {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--qaaf-line);
  color: var(--qaaf-muted);
  font-size: .88rem;
  line-height: 1.55;
}

.spiritual-highlight-icon {
  font-size: 1.05rem;
}

.spiritual-care {
  margin-top: 24px;
  padding: 19px 20px;
  border-left: 2px solid var(--qaaf-gold);
  background: rgba(182,146,85,.06);
  color: var(--qaaf-muted);
  line-height: 1.7;
}

.spiritual-care strong {
  display: block;
  margin-bottom: 5px;
  color: var(--qaaf-ink);
}

.spiritual-footer-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 25px;
  margin-top: 30px;
}

.spiritual-quote {
  color: var(--qaaf-gold);
  font-size: .92rem;
  line-height: 1.35;
  text-align: right;
  font-style: italic;
}

/* ---------- Learning Journey ---------- */

.learning-journey {
  max-width: none;
  background: var(--qaaf-paper);
}

.learning-journey > .section-title,
.learning-journey > .service-grid,
.learning-journey > .learning-journey-footer {
  max-width: var(--qaaf-max);
  margin-inline: auto;
}

.learning-journey > .section-title h3 {
  margin: 28px 0 0;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  letter-spacing: -.025em;
}

.learning-journey .service-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.video-card {
  background: #fff;
}

.video-preview {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  overflow: hidden;
  background: #111;
}

.video-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .55s ease, filter .55s ease;
}

.video-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 9px;
  color: #fff;
  background: linear-gradient(180deg, transparent 20%, rgba(0,0,0,.58));
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .18em;
}

.video-play {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-inline: auto;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 50%;
  background: rgba(255,255,255,.13);
  backdrop-filter: blur(8px);
  transition: transform .25s ease, background .25s ease;
}

.video-preview:hover img {
  transform: scale(1.06);
  filter: brightness(.82);
}

.video-preview:hover .video-play {
  transform: scale(1.08);
  background: rgba(182,146,85,.85);
}

.learning-journey-footer {
  margin-top: 70px;
  padding: 55px;
  border-radius: 28px;
  background: var(--qaaf-ink);
  color: #fff;
  text-align: center;
}

.learning-journey-footer h3 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 3rem);
  letter-spacing: -.04em;
}

.learning-journey-footer p {
  color: rgba(255,255,255,.62);
}

/* ---------- Stats ---------- */

.stats {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 72px max(28px, calc((100vw - var(--qaaf-max)) / 2));
  background: var(--qaaf-ink);
  color: #fff;
}

.stats > div {
  position: relative;
  padding: 10px 30px;
  text-align: center;
}

.stats > div + div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  width: 1px;
  height: 80%;
  background: rgba(255,255,255,.13);
}

.stats b {
  display: block;
  color: var(--qaaf-gold-soft);
  font-size: clamp(2.8rem, 5vw, 4.7rem);
  line-height: 1;
  letter-spacing: -.06em;
  font-weight: 600;
}

.stats span {
  display: block;
  margin-top: 12px;
  color: rgba(255,255,255,.58);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---------- Packages ---------- */

.packages-home {
  max-width: none;
  background: var(--qaaf-cream);
}

.packages-home > .section-title,
.package-grid {
  max-width: var(--qaaf-max);
  margin-inline: auto;
}

.package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 18px;
}

.price-card {
  position: relative;
  padding: 34px 28px;
  border: 1px solid var(--qaaf-line);
  border-radius: 25px;
  background: var(--qaaf-paper);
  box-shadow: 0 10px 35px rgba(20,25,22,.045);
  transition: transform .3s ease, box-shadow .3s ease;
}

.price-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--qaaf-shadow-hover);
}

.price-card.popular {
  background: var(--qaaf-ink);
  color: #fff;
  transform: translateY(-12px);
  box-shadow: 0 25px 70px rgba(20,25,22,.20);
}

.price-card.popular:hover {
  transform: translateY(-18px);
}

.popular-tag {
  position: absolute;
  top: 0;
  right: 24px;
  padding: 9px 13px;
  border-radius: 0 0 10px 10px;
  background: var(--qaaf-gold);
  color: #fff;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .14em;
}

.price-card h3 {
  margin: 0 0 7px;
  font-size: 1.25rem;
}

.price-card small {
  color: var(--qaaf-muted);
}

.price-card.popular small {
  color: rgba(255,255,255,.56);
}

.price {
  margin-top: 27px;
  font-size: clamp(2.5rem, 4vw, 3.6rem);
  font-weight: 650;
  letter-spacing: -.06em;
}

.price sup {
  margin-right: 4px;
  color: var(--qaaf-gold);
  font-size: .95rem;
}

.price-card > span {
  color: var(--qaaf-muted);
  font-size: .8rem;
}

.price-card.popular > span {
  color: rgba(255,255,255,.50);
}

.price-card ul {
  display: grid;
  gap: 12px;
  margin: 27px 0 0;
  padding: 22px 0 0;
  list-style: none;
  border-top: 1px solid var(--qaaf-line);
}

.price-card.popular ul {
  border-color: rgba(255,255,255,.12);
}

.price-card li {
  color: var(--qaaf-muted);
  font-size: .85rem;
}

.price-card.popular li {
  color: rgba(255,255,255,.70);
}

.price-card li::before {
  content: "✓";
  margin-right: 9px;
  color: var(--qaaf-gold);
  font-weight: 900;
}

/* ---------- Trial / Contact ---------- */

.split-panel {
  max-width: var(--qaaf-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  margin-block: 100px;
  border-radius: 30px;
  box-shadow: var(--qaaf-shadow);
}

.trial-panel,
.contact-panel {
  padding: clamp(42px, 6vw, 76px);
}

.trial-panel {
  background: var(--qaaf-gold);
  color: #fff;
}

.contact-panel {
  background: var(--qaaf-ink);
  color: #fff;
}

.trial-panel .eyebrow,
.contact-panel .eyebrow {
  color: rgba(255,255,255,.65);
}

.trial-panel h2,
.contact-panel h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: .98;
  letter-spacing: -.05em;
}

.trial-panel p,
.contact-panel p {
  max-width: 520px;
  color: rgba(255,255,255,.68);
  line-height: 1.8;
}

.trial-panel .btn.dark {
  background: var(--qaaf-ink);
}

/* ---------- Final CTA ---------- */

.cta-band {
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: clamp(65px, 8vw, 110px) max(28px, calc((100vw - var(--qaaf-max)) / 2));
  background:
    radial-gradient(circle at 85% 50%, rgba(215,189,138,.12), transparent 25%),
    #121916;
  color: #fff;
}

.cta-band h2 {
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 5rem);
  line-height: .95;
  letter-spacing: -.06em;
}

.cta-band p {
  margin: 17px 0 0;
  color: rgba(255,255,255,.55);
}

/* ---------- Accessibility / Focus ---------- */

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--qaaf-gold);
  outline-offset: 4px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .learning-journey .service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .spiritual-destination-card,
  .spiritual-destination-card:nth-child(even) {
    grid-template-columns: 1fr;
  }

  .spiritual-destination-card:nth-child(even) .spiritual-destination-image-wrap {
    order: 0;
  }

  .spiritual-destination-image-wrap {
    min-height: 480px;
  }
}

@media (max-width: 760px) {
  .section {
    padding: 78px 20px;
  }

  .hero {
    min-height: 760px;
  }

  .hero-copy {
    padding: 120px 20px 70px;
  }

  .hero-copy h1 {
    font-size: clamp(3.15rem, 16vw, 5rem);
  }

  .hero::after {
    background:
      linear-gradient(90deg, rgba(13,19,16,.80), rgba(13,19,16,.40)),
      linear-gradient(0deg, rgba(13,19,16,.72), transparent 65%);
  }

  .service-grid,
  .learning-journey .service-grid {
    grid-template-columns: 1fr;
  }

  .service-card > img {
    height: 230px;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
    padding: 55px 20px;
    row-gap: 35px;
  }

  .stats > div:nth-child(3)::before {
    display: none;
  }

  .stats > div:nth-child(3),
  .stats > div:nth-child(4) {
    border-top: 1px solid rgba(255,255,255,.13);
    padding-top: 35px;
  }

  .stats > div + div::before {
    top: 0;
    height: 100%;
  }

  .stats > div:nth-child(2)::before,
  .stats > div:nth-child(4)::before {
    display: none;
  }

  .spiritual-destination-image-wrap {
    min-height: 360px;
  }

  .spiritual-destination-content {
    padding: 34px 25px 38px;
  }

  .spiritual-footer-row,
  .cta-band {
    align-items: flex-start;
    flex-direction: column;
  }

  .spiritual-quote {
    text-align: left;
  }

  .price-card.popular {
    transform: none;
  }

  .price-card.popular:hover {
    transform: translateY(-5px);
  }

  .split-panel {
    grid-template-columns: 1fr;
    margin: 65px 20px;
    border-radius: 24px;
  }

  .cta-band {
    padding: 70px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}