/* =============================================================
   MOBILE ROUTING — style.css serves desktop and tablet only
   ─────────────────────────────────────────────────────────────
   Phone visitors (767px and below) are routed to mobile.php
   at the server level via mobile-detect.php. This stylesheet
   is intentionally not optimised for phone screens.
   mobile.php carries its own fully self-contained inline CSS.

   Media queries in this file below 768px have been removed
   as dead code. Any remaining sub-768px rules serve tablet
   portrait or intermediate viewport sizes (768px–1024px)
   where the full desktop site is still presented.

   The @media block below is a CSS-level safety net only.
   Normal phone visitors are redirected before this loads.
   ============================================================= */

@media screen and (max-width: 767px) {
    /* Hide the full desktop layout on any phone that bypasses
       server-side routing. Show a minimal redirect prompt. */
    body > *:not(.m-fallback) {
        display: none !important;
    }
    .m-fallback {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100svh;
        background: #010A18;
        color: #F8FAFC;
        font-family: system-ui, sans-serif;
        text-align: center;
        padding: 32px 24px;
        gap: 24px;
        box-sizing: border-box;
    }
    .m-fallback p {
        font-size: 16px;
        line-height: 1.6;
        color: #C6D4E4;
        max-width: 300px;
    }
    .m-fallback a {
        display: inline-block;
        padding: 15px 30px;
        background: transparent;
        border: 1.5px solid #FFC017;
        color: #FFC017;
        font-weight: 700;
        font-size: 14px;
        text-decoration: none;
        border-radius: 14px;
        letter-spacing: 0.05em;
    }
}

:root {
    /* Core Brand Tokens */
    --brand-navy: #081F41;
    --brand-night: #010A18;
    --brand-gold: #FFC017;
    --brand-gold-soft: #FFC84A;
    --brand-ice: #D1D9E6;
    --panel-white: #F9FAFC;
    --text-muted-light: #ADBBD1;
    --overlay-white-35: rgba(255, 255, 255, 0.35);
    --overlay-cream-20: rgba(245, 245, 241, 0.2);

    /* Adaptive Light Environment. Midday default */
    --bg-foundation: #F8F9F4;
    --bg-surface: #FDFDF8;
    --bg-section: #F1F3EE;
    --bg-elevated: #FEFEFA;
    --bg-control-active: #FFF7E2;
    --bg-button: #F1F3EE;
    --bg-button-hover: var(--brand-navy);

    /* Text */
    --text-primary: #081F41;
    --text-secondary: #243854;
    --text-tertiary: #4C5E78;
    --text-on-dark: #F1F4F7;
    --text-muted-on-dark: #C6D0DA;

    /* Borders and emphasis */
    --border-strong: #081F41;
    --border-accent: #FFC017;
    --focus-ring: rgba(255, 192, 23, 0.35);
    --shadow-button: 0px 8px 18px rgba(0, 0, 0, 0.18);

    /* Night Environment */
    --night-bg-foundation: #0F1318;
    --night-bg-surface: #161C22;
    --night-bg-section: #1D252D;
    --night-text-primary: #EEF2F5;
    --night-text-secondary: #BEC8D2;
    --night-border: #2B3641;
    --night-accent: #FFC84A;

    /* Legacy compatibility aliases */
    --color-site-white: var(--bg-surface);
    --color-site-white-deep: var(--bg-button);
    --color-brand-navy: var(--brand-navy);
    --color-brand-night: var(--brand-night);
    --color-brand-gold: var(--brand-gold);
    --color-brand-ice: var(--brand-ice);
}

:root[data-time="morning"] {
    --bg-foundation: #FBFCF8;
    --bg-surface: #FFFFFB;
    --bg-section: #F3F5F1;
    --bg-elevated: #FFFFFF;
    --bg-control-active: #FFF9E8;
    --bg-button: #F3F5F1;
}

:root[data-time="midday"] {
    --bg-foundation: #F8F9F4;
    --bg-surface: #FDFDF8;
    --bg-section: #F1F3EE;
    --bg-elevated: #FEFEFA;
    --bg-control-active: #FFF7E2;
    --bg-button: #F1F3EE;
}

:root[data-time="evening"] {
    --bg-foundation: #F6F2EA;
    --bg-surface: #FCF8F1;
    --bg-section: #EEE9E1;
    --bg-elevated: #FDF9F2;
    --bg-control-active: #FDF1D8;
    --bg-button: #EEE9E1;
}

:root[data-time="night-light"] {
    --bg-foundation: #F1ECE3;
    --bg-surface: #F8F3EB;
    --bg-section: #E8E1D8;
    --bg-elevated: #FAF5ED;
    --bg-control-active: #F8E8C9;
    --bg-button: #E8E1D8;
}

:root[data-theme="night-environment"] {
    --bg-foundation: var(--night-bg-foundation);
    --bg-surface: var(--night-bg-surface);
    --bg-section: var(--night-bg-section);
    --bg-elevated: #222B34;
    --bg-control-active: #24303B;
    --bg-button: #1D252D;
    --bg-button-hover: var(--night-accent);
    --text-primary: var(--night-text-primary);
    --text-secondary: var(--night-text-secondary);
    --text-tertiary: #8FA0B0;
    --text-on-dark: var(--night-text-primary);
    --text-muted-on-dark: var(--night-text-secondary);
    --border-strong: var(--night-border);
    --border-accent: var(--night-accent);
    --color-site-white: var(--bg-surface);
    --color-site-white-deep: var(--bg-button);
}

:root[data-theme="night-environment"] .page-box-1 h1,
:root[data-theme="night-environment"] .page-box-1 h5,
:root[data-theme="night-environment"] .page-box-1 h6,
:root[data-theme="night-environment"] .page-box-1 p,
:root[data-theme="night-environment"] .page-box-3 h1,
:root[data-theme="night-environment"] .page-box-3 h3,
:root[data-theme="night-environment"] .page-box-3 h5,
:root[data-theme="night-environment"] .page-box-3 p,
:root[data-theme="night-environment"] .page-box-4 h1,
:root[data-theme="night-environment"] .page-box-4 h3,
:root[data-theme="night-environment"] .page-box-5 h1,
:root[data-theme="night-environment"] .page-box-5 h3,
:root[data-theme="night-environment"] .page-box-8 h1,
:root[data-theme="night-environment"] .page-box-8 h5,
:root[data-theme="night-environment"] .page-box-8 p,
:root[data-theme="night-environment"] .page-box-10 h1,
:root[data-theme="night-environment"] .page-box-10 h5,
:root[data-theme="night-environment"] .page-box-10 p,
:root[data-theme="night-environment"] .page-box-11 h1,
:root[data-theme="night-environment"] .page-box-11 h3,
:root[data-theme="night-environment"] .page-box-11 p,
:root[data-theme="night-environment"] .page-box-12 h1,
:root[data-theme="night-environment"] .page-box-12 p,
:root[data-theme="night-environment"] .page-box-14 h1,
:root[data-theme="night-environment"] .page-box-14 h3,
:root[data-theme="night-environment"] .text-box-js h1,
:root[data-theme="night-environment"] .text-box-js h3,
:root[data-theme="night-environment"] .text-box-js p,
:root[data-theme="night-environment"] .terms-box h1,
:root[data-theme="night-environment"] .terms-box h3,
:root[data-theme="night-environment"] .terms-box p,
:root[data-theme="night-environment"] .terms-box li,
:root[data-theme="night-environment"] .faq-container .accordion_content p,
:root[data-theme="night-environment"] .accordion_content li,
:root[data-theme="night-environment"] .sitemap-container h1,
:root[data-theme="night-environment"] .grid-section h2,
:root[data-theme="night-environment"] .grid-section a,
:root[data-theme="night-environment"] blockquote,
:root[data-theme="night-environment"] th,
:root[data-theme="night-environment"] td {
    color: var(--text-primary) !important;
}

:root[data-theme="night-environment"] .page-box-1 h2,
:root[data-theme="night-environment"] .page-box-1 h3,
:root[data-theme="night-environment"] .page-box-1 h4,
:root[data-theme="night-environment"] .page-box-1 h7,
:root[data-theme="night-environment"] .page-box-3 h2,
:root[data-theme="night-environment"] .page-box-3 h4,
:root[data-theme="night-environment"] .page-box-4 h2,
:root[data-theme="night-environment"] .page-box-8 h4,
:root[data-theme="night-environment"] .page-box-8 h6,
:root[data-theme="night-environment"] .page-box-10 h2,
:root[data-theme="night-environment"] .page-box-10 h3,
:root[data-theme="night-environment"] .page-box-10 h4,
:root[data-theme="night-environment"] .page-box-11 h2,
:root[data-theme="night-environment"] .page-box-11 h4,
:root[data-theme="night-environment"] .page-box-12 h2,
:root[data-theme="night-environment"] .page-box-14 h2,
:root[data-theme="night-environment"] .text-box-js h2,
:root[data-theme="night-environment"] .faq-container span,
:root[data-theme="night-environment"] .icon {
    color: var(--text-secondary) !important;
}

:root[data-theme="night-environment"] .page-box-8 h2 {
    color: #5871a7 !important;
}

:root[data-theme="night-environment"] .page-box-8 h3 {
    color: rgb(111, 130, 156) !important;
}

:root[data-theme="night-environment"] blockquote {
    background: var(--bg-section) !important;
    color: var(--text-primary) !important;
}

:root[data-theme="night-environment"] table,
:root[data-theme="night-environment"] th,
:root[data-theme="night-environment"] td {
    border-color: var(--night-border) !important;
}

:root[data-theme="night-environment"] thead {
    background-color: var(--bg-section) !important;
}

/* ================================
   Poppins Font Family Full Set
   ================================ */

@font-face {
    font-family: "Poppins";
    src: url("/fonts/poppins-v24-latin-100.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("/fonts/poppins-v24-latin-100italic.woff2") format("woff2");
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Poppins";
    src: url("/fonts/poppins-v24-latin-200.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("/fonts/poppins-v24-latin-200italic.woff2") format("woff2");
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("/fonts/poppins-v24-latin-300.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("/fonts/poppins-v24-latin-300italic.woff2") format("woff2");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Poppins";
    src: url("/fonts/poppins-v24-latin-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("/fonts/poppins-v24-latin-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("/fonts/poppins-v24-latin-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("/fonts/poppins-v24-latin-800.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("/fonts/poppins-v24-latin-900.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0; 
    padding: 0;
    box-sizing: border-box;
    outline: none; 
    border: none;
    text-decoration: none;
    text-transform: none;
    font-family: "Poppins", "Montserrat", sans-serif;
    box-shadow: none;
    outline: none;
}
html {
    height: 100%;
    height: -webkit-fill-available;
}
.error-message {
    min-height: 20px;
    color: red;
}
body {
    font-family: "Poppins", "Montserrat", sans-serif;
    font-weight: normal;
    font-style: normal;
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    cursor: default;
    overflow-x: hidden;
    margin: 0;
    padding: 0;

    position: relative;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:linear-gradient(to bottom, var(--overlay-white-35), var(--overlay-cream-20));
    background-repeat: repeat;
    background-size: auto, 700px 700px;
    background-position: center top, left top;
    pointer-events: none;
    z-index: -1;
}
html {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    box-sizing: border-box;
}
html, body, ul, ol, li, div, p {
    list-style: none;
}
/* Universal box-sizing to avoid overflow issues */
*,
*::before,
*::after {
    box-sizing: border-box;
}

.skip-link {
    position: fixed;
    top: -100px;
    left: 16px;
    background: var(--brand-navy);
    color: #FFFFFF;
    border: 2px solid var(--border-accent);
    padding: 12px 18px;
    z-index: 10000;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    border-radius: 6px;
    box-shadow: 0 10px 22px rgba(7, 20, 38, 0.22);
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 16px;
    left: 16px;
    outline: 3px solid var(--border-accent);
    outline-offset: 4px;
}
  
header, div, .header-section {
    list-style: none;
}
.container,
.login-container,
.verify-container,
.reset-container,
.index-container {
    background-color: var(--color-site-white);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 15px;
    text-align: center;
    width: 100%;
    max-width: 400px;
    box-shadow: none;
}
.input-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    height: 51px;
    position: relative;
    width: 300px;
    margin: auto;
    margin-bottom: 32px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 300;
    padding: 0 18px;
    box-shadow: inset 0 2px 6px 0 rgba(0, 0, 0, 0.8), inset 0 4px 20px 0 rgba(0, 0, 0, 0.19);
}
.input-group input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 300;
    padding: 0 18px;
    border-radius: 25px;
    box-shadow: none; /* Remove any additional shadow on the input itself */
}
.input-group input::placeholder {
    line-height: 51px;
    text-align: center;
    padding-left: 0;
}
#main-animation {
    /* Visibility and opacity controlled by .hero-media entrance sequence */
    transition: none;
}
/* Index Page */
.index-container {
    min-height: 100vh;
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas: 
        "main" 
        "footer";
    gap: 0rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 0;
    background: var(--bg-elevated);
}
#main-content p {
    font-size: clamp(18px, 2.5vw, 28px);
    line-height: 1.3;
    font-weight: 300;
    color: var(--text-primary);
}
.slate-wrapper p {
    font-size: clamp(18px, 2.5vw, 28px);
    line-height: 1.3;
    font-weight: 300;
    color: var(--text-primary);
}
.index-container main {
    max-width: 100%;
    min-height: 100vh;
    grid-area: main;
    display: flex;
    text-align: center;
    align-items: center;
    padding-bottom: 3vw;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 0px;
    background-color: var(--color-site-white);
    box-shadow: none;
    border: none;
    margin-top: 50px;
}
.index-container main h2 {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .5px;
    color: var(--text-primary);
    padding-bottom: 30px;
}
.index-container main h3 {
    padding-top: 1vw;
    font-size: 60px;
    text-transform: uppercase;
    color: var(--border-accent);
    letter-spacing: 1.75px;
    line-height: 70px;
    padding-bottom: 1vh;
    width: 90%;
    margin: auto;
}
.index-container main h4 {
    color: var(--text-primary);
    font-size: 31px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: .5px;
    text-align: center;
    padding-left: 8.5vw;
    padding-right: 8.5vw;
    padding-top: 2vw;
    padding-bottom: 1vw;
}
.index-container main h5 {
    color: var(--text-primary);
    font-size: 60px;
    font-weight: 300;
    line-height: 70px;
    letter-spacing: .125px;
    text-align: center;
    padding-top: 2vh;
    padding-bottom: 2vh;
}
.index-container main h6 {
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 300;
    line-height: 25px;
    letter-spacing: .125px;
    text-align: center;
    padding-top: 1vw;
    padding-bottom: 1vw;
}
.index-container main h7 {
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 700;
    line-height: 25px;
    letter-spacing: .125px;
    text-align: center;
    padding-top: 1vw;
    padding-bottom: 1vw;
}
.index-container h8 {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
    line-height: 25px;
    letter-spacing: .125px;
    text-align: center; 
}
.index-container .content .btnb {
    color: var(--text-primary);
    background-color:rgb;
    font-size: 22px;
    font-weight: 300;
    line-height: 24px;
    padding-top: 5vh;
    padding-bottom: 5vh;
    text-decoration: none;
    transition: text-decoration 0.2s ease-in-out; 
}
.index-container .btnb:hover {
    cursor: pointer;
    text-decoration: underline;
}
.index-container .content .btny {
    color: var(--border-accent);
    background-color:var(--color-site-white);
    font-size: 22px;
    font-weight: 300;
    line-height: 24px;
    padding-top:  2vh;
    padding-bottom: 5vh;
    text-decoration: none;
    transition: text-decoration 0.2s ease-in-out; 
} 
.index-container .btny:hover {
    cursor: pointer;
    text-decoration: underline;
}
.index-container .input-group {
    height: 51px;
    position: relative;
    width: 300px;
    margin: auto;
    margin-bottom: 32px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 300;
    padding: 0 18px;
    box-shadow: inset 0 2px 6px 0 rgba(0, 0, 0, 0.8), inset 0 4px 20px 0 rgba(0, 0, 0, 0.19);
}
.index-container .input-group input::placeholder,
.index-container .message textarea::placeholder {
    color: var(--text-muted-light);
    line-height: 50px;
}
.index-container .input-group textarea::placeholder {
    padding: 0px 8px;
}
.index-container .input-group input:focus, textarea:focus {
    color: var(--text-primary);
}
.index-container main .content .button:hover {
    box-shadow: none;
}
.reset-container {
    height: 400px;
    width: 400px;
    background-color: var(--bg-elevated);
    border-radius: 2px;
    margin: auto;
    margin-top: 42px;
    box-shadow: 0 4px 8px 0 rgb(0, 0, 0, 0.8), 0 6px 20px 0 rgb(0, 0, 0, 0.19);
}
.reset-container h2 {
    padding-top: 50px;
}

.index-container footer.index-footer {
    grid-area: footer;
    width: 100%;
    height: 25vh;
    background: linear-gradient(var(--text-primary), black);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 3.5fr 0.5fr;
    grid-template-areas:
        "left-box center-box right-box"
        "bottom-box bottom-box bottom-box";
    gap: 0.2rem;
}

/* Index Footer */
.index-container footer.index-footer {
    grid-area: footer;
    width: 100%;
    height: 25vh;
    background: var(--brand-night);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 3.5fr 0.5fr;
    grid-template-areas:
        "left-box center-box right-box"
        "bottom-box bottom-box bottom-box";
    gap: 0.2rem;
}
.index-container footer .left-box {
    grid-area: left-box;
    display: grid;
    height: 20vh;
    padding-top: 1vw;
    align-items: top;
    justify-content: center;
}
.index-container footer .center-box {
    grid-area: center-box;
    display: grid;
    height: 20vh;
    align-items: top;
    text-align: center;
    padding-top: 1vw;
    justify-content: center;
}
.index-container footer .right-box {
    grid-area: right-box;
    height: 20vh;
    display: grid;
    align-items: top;
    padding-top: 1vw;
    justify-content: center;
}
.index-container footer .bottom-box {
    grid-area: bottom-box;
    display: grid;
    height: 5vh;
    justify-content: center;
}
.index-container footer h4 {
    color: var(--color-site-white);
    text-decoration: underline;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.5px;
    padding-top: 20px;
    text-align: center;
}
.index-container footer a {
    color: var(--text-muted-light);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-align: center;
}
.index-container footer a:hover {
    color: var(--border-accent);
}
.index-container footer h5 {
    color: var(--color-site-white);
    font-size: 13px;
    font-weight: 300;
    padding-top: 1vw;
    padding-bottom: 5px;
}
/* Media Queries */
    @media screen and (min-width: 1025px) {
        .index-container .upperheader {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            height: auto;
            padding: 0 20px; /* Add padding if needed */
        }
        .index-container .logobox {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .index-container .logobox img {
            height: auto;
            width: 150px; /* Adjust size for desktop */
        }
    }
    @media screen and (max-width: 1024px) {

        .index-container footer.index-footer {
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            grid-template-areas: 
                "left-box" 
                "center-box" 
                "right-box" 
                "bottom-box";
            height: auto;
            gap: 1rem;
        }
        .index-container footer .left-box,
        .index-container footer .center-box,
        .index-container footer .right-box,
        .index-container footer .bottom-box {
            height: auto;
            text-align: center; /* Center-align text for tablet and mobile */
        }
        .index-container main {
            margin-top: 40px;
        }
        .index-container main h3 {
            padding-top: 1vw;
            font-size: 50px;
            text-transform: uppercase;
            letter-spacing: 1.65px;
            line-height: 55px;
            padding-bottom: 1vh;
            width: 90%;
            margin: auto;
        }
        .index-container main h4 {
            font-size: 25px;
            font-weight: 600;
            line-height: 30px;
            letter-spacing: .4px;
            text-align: center;
            padding-left: 8.5vw;
            padding-right: 8.5vw;
            padding-top: 2vw;
            padding-bottom: 1vw;
        }
    }
   
    /* Small Tablet */
    @media screen and (min-width: 481px) and (max-width: 768px) {
        .index-container main {
            margin-top: 30px;
        }
        .index-container picture img {
            width: auto;
            height: 125px;
        }
        .index-container main h2 {
            font-size: 18px;
            letter-spacing: .3px;
            padding-bottom: 24px;
        }
        .index-container main h3 {
            font-size: 34px;
            letter-spacing: 1px;
            line-height: 37px;
        }
        .index-container main h4 {
            font-size: 18px;
            line-height: 21px;
            letter-spacing: .2px;
            padding-top: 25px;
        }
        .faq-container span,
        .icon {
            font-size: clamp(18px, 2.5vw, 28px);
            line-height: 1.3;
            letter-spacing: 0.4px;
        }
        .faq-container .accordion_content p {
            font-size: clamp(18px, 2.5vw, 28px);
            line-height: 1.3;
            letter-spacing: 0.3px;
        }
        .accordion_content li {
            font-size: clamp(18px, 2.5vw, 28px);
            line-height: 1.3;
            letter-spacing: 0.3px;
        }
    }   

    .contact-section{
        background: var(--brand-night);
        min-height: 100vh;
        padding-top: 14vh;
    }
    .contact-section h1{
        text-align: center;
        font-size: 4vw;
        letter-spacing: 2px;
        color: var(--color-site-white);
        margin-left: 3vw;
        margin-right: 3vw;
    }
    .border{
        width: 35vw;
        height: 10px;
        background:var(--border-accent);
        margin: 40px auto;
    }
    .contact-form{
        max-width: 65vw;
        height: auto;
        margin: auto;
        padding: 0 10px;
        overflow: hidden;
    }
    .contact-form-text{
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin: 4vh 0;
        border: 0;
        background: var(--color-site-white);
        padding: 20px 40px;
        outline: none;
        font-weight: 300;
        font-size: 1.85vh;
    }
    .contact-form-text:focus{
        box-shadow: 0 0 10px 1px lightblue;
    }
    textarea.contact-form-text{
        resize: none;
        height: 120px;
        font-weight: 300;
        font-size: 1.85vh;
    }
    
    
    /*  --------- customized scrollbar -------  */
    /* width */
    ::-webkit-scrollbar {
    width: clamp(6px, 0.65vw, 8px);
    height: clamp(6px, 0.65vw, 8px);
    }
    /* Track */
    ::-webkit-scrollbar-track {
    background: rgba(255, 255, 245, 0.85);
    border: 0;
    border-radius: 999px;
    }
    /* Handle */
    ::-webkit-scrollbar-thumb {
    background: var(--border-accent);
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 245, 0.85);
    }
    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
    background: rgb(229, 171, 10);
    }
    html, body {
    scrollbar-width: thin;
    scrollbar-color: var(--border-accent) rgba(255, 255, 245, 0.85);
    }
    /*  --------- Help Page -------  */
    .helppage-container {
    width: 75%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 30vh 8vh 169vh;
    gap: 0px;
    justify-items: stretch;
    }
    .helppage-container > div {
    text-align: center;
    padding: 0px;
    }
    .helppage-container > div:nth-child(1) {
    grid-column: 1 / span 1;
    }
    .helppage-container > div:nth-child(2) {
    grid-column: 2 / span 1;
    align-items: center;
    margin-top: 8vh;
    }
    .helppage-container > div:nth-child(3) {
    grid-column: 3 / span 1;
    padding-top: 14vh;
    }
    .helppage-container > div:nth-child(4) {
    grid-column: 1 / span 3;
    }
    .helppage-container > div:nth-child(5) {
    grid-column: 1 / span 3;
    align-items: baseline;
    }
    .helppage-container h1 {
    color: var(--text-primary);
    font-size: 2.5rem;
    }
    .helppage-container p {
    color: var(--text-primary);
    font-size: 1.5rem;
    line-height: 2.5rem;
    text-align: justify;
    text-indent: 45px;
    letter-spacing: .05vh;
    }
    /*  --------- S9 Buttons -------  */
    .backball-img {
    cursor: pointer;
    transition: linear 3s;
    }
    .backball-img:hover{
    transform: scale(1.04);
    transition: linear 0.45s;
    }
    .help-img {
    cursor: pointer;
    transition: linear 3s;
    }
    .help-img:hover{
    transform: scale(1.06);
    transition: linear 0.45s;
    }
    .mail-img{
    cursor: pointer;
    transition: linear 3s;
    }
    .mail-img:hover {
    transform: scale(1.04);
    transition: linear 3s;
    }
    /*  --------- S9 Navigation Menu -------  */
    .nav-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 343px;
    height: 343px;
    gap: 10px;
    margin-left: 0 auto;
    margin-right: 0 auto;
    width: 50%;
    }
    .nav-buttons img{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0 auto;
    margin-bottom: auto;
    background: var(--color-site-white);
    }
    .navmenu-container {
    max-width: 100vw;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 30vh 50vh 20vh;
    grid-template-areas:
    "headerN"
    "mainN"
    "footerN";
    min-height: 100vh;
    max-width: 95vw;
    justify-content: stretch;
    align-items: center;
    margin: 0 auto;
    }
    .navmenu-container header {
    grid-area: headerN;
    grid-column: 1 / span 1;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 25vh 5vh;
    grid-template-areas:
    "upperheader"
    "lowerheader";
    align-items: center;
    justify-items: center;
    }
    .navmenu-container upperheader {
    grid-area: upperheader;
    display: block;
    align-items: center;
    justify-content: center;
    }
    .navmenu-container lowerheader {
    grid-area: lowerheader;
    color: var(--text-primary);
    padding-bottom: 11px;
    }
    .navmenu-container lowerheader h1 {
    font-size: 2em;
    font-weight: 200;
    color: var(--text-primary);
    }
    .navmenu-container main{
    padding: 0em;
    width: 100%;
    height: 100%;
    display: grid;
    grid-area: mainN;
    grid-column: span 1;
    justify-items: center;
    align-items: center;
    }
    .navmenu-container .nav-buttons {
    width: 360px;
    height: 360px;
    }
    .navmenu-container main a {
    width: 111px;
    height: 111px;
    background: var(--text-primary);
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 50% 50%;
    grid-template-areas:
    "upperbox"
    "lowerbox";
    gap: 11px;
    cursor: pointer;
    box-shadow: 5px 5px 6px rgb(116, 111, 111);
    }
    .navmenu-container upperbox {
    grid-area: upperbox;
    height: auto;
    justify-content: center;
    padding-top: 10px;
    }
    .navmenu-container lowerbox {
    grid-area: lowerbox;
    }
    .navmenu-container i{
    display: flex;
    font-size: 4vh;
    justify-content: center;
    margin-top: 2vh;
    }
    .navmenu-container a:nth-child(3) {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    background-color: var(--border-accent);
    box-shadow: 5px 5px 9px rgb(116, 111, 111);
    }
    .navmenu-container a:hover {
    box-shadow: none;
    }
    .nav-buttons h3{
    color: var(--color-brand-ice);
    font-weight: 200;
    font-size: 0.85em;
    line-height: 1.3em;
    letter-spacing: .04em;
    align-content: center;
    vertical-align: auto;
    text-align: center;
    margin-bottom: 2vh;
    }
    .navmenu-container footer{
    grid-area: footerN;
    grid-column: 1 / span 1;
    margin: auto auto;
    }
    .navmenu-container h1 {
    color: var(--text-primary);
    font-weight: 200;
    font-size: 2vh;
    line-height: 2.5vh;
    }
.footer3 {
    height: 20vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer3 .page-buttons {
    display: flex;
    justify-content: center;
}
/*  --------- Terms & Conditions Page OF Corporate Site ------- */
.loginx-container {
    height: 100vh;
    overflow: hidden;
    background: var(--color-site-white);
}
.terms-box-wrapper {
    display: flex;
    justify-content: center;
    align-content: flex-start;
}
.terms-box-wrapper ul, 
.terms-box-wrapper li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.terms-box {
    width: 85%;
    height: 75vh;
    background-color: var(--color-site-white);
    color: var(--text-primary);
    padding: 50px 30px;
    margin-top: 100px;
    border: 9px solid var(--text-primary);
    box-shadow: inset 0 2px 6px 0 rgb(0, 0, 0, 0.8), inset 0 4px 20px 0 rgb(0,0,0,0.19);
    margin-bottom: 0px;
}
.terms-box form {
    max-width: 816px !important; /* ~8.5 inches */
    width: 100% !important;
    margin: 0 auto;
    display: block;
}

loginWrapper {
    margin: auto;
    justify-content: center;
    align-content: center;
}
.terms-text {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    height: 72vh;
    overflow-y: auto;
    margin-left: 30px;
    height: 65vh;
}
.terms-text picture {
    padding-top: 45px;
    padding-bottom: 45px;
    margin: 0 auto;
}
loginWrapper .login-form-text  {
    display: flex;
    width: 300px;
    height: 50px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 300;
    text-align: center;
    box-shadow: inset 0 2px 6px 0 rgb(0, 0, 0, 0.8), inset 0 4px 20px 0 rgb(0,0,0,0.19);
    margin-bottom: 25px;
    justify-content: space-between;
}
.terms-text::-webkit-scrollbar {
    width: 6px;
}
.terms-text::before,
.terms-text::after,
.terms-text *::before,
.terms-text *::after {
    content: "";
    display: none;
}
.terms-box h1 {
    color: var(--text-primary);
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 800;
    letter-spacing: 0.8px;
    margin-top: 11px;
    padding-bottom: 24px;
    text-align: left;
}
.terms-box h2 {
    color: var(--text-primary);    
    font-size: 26px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.8px;
    text-align: center;
    padding-bottom: 16px;
    padding-top: 16px;
}
.terms-box h3 {
    color: var(--text-primary);    
    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.8px;
    text-align: left;
    padding-bottom: 16px;
    padding-top: 16px;
}
.terms-box p {
    color: var(--text-primary);
    font-size: 24px !important;
    font-weight: 300;
    line-height: 22px;
    text-align: justify;
    width: 98%;
    padding-bottom: 10px;
}
.terms-box span {
    font-size: clamp(18px, 2.5vw, 24px);
}
.terms-box p span {
    font-weight: 300;
}
.terms-text .square-listing {
    list-style-type: square;
    font-size: 1.9vw;
    font-weight: 300;
    line-height: 2.4vw;
    text-align: justify;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    color: var(--border-accent);
}
.terms-box ul {
    color: var(--text-primary);
    font-size: 22 !important;
    font-weight: 300;
    line-height: 22px;
    text-align: justify;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    width: 90%; 
    margin: 0 auto;
}
.terms-box li {
    color: var(--text-primary);
    font-size: 22px !important;
    font-weight: 300;
    line-height: 22px;
    text-align: justify;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
}
.tc-buttons {
display: flex;
padding: 0 20px;
justify-content: space-between;
}

.general-text {
width: 80%;
margin: auto;
text-align: justify;
}
.general-text h5 {
text-align: center;
font-size: clamp(18px, 2.5vw, 24px);
}
/*  --------- Container Inventory 2 ------- */
.container-2 {
    display: grid;
    height: 100vh;
    width: 100%;
    grid-template-columns: auto;
    grid-template-rows: 20vh 65vh 15vh;
    grid-template-areas:
        "header"
        "main"
        "footer";
}
    .squares-container .terms-box-wrapper {
        margin-top: 0px;
        display: flex;
        align-items: flex-start;
        height: calc(60vh-60px);
        justify-content: center;
        position: relative;
    }
    .squares-container .terms-box {
        padding: 60px;
        width: 80%;
        height: 100%;
        box-sizing: border-box;
    }

        .terms-text h1, .terms-text h2, .terms-text p, .terms-text ul {
            margin-bottom: 15px;
        }
        .terms-box-wrapper h1 {
            font-size: 47px;
            margin-bottom: 0;
            line-height: 60px;
            padding-bottom: 22px;
            text-align: center;
        }
        .terms-text ul {
            list-style-type: square;
            padding-left: 20px;
            font-size: 16px;
        }
        .terms-text ul, 
        .terms-text li {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .terms-text ul li {
            margin-bottom: 10px;
            line-height: 1.6;
        }
        .terms-text p, .terms-text li {
            font-size: 16px;
            line-height: 1.6;
        }
        .signup-container {
            min-height: 55vh;
            width: 80%; /* Adjust width of signup-container to 80% */
            max-width: 100%; /* Ensure it doesn't exceed 100% of the viewport width */
            display: grid;
            grid-template-areas: 
                "title"
                "list"
                "privacy-section";
            gap: 20px; 
            align-items: center;
            justify-content: center; 
            background: var(--color-site-white);
            padding: 20px; 
            margin: auto; 
        }
        .square-sample {
            height: 111px;
            width: 111px;
            background-color: var(--color-brand-ice);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin: auto;
        }
        .square-sample h1 {
            font-size: 65px;
            color: var(--brand-night);
            text-align: center;
            align-items: center;
        }
        .square-sample h2 {
            font-size: 15px;
            font-weight: 300;
            color: var(--brand-night);
            text-align: center;
            align-items: center;
        }
        .signup-container h7 {
            text-align: center;
        }
        .signup-container p {
            width: 420px;
            text-align: center;
        }
        .signup-container .list {
            text-align: left;
            width: 80%;
            margin: auto;
        }
        .signup-container .square-listing {
            list-style: none;
            padding: 0;
            padding-top: 3vh;
            font-size: 16px;
            font-weight: 300;
        }
        .signup-container .square-listing li {
            margin-bottom: 15px;
            position: relative;
            display: flex;
        }
        .signup-container .square-listing li::before {
            content: "";
            width: 10px;
            height: 10px;
            background-color: var(--border-accent);
            margin-right: 10px;
            align-self: absolute;
            transform: translateY(60%);
        }
        .signup-container .square-listing li span {
            flex: 1;
            line-height: 1.6;
        }
        .signup-container .privacy-section {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px; /* Adjust gap between rows */
            text-align: center; /* Center align content */
        }
        .signup-container .privacy-section h6 {
            margin: 0; /* Remove default margin */
        }
        .signup-container .privacy-section .underlined-btn {
            text-decoration: underline; /* Underline text */
            color: inherit; /* Inherit text color */
            display: block; /* Display as block element */
            padding: 10px; /* Add padding for clickable area */
            font-weight: bold; /* Default bold font weight */
        }
        .signup-container .privacy-section .underlined-btn:hover {
            text-decoration: none; /* Remove underline on hover */
            font-weight: bold; /* Bold text on hover */
        }
        .signup5-container {
            display: grid;
            grid-template-columns: 115px 250px; /* Adjusted column widths */
            grid-template-rows: repeat(3, auto); /* Three rows */
            gap: 11px;
            max-width: 80%; /* Max width of 80% */
            margin: auto; /* Center the container */
        }
        .signup5-container .item1 h6, .item3 h6, .item5 h6 {
            text-transform: capitalize; /* Capitalize first letter */
            font-size: 18px;
            text-align: center;
            margin: 0;
            padding: 10px;
            width: 111px; /* Width of blue square */
            height: 111px; /* Height of blue square */
            background-color: var(--color-brand-ice); /* Light blue background */
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Adding box shadow */
        }
        .item2, .item4, .item6 {
            background-color: var(--color-site-white); /* White background */
            display: flex;
            justify-content: center;
            align-items: center;
            height: 111px; /* Match height of blue square */
        }
        .grid-item p {
            color: var(--text-primary); /* Dark text color */
            font-size: 16px;
            line-height: 1.5;
            margin: 0; /* Adjusted margin */
            text-align: center; /* Center align text */
        }
        .item2 p, .item4 p, .item6 p {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%; /* Ensure full height */
        }
        .signup-container .invite-code-validate {
            display: grid;
            place-items: center;
            border: 0.75px solid var(--border-accent);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 400px;
            height: 400px;
        }
        .signup6-container {
            display: grid;
            grid-template-columns: 60% 40%; /* First column 60%, second column 40% */
            grid-template-rows: repeat(4, auto);
            gap: 3px; /* Adjust the gap between items as needed */
            row-gap: 25px; /* Increase the space between rows by 10px (assuming original was 10px) */
            width: 70%; /* Full width to accommodate the new column widths */
            margin: 0 auto; /* Center the container */
            justify-content: center; /* Center both columns on the screen 
        }
        .grid-item {
            padding: 10px; /* Optional: Adjust the padding as needed */
        }
        .grid-item img,
        .grid-item picture {
            max-width: 100%;
            height: 100px;
        }
        .grid-item p {
            display: flex;
            align-items: center; /* Vertically center the text */
            height: 100%; /* Ensure the height of the grid item is considered for centering */
        }
        .page-wrapper {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 60vh;
            width: 100%;
            box-sizing: border-box;
        }
        .squares-container {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 100%;
            box-sizing: border-box;
        }
        .upperheader2 {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
            height: 24vh; /* Adjust height as needed */
        }
        .upperheader2 .mailbox, .logobox, .backbox {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .upperheader2 .logobox img, .backbox img {
            height: 100px; /* Adjust height as needed */
            width: auto; /* Maintain aspect ratio */
        }
        .upperheader3 {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
            height: 22vh; /* Adjust height as needed */
        }
        .upperheader3 .mailbox, .helpbox, .backbox {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .upperheader3 .backbox img {
            height: 100px; /* Adjust height as needed */
            width: auto; /* Maintain aspect ratio */
        }
        .upperheader3 .helpbox button img {
            height: 120px; /* Double the height */
            width: auto; /* Maintain aspect ratio */
        }
        .squares-container .upperheader {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            height: 24vh;
            box-sizing: border-box;
            z-index: 10;
        }
        .mailbox, .logobox, .menubox {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .squares-container .page-wrapper {
            height: 60vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .squares-container h1 {
            font-size: 36px;
        }
        .squares-container h8 {
            font-size: 36px;
            font-weight: 900;
            background-color: aquamarine;
            display: flex;
            margin: 0 auto;
        }
        .squares-container h9 {
            font-size: 18px;
            font-weight: 300;
        }
        .footer4 {
            height: 16vh;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 5;
        }
        .menu-button {
            background-color: transparent;
            border: none;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: calc(4 * 11px + 3 * 11px); /* Height of all lines and spaces */
            padding: 5px;
        }
        .squares-container .container {
            text-align: center;
            box-shadow: none;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .title {
            font-size: 36px;
            font-weight: 300;
            color: var(--text-primary);
            padding: 0;
        }
        .squares-container .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 166.5px);
            grid-template-rows: repeat(3, 166.5px);
            gap: 16.6px;
            justify-content: center;
            align-items: center; /* Center the grid content */
            padding: 0;
        }
        .squares-container .square {
            width: 166.5px;
            height: 166.5px;
            background-color: var(--color-brand-ice);
            color: var(--brand-night);
            font-size: 21px;
            font-weight: 300;
            letter-spacing: .4px;
            line-height: 26px;
            border-radius: 2px;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);  
            border: none;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 1s ease; 
        }
        .squares-container .square:hover {
            box-shadow: none;
        } 
        .squares-container .square:nth-child(3) {
            background-color: var(--border-accent);
            box-shadow: none;
            cursor: none;
        }
        .squares-container .square:nth-child(6) {
            background-color: var(--text-primary);
            box-shadow: none;
            cursor: none;
        }
        .squares-container .square:nth-child(7) {
            background-color: var(--text-primary);
            box-shadow: none;
            cursor: none;
        }
        .squares-container .square:nth-child(8) {
            background-color: var(--text-primary);
            box-shadow: none;
            cursor: none;
        }
        .squares-container .square:nth-child(9) {
            background-color: var(--text-primary);
            box-shadow: none;
            cursor: none;
        }
        .backbox a {
            background-color: none;
            border: none;
            cursor: pointer;
            transition: transform 0.8s; 
        }
        .backbox a:hover {
            transform: scale(1.1);
            background-color: transparent;
        }
        .help-button {
            background-color: transparent;
            border: none;
            cursor: pointer;
            padding: 0;
            transition: transform 0.8s;
        }
        .help-button:hover {
            transform: scale(1.2);
            background-color: transparent;
        }
        .help-button img {
            height: 60px;
            width: auto;
        }
        .squares-container .mail-button {
            background-color: transparent;
            border: none;
            cursor: pointer;
            padding-top: 48px;
            transition: transform 0.8s;
        }
        .squares-container .mail-button:hover {
            transform: scale(1.2);
            background-color: transparent;
        }
        .squares-container .mail-button img {
            height: 100px;
            width: auto;
        }
        .logobox {
            pointer-events: auto; /* Ensure pointer events are enabled */
            position: relative; /* Ensure it can be manipulated with z-index */
            z-index: 10; /* Increase z-index to ensure it is on top */
        }
        .logobox img {
            height: 100px;
            width: auto;
            transition: transform 0.9s ease-in-out; 
        }
        .logobox img:hover {
            transform: scale(1.05);
            background-color: transparent;
        }
        .container-navigation .title {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-bottom: 11px;
        }
        .container-navigation .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            row-gap: 16px; /* Set row gap */
            column-gap: 16px; /* Set column gap */
        }
        .container-navigation .square {
            color: var(--color-brand-ice);
            background-color: var(--text-primary);
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer !important; /* Ensure pointer cursor is applied */
            text-align: center;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.9) !important; /* Ensure shadow is applied */
            border: none !important; /* Remove border to match 6-9 */
            transition: box-shadow 0.85s ease; /* Slow down transition for hover effects */
        }
        .container-navigation .square:hover {
            box-shadow: none !important; /* Shadow easing away on hover */
        }
        .container-navigation .square img {
            width: 30%; 
            height: auto;
            margin-bottom: 14px;
            margin-top: 20px; /* Default margin-top for other squares */
        }
        .container-navigation .square span {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-bottom: 5px;
        }
        .container-navigation .square:nth-child(3) {
            background-color: var(--color-site-white) !important;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center; /* Center content vertically */
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.9) !important; /* Match shadow */
            border: 0.25px solid lightgray !important; /* Light gray outline */
            transition: box-shadow 0.85s ease; /* Slow down transition for hover effects */
        }
        .container-navigation .square:nth-child(3):hover {
            box-shadow: none !important; /* Shadow easing away on hover */
        }
        .container-navigation .square:nth-child(3) img {
            width: calc(100% - 6px); /* Full width minus padding */
            height: calc(100% - 6px); /* Full height minus padding */
            padding: 3px; /* Padding for the image */
            margin-bottom: 0; /* Remove margin to occupy full space */
            margin-top: 0;
            box-sizing: border-box; /* Ensure padding is included in the element's total width and height */
            cursor: pointer !important;
        }
        .container-navigation .square:nth-child(3) span {
            display: none; /* Hide text for the third button */
        }
        .container .title {
            width: 480px;
            color: var(--brand-night);
        }
        .settings-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }
        .settings-container .title {
            margin-bottom: 11px;
            color: var(--text-primary);
            border-radius: 5px;
        }
        .settings-container .button-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 11px;
            width: 100%;
            justify-items: center;
        }
        
        
        
        
            
        .invitation-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 18px; 
        }
        .invitation-container .box {
            width: 480px;
            height: 231px;
            background-color: var(--bg-elevated);
            border: 1px solid var(--border-accent);
            border-radius: 2.5px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            box-sizing: border-box;
            text-align: center;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Add drop shadow */
        }
        .invitation-container h3 {
            line-height: 24px;
            padding-bottom: 10px;
            color: var(--text-primary);
        }
        .invitation-container .input-group {
          margin: 0;
          margin-bottom: 5px;
        }
        .invitation-container #box2 input {
            width: 80%; /* Adjust input box width as needed */
            padding: 5px;
            margin-bottom: 0px; /* Space between input and button */
        }
        .invitation-container .picture-box {
            height: 250px;
            width: 250px;
            background-color: aqua;
        }
        .upperheader4 .page-title {
            text-align: center;
            color: var(--text-primary);
            font-size: 36px;
            font-weight: 300;
        }
        .container-setup .square:nth-child(3) {
            background-color: var(--border-accent);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: none;
            cursor: default;
        }
        .container-setup .square:nth-child(6),
        .container-setup .square:nth-child(7),
        .container-setup .square:nth-child(8),
        .container-setup .square:nth-child(9) {
            background-color: var(--text-primary);
            color: var(--color-brand-ice);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .container-setup .square:nth-child(6):hover,
        .container-setup .square:nth-child(7):hover,
        .container-setup .square:nth-child(8):hover,
        .container-setup .square:nth-child(9):hover {
            color: var(--border-accent);
        }
        .container-setup .open-square-change {
            display: grid;
            place-items: center;
            border: 0.75px solid var(--border-accent);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 480px;
            height: 480px;
            margin: 0 auto;
        }
        .container-setup .open-square-change h6 {
            font-size: 16px;
            padding-bottom: 10px;
            margin: 0 auto;
            width: 80%;
            text-align: center;
        }
        .container-setup .option-A {
            margin-top: 30px;
        }
        .container-setup .option-B {
            margin-top: 0px;
        }
        .container-setup .square-sample {
            background-color: var(--color-brand-ice);
            color: var(--brand-night);
            font-size: 21px;
            font-weight: 300;
            letter-spacing: .4px;
            line-height: 20px;
            border-radius: 1px;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.9);  
            border: none;
            padding-top: 22px;
        }
        .container-content .title{
            text-align: center;
            color: var(--text-primary);
            font-size: 36px;
            font-weight: 300;
            padding-bottom: 11px;
        } 
        .container-content .square:nth-child(3) {
            cursor: default;
        }
        .container-content .square:nth-child(6),
        .container-content .square:nth-child(7),
        .container-content .square:nth-child(8),
        .container-content .square:nth-child(9) {
            background-color: var(--text-primary);
            color: var(--color-brand-ice);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: default;
        }
        .container-squares9 .title{
            text-align: center;
            color: var(--text-primary);
            font-size: 36px;
            font-weight: 300;
            padding-bottom: 11px;
        } 
        .container-squares9 .square {
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.9);
        }
        .container-squares9 .square:nth-child(3) {
            cursor: pointer;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.9);
            transition: box-shadow 0.85s ease, color 0.45s ease; /* Smooth transition for hover effects */
        }
        
        .container-squares9 .square:nth-child(3):hover {
            box-shadow: none; /* Shadow easing away on hover */
        }
        .container-squares9 .square:nth-child(6),
        .container-squares9 .square:nth-child(7),
        .container-squares9 .square:nth-child(8),
        .container-squares9 .square:nth-child(9) {
            background-color: var(--text-primary);
            color: var(--color-brand-ice);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.9);
            transition: box-shadow 0.85s ease, color 0.45s ease; /* Smooth transition for hover effects */
        }
        .container-squares9 .square:nth-child(6):hover,
        .container-squares9 .square:nth-child(7):hover,
        .container-squares9 .square:nth-child(8):hover,
        .container-squares9 .square:nth-child(9):hover {
            box-shadow: none; /* Shadow easing away on hover */
            color: var(--border-accent); /* Text color change on hover */
        }
        .open-square-change {
            display: flex;
            flex-direction: column;
            justify-content: center; 
            align-items: center;    
            border: 0.75px solid var(--border-accent);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 400px;
            height: 400px;
            margin: 0 auto;
            padding: 0; 
            box-sizing: border-box; 
        }
        .open-square-change .option-A .input-group {
            width: 195px;
            margin: 22px auto; 
        }
        .open-square-change .option-A .square-sample {
            width: 230px;
            height: 230px;
            display: flex;
            flex-direction: column;
            justify-content: center; 
            align-items: center;     
            margin: 0 auto;
            padding-top: 1px;
        } 
        .open-square-change .option-A .square-sample h2 {
            font-size: 22px;
            margin: 0 auto;
        }
        .open-square-change .option-B .page-buttons {
            display: flex;
            justify-content: center;
        }
        .upperheader4 {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
            grid-template-rows: 1fr 1fr;        /* 2 rows */
            height: 25vh;                       /* Set height to 25vh */
            align-items: center;                /* Center items vertically */
            margin-top: 40px;                /* Center text horizontally */
        }
        .upperheader4 .helpbox,
        .upperheader4 .logobox,
        .upperheader4 .backbox {
            display: flex;
            justify-content: center;            /* Center items horizontally */
            align-items: center;                /* Center items vertically */
        }
        .upperheader4 .helpbox {
            padding-top: 28px;
        }
        .upperheader4 .backbox {
            padding-top: 13px;
        }
        .upperheader4 .page-title {
            grid-column: 1 / -1;                /* Span all columns */
            grid-row: 2;                        /* Place in the second row */
            text-align: center;                         /* Remove default margin */
            font-size: 36px; 
            font-weight: 300;
        }
        .upperheader5 {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
            grid-template-rows: 1fr 1fr;        /* 2 rows */
            height: 25vh;                       /* Set height to 25vh */
            align-items: center;                /* Center items vertically */
            margin-top: 40px;                /* Center text horizontally */
        }
        .upperheader5 .createbox,
        .upperheader5 .logobox,
        .upperheader5 .backbox {
            display: flex;
            justify-content: center;            /* Center items horizontally */
            align-items: center;                /* Center items vertically */
            height: 150px;
            width: auto;
        }
        .upperheader5 .createbox button {
            background: none;                  
            border: none;                     
            padding-top: 30px;                         
            margin: 0; 
            cursor: pointer;                      
        }
        .upperheader5 .createbox button img {
            height: 175px; 
            width: auto;
            display: block;
            transition: transform 0.85s ease-in-out;
        }
        .upperheader5 .logobox img {
            height: 150px; 
            width: auto;
            display: block;
            transition: transform 0.85s ease-in-out;
        }
        .upperheader5 .backbox img {
            height: 175px; 
            width: auto;
            display: block;
            transition: transform 0.85s ease-in-out;
        }
        .upperheader5 .createbox button:hover img {
            transform: scale(1.1);              /* Scale image by 10% on hover */
        }
        .upperheader5 .backbox {
            padding-top: 13px;
        }
        .upperheader5 .page-title {
            grid-column: 1 / -1;                /* Span all columns */
            grid-row: 2;                        /* Place in the second row */
            text-align: center;                         /* Remove default margin */
            font-size: 36px; 
            font-weight: 300;
        }      
        .upperheader6 {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
            grid-template-rows: auto auto auto; /* 3 rows with automatic height */
            height: 25vh;                       /* Set height to 25vh */
            align-items: center;                /* Center items vertically */
            margin-top: 5px;                   /* Top margin */
            margin-bottom: 25px;
        }
        .upperheader6 .helpbox,
        .upperheader6 .picbox,
        .upperheader6 .backbox {
            display: flex;
            justify-content: center;            /* Center items horizontally */
            align-items: center;                /* Center items vertically */
            height: 150px;
            width: auto;
        }
        .upperheader6 .picbox {
            grid-column: 2; /* Center in the middle column */
            grid-row: 1;    /* Place in the first row */
            margin-bottom: 25px;
        }
        .feed-page-wrapper .profile-pic {
            height: 100px;
            width: 100px;
            background-color: gray;
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.6); /* Drop shadow */
        }
        .upperheader6 .picbox .profile-pic {
            height: 150px; 
            width: 150px;
            display: block;
            transition: transform 0.85s ease-in-out;
            background-color: gray; /* Add background color to ensure visibility */
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.6); /* Drop shadow */
        }
        .upperheader6 .backbox {
            grid-column: 3; /* Place in the third column */
            grid-row: 1;    /* Place in the first row */
            padding-bottom: 25px;
        }
        .upperheader6 .backbox img {
            height: 175px; 
            width: auto;
            display: block;
            transition: transform 0.85s ease-in-out;
        }
        .upperheader6 .post-name {
            grid-column: 1 / -1;           
            grid-row: 2;                     
            text-align: center;                
            font-size: 36px; 
            font-weight: 300;
        }
        .upperheader6 .post-author {
            grid-column: 1 / -1;               
            grid-row: 3;                       
            text-align: center;             
            font-size: clamp(18px, 2.5vw, 24px);
            color: var(--text-primary);
        }
        .feed-page-wrapper .container-setup {
            width: 100%;            
            text-align: center; 
        }
        .feed-page-wrapper {
            display: flex;
            justify-content: center; /* Center the container horizontally */
            flex-direction: column;  /* Align children in a column */
            align-items: center;     /* Center items vertically */
            background-color: var(--panel-white); /* Background color for the wrapper */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Drop shadow */
            padding: 62px;           /* Padding inside the box */
            margin: 20px auto;          /* Center the box with margin on top and bottom */
            width: 90%;              /* Limit width to 90% of the screen */
            max-width: 1200px;       /* Max width to ensure proper alignment */
            box-sizing: border-box;  /* Ensure padding and border are included in the width */
            gap: 22px;               /* Add gap between children */
            cursor: pointer;
            margin-top: 0px;
            outline: none;
            transition: box-shadow 0.5s ease-in-out;
            position: relative;
        }
        .feed-page-wrapper-v {
            display: flex;
            justify-content: center; /* Center the container horizontally */
            flex-direction: column;  /* Align children in a column */
            align-items: center;     /* Center items vertically */
            background-color: var(--panel-white); /* Background color for the wrapper */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Drop shadow */
            padding: 62px;           /* Padding inside the box */
            margin: 20px auto;          /* Center the box with margin on top and bottom */
            width: 90%;              /* Limit width to 90% of the screen */
            max-width: 1200px;       /* Max width to ensure proper alignment */
            box-sizing: border-box;  /* Ensure padding and border are included in the width */
            gap: 22px;               /* Add gap between children */
            cursor: default;
            margin-top: 0px;
            outline: none;
            position: relative;
        }
        .feed-page-wrapper-v .post-name {
            font-weight: 900;
            font-size: 32px;
            line-height: 34px;
        }
        .feed-page-wrapper-v .large-pic-wrapper {
            margin-top: 22px;
        }
        .feed-page-wrapper-v .text-box{
            color: var(--text-primary);
            font-size: 16px;
            text-align: justify;
            letter-spacing: 0.5px;
            width: 90%;
            margin: 0 auto;
            text-indent: 30px;
            margin-top: 30px;
        }
        .feed-page-wrapper-v p {
            margin-bottom: 20px;
        }
        .feed-page-wrapper:hover {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 0 0 2px var(--border-accent); /* Adding the 2px yellow outline on hover */
        }
        .feed-page-wrapper .large-pic-button {
            margin-bottom: 22px;
        }
        .feed-page-wrapper .picbox {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
            padding-top: 22px;
        }
        .feed-page-wrapper .profile-content {
            display: flex;
            align-items: center;
            margin-bottom: 11px;
        }
        .feed-page-wrapper .profile-content .profile-pic {
            margin-right: 17px; /* Space between profile-pic and h2 text */
        }
        .feed-page-wrapper h10 {
            font-size: 26px;
            line-height: 40px;
            font-weight: 700;
            color: var(--text-primary);
        }
        .feed-page-wrapper .profile-content h2 {
            margin: 0;
            text-align: left; 
            font-weight: 300;
        }
        .footer5 {
            height: 340px;
            display: grid;
            grid-template-rows: 70% 30%; /* First row 80%, second row 20% */
            width: 90%;
            margin: 44px auto;
            padding: 20px;
            text-align: center;
        }
        .footer5 .page-buttons {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 22px; /* Spacing between buttons */
        }
        .footer5 .button-wrapper {
            display: grid;
            grid-template-rows: 40% 60%; /* Three rows: text, button, spacer */
            height: 200px;
            background-color: var(--panel-white);
            padding: 10px;
            box-sizing: border-box;
            outline: 0.75px solid var(--border-accent); /* Added yellow solid outline */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Drop shadow */
        }
        .button-wrapper h1 {
            font-size: 18px;
            font-weight: 300;
            margin: 0;
            text-align: center;
            align-self: center;
            justify-self: center;
        }
        .footer5 a {
            text-decoration: none;
            width: 100%;
        }
        
        .footer5 .help-button {
            display: inline-block;
            width: 100%; /* Make the help button take full width */
            height: 100%; /* Make the help button take full height of the second row */
            background-color: transparent;
            border: none;
            padding: 0;
            cursor: pointer;
        }
        .footer5 .help-button img {
            max-width: 100px;
            max-height: 100px;
            object-fit: contain; /* Ensure the image fits within the button */
        }
        .container-setup h6 {
            text-align: center;      /* Center the h6 text */
            margin-bottom: 22px;     /* Space below the h6 element */
            font-size: 18px;         /* Font size for h6 */
        }
        .container-setup h1 {
            text-align: center;
            margin-bottom: 11px;
        }
        .feed-page-wrapper p {
            font-size: 18px;
            text-align: justify;
            text-indent: 26px;
            width: 80%;
            margin: 0 auto;
            padding-top: 22px;
            padding-bottom: 22px;
        }
        .content-square-update {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
            align-items: center;    /* Vertically center the grid items */
            justify-content: center; /* Horizontally center the grid items */
            grid-gap: 22px;         /* Adds spacing between columns */
            background-color: var(--color-site-white); /* White background */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Drop shadow */
            border: 1px solid var(--border-accent); /* Yellow border */
            padding: 22px;  
            padding-bottom: 0;        /* Padding inside the box */
            margin: 0 auto;         /* Center the box horizontally */
            width: 95%;             /* Max width of 80% of the screen */
            box-sizing: border-box; /* Ensure padding and border are included in the width */
            max-width: 1200px;      /* Ensure the box is wide enough to contain the buttons */
        }
        .content-square-update .option-A,
        .content-square-update .option-B,
        .content-square-update .option-C {
            display: flex;
            justify-content: center; /* Center buttons horizontally */
            align-items: center;     /* Center buttons vertically */
            height: 100%;            /* Ensure the container takes full height of the grid cell */
            margin: 0;               /* Remove any default margin */
        }
        .large-pic-button {
            width: 90%;                     /* Set the button width to 90% of the container */
            aspect-ratio: 414 / 276;        /* Maintain aspect ratio of the image */
            background-size: cover;         /* Ensure the image covers the entire button */
            background-position: center;    /* Center the image within the button */
            border: none;                   /* Remove default button border */
            cursor: pointer;                /* Change cursor to pointer on hover */
            box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.9); /* Add drop shadow */
            transition: box-shadow 0.8s ease-in-out; /* Add transition for box shadow */
        }
        .pic-title-button {
            cursor: pointer;                /* Change cursor to pointer on hover */
            text-align: center;             /* Center the text */
            color: var(--text-primary);          /* Set text color */
            font-size: clamp(18px, 2.5vw, 24px);

                /* Set font size */
            margin: 0;                      /* Remove default margin */
            padding-top: 12px;
        }
        
        .upperheader5 {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
            grid-template-rows: auto auto auto; /* 3 rows */
            height: 40vh;                       /* Set height to 40vh */
            align-items: center;                /* Center items vertically */
            text-align: center;                 /* Center text horizontally */
            margin-top: 40px;                   /* Margin at the top */
            gap: 10px;                          /* Adds space between grid items */
        }
        .upperheader5 .helpbox {
            grid-column: 1 / 2; /* First column */
            grid-row: 1 / 2;    /* First row */
        }
        .large-pic-container {
            width: 90%;                     /* Set the container width to 90% of the parent */
            margin: 0 auto;                 /* Center the container horizontally */
            display: flex;                  /* Use flexbox to center the image */
            justify-content: center;        /* Center the image horizontally */
            align-items: center;            /* Center the image vertically */
        }
        .upperheader5 .picbox {
            grid-column: 2 / 3; /* Second column */
            grid-row: 1 / 2;    /* First row */
            display: flex;
            justify-content: center; /* Center content horizontally */
            align-items: center;     /* Center content vertically */
        }
        .upperheader5 .backbox {
            grid-column: 3 / 4; /* Third column */
            grid-row: 1 / 2;    /* First row */
        }
        .upperheader5 .post-name {
            grid-column: 1 / 4; /* Span all 3 columns */
            grid-row: 2 / 3;    /* Second row */
            margin: 0;           /* Remove default margin */
            text-align: center;  /* Ensure text is centered */
            font-size: 44px;     /* Adjust font size as needed */
            font-weight: 800;
            color: var(--text-primary);
        }
        .upperheader5 .post-author {
            grid-column: 1 / 4; /* Span all 3 columns */
            grid-row: 3 / 4;    /* Third row */
            margin: 0;           /* Remove default margin */
            text-align: center;  /* Ensure text is centered */
            font-size: clamp(18px, 2.5vw, 24px);
            color: var(--text-primary);
        }
        .large-pic-container2 {
            width: 90%;                     /* Set the container width to 90% of the parent */
            margin: 0 auto;                 /* Center the container horizontally */
            display: flex;                  /* Use flexbox to center the image */
            justify-content: center;        /* Center the image horizontally */
            align-items: center;            /* Center the image vertically */
        }
        .large-pic-container2 .large-pic-wrapper {
            position: relative;             /* Ensure positioning context for the shadow */
            width: 100%;
            padding-top: 56.25%;            /* 16:9 Aspect Ratio */
            overflow: hidden;
        }
        .large-pic-container2 .large-pic {
            position: absolute;             /* Absolute positioning within the wrapper */
            top: 0;
            left: 0;
            width: 100%;                    /* Make the image take up full width of the wrapper */
            height: 100%;                   /* Make the image take up full height of the wrapper */
            object-fit: cover;              /* Ensure the image covers the wrapper area */ 
            display: block;
        }
        .large-pic-container2 .large-pic-wrapper::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.9); /* Apply inset shadow */
            pointer-events: none; /* Ensure the pseudo-element does not interfere with interactions */
        }
/* Unique container for the messenger page */
.squares-messenger-container {
    display: grid;
    grid-template-rows: 20vh auto 1fr auto auto; /* Header, content, footer */
    min-height: 100vh; /* Ensure full height */
    width: 100%; /* Full width */
}
/* Unique header area for the messenger page */
.squares-messenger-wrapper {
    grid-row: 1 / 2;
    width: 100%;
    padding: 0 5%;
    box-sizing: border-box;
}
/* Content area for the messenger page */
.messenger-wrapper {
    grid-row: 3 / 4;
    display: grid;
    grid-template-rows: auto auto 1fr; /* Title/Button, Content */
    width: 90%;
    margin: 0 auto;
    box-sizing: border-box;
}
.messenger-button-container {
    grid-row: 2 / 3;
    text-align: center;
}
.messenger-data-container-message {
    grid-row: 3 / 4;
    width: 100%;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}
.messenger-data-container {
    width: 90%;
    background-color: var(--color-site-white);
    padding: 20px;
    border: 1px solid #ccc;
    min-height: 50vh;
    box-sizing: border-box;
}
.messenger-footer4 {
    grid-row: 5 / 6;
    width: 90%;
    margin: 0 auto;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}
.squares-compose-container {
    display: grid;
    grid-template-rows: 19vh auto auto auto auto 1fr auto auto; /* Header, multiple content sections, footer */
    min-height: 100vh; /* Ensure full height */
    width: 100%; /* Full width */
}
.squares-compose-wrapper {
    grid-row: 1 / 2;
    width: 100%;
    padding: 0 5%;
    box-sizing: border-box;
}
.compose-wrapper {
    grid-row: 2 / 7;
    display: grid;
    grid-template-rows: repeat(3, auto) 1fr; /* Three titles + content sections */
    width: 90%;
    margin: 0 auto;
    box-sizing: border-box;
}
.compose-data-container-message {
    width: 100%;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    padding-bottom: 11px;
}
.compose-data-container {
    width: 90%;
    background-color: var(--color-site-white);
    padding: 20px;
    border: 1px solid #ccc;
    min-height: 50vh;
    box-sizing: border-box;
}
.compose-footer4 {
    grid-row: 8 / 9;
    width: 90%;
    margin: 0 auto;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}
.create-button-messenger img {
    height: 144px;
    width: auto;
}

/* ========== BASE HEADER STYLES ========== */
.corporate-main {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 100px;
    z-index: 1000;
    color: var(--color-site-white);
    background-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease;
    height: 70px;
  }
  .corporate-main.transparent {
    background-color: transparent !important;
    color: var(--color-site-white) !important;
    box-shadow: none;
  }
  .corporate-main.scrolled {
    background-color: rgba(255, 255, 245, 0.97);
    color: var(--brand-night);
    box-shadow: 0 10px 24px rgba(7, 20, 38, 0.12);
    border-bottom: 1px solid rgba(8, 31, 65, 0.08);
  }
  
  .corporate-main.scrolled .logo,
  .corporate-main.scrolled .nav-buttons a,
  .corporate-main.scrolled .nav-links a,
  .corporate-main.scrolled .right-section a {
    color: var(--brand-night);
  }

  /* Dark mode: scrolled header — charcoal, pure white text */
  :root[data-theme="night-environment"] .corporate-main.scrolled {
    background-color: #161C22 !important;
    color: #FFFFFF !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4) !important;
    border-bottom: 1px solid rgba(255, 200, 74, 0.18) !important;
  }

  /* All header links white in dark mode */
  :root[data-theme="night-environment"] .corporate-main .logo,
  :root[data-theme="night-environment"] .corporate-main.scrolled .logo,
  :root[data-theme="night-environment"] .corporate-main .nav-buttons a,
  :root[data-theme="night-environment"] .corporate-main .nav-links a,
  :root[data-theme="night-environment"] .corporate-main .right-section a {
    color: #FFFFFF !important;
  }

  :root[data-theme="night-environment"] .corporate-main {
    color: #FFFFFF !important;
  }
  
  /* ========== SHARED ELEMENT STYLES ========== */
  .logo,
  .nav-buttons a,
  .right-section a {
    color: inherit;
    font-family: "Poppins", "Montserrat", sans-serif;
    font-weight: 600;
    font-size: clamp(18px, 1.2vw, 28px);
    transition: color 0.3s ease;
    position: relative;
    list-style: none;
    display: block;
  }
  .nav-buttons a,
  .right-section a {
    font-weight: 500;
    letter-spacing: 0.3px;
    text-decoration: none;
    padding: 6px 0;
    line-height: 1;
  }
  .nav-buttons {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    gap: clamp(20px, 4vw, 48px);
  }
  .right-section {
    display: flex;
    gap: 20px;
    align-items: center;
    position: relative;
  }
  .nav-buttons a::before,
  .right-section a::before {
    content: "";
    position: absolute;
    width: 0;
    height: 1.5px;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 192, 23, 0.95);
    transition: width 0.4s ease;
  }
  .nav-buttons a:hover::before,
  .right-section a:hover::before {
    width: 100%;
  }
  .corporate-main.fixed-dark-text .logo,
  .corporate-main.fixed-dark-text .nav-buttons a,
  .corporate-main.fixed-dark-text .nav-links a,
  .corporate-main.fixed-dark-text .right-section a {
    color: var(--brand-night) !important;
  }
  
  /* =====================================================
   PORTRAIT BUTTON CONTAINMENT FIX
   Prevent button text overflow in portrait layouts
   ===================================================== */

@media screen and (orientation: portrait) {

    .learn-more-button {
        font-size: clamp(15px, 1.55vw + 7px, 20px) !important;

        min-width: auto !important;
        max-width: 100% !important;

        padding-left: 18px !important;
        padding-right: 18px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;

        gap: 10px;
    }

    .learn-more-button .arrow {
        margin-left: 0 !important;
        flex-shrink: 0;
    }

}
  
  /* =========================
   UNIFIED CONTROL BUTTON FIX
   ========================= */

/* DAYTIME DEFAULT */
.hamburger,
.accessibility-trigger {
    background-color: var(--color-white);
    color: var(--color-dark-blue);
}

/* DAYTIME HOVER */
.hamburger:hover,
.accessibility-trigger:hover {
    background-color: var(--color-dark-blue);
    color: var(--color-white);
}

/* DARK MODE DEFAULT */
body.dark-mode .hamburger,
body.dark-mode .accessibility-trigger {
    background-color: var(--color-charcoal);
    color: var(--color-white); /* FIX: icon now visible */
}

/* DARK MODE HOVER */
body.dark-mode .hamburger:hover,
body.dark-mode .accessibility-trigger:hover {
    background-color: var(--color-white);
    color: var(--color-dark-blue); /* FIX */
}

/* FORCE SVG ICON TO FOLLOW COLOR */
.hamburger svg,
.accessibility-trigger svg {
    fill: currentColor;
}
  
/* ========= NAVIGATION: DESKTOP & MOBILE ========= */

.nav-toggle {
    display: none;
  }
  
  .hamburger:focus-visible {
    outline: 3px solid var(--border-accent);
    outline-offset: 4px;
    border-radius: 4px;
}
  
  @media (min-width: 801px) {
    .nav-buttons {
      display: flex !important;
      gap: 30px;
      align-items: center;
    }
    .hamburger {
      display: none;
      background: transparent;
      border: none;
      padding: 0;
      margin: 0;
      appearance: none;
      -webkit-appearance: none;
    }
  }
  
  @media (max-width: 800px) {
    .hamburger {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 24px;
      height: 18px;
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 1101;
      cursor: pointer;
      color: var(--border-accent);
      background: transparent;
      border: none;
      padding: 0;
      margin: 0;
      appearance: none;
      -webkit-appearance: none;
    }
    .hamburger span {
      display: block;
      position: absolute;
      width: 30px;
      height: 2px;
      background: currentColor;
      border-radius: 4px;
      transition: all 0.3s ease;
      left: 0;
      transform-origin: center;
    }
    .hamburger span:nth-child(1) {
        top: 0;
    }
    .hamburger span:nth-child(2) {
        top: 8px;
    }
    .hamburger span:nth-child(3) {
        top: 16px;
    }
    .nav-buttons {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0 !important;
        position: absolute;
        top: 70px;
        right: 20px;
        width: auto !important;
        max-width: min(92vw, 420px);
        padding: 22px !important;
        border-radius: 6px;
        border: 0.75px solid var(--border-accent);
        background: var(--brand-night);
        color: var(--color-site-white);
        box-shadow: 4px 6px 9px rgba(0, 0, 0, 0.8);
        z-index: 1000;
    }

    .nav-buttons.is-open {
        display: flex !important;
    }
    .hamburger.is-active span:nth-child(1) {
      transform: rotate(45deg) translate(4px, 5px);
    }
    .hamburger.is-active span:nth-child(2) {
      opacity: 0;
    }
    .hamburger.is-active span:nth-child(3) {
      transform: rotate(-45deg) translate(7px, -7px);
    }
    .nav-toggle {
        display: none;
    }
    .nav-links {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0 !important;
        width: auto !important;
    }
    .nav-buttons a,
        .nav-links a {
            display: block;
            width: auto !important;
            font-size: 28px !important;
            line-height: 1.2 !important;
            padding: 18px 0 0 0 !important;
            margin: 0 !important;
            white-space: nowrap;
    }
    .nav-buttons a:first-child,
    .nav-links a:first-child {
        padding-top: 0 !important;
    }
    .slate19-wrapper, .slate19 {
      padding: 20px 0; /* creates light top/bottom frame */
      margin: 0;
    } 
    .video-full-screen {
      height: calc(100vh - 40px); /* fills most of screen minus padding */
      display: flex;
      align-items: center;
      justify-content: center;
    } 
    .video-full-screen video {
      height: 100%;
      width: auto; /* preserve aspect ratio */
      max-width: 100%;
      object-fit: cover;
    }
    .section-wrapper-js {
      width: 85vw;  
      display: flex;
      flex-direction: column;
      margin: 22px auto 0 auto;
    }
    .section-wrapper-js .text-box-js {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
        text-align: justify;
    }
    .text-box-js h1 {
        width: 100%;
        text-align: center !important;
    }      
    .text-box-js p {
      width: 100%;
      text-align: justify !important;
      
    }

}
/* ✅ Adjust styling specifically for 1140px to 1025 width */
@media (max-width: 1140px) {
    .corporate-main {
        padding: 5px 55px !important;
        font-size: clamp(18px, 1.2vw, 25px);
    }

}
/* ✅ Adjust styling specifically for 1024px width (MacBook Pro 13") */
    @media (max-width: 1024px) {
    .corporate-main {
        padding: 5px 30px !important; 
    }

    .logo {
      font-size: 18px !important;
    }
  
    .nav-links,
    .nav-buttons {
      gap: 20px !important; 
    }
  
    .nav-links a,
    .nav-buttons a,
    .right-section a {
      font-size: 16px !important;
      padding: 4px 0 !important;
      white-space: nowrap; 
    }
  }
  /* ========== TABLET LANDSCAPE (769–1024px) AND LAPTOP (1025–1200px) ========== */
  @media (min-width: 769px) and (max-width: 1200px) {
    .corporate-main {
      padding: 5px 60px;
    }
  
    .logo,
    .nav-buttons a,
    .right-section a {
      font-size: 20px;
    }
  
    .nav-buttons {
      gap: 20px;
    }
  
    .right-section {
      display: none !important;
    }
  }
  
  /* ========== TABLET PORTRAIT (≤ 768px) ========== */
  @media (max-width: 768px) and (orientation: portrait) {
    .right-section {
      display: none !important;
    }
  }

  @media screen and (min-width: 801px) and (max-width: 1024px) and (orientation: portrait) {
    .hamburger {
      display: flex !important;
      flex-direction: column;
      justify-content: space-between;
      width: 24px;
      height: 18px;
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 1101;
      cursor: pointer;
      color: var(--border-accent);
    }

    .hamburger span {
      display: block;
      position: absolute;
      width: 30px;
      height: 2px;
      background: currentColor;
      border-radius: 4px;
      transition: all 0.3s ease;
      left: 0;
      transform-origin: center;
    }

    .hamburger span:nth-child(1) {
      top: 0;
    }

    .hamburger span:nth-child(2) {
      top: 8px;
    }

    .hamburger span:nth-child(3) {
      top: 16px;
    }

    .nav-buttons {
      display: none !important;
      flex-direction: column;
      position: absolute;
      top: 70px;
      right: 20px;
      width: min(86vw, 420px);
      max-height: none !important;
      overflow: visible !important;
      background: var(--brand-night);
      color: var(--color-site-white);
      padding: 15px 20px;
      border-radius: 6px;
      border: 0.75px solid var(--border-accent);
      box-shadow: 4px 6px 9px rgba(0, 0, 0, 0.8);
      z-index: 1000;
      gap: 14px !important;
    }

    .nav-buttons.is-open {
      display: flex !important;
    }

    .nav-links {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      width: 100%;
      gap: 14px !important;
    }

    .nav-links a.contact-btn,
    .right-section {
      display: none !important;
    }
  }
  
  /* ========== DESKTOP (≥ 1201px) ========== */
  @media (min-width: 1201px) {
    .nav-links a.contact-btn {
      display: none !important; /* Hide from nav-links */
    }
  
    .right-section {
      display: flex;
      position: relative;
    }
  }
/* Default (desktop wide and up) */
.nav-links {
    display: flex;
    gap: 48px;
    align-items: center;
    justify-content: center;
  }
  
  .nav-buttons {
    gap: 48px;
  }
  
  /* Laptop (up to 1200px) */
  @media (max-width: 1200px) {
    .nav-links,
    .nav-buttons {
      gap: 36px;
    }
  }
  
  /* Tablet landscape (up to 1024px) */
  @media (max-width: 1024px) {
    .nav-links,
    .nav-buttons {
      gap: 28px;
    }
  }
  
  /* Tablet portrait and mobile (up to 768px) */
  @media (max-width: 768px) {
    .nav-links,
    .nav-buttons {
      gap: 20px;
    }
  }
  @media (max-width: 800px) {
    /* Nav link colors are handled by the hamburger menu panel rules below */
  
    /* Optional: ensure contrast for Contact Us button */
    .corporate-main.fixed-dark-text .right-section a.contact-btn {
      color: var(--color-site-white) !important;
      border-color: var(--color-site-white) !important;
    }
  }
/* ========== Base Styles ========== */
.index-footer-corporate {
    width: min(90%, 1380px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "index-footer-corporate-master-row-a"
      "index-footer-corporate-master-row-b"
      "index-footer-corporate-master-row-c";
    gap: 0;
    grid-auto-rows: min-content;
    text-align: left;
    align-items: start;
    background: var(--color-site-white) !important;
    padding: 34px 0 18px;
}

.index-footer-corporate .footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.index-footer-corporate .first-box,
.index-footer-corporate .second-box,
.index-footer-corporate .third-box,
.index-footer-corporate .fourth-box,
.index-footer-corporate .fifth-box,
.index-footer-corporate .footer-slate1,
.index-footer-corporate .footer-slate2,
.index-footer-corporate .footer-slate3,
.index-footer-corporate .footer-slate4,
.index-footer-corporate .footer-slate5 {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    position: static !important;
    inset: auto !important;
    display: block !important;
    overflow: visible !important;
    background: transparent !important;
}

.index-footer-corporate .bottom-box {
    font-size: 18px;
    color: var(--brand-night);
    text-align: right;
}

.index-footer-corporate h3,
.index-footer-corporate h4 {
    font-size: clamp(18px, 1.1vw, 22px);
    margin-bottom: 16px;
    color: var(--brand-night);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.15px;
}

/* Dark mode: footer headings and copyright — pure white */
:root[data-theme="night-environment"] .index-footer-corporate h3,
:root[data-theme="night-environment"] .index-footer-corporate h4 {
    color: #FFFFFF !important;
}

:root[data-theme="night-environment"] .index-footer-corporate .bottom-box,
:root[data-theme="night-environment"] .index-footer-corporate .bottom-box p,
:root[data-theme="night-environment"] .index-footer-corporate .bottom-box small {
    color: #FFFFFF !important;
}

.index-footer-corporate a {
    display: block;
    font-family: "Poppins", "Montserrat", sans-serif;
    font-weight: 500;
    font-size: clamp(15px, 0.98vw, 18px);
    color: rgb(111, 130, 156);
    text-decoration: none;
    margin-bottom: 11px;
    line-height: 1.26;
}

.index-footer-corporate a:hover {
    color: var(--text-primary);
    transform: translateX(2px);
}

.visually-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

.index-footer-corporate ul {
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.index-footer-corporate li::marker {
    display: none;
}

.index-footer-corporate *::before,
.index-footer-corporate *::after {
    content: none !important;
}

.corporate-logo-box {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 130px;
    padding-bottom: 130px;
}

.corporate-logo-box img {
    max-height: 100px;
    height: auto;
    width: auto;
    display: block;
}

/* ========== Layout ========== */
.index-footer-corporate-master-row-a {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 56px);
    align-items: start;
  }

  .footer-column-box-1,
  .footer-column-box-2 {
    display: contents; /* 💡 This makes the wrapper disappear from layout */
  }

  .fourth-box,
.fifth-box {
  min-height: 0;
  overflow: auto;
  position: relative;
  z-index: 1;
}
.index-footer-corporate-master-row-b {
    grid-area: index-footer-corporate-master-row-b;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 0;
    min-height: 0;
    margin-top: 10px;
}

.index-footer-corporate-master-row-c {
    grid-area: index-footer-corporate-master-row-c;
    display: flex;
    justify-content: center;
    align-items: end;
    padding-bottom: 0;
    margin-top: 4px;
}

/* ========== Media Queries ========== */
    @media (max-width: 1399px) {
    .index-footer-corporate {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr 1fr 1fr;
      grid-template-areas:
        "footer-box-1"
        "footer-box-2"
        "logo-row"
        "copyright-row";
      height: 100vh;
      max-width: 1400px;
      margin: 0 auto;
      overflow: visible;
    }
    .index-footer-corporate-master-row-a {
      display: contents;
    }
    .footer-column-box-1 {
      grid-area: footer-box-1;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(24px, 4vw, 64px);
      min-height: 0;
      overflow: auto;
    }
    .footer-column-box-2 {
      grid-area: footer-box-2;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      justify-items: center;
      align-items: start;
      gap: clamp(24px, 4vw, 64px);
      min-height: 0;
      overflow: auto;
      z-index: 1;
      position: relative;
    }
    .index-footer-corporate-master-row-b {
      grid-area: logo-row;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 0;
      overflow: visible;
    }
    .index-footer-corporate-master-row-c {
      grid-area: copyright-row;
      display: flex;
      justify-content: center;
      text-align: center;
      align-items: center;
      min-height: 0;
      overflow: hidden;
    }
    .footer-column {
      min-height: 0;
      overflow: auto;
    }
  }
  
.main-image-container h2 {
    color: var(--color-site-white);
    font-weight: 300;
}
.main-image {
    display: block;
    width: 100%; /* Makes the image responsive */
    height: auto; /* Maintains aspect ratio */
}
.main-image-container2 {
    position: relative;
    width: 100%; /* Makes the container span the full width */
    height: 100vh; /* Makes the container span the full viewport height */
    margin: 0; /* Removes any default margin */
    padding: 0; /* Removes any default padding */
    overflow: hidden; /* Hides any overflow content from the image */
}
.main-image-container2 .main-image {
    display: block;
    width: 100%; /* Ensures the image spans the full width of the container */
    height: 100%; /* Matches the container's height */
    object-fit: cover; /* Scales and crops the image to fully cover the container */
    position: absolute; /* Positions the image relative to the container */
    top: 0; /* Ensures it aligns at the top */
    left: 0; /* Ensures it aligns at the left */
}

.main-image-container2 .scroll-text {
    color: var(--brand-night);
    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: 600;
}
.main-image-container3 {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    margin-top: -95px;
}
.main-image-container2 h1 {
    color: var(--color-site-white);
}
.main-image {
    width: 100%; /* Image spans the full width */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove any default padding/margin from images */
    object-fit: cover; /* Ensures the image covers the container proportionally */
    position: relative;
    display: inline-block;
    overflow: hidden;
}
.main-image-container::before {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 45px rgba(0, 0, 0, 1.5); /* Adjust the shadow settings */
    pointer-events: none; /* Make sure it doesn't interfere with any interactions */
    z-index: 1;
}
.scroll-field {
    position: absolute;
    bottom: 2.5%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 10;
  }
  @media (max-width: 800px) {
    .scroll-field {
        bottom: 9%;
    }
  }
.scroll-animation {
    background-color: transparent;
    color: var(--color-site-white);
    border: none;
    padding: 10px 20px;
    font-size: 20px;
    border-radius: 3px !important;
    cursor: pointer;
    transition: background-color 0.3s;
}
.scroll-animation:hover {
    background-color: var(--border-accent); 
}
.scroll-text {
    color: var(--color-site-white);
    font-size: clamp(18px, 2.2vw, 24px);
    margin-top: 25px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, .6);
}
.scroll-field-box {
    position: absolute; /* Positions the scroll-field-box relative to the nearest positioned ancestor */
    bottom: -38%; /* Places it below the content of .image-text11 */
    left: 50%; /* Centers it horizontally */
    transform: translateX(-50%); /* Corrects centering alignment */
    text-align: center; /* Centers text inside the box */
    width: 100%; /* Adjust width if needed */
    z-index: 1; /* Ensures it is above the background but below other elements */
}
.image-text1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    visibility: visible;
    opacity: 1;
    z-index: 2 !important;

    width: 100%;
    max-width: 900px;
    padding: 1.5em;
    box-sizing: border-box;

    text-align: center;
    color: #ffffff;
}
.image-text1 h1 {
    margin: 0;
    font-weight: 500;

    font-size: clamp(38px, 5.8vw, 48px);
    line-height: 1.1;
    letter-spacing: 2.5px;

    text-transform: uppercase;
    color: var(--color-site-white);

    text-shadow:
        2px 2px 18px rgba(116, 40, 156, 0.75),  /* enlarged glow */
        -1px -1px 0 rgba(13, 66, 181, 0.85),
        1px -1px 0 rgba(0, 0, 0, 0.85),
        -1px 1px 0 rgba(0, 0, 0, 0.85),
        1px 1px 0 rgba(0, 0, 0, 0.85);
}

.image-text1 h2 {

    font-weight: 500;
    font-size: clamp(24px, 2vw, 45px);
    letter-spacing: 4px;
    color: var(--color-site-white);
    letter-spacing: 3px;
    line-height: 1.5;
    text-transform: uppercase; 
    text-shadow:
    2px 2px 9px rgba(34, 45, 64, 0.531),
    -1px -1px 0 #000,  /* faux stroke - top left */
    1px -1px 0 #000,   /* faux stroke - top right */
    -1px 1px 0 #000,   /* faux stroke - bottom left */
    1px 1px 0 #000;    /* faux stroke - bottom right */  
}
@media screen and (min-width: 1025px) {
    .image-text1 {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: min(70vw, 900px) !important;
        max-width: 900px !important;
        padding: 0 24px !important;
        text-align: center !important;
    }

    .image-text1 h1 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding-top: 0 !important;
        font-size: clamp(50px, 5.1vw, 90px) !important;
        line-height: 1.12 !important;
        letter-spacing: 1.2px !important;
        text-align: center !important;
    }
}
.main-image-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.main-image-container-2 {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.main-image-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.main-image-container > #main-animation {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block;
}
#video1 {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
/* Breakpoint: Mid-Screens (1200px–1350px, includes 1280px) */
@media screen and (min-width: 1200px) and (max-width: 1350px) {
    .image-text1 h1{
      position: relative;
      padding-top: 0 !important;
    }
    .image-text4 h1 {
       position: relative;
       padding-top: 50px;
    }
    .image-text5 h1 {
        position: relative;
        margin-top: -50px;
        margin-bottom: 0px;
        padding-bottom: 0px;
    }
    .scroll-field {
      position: relative;
      top: 500px;
    }
    .scroll-field-box {
        bottom: 100%; /* Places it below the content of .image-text11 */
    }
    .main-image-container {
        position: relative;
        width: 100%;
        height: 100vh; /* Full viewport height */
        overflow: hidden;
    } 
    #main-animation {
        position: absolute;
        top: 0;
        left: 0;
        min-width: 100%;
        min-height: 100%;
        object-fit: cover; /* key to covering full container */
        z-index: 0;
    }
  }
/* Tablet specific layout at 800px */
@media screen and (max-width: 800px) {
    .main-image-container {
      height: 100vh;
    }
    #main-animation {
        position: absolute;
        top: 0;
        left: 0;
        min-width: 100%;
        min-height: 100%;
        object-fit: cover; /* key to covering full container */
        z-index: 0;
    }
    .scroll-field-box {
        bottom: -130%; /* Places it below the content of .image-text11 */
    }
    .page-box-4 {
        display: flex;
        flex-direction: column;
      }
    
      .left-box,
      .right-box {
        width: 100%;
      }
      .text-box-js {
        padding: 33px !important;
      }
  }
.image-text3 {
    position: absolute;
    top: 44%;
    left: 81.5%;
    transform: translate(-40%, -45%);
    text-align: left;
    white-space: nowrap;
    z-index: 2;
}
.image-text3 h1 {
    font-family: "Poppins", "Montserrat", sans-serif;
    font-weight: 600;
    font-size: clamp(35px, 4vw, 90px) !important;
    line-height: 0.9;
    letter-spacing: 1px;
    color: var(--color-site-white);
    margin-right: 100px;
    text-transform: none;
    text-shadow:
    2px 2px 19px rgba(175, 164, 181, 0.831),  
    -1px -1px 0 #010714,  
    1px -1px 0 #000, 
    -1px 1px 0 #000, 
    1px 1px 0 #000;
}
.scroll-animation {
    width: 30px;
    height: 30px;
    border: 2px solid var(--color-site-white);
    border-radius: 50%;
    background: transparent;
    animation: scroll-bounce 1.5s infinite;
}
@keyframes scroll-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
}
.image-text4 {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 90%;
    max-width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
    z-index: 2;
}

.image-text4 h1 {
    font-size: clamp(45px, 4vw, 110px) !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    color: var(--color-site-white);
    text-transform: none;
    line-height: 1.3;
    margin: 0 auto;
    white-space: normal;
    max-width: 100%;
    word-break: break-word;
    text-shadow:
        0 0 24px rgba(116, 40, 156, 1),
        0 0 48px rgba(116, 40, 156, 0.9),
        -1px -1px 0 rgba(13, 66, 181, 0.85),
        1px -1px 0 rgba(0, 0, 0, 0.85),
        -1px 1px 0 rgba(0, 0, 0, 0.85),
        1px 1px 0 rgba(0, 0, 0, 0.85) !important;
}

/* Dark mode: hero titles stay white — token remaps --color-site-white to charcoal */
:root[data-theme="night-environment"] .image-text3 h1,
:root[data-theme="night-environment"] .image-text4 h1,
:root[data-theme="night-environment"] .image-text5 h1,
:root[data-theme="night-environment"] .image-text6 h1,
:root[data-theme="night-environment"] .image-text8 h1,
:root[data-theme="night-environment"] .image-text9 h1,
:root[data-theme="night-environment"] .image-text10 h1,
:root[data-theme="night-environment"] .image-text11 h1,
:root[data-theme="night-environment"] .image-text12 h1 {
    color: #FFFFFF !important;
}

@media (max-width: 768px) {
    .image-text4 h1 {
        font-size: clamp(1.4rem, 5.5vw, 3.5rem);
        letter-spacing: 0.2px !important;
    }
}

.image-text5 {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%); 
    text-align: center;
    line-height: 1;
    letter-spacing: 2.4px;
    text-shadow: 3px 3px 9px rgba(53, 85, 228, 1.63), 2px 2px 2px rgba(0, 0, 0, 0.7);
    white-space: nowrap; 
    z-index: 2;
}
.image-text5 h1 {
    color: var(--color-site-white) !important;
    font-size: clamp(52px, 4vw, 135px) !important;
    font-weight: 500 !important;
    letter-spacing: 6px !important;
    text-transform: uppercase;
}
.image-text5 h2 {
    color: var(--color-site-white) !important;
    font-size: clamp(35px, 4vw, 90px) !important;
    font-weight: 500 !important;
    letter-spacing: 6px !important;
    text-transform: uppercase;
}
.main-image-container .image-text5 p,
.image-text5 p {
    text-align: left !important;
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.65;
    color: var(--color-site-white);
    max-width: 720px;
    margin: 0 auto 18px auto;
    letter-spacing: 0.2px;
}
.image-text6 {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -45%);
    text-align: center;
    line-height: 1;
    letter-spacing: 2.4px;
    white-space: nowrap;
    z-index: 2;
}
.image-text6 h1 {
    color: var(--color-site-white) !important;
    font-size: clamp(120px, 22vw, 300px) !important;
    font-weight: 500 !important;
    letter-spacing: 6px !important;
    text-transform: uppercase;

    text-shadow:
    0 0 50px rgba(53, 85, 228, 1),
    0 0 100px rgba(53, 85, 228, 0.7),
    0 0 160px rgba(53, 85, 228, 0.5);
}

.image-text8 {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, 0); /* Perfect horizontal centering */
    text-align: center;
    width: 100%;
    max-width: 90vw;
    line-height: 1.2;
    padding: 0 2rem;
    text-shadow: 3px 3px 6px rgb(70, 103, 150), 2px 2px 2px rgba(0, 0, 0, 0.7);
    word-break: break-word; /* Prevents overflow on narrow screens */
    z-index: 2;
} 
.image-text8 h1 {
    color: var(--color-site-white) !important;
    font-size: clamp(35px, 4vw, 90px);
    font-weight: 500 !important;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin: 0;
}  
.image-text9 {
    position: absolute;
    top: 50% !important;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 1.2;
    letter-spacing: 2.5px;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.95); /* 9.5 was out of range */
    white-space: nowrap; /* use this instead of text-wrap */
    z-index: 2;
}
.image-text9 h1 {
    color: var(--color-site-white) !important;
    font-size: clamp(60px, 9.5vw, 180px) !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important; /* removed duplicate */
    text-transform: uppercase;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9) !important;
}

.image-text10 {
    position: absolute; /* Positions the text over the image */
    top: 40%; /* Adjust this value to position vertically */
    left: 50%;
    transform: translate(-50%, -45%); /* Centers the text horizontally and vertically */
    text-align: center;
    line-height: 1.1; /* Adjust line spacing */
    letter-spacing: 2.5px;
    text-wrap: nowrap;
    z-index: 1; /* Adjust this value as needed */
}
.image-text10 h1 {
    color: var(--color-site-white) !important;
    text-shadow: 4px 4px 10px rgba(241, 160, 9, 0.966); /* Add a shadow for readability */
    font-size: clamp(60px, 5.5vw, 100px);
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: none;
}
.image-text11 {
    position: absolute;
    top: 45%; 
    left: 18% !important;
    transform: translate(-40%, -45%); /* Centers the text horizontally and vertically */
    text-align: left !important;
    line-height: 1.2; /* Adjust line spacing */
    letter-spacing: 2.5px;
    color: var(--color-site-white) !important;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 9.5); /* Add a shadow for readability */
    z-index: 3 !important;
}
.image-text11 h1 {
    color: inherit;
    font-size: clamp(36px, 5.5vw, 110px) !important;
    font-weight: 500 !important;
    letter-spacing: 4px !important;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.image-text11 .hero-text {
    /* opacity controlled by heroTextVisible entrance sequence */
}
.first-box {
    width: 100%;
    height: 40vh;
    background-color: var(--color-site-white);
    position: relative;
    display: flex;
    align-items: center;
}
.box-textA {
    width: 90%;
    position: absolute;
    top: 30%; /* Start the element at the vertical center */
    transform: translateY(-50%); /* Adjust to center it precisely */
    margin: 0% auto;
}
.box-textA h1,
.box-textA h2 {
    margin: 0; /* Reset any default margins */
    padding: 0; /* Reset any default padding */
    line-height: 1; /* Set line height to 1 to remove additional space */
}
.box-textA h1 {
    color: var(--text-primary);
    font-size: 80px;
    font-weight: 500;
    letter-spacing: 4px;
    letter-spacing: .3px;
    text-transform: uppercase;
    margin: 0;
}
.box-textA h2 {
    color: rgb(111, 130, 156) !important;
    font-size: 18px !important;
    font-weight: 300;
    letter-spacing: 4px;
    letter-spacing: .3px;
    text-transform: uppercase;
    margin-bottom: -10px;
    padding-left: 7px;
}
.image-text12 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: clamp(32px, 5vw, 65px); /* Responsive */
    line-height: 1.2;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.45); /* Corrected opacity */
    white-space: nowrap; /* Use this instead of nonstandard text-wrap */
    z-index: 2;
}  
.image-text12 h1 {
    font-weight: 700;
    font-size: clamp(40px, 7vw, 130px);
    letter-spacing: 4px;
    color: var(--border-accent);
    letter-spacing: .3px;
    text-transform: uppercase;
    text-shadow:
        2px 2px 6px rgba(20, 5, 77, 0.75),
        2px 2px 6px rgba(0, 255, 100, 0.2),
        4px 4px 22px rgba(119, 101, 322, 0.75);
}
.scroll-animation {
    margin: 0 auto;
	width: 60px;
	height: 60px;
	border: 4px solid var(--color-site-white);
	border-radius: 50%;
	position: relative;
    text-shadow: 2px 2px 7px rgba(0, 0, 0, 3.5);
	animation: down 4s infinite;
	-webkit-animation: down 4s infinite;
	&::before {
		content: "";
		position: absolute;
		top: 15px;
		left: 18px;
		width: 18px;
		height: 18px;
		border-left: 5px solid var(--color-site-white);
  	    border-bottom: 5px solid var(--color-site-white);
        text-shadow: 2px 2px 7px rgba(0, 0, 0, 3.5);
		transform: rotate(-45deg);
	}
}
@keyframes down {
	0% {
		transform: translate(0);
	}
	20% {
		transform: translateY(15px);
	}
	40% {
		transform: translate(0);
	}
}

@-webkit-keyframes down {
	0% {
		transform: translate(0);
	}
	20% {
		transform: translateY(15px);
	}
	40% {
		transform: translate(0);
	}
}
.page-box-1 {
    display: flex; /* Enables flexbox */
    flex-direction: column; /* Stacks items vertically */
    justify-content: space-between; /* Centers content vertically */
    align-items: flex-start; /* Aligns content to the left horizontally */
    height: auto;
    width: 85%;
    margin: 0 auto;
    margin-top: 90px;
    margin-bottom: 90px;
    text-align: left;
    padding: 0; /* Adds padding for spacing */
}
.page-box-1 .box {
    text-align: right;
    margin-left: auto;
    padding-top: 30px;
}
 /* Styles for the container */
 
.page-box-1 .button-container {
    margin-top: 24px;
    margin-bottom: 0;
    padding-bottom: 12px;
}
 .page-box-1,
.page-box-9,
.main-image-container-2,
.image-wrapper,
.button-container {
    overflow: visible;
}
 .button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 25px;
}
/* Styles for the button */
.wrapper-contactus .button-area {
    display: flex;
    justify-content: center;
    margin-top: 0px;
}
.button-area {
    display: flex;
    justify-content: center;
    margin-top: -140px !important; /* Move button up by ~2 inches */
}

/* Contact form responsiveness: prevent horizontal clipping on small screens */
.wrapper-contactus {
    width: min(92vw, 980px);
    padding: clamp(18px, 3vw, 40px);
}

.wrapper-contactus form {
    gap: clamp(10px, 1.8vw, 18px);
}

.wrapper-contactus .dbl-field {
    gap: clamp(10px, 1.8vw, 18px);
}

.wrapper-contactus .dbl-field .field input,
.wrapper-contactus .message textarea,
.wrapper-contactus .captcha-section input[name="captcha"] {
    box-sizing: border-box;
}

.wrapper-contactus .message {
    margin-top: 0;
}

.wrapper-contactus .captcha-section {
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 12px;
}

.wrapper-contactus .captcha-section input[name="captcha"] {
    max-width: 100%;
}

.wrapper-contactus .button-area {
    margin-top: 10px !important;
}

@media screen and (max-width: 900px) {
    .contactus-page {
        min-height: 100svh;
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .wrapper-contactus {
        top: 84px;
        width: 92vw;
        padding: 16px;
    }

    .wrapper-contactus h1 {
        font-size: clamp(22px, 8vw, 42px);
        line-height: 1.2;
        margin-bottom: 12px;
    }

    .wrapper-contactus .dbl-field {
        grid-template-columns: 1fr;
    }

    .wrapper-contactus .field {
        height: 48px;
    }

    .wrapper-contactus .dbl-field .field input,
    .wrapper-contactus .message textarea,
    .wrapper-contactus .captcha-section input[name="captcha"] {
        font-size: 16px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .wrapper-contactus .message textarea {
        min-height: 130px;
        max-height: 240px;
    }

    .wrapper-contactus .captcha-section {
        grid-template-columns: 1fr;
        column-gap: 0;
    }

    .wrapper-contactus .captcha-section img {
        width: 100%;
        max-width: 200px;
    }

    

    .wrapper-contactus .captcha-section input[name="captcha"] {
        grid-column: 1;
        width: 100% !important;
    }
}

/* Strong contact-page-only layout guards for phone/tablet */
@media screen and (max-width: 1024px) {
    .contactus-page {
        position: relative;
        min-height: 100svh;
        height: auto;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 84px 0 20px;
    }

    .contactus-page .main-image-container {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100svh;
        z-index: 0;
    }

    .contactus-page .wrapper-contactus {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin: 0 auto;
        width: min(94vw, 760px);
        max-width: 94vw;
        padding: 14px;
        z-index: 1;
    }

    .contactus-page .wrapper-contactus h1 {
        width: 100%;
        font-size: clamp(20px, 7vw, 36px);
        line-height: 1.2;
        overflow-wrap: anywhere;
        word-break: break-word;
        text-wrap: balance;
    }

    .contactus-page .wrapper-contactus form,
    .contactus-page .wrapper-contactus .dbl-field,
    .contactus-page .wrapper-contactus .field,
    .contactus-page .wrapper-contactus .message,
    .contactus-page .wrapper-contactus .captcha-section {
        width: 100%;
        min-width: 0;
    }

    .contactus-page .wrapper-contactus .dbl-field {
        grid-template-columns: 1fr !important;
    }

    .contactus-page .wrapper-contactus .dbl-field .field {
        height: 50px;
    }

    .contactus-page .wrapper-contactus .dbl-field .field input,
    .contactus-page .wrapper-contactus .message textarea,
    .contactus-page .wrapper-contactus .captcha-section input[name="captcha"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        font-size: 16px;
        padding: 0 12px;
    }

    .contactus-page .wrapper-contactus .message textarea {
        padding-top: 12px;
        min-height: 130px;
    }

    .contactus-page .wrapper-contactus .captcha-section {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    .contactus-page .wrapper-contactus .captcha-section img {
        width: min(100%, 220px);
        height: 50px;
        object-fit: cover;
    }

    

    .contactus-page .wrapper-contactus .button-area {
        margin-top: 12px !important;
    }
}

/* Contact page clean responsive layout */
.contactus-page {
    position: relative !important;
    min-height: 100svh !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.contactus-page .main-image-container {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100svh !important;
    z-index: 0 !important;
}

.contactus-page .wrapper-contactus {
    box-sizing: border-box !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 auto 24px !important;
    width: min(72vw, 1480px) !important;
    max-width: calc(100vw - 48px) !important;
    padding: 36px 48px !important;
    z-index: 1;
    overflow: hidden !important;
}

.contactus-page .wrapper-contactus,
.contactus-page .wrapper-contactus *,
.contactus-page .wrapper-contactus *::before,
.contactus-page .wrapper-contactus *::after {
    box-sizing: border-box !important;
}

.contactus-page .wrapper-contactus h1 {
    width: 100% !important;
    margin-bottom: 20px !important;
    text-align: center !important;
    line-height: 1.18 !important;
    overflow-wrap: anywhere;
}

.contactus-page .wrapper-contactus form {
    width: 100% !important;
}

.contactus-page .wrapper-contactus .dbl-field,
.contactus-page .wrapper-contactus .field,
.contactus-page .wrapper-contactus .message,
.contactus-page .wrapper-contactus .captcha-section {
    width: 100% !important;
    min-width: 0 !important;
}

.contactus-page .wrapper-contactus .dbl-field {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

.contactus-page .wrapper-contactus .field {
    height: 50px !important;
}

.contactus-page .wrapper-contactus .dbl-field .field input,
.contactus-page .wrapper-contactus .message textarea,
.contactus-page .wrapper-contactus .captcha-section input[name="captcha"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.contactus-page .wrapper-contactus .message {
    margin-top: 0 !important;
}

.contactus-page .wrapper-contactus .message textarea {
    min-height: 150px !important;
}

.contactus-page .wrapper-contactus .captcha-section {
    display: grid !important;
    grid-template-columns: 180px auto !important;
    gap: 16px !important;
    align-items: center !important;
}

.contactus-page .wrapper-contactus .captcha-section img {
    grid-column: 1 !important;
    width: 180px !important;
    max-width: 100% !important;
    justify-self: start !important;
}

.contactus-page .wrapper-contactus .captcha-section input[name="captcha"] {
    grid-column: 1 / span 2 !important;
}

.contactus-page .wrapper-contactus .button-area {
    display: flex !important;
    justify-content: center !important;
    margin-top: 18px !important;
    margin-left: 0 !important;
}

@media screen and (min-width: 1025px) {
    .contactus-page {
        padding: 96px 0 32px !important;
    }

    .contactus-page .wrapper-contactus {
        width: min(72vw, 1480px) !important;
        max-width: min(72vw, 1480px) !important;
        padding: 36px 48px !important;
    }
}
/* Primary fix for modern browsers */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    /* your dvh-based rules */
}

/* Fallback for older browsers */
@supports not (height: 100dvh) {
    @media screen and (min-width: 768px) and (max-width: 1024px) {
        .contactus-page,
        .contactus-page .main-image-container {
            min-height: 100vh !important;
            height: 100vh !important;
        }
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .contactus-page {
        padding: 84px 0 24px !important;
        position: relative !important;
        min-height: 100dvh !important;
        background: var(--brand-night) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    
    .contactus-page .main-image-container {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: none !important;
        overflow: hidden !important;
        background: var(--brand-night) !important;
        z-index: 0 !important;
    }
    
    .contactus-page .main-image-container video,
    .contactus-page .main-image-container .hero-video,
    .contactus-page .main-image-container .hero-media {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
    }

    .contactus-page .wrapper-contactus {
        width: min(86vw, 760px) !important;
        max-width: min(86vw, 760px) !important;
        padding: 24px 22px !important;
        position: relative !important;
        z-index: 1 !important;
    }

    .contactus-page .wrapper-contactus h1 {
        font-size: clamp(26px, 5vw, 40px) !important;
        line-height: 1.18 !important;
        margin-bottom: 18px !important;
    }

    .contactus-page .wrapper-contactus .dbl-field {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .contactus-page .wrapper-contactus .field {
        height: 50px !important;
    }

    .contactus-page .wrapper-contactus .message textarea {
        min-height: 150px !important;
    }

    .contactus-page .wrapper-contactus .captcha-section {
        grid-template-columns: 1fr auto !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .contactus-page .wrapper-contactus .captcha-section img {
        grid-column: 1 !important;
        width: min(100%, 180px) !important;
        max-width: 180px !important;
    }

    

    .contactus-page .wrapper-contactus .captcha-section input[name="captcha"] {
        grid-column: 1 / span 2 !important;
    }
}

.refresh-button-box {
    margin-top: 12px;
    margin-bottom: 15px;
    display: flex;
}
.page-buttons {
    display: inline-flex;
    width: 100%;
    height: 10vh;
    justify-content: center;
    align-content: center;
}

/* Canonical corporate button system */

button.learn-more-button {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.learn-more-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 51px !important;
    min-width: 151px !important;
    padding: 0 24px;
    border: 1px solid var(--border-accent);
    background-color: var(--color-site-white);
    color: var(--brand-night);
    font-size: clamp(18px, 2vw + 8px, 25px);
    line-height: 1;
    font-weight: 700;
    text-decoration: none;
    border-radius: 6px;
    box-shadow: 0 14px 22px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    margin-bottom: 0;
    white-space: nowrap;
    will-change: transform, box-shadow, background-color, border-color;

    transition:
        transform 0.63s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.63s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.42s ease,
        border-color 0.42s ease,
        color 0.42s ease;
}
:root[data-theme="night-environment"] .learn-more-button {
    color: #FFFFFF !important;
    background-color: #24303B !important;
}

:root[data-theme="night-environment"] .learn-more-button .arrow {
    border-color: #FFFFFF !important;
}
/* Arrow */
.learn-more-button .arrow {
    border: solid var(--brand-night);
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 4px;
    margin-left: 12px;
    transform: rotate(-45deg);
    transition:
        border-color 0.42s ease,
        transform 0.63s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover */
.learn-more-button:hover {
    color: var(--color-site-white);
    background-color: var(--brand-navy);
    border-color: var(--border-accent);
    transform: translateY(4px);
    box-shadow: 0 5px 10px rgba(7, 20, 38, 0.16);
}

.learn-more-button:hover .arrow {
    border-color: var(--color-site-white);
    transform: translateX(2px) rotate(-45deg);
}

/* Active press */
.learn-more-button:active {
    transform: translateY(7px);
    box-shadow: 0 2px 4px rgba(7, 20, 38, 0.12);
    transition:
        transform 0.14s ease,
        box-shadow 0.14s ease,
        background-color 0.14s ease,
        border-color 0.14s ease,
        color 0.14s ease;
}

.learn-more-button:active .arrow {
    border-color: var(--color-site-white);
    transform: translateX(3px) rotate(-45deg);
}

/* Keyboard focus */
.learn-more-button:focus-visible {
    outline: 3px solid var(--border-accent);
    outline-offset: 4px;
}


.page-box-1 h1 {
    font-size: clamp(28px, 3.8vw, 50px);
    font-weight: 500;
    line-height: 1.2;
    color: var(--brand-night); /* Original color */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, .3);
    text-align: center;
    padding-top: 44px;
}
.page-box-1 h2 {
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 300;
    color: #5871a7; 
    margin-top: 100px;
    text-transform: uppercase;
}
.page-box-1 h3 {
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 600;
    color: rgb(111, 130, 156);
    text-align: left;
    line-height: 1.3;
    margin-top: 25px; /* No space above the first h3 */
    padding-bottom: 40px; /* Standard space below each h3 */
}
.page-box-1 h4 {
    font-size: clamp(24px, 2.5vw, 35px);
    font-weight: 600;
    color:  #5871a7;
    padding-top: 15px; /* Space above each h4 */
    padding-bottom: 10px; /* Space below each h4 */
    line-height: 1.4;
}
.page-box-1 h5 {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 300;
    color: var(--brand-night);
    text-align: left;
    line-height: 1.3;
}

.page-box-1 h6 {
    font-size: clamp(20px, 2.8vw, 50px);
    font-weight: 500;
    line-height: 1.1;
    color: var(--brand-night);
    margin-top: 0px;
    margin-bottom: 11px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, .3);
    text-align: left;
}

.page-box-1 h7 {
    font-size: clamp(20px, 2.5vw, 30px);
    font-weight: 300;
    color: #5871a7; 
    text-transform: uppercase;
}

.page-box-1 p {
    font-size: clamp(17px, 2.5vw, 20px)!important;
    line-height: 1.3;
    margin-bottom: 35px;
    text-align: left;
    color: var(--brand-night);
}
.page-box-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 50px;
}
.page-box-2 .image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    width: 65%;
    position: relative;
    overflow: hidden;
}
.image-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: inset 0 0 45px rgba(0, 0, 0, 5.45); /* Shadow for depth effect */
    pointer-events: none;
    z-index: 1;
}
.main-image {
    width: 100%; /* Ensures image fills the wrapper */
    height: auto;
    object-fit: cover;
    display: block;
}
.page-box-3 {
    display: flex; 
    flex-direction: column; 
    justify-content: center;
    align-items: flex-start;
    height: auto;
    width: 100%;
    margin: 0 auto;
    margin-top: 90px;
    text-align: left;
}
.page-box-3-wrapper {
    width: 85vw;
    margin: 0 auto;
}
.page-box-3-text {
    width: 85%;
    margin: 0 auto;
}
.page-box-3 h1 {
    font-size: clamp(20px, 2.8vw, 50px);
    font-weight: 500;
    line-height: 1.2;
    color: var(--brand-night); /* Original color */
    margin-top: 0px;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, .3); /* Original shadow */
}
.page-box-3 h2 {
    font-size: clamp(24px, 2.5vw, 35px);
    font-weight: 300;
    color: #5871a7;
    text-transform: uppercase;
}
.page-box-3 h3 {
    font-size: clamp(22px, 2.5vw, 32px);
    font-weight: 600;
    color: var(--brand-night);
    text-align: justify;
    line-height: 1.3;
    padding-bottom: 40px;
    padding-top: 35px;
}
.page-box-3 ul {
    list-style-type: none; 
    padding: 0; 
    margin: 28px 0; 
}
.page-box-3 ul li {
    font-size: clamp(18px, 2.5vw, 28px);
    line-height: 1.3;
    margin-bottom: 10px;  
}
.page-box-3 ul li strong {
    color:  #5871a7;; 
}
.page-box-3 .button-container {
    padding-bottom: 70px;
}
.page-box-3 h4 {
    font-size: clamp(28px, 2.5vw, 40px);
    font-weight: 300;
    color:  #5871a7;
    margin-top: 20px; 
    margin-bottom: 10px;
    line-height: 1.4;
}
.page-box-3 h5 {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 300;
    color: var(--brand-night);
    text-align: left;
    line-height: 1.3;
    text-align: left;
}
.page-box-3 p {
    font-size: clamp(18px, 2.5vw, 28px);
    line-height: 1.3;
    margin-bottom: 15px; 
    text-align: justify;
    color: var(--brand-night);
}
.quote-box {
    background-color: var(--color-site-white); 
    width: 75%;
    margin: 0 auto;
    padding: 20px 25px;
    margin-top: 40px; 
    margin-bottom: 40px;
    font-style: italic; 
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8); 
}
.quote-box h5 {
    font-size: clamp(20px, 2.5vw, 28px) !important;
    font-weight: 300;
    color: #01394b;
    line-height: 1.6;
    text-align: left;
    margin: 0;
}
.page-box-4 {
    display: flex; 
    flex-wrap: nowrap;
    height: auto;
    width: 100vw; 
}
.page-box-4 .right-box,
.page-box-4 .left-box {
    width: 50% !important;
    height: 100%;
    display: flex;
    justify-content: center; 
    align-items: center;
    box-sizing: border-box;
}
.page-box-4 .right-box {
    flex: 1;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    overflow: hidden;
  }
  .page-box-4 .left-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;  
    height: 100%;
  }
  .page-box-4 .sub-left-box {
    width: 100%;
    max-width: 90%;     
    flex-shrink: 0;
  }
  .page-box-4 .sub-right-box {
    width: 100% !important;    
    flex-shrink: 0;
  }
  .page-box-4 .rgt-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 50vw;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  .page-box-4 .rgt-image-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.8);
  }
  .page-box-4 .rgt-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 0;
  }
.right-box .main-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.section-wrapper-5 {
    display: flex;
    justify-content: space-between;
}
.main-video-wrapper {
    position: relative;
    overflow: hidden;
} 
#main-animation {
    display: block;
    width: 100%;
    height: auto;
}
video {
    font-size: 0;
    color: transparent;
  }  
.video-box, .page-box-4 {
    flex: 1;
}
.video-box {
    display: block; /* Remove any default padding/margin from images */
    object-fit: cover; /* Ensures the image covers the container proportionally */
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: auto;
}
.video-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 99.45%;
    box-shadow: inset 0 0 40px hsl(0, 0%, 0%); /* Adjust the blur radius and lightness as needed */
    pointer-events: none;
    pointer-events: none; /* Make sure it doesn't interfere with any interactions */
    z-index: 1;
    overflow: hidden;
}
.page-box-4 h1 {
    font-size: clamp(20px, 2.8vw, 50px);
    font-weight: 500;
    line-height: 1.1;
    color: var(--brand-night);
    margin: 0 0 20px 0;
    padding: 0ox;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
.page-box-4 h2 {
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 600;
    color: rgb(111, 130, 156);
    text-align: left;
    line-height: 1.1;
    padding-bottom: 11px;
}
.page-box-4 h3 {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 300;
    color: var(--brand-night);
    text-align: left;
    line-height: 1.3;
}
.page-box-4 ul {
    list-style-type: none;
    padding-left: 20px; /* Indent the list items */
    margin: 18px 0;
    text-align: start;
  }
  .page-box-4 ul li {
    position: relative; /* Position for bullet */
    padding-left: 25px;
  }
  li::before {
    content: "●"; /* Unicode character for a solid circle */
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 20px; /* Adjust the size as needed */
    color: #5871a7;
  }
  .page-box-4 ul li {
    font-size: clamp(18px, 2.5vw, 28px);
    line-height: 1.3;
    margin-bottom: 10px;
  }
  .page-box-4 ul li strong {
    color: #5871a7;
  }
.page-box-4 .sub-right-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    text-align: center;
    width: 90%;
    margin: 0;
    padding-right: 8vw;
    height: 100%;
}
.page-box-4 .sub-left-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    text-align: center;
    width: 90%;
    margin: 0;
    height: 100%;
}
.page-box-4 .image-wrapper {
    margin-right: 6vw;
    position: relative;
    width: 100%;
    display: inline-block;
}
.page-box-4 .left-box video {
    height: 100%; 
    width: auto; 
    object-fit: cover; 
}
.page-box-4 .button-container {
    align-self: start;
}
.page-box-5 {
    display: flex;
    width: 100vw;
    height: 58.3vh; 
    box-sizing: border-box;
}
.page-box-5 .left-box, .page-box-5 .right-box  {
    flex: 1; 
    height: 100%; 
    box-sizing: border-box; 
    display: flex; 
    justify-content: center; 
    align-items: center;
    padding: 0;
    overflow: hidden;
}
.page-box-5 .right-box video {
    width: 100%; /* Ensures video fully fills the width of the box */
    height: 100%; /* Ensures video fully fills the height of the box */
    object-fit: cover; /* Ensures the video fills the entire box without distortion */
}
.right-box .rgt-image-wrapper {
    position: relative;
    width: 100%; /* Control the width of the wrapper */
    max-width: 50vw;
    height: auto; /* Control the height of the wrapper */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.right-box .rgt-image-wrapper img.main-image {
    position: relative;
    max-width: 100%;
    height: auto; /* Ensure the image takes the full size of the wrapper */
    object-fit: cover; /* Makes the image cover the container while maintaining its aspect ratio */
}
.right-box .rgt-image-wrapper img.main-image::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    box-shadow: inset 0 0 35px rgba(0, 0, 0, .8); 
    pointer-events: none;
    z-index: 1;
}
.page-box-5 h1 {
    font-size: clamp(20px, 2.8vw, 50px);
    font-weight: 500;
    line-height: 1.1;
    color: var(--brand-night);
    margin: 0 0 20px 0;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
.page-box-5 h3 {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 300;
    color: var(--brand-night);
    line-height: 1.3;
}
.page-box-5 .sub-right-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Left-aligns the individual text elements */
    text-align: left; /* Ensures text alignment within the box is left */
    margin: 0; /* Removes excess margin */
    width: 80%;
}
/* CSS for .page-box-6 and .page-box-7 */
.page-box-6, .page-box-7 {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 20px; /* Space between columns */
    align-items: center; /* Align items vertically */
    padding: 20px; /* Optional: Adds padding around the container */
    box-sizing: border-box; /* Ensures padding doesn't affect the grid size */
}

/* Styling for left and right boxes */
.page-box-6 .left-box, .page-box-6 .right-box,
.page-box-7 .left-box, .page-box-7 .right-box {
    display: flex;
    flex-direction: column; /* Ensures child elements are stacked vertically */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    text-align: center; /* Ensures text content is centered */
}

/* Styling for sub-right-box */
.page-box-6 .sub-right-box, .page-box-7 .sub-right-box {
    padding: 10px; /* Adds spacing inside the box */
    background: var(--color-site-white)

; /* Light background for text readability */
    border-radius: 8px; /* Optional: Rounded corners */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Optional: Subtle shadow */
    text-align: left; /* Aligns text to the left */
}
.page-box-8 {
    width: 85%; /* Text takes up 85% of the page width */
    margin: 0 auto; /* Centers the container */
    box-sizing: border-box;
    margin-bottom: 80px;
}
.page-box-8 p {
    font-size: clamp(17px, 2.5vw, 20px)!important;
    line-height: 1.3;
    margin-bottom: 35px; /* Space between paragraphs */
    text-align: left;
    color: var(--brand-night);
}
.page-box-8 h1 {
    font-size: clamp(28px, 3.8vw, 50px);
    font-weight: 500;
    line-height: 1.1;
    text-align: center;
    color: var(--brand-night);
    margin: 55px 0 20px 0;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  }
  
.page-box-8 h2 {
    font-size: clamp(20px, 3vw, 26px) !important;
    font-weight: 600;
    color: #5871a7;
    text-align: left;
    line-height: 1.1;
    padding-bottom: 11px;
  }
.page-box-8 h3 {
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 600;
    color: rgb(111, 130, 156);
    text-align: left;
    line-height: 1.3;
    margin-top: 25px; /* No space above the first h3 */
    padding-bottom: 40px; /* Standard space below each h3 */
}
.page-box-8 h4 {
    font-size: clamp(22px, 2.5vw, 35px);
    font-weight: 600;
    color:  #5871a7;
    padding-top: 15px; /* Space above each h4 */
    padding-bottom: 10px; /* Space below each h4 */
    line-height: 1.4;
}
.page-box-8 h5 {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 300;
    color: var(--brand-night);
    text-align: left;
    line-height: 1.3;
}
.page-box-8 h6 {
 font-size: clamp(20px, 3vw, 26px);
    font-weight: 600;
    color: rgb(111, 130, 156);
    text-align: left !important;
    line-height: 1.3;
    margin-top: 75px;
    padding-bottom: 22px;
  }
.page-box-8 h3:first-of-type {
    margin-top: 0; /* Removes top margin for the first h3 */
}
.page-box-8 ul {
    list-style-type: none; /* Remove default bullets */
    padding: 0; /* Remove default padding */
    margin: 18px 0; /* Add spacing above and below the list */
}
.page-box-8 ul li {
    font-size: clamp(17px, 2.5vw, 20px)!important;
    line-height: 1.3;
    margin-bottom: 10px; /* Add space between list items */
}
.page-box-8 ul li strong {
    color:  #5871a7;; /* Set color for emphasis, adjust as needed */
}

.page-box-8 ul li::marker {
  content: none !important;
}

  .page-box-8 ul li::marker,
  .page-box-8 ul li::before,
  .page-box-8 ul li::after {
    content: none !important;
    display: none !important;
}
  
.page-box-9 {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: auto;
    position: relative; /* Allows positioning of overlay elements */
    overflow: hidden;
}
.page-box-9 .main-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}
.page-box-9 h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    text-transform: uppercase !important;
    transform: translate(-50%, -50%);
    font-size: clamp(60px, 10.5vw, 220px) !important;
    font-weight: 700 !important;
    color: var(--brand-night);
    z-index: 2;
    text-align: center;
    padding: 30px;
    border-radius: 5px; 
    text-shadow: 3px 3px 6px rgba(69, 66, 66, 0.9) !important;
}

.page-box-10 {
    display: block;
    width: 100%;
    margin: 0 auto; 
    text-align: left; 
    padding: 0;
    margin-bottom: 80px; 
}
.page-box-10 h1 {
    font-size: clamp(20px, 2.8vw, 50px);
    font-weight: 500;
    line-height: 1.1;
    color: var(--brand-night);
    margin-top: 0px;
    margin-bottom: 11px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, .3);
}
.page-box-10 h2 {
    font-size: clamp(20px, 2.5vw, 30px);
    font-weight: 300;
    color: #5871a7; 
    text-transform: uppercase;
}
.page-box-10 h3 {
    font-size: clamp(32px, 2.5vw, 50px);
    font-weight: 300;
    color: rgb(111, 130, 156);
    text-align: justify;
    line-height: 1.3;
    margin-top: 25px; 
    padding-bottom: 40px; 
}
.page-box-10 h3:last-of-type {
    margin-bottom: 0px; 
}
.page-box-10 h4 {
    font-size: clamp(24px, 3vw, 35px);
    font-weight: 600;
    color:  #5871a7;
    padding-top: 15px; 
    padding-bottom: 10px; 
    line-height: 1.4;
}
.page-box-10 h5 {
    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: 300;
    color: var(--brand-night);
    text-align: left;
    line-height: 1.3;
}
.page-box-10 p {
    font-size: clamp(18px, 2.5vw, 28px);
    line-height: 1.3;
    margin-bottom: 35px; 
    text-align: justify;
    color: var(--brand-night);
}
.page-box-10 ul {
    list-style-type: none;
    padding: 0; 
    margin: 18px 0; 
}
.page-box-10 ul li {
    font-size: clamp(18px, 2.5vw, 28px);
    line-height: 1.3; 
    margin-bottom: 10px; 
}
.page-box-10 ul li strong {
    color:  #5871a7;; 
}

.image-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.image-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.001);
    box-shadow: inset 0 0 45px rgba(0, 0, 0, 5.45);
    pointer-events: none;
    z-index: 1;
}

.page-box-11 {
    display: flex; 
    flex-direction: column; 
    justify-content: center;
    align-items: flex-start;
    width: 85%;
    margin: 0 auto;
    margin-top: 0px;
    text-align: left;
    padding: 0; 
    height: auto;
    margin-bottom: 0px;
}
.page-box-11 h1 {
    font-size: clamp(28px, 3.8vw, 50px);
    font-weight: 500;
    line-height: 1.1;
    color: var(--brand-night);
    margin-top: 10px;
    margin-bottom: 0px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, .3);
}
.page-box-11 h2 {
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 600;
    color: #5871a7; 
    margin-top: 50Px;
    line-height: 1.1;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
}
.page-box-11 h3 {
    font-size: clamp(28px, 2.5vw, 40px);
    font-weight: 600;
    color: var(--brand-night);
    text-align: justify;
    line-height: 1.3;
    margin-top: 50px; 
    margin-bottom: 20px;
}
.page-box-11 h4 {
    font-size: clamp(24px, 2.5vw, 35px);
    font-weight: 300;
    color: #5871a7; 
    margin-top: 170px;
    text-transform: uppercase;
}
.page-box-11 ul {
    list-style-type: none;
    padding-left: 20px; 
    margin: 18px 0;
  }
  .page-box-11 ul li {
    position: relative; 
    padding-left: 25px;
  }
  li::before {
    content: "●"; 
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 20px; 
    color: #5871a7;
  }
  .page-box-11 ul li {
    font-size: clamp(20px, 2.5vw, 28px);
    margin-bottom: 10px;
    line-height: 1.5;
  }
  .page-box-11 ul li strong {
    color: #5871a7;
  }
  .page-box-11 p {
    font-size: clamp(17px, 2.5vw, 20px);
    line-height: 1.3;
    font-weight: 300;
    color: var(--brand-night);
    text-align: justify;
    margin-top: 0;
    margin-bottom: 1.8rem;
  }
.page-box-11 .button-container {
    padding-bottom: 50px;
}
.page-box-12 {
    width: 85%;
    margin: 90px auto;
    padding: 0;
    text-align: center;
}

.page-box-12 h1 {
    font-size: clamp(28px, 3.8vw, 50px);
    font-weight: 500;
    line-height: 1.1;
    color: var(--brand-night);
    text-shadow: 2px 2px 5px rgba(0, 0, 0, .3);
    padding-bottom: 20px;
    text-align: center;
}

.page-box-12 h2 {
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 600;
    line-height: 1.1;
    color: rgb(111, 130, 156);
    padding-bottom: 20px;
    text-align: center !important;
    text-wrap: balance;
}

.page-box-12 p {
    font-size: clamp(17px, 2.5vw, 20px) !important;
    line-height: 1.1;
    text-align: left;
    color: var(--brand-night);
}

.page-box-12 .button-container {
    margin-top: 44px;
}
.page-box-14 {
    display: flex; /* Enables flexbox for side-by-side layout */
    height: 58.3vh;
    width: 100vw; /* Full page width */
    height: auto;
}
.page-box-14 .right-box,
.page-box-14 .left-box {
    margin-top: 45px;
    flex: 1; /* Each box takes up half of the container */
    display: flex; /* Enables flexbox */
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
}.page-box-14 h1 {
    font-size: clamp(20px, 2.8vw, 50px);
    font-weight: 500;
    line-height: 1.1;
    color: var(--brand-night);
    margin: 0 0 20px 0;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
.page-box-14 h2 {
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 600;
    color: rgb(111, 130, 156);
    text-align: left;
    line-height: 1.1;
    padding-bottom: 11px;
}
.page-box-14 h3 {
    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: 300;
    color: var(--brand-night);
    text-align: left;
    line-height: 1.3;
}
  .page-box-14 ul li {
    font-size: clamp(18px, 2.5vw, 28px) !important;
    line-height: 1.3;
    margin-bottom: 10px;
  }
  .page-box-14 ul li strong {
    color: #5871a7;
  }
  .page-box-14 .sub-right-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Left-aligns content */
    text-align: left;
    width: 75%;
    margin: 0;
  }
  .text-box-width {
    margin-left: 8%;
    margin-right: 8%;
  }
  .text-box-width-2 {
    width: 85%;
    margin: 0 auto;
    display: block; /* Enables flexbox */
    text-align: left; /* Ensures text alignment is centered */
    padding-top: 80px;
    white-space: normal;
    min-width: 0;
  }
  .parent-container {
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .thin-line {
    border-top: 1px solid var(--border-accent);
    width: 100%;
    height: 1px;
  }
  .spacer {
    height: 40px; /* Adjust height as needed */
    width: 100%; /* Full width for horizontal stretching */
    background-color: transparent; /* Keeps it invisible */
  }
/* Sitemap Container */
.sitemap-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Adjust for header height */
    padding: 1rem;
    text-align: center;
}
/* FAQ Container */
.faq-container {
    max-width: 90%;
    background-color: var(--color-site-white);
    border-radius: 5px;
    padding: 10px;
    margin: auto;
    box-shadow: none;
    border: none;
}
.faq-container .content {
    padding: 20px;
    border-radius: 8px;
}
.faq-content {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 25px;
}
.faq-container .accordion_item {
    border-radius: 5px;
    border: 1px solid var(--border-accent);
    overflow: hidden;
    transition: background-color 0.9s;
}
.faq-container .accordion_header {
    padding: 10px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-site-white);
}
.faq-container .accordion_header:hover {
    background-color: rgb(255, 192, 23, 0.5);
}
.accordion_header:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 4px;
    background-color: #f0f8ff;
    border-radius: 6px;
  }
.faq-container .accordion_content {
    margin-left: 2%;
    margin-right: 2%;
    overflow: hidden;
    height: 0;
    transition: height 0.3s ease-in-out;
}
.faq-container .accordion_content.active {
    padding-bottom: 10px;
    height: auto;
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-accent) var(--text-muted-light);
}
.faq-container span,
.icon {
    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: 600;
    letter-spacing: .5px;
    color: #5871a7;
}
.faq-container .accordion_content p {
    text-align: justify;
    font-size: clamp(18px, 2.5vw, 28px) !important;
    line-height: 1.3;
    font-weight: 300;
    color: var(--brand-night);
    padding-top: 6px;
    padding-bottom: 2px;
    width: 98%;
}
.accordion_content ul {
    list-style-type: none;
    padding-left: 20px;
    color: var(--brand-night);
}
.accordion_content li {
    position: relative;
    text-align: left;
    font-size: clamp(18px, 2.5vw, 28px);
    line-height: 1.3;
    font-weight: 300;
    letter-spacing: .35px;
    line-height: 22px;
    padding-left: 20px;
    margin-bottom: 8px;
    color: var(--brand-night);
    margin-left: 10%;
    margin-right: 10%;
    overflow: hidden;
}
.accordion_content li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 8px;
    height: 8px;
    background-color: var(--brand-night);
}

/* Updated Icon Animation */
.icon {
    display: inline-block;
    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: bold;
    transition: transform 0.6s ease-in-out, color 0.3s ease-in-out;
}

/* Right Spin (Opening the Accordion) */
.spin {
    animation: spin-right 0.6s ease-in-out;
}

@keyframes spin-right {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(1080deg); } /* 3 full rotations to the right */
}

/* Left Spin (Closing the Accordion) */
.spin-reverse {
    animation: spin-left 0.6s ease-in-out;
}

@keyframes spin-left {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-1080deg); } /* 3 full rotations to the left */
}

/* Call-to-Action Button */
.cta-button {
    display: inline-block;
    padding: 12px 24px;
    margin-top: 15px;
    background: var(--color-site-white); 
    color: var(--brand-night);
    border: 2px solid var(--border-accent);
    text-decoration: none;
    font-weight: 800;
    font-size: 30px;
    border-radius: 1px;
    transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease, box-shadow 0.75s linear;
    cursor: pointer;
    box-shadow: -0.1px -0.1px 30px rgba(36, 35, 35, 0.25), 10px 10px 15px rgba(35,35,35,0.55);
}
.cta-button:hover {
    background: var(--brand-navy);
    color: var(--color-site-white);
    border: 2px solid var(--border-accent);
    box-shadow: none;
}

/* Page Title */
.sitemap-container h1 {
    font-size: 36px;
    font-weight: bold;
    color: var(--brand-night);
    margin-bottom: 3rem;
    margin-top: 6rem;
}

/* Sitemap Grid */
.sitemap-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
    gap: 1rem;
    width: 100%;
    max-width: 1200px;
    text-align: left;
}

/* Grid Sections */
.grid-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.grid-section h2 {
    font-size: 20px;
    font-weight: bold;
    color: var(--brand-night);
}
/* Links */
.grid-section a {
    color: var(--brand-night);
    text-decoration: none;
    font-size: 18px;
    padding: 5px 0; /* Padding to enhance clickability */
    position: relative;
    z-index: 1; /* Ensure links are clickable */
}
.grid-section a:hover {
    text-decoration: underline;
}
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-site-white);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.grid-container-index {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
    "slate1"
    "slate2"
    "slate3"
    "slate4"
    "slate5"
    "slate6"
    "slate7"
    "slate8"
    "slate9"
    "slate10"
    "slate11"
    "slate12"
    "slate13"
    "slate14"
    "slate15"
    "slate16"
    "slate17"
    "slate18"
    "slate19"
    "slate20";
    gap: 16px;
}
.grid-container-ste {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
    "slate1"
    "slate2"
    "slate3"
    "slate4"
    "slate5"
    "slate6"
    "slate7"
    "slate8"
    "slate9";
    gap: 16px;
}
.grid-container-ste .slate1 { grid-area: slate1; }
.grid-container-ste .slate2 { grid-area: slate2; }
.grid-container-ste .slate3 { grid-area: slate3; }
.grid-container-ste .slate4 { grid-area: slate4; }
.grid-container-ste .slate5 { grid-area: slate5; }
.grid-container-ste .slate6 { grid-area: slate6; }
.grid-container-ste .slate7 { grid-area: slate7; }

.grid-container-ste .text-box-js h2 {
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center !important;
}

.slate-wrapper {
    display: grid;
    grid-area: auto;
}
.slate {
    background-color: var(--color-site-white);
    border-radius: 2px;
    box-shadow: 0px 4px 7.5px rgba(0, 0, 0, 0.7);
    padding: 3%;
    margin: 0;
}
/* Assign each slate to its respective grid area */
.slate1 { grid-area: slate1; }
.slate2 { grid-area: slate2; }
.slate3 { grid-area: slate3; }
.slate4 { grid-area: slate4; }
.slate5 { grid-area: slate5; }
.slate6 { grid-area: slate6; }
.slate7 { grid-area: slate7; }
.slate8 { grid-area: slate8; }
.slate9 { grid-area: slate9; }
.slate10 { grid-area: slate10; }
.slate11 { grid-area: slate11; }
.slate12 { grid-area: slate12; }
.slate13 { grid-area: slate13; }
.slate14 { grid-area: slate14; }
.slate15 { grid-area: slate15; }
.slate16 { grid-area: slate16; }
.slate17 { grid-area: slate17; }
.slate18 { grid-area: slate18; }
.slate19 { grid-area: slate19; }
.slate20 { grid-area: slate20; }

/* Container for the full-width video */
.video-full-screen {
    display: flex;             /* Enables flexbox to center content */
    justify-content: center;   /* Centers horizontally */
    align-items: center;       /* Centers vertically */
    width: 100vw;              /* Full viewport width */
    height: 100vh;             /* Full viewport height */
    overflow: hidden;
    position: relative;
}

/* Full-width video settings */
.slate19.video-full-screen video {
    width: 100vw;              /* Full viewport width */
    height: auto;              /* Keeps aspect ratio */
    object-fit: cover;         /* Fills container without distortion */
}
.slate19 {
    padding: 0;
}
.margin-box {
    margin-right: 6%;
}

.thick-line {
    width: 100%;
    height: 16px;
    margin: 0 auto 40px;
    border-radius: 0;
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.9);
    background: var(--color-site-white);
}

.thick-line::before {
    content: none;
}

.thick-line::after {
    content: none;
}

@media screen and (max-width: 800px) {
    .thick-line {
        width: 100%;
        height: 16px;
        margin: 0 auto 40px;
    }
}

main > .thick-line {
    width: 100%;
    margin-top: 28px;
    margin-bottom: 22px;
}

.grid-container-index + .thick-line {
    width: 100% !important;
    height: 16px !important;
    margin: 0 auto 40px !important;
    border-radius: 0 !important;
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.9) !important;
    background: var(--color-site-white) !important;
}

.grid-container-index + .thick-line::before {
    content: none !important;
}

.grid-container-index + .thick-line::after {
    content: none !important;
}

@media screen and (max-width: 800px) {
    .grid-container-index + .thick-line {
        width: 100% !important;
        height: 16px !important;
        margin: 0 auto 40px !important;
    }
}

.section-wrapper-js {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap; 
    width: 100%;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
  }
  
  .section-wrapper-js > .text-box-js:nth-child(2) {
    padding-left: 3rem;
    margin-left: 0;
  }
  
  .section-wrapper-js > .text-box-js:first-child {
    padding-right: 3rem;
    margin-right: 0;
  }
  
  .text-box-js,
  .image-box-js,
  .video-box-js {
    flex: 0 0 50%;
    max-width: 50%;
    box-sizing: border-box;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .text-box-js {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin: 0;
  }
  
  .text-box-js h1 {
    font-size: clamp(28px, 3.8vw, 50px);
    width: 100%;
    max-width: 800px;
    font-weight: 500;
    line-height: 1.1;
    text-align: center;
    color: var(--brand-night);
    margin: 0 auto 20px auto;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  }
  
  .text-box-js h2 {
    font-size: clamp(20px, 3vw, 26px) !important;
    font-weight: 600;
    color: rgb(111, 130, 156);
    text-align: center !important;
    text-wrap: balance;
    line-height: 1.1;
    padding-bottom: 11px;
  }
  
  .text-box-js h3 {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 300;
    color: var(--brand-night);
    text-align: left;
    line-height: 1.3;
  }
  .text-box-js p {
    font-size: clamp(17px, 2.5vw, 20px) !important;
    line-height: 1.3;
    margin-bottom: 35px; /* Space between paragraphs */
    text-align: left;
    color: var(--brand-night);
}
  .video-box-js {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: transparent;
  }
  .video-wrapper {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
  }
  
  .video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .squares9-launch-page header.corporate-main::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    z-index: -1;
    pointer-events: none;
  }

  .image-box-js {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    padding: 1rem;
    box-sizing: border-box;
  }
  
  .image-wrapper {
    max-width: 100%;
    width: 100%;
    height: auto;
    overflow: hidden;
  }
  
  .lazy-image {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .lazy-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  @media (max-width: 796px) {
    .index-footer-corporate-master-row-a {
      display: grid;
      grid-template-rows: repeat(5, auto);
      row-gap: 2rem;
      justify-items: center;
      padding: 1rem;
    }
  
    .footer-column-box-1,
    .footer-column-box-2 {
      display: contents; /* flatten nested divs */
    }
  
    .footer-column {
      width: 100%;
      max-width: 500px;
      text-align: center;
    }
  
    .footer-column h4 {
      font-size: 1.1rem;
      margin-bottom: 0.5rem;
    }
  
    .footer-column ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
  
    .footer-column ul li {
      margin: 0.25rem 0;
    }
  
    .index-footer-corporate-master-row-b,
    .index-footer-corporate-master-row-c {
      text-align: center;
      padding: 1rem 0;
    }
  
    .corporate-logo-box picture {
      display: block;
      margin: 0 auto;
    }
  
    .bottom-box small {
      display: block;
      margin-top: 0.5rem;
    }
  }

  @media screen and (max-width: 800px) {
    .video-box-js,
    .image-box-js {
      width: 90% !important;
      margin: 0 auto !important;
    }
  
    .video-box-js video,
    .image-box-js img {
      width: 100% !important;
      height: auto !important;
      display: block;
    }
  
    .section-wrapper-js {
      flex-direction: column;
      align-items: center;
      width: 100%;
    }
  
    .text-box-js {
      width: 100%;
    }
  
    .slate {
      padding: 1rem 0;
    }
  }

  @media screen and (max-width: 800px) {
    .video-box-js,
    .image-box-js {
      width: 90vw !important;
      max-width: 90vw !important;
      margin: 0 auto !important;
      display: block !important;
    }
  
    .video-box-js video,
    .image-box-js img {
      width: 100% !important;
      height: auto !important;
      display: block !important;
    }
  
    .section-wrapper-js {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
    }
  }

/* Media Query for 796px or less */
@media screen and (max-width: 796px) {
    .index-footer-corporate {
      position: relative;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(7, auto);
      grid-template-areas:
        "slate1"
        "slate2"
        "slate3"
        "slate4"
        "slate5"
        "slate6"
        "slate7";
      gap: 1rem;
    }
  
    .footer-slate1,
    .footer-slate2,
    .footer-slate3,
    .footer-slate4,
    .footer-slate5,
    .footer-slate6,
    .footer-slate7 {
      display: block !important;
      width: 100% !important;
      position: relative !important;
      clear: both;
      min-height: 1px;
    }
  
    .footer-slate1 { grid-area: slate1; order: 1; }
    .footer-slate2 { grid-area: slate2; order: 2; }
    .footer-slate3 { grid-area: slate3; order: 3; }
    .footer-slate4 { grid-area: slate4; order: 4; }
    .footer-slate5 { grid-area: slate5; order: 5; }
    .footer-slate6 {
      grid-area: slate6;
      order: 6;
      display: flex !important;
      justify-content: center !important;
    }
    .footer-slate6 a {
      margin-top: 20px;
    }
    .footer-slate7 { 
        grid-area: slate7; order: 7; 
        display: flex !important;
        justify-content: center !important;
        align-items: left !important;
        text-align: left !important;
    }

    .footer-slate7 .bottom-box {
        width: 100%;
        display: flex;
        justify-content: center;
      }
      
      .footer-slate7 p {
        text-align: center;
        margin: 0;
        width: 100%;
      }

    .corporate-logo-box {
        display: flex !important;
        justify-content: center !important;  
    }

  
    /* Force-reset wrapper containers */
    .footer-column-box-1,
    .footer-column-box-2,
    .first-box,
    .second-box,
    .third-box,
    .fourth-box,
    .footer-column,
    .corporate-logo-box,
    .bottom-box {
      all: unset;
      display: contents !important;
    }

    html, body {
      min-height: 100vh;
      overflow-y: auto;
    }
      
    .index-footer-corporate {
      min-height: 200vh;
      overflow: visible;
    }
     
  
    .index-footer-corporate-master-row-a,
    .index-footer-corporate-master-row-b,
    .index-footer-corporate-master-row-c {
      display: contents !important;
    }
  
    /* Remove all spacing/margin/padding that could shift flow */
    .footer-column,
    .footer-column > div,
    .footer-column ul,
    .footer-column h4,
    .footer-slate1,
    .footer-slate2,
    .footer-slate3,
    .footer-slate4,
    .footer-slate5,
    .footer-slate6,
    .footer-slate7 {
      margin: 0;
      padding: 0;
    }

    .page-box-1 p {
      text-align: left !important;
      line-height: 1.6;
    }

    .page-box-8 p,
    .page-box-8 ul,
    .page-box-8 li {
      text-align: left !important;
      line-height: 1.6 !important;
    }

    .text-box-width-2 h1,
    .text-box-width-2 h2 {
      width: 100%;
      max-width: 100%;
      padding-right: 0;
      white-space: normal;
      overflow-wrap: break-word;
      word-break: break-word;
      text-align: left;
      margin: 0 0 1rem 0;
      box-sizing: border-box;
    }

    .main-image-container-2 {
        position: relative;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        height: auto;
      }
      
      .main-image-container-2 video {
        width: 100%;
        height: auto;
        display: block;
      }
      
      video {
        width: 100%;
        height: auto;
        display: block;
      }

      .page-box-2 {
        width: 100%;
        height: auto;
        margin: 0 auto;
        display: block;
        box-sizing: border-box;
      }
      
      .page-box-2 .image-wrapper {
        width: 100%;
        height: auto;
      }
      
      .page-box-2 .main-image {
        width: 100%;
        height: auto;
        display: block;
      }

      .page-box-3 p {
        text-align: left !important;
        line-height: 1.6;
        overflow-wrap: break-word;
      }

      .page-box-12 p {
        text-align: left !important;
        line-height: 1.6;
        overflow-wrap: break-word;
    }
      
      .text-box-js p {
        text-align: left !important;
        line-height: 1.6;
        overflow-wrap: break-word;
      }
  }

  blockquote {
    background: #f4f6f9;
    font-size: 28px;
    margin: 1.5em 0;
    padding: 1em 1.5em;
    font-style: italic;
    color: #333;
  }

  /* Tables */
table {
    width: 100%;
    margin-top: 1em;
    margin-bottom: 2em;
    border-collapse: collapse;
    border: 1px solid #ccc;
  }
  
  thead {
    background-color: #e9f0f7;
  }
  
  th, td {
    text-align: left;
    padding: 0.75em;
    border: 1px solid #ccc;
    vertical-align: top;
  }
  
  /* Responsive adjustments */

@media (max-width: 796px) {
  .index-footer-corporate {
    min-height: auto !important;
  }

  .index-footer-corporate-master-row-a,
  .index-footer-corporate-master-row-b,
  .index-footer-corporate-master-row-c {
    display: block !important;
  }

  .footer-slate1,
  .footer-slate2,
  .footer-slate3,
  .footer-slate4,
  .footer-slate5,
  .footer-slate6,
  .footer-slate7 {
    display: block !important;
    margin-bottom: 18px;
  }

  .footer-slate7 p {
    text-align: center !important;
  }
}

/* Footer mobile hotfix: restore structure after legacy "all: unset" rules */
@media screen and (max-width: 796px) {
  .index-footer-corporate {
    display: block !important;
    width: 92% !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    margin: 0 auto 18px !important;
    padding: 8px 0 0 !important;
  }

  .index-footer-corporate-master-row-a,
  .index-footer-corporate-master-row-b,
  .index-footer-corporate-master-row-c {
    display: block !important;
    width: 100% !important;
  }

  .index-footer-corporate-master-row-a {
    display: block !important;
  }

  .footer-column-box-1,
  .footer-column-box-2,
  .first-box,
  .second-box,
  .third-box,
  .fourth-box,
  .footer-slate4,
  .footer-slate5,
  .footer-column {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    overflow: visible !important;
  }

  .footer-column-box-1,
  .footer-column-box-2 {
    display: block !important;
  }

  .first-box,
  .second-box,
  .third-box,
  .footer-slate4,
  .footer-slate5 {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 0 14px !important;
    margin: 0 0 14px !important;
    border-bottom: 0 !important;
  }

  .footer-column h4 {
    margin: 0 0 10px 0 !important;
    text-align: left !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.2px !important;
    color: var(--text-primary) !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }

  .footer-column ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .footer-column li,
  .footer-column a {
    display: block !important;
    text-align: left !important;
    font-size: 13px !important;
    line-height: 1.32 !important;
    color: rgb(24, 35, 54) !important;
  }

  .footer-column a::before,
  .footer-slate5 a::before {
    content: "- ";
    color: rgba(8, 31, 65, 0.55);
  }

  .footer-column li + li,
  .footer-slate5 li + li {
    margin-top: 6px !important;
  }

  .footer-slate5 h4 {
    margin: 0 0 10px 0 !important;
    text-align: left !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.2px !important;
    color: var(--text-primary) !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }

  .footer-slate5 ul {
    margin: 0 !important;
    padding: 0 !important;
  }

  .footer-slate5 a {
    display: block !important;
    text-align: left !important;
    font-size: 13px !important;
    line-height: 1.32 !important;
    color: rgb(24, 35, 54) !important;
  }

  .footer-slate6 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 2px 0 0 !important;
  }

  .corporate-logo-box {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 6px 0 0 !important;
  }

  .corporate-logo-box picture,
  .corporate-logo-box a {
    display: block !important;
    margin: 0 auto !important;
  }

  .corporate-logo-box img {
    display: block !important;
    margin: 0 auto !important;
    max-height: 100px !important;
    width: auto !important;
    height: auto !important;
  }

  .footer-slate7 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .footer-slate7 .bottom-box {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    color: rgba(8, 31, 65, 0.82) !important;
  }

  .footer-slate7 .bottom-box p,
  .footer-slate7 .bottom-box small {
    display: block !important;
    margin: 0 !important;
    text-align: center !important;
  }
}

@media screen and (max-width: 800px) {
  .image-text1 {
    position: absolute;
    top: 36%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1rem;
    box-sizing: border-box;
  }

  .image-text1 h1 {
    width: 90vw !important;
    max-width: 90vw !important;
    margin: 0 auto !important;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: center;
    font-size: clamp(34px, 8.4vw, 40px) !important;
    line-height: 1.16;
    padding-top: 0;
  }

  .image-text1 h2 {
    width: 90vw !important;
    max-width: 90vw !important;
    margin: 0 auto !important;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: center;
    font-size: 18px !important;
    line-height: 1.4;
  }

  .scroll-field {
    display: flex !important;
    visibility: visible !important;
    bottom: 9%;
  }
}

@media screen and (max-width: 1024px) {
  .image-text3,
  .image-text4,
  .image-text5,
  .image-text6,
  .image-text8,
  .image-text10,
  .image-text11 {
    width: min(90vw, 720px);
    max-width: 90vw;
    padding: 0 14px;
    box-sizing: border-box;
  }

  .image-text3,
  .image-text4,
  .image-text5,
  .image-text6,
  .image-text10,
  .image-text11 {
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
  }

  .image-text3 {
    top: 43%;
    white-space: normal;
  }

  .image-text4,
  .image-text5,
  .image-text10,
  .image-text11 {
    top: 45%;
    white-space: normal;
  }

  .image-text6 {
    top: 42%;
    white-space: normal;
  }

  .image-text3 h1,
  .image-text4 h1,
  .image-text5 h1,
  .image-text8 h1,
  .image-text10 h1,
  .image-text11 h1 {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .right-section {
    display: none !important;
  }

  .nav-buttons {
    top: 72px;
    right: 24px;
    width: min(88vw, 420px);
    max-height: none !important;
    overflow: visible !important;
    padding: 18px 22px;
  }

  .nav-buttons.is-open {
    display: flex !important;
    max-height: none !important;
  }

  .nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
  }

  .square-earth-page .main-image-container {
    width: 100%;
    overflow: hidden;
  }

  .square-earth-page .main-image-container video,
  .square-earth-page #main-animation {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 68% center;
  }

  .square-earth-page .image-text11 {
    top: 44% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 86vw;
    text-align: center !important;
    white-space: normal;
  }

  .square-earth-page .image-text11 h1 {
    font-size: clamp(54px, 9vw, 92px) !important;
    line-height: 1.08;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .square-earth-page .scroll-field-box {
    bottom: -92%;
  }

  .square-earth-page .page-box-10,
  .square-earth-page .page-box-10 .parent-container {
    width: 100%;
    justify-content: flex-start;
  }

  .square-earth-page .text-box-width-2 {
    width: 85%;
    max-width: 85%;
    margin-left: 7.5%;
    margin-right: 7.5%;
    padding-top: 52px;
    white-space: normal;
    text-align: left;
  }

  .square-earth-page .page-box-10 h1,
  .square-earth-page .page-box-10 h2 {
    text-align: left !important;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .square-earth-page .image-wrapper,
  .square-earth-page .video-wrapper,
  .square-earth-page .page-box-4 .rgt-image-wrapper,
  .square-earth-page .right-box .rgt-image-wrapper {
    border-radius: 0 !important;
  }

  .square-earth-page .index-footer-corporate {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(4, max-content) !important;
    grid-template-areas:
      "company members governance"
      "legal advertising ."
      ". logo ."
      "copyright copyright copyright" !important;
    column-gap: 24px !important;
    row-gap: 18px !important;
  }

  .square-earth-page .first-box {
    grid-area: company !important;
  }

  .square-earth-page .second-box {
    grid-area: members !important;
  }

  .square-earth-page .third-box {
    grid-area: governance !important;
  }

  .square-earth-page .footer-slate4 {
    grid-area: legal !important;
  }

  .square-earth-page .footer-slate5 {
    grid-area: advertising !important;
  }

  .square-earth-page .index-footer-corporate-master-row-b {
    grid-area: logo !important;
  }

  .square-earth-page .index-footer-corporate-master-row-c {
    grid-area: copyright !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .esg-page .main-image-container {
    height: 100vh !important;
    min-height: 100vh !important;
  }

  .esg-page .image-text6 {
    top: 44% !important;
  }

  .esg-page .image-text6 h1 {
    font-size: clamp(220px, 30vw, 320px) !important;
  }

  .members-page .nav-links a.contact-btn {
    display: none !important;
  }

.members-page .image-text3 {
    top: 42% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(82vw, 620px) !important;
    max-width: 82vw !important;
    padding: 0 16px !important;
    text-align: center !important;
    white-space: normal !important;
}

.members-page .image-text3 h1 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    font-size: clamp(42px, 6.6vw, 60px) !important;
    line-height: 1.1 !important;
    letter-spacing: 1.8px !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    box-sizing: border-box !important;
}

.members-page .members-hero-break {
    display: none !important;
}

.members-page .scroll-field {
    bottom: 6% !important;
}

.members-page .page-box-10 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 1rem !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.members-page .page-box-10 .parent-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.members-page .text-box-width-2 {
    display: block !important;
    width: 100% !important;
    max-width: 900px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding-top: 52px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.members-page .text-box-width-2 h1,
.members-page .text-box-width-2 h2 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.members-page .page-box-10 h2 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 0.9rem 0 !important;
    padding: 0 !important;
    text-align: left !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}

.members-page #about-page-heading {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-wrap: balance;
    text-align: left !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    font-size: clamp(2rem, 4.1vw, 3.2rem) !important;
    box-sizing: border-box !important;
}

.members-page .page-box-10 h1,
.members-page .page-box-10 h2 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
}

.members-page .first-box {
    padding-left: 18px !important;
}
}
@media (max-width: 1024px) {
    .members-page .text-box-width-2 {
        max-width: 100% !important;
        padding-top: 44px !important;
    }

    .members-page #about-page-heading {
        font-size: clamp(1.85rem, 5vw, 2.7rem) !important;
        line-height: 1.14 !important;
    }
}

@media screen and (max-width: 1024px) {
  .esg-page .image-text6 {
    top: 43%;
    width: 100%;
    max-width: 100%;
    padding: 0 18px;
  }

  .esg-page .image-text6 h1 {
    font-size: clamp(120px, 26vw, 220px) !important;
    line-height: 0.94;
    letter-spacing: 3px !important;
  }
}

@media screen and (max-width: 800px) {
  .esg-page .image-text6 {
    top: 41%;
    padding: 0 12px;
  }

  .esg-page .image-text6 h1 {
    font-size: clamp(110px, 30vw, 170px) !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .esg-page .main-image-container {
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
    background: var(--brand-night);
  }

  .esg-page .main-image-container video,
  .esg-page #main-animation {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center center;
    display: block;
  }

  .esg-page .image-text6 {
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 100%;
    padding: 0 16px;
    text-align: center;
  }

  .esg-page .image-text6 h1 {
    font-size: clamp(180px, 26vw, 260px) !important;
    line-height: 0.95;
    letter-spacing: 4px !important;
  }

  .esg-page .scroll-field {
    bottom: 6% !important;
    gap: 14px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1366px) {
  .esg-page .main-image-container {
    width: 100%;
    min-height: 100svh;
    height: 100svh;
    overflow: hidden;
    background: var(--brand-night);
  }

  .esg-page .main-image-container video,
  .esg-page #main-animation {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover;
    object-position: center center;
    display: block;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1366px) {
  .esg-page .image-text6 {
    top: 47%;
  }

  .esg-page .image-text6 h1 {
    font-size: clamp(110px, 14vw, 190px) !important;
  }

  .esg-page .scroll-field {
    bottom: 7% !important;
  }
}

/* Tablet + desktop footer normalization */
@media screen and (min-width: 797px) {
  .index-footer-corporate {
    width: min(92%, 1400px) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
      "index-footer-corporate-master-row-a"
      "index-footer-corporate-master-row-b"
      "index-footer-corporate-master-row-c" !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    row-gap: 18px !important;
    padding: 24px 0 12px !important;
  }

  .index-footer-corporate-master-row-a {
    grid-area: index-footer-corporate-master-row-a !important;
    display: grid !important;
    align-items: start !important;
    gap: clamp(20px, 2.8vw, 44px) !important;
  }

  .footer-column-box-1,
  .footer-column-box-2 {
    display: contents !important;
  }

  .first-box,
  .second-box,
  .third-box,
  .footer-slate4,
  .footer-slate5 {
    margin: 0 !important;
    padding: 0 !important;
    align-self: start !important;
  }

  .index-footer-corporate-master-row-b {
    grid-area: index-footer-corporate-master-row-b !important;
    min-height: 0 !important;
    padding-top: 4px !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: visible !important;
  }

  .corporate-logo-box {
    padding: 0 !important;
    margin: 0 !important;
  }

  .corporate-logo-box img {
    max-height: 104px !important;
  }

  .index-footer-corporate-master-row-c {
    grid-area: index-footer-corporate-master-row-c !important;
    min-height: 0 !important;
    padding: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  .index-footer-corporate .bottom-box,
  .index-footer-corporate .bottom-box p {
    text-align: center !important;
    margin: 0 !important;
  }
}

@media screen and (min-width: 1200px) {
  .index-footer-corporate-master-row-a {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media screen and (min-width: 797px) and (max-width: 1199px) {
  .index-footer-corporate-master-row-a {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Tablet-specific footer layout (stable 3+2 columns, no large gap) */
@media screen and (min-width: 797px) and (max-width: 1024px) {
  .index-footer-corporate {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(4, max-content) !important;
    grid-template-areas:
      "company members governance"
      "legal advertising ."
      ". logo ."
      "copyright copyright copyright" !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    align-content: start !important;
    justify-items: stretch !important;
    column-gap: 24px !important;
    row-gap: 18px !important;
    padding-top: 18px !important;
    padding-bottom: 16px !important;
  }

  .index-footer-corporate-master-row-a {
    display: contents !important;
  }

  .footer-column-box-1,
  .footer-column-box-2 {
    display: contents !important;
  }

  .footer-column-box-1 {
    grid-area: auto !important;
  }

  .footer-column-box-2 {
    grid-area: auto !important;
  }

  .first-box {
    grid-area: company !important;
  }

  .second-box {
    grid-area: members !important;
  }

  .third-box {
    grid-area: governance !important;
  }

  .footer-slate4 {
    grid-area: legal !important;
  }

  .footer-slate5 {
    grid-area: advertising !important;
  }

  .footer-column,
  .first-box,
  .second-box,
  .third-box,
  .footer-slate4,
  .footer-slate5 {
    display: block !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: start !important;
    justify-self: start !important;
    width: 100% !important;
  }

  .footer-slate4,
  .footer-slate5 {
    width: 100% !important;
    max-width: none !important;
    justify-self: start !important;
  }

  .footer-slate4 {
    margin-left: 0 !important;
  }

  .footer-slate5 {
    margin-left: 0 !important;
  }

  .index-footer-corporate h4 {
    margin-bottom: 6px !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
  }

  .index-footer-corporate a {
    font-size: 14px !important;
    line-height: 1.28 !important;
    margin-bottom: 4px !important;
  }

  .index-footer-corporate ul {
    display: block !important;
  }

  .index-footer-corporate ul,
  .index-footer-corporate li,
  .footer-slate1,
  .footer-slate2,
  .footer-slate3,
  .footer-slate4,
  .footer-slate5,
  .footer-column-box-1,
  .footer-column-box-2 {
    margin: 0 !important;
    padding: 0 !important;
  }

  .index-footer-corporate-master-row-b {
    grid-area: logo !important;
    display: flex !important;
    padding-top: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    align-self: start !important;
    justify-content: center !important;
  }

  .index-footer-corporate-master-row-c {
    grid-area: copyright !important;
    display: flex !important;
    min-height: 0 !important;
    align-self: start !important;
    justify-content: center !important;
  }

  .corporate-logo-box img {
    max-height: 92px !important;
  }
}

#main-animation {
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
}  

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background-color: #000000;
    pointer-events: none;
    z-index: 9999;
}

/* Entrance overlay, starts visible on hero pages */
body::before {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.6s ease, visibility 0s linear 1.6s;
}

/* Exit overlay, used when leaving page */
body::after {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.5s ease, visibility 0s linear 1.5s;
}

/* New page starts black */
body.hero-transition-pending::before {
    opacity: 1;
    visibility: visible;
    transition: none;
}

/* Fade black away after hero is ready */
body.hero-transition-reveal::before {
    opacity: 0;
    visibility: hidden;
}

/* Fade current page to black on click */
body.pageExitActive::after {
    opacity: 1;
    visibility: visible;
}

/* ── Hero entrance: video is visible immediately under the overlay ── */
.hero-media {
    opacity: 1;
    transition: none;
}

/* ── Text elements start invisible and fade in after overlay lifts ── */
.hero-text {
    opacity: 0;
    transition: opacity 2.2s ease;
}

.hero-header {
    opacity: 0;
    transition: opacity 1.2s ease;
}

.hero-accessibility {
    opacity: 0;
    transition: opacity 1.0s ease;
}

/* ── Each class reveals one element independently ── */
body.heroMediaVisible .hero-media {
    opacity: 1;
}

body.heroTitleVisible .hero-text,
body.heroTitleVisible .hero-title-block {
    opacity: 1;
}

body.heroSubtitleVisible .hero-subtitle-block {
    opacity: 1;
}

body.heroHeaderVisible .hero-header {
    opacity: 1;
}

body.heroAccessVisible .hero-accessibility {
    opacity: 1;
}

/* ── Legacy alias: heroTextVisible still works if used elsewhere ── */
body.heroTextVisible .hero-text,
body.heroTextVisible .hero-header,
body.heroTextVisible .hero-accessibility {
    opacity: 1;
}

.slate-mobile-layout {
    flex-direction: column;
}

.slate-desktop-layout {
    flex-direction: row;
}

.slate-media-mobile {
    width: 90%;
    margin: 0 auto;
}

.slate-text-mobile {
    width: 100%;
}

.mobile-slate-layout {
    width: 100%;
}

.mobile-slate-video {
    width: 90%;
    margin: 0 auto;
}

.mobile-slate-text {
    width: 100%;
}

.media-button {
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

.media-button:focus,
.media-button:focus-visible {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
}

.news-hero {
    position: relative;
    overflow: hidden; /* important */
}

/* VIDEO (bottom layer) */
.news-hero video {
    position: relative;
    z-index: 0;
    display: block;
}

/* OVERLAY (middle layer) */
.news-hero::after {
    content: "";
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.65); /* bump this to 25% so you SEE it */

    pointer-events: none;
    z-index: 1;
}

/* TEXT (top layer) */
.news-hero .hero-text {
    position: absolute; /* critical */
    z-index: 2;
}

.accessibility-trigger {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--border-accent);
    border-radius: 50%;
    background: var(--color-site-white);
    color: var(--text-primary);
    box-shadow: 0 10px 22px rgba(7, 20, 38, 0.16);
    cursor: pointer;
    z-index: 1200;
    transition: transform 0.38s ease, box-shadow 0.38s ease, background-color 0.38s ease, border-color 0.38s ease;
}

.accessibility-trigger:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(7, 20, 38, 0.2);
    background: var(--brand-navy);
    border-color: var(--border-accent);
    color: var(--color-site-white);
}

.accessibility-trigger:focus-visible {
    outline: 3px solid var(--border-accent);
    outline-offset: 3px;
}

.accessibility-trigger-icon {
    width: 24px;
    height: 24px;
    display: block;
}

.accessibility-panel {
    position: fixed;
    right: 24px;
    bottom: 94px;
    width: min(92vw, 390px);
    background: var(--color-site-white);
    border: 1.5px solid var(--border-accent);
    border-radius: 18px;
    box-shadow: 0 18px 42px rgba(7, 20, 38, 0.18);
    z-index: 1201;
}

.accessibility-panel[hidden] {
    display: none;
}

.accessibility-panel-inner {
    padding: 22px 22px 20px;
}

.accessibility-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.accessibility-panel-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(20px, 2vw, 24px);
    line-height: 1.2;
}

.accessibility-close {
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-primary);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.38s ease, border-color 0.38s ease, box-shadow 0.38s ease;
}

.accessibility-close:hover {
    background: rgba(255, 192, 23, 0.10);
    border-color: var(--border-accent);
    box-shadow: 0 0 0 2px rgba(255, 192, 23, 0.22);
}

.accessibility-close:focus-visible {
    outline: 3px solid var(--border-accent);
    outline-offset: 3px;
}

.accessibility-panel p {
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1.45;
}

.accessibility-setting {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-top: 22px;
}

.accessibility-setting-text {
    flex: 1;
}

.accessibility-setting-text h3 {
    margin: 0 0 6px 0;
    color: var(--text-primary);
    font-size: 18px;
    line-height: 1.2;
}

.accessibility-setting-text p {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-primary);
}

.setting-toggle {
    min-width: 94px;
    height: 44px;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1.5px solid var(--border-accent);
    border-radius: 999px;
    background: var(--color-site-white);
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.38s ease, border-color 0.38s ease, box-shadow 0.38s ease;
}

.setting-toggle:hover {
    background: rgba(255, 192, 23, 0.08);
    box-shadow: 0 0 0 3px rgba(255, 192, 23, 0.22), 0 6px 14px rgba(7, 20, 38, 0.1);
}

.setting-toggle[aria-checked="true"] {
    border-color: var(--border-accent);
    background: rgb(255, 250, 232);
}

.setting-toggle:focus-visible {
    outline: 3px solid var(--border-accent);
    outline-offset: 3px;
}

.setting-toggle-track {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: rgba(8, 31, 65, 0.22);
    flex-shrink: 0;
}

.setting-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-site-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.25s ease;
}

.setting-toggle[aria-checked="true"] .setting-toggle-track {
    background: var(--border-accent);
}

.setting-toggle[aria-checked="true"] .setting-toggle-thumb {
    transform: translateX(16px);
}

.setting-toggle-label {
    font-size: 14px;
    font-weight: 700;
    min-width: 22px;
    text-align: center;
}

.motion-paused {
    animation-play-state: paused !important;
    transition: none !important;
}

/* =====================================================
   DARK MODE EXCEPTIONS
   ===================================================== */

/* Nav dropdown — white background and dark text in all modes including dark */
@media (max-width: 1024px) {
    :root[data-theme="night-environment"] .corporate-main .nav-buttons {
        background: #FFFFFF !important;
    }
    :root[data-theme="night-environment"] .corporate-main .nav-buttons a,
    :root[data-theme="night-environment"] .corporate-main .nav-links a {
        color: #081F41 !important;
    }
    :root[data-theme="night-environment"] .corporate-main .nav-buttons a:hover,
    :root[data-theme="night-environment"] .corporate-main .nav-links a:hover {
        color: #FFC017 !important;
    }
    :root[data-theme="night-environment"] .corporate-main .nav-buttons::before {
        color: #081F41 !important;
        border-bottom-color: #FFC017 !important;
    }
}

/* Accessibility panel — always white background, dark text */
:root[data-theme="night-environment"] .accessibility-panel {
    background: #FFFFFF !important;
    border-color: #FFC017 !important;
}

:root[data-theme="night-environment"] .accessibility-panel-header h2,
:root[data-theme="night-environment"] .accessibility-panel p,
:root[data-theme="night-environment"] .accessibility-setting-text h3,
:root[data-theme="night-environment"] .accessibility-setting-text p,
:root[data-theme="night-environment"] .accessibility-control-group h3,
:root[data-theme="night-environment"] .accessibility-helper-text {
    color: #081F41 !important;
}

:root[data-theme="night-environment"] .accessibility-close {
    color: #081F41 !important;
}

:root[data-theme="night-environment"] .setting-toggle {
    background: #FFFFFF !important;
    color: #081F41 !important;
    border-color: #FFC017 !important;
}

:root[data-theme="night-environment"] .setting-toggle[aria-checked="true"] {
    background: rgb(255, 250, 232) !important;
}

:root[data-theme="night-environment"] .setting-toggle-track {
    background: rgba(8, 31, 65, 0.22) !important;
}

:root[data-theme="night-environment"] .setting-toggle[aria-checked="true"] .setting-toggle-track {
    background: #FFC017 !important;
}

:root[data-theme="night-environment"] .setting-toggle-thumb {
    background: #FFFFFF !important;
}

:root[data-theme="night-environment"] .accessibility-option-button {
    background: #FFFFFF !important;
    color: #081F41 !important;
    border-color: #FFC017 !important;
}

/* Dark mode: button hover — gold background, dark text */

:root[data-theme="night-environment"] .learn-more-button:hover .arrow {
    border-color: #010A18 !important;
}

/* ===== ADA AND HEADER CONSISTENCY OVERRIDES FOR UPDATED ABOUT-US PAGE ===== */

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.corporate-main .logo {
    color: inherit;
    text-decoration: none;
}

.corporate-main .logo:focus-visible,
.corporate-main .nav-buttons a:focus-visible,
.corporate-main .right-section a:focus-visible,
.skip-link:focus,
.learn-more-button:focus-visible,
.accessibility-trigger:focus-visible,
.accessibility-close:focus-visible,
.setting-toggle:focus-visible {
    outline: 3px solid var(--border-accent);
    outline-offset: 3px;
}

.corporate-main {
    min-height: 70px;
}

#primary-navigation {
    list-style: none;
}

#primary-navigation a {
    text-decoration: none;
}

.hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 42px;
    height: 42px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: inherit;
    flex-shrink: 0;
}

.hamburger span {
    position: absolute;
    left: 6px;
    width: 30px;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
    transition: transform 0.28s ease, opacity 0.28s ease, top 0.28s ease;
}

.hamburger span:nth-child(1) {
    top: 11px;
}

.hamburger span:nth-child(2) {
    top: 20px;
}

.hamburger span:nth-child(3) {
    top: 29px;
}

.hamburger.is-active span:nth-child(1) {
    top: 20px;
    transform: rotate(45deg);
}

.hamburger.is-active span:nth-child(2) {
    opacity: 0;
}

.hamburger.is-active span:nth-child(3) {
    top: 20px;
    transform: rotate(-45deg);
}

/* Outdated dark tablet portrait nav block removed */

@media screen and (max-width: 800px) {
    .corporate-main {
        padding: 8px 18px !important;
        min-height: 70px;
        align-items: center;
    }

    .corporate-main .right-section {
        display: none !important;
    }

    .corporate-main .hamburger {
        display: inline-flex !important;
        color: inherit;
        position: relative;
        top: auto;
        right: auto;
        margin-left: auto;
        z-index: 1102;
    }

    .corporate-main .nav-buttons {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        right: 16px;
        width: min(88vw, 360px);
        max-height: none;
        overflow: visible;
        padding: 22px 22px 20px;
        border: 1.5px solid var(--border-accent);
        border-radius: 18px;
        background: var(--color-site-white);
        box-shadow: 0 18px 42px rgba(7, 20, 38, 0.18);
        z-index: 1101;
    }

    .corporate-main .nav-buttons.is-open {
        display: flex !important;
        flex-direction: column;
        gap: 0;
    }

    .corporate-main .nav-links {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        width: 100%;
    }

    .corporate-main .nav-links a,
    .corporate-main .nav-buttons a {
        display: block;
        width: 100%;
        color: var(--text-primary) !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        line-height: 1.3;
        padding: 12px 0 !important;
        border-bottom: 1px solid rgba(8, 31, 65, 0.08) !important;
        white-space: normal;
        text-decoration: none !important;
        transition: color 0.2s ease, padding-left 0.2s ease !important;
    }

    .corporate-main .nav-links a:last-child,
    .corporate-main .nav-buttons a:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    .corporate-main .nav-links a:first-child,
    .corporate-main .nav-buttons a:first-child {
        padding-top: 0 !important;
    }

    .corporate-main .nav-links a:hover,
    .corporate-main .nav-buttons a:hover {
        color: var(--border-accent) !important;
        padding-left: 6px !important;
    }

    .corporate-main .nav-buttons a::before,
    .corporate-main .right-section a::before {
        display: none;
    }
}

/* Hamburger button refinement */
@media (max-width: 1024px) {
    .nav-toggle.hamburger {
        width: 48px !important;
        height: 48px !important;
        padding: 10px !important;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-toggle.hamburger span {
        display: block;
        width: 26px !important;
        height: 3px !important;
        margin: 4px 0 !important;
        background-color: var(--color-site-white);
        transition: all 0.25s ease;
    }

    /* Hover state */
    .nav-toggle.hamburger:hover {
        background-color: rgba(255, 192, 23, 0.15);
    }

    /* Active (open) state animation */
    .nav-toggle.hamburger.is-active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .nav-toggle.hamburger.is-active span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.hamburger.is-active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

@media screen and (min-width: 801px) and (max-width: 1024px) and (orientation: portrait) {
    .corporate-main .right-section {
        display: none !important;
    }

    .corporate-main .hamburger {
        display: inline-flex !important;
        margin-left: auto;
    }

    /* Use ID selector — beats every class rule in the file */
    #primary-navigation {
        display: none !important;
        position: fixed;
        top: 78px;
        right: 20px;
        padding: 22px 22px 20px;
        border: 1.5px solid var(--border-accent);
        border-radius: 18px;
        background: #FFFFFF;
        box-shadow: 0 18px 42px rgba(7, 20, 38, 0.18);
        z-index: 1200;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    #primary-navigation.is-open {
        display: flex !important;
    }

    #primary-navigation a {
        display: block;
        color: #081F41 !important;
        font-family: "Poppins", "Montserrat", sans-serif;
        font-size: 18px !important;
        font-weight: 600 !important;
        white-space: nowrap;
        padding: 12px 0 !important;
        border-bottom: 1px solid rgba(8, 31, 65, 0.08) !important;
        text-decoration: none !important;
        transition: color 0.2s ease, padding-left 0.2s ease !important;
    }

    #primary-navigation a:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    #primary-navigation a:first-child {
        padding-top: 0 !important;
    }

    #primary-navigation a:hover {
        color: #FFC017 !important;
        padding-left: 6px !important;
    }

    /* Dark mode: panel stays white */
    :root[data-theme="night-environment"] #primary-navigation {
        background: #FFFFFF !important;
    }
}

.accessibility-trigger,
.accessibility-panel,
.accessibility-close,
.setting-toggle {
    border-style: solid;
}

.accessibility-panel {
    max-width: calc(100vw - 32px);
}

/* Hamburger button — styled to match accessibility trigger */
@media (max-width: 1024px) {
    .nav-toggle.hamburger {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        margin-left: auto !important;
        width: 56px !important;
        height: 56px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1.5px solid var(--border-accent) !important;
        border-radius: 50% !important;
        background: var(--color-site-white) !important;
        box-shadow: 0 10px 22px rgba(7, 20, 38, 0.16) !important;
        color: var(--text-primary) !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
        transition: transform 0.38s ease, box-shadow 0.38s ease, background-color 0.38s ease, border-color 0.38s ease !important;
    }

    .nav-toggle.hamburger:hover {
        transform: translateY(-1px) !important;
        background: var(--brand-navy) !important;
        border-color: var(--border-accent) !important;
        box-shadow: 0 14px 28px rgba(7, 20, 38, 0.20) !important;
        color: var(--color-site-white) !important;
    }

    .nav-toggle.hamburger:focus-visible {
        outline: 3px solid var(--border-accent) !important;
        outline-offset: 3px !important;
        border-color: var(--border-accent) !important;
    }

    .nav-toggle.hamburger span {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 26px !important;
        height: 2.5px !important;
        margin: 0 !important;
        border-radius: 999px !important;
        background: currentColor !important;
        transform-origin: center center !important;
        transition: transform 0.28s ease, opacity 0.2s ease, background-color 0.38s ease !important;
    }

    .nav-toggle.hamburger span:nth-child(1) {
        transform: translate(-50%, calc(-50% - 8px)) !important;
    }

    .nav-toggle.hamburger span:nth-child(2) {
        transform: translate(-50%, -50%) !important;
    }

    .nav-toggle.hamburger span:nth-child(3) {
        transform: translate(-50%, calc(-50% + 8px)) !important;
    }

    .nav-toggle.hamburger.is-active span:nth-child(1) {
        transform: translate(-50%, -50%) rotate(45deg) !important;
    }

    .nav-toggle.hamburger.is-active span:nth-child(2) {
        opacity: 0 !important;
        transform: translate(-50%, -50%) scaleX(0.2) !important;
    }

    .nav-toggle.hamburger.is-active span:nth-child(3) {
        transform: translate(-50%, -50%) rotate(-45deg) !important;
    }

    .nav-toggle.hamburger.is-active {
        background: var(--brand-navy) !important;
        border-color: var(--border-accent) !important;
        color: var(--color-site-white) !important;
    }
}

/* Squares 9 button standard */

:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

/* =========================================================
   Squares 9 System Harmonization Pass
   Buttons, containers, panels, forms, footer, and reading surfaces
   ========================================================= */

:root {
    --surface-border-subtle: rgba(8, 31, 65, 0.08);
    --surface-border-accent-soft: rgba(255, 192, 23, 0.45);
    --shadow-surface-soft: 0px 10px 24px rgba(7, 20, 38, 0.08);
    --shadow-surface-medium: 0px 14px 28px rgba(7, 20, 38, 0.12);
    --shadow-surface-strong: 0px 18px 34px rgba(7, 20, 38, 0.18);
    --shadow-pressed: 0px 6px 14px rgba(7, 20, 38, 0.10);
    --input-focus-shadow: 0 0 0 3px rgba(255, 192, 23, 0.18);
    --scrollbar-track: rgba(255, 255, 245, 0.85);
    --scrollbar-thumb-hover: #E5AB0A;
    --text-placeholder: var(--text-tertiary);
    --surface-info: var(--brand-ice);
}

:root[data-theme="night-environment"] {
    --surface-border-subtle: rgba(190, 200, 210, 0.14);
    --surface-border-accent-soft: rgba(255, 200, 74, 0.45);
    --shadow-surface-soft: 0px 12px 28px rgba(0, 0, 0, 0.30);
    --shadow-surface-medium: 0px 16px 30px rgba(0, 0, 0, 0.34);
    --shadow-surface-strong: 0px 18px 34px rgba(0, 0, 0, 0.40);
    --shadow-pressed: 0px 8px 16px rgba(0, 0, 0, 0.24);
    --input-focus-shadow: 0 0 0 3px rgba(255, 200, 74, 0.18);
    --scrollbar-track: rgba(29, 37, 45, 0.9);
    --scrollbar-thumb-hover: #E5B63A;
    --text-placeholder: #8FA0B0;
    --surface-info: #223140;
}

body,
.index-container,
.index-container main,
.loginx-container,
.signup-container,
.container,
.login-container,
.verify-container,
.reset-container {
    background-color: var(--bg-foundation);
    color: var(--text-primary);
}

#main-content p,
.slate-wrapper p,
.terms-box p,
.terms-box li,
.terms-box ul,
.feed-page-wrapper-v .text-box,
.grid-item p,
.helppage-container p,
.contact-form-text,
.input-group input,
.input-group textarea {
    color: var(--text-primary);
}

.index-container main h2,
.index-container main h4,
.index-container main h5,
.index-container main h6,
.index-container main h7,
.index-container h8,
.terms-box h1,
.terms-box h2,
.terms-box h3,
.title,
.container-content .title,
.container-squares9 .title,
.upperheader4 .page-title,
.upperheader6 .post-author,
.feed-page-wrapper h10,
.feed-page-wrapper .profile-content h2,
.invitation-container h3,
.settings-container .title,
.helppage-container h1,
.navmenu-container lowerheader,
.navmenu-container lowerheader h1,
.navmenu-container h1 {
    color: var(--text-primary);
}

.index-container main h3,
.border,
.index-container .content .btny,
.signup-container .square-listing li::before {
    color: var(--brand-gold);
    background-color: transparent;
}

.index-container footer.index-footer,
.contact-section,
.index-container footer.index-footer h4,
.index-container footer.index-footer h5,
.index-container footer.index-footer a,
.index-container footer .left-box,
.index-container footer .center-box,
.index-container footer .right-box,
.index-container footer .bottom-box {
    background-color: var(--brand-night);
}

.index-container footer h4,
.index-container footer h5 {
    color: var(--text-on-dark);
}

.index-container footer a {
    color: var(--text-muted-on-dark);
}

.index-container footer a:hover {
    color: var(--brand-gold);
}

.terms-box,
.feed-page-wrapper,
.feed-page-wrapper-v,
.footer5 .button-wrapper,
.invitation-container .box,
.open-square-change,
.container-setup .open-square-change,
.signup-container,
.application-page,
.wrapper-contactus {
    border: 1px solid var(--surface-border-subtle);
}

.index-container,
.index-container main,
.contact-form,
.terms-box-wrapper,
.page-wrapper,
.squares-container,
.footer5 {
    background-color: var(--bg-foundation);
}

.contact-form-text,
.input-group,
.input-group input,
textarea.contact-form-text,
.application-page .message textarea,
.invitation-container #box2 input,
.open-square-change .option-A .input-group {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
}

.contact-form-text,
.application-page .message textarea,
.invitation-container #box2 input {
    border: 1px solid var(--surface-border-subtle);
}

.contact-form-text::placeholder,
.index-container .input-group input::placeholder,
.index-container .message textarea::placeholder,
.input-group input::placeholder,
textarea::placeholder {
    color: var(--text-placeholder);
}

.contact-form-text:focus,
.application-page .message textarea:focus,
.input-group input:focus,
.input-group textarea:focus,
.invitation-container #box2 input:focus {
    box-shadow: var(--input-focus-shadow);
}

.footer5 .button-wrapper,
.feed-page-wrapper,
.feed-page-wrapper-v,
.invitation-container .box,
.open-square-change,
.container-setup .open-square-change,
.terms-box {
    background-color: var(--bg-surface);
}

.feed-page-wrapper:hover {
    box-shadow: var(--shadow-surface-medium), 0 0 0 2px var(--brand-gold);
}

.footer5 .button-wrapper {
    outline: 1px solid var(--surface-border-accent-soft);
    box-shadow: var(--shadow-surface-soft);
}

.container-navigation .square,
.squares-container .square,
.container-setup .square:nth-child(6),
.container-setup .square:nth-child(7),
.container-setup .square:nth-child(8),
.container-setup .square:nth-child(9),
.container-squares9 .square:nth-child(6),
.container-squares9 .square:nth-child(7),
.container-squares9 .square:nth-child(8),
.container-squares9 .square:nth-child(9) {
    color: var(--text-primary);
}

.container-navigation .square,
.squares-container .square,
.container-squares9 .square,
.container-navigation .square:nth-child(3) {
    box-shadow: var(--shadow-surface-medium) !important;
}

.container-navigation .square:nth-child(3),
.squares-container .square:nth-child(3),
.container-setup .square:nth-child(3),
.container-squares9 .square:nth-child(3) {
    background-color: var(--brand-gold) !important;
    color: var(--brand-night);
}

.container-navigation .square,
.container-squares9 .square:nth-child(6),
.container-squares9 .square:nth-child(7),
.container-squares9 .square:nth-child(8),
.container-squares9 .square:nth-child(9),
.container-setup .square:nth-child(6),
.container-setup .square:nth-child(7),
.container-setup .square:nth-child(8),
.container-setup .square:nth-child(9) {
    background-color: var(--brand-night);
    color: var(--text-on-dark);
}

.container-squares9 .square:nth-child(6):hover,
.container-squares9 .square:nth-child(7):hover,
.container-squares9 .square:nth-child(8):hover,
.container-squares9 .square:nth-child(9):hover,
.container-setup .square:nth-child(6):hover,
.container-setup .square:nth-child(7):hover,
.container-setup .square:nth-child(8):hover,
.container-setup .square:nth-child(9):hover,
.container-navigation .square:hover {
    color: var(--brand-gold);
}

.success-message {
    color: #155724;
    background-color: #D4EDDA;
    border: 1px solid var(--border-accent);
}

.error-message {
    color: #721C24;
    background-color: #F8D7DA;
    border: 1px solid var(--border-accent);
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--brand-gold);
    border: 1px solid var(--scrollbar-track);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

html, body {
    scrollbar-color: var(--brand-gold) var(--scrollbar-track);
}

/* =========================================================
   Squares 9 Deployment Candidate Adjustments
   Header opacity and brighter elevated buttons
   ========================================================= */
:root {
    --header-solid-bg: #FDFDF8;
    --button-face-bright: #FFFFFC;
    --button-face-bright-hover: #FFF2C8;
    --shadow-button-strong: 0px 18px 30px rgba(0, 0, 0, 0.34);
    --shadow-button-strong-hover: 0px 12px 22px rgba(0, 0, 0, 0.24);
}

:root[data-time="morning"] {
    --header-solid-bg: #FFFFFB;
    --button-face-bright: #FFFFFF;
    --button-face-bright-hover: #FFF5D6;
}

:root[data-time="midday"] {
    --header-solid-bg: #FDFDF8;
    --button-face-bright: #FFFFFC;
    --button-face-bright-hover: #FFF2C8;
}

:root[data-time="evening"] {
    --header-solid-bg: #FCF8F1;
    --button-face-bright: #FFFDF8;
    --button-face-bright-hover: #FDEFC9;
}

:root[data-time="night-light"] {
    --header-solid-bg: #F8F3EB;
    --button-face-bright: #FCF8F1;
    --button-face-bright-hover: #F7E8C5;
}

:root[data-theme="night-environment"] {
    --header-solid-bg: #161C22;
    --button-face-bright: #24303B;
    --button-face-bright-hover: #32404D;
    --shadow-button-strong: 0px 18px 30px rgba(0, 0, 0, 0.5);
    --shadow-button-strong-hover: 0px 12px 22px rgba(0, 0, 0, 0.36);
}

.corporate-main.scrolled,
.corporate-main.fixed-dark-text {
    background-color: var(--header-solid-bg) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Deployment candidate v3.1 refinements for Square the Earth review */
:root {
    --shadow-quote-emphasis: 0px 11px 18px rgba(0, 0, 0, 0.20);
}

:root[data-theme="night-environment"] {
    --shadow-quote-emphasis: 0px 11px 18px rgba(0, 0, 0, 0.30);
}

.index-footer-corporate,
.index-footer-corporate .footer-column,
.index-footer-corporate .first-box,
.index-footer-corporate .second-box,
.index-footer-corporate .third-box,
.index-footer-corporate .fourth-box,
.index-footer-corporate .fifth-box,
.index-footer-corporate .footer-column-box-1,
.index-footer-corporate .footer-column-box-2,
.index-footer-corporate .index-footer-corporate-master-row-a,
.index-footer-corporate .index-footer-corporate-master-row-b,
.index-footer-corporate .index-footer-corporate-master-row-c,
.index-footer-corporate ul,
.index-footer-corporate li {
    background-color: var(--bg-surface) !important;
}

.accessibility-trigger {
    box-shadow: var(--shadow-button-strong) !important;
}

.accessibility-trigger:hover {
    box-shadow: var(--shadow-button-strong-hover) !important;
}

.accessibility-trigger-icon {
    width: 36px !important;
    height: 36px !important;
}

.quote-box {
    box-shadow: var(--shadow-quote-emphasis) !important;
}

/* Deployment candidate v3.2 corrections */

.index-footer-corporate {
    background-color: var(--bg-surface) !important;
}

.index-footer-corporate .footer-column,
.index-footer-corporate .first-box,
.index-footer-corporate .second-box,
.index-footer-corporate .third-box,
.index-footer-corporate .fourth-box,
.index-footer-corporate .fifth-box,
.index-footer-corporate .footer-slate1,
.index-footer-corporate .footer-slate2,
.index-footer-corporate .footer-slate3,
.index-footer-corporate .footer-slate4,
.index-footer-corporate .footer-slate5,
.index-footer-corporate .footer-column-box-1,
.index-footer-corporate .footer-column-box-2,
.index-footer-corporate .index-footer-corporate-master-row-a,
.index-footer-corporate .index-footer-corporate-master-row-b,
.index-footer-corporate .index-footer-corporate-master-row-c,
.index-footer-corporate .corporate-logo-box,
.index-footer-corporate .bottom-box,
.index-footer-corporate ul,
.index-footer-corporate li,
.index-footer-corporate h4,
.index-footer-corporate a,
.index-footer-corporate p,
.index-footer-corporate small,
.square-earth-page .index-footer-corporate,
.square-earth-page .index-footer-corporate * {
    background-color: inherit !important;
}

.quote-box,
blockquote,
.page-box-8 blockquote,
.page-box-3 blockquote,
.page-box-10 blockquote,
.page-box-11 blockquote {
    box-shadow: var(--shadow-quote-emphasis) !important;
}

.main-image-container,
.video-wrapper,
.image-wrapper,
.page-box-4 .rgt-image-wrapper,
.right-box .rgt-image-wrapper,
.square-earth-page .video-wrapper,
.square-earth-page .image-wrapper,
.square-earth-page .page-box-4 .rgt-image-wrapper,
.square-earth-page .right-box .rgt-image-wrapper {
    position: relative !important;
    overflow: hidden !important;
}

.main-image-container::before,
.video-wrapper::before,
.image-wrapper::before,
.page-box-4 .rgt-image-wrapper::before,
.right-box .rgt-image-wrapper::before,
.square-earth-page .video-wrapper::before,
.square-earth-page .image-wrapper::before,
.square-earth-page .page-box-4 .rgt-image-wrapper::before,
.square-earth-page .right-box .rgt-image-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 45px rgba(0, 0, 0, 0.72) !important;
    pointer-events: none;
    z-index: 2;
}

.main-image-container > *,
.video-wrapper > *,
.image-wrapper > *,
.page-box-4 .rgt-image-wrapper > *,
.right-box .rgt-image-wrapper > *,
.square-earth-page .video-wrapper > *,
.square-earth-page .image-wrapper > *,
.square-earth-page .page-box-4 .rgt-image-wrapper > *,
.square-earth-page .right-box .rgt-image-wrapper > * {
    position: relative;
    z-index: 1;
}

/* Deployment candidate v3.4 targeted corrections */
:root {
    --shadow-quote-emphasis-top: 0 -8px 14px rgba(0, 0, 0, 0.18), 0 11px 18px rgba(0, 0, 0, 0.20);
    --shadow-media-window-strong: inset 0 0 68px rgba(0, 0, 0, 0.90);
}

:root[data-theme="night-environment"] {
    --shadow-quote-emphasis-top: 0 -8px 16px rgba(0, 0, 0, 0.28), 0 11px 18px rgba(0, 0, 0, 0.30);
    --shadow-media-window-strong: inset 0 0 74px rgba(0, 0, 0, 0.96);
}

/* Square the Earth hero title: lead animation text is locked to white in every color mode. */
.square-earth-page .image-text11.hero-text,
.square-earth-page .hero-text.image-text11 {
    display: block !important;
    position: absolute !important;
    z-index: 6 !important;
    color: #FFFFFF !important;
    pointer-events: none;
}

.square-earth-page .image-text11.hero-text h1,
.square-earth-page .hero-text.image-text11 h1 {
    display: block !important;
    position: relative;
    z-index: 7 !important;
    color: #FFFFFF !important;
    text-shadow:
        0 4px 16px rgba(0, 0, 0, 0.72),
        0 1px 2px rgba(0, 0, 0, 0.92) !important;
}

:root[data-theme="night-environment"] .square-earth-page .image-text11.hero-text,
:root[data-theme="night-environment"] .square-earth-page .hero-text.image-text11,
:root[data-theme="night-environment"] .square-earth-page .image-text11.hero-text h1,
:root[data-theme="night-environment"] .square-earth-page .hero-text.image-text11 h1 {
    color: #FFFFFF !important;
}

.square-earth-page .main-image-container::before,
.square-earth-page .video-wrapper::before,
.square-earth-page .image-wrapper::before,
.square-earth-page .page-box-4 .rgt-image-wrapper::before,
.square-earth-page .right-box .rgt-image-wrapper::before {
    box-shadow: var(--shadow-media-window-strong) !important;
    z-index: 2 !important;
}

.main-image-container::before,
.video-wrapper::before,
.image-wrapper::before,
.page-box-4 .rgt-image-wrapper::before,
.right-box .rgt-image-wrapper::before {
    box-shadow: inset 0 0 58px rgba(0, 0, 0, 0.82) !important;
}

.quote-box,
blockquote,
.page-box-8 blockquote,
.page-box-3 blockquote,
.page-box-10 blockquote,
.page-box-11 blockquote {
    box-shadow: var(--shadow-quote-emphasis-top) !important;
    position: relative;
    z-index: 1;
}

/* Strengthen top-edge definition specifically */
.quote-box::before,
blockquote::before,
.page-box-8 blockquote::before,
.page-box-3 blockquote::before,
.page-box-10 blockquote::before,
.page-box-11 blockquote::before {
    content: "" !important;
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    height: 1px;
    background: rgba(8, 31, 65, 0.18);
    box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.14);
    pointer-events: none;
}

/* Deployment candidate v3.5 targeted corrections */
/* Reduce top quote shadow by about 20 percent and remove corner artifacts */
:root {
    --shadow-quote-emphasis-top: 0 -6px 11px rgba(0, 0, 0, 0.14), 0 11px 18px rgba(0, 0, 0, 0.20);
}

:root[data-theme="night-environment"] {
    --shadow-quote-emphasis-top: 0 -6px 13px rgba(0, 0, 0, 0.22), 0 11px 18px rgba(0, 0, 0, 0.30);
}

.quote-box,
blockquote,
.page-box-8 blockquote,
.page-box-3 blockquote,
.page-box-10 blockquote,
.page-box-11 blockquote {
    box-shadow: var(--shadow-quote-emphasis-top) !important;
}

.quote-box::before,
blockquote::before,
.page-box-8 blockquote::before,
.page-box-3 blockquote::before,
.page-box-10 blockquote::before,
.page-box-11 blockquote::before,
.quote-box::after,
blockquote::after,
.page-box-8 blockquote::after,
.page-box-3 blockquote::after,
.page-box-10 blockquote::after,
.page-box-11 blockquote::after {
    content: none !important;
    display: none !important;
}

/* === BUTTON SHADOW ENHANCEMENT (PRIMARY ELEVATION) === */
:root {
    --shadow-button-strong: 0px 22px 36px rgba(0, 0, 0, 0.52);
    --shadow-button-strong-hover: 0px 14px 24px rgba(0, 0, 0, 0.36);
}

/* Ensure all primary buttons use the enhanced shadow */

/* Global hero text visibility fix for sitewide top animations */
.image-text1,
.image-text3,
.image-text4,
.image-text5,
.image-text6,
.image-text8,
.image-text9,
.image-text10,
.image-text11,
.image-text12,
.hero-text.image-text1,
.hero-text.image-text3,
.hero-text.image-text4,
.hero-text.image-text5,
.hero-text.image-text6,
.hero-text.image-text8,
.hero-text.image-text9,
.hero-text.image-text10,
.hero-text.image-text11,
.hero-text.image-text12,
.image-text1.hero-text,
.image-text3.hero-text,
.image-text4.hero-text,
.image-text5.hero-text,
.image-text6.hero-text,
.image-text8.hero-text,
.image-text9.hero-text,
.image-text10.hero-text,
.image-text11.hero-text,
.image-text12.hero-text {
    /* opacity and visibility controlled by heroTextVisible entrance sequence */
    display: block !important;
}

.image-text1,
.image-text3,
.image-text4,
.image-text5,
.image-text6,
.image-text8,
.image-text9,
.image-text10,
.image-text11,
.image-text12 {
    position: absolute !important;
    z-index: 6 !important;
}

.image-text1 h1,
.image-text3 h1,
.image-text4 h1,
.image-text5 h1,
.image-text6 h1,
.image-text8 h1,
.image-text9 h1,
.image-text10 h1,
.image-text11 h1,
.image-text12 h1,
.image-text1 h2,
.image-text3 h2,
.image-text4 h2,
.image-text5 h2,
.image-text6 h2,
.image-text8 h2,
.image-text9 h2,
.image-text10 h2,
.image-text11 h2,
.image-text12 h2 {
    /* opacity and visibility controlled by heroTextVisible entrance sequence */
    position: relative;
    z-index: 7 !important;
}

.main-image-container::before {
    z-index: 2 !important;
}

.main-image-container > * {
    position: relative;
    z-index: 1;
}

.image-text1,
.image-text3,
.image-text4,
.image-text5,
.image-text6,
.image-text8,
.image-text9,
.image-text10,
.image-text11,
.image-text12 {
    z-index: 6 !important;
}

/* Stable corrective layer */
/* Keep the working global hero title recovery from style-hero-fix.css */
/* Restore the contact form purple surface */
/* Revert footer center panel to the same surface as the surrounding footer field */

/* Contact form surface */
.wrapper-contactus,
.contactus-page .wrapper-contactus,
.application-page .wrapper-contactus {
    background: rgb(116, 124, 235) !important;
    background-color: rgb(116, 124, 235) !important;
    background-image: none !important;
}

.contactus-page .wrapper-contactus .captcha-section {
    display: grid !important;
    grid-template-columns: 180px max-content !important;
    gap: 16px !important;
    align-items: center !important;
    justify-content: start !important;
}

.contactus-page .wrapper-contactus .captcha-section > #contact-refresh-captcha-btn.learn-more-button {
    grid-column: 2 !important;
    justify-self: start !important;
    align-self: center !important;
    min-height: 51px !important;
    min-width: 151px !important;
    width: max-content !important;
    max-width: max-content !important;
    inline-size: max-content !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}
/* Footer unification */
/* The issue is the centered footer container reading as a lighter panel than the surrounding footer field.
   So this restores the footer container and its layout rows to inherit the surrounding footer surface
   instead of forcing a separate white panel. */
.index-footer-corporate,
.index-footer-corporate-master-row-a,
.index-footer-corporate-master-row-b,
.index-footer-corporate-master-row-c,
.index-footer-corporate .footer-column-box-1,
.index-footer-corporate .footer-column-box-2 {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Make the actual content groups match the footer field rather than reading as their own lighter boxes */
.index-footer-corporate .first-box,
.index-footer-corporate .second-box,
.index-footer-corporate .third-box,
.index-footer-corporate .fourth-box,
.index-footer-corporate .fifth-box,
.index-footer-corporate .footer-slate1,
.index-footer-corporate .footer-slate2,
.index-footer-corporate .footer-slate3,
.index-footer-corporate .footer-slate4,
.index-footer-corporate .footer-slate5,
.index-footer-corporate .footer-slate6,
.index-footer-corporate .footer-slate7,
.index-footer-corporate .bottom-box,
.index-footer-corporate .corporate-logo-box {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Preserve readable text and links without adding any panel effect */
.index-footer-corporate h4,
.index-footer-corporate a,
.index-footer-corporate ul,
.index-footer-corporate li,
.index-footer-corporate p,
.index-footer-corporate small,
.index-footer-corporate picture,
.index-footer-corporate img {
    background: transparent !important;
    background-color: transparent !important;
}

/* === BUTTON HOVER CORRECTION (ADA + DESIGN STANDARD) === */
/* Navy background, white text, gold border maintained */

/* Ensure no residual shadow layers remain */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .managed-motion,
    .scroll-animation,
    .icon,
    .spin,
    .spin-reverse {
        animation: none !important;
        transition: none !important;
    }
}

.footer-logo-link {
    display: inline-block;
}

.footer-logo-mark {
    display: block !important;
    width: 90px !important;
    height: 108px !important;
    max-width: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 5 !important;
}

/* Hero headline update for index page opening animation */
.hero-headline-wrap {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(92vw, 980px) !important;
    margin: 0 !important;
    padding: 0 20px !important;
    text-align: center !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

.hero-headline {
    display: block !important;
    margin: 0 !important;
    color: var(--color-site-white) !important;
    font-weight: 500 !important;
    line-height: 0.98 !important;
    letter-spacing: 0.01em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 10 !important;
    text-shadow:
        0 2px 10px rgba(8, 18, 40, 0.38),
        0 8px 28px rgba(8, 18, 40, 0.22) !important;
}

.hero-headline-primary {
    display: block !important;
    font-size: clamp(42px, 5.9vw, 82px) !important;
    font-weight: 500 !important;
    letter-spacing: 0.015em !important;
    line-height: 1.02 !important;
    color: var(--color-site-white) !important;
}

.hero-headline-secondary {
    display: block !important;
    margin-top: 0.22em !important;
    font-size: clamp(34px, 4.7vw, 66px) !important;
    font-weight: 500 !important;
    letter-spacing: 0.012em !important;
    line-height: 1.02 !important;
    color: var(--color-site-white) !important;
}

@media (max-width: 1024px) {
    .hero-headline-wrap {
        width: min(92vw, 820px) !important;
    }

    .hero-headline {
        line-height: 1 !important;
    }

    .hero-headline-secondary {
        margin-top: 0.22em !important;
    }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.10) 0%,
            rgba(0, 0, 0, 0.18) 18%,
            rgba(0, 0, 0, 0.30) 36%,
            rgba(0, 0, 0, 0.48) 55%,
            rgba(0, 0, 0, 0.72) 76%,
            rgba(0, 0, 0, 0.88) 100%
        );
}

.hero-title-block {
    position: absolute;
    top: 28%;
    left: 40%;
    z-index: 2;
    width: min(42vw, 760px);
    opacity: 0;
    transition: opacity 2.2s ease;
}

.hero-title {
    margin: 0;
    font-family: "Poppins", "Montserrat", sans-serif;
    font-size: clamp(90px, 6vw, 160px);
    font-weight: 700;
    line-height: 0.85 !important;
    letter-spacing: -0.03em;
    text-align: left;
    color: #ffffff;
    text-shadow: 0 6px 24px rgba(0, 0, 0, 0.60);
}

.hero-title span {
    display: block;
}

.hero-subtitle-block {
    position: absolute;
    top: 61%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: min(74vw, 1200px);
    text-align: center;
    opacity: 0;
    transition: opacity 2.2s ease;
}

.hero-subtitle-block p.hero-subtitle {
    margin: 0;
    font-family: "Poppins", "Montserrat", sans-serif;
    font-size: clamp(45px, 6vw, 100px) !important;
    font-weight: 600;
    line-height: 0.90 !important;
    letter-spacing: -0.015em;
    color: #FFC017 !important;
    text-shadow: 0 6px 24px rgba(0, 0, 0, 0.65);
}

.hero-subtitle span {
    display: block;
    margin: 0;
    line-height: 0.99;
}
.square-earth-page .square-earth-bottom-section {
    width: 100%;
    background-color: var(--color-site-white);
}

.square-earth-page .thick-line {
    width: 100%;
    margin: 0;
}
.square-earth-page .square-earth-bottom-section {
    width: 100%;
    background-color: var(--color-site-white);
    padding: 3%;
    box-sizing: border-box;
}
.hero-title {
    margin: 0;
    font-family: "Poppins", "Montserrat", sans-serif;
    color: #ffffff;
    text-align: center;
    line-height: 1;
}

/* TOP LINE (larger) */
.hero-line-top {
    display: block;
    font-size: clamp(70px, 6vw, 110px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.25;
}

/* BOTTOM LINE (smaller) */
.hero-line-bottom {
    display: block;
    font-size: clamp(34px, 3vw, 60px);
    font-weight: 500;
    margin-top: 12px;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.page-box-1 .thick-line {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100%;
}
.about-page .page-box-10 {
    width: 100%;
    max-width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
}

.about-page .page-box-10 .parent-container {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 auto;
    box-sizing: border-box;
}

.about-page .text-box-width-2 {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding-top: 52px;
    text-align: left;
    box-sizing: border-box;
}

.about-page #about-page-heading {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    font-size: clamp(2rem, 4.1vw, 3.2rem) !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

@media (max-width: 1024px) {
    .about-page .text-box-width-2 {
        max-width: 100%;
        padding-top: 44px;
    }

    .about-page #about-page-heading {
        font-size: clamp(1.85rem, 5vw, 2.7rem) !important;
        line-height: 1.14 !important;
    }
}

.page-box-10 .text-box-width-2 {
    margin-left: auto;
    margin-right: auto;
}

.about-page .text-box-width-2 {
    width: 85% !important;
   
    padding-top: 80px !important;
    text-align: left !important;
    white-space: normal !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.about-page .text-box-width-2 h1,
.about-page .text-box-width-2 h2 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.founder-page .page-box-8 .founder-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.founder-page .page-box-8 .founder-content p,
.founder-page .page-box-8 .founder-content h4 {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

.page-box-1 h4,
.founder-content h4,
.founder-content p {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    box-sizing: border-box;
}

.page-box-1 {
    overflow-x: hidden;
}

.founder-content {
    overflow-x: hidden;
}

.founder-grid {
    display: block;
}

.founder-story-item {
    max-width: 100%;
}

.founder-page .page-box-8 .founder-content,
.founder-page .page-box-8 .founder-content p,
.founder-page .page-box-8 .founder-content h4 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

.page-box-1 {
    position: relative;
    z-index: 3;
    padding-bottom: 40px;
}

.page-box-1 .button-container {
    position: relative;
    z-index: 4;
    margin-top: 24px;
}

.page-box-1 .learn-more-button {
    position: relative;
    z-index: 5;
}

.main-image-container-2,
.page-box-9,
.image-wrapper {
    position: relative;
    z-index: 1;
}
/* Mobile hero positioning fix */
/* Mobile landscape refinement */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .contactus-page {
        position: relative !important;
        min-height: 100dvh !important;
        height: auto !important;
        background: var(--brand-night) !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        padding: 84px 0 32px !important;
    }

    .contactus-page .main-image-container {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: calc(100% + 160px) !important;
        max-height: none !important;
        overflow: hidden !important;
        background: var(--brand-night) !important;
        z-index: 0 !important;
    }

    .contactus-page .main-image-container video,
    .contactus-page .main-image-container .hero-video,
    .contactus-page .main-image-container .hero-media {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
    }

    .contactus-page .wrapper-contactus {
        position: relative !important;
        z-index: 1 !important;
    }
}
@supports not (height: 100dvh) {
    @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
        .contactus-page {
            min-height: 100vh !important;
        }

        .contactus-page .main-image-container {
            min-height: calc(100% + 160px) !important;
        }
    }
}
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    html,
    body,
    #main-content {
        height: 100vh !important;
        min-height: 100vh !important;
        overflow: hidden !important;
    }

    .contactus-page {
        position: relative !important;
        height: 100vh !important;
        min-height: 100vh !important;
        overflow: hidden !important;
        touch-action: none !important;
        background: var(--brand-night) !important;
        padding: 0 !important;
    }

    .contactus-page .main-image-container {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        background: var(--brand-night) !important;
        z-index: 0 !important;
    }

    .contactus-page .main-image-container video,
    .contactus-page .main-image-container .hero-video,
    .contactus-page .main-image-container .hero-media {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
    }

    .contactus-page .wrapper-contactus {
        position: fixed !important;
        top: 84px !important;
        bottom: 20px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: min(86vw, 760px) !important;
        max-width: min(86vw, 760px) !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
        padding: 24px 22px 28px !important;
        z-index: 1 !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .contactus-page .wrapper-contactus form {
        width: 100% !important;
    }

    .contactus-page .wrapper-contactus .dbl-field {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .contactus-page .wrapper-contactus .field {
        height: 50px !important;
    }

    .contactus-page .wrapper-contactus .message textarea {
        min-height: 140px !important;
    }

    .contactus-page .wrapper-contactus .captcha-section {
        grid-template-columns: 1fr auto !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .contactus-page .wrapper-contactus .captcha-section img {
        grid-column: 1 !important;
        width: min(100%, 180px) !important;
        max-width: 180px !important;
    }

    

    .contactus-page .wrapper-contactus .captcha-section input[name="captcha"] {
        grid-column: 1 / span 2 !important;
    }
}

.slate8 .text-box-js h2 {
    display: block;
    width: 100%;
    text-align: center !important;
    margin: 0 auto;
    color: rgb(111, 130, 156);
}
/* =========================================================
   Unified production form system
   Contact forms and application forms
   ========================================================= */

.contact-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-honeypot input {
    pointer-events: none;
}

.career-application-page .visually-hidden-field,
.career-application-page .honeypot-field {
    position: absolute;
    left: -99999px;
    top: auto;
    width: 1px;
    height: 1px;
    min-width: 1px;
    min-height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    margin: 0;
    padding: 0;
    border: 0;
}

.career-application-page .visually-hidden-field label,
.career-application-page .visually-hidden-field input,
.career-application-page .honeypot-field label,
.career-application-page .honeypot-field input {
    display: block;
    width: 1px;
    height: 1px;
    min-width: 1px;
    min-height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
}

:root {
    --form-panel-bg: rgb(116, 124, 235);
    --form-panel-radius: 4px;
    --form-panel-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 6px 20px rgba(0, 0, 0, 0.19);
    --form-field-placeholder: rgb(111, 130, 156);
    --form-field-bg: var(--color-site-white);
    --form-field-text: var(--brand-night);
    --form-field-border: var(--border-accent);
    --form-focus-bg: #fffdf5;
    --form-message-success-bg: #d4edda;
    --form-message-success-text: #155724;
    --form-message-error-bg: #f8d7da;
    --form-message-error-text: #721c24;
}

.wrapper-contactus .dbl-field .field input,
.wrapper-contactus .message textarea,
.wrapper-contactus .captcha-section input[name="captcha"],
.career-application-page input[type="text"],
.career-application-page input[type="email"],
.career-application-page input[type="tel"],
.career-application-page textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    color: var(--form-field-text);
    background-color: var(--form-field-bg);
    border: 1.75px solid var(--form-field-border);
    border-radius: 3px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: border-color 0.22s ease, outline-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease, color 0.22s ease;
    appearance: none;
    -webkit-appearance: none;
}

.wrapper-contactus .dbl-field .field input,
.wrapper-contactus .captcha-section input[name="captcha"] {
    height: 50px;
    font-size: 19px;
    padding: 0 18px;
}

.wrapper-contactus .message textarea,
.career-application-page textarea {
    min-height: 140px;
    padding: 15px 20px;
    font-size: 19px;
    line-height: 1.4;
    resize: vertical;
}

.career-application-page input[type="text"],
.career-application-page input[type="email"],
.career-application-page input[type="tel"] {
    min-height: 54px;
    padding: 0.9em 1em;
    border-radius: 10px;
}

.wrapper-contactus .dbl-field .field input::placeholder,
.wrapper-contactus .message textarea::placeholder,
.wrapper-contactus .captcha-section input[name="captcha"]::placeholder,
.career-application-page input[type="text"]::placeholder,
.career-application-page input[type="email"]::placeholder,
.career-application-page input[type="tel"]::placeholder,
.career-application-page textarea::placeholder {
    color: var(--form-field-placeholder);
    opacity: 1;
}

.wrapper-contactus .dbl-field .field input::-webkit-input-placeholder,
.wrapper-contactus .message textarea::-webkit-input-placeholder,
.wrapper-contactus .captcha-section input[name="captcha"]::-webkit-input-placeholder,
.career-application-page input[type="text"]::-webkit-input-placeholder,
.career-application-page input[type="email"]::-webkit-input-placeholder,
.career-application-page input[type="tel"]::-webkit-input-placeholder,
.career-application-page textarea::-webkit-input-placeholder {
    color: var(--form-field-placeholder);
    opacity: 1;
}

.wrapper-contactus .dbl-field .field input::-moz-placeholder,
.wrapper-contactus .message textarea::-moz-placeholder,
.wrapper-contactus .captcha-section input[name="captcha"]::-moz-placeholder,
.career-application-page input[type="text"]::-moz-placeholder,
.career-application-page input[type="email"]::-moz-placeholder,
.career-application-page input[type="tel"]::-moz-placeholder,
.career-application-page textarea::-moz-placeholder {
    color: var(--form-field-placeholder);
    opacity: 1;
}

.wrapper-contactus .dbl-field .field input:-ms-input-placeholder,
.wrapper-contactus .message textarea:-ms-input-placeholder,
.wrapper-contactus .captcha-section input[name="captcha"]:-ms-input-placeholder,
.career-application-page input[type="text"]:-ms-input-placeholder,
.career-application-page input[type="email"]:-ms-input-placeholder,
.career-application-page input[type="tel"]:-ms-input-placeholder,
.career-application-page textarea:-ms-input-placeholder,
.wrapper-contactus .dbl-field .field input::-ms-input-placeholder,
.wrapper-contactus .message textarea::-ms-input-placeholder,
.wrapper-contactus .captcha-section input[name="captcha"]::-ms-input-placeholder,
.career-application-page input[type="text"]::-ms-input-placeholder,
.career-application-page input[type="email"]::-ms-input-placeholder,
.career-application-page input[type="tel"]::-ms-input-placeholder,
.career-application-page textarea::-ms-input-placeholder {
    color: var(--form-field-placeholder);
}

.wrapper-contactus .dbl-field .field input:focus,
.wrapper-contactus .message textarea:focus,
.wrapper-contactus .captcha-section input[name="captcha"]:focus,
.wrapper-contactus .dbl-field .field input:focus-visible,
.wrapper-contactus .message textarea:focus-visible,
.wrapper-contactus .captcha-section input[name="captcha"]:focus-visible,
.career-application-page input:focus,
.career-application-page textarea:focus,
.career-application-page input:focus-visible,
.career-application-page textarea:focus-visible,
.career-application-page button:focus-visible,
.career-application-page a:focus-visible {
    outline: 3px solid var(--border-accent);
    outline-offset: 2px;
    border-color: var(--border-accent);
    background-color: var(--form-focus-bg);
}

#form-messages {
    display: flex;
    justify-content: center;
}

.success-message,
.error-message,
.career-application-page .status-message,
.career-application-page .success-message,
.career-application-page .error-message {
    display: block;
    margin: 0 0 18px;
    padding: 14px 16px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 10px;
}

.success-message,
.career-application-page .success-message {
    color: var(--form-message-success-text);
    background-color: var(--form-message-success-bg);
    border: 1px solid rgba(21, 87, 36, 0.25);
}

.error-message,
.career-application-page .error-message {
    color: var(--form-message-error-text);
    background-color: var(--form-message-error-bg);
    border: 1px solid rgba(114, 28, 36, 0.2);
}

.career-application-page .status-message {
    color: var(--brand-night);
    background: rgba(8, 31, 65, 0.06);
    border: 1px solid rgba(8, 31, 65, 0.12);
}

.contactus-page {
    position: relative;
    min-height: 100svh;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
}

.contactus-page .main-image-container {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100svh;
    z-index: 0;
}

.contactus-page .wrapper-contactus {
    position: relative;
    box-sizing: border-box;
    margin: 96px auto 24px;
    width: min(72vw, 1480px);
    max-width: calc(100vw - 48px);
    padding: 36px 48px;
    background: var(--form-panel-bg) !important;
    background-color: var(--form-panel-bg) !important;
    background-image: none !important;
    border-radius: var(--form-panel-radius);
    box-shadow: var(--form-panel-shadow);
    z-index: 1;
    overflow: hidden;
}

.contactus-page .wrapper-contactus h1 {
    width: 100%;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 300;
    font-size: clamp(20px, 12vw, 30px);
    color: var(--brand-night);
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.contactus-page .wrapper-contactus form {
    width: 100%;
    display: grid;
    gap: 16px;
}

.contactus-page .wrapper-contactus .dbl-field {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.contactus-page .wrapper-contactus .field,
.contactus-page .wrapper-contactus .message,
.contactus-page .wrapper-contactus .captcha-section {
    width: 100%;
    min-width: 0;
}

.contactus-page .wrapper-contactus .message {
    margin-top: 0;
}

.contactus-page .wrapper-contactus .captcha-section {
    display: grid;
    grid-template-columns: 180px auto;
    gap: 16px;
    align-items: center;
    max-width: 100%;
}

.contactus-page .wrapper-contactus .captcha-section img {
    grid-column: 1;
    width: 180px;
    max-width: 100%;
    height: 50px;
    border: 1px solid var(--border-accent);
    border-radius: 4px;
    justify-self: start;
}

.contactus-page .wrapper-contactus .captcha-section input[name="captcha"] {
    grid-column: 1 / span 2;
}

.contactus-page .wrapper-contactus .button-area {
    display: flex;
    justify-content: center;
    margin-top: 18px;
    margin-left: 0;
}

@media screen and (max-width: 1024px) {
    .contactus-page {
        padding: 84px 0 24px;
    }

    .contactus-page .wrapper-contactus {
        width: min(86vw, 760px);
        max-width: min(86vw, 760px);
        padding: 24px 22px;
        margin-top: 0;
    }

    .contactus-page .wrapper-contactus h1 {
        font-size: clamp(26px, 5vw, 40px);
        margin-bottom: 18px;
    }

    .contactus-page .wrapper-contactus .dbl-field {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.career-application-page {
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    background: var(--color-site-white);
}

.career-application-page .terms-box-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: calc(100vh - 70px);
    padding: 86px 0 24px;
}

.career-application-page .terms-box {
    width: 85%;
    height: calc(100vh - 130px);
    max-height: calc(100vh - 130px);
    margin-top: 0;
    padding: 50px 30px;
    overflow: hidden;
}

.career-application-page .terms-text {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    margin-left: 30px;
}

.career-application-page .terms-box form,
.career-application-page #application-form,
.career-application-page #application-form form {
    width: 100% !important;
    max-width: none !important;
}

.career-application-page #application-form {
    margin: 2em auto;
    padding: 2rem;
    border: 1px solid rgba(8, 31, 65, 0.12);
    border-radius: 12px;
    box-shadow: 0 12px 26px rgba(7, 20, 38, 0.08);
    background-color: var(--color-site-white);
}

.career-application-page #application-form h2 {
    color: var(--brand-night);
}

.career-application-page .application-help-text {
    font-size: clamp(17px, 1.35vw, 21px) !important;
    line-height: 1.45 !important;
    margin-bottom: 24px !important;
    color: var(--text-secondary) !important;
}

.career-application-page fieldset {
    border: 1px solid rgba(8, 31, 65, 0.16);
    border-radius: 12px;
    padding: 1.35rem 1.25rem 1rem;
}

.career-application-page legend {
    color: var(--brand-night);
}

.career-application-page label {
    color: var(--brand-night);
    font-weight: 500;
}

.career-application-page textarea {
    min-height: 140px;
}

.career-application-page .captcha-section {
    display: grid;
    grid-template-columns: minmax(320px, 380px) auto;
    gap: 16px 20px;
    align-items: center;
}

.career-application-page .captcha-section label,
.career-application-page .captcha-section input {
    grid-column: 1 / span 2;
}

.career-application-page .captcha-section img {
    display: block;
    width: 100%;
    max-width: 360px;
    height: 96px;
    border: 1.5px solid var(--border-accent);
    border-radius: 8px;
    background: var(--color-site-white);
}

.career-application-page .refresh-button-box {
    margin: 0;
    display: flex;
    align-items: center;
}

@media (max-width: 1200px) {
    .career-application-page .terms-box {
        width: min(88vw, 1100px);
    }
}

@media (max-width: 900px) {
    .career-application-page .captcha-section {
        grid-template-columns: 1fr;
    }

    .career-application-page .captcha-section label,
    .career-application-page .captcha-section input,
    .career-application-page .captcha-section img,
    .career-application-page .refresh-button-box {
        grid-column: 1;
    }

    .career-application-page .captcha-section img {
        max-width: 320px;
        height: 96px;
    }

    .career-application-page .refresh-button-box {
        justify-content: flex-start;
    }
}

@media (max-width: 800px) {
    .career-application-page .terms-box-wrapper {
        padding: 86px 0 24px;
    }

    .career-application-page .terms-box {
        width: 94vw;
        padding: 20px 14px;
        min-height: auto;
    }

    .career-application-page .terms-text {
        padding: 0 4px;
    }

    .career-application-page #application-form {
        padding: 1.15rem;
    }

    .career-application-page button[type="submit"],
    .career-application-page .refresh-button-box .learn-more-button {
        width: 100%;
    }
}

:root {
    --body-text-size: 1rem;
    --body-text-line-height: 1.65;
    --body-text-size-large: 1.125rem;
    --body-text-size-xlarge: 1.25rem;
    --ui-text-size: 1rem;
    --ui-text-size-large: 1.075rem;
    --ui-text-size-xlarge: 1.15rem;
    --text-size-transition: 0.2s ease;
}

/* Base reading text */
p,
li,
blockquote,
figcaption,
td,
th,
label,
input,
textarea,
select,
.help-text,
.form-note,
.caption-text {
    font-size: var(--body-text-size);
    line-height: var(--body-text-line-height);
    transition: font-size var(--text-size-transition), line-height var(--text-size-transition);
}

/* Accessibility popup button styling */
.accessibility-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.accessibility-control-group {
    margin-top: 22px;
}

.accessibility-control-group h3 {
    margin: 0 0 6px 0;
    color: var(--text-primary);
    font-size: 18px;
    line-height: 1.2;
}

.accessibility-helper-text {
    margin: 0 0 10px 0;
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-primary);
}

.accessibility-option-button {
    min-width: 120px;
    padding: 12px 18px;
    border: 1px solid var(--border-accent);
    background: var(--color-site-white);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.38s ease, color 0.38s ease, border-color 0.38s ease, box-shadow 0.38s ease;
}

.accessibility-option-button:hover,
.accessibility-option-button:focus-visible {
    background-color: var(--brand-navy);
    color: var(--color-site-white);
    border-color: var(--border-accent);
    box-shadow: 0 0 0 2px rgba(255, 192, 23, 0.22);
    outline: none;
}

.accessibility-option-button.is-active,
.accessibility-option-button[aria-pressed="true"] {
    background-color: var(--brand-navy);
    color: var(--color-site-white);
    border-color: var(--border-accent);
}

/* Default text mode */
body.text-scale-default {
    --body-text-size: 1rem;
    --body-text-line-height: 1.65;
}

/* Larger text mode */
body.text-scale-large {
    --body-text-size: var(--body-text-size-large);
    --body-text-line-height: 1.75;
}

/* Largest text mode */
body.text-scale-xlarge {
    --body-text-size: var(--body-text-size-xlarge);
    --body-text-line-height: 1.8;
}
/* Accessibility text scaling overrides for structured content areas */
body.text-scale-default .page-box-1 p,
body.text-scale-default .page-box-8 p,
body.text-scale-default .text-box-js p,
body.text-scale-default .page-box-11 p,
body.text-scale-default .page-box-12 p {
    font-size: clamp(17px, 2.5vw, 20px) !important;
    line-height: 1.3 !important;
}

body.text-scale-large .page-box-1 p,
body.text-scale-large .page-box-8 p,
body.text-scale-large .text-box-js p,
body.text-scale-large .page-box-11 p,
body.text-scale-large .page-box-12 p {
    font-size: clamp(19px, 2.7vw, 23px) !important;
    line-height: 1.5 !important;
}

body.text-scale-xlarge .page-box-1 p,
body.text-scale-xlarge .page-box-8 p,
body.text-scale-xlarge .text-box-js p,
body.text-scale-xlarge .page-box-11 p,
body.text-scale-xlarge .page-box-12 p {
    font-size: clamp(21px, 3vw, 26px) !important;
    line-height: 1.6 !important;
}
/* =========================================================
   ACCESSIBILITY TEXT SCALING
   Add near the end of style.css so these rules win
   ========================================================= */

body.text-scale-default .page-box-1 p,
body.text-scale-default .page-box-3 p,
body.text-scale-default .page-box-8 p,
body.text-scale-default .page-box-8 h2,
body.text-scale-default .page-box-10 p,
body.text-scale-default .page-box-11 p,
body.text-scale-default .page-box-12 p,
body.text-scale-default .text-box-js p,
body.text-scale-default .faq-container .accordion_content p,
body.text-scale-default .terms-box p,
body.text-scale-default .terms-box li,
body.text-scale-default .page-box-3 ul li,
body.text-scale-default .page-box-4 ul li,
body.text-scale-default .page-box-8 ul li,
body.text-scale-default .page-box-10 ul li,
body.text-scale-default .page-box-11 ul li {
    font-size: clamp(17px, 2.5vw, 20px) !important;
    line-height: 1.3 !important;
}

body.text-scale-large .page-box-1 p,
body.text-scale-large .page-box-3 p,
body.text-scale-large .page-box-8 p,
body.text-scale-large .page-box-8 h2,
body.text-scale-large .page-box-10 p,
body.text-scale-large .page-box-11 p,
body.text-scale-large .page-box-12 p,
body.text-scale-large .text-box-js p,
body.text-scale-large .faq-container .accordion_content p,
body.text-scale-large .terms-box p,
body.text-scale-large .terms-box li,
body.text-scale-large .page-box-3 ul li,
body.text-scale-large .page-box-4 ul li,
body.text-scale-large .page-box-8 ul li,
body.text-scale-large .page-box-10 ul li,
body.text-scale-large .page-box-11 ul li {
    font-size: clamp(19px, 2.7vw, 23px) !important;
    line-height: 1.5 !important;
}

body.text-scale-xlarge .page-box-1 p,
body.text-scale-xlarge .page-box-3 p,
body.text-scale-xlarge .page-box-8 p,
body.text-scale-xlarge .page-box-8 h2,
body.text-scale-xlarge .page-box-10 p,
body.text-scale-xlarge .page-box-11 p,
body.text-scale-xlarge .page-box-12 p,
body.text-scale-xlarge .text-box-js p,
body.text-scale-xlarge .faq-container .accordion_content p,
body.text-scale-xlarge .terms-box p,
body.text-scale-xlarge .terms-box li,
body.text-scale-xlarge .page-box-3 ul li,
body.text-scale-xlarge .page-box-4 ul li,
body.text-scale-xlarge .page-box-8 ul li,
body.text-scale-xlarge .page-box-10 ul li,
body.text-scale-xlarge .page-box-11 ul li {
    font-size: clamp(21px, 3vw, 26px) !important;
    line-height: 1.6 !important;
}

.page-box-1 p,
.page-box-3 p,
.page-box-8 p,
.page-box-8 h2,
.page-box-10 p,
.page-box-11 p,
.page-box-12 p,
.text-box-js p,
.faq-container .accordion_content p,
.terms-box p,
.terms-box li,
.page-box-3 ul li,
.page-box-4 ul li,
.page-box-8 ul li,
.page-box-10 ul li,
.page-box-11 ul li {
    transition: font-size 0.2s ease, line-height 0.2s ease;
}
/* ====================== ENTERPRISE APPLICATION FORM STYLING ====================== */
/* Scoped specifically to the Square the Earth Initiative form */

.career-application-page .form-field {
    margin-bottom: 1.5rem;
}

.career-application-page .form-field label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--brand-night);
    font-size: 1.05rem;
}

.career-application-page .form-field input,
.career-application-page .form-field textarea {
    width: 100%;
    min-height: 54px;
    padding: 0.9em 1.1em;
    border: 1.75px solid var(--border-accent);
    border-radius: 10px;
    background-color: var(--color-site-white);
    font-size: 19px;
    color: var(--brand-night);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.career-application-page .form-field input:focus,
.career-application-page .form-field textarea:focus {
    outline: 3px solid var(--border-accent);
    outline-offset: 2px;
    border-color: var(--border-accent);
    background-color: #fffdf5;
    box-shadow: 0 0 0 4px rgba(255, 192, 23, 0.15);
}

.career-application-page .form-field textarea {
    min-height: 140px;
    resize: vertical;
}

/* Number input alignment */
.career-application-page input[type="number"] {
    -moz-appearance: textfield;
}

.career-application-page input[type="number"]::-webkit-outer-spin-button,
.career-application-page input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* ACCESSIBILITY BUTTON – OPAQUE WHITE + GOLD OUTLINE + FIX CLIPPING */
.accessibility-trigger {
    background: #ffffff !important;
    border: 2px solid #FFC017 !important;
    padding: 8px !important;
    border-radius: 50% !important;
    overflow: visible !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
}

.accessibility-trigger svg,
.accessibility-trigger .accessibility-trigger-icon {
    overflow: visible !important;
    width: 28px !important;
    height: 28px !important;
    display: block !important;
}

.accessibility-trigger:hover {
    background: var(--brand-navy) !important;
    border-color: #FFC017 !important;
    transform: scale(1.1) !important;
}
.accessibility-setting + .accessibility-setting {
    margin-top: 18px;
}

.accessibility-control-group {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(8, 31, 65, 0.12);
}

/* =============================================================
   S9 HAMBURGER NAV, tablet portrait dropdown
   Class s9-hamburger-nav is used ONLY on #primary-navigation.
   ============================================================= */

.s9-hamburger-nav {
    display: none !important;
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

    .s9-hamburger-nav.is-open {
        display: flex !important;
        position: fixed;
        top: 78px;
        right: 20px;
        padding: 22px 28px 24px 28px;
        background: #FFFFFF;
        border: 1.5px solid #FFC017;
        border-radius: 18px;
        box-shadow: 0 18px 42px rgba(7, 20, 38, 0.18);
        z-index: 9999;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .s9-hamburger-nav a {
        display: block;
        color: #081F41;
        font-family: "Poppins", "Montserrat", sans-serif;
        font-size: 20px;
        font-weight: 600;
        line-height: 1.3;
        white-space: nowrap;
        text-decoration: none;
        padding: 13px 0;
        border-bottom: 1px solid rgba(8, 31, 65, 0.10);
        width: 100%;
        box-sizing: border-box;
    }

    .s9-hamburger-nav a:first-child {
        padding-top: 0;
    }

    .s9-hamburger-nav a:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .s9-hamburger-nav a:hover {
        color: #FFC017;
        padding-left: 6px;
        transition: color 0.2s ease, padding-left 0.2s ease;
    }

    :root[data-theme="night-environment"] .s9-hamburger-nav {
        background: #FFFFFF !important;
    }
}

/* =============================================================
   S9 HAMBURGER NAV, tablet landscape and desktop horizontal header
   ============================================================= */

@media screen and (min-width: 801px) {

    .s9-hamburger-nav {
        display: flex !important;
        flex-grow: 1;
        justify-content: center;
        align-items: center;
        gap: clamp(20px, 4vw, 48px);
        position: static;
        width: auto;
        max-width: none;
        padding: 0;
        margin: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        border-radius: 0;
        overflow: visible;
    }

    .s9-hamburger-nav a {
        display: block;
        color: inherit;
        font-family: "Poppins", "Montserrat", sans-serif;
        font-weight: 500;
        font-size: clamp(18px, 1.2vw, 28px);
        letter-spacing: 0.3px;
        text-decoration: none;
        line-height: 1;
        padding: 6px 0;
        white-space: nowrap;
        position: relative;
        border-bottom: none;
    }

    .s9-hamburger-nav a::before {
        content: "";
        position: absolute;
        width: 0;
        height: 1.5px;
        bottom: 0;
        left: 0;
        background-color: rgba(255, 192, 23, 0.95);
        transition: width 0.4s ease;
    }

    .s9-hamburger-nav a:hover::before {
        width: 100%;
    }

    .corporate-main .hamburger {
        display: none !important;
    }
}



.accessibility-trigger {
    position: fixed !important;
    right: 24px !important;
    bottom: 24px !important;
    width: 58px !important;
    height: 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1.5px solid var(--border-accent) !important;
    border-radius: 50% !important;
    background: var(--color-site-white) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 10px 22px rgba(7, 20, 38, 0.16) !important;
    cursor: pointer !important;
    z-index: 1200 !important;
    overflow: visible !important;
    padding: 0 !important;
    transform: none !important;
    transition: transform 0.38s ease, box-shadow 0.38s ease, background-color 0.38s ease, border-color 0.38s ease, color 0.38s ease !important;
}

.accessibility-trigger:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 14px 28px rgba(7, 20, 38, 0.2) !important;
    background: var(--brand-navy) !important;
    border-color: var(--border-accent) !important;
    color: var(--color-site-white) !important;
}

.accessibility-trigger:focus-visible {
    outline: 3px solid var(--border-accent) !important;
    outline-offset: 3px !important;
}

.accessibility-trigger svg,
.accessibility-trigger .accessibility-trigger-icon {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
    overflow: visible !important;
}

/* Contact CAPTCHA readability fix */
.contactus-page .wrapper-contactus .captcha-section {
    grid-template-columns: minmax(260px, 360px) auto !important;
}

.contactus-page .wrapper-contactus .captcha-section img#contact-captcha-image {
    width: 360px !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

@media screen and (max-width: 1024px) {
    .contactus-page .wrapper-contactus .captcha-section {
        grid-template-columns: 1fr !important;
    }

    .contactus-page .wrapper-contactus .captcha-section img#contact-captcha-image {
        width: min(100%, 360px) !important;
        max-width: 360px !important;
    }
}

.square-earth-action-group {
    margin-top: 32px;
}

.square-earth-action-group .button-container {
    margin-top: 18px;
}
/* =============================================================
   CANONICAL APPLICATION FORM STANDARD
   Applies to Career Center Application and Square the Earth Application.
   Do not create page specific CAPTCHA, input, or submit button variants.
   ============================================================= */

.application-form-page {
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    background: var(--color-site-white);
}

.application-form-page .terms-box-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: calc(100vh - 70px);
    padding: 86px 0 24px;
}

.application-form-page .terms-box {
    width: 85%;
    height: calc(100vh - 130px);
    max-height: calc(100vh - 130px);
    margin-top: 0;
    padding: 50px 30px;
    overflow: hidden;
}

.application-form-page .terms-text {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    margin-left: 30px;
}

.application-form-page .terms-box form,
.application-form-page #application-form,
.application-form-page #application-form form {
    width: 100% !important;
    max-width: none !important;
}

.application-form-page #application-form {
    margin: 2em auto;
    padding: 2rem;
    border: 1px solid rgba(8, 31, 65, 0.12);
    border-radius: 12px;
    box-shadow: 0 12px 26px rgba(7, 20, 38, 0.08);
    background-color: var(--color-site-white);
}

.application-form-page #application-form h2,
.application-form-page legend,
.application-form-page label {
    color: var(--brand-night);
}

.application-form-page label {
    font-weight: 500;
}

.application-form-page .application-help-text,
.application-form-page .captcha-help {
    color: var(--text-secondary) !important;
}

.application-form-page fieldset {
    border: 1px solid rgba(8, 31, 65, 0.16);
    border-radius: 12px;
    padding: 1.35rem 1.25rem 1rem;
    margin: 0 0 1.5rem;
}

.application-form-page input[type="text"],
.application-form-page input[type="email"],
.application-form-page input[type="tel"],
.application-form-page input[type="url"],
.application-form-page input[type="number"],
.application-form-page textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    color: var(--form-field-text);
    background-color: var(--form-field-bg);
    border: 1.75px solid var(--form-field-border);
    border-radius: 10px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: border-color 0.22s ease, outline-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease, color 0.22s ease;
    appearance: none;
    -webkit-appearance: none;
}

.application-form-page input[type="text"],
.application-form-page input[type="email"],
.application-form-page input[type="tel"],
.application-form-page input[type="url"],
.application-form-page input[type="number"] {
    min-height: 54px;
    padding: 0.9em 1em;
    font-size: 19px;
}

.application-form-page textarea {
    min-height: 140px;
    padding: 15px 20px;
    font-size: 19px;
    line-height: 1.4;
    resize: vertical;
}

.application-form-page input[type="checkbox"],
.application-form-page input[type="radio"] {
    width: auto;
    min-width: 0;
    margin-right: 8px;
    accent-color: var(--border-accent);
}

.application-form-page input::placeholder,
.application-form-page textarea::placeholder {
    color: var(--form-field-placeholder);
    opacity: 1;
}

.application-form-page input:focus,
.application-form-page textarea:focus,
.application-form-page input:focus-visible,
.application-form-page textarea:focus-visible,
.application-form-page button:focus-visible,
.application-form-page a:focus-visible {
    outline: 3px solid var(--border-accent);
    outline-offset: 2px;
    border-color: var(--border-accent);
    background-color: var(--form-focus-bg);
    box-shadow: 0 0 0 4px rgba(255, 192, 23, 0.15);
}

.application-form-page input[type="number"] {
    -moz-appearance: textfield;
}

.application-form-page input[type="number"]::-webkit-outer-spin-button,
.application-form-page input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.application-form-page .visually-hidden-field,
.application-form-page .honeypot-field {
    position: absolute;
    left: -99999px;
    top: auto;
    width: 1px;
    height: 1px;
    min-width: 1px;
    min-height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    margin: 0;
    padding: 0;
    border: 0;
}

.application-form-page .captcha-section {
    display: grid;
    grid-template-columns: minmax(320px, 380px) auto;
    gap: 16px 20px;
    align-items: center;
}

.application-form-page .captcha-section legend,
.application-form-page .captcha-section .captcha-help {
    grid-column: 1 / span 2;
}

.application-form-page .captcha-section img {
    grid-column: 1;
    display: block;
    width: 100%;
    max-width: 360px;
    height: 96px;
    border: 1.5px solid var(--border-accent);
    border-radius: 8px;
    background: var(--color-site-white);
    object-fit: contain;
}

.application-form-page .captcha-section .refresh-button-box {
    grid-column: 2;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.application-form-page .captcha-input-wrap {
    grid-column: 1 / span 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin-top: 4px;
}

.application-form-page .captcha-input-wrap input[name="captcha"] {
    width: 220px !important;
    max-width: 220px !important;
    min-width: 220px !important;
    text-align: center;
    letter-spacing: 0.08em;
}

.application-form-page .submit-row {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 38px;
    padding-bottom: 12px;
}

.application-form-page .submit-row .learn-more-button {
    margin: 0 auto;
}

.application-form-page .status-message,
.application-form-page .success-message,
.application-form-page .error-message {
    display: block;
    margin: 0 0 18px;
    padding: 14px 16px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 10px;
}

:root[data-theme="night-environment"] .application-form-page #application-form,
:root[data-theme="night-environment"] .application-form-page .terms-box,
:root[data-theme="night-environment"] .application-form-page fieldset {
    background-color: var(--bg-surface) !important;
    border-color: var(--night-border) !important;
}

:root[data-theme="night-environment"] .application-form-page h1,
:root[data-theme="night-environment"] .application-form-page h2,
:root[data-theme="night-environment"] .application-form-page h3,
:root[data-theme="night-environment"] .application-form-page p,
:root[data-theme="night-environment"] .application-form-page li,
:root[data-theme="night-environment"] .application-form-page label,
:root[data-theme="night-environment"] .application-form-page legend,
:root[data-theme="night-environment"] .application-form-page .application-help-text,
:root[data-theme="night-environment"] .application-form-page .captcha-help {
    color: var(--night-text-primary) !important;
}

:root[data-theme="night-environment"] .application-form-page input[type="text"],
:root[data-theme="night-environment"] .application-form-page input[type="email"],
:root[data-theme="night-environment"] .application-form-page input[type="tel"],
:root[data-theme="night-environment"] .application-form-page input[type="url"],
:root[data-theme="night-environment"] .application-form-page input[type="number"],
:root[data-theme="night-environment"] .application-form-page textarea {
    background-color: #EEF2F5 !important;
    color: #081F41 !important;
    border-color: var(--night-accent) !important;
}

:root[data-theme="night-environment"] .application-form-page input::placeholder,
:root[data-theme="night-environment"] .application-form-page textarea::placeholder {
    color: #4C5E78 !important;
    opacity: 1;
}

@media screen and (max-width: 1200px) {
    .application-form-page .terms-box {
        width: min(88vw, 1100px);
    }
}

@media screen and (max-width: 900px) {
    .application-form-page .captcha-section {
        grid-template-columns: 1fr;
    }

    .application-form-page .captcha-section legend,
    .application-form-page .captcha-section .captcha-help,
    .application-form-page .captcha-section img,
    .application-form-page .captcha-section .refresh-button-box,
    .application-form-page .captcha-input-wrap {
        grid-column: 1;
    }

    .application-form-page .captcha-section img {
        max-width: 320px;
        height: 96px;
    }

    .application-form-page .captcha-section .refresh-button-box {
        justify-content: flex-start;
    }
}

@media screen and (max-width: 800px) {
    .application-form-page .terms-box-wrapper {
        padding: 86px 0 24px;
    }

    .application-form-page .terms-box {
        width: 94vw;
        padding: 20px 14px;
        min-height: auto;
    }

    .application-form-page .terms-text {
        padding: 0 4px;
        margin-left: 0;
    }

    .application-form-page #application-form {
        padding: 1.15rem;
    }

    .application-form-page .refresh-button-box .learn-more-button,
    .application-form-page .submit-row .learn-more-button {
        width: 100%;
    }

    .application-form-page .captcha-input-wrap input[name="captcha"] {
        width: 100% !important;
        max-width: 320px !important;
        min-width: 0 !important;
    }
}

/* =============================================================
   CANONICAL FORM PAGE HEADER STANDARD
   Applies to Career Center Application and Square the Earth Application.
   Desktop and tablet landscape show one Contact in the right header section.
   Tablet portrait opens the hamburger menu and shows Contact inside the menu.
   ============================================================= */

:root:not([data-theme="night-environment"]) .application-form-page .corporate-main.fixed-dark-text .logo,
:root:not([data-theme="night-environment"]) .application-form-page .corporate-main.fixed-dark-text .s9-hamburger-nav a,
:root:not([data-theme="night-environment"]) .application-form-page .corporate-main.fixed-dark-text .right-section a {
    color: var(--brand-night) !important;
}

@media screen and (min-width: 801px) {
    .application-form-page .s9-hamburger-nav .s9-menu-contact {
        display: none !important;
    }

    .application-form-page .right-section {
        display: flex !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .application-form-page .corporate-main .hamburger {
        display: flex !important;
    }

    .application-form-page .right-section {
        display: none !important;
    }

    .application-form-page .s9-hamburger-nav .s9-menu-contact {
        display: block !important;
    }

    .application-form-page .s9-hamburger-nav.is-open a {
        color: var(--brand-night) !important;
    }
}

/* =============================================================
   APPLICATION PAGE LOGO AND ACCESSIBILITY PANEL HARD LOCK
   Keeps top application logos centered and allows logo image swap
   without allowing dark mode to alter accessibility panel colors.
   ============================================================= */

.application-logo-picture {
    display: block !important;
    width: fit-content !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.application-logo-picture .application-theme-logo {
    display: block !important;
    height: auto !important;
    width: auto !important;
    margin: 0 auto !important;
}

:root[data-theme="night-environment"] .accessibility-panel,
html.dark-mode .accessibility-panel,
html.night-environment .accessibility-panel,
body[data-theme="night-environment"] .accessibility-panel,
body.dark-mode .accessibility-panel,
body.night-environment .accessibility-panel {
    background: #FFFFFF !important;
    color: #081F41 !important;
    border-color: #FFC017 !important;
}

:root[data-theme="night-environment"] .accessibility-panel h2,
:root[data-theme="night-environment"] .accessibility-panel h3,
:root[data-theme="night-environment"] .accessibility-panel p,
:root[data-theme="night-environment"] .accessibility-panel span,
:root[data-theme="night-environment"] .accessibility-panel button,
:root[data-theme="night-environment"] .accessibility-panel .setting-toggle-label,
:root[data-theme="night-environment"] .accessibility-panel .accessibility-helper-text,
html.dark-mode .accessibility-panel h2,
html.dark-mode .accessibility-panel h3,
html.dark-mode .accessibility-panel p,
html.dark-mode .accessibility-panel span,
html.dark-mode .accessibility-panel button,
html.dark-mode .accessibility-panel .setting-toggle-label,
html.dark-mode .accessibility-panel .accessibility-helper-text,
html.night-environment .accessibility-panel h2,
html.night-environment .accessibility-panel h3,
html.night-environment .accessibility-panel p,
html.night-environment .accessibility-panel span,
html.night-environment .accessibility-panel button,
html.night-environment .accessibility-panel .setting-toggle-label,
html.night-environment .accessibility-panel .accessibility-helper-text,
body[data-theme="night-environment"] .accessibility-panel h2,
body[data-theme="night-environment"] .accessibility-panel h3,
body[data-theme="night-environment"] .accessibility-panel p,
body[data-theme="night-environment"] .accessibility-panel span,
body[data-theme="night-environment"] .accessibility-panel button,
body[data-theme="night-environment"] .accessibility-panel .setting-toggle-label,
body[data-theme="night-environment"] .accessibility-panel .accessibility-helper-text,
body.dark-mode .accessibility-panel h2,
body.dark-mode .accessibility-panel h3,
body.dark-mode .accessibility-panel p,
body.dark-mode .accessibility-panel span,
body.dark-mode .accessibility-panel button,
body.dark-mode .accessibility-panel .setting-toggle-label,
body.dark-mode .accessibility-panel .accessibility-helper-text,
body.night-environment .accessibility-panel h2,
body.night-environment .accessibility-panel h3,
body.night-environment .accessibility-panel p,
body.night-environment .accessibility-panel span,
body.night-environment .accessibility-panel button,
body.night-environment .accessibility-panel .setting-toggle-label,
body.night-environment .accessibility-panel .accessibility-helper-text {
    color: #081F41 !important;
}

:root[data-theme="night-environment"] .accessibility-panel .setting-toggle,
html.dark-mode .accessibility-panel .setting-toggle,
html.night-environment .accessibility-panel .setting-toggle,
body[data-theme="night-environment"] .accessibility-panel .setting-toggle,
body.dark-mode .accessibility-panel .setting-toggle,
body.night-environment .accessibility-panel .setting-toggle {
    background: #FFFFFF !important;
    color: #081F41 !important;
    border-color: #FFC017 !important;
}

:root[data-theme="night-environment"] .accessibility-panel .setting-toggle[aria-checked="true"],
html.dark-mode .accessibility-panel .setting-toggle[aria-checked="true"],
html.night-environment .accessibility-panel .setting-toggle[aria-checked="true"],
body[data-theme="night-environment"] .accessibility-panel .setting-toggle[aria-checked="true"],
body.dark-mode .accessibility-panel .setting-toggle[aria-checked="true"],
body.night-environment .accessibility-panel .setting-toggle[aria-checked="true"] {
    background: rgb(255, 250, 232) !important;
}

:root[data-theme="night-environment"] .accessibility-panel .setting-toggle-track,
html.dark-mode .accessibility-panel .setting-toggle-track,
html.night-environment .accessibility-panel .setting-toggle-track,
body[data-theme="night-environment"] .accessibility-panel .setting-toggle-track,
body.dark-mode .accessibility-panel .setting-toggle-track,
body.night-environment .accessibility-panel .setting-toggle-track {
    background: rgba(8, 31, 65, 0.22) !important;
}

:root[data-theme="night-environment"] .accessibility-panel .setting-toggle[aria-checked="true"] .setting-toggle-track,
html.dark-mode .accessibility-panel .setting-toggle[aria-checked="true"] .setting-toggle-track,
html.night-environment .accessibility-panel .setting-toggle[aria-checked="true"] .setting-toggle-track,
body[data-theme="night-environment"] .accessibility-panel .setting-toggle[aria-checked="true"] .setting-toggle-track,
body.dark-mode .accessibility-panel .setting-toggle[aria-checked="true"] .setting-toggle-track,
body.night-environment .accessibility-panel .setting-toggle[aria-checked="true"] .setting-toggle-track {
    background: #FFC017 !important;
}

:root[data-theme="night-environment"] .accessibility-panel .setting-toggle-thumb,
html.dark-mode .accessibility-panel .setting-toggle-thumb,
html.night-environment .accessibility-panel .setting-toggle-thumb,
body[data-theme="night-environment"] .accessibility-panel .setting-toggle-thumb,
body.dark-mode .accessibility-panel .setting-toggle-thumb,
body.night-environment .accessibility-panel .setting-toggle-thumb {
    background: #FFFFFF !important;
}

:root[data-theme="night-environment"] .accessibility-panel .accessibility-option-button,
html.dark-mode .accessibility-panel .accessibility-option-button,
html.night-environment .accessibility-panel .accessibility-option-button,
body[data-theme="night-environment"] .accessibility-panel .accessibility-option-button,
body.dark-mode .accessibility-panel .accessibility-option-button,
body.night-environment .accessibility-panel .accessibility-option-button {
    background: #FFFFFF !important;
    color: #081F41 !important;
    border-color: #FFC017 !important;
}



/* =============================================================
   APPLICATION THEME LOGO SIZE LOCK
   Prevents light and dark logo image source swaps from changing
   the rendered logo dimensions.
   ============================================================= */

.application-logo-picture .application-theme-logo,
.application-theme-logo[data-s9-theme-logo="true"] {
    display: block !important;
    width: 100px !important;
    max-width: 100px !important;
    height: auto !important;
    max-height: 121px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}

.application-logo-picture {
    display: block !important;
    width: 100px !important;
    max-width: 100px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* Universal floating control parity */

.accessibility-trigger img,
.accessibility-trigger .accessibility-trigger-icon {
    filter: none !important;
}

/* Daytime hover: white icon on navy */
.accessibility-trigger:hover img,
.accessibility-trigger:hover .accessibility-trigger-icon {
    filter: brightness(0) invert(1) !important;
}

/* Dark mode default: charcoal background with white icon */
:root[data-theme="night-environment"] .accessibility-trigger {
    background: #24303B !important;
    color: #FFFFFF !important;
}

:root[data-theme="night-environment"] .accessibility-trigger img,
:root[data-theme="night-environment"] .accessibility-trigger .accessibility-trigger-icon {
    filter: brightness(0) invert(1) !important;
}

/* Dark mode hover: white background with navy icon */
:root[data-theme="night-environment"] .accessibility-trigger:hover {
    background: #FFFFFF !important;
    color: #081F41 !important;
}

:root[data-theme="night-environment"] .accessibility-trigger:hover img,
:root[data-theme="night-environment"] .accessibility-trigger:hover .accessibility-trigger-icon {
    filter: none !important;
}

/* Dark mode hamburger parity */
:root[data-theme="night-environment"] .nav-toggle.hamburger {
    background: #24303B !important;
    color: #FFFFFF !important;
}

:root[data-theme="night-environment"] .nav-toggle.hamburger:hover {
    background: #FFFFFF !important;
    color: #081F41 !important;
}

/* =============================================================
   Career Center contact form visual alignment
   Mirrors the application form color system without changing form behavior.
   ============================================================= */

.contactus-page .wrapper-contactus {
    background: var(--color-site-white) !important;
    background-color: var(--color-site-white) !important;
    background-image: none !important;
    border: 1px solid color-mix(in srgb, var(--brand-night) 12%, transparent) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 26px rgba(7, 20, 38, 0.08) !important;
}

.contactus-page .wrapper-contactus h1,
.contactus-page .wrapper-contactus .captcha-help-line {
    color: var(--brand-night) !important;
}

.contactus-page .wrapper-contactus .dbl-field .field input,
.contactus-page .wrapper-contactus .message textarea,
.contactus-page .wrapper-contactus .captcha-section input[name="captcha"] {
    min-height: 54px !important;
    color: var(--form-field-text) !important;
    background-color: var(--form-field-bg) !important;
    border: 1.75px solid var(--form-field-border) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.contactus-page .wrapper-contactus .dbl-field .field input,
.contactus-page .wrapper-contactus .captcha-section input[name="captcha"] {
    padding: 0.9em 1em !important;
}

.contactus-page .wrapper-contactus .message textarea {
    min-height: 140px !important;
    padding: 15px 20px !important;
}

.contactus-page .wrapper-contactus .captcha-section img#contact-captcha-image {
    border: 1.5px solid var(--border-accent) !important;
    border-radius: 8px !important;
    background: var(--color-site-white) !important;
}

:root[data-theme="night-environment"] .contactus-page .wrapper-contactus {
    background: var(--bg-surface) !important;
    background-color: var(--bg-surface) !important;
    border-color: var(--night-border) !important;
}

:root[data-theme="night-environment"] .contactus-page .wrapper-contactus h1,
:root[data-theme="night-environment"] .contactus-page .wrapper-contactus .captcha-help-line,
:root[data-theme="night-environment"] .contactus-page .wrapper-contactus label {
    color: var(--night-text-primary) !important;
}

:root[data-theme="night-environment"] .contactus-page .wrapper-contactus .dbl-field .field input,
:root[data-theme="night-environment"] .contactus-page .wrapper-contactus .message textarea,
:root[data-theme="night-environment"] .contactus-page .wrapper-contactus .captcha-section input[name="captcha"] {
    background-color: var(--night-text-primary) !important;
    color: var(--brand-night) !important;
    border-color: var(--night-accent) !important;
}

:root[data-theme="night-environment"] .contactus-page .wrapper-contactus .dbl-field .field input::placeholder,
:root[data-theme="night-environment"] .contactus-page .wrapper-contactus .message textarea::placeholder,
:root[data-theme="night-environment"] .contactus-page .wrapper-contactus .captcha-section input[name="captcha"]::placeholder {
    color: var(--text-tertiary) !important;
    opacity: 1 !important;
}

:root[data-theme="night-environment"] .contactus-page .wrapper-contactus .captcha-section img#contact-captcha-image {
    background: var(--night-text-primary) !important;
    border-color: var(--night-accent) !important;
}

/* =========================================================
   HERO VIDEO SECTION ONLY
   Scoped exclusively to .main-image-container and .hero-video
   No unrelated selectors modified
========================================================= */

.main-image-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.main-image-container .hero-video {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* =========================================================
   DESKTOP LARGE
   1400px and above
   Matches:
   broadcast-flow-desktop-av1.webm
========================================================= */

@media screen and (min-width: 1400px) {

    .main-image-container {
        width: 100%;
    }

    .main-image-container .hero-video {
        width: 100%;
        height: auto;
    }
}

/* =========================================================
   LAPTOP / STANDARD DESKTOP
   1024px to 1399px
   Matches:
   broadcast-flow-laptop-av1.webm
========================================================= */

@media screen and (min-width: 1024px) and (max-width: 1399px) {

    .main-image-container {
        width: 100%;
    }

    .main-image-container .hero-video {
        width: 100%;
        height: auto;
    }
}

/* =========================================================
   TABLET
   768px to 1023px
   Matches:
   broadcast-flow-tablet-av1.webm
========================================================= */

@media screen and (min-width: 768px) and (max-width: 1023px) {

    .main-image-container {
        width: 100%;
    }

    .main-image-container .hero-video {
        width: 100%;
        height: auto;
    }
}

/* =========================================================
   MOBILE
   Under 768px
   Uses MP4 fallback
========================================================= */

@media screen and (max-width: 767px) {

    .main-image-container {
        width: 100%;
    }

    .main-image-container .hero-video {
        width: 100%;
        height: auto;
    }
}

/* =============================================================
   FINAL INDEX HAMBURGER HARD LOCK
   Tablet portrait only. Keeps the menu closed until JS removes
   hidden and adds .is-open, then forces the dropdown above media.
   ============================================================= */

@media screen and (min-width: 801px) and (max-width: 1024px) and (orientation: portrait) {
    .corporate-main {
        z-index: 10000 !important;
    }

    .corporate-main .nav-toggle.hamburger {
        display: inline-flex !important;
        position: relative !important;
        z-index: 10002 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        margin-left: auto !important;
    }

    #primary-navigation.s9-hamburger-nav[hidden] {
        display: none !important;
    }

    #primary-navigation.s9-hamburger-nav.is-open:not([hidden]) {
        display: flex !important;
        position: fixed !important;
        top: 78px !important;
        right: 20px !important;
        width: min(86vw, 420px) !important;
        max-width: min(86vw, 420px) !important;
        height: auto !important;
        padding: 22px 22px 20px !important;
        border: 1.5px solid var(--border-accent) !important;
        border-radius: 18px !important;
        background: var(--color-site-white) !important;
        box-shadow: 0 18px 42px rgba(7, 20, 38, 0.18) !important;
        z-index: 10001 !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }

    #primary-navigation.s9-hamburger-nav.is-open:not([hidden]) a {
        display: block !important;
        width: 100% !important;
        color: var(--brand-night) !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        padding: 12px 0 !important;
        border-bottom: 1px solid rgba(8, 31, 65, 0.08) !important;
        white-space: nowrap !important;
        text-decoration: none !important;
    }

    #primary-navigation.s9-hamburger-nav.is-open:not([hidden]) a:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }
}

@media screen and (min-width: 797px) and (max-width: 1399px) and (orientation: portrait) {
    .index-footer-corporate {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto auto !important;
        grid-template-areas:
            "footer-box-1"
            "footer-box-2"
            "logo-row"
            "copyright-row" !important;
        height: auto !important;
        min-height: 0 !important;
        row-gap: clamp(28px, 4vw, 56px) !important;
    }

    .index-footer-corporate-master-row-a {
        display: contents !important;
    }

    .index-footer-corporate .footer-column-box-1 {
        grid-area: footer-box-1 !important;
        display: grid !important;
        width: 100% !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: clamp(24px, 4vw, 64px) !important;
        justify-items: center !important;
        align-items: start !important;
    }

    .index-footer-corporate .footer-column-box-2 {
        grid-area: footer-box-2 !important;
        display: grid !important;
        width: 100% !important;
        grid-template-columns: 1fr minmax(0, 1fr) minmax(0, 1fr) 1fr !important;
        gap: clamp(24px, 4vw, 64px) !important;
        justify-items: center !important;
        align-items: start !important;
    }

    .index-footer-corporate .footer-slate4 {
        grid-column: 2 !important;
    }

    .index-footer-corporate .footer-slate5 {
        grid-column: 3 !important;
    }

    .index-footer-corporate-master-row-b {
        grid-area: logo-row !important;
    }

    .index-footer-corporate-master-row-c {
        grid-area: copyright-row !important;
    }
}

@media screen and (min-width: 797px) and (max-width: 1024px) and (orientation: portrait) {
    .index-footer-corporate .footer-column-box-1 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        justify-items: stretch !important;
        align-items: start !important;
    }

    .index-footer-corporate .first-box {
        grid-column: 1 !important;
        justify-self: stretch !important;
    }

    .index-footer-corporate .second-box {
        grid-column: 2 !important;
        justify-self: stretch !important;
    }

    .index-footer-corporate .third-box {
        grid-column: 3 !important;
        justify-self: stretch !important;
    }

    .index-footer-corporate .footer-slate1,
    .index-footer-corporate .footer-slate2,
    .index-footer-corporate .footer-slate3 {
        width: 100% !important;
        text-align: left !important;
    }
}