/* KHLG typography: Barlow headings and Inter body text. */

:root {
    /* KHLG APPROVED PALETTE — attached reference */
    --khlg-charcoal: #4a5159;
    --khlg-navy: #30618c;
    --khlg-blue: #4ea4d9;
    --khlg-light-blue: #acd7f2;
    --khlg-neutral: #f2f2f2;
    --khlg-white: #ffffff;

    /* Semantic aliases used throughout the page */
    --navy-950: var(--khlg-navy);
    --navy-800: var(--khlg-navy);
    --blue-700: var(--khlg-blue);
    --blue-600: var(--khlg-blue);
    --cyan-500: var(--khlg-blue);
    --cyan-400: var(--khlg-blue);
    --cyan-200: var(--khlg-light-blue);
    --cyan-100: var(--khlg-light-blue);
    --charcoal: var(--khlg-charcoal);
    --ink: var(--khlg-charcoal);
    --muted: rgba(74, 81, 89, 0.78);
    --surface: var(--khlg-neutral);
    --white: var(--khlg-white);
    --line: rgba(74, 81, 89, 0.18);
    --shadow: 0 28px 70px rgba(48, 97, 140, 0.16);

    /* Global type system */
    --font-heading: "Barlow", Arial, sans-serif;
    --font-body: "Inter", Arial, sans-serif;

    --type-display: clamp(61.6px, 7.26vw, 114.4px);
    --type-h2: clamp(44px, 5.06vw, 74.8px);
    --type-h3: clamp(26.4px, 2.42vw, 35.2px);
    --type-lead: clamp(19.8px, 1.595vw, 24.2px);
    --type-body: 18.7px;
    --type-small: 15.4px;
    --type-label: 13.2px;

    /* Global spacing system */
    --space-1: 8px;
    --space-2: 12px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 64px;
    --space-8: 80px;
    --space-9: 96px;
    --section-y: clamp(84px, 8vw, 128px);
    --page-gutter: clamp(22px, 4vw, 64px);
    --content-gap: clamp(24px, 3vw, 48px);

    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --shell: 1440px;
}

/* CONTACT MODAL — scoped styles preserve the existing homepage layout. */
.contact-modal {
    width: min(1000px, calc(100% - 40px));
    max-width: none;
    max-height: calc(100dvh - 40px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 12px;
    color: var(--khlg-charcoal);
    background: var(--khlg-white);
    box-shadow: 0 30px 100px rgba(15, 35, 52, 0.3);
    overflow: auto;
    overscroll-behavior: contain;
}
.contact-modal:not([open]) {
    display: none;
}
.contact-modal::backdrop {
    background: rgba(17, 35, 50, 0.64);
}
.contact-modal__panel {
    position: relative;
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
}
/* The close control belongs to the dialog scrollport (not a grid row).
   This keeps it pinned in the top-right while the long mobile form scrolls. */
.contact-modal__close {
    position: sticky;
    top: 12px;
    z-index: 30;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 12px 12px -56px auto;
    padding: 0;
    border: 1px solid rgba(48, 97, 140, 0.3);
    border-radius: 50%;
    background: #fff;
    color: var(--khlg-navy);
    box-shadow: 0 3px 14px rgba(24, 47, 77, 0.16);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.contact-modal__close svg {
    display: block;
    width: 20px;
    height: 20px;
    pointer-events: none;
}
.contact-modal__close:hover {
    background: var(--khlg-neutral);
}
.contact-modal__close:active {
    transform: scale(0.96);
}
.contact-modal__intro {
    grid-column: 1;
    grid-row: 1;
    padding: 48px 34px 32px;
    background: var(--khlg-navy);
    color: #fff;
    min-width: 0;
}
.contact-modal__eyebrow {
    display: block;
    color: var(--khlg-light-blue);
    font-family: var(--font-heading);
    font-size: 12.1px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.contact-modal__intro h2 {
    margin: 20px 0;
    color: #fff;
    font-family: var(--font-heading);
    font-size: clamp(30.8px, 3.3vw, 39.6px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.035em;
}
.contact-modal__intro p {
    margin: 0;
    color: #fff;
    font-size: 15.4px;
    line-height: 1.7;
}
.contact-modal__details {
    display: grid;
    gap: 20px;
    margin: 34px 0;
}
.contact-modal__details span {
    display: block;
    color: var(--khlg-light-blue);
    font-size: 13.2px;
    font-weight: 600;
}
.contact-modal__details a {
    color: #fff;
    font-size: 16.5px;
    overflow-wrap: anywhere;
}
.contact-modal__details a:hover {
    text-decoration: underline;
}
.contact-modal__intro .contact-modal__region {
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 13.2px;
}
.contact-modal__form-wrap {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding: 40px 34px 28px;
}
.contact-modal__form-wrap h3 {
    margin: 0 32px 4px 0;
    font-family: var(--font-heading);
    font-size: 26.4px;
    line-height: 1.35;
    font-weight: 500;
    color: var(--khlg-charcoal);
}
/* Keep the shared verification and success views in the homepage design. */
.contact-modal .khlg-verify,
.contact-modal .khlg-form__success {
    font-family: var(--font-body);
}
.contact-modal .khlg-form__submit,
.contact-modal .khlg-form__reset,
.contact-modal .khlg-verify__link {
    font-family: var(--font-heading);
    border-radius: 5px;
}
.contact-modal .khlg-form__submit,
.contact-modal .khlg-form__reset {
    background: var(--khlg-blue);
}
.contact-modal .contact-form__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.contact-modal .khlg-verify__code {
    font-family: "Courier New", ui-monospace, monospace;
    font-size: clamp(1.5rem, 4vw, 1.75rem);
}
.contact-modal__required {
    margin: 0 0 22px;
    font-size: 13.2px;
}
.contact-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.contact-form__field {
    min-width: 0;
}
.contact-form__field--full {
    grid-column: 1 / -1;
}
.contact-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 14.3px;
    font-weight: 600;
    line-height: 1.4;
}
.contact-form__optional {
    font-weight: 400;
    font-size: 13.2px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid #b8c3cb;
    border-radius: 5px;
    background: #fff;
    color: var(--khlg-charcoal);
    font-family: var(--font-body);
    font-size: 17.6px;
    line-height: 1.5;
}
.contact-form select {
    padding-right: 24px;
    text-overflow: ellipsis;
}
.contact-form textarea {
    min-height: 110px;
    resize: vertical;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: var(--khlg-navy);
    outline: 2px solid var(--khlg-blue);
    outline-offset: 2px;
}
.contact-modal button:focus-visible,
.contact-modal a:focus-visible {
    outline: 3px solid var(--khlg-blue);
    outline-offset: 4px;
}
.contact-form__note {
    margin: 16px 0;
    font-size: 13.2px;
    line-height: 1.6;
}
.contact-form .contact-form__submit {
    width: 100%;
    border-radius: 5px;
    background: var(--khlg-navy);
    color: #fff;
    cursor: pointer;
}
.contact-form .contact-form__submit:hover {
    background: #3577b2;
}
.contact-form__status {
    margin: 14px 0 0;
    color: var(--khlg-navy);
    font-size: 14.3px;
    line-height: 1.6;
}
.contact-form__status:empty {
    display: none;
}
.contact-form__draft-link {
    color: var(--khlg-navy);
    font-size: 14.3px;
    text-decoration: underline;
}
.contact-form__draft-link[hidden] {
    display: none;
}
@media (max-width: 700px) {
    .contact-modal {
        width: calc(100% - 24px);
        max-height: calc(100dvh - 24px);
        border-radius: 8px;
    }
    .contact-modal__panel {
        grid-template-columns: minmax(0, 1fr);
    }
    .contact-modal__intro {
        padding: 30px 24px 24px;
    }
    .contact-modal__eyebrow {
        padding-right: 38px;
    }
    .contact-modal__intro h2 {
        margin: 14px 0;
        font-size: 30.8px;
    }
    .contact-modal__details {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin: 20px 0;
    }
    .contact-modal__details > div:first-child {
        grid-column: 1 / -1;
    }
    .contact-modal__form-wrap {
        grid-column: 1;
        grid-row: 2;
        padding: 24px;
    }
}
@media (max-width: 440px) {
    .contact-form__grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .contact-modal__intro,
    .contact-modal__form-wrap {
        padding-inline: 20px;
    }
}

* {
    box-sizing: border-box;
}
html {
    font-family: var(--font-body);
    scroll-behavior: smooth;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--white);
    font-size: 18.7px;
    line-height: 1.65;
}
img {
    display: block;
    width: 100%;
}
a {
    color: inherit;
    text-decoration: none;
}
button,
input,
textarea,
select {
    font: inherit;
}

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 9999;
    padding: 10px 14px;
    background: var(--white);
    color: var(--navy-950);
    transform: translateY(-160%);
}
.skip-link:focus {
    transform: translateY(0);
}

.site-shell {
    width: min(var(--shell), calc(100% - 80px));
    margin-inline: auto;
}

.coming-soon {
    padding: 8px 20px;
    text-align: center;
    background: var(--cyan-100);
    color: var(--navy-950);
    font-family: var(--font-heading);
    font-size: 13.2px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(48, 97, 140, 0.94);
    backdrop-filter: blur(16px);
}
.site-header__inner {
    min-height: 82px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 34px;
    align-items: center;
}
.brand img {
    width: 190px;
    max-height: 54px;
    object-fit: contain;
}
.desktop-nav {
    justify-self: center;
    display: flex;
    gap: 34px;
}
.desktop-nav a {
    position: relative;
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--font-heading);
    font-size: 14.3px;
    font-weight: 600;
}
.desktop-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -7px;
    height: 2px;
    background: var(--cyan-400);
    transition: right 0.25s var(--ease);
}
.desktop-nav a:hover::after,
.desktop-nav a.is-active::after {
    right: 0;
}
.desktop-nav a:hover,
.desktop-nav a.is-active {
    color: #fff;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 50px;
    padding: 0 22px;
    border: 1px solid transparent;
    font-family: var(--font-heading);
    font-size: 14.3px;
    font-weight: 600;
    transition:
        transform 0.2s var(--ease),
        background 0.2s var(--ease),
        color 0.2s var(--ease),
        border-color 0.2s var(--ease);
}
.button:hover {
    transform: translateY(-2px);
}
.button--nav {
    background: var(--white);
    color: var(--navy-950);
}
.button--primary {
    background: var(--navy-950);
    color: #fff;
}
.button--light {
    background: #fff;
    color: var(--navy-950);
}
.button--large {
    min-height: 60px;
    padding-inline: 30px;
    font-size: 15.4px;
}

.menu-toggle {
    display: none;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
}
.menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    margin: 6px auto;
    background: #fff;
}
.mobile-nav {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: var(--navy-950);
}
.mobile-nav__inner {
    display: grid;
    padding-block: 18px 26px;
}
.mobile-nav a {
    padding: 12px 0;
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 500;
}

.hero {
    position: relative;
    min-height: calc(100svh - 118px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    color: #fff;
}
.hero__media,
.hero__overlay {
    position: absolute;
    inset: 0;
}
.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.hero__overlay {
    background:
        linear-gradient(
            90deg,
            rgba(48, 97, 140, 0.86) 0%,
            rgba(48, 97, 140, 0.55) 44%,
            rgba(48, 97, 140, 0.15) 72%,
            rgba(48, 97, 140, 0.08) 100%
        ),
        linear-gradient(0deg, rgba(48, 97, 140, 0.64) 0%, transparent 48%);
}
.hero__content {
    position: relative;
    z-index: 2;
    padding-block: clamp(120px, 16vh, 210px) 90px;
}
.hero__eyebrow {
    margin-bottom: 20px;
    color: var(--cyan-200);
    font-family: var(--font-heading);
    font-size: 15.4px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.hero h1 {
    max-width: 1000px;
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(63.8px, 8.03vw, 129.8px);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.055em;
}
.hero__tagline {
    max-width: 850px;
    margin: 30px 0 18px;
    font-family: var(--font-heading);
    font-size: clamp(22px, 2.2vw, 33px);
    line-height: 1.35;
    font-weight: 400;
}
.hero__regions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    color: rgba(255, 255, 255, 0.78);
    font-family: var(--font-heading);
    font-size: 13.2px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.hero__regions span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--cyan-400);
}
.hero__actions {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 34px;
}
.text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-size: 14.3px;
    font-weight: 600;
}
.text-link--light {
    color: #fff;
}
.hero__caption {
    position: absolute;
    z-index: 2;
    right: 28px;
    bottom: 28px;
    writing-mode: vertical-rl;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--font-heading);
    font-size: 12.1px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.section-pad {
    padding-block: clamp(90px, 9vw, 150px);
}
.section-kicker {
    margin-bottom: 24px;
    color: var(--blue-700);
    font-family: var(--font-heading);
    font-size: 13.2px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.section-kicker--light {
    color: var(--cyan-200);
}
.section-heading h2,
.intro__headline h2,
.approach h2,
.careers h2,
.final-cta h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(46.2px, 5.94vw, 90.2px);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.intro {
    background: #fff;
}
.intro__grid {
    display: grid;
    grid-template-columns: 0.42fr 1.05fr 1fr;
    gap: clamp(30px, 5vw, 90px);
    align-items: start;
}
.intro__copy {
    color: var(--muted);
}
.intro__copy p:first-child {
    color: var(--ink);
    font-size: 22px;
}
.intro__copy p {
    margin-top: 0;
    margin-bottom: 22px;
}
.statement-panel {
    margin-top: 90px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 30px;
    padding: 46px 52px;
    background: var(--navy-950);
    color: #fff;
}
.statement-panel p {
    max-width: 1050px;
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(26.4px, 2.86vw, 44px);
    line-height: 1.3;
}
.round-link {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--cyan-500);
    color: var(--navy-950);
}

.services {
    background: var(--surface);
}
.section-heading--split {
    display: grid;
    grid-template-columns: 1.05fr 0.75fr;
    gap: clamp(50px, 8vw, 140px);
    align-items: end;
}
.section-heading__copy {
    color: var(--muted);
}
.section-lead {
    margin-top: 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 24.2px;
    line-height: 1.45;
}
.services-grid {
    margin-top: 70px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}
.service-card {
    position: relative;
    min-height: 350px;
    display: flex;
    flex-direction: column;
    padding: 28px;
    background: #fff;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    transition:
        background 0.25s var(--ease),
        color 0.25s var(--ease),
        transform 0.25s var(--ease);
}
.service-card--feature {
    background: var(--navy-950);
    color: #fff;
}
.service-card__number {
    color: var(--blue-600);
    font-family: var(--font-heading);
    font-size: 13.2px;
    font-weight: 700;
}
.service-card__icon {
    margin-top: 28px;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    background: var(--cyan-100);
    color: var(--navy-800);
    font-size: 23.1px;
}
.service-card--feature .service-card__icon {
    background: var(--cyan-500);
    color: var(--navy-950);
}
.service-card h3 {
    margin: auto 0 16px;
    font-family: var(--font-heading);
    font-size: 25.3px;
    line-height: 1.18;
    font-weight: 500;
}
.service-card p {
    margin: 0;
    color: var(--muted);
    font-size: 16.5px;
    line-height: 1.6;
}
.service-card--feature p {
    color: rgba(255, 255, 255, 0.72);
}
@media (hover: hover) and (pointer: fine) {
    .service-card:not(.service-card--feature):hover {
        background: var(--cyan-100);
        transform: translateY(-3px);
    }
}

.approach {
    background: var(--navy-950);
    color: #fff;
}
.approach__grid {
    display: grid;
    grid-template-columns: 0.8fr 1.25fr;
    gap: clamp(60px, 9vw, 150px);
    align-items: center;
}
.approach__copy p {
    color: rgba(255, 255, 255, 0.72);
    max-width: 650px;
}
.approach__copy h2 {
    margin-bottom: 32px;
}
.approach__media-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    grid-template-rows: repeat(2, minmax(210px, 1fr));
    gap: 14px;
}
.approach__media {
    overflow: hidden;
    min-height: 250px;
}
.approach__media img {
    height: 100%;
    object-fit: cover;
}
.approach__media--wide {
    grid-row: span 2;
}
.approach__media--meeting {
    display: none;
}

.markets {
    background: #fff;
}
.market-grid {
    margin-top: 70px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.market-card {
    position: relative;
    min-height: 390px;
    overflow: hidden;
    color: #fff;
}
.market-card--wide {
    grid-column: span 2;
}
.market-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}
.market-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        0deg,
        rgba(48, 97, 140, 0.86),
        rgba(48, 97, 140, 0.05) 68%
    );
}
.market-card h3 {
    position: absolute;
    left: 28px;
    right: 70px;
    bottom: 28px;
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(24.2px, 2.2vw, 35.2px);
    line-height: 1.15;
    font-weight: 500;
}
@media (hover: hover) and (pointer: fine) {
    .market-card:hover img {
        transform: scale(1.035);
    }
}

.commitment {
    position: relative;
    min-height: 820px;
    display: flex;
    align-items: center;
    color: #fff;
    overflow: hidden;
}
.commitment__media,
.commitment__overlay {
    position: absolute;
    inset: 0;
}
.commitment__media img {
    height: 100%;
    object-fit: cover;
}
.commitment__overlay {
    background: linear-gradient(
        90deg,
        rgba(48, 97, 140, 0.95) 0%,
        rgba(48, 97, 140, 0.75) 55%,
        rgba(48, 97, 140, 0.28) 100%
    );
}
.commitment__content {
    position: relative;
    z-index: 2;
    padding-block: 120px;
}
.commitment blockquote {
    max-width: 1120px;
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(48.4px, 6.6vw, 101.2px);
    line-height: 1.02;
    letter-spacing: -0.045em;
}
.commitment__copy {
    max-width: 760px;
    margin-top: 50px;
    color: rgba(255, 255, 255, 0.78);
}

.careers {
    background: var(--surface);
}
.careers__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(50px, 8vw, 120px);
    align-items: center;
}
.careers__media {
    min-height: 600px;
    overflow: hidden;
}
.careers__media img {
    height: 100%;
    object-fit: cover;
}
.careers__content h2 {
    margin-bottom: 30px;
}
.careers__content h3 {
    margin: 34px 0 12px;
    font-family: var(--font-heading);
    font-size: 26.4px;
    font-weight: 500;
}
.careers__content p {
    color: var(--muted);
}
.careers__content .button {
    margin-top: 20px;
}

.final-cta {
    background: var(--navy-800);
    color: #fff;
}
.final-cta__inner {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    align-items: end;
}
.final-cta h2 {
    max-width: 900px;
}

.site-footer {
    padding-top: 70px;
    background: var(--khlg-navy);
    color: #fff;
}
.site-footer__grid {
    display: grid;
    grid-template-columns: 1.2fr repeat(3, 0.7fr);
    gap: 50px;
    padding-bottom: 60px;
}
.site-footer__brand img {
    width: 180px;
    margin-bottom: 20px;
}
.site-footer p,
.site-footer a {
    color: rgba(255, 255, 255, 0.68);
    font-size: 15.4px;
}
.site-footer__label {
    display: block;
    margin-bottom: 14px;
    color: var(--cyan-200);
    font-family: var(--font-heading);
    font-size: 13.2px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.site-footer__bottom {
    padding-block: 20px 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    font-size: 13.2px;
}

[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.6s var(--ease),
        transform 0.6s var(--ease);
}
[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

@media (max-width: 1180px) {
    .desktop-nav {
        display: none;
    }
    .site-header__inner {
        grid-template-columns: auto 1fr auto;
    }
    .site-header__inner > .button--nav {
        display: none;
    }
    .menu-toggle {
        display: block;
        justify-self: end;
    }
    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .intro__grid {
        grid-template-columns: 0.32fr 1fr;
    }
    .intro__copy {
        grid-column: 2;
    }
    .market-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .market-card--wide {
        grid-column: span 2;
    }
    .approach__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .site-shell {
        width: min(100% - 36px, var(--shell));
    }
    .site-header__inner {
        min-height: 72px;
    }
    .brand img {
        width: 150px;
    }
    .hero {
        min-height: 780px;
    }
    .hero__content {
        padding-bottom: 70px;
    }
    .hero__caption {
        display: none;
    }
    .hero__actions {
        flex-direction: column;
        align-items: flex-start;
    }
    .intro__grid,
    .section-heading--split,
    .careers__grid {
        grid-template-columns: 1fr;
    }
    .intro__copy {
        grid-column: auto;
    }
    .statement-panel {
        margin-top: 50px;
        padding: 30px;
    }
    .services-grid {
        grid-template-columns: 1fr;
    }
    .service-card {
        min-height: 300px;
    }
    .market-grid {
        grid-template-columns: 1fr;
    }
    .market-card--wide {
        grid-column: auto;
    }
    .market-card {
        min-height: 330px;
    }
    .commitment {
        min-height: 700px;
    }
    .final-cta__inner {
        align-items: flex-start;
        flex-direction: column;
    }
    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    body {
        font-size: 17.6px;
    }
    .coming-soon {
        font-size: 11px;
    }
    .site-shell {
        width: min(100% - 28px, var(--shell));
    }
    .hero {
        min-height: 700px;
    }
    .hero__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(48, 97, 140, 0.86),
                rgba(48, 97, 140, 0.42)
            ),
            linear-gradient(0deg, rgba(48, 97, 140, 0.65), transparent 56%);
    }
    .hero__regions {
        gap: 8px;
    }
    .statement-panel {
        grid-template-columns: 1fr;
    }
    .round-link {
        width: 54px;
        height: 54px;
    }
    .approach__media-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }
    .approach__media--wide {
        grid-row: auto;
    }
    .commitment blockquote {
        font-size: 41.8px;
    }
    .careers__media {
        min-height: 380px;
    }
    .site-footer__grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
    [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   KHLG ONE-PAGE — GLOBAL CONSISTENCY PASS
   Palette, typography, and spacing are controlled from :root above.
   ========================================================================== */

body {
    font-family: var(--font-body);
    font-size: var(--type-body);
    line-height: 1.65;
    color: var(--khlg-charcoal);
    background: var(--khlg-white);
}

.site-shell {
    width: min(var(--shell), calc(100% - (var(--page-gutter) * 2)));
}

.coming-soon {
    padding: var(--space-1) var(--space-4);
    background: var(--khlg-light-blue);
    color: var(--khlg-charcoal);
    font-family: var(--font-heading);
    font-size: var(--type-label);
}

.site-header {
    background: rgba(48, 97, 140, 0.96);
    border-bottom-color: rgba(255, 255, 255, 0.14);
}

.site-header__inner {
    min-height: 82px;
    gap: var(--space-5);
}

.desktop-nav {
    gap: var(--space-5);
}

.desktop-nav a,
.mobile-nav a,
.button,
.text-link,
.hero__eyebrow,
.hero__regions,
.hero__caption,
.section-kicker,
.service-card__number,
.site-footer__label {
    font-family: var(--font-heading);
}

.desktop-nav a {
    font-size: var(--type-small);
}

.button {
    min-height: 50px;
    padding-inline: var(--space-4);
    font-size: var(--type-small);
    border-radius: 0;
}

.button--nav,
.button--light {
    background: var(--khlg-white);
    color: var(--khlg-navy);
}

.button--primary {
    background: var(--khlg-navy);
    color: var(--khlg-white);
}

.button--primary:hover,
.button--nav:hover,
.button--light:hover {
    background: var(--khlg-blue);
    color: var(--khlg-white);
}

.hero {
    color: var(--khlg-white);
}

.hero__overlay {
    background:
        linear-gradient(
            90deg,
            rgba(48, 97, 140, 0.92) 0%,
            rgba(48, 97, 140, 0.62) 44%,
            rgba(48, 97, 140, 0.2) 72%,
            rgba(48, 97, 140, 0.08) 100%
        ),
        linear-gradient(0deg, rgba(48, 97, 140, 0.62) 0%, transparent 48%);
}

.hero__content {
    padding-block: clamp(112px, 15vh, 190px) var(--space-8);
}

.hero__eyebrow {
    margin-bottom: var(--space-4);
    color: var(--khlg-light-blue);
    font-size: var(--type-small);
}

.hero h1 {
    max-width: 1000px;
    font-family: var(--font-heading);
    font-size: var(--type-display);
    line-height: 0.98;
    letter-spacing: -0.05em;
}

.hero__tagline {
    max-width: 860px;
    margin: var(--space-5) 0 var(--space-3);
    font-family: var(--font-heading);
    font-size: var(--type-lead);
    line-height: 1.45;
}

.hero__regions {
    font-size: var(--type-label);
}

.hero__regions span {
    background: var(--khlg-blue);
}

.hero__actions {
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.section-pad {
    padding-block: var(--section-y);
}

.section-kicker {
    margin-bottom: var(--space-4);
    color: var(--khlg-blue);
    font-size: var(--type-label);
}

.section-kicker--light {
    color: var(--khlg-light-blue);
}

.section-heading h2,
.intro__headline h2,
.approach h2,
.careers h2,
.final-cta h2 {
    font-family: var(--font-heading);
    font-size: var(--type-h2);
    line-height: 1.04;
    letter-spacing: -0.04em;
}

.intro {
    background: var(--khlg-white);
}

.intro__grid,
.section-heading--split,
.approach__grid,
.careers__grid {
    gap: clamp(var(--space-6), 6vw, var(--space-9));
}

.intro__copy {
    color: var(--muted);
}

.intro__copy p:first-child {
    color: var(--khlg-charcoal);
    font-size: var(--type-lead);
}

.intro__copy p {
    margin-bottom: var(--space-4);
}

.statement-panel {
    margin-top: var(--space-8);
    gap: var(--space-5);
    padding: var(--space-6);
    background: var(--khlg-navy);
}

.statement-panel p {
    font-family: var(--font-heading);
    font-size: clamp(26.4px, 2.75vw, 41.8px);
}

.round-link {
    background: var(--khlg-blue);
    color: var(--khlg-white);
}

.services,
.careers {
    background: var(--khlg-neutral);
}

.section-heading__copy,
.careers__content p {
    color: var(--muted);
}

.section-lead {
    font-family: var(--font-heading);
    font-size: var(--type-lead);
    color: var(--khlg-charcoal);
}

.services-grid,
.market-grid {
    margin-top: var(--space-8);
}

.service-card {
    min-height: 330px;
    padding: var(--space-5);
    background: var(--khlg-white);
}

.service-card--feature {
    background: var(--khlg-navy);
    color: var(--khlg-white);
}

.service-card__number {
    color: var(--khlg-blue);
    font-size: var(--type-label);
}

.service-card__icon {
    margin-top: var(--space-4);
    width: 52px;
    height: 52px;
    background: var(--khlg-light-blue);
    color: var(--khlg-navy);
}

.service-card--feature .service-card__icon {
    background: var(--khlg-blue);
    color: var(--khlg-white);
}

.service-card h3,
.market-card h3,
.careers__content h3 {
    font-family: var(--font-heading);
    font-size: var(--type-h3);
    line-height: 1.2;
}

.service-card h3 {
    margin-bottom: var(--space-3);
}

.service-card p {
    font-size: var(--type-small);
    line-height: 1.65;
}

@media (hover: hover) and (pointer: fine) {
    .service-card:not(.service-card--feature):hover {
        background: var(--khlg-light-blue);
    }
}

.approach {
    background: var(--khlg-navy);
}

.approach__copy h2 {
    margin-bottom: var(--space-5);
}

.approach__copy p,
.commitment__copy {
    color: rgba(255, 255, 255, 0.82);
}

.approach__media-grid,
.market-grid {
    gap: var(--space-3);
}

.markets {
    background: var(--khlg-white);
}

.market-card {
    min-height: 380px;
}

.market-card__overlay {
    background: linear-gradient(
        0deg,
        rgba(48, 97, 140, 0.92),
        rgba(48, 97, 140, 0.08) 68%
    );
}

.market-card h3 {
    left: var(--space-5);
    right: var(--space-8);
    bottom: var(--space-5);
}

.commitment {
    min-height: 760px;
}

.commitment__overlay {
    background: linear-gradient(
        90deg,
        rgba(48, 97, 140, 0.96) 0%,
        rgba(48, 97, 140, 0.78) 55%,
        rgba(48, 97, 140, 0.3) 100%
    );
}

.commitment__content {
    padding-block: var(--section-y);
}

.commitment blockquote {
    font-family: var(--font-heading);
    font-size: clamp(44px, 5.72vw, 85.8px);
    line-height: 1.05;
}

.commitment__copy {
    margin-top: var(--space-6);
    font-size: var(--type-lead);
}

.careers__content h2 {
    margin-bottom: var(--space-5);
}

.careers__content h3 {
    margin: var(--space-5) 0 var(--space-2);
}

.careers__content .button {
    margin-top: var(--space-4);
}

.final-cta {
    background: var(--khlg-navy);
}

.final-cta__inner {
    gap: var(--space-6);
}

.site-footer {
    padding-top: var(--space-8);
    background: var(--khlg-navy);
}

.site-footer__grid {
    gap: var(--space-6);
    padding-bottom: var(--space-7);
}

.site-footer p,
.site-footer a {
    font-size: var(--type-small);
}

.site-footer__label {
    color: var(--khlg-light-blue);
    font-size: var(--type-label);
}

.site-footer__bottom {
    padding-block: var(--space-4);
}

@media (max-width: 820px) {
    .site-shell {
        width: min(100% - (var(--page-gutter) * 2), var(--shell));
    }

    .hero__content {
        padding-bottom: var(--space-7);
    }

    .statement-panel {
        margin-top: var(--space-6);
        padding: var(--space-5);
    }

    .services-grid,
    .market-grid {
        margin-top: var(--space-6);
    }
}

@media (max-width: 560px) {
    :root {
        --type-body: 17.6px;
        --type-small: 15.4px;
        --section-y: 72px;
        --page-gutter: 18px;
    }

    .hero__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(48, 97, 140, 0.92),
                rgba(48, 97, 140, 0.48)
            ),
            linear-gradient(0deg, rgba(48, 97, 140, 0.68), transparent 56%);
    }
}

/* ==========================================================================
   KHLG APPROVED COLOR PALETTE — STRICT GLOBAL GUARD
   Exact approved hex values from the finalized KHLG palette.
   ========================================================================== */

:root {
    --khlg-charcoal: #4a5159;
    --khlg-navy: #30618c;
    --khlg-blue: #4ea4d9;
    --khlg-light-blue: #acd7f2;
    --khlg-neutral: #f2f2f2;
}

/* 60% — dominant light surfaces */
body,
.intro,
.markets {
    background: #ffffff;
}

.services,
.careers,
.coming-soon {
    background: var(--khlg-neutral);
}

/* 30% — structural colors */
.site-header,
.statement-panel,
.service-card--feature,
.approach,
.final-cta,
.site-footer {
    background: var(--khlg-navy);
}

body,
.intro__copy p:first-child,
.section-heading h2,
.intro__headline h2,
.market-card h3,
.service-card h3,
.careers__content h2,
.careers__content h3 {
    color: var(--khlg-charcoal);
}

/* 10% — interactive / accent colors */
.section-kicker,
.service-card__number,
.text-link,
.site-footer__label {
    color: var(--khlg-blue);
}

.service-card__icon,
.coming-soon {
    background: var(--khlg-light-blue);
}

.button--primary,
.round-link {
    background: var(--khlg-blue);
    color: #ffffff;
}

.button--primary:hover,
.button--nav:hover,
.button--light:hover {
    background: var(--khlg-blue);
    color: #ffffff;
}

.button--nav,
.button--light {
    background: #ffffff;
    color: var(--khlg-navy);
}

/* Palette-derived overlays only */
.hero__overlay {
    background:
        linear-gradient(
            90deg,
            rgba(48, 97, 140, 0.92) 0%,
            rgba(48, 97, 140, 0.62) 44%,
            rgba(48, 97, 140, 0.2) 72%,
            rgba(48, 97, 140, 0.08) 100%
        ),
        linear-gradient(0deg, rgba(48, 97, 140, 0.62) 0%, transparent 48%);
}

.market-card__overlay {
    background: linear-gradient(
        0deg,
        rgba(48, 97, 140, 0.92),
        rgba(48, 97, 140, 0.08) 68%
    );
}

.commitment__overlay {
    background: linear-gradient(
        90deg,
        rgba(48, 97, 140, 0.96) 0%,
        rgba(48, 97, 140, 0.78) 55%,
        rgba(48, 97, 140, 0.3) 100%
    );
}

@media (max-width: 560px) {
    .hero__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(48, 97, 140, 0.92),
                rgba(48, 97, 140, 0.48)
            ),
            linear-gradient(0deg, rgba(48, 97, 140, 0.68), transparent 56%);
    }
}

/* ==========================================================================
   V2.4 — TETRA-TECH-INSPIRED, KHLG-SPECIFIC LAYOUT
   Modern editorial flow; exact KHLG approved palette retained.
   ========================================================================== */

.hero--editorial {
    min-height: calc(100svh - 34px);
}

.hero__content--editorial {
    min-height: calc(100svh - 116px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.hero__content--editorial h1 {
    max-width: 1020px;
}

.hero__bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(48, 97, 140, 0.22);
    backdrop-filter: blur(8px);
}

.hero__bottom-inner {
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: clamp(20px, 5vw, 70px);
    font-family: var(--font-heading);
    font-size: var(--type-small);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.intro--editorial {
    background: var(--khlg-white);
}

.intro-editorial {
    display: grid;
    grid-template-columns: 0.55fr 1.35fr 1fr;
    grid-template-areas:
        "label headline copy"
        ". facts facts";
    gap: var(--content-gap) clamp(32px, 5vw, 88px);
    align-items: start;
}

.intro-editorial__label {
    grid-area: label;
}

.intro-editorial__headline {
    grid-area: headline;
}

.intro-editorial__headline h2 {
    margin: 0;
    max-width: 760px;
}

.intro-editorial__copy {
    grid-area: copy;
}

.intro-editorial__copy p {
    margin: 0 0 var(--space-4);
    color: var(--muted);
}

.intro-editorial__facts {
    grid-area: facts;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: var(--space-6);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.fact {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-5);
}

.fact + .fact {
    border-left: 1px solid var(--line);
}

.fact strong {
    font-family: var(--font-heading);
    font-size: clamp(33px, 3.3vw, 52.8px);
    font-weight: 500;
    letter-spacing: -0.04em;
    color: var(--khlg-navy);
}

.fact span {
    margin-top: 6px;
    color: var(--muted);
    font-size: var(--type-small);
}

.featured {
    background: var(--khlg-neutral);
}

.featured-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 0.8fr;
    gap: var(--space-3);
    margin-top: var(--space-8);
}

.featured-card {
    position: relative;
    overflow: hidden;
    min-height: 520px;
}

.featured-card--large {
    min-height: 640px;
}

.featured-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}

.featured-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        0deg,
        rgba(48, 97, 140, 0.95) 0%,
        rgba(48, 97, 140, 0.12) 72%
    );
}

.featured-card__content {
    position: absolute;
    inset: auto var(--space-5) var(--space-5);
    z-index: 2;
    color: #fff;
}

.featured-card__content h3 {
    max-width: 560px;
    margin: 0 0 var(--space-3);
    font-family: var(--font-heading);
    font-size: clamp(26.4px, 2.42vw, 37.4px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.featured-card__content p {
    max-width: 520px;
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
}

@media (hover: hover) and (pointer: fine) {
    .featured-card:hover img {
        transform: scale(1.035);
    }
}

.services--explore {
    background: #fff;
}

.explore-list {
    margin-top: var(--space-7);
    border-top: 1px solid var(--line);
}

.explore-item {
    display: grid;
    grid-template-columns: 70px minmax(280px, 0.9fr) minmax(280px, 1fr);
    gap: var(--space-4);
    align-items: center;
    min-height: 150px;
    border-bottom: 1px solid var(--line);
    transition: background-color 0.3s ease;
}

.explore-item__icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    background: var(--khlg-light-blue);
    color: var(--khlg-navy);
}

.explore-item h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(23.1px, 1.98vw, 30.8px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.explore-item p {
    margin: 0;
    color: var(--muted);
}

@media (hover: hover) and (pointer: fine) {
    .explore-item:hover {
        background: var(--khlg-neutral);
    }
}

.approach--feature {
    background: var(--khlg-navy);
}

.approach-feature {
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    gap: clamp(40px, 7vw, 110px);
    align-items: center;
}

.approach-feature__copy h2 {
    margin: 0 0 var(--space-5);
    color: #fff;
    font-family: var(--font-heading);
    font-size: var(--type-h2);
    line-height: 1.03;
    letter-spacing: -0.04em;
}

.approach-feature__copy p {
    max-width: 620px;
    color: rgba(255, 255, 255, 0.8);
}

.approach-feature__media {
    min-height: 650px;
    overflow: hidden;
}

.approach-feature__media img {
    width: 100%;
    height: 100%;
    min-height: 650px;
    object-fit: cover;
}

.site-header.is-scrolled {
    box-shadow: 0 12px 38px rgba(48, 97, 140, 0.14);
}

.careers--clean {
    background: var(--khlg-neutral);
}

@media (max-width: 1100px) {
    .intro-editorial {
        grid-template-columns: 1fr 1.5fr;
        grid-template-areas:
            "label label"
            "headline copy"
            "facts facts";
    }

    .featured-grid {
        grid-template-columns: 1fr 1fr;
    }

    .featured-card--large {
        grid-column: 1 / -1;
    }

    .explore-item {
        grid-template-columns: 58px 1fr;
    }

    .explore-item p {
        grid-column: 2;
    }
}

@media (max-width: 820px) {
    .hero__bottom-inner {
        gap: 18px;
        justify-content: space-between;
    }

    .intro-editorial {
        grid-template-columns: 1fr;
        grid-template-areas:
            "label"
            "headline"
            "copy"
            "facts";
    }

    .intro-editorial__facts {
        grid-template-columns: 1fr;
    }

    .fact + .fact {
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .featured-grid {
        grid-template-columns: 1fr;
    }

    .featured-card,
    .featured-card--large {
        min-height: 480px;
        grid-column: auto;
    }

    .approach-feature {
        grid-template-columns: 1fr;
    }

    .approach-feature__media,
    .approach-feature__media img {
        min-height: 480px;
    }
}

@media (max-width: 620px) {
    .hero__bottom {
        display: none;
    }

    .explore-item {
        grid-template-columns: 48px 1fr;
        padding-block: var(--space-4);
    }

    .explore-item p {
        grid-column: 1 / -1;
        padding-left: 92px;
    }

    .featured-card,
    .featured-card--large {
        min-height: 420px;
    }
}

/* ==========================================================================
   ABOUT KHLG — EDITORIAL STORY LAYOUT
   ========================================================================== */

.intro--story {
    position: relative;
    overflow: hidden;
    background: #ffffff;
}

.about-story {
    display: grid;
    gap: clamp(48px, 6vw, 88px);
}

.about-story__top {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    gap: clamp(48px, 8vw, 128px);
    align-items: end;
}

.about-story__heading h2 {
    max-width: 820px;
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(50.6px, 5.72vw, 85.8px);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.05em;
    color: var(--khlg-charcoal);
}

.about-story__intro {
    max-width: 590px;
    padding-bottom: 6px;
}

.about-story__intro p {
    margin: 0;
    color: var(--muted);
}

.about-story__intro .section-lead {
    margin-bottom: var(--space-4);
    color: var(--khlg-charcoal);
}

.about-story__intro .text-link {
    margin-top: var(--space-5);
}

.about-story__visual {
    position: relative;
    min-height: clamp(500px, 54vw, 720px);
}

.about-story__image {
    position: absolute;
    inset: 0 13% 0 0;
    overflow: hidden;
    margin: 0;
    background: var(--khlg-neutral);
}

.about-story__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 52%,
        rgba(48, 97, 140, 0.58) 100%
    );
    pointer-events: none;
}

.about-story__image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.7s var(--ease);
}

.about-story__image figcaption {
    position: absolute;
    z-index: 2;
    left: clamp(22px, 3vw, 44px);
    bottom: clamp(22px, 3vw, 38px);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;
    font-family: var(--font-heading);
    font-size: var(--type-small);
    font-weight: 600;
    color: #ffffff;
}

.about-story__image figcaption span {
    width: 18px;
    height: 1px;
    background: var(--khlg-light-blue);
}

.about-story__message {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: clamp(36px, 6vw, 88px);
    width: min(430px, 40%);
    padding: clamp(28px, 3.4vw, 50px);
    background: var(--khlg-navy);
    color: #ffffff;
    box-shadow: 0 24px 60px rgba(48, 97, 140, 0.16);
}

.about-story__message-mark {
    display: block;
    width: 42px;
    height: 3px;
    margin-bottom: var(--space-4);
    background: var(--khlg-blue);
}

.about-story__message p {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(22px, 1.815vw, 28.6px);
    font-weight: 400;
    line-height: 1.48;
    letter-spacing: -0.025em;
}

.about-story__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.about-fact {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(28px, 3vw, 44px);
}

.about-fact + .about-fact {
    border-left: 1px solid var(--line);
}

.about-fact__label {
    margin-bottom: var(--space-3);
    font-family: var(--font-heading);
    font-size: var(--type-label);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--khlg-blue);
}

.about-fact strong {
    font-family: var(--font-heading);
    font-size: clamp(37.4px, 4.07vw, 61.6px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.05em;
    color: var(--khlg-navy);
}

.about-fact p {
    max-width: 360px;
    margin: var(--space-3) 0 0;
    font-size: var(--type-small);
    color: var(--muted);
}

@media (hover: hover) and (pointer: fine) {
    .about-story__visual:hover .about-story__image img {
        transform: scale(1.025);
    }
}

@media (max-width: 1050px) {
    .about-story__top {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .about-story__intro {
        max-width: 760px;
    }

    .about-story__visual {
        min-height: 620px;
    }

    .about-story__image {
        inset: 0 8% 0 0;
    }

    .about-story__message {
        width: min(430px, 48%);
    }
}

@media (max-width: 760px) {
    .about-story {
        gap: var(--space-6);
    }

    .about-story__heading h2 {
        font-size: clamp(44px, 12.1vw, 63.8px);
    }

    .about-story__visual {
        display: grid;
        min-height: 0;
        gap: 0;
    }

    .about-story__image,
    .about-story__message {
        position: relative;
        inset: auto;
        width: 100%;
    }

    .about-story__image {
        min-height: 460px;
    }

    .about-story__message {
        bottom: auto;
        margin-top: 0;
        box-shadow: none;
    }

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

    .about-fact {
        min-height: 170px;
    }

    .about-fact + .about-fact {
        border-left: 0;
        border-top: 1px solid var(--line);
    }
}

@media (max-width: 480px) {
    .about-story__image {
        min-height: 380px;
    }

    .about-story__image figcaption {
        gap: 8px;
        font-size: 13.2px;
    }

    .about-story__message {
        padding: 26px 22px;
    }

    .about-fact {
        padding-inline: 0;
    }
}

/* ==========================================================================
   INFRASTRUCTURE MARKETS — TEXT CONTRAST FIX
   ========================================================================== */

.market-card__overlay {
    background: linear-gradient(
        0deg,
        rgba(48, 97, 140, 0.96) 0%,
        rgba(48, 97, 140, 0.72) 30%,
        rgba(48, 97, 140, 0.24) 68%,
        rgba(48, 97, 140, 0.08) 100%
    ) !important;
}

.market-card h3 {
    color: #ffffff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
}

.market-card > span {
    color: var(--khlg-light-blue, #acd7f2) !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.22);
}

@media (hover: hover) and (pointer: fine) {
    .market-card:hover .market-card__overlay {
        background: linear-gradient(
            0deg,
            rgba(48, 97, 140, 0.98) 0%,
            rgba(48, 97, 140, 0.74) 30%,
            rgba(48, 97, 140, 0.22) 70%,
            rgba(48, 97, 140, 0.06) 100%
        ) !important;
    }
}

/* ==========================================================================
   COMPACT TYPOGRAPHY & SPACING
   Compact section spacing, with visibility refinements below.
   ========================================================================== */

:root {
    --type-display: clamp(52.8px, 6.93vw, 105.6px);
    --type-h2: clamp(37.4px, 4.4vw, 66px);
    --type-h3: clamp(26.4px, 2.2vw, 33px);
    --type-lead: clamp(22px, 1.65vw, 25.3px);
    --type-body: 19.8px;
    --type-small: 16.5px;
    --section-y: clamp(48px, 5vw, 80px);
    --content-gap: clamp(24px, 3vw, 40px);
    --heading-gap: clamp(24px, 3vw, 40px);
}

body {
    line-height: 1.55;
    letter-spacing: normal;
}
main p {
    line-height: 1.6;
}
.section-pad {
    padding-block: var(--section-y);
}

.section-heading h2,
.about-story__heading h2,
.approach-feature__copy h2,
.careers__content h2,
.final-cta h2 {
    font-size: var(--type-h2);
    line-height: 1.14;
    letter-spacing: -0.025em;
    text-wrap: pretty;
}

.section-kicker {
    margin-bottom: 12px;
    letter-spacing: 0.08em;
    line-height: 1.4;
}
.hero__eyebrow,
.hero__regions,
.coming-soon,
.site-footer__label,
.about-fact__label {
    letter-spacing: 0.08em;
}
.section-lead {
    line-height: 1.5;
}

.section-heading--split,
.careers__grid,
.approach-feature {
    gap: clamp(24px, 3.5vw, 52px);
}
.section-heading--split {
    align-items: center;
}
.section-heading__copy p {
    margin: 0;
}
.section-heading__copy p + p {
    margin-top: 12px;
}
.section-heading--split > *,
.careers__grid > *,
.approach-feature > * {
    min-width: 0;
}

/* First-screen hero: reduce oversized text and internal padding. */
.hero--editorial {
    min-height: calc(100svh - 118px);
    align-items: center;
}
.hero__content--editorial {
    min-height: 0;
    padding-block: clamp(64px, 9vh, 112px);
}
.hero h1 {
    font-size: var(--type-display);
    line-height: 1.06;
    letter-spacing: -0.035em;
}
.hero__eyebrow {
    margin-bottom: 14px;
}
.hero__tagline {
    margin: 20px 0 12px;
    line-height: 1.45;
}
.hero__regions {
    gap: 10px;
    line-height: 1.5;
}
.hero__actions {
    margin-top: 24px;
    gap: 18px;
    flex-wrap: wrap;
}

/* About: bring text, image, and facts closer together. */
.about-story {
    gap: clamp(28px, 3.5vw, 48px);
}
.about-story__top {
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
}
.about-story__intro {
    padding-bottom: 0;
}
.about-story__intro .section-lead {
    margin-bottom: 14px;
}
.about-story__intro .text-link {
    margin-top: 18px;
}
.about-story__visual {
    min-height: clamp(400px, 38vw, 520px);
}
.about-story__message {
    bottom: 28px;
    padding: clamp(24px, 2.5vw, 34px);
}
.about-story__message-mark {
    margin-bottom: 14px;
}
.about-story__message p {
    font-size: clamp(19.8px, 1.54vw, 23.1px);
    line-height: 1.5;
    letter-spacing: -0.01em;
}
.about-fact {
    min-height: 0;
    padding: clamp(20px, 2vw, 28px);
}
.about-fact__label {
    margin-bottom: 10px;
}
.about-fact strong {
    font-size: clamp(33px, 3.3vw, 48.4px);
    line-height: 1.1;
    letter-spacing: -0.025em;
}
.about-fact p {
    margin-top: 10px;
    line-height: 1.5;
}

/* Shared heading-to-content spacing. */
.featured-grid,
.explore-list,
.market-grid {
    margin-top: var(--heading-gap);
}
.featured-card,
.featured-card--large {
    min-height: clamp(360px, 32vw, 460px);
    display: flex;
    align-items: flex-end;
}
.featured-card__content {
    position: relative;
    inset: auto;
    width: 100%;
    padding: clamp(20px, 2vw, 28px);
}
.featured-card__content h3 {
    font-size: var(--type-h3);
    line-height: 1.24;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
}
.featured-card__content p {
    font-size: 18.7px;
    line-height: 1.5;
}

/* Service rows grow with their copy instead of reserving 150px each. */
.explore-item {
    grid-template-columns: 52px minmax(0, 0.9fr) minmax(0, 1fr);
    gap: 18px;
    min-height: 0;
    padding-block: 22px;
}
.explore-item__icon {
    width: 46px;
    height: 46px;
}
.explore-item h3 {
    font-size: clamp(24.2px, 1.98vw, 28.6px);
    line-height: 1.28;
    letter-spacing: -0.015em;
}
.explore-item p {
    font-size: 18.7px;
    line-height: 1.55;
}

/* Images use a bounded height without stretching the adjacent text columns. */
.approach-feature__copy h2,
.careers__content h2 {
    margin-bottom: 20px;
}
.approach-feature__copy p,
.careers__content p {
    margin: 0 0 14px;
}
.approach-feature__copy p:last-child,
.careers__content p:last-child {
    margin-bottom: 0;
}
.approach-feature__media,
.careers__media {
    min-height: 0;
    height: clamp(340px, 32vw, 460px);
}
.approach-feature__media img,
.careers__media img {
    min-height: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.market-card {
    min-height: clamp(260px, 23vw, 340px);
}
.market-card h3 {
    left: 24px;
    right: 24px;
    bottom: 24px;
    line-height: 1.25;
    letter-spacing: -0.02em;
}
.market-card > span {
    top: 18px;
    right: 18px;
}

.commitment {
    min-height: 0;
}
.commitment__content {
    padding-block: var(--section-y);
}
.commitment blockquote {
    max-width: 1100px;
    font-size: clamp(37.4px, 4.84vw, 70.4px);
    line-height: 1.16;
    letter-spacing: -0.025em;
}
.commitment__copy {
    margin-top: 24px;
    max-width: 900px;
    font-size: var(--type-body);
}
.commitment__copy p {
    margin: 0 0 14px;
}
.commitment__copy p:last-child {
    margin-bottom: 0;
}
.careers__content h3 {
    margin: 22px 0 10px;
    font-size: clamp(24.2px, 2.2vw, 30.8px);
    line-height: 1.3;
    letter-spacing: -0.015em;
}
.careers__content .button {
    margin-top: 8px;
}

.final-cta {
    padding-block: clamp(40px, 4vw, 64px);
}
.final-cta__inner {
    gap: 24px;
    align-items: center;
}
.final-cta__inner > div {
    min-width: 0;
}
.final-cta__inner > .button {
    flex-shrink: 0;
}
.final-cta h2 {
    font-size: clamp(35.2px, 4.07vw, 59.4px);
}
.site-footer {
    padding-top: 40px;
}
.site-footer__grid {
    gap: 28px;
    padding-bottom: 32px;
}
.site-footer__brand img {
    margin-bottom: 14px;
}
.site-footer__label {
    margin-bottom: 10px;
}
.site-footer p {
    margin: 0 0 12px;
    line-height: 1.55;
}
.site-footer p:last-child {
    margin-bottom: 0;
}
.site-footer__bottom {
    padding-block: 18px;
}

@media (max-width: 1100px) {
    .explore-item {
        grid-template-columns: 46px minmax(0, 1fr);
        column-gap: 16px;
        row-gap: 8px;
    }
    .explore-item p {
        grid-column: 2;
    }
    .featured-card,
    .featured-card--large {
        min-height: 340px;
    }
}

@media (max-width: 820px) {
    :root {
        --section-y: 48px;
        --heading-gap: 28px;
    }
    .section-heading--split {
        gap: 20px;
    }
    .careers__grid,
    .approach-feature {
        gap: 28px;
    }
    .hero__content--editorial {
        padding-block: 56px;
    }
    .hero__actions {
        gap: 14px;
    }
    .featured-card,
    .featured-card--large {
        min-height: 320px;
    }
    .approach-feature__media,
    .careers__media {
        height: clamp(260px, 50vw, 380px);
    }
    .market-card {
        min-height: 280px;
    }
    .final-cta__inner {
        align-items: flex-start;
    }
}

@media (max-width: 760px) {
    .about-story {
        gap: 28px;
    }
    .about-story__top {
        gap: 20px;
    }
    .about-story__visual {
        min-height: 0;
    }
    .about-story__image {
        min-height: 0;
        height: clamp(240px, 52vw, 360px);
    }
    .about-story__message {
        bottom: auto;
        padding: 24px;
    }
    .about-fact {
        min-height: 0;
        padding: 20px 0;
    }
    .about-fact strong {
        font-size: 35.2px;
    }
}

@media (max-width: 620px) {
    .explore-item {
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 12px;
        row-gap: 12px;
        padding-block: 20px;
    }
    .explore-item__icon {
        width: 44px;
        height: 44px;
    }
    .explore-item p {
        grid-column: 1 / -1;
        padding-left: 0;
    }
    .explore-item h3 {
        font-size: 24.2px;
    }
}

@media (max-width: 560px) {
    :root {
        --type-h2: clamp(35.2px, 8.25vw, 44px);
        --type-h3: 26.4px;
        --type-body: 18.7px;
        --section-y: 40px;
        --heading-gap: 24px;
    }
    .hero__content--editorial {
        padding-block: 44px;
    }
    .hero h1 {
        font-size: clamp(41.8px, 11vw, 61.6px);
    }
    .hero__tagline {
        margin-top: 16px;
        font-size: 22px;
    }
    .hero__eyebrow {
        font-size: 13.2px;
        letter-spacing: 0.06em;
    }
    .hero__regions {
        font-size: 12.1px;
        letter-spacing: 0.06em;
    }
    .section-kicker {
        margin-bottom: 10px;
    }
    .about-story__heading h2 {
        font-size: var(--type-h2);
    }
    .about-story__image figcaption {
        left: 20px;
        bottom: 20px;
    }
    .about-story__message {
        padding: 22px;
    }
    .featured-card,
    .featured-card--large {
        min-height: 300px;
    }
    .market-card {
        min-height: 250px;
    }
    .market-card h3 {
        left: 20px;
        right: 20px;
        bottom: 20px;
    }
    .commitment blockquote {
        font-size: 37.4px;
    }
    .final-cta {
        padding-block: 36px;
    }
    .final-cta__inner {
        gap: 20px;
    }
    .final-cta__inner > .button {
        max-width: 100%;
        padding-inline: 18px;
    }
    .site-footer {
        padding-top: 32px;
    }
    .site-footer__grid {
        gap: 24px;
        padding-bottom: 28px;
    }
}

/* ==========================================================================
   WIDER PAGE, VISIBLE ANNOUNCEMENT & LARGER TYPE
   Final overrides for the shared header, page sections and footer.
   ========================================================================== */
:root {
    --page-gutter: clamp(64px, 7vw, 140px);
    --announcement-height: 64px;
    --header-height: 104px;
    --type-display: clamp(70.4px, 7.37vw, 140.8px);
    --type-h2: clamp(41.8px, 4.62vw, 79.2px);
    --type-h3: clamp(28.6px, 2.31vw, 37.4px);
    --type-lead: clamp(24.2px, 1.87vw, 29.7px);
    --type-body: 22px;
    --type-small: 18.7px;
    --type-label: 15.4px;
}

/* Use a wider, consistent horizontal inset while keeping the layout fluid. */
.site-shell {
    width: calc(100% - (var(--page-gutter) * 2));
    max-width: none;
    margin-inline: auto;
}

.coming-soon {
    position: sticky;
    top: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--announcement-height);
    padding: 10px var(--page-gutter);
    border-bottom: 3px solid var(--khlg-blue);
    background: var(--khlg-light-blue);
    color: #183e60;
    font-family: var(--font-heading);
    font-size: 24.2px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.035em;
    text-transform: none;
    text-align: center;
}
.site-header {
    top: var(--announcement-height);
}
.site-header__inner {
    min-height: var(--header-height);
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 24px;
    padding-block: 10px;
}
.brand {
    display: block;
    width: clamp(240px, 16vw, 300px);
    max-width: 100%;
}
.brand img {
    width: 100%;
    height: auto;
    max-height: 84px;
    object-fit: contain;
    object-position: left center;
}
.desktop-nav {
    gap: clamp(18px, 1.8vw, 36px);
}
.desktop-nav a {
    font-size: 18.7px;
    white-space: nowrap;
}
.mobile-nav a {
    font-size: 20.9px;
}
.button,
.text-link {
    font-size: 18.7px;
}
.button {
    min-height: 54px;
    line-height: 1.4;
    padding-block: 10px;
}
.menu-toggle {
    width: 52px;
    height: 52px;
}
main section[id] {
    scroll-margin-top: calc(
        var(--announcement-height) + var(--header-height) + 16px
    );
}

.hero--editorial {
    min-height: calc(
        100svh - var(--announcement-height) - var(--header-height)
    );
}
.hero h1 {
    font-size: var(--type-display);
}
.hero__content--editorial h1 {
    max-width: 1280px;
}
.hero__tagline {
    max-width: 1150px;
    font-size: var(--type-lead);
}
.hero__eyebrow {
    font-size: 19.8px;
}
.hero__regions {
    font-size: 16.5px;
}
.hero__actions .text-link--light {
    color: #fff;
}
.section-kicker {
    font-size: 16.5px;
}
.about-story__intro {
    max-width: 72ch;
}
.about-story__message p {
    font-size: clamp(23.1px, 1.65vw, 27.5px);
}
.about-fact strong {
    font-size: clamp(39.6px, 3.52vw, 57.2px);
}
.featured-card__content p,
.explore-item p {
    font-size: 20.9px;
}
.explore-item h3 {
    font-size: clamp(26.4px, 2.09vw, 33px);
}
.approach-feature__copy p {
    max-width: 70ch;
}
.commitment blockquote {
    max-width: 1400px;
    font-size: clamp(44px, 4.95vw, 83.6px);
}
.commitment__copy {
    max-width: 1000px;
}
.careers__content h3 {
    font-size: clamp(28.6px, 2.2vw, 35.2px);
}
.final-cta h2 {
    font-size: clamp(41.8px, 4.4vw, 70.4px);
}
.site-footer__brand img {
    width: 260px;
    max-width: 100%;
    height: auto;
}
.site-footer__label {
    font-size: 16.5px;
}
.site-footer__bottom {
    font-size: 16.5px;
}
.site-footer a {
    overflow-wrap: anywhere;
}

/* Keep the contact form readable without forcing its columns wider. */
.contact-modal__intro p {
    font-size: 17.6px;
}
.contact-modal__eyebrow {
    font-size: 14.3px;
}
.contact-modal__details span {
    font-size: 15.4px;
}
.contact-modal__details a {
    font-size: 18.7px;
}
.contact-modal__form-wrap h3 {
    font-size: 30.8px;
}
.contact-form label {
    font-size: 16.5px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
    font-size: 18.7px;
}
.contact-form__note,
.contact-form__status,
.contact-form__draft-link {
    font-size: 15.4px;
}

@media (max-width: 1280px) {
    .desktop-nav,
    .site-header__inner > .button--nav {
        display: none;
    }
    .site-header__inner {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .menu-toggle {
        display: block;
        justify-self: end;
    }
    .mobile-nav {
        max-height: calc(
            100dvh - var(--announcement-height) - var(--header-height)
        );
        overflow-y: auto;
    }
    .mobile-nav[hidden] {
        display: none;
    }
}

@media (max-width: 820px) {
    :root {
        --page-gutter: 44px;
        --announcement-height: 58px;
        --header-height: 94px;
        --type-display: clamp(63.8px, 8.8vw, 85.8px);
        --type-h2: clamp(41.8px, 6.38vw, 55px);
        --type-body: 20.9px;
    }
    .coming-soon {
        font-size: 22px;
    }
    .brand {
        width: 250px;
    }
    .brand img {
        max-height: 74px;
    }
    .hero__eyebrow {
        font-size: 17.6px;
    }
    .hero__regions {
        font-size: 15.4px;
    }
    .about-story__message p {
        font-size: 23.1px;
    }
    .site-footer__brand img {
        width: 240px;
    }
}

@media (max-width: 560px) {
    :root {
        --page-gutter: 30px;
        --announcement-height: 54px;
        --header-height: 86px;
        --type-display: clamp(41.8px, 11.44vw, 63.8px);
        --type-h2: clamp(37.4px, 8.8vw, 48.4px);
        --type-h3: 28.6px;
        --type-body: 19.8px;
        --type-lead: 24.2px;
        --type-small: 17.6px;
    }
    .coming-soon {
        font-size: 18.7px;
        letter-spacing: 0.015em;
    }
    .site-header__inner {
        gap: 14px;
        padding-block: 8px;
    }
    .brand {
        width: clamp(190px, 52vw, 230px);
    }
    .brand img {
        max-height: 70px;
    }
    .hero h1 {
        font-size: var(--type-display);
    }
    .hero__tagline {
        font-size: 24.2px;
    }
    .hero__eyebrow {
        font-size: 15.4px;
    }
    .hero__regions {
        font-size: 14.3px;
    }
    .section-kicker {
        font-size: 15.4px;
    }
    .button,
    .text-link {
        font-size: 17.6px;
    }
    .about-story__message p {
        font-size: 22px;
    }
    .featured-card__content p,
    .explore-item p {
        font-size: 19.8px;
    }
    .explore-item h3 {
        font-size: 25.3px;
    }
    .commitment blockquote {
        font-size: 41.8px;
    }
    .careers__content h3 {
        font-size: 28.6px;
    }
    .final-cta h2 {
        font-size: 39.6px;
    }
    .site-footer__brand img {
        width: 220px;
    }
}

/* Hero scale: balanced headline size and equal, comfortable side insets. */
.hero > .site-shell.hero__content {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-inline: 0;
    padding-inline: var(--page-gutter);
    padding-block: clamp(48px, 7vh, 88px);
}
.hero .hero__content h1 {
    width: 100%;
    max-width: none;
    margin: 0;
    font-size: clamp(79.2px, 8.25vw, 176px);
    line-height: 1.06;
    letter-spacing: -0.035em;
    font-weight: 500;
    overflow-wrap: normal;
}
.hero .hero__eyebrow {
    margin-bottom: 20px;
    font-size: clamp(19.8px, 1.21vw, 23.1px);
    letter-spacing: 0.08em;
}
.hero .hero__tagline {
    width: 100%;
    max-width: 62ch;
    margin: 24px 0 16px;
    font-size: clamp(26.4px, 1.98vw, 37.4px);
    line-height: 1.4;
}
.hero .hero__regions {
    font-size: clamp(16.5px, 0.99vw, 19.8px);
    gap: 14px;
}
.hero .hero__actions {
    margin-top: 28px;
    gap: 26px;
}
.hero .hero__actions .button,
.hero .hero__actions .text-link {
    font-size: 19.8px;
}
.hero .hero__actions .button {
    min-height: 58px;
    padding: 12px 24px;
}

@media (max-width: 820px) {
    .hero > .site-shell.hero__content {
        padding-block: 48px;
    }
    .hero .hero__content h1 {
        font-size: clamp(55px, 9.35vw, 77px);
    }
    .hero .hero__tagline {
        font-size: clamp(26.4px, 3.63vw, 30.8px);
        margin-top: 22px;
    }
    .hero .hero__eyebrow {
        font-size: 18.7px;
        margin-bottom: 16px;
    }
    .hero .hero__regions {
        font-size: 16.5px;
    }
    .hero .hero__actions {
        gap: 18px;
    }
}
@media (max-width: 560px) {
    .hero > .site-shell.hero__content {
        padding-block: 40px;
    }
    .hero .hero__content h1 {
        font-size: clamp(37.4px, 10.78vw, 59.4px);
        line-height: 1.08;
        letter-spacing: -0.035em;
    }
    .hero .hero__eyebrow {
        font-size: 15.4px;
    }
    .hero .hero__tagline {
        font-size: 24.2px;
        margin: 20px 0 16px;
    }
    .hero .hero__regions {
        font-size: 14.3px;
        gap: 10px;
    }
    .hero .hero__actions {
        margin-top: 24px;
        gap: 16px;
    }
    .hero .hero__actions .button,
    .hero .hero__actions .text-link {
        font-size: 18.7px;
    }
    .hero .hero__actions .button {
        max-width: 100%;
        min-height: 56px;
        padding: 12px 20px;
    }
}

/* ==========================================================================
   NUMBERING REMOVED — layout cleanup
   ========================================================================== */
.featured-card__content > span,
.explore-item__index,
.market-card > span {
    display: none !important;
}

.explore-item {
    grid-template-columns: 52px minmax(0, 0.9fr) minmax(0, 1fr);
}

@media (max-width: 1100px) {
    .explore-item {
        grid-template-columns: 46px minmax(0, 1fr);
    }

    .explore-item p {
        grid-column: 2;
    }
}

@media (max-width: 620px) {
    .explore-item {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .explore-item p {
        grid-column: 1 / -1;
        padding-left: 0;
    }
}

/* ==========================================================================\n   FINAL RESPONSIVE BALANCE PASS\n   Keeps the wide KHLG layout while normalizing type, spacing and breakpoints.\n   ========================================================================== */
:root {
    --page-gutter: clamp(40px, 5vw, 88px);
    --announcement-height: 52px;
    --header-height: 92px;
    --type-display: clamp(59.4px, 6.6vw, 118.8px);
    --type-h2: clamp(39.6px, 4.4vw, 66px);
    --type-h3: clamp(25.3px, 1.98vw, 33px);
    --type-lead: clamp(20.9px, 1.485vw, 25.3px);
    --type-body: 19.8px;
    --type-small: 16.5px;
    --type-label: 14.3px;
    --section-y: clamp(64px, 6vw, 96px);
    --heading-gap: clamp(28px, 3vw, 44px);
    --content-gap: clamp(24px, 3vw, 44px);
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-size: var(--type-body);
    line-height: 1.6;
}

.site-shell {
    width: calc(100% - (var(--page-gutter) * 2));
    max-width: 1520px;
    margin-inline: auto;
}

.coming-soon {
    min-height: var(--announcement-height);
    height: auto;
    padding: 10px var(--page-gutter);
    font-size: clamp(15.4px, 1.1vw, 18.7px);
    line-height: 1.35;
}

.site-header__inner {
    min-height: var(--header-height);
    gap: clamp(18px, 2vw, 28px);
    padding-block: 8px;
}

.brand {
    width: clamp(205px, 15vw, 260px);
}

.brand img {
    max-height: 72px;
}

.desktop-nav {
    gap: clamp(16px, 1.5vw, 28px);
}

.desktop-nav a,
.button,
.text-link {
    font-size: 16.5px;
}

.button {
    min-height: 50px;
    padding: 10px 20px;
}

.hero--editorial {
    min-height: max(
        640px,
        calc(100svh - var(--announcement-height) - var(--header-height))
    );
}

.hero > .site-shell.hero__content {
    width: calc(100% - (var(--page-gutter) * 2));
    max-width: 1520px;
    margin-inline: auto;
    padding-inline: 0;
    padding-block: clamp(64px, 9vh, 112px);
}

.hero .hero__content h1,
.hero h1 {
    max-width: 1180px;
    font-size: var(--type-display);
    line-height: 1.02;
    letter-spacing: -0.045em;
    overflow-wrap: normal;
    text-wrap: balance;
}

.hero .hero__eyebrow {
    margin-bottom: 16px;
    font-size: clamp(15.4px, 1.1vw, 18.7px);
    line-height: 1.4;
}

.hero .hero__tagline {
    max-width: 780px;
    margin: 22px 0 14px;
    font-size: var(--type-lead);
    line-height: 1.45;
}

.hero .hero__regions {
    font-size: clamp(13.2px, 0.935vw, 15.4px);
    gap: 10px;
}

.hero .hero__actions {
    margin-top: 26px;
    gap: 20px;
    flex-wrap: wrap;
}

.hero .hero__actions .button,
.hero .hero__actions .text-link {
    font-size: 16.5px;
}

.hero .hero__actions .button {
    min-height: 52px;
    padding: 10px 22px;
}

.section-pad {
    padding-block: var(--section-y);
}

.section-heading h2,
.about-story__heading h2,
.approach-feature__copy h2,
.careers__content h2,
.final-cta h2 {
    font-size: var(--type-h2);
    line-height: 1.1;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.section-heading--split,
.about-story__top,
.approach-feature,
.careers__grid {
    gap: clamp(32px, 5vw, 72px);
}

.section-lead {
    font-size: var(--type-lead);
    line-height: 1.5;
}

.about-story {
    gap: clamp(36px, 5vw, 64px);
}

.about-story__visual {
    min-height: clamp(380px, 42vw, 560px);
}

.about-story__message {
    padding: clamp(22px, 2.2vw, 30px);
}

.about-story__message p {
    font-size: clamp(19.8px, 1.375vw, 23.1px);
}

.featured-card,
.featured-card--large {
    min-height: clamp(320px, 30vw, 430px);
}

.featured-card__content p,
.explore-item p {
    font-size: 17.6px;
    line-height: 1.55;
}

.explore-item {
    padding-block: 20px;
    gap: 16px;
}

.explore-item h3 {
    font-size: clamp(24.2px, 1.76vw, 29.7px);
}

.approach-feature__media,
.careers__media {
    height: clamp(320px, 30vw, 440px);
}

.market-card {
    min-height: clamp(260px, 23vw, 330px);
}

.commitment blockquote {
    max-width: 1080px;
    font-size: clamp(37.4px, 4.4vw, 66px);
    line-height: 1.12;
}

.commitment__copy {
    margin-top: 22px;
    font-size: var(--type-body);
}

.careers__content h3 {
    font-size: clamp(24.2px, 1.98vw, 30.8px);
}

.final-cta {
    padding-block: clamp(42px, 4.5vw, 68px);
}

.final-cta h2 {
    font-size: clamp(37.4px, 3.96vw, 59.4px);
}

.site-footer {
    padding-top: clamp(38px, 4vw, 56px);
}

.site-footer__grid {
    gap: clamp(24px, 3vw, 42px);
    padding-bottom: clamp(30px, 3vw, 46px);
}

.site-footer__brand img {
    width: clamp(190px, 15vw, 240px);
}

.site-footer p,
.site-footer a {
    font-size: 15.4px;
    line-height: 1.55;
}

.site-footer__label,
.site-footer__bottom {
    font-size: 14.3px;
}

.contact-modal {
    width: min(960px, calc(100% - 32px));
}

.contact-modal__intro,
.contact-modal__form-wrap {
    padding: clamp(28px, 3vw, 40px);
}

@media (max-width: 1280px) {
    :root {
        --page-gutter: clamp(32px, 4vw, 52px);
        --type-display: clamp(55px, 7.04vw, 90.2px);
        --type-h2: clamp(37.4px, 4.84vw, 59.4px);
        --section-y: clamp(58px, 6vw, 82px);
    }

    .site-shell,
    .hero > .site-shell.hero__content {
        max-width: none;
    }

    .brand {
        width: clamp(200px, 22vw, 245px);
    }
}

@media (max-width: 960px) {
    :root {
        --page-gutter: 32px;
        --announcement-height: 50px;
        --header-height: 82px;
        --type-display: clamp(50.6px, 8.58vw, 74.8px);
        --type-h2: clamp(35.2px, 6.05vw, 50.6px);
        --type-body: 18.7px;
        --section-y: 60px;
    }

    .coming-soon {
        font-size: 16.5px;
    }

    .site-header__inner {
        min-height: var(--header-height);
    }

    .brand {
        width: clamp(190px, 28vw, 230px);
    }

    .brand img {
        max-height: 64px;
    }

    .hero--editorial {
        min-height: 680px;
    }

    .hero > .site-shell.hero__content {
        padding-block: 64px;
    }

    .hero .hero__tagline {
        max-width: 680px;
    }

    .section-heading--split,
    .about-story__top,
    .approach-feature,
    .careers__grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }

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

    .about-story__visual {
        min-height: 440px;
    }

    .final-cta__inner {
        align-items: flex-start;
        flex-direction: column;
    }

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

@media (max-width: 700px) {
    :root {
        --page-gutter: 22px;
        --announcement-height: 48px;
        --header-height: 76px;
        --type-display: clamp(44px, 11vw, 61.6px);
        --type-h2: clamp(33px, 8.8vw, 44px);
        --type-h3: 25.3px;
        --type-lead: 20.9px;
        --type-body: 17.6px;
        --type-small: 15.4px;
        --type-label: 13.2px;
        --section-y: 48px;
        --heading-gap: 24px;
    }

    .site-shell,
    .hero > .site-shell.hero__content {
        width: calc(100% - (var(--page-gutter) * 2));
    }

    .coming-soon {
        padding-inline: 16px;
        font-size: 15.4px;
    }

    .site-header__inner {
        gap: 12px;
        padding-block: 6px;
    }

    .brand {
        width: clamp(165px, 52vw, 210px);
    }

    .brand img {
        max-height: 58px;
    }

    .menu-toggle {
        width: 46px;
        height: 46px;
        flex: 0 0 46px;
    }

    .mobile-nav__inner {
        padding-block: 12px 18px;
    }

    .mobile-nav a {
        padding: 11px 0;
        font-size: 17.6px;
    }

    .hero--editorial {
        min-height: 620px;
    }

    .hero > .site-shell.hero__content {
        padding-block: 52px;
    }

    .hero .hero__content h1,
    .hero h1 {
        max-width: 100%;
        font-size: var(--type-display);
        line-height: 1.06;
    }

    .hero .hero__eyebrow {
        margin-bottom: 12px;
        font-size: 14.3px;
    }

    .hero .hero__tagline {
        margin: 18px 0 14px;
        font-size: 20.9px;
    }

    .hero .hero__regions {
        font-size: 13.2px;
        gap: 8px;
    }

    .hero .hero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-top: 22px;
    }

    .hero .hero__actions .button,
    .hero .hero__actions .text-link {
        width: 100%;
        max-width: 100%;
        justify-content: center;
        font-size: 16.5px;
    }

    .section-kicker {
        margin-bottom: 10px;
        font-size: 13.2px;
    }

    .featured-grid,
    .market-grid {
        grid-template-columns: 1fr;
    }

    .featured-card,
    .featured-card--large {
        min-height: 300px;
    }

    .about-story__visual {
        min-height: 0;
    }

    .about-story__image {
        min-height: 0;
        height: clamp(260px, 70vw, 360px);
    }

    .about-story__message {
        padding: 20px;
    }

    .about-story__message p {
        font-size: 19.8px;
    }

    .about-fact {
        padding-block: 18px;
    }

    .explore-item {
        grid-template-columns: 42px minmax(0, 1fr);
        column-gap: 12px;
        row-gap: 10px;
        padding-block: 18px;
    }

    .explore-item__icon {
        width: 42px;
        height: 42px;
    }

    .explore-item p {
        grid-column: 1 / -1;
        padding-left: 0;
        font-size: 17.6px;
    }

    .explore-item h3 {
        font-size: 23.1px;
    }

    .approach-feature__media,
    .careers__media {
        height: clamp(250px, 68vw, 340px);
    }

    .market-card {
        min-height: 260px;
    }

    .commitment blockquote {
        font-size: clamp(33px, 9.46vw, 44px);
    }

    .final-cta {
        padding-block: 40px;
    }

    .final-cta h2 {
        font-size: clamp(33px, 8.8vw, 44px);
    }

    .final-cta__inner > .button {
        width: 100%;
    }

    .site-footer {
        padding-top: 34px;
    }

    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-bottom: 28px;
    }

    .site-footer__brand img {
        width: min(210px, 72vw);
    }

    .contact-modal {
        width: calc(100% - 20px);
        max-height: calc(100dvh - 20px);
    }

    .contact-modal__intro,
    .contact-modal__form-wrap {
        padding: 24px 20px;
    }

    .contact-form__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    :root {
        --page-gutter: 18px;
        --type-display: clamp(39.6px, 11.88vw, 52.8px);
        --type-h2: clamp(30.8px, 9.35vw, 39.6px);
        --section-y: 42px;
    }

    .coming-soon {
        min-height: 44px;
        font-size: 14.3px;
    }

    .brand {
        width: clamp(150px, 50vw, 185px);
    }

    .hero--editorial {
        min-height: 580px;
    }

    .hero > .site-shell.hero__content {
        padding-block: 44px;
    }

    .hero .hero__tagline {
        font-size: 19.8px;
    }

    .button {
        min-height: 48px;
        padding-inline: 16px;
        font-size: 15.4px;
    }

    .featured-card,
    .featured-card--large {
        min-height: 270px;
    }

    .market-card {
        min-height: 240px;
    }
}

/* ABOUT KHLG — balanced text and image composition. */
#about .about-story {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(32px, 4vw, 64px);
}
#about .about-story__top {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    min-width: 0;
}
#about .about-story__heading,
#about .about-story__intro {
    width: 100%;
    min-width: 0;
    max-width: none;
}
#about .about-story__heading h2 {
    font-size: clamp(35.2px, 3.41vw, 57.2px);
    line-height: 1.12;
    letter-spacing: -0.025em;
}
#about .about-story__intro {
    padding-bottom: 0;
}
#about .about-story__intro p {
    max-width: 65ch;
}
#about .about-story__intro .section-lead {
    margin-bottom: 16px;
}
#about .about-story__intro .text-link {
    margin-top: 22px;
}
#about .about-story__visual {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    min-height: 0;
    margin: 0;
}
#about .about-story__image {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 3 / 2;
    margin: 0;
}
#about .about-story__image img {
    position: absolute;
    inset: 0;
    object-position: center;
}
#about .about-story__image figcaption {
    left: 24px;
    right: 24px;
    bottom: 22px;
    gap: 10px;
    font-size: 13.2px;
}
#about .about-story__message {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(22px, 2.5vw, 32px);
    box-shadow: none;
}
#about .about-story__message-mark {
    margin-bottom: 14px;
}
#about .about-story__message p {
    font-size: clamp(18.7px, 1.54vw, 22px);
    line-height: 1.5;
}
#about .about-story__facts {
    grid-column: 1 / -1;
}
@media (max-width: 1000px) {
    #about .about-story {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
    #about .about-story__heading h2 {
        font-size: clamp(33px, 5.28vw, 50.6px);
    }
    #about .about-story__image {
        aspect-ratio: 16 / 9;
    }
}
@media (max-width: 540px) {
    #about .about-story__top {
        gap: 20px;
    }
    #about .about-story__image {
        aspect-ratio: 4 / 3;
    }
    #about .about-story__image figcaption {
        left: 18px;
        right: 18px;
        bottom: 18px;
        gap: 8px;
        font-size: 12.1px;
    }
}

/* KHLG layout revision: fluid width and explicit readable typography. */
:root {
    --page-gutter: 7vw;
    --type-display: clamp(76px, 6.6vw, 144px);
    --type-h2: clamp(40px, 3.4vw, 68px);
    --type-h3: clamp(26px, 2vw, 34px);
    --type-body: 20px;
    --type-lead: clamp(23px, 1.65vw, 30px);
    --type-small: 17px;
    --type-label: 14px;
}
body .site-shell,
body .hero > .site-shell.hero__content {
    width: calc(100% - (var(--page-gutter) * 2));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
}
body {
    font-size: var(--type-body);
}
.hero .hero__content h1 {
    font-size: var(--type-display);
    max-width: 1450px;
}
.hero .hero__tagline {
    font-size: var(--type-lead);
    max-width: 1100px;
}
.hero .hero__eyebrow {
    font-size: 20px;
}
.hero .hero__regions {
    font-size: 16px;
}
.desktop-nav a,
.mobile-nav a,
.button,
.text-link,
.hero .hero__actions .button,
.hero .hero__actions .text-link {
    font-size: 18px;
}
.button {
    height: auto;
    min-height: 52px;
    white-space: normal;
    text-align: center;
}
.section-kicker {
    font-size: var(--type-label);
}
#about .about-story__heading h2 {
    font-size: var(--type-h2);
}
#about .about-story__intro {
    font-size: var(--type-body);
}
#about .about-story__intro .section-lead {
    font-size: var(--type-lead);
}
#about .about-story__message p {
    font-size: 22px;
}
.service-card p,
.market-card p,
.about-fact p {
    font-size: 18px;
}
.service-card h3,
.market-card h3 {
    font-size: var(--type-h3);
}
.service-card,
.market-card,
.about-fact {
    min-width: 0;
}
@media (max-width: 1200px) {
    .desktop-nav,
    .site-header__inner > .button--nav {
        display: none;
    }
    .site-header__inner {
        grid-template-columns: 1fr auto;
    }
    .menu-toggle {
        display: block;
        justify-self: end;
    }
}
@media (max-width: 1000px) {
    :root {
        --page-gutter: 40px;
        --type-display: clamp(56px, 8vw, 80px);
        --type-h2: clamp(36px, 5vw, 50px);
        --type-body: 19px;
        --type-lead: 24px;
    }
}
@media (max-width: 700px) {
    :root {
        --page-gutter: 24px;
        --type-display: clamp(38px, 9.6vw, 62px);
        --type-h2: clamp(32px, 7vw, 42px);
        --type-h3: 26px;
        --type-body: 18px;
        --type-lead: 21px;
        --type-small: 16px;
    }
    .hero .hero__eyebrow {
        font-size: 15px;
    }
    .hero .hero__regions {
        font-size: 13px;
    }
    .button,
    .text-link,
    .hero .hero__actions .button,
    .hero .hero__actions .text-link {
        font-size: 16px;
    }
    #about .about-story__message p {
        font-size: 19px;
    }
    .service-card p,
    .market-card p,
    .about-fact p {
        font-size: 17px;
    }
}

/* ABOUT: let the text determine the desktop row height.
   The image fills the remaining height above the blue message panel. */
@media (min-width: 1001px) {
    #about .about-story {
        align-items: stretch;
        row-gap: 32px;
    }
    #about .about-story__visual {
        align-self: stretch;
        min-height: 0;
    }
    #about .about-story__image {
        flex: 1 1 0;
        aspect-ratio: auto;
        min-height: 240px;
    }
    #about .about-story__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    #about .about-story__message {
        flex: 0 0 auto;
        padding: 22px 28px;
    }
    #about .about-story__message-mark {
        margin-bottom: 12px;
    }
}

/* Distinct contact section above the blue footer. */
#contact.final-cta {
    background: var(--khlg-neutral);
    color: var(--khlg-navy);
    padding-block: clamp(52px, 5vw, 80px);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
#contact.final-cta h2,
#contact.final-cta .section-kicker {
    color: var(--khlg-navy);
}
#contact.final-cta .button {
    background: var(--khlg-navy);
    border-color: var(--khlg-navy);
    color: var(--khlg-white);
}
#contact.final-cta .button:hover {
    background: #3577b2;
    border-color: #3577b2;
    color: var(--khlg-white);
}
#contact.final-cta .button:focus-visible {
    outline: 3px solid var(--khlg-blue);
    outline-offset: 4px;
}
@media (max-width: 700px) {
    #contact.final-cta {
        padding-block: 44px;
    }
}

/* Sticky navigation: the announcement scrolls away, the header stays at top. */
html,
body {
    overflow-x: clip;
    overflow-y: visible;
}
.coming-soon {
    position: relative;
    top: auto;
    z-index: auto;
}
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
}
main section[id] {
    scroll-margin-top: calc(var(--header-height) + 24px);
}
.site-header .mobile-nav {
    max-height: calc(100dvh - var(--header-height) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ============================================================================
   KHLG LIVELY TONAL COLOR SYSTEM — 2026-09-24
   ----------------------------------------------------------------------------
   INTENTIONAL PALETTE ROLES
   - Navy / Deep Blue = structure, depth, dark sections
   - KHLG Blue        = primary brand accent and actions
   - Mid / Cyan       = energetic secondary accents
   - Bright / Sky     = highlights, icons, active markers
   - Ice / Soft Sky   = light section surfaces
   - Charcoal         = readable body text
   ============================================================================ */

:root {
    /* Core KHLG palette */
    --khlg-charcoal: #4a5159;
    --khlg-navy: #30618c;
    --khlg-blue: #4ea4d9;
    --khlg-light-blue: #acd7f2;
    --khlg-neutral: #f2f2f2;
    --khlg-white: #ffffff;

    /* Approved supporting tonal ramp */
    --khlg-tone-deep: #3577b2;
    --khlg-tone-mid: #4595c4;
    --khlg-tone-cyan: #54b2d5;
    --khlg-tone-bright: #71c8e2;
    --khlg-tone-sky: #a4deee;
    --khlg-tone-sky-soft: #bae7f3;
    --khlg-tone-ice: #d2eff7;

    /* Semantic roles */
    --color-text: var(--khlg-charcoal);
    --color-structure: var(--khlg-navy);
    --color-accent: var(--khlg-blue);
    --color-accent-strong: var(--khlg-tone-deep);
    --color-accent-secondary: var(--khlg-tone-cyan);
    --color-highlight: var(--khlg-tone-bright);
    --color-surface: var(--khlg-white);
    --color-surface-alt: var(--khlg-neutral);
    --color-surface-blue: var(--khlg-tone-ice);
    --color-surface-blue-soft: var(--khlg-tone-sky-soft);

    --color-line: rgba(48, 97, 140, 0.16);
    --color-line-light: rgba(172, 215, 242, 0.28);
}

/* ============================================================================
   GLOBAL FOUNDATION
   ============================================================================ */

body {
    color: var(--color-text);
    background: var(--khlg-white);
}

::selection {
    background: var(--khlg-tone-bright);
    color: var(--khlg-navy);
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--khlg-tone-bright);
    outline-offset: 4px;
}

/* ============================================================================
   ANNOUNCEMENT + NAVIGATION
   ============================================================================ */

.coming-soon {
    background: linear-gradient(
        90deg,
        var(--khlg-tone-sky-soft),
        var(--khlg-tone-ice)
    );
    color: var(--khlg-navy);
}

.site-header {
    background: rgba(48, 97, 140, 0.97);
    border-bottom-color: rgba(164, 222, 238, 0.24);
}

.desktop-nav a {
    color: rgba(255, 255, 255, 0.82);
}

.desktop-nav a:hover,
.desktop-nav a.is-active {
    color: var(--khlg-white);
}

.desktop-nav a::after {
    background: var(--khlg-tone-bright);
}

.mobile-nav {
    background: linear-gradient(
        180deg,
        var(--khlg-navy),
        var(--khlg-tone-deep)
    );
}

.mobile-nav a {
    color: var(--khlg-white);
}

/* ============================================================================
   BUTTONS + LINKS
   ============================================================================ */

.button--primary,
.round-link,
.contact-form .contact-form__submit {
    background: var(--khlg-blue);
    border-color: var(--khlg-blue);
    color: var(--khlg-white);
}

.button--primary:hover,
.round-link:hover,
.contact-form .contact-form__submit:hover {
    background: var(--khlg-tone-deep);
    border-color: var(--khlg-tone-deep);
    color: var(--khlg-white);
}

.button--nav,
.button--light {
    background: var(--khlg-white);
    border-color: rgba(255, 255, 255, 0.72);
    color: var(--khlg-navy);
}

.button--nav:hover,
.button--light:hover {
    background: var(--khlg-tone-sky-soft);
    border-color: var(--khlg-tone-sky-soft);
    color: var(--khlg-navy);
}

.text-link {
    color: var(--khlg-tone-deep);
}

.text-link:hover {
    color: var(--khlg-tone-cyan);
}

.text-link--light {
    color: var(--khlg-white);
}

.text-link--light:hover {
    color: var(--khlg-tone-sky);
}

/* ============================================================================
   HERO — LIVELIER, MORE DIMENSIONAL, STILL PROFESSIONAL
   ============================================================================ */

.hero,
.hero--editorial {
    position: relative;
    isolation: isolate;
    color: var(--khlg-white);
    background: var(--khlg-navy);
}

.hero__media img {
    filter: saturate(1.1) contrast(1.03) brightness(1.02);
    transform: scale(1.014);
    transform-origin: center;
}

/* Hero stays vivid without the previous dark charcoal/navy veil. */
.hero__overlay {
    background: linear-gradient(
        90deg,
        rgba(78, 164, 217, 0.34) 0%,
        rgba(84, 178, 213, 0.22) 34%,
        rgba(113, 200, 226, 0.12) 62%,
        rgba(172, 215, 242, 0.04) 82%,
        transparent 100%
    );
}

/* Cyan/sky glow gives the hero energy without covering the photo. */
.hero::after,
.hero--editorial::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 82% 22%,
            rgba(113, 200, 226, 0.2),
            transparent 26%
        ),
        radial-gradient(
            circle at 70% 76%,
            rgba(84, 178, 213, 0.14),
            transparent 30%
        );
}

.hero__content,
.hero__content--editorial {
    position: relative;
    z-index: 3;
}

.hero .hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    padding: 8px 13px;
    margin-bottom: 22px;
    border: 1px solid rgba(164, 222, 238, 0.4);
    background: rgba(48, 97, 140, 0.28);
    color: var(--khlg-tone-sky);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.hero .hero__eyebrow::before {
    content: "";
    width: 25px;
    height: 3px;
    flex: 0 0 25px;
    background: linear-gradient(
        90deg,
        var(--khlg-blue),
        var(--khlg-tone-bright)
    );
}

.hero .hero__content h1,
.hero h1 {
    color: var(--khlg-white);
    font-weight: 600;
    text-shadow:
        0 2px 2px rgba(15, 31, 43, 0.16),
        0 14px 42px rgba(15, 31, 43, 0.34);
}

.hero .hero__tagline {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
    text-shadow: 0 8px 28px rgba(15, 31, 43, 0.22);
}

.hero .hero__regions {
    color: rgba(255, 255, 255, 0.86);
}

.hero .hero__regions span {
    background: var(--khlg-tone-bright);
}

.hero .hero__actions .button--primary {
    background: linear-gradient(
        135deg,
        var(--khlg-blue),
        var(--khlg-tone-cyan)
    );
    border-color: transparent;
    box-shadow: 0 14px 34px rgba(20, 54, 82, 0.26);
}

.hero .hero__actions .button--primary:hover {
    background: linear-gradient(
        135deg,
        var(--khlg-tone-deep),
        var(--khlg-tone-mid)
    );
    box-shadow: 0 17px 40px rgba(20, 54, 82, 0.34);
}

.hero__bottom {
    border-top-color: rgba(164, 222, 238, 0.24);
    background: linear-gradient(
        90deg,
        rgba(48, 97, 140, 0.64),
        rgba(53, 119, 178, 0.46),
        rgba(84, 178, 213, 0.28)
    );
    backdrop-filter: blur(11px);
}

.hero__bottom-inner {
    color: rgba(255, 255, 255, 0.94);
}

/* ============================================================================
   SECTION LABELS + TYPE
   ============================================================================ */

.section-kicker {
    color: var(--khlg-tone-deep);
}

.section-kicker::before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 3px;
    margin-right: 10px;
    vertical-align: middle;
    background: linear-gradient(
        90deg,
        var(--khlg-blue),
        var(--khlg-tone-bright)
    );
}

.section-kicker--light {
    color: var(--khlg-tone-sky);
}

.section-kicker--light::before {
    background: linear-gradient(
        90deg,
        var(--khlg-tone-cyan),
        var(--khlg-tone-bright)
    );
}

.section-heading h2,
.intro__headline h2,
.intro-editorial__headline h2,
.about-story__heading h2,
.careers h2 {
    color: var(--khlg-charcoal);
}

.section-heading__copy,
.intro__copy,
.intro-editorial__copy p,
.careers__content p {
    color: var(--muted);
}

/* ============================================================================
   MAJOR SECTION SURFACES — CONTROLLED COLOR RHYTHM
   ============================================================================ */

.intro,
.intro--editorial {
    background: var(--khlg-white);
}

.featured {
    background: linear-gradient(180deg, var(--khlg-tone-ice) 0%, #ffffff 100%);
}

.services {
    background: var(--khlg-neutral);
}

.markets {
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        rgba(186, 231, 243, 0.36) 100%
    );
}

.careers,
.careers--clean {
    background: linear-gradient(
        135deg,
        rgba(210, 239, 247, 0.72),
        var(--khlg-neutral)
    );
}

/* ============================================================================
   ABOUT KHLG
   ============================================================================ */

#about .about-story__message {
    background: linear-gradient(
        135deg,
        var(--khlg-navy),
        var(--khlg-tone-deep)
    );
    color: var(--khlg-white);
}

#about .about-story__message-mark {
    background: var(--khlg-tone-bright);
}

#about .about-story__message p {
    color: var(--khlg-white);
}

#about .about-fact {
    border-top: 3px solid transparent;
}

#about .about-fact:nth-child(1) {
    border-top-color: var(--khlg-tone-deep);
}

#about .about-fact:nth-child(2) {
    border-top-color: var(--khlg-tone-cyan);
}

#about .about-fact:nth-child(3) {
    border-top-color: var(--khlg-tone-bright);
}

#about .about-fact:nth-child(1) .about-fact__label {
    color: var(--khlg-tone-deep);
}

#about .about-fact:nth-child(2) .about-fact__label {
    color: var(--khlg-tone-cyan);
}

#about .about-fact:nth-child(3) .about-fact__label {
    color: var(--khlg-tone-mid);
}

/* ============================================================================
   FEATURED CAPABILITIES
   ============================================================================ */

.featured-card__overlay {
    background: linear-gradient(
        0deg,
        rgba(48, 97, 140, 0.96) 0%,
        rgba(53, 119, 178, 0.66) 34%,
        rgba(84, 178, 213, 0.2) 72%,
        rgba(84, 178, 213, 0.04) 100%
    );
}

.featured-card__content,
.featured-card__content h3 {
    color: var(--khlg-white);
}

.featured-card__content > span {
    color: var(--khlg-tone-sky);
}

.featured-card:nth-child(2) .featured-card__content > span {
    color: var(--khlg-tone-bright);
}

.featured-card:nth-child(3) .featured-card__content > span {
    color: var(--khlg-tone-sky-soft);
}

/* ============================================================================
   SERVICES / EXPLORE ITEMS — CONSISTENT ICON SYSTEM
   ============================================================================ */

.explore-item,
.service-card:not(.service-card--feature) {
    color: var(--khlg-charcoal);
}

/* One intentional icon treatment across every repeated service item. */
.explore-item__icon,
.service-card__icon,
.service-card--feature .service-card__icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    background: var(--khlg-light-blue);
    color: var(--khlg-navy);
    border: 1px solid rgba(48, 97, 140, 0.12);
    transition:
        background 0.25s var(--ease),
        color 0.25s var(--ease),
        transform 0.25s var(--ease);
}

.explore-item__icon i,
.explore-item__icon svg,
.service-card__icon i,
.service-card__icon svg {
    color: var(--khlg-navy);
    fill: currentColor;
}

/* Indexes / service numbers also use one consistent accent color. */
.explore-item__index,
.service-card__number,
.service-card--feature .service-card__number {
    color: var(--khlg-blue);
}

.explore-item h3,
.service-card:not(.service-card--feature) h3 {
    color: var(--khlg-charcoal);
}

.explore-item p,
.service-card:not(.service-card--feature) p {
    color: var(--muted);
}

@media (hover: hover) and (pointer: fine) {
    .explore-item:hover,
    .service-card:not(.service-card--feature):hover {
        background: rgba(210, 239, 247, 0.72);
    }

    .explore-item:hover .explore-item__icon,
    .service-card:not(.service-card--feature):hover .service-card__icon {
        transform: translateY(-2px);
        background: var(--khlg-tone-cyan);
        color: var(--khlg-navy);
    }
}

.service-card--feature {
    background: linear-gradient(
        145deg,
        var(--khlg-navy),
        var(--khlg-tone-deep)
    );
    color: var(--khlg-white);
}

.service-card--feature h3,
.service-card--feature p {
    color: var(--khlg-white);
}

.service-card--feature p {
    opacity: 0.84;
}

/* ============================================================================
   HOW WE WORK / APPROACH
   ============================================================================ */

.approach,
.approach--feature {
    background:
        radial-gradient(
            circle at 85% 18%,
            rgba(113, 200, 226, 0.16),
            transparent 28%
        ),
        linear-gradient(135deg, var(--khlg-navy), var(--khlg-tone-deep));
    color: var(--khlg-white);
}

.approach h2,
.approach--feature h2 {
    color: var(--khlg-white);
}

.approach .section-kicker,
.approach--feature .section-kicker,
.approach .section-kicker--light,
.approach--feature .section-kicker--light {
    color: var(--khlg-tone-sky);
}

.approach__copy p,
.approach-feature__copy p {
    color: rgba(255, 255, 255, 0.84);
}

/* ============================================================================
   INFRASTRUCTURE MARKETS
   ============================================================================ */

.market-card__overlay {
    background: linear-gradient(
        0deg,
        rgba(48, 97, 140, 0.96) 0%,
        rgba(53, 119, 178, 0.72) 32%,
        rgba(84, 178, 213, 0.24) 70%,
        rgba(84, 178, 213, 0.05) 100%
    ) !important;
}

.market-card h3 {
    color: var(--khlg-white) !important;
}

.market-card > span {
    color: var(--khlg-tone-sky-soft) !important;
}

.market-card:nth-child(3n + 2) > span {
    color: var(--khlg-tone-bright) !important;
}

/* ============================================================================
   COMMITMENT / MISSION
   ============================================================================ */

.commitment {
    color: var(--khlg-white);
}

.commitment__overlay {
    background:
        radial-gradient(
            circle at 84% 20%,
            rgba(113, 200, 226, 0.14),
            transparent 26%
        ),
        linear-gradient(
            90deg,
            rgba(74, 81, 89, 0.95) 0%,
            rgba(48, 97, 140, 0.92) 38%,
            rgba(53, 119, 178, 0.68) 66%,
            rgba(84, 178, 213, 0.3) 100%
        );
}

.commitment blockquote {
    color: var(--khlg-white);
}

.commitment__copy {
    color: rgba(255, 255, 255, 0.88);
}

/* ============================================================================
   CAREERS
   ============================================================================ */

.careers .section-kicker {
    color: var(--khlg-tone-deep);
}

.careers__content h2,
.careers__content h3 {
    color: var(--khlg-charcoal);
}

.careers__content .button--primary {
    background: var(--khlg-tone-cyan);
    border-color: var(--khlg-tone-cyan);
}

.careers__content .button--primary:hover {
    background: var(--khlg-tone-deep);
    border-color: var(--khlg-tone-deep);
}

/* ============================================================================
   CONTACT CTA — BRIGHT BRAND MOMENT BEFORE FOOTER
   ============================================================================ */

#contact.final-cta {
    background:
        radial-gradient(
            circle at 88% 30%,
            rgba(113, 200, 226, 0.5),
            transparent 30%
        ),
        linear-gradient(135deg, var(--khlg-tone-ice), var(--khlg-tone-sky-soft));
    color: var(--khlg-navy);
    border-top: 1px solid rgba(48, 97, 140, 0.14);
    border-bottom: 1px solid rgba(48, 97, 140, 0.14);
}

#contact.final-cta h2,
#contact.final-cta .section-kicker {
    color: var(--khlg-navy);
}

#contact.final-cta .section-kicker::before {
    background: linear-gradient(90deg, var(--khlg-blue), var(--khlg-tone-cyan));
}

#contact.final-cta .button {
    background: linear-gradient(
        135deg,
        var(--khlg-navy),
        var(--khlg-tone-deep)
    );
    border-color: transparent;
    color: var(--khlg-white);
}

#contact.final-cta .button:hover {
    background: linear-gradient(
        135deg,
        var(--khlg-tone-deep),
        var(--khlg-tone-mid)
    );
}

/* ============================================================================
   FOOTER
   ============================================================================ */

.site-footer {
    background:
        radial-gradient(
            circle at 85% 0%,
            rgba(84, 178, 213, 0.12),
            transparent 28%
        ),
        linear-gradient(145deg, var(--khlg-navy), #29567d);
    color: var(--khlg-white);
}

.site-footer__label {
    color: var(--khlg-tone-sky);
}

.site-footer p,
.site-footer a {
    color: rgba(255, 255, 255, 0.76);
}

.site-footer a:hover {
    color: var(--khlg-tone-sky-soft);
}

.site-footer__bottom {
    border-top-color: rgba(164, 222, 238, 0.22);
    color: rgba(255, 255, 255, 0.6);
}

/* ============================================================================
   CONTACT MODAL
   ============================================================================ */

.contact-modal__intro {
    background:
        radial-gradient(
            circle at 90% 12%,
            rgba(113, 200, 226, 0.18),
            transparent 30%
        ),
        linear-gradient(145deg, var(--khlg-navy), var(--khlg-tone-deep));
    color: var(--khlg-white);
}

.contact-modal__eyebrow,
.contact-modal__details span {
    color: var(--khlg-tone-sky);
}

.contact-modal__form-wrap h3,
.contact-form label {
    color: var(--khlg-charcoal);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: var(--khlg-tone-deep);
    outline-color: var(--khlg-tone-cyan);
}

.contact-form__status,
.contact-form__draft-link {
    color: var(--khlg-tone-deep);
}

/* ============================================================================
   MOBILE HERO TUNING
   ============================================================================ */

@media (max-width: 700px) {
    .hero__media img {
        filter: saturate(1.08) contrast(1.03) brightness(1);
        transform: scale(1.01);
    }

    .hero__overlay {
        background: linear-gradient(
            90deg,
            rgba(78, 164, 217, 0.38) 0%,
            rgba(84, 178, 213, 0.25) 48%,
            rgba(172, 215, 242, 0.1) 78%,
            transparent 100%
        );
    }

    .hero::after,
    .hero--editorial::after {
        background: radial-gradient(
            circle at 78% 20%,
            rgba(113, 200, 226, 0.16),
            transparent 28%
        );
    }

    .hero .hero__eyebrow {
        padding: 7px 10px;
        margin-bottom: 16px;
    }

    .hero .hero__eyebrow::before {
        width: 18px;
        flex-basis: 18px;
    }

    .hero .hero__content h1,
    .hero h1 {
        text-shadow:
            0 2px 2px rgba(15, 31, 43, 0.16),
            0 10px 28px rgba(15, 31, 43, 0.3);
    }
}

/* ============================================================================
   NO DARK PHOTO OVERLAYS — FINAL OVERRIDE
   Keeps photography bright and unobstructed across the entire page.
   ============================================================================ */

/* Hero: bright KHLG blue/cyan overlay for text readability — no dark colors. */
.hero__overlay {
    background:
        linear-gradient(
            90deg,
            rgba(78, 164, 217, 0.68) 0%,
            rgba(84, 178, 213, 0.52) 32%,
            rgba(113, 200, 226, 0.28) 58%,
            rgba(172, 215, 242, 0.1) 78%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(
            0deg,
            rgba(78, 164, 217, 0.18) 0%,
            rgba(255, 255, 255, 0) 48%
        ) !important;
}

.hero::after,
.hero--editorial::after {
    background: transparent !important;
}

.hero__media img {
    filter: saturate(1.06) contrast(1.01) brightness(1.04) !important;
}

/* About image: remove the image veil. */
#about .about-story__image::after,
.about-story__image::after {
    background: transparent !important;
}

/* Featured capability photos: no dark/navy cover. */
.featured-card__overlay {
    background: transparent !important;
}

/* Infrastructure market photos: no dark/navy cover, including hover. */
.market-card__overlay,
.market-card:hover .market-card__overlay {
    background: transparent !important;
}

/* Commitment / mission: bright blue/cyan veil for readable white copy — no dark overlay. */
.commitment__overlay {
    background: linear-gradient(
        90deg,
        rgba(78, 164, 217, 0.62) 0%,
        rgba(84, 178, 213, 0.48) 48%,
        rgba(113, 200, 226, 0.28) 74%,
        rgba(172, 215, 242, 0.12) 100%
    ) !important;
}

/* Preserve legibility without covering the photos. */
.hero h1,
.hero .hero__content h1,
.hero .hero__tagline,
.hero .hero__regions,
.featured-card__content,
.featured-card__content h3,
.market-card h3,
.market-card > span,
.commitment blockquote,
.commitment__copy {
    text-shadow:
        0 2px 3px rgba(24, 45, 62, 0.44),
        0 8px 24px rgba(24, 45, 62, 0.3);
}

/* Keep labels lively with light KHLG tones rather than dark translucent fills. */
.hero .hero__eyebrow {
    background: rgba(210, 239, 247, 0.22) !important;
    border-color: rgba(210, 239, 247, 0.52) !important;
}

.hero__bottom {
    background: rgba(78, 164, 217, 0.2) !important;
    border-top-color: rgba(210, 239, 247, 0.42) !important;
}

@media (max-width: 700px) {
    .hero__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(78, 164, 217, 0.72) 0%,
                rgba(84, 178, 213, 0.58) 56%,
                rgba(172, 215, 242, 0.2) 100%
            ),
            linear-gradient(
                0deg,
                rgba(78, 164, 217, 0.2) 0%,
                rgba(255, 255, 255, 0) 58%
            ) !important;
    }

    .hero::after,
    .hero--editorial::after {
        background: transparent !important;
    }

    .hero__media img {
        filter: saturate(1.04) contrast(1.01) brightness(1.04) !important;
    }
}

/* ============================================================================
   HERO EYEBROW — TEXT ONLY
   No rectangle, border, background panel, or decorative line.
   ============================================================================ */
.hero .hero__eyebrow,
.hero__eyebrow {
    display: block;
    width: fit-content;
    padding: 0 !important;
    margin-bottom: 24px;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    color: var(--khlg-white) !important;
    font-size: 22px !important;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(48, 97, 140, 0.42);
}

.hero .hero__eyebrow::before,
.hero__eyebrow::before,
.hero .hero__eyebrow::after,
.hero__eyebrow::after {
    content: none !important;
    display: none !important;
}

@media (max-width: 700px) {
    .hero .hero__eyebrow,
    .hero__eyebrow {
        margin-bottom: 18px;
        font-size: 18px !important;
        letter-spacing: 0.08em;
    }
}

/* ============================================================================
   HERO EYEBROW — TEXT ONLY / FINAL OVERRIDE
   Removes all box, border, glow container, and decorative line.
   ============================================================================ */
.hero .hero__eyebrow,
.hero__eyebrow {
    display: inline-block !important;
    width: auto !important;
    padding: 0 !important;
    margin-bottom: 24px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.11em !important;
    text-transform: uppercase !important;
    text-shadow: 0 2px 10px rgba(48, 97, 140, 0.45) !important;
}

.hero .hero__eyebrow::before,
.hero__eyebrow::before,
.hero .hero__eyebrow::after,
.hero__eyebrow::after {
    content: none !important;
    display: none !important;
}

@media (max-width: 700px) {
    .hero .hero__eyebrow,
    .hero__eyebrow {
        margin-bottom: 18px !important;
        font-size: 18px !important;
        letter-spacing: 0.09em !important;
    }
}

/* ============================================================================
   FEATURED CAPABILITIES — LIGHT READABILITY TREATMENT
   Keeps photography bright; no dark/navy image overlay.
   ============================================================================ */
.featured-card__overlay {
    background: linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.96) 0%,
        rgba(210, 239, 247, 0.92) 30%,
        rgba(186, 231, 243, 0.62) 52%,
        rgba(172, 215, 242, 0.26) 70%,
        rgba(255, 255, 255, 0) 88%
    ) !important;
}

.featured-card__content {
    color: var(--khlg-navy) !important;
    text-shadow: none !important;
}

.featured-card__content h3 {
    color: var(--khlg-navy) !important;
    font-weight: 600;
    text-shadow: none !important;
}

.featured-card__content p {
    color: var(--khlg-charcoal) !important;
    font-weight: 500;
    text-shadow: none !important;
}

.featured-card__content > span,
.featured-card:nth-child(2) .featured-card__content > span,
.featured-card:nth-child(3) .featured-card__content > span {
    color: var(--khlg-tone-deep) !important;
    font-weight: 700;
    text-shadow: none !important;
}

@media (max-width: 700px) {
    .featured-card__overlay {
        background: linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(210, 239, 247, 0.94) 38%,
            rgba(186, 231, 243, 0.58) 64%,
            rgba(255, 255, 255, 0) 90%
        ) !important;
    }
}

/* ============================================================================
   FEATURED CAPABILITIES — PHOTO-FIRST READABILITY FIX
   No image-covering overlay. Keep photography fully visible and improve
   readability with typography only.
   ============================================================================ */
.featured-card__overlay {
    background: transparent !important;
}

.featured-card__content,
.featured-card__content h3,
.featured-card__content p,
.featured-card__content > span,
.featured-card:nth-child(2) .featured-card__content > span,
.featured-card:nth-child(3) .featured-card__content > span {
    color: var(--khlg-white) !important;
}

.featured-card__content h3 {
    font-weight: 600 !important;
    text-shadow:
        0 2px 4px rgba(48, 97, 140, 0.95),
        0 4px 12px rgba(48, 97, 140, 0.72),
        0 0 2px rgba(48, 97, 140, 0.9) !important;
    -webkit-text-stroke: 0.25px rgba(48, 97, 140, 0.82);
}

.featured-card__content p {
    font-weight: 500 !important;
    text-shadow:
        0 1px 3px rgba(48, 97, 140, 0.96),
        0 3px 9px rgba(48, 97, 140, 0.78) !important;
}

.featured-card__content > span,
.featured-card:nth-child(2) .featured-card__content > span,
.featured-card:nth-child(3) .featured-card__content > span {
    font-weight: 700 !important;
    text-shadow:
        0 1px 3px rgba(48, 97, 140, 0.96),
        0 3px 8px rgba(48, 97, 140, 0.72) !important;
}

@media (max-width: 700px) {
    .featured-card__overlay {
        background: transparent !important;
    }
}

/* ============================================================================
   FEATURED CAPABILITIES — 50% SOLID TEXT BACKGROUND
   Keeps the image fully visible; only the text block gets a translucent fill.
   ============================================================================ */
.featured-card__overlay {
    background: transparent !important;
}

.featured-card__content {
    width: fit-content !important;
    max-width: calc(100% - 40px) !important;
    margin: 0 20px 20px !important;
    padding: 16px 18px !important;
    background: rgba(48, 97, 140, 0.5) !important;
    color: var(--khlg-white) !important;
}

.featured-card__content h3,
.featured-card__content p,
.featured-card__content > span,
.featured-card:nth-child(2) .featured-card__content > span,
.featured-card:nth-child(3) .featured-card__content > span {
    color: var(--khlg-white) !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
}

@media (max-width: 700px) {
    .featured-card__content {
        max-width: calc(100% - 28px) !important;
        margin: 0 14px 14px !important;
        padding: 14px 16px !important;
    }
}

/* ============================================================================
   COMMITMENT — RIGHT-ALIGNED TEXT PANEL
   Keeps the Guam photo visible on the left while positioning the mission copy
   on the right. The panel returns to full width on small screens.
   ============================================================================ */
.commitment__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 40% center;
    filter: saturate(1.06) contrast(1.02) brightness(1.02);
}

/* Keep the photograph visible; only a very light brand tint remains. */
.commitment__overlay {
    background: rgba(78, 164, 217, 0.12) !important;
}

.commitment__content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.commitment__panel {
    width: min(760px, 48%);
    margin-left: auto;
    margin-right: 0;
    padding: clamp(26px, 3.2vw, 46px);
    background: rgba(78, 164, 217, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.commitment__panel .section-kicker,
.commitment__panel blockquote,
.commitment__panel .commitment__copy {
    color: #ffffff;
}

.commitment__panel blockquote,
.commitment__panel .commitment__copy,
.commitment__panel .section-kicker {
    text-shadow: 0 2px 8px rgba(48, 97, 140, 0.34);
}

.commitment__panel blockquote {
    max-width: 820px;
}

.commitment__panel .commitment__copy {
    max-width: 760px;
}

@media (max-width: 960px) {
    .commitment__panel {
        width: min(680px, 62%);
    }
}

@media (max-width: 700px) {
    .commitment__content {
        align-items: flex-end;
        justify-content: flex-start;
    }

    .commitment__media img {
        object-position: 58% center;
    }

    .commitment__panel {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 24px;
        background: rgba(78, 164, 217, 0.56);
    }
}

/* ============================================================================
   KHLG — RESPONSIVE CONTAINER STANDARD / FINAL OVERRIDE
   Applies the agreed viewport, gutter, and container-width system.

   Mobile:            < 576px      | 16–24px gutters | fluid/full-width shell
   Small tablet:      576–767px    | 24–30px gutters | up to 720px
   Tablet (vertical): 768–991px    | 30–40px gutters | up to 960px
   Desktop transition:992–1199px   | 40px gutters    | up to 1140px
   Desktop standard:  1200–1399px  | 40–60px gutters | up to 1300px
   Desktop large:     >= 1400px    | 60–120px gutters| up to 1440px
   ============================================================================ */

:root {
    --page-gutter: clamp(60px, 6vw, 120px);
    --container-max: 1440px;
}

/*
   One global shell rule controls the horizontal rhythm of every section.
   This also keeps the hero aligned with the rest of the page.
*/
body .site-shell,
body .hero > .site-shell.hero__content {
    width: min(
        calc(100% - (var(--page-gutter) * 2)),
        var(--container-max)
    ) !important;
    max-width: var(--container-max) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
}

/* Desktop — standard */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    :root {
        --page-gutter: clamp(40px, 4vw, 60px);
        --container-max: 1300px;
    }
}

/* Desktop transition / landscape tablet */
@media (min-width: 992px) and (max-width: 1199.98px) {
    :root {
        --page-gutter: 40px;
        --container-max: 1140px;
    }
}

/* Tablet — vertical */
@media (min-width: 768px) and (max-width: 991.98px) {
    :root {
        --page-gutter: clamp(30px, 4vw, 40px);
        --container-max: 960px;
    }
}

/* Large mobile / small tablet transition */
@media (min-width: 576px) and (max-width: 767.98px) {
    :root {
        --page-gutter: clamp(24px, 4vw, 30px);
        --container-max: 720px;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    :root {
        --page-gutter: clamp(16px, 4vw, 24px);
        --container-max: 100%;
    }

    body .site-shell,
    body .hero > .site-shell.hero__content {
        width: calc(100% - (var(--page-gutter) * 2)) !important;
        max-width: none !important;
    }
}

/* ============================================================================
   KHLG — PHOTO OVERLAYS REMOVED / FINAL OVERRIDE
   Keeps all photography fully visible. Readability is handled with text-shadow
   instead of image-covering gradients, tints, or translucent panels.
   ============================================================================ */

/* Remove every full-photo overlay layer. */
.hero__overlay,
.featured-card__overlay,
.market-card__overlay,
.market-card:hover .market-card__overlay,
.commitment__overlay {
    display: none !important;
    background: none !important;
    opacity: 0 !important;
}

/* Remove pseudo-element image veils / decorative photo tints. */
.hero::after,
.hero--editorial::after,
#about .about-story__image::after,
.about-story__image::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* Hero bottom bar stays structurally in place but no longer tints the image. */
.hero__bottom {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Remove translucent backgrounds sitting directly over capability photos. */
.featured-card__content {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Remove the translucent mission panel so the commitment photo stays clean. */
.commitment__panel {
    background: transparent !important;
    border-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Maintain readable white copy without covering the photography. */
.hero h1,
.hero .hero__content h1,
.hero .hero__eyebrow,
.hero .hero__tagline,
.hero .hero__regions,
.hero__bottom,
.featured-card__content,
.featured-card__content h3,
.featured-card__content p,
.market-card h3,
.commitment__panel .section-kicker,
.commitment__panel blockquote,
.commitment__panel .commitment__copy {
    text-shadow:
        0 2px 4px rgba(20, 38, 52, 0.72),
        0 6px 18px rgba(20, 38, 52, 0.5) !important;
}

/* Keep photo colors natural now that overlays are gone. */
.hero__media img,
.featured-card img,
.market-card img,
.commitment__media img,
.about-story__image img {
    filter: none !important;
}

@media (max-width: 700px) {
    .hero__overlay,
    .featured-card__overlay,
    .market-card__overlay,
    .commitment__overlay {
        display: none !important;
        background: none !important;
    }

    .featured-card__content,
    .commitment__panel {
        background: transparent !important;
    }
}

/* ============================================================================
   ABOUT KHLG — META MOVED INTO BLUE PANEL / CYAN LINES REMOVED
   Keeps the photo clean and consolidates the company descriptors with the
   supporting copy in the solid blue information panel.
   ============================================================================ */

/* The photo is now image-only; any legacy caption is suppressed. */
#about .about-story__image figcaption,
.about-story__image figcaption {
    display: none !important;
}

/* Remove the previous cyan decorative line completely. */
#about .about-story__message-mark,
.about-story__message-mark {
    display: none !important;
}

/* Company descriptors now live inside the blue message panel. */
#about .about-story__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin: 0 0 16px;
    padding: 0;
    color: rgba(255, 255, 255, 0.88);
    font-family: var(--font-heading);
    font-size: clamp(13px, 1vw, 15px);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.02em;
}

/* No cyan separators, rules, or pseudo-elements between the labels. */
#about .about-story__meta span {
    position: relative;
    display: inline-block;
    padding: 0;
    border: 0;
}

#about .about-story__meta span::before,
#about .about-story__meta span::after {
    content: none !important;
    display: none !important;
}

/* Keep the paragraph comfortably separated from the moved labels. */
#about .about-story__message p {
    margin-top: 0;
}

@media (max-width: 700px) {
    #about .about-story__meta {
        gap: 6px 14px;
        margin-bottom: 14px;
        font-size: 13px;
    }
}

/* ============================================================================
   KHLG — ALL CYAN DECORATIVE LINES REMOVED / FINAL OVERRIDE
   Removes the short cyan/blue accent bars used beside labels and headings.
   Structural borders and the mobile-menu hamburger remain untouched.
   ============================================================================ */

/* Section-label accent bars throughout the page. */
.section-kicker::before,
.section-kicker::after,
.section-kicker--light::before,
.section-kicker--light::after,
#contact.final-cta .section-kicker::before,
#contact.final-cta .section-kicker::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    background: none !important;
}

/* Hero eyebrow accent bars. */
.hero .hero__eyebrow::before,
.hero .hero__eyebrow::after,
.hero__eyebrow::before,
.hero__eyebrow::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    background: none !important;
}

/* About-panel accent mark. */
#about .about-story__message-mark,
.about-story__message-mark {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    background: none !important;
}

/* Remove the colored top accent rules from the About facts. */
#about .about-fact,
#about .about-fact:nth-child(1),
#about .about-fact:nth-child(2),
#about .about-fact:nth-child(3) {
    border-top-color: transparent !important;
    border-top-width: 0 !important;
}

/* Remove cyan navigation underline accents as well. */
.desktop-nav a::after,
.desktop-nav a:hover::after,
.desktop-nav a.is-active::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* ============================================================================
   HERO — OCEAN-ALIGNED COPY / SINGLE CTA / SOFTER HÅFA ADAI
   Keeps the main copy over the open-water portion of the image while retaining
   the global responsive container standard used throughout the page.
   ============================================================================ */

/* Desktop: shift the hero copy toward the open-ocean side of the photograph. */
@media (min-width: 1200px) {
    body .hero > .site-shell.hero__content.hero__content--editorial {
        transform: translateX(clamp(-72px, -4vw, -40px));
    }

    .hero .hero__content h1,
    .hero h1 {
        max-width: 900px;
    }

    .hero .hero__tagline {
        max-width: 760px;
    }
}

/* Keep the eyebrow present but visually quieter than the main heading. */
.hero .hero__eyebrow,
.hero__eyebrow {
    font-size: clamp(17px, 1.05vw, 20px) !important;
    font-weight: 500 !important;
    letter-spacing: 0.075em !important;
    line-height: 1.25 !important;
    text-shadow: 0 2px 8px rgba(20, 38, 52, 0.34) !important;
}

/* There is now only one hero CTA; keep its spacing intentional. */
.hero .hero__actions {
    gap: 0 !important;
}

/* Tablet/mobile: return to the standard shell alignment so the copy never
   pushes outside the safe responsive gutter. */
@media (max-width: 1199.98px) {
    body .hero > .site-shell.hero__content.hero__content--editorial {
        transform: none;
    }
}

@media (max-width: 700px) {
    .hero .hero__eyebrow,
    .hero__eyebrow {
        font-size: 15.5px !important;
        font-weight: 500 !important;
        letter-spacing: 0.065em !important;
    }
}

/* ============================================================================
   HERO — LOCAL TEXT READABILITY SCRIM
   Improves contrast only behind the hero copy. The photograph remains fully
   visible everywhere else; no full-background overlay is used.
   ============================================================================ */

.hero > .site-shell.hero__content.hero__content--editorial {
    isolation: isolate;
}

/* Localized ocean-side scrim behind the copy only. */
.hero > .site-shell.hero__content.hero__content--editorial::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: clamp(-28px, -1.6vw, -12px);
    top: 50%;
    transform: translateY(-50%);
    width: min(940px, 74vw);
    height: min(560px, 74%);
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(18, 44, 65, 0.56) 0%,
        rgba(18, 44, 65, 0.4) 42%,
        rgba(18, 44, 65, 0.18) 72%,
        rgba(18, 44, 65, 0) 100%
    );
}

/* Keep every hero text/control above the local scrim. */
.hero > .site-shell.hero__content.hero__content--editorial > * {
    position: relative;
    z-index: 1;
}

/* Stronger edge separation without making the type look heavy. */
.hero .hero__content h1,
.hero h1 {
    color: #fff !important;
    text-shadow:
        0 2px 3px rgba(9, 28, 43, 0.78),
        0 8px 24px rgba(9, 28, 43, 0.34) !important;
}

.hero .hero__tagline {
    color: rgba(255, 255, 255, 0.98) !important;
    text-shadow:
        0 2px 3px rgba(9, 28, 43, 0.78),
        0 6px 18px rgba(9, 28, 43, 0.34) !important;
}

.hero .hero__regions {
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow: 0 2px 6px rgba(9, 28, 43, 0.7) !important;
}

.hero .hero__eyebrow,
.hero__eyebrow {
    color: rgba(255, 255, 255, 0.94) !important;
    font-weight: 500 !important;
    text-shadow: 0 2px 6px rgba(9, 28, 43, 0.62) !important;
}

/* Keep the remaining CTA crisp without adding a box behind the whole hero. */
.hero .hero__actions .button {
    box-shadow: 0 8px 24px rgba(9, 28, 43, 0.2);
}

@media (max-width: 1199.98px) {
    .hero > .site-shell.hero__content.hero__content--editorial::before {
        left: calc(var(--page-gutter) * -0.55);
        width: min(820px, 92vw);
        height: 72%;
    }
}

@media (max-width: 700px) {
    .hero > .site-shell.hero__content.hero__content--editorial::before {
        left: calc(var(--page-gutter) * -0.45);
        width: calc(100% + (var(--page-gutter) * 0.9));
        height: 78%;
        background: linear-gradient(
            90deg,
            rgba(18, 44, 65, 0.54) 0%,
            rgba(18, 44, 65, 0.34) 64%,
            rgba(18, 44, 65, 0.08) 100%
        );
    }
}

/* ============================================================================
   HERO — SUBTLE READABILITY REFINEMENT
   Replaces the visible rectangular scrim with a soft, feathered local vignette
   behind the copy only. The hero photograph remains untouched elsewhere.
   ============================================================================ */

.hero > .site-shell.hero__content.hero__content--editorial::before {
    left: clamp(-120px, -6vw, -70px) !important;
    top: 52% !important;
    width: min(1120px, 78vw) !important;
    height: min(650px, 82%) !important;
    transform: translateY(-50%) !important;
    border-radius: 50% !important;
    background: radial-gradient(
        ellipse at 34% 50%,
        rgba(12, 35, 53, 0.32) 0%,
        rgba(12, 35, 53, 0.24) 34%,
        rgba(12, 35, 53, 0.13) 56%,
        rgba(12, 35, 53, 0.05) 70%,
        rgba(12, 35, 53, 0) 84%
    ) !important;
    filter: blur(10px) !important;
}

/* Refined text separation: enough contrast without the heavy outlined look. */
.hero .hero__content h1,
.hero h1 {
    text-shadow:
        0 2px 2px rgba(7, 25, 39, 0.46),
        0 6px 18px rgba(7, 25, 39, 0.18) !important;
}

.hero .hero__tagline {
    text-shadow:
        0 1px 2px rgba(7, 25, 39, 0.56),
        0 4px 12px rgba(7, 25, 39, 0.18) !important;
}

.hero .hero__regions,
.hero .hero__eyebrow,
.hero__eyebrow {
    text-shadow: 0 1px 4px rgba(7, 25, 39, 0.48) !important;
}

.hero .hero__actions .button {
    box-shadow: 0 6px 18px rgba(7, 25, 39, 0.14) !important;
}

@media (max-width: 1199.98px) {
    .hero > .site-shell.hero__content.hero__content--editorial::before {
        left: clamp(-90px, -7vw, -48px) !important;
        width: min(960px, 94vw) !important;
        height: 78% !important;
    }
}

@media (max-width: 700px) {
    .hero > .site-shell.hero__content.hero__content--editorial::before {
        left: -18vw !important;
        width: 128vw !important;
        height: 82% !important;
        background: radial-gradient(
            ellipse at 42% 50%,
            rgba(12, 35, 53, 0.34) 0%,
            rgba(12, 35, 53, 0.22) 42%,
            rgba(12, 35, 53, 0.09) 68%,
            rgba(12, 35, 53, 0) 88%
        ) !important;
        filter: blur(8px) !important;
    }
}

/* ============================================================================
   SECTION HEADINGS — STACK SUBTITLES BELOW TITLES
   Standardizes split section headings so supporting copy always follows the
   title vertically instead of sitting in a separate right-hand column.
   ============================================================================ */

.section-heading--split {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: clamp(16px, 1.6vw, 24px) !important;
}

.section-heading--split > div,
.section-heading--split > .section-heading__copy {
    width: 100% !important;
    max-width: none !important;
}

.section-heading--split .section-heading__copy {
    justify-self: start !important;
}

.section-heading--split .section-heading__copy p,
.section-heading--split .section-heading__copy .section-lead {
    max-width: 920px;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Keep title/subtitle spacing compact on smaller screens. */
@media (max-width: 700px) {
    .section-heading--split {
        gap: 14px !important;
    }

    .section-heading--split .section-heading__copy p,
    .section-heading--split .section-heading__copy .section-lead {
        max-width: 100%;
    }
}

/* ============================================================================
   COMMITMENT / MISSION — NATURAL PHOTO, LOCALIZED TEXT READABILITY ONLY
   Removes the full-image overlay and keeps contrast confined to the copy area.
   ============================================================================ */
.commitment__overlay {
    background: transparent !important;
}

.commitment__panel {
    position: relative;
    isolation: isolate;
    max-width: min(760px, 100%);
}

.commitment__panel::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -56px -84px -56px -78px;
    pointer-events: none;
    background: radial-gradient(
        ellipse at 42% 50%,
        rgba(18, 42, 61, 0.3) 0%,
        rgba(18, 42, 61, 0.2) 34%,
        rgba(18, 42, 61, 0.1) 54%,
        rgba(18, 42, 61, 0) 76%
    );
    filter: blur(10px);
}

.commitment .section-kicker,
.commitment blockquote,
.commitment__copy,
.commitment__copy p {
    text-shadow:
        0 2px 4px rgba(16, 30, 42, 0.5),
        0 8px 20px rgba(16, 30, 42, 0.2);
}

@media (max-width: 960px) {
    .commitment__panel::before {
        inset: -42px -48px -42px -48px;
        background: radial-gradient(
            ellipse at 44% 50%,
            rgba(18, 42, 61, 0.34) 0%,
            rgba(18, 42, 61, 0.22) 38%,
            rgba(18, 42, 61, 0.08) 60%,
            rgba(18, 42, 61, 0) 80%
        );
    }
}

@media (max-width: 700px) {
    .commitment__panel::before {
        inset: -28px -24px -28px -24px;
        filter: blur(8px);
    }
}

/* ============================================================================
   INFRASTRUCTURE MARKETS — CLEAN 3-COLUMN GRID
   Desktop: 3 equal columns (6 cards = 2 balanced rows)
   Tablet: 2 columns
   Mobile: 1 column
   ============================================================================ */
.market-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(12px, 1.15vw, 18px) !important;
}

.market-card,
.market-card--wide {
    grid-column: auto !important;
    min-width: 0;
    min-height: clamp(300px, 24vw, 390px);
}

/* Keep all six cards visually consistent in the 3-column layout. */
.market-card--wide {
    grid-column: auto !important;
}

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

@media (max-width: 575.98px) {
    .market-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .market-card,
    .market-card--wide {
        min-height: 300px;
    }
}

/* ============================================================================
   CAREERS — MATCH PHOTO HEIGHT TO CONTENT COLUMN
   Desktop photo stretches to the full height of the right-hand content block.
   ============================================================================ */
@media (min-width: 961px) {
    .careers__grid {
        align-items: stretch !important;
    }

    .careers__media {
        height: auto !important;
        min-height: 0 !important;
        align-self: stretch;
        overflow: hidden;
    }

    .careers__media img {
        display: block;
        width: 100%;
        height: 100% !important;
        object-fit: cover;
        object-position: center;
    }

    .careers__content {
        height: 100%;
    }
}

/* ============================================================================
   HERO — REMOVE CIRCULAR READABILITY SHADOW
   The previous radial vignette created a visible circular dark patch over the
   ocean. Remove the shape entirely and rely on restrained text shadows only.
   ============================================================================ */
.hero > .site-shell.hero__content.hero__content--editorial::before {
    content: none !important;
    display: none !important;
    background: none !important;
    filter: none !important;
    box-shadow: none !important;
}

.hero .hero__content h1,
.hero h1 {
    text-shadow:
        0 2px 3px rgba(7, 25, 39, 0.48),
        0 6px 16px rgba(7, 25, 39, 0.16) !important;
}

.hero .hero__eyebrow,
.hero .hero__tagline,
.hero .hero__regions {
    text-shadow:
        0 1px 2px rgba(7, 25, 39, 0.58),
        0 3px 10px rgba(7, 25, 39, 0.18) !important;
}

/* ============================================================================
   HERO — TEXT-ONLY READABILITY PASS
   Keeps the photograph untouched: no local shape, vignette, or full overlay.
   Readability comes from controlled edge contrast on the type itself.
   ============================================================================ */
.hero > .site-shell.hero__content.hero__content--editorial::before {
    content: none !important;
    display: none !important;
    background: none !important;
    filter: none !important;
}

.hero .hero__content h1,
.hero h1 {
    color: #fff !important;
    -webkit-text-stroke: 0.35px rgba(8, 27, 42, 0.34);
    text-shadow:
        0 1px 1px rgba(6, 22, 35, 0.82),
        0 3px 8px rgba(6, 22, 35, 0.52),
        0 10px 28px rgba(6, 22, 35, 0.28) !important;
}

.hero .hero__tagline {
    color: #fff !important;
    -webkit-text-stroke: 0.2px rgba(8, 27, 42, 0.26);
    text-shadow:
        0 1px 1px rgba(6, 22, 35, 0.88),
        0 3px 8px rgba(6, 22, 35, 0.56),
        0 8px 20px rgba(6, 22, 35, 0.24) !important;
}

.hero .hero__regions,
.hero .hero__eyebrow,
.hero__eyebrow {
    color: rgba(255, 255, 255, 0.98) !important;
    -webkit-text-stroke: 0.15px rgba(8, 27, 42, 0.2);
    text-shadow:
        0 1px 1px rgba(6, 22, 35, 0.9),
        0 3px 8px rgba(6, 22, 35, 0.5) !important;
}

.hero .hero__eyebrow,
.hero__eyebrow {
    font-weight: 500 !important;
}

/* ============================================================================
   SERVICES LIST — DESCRIPTION UNDER SERVICE NAME
   Keep each service title and its supporting copy together in one content column.
   ============================================================================ */
.explore-item {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    column-gap: clamp(16px, 2vw, 26px) !important;
    row-gap: 8px !important;
    align-items: start !important;
    padding-block: clamp(22px, 2.2vw, 30px);
    min-height: 0 !important;
}

.explore-item__icon {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    align-self: start;
}

.explore-item h3 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: end;
    margin: 0 !important;
    max-width: 980px;
}

.explore-item p {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    padding-left: 0 !important;
    max-width: 980px;
    line-height: 1.6;
}

@media (max-width: 620px) {
    .explore-item {
        grid-template-columns: 44px minmax(0, 1fr) !important;
        column-gap: 14px !important;
        row-gap: 6px !important;
        padding-block: 20px !important;
    }

    .explore-item__icon {
        width: 44px;
        height: 44px;
    }

    .explore-item h3,
    .explore-item p {
        grid-column: 2 !important;
    }
}

/* ============================================================================
   SERVICES — USE AVAILABLE SPACE
   Desktop uses a balanced 2-column service grid. Each description stays
   directly under its service name, while tablet/mobile return to one column.
   ============================================================================ */
@media (min-width: 961px) {
    .explore-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: clamp(28px, 3.2vw, 52px) !important;
        row-gap: 0 !important;
        border-top: 0 !important;
    }

    .explore-item {
        grid-template-columns: 52px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        column-gap: 18px !important;
        row-gap: 8px !important;
        align-content: start !important;
        align-items: start !important;
        min-height: clamp(150px, 11vw, 178px) !important;
        padding: clamp(24px, 2.2vw, 34px) clamp(10px, 1.2vw, 18px) !important;
        border-top: 1px solid var(--line) !important;
        border-bottom: 0 !important;
    }

    .explore-item:nth-last-child(-n + 2) {
        border-bottom: 1px solid var(--line) !important;
    }

    .explore-item__icon {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        width: 52px !important;
        height: 52px !important;
        align-self: start !important;
    }

    .explore-item h3 {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        font-size: clamp(22px, 1.65vw, 29px) !important;
        line-height: 1.16 !important;
    }

    .explore-item p {
        grid-column: 2 !important;
        grid-row: 2 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.55 !important;
    }
}

@media (max-width: 960px) {
    .explore-list {
        display: block !important;
        border-top: 1px solid var(--line) !important;
    }

    .explore-item {
        min-height: 0 !important;
        border-top: 0 !important;
        border-bottom: 1px solid var(--line) !important;
    }
}

/* ============================================================================
   HOW WE WORK — MATCH IMAGE HEIGHT TO LEFT CONTENT
   Desktop image now fills the exact grid-row height created by the copy column.
   Tablet/mobile keep their existing responsive image heights.
   ============================================================================ */
@media (min-width: 961px) {
    .approach-feature {
        align-items: stretch !important;
    }

    .approach-feature__copy {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .approach-feature__media {
        position: relative;
        align-self: stretch;
        min-height: 0 !important;
        height: auto !important;
        overflow: hidden;
    }

    .approach-feature__media img {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        object-fit: cover;
        object-position: center;
    }
}

/* ============================================================================
   REVISION 01 — HEADER / HERO / FOOTER DISPLAY FIXES
   Requested: full menu display, visible CTA, corrected hero photo sizing,
   and a footer navigation menu.
   ============================================================================ */

/* HEADER — keep the full desktop navigation usable without crowding. */
.site-header {
    overflow: visible !important;
}

.site-header__inner {
    min-width: 0;
}

@media (min-width: 1281px) and (max-width: 1500px) {
    .site-header__inner {
        gap: clamp(14px, 1.35vw, 22px) !important;
    }

    .brand {
        width: clamp(205px, 14vw, 245px) !important;
    }

    .desktop-nav {
        gap: clamp(13px, 1.2vw, 22px) !important;
    }

    .desktop-nav a {
        font-size: clamp(14px, 1.05vw, 16.5px) !important;
    }

    .site-header__inner > .button--nav {
        min-height: 48px !important;
        padding-inline: 17px !important;
        font-size: 15.5px !important;
        white-space: nowrap !important;
    }
}

/* Collapsed header: retain a visible Contact CTA beside the hamburger. */
@media (max-width: 1280px) and (min-width: 901px) {
    .desktop-nav {
        display: none !important;
    }

    .site-header__inner {
        grid-template-columns: auto minmax(0, 1fr) auto auto !important;
        gap: 14px !important;
    }

    .site-header__inner > .button--nav {
        display: inline-flex !important;
        grid-column: 3;
        justify-self: end;
        min-height: 48px !important;
        padding-inline: 18px !important;
        white-space: nowrap !important;
    }

    .menu-toggle {
        display: block !important;
        grid-column: 4;
        justify-self: end;
    }
}

/* Small screens: CTA moves into the dropdown to preserve header space. */
@media (max-width: 900px) {
    .site-header__inner {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    .site-header__inner > .button--nav {
        display: none !important;
    }

    .menu-toggle {
        display: block !important;
        justify-self: end;
    }
}

/* MOBILE / TABLET DROP-DOWN — always fully visible and scrollable if needed. */
.mobile-nav {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1200 !important;
    max-height: calc(
        100dvh - var(--announcement-height) - var(--header-height)
    ) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 22px 42px rgba(10, 34, 54, 0.24);
}

.mobile-nav[hidden] {
    display: none !important;
}

.mobile-nav__inner {
    gap: 2px;
    padding-block: 18px 24px !important;
}

.mobile-nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 10px 0 !important;
}

/* The last mobile menu item is the CTA, so it cannot disappear visually. */
.mobile-nav a:last-child {
    width: fit-content;
    min-height: 50px;
    margin-top: 12px;
    padding: 10px 20px !important;
    background: #fff;
    color: var(--navy-950) !important;
    font-weight: 700;
}

/* HERO PHOTO SIZING — fill the hero cleanly without stretching the image. */
.hero--editorial {
    min-height: max(
        640px,
        calc(100svh - var(--announcement-height) - var(--header-height))
    ) !important;
}

.hero__media {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

.hero__media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center 50% !important;
    transform: none !important;
}

@media (max-width: 960px) {
    .hero--editorial {
        min-height: max(
            620px,
            calc(100svh - var(--announcement-height) - var(--header-height))
        ) !important;
    }

    .hero__media img {
        object-position: 60% 50% !important;
    }
}

@media (max-width: 576px) {
    .hero--editorial {
        min-height: max(
            600px,
            calc(100svh - var(--announcement-height) - var(--header-height))
        ) !important;
    }

    .hero__media img {
        object-position: 62% 50% !important;
    }
}

/* FOOTER — shared menu/link behavior.
   Desktop information-column spacing is defined in the final desktop footer
   block below so there is only one desktop spacing rule to maintain. */
.site-footer__grid {
    align-items: start;
}

.site-footer__menu nav {
    display: grid;
    gap: 9px;
}

.site-footer__menu a {
    display: inline-flex;
    width: fit-content;
    line-height: 1.45;
}

.site-footer__menu a:hover,
.site-footer__menu a:focus-visible {
    color: #fff;
}

@media (max-width: 1180px) {
    .site-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .site-footer__brand {
        grid-column: 1 / -1;
        max-width: 720px;
    }
}

@media (max-width: 620px) {
    .site-footer__grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .site-footer__brand {
        grid-column: auto;
    }
}

/* ============================================================================
   REVISION 2 — SLIGHTLY MORE VERTICAL SPACE BETWEEN SECTIONS
   Adds a modest amount of breathing room to the top and bottom of standard
   content sections without changing their internal grids or horizontal sizing.
   ============================================================================ */
.section-pad {
    padding-block: clamp(58px, 5.8vw, 92px) !important;
}

@media (max-width: 960px) {
    .section-pad {
        padding-block: clamp(56px, 7vw, 76px) !important;
    }
}

@media (max-width: 700px) {
    .section-pad {
        padding-block: clamp(50px, 8vw, 62px) !important;
    }
}

@media (max-width: 420px) {
    .section-pad {
        padding-block: 48px !important;
    }
}

/* ============================================================================
   REVISION 03 — HEADER / FOOTER BRANDING + ANNOUNCEMENT BAR
   - Larger, visually matched KHLG logos in header and footer
   - More vertical breathing room in the header
   - Midnight navy header/footer with intentional KHLG blue accents
   - Lighter aqua "Website Coming Soon" announcement treatment
   ============================================================================ */
:root {
    --khlg-midnight: #173869;
    --khlg-deep-navy: #081640;
    --khlg-logo-blue: #30618c;
    --khlg-aqua-soft: #d2eff7;
    --announcement-height: 44px;
    --header-height: 112px;
}

/* Announcement bar: lighter, quieter and integrated with the header system. */
.coming-soon {
    min-height: var(--announcement-height) !important;
    height: var(--announcement-height) !important;
    padding: 7px var(--page-gutter) !important;
    background: rgba(210, 239, 247, 0.96) !important;
    color: var(--khlg-midnight) !important;
    border-bottom: 1px solid rgba(48, 97, 140, 0.24) !important;
    font-size: clamp(13.5px, 0.95vw, 16px) !important;
    font-weight: 700 !important;
    letter-spacing: 0.075em !important;
    text-transform: uppercase !important;
}

/* Header: deeper brand color, larger logo and more vertical breathing room. */
.site-header {
    background: rgba(23, 56, 105, 0.985) !important;
    border-bottom: 2px solid var(--khlg-logo-blue) !important;
    box-shadow: 0 10px 26px rgba(8, 22, 64, 0.14) !important;
}

.site-header.is-scrolled {
    background: rgba(23, 56, 105, 0.99) !important;
}

.site-header__inner {
    min-height: var(--header-height) !important;
    padding-block: 14px !important;
    gap: clamp(18px, 1.8vw, 30px) !important;
}

.brand {
    width: clamp(260px, 17vw, 300px) !important;
    flex-shrink: 0;
}

.brand img {
    width: 100% !important;
    max-height: 88px !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.desktop-nav a {
    color: rgba(255, 255, 255, 0.86) !important;
}

.desktop-nav a:hover,
.desktop-nav a.is-active {
    color: #fff !important;
}

.desktop-nav a::after {
    background: #7ed4e8 !important;
}

.site-header__inner > .button--nav {
    background: #fff !important;
    border-color: #fff !important;
    color: var(--khlg-deep-navy) !important;
}

.site-header__inner > .button--nav:hover {
    background: var(--khlg-aqua-soft) !important;
    border-color: var(--khlg-aqua-soft) !important;
}

.menu-toggle {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.mobile-nav {
    background: var(--khlg-midnight) !important;
    border-top-color: rgba(126, 212, 232, 0.24) !important;
}

.mobile-nav a:last-child {
    background: #fff !important;
    color: var(--khlg-deep-navy) !important;
}

/* Footer: use the same midnight navy as the header for a deliberate bookend. */
.site-footer {
    background: var(--khlg-midnight) !important;
    color: #fff !important;
    border-top: 2px solid var(--khlg-logo-blue) !important;
}

.site-footer__brand img {
    width: clamp(260px, 18vw, 300px) !important;
    max-width: 100% !important;
    height: auto !important;
}

.site-footer__label {
    color: #a4deee !important;
}

.site-footer p,
.site-footer a {
    color: rgba(255, 255, 255, 0.78) !important;
}

.site-footer a:hover,
.site-footer a:focus-visible {
    color: #fff !important;
}

.site-footer__bottom {
    border-top-color: rgba(126, 212, 232, 0.22) !important;
    color: rgba(255, 255, 255, 0.62) !important;
}

/* Keep hero sizing aware of the larger header so the image never slides under it. */
.hero--editorial {
    min-height: max(
        640px,
        calc(100svh - var(--announcement-height) - var(--header-height))
    ) !important;
}

main section[id] {
    scroll-margin-top: calc(
        var(--announcement-height) + var(--header-height) + 18px
    ) !important;
}

@media (max-width: 1280px) {
    :root {
        --header-height: 104px;
    }

    .brand {
        width: clamp(235px, 23vw, 280px) !important;
    }

    .brand img {
        max-height: 82px !important;
    }
}

@media (max-width: 900px) {
    :root {
        --announcement-height: 42px;
        --header-height: 96px;
    }

    .site-header__inner {
        padding-block: 12px !important;
    }

    .brand {
        width: clamp(220px, 32vw, 260px) !important;
    }

    .brand img {
        max-height: 74px !important;
    }

    .site-footer__brand img {
        width: clamp(230px, 34vw, 275px) !important;
    }
}

@media (max-width: 576px) {
    :root {
        --announcement-height: 40px;
        --header-height: 86px;
    }

    .coming-soon {
        font-size: 12.5px !important;
        letter-spacing: 0.055em !important;
    }

    .site-header__inner {
        padding-block: 10px !important;
    }

    .brand {
        width: clamp(190px, 55vw, 225px) !important;
    }

    .brand img {
        max-height: 66px !important;
    }

    .site-footer__brand img {
        width: clamp(210px, 62vw, 250px) !important;
    }
}

/* ============================================================================
   HERO REVISION — PHOTO-FIRST COMPOSITION
   Removes all color overlays, reveals more of the right side of the photograph,
   places the welcome line in the sky, and keeps the main identity over the ocean.
   ============================================================================ */

/* Keep the hero photograph natural: no blue veil, glow, or local scrim. */
.hero .hero__overlay,
.hero__overlay,
.hero::after,
.hero--editorial::after,
.hero > .site-shell.hero__content.hero__content--editorial::before {
    display: none !important;
    content: none !important;
    background: none !important;
    filter: none !important;
}

/* Crop more from the left while retaining more of the red-roof/right-side detail. */
.hero__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 62% 50% !important;
    filter: none !important;
    transform: scale(1.055) !important;
    transform-origin: 62% 50% !important;
}

/* Use the full hero height deliberately: welcome in the clouds, identity in ocean,
   CTA below the identity, and region line nearest the bottom edge. */
.hero,
.hero--editorial {
    align-items: stretch !important;
}

.hero > .site-shell.hero__content.hero__content--editorial {
    min-height: inherit !important;
    display: grid !important;
    grid-template-rows: auto minmax(40px, 1fr) auto auto auto !important;
    align-content: stretch !important;
    align-items: end !important;
    padding-top: clamp(34px, 4.8vh, 68px) !important;
    padding-bottom: clamp(24px, 3.2vh, 42px) !important;
}

/* Håfa Adai — lighter, warmer, and intentionally more prominent than KHLG. */
.hero .hero__eyebrow,
.hero__eyebrow {
    grid-row: 1 !important;
    align-self: start !important;
    width: min(100%, 1180px) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--font-heading) !important;
    font-size: clamp(58px, 5.3vw, 94px) !important;
    font-weight: 300 !important;
    line-height: 0.98 !important;
    letter-spacing: -0.025em !important;
    text-transform: none !important;
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow:
        0 2px 2px rgba(8, 22, 64, 0.48),
        0 8px 24px rgba(8, 22, 64, 0.2) !important;
}

.hero .hero__eyebrow::before,
.hero .hero__eyebrow::after,
.hero__eyebrow::before,
.hero__eyebrow::after {
    display: none !important;
    content: none !important;
}

/* Group the company name and tagline so they stay together over the blue water. */
.hero__identity {
    grid-row: 3 !important;
    align-self: end !important;
    max-width: min(820px, 62vw);
    margin: 0 0 clamp(18px, 2vh, 28px) !important;
}

.hero .hero__content h1,
.hero h1 {
    width: auto !important;
    max-width: 760px !important;
    margin: 0 !important;
    font-size: clamp(50px, 4.15vw, 74px) !important;
    font-weight: 500 !important;
    line-height: 0.98 !important;
    letter-spacing: -0.035em !important;
    color: #fff !important;
    text-shadow:
        0 2px 2px rgba(8, 22, 64, 0.62),
        0 8px 22px rgba(8, 22, 64, 0.24) !important;
}

/* Preserve the supporting line's established visual size while moving the group. */
.hero .hero__tagline,
.hero__tagline {
    width: 100% !important;
    max-width: 760px !important;
    margin: clamp(14px, 1.6vh, 22px) 0 0 !important;
    font-size: clamp(26px, 1.95vw, 36px) !important;
    font-weight: 400 !important;
    line-height: 1.34 !important;
    color: #fff !important;
    text-shadow:
        0 2px 2px rgba(8, 22, 64, 0.64),
        0 6px 18px rgba(8, 22, 64, 0.22) !important;
}

/* Keep a single section CTA and place it directly below the identity group. */
.hero .hero__actions,
.hero__actions {
    grid-row: 4 !important;
    margin: 0 0 clamp(18px, 2.2vh, 30px) !important;
    align-self: end !important;
}

.hero .hero__actions .button,
.hero__actions .button {
    min-height: 56px !important;
    padding-inline: 26px !important;
    font-size: 18px !important;
}

/* Regional footprint becomes a stronger bottom signature. */
.hero .hero__regions,
.hero__regions {
    grid-row: 5 !important;
    align-self: end !important;
    margin: 0 !important;
    gap: clamp(20px, 2vw, 34px) !important;
    font-size: clamp(18px, 1.18vw, 22px) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.11em !important;
    color: rgba(255, 255, 255, 0.98) !important;
    text-shadow:
        0 2px 2px rgba(8, 22, 64, 0.68),
        0 5px 14px rgba(8, 22, 64, 0.22) !important;
}

.hero .hero__regions span,
.hero__regions span {
    width: 5px !important;
    height: 5px !important;
    flex: 0 0 5px !important;
    background: #fff !important;
}

/* Tablet: retain the hierarchy while reducing vertical competition. */
@media (max-width: 960px) {
    .hero__media img {
        object-position: 58% 50% !important;
        transform: scale(1.035) !important;
        transform-origin: 58% 50% !important;
    }

    .hero > .site-shell.hero__content.hero__content--editorial {
        grid-template-rows: auto minmax(30px, 1fr) auto auto auto !important;
        padding-top: 32px !important;
        padding-bottom: 28px !important;
    }

    .hero .hero__eyebrow,
    .hero__eyebrow {
        font-size: clamp(46px, 7.2vw, 68px) !important;
    }

    .hero__identity {
        max-width: 76vw;
    }

    .hero .hero__content h1,
    .hero h1 {
        font-size: clamp(44px, 6.2vw, 60px) !important;
    }

    .hero .hero__tagline,
    .hero__tagline {
        font-size: clamp(23px, 3vw, 30px) !important;
    }

    .hero .hero__regions,
    .hero__regions {
        gap: 18px !important;
        font-size: 16px !important;
    }
}

/* Mobile: preserve the same composition without forcing the photo or text off-screen. */
@media (max-width: 575.98px) {
    .hero__media img {
        object-position: 56% 50% !important;
        transform: scale(1.02) !important;
        transform-origin: 56% 50% !important;
    }

    .hero > .site-shell.hero__content.hero__content--editorial {
        grid-template-rows: auto minmax(24px, 1fr) auto auto auto !important;
        padding-top: 26px !important;
        padding-bottom: 22px !important;
    }

    .hero .hero__eyebrow,
    .hero__eyebrow {
        font-size: clamp(36px, 10.5vw, 48px) !important;
        line-height: 1.02 !important;
    }

    .hero__identity {
        max-width: 100%;
        margin-bottom: 16px !important;
    }

    .hero .hero__content h1,
    .hero h1 {
        max-width: 100% !important;
        font-size: clamp(34px, 9vw, 44px) !important;
    }

    .hero .hero__tagline,
    .hero__tagline {
        max-width: 100% !important;
        margin-top: 12px !important;
        font-size: clamp(20px, 5.6vw, 25px) !important;
        line-height: 1.3 !important;
    }

    .hero .hero__actions,
    .hero__actions {
        margin-bottom: 16px !important;
    }

    .hero .hero__actions .button,
    .hero__actions .button {
        width: 100% !important;
        min-height: 52px !important;
        padding-inline: 18px !important;
        font-size: 16px !important;
    }

    .hero .hero__regions,
    .hero__regions {
        gap: 11px !important;
        font-size: 13.5px !important;
        letter-spacing: 0.065em !important;
    }

    .hero .hero__regions span,
    .hero__regions span {
        width: 4px !important;
        height: 4px !important;
        flex-basis: 4px !important;
    }
}

/* Final composition is handled by the grid/crop above, so remove the legacy left shift. */
body .hero > .site-shell.hero__content.hero__content--editorial {
    transform: none !important;
}

/* ============================================================================
   HERO PHOTO CROP — PRESERVED FROM LATEST REVISION
   Text/layout has been reverted to the previous version; only the improved
   natural photo crop from the latest pass is retained.
   ============================================================================ */
.hero .hero__overlay,
.hero__overlay,
.hero::after,
.hero--editorial::after,
.hero > .site-shell.hero__content.hero__content--editorial::before {
    display: none !important;
    content: none !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

.hero__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 59% 50% !important;
    transform: scale(1.025) !important;
    transform-origin: 59% 50% !important;
    filter: none !important;
}

@media (max-width: 960px) {
    .hero__media img {
        object-position: 59% 50% !important;
        transform: scale(1.025) !important;
        transform-origin: 59% 50% !important;
    }
}

@media (max-width: 700px) {
    .hero__media img {
        object-position: 64% 50% !important;
        transform: scale(1.02) !important;
        transform-origin: 64% 50% !important;
    }
}

/* ============================================================================
   HERO — RESTORE PREVIOUS TEXT + CTA POSITION
   Restores the original stacked hero hierarchy from before the experimental
   sky/ocean split: eyebrow, large KHLG name, tagline, regions, then one CTA.
   The newer natural photo crop and no-overlay treatment remain unchanged.
   ============================================================================ */
.hero,
.hero--editorial {
    align-items: center !important;
}

.hero > .site-shell.hero__content.hero__content--editorial {
    display: block !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-inline: var(--page-gutter) !important;
    padding-block: clamp(48px, 7vh, 88px) !important;
    align-self: center !important;
}

/* Remove all positioning left over from the experimental distributed layout. */
.hero__identity {
    display: contents !important;
    max-width: none !important;
    margin: 0 !important;
}

.hero .hero__eyebrow,
.hero__eyebrow {
    display: block !important;
    width: fit-content !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    font-family: var(--font-heading) !important;
    font-size: clamp(17px, 1.05vw, 20px) !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.075em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.98) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: 0 2px 8px rgba(8, 22, 64, 0.44) !important;
    grid-row: auto !important;
    align-self: auto !important;
}

.hero .hero__content h1,
.hero h1 {
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 !important;
    font-size: clamp(79.2px, 8.25vw, 176px) !important;
    font-weight: 500 !important;
    line-height: 1.02 !important;
    letter-spacing: -0.045em !important;
    color: #fff !important;
    text-shadow:
        0 2px 2px rgba(6, 22, 35, 0.86),
        0 7px 20px rgba(6, 22, 35, 0.28) !important;
    grid-row: auto !important;
    align-self: auto !important;
}

.hero .hero__tagline,
.hero__tagline {
    width: 100% !important;
    max-width: 62ch !important;
    margin: 24px 0 16px !important;
    font-size: clamp(26.4px, 1.98vw, 37.4px) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: rgba(255, 255, 255, 0.98) !important;
    text-shadow:
        0 2px 2px rgba(6, 22, 35, 0.82),
        0 5px 14px rgba(6, 22, 35, 0.24) !important;
    grid-row: auto !important;
    align-self: auto !important;
}

.hero .hero__regions,
.hero__regions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    margin: 0 !important;
    gap: 14px !important;
    font-size: clamp(16.5px, 0.99vw, 19.8px) !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.08em !important;
    color: rgba(255, 255, 255, 0.96) !important;
    text-shadow: 0 2px 6px rgba(6, 22, 35, 0.72) !important;
    grid-row: auto !important;
    align-self: auto !important;
}

.hero .hero__regions span,
.hero__regions span {
    width: 4px !important;
    height: 4px !important;
    flex: 0 0 4px !important;
    background: #fff !important;
}

/* CTA returns below the regions, matching the earlier hero arrangement. */
.hero .hero__actions,
.hero__actions {
    display: flex !important;
    align-items: center !important;
    margin: 28px 0 0 !important;
    gap: 0 !important;
    grid-row: auto !important;
    align-self: auto !important;
}

.hero .hero__actions .button,
.hero__actions .button {
    width: auto !important;
    min-height: 58px !important;
    padding: 12px 24px !important;
    font-size: 19.8px !important;
}

/* Desktop position from the version before the experimental hero split. */
@media (min-width: 1200px) {
    body .hero > .site-shell.hero__content.hero__content--editorial {
        transform: translateX(clamp(-72px, -4vw, -40px)) !important;
    }
}

@media (max-width: 1199.98px) {
    body .hero > .site-shell.hero__content.hero__content--editorial {
        transform: none !important;
    }
}

@media (max-width: 820px) {
    .hero > .site-shell.hero__content.hero__content--editorial {
        padding-block: 48px !important;
    }

    .hero .hero__content h1,
    .hero h1 {
        font-size: clamp(55px, 9.35vw, 77px) !important;
    }

    .hero .hero__tagline,
    .hero__tagline {
        margin: 22px 0 16px !important;
        font-size: clamp(26.4px, 3.63vw, 30.8px) !important;
    }

    .hero .hero__eyebrow,
    .hero__eyebrow {
        margin-bottom: 16px !important;
        font-size: 18.7px !important;
    }

    .hero .hero__regions,
    .hero__regions {
        gap: 12px !important;
        font-size: 16.5px !important;
    }

    .hero .hero__actions,
    .hero__actions {
        margin-top: 24px !important;
    }
}

@media (max-width: 560px) {
    .hero > .site-shell.hero__content.hero__content--editorial {
        padding-block: 40px !important;
    }

    .hero .hero__content h1,
    .hero h1 {
        font-size: clamp(37.4px, 10.78vw, 59.4px) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.035em !important;
    }

    .hero .hero__eyebrow,
    .hero__eyebrow {
        font-size: 15.4px !important;
    }

    .hero .hero__tagline,
    .hero__tagline {
        margin: 20px 0 16px !important;
        font-size: 24.2px !important;
    }

    .hero .hero__regions,
    .hero__regions {
        gap: 10px !important;
        font-size: 14.3px !important;
    }

    .hero .hero__actions,
    .hero__actions {
        margin-top: 24px !important;
    }

    .hero .hero__actions .button,
    .hero__actions .button {
        width: auto !important;
        max-width: 100% !important;
        min-height: 56px !important;
        padding: 12px 20px !important;
        font-size: 18.7px !important;
    }
}

/* ============================================================================
   HERO — RESTORE GLOBAL SHELL POSITION
   Removes the temporary full-width/left-shifted hero positioning so the hero
   copy lines up with the same global content margin used by every section.
   ============================================================================ */
body .hero > .site-shell.hero__content.hero__content--editorial {
    width: min(
        calc(100% - (var(--page-gutter) * 2)),
        var(--container-max)
    ) !important;
    max-width: var(--container-max) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    transform: none !important;
}

/* Keep the original vertically centered hero composition. */
.hero,
.hero--editorial {
    align-items: center !important;
}

.hero > .site-shell.hero__content.hero__content--editorial {
    align-self: center !important;
    padding-block: clamp(64px, 9vh, 112px) !important;
}

@media (max-width: 820px) {
    body .hero > .site-shell.hero__content.hero__content--editorial {
        width: calc(100% - (var(--page-gutter) * 2)) !important;
        max-width: var(--container-max) !important;
        margin-inline: auto !important;
        padding-inline: 0 !important;
        transform: none !important;
    }

    .hero > .site-shell.hero__content.hero__content--editorial {
        padding-block: 48px !important;
    }
}

@media (max-width: 575.98px) {
    body .hero > .site-shell.hero__content.hero__content--editorial {
        width: calc(100% - (var(--page-gutter) * 2)) !important;
        max-width: none !important;
    }
}

/* ============================================================================
   CONNECT WITH US — SOLID COLOR CONSISTENCY
   Removes the light-to-dark gradient and keeps the CTA section on one clear
   KHLG brand tone before the darker midnight footer.
   ============================================================================ */
#contact.final-cta {
    background: #30618c !important;
    color: #ffffff !important;
    border-top: 1px solid rgba(8, 22, 64, 0.12) !important;
    border-bottom: 1px solid rgba(8, 22, 64, 0.22) !important;
    box-shadow: none !important;
}

#contact.final-cta::before,
#contact.final-cta::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

#contact.final-cta h2,
#contact.final-cta .section-kicker,
#contact.final-cta .section-kicker--light {
    color: #ffffff !important;
}

#contact.final-cta .section-kicker::before,
#contact.final-cta .section-kicker::after {
    content: none !important;
    display: none !important;
}

#contact.final-cta .button,
#contact.final-cta .button--light,
#contact.final-cta .button--large {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #173869 !important;
    box-shadow: none !important;
}

#contact.final-cta .button:hover,
#contact.final-cta .button--light:hover,
#contact.final-cta .button--large:hover {
    background: #d2eff7 !important;
    border-color: #d2eff7 !important;
    color: #081640 !important;
}

/* ============================================================================
   HERO IMAGE — USE PRE-CROPPED IMAGE AT NATURAL SCALE
   The source image is already cropped for the hero, so remove all CSS zooming
   and keep it centered consistently across desktop, tablet, and mobile.
   ============================================================================ */
.hero__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    transform-origin: center center !important;
    filter: none !important;
}

@media (max-width: 960px) {
    .hero__media img {
        object-position: center center !important;
        transform: none !important;
        transform-origin: center center !important;
    }
}

@media (max-width: 700px) {
    .hero__media img {
        object-position: center center !important;
        transform: none !important;
        transform-origin: center center !important;
    }
}

/* ============================================================================
   HERO — HÅFA ADAI SIZE MATCHES TAGLINE
   Keeps the welcome line and "Building Trust..." at the same responsive scale.
   ============================================================================ */
.hero .hero__eyebrow,
.hero__eyebrow {
    font-size: clamp(26.4px, 1.98vw, 37.4px) !important;
    line-height: 1.4 !important;
}

@media (max-width: 820px) {
    .hero .hero__eyebrow,
    .hero__eyebrow {
        font-size: clamp(26.4px, 3.63vw, 30.8px) !important;
    }
}

@media (max-width: 560px) {
    .hero .hero__eyebrow,
    .hero__eyebrow {
        font-size: 24.2px !important;
    }
}

/* ============================================================================
   HERO TYPOGRAPHY — LIGHTER HÅFA ADAI + SMALLER KHLG WORDMARK
   Håfa Adai is intentionally the larger, warmer welcome line while the company
   name is reduced so the hierarchy feels more balanced over the photograph.
   ============================================================================ */
.hero .hero__eyebrow,
.hero__eyebrow {
    font-family: "Barlow", var(--font-heading), sans-serif !important;
    font-size: clamp(52px, 4.6vw, 86px) !important;
    font-weight: 300 !important;
    line-height: 1.02 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    margin-bottom: clamp(18px, 2vh, 28px) !important;
    color: rgba(255, 255, 255, 0.98) !important;
    text-shadow:
        0 2px 2px rgba(8, 22, 64, 0.42),
        0 7px 20px rgba(8, 22, 64, 0.18) !important;
}

.hero .hero__content h1,
.hero h1 {
    max-width: 980px !important;
    font-size: clamp(48px, 4.2vw, 78px) !important;
    font-weight: 500 !important;
    line-height: 1.01 !important;
    letter-spacing: -0.035em !important;
}

@media (max-width: 960px) {
    .hero .hero__eyebrow,
    .hero__eyebrow {
        font-size: clamp(44px, 6.4vw, 62px) !important;
    }

    .hero .hero__content h1,
    .hero h1 {
        font-size: clamp(40px, 5.8vw, 56px) !important;
    }
}

@media (max-width: 560px) {
    .hero .hero__eyebrow,
    .hero__eyebrow {
        font-size: clamp(34px, 9vw, 44px) !important;
        margin-bottom: 16px !important;
    }

    .hero .hero__content h1,
    .hero h1 {
        font-size: clamp(31px, 8.2vw, 40px) !important;
        line-height: 1.04 !important;
    }
}

/* ============================================================================
   ABOUT INTRO — MATCH LEAD PARAGRAPH TO BODY COPY
   Keeps the opening KHLG paragraph the same size as the "Established in 2019"
   paragraph so both read as one consistent body-text block.
   ============================================================================ */
#about .about-story__intro .section-lead {
    font-size: var(--type-body) !important;
    line-height: 1.6 !important;
}

/* ============================================================================
   FEATURED CAPABILITIES — EQUAL IMAGE / CARD SIZING
   All three capability cards use the same width and height on desktop.
   ============================================================================ */
@media (min-width: 961px) {
    .featured-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: stretch !important;
    }

    .featured-card,
    .featured-card--large {
        grid-column: auto !important;
        min-height: clamp(380px, 29vw, 460px) !important;
        height: 100% !important;
    }

    .featured-card img,
    .featured-card--large img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

@media (max-width: 960px) {
    .featured-grid {
        grid-template-columns: 1fr !important;
    }

    .featured-card,
    .featured-card--large {
        grid-column: auto !important;
        min-height: clamp(320px, 58vw, 460px) !important;
    }
}

/* ============================================================================
   COMMITMENT — NAVY TEXT BACKDROP / FINAL OVERRIDE
   Adds contrast only behind the mission copy so the photograph remains visible.
   ============================================================================ */
.commitment__panel {
    background: rgba(23, 56, 105, 0.84) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 18px 48px rgba(8, 22, 64, 0.18) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

.commitment__panel .section-kicker,
.commitment__panel blockquote,
.commitment__panel .commitment__copy,
.commitment__panel .commitment__copy p {
    color: #ffffff !important;
}

@media (max-width: 700px) {
    .commitment__panel {
        background: rgba(23, 56, 105, 0.9) !important;
    }
}

/* ============================================================================
   FOOTER LOGO — MATCH HEADER LOGO SIZE
   Uses the exact same responsive width scale as the header brand.
   ============================================================================ */
.site-footer__brand img {
    width: clamp(260px, 17vw, 300px) !important;
    max-width: 100% !important;
    height: auto !important;
}

@media (max-width: 1280px) {
    .site-footer__brand img {
        width: clamp(235px, 23vw, 280px) !important;
    }
}

@media (max-width: 900px) {
    .site-footer__brand img {
        width: clamp(220px, 32vw, 260px) !important;
    }
}

@media (max-width: 576px) {
    .site-footer__brand img {
        width: clamp(190px, 55vw, 225px) !important;
    }
}

/* ============================================================================
   SERVICES — COMPACT, CONSISTENT RHYTHM
   Tightens each service row while keeping both desktop columns aligned and
   maintaining the icon → title → description hierarchy.
   ============================================================================ */
.explore-item {
    padding: 16px 0 !important;
    column-gap: 14px !important;
    row-gap: 4px !important;
    align-content: start !important;
}

.explore-item__icon {
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
}

.explore-item h3 {
    margin: 0 !important;
    line-height: 1.2 !important;
}

.explore-item p {
    margin: 0 !important;
    line-height: 1.45 !important;
}

@media (min-width: 961px) {
    .explore-list {
        column-gap: clamp(30px, 3vw, 44px) !important;
        row-gap: 0 !important;
        align-items: stretch !important;
    }

    .explore-item {
        min-height: 128px !important;
        height: 100% !important;
        border-top: 1px solid var(--line) !important;
        border-bottom: 0 !important;
    }

    .explore-item:nth-last-child(-n + 2) {
        border-bottom: 1px solid var(--line) !important;
    }
}

@media (max-width: 960px) {
    .explore-item {
        padding: 16px 0 !important;
        min-height: 0 !important;
    }
}

@media (max-width: 575.98px) {
    .explore-item {
        grid-template-columns: 42px minmax(0, 1fr) !important;
        column-gap: 12px !important;
        row-gap: 4px !important;
        padding: 14px 0 !important;
    }

    .explore-item__icon {
        width: 42px !important;
        height: 42px !important;
    }
}

/* ============================================================================
   FINAL LOGO SIZE SYNC — HEADER + FOOTER
   Forces both KHLG logos to use the exact same responsive dimensions.
   ============================================================================ */
.brand img,
.site-footer__brand img {
    width: clamp(260px, 17vw, 300px) !important;
    max-width: 100% !important;
    max-height: 88px !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: left center !important;
}

@media (max-width: 1280px) {
    .brand img,
    .site-footer__brand img {
        width: clamp(235px, 23vw, 280px) !important;
        max-height: 82px !important;
    }
}

@media (max-width: 900px) {
    .brand img,
    .site-footer__brand img {
        width: clamp(220px, 32vw, 260px) !important;
        max-height: 74px !important;
    }
}

@media (max-width: 576px) {
    .brand img,
    .site-footer__brand img {
        width: clamp(190px, 55vw, 225px) !important;
        max-height: 66px !important;
    }
}

/* ============================================================================
   CONNECT WITH US — BETTER TRANSITION INTO FOOTER
   Uses the approved old KHLG blue as a quieter bridge into the Midnight Navy
   footer. Both sections remain solid colors for a clean, consistent transition.
   ============================================================================ */
#contact.final-cta {
    background: #2d5273 !important;
    color: #ffffff !important;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(164, 222, 238, 0.16) !important;
}

#contact.final-cta h2,
#contact.final-cta .section-kicker,
#contact.final-cta .section-kicker--light {
    color: #ffffff !important;
}

#contact.final-cta .button,
#contact.final-cta .button--light,
#contact.final-cta .button--large {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #173869 !important;
}

/* Keep the footer darker so the transition reads as intentional depth. */
.site-footer {
    background: #173869 !important;
    border-top: 0 !important;
}

/* ============================================================================
   CONNECT WITH US — LIGHT TRANSITION FROM CAREERS
   Uses a soft KHLG aqua so the CTA flows naturally from the light Careers
   section while still creating a clear handoff into the Midnight Navy footer.
   ============================================================================ */
#contact.final-cta {
    background: #d2eff7 !important;
    color: #173869 !important;
    border-top: 1px solid rgba(48, 97, 140, 0.12) !important;
    border-bottom: 1px solid rgba(23, 56, 105, 0.16) !important;
}

#contact.final-cta h2,
#contact.final-cta .section-kicker,
#contact.final-cta .section-kicker--light {
    color: #173869 !important;
}

#contact.final-cta .button,
#contact.final-cta .button--light,
#contact.final-cta .button--large {
    background: #173869 !important;
    border-color: #173869 !important;
    color: #ffffff !important;
}

#contact.final-cta .button:hover,
#contact.final-cta .button--light:hover,
#contact.final-cta .button--large:hover {
    background: #30618c !important;
    border-color: #30618c !important;
    color: #ffffff !important;
}

/* ============================================================================
   CONNECT WITH US — SOFT BLEND FROM CAREERS
   Blends the light Careers surface into the aqua CTA instead of a hard edge.
   ============================================================================ */
#contact.final-cta {
    background: linear-gradient(
        to bottom,
        #f2f2f2 0%,
        #e8f2f4 4%,
        #ddf0f4 8%,
        #d2eff7 14%,
        #d2eff7 100%
    ) !important;
    border-top: 0 !important;
}

/* ============================================================================
   CONNECT WITH US — LONGER, SOFTER CAREERS-TO-CTA BLEND
   Extends the transition through more of the CTA height so the change from the
   light Careers surface into KHLG aqua reads as a gradual tonal shift.
   ============================================================================ */
#contact.final-cta {
    background: linear-gradient(
        180deg,
        #f2f2f2 0%,
        #eef5f6 14%,
        #e8f4f6 28%,
        #e1f2f5 42%,
        #daf0f6 56%,
        #d5eff7 70%,
        #d2eff7 82%,
        #d2eff7 100%
    ) !important;
    border-top: 0 !important;
}

/* ============================================================================
   CAREERS → CONTACT — SUBTLE TWO-COLOR HANDOFF
   Keep both sections on their own solid colors and soften only the seam between
   them so the transition does not read as a visible gradient band.
   ============================================================================ */
.careers {
    background: #f2f2f2 !important;
}

#contact.final-cta {
    position: relative;
    background: #d2eff7 !important;
    border-top: 0 !important;
}

#contact.final-cta::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 28px;
    pointer-events: none;
    background: linear-gradient(to bottom, #f2f2f2 0%, #d2eff7 100%) !important;
}

#contact.final-cta > .site-shell {
    position: relative;
    z-index: 1;
}

@media (max-width: 700px) {
    #contact.final-cta::before {
        height: 20px;
    }
}

/* ============================================================================
   CAREERS → CONTACT — NATURAL TWO-SECTION BLEND
   Blend the bottom of the Careers section into the Contact aqua, then let the
   Contact section begin on its true solid color. This removes the visible band.
   ============================================================================ */
.careers,
.careers--clean {
    position: relative;
    background: linear-gradient(
        to bottom,
        #f2f2f2 0%,
        #f2f2f2 72%,
        #eef5f6 82%,
        #e5f3f5 89%,
        #dcf1f5 95%,
        #d2eff7 100%
    ) !important;
}

#contact.final-cta {
    background: #d2eff7 !important;
    border-top: 0 !important;
}

#contact.final-cta::before,
#contact.final-cta::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

@media (max-width: 700px) {
    .careers,
    .careers--clean {
        background: linear-gradient(
            to bottom,
            #f2f2f2 0%,
            #f2f2f2 78%,
            #eaf4f6 90%,
            #d2eff7 100%
        ) !important;
    }
}

/* ============================================================================
   COMMITMENT — SOFTER NAVY TEXT BACKDROP
   Reduces the panel strength so more of the photo shows through while keeping
   the white mission copy readable.
   ============================================================================ */
.commitment__panel {
    background: rgba(23, 56, 105, 0.62) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 14px 36px rgba(8, 22, 64, 0.1) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
}

@media (max-width: 700px) {
    .commitment__panel {
        background: rgba(23, 56, 105, 0.7) !important;
    }
}

/* ============================================================================
   COMMITMENT — EXTRA-SOFT TEXT BACKDROP
   Keeps just enough navy behind the copy for readability without feeling like
   a heavy block over the photograph.
   ============================================================================ */
.commitment__panel {
    background: rgba(23, 56, 105, 0.4) !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: blur(1px) !important;
    -webkit-backdrop-filter: blur(1px) !important;
}

.commitment__panel .section-kicker,
.commitment__panel blockquote,
.commitment__panel .commitment__copy,
.commitment__panel .commitment__copy p {
    text-shadow: 0 2px 8px rgba(8, 22, 64, 0.38) !important;
}

@media (max-width: 700px) {
    .commitment__panel {
        background: rgba(23, 56, 105, 0.48) !important;
    }
}

/* ============================================================================
   SERVICES — ONE ROW PER SERVICE
   Switch the Explore Our Services list from two desktop columns to a single
   full-width list. Each service remains icon + title + description as one row.
   ============================================================================ */
.explore-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
    border-top: 1px solid var(--line) !important;
}

.explore-item {
    width: 100% !important;
    min-height: 0 !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    column-gap: 18px !important;
    row-gap: 4px !important;
    padding: 18px 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    background: transparent !important;
}

.explore-item h3,
.explore-item p {
    max-width: none !important;
}

@media (max-width: 620px) {
    .explore-item {
        grid-template-columns: 44px minmax(0, 1fr) !important;
        column-gap: 14px !important;
        padding: 15px 0 !important;
    }
}

/* ============================================================================
   SERVICES — USE THE EMPTY RIGHT-HAND SPACE
   Keep one service per row and the existing global section position. On desktop,
   the service name occupies the middle column and its description uses the
   remaining right-hand space. Tablet/mobile stack the description below again.
   ============================================================================ */
@media (min-width: 961px) {
    .services--explore .explore-item {
        display: grid !important;
        grid-template-columns: 52px minmax(320px, 0.82fr) minmax(0, 1.18fr) !important;
        grid-template-rows: auto !important;
        column-gap: clamp(20px, 2vw, 34px) !important;
        row-gap: 0 !important;
        align-items: center !important;
        padding: 18px 0 !important;
    }

    .services--explore .explore-item__icon {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: center !important;
    }

    .services--explore .explore-item h3 {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: center !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .services--explore .explore-item p {
        grid-column: 3 !important;
        grid-row: 1 !important;
        align-self: center !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding-left: 0 !important;
        line-height: 1.55 !important;
    }
}

@media (max-width: 960px) {
    .services--explore .explore-item {
        grid-template-columns: 48px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        column-gap: 16px !important;
        row-gap: 5px !important;
        align-items: start !important;
    }

    .services--explore .explore-item__icon {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
    }

    .services--explore .explore-item h3 {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    .services--explore .explore-item p {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }
}

@media (max-width: 620px) {
    .services--explore .explore-item {
        grid-template-columns: 44px minmax(0, 1fr) !important;
        column-gap: 14px !important;
        padding: 15px 0 !important;
    }
}

/* ============================================================================
   FEATURED CAPABILITIES → EXPLORE OUR SERVICES
   Keeps the existing KHLG color blend while removing the oversized gap created
   by stacking the bottom padding of Featured with the top padding of Services.
   ============================================================================ */
.featured {
    padding-bottom: clamp(36px, 3.2vw, 48px) !important;
    background: linear-gradient(
        to bottom,
        #d2eff7 0%,
        #e3f3f7 42%,
        #eef5f6 68%,
        #f2f2f2 100%
    ) !important;
}

.featured + .services,
.featured + .services--explore {
    padding-top: clamp(42px, 3.8vw, 56px) !important;
    border-top: 0 !important;
}

.services,
.services--explore {
    background: #f2f2f2 !important;
}

@media (max-width: 700px) {
    .featured {
        padding-bottom: 28px !important;
    }

    .featured + .services,
    .featured + .services--explore {
        padding-top: 36px !important;
    }
}

/* ============================================================================
   ABOUT KHLG — EMPHASIZE COMPANY DESCRIPTORS WITHOUT INCREASING TYPE SIZE
   Uses stronger contrast and subtle label chips so Guam-based / Multidisciplinary /
   Locally owned are easier to notice without making the text larger.
   ============================================================================ */
#about .about-story__meta {
    color: #ffffff !important;
    font-size: clamp(13px, 1vw, 15px) !important;
    font-weight: 700 !important;
    letter-spacing: 0.035em !important;
    gap: 8px 10px !important;
}

#about .about-story__meta span {
    padding: 6px 10px !important;
    background: rgba(172, 215, 242, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow: 0 2px 8px rgba(8, 22, 64, 0.1) !important;
    color: #ffffff !important;
}

@media (max-width: 700px) {
    #about .about-story__meta {
        font-size: 13px !important;
        gap: 7px 8px !important;
    }

    #about .about-story__meta span {
        padding: 5px 8px !important;
    }
}

/* ============================================================================
   CAREERS — UNIFY PARAGRAPH TYPOGRAPHY
   Force both Careers body paragraphs to use the exact same body-text styling.
   ============================================================================ */
.careers__content p {
    font-family: var(--font-body) !important;
    font-size: var(--type-body) !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    letter-spacing: 0 !important;
    color: var(--muted) !important;
}

/* HERO — localized readability panel */
.hero .hero__text-panel {
    width: fit-content;
    max-width: min(980px, 72vw);
    padding: clamp(22px, 2.2vw, 34px) clamp(24px, 2.8vw, 42px);
    background: rgba(23, 56, 105, 0.38);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-shadow: none;
}

.hero .hero__text-panel .hero__eyebrow,
.hero .hero__text-panel h1,
.hero .hero__text-panel .hero__tagline,
.hero .hero__text-panel .hero__regions {
    text-shadow: 0 2px 8px rgba(8, 22, 64, 0.38) !important;
}

.hero .hero__text-panel .hero__eyebrow,
.hero .hero__text-panel .hero__tagline,
.hero .hero__text-panel .hero__regions {
    color: rgba(255, 255, 255, 0.96) !important;
}

@media (max-width: 960px) {
    .hero .hero__text-panel {
        max-width: min(820px, 86vw);
        background: rgba(23, 56, 105, 0.42);
    }
}

@media (max-width: 700px) {
    .hero .hero__text-panel {
        width: 100%;
        max-width: 100%;
        padding: 20px;
        background: rgba(23, 56, 105, 0.46);
    }
}

/* HERO — KEEP “HÅFA ADAI AND WELCOME TO” ON ONE LINE */
.hero .hero__text-panel {
    max-width: min(1120px, 86vw) !important;
}

.hero .hero__eyebrow,
.hero__eyebrow {
    white-space: nowrap !important;
    max-width: none !important;
}

@media (max-width: 700px) {
    .hero .hero__eyebrow,
    .hero__eyebrow {
        font-size: clamp(22px, 7vw, 34px) !important;
        white-space: nowrap !important;
    }
}

/* ============================================================================
   INFRASTRUCTURE MARKETS — MARINE CARD FILLS REMAINING ROW SPACE
   With the Federal/Public-Sector card removed, the Marine card spans the
   remaining columns so the 5-card grid has no empty desktop/tablet slot.
   ============================================================================ */
@media (min-width: 992px) {
    .market-grid .market-card--wide {
        grid-column: span 2 !important;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .market-grid .market-card--wide {
        grid-column: span 2 !important;
    }
}

@media (max-width: 575.98px) {
    .market-grid .market-card--wide {
        grid-column: auto !important;
    }
}

/* ============================================================================
   FEATURED CAPABILITIES — FOUR-CARD LAYOUT
   Adds Technology Solutions as the fourth capability while keeping all cards
   equal in size and preserving the existing section alignment.
   ============================================================================ */
@media (min-width: 1200px) {
    .featured-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: clamp(14px, 1.2vw, 18px) !important;
        align-items: stretch !important;
    }

    .featured-card,
    .featured-card--large {
        grid-column: auto !important;
        min-height: clamp(360px, 23vw, 430px) !important;
        height: 100% !important;
    }

    .featured-card img,
    .featured-card--large img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .featured-card__content {
        inset: auto clamp(18px, 1.6vw, 26px) clamp(20px, 1.8vw, 28px) !important;
    }

    .featured-card__content h3 {
        font-size: clamp(22px, 1.65vw, 29px) !important;
        line-height: 1.14 !important;
    }

    .featured-card__content p {
        font-size: clamp(14px, 1vw, 17px) !important;
        line-height: 1.45 !important;
    }
}

@media (min-width: 700px) and (max-width: 1199.98px) {
    .featured-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .featured-card,
    .featured-card--large {
        grid-column: auto !important;
        min-height: clamp(340px, 42vw, 460px) !important;
    }
}

/* ABOUT KHLG — spacing between the two intro paragraphs */
#about .about-story__intro p + p {
    margin-top: 18px !important;
}

/* ============================================================================
   HERO — CLEAN TEXT-ONLY READABILITY / WELCOMING HÅFA ADAI
   Removes the translucent panel and any local scrim behind the copy. Readability
   now comes from layered text shadows, stronger hierarchy, and lighter greeting.
   ============================================================================ */
.hero .hero__text-panel {
    width: fit-content !important;
    max-width: min(1120px, 88vw) !important;
    padding: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Remove any earlier localized hero scrim/vignette behind the text. */
.hero > .site-shell.hero__content.hero__content--editorial::before,
.hero .hero__text-panel::before,
.hero .hero__text-panel::after {
    content: none !important;
    display: none !important;
    background: none !important;
    filter: none !important;
    box-shadow: none !important;
}

/* Main name: crisp and readable directly over the photograph. */
.hero .hero__text-panel h1,
.hero .hero__content h1,
.hero h1 {
    color: #ffffff !important;
    font-weight: 500 !important;
    text-shadow:
        0 2px 3px rgba(8, 22, 64, 0.72),
        0 7px 18px rgba(8, 22, 64, 0.42),
        0 18px 42px rgba(8, 22, 64, 0.24) !important;
}

/* Welcoming greeting: lighter, softer and less corporate than the main title. */
.hero .hero__text-panel .hero__eyebrow,
.hero .hero__eyebrow,
.hero__eyebrow {
    display: block !important;
    width: fit-content !important;
    max-width: none !important;
    margin: 0 0 clamp(22px, 2vw, 30px) !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: rgba(255, 255, 255, 0.96) !important;
    font-family: var(--font-heading) !important;
    font-size: clamp(34px, 3.2vw, 54px) !important;
    font-weight: 300 !important;
    line-height: 1.08 !important;
    letter-spacing: 0.012em !important;
    text-transform: none !important;
    white-space: nowrap !important;
    text-shadow:
        0 2px 3px rgba(8, 22, 64, 0.62),
        0 8px 24px rgba(8, 22, 64, 0.34) !important;
}

.hero .hero__text-panel .hero__tagline,
.hero .hero__tagline {
    color: #ffffff !important;
    font-weight: 500 !important;
    text-shadow:
        0 2px 3px rgba(8, 22, 64, 0.72),
        0 7px 18px rgba(8, 22, 64, 0.38) !important;
}

.hero .hero__text-panel .hero__regions,
.hero .hero__regions {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow:
        0 2px 3px rgba(8, 22, 64, 0.78),
        0 6px 14px rgba(8, 22, 64, 0.34) !important;
}

.hero .hero__actions .button {
    box-shadow: 0 8px 24px rgba(8, 22, 64, 0.24) !important;
}

@media (max-width: 960px) {
    .hero .hero__text-panel {
        max-width: 90vw !important;
    }

    .hero .hero__text-panel .hero__eyebrow,
    .hero .hero__eyebrow,
    .hero__eyebrow {
        font-size: clamp(28px, 5vw, 42px) !important;
    }
}

@media (max-width: 700px) {
    .hero .hero__text-panel {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .hero .hero__text-panel .hero__eyebrow,
    .hero .hero__eyebrow,
    .hero__eyebrow {
        font-size: clamp(21px, 6.4vw, 31px) !important;
        white-space: nowrap !important;
        margin-bottom: 18px !important;
    }
}

/* ============================================================================
   GLOBAL DESKTOP GUTTER — REDUCE CURRENT MARGIN BY 30PX
   Keeps the existing responsive system, but gives desktop sections 30px more
   usable space on both the left and right sides.
   ============================================================================ */
@media (min-width: 992px) {
    body .site-shell,
    body .hero > .site-shell.hero__content {
        width: min(
            calc(100% - ((var(--page-gutter) - 30px) * 2)),
            var(--container-max)
        ) !important;
    }
}

/* ============================================================================
   HERO WELCOME — WARMER, MORE DISTINCTIVE GREETING
   "Håfa Adai" receives a refined italic editorial treatment while
   "and Welcome To" stays light and modern. No background panel is used.
   ============================================================================ */
.hero .hero__eyebrow,
.hero__eyebrow {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: clamp(10px, 0.9vw, 16px) !important;
    width: auto !important;
    max-width: none !important;
    margin-bottom: clamp(18px, 2vh, 26px) !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    text-transform: none !important;
    font-size: clamp(50px, 4.25vw, 78px) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    color: #ffffff !important;
    text-shadow:
        0 2px 3px rgba(8, 22, 64, 0.5),
        0 8px 24px rgba(8, 22, 64, 0.22) !important;
}

.hero .hero__greeting {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: 1.13em !important;
    font-style: italic !important;
    font-weight: 600 !important;
    letter-spacing: -0.025em !important;
    color: #d2eff7 !important;
}

.hero .hero__welcome {
    font-family: "Barlow", var(--font-heading), sans-serif !important;
    font-size: 0.72em !important;
    font-style: normal !important;
    font-weight: 300 !important;
    letter-spacing: 0.005em !important;
    color: rgba(255, 255, 255, 0.98) !important;
}

/* Keep both phrases intact. On smaller screens the break, if needed, happens
   between the greeting and the welcome phrase — never between "Welcome" and "To". */
.hero .hero__greeting,
.hero .hero__welcome {
    white-space: nowrap !important;
}

@media (max-width: 960px) {
    .hero .hero__eyebrow,
    .hero__eyebrow {
        font-size: clamp(42px, 5.6vw, 62px) !important;
        gap: 10px !important;
    }
}

@media (max-width: 700px) {
    .hero .hero__eyebrow,
    .hero__eyebrow {
        flex-wrap: wrap !important;
        white-space: normal !important;
        font-size: clamp(35px, 9.5vw, 48px) !important;
        row-gap: 2px !important;
    }

    .hero .hero__welcome {
        font-size: 0.7em !important;
    }
}

/* ============================================================================
   GLOBAL DESKTOP WIDTH — ACTUAL 30PX OUTWARD EXTENSION
   Previous gutter reduction was being limited by --container-max.
   This raises the desktop container cap by 60px total so the content visibly
   extends 30px farther on both the left and right sides.
   ============================================================================ */

/* Large desktop: 1440px -> 1500px */
@media (min-width: 1400px) {
    :root {
        --container-max: 1500px !important;
    }

    body .site-shell,
    body .hero > .site-shell.hero__content {
        width: min(
            calc(100% - ((var(--page-gutter) - 30px) * 2)),
            1500px
        ) !important;
        max-width: 1500px !important;
    }
}

/* Standard desktop: 1300px -> 1360px */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    :root {
        --container-max: 1360px !important;
    }

    body .site-shell,
    body .hero > .site-shell.hero__content {
        width: min(
            calc(100% - ((var(--page-gutter) - 30px) * 2)),
            1360px
        ) !important;
        max-width: 1360px !important;
    }
}

/* Desktop transition / landscape tablet: 1140px -> 1200px */
@media (min-width: 992px) and (max-width: 1199.98px) {
    :root {
        --container-max: 1200px !important;
    }

    body .site-shell,
    body .hero > .site-shell.hero__content {
        width: min(
            calc(100% - ((var(--page-gutter) - 30px) * 2)),
            1200px
        ) !important;
        max-width: 1200px !important;
    }
}

/* ============================================================================
   GLOBAL DESKTOP WIDTH — EXTEND A LITTLE MORE
   Adds roughly another 15px of usable space on each side on larger desktops,
   while keeping a minimum safe edge gutter so content does not touch the screen.
   ============================================================================ */

@media (min-width: 1400px) {
    :root {
        --container-max: 1530px !important;
    }

    body .site-shell,
    body .hero > .site-shell.hero__content {
        width: min(
            calc(100% - (max(18px, calc(var(--page-gutter) - 45px)) * 2)),
            1530px
        ) !important;
        max-width: 1530px !important;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    :root {
        --container-max: 1390px !important;
    }

    body .site-shell,
    body .hero > .site-shell.hero__content {
        width: min(
            calc(100% - (max(18px, calc(var(--page-gutter) - 45px)) * 2)),
            1390px
        ) !important;
        max-width: 1390px !important;
    }
}

/* ============================================================================
   HERO WELCOME — KHLG FONT / WHITE / SIZE MATCH
   Team revision: both parts of “Håfa Adai and Welcome To” use the KHLG Barlow
   typeface, white lettering, and a scale slightly larger than the company name.
   ============================================================================ */
.hero .hero__eyebrow,
.hero__eyebrow {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: clamp(10px, 0.8vw, 14px) !important;
    width: auto !important;
    max-width: none !important;
    margin-bottom: clamp(18px, 2vh, 26px) !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: var(--font-heading) !important;
    font-size: clamp(52px, 4.4vw, 80px) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1.02 !important;
    letter-spacing: -0.025em !important;
    text-transform: none !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    text-shadow:
        0 2px 3px rgba(8, 22, 64, 0.56),
        0 8px 22px rgba(8, 22, 64, 0.22) !important;
}

.hero .hero__greeting,
.hero .hero__welcome {
    font-family: var(--font-heading) !important;
    font-size: 1em !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    color: #ffffff !important;
    white-space: nowrap !important;
}

@media (max-width: 960px) {
    .hero .hero__eyebrow,
    .hero__eyebrow {
        font-size: clamp(44px, 6.2vw, 60px) !important;
    }
}

@media (max-width: 700px) {
    .hero .hero__eyebrow,
    .hero__eyebrow {
        flex-wrap: wrap !important;
        white-space: normal !important;
        font-size: clamp(32px, 8.7vw, 42px) !important;
        row-gap: 2px !important;
    }

    .hero .hero__greeting,
    .hero .hero__welcome {
        white-space: nowrap !important;
    }
}

/* ============================================================================
   ABOUT FACTS — CONSISTENT INTERNAL SPACING
   Aligns all three fact cards from the top instead of vertically centering
   different amounts of copy, so labels, values, and descriptions line up.
   ============================================================================ */
#about .about-story__facts {
    align-items: stretch !important;
}

#about .about-fact {
    min-height: 220px !important;
    justify-content: flex-start !important;
    padding: 30px 28px 32px !important;
}

#about .about-fact__label {
    margin: 0 0 14px !important;
}

#about .about-fact strong {
    margin: 0 !important;
}

#about .about-fact p {
    margin: 14px 0 0 !important;
    max-width: 360px !important;
}

@media (max-width: 700px) {
    #about .about-fact {
        min-height: 0 !important;
        padding: 26px 22px !important;
    }
}

/* ============================================================================
   EXPLORE OUR SERVICES — CONSISTENT TYPOGRAPHY
   All service names share one font size/weight and all descriptions share
   one font size/weight, regardless of title length or line wrapping.
   ============================================================================ */
.services--explore .explore-item h3 {
    font-family: var(--font-heading) !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    color: var(--khlg-charcoal) !important;
}

.services--explore .explore-item p {
    font-family: var(--font-body) !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
    color: var(--muted) !important;
}

@media (max-width: 700px) {
    .services--explore .explore-item h3 {
        font-size: 21px !important;
    }

    .services--explore .explore-item p {
        font-size: 16px !important;
    }
}

/* ============================================================================
   EXPLORE OUR SERVICES — MATCH SECTION SUBTITLE TYPOGRAPHY
   Makes "Offering innovative..." match the supporting copy used under the
   headings in Featured Capabilities and Infrastructure Markets.
   ============================================================================ */
.services--explore .section-heading__copy .section-lead {
    margin: 0 !important;
    font-family: var(--font-body) !important;
    font-size: var(--type-body) !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    letter-spacing: 0 !important;
    color: var(--muted) !important;
    max-width: 920px !important;
}

/* ============================================================================
   FEATURED CAPABILITIES — EDITORIAL CARD CAROUSEL
   Inspired by the supplied reference: rounded image, capability pill,
   metadata line, large title, excerpt, and left/right carousel controls.
   ============================================================================ */

.featured .featured-carousel {
    position: relative !important;
    margin-top: clamp(42px, 5vw, 72px) !important;
}

.featured .featured-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: clamp(22px, 2vw, 32px) !important;
    margin-top: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
    overscroll-behavior-inline: contain;
    padding: 0 2px 18px !important;
}

.featured .featured-grid::-webkit-scrollbar {
    display: none !important;
}

.featured .featured-card,
.featured .featured-card--large {
    position: relative !important;
    flex: 0 0 calc((100% - (2 * clamp(22px, 2vw, 32px))) / 3) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    display: block !important;
    overflow: visible !important;
    scroll-snap-align: start !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--khlg-charcoal) !important;
}

.featured .featured-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: 22px;
    background: #dcecf3;
}

.featured .featured-card__media img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
    transition: transform 0.45s var(--ease) !important;
}

.featured .featured-card__media::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 35%;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(8, 22, 64, 0.18),
        rgba(8, 22, 64, 0)
    );
}

.featured .featured-card__body {
    padding: 18px 2px 4px;
}

.featured .featured-card__body h3 {
    margin: 0 0 14px !important;
    max-width: 95%;
    color: var(--khlg-charcoal) !important;
    font-family: var(--font-heading) !important;
    font-size: clamp(25px, 2vw, 32px) !important;
    font-weight: 600 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
    text-shadow: none !important;
}

.featured .featured-card__body p {
    margin: 0 !important;
    color: rgba(74, 81, 89, 0.82) !important;
    font-family: var(--font-body) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    text-shadow: none !important;
}

.featured .featured-carousel__button {
    position: absolute;
    z-index: 5;
    top: 31%;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1.5px solid var(--khlg-navy);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    color: var(--khlg-navy);
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(8, 22, 64, 0.1);
    transition:
        background 0.2s var(--ease),
        color 0.2s var(--ease),
        transform 0.2s var(--ease);
}

.featured .featured-carousel__button--prev {
    left: -24px;
}

.featured .featured-carousel__button--next {
    right: -24px;
}

.featured .featured-carousel__button:focus-visible {
    outline: 3px solid var(--khlg-light-blue);
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .featured .featured-card:hover .featured-card__media img {
        transform: scale(1.035) !important;
    }

    .featured .featured-carousel__button:hover {
        background: var(--khlg-navy);
        color: #ffffff;
        transform: translateY(-2px);
    }
}

@media (max-width: 1199.98px) {
    .featured .featured-card,
    .featured .featured-card--large {
        flex-basis: calc((100% - clamp(20px, 2.5vw, 28px)) / 2) !important;
    }

    .featured .featured-grid {
        gap: clamp(20px, 2.5vw, 28px) !important;
    }

    .featured .featured-carousel__button--prev {
        left: 8px;
    }

    .featured .featured-carousel__button--next {
        right: 8px;
    }
}

@media (max-width: 700px) {
    .featured .featured-carousel {
        margin-top: 34px !important;
    }

    .featured .featured-card,
    .featured .featured-card--large {
        flex-basis: 88% !important;
    }

    .featured .featured-grid {
        gap: 18px !important;
        padding-bottom: 14px !important;
    }

    .featured .featured-card__media {
        border-radius: 18px;
        aspect-ratio: 4 / 3;
    }

    .featured .featured-card__body {
        padding-top: 15px;
    }

    .featured .featured-card__body h3 {
        font-size: 25px !important;
        max-width: 100%;
    }

    .featured .featured-card__body p {
        font-size: 15.5px !important;
    }

    .featured .featured-carousel__button {
        top: 29%;
        width: 44px;
        height: 44px;
    }

    .featured .featured-carousel__button--prev {
        left: 6px;
    }

    .featured .featured-carousel__button--next {
        right: 6px;
    }
}

/* ============================================================================
   FEATURED CAPABILITIES — CLEAN CAROUSEL CONTROLS
   Uses only approved KHLG brand colors.
   ============================================================================ */
.featured .featured-carousel__button {
    position: absolute;
    z-index: 5;
    top: 31%;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 2px solid var(--khlg-navy) !important; /* #30618C */
    border-radius: 50%;
    background: var(--khlg-white) !important;
    color: var(--khlg-navy) !important; /* #30618C */
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(48, 97, 140, 0.16);
    transition:
        background 0.2s var(--ease),
        color 0.2s var(--ease),
        border-color 0.2s var(--ease),
        transform 0.2s var(--ease);
}

.featured .featured-carousel__button--prev {
    left: -24px;
}

.featured .featured-carousel__button--next {
    right: -24px;
}

.featured .featured-carousel__button:focus-visible {
    outline: 3px solid var(--khlg-light-blue) !important; /* #ACD7F2 */
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .featured .featured-carousel__button:hover {
        background: var(--khlg-navy) !important; /* #30618C */
        border-color: var(--khlg-navy) !important;
        color: var(--khlg-white) !important;
        transform: translateY(-2px);
    }
}

@media (max-width: 1199.98px) {
    .featured .featured-carousel__button--prev {
        left: 8px;
    }

    .featured .featured-carousel__button--next {
        right: 8px;
    }
}

@media (max-width: 700px) {
    .featured .featured-carousel__button {
        top: 29%;
        width: 44px;
        height: 44px;
    }

    .featured .featured-carousel__button--prev {
        left: 6px;
    }

    .featured .featured-carousel__button--next {
        right: 6px;
    }
}

/* ============================================================================
   HERO PHOTO — PRESERVE THE PRE-CROPPED COMPOSITION
   Source image ratio: 1272 × 486 (≈ 2.62:1).
   The old full-viewport hero was much taller than this ratio, so object-fit:
   cover had to enlarge and crop the image. This keeps desktop hero height
   closer to the source composition while retaining a practical minimum height.
   ============================================================================ */

@media (min-width: 1200px) {
    .hero,
    .hero--editorial {
        min-height: 0 !important;
        height: clamp(540px, 38.21vw, 760px) !important;
    }

    .hero__media,
    .hero__overlay {
        inset: 0 !important;
    }

    .hero__media img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        transform: none !important;
        filter: none !important;
    }
}

/* On smaller screens the viewport becomes much taller/narrower than the source
   image, so a controlled cover crop is still necessary for readable hero copy. */
@media (max-width: 1199.98px) {
    .hero__media img {
        object-fit: cover !important;
        object-position: 58% center !important;
        transform: none !important;
    }
}

@media (max-width: 700px) {
    .hero__media img {
        object-position: 62% center !important;
    }
}

/* ============================================================================
   GLOBAL TITLE COLOR — MATCH HEADER + FOOTER
   Header/footer use KHLG Midnight Navy #173869. Apply the exact same color
   to titles on light backgrounds for a consistent visual system.
   ============================================================================ */
:root {
    --khlg-title-color: var(--khlg-midnight); /* #173869 */
}

/* Primary section titles */
.section-heading h2,
.about-story__heading h2,
.intro__headline h2,
.intro-editorial__headline h2,
.careers__content h2,
.careers__content h3,
#contact.final-cta h2 {
    color: var(--khlg-title-color) !important;
}

/* Repeated card/service titles */
.featured .featured-card__body h3,
.services--explore .explore-item h3,
.service-card h3 {
    color: var(--khlg-title-color) !important;
}

/* About highlight values */
#about .about-fact strong {
    color: var(--khlg-title-color) !important;
}

/* Contact form title on the white modal panel */
.contact-modal__form-wrap h3 {
    color: var(--khlg-title-color) !important;
}

/* Titles that sit on dark/photo backgrounds stay white for contrast. */
.hero h1,
.approach h2,
.approach--feature h2,
.market-card h3,
.commitment blockquote,
.contact-modal__intro h2 {
    color: var(--khlg-white) !important;
}

/* ============================================================================
   ABOUT KHLG — CLEAN COMPANY DESCRIPTORS
   Removes the boxed/chip styling and keeps the three descriptors as simple text.
   ============================================================================ */
#about .about-story__meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 14px !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
}

#about .about-story__meta span {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: #ffffff !important;
}

#about .about-story__meta span::before,
#about .about-story__meta span::after {
    content: none !important;
    display: none !important;
}

/* ============================================================================
   FINAL GLOBAL WIDTH OVERRIDE — ORIGINAL MARGINS MINUS 60PX
   IMPORTANT:
   The earlier margin change did not visibly move the layout because the page
   was still being limited by high-specificity `body .site-shell` rules and
   the desktop `max-width` cap.

   This override changes BOTH:
   1. the responsive gutter, and
   2. the container max-width.

   Large desktop original:
     max width = 1440px
   Target after reducing each outside margin by 60px:
     max width = 1560px

   This is the real 60px-per-side extension.
   ============================================================================ */

/* Large desktop — exact 60px reduction from the original outer margins */
@media (min-width: 1400px) {
    :root {
        --container-max: 1560px !important;
    }

    body .site-shell,
    body .hero > .site-shell.hero__content {
        width: min(
            calc(100% - (max(18px, calc(clamp(60px, 6vw, 120px) - 60px)) * 2)),
            1560px
        ) !important;
        max-width: 1560px !important;
        margin-inline: auto !important;
        padding-inline: 0 !important;
    }
}

/* Standard desktop — widen from the original 1300px system */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    :root {
        --container-max: 1420px !important;
    }

    body .site-shell,
    body .hero > .site-shell.hero__content {
        width: min(calc(100% - 36px), 1420px) !important;
        max-width: 1420px !important;
        margin-inline: auto !important;
        padding-inline: 0 !important;
    }
}

/* Landscape tablet / small desktop */
@media (min-width: 992px) and (max-width: 1199.98px) {
    :root {
        --container-max: 1260px !important;
    }

    body .site-shell,
    body .hero > .site-shell.hero__content {
        width: calc(100% - 36px) !important;
        max-width: 1260px !important;
        margin-inline: auto !important;
        padding-inline: 0 !important;
    }
}

/* Tablet — keep the same wider visual rhythm without crowding the viewport */
@media (min-width: 768px) and (max-width: 991.98px) {
    body .site-shell,
    body .hero > .site-shell.hero__content {
        width: calc(100% - 36px) !important;
        max-width: none !important;
        margin-inline: auto !important;
        padding-inline: 0 !important;
    }
}

/* Large mobile */
@media (min-width: 576px) and (max-width: 767.98px) {
    body .site-shell,
    body .hero > .site-shell.hero__content {
        width: calc(100% - 32px) !important;
        max-width: none !important;
        margin-inline: auto !important;
        padding-inline: 0 !important;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    body .site-shell,
    body .hero > .site-shell.hero__content {
        width: calc(100% - 28px) !important;
        max-width: none !important;
        margin-inline: auto !important;
        padding-inline: 0 !important;
    }
}

/* ============================================================================
   FEATURED CAPABILITIES — MOBILE CAROUSEL FIX
   - One complete card per mobile viewport
   - No thin preview/sliver of the next card
   - Navigation arrows stay inside the image edges
   - Stable image sizing and cleaner text spacing
   ============================================================================ */
@media (max-width: 700px) {
    .featured .featured-carousel {
        position: relative !important;
        width: 100% !important;
        margin-top: 32px !important;
        overflow: hidden !important;
    }

    .featured .featured-grid {
        width: 100% !important;
        gap: 16px !important;
        padding: 0 0 12px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        scroll-padding-inline: 0 !important;
        scrollbar-width: none !important;
    }

    .featured .featured-grid::-webkit-scrollbar {
        display: none !important;
    }

    .featured .featured-card,
    .featured .featured-card--large {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
    }

    .featured .featured-card__media {
        width: 100% !important;
        aspect-ratio: 4 / 3 !important;
        border-radius: 18px !important;
        overflow: hidden !important;
    }

    .featured .featured-card__media img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        transform: none !important;
        transition: none !important;
    }

    .featured .featured-card__body {
        width: 100% !important;
        padding: 16px 2px 2px !important;
    }

    .featured .featured-card__body h3 {
        max-width: 100% !important;
        margin: 0 0 10px !important;
        font-size: clamp(22px, 6.2vw, 26px) !important;
        line-height: 1.08 !important;
    }

    .featured .featured-card__body p {
        max-width: 100% !important;
        font-size: 15.5px !important;
        line-height: 1.55 !important;
    }

    /* Center the arrows vertically against the 4:3 image area. */
    .featured .featured-carousel__button {
        top: calc((100vw - 32px) * 0.375) !important;
        transform: translateY(-50%) !important;
        width: 42px !important;
        height: 42px !important;
        border: 2px solid var(--khlg-midnight) !important;
        background: var(--khlg-white) !important;
        color: var(--khlg-midnight) !important;
        box-shadow: 0 5px 16px rgba(23, 56, 105, 0.18) !important;
    }

    .featured .featured-carousel__button--prev {
        left: 12px !important;
    }

    .featured .featured-carousel__button--next {
        right: 12px !important;
    }
}

@media (max-width: 575.98px) {
    .featured .featured-carousel__button {
        top: calc((100vw - 28px) * 0.375) !important;
    }
}

@media (max-width: 420px) {
    .featured .featured-carousel__button {
        width: 40px !important;
        height: 40px !important;
    }

    .featured .featured-carousel__button--prev {
        left: 10px !important;
    }

    .featured .featured-carousel__button--next {
        right: 10px !important;
    }
}

/* ============================================================================
   FEATURED CAPABILITIES — MOBILE INNER MARGIN ALIGNMENT
   Keeps the carousel image/card aligned with the same inset used by the
   surrounding mobile content instead of letting the card touch the section edge.
   ============================================================================ */
@media (max-width: 700px) {
    .featured .featured-carousel {
        padding-inline: 14px !important;
        box-sizing: border-box !important;
    }

    .featured .featured-grid {
        width: 100% !important;
    }

    .featured .featured-card,
    .featured .featured-card--large {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }

    .featured .featured-carousel__button--prev {
        left: 24px !important;
    }

    .featured .featured-carousel__button--next {
        right: 24px !important;
    }
}

@media (max-width: 420px) {
    .featured .featured-carousel {
        padding-inline: 12px !important;
    }

    .featured .featured-carousel__button--prev {
        left: 20px !important;
    }

    .featured .featured-carousel__button--next {
        right: 20px !important;
    }
}

/* ============================================================================
   HERO — MOBILE PROPORTION FIX
   The mobile hero was inheriting the desktop/full-viewport minimum height,
   which made the photo section excessively tall on portrait screens.
   This keeps the image immersive without leaving a large empty image area.
   ============================================================================ */
@media (max-width: 700px) {
    .hero,
    .hero--editorial {
        min-height: 680px !important;
        height: 680px !important;
        align-items: center !important;
    }

    .hero__media,
    .hero__overlay {
        inset: 0 !important;
    }

    .hero__media img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: 62% center !important;
        transform: none !important;
        filter: none !important;
    }

    body .hero > .site-shell.hero__content.hero__content--editorial,
    .hero > .site-shell.hero__content.hero__content--editorial {
        width: calc(100% - 28px) !important;
        max-width: none !important;
        min-height: 0 !important;
        margin-inline: auto !important;
        padding: 44px 0 !important;
        align-self: center !important;
    }

    .hero .hero__eyebrow,
    .hero__eyebrow {
        margin-bottom: 18px !important;
        font-size: clamp(28px, 7.4vw, 38px) !important;
        line-height: 1.06 !important;
        letter-spacing: -0.02em !important;
        white-space: normal !important;
    }

    .hero .hero__greeting,
    .hero .hero__welcome {
        white-space: normal !important;
    }

    .hero .hero__content h1,
    .hero h1 {
        max-width: 100% !important;
        font-size: clamp(42px, 10vw, 54px) !important;
        line-height: 0.98 !important;
        letter-spacing: -0.035em !important;
    }

    .hero .hero__tagline,
    .hero__tagline {
        max-width: 100% !important;
        margin: 22px 0 14px !important;
        font-size: clamp(21px, 5.3vw, 25px) !important;
        line-height: 1.35 !important;
    }

    .hero .hero__regions,
    .hero__regions {
        gap: 8px !important;
        font-size: clamp(11.5px, 2.9vw, 13.5px) !important;
        line-height: 1.35 !important;
        letter-spacing: 0.075em !important;
    }

    .hero .hero__actions,
    .hero__actions {
        margin-top: 24px !important;
        margin-bottom: 0 !important;
    }

    .hero .hero__actions .button,
    .hero__actions .button {
        width: auto !important;
        min-height: 52px !important;
        padding: 11px 20px !important;
        font-size: 16px !important;
    }
}

@media (max-width: 420px) {
    .hero,
    .hero--editorial {
        min-height: 640px !important;
        height: 640px !important;
    }

    body .hero > .site-shell.hero__content.hero__content--editorial,
    .hero > .site-shell.hero__content.hero__content--editorial {
        width: calc(100% - 24px) !important;
        padding-block: 36px !important;
    }

    .hero .hero__eyebrow,
    .hero__eyebrow {
        font-size: clamp(25px, 7.6vw, 32px) !important;
    }

    .hero .hero__content h1,
    .hero h1 {
        font-size: clamp(38px, 10.4vw, 46px) !important;
    }

    .hero .hero__tagline,
    .hero__tagline {
        font-size: 20px !important;
    }
}

/* ============================================================================
   HERO — MOBILE CTA PLACEMENT
   Align the CTA with the left edge of the hero text instead of centering it.
   ============================================================================ */
@media (max-width: 700px) {
    .hero .hero__actions,
    .hero__actions {
        display: flex !important;
        width: 100% !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        margin: 24px 0 0 !important;
        padding: 0 !important;
    }

    .hero .hero__actions .button,
    .hero__actions .button {
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        align-self: flex-start !important;
    }
}

@media (max-width: 420px) {
    .hero .hero__actions,
    .hero__actions {
        margin-top: 20px !important;
    }
}

/* ============================================================================
   ABOUT KHLG — MOBILE FACTS CLEANUP
   Removes the extra nested horizontal inset and tightens the stacked facts so
   they align with the rest of the mobile section and do not feel overly tall.
   ============================================================================ */
@media (max-width: 700px) {
    #about .about-story__facts {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        border-top: 1px solid var(--line) !important;
        border-bottom: 1px solid var(--line) !important;
    }

    #about .about-fact {
        min-height: 0 !important;
        padding: 22px 0 !important;
        justify-content: flex-start !important;
    }

    #about .about-fact + .about-fact {
        border-left: 0 !important;
        border-top: 1px solid var(--line) !important;
    }

    #about .about-fact__label,
    #about .about-fact:nth-child(1) .about-fact__label,
    #about .about-fact:nth-child(2) .about-fact__label,
    #about .about-fact:nth-child(3) .about-fact__label {
        margin: 0 0 10px !important;
        color: var(--khlg-blue) !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
        letter-spacing: 0.1em !important;
    }

    #about .about-fact strong {
        margin: 0 !important;
        color: var(--khlg-midnight) !important;
        font-size: clamp(34px, 8vw, 42px) !important;
        line-height: 1.05 !important;
        letter-spacing: -0.035em !important;
    }

    #about .about-fact p {
        max-width: none !important;
        margin: 10px 0 0 !important;
        font-size: 16px !important;
        line-height: 1.55 !important;
    }
}

@media (max-width: 420px) {
    #about .about-fact {
        padding-block: 20px !important;
    }

    #about .about-fact strong {
        font-size: 34px !important;
    }

    #about .about-fact p {
        font-size: 15.5px !important;
    }
}

/* ============================================================================
   ABOUT KHLG — UNIFORM FACT LABEL COLOR
   Older nth-child rules assigned different colors to each label.
   Force all three labels to use one consistent approved KHLG blue.
   ============================================================================ */
#about .about-fact .about-fact__label,
#about .about-fact:nth-child(1) .about-fact__label,
#about .about-fact:nth-child(2) .about-fact__label,
#about .about-fact:nth-child(3) .about-fact__label {
    color: var(--khlg-blue) !important; /* #4EA4D9 */
}

/* ============================================================================
   ABOUT KHLG — BALANCED FACTS TOP / BOTTOM SPACING
   Keeps the space above the facts row and below it visually consistent.
   Also tightens the fact cards slightly without changing the three-column layout.
   ============================================================================ */

/* Desktop */
@media (min-width: 1001px) {
    #about.intro--story {
        padding-bottom: 40px !important;
    }

    #about .about-story {
        row-gap: 40px !important;
    }

    #about .about-fact {
        min-height: 0 !important;
        padding: 28px 28px 30px !important;
    }
}

/* Tablet */
@media (min-width: 701px) and (max-width: 1000px) {
    #about.intro--story {
        padding-bottom: 36px !important;
    }

    #about .about-story {
        row-gap: 36px !important;
    }

    #about .about-fact {
        min-height: 0 !important;
        padding: 26px 24px 28px !important;
    }
}

/* Mobile */
@media (max-width: 700px) {
    #about.intro--story {
        padding-bottom: 30px !important;
    }

    #about .about-story {
        row-gap: 30px !important;
    }
}

/* ============================================================================
   HEADER LOGO — SLIGHTLY LARGER
   Increases only the TOP KHLG logo. Footer logo sizing is left unchanged.
   ============================================================================ */
.brand {
    width: clamp(280px, 18.5vw, 325px) !important;
}

.brand img {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 94px !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: left center !important;
}

/* Mid-size desktop where the full navigation is still visible */
@media (min-width: 1281px) and (max-width: 1500px) {
    .brand {
        width: clamp(225px, 15.5vw, 265px) !important;
    }

    .brand img {
        max-height: 90px !important;
    }
}

/* Tablet / collapsed navigation */
@media (max-width: 1280px) {
    .brand {
        width: clamp(250px, 24vw, 300px) !important;
    }

    .brand img {
        max-height: 86px !important;
    }
}

/* Mobile header */
@media (max-width: 900px) {
    .brand {
        width: clamp(230px, 34vw, 275px) !important;
    }

    .brand img {
        max-height: 78px !important;
    }
}

@media (max-width: 576px) {
    .brand {
        width: clamp(205px, 58vw, 240px) !important;
    }

    .brand img {
        max-height: 70px !important;
    }
}

/* ============================================================================
   HEADER NAVIGATION — TRUE CENTER ALIGNMENT
   Keeps the desktop menu centered in the header regardless of the different
   widths of the logo on the left and Contact button on the right.
   ============================================================================ */
@media (min-width: 1281px) {
    .site-header__inner {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
        align-items: center !important;
    }

    .brand {
        justify-self: start !important;
    }

    .desktop-nav {
        grid-column: 2 !important;
        justify-self: center !important;
        margin: 0 !important;
    }

    .site-header__inner > .button--nav {
        grid-column: 3 !important;
        justify-self: end !important;
    }
}

/* ============================================================================
   FOOTER — MOBILE REDESIGN
   More compact, easier to scan, and better balanced on small screens.
   ============================================================================ */
@media (max-width: 700px) {
    .site-footer {
        padding-top: 0 !important;
    }

    .site-footer__grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        padding-top: 30px !important;
        padding-bottom: 26px !important;
    }

    /* Brand block */
    .site-footer__brand {
        grid-column: 1 / -1 !important;
        max-width: none !important;
        padding-bottom: 24px !important;
        margin-bottom: 2px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
    }

    .site-footer__brand img {
        width: clamp(190px, 48vw, 225px) !important;
        max-height: 66px !important;
        margin: 0 0 16px !important;
    }

    .site-footer__brand p {
        max-width: 42ch !important;
        margin: 0 !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
        color: rgba(255, 255, 255, 0.78) !important;
    }

    /* Location cards */
    .site-footer__grid > div:nth-child(2),
    .site-footer__grid > div:nth-child(3) {
        min-width: 0 !important;
        padding: 18px !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.035) !important;
    }

    .site-footer__label {
        margin-bottom: 10px !important;
        color: var(--khlg-light-blue) !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        letter-spacing: 0.1em !important;
    }

    .site-footer__grid > div:nth-child(2) p,
    .site-footer__grid > div:nth-child(3) p {
        margin: 0 0 12px !important;
        font-size: 14.5px !important;
        line-height: 1.55 !important;
        color: rgba(255, 255, 255, 0.8) !important;
    }

    .site-footer__grid > div:nth-child(2) > a,
    .site-footer__grid > div:nth-child(3) > a {
        display: inline-flex !important;
        margin-top: 2px !important;
        font-size: 14.5px !important;
        font-weight: 600 !important;
        color: #ffffff !important;
    }

    /* Menu uses two columns to reduce footer height */
    .site-footer__menu {
        grid-column: 1 / -1 !important;
        padding-top: 22px !important;
        margin-top: 4px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
    }

    .site-footer__menu nav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px 24px !important;
    }

    .site-footer__menu a {
        width: 100% !important;
        min-width: 0 !important;
        padding: 2px 0 !important;
        font-size: 14.5px !important;
        line-height: 1.45 !important;
        color: rgba(255, 255, 255, 0.78) !important;
    }

    /* Connect stays full-width */
    .site-footer__grid > div:nth-child(5) {
        grid-column: 1 / -1 !important;
        padding-top: 22px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
    }

    .site-footer__grid > div:nth-child(5) a,
    .site-footer__grid > div:nth-child(5) p {
        font-size: 14.5px !important;
        line-height: 1.55 !important;
    }

    .site-footer__grid > div:nth-child(5) a {
        display: inline-block !important;
        margin-bottom: 6px !important;
        color: #ffffff !important;
        overflow-wrap: anywhere !important;
    }

    .site-footer__bottom {
        width: calc(100% - 28px) !important;
        margin-inline: auto !important;
        padding: 18px 0 22px !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
        color: rgba(255, 255, 255, 0.58) !important;
    }
}

/* Narrow phones: stack the location cards for cleaner address wrapping. */
@media (max-width: 480px) {
    .site-footer__grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding-top: 26px !important;
    }

    .site-footer__brand,
    .site-footer__menu,
    .site-footer__grid > div:nth-child(5) {
        grid-column: 1 !important;
    }

    .site-footer__grid > div:nth-child(2),
    .site-footer__grid > div:nth-child(3) {
        grid-column: 1 !important;
        padding: 16px !important;
    }

    .site-footer__menu nav {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px 18px !important;
    }

    .site-footer__bottom {
        width: calc(100% - 24px) !important;
    }
}

/* ============================================================================
   FOOTER — EQUAL SPACE BETWEEN THE FOUR INFORMATION COLUMNS
   Guam, Saipan, Menu, and Connect keep their natural content widths while the
   remaining horizontal space is distributed evenly between all four columns.
   The brand block, when present, stays on its own full-width row above them.
   ============================================================================ */

@media (min-width: 1181px) {
    .site-footer__grid {
        grid-template-columns: repeat(4, max-content) !important;
        justify-content: space-between !important;
        column-gap: clamp(24px, 2vw, 36px) !important;
        row-gap: clamp(28px, 3vw, 42px) !important;
        align-items: start !important;
    }

    .site-footer__brand {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: none !important;
    }

    .site-footer__grid > div:not(.site-footer__brand) {
        min-width: 0;
        justify-self: start;
    }
}

/* Keep the intended two-line address format intact whenever there is room. */
@media (min-width: 701px) {
    .site-footer__grid > div:nth-child(2) p,
    .site-footer__grid > div:nth-child(3) p {
        white-space: nowrap;
    }
}

/* Mobile/tablet can wrap naturally if the viewport is too narrow. */
@media (max-width: 700px) {
    .site-footer__grid > div:nth-child(2) p,
    .site-footer__grid > div:nth-child(3) p {
        white-space: normal !important;
    }
}

/* ============================================================================
   MOBILE FOOTER — ADDRESS CARD SPACE OPTIMIZATION
   Stacked cards, location + phone on one row, address uses full card width.
   Existing colors, fonts, and font sizes are preserved.
   ============================================================================ */
@media (max-width: 700px) {
    .site-footer__grid > div:nth-child(2),
    .site-footer__grid > div:nth-child(3) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "label phone"
            "address address" !important;
        align-items: center !important;
        gap: 8px 16px !important;
        padding: 14px 16px !important;
    }

    .site-footer__grid > div:nth-child(2) .site-footer__label,
    .site-footer__grid > div:nth-child(3) .site-footer__label {
        grid-area: label !important;
        margin: 0 !important;
        align-self: center !important;
    }

    .site-footer__grid > div:nth-child(2) p,
    .site-footer__grid > div:nth-child(3) p {
        grid-area: address !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        white-space: normal !important;
    }

    .site-footer__grid > div:nth-child(2) > a,
    .site-footer__grid > div:nth-child(3) > a {
        grid-area: phone !important;
        justify-self: end !important;
        align-self: center !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }
}

/* Extra-tight phones: keep the same structure but trim card padding slightly. */
@media (max-width: 420px) {
    .site-footer__grid > div:nth-child(2),
    .site-footer__grid > div:nth-child(3) {
        gap: 7px 12px !important;
        padding: 13px 14px !important;
    }
}

/* ============================================================================
   MOBILE FOOTER — CONNECT SECTION REDESIGN
   Keeps existing colors, typefaces, and type sizes while using the available
   width more efficiently.
   ============================================================================ */
@media (max-width: 700px) {
    .site-footer__connect {
        grid-column: 1 / -1 !important;
        padding-top: 18px !important;
        margin-top: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
    }

    .site-footer__connect > .site-footer__label {
        margin-bottom: 12px !important;
    }

    .site-footer__connect-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1.4fr) minmax(120px, 0.6fr) !important;
        gap: 12px 20px !important;
        align-items: start !important;
    }

    .site-footer__connect-item {
        min-width: 0 !important;
    }

    .site-footer__connect-label {
        display: block !important;
        margin-bottom: 4px !important;
        color: var(--khlg-light-blue) !important;
        font-family: var(--font-heading) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        letter-spacing: 0.1em !important;
        text-transform: uppercase !important;
    }

    .site-footer__connect-item a,
    .site-footer__connect-item p {
        display: block !important;
        margin: 0 !important;
        color: #ffffff !important;
        overflow-wrap: anywhere !important;
    }
}

/* Very narrow phones: stack Email and Fax so neither value feels cramped. */
@media (max-width: 420px) {
    .site-footer__connect-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* ============================================================================
   FEATURED CAPABILITIES — SCROLL-LINKED SHOWCASE
   Desktop/tablet: the section stays in view while page scrolling advances the
   four existing featured cards horizontally until the final card is revealed.
   Mobile (700px and below): the existing swipe/arrow carousel remains unchanged.
   ============================================================================ */

@media (min-width: 701px) {
    .featured.featured--scroll-showcase {
        position: relative !important;
        min-height: calc(
            100svh - var(--announcement-height) - var(--header-height) +
                var(--featured-scroll-distance, 720px)
        ) !important;
        padding-block: 0 !important;
        overflow: visible !important;
    }

    .featured.featured--scroll-showcase .featured-scroll-stage {
        position: sticky !important;
        top: calc(var(--announcement-height) + var(--header-height)) !important;
        min-height: calc(
            100svh - var(--announcement-height) - var(--header-height)
        ) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding-block: clamp(42px, 5vh, 72px) !important;
        overflow: hidden !important;
    }

    /* The page scroll controls the track while the stage is pinned. */
    .featured.featured--scroll-showcase .featured-grid {
        scroll-behavior: auto !important;
        scroll-snap-type: none !important;
        overscroll-behavior-inline: none !important;
    }
}

/* Keep the normal carousel behavior for mobile and reduced-motion users. */
@media (max-width: 700px) {
    .featured-scroll-stage {
        position: static !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .featured.featured--scroll-showcase {
        min-height: auto !important;
        padding-block: var(--section-y) !important;
    }

    .featured.featured--scroll-showcase .featured-scroll-stage {
        position: static !important;
        min-height: 0 !important;
        padding-block: 0 !important;
        overflow: visible !important;
    }
}

/* ============================================================================
   FEATURED → EXPLORE SERVICES — NORMALIZED SECTION SPACING
   The scroll showcase stays pinned, but its final card now sits near the bottom
   of the sticky stage so the transition into Explore Our Services uses the same
   overall vertical spacing rhythm as the site's standard sections.
   ============================================================================ */

@media (min-width: 961px) {
    .featured.featured--scroll-showcase .featured-scroll-stage {
        justify-content: flex-end !important;
        padding-top: clamp(58px, 5.8vw, 92px) !important;
        padding-bottom: clamp(29px, 2.9vw, 46px) !important;
    }

    .featured.featured--scroll-showcase + .services--explore {
        padding-top: clamp(29px, 2.9vw, 46px) !important;
    }
}

@media (min-width: 701px) and (max-width: 960px) {
    .featured.featured--scroll-showcase .featured-scroll-stage {
        justify-content: flex-end !important;
        padding-top: clamp(56px, 7vw, 76px) !important;
        padding-bottom: clamp(28px, 3.5vw, 38px) !important;
    }

    .featured.featured--scroll-showcase + .services--explore {
        padding-top: clamp(28px, 3.5vw, 38px) !important;
    }
}

/* Mobile already uses the site's normal section padding and remains unchanged. */

/* ============================================================================
   FEATURED CAPABILITIES — MATCH STANDARD SECTION SPACING
   Removes the large empty area above the heading while keeping the scroll-linked
   carousel behavior and the tighter transition into Explore Our Services.
   ============================================================================ */

@media (min-width: 961px) {
    .featured.featured--scroll-showcase .featured-scroll-stage {
        min-height: auto !important;
        justify-content: flex-start !important;
        padding-top: clamp(58px, 5.8vw, 92px) !important;
        padding-bottom: clamp(29px, 2.9vw, 46px) !important;
    }

    .featured.featured--scroll-showcase .featured-carousel {
        margin-top: clamp(34px, 3.8vw, 52px) !important;
    }
}

@media (min-width: 701px) and (max-width: 960px) {
    .featured.featured--scroll-showcase .featured-scroll-stage {
        min-height: auto !important;
        justify-content: flex-start !important;
        padding-top: clamp(56px, 7vw, 76px) !important;
        padding-bottom: clamp(28px, 3.5vw, 38px) !important;
    }

    .featured.featured--scroll-showcase .featured-carousel {
        margin-top: clamp(32px, 4.5vw, 44px) !important;
    }
}

/* Mobile keeps the existing normal section rhythm. */

/* ============================================================================
   PERFORMANCE — SAFE RENDERING OPTIMIZATIONS
   Google Fonts are loaded once from the Blade <head>. Lower-page sections can
   defer rendering until they are close to the viewport without changing their
   final layout or appearance.
   ============================================================================ */
@supports (content-visibility: auto) {
    .services--explore,
    .approach--feature,
    .markets,
    .commitment,
    .careers--clean,
    .final-cta,
    .site-footer {
        content-visibility: auto;
        contain-intrinsic-size: auto 900px;
    }
}

.featured-card__media,
.approach-feature__media,
.market-card,
.commitment__media,
.careers__media {
    contain: paint;
}

/* ============================================================================
   KHLG HERO — RESPONSIVE IMAGE SOURCES (2026-10-22)
   The <picture> element chooses one image per viewport: portrait sea on phones,
   4:3 Guam coastline on tablets, and original panorama on desktop. The picture
   fills the same existing photo layer; all hero text and layout stay intact.
   ============================================================================ */
.hero .hero__media picture {
    display: block;
    width: 100%;
    height: 100%;
}

.hero .hero__media picture > img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

@media (min-width: 701px) and (max-width: 1199px) {
    .hero .hero__media picture > img {
        object-position: center center !important;
    }
}

@media (max-width: 700px) {
    /* Let the newly generated ocean dominate the background on phones. */
    .hero .hero__media picture > img {
        object-position: center 54% !important;
    }

    /* Lightly darken the copy side only, leaving the ocean/tower visible. */
    .hero .hero__overlay {
        display: block !important;
        opacity: 1 !important;
        pointer-events: none !important;
        background: linear-gradient(
            90deg,
            rgba(8, 22, 64, 0.54) 0%,
            rgba(8, 22, 64, 0.31) 54%,
            rgba(8, 22, 64, 0.07) 100%
        ) !important;
        filter: none !important;
    }
}

/* ============================================================================
   KHLG MOBILE / TABLET NAVIGATION — 2026-10-22
   Floating, keyboard-friendly menu; does not change the desktop navigation.
   Appended as a focused override to preserve all existing homepage styling.
   ============================================================================ */
@media (max-width: 1280px) {
    /* Do NOT set overflow-y: hidden on html/body here. It turns the document
       into a different scroll container and immediately breaks the sticky
       header after the visitor has scrolled down. The backdrop intercepts
       touch and wheel instead, without moving the page or menu. */
    html.nav-menu-open,
    body.nav-menu-open {
        overflow-x: clip !important;
        overflow-y: visible !important;
    }

    .site-header .site-header__inner {
        position: relative;
        z-index: 4;
    }

    .site-header .menu-toggle {
        position: relative;
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        border-radius: 9px;
        border: 1px solid rgba(210, 239, 247, 0.35) !important;
        background: rgba(255, 255, 255, 0.055);
        cursor: pointer;
        transition:
            background 0.2s ease,
            border-color 0.2s ease;
    }

    .site-header .menu-toggle:hover,
    .site-header .menu-toggle[aria-expanded="true"] {
        background: rgba(172, 215, 242, 0.15);
        border-color: rgba(210, 239, 247, 0.68) !important;
    }

    .site-header .menu-toggle > span {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 23px;
        height: 2px;
        margin: 0 !important;
        border-radius: 2px;
        background: #fff;
        transform: translate(-50%, -50%) translateY(-5px);
        transition: transform 0.24s ease;
    }

    .site-header .menu-toggle > span:last-child {
        transform: translate(-50%, -50%) translateY(5px);
    }

    .site-header .menu-toggle[aria-expanded="true"] > span:first-child {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .site-header .menu-toggle[aria-expanded="true"] > span:last-child {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .mobile-nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 999; /* page < backdrop < sticky header / open panel */
        background: rgba(8, 22, 64, 0.52);
        backdrop-filter: blur(3px);
        touch-action: none;
        overscroll-behavior: none;
        animation: khlg-nav-backdrop-in 0.22s ease both;
    }

    .mobile-nav-backdrop[hidden] {
        display: none !important;
    }

    .site-header .mobile-nav {
        position: absolute !important;
        top: calc(100% + 12px) !important;
        left: auto !important;
        right: clamp(12px, 4vw, 64px) !important;
        z-index: 5 !important;
        width: min(460px, calc(100vw - 24px)) !important;
        max-height: calc(100dvh - var(--header-height) - 24px) !important;
        overflow-y: auto !important;
        border: 1px solid rgba(164, 222, 238, 0.25) !important;
        border-radius: 15px;
        background: linear-gradient(
            155deg,
            #173869 0%,
            #102a51 100%
        ) !important;
        box-shadow: 0 24px 70px rgba(8, 22, 64, 0.4);
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(172, 215, 242, 0.35) transparent;
        animation: khlg-nav-panel-in 0.28s cubic-bezier(0.2, 0.72, 0.2, 1) both;
    }

    .site-header .mobile-nav[hidden] {
        display: none !important;
    }

    .site-header .mobile-nav .mobile-nav__inner {
        display: block;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 23px 24px 21px !important;
    }

    .mobile-nav__eyebrow {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 3px 13px;
        color: #acd7f2;
        font-family: var(--font-heading);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .mobile-nav__eyebrow-dot {
        width: 7px;
        height: 7px;
        flex: 0 0 7px;
        border-radius: 50%;
        background: #4ea4d9;
        box-shadow: 0 0 0 4px rgba(78, 164, 217, 0.18);
    }

    .mobile-nav__links {
        display: grid;
        border-top: 1px solid rgba(172, 215, 242, 0.2);
    }

    /* Explicitly undo older last-child button styles on the sixth menu link. */
    .site-header .mobile-nav .mobile-nav__links > a,
    .site-header .mobile-nav .mobile-nav__links > a:last-child {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 20px;
        align-items: center;
        column-gap: 12px;
        width: 100% !important;
        min-height: 58px;
        margin: 0 !important;
        padding: 10px 10px !important;
        border: 0;
        border-bottom: 1px solid rgba(172, 215, 242, 0.17);
        border-radius: 0;
        background: transparent !important;
        color: #fff !important;
        font-family: var(--font-heading);
        text-decoration: none;
        transition:
            background 0.2s ease,
            color 0.2s ease;
    }

    .site-header .mobile-nav .mobile-nav__links > a:hover,
    .site-header .mobile-nav .mobile-nav__links > a:focus-visible,
    .site-header .mobile-nav .mobile-nav__links > a.is-active {
        background: rgba(172, 215, 242, 0.115) !important;
    }

    .mobile-nav__label {
        font-size: clamp(17px, 1.6vw, 19px);
        font-weight: 600;
        line-height: 1.25;
    }

    .mobile-nav__links i {
        justify-self: end;
        font-size: 12px;
        color: #acd7f2;
        opacity: 0.82;
        transition: transform 0.2s ease;
    }

    .mobile-nav__links a:hover i,
    .mobile-nav__links a:focus-visible i {
        transform: translateX(4px);
    }

    .mobile-nav__footer {
        padding-top: 19px;
    }

    .site-header .mobile-nav .mobile-nav__footer > .mobile-nav__contact {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100% !important;
        min-height: 52px;
        margin: 0 !important;
        padding: 13px 17px !important;
        border: 1px solid #fff;
        border-radius: 8px;
        background: #fff !important;
        color: #173869 !important;
        font-family: var(--font-heading);
        font-size: 17px;
        font-weight: 700;
        transition: background 0.2s ease;
    }

    .site-header .mobile-nav .mobile-nav__footer > .mobile-nav__contact:hover {
        background: #d2eff7 !important;
    }

    .mobile-nav__contact i {
        font-size: 15px;
    }
}

@media (max-width: 576px) {
    .site-header .mobile-nav {
        right: 12px !important;
    }

    .site-header .mobile-nav .mobile-nav__inner {
        padding: 20px 18px 18px !important;
    }

    .site-header .mobile-nav .mobile-nav__links > a {
        min-height: 54px;
    }
}

@media (max-height: 630px) and (max-width: 1280px) {
    .site-header .mobile-nav .mobile-nav__inner {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
    .site-header .mobile-nav .mobile-nav__links > a {
        min-height: 48px;
    }
}

@keyframes khlg-nav-panel-in {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes khlg-nav-backdrop-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header .mobile-nav,
    .mobile-nav-backdrop {
        animation: none !important;
    }
    .site-header .menu-toggle > span,
    .mobile-nav__links i {
        transition: none !important;
    }
}