:root {
    --navy: #102a43;
    --blue: #1769aa;
    --blue2: #2d8fd5;
    --gold: #d9a441;
    --line: #d9e2ec;
}

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

* {
    box-sizing: border-box;
}

body {
    margin: 0;

    background:
    linear-gradient(
        135deg,
        #eaf1f6,
        #f8fafc
    );

    font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;

    color: #1f2933;
}

#contents {
min-height: 100vh;

display: flex;
flex-direction: column;
}

/* =========================================================
 * SITE HEADER
 * ========================================================= */

.site-header {
    width: min(
        1180px,
        calc(100% - 24px)
    );

    margin: 12px auto 0;

    background: rgba(255, 255, 255, .96);

    border: 1px solid var(--line);

    border-radius: 22px;

    box-shadow:
    0 14px 40px
    rgba(16, 42, 67, .12);

    overflow: hidden;

    position: relative;

    z-index: 10;
}

/* =========================================================
 * HEADER CONTENT
 * ========================================================= */

.header-content {
    position: relative;

    width: 100%;
}

/* =========================================================
 * LEFT SIDE
 * ========================================================= */

.header-left {
    width: 100%;

    min-width: 0;

    /*
     *
     * Reserve room for the logo and its increased
     * right-side margin.
     */
    padding-right: 235px;

    display: flex;

    flex-direction: column;
}

/* =========================================================
 * HEADER TEXT
 * ========================================================= */

.header-top {
    display: flex;

    align-items: center;

    min-width: 0;

    /*
     *
     * Left margin doubled from 72px to 144px.
     */
    padding:
    18px
    24px
    14px
    144px;
}

.brand-copy {
    width: 100%;

    min-width: 0;
}

.brand-copy h1 {
    margin: 0;

    color: var(--navy);

    font-size:
    clamp(
        1.35rem,
        3vw,
        2rem
    );

    line-height: 1.1;
}

.brand-tagline {
    margin:
    5px
    0
    0;

    color: #627d98;

    font-size: .95rem;
}

.phone-link {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-top: 8px;

    color: var(--blue);

    font-weight: 750;

    text-decoration: none;
}

.phone-link:hover {
    text-decoration: underline;
}

/* =========================================================
 * NAVIGATION BAR
 * ========================================================= */

.menu-bar {
    display: flex;

    align-items: center;

    gap: 8px;

    /*
     *
     * Left margin doubled from 72px to 144px.
     */
    padding:
    10px
    14px
    14px
    144px;

    overflow-x: auto;

    scrollbar-width: none;
}

.menu-bar::-webkit-scrollbar {
    display: none;
}

/* =========================================================
 * NAVIGATION BUTTONS
 * ========================================================= */

.menu-button {
    appearance: none;

    border:
    1px solid
    #c9d6e2;

    background: #fff;

    color: var(--navy);

    border-radius: 12px;

    padding:
    10px
    16px;

    min-height: 44px;

    white-space: nowrap;

    font-weight: 750;

    font-size: .95rem;

    cursor: pointer;

    transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;

    box-shadow:
    0 2px 6px
    rgba(16, 42, 67, .05);
}

.menu-button:hover {
    transform: translateY(-1px);

    border-color: #8fb5d3;

    background: #f3f8fc;
}

.menu-button.active {
    background: var(--navy);

    color: #fff;

    border-color: var(--navy);

    box-shadow:
    0 7px 16px
    rgba(16, 42, 67, .18);
}

/* =========================================================
 * RIGHT-SIDE LOGO
 * ========================================================= */

.header-logo {
    position: absolute;

    top: 5px;

    right: 0;

    bottom: 5px;

    /*
     *
     * Increased from 193px to 235px to accommodate
     * the doubled right margin.
     */
    width: 235px;

    display: flex;

    align-items: center;

    justify-content: center;

    /*
     *
     * Right margin doubled from 42px to 84px.
     */
    padding:
    0
    84px
    0
    6px;

    overflow: hidden;

    pointer-events: none;
}

.brand-logo {
    display: block;

    width: auto;

    height: 100%;

    max-width: 100%;

    object-fit: contain;

    flex: 0 0 auto;
}

/* =========================================================
 * MAIN CONTENT
 * ========================================================= */

main {
    width: min(
        1180px,
        calc(100% - 24px)
    );

    margin: 12px auto;

    flex: 1;

    min-height: 0;
}

.frame-shell {
    height:
    clamp(
        600px,
        calc(100vh - 190px),
          980px
    );

    min-height: 600px;

    background: #fff;

    border:
    1px solid
    var(--line);

    border-radius: 22px;

    box-shadow:
    0 14px 40px
    rgba(16, 42, 67, .10);

    overflow: hidden;
}

.contents-frame {
    display: block;

    width: 100%;

    height: 100%;

    border: 0;

    background: #fff;
}

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

.site-footer {
    width: min(
        1180px,
        calc(100% - 24px)
    );

    margin:
    0
    auto
    12px;

    padding:
    14px
    20px;

    display: flex;

    justify-content: space-between;

    gap: 15px;

    flex-wrap: wrap;

    color: #627d98;

    font-size: .86rem;

    text-align: center;
}

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

@media (max-width: 650px) {

    .site-header {
        margin-top: 8px;

        ```
        border-radius: 16px;
        ```

    }

    .header-content {
        display: flex;

        ```
        flex-direction: column;
        ```

    }

    .header-left {
        width: 100%;

        ```
        padding-right: 0;
        ```

    }

    .header-top {
        padding:
        14px
        16px;

        ```
        gap: 14px;
        ```

    }

    .header-logo {
        position: relative;

        ```
        top: auto;
        right: auto;
        bottom: auto;

        order: -1;

        width: 100%;

        height: 90px;

        padding:
        8px
        16px;

        overflow: hidden;
        ```

    }

    .brand-logo {
        width: auto;

        ```
        height: auto;

        max-width: 100%;

        max-height: 74px;

        object-fit: contain;
        ```

    }

    .brand-tagline {
        font-size: .8rem;
    }

    .phone-link {
        font-size: .85rem;
    }

    .menu-bar {
        padding:
        8px
        10px
        12px;
    }

    .menu-button {
        padding:
        9px
        13px;

        ```
        font-size: .88rem;
        ```

    }

    .frame-shell {
        height:
        calc(100vh - 175px);

        ```
        min-height: 560px;

        border-radius: 16px;
        ```

    }

    .site-footer {
        justify-content: center;

        ```
        margin-bottom: 6px;
        ```

    }

}