.popup-overlay {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(0, 0, 0, 0.7);

}



.popup-box {

    width: min(90%, 320px);

    padding: 30px 25px;

    border-radius: 16px;

    border: 1px solid rgba(15, 23, 42, 0.1);

    background: #ffffff;

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

    text-align: center;

}



.popup-box h3 {

    margin-bottom: 10px;

    color: #d14343;

}



.popup-box p {

    margin-bottom: 20px;

    color: #52606d;

    font-size: 14px;

}



.popup-box button {

    padding: 10px 20px;

    border: none;

    border-radius: 999px;

    background: linear-gradient(90deg, #00ffd5, #00aaff);

    color: #002222;

    cursor: pointer;

    font-weight: 700;

}



.about-hero {

    width: var(--shell-width);

    margin: 0 auto;

    padding: 132px var(--shell-gutter) 58px;

    text-align: center;

}



.about-hero::after {

    content: "";

    display: block;

    width: min(100%, 760px);

    height: 1px;

    margin: 30px auto 0;

    background: linear-gradient(90deg, transparent, rgba(47, 214, 211, 0.32), transparent);

}



.about-hero-box {

    max-width: 780px;

    margin: 0 auto;

}



.about-hero-kicker {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 12px;

    padding: 8px 14px;

    border-radius: 999px;

    background: #edf8f7;

    border: 1px solid rgba(47, 214, 211, 0.18);

    color: #169da2;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.14em;

    text-transform: uppercase;

}



.about-hero h1 {

    margin-bottom: 14px;

    color: var(--text-main);

    font-size: clamp(36px, 4.8vw, 56px);

    line-height: 1.08;

}



.about-hero h1 span,

.team-title span {

    background: none;

    color: #169da2;

    -webkit-text-fill-color: currentColor;

}



.about-hero p {

    max-width: 720px;

    margin: 0 auto;

    color: var(--text-body);

    font-size: 15px;

    line-height: 1.7;

}



.team-section {

    padding: 10px 0 88px;

}



.team-shell {

    width: var(--shell-width);

    margin: 0 auto;

    padding: 34px;

    border-radius: 32px;

    background: #ffffff;

    border: 1px solid rgba(15, 23, 42, 0.1);

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

}



.team-header {

    max-width: 760px;

    margin: 0 auto 28px;

    text-align: center;

}



.team-title {

    margin-bottom: 12px;

    color: var(--text-main);

    font-size: clamp(32px, 4vw, 42px);

    line-height: 1.08;

}



.team-copy {

    color: var(--text-body);

    font-size: 15px;

    line-height: 1.7;

}



.team-wrapper {

    display: grid;

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

    gap: 20px;

    align-items: stretch;

}



.team-card {

    position: relative;

    overflow: hidden;

    padding: 16px;

    border-radius: 28px;

    background: #ffffff;

    border: 1px solid rgba(15, 23, 42, 0.1);

    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);

    text-align: center;

    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;

}



.team-card::before {

    content: "";

    position: absolute;

    inset: 0 0 auto;

    height: 4px;

    background: linear-gradient(90deg, #2fd6d3, #18bfc3);

    opacity: 0;

    transition: opacity 0.3s ease;

}



.team-card img {

    width: 100%;

    border-radius: 18px;

    display: block;

    background: #edf8f7;

}



.team-card h3,

.team-card h4 {

    margin-top: 14px;

    margin-bottom: 6px;

    color: var(--text-main);

    font-size: 18px;

    line-height: 1.25;

}



.team-card p {

    color: var(--text-body);

    font-size: 13px;

    line-height: 1.6;

}



.team-card:hover {

    transform: translateY(-8px);

    border-color: rgba(47, 214, 211, 0.18);

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

}



.team-card:hover::before {

    opacity: 1;

}



.team-card.main {

    padding: 18px;

    transform: translateY(-16px);

    border-color: rgba(47, 214, 211, 0.22);

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

}



.team-card.main h3 {

    font-size: 20px;

}



@media (max-width: 980px) {

    .team-wrapper {

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

    }



    .team-card.main {

        grid-column: span 3;

        max-width: 320px;

        margin: 0 auto;

        transform: none;

    }

}



@media (max-width: 768px) {

    .about-hero {

        width: 100%;

        padding: 118px 20px 40px;

    }



    .about-hero::after {

        margin-top: 24px;

    }



    .about-hero h1 {

        font-size: 30px;

        line-height: 1.12;

    }



    .about-hero p {

        font-size: 14px;

        line-height: 1.65;

    }



    .team-section {

        padding: 14px 0 68px;

    }



    .team-shell {

        width: 100%;

        padding: 22px 16px;

        border-radius: 24px;

    }



    .team-header {

        margin-bottom: 24px;

    }



    .team-title {

        font-size: 28px;

    }



    .team-copy {

        font-size: 14px;

        line-height: 1.65;

    }



    .team-wrapper {

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

        gap: 16px;

    }



    .team-card {

        padding: 12px;

        border-radius: 20px;

    }



    .team-card.main {

        grid-column: span 2;

        max-width: 280px;

        padding: 14px;

    }



    .team-card h3,

    .team-card h4 {

        font-size: 16px;

    }



    .team-card p {

        font-size: 12px;

        line-height: 1.55;

    }

}
/* Align the about page with the shared home design. */
body.about-page { background: #f0f6f9; }
body.about-page > section.about-hero {
    width: var(--shell-width);
    margin: 18px auto 0;
    padding: 142px 32px 68px;
    border: 1px solid #215c70;
    border-radius: 32px;
    background: linear-gradient(115deg, #071d36, #103f61 65%, #007d83);
    box-shadow: 0 18px 42px rgba(7, 29, 54, 0.12);
}
body.about-page .about-hero::after { display: none; }
body.about-page .about-hero-kicker {
    padding: 0;
    margin-bottom: 18px;
    border: 0;
    background: transparent;
    color: #a9f5e6;
    letter-spacing: 0.08em;
}
body.about-page .about-hero h1 {
    color: #ffffff;
    font-size: clamp(34px, 4.5vw, 54px);
    letter-spacing: -0.04em;
    line-height: 1.15;
    text-wrap: balance;
}
body.about-page .about-hero h1 span { color: #55f3cf; }
body.about-page .about-hero p { color: #deedf5; line-height: 1.8; }
body.about-page > section.team-section { padding: 64px 24px 80px; }
body.about-page .team-shell {
    width: 100%;
    max-width: 1160px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
body.about-page .team-header { margin-bottom: 36px; }
body.about-page .team-title { letter-spacing: -0.035em; line-height: 1.16; }
body.about-page .team-title span { color: #007e78; }
body.about-page .team-copy { line-height: 1.8; }
body.about-page .team-wrapper { gap: 18px; }
body.about-page .team-card,
body.about-page .team-card.main {
    padding: 12px 12px 24px;
    border-radius: 20px;
    border: 1px solid #d5e6ed;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(16, 45, 70, 0.045);
    transform: none;
}
body.about-page .team-card.main { border-top: 3px solid #008879; }
body.about-page .team-card::before { display: none; }
body.about-page .team-card img { border-radius: 12px; height: auto; background: #e9f5f1; }
body.about-page .team-card :is(h3, h4) { font-size: 18px; line-height: 1.35; }
body.about-page .team-card p { color: #587084; }
body.about-page .nav-links a[aria-current="page"] { color: #006c67; background: #e6f6f0; }
body.about-page .popup-box button { background: #007e78; color: #ffffff; border-radius: 12px; }
@media (hover: hover) {
    body.about-page .team-card:hover { transform: translateY(-4px); border-color: #8cc9bc; }
}
@media (max-width: 980px) {
    body.about-page .team-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.about-page .team-card.main { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 300px; }
}
@media (max-width: 600px) {
    body.about-page > section.about-hero { padding: 112px 22px 42px; border-radius: 24px; }
    body.about-page > section.team-section { padding: 46px 18px 56px; }
    body.about-page .team-wrapper { gap: 14px; }
    body.about-page .team-card { padding: 10px 10px 20px; border-radius: 16px; }
    body.about-page .team-card :is(h3, h4) { font-size: 16px; }
    body.about-page .team-card.main { max-width: 270px; }
}