:root {
    --color-navy: #183a60;
    --color-blue: #2a6fa8;
    --color-purple: #6c4d8c;
    --color-teal: #2a9d8f;
    --color-gold: #ad9456;
    --color-sky: #c9dff0;
    --color-mist: #eaf2f6;
    --color-paper: #f7f7f4;
    --color-grey: #f2f2f2;
    --color-arrow: #3896dc;
    --color-text: #1b1b1b;
    --color-white: #fff;

    /* System stack until the brand font is confirmed and self-hosted */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --container-width: 1200px;
    --gutter: 1.5rem;
}

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

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

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-white);
}

img,
svg {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--color-blue);
}

h1,
h2,
h3,
h4 {
    margin: 0 0 0.5em;
    line-height: 1.2;
    color: var(--color-navy);
}

.container {
    width: min(100% - 2 * var(--gutter), var(--container-width));
    margin-inline: auto;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: 0.5rem 1rem;
    background: var(--color-navy);
    color: var(--color-white);
    z-index: 1000;
}

.skip-link:focus {
    left: 0;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.btn {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    border: 0;
    border-radius: 4px;
    background: var(--color-blue);
    color: var(--color-white);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.25s ease;
}

.btn:hover,
.btn:focus-visible {
    background: var(--color-navy);
}

/* On the dark header and footer the navy would blend in, so the button only turns a lighter blue */
.site-header .btn:hover,
.site-header .btn:focus-visible,
.site-footer .btn:hover,
.site-footer .btn:focus-visible {
    background: var(--color-arrow);
}

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

/* Header */

.site-header {
    position: relative;
    z-index: 100;
    background: var(--color-navy);
    color: var(--color-white);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 0.75rem;
    border-bottom: 1px solid rgb(255 255 255 / 25%);
}

.site-header__brand img {
    display: block;
    width: 170px;
}

.primary-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.primary-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.primary-nav__list {
    display: flex;
    gap: 1.5rem;
}

.primary-nav__list > li {
    position: relative;
}

.primary-nav a {
    display: block;
    padding-block: 0.5rem;
    color: var(--color-white);
    font-weight: 700;
    text-decoration: none;
}

.primary-nav a:hover,
.primary-nav a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 6px;
}

/* The subscribe button is not a link in the menu: no underline, only its color changes */
.primary-nav a.btn:hover,
.primary-nav a.btn:focus-visible {
    text-decoration: none;
}

.primary-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    min-width: 15rem;
    padding: 0.5rem 1rem;
    background: var(--color-navy);
    border-top: 3px solid var(--color-blue);
    box-shadow: 0 8px 20px rgb(0 0 0 / 25%);
}

.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu {
    display: block;
}

/* Third level (for example the pages of single events under Events): opens to the side */
.primary-nav .sub-menu li {
    position: relative;
}

.primary-nav .sub-menu .sub-menu {
    top: -0.5rem;
    left: 100%;
    border-top: 0;
    border-left: 3px solid var(--color-blue);
}

.primary-nav .sub-menu .menu-item-has-children > a::after {
    content: "\203A";
    float: right;
    margin-left: 1rem;
}

.site-header__cta {
    white-space: nowrap;
}

.nav-toggle {
    display: none;
    min-width: 44px;
    min-height: 44px;
    padding: 0.6rem;
    border: 1px solid rgb(255 255 255 / 50%);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    display: block;
    width: 1.5rem;
    height: 2px;
    background: var(--color-white);
}

.nav-toggle__bars {
    position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-toggle__bars::before {
    top: -7px;
}

.nav-toggle__bars::after {
    top: 7px;
}

.sub-toggle {
    display: none;
}

@media (max-width: 1100px) {
    .site-header__inner {
        flex-wrap: wrap;
    }

    .nav-toggle {
        display: block;
    }

    /* The open menu gets a solid panel so it never mixes with the page behind it */
    .site-header.is-menu-open,
    .has-banner .site-header.is-menu-open {
        max-height: 100vh;
        max-height: 100dvh;
        overflow-y: auto;
        background: var(--color-navy);
    }

    .primary-nav {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding-bottom: 1.5rem;
    }

    .primary-nav.is-open {
        display: flex;
    }

    .primary-nav__list {
        flex-direction: column;
        gap: 0;
    }

    .primary-nav__list > li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-bottom: 1px solid rgb(255 255 255 / 15%);
    }

    .primary-nav__list > li > a {
        flex: 1;
        padding-block: 0.9rem;
        font-size: 1.1rem;
    }

    .sub-toggle {
        display: block;
        flex: none;
        width: 44px;
        height: 44px;
        border: 0;
        background: transparent;
        cursor: pointer;
    }

    .sub-toggle::before {
        content: "";
        display: block;
        width: 0.6rem;
        height: 0.6rem;
        margin: 0 auto;
        border-right: 2px solid var(--color-white);
        border-bottom: 2px solid var(--color-white);
        transform: translateY(-2px) rotate(45deg);
        transition: transform 0.2s;
    }

    .is-open > .sub-toggle::before {
        transform: translateY(2px) rotate(-135deg);
    }

    .primary-nav .primary-nav__list > li > .sub-menu,
    .primary-nav li:not(.is-open):hover > .sub-menu,
    .primary-nav li:not(.is-open):focus-within > .sub-menu {
        position: static;
        display: none;
        flex-basis: 100%;
        min-width: 0;
        padding: 0 0 0.75rem 1rem;
        border-top: 0;
        background: transparent;
        box-shadow: none;
    }

    .primary-nav .primary-nav__list > li.is-open > .sub-menu,
    .primary-nav .sub-menu li.is-open > .sub-menu {
        display: block;
    }

    /* Second level items that have their own list get the same toggle button as the top level */
    .primary-nav .sub-menu li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .primary-nav .sub-menu li > a {
        flex: 1;
    }

    .primary-nav .sub-menu .sub-menu {
        position: static;
        flex-basis: 100%;
        min-width: 0;
        padding: 0 0 0 1rem;
        border-left: 0;
        background: transparent;
        box-shadow: none;
    }

    .primary-nav .sub-menu .menu-item-has-children > a::after {
        content: none;
    }

    .primary-nav .sub-menu a {
        padding-block: 0.6rem;
        font-weight: 400;
    }

    .site-header__cta {
        text-align: center;
    }

    /* The hamburger turns into a cross while the menu is open */
    .nav-toggle[aria-expanded="true"] .nav-toggle__bars {
        background: transparent;
    }

    .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
        top: 0;
        transform: rotate(45deg);
    }

    .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
        top: 0;
        transform: rotate(-45deg);
    }
}

/* Footer */

.site-footer {
    padding-block: 3rem 1.5rem;
    background: #1f2a30;
    color: var(--color-white);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 3rem;
}

.site-footer__logo {
    display: block;
    width: 230px;
    margin-bottom: 1.25rem;
}

.site-footer__about p {
    max-width: 34rem;
    margin: 0;
}

.site-footer__title {
    margin: 0 0 0.75rem;
    color: var(--color-white);
    font-size: 1.15rem;
}

.social-links {
    display: flex;
    gap: 1rem;
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
}

.social-links img {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 6px;
}

.newsletter-form {
    display: flex;
    gap: 0.75rem;
}

.newsletter-form input {
    flex: 1;
    min-width: 0;
    padding: 0.7rem 0.9rem;
    border: 0;
    border-radius: 4px;
    font: inherit;
}

.site-footer__bottom {
    margin-top: 2rem;
    text-align: center;
}

.site-footer__bottom p {
    margin: 0.5rem 0 0;
}

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

.footer-nav a {
    display: inline-block;
    padding-block: 0.6rem;
    color: var(--color-white);
    text-decoration: none;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
    text-decoration: underline;
}

@media (max-width: 800px) {
    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .newsletter-form {
        flex-direction: column;
    }
}

/* Header details from the previews: tagline under the logo, underline on the current section */

.site-header__brand {
    display: block;
}

.site-header__tagline {
    display: block;
    margin-top: 0.25rem;
    color: var(--color-white);
    font-size: 0.9rem;
}

.primary-nav .current-menu-item > a,
.primary-nav .current-menu-ancestor > a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

.has-banner .site-header {
    position: absolute;
    inset: 0 0 auto;
    background: transparent;
}

/* Homepage */

:root {
    --color-ink: #1f2a30;
}

.hero {
    display: flex;
    align-items: center;
    /* The same height as the banners of the inner pages */
    min-height: clamp(380px, 36vw, 560px);
    padding: 9rem 0 3rem;
    background: var(--color-navy) url("../images/home/bg-homepage.png") center / cover no-repeat;
    color: var(--color-white);
    text-align: center;
}

.hero__title {
    margin: 0 0 1.5rem;
    color: var(--color-white);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
}

.hero__subtitle {
    max-width: 52rem;
    margin: 0 auto;
    font-size: clamp(1.1rem, 2vw, 1.6rem);
    font-weight: 700;
}

.glance {
    padding-top: 4rem;
}

.glance__text {
    max-width: 62rem;
    text-align: center;
}

.glance__title {
    margin-bottom: 1.5rem;
    font-size: clamp(2rem, 4vw, 2.75rem);
}

.glance__title-light {
    font-weight: 300;
}

.glance__title-bold {
    font-weight: 800;
}

.glance strong {
    color: var(--color-navy);
}

.stats {
    margin-top: 3rem;
    padding-block: 2.5rem;
    background: var(--color-purple);
    color: var(--color-white);
}

.stats__list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1.5rem;
    margin-block: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.stats__item img {
    display: block;
    width: 130px;
    height: auto;
    margin: 0 auto 0.75rem;
}

.stats__item span {
    font-weight: 700;
}

.section__cta {
    padding-block: 2.5rem;
    text-align: center;
}

.section__title {
    margin-bottom: 2rem;
    color: var(--color-ink);
    font-size: clamp(2rem, 4vw, 2.75rem);
    text-align: center;
}

.pilots {
    padding-top: 4rem;
}

.pilots__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pilot-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1.25rem;
    color: var(--color-white);
    text-align: center;
}

.pilot-card--teal {
    background: var(--color-teal);
}

.pilot-card--gold {
    background: var(--color-gold);
}

.pilot-card--purple {
    background: var(--color-purple);
}

.pilot-card--blue {
    background: var(--color-blue);
}

.pilot-card__title {
    margin: 1rem 0 auto;
    color: var(--color-white);
    font-size: 1.25rem;
}

.pilot-card__place {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.25rem 0 0;
}

.pilot-card__place img {
    width: 24px;
    height: 24px;
}

.news {
    padding-top: 2rem;
    text-align: center;
}

.news__text {
    margin: 0 0 1.5rem;
}

.news__soon {
    margin: 0;
    color: var(--color-ink);
}

/* Newsletter page */

.subscribe {
    min-height: 100vh;
    padding-block: 4rem;
    background: var(--color-mist);
    color: var(--color-navy);
}

.subscribe__inner {
    max-width: 680px;
}

.subscribe__title {
    margin-bottom: 2rem;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    text-align: center;
}

.subscribe__form {
    padding: 2rem;
    border-radius: 6px;
    background: var(--color-white);
    box-shadow: 0 6px 20px rgb(24 58 96 / 12%);
}

.subscribe__form label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 700;
}

.subscribe__form input[type="text"],
.subscribe__form input[type="email"] {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 2px solid #c8c8c8;
    border-radius: 3px;
    font: inherit;
}

.subscribe__consent {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.subscribe__consent label {
    font-weight: 400;
    font-size: 0.9rem;
}

.subscribe__consent input {
    flex: none;
    width: 1.4rem;
    height: 1.4rem;
    margin-top: 0.15rem;
}

.subscribe__notice-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-block: 1.5rem;
}

.subscribe__shield {
    flex: none;
    width: 65px;
    height: 65px;
}

.subscribe__shield img {
    display: block;
    width: 100%;
    height: 100%;
}

.subscribe__notice {
    margin: 0;
    color: #555;
    font-size: 0.75rem;
}

.subscribe__notice a {
    color: inherit;
}

/* Inner pages */

.page-banner {
    display: flex;
    align-items: center;
    min-height: clamp(380px, 36vw, 560px);
    padding: 9rem 0 3rem;
    background: var(--color-navy) center / cover no-repeat;
    color: var(--color-white);
}

.page-banner__title {
    margin: 0;
    color: var(--color-white);
    font-size: clamp(2.25rem, 5vw, 4rem);
}

.about-heading {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
}

.about-intro {
    padding-block: 4rem 2rem;
}

.about-intro__title {
    margin-bottom: 2rem;
    color: var(--color-ink);
    font-size: clamp(1.5rem, 3vw, 2rem);
    text-align: center;
}

.about-intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
}

.about-intro__logo {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.about-why {
    padding-block: 2rem;
}

.about-why__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.about-why__list li {
    padding: 1.5rem 1rem;
    border-radius: 6px;
    background: var(--color-gold);
    color: var(--color-white);
    font-size: 1.15rem;
    font-weight: 700;
    text-align: center;
}

.about-objectives {
    padding-block: 2rem 4rem;
}

.objectives {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.objective {
    overflow: hidden;
    border-radius: 10px;
    background: var(--color-grey);
}

.objective__head {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    color: var(--color-white);
}

.objective__number {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

.objective--teal .objective__head {
    background: var(--color-teal);
}

.objective--gold .objective__head {
    background: var(--color-gold);
}

.objective--purple .objective__head {
    background: var(--color-purple);
}

.objective--blue .objective__head {
    background: var(--color-blue);
}

.objective__body {
    padding: 1.25rem;
}

.objective__title {
    color: var(--color-navy);
    font-size: 1.15rem;
}

.objective__body p {
    margin: 0;
}

.btn--navy {
    background: var(--color-navy);
}

.btn--navy:hover,
.btn--navy:focus-visible {
    background: var(--color-blue);
}

.page-banner--overlay {
    position: relative;
}

.page-banner--overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / calc(var(--banner-overlay, 0.5) * 100%));
}

.page-banner--overlay .container {
    position: relative;
}

/* Consortium */

.consortium-intro {
    padding-block: 4rem 2rem;
    color: var(--color-navy);
}

.consortium-intro__title {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
}

.consortium-intro__photo {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 1;
    margin-top: 2rem;
    object-fit: cover;
}

.consortium-partners {
    padding-block: 2rem 4rem;
}

.consortium-partners__title,
.consortium-partners__subtitle {
    color: #000;
    text-align: center;
}

.partners {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1.5rem 1rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.partners__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 90px;
    padding: 0.25rem;
    border: 0;
    background: none;
    cursor: pointer;
}

.partners__logo img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

.partner-dialog {
    width: min(100% - 2rem, 1000px);
    max-height: 90vh;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: var(--color-mist);
    color: var(--color-navy);
    overflow: auto;
}

.partner-dialog::backdrop {
    background: rgb(0 0 0 / 60%);
}

.partner-dialog__body {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
    gap: 2rem;
    align-items: center;
    padding: 2rem;
}

.partner-dialog__close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    border: 0;
    background: none;
    color: var(--color-navy);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

.partner-dialog__logo img {
    display: block;
    width: 100%;
    height: auto;
}

.partner-dialog__title {
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-arrow);
    font-size: 1.35rem;
}

.partner-dialog h3 {
    margin: 1rem 0 0.25rem;
    font-size: 1.05rem;
}

.partner-dialog p {
    margin: 0.25rem 0;
}

.partner-dialog__links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.partner-dialog__links a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-blue);
    font-weight: 700;
    text-decoration: none;
}

.partner-dialog__links img {
    width: 32px;
    height: 32px;
}

/* Circular Transition Hubs */

.cth {
    background: var(--color-paper);
}

.cth__section {
    padding-block: 2.5rem;
}

.cth__section:first-child {
    padding-top: 4rem;
}

.cth__heading {
    color: var(--color-navy);
    font-size: clamp(1.75rem, 3.5vw, 2.4rem);
    font-weight: 800;
}

.hub-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hub-action {
    padding: 1.5rem;
    border-radius: 10px;
    background: var(--color-sky);
    color: #000;
}

.hub-action__head {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}

.hub-action__head img {
    flex: none;
    width: 72px;
    height: 72px;
}

.hub-action__title {
    margin: 0;
    color: var(--color-navy);
    font-size: 1.4rem;
}

.hub-action__subtitle {
    margin: 0.25rem 0 0;
    color: var(--color-navy);
    font-weight: 700;
    line-height: 1.3;
}

.hub-action > p {
    margin: 0;
}

.cth__map {
    display: block;
    width: min(100%, 760px);
    height: auto;
    margin: 2rem auto 0;
}

.cth-platform {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
    padding: 2.5rem;
    border-radius: 16px;
    background: var(--color-sky);
}

.cth-platform__image {
    width: 100%;
    height: auto;
}

/* Advisory Board */

.advisory-intro {
    padding-block: 3rem 1rem;
}

.advisory-members {
    padding-block: 1rem 4rem;
}

.members {
    display: grid;
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.member {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 2rem;
    padding: 1.5rem;
    background: var(--color-grey);
}

.member__photo {
    width: 200px;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.member__name {
    margin: 0 0 0.75rem;
    color: var(--color-navy);
    font-size: 1.5rem;
}

.member__name a {
    color: inherit;
}

@media (max-width: 1000px) {
    .partners {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .partner-dialog__body,
    .cth-platform {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 600px) {
    .partners {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hub-actions,
    .member {
        grid-template-columns: 1fr;
    }

    .member__photo {
        width: min(100%, 200px);
    }
}

@media (max-width: 900px) {
    .about-intro__grid {
        grid-template-columns: 1fr;
    }

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

    .stats__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

@media (max-width: 520px) {
    .stats__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pilots__list,
    .objectives,
    .about-why__list {
        grid-template-columns: 1fr;
    }
}

/* Pilots */

.pilot {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 560px;
    padding-block: 4rem;
    background: var(--color-navy) center / cover no-repeat;
    color: var(--color-white);
}

.pilot::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 60%);
}

.pilot .container {
    position: relative;
}

.pilot__body {
    max-width: 640px;
}

.pilot__title {
    margin-bottom: 0.75rem;
    color: var(--color-white);
    font-size: clamp(1.75rem, 3.5vw, 2.6rem);
    font-weight: 800;
}

.pilot__country {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
}

.pilot__tagline {
    margin: 0.25rem 0 1.25rem;
    font-size: 1.3rem;
    font-weight: 300;
}

/* Tools */

.tool-intro {
    padding-block: 4rem 2rem;
}

.tool-intro__title {
    color: var(--color-navy);
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 800;
}

.tool-intro__question {
    color: var(--color-blue);
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
}

.tool-supports {
    padding-block: 2rem 4rem;
}

.tool-supports__title {
    color: var(--color-navy);
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
}

.tool-supports__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.tool-support img {
    width: 140px;
    height: auto;
    margin-bottom: 1rem;
}

.tool-support__title {
    color: var(--color-blue);
    font-size: 1.4rem;
    font-weight: 800;
}

.platform-intro {
    padding-block: 3rem;
    background: var(--color-grey);
}

.platform-intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
}

.platform-intro__grid img {
    width: 100%;
    height: auto;
}

.platform-intro__title,
.platform-pilots__title {
    color: var(--color-navy);
    font-size: clamp(1.75rem, 3.5vw, 2.6rem);
    font-weight: 800;
}

.platform-pilots {
    padding-block: 4rem 2rem;
}

.platform-pilots__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.platform-pilot {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-radius: 10px;
    background: var(--color-grey);
    color: var(--color-navy);
}

.platform-pilot__title {
    display: block;
    font-size: 1.5rem;
}

.platform-pilot img {
    flex: none;
    width: 100px;
    height: auto;
}

.platform-steps {
    padding-block: 3rem 4rem;
}

.platform-steps__list {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.platform-step {
    flex: 1;
    max-width: 260px;
}

.platform-step img {
    width: 160px;
    height: auto;
}

.platform-step__title {
    color: var(--color-navy);
    font-size: 1.5rem;
    font-weight: 800;
}

.platform-steps__arrow {
    flex: none;
    color: var(--color-arrow);
}

/* Outputs */

.item-page {
    padding-block: 3rem 5rem;
}

@media (max-width: 900px) {
    .tool-supports__list,
    .platform-intro__grid,
    .platform-pilots__list {
        grid-template-columns: 1fr;
    }

    .platform-steps__list {
        flex-direction: column;
    }

    .platform-steps__arrow svg {
        transform: rotate(90deg);
    }
}

.site-footer__eu {
    display: block;
    width: 240px;
    height: auto;
    margin-block: 1.25rem;
}

.page-banner--tool .page-banner__title {
    max-width: 7em;
}

/* Media, Contact and Privacy Policy */

.btn--purple {
    background: var(--color-purple);
}

.btn--purple:hover,
.btn--purple:focus-visible {
    background: var(--color-navy);
}

.comm-kit {
    padding-block: 3rem 5rem;
}

.comm-kit__title,
.newsletter-page__title,
.legal__title {
    color: #000;
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
}

.comm-kit__title {
    text-align: center;
}

.comm-kit__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    margin: 2.5rem 0 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.comm-kit__item {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    justify-content: space-between;
}

.comm-kit__item img {
    width: min(100%, 320px);
    height: auto;
}

.newsletter-page {
    padding-block: 4rem 5rem;
}

.newsletter-page p {
    max-width: 52rem;
    font-size: 1.25rem;
}

.newsletter-page__form {
    display: flex;
    max-width: 52rem;
    margin-top: 2rem;
    box-shadow: 0 4px 14px rgb(0 0 0 / 12%);
    border-radius: 6px;
}

.newsletter-page__form input {
    flex: 1;
    min-width: 0;
    padding: 1.1rem 1.25rem;
    border: 0;
    border-radius: 6px 0 0 6px;
    font: inherit;
}

.newsletter-page__form .btn {
    padding-inline: 2.5rem;
    border-radius: 0 6px 6px 0;
    letter-spacing: 0.02em;
}

.contact {
    padding-block: 4rem 5rem;
}

.contact__inner {
    max-width: 52rem;
}

.contact__title {
    color: var(--color-navy);
    font-size: clamp(1.75rem, 3.5vw, 2.4rem);
    font-weight: 800;
}

.contact__form label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 700;
}

.contact__form input,
.contact__form textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 2px solid #c8c8c8;
    border-radius: 3px;
    font: inherit;
}

.legal {
    padding-block: 3rem 5rem;
}

.legal--item {
    padding-bottom: 2rem;
}

.item-end {
    padding-block: 0 4rem;
}

.legal__inner {
    max-width: 62rem;
}

.legal h2 {
    margin-top: 2.5rem;
    color: var(--color-navy);
}

.legal h3 {
    margin-top: 1.75rem;
    color: var(--color-navy);
}

@media (max-width: 900px) {
    .comm-kit__list {
        grid-template-columns: 1fr;
    }

    .newsletter-page__form {
        flex-direction: column;
        box-shadow: none;
    }

    .newsletter-page__form input,
    .newsletter-page__form .btn {
        border-radius: 6px;
    }
}


.item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0 0 0.5rem;
    color: var(--color-purple);
    font-size: 0.875rem;
    font-weight: 700;
}

/* Like GOBEYOND: the picture is small, on the left, and the text runs beside it */
.item__hero {
    float: left;
    max-width: min(420px, 100%);
    height: auto;
    margin: 0.25rem 1.5rem 1rem 0;
    border-radius: 2px;
}

.item-intro::after {
    content: "";
    display: block;
    clear: both;
}

.item__back a {
    color: var(--color-blue);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.item__back a:hover,
.item__back a:focus-visible {
    color: var(--color-navy);
}

.item__button {
    clear: both;
    margin-top: 2rem;
    text-align: center;
}

@media (max-width: 600px) {
    .item__hero {
        float: none;
        display: block;
        margin-right: 0;
    }
}


/* Extra sections added in the admin: the cards adapt to however many were added */

.extra-section {
    padding-block: 3rem;
}

.extra-section__text {
    max-width: 52rem;
    margin: 0 auto 2rem;
    text-align: center;
}

.extra-text .container > * {
    max-width: 62rem;
}

.extra-section .pilots__list,
.extra-section .objectives,
.extra-section .tool-supports__list {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.extra-section .pilot-card__text {
    margin: 1rem 0 0;
}

.extra-section .about-heading {
    text-align: center;
}

.extra-text .about-heading {
    text-align: left;
}

.extra-section__empty {
    padding: 2rem;
    border: 2px dashed var(--color-sky);
    color: var(--color-navy);
    text-align: center;
}

.subscribe__mailchimp {
    display: block;
    width: 137px;
    margin: 1.5rem auto 0;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    background: var(--color-white);
}

.subscribe__mailchimp img {
    display: block;
    width: 100%;
    height: auto;
}

/* News cards (homepage and news page) */

.news .news-cards,
.news-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem 1.5rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.news-card {
    min-width: 0;
}

.news-card__link {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 2px;
}

.news-card__image {
    position: relative;
    display: block;
    aspect-ratio: 7 / 4;
    background:
        radial-gradient(circle at 82% 18%, rgba(42, 157, 143, 0.55), transparent 42%),
        radial-gradient(circle at 12% 88%, rgba(108, 77, 140, 0.6), transparent 46%),
        linear-gradient(135deg, var(--color-navy), var(--color-blue));
}

.news-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s ease-out;
}

/* Inset frame that thickens, and a dark veil with a plus sign, as on the GOBEYOND cards */
.news-card__link::before,
.news-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 3px;
    pointer-events: none;
}

.news-card__link::before {
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.15);
    transition: box-shadow 0.2s ease-out, background-color 0.2s ease-out;
}

.news-card__link::after {
    content: "+";
    display: grid;
    place-items: center;
    color: var(--color-white);
    font-size: 2rem;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

.news-card:hover .news-card__link::before,
.news-card:focus-within .news-card__link::before {
    background-color: rgba(35, 35, 35, 0.5);
    box-shadow: inset 0 0 0 5px var(--color-blue);
}

.news-card:hover .news-card__link::after,
.news-card:focus-within .news-card__link::after {
    opacity: 1;
}

.news-card:hover .news-card__image img {
    opacity: 0.8;
}

/* The label sits half outside the picture and slides in on hover */
.news-card__readon {
    position: absolute;
    bottom: 1rem;
    left: -0.625rem;
    z-index: 2;
    padding: 0.6875rem 0.875rem;
    background: var(--color-blue);
    border-radius: 2px;
    color: var(--color-white);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    transition: all 0.2s ease-out;
}

.news-card:hover .news-card__readon,
.news-card:focus-within .news-card__readon {
    left: 1rem;
    background: var(--color-white);
    color: var(--color-blue);
}

.news-card__date {
    display: block;
    margin-top: 0.75rem;
    color: #7d7d7d;
    font-size: 0.6875rem;
    font-style: italic;
}

.news-card__title {
    margin: 0.625rem 0 0;
    color: var(--color-navy);
    font-size: 1rem;
    font-style: italic;
    line-height: 1.4;
}

.news-card__title a {
    color: inherit;
    text-decoration: none;
}

.news-card__title a:hover,
.news-card__title a:focus-visible {
    color: var(--color-blue);
}

@media (max-width: 1000px) {
    .news .news-cards,
    .news-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .news .news-cards,
    .news-cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Homepage carousel: three cards in a row, arrows at the top right like GOBEYOND, swipe on touch */

.news-carousel {
    position: relative;
}

.news-carousel__controls {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.news-carousel__arrow {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    padding: 0;
    border: 1px solid var(--color-sky);
    border-radius: 50%;
    background: transparent;
    color: var(--color-blue);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease-out, background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out;
}

.news-carousel__arrow:hover,
.news-carousel__arrow:focus-visible {
    border-color: var(--color-blue);
    background: var(--color-blue);
    color: var(--color-white);
    opacity: 1;
}

.news-carousel__arrow svg {
    width: 1rem;
    height: 1rem;
}

.news .news-cards--carousel {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.news-cards--carousel::-webkit-scrollbar {
    display: none;
}

.news-cards--carousel .news-card {
    flex: 0 0 calc((100% - 3rem) / 3);
    scroll-snap-align: start;
}

@media (max-width: 1000px) {
    .news-cards--carousel .news-card {
        flex-basis: calc((100% - 1.5rem) / 2);
    }
}

@media (max-width: 600px) {
    .news-cards--carousel .news-card {
        flex-basis: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .news .news-cards--carousel {
        scroll-behavior: auto;
    }
}

/* Page loader on every page load, like GOBEYOND: white screen with a pulsing ring */

.page-loader {
    display: none;
}

.has-motion .page-loader {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.has-motion.is-loaded .page-loader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-loader__pulse {
    width: 42px;
    height: 42px;
    border: 2px solid var(--color-blue);
    border-radius: 30px;
    opacity: 0;
    animation: loader-pulse 1s ease-out infinite;
}

@keyframes loader-pulse {
    0% {
        opacity: 0;
        transform: scale(0.1);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scale(1.2);
    }
}

/* Fade in as it enters the screen, 1 second, one after the other */
.has-motion [data-reveal] {
    opacity: 0;
    transition: opacity 1s ease;
}

.has-motion [data-reveal].is-visible {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .page-loader {
        display: none !important;
    }

    .has-motion [data-reveal] {
        opacity: 1;
        transition: none;
    }

    .news-card__readon,
    .news-card__link::before,
    .news-card__link::after,
    .news-card__image img {
        transition: none;
    }
}

/* List pages (events, publications, deliverables, webinars, videos, press releases) */

.list-heading {
    margin: 3rem 0 1.5rem;
    color: var(--color-navy);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    text-align: center;
}

.event-cards,
.rows,
.video-grid {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Events: picture cards */
.event-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem 1.5rem;
}

@media (max-width: 1000px) {
    .event-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .event-cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

.event-card__link {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: inherit;
    text-decoration: none;
}

.event-card__image {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--color-navy), var(--color-blue));
}

.event-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.event-card__link:hover .event-card__image img,
.event-card__link:focus-visible .event-card__image img {
    transform: scale(1.04);
}

.event-card__date {
    margin-top: 0.75rem;
    color: var(--color-purple);
    font-weight: 700;
}

.event-card__title {
    color: var(--color-navy);
    font-size: 1.125rem;
    font-weight: 700;
}

.event-card__place {
    color: #5b6670;
    font-size: 0.9375rem;
}

/* Publications, deliverables and press releases: one row each */
.row-item {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-block: 1.75rem;
}

.row-item + .row-item {
    border-top: 1px solid var(--color-mist);
}

.row-item__image {
    flex: 0 0 min(18rem, 30%);
}

.row-item__image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
}

.row-item__body {
    flex: 1;
    min-width: 0;
}

.row-item__reference {
    margin: 0 0 1.5rem;
    font-style: italic;
}

.row-item--deliverable .row-item__reference {
    margin: 0;
    font-style: normal;
}

.row-item__date {
    margin: 0.25rem 0 0;
    color: #5b6670;
    font-size: 0.9375rem;
}

.row-item--press .row-item__image img {
    border-radius: 24px;
}

.row-item__title {
    margin: 0 0 0.25rem;
    color: var(--color-ink);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
}

.row-item__subtitle {
    margin: 0 0 1.5rem;
    color: var(--color-navy);
    font-weight: 700;
}

/* The slanted outline button of GOBEYOND */
.skew-button {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    border: 2px solid var(--color-blue);
    color: var(--color-blue);
    font-weight: 700;
    text-decoration: none;
    transform: skewX(-10deg);
    transition: background-color 0.2s ease-out, color 0.2s ease-out;
}

.skew-button span {
    display: block;
    transform: skewX(10deg);
}

.skew-button:hover,
.skew-button:focus-visible {
    background: var(--color-blue);
    color: var(--color-white);
}

/* Webinars: text and recording side by side, alternating */
.webinar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 3rem;
    padding-block: 2rem;
}

.webinar:nth-child(even) .webinar__media {
    order: -1;
}

.webinar__title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
}

.webinar__title a {
    color: var(--color-navy);
    text-decoration: none;
}

.webinar__date {
    margin: 0 0 1.5rem;
    font-size: 1.125rem;
}

.webinar__media {
    overflow: hidden;
    border-radius: 16px;
}

.webinar__media iframe,
.webinar__media video,
.webinar__media img {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
}

/* Videos: grid of three */
.video-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem 1.5rem;
}

.video-card__media {
    overflow: hidden;
    border-radius: 6px;
}

.video-card__media iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}

.video-card__title {
    margin: 0.75rem 0 0;
    color: var(--color-navy);
    font-size: 1rem;
}

@media (max-width: 900px) {
    .video-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .webinar {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    .webinar:nth-child(even) .webinar__media {
        order: 0;
    }

    .row-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .row-item__image {
        flex-basis: auto;
        width: min(18rem, 100%);
    }
}

@media (max-width: 600px) {
    .video-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .event-card__image img,
    .skew-button {
        transition: none;
    }
}

/* The boxes of a section: light grey on a white section, and a slightly darker (or lighter, on a very dark section) version
   of the color the editor picked, worked out in sections.php, so they stand out and the text inside stays readable */

.extra-section {
    --box-bg: var(--color-grey);
    --box-border: rgba(0, 0, 0, 0.08);
}

.extra-section--tinted {
    --box-border: rgba(0, 0, 0, 0.16);
}

.extra-section--dark.extra-section--tinted {
    --box-border: rgba(255, 255, 255, 0.35);
}

/* Sections with a background color picked by the editor: light text when the color is dark */

.extra-section--dark,
.extra-section--dark h2,
.extra-section--dark h3,
.extra-section--dark p,
.extra-section--dark .section__title,
.extra-section--dark .about-heading,
.extra-section--dark .tool-supports__title,
.extra-section--dark .tool-support__title,
.extra-section--dark .platform-intro__title {
    color: var(--color-white);
}

.extra-section--dark a:not(.btn):not(.outline-button) {
    color: inherit;
}

/* Text with key numbers in boxes */

.stats-section {
    padding-block: 3rem;
}

.stats-section__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
}

.stat-boxes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stat-box {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem 1.5rem;
    background: var(--box-bg);
    border: 1px solid var(--box-border);
    border-radius: 4px;
}

.stat-box__label {
    font-size: 1.0625rem;
}

.stat-box__value {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

/* Photos with a title and a text */

.photo-section,
.box-section,
.banner-section {
    padding-block: 3rem;
}

.photo-list,
.box-list {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem 1.5rem;
    justify-content: center;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.photo-item {
    flex: 0 0 calc((100% - 3rem) / 3);
    text-align: center;
}

/* A soft frame around each photo, with rounded corners */
.photo-item__frame {
    display: block;
    margin-bottom: 1.25rem;
    padding: 0.875rem;
    background: var(--box-bg);
    border: 1px solid var(--box-border);
    border-radius: 24px;
}

.photo-item__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 14px;
}

.photo-item__title {
    margin: 0 0 0.25rem;
    font-size: 1.125rem;
}

.photo-item__subtitle {
    margin: 0 0 0.5rem;
    opacity: 0.8;
}

/* Boxes with a button */

.box-item {
    display: flex;
    flex: 0 0 calc((100% - 3rem) / 3);
    flex-direction: column;
    gap: 1.25rem;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 1.5rem;
    background: var(--box-bg);
    border: 1px solid var(--box-border);
    border-radius: 4px;
    text-align: center;
}

.box-item__title {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.5;
}

.outline-button {
    display: inline-block;
    padding: 0.6rem 1.25rem;
    border: 2px solid currentColor;
    border-radius: 2px;
    color: inherit;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease-out, color 0.2s ease-out;
}

.outline-button:hover,
.outline-button:focus-visible {
    background: var(--color-blue);
    border-color: var(--color-blue);
    color: var(--color-white);
}

/* Highlight box with a button */

.banner-box {
    position: relative;
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: space-between;
    padding: 2.5rem;
    background: var(--box-bg);
    border: 1px solid var(--box-border);
    border-radius: 12px;
}

.banner-box::after {
    content: "";
    position: absolute;
    bottom: -1.25rem;
    left: 3rem;
    border-top: 1.25rem solid var(--box-bg);
    border-right: 1.25rem solid transparent;
}

.banner-box__title {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
}

.banner-box__text p {
    margin: 0;
}

@media (max-width: 900px) {
    .stats-section__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }

    .photo-item,
    .box-item {
        flex-basis: calc((100% - 1.5rem) / 2);
    }

    .banner-box {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 600px) {
    .stat-boxes {
        grid-template-columns: minmax(0, 1fr);
    }

    .photo-item,
    .box-item {
        flex-basis: 100%;
    }
}

/* More section kinds: accent words, closing text, second button, shapes of photos */

.accent {
    color: var(--color-blue);
}

.extra-section--dark .accent {
    color: var(--color-sky);
}

.extra-section__footer {
    max-width: 52rem;
    margin: 2rem auto 0;
    text-align: center;
}

.btn--outline {
    background: transparent;
    border: 2px solid var(--color-blue);
    color: var(--color-blue);
}

.btn--outline:hover,
.btn--outline:focus-visible {
    background: var(--color-blue);
    color: var(--color-white);
}

.extra-section--dark .btn--outline {
    border-color: var(--color-white);
    color: var(--color-white);
}

.photo-list--round .photo-item__image {
    aspect-ratio: 1;
    border-radius: 50%;
}

.photo-list--plain .photo-item__image {
    border-radius: 14px;
}

.photo-list--round .photo-item__frame,
.photo-list--plain .photo-item__frame {
    padding: 0;
    background: none;
    border: 0;
}

/* One big sentence on a band */

.statement-section {
    padding-block: 3.5rem;
    text-align: center;
}

.statement-section__text {
    max-width: 56rem;
    margin: 0 auto;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.35;
}

/* Timeline */

.timeline-section,
.zigzag-section,
.icon-strip,
.logo-section,
.download-section,
.video-section,
.quote-section,
.legend-section,
.gallery-text {
    padding-block: 3rem;
}

.timeline {
    position: relative;
    margin: 2.5rem 0 0;
    padding: 0;
    list-style: none;
}

.timeline__number {
    color: var(--color-blue);
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
}

.extra-section--dark .timeline__number {
    color: var(--color-sky);
}

.timeline__date {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.timeline__title {
    margin: 0 0 0.35rem;
    font-size: 1.25rem;
}

.timeline--zigzag::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: rgba(127, 127, 127, 0.35);
}

.timeline--zigzag .timeline__step {
    position: relative;
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    width: 50%;
    padding: 0 3rem 2.5rem 0;
}

.timeline--zigzag .timeline__step:nth-child(even) {
    flex-direction: row-reverse;
    margin-left: 50%;
    padding: 0 0 2.5rem 3rem;
    text-align: right;
}

.timeline--zigzag .timeline__step::after {
    content: "";
    position: absolute;
    top: 0.9rem;
    right: -0.45rem;
    width: 0.9rem;
    height: 0.9rem;
    background: var(--color-blue);
    border-radius: 50%;
}

.timeline--zigzag .timeline__step:nth-child(even)::after {
    right: auto;
    left: -0.45rem;
}

.timeline--horizontal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1.5rem;
}

.timeline--horizontal .timeline__step {
    padding-top: 1.25rem;
    border-top: 2px solid rgba(127, 127, 127, 0.35);
}

.timeline--horizontal .timeline__number {
    display: block;
    margin-bottom: 0.5rem;
}

/* Boxes one after the other, joined by a line, with a round picture on a corner */

.zigzag {
    position: relative;
    max-width: 52rem;
    margin: 2.5rem auto 0;
    padding: 0;
    list-style: none;
}

.zigzag__item {
    position: relative;
    width: calc(100% - 4rem);
    margin-bottom: 3rem;
}

.zigzag__item:nth-child(even) {
    margin-left: 4rem;
}

.zigzag__box {
    position: relative;
    padding: 1.75rem 6rem 1.75rem 1.75rem;
    background: var(--box-bg);
    border: 1px solid var(--box-border);
    border-radius: 16px;
}

/* The line that joins a box to the next one, in the middle of the section */
.zigzag__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 100%;
    left: calc(50% + 2rem);
    width: 2px;
    height: 3rem;
    background: rgba(127, 127, 127, 0.5);
}

.zigzag__item:nth-child(even):not(:last-child)::after {
    left: calc(50% - 2rem);
}

.zigzag__item:nth-child(even) .zigzag__box {
    padding: 1.75rem 1.75rem 1.75rem 6rem;
}

.zigzag__title {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.zigzag__image {
    z-index: 1;
    position: absolute;
    top: -1.25rem;
    right: -1.5rem;
    width: 7rem;
    height: 7rem;
    border: 4px solid var(--color-white);
    border-radius: 50%;
    object-fit: cover;
}

.zigzag__item:nth-child(even) .zigzag__image {
    right: auto;
    left: -1.5rem;
}

/* Icons in a row on a band */

.icon-strip__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.icon-strip__item {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    font-weight: 700;
}

.icon-strip__item img {
    width: 5rem;
    height: 5rem;
    object-fit: contain;
}

/* Logos */

.logo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
    align-items: center;
    justify-content: center;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.logo-grid__item {
    display: flex;
    flex: 0 0 calc((100% - 10rem) / 6);
    justify-content: center;
}

.logo-grid__item img {
    max-width: 100%;
    max-height: 4.5rem;
    object-fit: contain;
}

/* Downloads */

.download-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem 1.5rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.download-item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: flex-end;
}

.download-item__image {
    max-width: 100%;
    max-height: 12rem;
    object-fit: contain;
}

.download-item__title {
    margin: 0;
    font-size: 1.125rem;
}

/* Videos */

.section-videos {
    display: grid;
    gap: 2rem 1.5rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.section-videos--grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.section-videos--single {
    max-width: 48rem;
    margin-inline: auto;
}

.section-video__media {
    overflow: hidden;
    border-radius: 6px;
}

.section-video__media iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}

.section-video__title {
    margin: 0.75rem 0 0;
    font-weight: 700;
}

/* Quote */

.quote-section__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 3rem;
    align-items: center;
}

.quote {
    margin: 0;
}

.quote blockquote {
    margin: 0 0 1.25rem;
    font-size: 1.25rem;
    font-style: italic;
    line-height: 1.5;
}

.quote__author {
    display: flex;
    gap: 1rem;
    align-items: center;
    font-weight: 700;
}

.quote__portrait {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    object-fit: cover;
}

/* Lists of places with a colored dot */

.legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 2rem;
    margin: 2rem 0 0;
    padding: 2rem;
    list-style: none;
    background: var(--box-bg);
    border: 1px solid var(--box-border);
    border-radius: 8px;
}

.legend__title {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    margin: 0 0 0.75rem;
    font-size: 1.125rem;
}

.legend__dot {
    flex: none;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
}

.legend__places {
    margin: 0;
    padding: 0;
    font-weight: 700;
    list-style: none;
}

.legend__places li + li {
    margin-top: 0.35rem;
}

/* Text next to a small group of photos */

.gallery-text .about-heading {
    text-align: left;
}

.gallery-text__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
    align-items: center;
}

.gallery-text__photos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gallery-text__photos img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    object-fit: cover;
}

@media (max-width: 900px) {
    .timeline--zigzag::before {
        left: 0.5rem;
    }

    .timeline--zigzag .timeline__step,
    .timeline--zigzag .timeline__step:nth-child(even) {
        flex-direction: row;
        width: 100%;
        margin-left: 0;
        padding: 0 0 2rem 2rem;
        text-align: left;
    }

    .timeline--zigzag .timeline__step::after,
    .timeline--zigzag .timeline__step:nth-child(even)::after {
        right: auto;
        left: 0;
    }

    .zigzag__item:not(:last-child)::after,
    .zigzag__item:nth-child(even):not(:last-child)::after {
        left: 2.5rem;
    }

    .zigzag__item,
    .zigzag__item:nth-child(even) {
        width: 100%;
        margin-left: 0;
    }

    .zigzag__box,
    .zigzag__item:nth-child(even) .zigzag__box {
        padding: 5rem 1.5rem 1.5rem;
    }

    .zigzag__image,
    .zigzag__item:nth-child(even) .zigzag__image {
        top: -1rem;
        right: auto;
        left: 1rem;
    }

    .logo-grid__item {
        flex-basis: calc((100% - 4rem) / 3);
    }

    .download-list,
    .section-videos--grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quote-section__grid,
    .gallery-text__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }
}

@media (max-width: 600px) {
    .logo-grid__item {
        flex-basis: calc((100% - 2rem) / 2);
    }

    .download-list,
    .section-videos--grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Cards that are grey on the original pages follow the section color inside the extra sections, so their text is always readable */

.extra-section .objective,
.extra-section .member {
    background: var(--box-bg);
    border: 1px solid var(--box-border);
}

.extra-section--dark .member__role {
    color: var(--color-sky);
}

/* Back to top button */

.to-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 90;
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-blue);
    box-shadow: 0 4px 14px rgba(24, 58, 96, 0.35);
    color: var(--color-white);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(1rem);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.35s, background-color 0.25s ease;
}

.to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s, background-color 0.25s ease;
}

.to-top:hover,
.to-top:focus-visible {
    background: var(--color-arrow);
}

.to-top svg {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.25s ease;
}

.to-top:hover svg,
.to-top:focus-visible svg {
    transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
    .to-top,
    .to-top.is-visible,
    .to-top svg {
        transition: none;
    }
}