:root {
    --hero-blue: #1e73be;
    --hero-navy: #262573;
    --hero-ink: #18244b;
    --hero-sky: #eef6ff;
    --hero-lilac: #f4f3ff;
    --hero-muted: #66708c;
    --hero-border: #dce5f5;
    --hero-shadow: 0 20px 55px rgba(22, 42, 91, .12);
}

.hero-homepage {
    overflow: clip;
    color: var(--hero-ink);
    background: #fff;
}

.hero-homepage .container {
    max-width: 1220px;
}

.hero-campaign {
    position: relative;
    min-height: clamp(500px, 45vw, 650px);
    overflow: hidden;
    isolation: isolate;
    background: #d9ebff;
}

.hero-campaign-track,
.hero-campaign-slide,
.hero-campaign-slide picture,
.hero-campaign-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-campaign-slide {
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .55s ease, visibility .55s ease;
}

.hero-campaign-slide.is-active {
    opacity: 1;
    visibility: visible;
}

.hero-campaign-slide img {
    display: block;
    object-fit: cover;
    object-position: center;
}

.hero-campaign-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(7, 62, 139, .18), transparent 55%, rgba(20, 20, 89, .24));
}

.hero-campaign-copy {
    position: absolute;
    z-index: 2;
    top: clamp(32px, 7vw, 92px);
    left: max(24px, calc((100% - 1220px) / 2));
    max-width: min(500px, 40vw);
    color: #fff;
    text-shadow: 0 2px 18px rgba(7, 39, 94, .35);
}

.hero-campaign-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--hero-blue);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--hero-blue);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.hero-campaign-kicker {
    padding: 8px 14px;
    color: var(--hero-navy);
    text-shadow: none;
    letter-spacing: .06em;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 8px 20px rgba(10, 54, 125, .13);
}

.hero-campaign-copy h1 {
    max-width: 490px;
    margin: 18px 0 10px;
    color: #fff;
    font-size: clamp(2rem, 4vw, 4.2rem);
    font-weight: 900;
    line-height: 1.04;
}

.hero-campaign-copy p {
    max-width: 400px;
    margin: 0;
    font-size: clamp(.9rem, 1.25vw, 1.1rem);
    font-weight: 600;
}

.hero-campaign-form-wrap {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: max(24px, calc((100% - 1220px) / 2));
    width: min(360px, 30vw);
    transform: translateY(-50%);
}

.hero-campaign-form {
    padding: 22px 24px 20px;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 22px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 24px 70px rgba(17, 33, 87, .28);
    backdrop-filter: blur(12px);
}

.hero-campaign-form-heading {
    margin-bottom: 14px;
    text-align: center;
}

.hero-campaign-form-heading span {
    display: block;
    color: var(--hero-navy);
    font-size: .95rem;
    font-weight: 800;
}

.hero-campaign-form-heading h2 {
    margin: 4px 0 0;
    color: #e33547;
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1.2;
}

.hero-campaign-form .consult-form {
    display: grid;
    gap: 9px;
}

.hero-campaign-form .consult-field,
.hero-campaign-form .consult-fieldset {
    min-width: 0;
    margin: 0;
}

.hero-campaign-form .consult-field label,
.hero-campaign-form .consult-fieldset legend {
    display: block;
    width: auto;
    margin: 0 0 4px;
    color: #4a5575;
    font-size: .74rem;
    font-weight: 700;
}

.hero-campaign-form .consult-field label span:not(.consult-optional),
.hero-campaign-form .consult-fieldset legend span {
    color: #e33547;
}

.hero-campaign-form .consult-optional {
    color: #8b95ac;
    font-size: .67rem;
    font-weight: 500;
}

.hero-campaign-form .consult-input-wrap {
    min-height: 41px;
    border: 1px solid #e0e5f0;
    border-radius: 11px;
    background: #fff;
    box-shadow: none;
}

.hero-campaign-form .consult-input-wrap:focus-within {
    border-color: var(--hero-blue);
    box-shadow: 0 0 0 3px rgba(30, 115, 190, .11);
}

.hero-campaign-form .consult-input-wrap i {
    width: 30px;
    color: var(--hero-blue);
    font-size: .75rem;
}

.hero-campaign-form .consult-input-wrap input,
.hero-campaign-form .consult-input-wrap select,
.hero-campaign-form .consult-input-wrap textarea {
    min-width: 0;
    padding: 8px 8px 8px 0;
    color: var(--hero-ink);
    font-size: .78rem;
}

.hero-campaign-form .consult-input-wrap textarea {
    min-height: 52px;
}

.hero-campaign-form .consult-location-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.hero-campaign-form .consult-location-grid .consult-input-wrap i {
    width: 24px;
}

.hero-campaign-form .consult-submit {
    min-height: 43px;
    margin-top: 3px;
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
    border: 0;
    border-radius: 12px;
    background: var(--hero-navy);
    box-shadow: 0 9px 18px rgba(38, 37, 115, .25);
}

.hero-campaign-form .consult-submit:hover,
.hero-campaign-form .consult-submit:focus-visible {
    color: #fff;
    background: #1e73be;
}

.hero-campaign-controls {
    position: absolute;
    z-index: 4;
    bottom: 24px;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 15px;
    transform: translateX(-50%);
}

.hero-campaign-arrow,
.hero-slider-arrow {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .62);
    border-radius: 50%;
    background: rgba(38, 37, 115, .74);
    transition: transform .2s ease, background .2s ease;
}

.hero-campaign-arrow:hover,
.hero-slider-arrow:hover {
    color: #fff;
    background: var(--hero-blue);
    transform: translateY(-2px);
}

.hero-campaign-dots,
.hero-slider-dots {
    display: flex;
    align-items: center;
    gap: 7px;
}

.hero-campaign-dot,
.hero-slider-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: rgba(255, 255, 255, .65);
    transition: width .2s ease, background .2s ease;
}

.hero-campaign-dot.is-active,
.hero-slider-dots button.is-active {
    width: 24px;
    background: #fff;
}

.hero-home-section {
    position: relative;
    padding: clamp(70px, 8vw, 112px) 0;
}

.hero-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 42px;
}

.hero-section-heading-centered {
    display: block;
    max-width: 900px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.hero-section-heading h2 {
    margin: 8px 0 0;
    color: var(--hero-navy);
    font-size: clamp(1.85rem, 3.4vw, 3.1rem);
    font-weight: 900;
    line-height: 1.12;
}

.hero-section-heading p {
    max-width: 840px;
    margin: 17px auto 0;
    color: var(--hero-muted);
    font-size: 1.02rem;
    line-height: 1.78;
}

.hero-section-heading-light h2,
.hero-section-heading-light p {
    color: #fff;
}

.hero-section-heading-light p {
    color: rgba(255, 255, 255, .72);
}

.hero-section-link,
.hero-news-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    color: var(--hero-blue);
    font-size: .9rem;
    font-weight: 800;
}

.hero-section-link:hover,
.hero-news-links a:hover {
    color: var(--hero-navy);
}

.hero-about-section {
    background: linear-gradient(180deg, #fff 0%, #f6f9ff 100%);
}

.hero-about-section::before {
    position: absolute;
    top: -130px;
    right: -120px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(30, 115, 190, .06);
    content: "";
}

.hero-value-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.hero-value-card {
    position: relative;
    padding: 30px 28px 28px;
    overflow: hidden;
    border: 1px solid var(--hero-border);
    border-radius: 20px;
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--hero-shadow);
}

.hero-value-card::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 90px;
    height: 90px;
    border-radius: 0 20px 0 100%;
    background: #edf5ff;
    content: "";
}

.hero-value-icon {
    position: relative;
    z-index: 1;
    display: grid;
    width: 54px;
    height: 54px;
    margin-bottom: 22px;
    place-items: center;
    color: #fff;
    border-radius: 17px;
    background: linear-gradient(135deg, var(--hero-blue), var(--hero-navy));
    box-shadow: 0 9px 18px rgba(30, 115, 190, .2);
    font-size: 1.25rem;
}

.hero-value-card h3 {
    position: relative;
    z-index: 1;
    min-height: 58px;
    margin: 0 0 18px;
    color: var(--hero-navy);
    font-size: 1.04rem;
    font-weight: 900;
    line-height: 1.45;
    text-transform: uppercase;
}

.hero-value-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hero-value-card li {
    position: relative;
    padding-left: 22px;
    color: #54607c;
    font-size: .92rem;
    line-height: 1.65;
}

.hero-value-card li + li {
    margin-top: 13px;
}

.hero-value-card li::before {
    position: absolute;
    top: .55em;
    left: 0;
    width: 10px;
    height: 10px;
    border: 3px solid #a5d4fb;
    border-radius: 50%;
    background: var(--hero-blue);
    content: "";
}

.hero-news-section {
    background: #fff;
}

#news .hero-news-heading {
    display: block;
    max-width: 980px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

#news .hero-news-heading > div {
    width: 100%;
}

.hero-news-card {
    overflow: hidden;
    border: 1px solid var(--hero-border);
    border-radius: 21px;
    background: #fff;
    box-shadow: 0 13px 34px rgba(22, 42, 91, .08);
    transition: transform .25s ease, box-shadow .25s ease;
}

#news .hero-news-card {
    display: flex;
    height: 100%;
    flex-direction: column;
}

.hero-news-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 42px rgba(22, 42, 91, .14);
}

.hero-news-image-wrap {
    position: relative;
    height: 250px;
    overflow: hidden;
    background: #eaf3ff;
}

.hero-news-image-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.hero-news-card:hover img {
    transform: scale(1.04);
}

.hero-news-badge,
.hero-achievement-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    padding: 7px 11px;
    color: #fff;
    border-radius: 999px;
    background: var(--hero-navy);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .05em;
}

.hero-news-body {
    padding: 23px 24px 25px;
}

#news .hero-news-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.hero-news-body h3 {
    margin: 0;
    color: var(--hero-navy);
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.35;
}

.hero-news-body p {
    min-height: 50px;
    margin: 11px 0 18px;
    color: var(--hero-muted);
    font-size: .9rem;
    line-height: 1.65;
}

#news .hero-news-body p {
    flex: 1 1 auto;
}

.hero-news-body a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--hero-blue);
    font-size: .86rem;
    font-weight: 800;
}

#news .hero-news-detail-button {
    position: relative;
    display: inline-flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding: 11px 42px;
    color: #155eef;
    border: 1px solid #b9d2ff;
    border-radius: 11px;
    background: #eff6ff;
    box-shadow: 0 5px 12px rgba(37, 99, 235, .08);
    font-size: 15px !important;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}

#news .hero-news-detail-button:hover {
    color: #fff;
    border-color: #155eef;
    background: #155eef;
    box-shadow: 0 9px 18px rgba(21, 94, 239, .22);
    text-decoration: none;
    transform: translateY(-2px);
}

#news .hero-news-detail-button i {
    position: absolute;
    right: 18px;
    font-size: 13px;
    transition: transform .2s ease;
}

#news .hero-news-detail-button:hover i {
    transform: translateX(4px);
}

#news .hero-news-detail-button:focus-visible,
#news .hero-news-explore-link:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .28);
    outline-offset: 3px;
}

#news .hero-news-explore {
    display: flex;
    justify-content: center;
    margin-top: 38px;
    text-align: center;
}

#news .hero-news-explore-link {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 13px 30px;
    color: #fff;
    border: 1px solid #155eef;
    border-radius: 999px;
    background: linear-gradient(135deg, #2f75f5 0%, #155eef 58%, #0b42b5 100%);
    box-shadow: 0 10px 22px rgba(21, 94, 239, .24);
    font-size: 15px !important;
    font-weight: 800;
    line-height: 1.35;
    text-decoration: none;
    transition: color .2s ease, box-shadow .2s ease, transform .2s ease;
}

#news .hero-news-explore-link:hover {
    color: #fff;
    box-shadow: 0 14px 28px rgba(11, 66, 181, .3);
    text-decoration: none;
    transform: translateY(-3px);
}

#news .hero-news-explore-link i {
    font-size: 14px;
    transition: transform .2s ease;
}

#news .hero-news-explore-link:hover i {
    transform: translateX(5px);
}

@media (max-width: 575.98px) {
    #news .hero-news-explore {
        margin-top: 28px;
    }

    #news .hero-news-explore-link {
        width: 100%;
        padding: 13px 18px;
        font-size: 14px !important;
    }
}

.hero-achievement-section {
    color: #fff;
    background: linear-gradient(135deg, #242263 0%, #1e73be 100%);
}

.hero-achievement-section::after {
    position: absolute;
    right: -120px;
    bottom: -180px;
    width: 400px;
    height: 400px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 50%;
    box-shadow: 0 0 0 35px rgba(255, 255, 255, .03), 0 0 0 70px rgba(255, 255, 255, .025);
    content: "";
}

.hero-mobile-slider {
    position: relative;
    z-index: 1;
}

.hero-mobile-slider-viewport {
    overflow: visible;
}

.hero-mobile-slider-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.hero-achievement-card {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 21px;
    background: #fff;
    box-shadow: 0 20px 40px rgba(12, 23, 80, .2);
}

.hero-achievement-image {
    position: relative;
    height: 245px;
    overflow: hidden;
    background: #dceeff;
}

.hero-achievement-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-achievement-image .hero-achievement-badge {
    background: #e33547;
}

.hero-achievement-body {
    padding: 23px 24px 26px;
    color: var(--hero-ink);
}

.hero-achievement-body h3 {
    margin: 0;
    color: var(--hero-navy);
    font-size: 1.18rem;
    font-weight: 900;
}

.hero-achievement-body h3 small {
    color: var(--hero-muted);
    font-size: .76rem;
    font-weight: 700;
}

.hero-card-meta {
    margin: 5px 0 14px;
    color: var(--hero-muted);
    font-size: .8rem;
}

.hero-achievement-body strong {
    display: block;
    min-height: 44px;
    color: var(--hero-blue);
    font-size: .9rem;
    line-height: 1.5;
}

.hero-achievement-body blockquote,
.hero-feedback-card blockquote {
    position: relative;
    margin: 17px 0 0;
    padding: 15px 0 0 18px;
    color: #5d6880;
    border-top: 1px solid #e3e8f1;
    font-size: .84rem;
    font-style: italic;
    line-height: 1.65;
}

.hero-achievement-body blockquote::before,
.hero-feedback-card blockquote::before {
    position: absolute;
    top: 12px;
    left: 0;
    color: #ffc857;
    content: "“";
    font-size: 2rem;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
}

.hero-slider-controls {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 24px;
}

.hero-slider-arrow {
    width: 36px;
    height: 36px;
    border-color: rgba(255, 255, 255, .34);
}

.hero-slider-dots button {
    background: rgba(255, 255, 255, .45);
}

.hero-slider-dots button.is-active {
    background: #fff;
}

.hero-feedback-section {
    background: #f8fbff;
}

.hero-feedback-card {
    min-height: 280px;
    padding: 27px;
    border: 1px solid var(--hero-border);
    border-radius: 21px;
    background: #fff;
    box-shadow: 0 14px 35px rgba(22, 42, 91, .07);
}

.hero-feedback-person {
    display: flex;
    align-items: center;
    gap: 14px;
}

.hero-feedback-person img {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border: 3px solid #d6ebff;
    border-radius: 50%;
    object-fit: cover;
}

.hero-feedback-person h3 {
    margin: 0;
    color: var(--hero-navy);
    font-size: 1rem;
    font-weight: 900;
}

.hero-feedback-person p {
    margin: 3px 0 0;
    color: var(--hero-muted);
    font-size: .8rem;
}

.hero-feedback-stars {
    display: flex;
    gap: 4px;
    margin-top: 19px;
    color: #ffb536;
    font-size: .82rem;
}

.hero-facility-section {
    background: linear-gradient(180deg, #fff 0%, #f4f8ff 100%);
}

.hero-location-filters {
    margin: -5px 0 28px;
    padding: 18px 20px;
    border: 1px solid #dce5ef;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 7px 18px rgba(31, 61, 92, .08);
}

#facilities .hero-location-filters,
#facilities .hero-location-filters :not(svg):not(path) {
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
}

.hero-location-filter-grid {
    display: grid;
    grid-template-columns: minmax(260px, 4.25fr) minmax(200px, 3fr) minmax(200px, 2.75fr) minmax(165px, 2fr);
    gap: 12px;
    align-items: center;
}

.hero-location-search,
.hero-location-select {
    position: relative;
    min-width: 0;
}

.hero-location-search input,
.hero-location-select select,
#facilities .hero-location-locate {
    width: 100%;
    height: 48px;
    color: #26364a;
    border: 1px solid #d7e0eb;
    border-radius: 12px;
    outline: 0;
    background: #f7f9fc;
    font-size: 16px !important;
    font-weight: 500;
    line-height: 1.25;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}

.hero-location-search input {
    appearance: none;
    padding: 0 44px 0 43px;
}

.hero-location-search input::-webkit-search-cancel-button {
    display: none;
}

.hero-location-search input::placeholder {
    color: #92a0b3;
}

.hero-location-leading-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 1;
    width: 20px;
    height: 20px;
    color: #8696ab;
    pointer-events: none;
    transform: translateY(-50%);
}

.hero-location-clear {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    width: 42px;
    height: 48px;
    padding: 0;
    place-items: center;
    color: #94a3b8;
    border: 0;
    background: transparent;
}

.hero-location-clear svg {
    width: 17px;
    height: 17px;
}

.hero-location-clear:hover {
    color: #526174;
}

.hero-location-select select {
    appearance: none;
    padding: 0 42px 0 14px;
    cursor: pointer;
}

.hero-location-select > svg {
    position: absolute;
    top: 50%;
    right: 14px;
    width: 16px;
    height: 16px;
    color: #718096;
    pointer-events: none;
    transform: translateY(-50%);
}

.hero-location-search:focus-within input,
.hero-location-select:focus-within select {
    border-color: #4b91e8;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, .12);
}

.hero-location-locate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 15px;
    color: #1859c9;
    border-color: #a9cbff;
    background: #f6faff;
    font-size: 16px !important;
    font-weight: 700;
    white-space: nowrap;
}

#facilities .hero-location-locate svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: #246fe5;
}

#facilities .hero-location-locate:hover,
#facilities .hero-location-locate.is-located {
    color: #124daf;
    border-color: #77aaf7;
    background: #eaf3ff;
}

#facilities .hero-location-locate:disabled {
    cursor: wait;
    opacity: .7;
}

@media (max-width: 991.98px) {
    .hero-location-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-location-search {
        grid-column: 1 / -1;
    }

    .hero-location-locate {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .hero-location-filters {
        margin-bottom: 22px;
        padding: 15px;
        border-radius: 16px;
    }

    .hero-location-filter-grid {
        grid-template-columns: 1fr;
    }

    .hero-location-search {
        grid-column: auto;
    }

    .hero-location-locate {
        grid-column: auto;
    }

    .hero-location-search input,
    .hero-location-select select,
    #facilities .hero-location-locate {
        height: 50px;
        font-size: 15px !important;
    }

    .hero-location-clear {
        height: 50px;
    }
}

.hero-facility-layout {
    display: grid;
    grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr);
    gap: 25px;
    align-items: stretch;
}

/* Give only the homepage facilities section a wider working canvas. */
#facilities > .container {
    width: calc(100% - 32px);
    max-width: 1480px;
}

/* Widen only the two homepage facility cards without affecting other sections. */
#facilities .hero-facility-layout {
    grid-template-columns: minmax(430px, .92fr) minmax(0, 1.08fr);
}

@media (max-width: 991.98px) {
    #facilities .hero-facility-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.hero-facility-search-panel,
.hero-facility-map-panel {
    border: 1px solid var(--hero-border);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--hero-shadow);
}

.hero-facility-search-panel {
    padding: 25px;
}

.hero-facility-search-box label {
    display: block;
    margin-bottom: 10px;
    color: var(--hero-navy);
    font-size: .95rem;
    font-weight: 900;
}

.hero-facility-search-input {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 13px;
    border: 1px solid #dce5f2;
    border-radius: 13px;
    background: #f9fbff;
}

.hero-facility-search-input:focus-within {
    border-color: var(--hero-blue);
    box-shadow: 0 0 0 3px rgba(30, 115, 190, .1);
}

.hero-facility-search-input > i {
    margin-right: 10px;
    color: var(--hero-blue);
}

.hero-facility-search-input input {
    min-width: 0;
    flex: 1;
    padding: 10px 0;
    color: var(--hero-ink);
    border: 0;
    outline: 0;
    background: transparent;
    font-size: .84rem;
}

.hero-facility-search-input button {
    display: grid;
    width: 28px;
    height: 28px;
    padding: 0;
    place-items: center;
    color: #7c88a2;
    border: 0;
    background: transparent;
}

.hero-facility-results {
    display: grid;
    gap: 9px;
    max-height: 270px;
    margin-top: 18px;
    overflow-y: auto;
    padding-right: 4px;
}

.hero-facility-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 12px 13px;
    text-align: left;
    border: 1px solid #e4eaf4;
    border-radius: 13px;
    background: #fff;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.hero-facility-result:hover,
.hero-facility-result.is-active {
    color: var(--hero-navy);
    border-color: #a9d3f3;
    background: #eff7ff;
    transform: translateX(3px);
}

.hero-facility-result > span {
    display: flex;
    align-items: center;
    min-width: 0;
    color: var(--hero-navy);
    font-size: .86rem;
    font-weight: 800;
}

.hero-facility-result > span i {
    margin-right: 9px;
    color: var(--hero-blue);
}

.hero-facility-result small {
    flex: 0 0 auto;
    color: var(--hero-muted);
    font-size: .72rem;
}

.hero-facility-result[hidden] {
    display: none;
}

.hero-facility-detail {
    margin-top: 19px;
    padding-top: 20px;
    border-top: 1px solid #e5eaf3;
}

.hero-facility-detail-label {
    color: var(--hero-blue);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.hero-facility-detail h3 {
    margin: 6px 0 7px;
    color: var(--hero-navy);
    font-size: 1.1rem;
    font-weight: 900;
}

.hero-facility-detail p {
    display: flex;
    gap: 8px;
    margin: 0;
    color: var(--hero-muted);
    font-size: .82rem;
    line-height: 1.55;
}

.hero-facility-detail p i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: #e33547;
}

.hero-facility-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 17px;
}

.hero-facility-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 7px 12px;
    color: var(--hero-navy);
    border: 1px solid #cad9ef;
    border-radius: 10px;
    background: #fff;
    font-size: .72rem;
    font-weight: 800;
}

.hero-facility-action:hover {
    color: var(--hero-blue);
    border-color: var(--hero-blue);
}

.hero-facility-action-primary {
    color: #fff;
    border-color: var(--hero-navy);
    background: var(--hero-navy);
}

.hero-facility-action-primary:hover {
    color: #fff;
    border-color: var(--hero-blue);
    background: var(--hero-blue);
}

/* Home facility selector and active branch card. */
#facilities .hero-facility-sidebar {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 18px;
}

#facilities .hero-facility-sidebar,
#facilities .hero-facility-sidebar :not(i) {
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
}

#facilities .hero-facility-search-panel,
#facilities .hero-facility-detail {
    margin: 0;
    padding: 18px;
    border: 1px solid #dce5ef;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31, 61, 92, .08);
}

#facilities .hero-facility-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

#facilities .hero-facility-panel-heading > span {
    color: #8a9ab1;
    font-size: 15px !important;
    font-weight: 800;
    letter-spacing: .055em;
}

#facilities .hero-facility-panel-heading > strong {
    padding: 5px 10px;
    color: #2563eb;
    border-radius: 7px;
    background: #eff6ff;
    font-size: 15px !important;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}

#facilities .hero-facility-region-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

#facilities .hero-facility-region-pill {
    min-height: 34px;
    padding: 7px 12px;
    color: #52657c;
    border: 0;
    border-radius: 8px;
    background: #f1f5f9;
    font-size: 15px !important;
    font-weight: 700;
    line-height: 1.2;
    transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}

#facilities .hero-facility-region-pill:hover {
    color: #1d5fd1;
    background: #eaf3ff;
}

#facilities .hero-facility-region-pill.is-active {
    color: #fff;
    background: #2563eb;
    box-shadow: 0 4px 10px rgba(37, 99, 235, .22);
}

#facilities .hero-facility-results {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    max-height: 410px;
    margin: 0;
    padding: 3px 14px 3px 5px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
    scrollbar-color: #c8d6e7 transparent;
    scrollbar-width: thin;
}

#facilities .hero-facility-empty {
    margin: 6px 0 0;
    padding: 22px 14px;
    color: #71839a;
    border: 1px dashed #cbd8e7;
    border-radius: 12px;
    background: #f8fafc;
    font-size: 14px !important;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

#facilities .hero-facility-result {
    display: flex;
    min-width: 0;
    min-height: 74px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: auto;
    margin: 0 1px;
    padding: 12px 13px;
    color: #17233a;
    text-align: left;
    border: 1px solid #dfe6ef;
    border-radius: 13px;
    background: #fff;
    font-size: 17px !important;
    transform: none;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

#facilities .hero-facility-result:hover {
    border-color: #a9c8f5;
    background: #f8fbff;
    transform: none;
}

#facilities .hero-facility-result.is-active {
    border-color: #155eef;
    background: #eef5ff;
    box-shadow: inset 0 0 0 1px #155eef, 0 8px 18px rgba(21, 94, 239, .14);
    transform: none;
}

#facilities .hero-facility-result-main {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 13px;
}

#facilities .hero-facility-result-icon {
    display: inline-flex;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    color: #667a92;
    border-radius: 9px;
    background: #eef3f8;
    font-size: 20px !important;
    transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}

#facilities .hero-facility-result.is-active .hero-facility-result-icon {
    color: #fff;
    border: 2px solid #fff;
    background: linear-gradient(145deg, #155eef, #073ba8);
    box-shadow: 0 0 0 3px #cfe0ff, 0 7px 16px rgba(7, 59, 168, .3);
}

#facilities .hero-facility-result .hero-facility-result-icon i {
    display: inline-flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    color: #2563eb !important;
    font-size: 20px !important;
    line-height: 1;
    text-align: center;
}

#facilities .hero-facility-result .hero-facility-result-icon i::before {
    display: block;
    line-height: 1;
}

#facilities .hero-facility-result.is-active .hero-facility-result-icon i {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(4, 32, 94, .35);
}

#facilities .hero-facility-result-copy {
    display: block;
    min-width: 0;
}

#facilities .hero-facility-result-copy > strong {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow: hidden;
    color: #15223a;
    font-size: 19px !important;
    font-weight: 800;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#facilities .hero-facility-open-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #19b982;
    opacity: 0;
}

#facilities .hero-facility-result.is-active .hero-facility-open-dot {
    opacity: 1;
}

#facilities .hero-facility-result-meta {
    display: block;
    overflow: hidden;
    margin-top: 4px;
    color: #71839a;
    font-size: 16px !important;
    font-weight: 500;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#facilities .hero-facility-region-badge {
    flex: 0 0 auto;
    padding: 5px 9px;
    color: #52657c;
    border: 1px solid transparent;
    border-radius: 7px;
    background: #f1f5f9;
    font-size: 14px !important;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}

#facilities .hero-facility-result.is-active .hero-facility-region-badge {
    color: #1d5fd1;
    border-color: #bfd8ff;
    background: #fff;
}

#facilities .hero-facility-detail-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #edf1f6;
}

#facilities .hero-facility-detail-label {
    display: block;
    color: #2563eb;
    font-size: 14px !important;
    font-weight: 800;
    letter-spacing: .08em;
}

#facilities .hero-facility-detail h3 {
    margin: 5px 0 0;
    color: #101d34;
    font-size: 24px !important;
    font-weight: 800;
    line-height: 1.3;
}

#facilities .hero-facility-open-status {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    color: #087a58;
    border: 1px solid #a7ebd2;
    border-radius: 999px;
    background: #edfcf6;
    font-size: 14px !important;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

#facilities .hero-facility-open-status > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #19b982;
}

#facilities .hero-facility-info-list {
    display: grid;
    gap: 15px;
}

#facilities .hero-facility-info-row {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 11px;
    color: #5f7189;
}

#facilities .hero-facility-info-row > i {
    width: 19px;
    flex: 0 0 19px;
    margin-top: 2px;
    color: #9aabc0;
    font-size: 17px;
    text-align: center;
}

#facilities .hero-facility-info-address > i {
    color: #f43f5e;
}

#facilities .hero-facility-info-row p {
    display: block;
    margin: 0;
    color: #5f7189;
    font-size: 16px !important;
    line-height: 1.5;
}

#facilities .hero-facility-info-address p {
    color: #24344b;
    font-size: 17px !important;
    font-weight: 700;
}

#facilities .hero-facility-info-row strong {
    color: #16233a;
    font-weight: 800;
}

#facilities .hero-facility-info-row small {
    display: block;
    margin-top: 2px;
    color: #8190a4;
    font-size: 16.5px !important;
    line-height: 1.45;
}

#facilities .hero-facility-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 17px;
    padding-top: 15px;
    border-top: 1px solid #edf1f6;
}

#facilities .hero-facility-action {
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 11px;
    font-size: 16px !important;
    font-weight: 700;
}

#facilities .hero-facility-action-primary {
    color: #fff;
    border-color: #2f75f5;
    background: #2f75f5;
    box-shadow: 0 7px 16px rgba(47, 117, 245, .2);
    transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}

#facilities .hero-facility-action-primary:hover {
    color: #fff;
    border-color: #155eef;
    background: #155eef;
    box-shadow: 0 10px 20px rgba(21, 94, 239, .28);
    transform: translateY(-2px);
}

#facilities .hero-facility-action-primary i {
    color: #b9ffe8;
}

#facilities .hero-facility-action:not(.hero-facility-action-primary) i {
    color: #2563eb;
}

#facilities .hero-facility-booking {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 50px;
    margin-top: 15px;
    padding: 12px 16px 12px 18px;
    color: #fff;
    border: 1px solid #155eef;
    border-radius: 13px;
    background: linear-gradient(135deg, #2f75f5 0%, #155eef 58%, #0b42b5 100%);
    box-shadow: 0 9px 20px rgba(21, 94, 239, .22);
    font-size: 16px !important;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

#facilities .hero-facility-booking:hover {
    color: #fff;
    border-color: #0b42b5;
    background: linear-gradient(135deg, #236bea 0%, #0f50da 58%, #073693 100%);
    box-shadow: 0 12px 26px rgba(11, 66, 181, .3);
    text-decoration: none;
    transform: translateY(-2px);
}

#facilities .hero-facility-booking:focus-visible {
    color: #fff;
    outline: 3px solid rgba(37, 99, 235, .3);
    outline-offset: 3px;
}

#facilities .hero-facility-booking i {
    display: inline-grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    font-size: 12px;
    transition: transform .2s ease, background .2s ease;
}

#facilities .hero-facility-booking:hover i {
    background: rgba(255, 255, 255, .24);
    transform: translateX(3px);
}

@media (max-width: 575.98px) {
    #facilities > .container {
        width: calc(100% - 20px);
    }

    #facilities .hero-facility-sidebar {
        gap: 14px;
    }

    #facilities .hero-facility-search-panel,
    #facilities .hero-facility-detail {
        padding: 16px;
        border-radius: 16px;
    }

    #facilities .hero-facility-panel-heading,
    #facilities .hero-facility-detail-heading {
        align-items: flex-start;
    }

    #facilities .hero-facility-results {
        max-height: 370px;
    }

    #facilities .hero-facility-result {
        padding: 10px;
    }

    #facilities .hero-facility-result-meta {
        max-width: 168px;
        font-size: 13px !important;
    }

    #facilities .hero-facility-actions {
        grid-template-columns: 1fr;
    }

    #facilities .hero-facility-booking {
        align-items: center;
        padding-right: 14px;
        padding-left: 15px;
        font-size: 15px !important;
    }
}

.hero-facility-map-panel {
    padding: 25px;
}

#facilities .hero-facility-map-panel {
    display: flex;
    min-width: 0;
    min-height: 100%;
    flex-direction: column;
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
}

.hero-facility-map-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 17px;
}

.hero-facility-map-heading h3 {
    margin: 5px 0 0;
    color: var(--hero-navy);
    font-size: 1.35rem;
    font-weight: 900;
}

#facilities .hero-facility-map-heading .hero-eyebrow {
    font-size: 21px !important;
}

#facilities .hero-facility-map-heading h3 {
    font-size: 24px !important;
}

.hero-facility-map-heading > i {
    color: var(--hero-blue);
    font-size: 2rem;
}

.hero-facility-map-frame {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    border-radius: 16px;
    background: #dfeefa;
}

#facilities .hero-facility-map-frame {
    min-height: 420px;
    flex: 1 1 auto;
}

.hero-facility-map-frame iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
}

#facilities .hero-facility-map-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
}

.hero-facility-map-note {
    position: absolute;
    right: 13px;
    bottom: 13px;
    display: flex;
    align-items: center;
    gap: 7px;
    max-width: calc(100% - 26px);
    padding: 8px 11px;
    color: #43506f;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 9px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 8px 20px rgba(21, 45, 85, .12);
    font-size: .68rem;
    font-weight: 700;
}

#facilities .hero-facility-map-note {
    font-size: 13px !important;
}

.hero-facility-map-note i {
    color: #e33547;
}

.hero-news-links {
    display: flex;
    gap: 17px;
}

.hero-news-image-wrap {
    height: 220px;
}

.hero-news-badge {
    background: #e33547;
}

.hero-news-body time {
    color: var(--hero-blue);
    font-size: .72rem;
    font-weight: 800;
}

.hero-news-body h3 {
    margin-top: 8px;
    font-size: 1.1rem;
}

@media (max-width: 1199.98px) {
    .hero-campaign-copy {
        left: 30px;
    }

    .hero-campaign-form-wrap {
        right: 30px;
    }
}

@media (max-width: 991.98px) {
    .hero-campaign {
        min-height: 650px;
        padding-bottom: 335px;
    }

    .hero-campaign-track,
    .hero-campaign-slide,
    .hero-campaign-slide picture,
    .hero-campaign-slide img {
        height: 385px;
    }

    .hero-campaign-slide img {
        object-position: center;
    }

    .hero-campaign-copy {
        top: 30px;
        left: 24px;
        max-width: 49%;
    }

    .hero-campaign-copy h1 {
        font-size: clamp(1.7rem, 4vw, 2.7rem);
    }

    .hero-campaign-form-wrap {
        top: auto;
        right: 24px;
        bottom: 26px;
        left: 24px;
        width: auto;
        transform: none;
    }

    .hero-campaign-form {
        max-width: 480px;
        margin: 0 auto;
    }

    .hero-campaign-controls {
        bottom: 345px;
    }

    .hero-value-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-value-card:last-child {
        grid-column: 1 / -1;
        max-width: calc(50% - 11px);
        margin: 0 auto;
    }

    .hero-facility-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .hero-home-section {
        padding: 58px 0;
    }

    .hero-section-heading,
    .hero-section-heading-centered {
        display: block;
        margin-bottom: 28px;
        text-align: center;
    }

    .hero-section-heading h2 {
        font-size: 1.75rem;
    }

    .hero-section-heading p {
        margin-top: 13px;
        font-size: .91rem;
        line-height: 1.65;
    }

    .hero-section-link {
        margin-top: 17px;
    }

    .hero-campaign {
        min-height: 0;
        padding-bottom: 0;
    }

    .hero-campaign-track {
        position: relative;
        inset: auto;
        height: 290px;
    }

    .hero-campaign-slide,
    .hero-campaign-slide picture,
    .hero-campaign-slide img {
        height: 290px;
    }

    .hero-campaign-copy {
        top: 20px;
        left: 18px;
        max-width: calc(100% - 36px);
    }

    .hero-campaign-kicker {
        padding: 7px 10px;
        font-size: .6rem;
    }

    .hero-campaign-copy h1,
    .hero-campaign-copy p {
        display: none;
    }

    .hero-campaign-form-wrap {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: auto;
        margin: 0 14px 18px;
        transform: none;
    }

    .hero-campaign-form {
        padding: 17px 16px 15px;
        border-radius: 18px;
    }

    .hero-campaign-form-heading {
        margin-bottom: 10px;
    }

    .hero-campaign-form-heading span {
        font-size: .83rem;
    }

    .hero-campaign-form-heading h2 {
        font-size: 1rem;
    }

    .hero-campaign-form .consult-form {
        gap: 7px;
    }

    .hero-campaign-form .consult-field label,
    .hero-campaign-form .consult-fieldset legend {
        margin-bottom: 2px;
        font-size: .68rem;
    }

    .hero-campaign-form .consult-input-wrap {
        min-height: 36px;
        border-radius: 9px;
    }

    .hero-campaign-form .consult-input-wrap input,
    .hero-campaign-form .consult-input-wrap select,
    .hero-campaign-form .consult-input-wrap textarea {
        padding-top: 6px;
        padding-bottom: 6px;
        font-size: .7rem;
    }

    .hero-campaign-form .consult-input-wrap textarea {
        min-height: 42px;
    }

    .hero-campaign-form .consult-submit {
        min-height: 37px;
        font-size: .71rem;
    }

    .hero-campaign-form .consult-location-grid {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .hero-campaign-controls {
        top: 246px;
        bottom: auto;
        gap: 10px;
    }

    .hero-campaign-arrow {
        width: 30px;
        height: 30px;
        font-size: .72rem;
    }

    .hero-value-grid {
        display: block;
    }

    .hero-value-card {
        max-width: none !important;
        margin: 0 0 15px !important;
    }

    .hero-value-card {
        padding: 23px 21px;
    }

    .hero-value-card h3 {
        min-height: 0;
        font-size: .97rem;
    }

    .hero-value-card li {
        font-size: .86rem;
    }

    .hero-mobile-slider-viewport {
        overflow: hidden;
        margin: 0 -2px;
        padding: 0 2px 5px;
    }

    .hero-mobile-slider-track {
        display: flex;
        gap: 0;
        transform: translateX(calc(var(--slide-index, 0) * -100%));
        transition: transform .42s ease;
    }

    .hero-mobile-slider-track > article {
        width: 100%;
        flex: 0 0 100%;
    }

    .hero-slider-controls {
        display: flex;
    }

    .hero-achievement-image {
        height: 260px;
    }

    .hero-achievement-body,
    .hero-feedback-card {
        padding: 21px;
    }

    .hero-achievement-body strong {
        min-height: 0;
    }

    .hero-facility-search-panel,
    .hero-facility-map-panel {
        padding: 18px;
        border-radius: 18px;
    }

    .hero-facility-results {
        max-height: 245px;
    }

    .hero-facility-map-frame,
    .hero-facility-map-frame iframe {
        min-height: 320px;
        height: 320px;
    }

    .hero-facility-map-heading h3 {
        font-size: 1.1rem;
    }

    .hero-news-links {
        justify-content: center;
        margin-top: 16px;
    }

    .hero-news-image-wrap {
        height: 225px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-campaign-slide,
    .hero-mobile-slider-track,
    .hero-news-card,
    .hero-campaign-arrow,
    .hero-slider-arrow {
        transition: none;
    }
}

/* About section refinement based on the supplied visual reference. */
.hero-about-heading {
    max-width: 1040px;
    margin-bottom: 48px;
}

.hero-about-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid #b9ddfb;
    border-radius: 999px;
    background: rgba(239, 247, 255, .92);
    box-shadow: 0 5px 14px rgba(30, 115, 190, .06);
}

.hero-about-title {
    margin-top: 15px !important;
    color: #071c43 !important;
    font-size: clamp(2rem, 3.55vw, 3.35rem) !important;
    font-weight: 900 !important;
    letter-spacing: -.045em;
    line-height: 1.1 !important;
}

.hero-about-heading > p {
    max-width: 820px;
    margin-top: 20px;
    color: #53627d;
    font-size: .98rem;
}

.hero-about-heading > p strong {
    color: var(--hero-blue);
    font-weight: 800;
}

.hero-trust-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 13px 22px;
    margin-top: 24px;
}

.hero-trust-badges > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    color: #33425f;
    border: 1px solid #dce7f4;
    border-radius: 8px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 4px 10px rgba(22, 42, 91, .04);
    font-size: .75rem;
    font-weight: 700;
}

.hero-trust-badges span i {
    color: var(--hero-blue);
}

.hero-trust-badges span:last-child i {
    color: #f5aa19;
}

.hero-value-card {
    display: flex;
    min-height: 460px;
    flex-direction: column;
    justify-content: space-between;
    padding: 26px 27px 22px;
    overflow: visible;
    border-color: #dbe5f1;
    box-shadow: 0 9px 24px rgba(22, 42, 91, .05);
}

.hero-value-card::after {
    display: none;
}

.hero-value-card-decoration {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    width: 90px;
    height: 90px;
    border-radius: 0 20px 0 100%;
    background: #edf5ff;
    transition: transform .4s ease;
}

.hero-value-card:hover .hero-value-card-decoration {
    transform: scale(1.12);
    transform-origin: top right;
}

.hero-value-card-main {
    position: relative;
    z-index: 1;
}

.hero-value-card .hero-value-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 14px;
    font-size: 1.1rem;
}

.hero-value-kicker {
    margin-bottom: 7px;
    color: var(--hero-blue);
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.hero-value-card h3 {
    min-height: 68px;
    margin: 0 0 18px;
    color: #0a1739;
    font-size: 1.12rem;
    font-weight: 900;
    line-height: 1.35;
    text-transform: none;
}

.hero-value-list {
    margin: 0;
    padding: 17px 0 0;
    border-top: 1px solid #e7edf5;
    list-style: none;
}

.hero-value-card .hero-value-list li,
.hero-value-card .hero-value-list li + li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 0;
    padding: 0;
    color: #5e6b84;
    font-size: .78rem;
    line-height: 1.62;
}

.hero-value-card .hero-value-list li + li {
    margin-top: 14px;
}

.hero-value-card .hero-value-list li::before {
    display: none;
}

.hero-value-check {
    display: inline-grid;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    margin-top: 2px;
    place-items: center;
    color: var(--hero-blue);
    border-radius: 50%;
    background: #e0f0ff;
    font-size: .58rem;
}

.hero-value-list strong {
    color: #132448;
    font-weight: 800;
}

.hero-value-quote {
    padding: 10px 12px !important;
    color: #71809d !important;
    border: 1px solid #d5eaff;
    border-radius: 11px;
    background: #f1f8ff;
    font-size: .7rem !important;
    font-style: italic;
}

.hero-value-quote > i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: #6eb9ee;
}

.hero-quote-end {
    white-space: nowrap;
}

.hero-quote-end::after {
    content: "\f10e";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;

    font-size: 10px;
    font-style: normal;
    margin-left: 5px;
    vertical-align: 2px;
}

.hero-value-card--featured {
    border: 1.5px solid #2793f0;
    background: linear-gradient(180deg, #fff 0%, #f9fcff 100%);
    box-shadow: 0 13px 28px rgba(30, 115, 190, .1);
}

.hero-value-card--featured .hero-value-card-decoration {
    background: #e8f4ff;
}

.hero-value-featured-tag {
    position: absolute;
    z-index: 3;
    top: -13px;
    left: 25px;
    padding: 5px 11px;
    color: #fff;
    border-radius: 999px;
    background: var(--hero-blue);
    box-shadow: 0 5px 12px rgba(30, 115, 190, .18);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.hero-value-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 22px;
    padding-top: 13px;
    color: var(--hero-blue);
    border-top: 1px solid #e4ebf4;
    font-size: .68rem;
    font-weight: 800;
}

.hero-value-footer:hover {
    color: var(--hero-navy);
}

.hero-value-footer i {
    font-size: .56rem;
    transition: transform .2s ease;
}

.hero-value-footer:hover i {
    transform: translateX(3px);
}

.hero-about-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-top: 48px;
    padding: 25px 30px;
    color: #fff;
    border-radius: 18px;
    background: linear-gradient(105deg, #252364 0%, #1e73be 100%);
    box-shadow: 0 14px 28px rgba(38, 37, 115, .16);
}

.hero-about-action-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    color: #fff;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    font-size: .68rem;
    font-weight: 800;
}

.hero-about-action-pill i {
    color: #ffd264;
}

.hero-about-action h3 {
    margin: 8px 0 4px;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 900;
}

.hero-about-action p {
    margin: 0;
    color: rgba(255, 255, 255, .75);
    font-size: .78rem;
}

.hero-about-action-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 45px;
    padding: 10px 18px;
    color: var(--hero-navy);
    border: 0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 16px rgba(7, 27, 73, .14);
    font-size: .78rem;
    font-weight: 900;
    transition: transform .2s ease, background .2s ease;
}

.hero-about-action-button:hover,
.hero-about-action-button:focus-visible {
    color: var(--hero-navy);
    background: #eef7ff;
    transform: translateY(-2px);
}

@media (min-width: 992px) {
    .hero-about-title {
        white-space: nowrap;
    }
}

@media (max-width: 767.98px) {
    .hero-about-heading {
        margin-bottom: 36px;
    }

    .hero-about-title {
        font-size: 1.95rem !important;
        letter-spacing: -.035em;
    }

    .hero-trust-badges {
        gap: 8px;
    }

    .hero-trust-badges > span {
        font-size: .68rem;
    }

    .hero-value-card {
        min-height: 0;
        padding: 24px 21px 20px;
    }

    .hero-value-card--featured {
        margin-top: 23px !important;
    }

    .hero-value-featured-tag {
        top: -12px;
    }

    .hero-value-card h3 {
        min-height: 0;
        font-size: 1.06rem;
    }

    .hero-value-card .hero-value-list li,
    .hero-value-card .hero-value-list li + li {
        font-size: .8rem;
    }

    .hero-about-action {
        display: block;
        margin-top: 32px;
        padding: 22px 20px;
        text-align: center;
    }

    .hero-about-action-button {
        margin-top: 17px;
    }
}

/* Readability rule: homepage copy must never render smaller than 15px. */
.hero-homepage :where(
    p,
    li,
    label,
    legend,
    input,
    select,
    textarea,
    button,
    a,
    time,
    small,
    .hero-campaign-kicker,
    .hero-campaign-form-heading span,
    .hero-card-meta,
    .hero-news-badge,
    .hero-achievement-badge,
    .hero-value-kicker,
    .hero-value-featured-tag,
    .hero-value-quote,
    .hero-facility-detail-label,
    .hero-facility-result,
    .hero-facility-result > span,
    .hero-facility-result small,
    .hero-facility-action,
    .hero-facility-map-note,
    .hero-about-eyebrow,
    .hero-about-action-pill,
    .hero-trust-badges > span
) {
    font-size: 15px !important;
}

/* Keep eyebrow typography independent from every CTA/link rule. */
.hero-homepage .hero-eyebrow {
    font-size: 15px !important;
}

/* Link/button readability is maintained in its own selector family. */
.hero-homepage a {
    font-size: 15px !important;
}

.hero-homepage .hero-campaign-form .consult-optional,
.hero-homepage .hero-campaign-form .consult-input-wrap input::placeholder,
.hero-homepage .hero-campaign-form .consult-input-wrap select,
.hero-homepage .hero-campaign-form .consult-input-wrap textarea::placeholder {
    font-size: 15px !important;
}

.hero-about-action {
    display: none !important;
}

/* About hover is intentionally limited to the single featured card. */
#about .hero-value-card:not(.hero-value-card--featured):hover .hero-value-card-decoration {
    transform: none;
}

#about .hero-value-card--featured {
    position: relative;
    isolation: isolate;
    overflow: visible;
}

#about .hero-value-card--featured::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(197, 232, 255, .78), rgba(231, 246, 255, .3) 58%, rgba(255, 255, 255, 0));
    content: "";
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .45s ease;
}

#about .hero-value-card--featured:hover::before,
#about .hero-value-card--featured:has(.hero-value-featured-tag:hover)::before {
    transform: scaleX(1);
}

#about .hero-value-card--featured:hover {
    border-color: #72bdf4;
    box-shadow: 0 18px 38px rgba(30, 115, 190, .18);
}

#about .hero-value-card--featured:hover .hero-value-featured-tag,
#about .hero-value-card--featured:has(.hero-value-featured-tag:hover) .hero-value-featured-tag {
    color: #0e5a9b;
    background: #c5e8ff;
}

.hero-value-card-topline {
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 52px;
    margin-bottom: 19px;
}

.hero-value-card-topline .hero-value-icon {
    margin: 0;
}

.hero-value-card-topline .hero-value-kicker {
    margin: 0;
}

#about .hero-value-card--featured .hero-value-list,
#about .hero-value-card--featured .hero-value-footer {
    border-top: 0;
}

#about .hero-value-card--featured .hero-value-list {
    padding-top: 0;
}

#about .hero-value-card--featured .hero-value-footer {
    padding-top: 0;
}

.hero-value-footer {
    width: 100%;
    justify-content: center;
    min-height: 40px;
    margin-right: auto;
    margin-left: auto;
    padding: 9px 14px;
    border: 1px solid #a6d3f2;
    border-radius: 9px;
    background: rgba(255, 255, 255, .72);
    text-align: center;
}

.hero-value-footer:hover {
    color: var(--hero-blue);
    border-color: #76b9ed;
    background: #eff8ff;
}

/* Keep other homepage cards calm until they have a deliberate interaction. */
.hero-news-card:hover {
    transform: none;
    box-shadow: 0 13px 34px rgba(22, 42, 91, .08);
}

.hero-news-card:hover img {
    transform: none;
}

@media (max-width: 767.98px) {
    .hero-value-card-topline {
        gap: 13px;
    }

    .hero-value-card-topline .hero-value-kicker {
        font-size: 15px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #about .hero-value-card--featured::before {
        transition: none;
    }
}

/* Final About interaction: all three cards use the same lift-only hover. */
#about .hero-value-card,
#about .hero-value-card--featured {
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

#about .hero-value-card:hover,
#about .hero-value-card--featured:hover {
    border-color: #9bc9ec !important;
    color: #132448 !important;
    background: #fff !important;
    box-shadow: 0 20px 40px rgba(30, 115, 190, .16);
    transform: translateY(-8px);
}

#about .hero-value-list,
#about .hero-value-list li {
    border-top: 0 !important;
}

#about .hero-value-card:hover .hero-value-card-decoration,
#about .hero-value-card--featured:hover .hero-value-card-decoration {
    transform: none;
}

#about .hero-value-card--featured::before,
#about .hero-value-card--featured:hover::before,
#about .hero-value-card--featured:has(.hero-value-featured-tag:hover)::before {
    display: none;
    transform: none;
}

#about .hero-value-card i:hover,
#about .hero-value-card .hero-value-check i:hover {
    color: inherit !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

#about .hero-value-featured-tag:hover {
    color: #fff !important;
    border-color: transparent !important;
    background: var(--hero-blue) !important;
    transform: none !important;
}

#about .hero-value-footer:hover,
#about .hero-value-footer:focus-visible {
    color: var(--hero-sky) !important;
    border-color: #f2f5f7 !important;
    background: rgba(3, 132, 238, 0.72) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Floating consultation card on the campaign banner. */
.hero-campaign-form-wrap {
    top: 50%;
    right: max(24px, calc((100% - 1220px) / 2));
    width: min(370px, 31vw);
    transform: translateY(-50%);
}

.hero-campaign-form {
    position: relative;
    overflow: hidden;
    padding: 20px 20px 16px;
    border: 1px solid rgba(38, 37, 115, .28);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(248, 253, 252, .98) 0%, rgba(255, 255, 255, .97) 58%, rgba(244, 249, 255, .97) 100%);
    box-shadow: 0 22px 58px rgba(15, 34, 82, .32), 0 0 0 6px rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px);
}

.hero-campaign-form::after {
    position: absolute;
    right: -58px;
    bottom: -82px;
    width: 190px;
    height: 150px;
    border: 1px solid rgba(30, 115, 190, .09);
    border-radius: 50%;
    background: rgba(30, 115, 190, .045);
    content: "";
    pointer-events: none;
}

.hero-campaign-form > * {
    position: relative;
    z-index: 1;
}

.hero-campaign-form-heading {
    margin-bottom: 15px;
}

.hero-campaign-form-heading span,
.hero-campaign-form-heading h2 {
    font-weight: 850;
}

.hero-campaign-form-heading span {
    color: var(--hero-navy);
    font-size: .94rem;
}

.hero-campaign-form-heading h2 {
    margin-top: 4px;
    color: #e33547;
    font-size: 1.18rem;
    line-height: 1.2;
}

.hero-campaign-form .consult-form {
    gap: 9px;
}

.hero-campaign-form .consult-field > label,
.hero-campaign-form .consult-fieldset legend {
    margin-bottom: 5px;
    color: #4d5978;
    font-size: .84rem !important;
    font-weight: 750;
}

.hero-campaign-form .consult-input-wrap {
    min-height: 50px;
    border: 1px solid #d7e3f1;
    border-radius: 12px;
    background: rgba(255, 255, 255, .88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 1px 2px rgba(38, 37, 115, .04);
}

.hero-campaign-form .consult-input-wrap:focus-within {
    border-color: var(--hero-blue);
    box-shadow: 0 0 0 3px rgba(30, 115, 190, .12);
}

.hero-campaign-form .consult-input-wrap > i {
    top: 50%;
    left: 15px;
    width: 22px;
    color: var(--hero-blue);
    font-size: .75rem;
    text-align: center;
    transform: translateY(-50%);
}

.hero-campaign-form .consult-input-wrap input,
.hero-campaign-form .consult-input-wrap select {
    min-height: 50px;
    padding: 11px 14px 11px 42px !important;
    color: var(--hero-ink);
    font-size: .84rem !important;
}

.hero-campaign-form .consult-input-wrap textarea {
    min-height: 82px;
    padding: 12px 14px 11px 42px !important;
    color: var(--hero-ink);
    font-size: .84rem !important;
}

.hero-campaign-form .consult-textarea-wrap > i {
    top: 17px;
    transform: none;
}

.hero-campaign-form .consult-location-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.hero-campaign-form .consult-location-grid .consult-input-wrap > i {
    left: 12px;
    width: 18px;
}

.hero-campaign-form .consult-location-grid input {
    padding-right: 8px !important;
    padding-left: 34px !important;
}

.hero-campaign-form .consult-submit {
    min-height: 46px;
    margin-top: 3px;
    border: 0;
    border-radius: 13px;
    background: var(--hero-navy);
    box-shadow: 0 10px 20px rgba(38, 37, 115, .24);
    animation: none;
    font-size: .84rem !important;
}

.hero-campaign-form .consult-submit:hover,
.hero-campaign-form .consult-submit:focus-visible {
    background: var(--hero-blue);
    box-shadow: 0 13px 24px rgba(30, 115, 190, .25);
    transform: translateY(-2px);
}

@media (max-width: 1199.98px) {
    .hero-campaign-form-wrap {
        right: 30px;
        width: min(370px, 33vw);
    }
}

@media (max-width: 991.98px) {
    .hero-campaign-form-wrap {
        position: absolute;
        top: auto;
        right: 24px;
        bottom: 26px;
        left: 24px;
        width: auto;
        transform: none;
    }

    .hero-campaign-form {
        max-width: 480px;
        margin: 0 auto;
    }
}

@media (max-width: 767.98px) {
    .hero-campaign-form-wrap {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        margin: 0 14px 18px;
        transform: none;
    }

    .hero-campaign-form {
        padding: 18px 16px 16px;
        border-radius: 20px;
    }

    .hero-campaign-form-heading {
        margin-bottom: 11px;
    }

    .hero-campaign-form-heading span {
        font-size: .84rem;
    }

    .hero-campaign-form-heading h2 {
        font-size: 1.04rem;
    }

    .hero-campaign-form .consult-form {
        gap: 8px;
    }

    .hero-campaign-form .consult-input-wrap,
    .hero-campaign-form .consult-input-wrap input,
    .hero-campaign-form .consult-input-wrap select {
        min-height: 50px;
    }

    .hero-campaign-form .consult-input-wrap textarea {
        min-height: 82px;
    }

    .hero-campaign-form .consult-location-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 359.98px) {
    .hero-campaign-form .consult-location-grid {
        grid-template-columns: 1fr;
    }
}

/* About section final visual treatment. Keep the UI stack complete so it
   remains predictable on Windows, macOS, Linux and mobile devices. */
:root {
    --hero-ui-font: "Source Sans 3", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --hero-headline-font: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --hero-card-body-font: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

#about {
    padding: 72px 0 84px;
    background: #f8f9fa;
}

#about::before {
    display: none;
}

#about > .container {
    width: min(calc(100% - 48px), 1160px);
    max-width: 1160px;
    padding-right: 0;
    padding-left: 0;
}

#about *:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) {
    font-family: var(--hero-ui-font) !important;
}

#about .hero-about-heading {
    max-width: 840px;
    margin-bottom: 50px !important;
}

#about .hero-about-eyebrow {
    gap: 7px;
    padding: 5px 12px;
    border: 0;
    background: #eef5ff;
    box-shadow: none;
}

#about .hero-about-eyebrow > i {
    color: var(--hero-blue);
    font-size: .7rem;
}

#about .hero-about-eyebrow-label:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) {
    color: #0064a9;
    font-size: 15px !important;
    line-height: 20px;
    font-weight: 800;
    letter-spacing: .02em;
}

#about .hero-about-title:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) {
    max-width: 760px;
    margin: 15px auto 0 !important;
    color: #0074bd !important;
    font-family: var(--hero-headline-font) !important;
    font-size: clamp(34px, 3.3vw, 40px) !important;
    font-weight: 700 !important;
    letter-spacing: -.025em;
    line-height: 1.2 !important;
    white-space: normal !important;
}

#about .hero-about-heading > p:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) {
    max-width: 700px;
    margin-top: 17px;
    color: #53627d;
    font-size: 16px !important;
    line-height: 1.55;
}

#about .hero-about-heading > p strong {
    color: #142443;
    font-weight: 800;
}

#about .hero-trust-badges {
    gap: 10px 14px;
    margin-top: 23px;
}

#about .hero-trust-badges > span:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) {
    gap: 8px;
    padding: 8px 16px;
    color: #191c1d;
    border: 1px solid #c1c7d3;
    border-radius: 999px;
    background: #e7e8e9;
    box-shadow: none;
    font-size: 14px !important;
    font-weight: 700;
}

#about .hero-trust-badges span i {
    font-size: .7rem;
}

#about .hero-value-grid {
    gap: 38px;
}

#about .hero-value-card,
#about .hero-value-card--featured {
    min-height: 516px;
    padding: 38px 38px 38px;
    overflow: hidden;
    border: 1px solid #dfe3e8;
    border-radius: 18px;
    background: #fafbfc;
    box-shadow: 0 10px 22px rgba(15, 31, 56, .08);
}

#about .hero-value-card::after,
#about .hero-value-card-decoration {
    display: none !important;
}

#about .hero-value-card-main {
    width: 100%;
}

#about .hero-value-card-topline {
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 40px;
    margin-bottom: 35px;
}

#about .hero-value-card-topline .hero-value-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 0;
    border-radius: 12px;
    background: #005a9c;
    box-shadow: none;
    font-size: .92rem;
}

#about .hero-value-kicker:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) {
    margin-bottom: 0;
    color: #0064a9;
    font-size: 12px !important;
    font-weight: 800;
    letter-spacing: .07em;
    text-align: right;
}

#about .hero-value-card h3:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) {
    min-height: 58px;
    margin: 0 0 22px;
    color: #111827;
    font-family: var(--hero-headline-font) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.45;
    letter-spacing: 0;
}

#about .hero-value-list {
    padding: 0 !important;
    border-top: 0;
}

#about .hero-value-card .hero-value-list li,
#about .hero-value-card .hero-value-list li + li {
    align-items: flex-start;
    gap: 10px;
    margin-top: 0;
    padding: 0;
    color: #414751;
    font-size: 15px !important;
    line-height: 1.5;
}

#about .hero-value-card .hero-value-list li + li {
    margin-top: 16px;
}

#about .hero-value-card .hero-value-list li > span:not(.hero-value-check):not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i),
#about .hero-value-card .hero-value-list li > span:not(.hero-value-check):not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) strong {
    font-family: var(--hero-card-body-font) !important;
    font-size: 15px !important;
    line-height: 1.5;
}

#about .hero-value-check {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
    margin-top: 2px;
    color: #0074bd;
    border: 1px solid #0074bd;
    background: transparent;
    font-size: .5rem;
}

#about .hero-value-list strong {
    color: #17233d;
    font-weight: 800;
}

#about .hero-value-quote {
    gap: 8px !important;
    margin-top: 20px !important;
    padding: 11px 12px !important;
    color: #566984 !important;
    border: 1px solid #e0e8f2 !important;
    border-left: 4px solid #1676ba !important;
    border-radius: 12px;
    background: #f0f5ff;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

#about .hero-value-quote > i {
    color: #1676ba;
    font-size: .62rem;
}

#about .hero-value-card--featured {
    border: 1px solid #0074bd;
    background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
    box-shadow: 0 10px 24px rgba(0, 106, 173, .12);
}

#about .hero-value-featured-tag {
    top: 0;
    right: 0;
    left: auto;
    padding: 7px 17px;
    border-radius: 0 18px 0 16px;
    background: #005a9c;
    box-shadow: none;
    font-size: 12px !important;
}

#about .hero-value-footer {
    justify-content: center;
    min-height: 40px;
    margin-top: 24px;
    padding: 9px 14px !important;
    color: #005a9c;
    border: 1px solid #0074bd;
    border-radius: 10px;
    background: transparent;
    font-size: 14px !important;
    line-height: 1.2;
    text-align: center;
}

/* The policy CTA has its own hook so it can be tuned without touching
   eyebrow labels or the other card actions. */
#about .hero-value-footer--policy:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) {
    color: #005a9c;
    border-color: #0074bd;
    background: transparent;
    font-family: var(--hero-card-body-font) !important;
    font-size: 15px !important;
}

#about .hero-value-footer i {
    margin-left: 2px;
}

#about .hero-value-card--featured .hero-value-footer {
    color: #fff;
    border-color: #005a9c;
    background: #005a9c;
    box-shadow: 0 7px 14px rgba(0, 106, 173, .2);
}

#about .hero-value-footer:hover,
#about .hero-value-footer:focus-visible {
    color: #005a9c;
    border-color: #005a9c;
    background: #eef7ff;
    box-shadow: none;
    transform: none;
}

#about .hero-value-card--featured .hero-value-footer:hover,
#about .hero-value-card--featured .hero-value-footer:focus-visible {
    color: #fff;
    border-color: #00497f;
    background: #00497f;
}

#about .hero-value-footer--policy:hover,
#about .hero-value-footer--policy:focus-visible {
    color: #005a9c;
    border-color: #005a9c;
    background: #eef7ff;
}

@media (max-width: 991.98px) {
    #about > .container {
        width: min(calc(100% - 32px), 760px);
        max-width: 760px;
    }

    #about .hero-value-grid {
        gap: 22px;
    }

    #about .hero-value-card,
    #about .hero-value-card--featured {
        min-height: 500px;
        padding: 30px 28px 28px;
    }
}

@media (max-width: 767.98px) {
    #about {
        padding: 56px 0 64px;
    }

    #about > .container {
        width: calc(100% - 32px);
    }

    #about .hero-about-heading {
        margin-bottom: 36px !important;
    }

    #about .hero-about-title:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) {
        max-width: 360px;
        font-size: 28px !important;
        line-height: 1.28 !important;
    }

    #about .hero-about-heading > p:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) {
        max-width: 360px;
        margin-top: 15px;
        font-size: 16px !important;
        line-height: 1.5;
    }

    #about .hero-trust-badges {
        gap: 8px;
        margin-top: 20px;
    }

    #about .hero-trust-badges > span:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) {
        padding: 6px 10px;
        font-size: 12px !important;
    }

    #about .hero-value-grid {
        display: block;
    }

    #about .hero-value-card,
    #about .hero-value-card--featured {
        min-height: 0;
        margin: 0 0 16px !important;
        padding: 30px 24px 24px;
    }

    #about .hero-value-card-topline {
        margin-bottom: 27px;
    }

    #about .hero-value-card h3:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) {
        min-height: 0;
        margin-bottom: 18px;
        font-size: 16px !important;
    }

    #about .hero-value-card .hero-value-list li,
    #about .hero-value-card .hero-value-list li + li {
        font-size: 15px !important;
    }

    #about .hero-value-featured-tag {
        padding: 6px 12px;
        font-size: 12px !important;
    }
}

/* Each value card gets an independent left-to-right colour sweep on hover. */
#about .hero-value-card {
    isolation: isolate;
    transition: transform .28s ease, border-color .35s ease, box-shadow .35s ease;
}

#about .hero-value-card::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    content: "";
    border-radius: inherit;
    background: linear-gradient(100deg, #005a9c 0%, #0074bd 100%);
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .72s cubic-bezier(.22, .61, .36, 1);
}

#about .hero-value-card:hover,
#about .hero-value-card:focus-within {
    border-color: #005a9c;
    box-shadow: 0 15px 30px rgba(0, 90, 156, .2);
}

#about .hero-value-card:hover::before,
#about .hero-value-card:focus-within::before {
    transform: scaleX(1);
}

/* Replace the old featured-only pseudo-element rule so card 2 uses the same sweep. */
#about .hero-value-card--featured::before {
    display: block;
}

#about .hero-value-card--featured:hover::before,
#about .hero-value-card--featured:focus-within::before {
    display: block;
    transform: scaleX(1);
}

#about .hero-value-card .hero-value-kicker,
#about .hero-value-card h3,
#about .hero-value-card .hero-value-list li,
#about .hero-value-card .hero-value-list strong,
#about .hero-value-card .hero-value-quote,
#about .hero-value-card .hero-value-check,
#about .hero-value-card .hero-value-footer {
    transition: color .45s ease, border-color .45s ease, background-color .45s ease;
}

/* Keep copy passive while the card itself is hovered. */
#about .hero-value-card .hero-value-list li:hover,
#about .hero-value-card .hero-value-list li:focus-within,
#about .hero-value-card .hero-value-list li > span:hover,
#about .hero-value-card .hero-value-list li > span:focus,
#about .hero-value-card .hero-value-list li > span:focus-visible {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

#about .hero-value-card .hero-value-check,
#about .hero-value-card .hero-value-quote {
    color: #566984 !important;
    border-color: #e0e8f2 !important;
    background: #f0f5ff;
}

#about .hero-value-card .hero-value-check {
    color: #0074bd !important;
    border-color: #0074bd !important;
    background: transparent;
}

#about .hero-value-card .hero-value-icon,
#about .hero-value-card .hero-value-icon i {
    color: #111827 !important;
    transform: none !important;
}

#about .hero-value-card .hero-value-icon {
    background: #eef5ff !important;
}

#about .hero-value-card .hero-value-kicker,
#about .hero-value-card h3,
#about .hero-value-card .hero-value-list li,
#about .hero-value-card .hero-value-list li > span:not(.hero-value-check),
#about .hero-value-card .hero-value-list strong,
#about .hero-value-card .hero-value-icon,
#about .hero-value-card .hero-value-icon i {
    transform: none !important;
    transition: none !important;
}

#about .hero-value-card .hero-value-quote {
    border-left-color: #1676ba !important;
}

#about .hero-value-card--featured:hover .hero-value-featured-tag,
#about .hero-value-card--featured:has(.hero-value-featured-tag:hover) .hero-value-featured-tag {
    color: #fff !important;
    border-color: transparent !important;
    background: rgba(255, 255, 255, .14) !important;
    transform: none !important;
}

/* Card hover owns the colour change. Copy, labels and icons stay still and
   have no independent hover background or transform. */
#about .hero-value-card:hover .hero-value-kicker,
#about .hero-value-card:focus-within .hero-value-kicker,
#about .hero-value-card:hover h3,
#about .hero-value-card:focus-within h3,
#about .hero-value-card:hover .hero-value-list li,
#about .hero-value-card:focus-within .hero-value-list li,
#about .hero-value-card:hover .hero-value-list li > span:not(.hero-value-check),
#about .hero-value-card:focus-within .hero-value-list li > span:not(.hero-value-check),
#about .hero-value-card:hover .hero-value-list strong,
#about .hero-value-card:focus-within .hero-value-list strong,
#about .hero-value-card:hover .hero-value-quote,
#about .hero-value-card:focus-within .hero-value-quote,
#about .hero-value-card:hover .hero-value-featured-tag,
#about .hero-value-card:focus-within .hero-value-featured-tag {
    color: #fff !important;
}

#about .hero-value-card:hover .hero-value-quote,
#about .hero-value-card:focus-within .hero-value-quote {
    border-color: rgba(255, 255, 255, .55) !important;
    border-left-color: #fff !important;
    background: rgba(255, 255, 255, .14) !important;
}

#about .hero-value-card:hover .hero-value-check,
#about .hero-value-card:focus-within .hero-value-check,
#about .hero-value-card:hover .hero-value-check i,
#about .hero-value-card:focus-within .hero-value-check i,
#about .hero-value-card:hover .hero-value-quote > i,
#about .hero-value-card:focus-within .hero-value-quote > i,
#about .hero-value-card:hover .hero-value-icon,
#about .hero-value-card:focus-within .hero-value-icon,
#about .hero-value-card:hover .hero-value-icon i,
#about .hero-value-card:focus-within .hero-value-icon i {
    color: #fff !important;
}

#about .hero-value-card:hover .hero-value-check,
#about .hero-value-card:focus-within .hero-value-check {
    border-color: rgba(255, 255, 255, .85) !important;
    background: transparent !important;
}

#about .hero-value-card:hover .hero-value-icon,
#about .hero-value-card:focus-within .hero-value-icon {
    background: rgba(255, 255, 255, .14) !important;
}

#about .hero-value-card:hover .hero-value-check i,
#about .hero-value-card:focus-within .hero-value-check i,
#about .hero-value-card:hover .hero-value-quote > i,
#about .hero-value-card:focus-within .hero-value-quote > i,
#about .hero-value-card:hover .hero-value-icon i,
#about .hero-value-card:focus-within .hero-value-icon i {
    transform: none !important;
}

#about .hero-value-card:hover .hero-value-footer,
#about .hero-value-card:focus-within .hero-value-footer {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .85) !important;
    background: transparent !important;
}

/* Keep the CTA as the only element with its own button hover treatment. */
#about .hero-value-card .hero-value-footer:hover,
#about .hero-value-card .hero-value-footer:focus-visible {
    color: #fff !important;
    border-color: #fff !important;
    background: rgba(255, 255, 255, .16) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Resting cards keep their copy and iconography dark for clear contrast. */
#about .hero-value-card:not(:hover):not(:focus-within) .hero-value-kicker,
#about .hero-value-card:not(:hover):not(:focus-within) h3,
#about .hero-value-card:not(:hover):not(:focus-within) .hero-value-list li,
#about .hero-value-card:not(:hover):not(:focus-within) .hero-value-list li > span:not(.hero-value-check),
#about .hero-value-card:not(:hover):not(:focus-within) .hero-value-list strong,
#about .hero-value-card:not(:hover):not(:focus-within) .hero-value-quote,
#about .hero-value-card:not(:hover):not(:focus-within) .hero-value-featured-tag {
    color: #111827 !important;
}

#about .hero-value-card:not(:hover):not(:focus-within) .hero-value-check,
#about .hero-value-card:not(:hover):not(:focus-within) .hero-value-check i,
#about .hero-value-card:not(:hover):not(:focus-within) .hero-value-quote > i,
#about .hero-value-card:not(:hover):not(:focus-within) .hero-value-icon,
#about .hero-value-card:not(:hover):not(:focus-within) .hero-value-icon i {
    color: #111827 !important;
}

#about .hero-value-card:not(:hover):not(:focus-within) .hero-value-check {
    border-color: #111827 !important;
    background: transparent !important;
}

#about .hero-value-card:not(:hover):not(:focus-within) .hero-value-icon,
#about .hero-value-card:not(:hover):not(:focus-within) .hero-value-featured-tag {
    background: #eef5ff !important;
}

#about .hero-value-card:not(:hover):not(:focus-within) .hero-value-footer,
#about .hero-value-card:not(:hover):not(:focus-within) .hero-value-footer i {
    color: #111827 !important;
}

#about .hero-value-card:not(:hover):not(:focus-within) .hero-value-footer {
    border-color: #111827 !important;
    background: #eef5ff !important;
}

/* The sweep is the only card-content animation; copy and icons do not animate
   independently when the pointer passes over them. */
#about .hero-value-card .hero-value-check,
#about .hero-value-card .hero-value-quote,
#about .hero-value-card .hero-value-quote > i,
#about .hero-value-card .hero-value-featured-tag {
    transition: none !important;
}

/* Final value-card colour exceptions from the design. */
#about .hero-value-kicker {
    color: #0064a9 !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: .05em;
}

#about .hero-value-card-topline .hero-value-icon,
#about .hero-value-card-topline .hero-value-icon i {
    color: #fff !important;
}

#about .hero-value-card-topline .hero-value-icon {
    background: #005a9c !important;
}

#about .hero-value-card:hover .hero-value-card-topline .hero-value-icon,
#about .hero-value-card:focus-within .hero-value-card-topline .hero-value-icon {
    color: #fff !important;
    background: rgba(255, 255, 255, .24) !important;
}

#about .hero-value-card:hover .hero-value-card-topline .hero-value-icon i,
#about .hero-value-card:focus-within .hero-value-card-topline .hero-value-icon i {
    color: #fff !important;
}

#about .hero-value-featured-tag,
#about .hero-value-card--featured:not(:hover):not(:focus-within) .hero-value-featured-tag {
    color: #fff !important;
    background: #005a9c !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

#about .hero-value-card--featured:hover .hero-value-featured-tag,
#about .hero-value-card--featured:focus-within .hero-value-featured-tag,
#about .hero-value-card--featured:has(.hero-value-featured-tag:hover) .hero-value-featured-tag {
    color: #fff !important;
    background: rgba(255, 255, 255, .24) !important;
}

#about .hero-value-card--featured .hero-value-featured-tag:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) {
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

/* Button typography and colours remain independent from card-copy rules. */
#about .hero-value-footer {
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

#about .hero-value-card--featured .hero-value-footer,
#about .hero-value-card--featured .hero-value-footer i {
    color: #fff !important;
}

#about .hero-value-card--featured .hero-value-footer {
    border-color: #005a9c !important;
    background: #005a9c !important;
}

#about .hero-value-card--featured .hero-value-footer:hover,
#about .hero-value-card--featured .hero-value-footer:focus-visible {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .82) !important;
    background: rgba(255, 255, 255, .24) !important;
}

#about .hero-value-card--featured .hero-value-footer:hover i,
#about .hero-value-card--featured .hero-value-footer:focus-visible i {
    color: #fff !important;
}

#about .hero-value-footer[href="#programs"],
#about .hero-value-footer[href="#programs"] i {
    color: #005a9c !important;
}

#about .hero-value-footer[href="#programs"] {
    border-color: #0074bd !important;
    background: #fff !important;
}

#about .hero-value-footer[href="#programs"]:hover,
#about .hero-value-footer[href="#programs"]:focus-visible {
    color: #005a9c !important;
    border-color: #0074bd !important;
    background: #eef7ff !important;
}

#about .hero-value-footer[href="#programs"]:hover i,
#about .hero-value-footer[href="#programs"]:focus-visible i {
    color: #005a9c !important;
}

/* Higher-specificity overrides keep the requested values ahead of the older
   generic About rules that also target these elements. */
#about .hero-value-card .hero-value-kicker:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) {
    color: #0064a9 !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 15px !important;
}

#about .hero-value-card:hover .hero-value-kicker:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i),
#about .hero-value-card:focus-within .hero-value-kicker:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) {
    color: #0064a9 !important;
}

#about .hero-value-card:not(:hover):not(:focus-within) .hero-value-card-topline .hero-value-icon,
#about .hero-value-card:not(:hover):not(:focus-within) .hero-value-card-topline .hero-value-icon i {
    color: #fff !important;
}

#about .hero-value-card:not(:hover):not(:focus-within) .hero-value-card-topline .hero-value-icon {
    background: #005a9c !important;
}

#about .hero-value-card .hero-value-footer {
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

#about .hero-value-card .hero-value-footer:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) {
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

#about .hero-value-card--featured:not(:hover):not(:focus-within) .hero-value-footer,
#about .hero-value-card--featured:not(:hover):not(:focus-within) .hero-value-footer i {
    color: #fff !important;
}

#about .hero-value-card--featured:not(:hover):not(:focus-within) .hero-value-footer {
    border-color: #005a9c !important;
    background: #005a9c !important;
}

#about .hero-value-card:not(:hover):not(:focus-within) .hero-value-footer[href="#programs"],
#about .hero-value-card:not(:hover):not(:focus-within) .hero-value-footer[href="#programs"] i {
    color: #005a9c !important;
}

#about .hero-value-card:not(:hover):not(:focus-within) .hero-value-footer[href="#programs"] {
    border-color: #0074bd !important;
    background: #fff !important;
}

/* Pillar labels stay blue at rest and turn white with the card sweep. */
#about .hero-value-card:hover .hero-value-kicker:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i),
#about .hero-value-card:focus-within .hero-value-kicker:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) {
    color: #fff !important;
}

/* Policy CTA follows the same white-surface/blue-copy treatment as the
   programme CTA, including while its card is hovered. */
#about .hero-value-card .hero-value-footer--policy:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i),
#about .hero-value-card .hero-value-footer--policy:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) i {
    color: #005a9c !important;
}

#about .hero-value-card .hero-value-footer--policy:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) {
    border-color: #0074bd !important;
    background: #fff !important;
}

#about .hero-value-card .hero-value-footer--policy:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i):hover,
#about .hero-value-card .hero-value-footer--policy:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i):focus-visible {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .82) !important;
    background: rgba(255, 255, 255, .24) !important;
}

#about .hero-value-card .hero-value-footer--policy:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i):hover i,
#about .hero-value-card .hero-value-footer--policy:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i):focus-visible i {
    color: #fff !important;
}

/* Only the programme CTA chevron changes to white on direct button hover. */
#about .hero-value-footer[href="#programs"]:hover i,
#about .hero-value-footer[href="#programs"]:focus-visible i {
    color: #fff !important;
}

/* The programme chevron is white for card hover, but stays blue on direct
   button hover. */
#about .hero-value-card:hover .hero-value-footer[href="#programs"]:not(:hover) i,
#about .hero-value-card:focus-within .hero-value-footer[href="#programs"]:not(:hover):not(:focus-visible) i {
    color: #fff !important;
}

#about .hero-value-card:hover .hero-value-footer[href="#programs"]:hover i,
#about .hero-value-card:hover .hero-value-footer[href="#programs"]:focus-visible i,
#about .hero-value-card:focus-within .hero-value-footer[href="#programs"]:hover i,
#about .hero-value-card:focus-within .hero-value-footer[href="#programs"]:focus-visible i {
    color: #fff !important;
}

/* Language parity: Google Translate wraps EN copy in generated <font>
   elements. Give those wrappers the same typography and state colours as
   their original VI containers, including the CTA-specific hover states. */
#about .hero-value-card .hero-value-kicker font[dir="auto"] {
    color: #0064a9 !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
}

#about .hero-value-card h3 font[dir="auto"] {
    color: #111827 !important;
    font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif !important;
}

#about .hero-value-card .hero-value-list li > span:not(.hero-value-check) font[dir="auto"],
#about .hero-value-card .hero-value-list strong font[dir="auto"] {
    color: #111827 !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
}

#about .hero-value-card .hero-value-quote font[dir="auto"] {
    color: #111827 !important;
    font-family: "Source Sans 3", ui-sans-serif, system-ui, sans-serif !important;
}

#about .hero-value-card .hero-value-featured-tag font[dir="auto"] {
    color: #fff !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
}

#about .hero-value-card .hero-value-footer font[dir="auto"] {
    color: #005a9c !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
}

#about .hero-value-card--featured .hero-value-footer font[dir="auto"] {
    color: #fff !important;
}

#about .hero-value-card:hover .hero-value-kicker font[dir="auto"],
#about .hero-value-card:focus-within .hero-value-kicker font[dir="auto"],
#about .hero-value-card:hover h3 font[dir="auto"],
#about .hero-value-card:focus-within h3 font[dir="auto"],
#about .hero-value-card:hover .hero-value-list li > span:not(.hero-value-check) font[dir="auto"],
#about .hero-value-card:focus-within .hero-value-list li > span:not(.hero-value-check) font[dir="auto"],
#about .hero-value-card:hover .hero-value-list strong font[dir="auto"],
#about .hero-value-card:focus-within .hero-value-list strong font[dir="auto"],
#about .hero-value-card:hover .hero-value-quote font[dir="auto"],
#about .hero-value-card:focus-within .hero-value-quote font[dir="auto"],
#about .hero-value-card:hover .hero-value-featured-tag font[dir="auto"],
#about .hero-value-card:focus-within .hero-value-featured-tag font[dir="auto"],
#about .hero-value-card:hover .hero-value-footer font[dir="auto"],
#about .hero-value-card:focus-within .hero-value-footer font[dir="auto"] {
    color: #fff !important;
}

#about .hero-value-card .hero-value-footer--policy font[dir="auto"],
#about .hero-value-card .hero-value-footer[href="#programs"] font[dir="auto"] {
    color: #005a9c !important;
}

#about .hero-value-card .hero-value-footer--policy:hover font[dir="auto"],
#about .hero-value-card .hero-value-footer--policy:focus-visible font[dir="auto"],
#about .hero-value-card .hero-value-footer[href="#programs"]:hover font[dir="auto"],
#about .hero-value-card .hero-value-footer[href="#programs"]:focus-visible font[dir="auto"] {
    color: #fff !important;
}

#about .hero-value-card--featured .hero-value-footer:hover font[dir="auto"],
#about .hero-value-card--featured .hero-value-footer:focus-visible font[dir="auto"] {
    color: #fff !important;
}

/* Active achievement-card override. Keep this block at the real end of the
   stylesheet so legacy achievement rules cannot overwrite the new sample. */
#achievements {
    background: linear-gradient(180deg, #f7fbff 0%, #edf5ff 100%) !important;
}

#achievements .hero-achievement-card {
    min-height: 0 !important;
    border: 2px solid #0b58a9 !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, #0c4aa0 0%, #08347f 100%) !important;
    box-shadow: 0 16px 30px rgba(17, 72, 137, .18) !important;
}

#achievements .hero-achievement-card:nth-child(2) {
    border-color: #f5bd19 !important;
    background: linear-gradient(180deg, #0e4da6 0%, #0a3989 100%) !important;
    box-shadow: 0 18px 34px rgba(195, 146, 15, .2) !important;
}

#achievements .hero-achievement-image {
    height: 255px !important;
    flex: 0 0 255px !important;
    border-bottom: 4px solid #ffbd00 !important;
    background: #0d3c7e !important;
}

#achievements .hero-achievement-image img {
    opacity: 1 !important;
    filter: saturate(.94) contrast(1.02) brightness(.96) !important;
}

#achievements .hero-achievement-image::before {
    z-index: 1 !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(4, 31, 77, .04) 0%, rgba(8, 52, 127, .06) 46%, rgba(5, 43, 109, .13) 100%) !important;
}

#achievements .hero-achievement-image::after {
    z-index: 1 !important;
    inset: 0 !important;
    height: auto !important;
    background: linear-gradient(180deg, transparent 38%, rgba(7, 51, 124, .12) 54%, rgba(5, 42, 105, .78) 100%) !important;
}

#achievements .hero-achievement-media-head {
    top: 13px !important;
    right: 16px !important;
    left: 16px !important;
    z-index: 3 !important;
}

#achievements .hero-achievement-media-title {
    top: auto !important;
    right: 16px !important;
    bottom: 14px !important;
    left: 16px !important;
    z-index: 3 !important;
    align-items: flex-start !important;
    padding-right: 66px !important;
    text-align: left !important;
}

#achievements .hero-achievement-media-title > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-bottom: 7px !important;
    padding: 4px 9px !important;
    color: #ffe38b !important;
    border: 1px solid rgba(255, 205, 45, .58) !important;
    border-radius: 999px !important;
    background: rgba(5, 43, 104, .7) !important;
    font-size: .62rem !important;
    line-height: 1 !important;
}

#achievements .hero-achievement-media-title > span::before,
#achievements .hero-achievement-media-title > span::after {
    color: #ffca17 !important;
    content: "\2605" !important;
    font-size: .55rem !important;
}

#achievements .hero-achievement-media-title > strong {
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(1.3rem, 2vw, 1.7rem) !important;
    line-height: 1.08 !important;
    text-shadow: 0 2px 5px rgba(1, 20, 58, .45) !important;
}

#achievements .hero-achievement-media-subtitle {
    display: block !important;
    margin-top: 5px !important;
    color: #e5f2ff !important;
    font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .64rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

#achievements .hero-achievement-certificate,
#achievements .hero-achievement-image > .hero-achievement-badge,
#achievements .hero-achievement-body::before {
    display: none !important;
    content: none !important;
}

#achievements .hero-achievement-card:nth-child(2) .hero-achievement-featured-mark {
    top: 13px !important;
    right: 84px !important;
}

#achievements .hero-achievement-score {
    top: auto !important;
    right: 12px !important;
    bottom: 14px !important;
    z-index: 4 !important;
    width: 51px !important;
    height: 51px !important;
}

#achievements .hero-achievement-body {
    min-height: 325px !important;
    padding: 24px 24px 25px !important;
    background: linear-gradient(180deg, #0d4a9f 0%, #0a3988 100%) !important;
}

#achievements .hero-achievement-card:nth-child(2) .hero-achievement-body {
    background: linear-gradient(180deg, #0d4a9f 0%, #09357f 100%) !important;
}

#achievements .hero-achievement-highlight {
    margin-bottom: 14px !important;
    padding: 8px 13px !important;
    color: #ffe17e !important;
    border: 1px solid rgba(255, 209, 73, .42) !important;
    border-radius: 8px !important;
    background: rgba(255, 198, 40, .17) !important;
    font-size: .8rem !important;
}

#achievements .hero-achievement-body > .hero-achievement-result {
    min-height: 0 !important;
    color: #fff !important;
    font-size: 1.03rem !important;
    line-height: 1.38 !important;
}

#achievements .hero-achievement-body .hero-card-meta {
    margin: 5px 0 13px !important;
    color: #d8ecff !important;
    font-size: .78rem !important;
    line-height: 1.35 !important;
}

#achievements .hero-achievement-body blockquote {
    margin-top: 12px !important;
    padding: 13px 0 0 15px !important;
    color: #e6f2ff !important;
    border-top-color: rgba(176, 218, 255, .18) !important;
    border-left-color: #ffd000 !important;
    font-size: .86rem !important;
    line-height: 1.52 !important;
}

#achievements .hero-achievement-actions {
    gap: 10px !important;
    padding-top: 16px !important;
}

#achievements .hero-achievement-actions a {
    min-height: 37px !important;
    padding: 8px 13px !important;
    font-size: .67rem !important;
}

#achievements .hero-achievement-actions a:first-child {
    color: #082f74 !important;
    background: linear-gradient(90deg, #ffbe08 0%, #f79408 100%) !important;
}

#achievements .hero-achievement-actions a:first-child:hover,
#achievements .hero-achievement-actions a:first-child:focus-visible {
    color: #082f74 !important;
    background: linear-gradient(90deg, #ffd13a 0%, #ffae22 100%) !important;
}

#achievements .hero-achievement-actions a:last-child {
    color: #e9f5ff !important;
    border-color: rgba(178, 220, 255, .46) !important;
    background: rgba(255, 255, 255, .1) !important;
}

#achievements .hero-achievement-actions a:last-child:hover,
#achievements .hero-achievement-actions a:last-child:focus-visible {
    color: #fff !important;
    border-color: rgba(199, 231, 255, .72) !important;
    background: rgba(255, 255, 255, .18) !important;
}

@media (max-width: 767.98px) {
    #achievements .hero-achievement-image {
        height: 245px !important;
        flex-basis: 245px !important;
    }

    #achievements .hero-achievement-body {
        min-height: 0 !important;
        padding: 22px 21px 24px !important;
    }
}

/* Final achievement-card lock: this block intentionally stays last so the
   reference layout cannot be replaced by the legacy achievement styles. */
#achievements {
    color: #0b3888;
    background: linear-gradient(180deg, #f7fbff 0%, #edf5ff 100%);
}

#achievements .hero-achievement-card {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    border: 2px solid #0b58a9;
    border-radius: 24px;
    background: linear-gradient(180deg, #0c4aa0 0%, #08347f 100%);
    box-shadow: 0 16px 30px rgba(17, 72, 137, .18);
}

#achievements .hero-achievement-card:nth-child(2) {
    border-color: #f5bd19;
    background: linear-gradient(180deg, #0e4da6 0%, #0a3989 100%);
    box-shadow: 0 18px 34px rgba(195, 146, 15, .2);
}

#achievements .hero-achievement-image {
    height: 255px;
    flex: 0 0 255px;
    border-bottom: 4px solid #ffbd00;
    background: #0d3c7e;
}

#achievements .hero-achievement-image img {
    opacity: 1;
    filter: saturate(.94) contrast(1.02) brightness(.96);
    transition: transform .45s ease, filter .45s ease;
}

#achievements .hero-achievement-card:hover .hero-achievement-image img {
    filter: saturate(1) contrast(1.03) brightness(1);
    transform: scale(1.025);
}

#achievements .hero-achievement-image::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 31, 77, .04) 0%, rgba(8, 52, 127, .06) 46%, rgba(5, 43, 109, .13) 100%);
    content: "";
    pointer-events: none;
}

#achievements .hero-achievement-image::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    height: auto;
    background: linear-gradient(180deg, transparent 38%, rgba(7, 51, 124, .12) 54%, rgba(5, 42, 105, .78) 100%);
    content: "";
    pointer-events: none;
}

#achievements .hero-achievement-media-head {
    position: absolute;
    z-index: 3;
    top: 13px;
    right: 16px;
    left: 16px;
}

#achievements .hero-achievement-brand,
#achievements .hero-achievement-media-label {
    padding: 7px 11px;
    color: #0758a5;
    border: 1px solid rgba(7, 88, 165, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 3px 9px rgba(16, 79, 139, .12);
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .62rem !important;
    font-weight: 800;
    letter-spacing: .035em;
    line-height: 1;
}

#achievements .hero-achievement-media-label {
    border-radius: 6px;
    background: rgba(255, 255, 255, .94);
}

#achievements .hero-achievement-media-label--purple {
    color: #7132ac;
    background: rgba(255, 255, 255, .94);
}

#achievements .hero-achievement-card:nth-child(2) .hero-achievement-featured-mark {
    top: 13px;
    right: 84px;
}

#achievements .hero-achievement-media-title {
    top: auto;
    right: 16px;
    bottom: 14px;
    left: 16px;
    z-index: 3;
    align-items: flex-start;
    padding-right: 66px;
    text-align: left;
}

#achievements .hero-achievement-media-title > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 7px;
    padding: 4px 9px;
    color: #ffe38b;
    border: 1px solid rgba(255, 205, 45, .58);
    border-radius: 999px;
    background: rgba(5, 43, 104, .7);
    font-size: .62rem !important;
    letter-spacing: .045em;
    line-height: 1;
}

#achievements .hero-achievement-media-title > span::before,
#achievements .hero-achievement-media-title > span::after {
    color: #ffca17;
    content: "\2605";
    font-size: .55rem;
}

#achievements .hero-achievement-media-title > strong {
    margin: 0;
    color: #fff !important;
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-size: clamp(1.3rem, 2vw, 1.7rem) !important;
    font-weight: 900;
    line-height: 1.08;
    text-shadow: 0 2px 5px rgba(1, 20, 58, .45);
}

#achievements .hero-achievement-media-subtitle {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    color: #e5f2ff !important;
    font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .64rem !important;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#achievements .hero-achievement-certificate,
#achievements .hero-achievement-image > .hero-achievement-badge,
#achievements .hero-achievement-body::before {
    display: none !important;
    content: none !important;
}

#achievements .hero-achievement-score {
    top: auto;
    right: 12px;
    bottom: 14px;
    z-index: 4;
    width: 51px;
    height: 51px;
    color: #082f74;
    border: 2px solid #fff;
    background: #ffc20b;
}

#achievements .hero-achievement-body {
    min-height: 325px;
    padding: 24px 24px 25px;
    color: #fff;
    background: linear-gradient(180deg, #0d4a9f 0%, #0a3988 100%);
}

#achievements .hero-achievement-card:nth-child(2) .hero-achievement-body {
    background: linear-gradient(180deg, #0d4a9f 0%, #09357f 100%);
}

#achievements .hero-achievement-highlight {
    margin-bottom: 14px;
    padding: 8px 13px;
    color: #ffe17e;
    border: 1px solid rgba(255, 209, 73, .42);
    border-radius: 8px;
    background: rgba(255, 198, 40, .17);
    font-size: .8rem !important;
}

#achievements .hero-achievement-body > .hero-achievement-result {
    min-height: 0;
    color: #fff !important;
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-size: 1.03rem !important;
    font-weight: 800;
    line-height: 1.38;
}

#achievements .hero-achievement-body .hero-card-meta {
    margin: 5px 0 13px;
    color: #d8ecff !important;
    font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .78rem !important;
    line-height: 1.35;
}

#achievements .hero-achievement-body blockquote {
    margin-top: 12px;
    padding: 13px 0 0 15px;
    color: #e6f2ff !important;
    border-top-color: rgba(176, 218, 255, .18);
    border-left-color: #ffd000;
    font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .86rem !important;
    line-height: 1.52;
}

#achievements .hero-achievement-actions {
    gap: 10px;
    padding-top: 16px;
}

#achievements .hero-achievement-actions a {
    min-height: 37px;
    padding: 8px 13px;
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .67rem !important;
}

#achievements .hero-achievement-actions a:first-child {
    color: #082f74;
    background: linear-gradient(90deg, #ffbe08 0%, #f79408 100%);
}

#achievements .hero-achievement-actions a:first-child:hover,
#achievements .hero-achievement-actions a:first-child:focus-visible {
    color: #082f74;
    background: linear-gradient(90deg, #ffd13a 0%, #ffae22 100%);
}

#achievements .hero-achievement-actions a:last-child {
    color: #e9f5ff;
    border-color: rgba(178, 220, 255, .46);
    background: rgba(255, 255, 255, .1);
}

#achievements .hero-achievement-actions a:last-child:hover,
#achievements .hero-achievement-actions a:last-child:focus-visible {
    color: #fff;
    border-color: rgba(199, 231, 255, .72);
    background: rgba(255, 255, 255, .18);
}

@media (max-width: 767.98px) {
    #achievements .hero-achievement-image {
        height: 245px;
        flex-basis: 245px;
    }

    #achievements .hero-achievement-body {
        min-height: 0;
        padding: 22px 21px 24px;
    }
}

/* Achievement card visual treatment: keep the supplied photos visible and
   use the reference's photo-led header with a lighter Hero blue palette. */
#achievements {
    background: linear-gradient(180deg, #f7fbff 0%, #edf5ff 100%);
}

#achievements .hero-achievement-card {
    min-height: 0;
    border-color: #0b58a9;
    border-radius: 24px;
    background: linear-gradient(180deg, #0c4aa0 0%, #08347f 100%);
    box-shadow: 0 16px 30px rgba(17, 72, 137, .18);
}

#achievements .hero-achievement-card:nth-child(2) {
    border-color: #f5bd19;
    background: linear-gradient(180deg, #0e4da6 0%, #0a3989 100%);
    box-shadow: 0 18px 34px rgba(195, 146, 15, .2);
}

#achievements .hero-achievement-image {
    height: 255px;
    flex-basis: 255px;
    border-bottom: 4px solid #ffbd00;
    background: #0d3c7e;
}

#achievements .hero-achievement-image img {
    opacity: 1;
    filter: saturate(.9) contrast(1.02) brightness(.9);
    transition: transform .45s ease, filter .45s ease;
}

#achievements .hero-achievement-card:hover .hero-achievement-image img {
    filter: saturate(1) contrast(1.03) brightness(.96);
    transform: scale(1.025);
}

#achievements .hero-achievement-image::before {
    z-index: 1;
    background: linear-gradient(180deg, rgba(4, 31, 77, .12) 0%, rgba(8, 52, 127, .12) 38%, rgba(5, 43, 109, .92) 100%);
}

#achievements .hero-achievement-image::after {
    z-index: 1;
    inset: 0;
    height: auto;
    background: linear-gradient(180deg, transparent 42%, rgba(7, 51, 124, .15) 54%, rgba(5, 42, 105, .88) 100%);
}

#achievements .hero-achievement-media-title {
    top: auto;
    bottom: 14px;
    right: 16px;
    left: 16px;
    align-items: flex-start;
    padding-right: 64px;
    text-align: left;
}

#achievements .hero-achievement-media-title > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 7px;
    padding: 4px 9px;
    color: #ffe38b;
    border: 1px solid rgba(255, 205, 45, .58);
    border-radius: 999px;
    background: rgba(5, 43, 104, .66);
    font-size: .62rem !important;
    letter-spacing: .045em;
    line-height: 1;
}

#achievements .hero-achievement-media-title > span::before,
#achievements .hero-achievement-media-title > span::after {
    color: #ffca17;
    content: "★";
    font-size: .55rem;
}

#achievements .hero-achievement-media-title > strong {
    margin: 0;
    color: #fff;
    font-size: clamp(1.3rem, 2vw, 1.7rem) !important;
    line-height: 1.08;
    text-shadow: 0 2px 5px rgba(1, 20, 58, .45);
}

#achievements .hero-achievement-media-subtitle {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    color: #e5f2ff !important;
    font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .64rem !important;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#achievements .hero-achievement-certificate {
    display: none;
}

#achievements .hero-achievement-score {
    top: auto;
    right: 12px;
    bottom: 14px;
    width: 51px;
    height: 51px;
}

#achievements .hero-achievement-body {
    min-height: 325px;
    padding: 24px 24px 25px;
    background: linear-gradient(180deg, #0d4a9f 0%, #0a3988 100%);
}

#achievements .hero-achievement-card:nth-child(2) .hero-achievement-body {
    background: linear-gradient(180deg, #0d4a9f 0%, #09357f 100%);
}

#achievements .hero-achievement-highlight {
    margin-bottom: 14px;
    padding: 8px 13px;
    color: #ffe17e;
    border: 1px solid rgba(255, 209, 73, .42);
    border-radius: 8px;
    background: rgba(255, 198, 40, .17);
    font-size: .8rem !important;
}

#achievements .hero-achievement-body > .hero-achievement-result {
    min-height: 0;
    color: #fff !important;
    font-size: 1.03rem !important;
    line-height: 1.38;
}

#achievements .hero-achievement-body .hero-card-meta {
    margin: 5px 0 13px;
    color: #d8ecff !important;
    font-size: .78rem !important;
    line-height: 1.35;
}

#achievements .hero-achievement-body blockquote {
    margin-top: 12px;
    padding: 13px 0 0 15px;
    color: #e6f2ff !important;
    border-top-color: rgba(176, 218, 255, .18);
    border-left-color: #ffd000;
    font-size: .86rem !important;
    line-height: 1.52;
}

#achievements .hero-achievement-actions {
    gap: 10px;
    padding-top: 16px;
}

#achievements .hero-achievement-actions a {
    min-height: 37px;
    padding: 8px 13px;
    font-size: .67rem !important;
}

#achievements .hero-achievement-actions a:first-child {
    color: #082f74;
    background: linear-gradient(90deg, #ffbe08 0%, #f79408 100%);
}

#achievements .hero-achievement-actions a:first-child:hover,
#achievements .hero-achievement-actions a:first-child:focus-visible {
    color: #082f74;
    background: linear-gradient(90deg, #ffd13a 0%, #ffae22 100%);
}

#achievements .hero-achievement-actions a:last-child {
    color: #e9f5ff;
    border-color: rgba(178, 220, 255, .46);
    background: rgba(255, 255, 255, .1);
}

#achievements .hero-achievement-actions a:last-child:hover,
#achievements .hero-achievement-actions a:last-child:focus-visible {
    color: #fff;
    border-color: rgba(199, 231, 255, .72);
    background: rgba(255, 255, 255, .18);
}

@media (max-width: 767.98px) {
    #achievements .hero-achievement-image {
        height: 245px;
        flex-basis: 245px;
    }

    #achievements .hero-achievement-body {
        min-height: 0;
        padding: 22px 21px 24px;
    }

    #achievements .hero-achievement-body blockquote {
        font-size: .82rem !important;
    }
}

/* Achievement showcase: bright, centered award cards inspired by the
   supplied reference while keeping the existing photos and copy. */
#achievements {
    color: #0b3888;
    background: linear-gradient(180deg, #f8fcff 0%, #e9f3ff 100%);
}

#achievements::after {
    right: -140px;
    bottom: -170px;
    border-color: rgba(30, 115, 190, .1);
    box-shadow: 0 0 0 35px rgba(30, 115, 190, .04), 0 0 0 70px rgba(30, 115, 190, .025);
}

#achievements .hero-section-heading {
    display: block;
    max-width: 1000px;
    margin: 0 auto clamp(34px, 4vw, 48px);
    text-align: center;
}

#achievements .hero-section-heading-light .hero-eyebrow {
    color: #0a68b8 !important;
}

#achievements .hero-section-heading-light h2 {
    color: #0b3888 !important;
    font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif !important;
    font-size: clamp(2.15rem, 4vw, 3.4rem) !important;
    line-height: 1.15 !important;
}

#achievements .hero-section-heading-light p {
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
    color: #58718f !important;
    font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif !important;
    font-size: 1.08rem !important;
    line-height: 1.65 !important;
}

#achievements .hero-mobile-slider {
    width: 100%;
    max-width: 1232px;
    margin-right: auto;
    margin-left: auto;
}

#achievements .hero-mobile-slider-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 28px;
}

#achievements .hero-achievement-card {
    display: flex;
    min-width: 0;
    min-height: 620px;
    flex-direction: column;
    border: 2px solid #0b4c9a;
    border-radius: 24px;
    background: #0b3888;
    box-shadow: 0 18px 34px rgba(19, 68, 133, .2);
}

#achievements .hero-achievement-card:nth-child(2) {
    border-color: #f5bd19;
    box-shadow: 0 20px 38px rgba(211, 157, 10, .23);
}

#achievements .hero-achievement-image {
    height: 270px;
    flex: 0 0 270px;
    border-bottom: 4px solid #ffbd00;
    background: linear-gradient(180deg, #c7edff 0%, #eaf8ff 100%);
}

#achievements .hero-achievement-image::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 54px;
    background: linear-gradient(180deg, transparent, rgba(4, 55, 125, .25));
    content: "";
    pointer-events: none;
}

#achievements .hero-achievement-image::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: repeating-linear-gradient(180deg, rgba(24, 132, 207, .1) 0 7px, rgba(255, 255, 255, .28) 7px 14px);
    content: "";
    pointer-events: none;
}

#achievements .hero-achievement-image .hero-achievement-badge {
    z-index: 1;
    padding: 8px 13px;
    color: #0758a5;
    border: 1px solid rgba(7, 88, 165, .18);
    background: rgba(255, 255, 255, .94);
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .72rem !important;
    font-weight: 800;
}

#achievements .hero-achievement-card:nth-child(2) .hero-achievement-image .hero-achievement-badge {
    color: #8c5d00;
    border-color: rgba(245, 189, 25, .42);
    background: #fff4bf;
}

#achievements .hero-achievement-card:nth-child(3) .hero-achievement-image .hero-achievement-badge {
    color: #7132ac;
    border-color: rgba(176, 93, 221, .26);
    background: #f8e7ff;
}

#achievements .hero-achievement-body {
    display: flex;
    min-height: 346px;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 25px 25px 27px;
    color: #fff;
    background: #0b3888;
}

#achievements .hero-achievement-card:nth-child(2) .hero-achievement-body {
    background: #093278;
}

#achievements .hero-achievement-body::before {
    display: inline-flex;
    align-self: flex-start;
    margin-bottom: 14px;
    padding: 8px 14px;
    color: #092f73;
    border-radius: 8px;
    background: #ffbe08;
    content: "15/15 KHIÊN CAMBRIDGE";
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .82rem !important;
    font-weight: 800;
    line-height: 1.2;
}

#achievements .hero-achievement-card:nth-child(2) .hero-achievement-body::before {
    content: "IELTS 7.5 OVERALL";
}

#achievements .hero-achievement-card:nth-child(3) .hero-achievement-body::before {
    content: "AMBASSADOR QUÁN QUÂN 2026";
}

#achievements .hero-achievement-image img {
    opacity: .2;
    filter: saturate(.72) brightness(1.2);
}

#achievements .hero-achievement-media-head {
    position: absolute;
    z-index: 2;
    top: 16px;
    right: 17px;
    left: 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#achievements .hero-achievement-brand,
#achievements .hero-achievement-media-label {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    padding: 7px 11px;
    color: #0758a5;
    border: 1px solid rgba(7, 88, 165, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 3px 9px rgba(16, 79, 139, .1);
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .62rem !important;
    font-weight: 800;
    letter-spacing: .035em;
    line-height: 1;
    white-space: nowrap;
}

#achievements .hero-achievement-brand i {
    margin-right: 6px;
    color: #0b4c9a;
    font-size: .5rem;
}

#achievements .hero-achievement-media-label {
    color: #0758a5;
    border-radius: 5px;
    background: #dff4ff;
}

#achievements .hero-achievement-media-label--purple {
    color: #7132ac;
    background: #f8e7ff;
}

#achievements .hero-achievement-media-title {
    position: absolute;
    z-index: 2;
    top: 58px;
    right: 16px;
    left: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#achievements .hero-achievement-media-title span {
    color: #0758a5;
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .82rem !important;
    font-weight: 800;
    letter-spacing: .025em;
}

#achievements .hero-achievement-media-title strong {
    margin-top: 3px;
    color: #ffb900;
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-size: 1.32rem !important;
    font-weight: 900;
    line-height: 1.15;
    text-shadow: 0 1px 2px rgba(7, 61, 111, .2);
}

#achievements .hero-achievement-certificate {
    position: absolute;
    z-index: 2;
    right: 17px;
    bottom: 16px;
    left: 17px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 104px;
    padding: 9px;
    border: 2px solid #0b5fbe;
    border-radius: 11px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 7px 15px rgba(14, 76, 143, .22);
}

#achievements .hero-achievement-card:nth-child(2) .hero-achievement-certificate {
    border-color: #f2b900;
}

#achievements .hero-achievement-avatar {
    display: inline-flex;
    width: 68px;
    height: 86px;
    flex: 0 0 68px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    color: #fff;
    border-radius: 8px;
    background: linear-gradient(145deg, #6d90f4 0%, #35b9ed 100%);
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
}

#achievements .hero-achievement-avatar--blue {
    background: linear-gradient(145deg, #1b74f2 0%, #0faac4 100%);
}

#achievements .hero-achievement-avatar--pink {
    background: linear-gradient(145deg, #f25d92 0%, #e93691 100%);
}

#achievements .hero-achievement-avatar i {
    font-size: 1.35rem;
}

#achievements .hero-achievement-avatar small {
    color: #fff !important;
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .54rem !important;
    font-weight: 800;
    text-transform: uppercase;
}

#achievements .hero-achievement-certificate-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    color: #0b3888;
}

#achievements .hero-achievement-certificate-copy > small {
    overflow: hidden;
    color: #526b89;
    font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .55rem !important;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#achievements .hero-achievement-certificate-copy > strong {
    color: #092f73;
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .78rem !important;
    font-weight: 900;
    line-height: 1.2;
}

#achievements .hero-achievement-certificate-copy > em {
    padding: 4px 7px;
    color: #087b67;
    border: 1px solid #66d9bb;
    border-radius: 5px;
    background: #dcfff3;
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .58rem !important;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

#achievements .hero-achievement-certificate-em--purple {
    color: #7132ac !important;
    border-color: #d19ae8 !important;
    background: #f7eaff !important;
}

#achievements .hero-achievement-scores {
    color: #0a62b4;
    font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .58rem !important;
    font-weight: 700;
    line-height: 1.45;
}

#achievements .hero-achievement-score {
    position: absolute;
    z-index: 3;
    top: 109px;
    right: 9px;
    display: inline-flex;
    width: 51px;
    height: 51px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #092f73;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #ffc20b;
    box-shadow: 0 4px 9px rgba(12, 54, 114, .24);
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
    line-height: 1;
}

#achievements .hero-achievement-score strong {
    color: inherit;
    font-size: .78rem !important;
    font-weight: 900;
}

#achievements .hero-achievement-score small {
    color: inherit !important;
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .4rem !important;
    font-weight: 800;
    text-transform: uppercase;
}

#achievements .hero-achievement-featured-mark {
    position: absolute;
    z-index: 3;
    top: 12px;
    right: 11px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    color: #6f4c00;
    border: 1px solid #f0b400;
    border-radius: 999px;
    background: #ffd338;
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .55rem !important;
    font-weight: 800;
}

#achievements .hero-achievement-featured-mark i {
    color: #d28a00;
}

#achievements .hero-achievement-image > .hero-achievement-badge {
    display: none;
}

#achievements .hero-achievement-body::before {
    display: none;
    content: none;
}

#achievements .hero-achievement-highlight {
    display: inline-flex;
    align-self: flex-start;
    margin-bottom: 13px;
    padding: 8px 14px;
    color: #092f73;
    border-radius: 8px;
    background: #ffbe08;
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .82rem !important;
    font-weight: 800;
    line-height: 1.2;
}

#achievements .hero-achievement-body h3 {
    margin: 0;
}

#achievements .hero-achievement-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

#achievements .hero-achievement-actions a {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 9px 13px;
    border-radius: 999px;
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .68rem !important;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

#achievements .hero-achievement-actions a:first-child {
    flex: 1 1 auto;
    color: #082f74;
    background: #ffbd09;
    box-shadow: 0 5px 12px rgba(255, 189, 9, .2);
}

#achievements .hero-achievement-actions a:last-child {
    color: #fff;
    border: 1px solid rgba(177, 218, 255, .55);
    background: transparent;
}

#achievements .hero-achievement-actions a:hover,
#achievements .hero-achievement-actions a:focus-visible {
    color: inherit;
    border-color: inherit;
    background: inherit;
    outline: none;
}

#achievements .hero-achievement-actions a:first-child:hover,
#achievements .hero-achievement-actions a:first-child:focus-visible {
    color: #082f74;
    background: #ffd13a;
}

#achievements .hero-achievement-actions a:last-child:hover,
#achievements .hero-achievement-actions a:last-child:focus-visible {
    color: #fff;
    border-color: rgba(177, 218, 255, .8);
    background: rgba(255, 255, 255, .1);
}

#achievements .hero-achievement-body h3 {
    margin: 0;
    color: #fff !important;
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-size: 1.18rem !important;
    font-weight: 800;
    line-height: 1.35;
}

#achievements .hero-achievement-body h3 small {
    color: rgba(255, 255, 255, .76) !important;
    font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .82rem !important;
}

#achievements .hero-achievement-body .hero-card-meta {
    margin: 5px 0 14px;
    color: #c4e4ff !important;
    font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .9rem !important;
    line-height: 1.5;
}

#achievements .hero-achievement-body > strong {
    display: block;
    color: #fff !important;
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 800;
    line-height: 1.45;
}

#achievements .hero-achievement-body > .hero-achievement-result {
    margin: 0;
}

#achievements .hero-achievement-body blockquote {
    margin: 16px 0 0;
    padding: 15px 0 0 18px;
    color: #e4f2ff !important;
    border-top: 1px solid rgba(255, 255, 255, .18);
    border-left: 3px solid #ffc400;
    font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .92rem !important;
    line-height: 1.65;
}

#achievements .hero-slider-controls {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

#achievements .hero-slider-arrow {
    width: 44px;
    height: 44px;
    color: #0b4c9a;
    border: 2px solid #c9d9ec;
    background: #fff;
    box-shadow: 0 4px 12px rgba(19, 68, 133, .1);
}

#achievements .hero-slider-arrow:hover,
#achievements .hero-slider-arrow:focus-visible {
    color: #0b4c9a;
    border-color: #8bb7df;
    background: #f5faff;
    outline: none;
}

#achievements .hero-slider-dots button {
    width: 11px;
    height: 11px;
    background: #bdcfe4;
}

#achievements .hero-slider-dots button.is-active {
    background: #0d63b5;
    box-shadow: 0 0 0 4px rgba(13, 99, 181, .14);
}

@media (max-width: 991.98px) {
    #achievements .hero-mobile-slider-track {
        display: flex;
        grid-template-columns: none;
        gap: 0;
        transform: translateX(calc(var(--slide-index, 0) * -100%));
        transition: transform .42s ease;
    }

    #achievements .hero-mobile-slider-track > article {
        width: 100%;
        flex: 0 0 100%;
    }

    #achievements .hero-achievement-card {
        min-height: 0;
    }

    #achievements .hero-achievement-body {
        min-height: 330px;
    }
}

@media (max-width: 767.98px) {
    #achievements .hero-section-heading-light h2 {
        font-size: 2rem !important;
    }

    #achievements .hero-section-heading-light p {
        font-size: .96rem !important;
    }

    #achievements .hero-achievement-image {
        height: 260px;
        flex-basis: 260px;
    }

    #achievements .hero-achievement-body {
        min-height: 0;
        padding: 22px 21px 24px;
    }

    #achievements .hero-achievement-body > strong {
        min-height: 0;
    }
}

/* Final homepage heading lock: these ID-scoped rules intentionally come
   after the legacy global Roboto fallback so it cannot override the shared
   About Hero English typography. */
#programs .hero-section-heading .hero-eyebrow,
#programs .hero-section-heading > p,
#achievements .hero-section-heading .hero-eyebrow,
#achievements .hero-section-heading > p,
#feedback .hero-section-heading .hero-eyebrow,
#feedback .hero-section-heading > p,
#facilities .hero-section-heading .hero-eyebrow,
#facilities .hero-section-heading > p,
#news .hero-section-heading .hero-eyebrow,
#news .hero-section-heading > p {
    font-family: "Source Sans 3", ui-sans-serif, system-ui, sans-serif !important;
}

#programs .hero-section-heading h2,
#achievements .hero-section-heading h2,
#feedback .hero-section-heading h2,
#facilities .hero-section-heading h2,
#news .hero-section-heading h2 {
    font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif !important;
}

/* Shared heading typography: use the About section as the single reference
   for every homepage section heading, including sections added later. */
.hero-homepage .hero-section-heading .hero-eyebrow,
.hero-homepage .hero-section-heading > p,
#about .hero-about-eyebrow-label:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i),
#about .hero-about-heading > p:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) {
    font-family: var(--hero-ui-font) !important;
}

.hero-homepage .hero-section-heading h2,
#about .hero-about-title:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) {
    font-family: var(--hero-headline-font) !important;
}

@media (max-width: 991.98px) {
    .hero-homepage .hero-section-heading .hero-eyebrow,
    #about .hero-about-eyebrow-label:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) {
        font-size: 15px !important;
        line-height: 20px !important;
        letter-spacing: .02em !important;
    }

    .hero-homepage .hero-section-heading h2,
    #about .hero-about-title:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) {
        font-size: 1.95rem !important;
        line-height: 1.18 !important;
        white-space: normal !important;
    }

    .hero-homepage .hero-section-heading > p,
    #about .hero-about-heading > p:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) {
        font-size: 16px !important;
        line-height: 1.55 !important;
    }
}

/* Programs showcase: an image-led course selector inspired by the supplied
   reference, with the active course expanded into a richer detail panel. */
.hero-program-section {
    position: relative;
    overflow: hidden;
    padding: clamp(72px, 8vw, 116px) 0;
    background:
        radial-gradient(ellipse 430px 270px at -4% -8%, rgba(188, 229, 255, .56), transparent 74%),
        radial-gradient(ellipse 450px 320px at 104% 9%, rgba(213, 239, 255, .6), transparent 75%),
        radial-gradient(ellipse 500px 280px at 104% 103%, rgba(224, 243, 255, .64), transparent 75%),
        linear-gradient(180deg, #f8f9ff 0%, #f8f9ff 47%, #f4f8ff 100%);
}

.hero-program-section::before,
.hero-program-section::after {
    position: absolute;
    z-index: 0;
    border: 1px solid rgba(30, 115, 190, .09);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.hero-program-section::before {
    top: -220px;
    left: -220px;
    width: 520px;
    height: 520px;
    border: 0;
    background: radial-gradient(circle, rgba(179, 222, 255, .22) 0 36%, transparent 37% 100%);
}

.hero-program-section::after {
    right: -230px;
    bottom: -365px;
    left: auto;
    width: 650px;
    height: 650px;
    border: 0;
    background: radial-gradient(circle, rgba(197, 231, 255, .2) 0 38%, transparent 39% 100%);
}

.hero-program-section > .container {
    max-width: 1280px;
    position: relative;
    z-index: 1;
}

.hero-program-heading {
    display: block;
    max-width: 960px;
    margin-right: auto;
    margin-bottom: 48px;
    margin-left: auto;
    text-align: center;
}

.hero-program-heading > div {
    max-width: none;
}

.hero-program-heading h2 {
    margin-top: 16px;
}

.hero-program-showcase {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 32px;
    align-items: stretch;
}

.hero-program-picker {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    height: 100%;
    min-width: 0;
    padding-top: 0;
}

.hero-program-picker-main {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 16px;
}

.hero-program-picker-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 4px 16px;
    padding: 0 4px 4px;
    border-bottom: 1px solid rgba(193, 199, 211, .4);
}

.hero-program-picker-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--hero-navy);
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    line-height: 1.45;
}

.hero-program-picker-title i {
    color: var(--hero-blue);
    font-size: 1rem;
}

#programs .hero-program-picker-title,
#programs .hero-program-picker-title span,
#programs .hero-program-picker-kicker,
#programs .hero-program-card,
#programs .hero-program-card span,
#programs .hero-program-card strong,
#programs .hero-program-card a,
#programs .hero-program-consult-kicker,
#programs .hero-program-consult-phone,
#programs .hero-program-consult-phone span,
#programs .hero-program-consult-phone strong {
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
}

#programs .hero-program-card p,
#programs .hero-program-consult-card p {
    font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif !important;
}

.hero-program-picker-kicker {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    color: var(--hero-blue);
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .72rem !important;
    font-weight: 700;
    letter-spacing: .1em;
    white-space: nowrap;
}

.hero-program-list {
    display: grid;
    gap: 12px;
}

.hero-program-card {
    --program-accent: #1eaf8b;
    --program-soft: #eafaf5;
    --program-surface-start: #f1fffb;
    --program-surface-end: #e5f8f1;
    --program-border: rgba(30, 175, 139, .38);
    position: relative;
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 132px;
    grid-template-columns: 46px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 14px;
    padding: 16px;
    overflow: hidden;
    color: #0f2b48;
    border: 1px solid var(--program-border);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--program-surface-start) 0%, var(--program-surface-end) 100%);
    box-shadow: 0 1px 3px rgba(15, 39, 68, .04), 0 1px 2px -1px rgba(15, 39, 68, .04);
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
    text-align: left;
    cursor: pointer;
    isolation: isolate;
    transition: border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}

.hero-program-card::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--program-accent), rgba(255, 255, 255, .2));
    content: "";
    opacity: 0;
    transition: opacity .22s ease;
}

.hero-program-card--starter {
    --program-accent: #0d9f7a;
    --program-soft: #e1faf2;
    --program-surface-start: #f2fffb;
    --program-surface-end: #e1f8f0;
    --program-border: rgba(13, 159, 122, .42);
}

.hero-program-card--academic {
    --program-accent: #d99a00;
    --program-soft: #fff4d4;
    --program-surface-start: #fffdf5;
    --program-surface-end: #fff1cd;
    --program-border: rgba(217, 154, 0, .42);
}

.hero-program-card--accelerated {
    --program-accent: #e9792d;
    --program-soft: #ffeddf;
    --program-surface-start: #fffaf5;
    --program-surface-end: #ffeadb;
    --program-border: rgba(233, 121, 45, .42);
}

.hero-program-card--ielts {
    --program-accent: #4c63d2;
    --program-soft: #e9edff;
    --program-surface-start: #f7f8ff;
    --program-surface-end: #e9edff;
    --program-border: rgba(76, 99, 210, .42);
}

.hero-program-card:hover,
.hero-program-card:focus-visible {
    border-color: rgba(30, 115, 190, .4);
    box-shadow: 0 4px 6px -1px rgba(15, 39, 68, .06), 0 2px 4px -2px rgba(15, 39, 68, .04);
    outline: none;
    transform: none;
}

.hero-program-card.is-active {
    min-height: 132px;
    color: #fff;
    border: 1px solid #1265a5;
    background: linear-gradient(135deg, #1265a5 0%, #1e73be 58%, #2b8ed2 100%);
    box-shadow: 0 16px 28px -10px rgba(17, 95, 157, .36), 0 5px 12px rgba(17, 95, 157, .2);
}

.hero-program-card.is-active::before {
    opacity: 1;
}

.hero-program-card-icon {
    display: inline-grid;
    width: 46px;
    height: 46px;
    place-items: center;
    color: var(--program-accent);
    border: 1px solid color-mix(in srgb, var(--program-accent) 32%, white);
    border-radius: 12px;
    background: var(--program-soft);
    font-size: 1.08rem;
}

.hero-program-card.is-active .hero-program-card-icon {
    color: #fff;
    border-color: rgba(255, 255, 255, .62);
    background: rgba(255, 255, 255, .16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 4px 12px rgba(4, 73, 132, .18);
}

.hero-program-card-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.hero-program-card-name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.hero-program-card-status-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #f4c33d;
    box-shadow: 0 0 0 3px rgba(244, 195, 61, .12), 0 0 9px rgba(244, 195, 61, .72);
}

.hero-program-card-copy strong {
    display: block;
    overflow: hidden;
    color: #0f2b48;
    font-size: 1.02rem !important;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.35;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.hero-program-card.is-active .hero-program-card-copy strong {
    color: #fff;
}

.hero-program-card-copy small {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: #4a5f7f;
    font-size: .78rem !important;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-program-card.is-active .hero-program-card-copy small {
    color: rgba(255, 255, 255, .9);
}

.hero-program-card-tagline {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
    margin-top: 9px;
    padding: 8px 10px;
    overflow: hidden;
    color: var(--program-accent);
    border: 1px solid color-mix(in srgb, var(--program-accent) 18%, white);
    border-radius: 7px;
    background: var(--program-soft);
    font-size: .72rem !important;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-program-card-tagline i {
    flex: 0 0 auto;
    font-size: .62rem;
}

.hero-program-card-tagline > span:not(.hero-program-card-hot) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-program-card.is-active .hero-program-card-tagline {
    color: #fff;
    border-color: rgba(255, 255, 255, .34);
    background: rgba(255, 255, 255, .18);
    text-shadow: 0 1px 1px rgba(7, 61, 111, .18);
}

.hero-program-card.is-active .hero-program-card-tagline i,
.hero-program-card.is-active .hero-program-card-tagline > span:not(.hero-program-card-hot) {
    color: #fff;
}

.hero-program-card-hot {
    display: none;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 3px 6px;
    color: #fff4b5;
    border-radius: 4px;
    background: rgba(233, 182, 43, .3);
    font-size: .59rem !important;
    font-weight: 800;
    line-height: 1;
}

.hero-program-card.is-active .hero-program-card-hot {
    display: inline-flex;
}

.hero-program-card-arrow {
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: #9eafc1;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    font-size: .88rem;
    transition: color .22s ease, background-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.hero-program-card.is-active .hero-program-card-arrow {
    color: #fff;
    background: linear-gradient(135deg, #2aa5f4 0%, #167bd3 100%);
    box-shadow: 0 8px 18px rgba(26, 143, 231, .42), inset 0 1px 0 rgba(255, 255, 255, .24);
}

.hero-program-card:hover .hero-program-card-arrow,
.hero-program-card:focus-visible .hero-program-card-arrow {
    color: #1e73be;
    background: #eaf3fa;
    transform: translateX(2px);
}

.hero-program-card.is-active .hero-program-card-arrow i {
    animation: hero-program-arrow-nudge .82s cubic-bezier(.22, .8, .28, 1) both;
}

.hero-program-card.is-active:hover .hero-program-card-arrow,
.hero-program-card.is-active:focus-visible .hero-program-card-arrow {
    color: #fff;
    background: linear-gradient(135deg, #2aa5f4 0%, #167bd3 100%);
    box-shadow: 0 8px 18px rgba(26, 143, 231, .42), inset 0 1px 0 rgba(255, 255, 255, .24);
}

.hero-program-card:not(.is-active):hover .hero-program-card-arrow,
.hero-program-card:not(.is-active):focus-visible .hero-program-card-arrow {
    color: #9eafc1;
    background: #f1f5f9;
    box-shadow: none;
    transform: none;
}

@keyframes hero-program-arrow-nudge {
    0% { transform: translateX(-3px); }
    55% { transform: translateX(4px); }
    100% { transform: translateX(0); }
}

.hero-program-consult-card {
    display: flex;
    min-height: 132px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-top: 16px;
    padding: 16px 14px;
    border: 1px solid rgba(30, 115, 190, .3);
    border-radius: 14px;
    background: linear-gradient(135deg, #f5fbff 0%, #eaf5fc 100%);
    box-shadow: 0 1px 3px rgba(15, 39, 68, .04), 0 1px 2px -1px rgba(15, 39, 68, .04);
    text-align: center;
}

.hero-program-consult-kicker {
    display: block;
    color: #17456f;
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .79rem !important;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.25;
    text-align: center;
}

.hero-program-consult-title {
    display: block;
    margin-top: 4px;
    color: #0c3a78;
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: .88rem;
    font-weight: 800;
    line-height: 1.3;
}

.hero-program-consult-card p {
    max-width: 300px;
    margin: 7px auto 12px;
    color: #4a5f7f;
    font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .79rem !important;
    line-height: 1.4;
    text-align: center;
}

.hero-program-consult-phone {
    display: inline-flex;
    width: auto;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 8px 16px;
    color: #0c3a78;
    border: 1px solid rgba(30, 115, 190, .25);
    border-radius: 999px;
    background: #fff;
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .78rem !important;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(30, 115, 190, .08);
    transition: color .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.hero-program-consult-phone i {
    display: inline-grid;
    width: 25px;
    height: 25px;
    place-items: center;
    color: #20ad83;
    border-radius: 50%;
    background: #e3faf2;
    font-size: .72rem;
}

.hero-program-consult-phone strong {
    color: #0c3a78;
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-size: 1.02rem;
    font-weight: 800;
}

.hero-program-consult-phone:hover,
.hero-program-consult-phone:focus-visible {
    color: #0c3a78;
    border-color: rgba(30, 115, 190, .42);
    background: #fff;
    box-shadow: 0 8px 18px rgba(30, 115, 190, .2);
    outline: none;
    transform: translateY(-3px);
}

.hero-program-consult-phone:hover i,
.hero-program-consult-phone:hover strong,
.hero-program-consult-phone:focus-visible i,
.hero-program-consult-phone:focus-visible strong {
    color: #1e73be;
}

.hero-program-feature {
    --program-feature-accent: #1e73be;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(193, 199, 211, .6);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 24px -4px rgba(15, 39, 68, .08), 0 4px 6px -2px rgba(15, 39, 68, .03);
}

.hero-program-feature[data-program-tone="academic"] {
    --program-feature-accent: #1e73be;
}

.hero-program-feature[data-program-tone="accelerated"] {
    --program-feature-accent: #1e73be;
}

.hero-program-feature[data-program-tone="ielts"] {
    --program-feature-accent: #4c63d2;
}

.hero-program-feature-media {
    position: relative;
    height: 330px;
    margin: 0;
    overflow: hidden;
    border-radius: 0;
    background: #e7f4ff;
    isolation: isolate;
}

.hero-program-feature-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
    transition: opacity .25s ease, transform .35s ease;
}

.hero-program-feature-media-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    background: linear-gradient(to top, rgba(15, 43, 72, .86) 0%, rgba(15, 43, 72, .22) 45%, transparent 100%);
    pointer-events: none;
}

.hero-program-feature-media-brand,
.hero-program-feature-media-badge,
.hero-program-feature-media-caption {
    position: absolute;
    z-index: 2;
}

.hero-program-feature-media-brand {
    top: 17px;
    left: 19px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    text-shadow: 0 2px 10px rgba(4, 24, 61, .35);
}

.hero-program-feature-brand-mark {
    display: inline-grid;
    width: 35px;
    height: 35px;
    place-items: center;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 11px;
    background: rgba(9, 55, 119, .66);
    font-family: var(--hero-headline-font);
    font-size: 1.3rem;
    font-weight: 900;
}

.hero-program-feature-media-brand strong,
.hero-program-feature-media-brand small {
    display: block;
}

.hero-program-feature-media-brand strong {
    font-family: var(--hero-headline-font) !important;
    font-size: 1rem !important;
    font-weight: 900;
    line-height: 1.05;
}

.hero-program-feature-media-brand small {
    margin-top: 3px;
    color: rgba(255, 255, 255, .82);
    font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .62rem !important;
    line-height: 1;
}

.hero-program-feature-media-badge {
    top: 18px;
    right: 19px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 999px;
    background: #1e73be;
    box-shadow: 0 5px 12px rgba(8, 69, 126, .28), inset 0 1px 0 rgba(255, 255, 255, .18);
    font-family: var(--hero-ui-font) !important;
    font-size: .68rem !important;
    font-weight: 900;
    letter-spacing: .05em;
}

.hero-program-feature-media-badge i {
    color: #fff;
    font-size: .72rem;
}

.hero-program-feature-media-caption {
    right: 24px;
    bottom: 22px;
    left: 24px;
    color: #fff;
    text-shadow: 0 2px 12px rgba(3, 23, 58, .4);
}

.hero-program-feature-media-caption span,
.hero-program-feature-media-caption strong {
    display: block;
}

.hero-program-feature-media-caption span {
    margin-bottom: 5px;
    color: #9ed8ff;
    font-size: .68rem !important;
    font-weight: 900;
    letter-spacing: .16em;
}

.hero-program-feature-media-caption strong {
    max-width: 560px;
    font-family: var(--hero-headline-font) !important;
    font-size: clamp(1.3rem, 2.35vw, 2.1rem) !important;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.08;
}

#programs .hero-program-feature-media-brand strong,
#programs .hero-program-feature-media-badge,
#programs .hero-program-feature-media-badge span,
#programs .hero-program-feature-media-caption span,
#programs .hero-program-feature-media-caption strong {
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
}

.hero-program-feature-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 32px 28px;
}

.hero-program-feature-body-main {
    min-width: 0;
}

.hero-program-feature-footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(193, 199, 211, .4);
}

#programs .hero-program-feature-content span,
#programs .hero-program-feature-content h3,
#programs .hero-program-feature-content a,
#programs .hero-program-feature-content strong {
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
}

#programs .hero-program-feature-content .hero-program-feature-body-main > p,
#programs .hero-program-feature-content .hero-program-feature-meta,
#programs .hero-program-feature-content .hero-program-feature-meta span {
    font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif !important;
}

.hero-program-feature-topline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.hero-program-feature-kicker {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 0;
    color: #1e73be;
    border-radius: 0;
    background: transparent;
    font-size: 1.05rem !important;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.35;
}

.hero-program-feature-kicker i {
    font-size: .85rem;
}

.hero-program-feature-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 0;
}

.hero-program-feature-pills span {
    display: inline-flex;
    align-items: center;
    min-height: 35px;
    padding: 6px 10px;
    color: #0f2b48;
    border: 1px solid rgba(30, 115, 190, .2);
    border-radius: 6px;
    background: #eaf3fa;
    font-size: 1rem !important;
    font-weight: 700 !important;
    white-space: nowrap;
}

#programs .hero-program-card small,
#programs .hero-program-feature-content small,
#programs .hero-program-feature-media-brand small {
    font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif !important;
}

#programs .hero-program-feature-content h3 {
    margin: 0 0 8px;
    color: #0f2b48;
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-size: 1.28rem !important;
    font-weight: 600 !important;
    letter-spacing: -.02em;
    line-height: 1.35;
}

#programs .hero-program-feature-content .hero-program-feature-body-main > p {
    max-width: 790px;
    margin: 0;
    color: #4a5f7f;
    font-size: 1.06rem !important;
    line-height: 1.6;
}

.hero-program-feature-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.hero-program-benefit {
    display: flex;
    min-width: 0;
    min-height: 99px;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(30, 115, 190, .15);
    border-radius: 12px;
    background: #f1f7fd;
    transition: border-color .2s ease, background-color .2s ease;
}

.hero-program-benefit:hover,
.hero-program-benefit:focus-within {
    border-color: rgba(30, 115, 190, .35);
    background: #eaf3fa;
}

.hero-program-benefit > span:last-child {
    display: block;
    min-width: 0;
}

.hero-program-benefit-icon {
    display: inline-grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    color: #1e73be;
    border: 1px solid rgba(30, 115, 190, .2);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 39, 68, .04);
    font-size: .9rem;
}

.hero-program-benefit strong {
    display: block;
    color: #0f2b48;
    font-size: 1.06rem !important;
    font-weight: 600;
    line-height: 1.3;
}

.hero-program-benefit small {
    display: block;
    margin-top: 3px;
    color: #4a5f7f;
    font-size: .86rem !important;
    line-height: 1.4;
}

.hero-program-feature-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.hero-program-feature-primary,
.hero-program-feature-secondary {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 1rem !important;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.hero-program-feature-primary {
    min-width: 0;
    flex: 1 1 auto;
    gap: 10px;
    color: #fff !important;
    border: 1px solid #1e73be;
    background: #1e73be;
    box-shadow: 0 4px 14px rgba(30, 115, 190, .35);
}

.hero-program-feature-primary:hover,
.hero-program-feature-primary:focus-visible {
    color: #fff !important;
    background: #155a96;
    box-shadow: 0 6px 20px rgba(30, 115, 190, .45);
    outline: none;
    transform: translateY(-2px);
}

.hero-program-feature-secondary {
    flex: 0 0 auto;
    color: #0f2b48 !important;
    border: 1px solid rgba(30, 115, 190, .3);
    background: #eaf3fa;
}

.hero-program-feature-secondary:hover,
.hero-program-feature-secondary:focus-visible {
    color: #0f2b48 !important;
    border-color: rgba(30, 115, 190, .3);
    background: #d9e9f9;
    outline: none;
    transform: translateY(-2px);
}

.hero-program-feature-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 32px;
    margin-top: 16px;
    color: #4a5f7f;
    font-size: 1rem !important;
    line-height: 1.45;
}

.hero-program-feature-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.hero-program-feature-meta i {
    color: var(--program-feature-accent);
    font-size: .95rem;
}

.hero-program-feature-footer .hero-program-feature-meta > span {
    font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif !important;
}

.hero-program-feature-content .hero-program-feature-kicker:hover,
.hero-program-feature-content .hero-program-feature-pills span:hover,
.hero-program-feature-content .hero-program-benefit:hover strong,
.hero-program-feature-content .hero-program-benefit:hover small,
.hero-program-feature-content .hero-program-feature-meta span:hover {
    color: inherit;
}

.hero-program-trust {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: clamp(28px, 4vw, 48px);
}

.hero-program-trust-item {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
    min-height: 80px;
    padding: 16px;
    border: 1px solid rgba(193, 199, 211, .6);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 39, 68, .04), 0 1px 2px -1px rgba(15, 39, 68, .04);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.hero-program-trust-item:hover,
.hero-program-trust-item:focus-within {
    border-color: rgba(30, 115, 190, .4);
    box-shadow: 0 4px 6px -1px rgba(15, 39, 68, .06), 0 2px 4px -2px rgba(15, 39, 68, .04);
}

.hero-program-trust-icon {
    display: inline-grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    place-items: center;
    color: #1e73be;
    border: 1px solid rgba(30, 115, 190, .2);
    border-radius: 8px;
    background: #eaf3fa;
}

.hero-program-trust-icon i {
    font-size: 24px;
    line-height: 1;
}

.hero-program-trust-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.hero-program-trust-copy strong,
.hero-program-trust-copy > span {
    display: block;
    overflow-wrap: anywhere;
}

#programs .hero-program-trust-copy strong {
    color: #0f2b48;
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .86rem !important;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
}

#programs .hero-program-trust-copy > span {
    color: #4a5f7f;
    font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .84rem !important;
    line-height: 1.35;
}

@media (max-width: 991.98px) {
    .hero-program-showcase {
        grid-template-columns: 1fr;
    }

    .hero-program-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hero-program-card {
        grid-template-columns: 44px minmax(0, 1fr) 38px;
        min-height: 132px;
        gap: 12px;
        padding: 16px;
    }

    .hero-program-card-icon {
        width: 44px;
        height: 44px;
    }

    .hero-program-card-copy strong {
        font-size: .98rem !important;
    }

    .hero-program-card-copy small {
        font-size: .76rem !important;
    }

    .hero-program-card-tagline {
        font-size: .68rem !important;
    }

    .hero-program-consult-card {
        margin-top: 14px;
    }

    .hero-program-feature-media {
        height: min(42vw, 340px);
    }

    .hero-program-trust {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

@media (max-width: 767.98px) {
    .hero-program-section {
        padding: 58px 0 66px;
    }

    .hero-program-heading {
        margin-bottom: 31px;
    }

    .hero-program-heading h2 {
        font-size: 2rem !important;
    }

    .hero-program-heading p {
        font-size: .9rem !important;
        line-height: 1.6;
    }

    .hero-program-list {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .hero-program-card {
        min-height: 132px;
        grid-template-columns: 44px minmax(0, 1fr) 38px;
        padding: 16px;
    }

    .hero-program-card.is-active {
        min-height: 132px;
    }

    .hero-program-card-icon {
        width: 44px;
        height: 44px;
    }

    .hero-program-card-arrow {
        display: inline-grid;
    }

    .hero-program-card-copy strong {
        font-size: .98rem !important;
    }

    .hero-program-card-copy small {
        font-size: .76rem !important;
    }

    .hero-program-card-tagline {
        margin-top: 5px;
    }

    .hero-program-consult-card {
        margin-top: 14px;
        padding: 17px 14px 16px;
    }

    .hero-program-feature {
        border-radius: 16px;
    }

    .hero-program-feature-media {
        height: 290px;
        margin: 0;
        border-radius: 0;
    }

    .hero-program-feature-media-brand {
        top: 13px;
        left: 14px;
    }

    .hero-program-feature-media-badge {
        top: 13px;
        right: 14px;
        padding: 7px 9px;
        font-size: .57rem !important;
    }

    .hero-program-feature-media-caption {
        right: 16px;
        bottom: 17px;
        left: 16px;
    }

    .hero-program-feature-media-caption strong {
        font-size: 1.35rem !important;
    }

    .hero-program-feature-content {
        padding: 24px 16px;
    }

    .hero-program-feature-topline {
        align-items: start;
        flex-direction: column;
    }

    .hero-program-feature-pills {
        justify-content: flex-start;
    }

    .hero-program-feature-content h3 {
        margin-top: 0;
        font-size: 1.28rem !important;
    }

    .hero-program-feature-content .hero-program-feature-body-main > p {
        font-size: .96rem !important;
    }

    .hero-program-feature-benefits {
        gap: 10px;
        padding: 0;
    }

    .hero-program-benefit {
        gap: 7px;
    }

    .hero-program-benefit-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        font-size: .78rem;
    }

    .hero-program-benefit strong {
        font-size: .86rem !important;
    }

    .hero-program-benefit small {
        font-size: .68rem !important;
    }

    .hero-program-feature-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-program-feature-primary,
    .hero-program-feature-secondary {
        min-width: 0;
    }

    .hero-program-trust {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .hero-program-trust-item,
    .hero-program-trust-item:first-child,
    .hero-program-trust-item:last-child {
        min-height: 72px;
        padding: 14px;
        border: 1px solid rgba(193, 199, 211, .6);
        border-radius: 12px;
    }
}

@media (max-width: 420px) {
    .hero-program-feature-benefits {
        grid-template-columns: 1fr;
    }

    .hero-program-feature-pills span {
        font-size: .62rem !important;
    }

    .hero-program-feature-meta {
        gap: 10px 14px;
        font-size: .68rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-program-card,
    .hero-program-card-arrow,
    .hero-program-card-arrow i,
    .hero-program-feature-media img,
    .hero-program-feature-primary,
    .hero-program-feature-secondary {
        transition: none;
        animation: none;
    }
}

/* Match the supplied title-border-radius treatment: section labels are
   content-width text with a curved 2px underline instead of a pill. */
.hero-homepage .hero-eyebrow,
#about .hero-about-eyebrow-label:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) {
    display: inline-block !important;
    padding: 4px 10px 7px !important;
    border-bottom: 2px solid currentColor !important;
    border-radius: 10% 30%;
    background: transparent !important;
    box-shadow: none !important;
}

#about .hero-about-eyebrow {
    gap: 10px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
}

#about .hero-about-eyebrow > span.hero-about-eyebrow-label {
    display: inline-block !important;
}

/* Keep the featured-card sweep active when Google Translate wraps the
   hovered tag in generated <font> elements. The older :has() rule disabled
   this layer at exactly that pointer position, leaving the white copy on a
   white card. */
#about .hero-value-card--featured:hover::before,
#about .hero-value-card--featured:focus-within::before,
#about .hero-value-card--featured:has(.hero-value-featured-tag:hover)::before {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: linear-gradient(100deg, #005a9c 0%, #0074bd 100%) !important;
    transform: scaleX(1);
}

/* Shared section-heading scale: every eyebrow and its heading use the same
   visual hierarchy as the About section. Keep the scale desktop-first so the
   one-line heading remains readable without forcing a horizontal overflow on
   smaller screens. */
@media (min-width: 992px) {
    .hero-homepage .hero-eyebrow,
    #about .hero-about-eyebrow-label:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) {
        font-size: clamp(24px, 2vw, 26px) !important;
        line-height: 1.12 !important;
        letter-spacing: .035em !important;
    }

    .hero-homepage .hero-section-heading h2,
    #about .hero-about-title:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) {
        font-size: clamp(60px, 4.8vw, 64px) !important;
        line-height: 1.08 !important;
        white-space: nowrap !important;
    }

    #about .hero-about-title:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) {
        width: 100%;
        max-width: none !important;
        letter-spacing: -.07em !important;
    }

    #about .hero-about-heading {
        max-width: none !important;
    }

    #about .hero-about-eyebrow {
        gap: 10px;
        padding: 9px 18px;
    }

    #about .hero-about-eyebrow > i {
        font-size: 1rem;
    }

    .hero-homepage .hero-section-heading p,
    #about .hero-about-heading > p:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) {
        font-size: 18px !important;
        line-height: 1.6 !important;
    }

    #about .hero-trust-badges > span:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) {
        padding: 10px 18px;
        font-size: 16px !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .hero-homepage .hero-eyebrow,
    #about .hero-about-eyebrow-label:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) {
        font-size: 22px !important;
    }

    .hero-homepage .hero-section-heading h2,
    #about .hero-about-title:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) {
        font-size: 48px !important;
        white-space: normal !important;
    }

    #about .hero-about-title:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(i) {
        width: auto;
        max-width: 900px !important;
        letter-spacing: -.045em !important;
    }

    #about .hero-about-heading {
        max-width: 900px !important;
    }
}

/* Google Translate may wrap translated section copy in generated font nodes;
   keep those nodes on the same shared heading scale and typography. */
.hero-homepage .hero-eyebrow font[dir="auto"],
.hero-homepage .hero-section-heading h2 font[dir="auto"],
#about .hero-about-eyebrow-label font[dir="auto"],
#about .hero-about-title font[dir="auto"] {
    font: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-style: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Card 1 uses the same direct-button hover treatment as the featured card.
   The policy button on card 3 keeps its separate white-surface treatment. */
#about .hero-value-card .hero-value-footer[href="#programs"]:hover,
#about .hero-value-card .hero-value-footer[href="#programs"]:focus-visible,
#about .hero-value-card--featured .hero-value-footer:hover,
#about .hero-value-card--featured .hero-value-footer:focus-visible {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .82) !important;
    background: rgba(255, 255, 255, .24) !important;
}

#about .hero-value-card .hero-value-footer[href="#programs"]:hover i,
#about .hero-value-card .hero-value-footer[href="#programs"]:focus-visible i,
#about .hero-value-card--featured .hero-value-footer:hover i,
#about .hero-value-card--featured .hero-value-footer:focus-visible i,
#about .hero-value-card .hero-value-footer[href="#programs"]:hover font[dir="auto"],
#about .hero-value-card .hero-value-footer[href="#programs"]:focus-visible font[dir="auto"],
#about .hero-value-card--featured .hero-value-footer:hover font[dir="auto"],
#about .hero-value-card--featured .hero-value-footer:focus-visible font[dir="auto"] {
    color: #fff !important;
}

/* Last word for the achievement cards: the photo-led reference layout. */
#achievements .hero-achievement-body blockquote {
    position: relative;
    margin: 14px 0 0 !important;
    padding: 14px 16px 14px 18px !important;
    border: 1px solid rgba(184, 221, 250, .34) !important;
    border-left: 3px solid #ffd000 !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .08) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}

#achievements {
    background: linear-gradient(180deg, #f7fbff 0%, #edf5ff 100%);
}

#achievements .hero-achievement-card {
    min-height: 0;
    border: 2px solid #0b58a9;
    border-radius: 24px;
    background: linear-gradient(180deg, #0c4aa0 0%, #08347f 100%);
    box-shadow: 0 16px 30px rgba(17, 72, 137, .18);
}

#achievements .hero-achievement-card:nth-child(2) {
    border-color: #f5bd19;
    background: linear-gradient(180deg, #0e4da6 0%, #0a3989 100%);
    box-shadow: 0 18px 34px rgba(195, 146, 15, .2);
}

#achievements .hero-achievement-image {
    height: 255px;
    flex: 0 0 255px;
    border-bottom: 4px solid #ffbd00;
    background: #0d3c7e;
}

#achievements .hero-achievement-image img {
    opacity: 1;
    filter: saturate(.94) contrast(1.02) brightness(.96);
}

#achievements .hero-achievement-image::before {
    z-index: 1;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 31, 77, .04) 0%, rgba(8, 52, 127, .06) 46%, rgba(5, 43, 109, .13) 100%);
}

#achievements .hero-achievement-image::after {
    z-index: 1;
    inset: 0;
    height: auto;
    background: linear-gradient(180deg, transparent 38%, rgba(7, 51, 124, .12) 54%, rgba(5, 42, 105, .78) 100%);
}

#achievements .hero-achievement-media-head {
    top: 13px;
    right: 16px;
    left: 16px;
    z-index: 3;
}

#achievements .hero-achievement-brand-logo {
    display: block;
    width: 20px;
    height: 15px;
    flex: 0 0 20px;
    object-fit: contain;
    object-position: center;
    filter: none !important;
    opacity: 1 !important;
}

#achievements .hero-achievement-brand > i {
    display: none;
}

#achievements .hero-achievement-media-title {
    top: auto;
    right: 16px;
    bottom: 14px;
    left: 16px;
    z-index: 3;
    align-items: flex-start;
    padding-right: 66px;
    text-align: left;
}

#achievements .hero-achievement-media-title > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 7px;
    padding: 4px 9px;
    color: #ffe38b;
    border: 1px solid rgba(255, 205, 45, .58);
    border-radius: 999px;
    background: rgba(5, 43, 104, .7);
    font-size: .62rem !important;
    letter-spacing: .045em;
    line-height: 1;
}

#achievements .hero-achievement-media-title > span::before,
#achievements .hero-achievement-media-title > span::after {
    color: #ffca17;
    content: "\2605";
    font-size: .55rem;
}

#achievements .hero-achievement-media-title > strong {
    margin: 0;
    color: #fff !important;
    font-size: clamp(1.3rem, 2vw, 1.7rem) !important;
    line-height: 1.08;
    text-shadow: 0 2px 5px rgba(1, 20, 58, .45);
}

#achievements .hero-achievement-media-subtitle {
    display: block;
    margin-top: 5px;
    color: #e5f2ff !important;
    font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .64rem !important;
    font-weight: 700;
    line-height: 1.25;
}

#achievements .hero-achievement-certificate,
#achievements .hero-achievement-image > .hero-achievement-badge,
#achievements .hero-achievement-body::before {
    display: none !important;
    content: none !important;
}

#achievements .hero-achievement-card:nth-child(2) .hero-achievement-featured-mark {
    top: 13px;
    right: 84px;
}

#achievements .hero-achievement-score {
    top: auto;
    right: 12px;
    bottom: 14px;
    z-index: 4;
    width: 51px;
    height: 51px;
}

#achievements .hero-achievement-body {
    min-height: 325px;
    padding: 24px 24px 25px;
    background: linear-gradient(180deg, #0d4a9f 0%, #0a3988 100%);
}

#achievements .hero-achievement-card:nth-child(2) .hero-achievement-body {
    background: linear-gradient(180deg, #0d4a9f 0%, #09357f 100%);
}

#achievements .hero-achievement-highlight {
    margin-bottom: 14px;
    padding: 8px 13px;
    color: #ffe17e;
    border: 1px solid rgba(255, 209, 73, .42);
    border-radius: 8px;
    background: rgba(255, 198, 40, .17);
    font-size: .8rem !important;
}

#achievements .hero-achievement-body > .hero-achievement-result {
    min-height: 0;
    color: #fff !important;
    font-size: 1.03rem !important;
    line-height: 1.38;
}

#achievements .hero-achievement-body .hero-card-meta {
    margin: 5px 0 13px;
    color: #d8ecff !important;
    font-size: .78rem !important;
    line-height: 1.35;
}

#achievements .hero-achievement-body blockquote {
    margin-top: 12px;
    padding: 13px 0 0 15px;
    color: #e6f2ff !important;
    border-top-color: rgba(176, 218, 255, .18);
    border-left-color: #ffd000;
    font-size: .86rem !important;
    line-height: 1.52;
}

#achievements .hero-achievement-actions {
    gap: 10px;
    padding-top: 16px;
}

#achievements .hero-achievement-actions a {
    min-height: 37px;
    padding: 8px 13px;
    font-size: .67rem !important;
}

#achievements .hero-achievement-actions a:first-child {
    color: #082f74 !important;
    background: linear-gradient(90deg, #ffbe08 0%, #f79408 100%);
}

#achievements .hero-achievement-actions a:first-child:hover,
#achievements .hero-achievement-actions a:first-child:focus-visible {
    color: #082f74 !important;
    background: linear-gradient(90deg, #ffd13a 0%, #ffae22 100%);
}

#achievements .hero-achievement-actions a:last-child {
    color: #e9f5ff !important;
    border-color: rgba(178, 220, 255, .46);
    background: rgba(255, 255, 255, .1);
}

#achievements .hero-achievement-actions a:last-child:hover,
#achievements .hero-achievement-actions a:last-child:focus-visible {
    color: #fff !important;
    border-color: rgba(199, 231, 255, .72);
    background: rgba(255, 255, 255, .18);
}

@media (max-width: 767.98px) {
    #achievements .hero-achievement-image {
        height: 245px;
        flex-basis: 245px;
    }

    #achievements .hero-achievement-body {
        min-height: 0;
        padding: 22px 21px 24px;
    }
}

/* Keep achievement quotes clean: no yellow quote mark or divider line. */
#achievements .hero-achievement-body blockquote {
    padding-left: 16px !important;
    border: 1px solid rgba(184, 221, 250, .34) !important;
    background: rgba(255, 255, 255, .08) !important;
}

#achievements .hero-achievement-body blockquote::before {
    display: none !important;
    content: none !important;
}

#achievements .hero-achievement-actions {
    border-top: 0 !important;
}

/* Final achievement card balance: lighter Hero blue and clearer actions. */
#achievements .hero-achievement-card {
    background: linear-gradient(180deg, #1d70bb 0%, #1559a4 100%) !important;
    box-shadow: 0 16px 30px rgba(17, 72, 137, .14);
}

#achievements .hero-achievement-card:nth-child(2) {
    background: linear-gradient(180deg, #2378c1 0%, #185fae 100%) !important;
    box-shadow: 0 18px 34px rgba(42, 102, 163, .16);
}

#achievements .hero-achievement-body,
#achievements .hero-achievement-card:nth-child(2) .hero-achievement-body {
    background: linear-gradient(180deg, #1d70bb 0%, #1559a4 100%) !important;
}

#achievements .hero-achievement-actions {
    gap: 11px;
    padding-top: 18px;
}

#achievements .hero-achievement-actions a {
    min-height: 45px !important;
    padding: 11px 18px !important;
    border-radius: 12px;
    font-size: .84rem !important;
    font-weight: 800;
    letter-spacing: -.01em;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

#achievements .hero-achievement-actions a:first-child {
    color: #083878 !important;
    border: 1px solid rgba(255, 226, 119, .72);
    background: linear-gradient(135deg, #ffd952 0%, #ffb20e 100%) !important;
    box-shadow: 0 8px 18px rgba(255, 183, 22, .22);
}

#achievements .hero-achievement-actions a:first-child:hover,
#achievements .hero-achievement-actions a:first-child:focus-visible {
    color: #083878 !important;
    border-color: rgba(255, 239, 164, .9);
    background: linear-gradient(135deg, #ffe47b 0%, #ffc13c 100%) !important;
    box-shadow: 0 10px 21px rgba(255, 183, 22, .28);
    transform: translateY(-2px);
}

#achievements .hero-achievement-actions a:last-child {
    min-width: 122px;
    color: #f2f9ff !important;
    border: 1px solid rgba(211, 237, 255, .68);
    background: rgba(255, 255, 255, .14) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

#achievements .hero-achievement-actions a:last-child:hover,
#achievements .hero-achievement-actions a:last-child:focus-visible {
    color: #fff !important;
    border-color: rgba(229, 245, 255, .9);
    background: rgba(255, 255, 255, .23) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 7px 16px rgba(4, 50, 111, .14);
    transform: translateY(-2px);
}

/* One calm Hero-blue palette across all achievement cards. */
#achievements .hero-achievement-card,
#achievements .hero-achievement-card:nth-child(2) {
    border-color: #2b86ca !important;
    background: linear-gradient(180deg, #2378c1 0%, #185fae 100%) !important;
    box-shadow: 0 16px 30px rgba(17, 86, 151, .16);
}

#achievements .hero-achievement-image {
    border-bottom-color: #72c5ee !important;
}

#achievements .hero-achievement-body,
#achievements .hero-achievement-card:nth-child(2) .hero-achievement-body {
    background: linear-gradient(180deg, #2378c1 0%, #185fae 100%) !important;
}

#achievements .hero-achievement-media-title > span {
    color: #e5f7ff !important;
    border-color: rgba(154, 220, 249, .68) !important;
    background: rgba(8, 73, 139, .72) !important;
}

#achievements .hero-achievement-media-title > span::before,
#achievements .hero-achievement-media-title > span::after {
    color: #8fd8f6 !important;
}

#achievements .hero-achievement-media-label,
#achievements .hero-achievement-media-label--purple {
    color: #0b5d9e !important;
    border-color: rgba(174, 225, 248, .88) !important;
    background: rgba(239, 250, 255, .96) !important;
}

#achievements .hero-achievement-score {
    color: #0a5b9c !important;
    border-color: #f3fbff !important;
    background: linear-gradient(135deg, #e9f9ff 0%, #8ed8f5 100%) !important;
    box-shadow: 0 4px 10px rgba(8, 65, 126, .2);
}

#achievements .hero-achievement-featured-mark {
    color: #0b5d9e !important;
    border-color: #98d8f4 !important;
    background: #e8f8ff !important;
}

#achievements .hero-achievement-featured-mark i {
    color: #1e73be !important;
}

#achievements .hero-achievement-highlight {
    color: #e8f8ff !important;
    border-color: rgba(161, 224, 250, .58) !important;
    background: rgba(101, 194, 235, .2) !important;
}

#achievements .hero-achievement-actions a:first-child {
    color: #fff !important;
    border-color: rgba(163, 224, 250, .82) !important;
    background: linear-gradient(135deg, #43a9e3 0%, #176fc0 100%) !important;
    box-shadow: 0 8px 18px rgba(7, 89, 165, .24);
}

#achievements .hero-achievement-actions a:first-child:hover,
#achievements .hero-achievement-actions a:first-child:focus-visible {
    color: #fff !important;
    border-color: rgba(214, 242, 255, .96) !important;
    background: linear-gradient(135deg, #68c2ed 0%, #2686d1 100%) !important;
    box-shadow: 0 10px 21px rgba(7, 89, 165, .3);
}

/* Lift each achievement card gently on hover without adding a dark outline. */
#achievements .hero-achievement-card {
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

#achievements .hero-achievement-card:hover,
#achievements .hero-achievement-card:focus-within {
    border-color: #73c9ef !important;
    box-shadow: 0 22px 38px rgba(14, 93, 160, .24) !important;
    transform: translateY(-10px) scale(1.012);
}

#achievements .hero-achievement-card:nth-child(3) .hero-achievement-highlight {
    color: #0b5f98 !important;
    border-color: rgba(213, 245, 255, .95) !important;
    background: linear-gradient(135deg, #e8f9ff 0%, #a8e2f7 100%) !important;
    box-shadow: 0 7px 16px rgba(123, 211, 244, .18), inset 0 1px 0 rgba(255, 255, 255, .76);
}

@media (prefers-reduced-motion: reduce) {
    #achievements .hero-achievement-card {
        transition: none;
    }

    #achievements .hero-achievement-card:hover,
    #achievements .hero-achievement-card:focus-within {
        transform: none;
    }
}

/* Keep the achievement actions prominent after removing the decorative arrow. */
#achievements .hero-achievement-actions a {
    min-height: 48px !important;
    padding: 12px 20px !important;
    font-size: .94rem !important;
    line-height: 1.2;
}

/* Use the same brighter cyan badge treatment for every achievement label. */
#achievements .hero-achievement-highlight,
#achievements .hero-achievement-card:nth-child(3) .hero-achievement-highlight {
    color: #0b5f98 !important;
    border: 1px solid rgba(213, 245, 255, .95) !important;
    background: linear-gradient(135deg, #e8f9ff 0%, #a8e2f7 100%) !important;
    box-shadow: 0 7px 16px rgba(123, 211, 244, .18), inset 0 1px 0 rgba(255, 255, 255, .76);
}

/* Keep both actions in the same calm cyan-blue family. */
#achievements .hero-achievement-actions a:first-child {
    color: #084f84 !important;
    border-color: rgba(213, 245, 255, .95) !important;
    background: linear-gradient(135deg, #bcecfb 0%, #58bde7 100%) !important;
    box-shadow: 0 8px 18px rgba(59, 174, 224, .24);
}

#achievements .hero-achievement-actions a:first-child:hover,
#achievements .hero-achievement-actions a:first-child:focus-visible {
    color: #084f84 !important;
    border-color: #f0fcff !important;
    background: linear-gradient(135deg, #d9f6ff 0%, #7bd0ef 100%) !important;
    box-shadow: 0 10px 21px rgba(59, 174, 224, .3);
}

#achievements .hero-achievement-actions a:last-child {
    color: #eafaff !important;
    border-color: rgba(175, 231, 251, .86) !important;
    background: rgba(129, 211, 241, .22) !important;
}

#achievements .hero-achievement-actions a:last-child:hover,
#achievements .hero-achievement-actions a:last-child:focus-visible {
    color: #fff !important;
    border-color: #e0f8ff !important;
    background: rgba(154, 224, 247, .36) !important;
}

/* Match the supplied verified badge icon at a stable 18px size. */
.material-symbols-outlined.text-\[18px\] {
    display: inline-block;
    font-family: "Material Symbols Outlined" !important;
    font-size: 18px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "liga";
}

/* Local fallback prevents the ligature name from ever appearing as text. */
.material-symbols-outlined.text-\[18px\] {
    position: relative;
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 0 !important;
}

.material-symbols-outlined.text-\[18px\]::before {
    color: currentColor;
    content: "\f0a3";
    font-family: "Font Awesome 5 Free";
    font-size: 18px;
    font-weight: 900;
    line-height: 18px;
}

.material-symbols-outlined.text-\[18px\]::after {
    position: absolute;
    color: #fff;
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-size: 8px;
    font-weight: 900;
    line-height: 1;
}

#programs .hero-program-feature-content .hero-program-feature-kicker {
    cursor: default;
}

#programs .hero-program-feature-content .hero-program-feature-kicker:hover {
    color: #1e73be !important;
}

/* Keep the IELTS achievement card aligned with the shared blue treatment. */
#achievements .hero-achievement-card:nth-child(2) {
    border: 2px solid #2b86ca !important;
    background: linear-gradient(180deg, #2378c1 0%, #185fae 100%) !important;
    box-shadow: 0 16px 30px rgba(17, 86, 151, .16) !important;
}

#achievements .hero-achievement-card:nth-child(2) .hero-achievement-image {
    border-bottom: 4px solid #72c5ee !important;
}

#achievements .hero-achievement-card:nth-child(2) .hero-achievement-body,
#achievements .hero-achievement-card:nth-child(2) .hero-achievement-body::before {
    background: linear-gradient(180deg, #2378c1 0%, #185fae 100%) !important;
}

#achievements .hero-achievement-card:nth-child(2) .hero-achievement-body::before {
    display: none !important;
    content: none !important;
}

/* Feedback summary and cards follow the supplied testimonial layout. */
#feedback .hero-section-heading-centered {
    margin-bottom: 18px;
}

#feedback .hero-feedback-rating-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 34px;
    padding: 9px 17px;
    color: #5b6c82;
    border: 1px solid #e2eaf3;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 7px 18px rgba(25, 73, 121, .08);
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-size: 1rem;
    line-height: 1.35;
}

#feedback .hero-feedback-rating-summary :not(i),
#feedback .hero-feedback-card :not(i) {
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
}

#feedback .hero-feedback-rating-score,
#feedback .hero-feedback-rating-stars {
    display: inline-flex;
    align-items: center;
}

#feedback .hero-feedback-rating-score {
    gap: 5px;
    color: #ef9700;
    font-weight: 700;
    white-space: nowrap;
}

#feedback .hero-feedback-rating-stars {
    gap: 1px;
    color: #f3aa16;
    font-size: 1rem;
    letter-spacing: .02em;
    line-height: 1;
}

#feedback .hero-feedback-rating-divider {
    color: #c5d3e2;
    font-size: 1rem;
}

#feedback .hero-feedback-rating-copy {
    color: #435a74;
    font-weight: 500;
    white-space: nowrap;
}

#feedback .hero-feedback-card {
    position: relative;
    display: flex;
    min-height: 390px;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 28px;
    border: 1px solid #e2eaf3;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(24, 61, 101, .08);
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

#feedback .hero-feedback-card::after {
    display: none;
    content: none;
}

#feedback .hero-feedback-card:hover,
#feedback .hero-feedback-card:focus-within {
    border-color: #b5d8f2;
    box-shadow: 0 20px 38px rgba(27, 96, 155, .14);
    transform: translateY(-7px);
}

#feedback .hero-feedback-card-main,
#feedback .hero-feedback-footer {
    position: relative;
    z-index: 1;
}

#feedback .hero-feedback-person {
    align-items: center;
    gap: 15px;
    margin-bottom: 0;
}

#feedback .hero-feedback-avatar-wrap {
    position: relative;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
}

#feedback .hero-feedback-person img {
    width: 64px;
    height: 64px;
    border: 1px solid #cfe4f6;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #eff7fd;
}

#feedback .hero-feedback-verified {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #1e73be;
    box-shadow: 0 3px 8px rgba(20, 85, 143, .22);
    font-size: .62rem;
}

#feedback .hero-feedback-person-copy {
    min-width: 0;
}

#feedback .hero-feedback-person h3 {
    margin: 0;
    color: #0f2b48;
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.16rem;
    font-weight: 800;
    line-height: 1.25;
}

#feedback .hero-feedback-person p {
    margin: 4px 0 0;
    color: #718198;
    font-family: inherit;
    font-size: .9rem;
    line-height: 1.4;
}

#feedback .hero-feedback-course {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 9px;
    color: #1e73be;
    border: 1px solid #cfe5f7;
    border-radius: 6px;
    background: #eef7fe;
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.2;
}

#feedback .hero-feedback-stars {
    gap: 3px;
    margin-top: 22px;
    color: #f2a30c;
    font-size: 1.14rem;
    line-height: 1;
}

#feedback .hero-feedback-divider {
    width: 100%;
    height: 1px;
    margin: 17px 0 0;
    background: #e8eef5;
}

#feedback .hero-feedback-card blockquote {
    margin: 18px 0 0;
    padding: 0;
    color: #445d78;
    border: 0;
    font-family: inherit;
    font-size: 1rem;
    font-style: italic;
    line-height: 1.7;
}

#feedback .hero-feedback-card blockquote::before {
    display: none;
    content: none;
}

#feedback .hero-feedback-card blockquote > span.text-brand-500.text-lg {
    color: #1e73be;
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    user-select: none;
}

#feedback .hero-feedback-card blockquote > span.mr-1 {
    margin-right: .25rem;
}

#feedback .hero-feedback-card blockquote > span.ml-1 {
    margin-left: .25rem;
}

#feedback .hero-feedback-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 27px;
    padding-top: 13px;
    color: #91a0b1;
    border-top: 1px solid #edf1f6;
    font-family: inherit;
    font-size: .84rem;
    line-height: 1.35;
}

#feedback .hero-feedback-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #2676ba;
    font-weight: 600;
    text-align: right;
}

#feedback .hero-feedback-status i {
    color: #1e73be;
    font-size: .83rem;
}

#feedback .hero-feedback-status-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #27b47b;
}

@media (max-width: 767.98px) {
    #feedback .hero-section-heading-centered {
        margin-bottom: 15px;
    }

    #feedback .hero-feedback-rating-summary {
        width: calc(100% - 22px);
        margin-bottom: 25px;
        padding: 8px 13px;
        font-size: .88rem;
    }

    #feedback .hero-feedback-rating-divider {
        display: none;
    }

    #feedback .hero-feedback-rating-copy {
        white-space: normal;
        text-align: left;
    }

    #feedback .hero-feedback-card {
        min-height: 0;
        padding: 23px 21px;
    }

    #feedback .hero-feedback-person h3 {
        font-size: 1.08rem;
    }

    #feedback .hero-feedback-person p {
        font-size: .84rem;
    }

    #feedback .hero-feedback-card blockquote {
        font-size: .94rem;
    }

    #feedback .hero-feedback-footer {
        font-size: .8rem;
    }

    #feedback .hero-feedback-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    #feedback .hero-feedback-status {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    #feedback .hero-feedback-card {
        transition: none;
    }

    #feedback .hero-feedback-card:hover,
    #feedback .hero-feedback-card:focus-within {
        transform: none;
    }
}

/* News cards: match the centered three-card reference layout. */
#news > .container {
    width: min(calc(100% - 40px), 1280px);
    max-width: 1280px;
    padding-right: 0;
    padding-left: 0;
}

#news .hero-news-heading {
    width: 100%;
    max-width: none;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

#news .hero-news-heading > div {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

#news .hero-news-heading h2 {
    width: 100%;
    text-align: center;
}

#news .hero-news-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    align-items: stretch;
}

#news .hero-news-card {
    min-width: 0;
    border-radius: 20px;
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
    box-shadow: 0 10px 24px rgba(22, 42, 91, .08);
    transition: transform .25s ease, box-shadow .25s ease;
}

#news .hero-news-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 38px rgba(22, 42, 91, .16);
}

#news .hero-news-card:hover .hero-news-image-wrap img {
    transform: scale(1.04);
}

#news .hero-news-image-wrap {
    height: 238px;
    flex: 0 0 238px;
}

#news .hero-news-badge,
#news .hero-news-body time,
#news .hero-news-body h3,
#news .hero-news-body p,
#news .hero-news-body a {
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
}

#news .hero-news-badge {
    top: 16px;
    left: 16px;
    padding: 7px 12px;
    font-size: 14px !important;
    font-weight: 700;
    letter-spacing: .02em;
}

#news .hero-news-body {
    padding: 24px 28px 26px;
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
}

#news .hero-news-body time {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: #1769ed;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.35;
}

#news .hero-news-body time i {
    color: #1769ed;
    font-size: 15px;
}

#news .hero-news-body h3 {
    min-height: 58px;
    margin: 0;
    color: #071c43;
    font-size: 20px !important;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.35;
}

#news .hero-news-body p {
    min-height: 75px;
    margin: 12px 0 20px;
    color: #53627d;
    font-size: 16px !important;
    font-weight: 400;
    line-height: 1.65;
}

#news .hero-news-detail-button,
#news .hero-news-detail-button span,
#news .hero-news-explore-link,
#news .hero-news-explore-link span {
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
}

#news .hero-news-detail-button span,
#news .hero-news-explore-link span {
    font-size: 16px !important;
}

#news .hero-news-detail-button i {
    font-family: "Font Awesome 5 Free" !important;
}

@media (max-width: 1199.98px) and (min-width: 992px) {
    #news > .container {
        width: min(calc(100% - 36px), 1120px);
    }

    #news .hero-news-track {
        gap: 24px;
    }

    #news .hero-news-image-wrap {
        height: 220px;
        flex-basis: 220px;
    }

    #news .hero-news-body {
        padding-right: 23px;
        padding-left: 23px;
    }
}

@media (max-width: 991.98px) {
    #news > .container {
        width: calc(100% - 32px);
        max-width: 760px;
    }

    #news .hero-mobile-slider-viewport {
        overflow: hidden;
        margin: 0 -2px;
        padding: 0 2px 5px;
    }

    #news .hero-news-track {
        display: flex;
        gap: 0;
        transform: translateX(calc(var(--slide-index, 0) * -100%));
        transition: transform .42s ease;
    }

    #news .hero-news-track > article {
        width: 100%;
        flex: 0 0 100%;
    }

    #news .hero-news-card {
        height: auto;
    }

    #news .hero-news-image-wrap {
        height: 225px;
        flex-basis: 225px;
    }

    #news .hero-news-body {
        padding: 21px;
    }

    #news .hero-news-body h3,
    #news .hero-news-body p {
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    #news .hero-news-card {
        transition: none;
    }
}

/* Connected Hero Blue palette: distinct section bands with shared undertones. */
.hero-homepage {
    background: #f6faff;
}

.hero-homepage .hero-home-section {
    border-top: 1px solid rgba(46, 125, 188, .14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .82),
        inset 0 22px 46px rgba(46, 125, 188, .025);
}

.hero-homepage .hero-home-section > .container {
    position: relative;
    z-index: 1;
}

#about.hero-about-section {
    background: linear-gradient(180deg, #ffffff 0%, #f3f9ff 100%) !important;
}

#programs.hero-program-section {
    background:
        radial-gradient(circle at 10% 5%, rgba(75, 168, 229, .17), transparent 29rem),
        radial-gradient(circle at 92% 90%, rgba(116, 187, 235, .13), transparent 25rem),
        linear-gradient(180deg, #eef8ff 0%, #e5f1ff 100%) !important;
}

#achievements.hero-achievement-section {
    background:
        radial-gradient(circle at 88% 8%, rgba(79, 174, 232, .12), transparent 26rem),
        linear-gradient(180deg, #f9fcff 0%, #eaf6ff 100%) !important;
}

#feedback.hero-feedback-section {
    background:
        radial-gradient(circle at 12% 14%, rgba(111, 128, 220, .09), transparent 25rem),
        linear-gradient(180deg, #f7f6ff 0%, #edf5ff 100%) !important;
}

#facilities.hero-facility-section {
    background:
        radial-gradient(circle at 90% 12%, rgba(64, 185, 222, .12), transparent 28rem),
        linear-gradient(180deg, #effaff 0%, #e8f3ff 100%) !important;
}

#news.hero-news-section {
    background:
        radial-gradient(circle at 8% 90%, rgba(85, 152, 218, .08), transparent 24rem),
        linear-gradient(180deg, #fbfdff 0%, #f1f5ff 100%) !important;
}

#about .hero-about-title,
#programs .hero-section-heading h2,
#achievements .hero-section-heading h2,
#feedback .hero-section-heading h2,
#facilities .hero-section-heading h2,
#news .hero-section-heading h2 {
    color: #11558d !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .72);
}

#about .hero-about-eyebrow-label,
#programs .hero-eyebrow,
#achievements .hero-eyebrow,
#feedback .hero-eyebrow,
#facilities .hero-eyebrow,
#news .hero-eyebrow {
    color: #1e73be !important;
}

#about .hero-about-heading > p,
#programs .hero-section-heading > p,
#achievements .hero-section-heading > p,
#feedback .hero-section-heading > p,
#facilities .hero-section-heading > p {
    color: #4e647b !important;
}

#about .hero-about-eyebrow {
    gap: 0 !important;
}

/* Campaign banner and consultation card: keep the artwork fully visible while
   giving the form the compact, high-contrast treatment used in the reference. */
.hero-homepage .hero-campaign {
    min-height: clamp(538px, 37.5vw, 720px);
}

.hero-homepage .hero-campaign-slide img {
    object-fit: cover;
    object-position: center center;
}

.hero-homepage .hero-campaign-form-wrap {
    /* Keep the card visually attached to the right edge of the artwork. */
    right: clamp(8px, 1.2vw, 18px);
    width: min(333px, 29vw);
}

.hero-homepage .hero-campaign-form {
    padding: 20px 19px 14px;
    border: 1px solid #dbe5f1;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(18, 35, 79, .22), 0 0 0 1px rgba(255, 255, 255, .7);
}

.hero-homepage .hero-campaign-form::before {
    position: absolute;
    top: -1px;
    right: -1px;
    left: -1px;
    height: 4px;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(90deg, #2d5fe9 0%, #3e43d2 52%, #e5465a 100%);
    content: "";
    pointer-events: none;
}

.hero-homepage .hero-campaign-form-heading {
    margin-bottom: 12px;
    text-align: center;
}

.hero-homepage .hero-campaign-form-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.hero-homepage .hero-campaign-form-title-icon {
    display: inline-grid;
    width: 22px;
    height: 22px;
    margin: 0;
    place-items: center;
    border: 1px solid #d9e6ff;
    border-radius: 6px;
    background: #f1f6ff;
    color: #356be6;
    font-size: 10px !important;
}

.hero-homepage .hero-campaign-form-title h2 {
    margin: 0;
    color: #17266d;
    font-size: 1.05rem;
    font-weight: 850;
    line-height: 1.2;
}

.hero-homepage .hero-campaign-form-offer {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 29px;
    margin-top: 10px;
    padding: 5px 11px;
    border: 1px solid #ffd0d4;
    border-radius: 999px;
    background: #fff2f3;
    color: #e2394d;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.2;
}

.hero-homepage .hero-campaign-form-offer i {
    color: #ef5666;
    font-size: .72rem;
}

.hero-homepage .hero-campaign-form-offer span {
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: 0;
}

.hero-homepage .hero-campaign-form-intro {
    max-width: 290px;
    margin: 8px auto 0;
    color: #71809f;
    font-size: .64rem;
    line-height: 1.35;
}

.hero-homepage .hero-campaign-form .consult-form {
    gap: 7px;
}

.hero-homepage .hero-campaign-form .consult-field > label,
.hero-homepage .hero-campaign-form .consult-fieldset legend {
    margin-bottom: 2px;
    color: #18244b;
    font-size: .65rem !important;
    font-weight: 750;
}

.hero-homepage .hero-campaign-form .consult-optional {
    color: #7784a0;
    font-size: .64rem;
    font-weight: 500;
}

.hero-homepage .hero-campaign-form .consult-input-wrap {
    min-height: 33px;
    border: 1px solid #d4deed;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
}

.hero-homepage .hero-campaign-form .consult-input-wrap > i {
    left: 11px;
    width: 15px;
    color: #4b7bed;
    font-size: .68rem;
}

.hero-homepage .hero-campaign-form .consult-input-wrap input,
.hero-homepage .hero-campaign-form .consult-input-wrap select {
    min-height: 33px;
    padding: 6px 10px 6px 33px !important;
    color: #243153;
    font-size: .7rem !important;
}

.hero-homepage .hero-campaign-form .consult-input-wrap textarea {
    min-height: 57px;
    padding: 8px 10px 7px 33px !important;
    color: #243153;
    font-size: .7rem !important;
}

.hero-homepage .hero-campaign-form .consult-textarea-wrap > i {
    top: 13px;
    transform: none;
}

.hero-homepage .hero-campaign-form .consult-location-grid {
    gap: 7px;
}

.hero-homepage .hero-campaign-form .consult-location-grid .consult-input-wrap > i {
    left: 9px;
    width: 14px;
}

.hero-homepage .hero-campaign-form .consult-location-grid input {
    padding-right: 7px !important;
    padding-left: 28px !important;
}

.hero-homepage .hero-campaign-form .consult-submit {
    min-height: 37px;
    gap: 8px;
    margin-top: 3px;
    border-radius: 8px;
    background: #24236e;
    box-shadow: 0 9px 18px rgba(36, 35, 110, .24);
    font-size: .76rem !important;
}

.hero-homepage .hero-campaign-form .consult-submit > i {
    font-size: .68rem;
}

@media (max-width: 1199.98px) and (min-width: 992px) {
    .hero-homepage .hero-campaign-form-wrap {
        right: 16px;
        width: min(333px, 31vw);
    }
}

@media (max-width: 767.98px) {
    .hero-homepage .hero-campaign-form-wrap {
        right: auto;
        width: auto;
        margin-right: 10px;
        margin-left: 18px;
    }

    .hero-homepage .hero-campaign-form {
        padding: 22px 16px 16px;
    }

    .hero-homepage .hero-campaign-form-title h2 {
        font-size: 1rem;
    }

    .hero-homepage .hero-campaign-form-offer {
        font-size: .75rem;
    }

    .hero-homepage .hero-campaign-form-intro {
        max-width: 270px;
    }
}

/* Consultation form: use the same Plus Jakarta Sans family as the campaign
   artwork and give every readable control enough size for Vietnamese text. */
.hero-homepage .hero-campaign-form,
.hero-homepage .hero-campaign-form :where(h2, p, label, legend, input, select, textarea, button, span) {
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
}

/* site.css has a deliberately high-specificity Roboto reset; the page id
   keeps this form on Plus Jakarta Sans while leaving Font Awesome <i> icons
   untouched. */
#heroPageTop .hero-homepage .hero-campaign-form,
#heroPageTop .hero-homepage .hero-campaign-form *:not(i) {
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
}

.hero-homepage .hero-campaign-form-wrap {
    /* A larger right inset moves the card subtly left without disconnecting it
       from the banner edge. */
    right: clamp(18px, 2vw, 28px);
}

.hero-homepage .hero-campaign-form-title h2 {
    font-size: 1.2rem;
}

.hero-homepage .hero-campaign-form-offer {
    font-size: .88rem;
}

.hero-homepage .hero-campaign-form-intro {
    font-size: .82rem;
}

.hero-homepage .hero-campaign-form .consult-field > label,
.hero-homepage .hero-campaign-form .consult-fieldset legend {
    font-size: .82rem !important;
}

.hero-homepage .hero-campaign-form .consult-input-wrap input,
.hero-homepage .hero-campaign-form .consult-input-wrap select,
.hero-homepage .hero-campaign-form .consult-input-wrap textarea {
    font-size: .9rem !important;
}

.hero-homepage .hero-campaign-form .consult-input-wrap input::placeholder,
.hero-homepage .hero-campaign-form .consult-input-wrap textarea::placeholder {
    font-size: .9rem !important;
}

/* The wrapper owns the field border. Removing the native control border
   prevents the textarea (and the other controls) from rendering a second
   inset outline on top of it. */
.hero-homepage .hero-campaign-form .consult-input-wrap > input,
.hero-homepage .hero-campaign-form .consult-input-wrap > select,
.hero-homepage .hero-campaign-form .consult-input-wrap > textarea {
    border: 0 !important;
    border-radius: inherit;
    outline: none;
    box-shadow: none !important;
    background: transparent;
}

.hero-homepage .hero-campaign-form .consult-submit {
    font-size: .9rem !important;
}

@media (max-width: 1199.98px) and (min-width: 992px) {
    .hero-homepage .hero-campaign-form-wrap {
        right: 24px;
    }
}

@media (max-width: 767.98px) {
    .hero-homepage .hero-campaign-form-wrap {
        right: auto;
        margin-right: 10px;
        margin-left: 18px;
    }
}

/* Managed teacher profiles: data comes from the CMS teacher module. */
.hero-teacher-section {
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.hero-teacher-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 34px;
}

.hero-teacher-card {
    overflow: hidden;
    border: 1px solid #dfe8f3;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(20, 54, 94, .07);
    transition: transform .2s ease, box-shadow .2s ease;
}

.hero-teacher-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(20, 54, 94, .12);
}

.hero-teacher-photo {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #edf4fc;
}

.hero-teacher-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-teacher-photo > span { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px; color: #0c4fa8; background: rgba(255,255,255,.92); font-size: .68rem; font-weight: 800; box-shadow: 0 5px 14px rgba(15,39,68,.12); }
.hero-teacher-body { padding: 18px; }
.hero-teacher-body h3 { margin: 0; color: #15253e; font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; font-size: 1rem; font-weight: 800; }
.hero-teacher-body > strong { display: block; margin-top: 5px; color: #1263c7; font-size: .76rem; }
.hero-teacher-body > p { display: -webkit-box; overflow: hidden; margin: 11px 0 0; color: #667892; font-size: .78rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.hero-teacher-socials { display: flex; gap: 7px; margin-top: 14px; }
.hero-teacher-socials a { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #dce7f3; border-radius: 9px; color: #3173c7; text-decoration: none; background: #f7fbff; }
.hero-teacher-socials a:hover { color: #fff; border-color: #176ee0; background: #176ee0; }

@media (max-width: 991.98px) {
    .hero-teacher-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .hero-teacher-grid { grid-template-columns: 1fr; }
}