/* ==========================================================================
   Portal chrome — masthead, navigation, footer.
   ========================================================================== */

/* The palette is taken from the logo: its dots run from a pale cyan through to a
   near-black teal, and the interface uses the dark end for text and surfaces and
   the bright end as the accent. The neutrals carry the same cool cast, so that
   nothing on the page reads as a different family of colour. */
:root {
    --brand: #07657d; /* deep teal, the seventh dot — text, buttons, links */
    --brand-dark: #054454; /* eighth dot — footer, hover */
    --brand-deep: #03222a; /* ninth dot — text on bright surfaces */
    --brand-mid: #0da7cf; /* fifth dot — rules and other decoration */
    --brand-bright: #12c8f4; /* fourth dot — the accent */
    --brand-tint: #e7f4f9; /* a wash of the pale end */
    --accent: var(--brand-bright);

    --ink: #12212a;
    --ink-2: #45565e;
    --ink-3: #5e6f77;

    --paper: #ffffff;
    --paper-2: #f4f8fa;
    --line: #d9e4e9;

    --wrap: 1220px;
    --radius: 10px;
    --shadow: 0 1px 2px rgba(5, 44, 56, .05), 0 8px 24px rgba(5, 44, 56, .07);

    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--paper-2);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
}

h1, h2, h3 {
    margin: 0;
    color: var(--ink);
    line-height: 1.25;
    letter-spacing: -.01em;
}

p {
    margin: 0 0 1em;
}

a {
    color: var(--brand);
    text-decoration-color: rgba(7, 101, 125, .35);
    text-underline-offset: .18em;
}

    a:hover {
        color: var(--brand-dark);
        text-decoration-color: currentColor;
    }

img {
    max-width: 100%;
}

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

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 24px;
}

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

.skip-link {
    position: absolute;
    top: -60px;
    left: 16px;
    z-index: 100;
    padding: 10px 16px;
    background: var(--brand-dark);
    border-radius: 0 0 6px 6px;
    color: #fff;
    text-decoration: none;
    transition: top .15s ease;
}

    .skip-link:focus {
        top: 0;
        color: #fff;
    }

/* --- Masthead and main navigation ------------------------------------ */

.masthead {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 0 rgba(5, 44, 56, .04);
}

.masthead-inner {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 84px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-right: auto;
    color: inherit;
    text-decoration: none;
}

.brand-logo {
    width: auto;
    height: 54px;
    flex-shrink: 0;
}

.brand-divider {
    width: 1px;
    height: 40px;
    flex-shrink: 0;
    background: var(--line);
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

    .brand-text strong {
        font-size: 18px;
        font-weight: 700;
        letter-spacing: -.015em;
    }

    .brand-text > span {
        color: var(--ink-3);
        font-size: 13.5px;
    }

.nav-toggle {
    display: none;
    width: 44px;
    height: 40px;
    padding: 0;
    background: none;
    border: 1px solid var(--line);
    border-radius: 6px;
    cursor: pointer;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
}

.nav-toggle-bars {
    position: relative;
    margin: 0 auto;
}

    .nav-toggle-bars::before,
    .nav-toggle-bars::after {
        position: absolute;
        content: "";
    }

    .nav-toggle-bars::before {
        top: -6px;
    }

    .nav-toggle-bars::after {
        top: 6px;
    }

.mainnav > ul {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mainnav a {
    display: block;
    padding: 9px 12px;
    border-radius: 6px;
    color: var(--ink-2);
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

    .mainnav a:hover {
        background: var(--brand-tint);
        color: var(--brand-dark);
    }

    /* The section the visitor is currently in. */
    .mainnav > ul > li > a.is-active {
        box-shadow: inset 0 -2px 0 var(--brand);
        color: var(--brand-dark);
        font-weight: 600;
    }

.mainnav .has-children {
    position: relative;
}

    .mainnav .has-children > a::after {
        display: inline-block;
        margin-left: 7px;
        border-top: 4px solid currentColor;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
        content: "";
        vertical-align: middle;
        opacity: .55;
    }

.submenu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    display: block;
    min-width: 268px;
    margin: 0;
    padding: 6px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    list-style: none;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s;
}

.mainnav .has-children:hover > .submenu,
.mainnav .has-children:focus-within > .submenu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.submenu li {
    display: block;
    width: 100%;
}

.submenu a {
    white-space: normal;
}

    .submenu a.is-current {
        background: var(--brand);
        color: #fff;
        font-weight: 600;
    }

        .submenu a.is-current:hover {
            background: var(--brand-dark);
            color: #fff;
        }

/* Language switcher, after Contact Us. English at launch; the other two are
   shown as prepared for but not yet published. */
.nav-langs {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: 10px;
    padding-left: 16px;
    border-left: 1px solid var(--line);
}

.lang {
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
}

    .lang.is-active {
        background: var(--brand);
        color: #fff;
    }

    .lang.is-pending {
        color: var(--ink-3);
        cursor: default;
        opacity: .75;
    }

/* --- Page head and breadcrumb ---------------------------------------- */

.page-head {
    padding: 26px 0 34px;
    background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
    border-bottom: 1px solid var(--line);
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 18px;
    padding: 0;
    color: var(--ink-3);
    font-size: 13px;
    list-style: none;
}

.breadcrumb li + li::before {
    margin-right: 6px;
    content: "›";
    opacity: .6;
}

.breadcrumb a {
    color: var(--ink-2);
    text-decoration: none;
}

    .breadcrumb a:hover {
        color: var(--brand);
        text-decoration: underline;
    }

.breadcrumb [aria-current="page"] {
    color: var(--ink-2);
    font-weight: 600;
}

.page-head-main {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

    .page-head-main h1 {
        max-width: 22ch;
        font-size: clamp(28px, 3.2vw, 40px);
    }

.page-intro {
    max-width: 78ch;
    margin: 16px 0 0;
    color: var(--ink-2);
    font-size: 16.5px;
}

.page-updated {
    flex-shrink: 0;
    margin: 0;
    padding: 7px 13px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-3);
    font-size: 13px;
    white-space: nowrap;
}

.page-body {
    padding-top: 32px;
    padding-bottom: 72px;
}

/* --- Buttons ---------------------------------------------------------- */

.btn-primary,
.btn-apply {
    display: inline-block;
    padding: 11px 20px;
    background: var(--brand);
    border: 1px solid var(--brand);
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

    .btn-primary:hover,
    .btn-apply:hover {
        background: var(--brand-dark);
        border-color: var(--brand-dark);
        color: #fff;
    }

/* --- Footer ----------------------------------------------------------- */

.site-footer {
    background: var(--brand-dark);
    color: rgba(255, 255, 255, .78);
    font-size: 14.5px;
}

.footer-inner {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr;
    gap: 44px;
    padding-top: 48px;
    padding-bottom: 40px;
}

.site-footer strong,
.site-footer h2 {
    display: block;
    margin: 0 0 14px;
    color: #fff;
    font-size: 15px;
    letter-spacing: .01em;
}

.footer-brand p {
    max-width: 48ch;
    margin: 0;
}

.site-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer li + li {
    margin-top: 8px;
}

.site-footer a {
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
}

    .site-footer a:hover {
        color: #fff;
        text-decoration: underline;
    }

.footer-legal {
    padding-top: 18px;
    padding-bottom: 22px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .58);
    font-size: 13px;
}

/* --- Narrow screens --------------------------------------------------- */

@media (max-width: 1100px) {
    .nav-toggle {
        display: block;
    }

    .masthead-inner {
        min-height: 76px;
    }

    .mainnav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        padding: 10px 16px 18px;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow);
    }

        .mainnav.is-open {
            display: block;
        }

        .mainnav > ul {
            display: block;
        }

        .mainnav a {
            padding: 11px 12px;
        }

    .submenu {
        position: static;
        min-width: 0;
        margin: 0 0 6px 12px;
        padding: 0;
        border: 0;
        border-left: 2px solid var(--line);
        border-radius: 0;
        box-shadow: none;
        visibility: visible;
        opacity: 1;
        transform: none;
    }

    .mainnav .has-children > a::after {
        display: none;
    }

    /* The underline reads as a stray rule once the menu is a stacked list. */
    .mainnav > ul > li > a.is-active {
        box-shadow: none;
    }

    .nav-langs {
        margin: 10px 0 0;
        padding: 14px 12px 0;
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .page-head-main {
        display: block;
    }

    .page-updated {
        display: inline-block;
        margin-top: 18px;
    }

    .footer-inner {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .wrap {
        padding: 0 16px;
    }

    .brand {
        gap: 10px;
    }

    .brand-logo {
        height: 32px;
    }

    .brand-divider {
        height: 30px;
    }

    .brand-text strong {
        font-size: 13.5px;
    }

    .brand-text > span {
        font-size: 11.5px;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}