/* Page wrapper uses your existing scales/vars */
.about-hero{
    position:relative; isolation:isolate; overflow:hidden;
    background:
        radial-gradient(1200px 400px at 10% -10%, rgba(37,99,235,.16), transparent 60%),
        radial-gradient(900px 500px at 90% 0%, rgba(0,195,137,.16), transparent 60%),
        linear-gradient(180deg, var(--bg-top,#0e253d), var(--bg-deep,#0a1a2b));
    color:#eaf2ff;
}
.about-hero__wrap{
    max-width:var(--wrap); margin:auto;
    padding: clamp(40px,6vw,72px) var(--pad-inline) clamp(28px,4vw,48px);
    display:grid; gap: clamp(20px,3vw,52px);
    grid-template-columns: 1.05fr .95fr; align-items:center;
}
.about-hero h1{
    margin:0 0 10px; font-weight:800; letter-spacing:-.02em;
    font-size: clamp(28px,5.2vw,48px);
}
.about-hero p{ margin:0; color:#cbd5e1; font-size: clamp(14px,1.8vw,18px) }
.crumbs{ display:flex; gap:8px; align-items:center; color:#9db4d6; font-weight:600; margin-bottom:10px; }
.crumbs a{ color:#cfe0ff; text-decoration:none }
.about-hero__media img{ width:100%; height:auto; display:block; border-radius:18px; border:1px solid rgba(255,255,255,.08); box-shadow:0 24px 70px rgba(0,0,0,.45) }
@media (max-width: 1024px){ .about-hero__wrap{ grid-template-columns:1fr } }

/* Stats bar */
.stats{ max-width:var(--wrap); margin: -10px auto 0; padding:0 var(--pad-inline) 10px }
.stats__row{
    display:grid; grid-template-columns: repeat(3,1fr); gap:12px;
}
.stat{
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px; padding:14px 16px; color:#eaf2ff;
    backdrop-filter: blur(6px);
}
.stat b{ display:block; font-size: clamp(18px,3.8vw,26px); line-height:1; margin-bottom:4px }
.stat span{ color:#bcd0ea; font-weight:600; font-size:14px }
@media (max-width: 680px){ .stats__row{ grid-template-columns:1fr; } }

/* Mission + image block (light) */
.about-block{ padding: clamp(48px,6vw,72px) var(--pad-inline); background:#f8fafc }
.about-grid{ max-width:var(--wrap); margin:auto; display:grid; gap: clamp(16px,3vw,38px); grid-template-columns: 1fr 1fr; align-items:center }
.about-grid h2{ margin:0 0 8px; font-size: clamp(22px,4vw,36px); font-weight:800; color:var(--ink,#0f172a) }
.about-grid p{ color:#334155; margin:0 0 12px }
.about-grid__media img{ width:100%; height:auto; border-radius:18px; border:1px solid #e6ecff; box-shadow:0 18px 40px rgba(2,6,23,.08) }
@media (max-width: 900px){ .about-grid{ grid-template-columns:1fr } }

/* Values — reuse your dark cards vibe */
.values{
    position:relative; isolation:isolate; overflow:hidden;
    background:
        radial-gradient(1000px 500px at 80% -10%, rgba(37,99,235,.22), transparent 60%),
        radial-gradient(900px 400px at 10% 0%, rgba(0,195,137,.18), transparent 60%),
        linear-gradient(180deg, var(--bg-top,#0e253d), var(--bg-deep,#0a1a2b));
    padding: clamp(56px,6vw,96px) 0;
    color:#eaf2ff;
}
.values__wrap{ max-width:1200px; margin:0 auto; padding:0 20px }
.values__head{ text-align:center; margin-bottom: clamp(18px,3vw,28px) }
.values__grid{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:14px }
.vcard{
    background: linear-gradient(180deg, rgba(255,255,255,.06), transparent);
    border:1px solid rgba(255,255,255,.12);
    border-radius:16px; padding:16px;
    transition: transform .2s var(--ease,.2s), box-shadow .2s var(--ease,.2s), border-color .2s;
}
.vcard:hover{ transform: translateY(-2px); border-color: rgba(0,195,137,.35); box-shadow: 0 18px 50px rgba(37,99,235,.22) }
.vcard__icon{
    width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
    background: radial-gradient(120% 120% at 20% 20%, rgba(0,195,137,.25), rgba(255,255,255,.06));
    color:#00c389; margin-bottom:10px
}
.vcard h3{ margin:2px 0 6px; font-size:18px; color:#fff }
.vcard p{ margin:0; color:#c7d7ea; font-size:15px; line-height:1.55 }
@media (max-width: 900px){ .values__grid{ grid-template-columns:1fr 1fr } }
@media (max-width: 600px){ .values__grid{ grid-template-columns:1fr } }

/* Timeline (light) */
.timeline{ background:#fff; padding: clamp(48px,6vw,80px) var(--pad-inline) }
.tl__wrap{ max-width:900px; margin:0 auto }
.tl__head{ text-align:center; margin-bottom: clamp(16px,3vw,28px) }
.tl{
    position:relative; list-style:none; margin:0; padding-left:0;
}
.tl::before{
    content:""; position:absolute; left:22px; top:0; bottom:0; width:2px; background:linear-gradient(#dbe4ff,#c7d2fe)
}
.tl__item{
    position:relative; display:grid; grid-template-columns: 80px 1fr; gap:14px; padding: 12px 0 12px 0;
}
.tl__dot{
    width:12px;height:12px;border-radius:999px;background:#2563eb; box-shadow:0 0 0 4px #e6ecff; position:absolute; left:16px; top:18px
}
.tl__year{ font-weight:800; color:#0f172a }
.tl__card{
    background:#fff; border:1px solid #e6ecff; border-radius:14px; padding:14px; box-shadow:0 10px 28px rgba(2,6,23,.06)
}
@media (max-width:600px){ .tl__item{ grid-template-columns: 64px 1fr } }

/* Team — reuse your existing .writer card */
.about-team{ padding: clamp(56px,6vw,96px) var(--pad-inline); background:#f8fafc }
.about-team .team-track{
    display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:16px;
}
@media (max-width: 1000px){ .about-team .team-track{ grid-template-columns: 1fr 1fr } }
@media (max-width: 640px){ .about-team .team-track{ grid-template-columns: 1fr } }

/* CTA — reuse your .cta styles from landing (already in global) */

/* === About Hero styles === */
.about-hero{
    position:relative; isolation:isolate; overflow:hidden;
    background:
        radial-gradient(1200px 500px at 6% -10%, rgba(37,99,235,.18), transparent 60%),
        radial-gradient(900px 500px at 98% 0%, rgba(0,195,137,.18), transparent 60%),
        linear-gradient(180deg, var(--bg-top,#0e253d), var(--bg-deep,#0a1a2b));
    color:#eaf2ff;
    /* subtle animated shimmer */
    --tx:0%;
    animation: hero-pan 22s linear infinite;
    background-position: var(--tx) 0, calc(100% - var(--tx)) 0, 0 0;
}
@keyframes hero-pan{
    0%   { --tx:0% }
    50%  { --tx:40% }
    100% { --tx:0% }
}
@media (prefers-reduced-motion:reduce){ .about-hero{ animation:none } }

.about-hero__inner{
    max-width:var(--wrap); margin:auto;
    padding: clamp(28px,5vw,44px) var(--pad-inline) clamp(18px,3.5vw,34px);
    display:grid; gap: clamp(20px,3vw,52px);
    grid-template-columns: 1.05fr .95fr; align-items:center;
}
.about-hero__title{
    margin: 6px 0 10px; font-weight:800; letter-spacing:-.02em;
    font-size: clamp(28px,5.4vw,56px); line-height:1.05;
    background: linear-gradient(90deg,#fff,#dbeafe 60%,#fff);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.about-hero__sub{
    margin:0; color:#cbd5e1; font-size: clamp(14px,1.8vw,18px); max-width: 62ch;
}
.crumbs{display:flex;gap:8px;align-items:center;color:#9db4d6;font-weight:700}
.crumbs a{color:#cfe0ff;text-decoration:none}
.crumbs__sep{opacity:.55}

/* media frame with soft float */
.about-hero__media{
    position:relative; display:block;
    border-radius:22px; padding:10px;
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    box-shadow: 0 24px 70px rgba(0,0,0,.45);
    overflow:hidden;
    animation: floatY 8s ease-in-out infinite;
    margin-top: 40px !important;
}
.about-hero__media img{
    width:100%; height:auto; display:block; border-radius:16px; background:#fff;
}
@keyframes floatY{
    0%,100%{ transform: translateY(0) }
    50%    { transform: translateY(-8px) }
}
@media (prefers-reduced-motion:reduce){ .about-hero__media{ animation:none } }

/* decorative orbs (non-interactive, clipped) */
.orb{position:absolute; border-radius:50%; filter:blur(18px); opacity:.55; pointer-events:none}
.orb--emerald{ width:220px; height:220px; right:-60px; top:-60px;
    background: radial-gradient(60% 60% at 50% 50%, rgba(0,195,137,.55), transparent 70%);
}
.orb--blue{ width:180px; height:180px; left:-50px; bottom:-50px;
    background: radial-gradient(60% 60% at 50% 50%, rgba(37,99,235,.55), transparent 70%);
}

/* stats */
.about-hero__stats{
    list-style:none; margin:0; padding: 0 var(--pad-inline) clamp(18px,3vw,28px);
    max-width:var(--wrap); display:grid; grid-template-columns: repeat(3,1fr); gap:12px;
}
.stat{
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px; padding:16px;
    color:#eaf2ff; backdrop-filter: blur(6px);
}
.stat b{display:block;font-size: clamp(18px,3.6vw,26px); line-height:1; margin-bottom:6px}
.stat span{color:#bcd0ea; font-weight:700; font-size:13.5px}

@media (max-width:1024px){ .about-hero__inner{ grid-template-columns:1fr } }
@media (max-width:680px){
    .about-hero__stats{ grid-template-columns:1fr }
    .about-hero__inner{ gap:18px; margin-top: 40px }
}

/* ===== About Hero ===== */
:root{
    --about-bg:
        radial-gradient(900px 520px at 85% 20%, rgba(37,99,235,.10), transparent 60%),
        radial-gradient(700px 420px at 10% 0%, rgba(59,130,246,.10), transparent 65%),
        linear-gradient(180deg,#f5f7ff 0%, #eef2ff 55%, #edf1ff 100%);
}

.about-hero{
    /*background: var(--about-bg);*/
    padding: clamp(28px, 5vw, 64px) 0;
}
.about-hero__inner{
    max-width: var(--wrap, 1400px);
    margin: 0 auto;
    padding: 0 var(--pad-inline, 24px);
    display: grid;
    grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
    gap: clamp(20px, 4vw, 56px);
    align-items: center;
}

/* Copy column */
.crumbs{
    display:flex; align-items:center; gap:8px;
    color:#64748b; font-weight:600; font-size:19px;
    margin-bottom: 10px;
}
.crumbs a{ color:#475569 }
.crumbs a:hover{ color:#2563eb }
.crumbs__sep{ opacity:.6 }

.about-hero__title{
    margin: 6px 0 10px;
    font-weight: 800;
    letter-spacing:-0.02em;
    font-size: clamp(28px, 5.5vw, 56px);
    line-height: 1.05;
    /*background: linear-gradient(90deg,#0f172a,#0b176b 60%,#0f172a);*/
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.about-hero__sub{
    color:#334155;
    font-size: clamp(14px, 2vw, 18px);
    line-height: 1.6;
    margin: 0;
    max-width: 60ch;
}

/* Stats */
.about-hero__stats{
    list-style:none; padding:0; margin:16px 0 0;
    display:grid; gap:12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.about-hero__stats .stat{
    background:#fff; border:1px solid #e6ecff;
    border-radius:16px; padding:14px 16px;
    box-shadow: 0 10px 22px rgba(2,6,23,.06);
    display:flex; flex-direction:column; gap:6px;
    align-items:flex-start;
}
.about-hero__stats .stat b{
    font-size: clamp(18px, 3.5vw, 26px);
    line-height:1; color:#0f172a;
}
.about-hero__stats .stat span{
    color:#64748b; font-weight:600; font-size:13px;
}

/* Media column */
.about-hero__media_REMOVE{
    position:relative; margin:0;
    display:grid; place-items:center;
    border-radius:22px; overflow:hidden;
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(8px);
    box-shadow:
        0 35px 60px rgba(2,6,23,.12),
        0 2px 0 rgba(255,255,255,.9) inset,
        0 0 0 1px rgba(226,232,240,.7) inset;
    padding: clamp(10px, 2vw, 16px);
}
.about-hero__media img{
    width: auto; height: 100%; display:block; object-fit:contain; border-radius:14px;
}

/* Decorative orbs (static) */
.about-hero .orb{
    position:absolute; border-radius:999px; filter: blur(10px); opacity:.28; pointer-events:none;
}
.orb--emerald{
    width:140px; height:140px; top:6%; left:6%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(16,185,129,.45));
}
.orb--blue{
    width:180px; height:180px; bottom:8%; right:8%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(37,99,235,.45));
}

/* Responsive */
@media (max-width: 1024px){
    .about-hero__inner{ grid-template-columns: 1fr; }
    .about-hero__media{ max-width: 720px; justify-self:center; }
}
@media (max-width: 640px){
    .about-hero__stats{
        grid-template-columns: 1fr; /* stack stats for clarity */
    }
    .about-hero__media{ box-shadow: 0 22px 40px rgba(2,6,23,.10); }
}
@media (min-width: 1280px){
    .about-hero__inner{ gap: 64px; }
    .about-hero__media{ transform: translateX(8px); }
}

/* ===== Mission ===== */
.mission{
    background:
        radial-gradient(1000px 600px at 85% 10%, rgba(37,99,235,.10), transparent 60%),
        radial-gradient(800px 480px at 8% -10%, rgba(99,102,241,.10), transparent 60%),
        linear-gradient(180deg,#f6f8ff 0%, #eef2ff 55%, #edf1ff 100%);
    padding: clamp(28px, 6vw, 72px) 0;
}
.mission__inner{
    max-width: var(--wrap, 1400px);
    margin: 0 auto;
    padding: 0 var(--pad-inline, 24px);
    display: grid;
    grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr);
    gap: clamp(20px, 4vw, 60px);
    align-items: center;
}

/* Media / image */
.mission__media{ position:relative; margin:0; }
.mission__frame{
    border-radius: 22px;
    overflow: hidden;
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(8px);
    box-shadow:
        0 35px 60px rgba(2,6,23,.12),
        0 2px 0 rgba(255,255,255,.9) inset,
        0 0 0 1px rgba(226,232,240,.7) inset;
}
.mission__frame img{ width:100%; height:auto; display:block; object-fit:cover; }

.mission__badge{
    position:absolute; left:18px; top:18px;
    background:#0f172a; color:#fff; font-weight:800;
    padding:8px 12px; border-radius:12px;
    letter-spacing:.02em; font-size:14px;
    box-shadow: 0 8px 20px rgba(2,6,23,.18);
}

/* soft color “orbs” */
.m-orb{ position:absolute; border-radius:999px; filter:blur(12px); opacity:.25; pointer-events:none; }
.m-orb--blue{ width:180px; height:180px; bottom:-20px; left:-20px;
    background: radial-gradient(circle at 30% 30%, #fff, #2563eb);
}
.m-orb--violet{ width:220px; height:220px; top:-30px; right:-30px;
    background: radial-gradient(circle at 30% 30%, #fff, #6366f1);
}

/* Copy */
.mission__copy{ max-width: 720px; }
.mission__title{
    margin:0 0 10px; font-weight:800; letter-spacing:-.02em;
    font-size: clamp(26px, 5.2vw, 44px); line-height:1.06;
    color:#0f172a;
}
.mission__lead{
    margin:0 0 10px; font-size: clamp(15px, 2.1vw, 18px); color:#1f2937; line-height:1.6;
}
.mission__text{
    margin:0 0 16px; color:#475569; line-height:1.65; font-size:15.5px;
}

/* Values list */
.mission__values{ list-style:none; padding:0; margin:16px 0 12px; display:grid; gap:10px; }
.mv{ display:flex; gap:10px; align-items:flex-start; background:#fff; border:1px solid #e6ecff;
    border-radius:14px; padding:12px 14px; box-shadow:0 10px 22px rgba(2,6,23,.06); }
.mv__icon{ font-size:18px; line-height:1; margin-top:2px }
.mv__body strong{ display:block; font-weight:800; color:#0f172a; }
.mv__body span{ color:#64748b; font-weight:600; font-size:13.5px }

/* Stats */
.mission__stats{
    display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
    gap:12px; margin-top:12px;
}
.ms{
    background:#fff; border:1px solid #e6ecff; border-radius:14px; padding:12px 14px;
    box-shadow:0 10px 22px rgba(2,6,23,.06); display:flex; flex-direction:column; gap:6px;
}
.ms b{ font-size: clamp(18px, 3.2vw, 26px); color:#0f172a; line-height:1 }
.ms span{ color:#64748b; font-weight:600; font-size:13px }

/* Responsive */
@media (max-width: 1024px){
    .mission__inner{ grid-template-columns: 1fr; }
    .mission__media{ order:2; }
    .mission__copy{ order:1; }
}
@media (max-width: 640px){
    .mission__values{ gap:8px }
    .mv{ padding:10px 12px }
    .mission__stats{ grid-template-columns: 1fr; }
}

/* ===== Values / Principles ===== */
.values{
    /* polished dark gradient to match your header/nav */
    background:
        radial-gradient(1200px 700px at 15% -10%, rgba(37,99,235,.22), transparent 60%),
        radial-gradient(1000px 600px at 90% 10%, rgba(99,102,241,.20), transparent 60%),
        linear-gradient(180deg,#0b1729 0%, #0b2237 55%, #0a1c31 100%);
    padding: clamp(36px, 6vw, 80px) 0;
    color: #e5edff;
}
.values__inner{
    max-width: var(--wrap, 1200px);
    margin: 0 auto;
    padding: 0 var(--pad-inline, 24px);
}
.values__head{ text-align:center; margin-bottom: clamp(16px, 3vw, 28px); }
.values__title{
    margin:0 0 6px; font-weight:800; letter-spacing:-.02em;
    font-size: clamp(24px, 4.2vw, 40px);
    color:#f8fbff;
}
.values__sub{
    margin:0; color:#b9c6e6; font-weight:600; font-size: clamp(13px, 1.6vw, 16px);
}

/* Auto-fit grid for perfect responsiveness */
.values__grid{
    list-style:none; padding:0; margin: clamp(18px, 3vw, 26px) 0 0;
    display:grid; gap:14px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Card */
.vcard{
    display:flex; gap:14px; align-items:flex-start;
    padding: 18px;
    border-radius: 18px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow:
        0 1px 0 rgba(255,255,255,.06) inset,
        0 18px 34px rgba(2,6,23,.26);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
@media (hover:hover){
    .vcard:hover{
        transform: translateY(-2px);
        box-shadow: 0 22px 40px rgba(2,6,23,.35);
        border-color: rgba(255,255,255,.18);
    }
}

/* Icon chip */
.vcard__icon{
    width:48px; height:48px; border-radius:14px; flex:0 0 48px;
    display:grid; place-items:center;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 45%),
        linear-gradient(135deg, #164e63, #0e7490);
    border:1px solid rgba(255,255,255,.12);
    box-shadow: 0 8px 16px rgba(2,6,23,.35), inset 0 1px 0 rgba(255,255,255,.12);
}
.ico{ font-size:20px; }

/* Text */
.vcard__body{ display:flex; flex-direction:column; gap:6px; }
.vcard__title{
    margin:0; font-weight:800; color:#f1f6ff; font-size:18px; letter-spacing:-.01em;
}
.vcard__text{
    margin:0; color:#c6d3ef; font-weight:600; line-height:1.55; font-size:14.5px;
}

/* Compact on phones */
@media (max-width: 560px){
    .vcard{ padding:14px; border-radius:16px; }
    .vcard__icon{ width:44px; height:44px; border-radius:12px; }
    .vcard__title{ font-size:17px; }
    .vcard__text{ font-size:14px; }
}


/* ===== JOURNEY — alternating w/ center rail ===== */
.journey-alt{
    --wrap: min(94vw, 1200px);
    --padX: clamp(16px, 4vw, 40px);
    --railW: 4px;
    --railColor1:#cfe0ff; --railColor2:#7ca2ff;

    background:
        radial-gradient(1100px 600px at 85% -10%, rgba(37,99,235,.10), transparent 60%),
        radial-gradient(900px 520px at 10% -20%, rgba(99,102,241,.10), transparent 60%),
        linear-gradient(180deg,#f7f9ff 0%, #eef2ff 55%, #edf1ff 100%);
    padding: clamp(36px,6vw,84px) 0;
    color:#0f172a;
}
.journey-alt__wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--padX); }
.journey-alt__head{ text-align:center; margin-bottom: clamp(20px,3.5vw,30px);}
.journey-alt__head h2{ margin:0 0 6px; font-weight:800; letter-spacing:-.02em; font-size: clamp(26px,4.6vw,40px); }
.journey-alt__head p{ margin:0; color:#667085; font-weight:600; }

/* Timeline list container */
.jal{
    list-style:none; margin:0; padding: clamp(8px,1.5vw,14px) 0 0; position:relative;
    display:grid; gap: clamp(16px,2vw,22px);
}
/* Center rail */
.jal::before{
    content:""; position:absolute; top:0; bottom:0; left:50%; width:var(--railW);
    transform:translateX(-50%); border-radius:6px;
    background: linear-gradient(180deg,var(--railColor1) 0%, #a7bfff 50%, var(--railColor2) 100%);
    opacity:.75;
}

/* A row = year chip near rail + card on one side */
.jal__row{
    display:grid; align-items:center; position:relative;
    grid-template-columns: 1fr 1fr; /* left | right halves */
    min-height: clamp(84px, 12vw, 120px);
}

/* Year chip positioned ON the rail (center) */
.jal__year{
    position:absolute; left:50%; transform:translate(-50%, 0);
    display:inline-grid; place-items:center;
    padding:8px 14px; min-width:66px; border-radius:999px; background:#fff;
    font-weight:800; letter-spacing:.04em; font-size: clamp(12px,2vw,14px);
    color:#0f172a; z-index:2;
    border:2px solid #dbe6ff; box-shadow:0 10px 22px rgba(2,6,23,.08), 0 1px 0 rgba(255,255,255,.8) inset;
}
.jal__year::after{
    /* node behind chip (little ring) */
    content:""; position:absolute; inset:auto 0 -12px; margin:auto;
    width:12px; height:12px; border-radius:50%;
    background:#fff; border:3px solid #3b82f6; box-shadow: 0 0 0 6px rgba(59,130,246,.18);
}

/* Cards */
.jal__card{
    background:#fff; border:1px solid #e6ecff; border-radius:16px;
    padding: clamp(14px,1.8vw,18px) clamp(16px,2.2vw,22px);
    box-shadow:0 18px 36px rgba(2,6,23,.08);
}
.jal__card h3{ margin:0 0 6px; font-weight:800; font-size: clamp(16px,2.2vw,18px); }
.jal__card p{ margin:0; color:#475569; font-weight:600; line-height:1.55; }

/* Place the card on the left half or right half */
.jal__row--left  .jal__card{ grid-column: 1 / 2; margin-right: clamp(10px,1.5vw,20px); }
.jal__row--right .jal__card{ grid-column: 2 / 3; margin-left:  clamp(10px,1.5vw,20px); }

/* ===== Mobile polish for Journey ===== */
@media (max-width: 820px){
    /* Rail hugs the left; give the list some left padding */
    .jal{ padding-left: clamp(22px, 6vw, 32px); }

    .jal::before{
        left: clamp(18px, 5.5vw, 26px);   /* rail x */
        transform: none;
        width: 3px;
        opacity: .9;
    }

    /* Each row reserves space for the rail + year chip */
    .jal__row{
        grid-template-columns: 1fr;       /* single column */
        min-height: unset;
        padding-left: clamp(24px, 8vw, 40px);
    }

    /* Year chip: smaller, tighter, never intrudes */
    .jal__year{
        left: clamp(18px, 5.5vw, 26px);   /* align to rail */
        transform: none;
        padding: 4px 10px;
        min-width: auto;
        font-size: 12px;
        border-radius: 999px;
        z-index: 1;                       /* under the card area */
    }
    .jal__year::after{
        width: 10px; height: 10px;
        bottom: -9px;                     /* little ring below chip */
        box-shadow: 0 0 0 5px rgba(59,130,246,.16);
    }

    /* Cards: pull away from rail/chip */
    .jal__row--left  .jal__card,
    .jal__row--right .jal__card{
        grid-column: 1 / -1;
        margin: 0 0 0 clamp(10px, 2.6vw, 14px);  /* left gap from rail */
        padding: 14px 14px;
        border-radius: 14px;
        box-shadow: 0 10px 22px rgba(2,6,23,.08);
    }

    /* Type scale inside the card */
    .jal__card h3{ font-size: 17px; line-height: 1.25; }
    .jal__card p { font-size: 15px; line-height: 1.55; }
}

/* Ultra-small phones: if space is really tight, make the chip even slimmer */
@media (max-width: 380px){
    .jal{ padding-left: 26px; }
    .jal::before, .jal__year{ left: 20px; }
    .jal__year{ padding: 3px 8px; font-size: 11px; }
    .jal__row--left .jal__card, .jal__row--right .jal__card{ margin-left: 12px; }
}

/* Keep the last items visible above your bottom nav */
@media (max-width: 640px){
    .journey-alt{ padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
}


/* Mobile: place the year chip inside the card and clear space for it */
@media (max-width: 640px){

    /* Keep rail left and give the list some room */
    .jal{
        padding-left: 28px;
    }
    .jal::before{
        left: 22px;                 /* rail x */
        width: 3px;
        opacity: .9;
        transform: none;
    }

    /* Single column rows */
    .jal__row{
        grid-template-columns: 1fr;
        position: relative;
        padding-left: 0;            /* we’ll position the chip over the card */
    }

    /* Cards get extra top padding to make space for the year pill */
    .jal__row--left  .jal__card,
    .jal__row--right .jal__card{
        grid-column: 1 / -1;
        margin-left: 14px;          /* a little air from rail */
        padding: 42px 16px 16px;    /* <-- key: top padding for the chip */
        border-radius: 14px;
        box-shadow: 0 12px 22px rgba(2,6,23,.08);
    }

    /* Move the existing year pill into the card area */
    .jal__year{
        position: absolute;
        left: 26px;                 /* aligns with card’s left */
        top: 8px;                   /* inside the card */
        transform: none;
        z-index: 2;
        padding: 4px 10px;
        font-size: 12px;
        border-radius: 999px;
        background: #fff;
        box-shadow: 0 8px 18px rgba(2,6,23,.08),
        0 0 0 1px rgba(99,102,241,.18) inset;
    }

    /* Smaller ring; sits just under the pill */
    .jal__year::after{
        width: 10px; height: 10px;
        bottom: -9px;               /* subtle dot below */
        box-shadow: 0 0 0 5px rgba(59,130,246,.16);
    }

    /* Slightly smaller type inside cards to prevent wrap */
    .jal__card h3{ font-size: 18px; line-height: 1.25; }
    .jal__card p { font-size: 15px; line-height: 1.55; }

    /* Keep the last items above the bottom nav */
    .journey-alt{ padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
}

/* Ultra-tight screens: shave a few pixels more */
@media (max-width: 380px){
    .jal__year{ left: 20px; top: 6px; padding: 3px 8px; font-size: 11px; }
    .jal__row--left .jal__card, .jal__row--right .jal__card{ margin-left: 12px; padding-top: 38px; }
}


.stats{
    display:grid; gap:16px;
    grid-template-columns: repeat(3, minmax(0,1fr));
}
.stat-card{
    background:#fff; border-radius:16px; padding:12px;
    box-shadow:0 10px 30px rgba(2,6,23,.08);
    display:grid; align-content:center; justify-items:start; gap:6px;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s;
    border:1px solid rgba(37,99,235,.08);
    min-height:120px;
    min-width: 170px;
}
.stat-card:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 40px rgba(2,6,23,.12);
    border-color: rgba(37,99,235,.20);
}
.stat-ico{
    width:35px; height:35px; border-radius:12px;
    display:grid; place-items:center;
    background:linear-gradient(135deg,#e8f1ff,#eef4ff);
    box-shadow: inset 0 -6px 12px rgba(37,99,235,.08);
}
.stat-num{
    font-weight:800; font-size: clamp(22px, 3.2vw, 32px); color:#0f172a;
}
.stat-label{ color:#667085; font-weight:600; }
@media (max-width: 820px){ .stats{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .stats{ grid-template-columns:1fr; } }


.principles{
    position:relative;
    background: radial-gradient(900px 500px at 70% 0, rgba(37,99,235,.10), transparent 60%),
    #071a2d;
    color:#eaf2ff;
}
.principles::before{
    /* soft watermark */
    content:""; position:absolute; inset:auto 5% -80px auto; width:340px; height:220px; opacity:.08;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="640" height="420"><text x="0" y="200" font-family="Inter" font-size="160" fill="white">EE</text></svg>') no-repeat center / contain;
    pointer-events:none;
}
.principles-grid{
    display:grid; gap:18px;
    grid-template-columns: repeat(4, minmax(0,1fr));
    align-items:stretch;
}
@media (max-width: 1060px){ .principles-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 640px){ .principles-grid{ grid-template-columns:1fr; } }

.p-card{
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px; padding:20px; min-height:160px;
    display:grid; align-content:start; gap:10px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.p-ico{
    width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
    background:linear-gradient(135deg,#1e40af,#2563eb);
    box-shadow: inset 0 -8px 12px rgba(0,0,0,.15);
    transform: translateZ(0);
    transition: transform .18s ease, box-shadow .18s ease;
}
.p-card:hover{ transform: translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.25); border-color: rgba(255,255,255,.15); }
.p-card:hover .p-ico{ transform: scale(1.05); box-shadow: 0 0 0 6px rgba(37,99,235,.25), inset 0 -8px 12px rgba(0,0,0,.15); }


.final-cta{ padding-top: 32px; }
.cta-band{
    background:linear-gradient(180deg,#ffffff, #f7faff);
    border:1px solid rgba(37,99,235,.10);
    border-radius:22px; box-shadow:0 20px 40px rgba(2,6,23,.10);
    padding:22px clamp(16px, 4vw, 28px);
    display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.cta-title{ margin:0 0 4px; font-size: clamp(22px, 3vw, 28px); font-weight:800; color:#0b142b; }
.cta-sub{ margin:0; color:#667085; font-weight:600; }
.cta-actions{ display:flex; gap:10px; flex-wrap:wrap; }