/* ============================================================
 *  enhancements.css
 *  Layered ON TOP of the existing style.css to:
 *    - add subtle, professional scroll-fade animations
 *    - improve responsiveness on mobile / tablet / large screens
 *    - power the redesigned milestone timeline (about.html)
 *    - power the careers drawer + no-results + popup fixes
 *  Existing rules in style.css are left untouched.
 * ============================================================ */

/* ============================================================
 * 1. SUBTLE PROFESSIONAL ANIMATIONS
 *    - default reveal (fade + lift)
 *    - staggered children inside grids
 *    - reduced-motion safe
 * ============================================================ */
.anim-pending {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
}
.anim-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Stagger children inside common grids */
.ak_pillars_grid.anim-in   > *,
.akSol_grid.anim-in        > *,
.ak_portal_grid.anim-in    > *,
.ak-careers-job-grid.anim-in > *,
.ak-metrics-board.anim-in  > *,
.ak-stats-grid.anim-in     > * {
    animation: epReveal .8s cubic-bezier(.22,.61,.36,1) both;
}
.ak_pillars_grid.anim-in   > *:nth-child(1),
.akSol_grid.anim-in        > *:nth-child(1),
.ak_portal_grid.anim-in    > *:nth-child(1),
.ak-careers-job-grid.anim-in > *:nth-child(1),
.ak-metrics-board.anim-in  > *:nth-child(1),
.ak-stats-grid.anim-in     > *:nth-child(1) { animation-delay: .05s; }
.ak_pillars_grid.anim-in   > *:nth-child(2),
.akSol_grid.anim-in        > *:nth-child(2),
.ak_portal_grid.anim-in    > *:nth-child(2),
.ak-careers-job-grid.anim-in > *:nth-child(2),
.ak-metrics-board.anim-in  > *:nth-child(2),
.ak-stats-grid.anim-in     > *:nth-child(2) { animation-delay: .15s; }
.ak_pillars_grid.anim-in   > *:nth-child(3),
.akSol_grid.anim-in        > *:nth-child(3),
.ak_portal_grid.anim-in    > *:nth-child(3),
.ak-careers-job-grid.anim-in > *:nth-child(3),
.ak-metrics-board.anim-in  > *:nth-child(3),
.ak-stats-grid.anim-in     > *:nth-child(3) { animation-delay: .25s; }
.ak_pillars_grid.anim-in   > *:nth-child(4),
.akSol_grid.anim-in        > *:nth-child(4),
.ak_portal_grid.anim-in    > *:nth-child(4),
.ak-metrics-board.anim-in  > *:nth-child(4),
.ak-stats-grid.anim-in     > *:nth-child(4) { animation-delay: .35s; }
.akSol_grid.anim-in        > *:nth-child(5),
.ak_portal_grid.anim-in    > *:nth-child(5) { animation-delay: .45s; }

@keyframes epReveal {
    from { opacity: 0; transform: translateY(20px) scale(.985); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* respect users that prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .anim-pending, .anim-in,
    .ak_pillars_grid.anim-in > *, .akSol_grid.anim-in > *,
    .ak_portal_grid.anim-in > *, .ak-careers-job-grid.anim-in > *,
    .ak-metrics-board.anim-in > *, .ak-stats-grid.anim-in > *,
    .ep-tl-card, .ep-tl-progress {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
    html { scroll-behavior: auto; }
}

html { scroll-behavior: smooth; }


/* ============================================================
 * 2. HEADER POLISH
 * ============================================================ */
header nav a {
    position: relative;
    color: #1d252d;
    font-size: 15px;
    font-weight: 600;
    padding: 6px 2px;
    transition: color .25s ease;
}
header nav a::after {
    content: "";
    position: absolute;
    left: 0; bottom: -4px;
    width: 0; height: 2px;
    background: #ff375e;
    transition: width .3s ease;
}
header nav a:hover { color: #4f008c; }
header nav a:hover::after { width: 100%; }

#burger { transition: transform .25s ease, color .25s ease; }
#burger:hover { transform: scale(1.08); color: #4f008c; }


/* ============================================================
 * 3. HERO CAROUSEL RESPONSIVENESS
 * ============================================================ */
@media (max-width: 1024px) {
    .hero-carousel { height: auto !important; }
    .hero-slide    { grid-template-columns: 1fr !important; height: auto !important; }
    .hero-left     { padding: 50px 30px !important; }
    .hero-right img { width: 100%; height: auto; max-height: 320px; object-fit: cover; }
    .hero-title    { font-size: 32px !important; line-height: 38px !important; }
}
@media (max-width: 480px) {
    .hero-title    { font-size: 24px !important; line-height: 30px !important; }
    .hero-sub      { font-size: 14px !important; line-height: 20px !important; }
    .hero-left     { padding: 36px 22px !important; }
}


/* ============================================================
 * 4. FOOTER POLISH
 * ============================================================ */
.ak_minimal_footer .ak_min_nav { flex-wrap: wrap; gap: 18px 28px; }
.ak_minimal_footer .ak_min_link { transition: color .25s ease; }
.ak_minimal_footer .ak_min_link:hover { color: #ff375e; }
@media (max-width: 600px) {
    .ak_minimal_footer .ak_min_nav  { justify-content: center; text-align: center; }
    .ak_minimal_footer .ak_min_copy { flex-direction: column; gap: 6px; text-align: center; }
}


/* ============================================================
 * 5. CARD HOVER LIFT
 * ============================================================ */
.ak_pillar_card_v5,
.akSol_card,
.ak-careers-job-card,
.ak_new_card,
.ak_portal_card,
.ak_contact_card {
    transition: transform .35s cubic-bezier(.22,.61,.36,1),
                box-shadow .35s cubic-bezier(.22,.61,.36,1),
                border-color .35s ease;
}
.ak_pillar_card_v5:hover,
.akSol_card:hover,
.ak-careers-job-card:hover,
.ak_new_card:hover,
.ak_portal_card:hover,
.ak_contact_card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(79,0,140,.10);
}


/* ============================================================
 * 6. IMAGE PERFORMANCE HELPERS
 * ============================================================ */
img { max-width: 100%; height: auto; }
img[loading="lazy"] { background: #f3f3f3; }


/* ============================================================
 * 7. RESPONSIVE GRID TIGHTENING
 * ============================================================ */
@media (max-width: 1024px) {
    .ak_pillars_grid     { grid-template-columns: 1fr 1fr !important; }
    .akSol_grid          { grid-template-columns: 1fr 1fr !important; }
    .ak_portal_grid      { grid-template-columns: 1fr 1fr !important; }
    .ak-metrics-board    { grid-template-columns: 1fr 1fr !important; }
    .ak-stats-grid       { grid-template-columns: 1fr !important; }
    .akPillar_layout     { grid-template-columns: 1fr !important; }
}
@media (max-width: 700px) {
    .ak_pillars_grid     { grid-template-columns: 1fr !important; }
    .akSol_grid          { grid-template-columns: 1fr !important; }
    .ak_portal_grid      { grid-template-columns: 1fr !important; }
    .ak-metrics-board    { grid-template-columns: 1fr !important; }
    .ak_v4_layout        { grid-template-columns: 1fr !important; }
}

/* large screens */
@media (min-width: 1500px) {
    .ak_v4_container,
    .ak_container_v5,
    .akSol_container,
    .ak_min_wrapper,
    .ak_portal_section,
    .akPillar_container,
    .ak-careers-content-container { max-width: 1400px; margin-inline: auto; }
}


/* ============================================================
 * 8. MOBILE MENU ITEMS
 * ============================================================ */
.mobile-menu a { color: #1d252d; transition: color .2s ease, padding-left .2s ease; }
.mobile-menu a:hover { color: #4f008c; padding-left: 4px; }
.mobile-menu.active { right: 0; }


/* ============================================================
 * 9. DRAWER BODIES SCROLL
 * ============================================================ */
.ak_v4_drawer_body,
.ak_v5_drawer_body { max-height: 100%; overflow-y: auto; }


/* ============================================================
 * 10. ABOUT — HORIZONTAL MILESTONE TIMELINE  (clean rebuild)
 *
 *   Layout strategy:
 *     .ep-tl-rail-wrap : position: relative ; FIXED HEIGHT
 *         .ep-tl-line  : absolute, vertical center, full width
 *         .ep-tl-rail  : the horizontal scroller (flex row)
 *             .ep-tl-item : fixed width, fixed height
 *                 .ep-tl-card  (positioned absolutely above OR below center)
 *                 .ep-tl-stem  (vertical connector between card and dot)
 *                 .ep-tl-dot   (sits on the central line)
 *
 *   This way every dot lines up perfectly on the central line and the
 *   cards alternate cleanly above / below.
 * ============================================================ */

.ep-timeline-section {
    background: linear-gradient(180deg, #ffffff 0%, #f8f5ff 100%);
    padding: 50px 4vw 60px;
    overflow: hidden;
}
.ep-tl-container { max-width: 1400px; margin: 0 auto; }

.ep-tl-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 18px;
}
.ep-tl-head h2 {
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: 800;
    color: #1d252d;
    margin: 0 0 6px 0;
    letter-spacing: -.02em;
}
.ep-tl-head p {
    color: #6b7280;
    font-size: 15px;
    max-width: 560px;
    margin: 0;
}

/* arrow controls */
.ep-tl-controls { display: flex; gap: 10px; flex-shrink: 0; }
.ep-tl-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #e5d8f0;
    background: #fff;
    color: #4f008c;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .25s ease, color .25s ease, transform .2s ease, opacity .2s ease;
}
.ep-tl-btn:hover:not(:disabled)  { background: #4f008c; color: #fff; transform: scale(1.06); }
.ep-tl-btn:active                { transform: scale(.97); }
.ep-tl-btn:disabled              { cursor: default; }

/* === rail (fixed height) ============================================== */
.ep-tl-rail-wrap {
    position: relative;
    height: 420px;
}

/* central horizontal line — runs the full width behind the dots */
.ep-tl-line {
    position: absolute;
    top: 50%;
    left: 50px;
    right: 50px;
    height: 3px;
    background: #ece3f7;
    border-radius: 3px;
    transform: translateY(-50%);
    z-index: 1;
    overflow: hidden;
}
/* animated progress (anchored to the right end = 1983) */
.ep-tl-progress {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #ff375e 0%, #4f008c 100%);
    border-radius: 3px;
    transition: width 1.6s cubic-bezier(.22,.61,.36,1);
}
.ep-timeline-section.is-active .ep-tl-progress { width: 100%; }

/* the actual horizontal scroller */
.ep-tl-rail {
    position: relative;
    height: 100%;
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 0 30px;
    z-index: 2;
}
.ep-tl-rail::-webkit-scrollbar { display: none; }

/* edge fades */
.ep-tl-rail-wrap::before,
.ep-tl-rail-wrap::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 50px;
    pointer-events: none;
    z-index: 5;
}
.ep-tl-rail-wrap::before { left: 0;  background: linear-gradient(90deg, #f8f5ff, transparent); }
.ep-tl-rail-wrap::after  { right: 0; background: linear-gradient(270deg, #f8f5ff, transparent); }

/* === each milestone item =========================================== *
 *
 * Geometry (desktop, rail height = 420px, central line at 210px):
 *   ┌─────────────────────────┐  top = 24
 *   │ Upper card (height 130) │  bottom edge = 154
 *   └─────────────────────────┘
 *              │  stem 154 → 200  (gap 10 to dot)
 *              ●  dot at 210 (line)
 *              │  stem 220 → 266  (gap 10 from dot)
 *   ┌─────────────────────────┐  top edge = 266
 *   │ Lower card (height 130) │  bottom = 24
 *   └─────────────────────────┘
 * The stem now NEVER overlaps the card and always sits cleanly
 * between the card edge and the dot.
 * =================================================================== */
.ep-tl-item {
    position: relative;
    flex: 0 0 220px;
    height: 100%;
}

/* card — absolutely positioned above or below the central line */
.ep-tl-card {
    width: 100%;
    position: absolute;
    left: 12px;
    right: 12px;
    height: 140px;
    background: #fff;
    border: 1px solid #efe3fb;
    border-radius: 12px;
    padding: 16px 16px;
    text-align: center;
    box-shadow: 0 6px 18px rgba(79,0,140,.06);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    opacity: 0;
    transform: translateY(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ep-tl-item:nth-child(odd)  .ep-tl-card { top: 24px; }      /* above the line */
.ep-tl-item:nth-child(even) .ep-tl-card { bottom: 24px; }   /* below the line */

.ep-timeline-section.is-active .ep-tl-card {
    animation: epTlReveal .6s cubic-bezier(.22,.61,.36,1) forwards;
}
.ep-tl-item:nth-child(1)  .ep-tl-card { animation-delay: .20s; }
.ep-tl-item:nth-child(2)  .ep-tl-card { animation-delay: .30s; }
.ep-tl-item:nth-child(3)  .ep-tl-card { animation-delay: .40s; }
.ep-tl-item:nth-child(4)  .ep-tl-card { animation-delay: .50s; }
.ep-tl-item:nth-child(5)  .ep-tl-card { animation-delay: .60s; }
.ep-tl-item:nth-child(6)  .ep-tl-card { animation-delay: .70s; }
.ep-tl-item:nth-child(7)  .ep-tl-card { animation-delay: .80s; }
.ep-tl-item:nth-child(8)  .ep-tl-card { animation-delay: .90s; }
.ep-tl-item:nth-child(9)  .ep-tl-card { animation-delay: 1.00s; }
.ep-tl-item:nth-child(10) .ep-tl-card { animation-delay: 1.10s; }
.ep-tl-item:nth-child(11) .ep-tl-card { animation-delay: 1.20s; }
@keyframes epTlReveal { to { opacity: 1; transform: translateY(0); } }

.ep-tl-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(79,0,140,.12);
    border-color: #d8c4ee;
}

/* dot — sits exactly on the central line, stays above stems */
.ep-tl-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #4f008c;
    z-index: 4;
    transition: background .3s ease, box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}

/* stem connecting the dot to the card — never overlaps the card */
.ep-tl-stem {
    position: absolute;
    left: 50%;
    width: 2px;
    background: #d8c4ee;
    transform: translateX(-50%);
    z-index: 2;
}
/* Upper card (top:24, height:130 → bottom edge 154); stem 154 → 200 */
.ep-tl-item:nth-child(odd)  .ep-tl-stem {
    top: 154px;
    height: calc(50% - 154px - 5px); /* stops 5 px before dot */
}
/* Lower card (bottom:24, height:130 → top edge 420-24-130=266); stem 220 → 266 */
.ep-tl-item:nth-child(even) .ep-tl-stem {
    top: calc(50% + 5px);            /* starts 5 px after dot */
    height: calc(50% - 154px - 5px);
}

/* card text */
.ep-tl-year {
    display: block;
    color: #4f008c;
    font-weight: 800;
    font-size: 18px;
    margin-bottom: 4px;
    letter-spacing: -.01em;
}
.ep-tl-text {
    color: #4a4a4a;
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
    /* keep cards roughly the same visual height */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ACTIVE (2025) — glow + scale */
.ep-tl-item.is-active .ep-tl-dot {
    background: #ff375e;
    border-color: #ff375e;
    box-shadow: 0 0 0 6px rgba(255,55,94,.18), 0 0 22px rgba(255,55,94,.45);
    transform: translate(-50%, -50%) scale(1.30);
    animation: epTlPulse 2.4s ease-in-out infinite;
}
.ep-tl-item.is-active .ep-tl-card {
    background: linear-gradient(135deg, #4f008c 0%, #6e1bb3 100%);
    border-color: transparent;
    box-shadow: 0 18px 40px rgba(79,0,140,.30);
}
.ep-tl-item.is-active .ep-tl-year { color: #ffd6a5; }
.ep-tl-item.is-active .ep-tl-text { color: rgba(255,255,255,.92); }
.ep-tl-item.is-active .ep-tl-stem { background: #ff375e; }

@keyframes epTlPulse {
    0%, 100% { box-shadow: 0 0 0 6px rgba(255,55,94,.18), 0 0 22px rgba(255,55,94,.45); }
    50%      { box-shadow: 0 0 0 12px rgba(255,55,94,.05), 0 0 28px rgba(255,55,94,.55); }
}

/* tablet — rail 380px, card 120px tall; recalc stems */
@media (max-width: 1024px) {
    .ep-tl-rail-wrap { height: 380px; }
    .ep-tl-item      { flex: 0 0 200px; }
    .ep-tl-card      { padding: 12px 14px; height: 120px; }
    .ep-tl-year      { font-size: 17px; }
    .ep-tl-text      { font-size: 12.5px; }

    /* Upper card top:20, height:120 → bottom edge 140; line at 190 */
    .ep-tl-item:nth-child(odd)  .ep-tl-card { top: 20px; }
    .ep-tl-item:nth-child(even) .ep-tl-card { bottom: 20px; }
    .ep-tl-item:nth-child(odd)  .ep-tl-stem {
        top: 140px;
        height: calc(50% - 140px - 5px);
    }
    .ep-tl-item:nth-child(even) .ep-tl-stem {
        top: calc(50% + 5px);
        height: calc(50% - 140px - 5px);
    }
}

/* mobile — vertical stack (allowed by spec) */
@media (max-width: 700px) {
    .ep-timeline-section { padding: 40px 5vw 50px; }
    .ep-tl-controls      { display: none; }
    .ep-tl-rail-wrap     { height: auto; }
    .ep-tl-rail-wrap::before, .ep-tl-rail-wrap::after { display: none; }

    .ep-tl-line {
        top: 0; bottom: 0;
        left: 22px; right: auto;
        width: 3px; height: auto;
        transform: none;
    }
    .ep-tl-progress {
        top: 0; right: auto; left: 0;
        width: 100% !important;
        height: 0;
        background: linear-gradient(180deg, #ff375e 0%, #4f008c 100%);
        transition: height 1.4s cubic-bezier(.22,.61,.36,1);
    }
    .ep-timeline-section.is-active .ep-tl-progress { height: 100%; }

    .ep-tl-rail {
        flex-direction: column;
        align-items: stretch;
        overflow: visible;
        padding: 0;
    }
    .ep-tl-item {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        padding: 16px 0 16px 50px;
    }
    .ep-tl-card {
        position: static !important;
        text-align: left;
        margin: 0;
    }
    .ep-tl-stem { display: none; }
    .ep-tl-dot {
        left: 22px;
        top: 32px;
        transform: translate(-50%, 0);
    }
    .ep-tl-item.is-active .ep-tl-dot { transform: translate(-50%, 0) scale(1.30); }
    .ep-tl-text { -webkit-line-clamp: unset; overflow: visible; }
}


/* ============================================================
 * 11-14.  CAREERS PAGE STYLES — moved to css/careers.css
 *         The careers page now uses an inline expand + inline form
 *         flow with NO popups / NO drawers.
 *         Any leftover popup / drawer / modal markup from older
 *         versions is force-hidden here as a safety net so the
 *         original style.css rules cannot leak through.
 * ============================================================ */
.ak-careers-form-overlay,
.ak-careers-form-modal,
.ak-job-drawer,
.ak-job-drawer-overlay,
.ak-careers-expanded-pane { display: none !important; }