/* =====================================================================
   about.css - About page styles
   Scoped to the .dksa About page section.
   ===================================================================== */

.dksa {
    --dksa-navy: #0a2a4f;
    --dksa-navy-2: #12397a;
    --dksa-gold: #f5b83d;
    --dksa-text: #4b5a70;
    --dksa-soft: #f4f7fb;
    --dksa-ease: cubic-bezier(.22, .8, .24, 1);
    color: var(--dksa-text);
    font-family: Inter, "Segoe UI", Tahoma, sans-serif;
    line-height: 1.7;
}
.dksa *, .dksa *::before, .dksa *::after { box-sizing: border-box; }
.dksa h1, .dksa h2, .dksa h3, .dksa p, .dksa ul, .dksa figure { margin: 0; padding: 0; }
.dksa ul { list-style: none; }
.dksa-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

.dksa-hero {
    position: relative;
    overflow: hidden;
    padding: 76px 0 82px;
    color: #fff;
    background: linear-gradient(135deg, var(--dksa-navy) 0%, var(--dksa-navy-2) 100%);
}
.dksa-hero::before, .dksa-hero::after {
    position: absolute;
    border-radius: 50%;
    content: "";
    pointer-events: none;
}
.dksa-hero::before {
    top: -150px;
    right: -110px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(245,184,61,.3), transparent 70%);
}
.dksa-hero::after {
    bottom: -170px;
    left: -120px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%);
}
.dksa-crumb { position: relative; margin-bottom: 14px; color: #b9c9e4; font-size: 14px; }
.dksa-crumb a { color: #fff; text-decoration: none; }
.dksa-crumb a:hover { text-decoration: underline; }
.dksa-hero h1 {
    position: relative;
    font-size: clamp(34px, 5vw, 52px);
    font-weight: 800;
    letter-spacing: -.8px;
    line-height: 1.15;
}
.dksa-hero h1::after {
    display: block;
    width: 70px;
    height: 4px;
    margin-top: 18px;
    border-radius: 4px;
    background: var(--dksa-gold);
    content: "";
}

.dksa-eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--dksa-navy-2);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.dksa-h2 {
    color: var(--dksa-navy);
    font-size: clamp(26px, 3.4vw, 36px);
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1.2;
}
.dksa-h2::after {
    display: block;
    width: 56px;
    height: 4px;
    margin-top: 14px;
    border-radius: 4px;
    background: var(--dksa-gold);
    content: "";
}

.dksa-intro { padding: 72px 0 40px; }
.dksa-intro .dksa-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}
.dksa-intro p { margin-top: 22px; font-size: 17px; }
.dksa-facts { display: grid; gap: 14px; }
.dksa-fact {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 18px 20px;
    border: 1px solid #e6ecf4;
    border-radius: 20px;
    background: var(--dksa-soft);
    transition: transform .4s var(--dksa-ease), box-shadow .4s var(--dksa-ease);
}
.dksa-fact:hover { transform: translateX(6px); box-shadow: 0 14px 30px rgba(10,42,79,.1); }
.dksa-fact b { flex: none; min-width: 78px; color: var(--dksa-navy); font-size: 26px; font-weight: 800; }
.dksa-fact span { font-size: 15px; font-weight: 600; }

.dksa-duo { padding: 30px 0 72px; }
.dksa-duo .dksa-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.dksa-card {
    position: relative;
    overflow: hidden;
    padding: 34px 32px 36px;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 26px;
    box-shadow: 0 8px 24px rgba(10,42,79,.07);
    transition: transform .45s var(--dksa-ease), box-shadow .45s var(--dksa-ease);
}
.dksa-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(10,42,79,.14); }
.dksa-card.aim { background: linear-gradient(135deg, #dcfbe9, #cffaf6); }
.dksa-card.classes { background: linear-gradient(135deg, #ffe2e4, #ffedd2); }
.dksa-card .no {
    position: absolute;
    top: 10px;
    right: 24px;
    color: transparent;
    font-size: 70px;
    font-weight: 800;
    line-height: 1;
    -webkit-text-stroke: 1.5px rgba(10,42,79,.14);
}
.dksa-card h3 { position: relative; color: var(--dksa-navy); font-size: 22px; font-weight: 800; letter-spacing: 1px; }
.dksa-card h3::after {
    display: block;
    width: 50px;
    height: 3px;
    margin: 12px 0 16px;
    border-radius: 3px;
    background: var(--dksa-navy);
    content: "";
}
.dksa-card p { position: relative; font-size: 16px; }

/* ---------- Admission (step path with icons) ---------- */
.dksa-adm { padding: 88px 0; background: var(--dksa-soft); }
.dksa-adm .dksa-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 64px; align-items: start; }
.dksa-adm-head { position: sticky; top: 90px; }
.dksa-keys { margin-top: 32px; display: grid; gap: 18px; }
.dksa-key { display: flex; align-items: center; gap: 16px; }
.dksa-key b {
   flex: none; width: 84px; height: 84px;
   display: grid; place-items: center; text-align: center;
   border-radius: 50%; background: #fff; border: 2px solid var(--dksa-gold);
   font-size: 19px; font-weight: 800; line-height: 1.15; color: var(--dksa-navy);
   box-shadow: 0 10px 22px rgba(120,90,20,.14);
}
.dksa-key span { font-size: 14.5px; line-height: 1.5; }

.dksa-path { position: relative; list-style: none; margin: 0; padding: 0; counter-reset: step; }
.dksa-path::before {
   content: ""; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 2px;
   background: linear-gradient(to bottom, var(--dksa-gold), #ffc2c9 55%, #b8e8d4);
}
.dksa-step { position: relative; padding: 0 0 46px 88px; counter-increment: step; }
.dksa-step:last-child { padding-bottom: 0; }

.dksa-step .ico {
   position: absolute; left: 0; top: 0; z-index: 1;
   width: 56px; height: 56px; display: grid; place-items: center;
   border-radius: 50%; background: #fff; border: 2px solid var(--dksa-gold); color: var(--dksa-navy);
   box-shadow: 0 0 0 8px var(--dksa-soft);
   transition: background .4s var(--dksa-ease), color .4s var(--dksa-ease), transform .4s var(--dksa-ease);
}
.dksa-step .ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dksa-step:hover .ico { background: var(--dksa-navy); color: var(--dksa-gold); transform: scale(1.1); }

.dksa-step::after {
   content: counter(step, decimal-leading-zero);
   position: absolute; right: 0; top: -18px;
   font-size: 96px; font-weight: 800; line-height: 1;
   color: transparent; -webkit-text-stroke: 1.5px rgba(10,42,79,.1);
   pointer-events: none;
}
.dksa-step h3 { position: relative; z-index: 1; margin: 2px 0 8px; font-size: 20px; font-weight: 800; color: var(--dksa-navy); }
.dksa-step p  { position: relative; z-index: 1; margin: 0; max-width: 58ch; font-size: 16px; line-height: 1.75; }

.dksa-founder {
    position: relative;
    overflow: hidden;
    padding: 84px 0;
    color: #58606b;
    background: linear-gradient(180deg, #fbf6ea 0%, #fffdf8 100%);
}
.dksa-founder::before {
    position: absolute;
    top: -120px;
    right: -120px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245,184,61,.2), transparent 70%);
    content: "";
    pointer-events: none;
}
.dksa-founder .dksa-wrap {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}
.dksa-photo { position: relative; }
.dksa-photo::before {
    position: absolute;
    inset: 18px -18px -18px 18px;
    border: 2px solid #f5b83d;
    border-radius: 28px;
    content: "";
}
.dksa-pbox {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: 28px;
    background: linear-gradient(160deg, #f6e7bf, #e9c777);
    box-shadow: 0 26px 50px rgba(120,90,20,.22);
}
.dksa-pbox span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(10,42,79,.25);
    font-size: 72px;
    font-weight: 800;
    letter-spacing: 2px;
}
.dksa-pbox img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dksa-photo figcaption {
    position: absolute;
    right: 14px;
    bottom: 14px;
    left: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    border-left: 4px solid #f5b83d;
    background: rgba(255,255,255,.92);
    box-shadow: 0 10px 24px rgba(10,42,79,.14);
    color: #6b6f78;
    font-size: 13px;
    line-height: 1.45;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.dksa-photo figcaption b {
    display: block;
    color: #0a2a4f;
    font-size: 16px;
}
.dksa-founder .dksa-eyebrow { color: #9a6b00; }
.dksa-founder .dksa-h2 {
    color: #0a2a4f;
}
.dksa-founder p { margin-top: 22px; color: #58606b; font-size: 16.5px; }
.dksa-time { display: grid; gap: 0; margin-top: 30px; border-left: 2px solid #eadfc2; }
.dksa-time li { position: relative; padding: 0 0 18px 26px; color: #58606b; font-size: 15px; }
.dksa-time li:last-child { padding-bottom: 0; }
.dksa-time li::before {
    position: absolute;
    top: 6px;
    left: -7px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #f5b83d;
    box-shadow: 0 0 0 4px rgba(245,184,61,.28);
    content: "";
}
.dksa-time b { margin-right: 6px; color: #0a2a4f; }

@media (max-width: 960px) {
    .dksa-intro .dksa-wrap, .dksa-duo .dksa-wrap { grid-template-columns: 1fr; }
    .dksa-adm .dksa-wrap { grid-template-columns: 1fr; gap: 40px; }
    .dksa-adm-head { position: static; }
    .dksa-founder .dksa-wrap { grid-template-columns: 1fr; gap: 48px; }
    .dksa-photo { width: calc(100% - 18px); max-width: 360px; margin: 0 auto; }
}
@media (max-width: 560px) {
    .dksa-hero { padding: 54px 0 60px; }
    .dksa-intro { padding: 48px 0 24px; }
    .dksa-duo { padding-bottom: 48px; }
    .dksa-adm { padding: 54px 0; }
    .dksa-founder { padding: 54px 0; }
    .dksa-path::before { left: 21px; }
    .dksa-step { padding-left: 68px; }
    .dksa-step .ico { width: 44px; height: 44px; }
    .dksa-step .ico svg { width: 20px; height: 20px; }
    .dksa-step::after { font-size: 64px; top: -10px; }
    .dksa-card { padding: 28px 22px 30px; }
    .dksa-fact b { min-width: 66px; font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .dksa-fact, .dksa-card { transition: none; }
    .dksa-fact:hover, .dksa-card:hover { transform: none; }
    .dksa-step .ico { transition: none; }
    .dksa-step:hover .ico { transform: none; }
}