/* =====================================================
   ABOUT PAGE
   Path: static/css/pages/about.css

   Dedicated public About page design.
===================================================== */

.about-page {
    --about-primary: #0f766e;
    --about-primary-dark: #0b5f59;
    --about-secondary: #14b8a6;
    --about-navy: #0f172a;
    --about-muted: #64748b;
    --about-soft: #ecfdf5;
    --about-soft-2: #f0fdfa;
    --about-white: #ffffff;
    --about-border: rgba(15, 118, 110, 0.12);
    --about-shadow: rgba(15, 23, 42, 0.09);

    color: var(--about-navy);
    background: #f8fafc;
}

/* =====================================================
   SHARED SECTION ELEMENTS
===================================================== */

.about-page-section-kicker {
    display: inline-flex;
    align-items: center;

    margin-bottom: 10px;

    color: var(--about-primary);

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.about-page-section-heading {
    max-width: 760px;

    margin: 0 auto 42px;

    text-align: center;
}

.about-page-section-heading h2 {
    margin: 0 0 12px;

    color: var(--about-navy);

    font-size: clamp(31px, 3vw, 44px);
    font-weight: 900;

    line-height: 1.15;
    letter-spacing: -0.035em;
}

.about-page-section-heading p {
    margin: 0;

    color: var(--about-muted);

    font-size: 16px;
    line-height: 1.7;
}

/* =====================================================
   HERO
===================================================== */

.about-page-hero {
    position: relative;

    padding: 86px 0 82px;

    overflow: hidden;

    color: var(--about-white);

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(255, 255, 255, 0.10),
            transparent 29%
        ),
        linear-gradient(
            135deg,
            #0a5f59 0%,
            #0f766e 48%,
            #087f75 100%
        );
}

.about-page-hero .container {
    position: relative;
    z-index: 3;
}

.about-page-hero-content {
    max-width: 830px;
}

.about-page-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    min-height: 38px;

    margin-bottom: 20px;
    padding: 0 16px;

    border:
        1px solid rgba(255, 255, 255, 0.18);

    border-radius: 999px;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);

    font-size: 13px;
    font-weight: 850;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.about-page-hero h1 {
    max-width: 780px;

    margin: 0 0 20px;

    color: #ffffff;

    font-size: clamp(42px, 5vw, 66px);
    font-weight: 950;

    line-height: 1.06;
    letter-spacing: -0.045em;
}

.about-page-hero p {
    max-width: 760px;

    margin: 0;

    color: rgba(255, 255, 255, 0.86);

    font-size: 18px;
    line-height: 1.75;
}

.about-page-hero-points {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 30px;
}

.about-page-hero-points span {
    min-height: 42px;

    display: inline-flex;
    align-items: center;

    gap: 9px;

    padding: 0 14px;

    border:
        1px solid rgba(255, 255, 255, 0.16);

    border-radius: 13px;

    color: rgba(255, 255, 255, 0.94);
    background: rgba(3, 40, 42, 0.16);

    font-size: 13px;
    font-weight: 750;
}

.about-page-hero-points i {
    color: #99f6e4;
}

.about-page-hero-shape {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.about-page-hero-shape-one {
    top: -150px;
    right: -100px;

    width: 430px;
    height: 430px;

    background: rgba(255, 255, 255, 0.08);
}

.about-page-hero-shape-two {
    bottom: -190px;
    left: 44%;

    width: 330px;
    height: 330px;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    background: rgba(255, 255, 255, 0.025);
}

/* =====================================================
   INTRODUCTION
===================================================== */

.about-page-intro {
    padding: 82px 0;
    background: #ffffff;
}

.about-page-intro-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.94fr)
        minmax(0, 1.06fr);

    align-items: center;

    gap: clamp(42px, 6vw, 86px);
}

.about-page-intro-media {
    position: relative;
}

.about-page-image-frame {
    aspect-ratio: 4 / 3;

    overflow: hidden;

    border-radius: 30px;

    background: var(--about-soft);

    box-shadow:
        0 25px 60px rgba(15, 23, 42, 0.13);
}

.about-page-image-frame img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition:
        transform 700ms cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}

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

.about-page-image-note {
    position: absolute;

    right: -26px;
    bottom: -30px;

    max-width: 310px;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 17px;

    border:
        1px solid rgba(15, 118, 110, 0.12);

    border-radius: 18px;

    background: rgba(255, 255, 255, 0.96);

    box-shadow:
        0 18px 42px rgba(15, 23, 42, 0.12);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.about-page-image-note > i {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    color: var(--about-primary);
    background: var(--about-soft);

    font-size: 18px;
}

.about-page-image-note strong,
.about-page-image-note span {
    display: block;
}

.about-page-image-note strong {
    margin-bottom: 3px;

    color: var(--about-navy);

    font-size: 13px;
    font-weight: 900;
}

.about-page-image-note span {
    color: var(--about-muted);

    font-size: 11px;
    line-height: 1.45;
}

.about-page-intro-content h2 {
    max-width: 690px;

    margin: 0 0 20px;

    color: var(--about-navy);

    font-size: clamp(32px, 3.5vw, 48px);
    font-weight: 900;

    line-height: 1.15;
    letter-spacing: -0.035em;
}

.about-page-intro-content > p {
    margin: 0 0 17px;

    color: var(--about-muted);

    font-size: 16px;
    line-height: 1.8;
}

.about-page-intro-highlights {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px 18px;

    margin-top: 27px;
}

.about-page-intro-highlights > div {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    color: #334155;

    font-size: 13px;
    font-weight: 750;

    line-height: 1.5;
}

.about-page-intro-highlights i {
    margin-top: 3px;

    color: var(--about-secondary);
}

/* =====================================================
   VISION AND MISSION
===================================================== */

.about-page-purpose {
    padding: 76px 0;

    background:
        linear-gradient(
            180deg,
            #eafbf6 0%,
            #f2fdf9 100%
        );
}

.about-page-purpose-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 24px;
}

.about-page-purpose-card {
    position: relative;

    min-height: 330px;

    padding: 38px;

    overflow: hidden;

    border-radius: 28px;

    box-shadow:
        0 18px 42px rgba(15, 23, 42, 0.10);

    transition:
        transform 280ms ease,
        box-shadow 280ms ease;
}

.about-page-purpose-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 26px 52px rgba(15, 23, 42, 0.14);
}

.about-page-purpose-vision {
    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #0f766e,
            #0a5f59
        );
}

.about-page-purpose-mission {
    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #13243f,
            #0f172a
        );
}

.about-page-purpose-card::after {
    content: "";

    position: absolute;

    right: -90px;
    bottom: -105px;

    width: 240px;
    height: 240px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.06);
}

.about-page-purpose-icon {
    width: 62px;
    height: 62px;

    display: grid;
    place-items: center;

    margin-bottom: 28px;

    border:
        1px solid rgba(255, 255, 255, 0.16);

    border-radius: 19px;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);

    font-size: 25px;
}

.about-page-purpose-card > span {
    display: block;

    margin-bottom: 9px;

    color: #99f6e4;

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.about-page-purpose-card h3 {
    max-width: 560px;

    margin: 0 0 15px;

    color: #ffffff;

    font-size: clamp(25px, 2.4vw, 34px);
    font-weight: 900;

    line-height: 1.2;
}

.about-page-purpose-card p {
    max-width: 610px;

    margin: 0;

    color: rgba(255, 255, 255, 0.78);

    font-size: 15px;
    line-height: 1.75;
}

/* =====================================================
   SERVICES
===================================================== */

.about-page-services {
    padding: 84px 0;
    background: #ffffff;
}

.about-page-services-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;
}

.about-page-service-card {
    min-height: 245px;

    padding: 28px;

    border:
        1px solid rgba(15, 118, 110, 0.09);

    border-radius: 23px;

    background: #ffffff;

    box-shadow:
        0 14px 34px rgba(15, 23, 42, 0.07);

    transition:
        transform 280ms ease,
        border-color 280ms ease,
        box-shadow 280ms ease;
}

.about-page-service-card:hover {
    border-color:
        rgba(15, 118, 110, 0.22);

    box-shadow:
        0 22px 46px rgba(15, 23, 42, 0.11);

    transform: translateY(-7px);
}

.about-page-service-icon {
    width: 54px;
    height: 54px;

    display: grid;
    place-items: center;

    margin-bottom: 22px;

    border-radius: 16px;

    color: var(--about-primary);
    background: var(--about-soft-2);

    font-size: 21px;

    transition:
        color 240ms ease,
        background-color 240ms ease,
        transform 240ms ease;
}

.about-page-service-card:hover
.about-page-service-icon {
    color: #ffffff;
    background: var(--about-primary);

    transform: rotate(-4deg) scale(1.05);
}

.about-page-service-card h3 {
    margin: 0 0 11px;

    color: var(--about-navy);

    font-size: 19px;
    font-weight: 900;

    line-height: 1.35;
}

.about-page-service-card p {
    margin: 0;

    color: var(--about-muted);

    font-size: 14px;
    line-height: 1.7;
}

/* =====================================================
   PRESIDENT'S MESSAGE
===================================================== */

.about-page-president {
    padding: 80px 0;
    background: #f8fafc;
}

.about-page-president-card {
    display: grid;

    grid-template-columns:
        minmax(250px, 0.7fr)
        minmax(0, 1.3fr);

    align-items: center;

    gap: clamp(38px, 6vw, 78px);

    padding: 42px;

    border:
        1px solid rgba(15, 118, 110, 0.10);

    border-radius: 32px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f2fdf9
        );

    box-shadow:
        0 22px 55px rgba(15, 23, 42, 0.10);
}

.about-page-president-photo {
    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 27px;

    background: var(--about-soft);

    box-shadow:
        0 18px 38px rgba(15, 23, 42, 0.13);
}

.about-page-president-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center top;
}

.about-page-president-content {
    position: relative;
}

.about-page-quote-mark {
    position: absolute;

    top: -28px;
    right: 0;

    color: rgba(15, 118, 110, 0.10);

    font-family: Georgia, serif;
    font-size: 126px;
    font-weight: 900;

    line-height: 1;

    pointer-events: none;
}

.about-page-president-content h2 {
    position: relative;

    max-width: 760px;

    margin: 0 0 18px;

    color: var(--about-navy);

    font-size: clamp(31px, 3.4vw, 47px);
    font-weight: 900;

    line-height: 1.14;
    letter-spacing: -0.035em;
}

.about-page-president-content blockquote {
    position: relative;

    max-width: 780px;

    margin: 0 0 24px;
    padding: 0;

    border: 0;

    color: var(--about-muted);

    font-size: 16px;
    font-style: normal;

    line-height: 1.8;
}

.about-page-president-signature {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.about-page-president-signature strong {
    color: var(--about-navy);

    font-size: 17px;
    font-weight: 900;
}

.about-page-president-signature span {
    color: var(--about-primary);

    font-size: 13px;
    font-weight: 800;
}

/* =====================================================
   LEADERSHIP
===================================================== */

.about-page-leadership {
    padding: 84px 0;

    background:
        linear-gradient(
            180deg,
            #eafbf6,
            #effcf8
        );
}

.about-page-leadership-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 22px;
}

.about-page-leader-card {
    position: relative;

    min-width: 0;

    padding: 30px 22px;

    border:
        1px solid rgba(15, 118, 110, 0.09);

    border-radius: 24px;

    background: #ffffff;

    box-shadow:
        0 15px 36px rgba(15, 23, 42, 0.08);

    text-align: center;

    transition:
        transform 280ms ease,
        border-color 280ms ease,
        box-shadow 280ms ease;
}

.about-page-leader-card:hover {
    border-color:
        rgba(15, 118, 110, 0.22);

    box-shadow:
        0 23px 46px rgba(15, 23, 42, 0.12);

    transform: translateY(-7px);
}

.about-page-leader-photo {
    width: 126px;
    height: 126px;

    margin: 0 auto 19px;
    padding: 5px;

    overflow: hidden;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--about-primary),
            #5eead4
        );

    box-shadow:
        0 12px 28px rgba(15, 118, 110, 0.18);
}

.about-page-leader-photo img {
    width: 100%;
    height: 100%;

    display: block;

    border:
        4px solid #ffffff;

    border-radius: 50%;

    object-fit: cover;
    object-position: center top;
}

.about-page-leader-card h3 {
    margin: 0 0 6px;

    overflow: hidden;

    color: var(--about-navy);

    font-size: 17px;
    font-weight: 900;

    line-height: 1.35;

    text-overflow: ellipsis;
}

.about-page-leader-card p {
    min-height: 21px;

    margin: 0 0 15px;

    color: var(--about-primary);

    font-size: 13px;
    font-weight: 800;
}

.about-page-leader-card > span {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: var(--about-muted);

    font-size: 12px;
    font-weight: 700;
}

.about-page-leader-card > span i {
    color: var(--about-secondary);
}

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

@media (max-width: 991.98px) {

    .about-page-hero {
        padding: 72px 0 68px;
    }

    .about-page-intro-grid {
        grid-template-columns: 1fr;

        gap: 62px;
    }

    .about-page-intro-media {
        max-width: 720px;

        margin: 0 auto;
    }

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

    .about-page-services-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .about-page-president-card {
        grid-template-columns:
            minmax(220px, 0.82fr)
            minmax(0, 1.18fr);

        gap: 35px;

        padding: 34px;
    }

    .about-page-leadership-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .about-page-timeline {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 36px 22px;
    }

    .about-page-timeline::before {
        display: none;
    }

    .about-page-timeline-item {
        padding: 24px;

        border:
            1px solid rgba(15, 118, 110, 0.10);

        border-radius: 21px;

        background: #ffffff;

        box-shadow:
            0 13px 30px rgba(15, 23, 42, 0.07);
    }

    .about-page-timeline-dot {
        display: none;
    }
}

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

@media (max-width: 767.98px) {

    .about-page-hero,
    .about-page-intro,
    .about-page-purpose,
    .about-page-services,
    .about-page-president,
    .about-page-leadership,
    .about-page-journey {
        padding-top: 60px;
        padding-bottom: 60px;
    }

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

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

    .about-page-hero-points {
        align-items: stretch;
        flex-direction: column;
    }

    .about-page-hero-points span {
        width: 100%;
    }

    .about-page-image-note {
        position: relative;

        right: auto;
        bottom: auto;

        max-width: none;

        margin: 16px 0 0;
    }

    .about-page-intro-grid {
        gap: 38px;
    }

    .about-page-intro-highlights {
        grid-template-columns: 1fr;
    }

    .about-page-purpose-card {
        min-height: 0;

        padding: 30px;
    }

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

    .about-page-service-card {
        min-height: 0;
    }

    .about-page-president-card {
        grid-template-columns: 1fr;

        padding: 24px;
    }

    .about-page-president-photo {
        max-width: 360px;

        margin: 0 auto;
    }

    .about-page-quote-mark {
        display: none;
    }

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

    .about-page-leader-card {
        max-width: 430px;

        margin: 0 auto;
    }

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

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

@media (max-width: 420px) {

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

    .about-page-purpose-card,
    .about-page-service-card {
        padding: 24px;
    }

    .about-page-section-heading {
        margin-bottom: 32px;
    }
}

/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .about-page-image-frame img,
    .about-page-purpose-card,
    .about-page-service-card,
    .about-page-service-icon,
    .about-page-leader-card {
        transition: none !important;
    }
}

/* =====================================================
   OUR JOURNEY — FULL-WIDTH CURVED ROADMAP
===================================================== */

.about-page-journey {
    position: relative;

    padding: 78px 0 82px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 6% 12%,
            rgba(20, 184, 166, 0.07),
            transparent 24%
        ),
        radial-gradient(
            circle at 92% 80%,
            rgba(15, 118, 110, 0.06),
            transparent 26%
        ),
        #ffffff;
}

/* =====================================================
   FULL-WIDTH JOURNEY CANVAS
===================================================== */

.about-journey-canvas {
    position: relative;

    width: 100%;
    height: 430px;

    margin-top: 8px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(240, 253, 250, 0.54),
            rgba(255, 255, 255, 0.14)
        );
}

/*
 * Very soft texture only.
 * There is intentionally no outside card or border.
 */
.about-journey-canvas::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(15, 118, 110, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(15, 118, 110, 0.025) 1px,
            transparent 1px
        );

    background-size:
        54px 54px;

    mask-image:
        linear-gradient(
            180deg,
            transparent,
            rgba(0, 0, 0, 0.52) 22%,
            rgba(0, 0, 0, 0.52) 76%,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            180deg,
            transparent,
            rgba(0, 0, 0, 0.52) 22%,
            rgba(0, 0, 0, 0.52) 76%,
            transparent
        );
}

/* =====================================================
   SVG CURVED ROUTE
===================================================== */

.about-journey-map {
    position: absolute;
    inset: 0;

    z-index: 1;

    width: 100%;
    height: 100%;

    overflow: visible;

    pointer-events: none;
}

.about-journey-path-base,
.about-journey-path-progress {
    fill: none;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.about-journey-path-base {
    stroke:
        rgba(15, 118, 110, 0.13);

    stroke-width: 7;

    stroke-dasharray:
        2 15;
}

.about-journey-path-progress {
    stroke:
        url(#aboutJourneyGradient);

    stroke-width: 4.5;

    filter:
        drop-shadow(
            0 5px 7px
            rgba(20, 184, 166, 0.18)
        );
}

/* Fixed milestone points */

.about-journey-svg-node circle:first-child {
    fill: #ffffff;

    stroke:
        rgba(15, 118, 110, 0.26);

    stroke-width: 3;
}

.about-journey-svg-node circle:last-child {
    fill:
        rgba(15, 118, 110, 0.34);
}

.about-journey-svg-node.is-active
circle:first-child,
.about-journey-svg-node.is-complete
circle:first-child {
    stroke:
        #14b8a6;

    fill:
        rgba(20, 184, 166, 0.14);
}

.about-journey-svg-node.is-active
circle:last-child,
.about-journey-svg-node.is-complete
circle:last-child {
    fill:
        #0f766e;
}

/* Moving traveller */

.about-journey-traveller-glow {
    fill:
        rgba(20, 184, 166, 0.30);
}

.about-journey-traveller {
    fill: #ffffff;

    stroke: #0f766e;
    stroke-width: 4.5;

    filter:
        drop-shadow(
            0 5px 8px
            rgba(15, 118, 110, 0.30)
        );
}

/* =====================================================
   MILESTONE CONTENT
   All milestones stay readable at all times.
===================================================== */

.about-journey-milestone {
    position: absolute;

    z-index: 4;

    width: min(290px, 22vw);

    color: var(--about-navy);

    opacity: 0.82;

    transition:
        opacity 320ms ease,
        transform 420ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),
        filter 320ms ease;
}

.about-journey-milestone-1 {
    top: 252px;
    left: 5.5%;
}

.about-journey-milestone-2 {
    top: 22px;
    left: 31.2%;

    transform:
        translateX(-50%);
}

.about-journey-milestone-3 {
    top: 296px;
    left: 60.6%;

    transform:
        translateX(-50%);
}

.about-journey-milestone-4 {
    top: 68px;
    right: 4.6%;
}

.about-journey-milestone.is-active {
    opacity: 1;

    filter:
        saturate(1.04);

    transform:
        translateY(-7px);
}

.about-journey-milestone-2.is-active,
.about-journey-milestone-3.is-active {
    transform:
        translateX(-50%)
        translateY(-7px);
}

/*
 * Completed milestones remain fully visible.
 */
.about-journey-milestone.is-complete {
    opacity: 0.94;
}

/* Year */

.about-journey-year {
    min-height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 9px;
    padding: 0 14px;

    border:
        1px solid rgba(15, 118, 110, 0.15);

    border-radius: 999px;

    color: var(--about-primary);
    background: rgba(255, 255, 255, 0.86);

    font-size: 12px;
    font-weight: 950;

    box-shadow:
        0 8px 18px
        rgba(15, 23, 42, 0.06);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition:
        color 260ms ease,
        background-color 260ms ease,
        transform 260ms ease,
        box-shadow 260ms ease;
}

.about-journey-milestone.is-active
.about-journey-year {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0f766e,
            #14b8a6
        );

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 24px
        rgba(15, 118, 110, 0.20);
}

/* Small milestone label */

.about-journey-step {
    display: block;

    margin-bottom: 6px;

    color: var(--about-primary);

    font-size: 9px;
    font-weight: 950;

    letter-spacing: 0.11em;
    text-transform: uppercase;
}

/* Text */

.about-journey-milestone h3 {
    margin: 0 0 8px;

    color: var(--about-navy);

    font-size: clamp(15px, 1.25vw, 19px);
    font-weight: 900;

    line-height: 1.3;
}

.about-journey-milestone p {
    max-width: 280px;

    margin: 0;

    color: var(--about-muted);

    font-size: clamp(11px, 0.88vw, 13px);
    line-height: 1.6;
}

/* =====================================================
   WORD-BY-WORD TEXT REVEAL
   Text stays hidden until the traveller reaches the point.
===================================================== */

/*
 * Year and milestone label remain visible.
 * Title and description stay hidden before arrival.
 */
.about-journey-milestone h3,
.about-journey-milestone p {
    visibility: hidden;
}

.about-journey-milestone.is-active h3,
.about-journey-milestone.is-active p,
.about-journey-milestone.is-complete h3,
.about-journey-milestone.is-complete p {
    visibility: visible;
}

.about-journey-word {
    display: inline-block;

    opacity: 0;

    transform:
        translateY(12px);

    filter:
        blur(2px);
}

/*
 * Current milestone appears word by word.
 */
.about-journey-milestone.is-typing
.about-journey-word {
    animation:
        aboutJourneyWordReveal
        460ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        forwards;

    animation-delay:
        calc(
            var(--journey-word-index)
            * 85ms
        );
}

/*
 * Description begins shortly after the title.
 */
.about-journey-milestone.is-typing p
.about-journey-word {
    animation-delay:
        calc(
            430ms +
            var(--journey-word-index)
            * 55ms
        );
}

/*
 * Completed milestones stay fully readable.
 */
.about-journey-milestone.is-complete
.about-journey-word {
    opacity: 1;

    transform: none;

    filter: none;
}

@keyframes aboutJourneyWordReveal {

    0% {
        opacity: 0;

        transform:
            translateY(12px);

        filter:
            blur(2px);
    }

    70% {
        opacity: 1;

        transform:
            translateY(-2px);

        filter:
            blur(0);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0);

        filter:
            blur(0);
    }
}

/* Active text highlight */

.about-journey-milestone.is-active h3 {
    color:
        #0b5f59;

    text-shadow:
        0 7px 22px
        rgba(15, 118, 110, 0.11);
}

/* =====================================================
   LIVE JOURNEY LABEL
===================================================== */

.about-journey-live-label {
    min-height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    margin: 12px 0 0;

    color: #475569;

    font-size: 12px;
    font-weight: 750;
}

.about-journey-live-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        #14b8a6;

    animation:
        aboutJourneyLivePulse
        1450ms ease-out infinite;
}

@keyframes aboutJourneyLivePulse {

    0% {
        box-shadow:
            0 0 0 0
            rgba(20, 184, 166, 0.34);
    }

    75% {
        box-shadow:
            0 0 0 8px
            rgba(20, 184, 166, 0);
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(20, 184, 166, 0);
    }
}

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

@media (max-width: 1100px) {

    .about-journey-milestone {
        width:
            min(250px, 23vw);
    }

    .about-journey-milestone-1 {
        left: 3%;
    }

    .about-journey-milestone-4 {
        right: 2%;
    }
}

/* =====================================================
   MOBILE / TABLET VERTICAL JOURNEY
===================================================== */

@media (max-width: 991.98px) {

    .about-page-journey {
        padding:
            66px 0 72px;
    }

    .about-journey-canvas {
        height: auto;

        display: grid;

        gap: 18px;

        padding:
            0 24px;

        overflow: visible;

        background: transparent;
    }

    .about-journey-map {
        display: none;
    }

    .about-journey-milestone,
    .about-journey-milestone-1,
    .about-journey-milestone-2,
    .about-journey-milestone-3,
    .about-journey-milestone-4 {
        position: relative;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        width: 100%;
        max-width: 720px;

        margin:
            0 auto;

        padding:
            18px 18px 18px 22px;

        border-left:
            3px solid
            rgba(15, 118, 110, 0.18);

        background:
            linear-gradient(
                90deg,
                rgba(240, 253, 250, 0.80),
                rgba(255, 255, 255, 0)
            );

        opacity: 0.90;

        transform: none;
    }

    .about-journey-milestone.is-active,
    .about-journey-milestone-2.is-active,
    .about-journey-milestone-3.is-active {
        border-left-color:
            #14b8a6;

        transform:
            translateX(8px);
    }

    .about-journey-milestone p {
        max-width: none;
    }
}

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

@media (max-width: 575.98px) {

    .about-journey-canvas {
        padding:
            0 18px;
    }

    .about-journey-milestone {
        padding:
            16px 14px 16px 18px;
    }

    .about-journey-milestone h3 {
        font-size: 17px;
    }

    .about-journey-milestone p {
        font-size: 12px;
    }
}

/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .about-journey-milestone,
    .about-journey-year,
    .about-journey-character,
    .about-journey-live-dot {
        opacity: 1 !important;

        transform: none !important;

        filter: none !important;

        animation: none !important;
        transition: none !important;
    }
}



/* =====================================================
   JOURNEY POSITION SAFETY
===================================================== */

.about-journey-milestone-1 {
    left: clamp(24px, 5.5%, 90px);
}

.about-journey-milestone-4 {
    right: clamp(24px, 4.6%, 82px);
}

@media (min-width: 992px) {

    .about-journey-milestone-2 {
        top: 14px;
    }

    .about-journey-milestone-3 {
        top: 278px;
    }
}
/* =====================================================
   ABOUT PAGE — BACKEND PLACEHOLDERS AND EMPTY STATES
   Path: static/css/pages/about.css
===================================================== */

/* =====================================================
   WHO WE ARE IMAGE PLACEHOLDER
===================================================== */

.about-page-image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 390px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 16px;

    padding: 30px;

    color: #0f766e;

    background:
        radial-gradient(
            circle at 20% 18%,
            rgba(20, 184, 166, 0.16),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #ecfdf5,
            #f8fafc
        );

    text-align: center;
}

.about-page-image-placeholder i {
    width: 86px;
    height: 86px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(15, 118, 110, 0.14);
    border-radius: 26px;

    color: #0f766e;
    background: rgba(255, 255, 255, 0.82);

    font-size: 38px;

    box-shadow:
        0 16px 34px
        rgba(15, 118, 110, 0.12);
}

.about-page-image-placeholder span {
    max-width: 260px;

    color: #334155;

    font-size: 16px;
    font-weight: 850;
    line-height: 1.5;
}

/* =====================================================
   PRESIDENT PHOTO PLACEHOLDER
===================================================== */

.about-page-president-placeholder {
    width: 100%;
    height: 100%;
    min-height: 430px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #0f766e;

    background:
        radial-gradient(
            circle at 50% 22%,
            rgba(20, 184, 166, 0.18),
            transparent 32%
        ),
        linear-gradient(
            160deg,
            #ecfdf5,
            #e2e8f0
        );
}

.about-page-president-placeholder i {
    width: 118px;
    height: 118px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(15, 118, 110, 0.15);
    border-radius: 50%;

    color: #0f766e;
    background: rgba(255, 255, 255, 0.86);

    font-size: 52px;

    box-shadow:
        0 20px 44px
        rgba(15, 118, 110, 0.16);
}

/* =====================================================
   LEADERSHIP PHOTO PLACEHOLDER
===================================================== */

.about-page-leader-placeholder {
    width: 100%;
    height: 100%;
    min-height: 230px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #0f766e;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(20, 184, 166, 0.17),
            transparent 34%
        ),
        linear-gradient(
            150deg,
            #ecfdf5,
            #f1f5f9
        );
}

.about-page-leader-placeholder i {
    width: 82px;
    height: 82px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #0f766e;
    background: rgba(255, 255, 255, 0.90);

    font-size: 34px;

    box-shadow:
        0 14px 28px
        rgba(15, 118, 110, 0.13);
}

/* =====================================================
   LEADERSHIP DESCRIPTION
===================================================== */

.about-page-leader-description {
    display: block;

    margin-top: 10px;

    color: #64748b;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.55;
}

/* =====================================================
   EMPTY STATE
===================================================== */

.about-page-empty-state {
    width: min(720px, calc(100% - 32px));

    margin: 12px auto;
    padding: 38px 26px;

    border: 1px dashed rgba(15, 118, 110, 0.22);
    border-radius: 24px;

    color: #475569;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(20, 184, 166, 0.10),
            transparent 46%
        ),
        rgba(248, 250, 252, 0.88);

    text-align: center;
}

.about-page-empty-state i {
    width: 60px;
    height: 60px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 14px;

    border-radius: 18px;

    color: #0f766e;
    background: rgba(20, 184, 166, 0.11);

    font-size: 25px;
}

.about-page-empty-state h3 {
    margin: 0;

    color: #0f172a;

    font-size: 19px;
    font-weight: 900;
}

/* Make the service empty state use the full grid width. */

.about-page-services-grid > .about-page-empty-state,
.about-page-leadership-grid > .about-page-empty-state {
    grid-column: 1 / -1;
}

/* =====================================================
   BACKEND CONTENT TEXT SAFETY
===================================================== */

.about-page-hero-content h1,
.about-page-intro-content h2,
.about-page-purpose-card h3,
.about-page-president-content h2,
.about-page-section-heading h2,
.about-page-service-card h3,
.about-page-leader-card h3,
.about-journey-milestone h3 {
    overflow-wrap: anywhere;
}

.about-page-hero-content p,
.about-page-intro-content p,
.about-page-purpose-card p,
.about-page-president-content blockquote,
.about-page-section-heading p,
.about-page-service-card p,
.about-page-leader-card p,
.about-journey-milestone p {
    overflow-wrap: anywhere;
}

/* =====================================================
   RESPONSIVE PLACEHOLDERS
===================================================== */

@media (max-width: 991.98px) {

    .about-page-image-placeholder {
        min-height: 330px;
    }

    .about-page-president-placeholder {
        min-height: 360px;
    }

    .about-page-leader-placeholder {
        min-height: 210px;
    }
}

@media (max-width: 575.98px) {

    .about-page-image-placeholder {
        min-height: 280px;
    }

    .about-page-president-placeholder {
        min-height: 310px;
    }

    .about-page-leader-placeholder {
        min-height: 190px;
    }

    .about-page-image-placeholder i,
    .about-page-president-placeholder i {
        width: 74px;
        height: 74px;

        font-size: 31px;
    }

    .about-page-empty-state {
        padding: 30px 18px;
    }
}

/* =====================================================
   ABOUT PAGE — RESPONSIVE LEADERSHIP AND JOURNEY FIX
===================================================== */

/* =====================================================
   TABLET AND SMALL LAPTOP
===================================================== */

@media (max-width: 991.98px) {

    /* ================================================
       LEADERSHIP — REMOVE NARROW CARD WIDTH
    ================================================= */

    .about-page-leadership .container {
        width: 100%;
        max-width: 100%;

        padding-left: 22px;
        padding-right: 22px;
    }

    .about-page-leadership-grid {
        width: 100%;
        max-width: 100%;

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 20px !important;

        margin-left: auto;
        margin-right: auto;
    }

    .about-page-leader-card {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 24px 18px !important;

        border-radius: 24px;
    }

    .about-page-leader-photo {
        width: 150px !important;
        height: 150px !important;

        max-width: 100%;

        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
    }

    .about-page-leader-placeholder {
        min-height: 0 !important;
    }

    /* ================================================
       JOURNEY — NEW VERTICAL TIMELINE
    ================================================= */

    .about-page-journey {
        position: relative;

        width: 100%;

        padding-top: 65px;
        padding-bottom: 55px;

        overflow: hidden;

        background:
            radial-gradient(
                circle at 15% 10%,
                rgba(20, 184, 166, 0.10),
                transparent 30%
            ),
            linear-gradient(
                180deg,
                #ffffff,
                #f0fdfa
            );
    }

    .about-page-journey .container {
        width: 100%;
        max-width: 100%;

        padding-left: 22px;
        padding-right: 22px;
    }

    .about-page-journey
    .about-page-section-heading {
        width: 100%;
        max-width: 680px;

        margin-left: auto;
        margin-right: auto;
        margin-bottom: 34px;

        padding-left: 4px;
        padding-right: 4px;
    }

    .about-page-journey
    .about-page-section-heading h2 {
        font-size: clamp(
            34px,
            7vw,
            48px
        );

        line-height: 1.08;
    }

    .about-page-journey
    .about-page-section-heading p {
        max-width: 620px;

        margin-left: auto;
        margin-right: auto;

        font-size: 16px;
        line-height: 1.7;
    }

    /*
     * The desktop SVG curve is hidden on
     * tablet and mobile screens.
     */

    .about-journey-map {
        display: none !important;
    }

    .about-journey-canvas {
        position: relative !important;

        width: 100% !important;
        max-width: 760px !important;

        height: auto !important;
        min-height: 0 !important;

        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 18px !important;

        margin: 0 auto !important;

        padding:
            4px
            22px
            4px
            68px !important;

        overflow: visible !important;

        counter-reset: journey-mobile-step;
    }

    /*
     * Main timeline line.
     */

    .about-journey-canvas::before {
        content: "";

        position: absolute;

        top: 18px;
        bottom: 18px;
        left: 36px;

        width: 3px;

        border-radius: 999px;

        background:
            linear-gradient(
                180deg,
                #14b8a6,
                #0f766e
            );

        box-shadow:
            0 0 0 5px
            rgba(20, 184, 166, 0.08);
    }

    /*
     * Reset every desktop milestone position.
     */

    .about-journey-milestone,
    .about-journey-milestone-1,
    .about-journey-milestone-2,
    .about-journey-milestone-3,
    .about-journey-milestone-4 {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 0 !important;

        display: block !important;

        margin: 0 !important;
        padding: 22px 22px 22px 24px !important;

        border:
            1px solid
            rgba(15, 118, 110, 0.14) !important;

        border-radius: 20px !important;
opacity: 0.48 !important;
visibility: visible !important;

transform:
    translateY(12px) !important;

filter:
    saturate(0.75) !important;

transition:
    opacity 500ms ease,
    transform 500ms ease,
    filter 500ms ease,
    border-color 500ms ease,
    box-shadow 500ms ease,
    background-color 500ms ease !important;

        background:
            linear-gradient(
                145deg,
                rgba(255, 255, 255, 0.98),
                rgba(240, 253, 250, 0.94)
            ) !important;

        box-shadow:
            0 14px 34px
            rgba(15, 23, 42, 0.08) !important;

        text-align: left !important;

        counter-increment:
            journey-mobile-step;
    }

    /*
     * Numbered timeline point.
     */

    .about-journey-milestone::before {
        content:
            counter(journey-mobile-step);

        position: absolute;

        top: 24px;
        left: -48px;

        z-index: 3;

        width: 34px;
        height: 34px;

        display: grid;
        place-items: center;

        border:
            4px solid
            #ecfdf5;

        border-radius: 50%;

        color: #ffffff;

        background:
            linear-gradient(
                145deg,
                #14b8a6,
                #0f766e
            );

        font-size: 12px;
        font-weight: 900;

        box-shadow:
            0 7px 18px
            rgba(15, 118, 110, 0.25);
    }

    /*
     * Short connector from the vertical line
     * to each milestone card.
     */

    .about-journey-milestone::after {
        content: "";

        position: absolute;

        top: 40px;
        left: -29px;

        width: 28px;
        height: 2px;

        background:
            linear-gradient(
                90deg,
                #14b8a6,
                rgba(20, 184, 166, 0.20)
            );
    }

    .about-journey-milestone:hover {
        transform:
            translateY(-2px) !important;

        border-color:
            rgba(15, 118, 110, 0.28) !important;

        box-shadow:
            0 18px 40px
            rgba(15, 23, 42, 0.11) !important;
    }


    .about-journey-year {
        position: static !important;

        width: auto !important;
        height: auto !important;

        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        margin: 0 8px 11px 0 !important;
        padding: 7px 13px !important;

        border:
            1px solid
            rgba(15, 118, 110, 0.16);

        border-radius: 999px;

        color: #0f766e !important;

        background:
            rgba(20, 184, 166, 0.09) !important;

        font-size: 13px !important;
        font-weight: 900 !important;
    }

    .about-journey-step {
        display: inline-flex !important;

        margin: 0 0 11px !important;

        color: #0f766e !important;

        font-size: 10px !important;
        font-weight: 900 !important;

        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .about-journey-milestone h3 {
        width: 100% !important;

        margin:
            2px
            0
            9px !important;

        color: #0f172a !important;

        font-size: 21px !important;
        font-weight: 900 !important;
        line-height: 1.25 !important;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;
        filter: none !important;
    }

    .about-journey-milestone p {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

        color: #64748b !important;

        font-size: 14px !important;
        font-weight: 550 !important;
        line-height: 1.65 !important;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;
        filter: none !important;
    }
/* Completed and currently active milestones */

.about-journey-milestone.is-complete,
.about-journey-milestone.is-active {
    opacity: 1 !important;

    transform:
        translateY(0) !important;

    filter:
        saturate(1) !important;
}


/* Current milestone emphasis */

.about-journey-milestone.is-active {
    border-color:
        rgba(20, 184, 166, 0.46) !important;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #ccfbf1
        ) !important;

    box-shadow:
        0 20px 44px
        rgba(15, 118, 110, 0.15) !important;
}


/* Animate the numbered timeline point */

.about-journey-milestone::before {
    transition:
        transform 450ms ease,
        box-shadow 450ms ease,
        background-color 450ms ease !important;
}

.about-journey-milestone.is-active::before {
    transform:
        scale(1.18);

    background:
        linear-gradient(
            145deg,
            #2dd4bf,
            #0f766e
        );

    box-shadow:
        0 0 0 7px
        rgba(20, 184, 166, 0.12),
        0 10px 24px
        rgba(15, 118, 110, 0.30);
}
    /*
     * The JavaScript separates text into words.
     * On mobile every word stays visible.
     */

    .about-journey-word {
        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;
        filter: none !important;

        animation: none !important;
        transition: none !important;
    }

    .about-journey-live-label {
        display: none !important;
    }
}

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

@media (max-width: 575.98px) {

    /* ================================================
       LEADERSHIP — FULL-WIDTH HORIZONTAL CARDS
    ================================================= */

    .about-page-leadership {
        padding-left: 0;
        padding-right: 0;
    }

    .about-page-leadership .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .about-page-leadership-grid {
        grid-template-columns: 1fr !important;

        gap: 14px !important;
    }

    .about-page-leader-card {
        display: grid !important;

        grid-template-columns:
            92px
            minmax(0, 1fr) !important;

        grid-template-areas:
            "leader-photo leader-name"
            "leader-photo leader-role"
            "leader-photo leader-location";

        column-gap: 16px !important;
        row-gap: 3px !important;

        align-items: center !important;

        width: 100% !important;

        padding: 17px !important;

        border-radius: 20px !important;

        text-align: left !important;
    }

    .about-page-leader-photo {
        grid-area: leader-photo;

        width: 92px !important;
        height: 92px !important;

        margin: 0 !important;
    }

    .about-page-leader-card h3 {
        grid-area: leader-name;

        margin: 0 !important;

        font-size: 17px !important;
        line-height: 1.25 !important;
    }

    .about-page-leader-card > p {
        grid-area: leader-role;

        margin: 1px 0 0 !important;

        font-size: 13px !important;
    }

    .about-page-leader-card > span {
        grid-area: leader-location;

        justify-content: flex-start !important;

        margin-top: 5px !important;

        font-size: 12px !important;
    }

    /* ================================================
       JOURNEY MOBILE SPACING
    ================================================= */

    .about-page-journey {
        padding-top: 52px;
        padding-bottom: 42px;
    }

    .about-page-journey .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .about-page-journey
    .about-page-section-heading {
        margin-bottom: 26px;
    }

    .about-page-journey
    .about-page-section-heading h2 {
        font-size: 36px;
    }

    .about-page-journey
    .about-page-section-heading p {
        font-size: 14px;
        line-height: 1.65;
    }

    .about-journey-canvas {
        max-width: 100% !important;

        gap: 14px !important;

        padding:
            4px
            14px
            4px
            55px !important;
    }

    .about-journey-canvas::before {
        left: 26px;
    }

    .about-journey-milestone,
    .about-journey-milestone-1,
    .about-journey-milestone-2,
    .about-journey-milestone-3,
    .about-journey-milestone-4 {
        padding:
            18px
            17px
            18px
            18px !important;

        border-radius: 17px !important;
    }

    .about-journey-milestone::before {
        top: 21px;
        left: -43px;

        width: 31px;
        height: 31px;

        border-width: 3px;

        font-size: 11px;
    }

    .about-journey-milestone::after {
        top: 36px;
        left: -27px;

        width: 26px;
    }

    .about-journey-year {
        padding:
            6px
            11px !important;

        font-size: 12px !important;
    }

    .about-journey-step {
        font-size: 9px !important;
    }

    .about-journey-milestone h3 {
        font-size: 18px !important;
    }

    .about-journey-milestone p {
        font-size: 13px !important;
    }
}