/* Purpose page: a calm, editorial landing page for the reason behind Write Urdu. */
body.why-page {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: #153326;
    background:
        radial-gradient(circle at 8% 16%, rgba(201, 236, 216, .72), transparent 27rem),
        radial-gradient(circle at 93% 42%, rgba(238, 246, 205, .58), transparent 24rem),
        #fbfdfb;
}
body.why-page > .container-fluid {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}
body.why-page > .container-fluid > nav.navbar { min-height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; }
body.why-page > .container-fluid > .col-md-11,
body.why-page > .container-fluid > .col-md-12 { display: none; }
body.why-page .why-main {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
    padding: clamp(42px, 7vw, 88px) 0 88px;
}
body.why-page .why-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr);
    gap: clamp(32px, 7vw, 92px);
    align-items: center;
    min-height: 460px;
}
body.why-page .why-eyebrow {
    margin: 0 0 13px;
    color: #167448;
    font: 800 .88rem/1.5 Inter, "Segoe UI", Arial, sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
}
body.why-page .why-hero h1 {
    max-width: 10ch;
    margin: 0 0 20px!important;
    color: #10271c!important;
    font-size: clamp(3.15rem, 7vw, 6.2rem)!important;
    font-weight: 800!important;
    line-height: .98!important;
    letter-spacing: -.075em!important;
}
body.why-page .why-lede {
    max-width: 57ch;
    margin: 0;
    color: #466252;
    font-size: clamp(1.02rem, 1.8vw, 1.22rem);
    line-height: 1.75;
}
body.why-page .why-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
body.why-page .why-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 45px;
    padding: 11px 17px;
    border: 1px solid #167448;
    border-radius: 10px;
    color: #fff!important;
    background: #167448;
    font: 750 .9rem/1 Inter, "Segoe UI", Arial, sans-serif;
    text-decoration: none!important;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
body.why-page .why-button:hover { transform: translateY(-2px); background: #0f5c38; box-shadow: 0 10px 24px rgba(22,116,72,.18); }
body.why-page .why-button-light { border-color: #c8ddd0; color: #25543b!important; background: rgba(255,255,255,.7); }
body.why-page .why-button-light:hover { border-color: #167448; background: #fff; }
body.why-page .why-hero-card {
    position: relative;
    min-height: 370px;
    padding: clamp(25px, 4vw, 42px);
    overflow: hidden;
    border: 1px solid rgba(22,116,72,.18);
    border-radius: 28px;
    background: linear-gradient(155deg, #edf9f1 0%, #fff 68%);
    box-shadow: 0 24px 55px rgba(20, 67, 43, .1);
}
body.why-page .why-hero-card:before,
body.why-page .why-hero-card:after { position: absolute; border-radius: 50%; content: ""; pointer-events: none; }
body.why-page .why-hero-card:before { width: 220px; height: 220px; top: -100px; right: -65px; background: rgba(216,243,106,.34); }
body.why-page .why-hero-card:after { width: 155px; height: 155px; bottom: -70px; left: -46px; background: rgba(22,116,72,.12); }
body.why-page .why-hero-script {
    position: relative;
    z-index: 1;
    margin-top: 38px;
    color: #0c3a25;
    font: 400 clamp(1.7rem, 3vw, 2.55rem)/2.1 "Noto Nastaliq Urdu", "Noto Naskh Arabic", serif;
    text-align: right;
}
body.why-page .why-hero-note { position: relative; z-index: 1; max-width: 29ch; margin: 34px 0 0; color: #53705f; font-size: .92rem; line-height: 1.7; }
body.why-page .why-hero-mark {
    position: absolute;
    right: 30px;
    bottom: 16px;
    color: rgba(22,116,72,.2);
    font: 700 6.8rem/1 "Noto Nastaliq Urdu", serif;
}
body.why-page .why-section,
body.why-page .why-paths { padding-top: clamp(85px, 11vw, 145px); }
body.why-page .why-section-heading,
body.why-page .why-path-heading { max-width: 690px; }
body.why-page .why-section h2,
body.why-page .why-paths h2 {
    margin: 0 0 13px!important;
    color: #10271c;
    font-size: clamp(2rem, 4vw, 3.35rem);
    font-weight: 790;
    letter-spacing: -.055em;
    line-height: 1.04;
}
body.why-page .why-section-heading > p:last-child,
body.why-page .why-path-heading > p:last-child { margin: 0; color: #567060; font-size: 1rem; line-height: 1.75; }
body.why-page .why-value-grid,
body.why-page .why-path-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 33px; }
body.why-page .why-value-card {
    min-height: 220px;
    padding: 25px;
    border: 1px solid #d8e8dd;
    border-radius: 17px;
    background: rgba(255,255,255,.75);
    box-shadow: 0 11px 26px rgba(18, 58, 38, .045);
}
body.why-page .why-card-number { display: block; margin-bottom: 38px; color: #83a08d; font: 800 .73rem/1 Inter, "Segoe UI", Arial, sans-serif; letter-spacing: .12em; }
body.why-page .why-value-card h3,
body.why-page .why-path-card h3 { margin: 0 0 9px; color: #173a28; font-size: 1.17rem; font-weight: 760; letter-spacing: -.025em; line-height: 1.25; }
body.why-page .why-value-card p,
body.why-page .why-path-card p { margin: 0; color: #587060; font-size: .9rem; line-height: 1.68; }
body.why-page .why-paths { padding-bottom: clamp(85px, 11vw, 145px); }
body.why-page .why-path-card { display: flex; min-height: 280px; flex-direction: column; padding: 26px; border: 1px solid #d8e8dd; border-radius: 17px; background: #fff; color: inherit; text-decoration: none!important; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
body.why-page .why-path-card:hover { transform: translateY(-4px); border-color: #99c7aa; box-shadow: 0 16px 32px rgba(18,58,38,.1); }
body.why-page .why-path-icon { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: 30px; border-radius: 12px; color: #fff; background: #167448; font: 750 1.1rem/1 Inter, "Segoe UI", Arial, sans-serif; }
body.why-page .why-path-card:nth-child(2) .why-path-icon { background: #245a40; }
body.why-page .why-path-card:nth-child(3) .why-path-icon { color: #143722; background: #d8f36a; font-family: "Noto Nastaliq Urdu", serif; }
body.why-page .why-path-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 22px; color: #167448; font: 750 .82rem/1.3 Inter, "Segoe UI", Arial, sans-serif; }
body.why-page .why-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: clamp(28px, 5vw, 49px); border-radius: 22px; background: #0e3020; box-shadow: 0 18px 42px rgba(10,45,29,.16); }
body.why-page .why-cta .why-eyebrow { color: #b5dca4; }
body.why-page .why-cta h2 { max-width: 14ch; margin: 0 0 10px; color: #fff; font-size: clamp(1.8rem, 3.5vw, 2.75rem); line-height: 1.08; letter-spacing: -.045em; }
body.why-page .why-cta p:last-child { max-width: 55ch; margin: 0; color: #c3dfcc; font-size: .94rem; line-height: 1.7; }
body.why-page .why-button-cream { flex: none; border-color: #d8f36a; color: #17311e!important; background: #d8f36a; }
body.why-page .why-button-cream:hover { border-color: #e4fb89; background: #e4fb89; }
html[dir="rtl"] body.why-page .why-hero h1 { letter-spacing: 0; }
html[dir="rtl"] body.why-page .why-actions { flex-direction: row-reverse; justify-content: flex-end; }
html[dir="rtl"] body.why-page .why-card-number { text-align: right; }

@media (max-width: 820px) {
    body.why-page .why-main { width: min(100% - 28px, 640px); padding-top: 38px; }
    body.why-page .why-hero { grid-template-columns: 1fr; gap: 34px; min-height: 0; }
    body.why-page .why-hero h1 { max-width: 11ch; font-size: clamp(3rem, 14vw, 5rem)!important; }
    body.why-page .why-hero-card { min-height: 300px; }
    body.why-page .why-value-grid,
    body.why-page .why-path-grid { grid-template-columns: 1fr; }
    body.why-page .why-value-card { min-height: 0; }
    body.why-page .why-card-number { margin-bottom: 25px; }
    body.why-page .why-path-card { min-height: 220px; }
    body.why-page .why-cta { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 520px) {
    body.why-page .why-main { width: min(100% - 22px, 640px); padding-bottom: 58px; }
    body.why-page .why-hero h1 { font-size: clamp(2.7rem, 15vw, 4.3rem)!important; }
    body.why-page .why-actions { display: grid; grid-template-columns: 1fr; }
    body.why-page .why-button { width: 100%; box-sizing: border-box; }
    body.why-page .why-section,
    body.why-page .why-paths { padding-top: 82px; }
    body.why-page .why-hero-card { padding: 23px; border-radius: 21px; }
    body.why-page .why-hero-script { margin-top: 25px; font-size: 1.65rem; }
}