/* Finance Loop: the Frankfurt skyline world. Tokens, chrome, homepage, lightbox. */

@font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo-latin-wdth-normal-Wa7z_Iw.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
}

:root {
    --blue: #213f9a;
    --blue-deep: #172d73;
    --cyan: #12c3ce;
    --teal: #63c7c7;
    --navy: #0d1433;
    --white: #ffffff;
    --paper: #f2f5fa;
    --sky: #e6f1fa;
    --rule: #d5dcea;
    --ink: #0d1433;
    --ink-soft: #3d4868;

    --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --condensed: 68%;
    --semi: 88%;

    --step--1: 1rem;
    --step-0: 1.25rem;
    --step-1: 1.375rem;
    --step-2: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
    --step-3: clamp(2.25rem, 1.3rem + 3.6vw, 4.25rem);
    --step-4: clamp(3rem, 1.2rem + 6vw, 6.75rem);

    --gutter: clamp(1rem, 0.4rem + 2.6vw, 3rem);
    --max: 90rem;
    --space-m: 1.5rem;
    --space-l: clamp(2.5rem, 1.5rem + 4vw, 5rem);
    --space-xl: clamp(4rem, 2rem + 7vw, 8.5rem);
    --radius: 6px;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --header-h: 76px;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scrollbar-color: var(--blue) var(--paper);
}

body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--step-0);
    line-height: 1.65;
    font-stretch: 100%;
    font-variant-numeric: lining-nums;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

/* Translucent, because in tight headings the next line's highlight covers
   the descenders of the line above; an opaque one cuts them off. */
::selection {
    background: rgba(18, 195, 206, 0.4);
    color: var(--navy);
}

img,
svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

a {
    color: var(--blue);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.2em;
}

a:hover {
    color: var(--navy);
}

/* Links in running text: a solid underline, and on hover a cyan marker
   rises from it behind the word. Buttons, menus and cards carry their own
   classes or sit outside p, dd and text lists. A dark section sets the
   --link-* colors (see .engage). */
:is(main, .site-footer) :where(p, dd, .c-text li, .c-hero-text li) a:not([class]) {
    text-decoration: none;
    background:
        linear-gradient(var(--link-line, var(--blue)), var(--link-line, var(--blue))) 0 100% / 100% 2px no-repeat,
        linear-gradient(var(--link-mark, rgba(18, 195, 206, 0.22)), var(--link-mark, rgba(18, 195, 206, 0.22))) 0 100% / 100% 0 no-repeat;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding-inline: 0.06em;
    margin-inline: -0.06em;
    transition: background-size 280ms var(--ease-out), color 200ms;
}

:is(main, .site-footer) :where(p, dd, .c-text li, .c-hero-text li) a:not([class]):hover {
    color: var(--link-hover, var(--navy));
    background-size: 100% 2px, 100% 100%;
}

@media (prefers-reduced-motion: reduce) {
    :is(main, .site-footer) :where(p, dd, .c-text li, .c-hero-text li) a:not([class]) {
        transition: none;
    }
}

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

h1,
h2,
h3 {
    margin: 0;
    font-weight: 850;
    font-stretch: var(--condensed);
    line-height: 1.06;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

h2 {
    font-size: var(--step-3);
}

h3 {
    font-size: var(--step-2);
    line-height: 1.02;
}

p {
    margin: 0;
    max-width: 68ch;
    text-wrap: pretty;
}

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

.skip-link {
    position: absolute;
    left: var(--gutter);
    top: -4rem;
    z-index: 60;
    padding: 0.75rem 1rem;
    background: var(--navy);
    color: var(--white);
    border-radius: var(--radius);
}

.skip-link:focus {
    top: 0.5rem;
}

.wrap {
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Buttons */

.button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    min-height: 48px;
    padding: 0.7rem 1.35rem;
    border: 2px solid var(--blue);
    border-radius: var(--radius);
    background: var(--blue);
    color: var(--white);
    font: inherit;
    font-weight: 700;
    font-stretch: var(--semi);
    text-decoration: none;
    line-height: 1.1;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: color 260ms var(--ease-out), border-color 260ms var(--ease-out);
}

.button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--navy);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 420ms var(--ease-out);
}

.button:hover {
    color: var(--white);
    border-color: var(--navy);
}

.button:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.button svg {
    width: 1.1em;
    height: 1.1em;
    flex: none;
    transition: transform 320ms var(--ease-out);
}

.button:hover svg {
    transform: translateX(4px);
}

.button--ghost {
    background: transparent;
    color: var(--blue);
}

.button--ghost::before {
    background: var(--blue);
}

.button--ghost:hover {
    border-color: var(--blue);
}

.button--cyan {
    background: var(--cyan);
    border-color: var(--cyan);
    color: var(--navy);
}

.button--cyan::before {
    background: var(--white);
}

.button--cyan:hover {
    border-color: var(--white);
    color: var(--navy);
}

.button--light {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.75);
    color: var(--white);
}

.button--light::before {
    background: var(--white);
}

.button--light:hover {
    border-color: var(--white);
    color: var(--blue);
}

/* The second button on a light background: blue outline, filled on hover. */
.button--outline {
    background: transparent;
    border-color: var(--blue);
    color: var(--blue);
}

.button--outline::before {
    background: var(--blue);
}

.button--outline:hover {
    color: var(--white);
}

.more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    font-weight: 700;
    font-stretch: var(--semi);
    text-decoration: none;
}

.more svg {
    width: 1.2em;
    height: 1.2em;
    transition: transform 320ms var(--ease-out);
}

.more:hover svg {
    transform: translateX(5px);
}

/* Notices */

.notices {
    background: var(--navy);
    color: var(--white);
    font-size: var(--step--1);
}

.notices ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2rem;
    margin: 0;
    list-style: none;
}

.notices a {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 44px;
    color: var(--white);
    text-decoration: none;
}

.notices a:hover span {
    text-decoration: underline;
}

.notices li {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.notices li[hidden] {
    display: none;
}

.notice-close {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    margin-right: -0.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
}

.notice-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--white);
}

.notice-close svg {
    width: 16px;
    height: 16px;
}

.notices strong {
    font-weight: 700;
}

.pulse {
    position: relative;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--cyan);
    flex: none;
}

.pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--cyan);
    animation: pulse 2.2s var(--ease-out) infinite;
}

@keyframes pulse {
    from { transform: scale(1); opacity: 0.8; }
    to { transform: scale(3.2); opacity: 0; }
}

/* Header and mega navigation */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--rule);
}

.header-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: var(--header-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    flex: none;
}

.brand img {
    width: auto;
    height: 40px;
}

.tagline {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-left: 1.1rem;
    border-left: 1px solid var(--rule);
    color: var(--ink-soft);
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
    text-decoration: none;
    flex: none;
}

.tagline:hover {
    color: var(--blue);
}

.site-nav {
    margin-left: auto;
}

.nav-list {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-item {
    display: flex;
    align-items: center;
}

.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--header-h);
    padding: 0 0.15rem 0 0.75rem;
    color: var(--ink);
    font-size: clamp(1.1875rem, 0.6rem + 0.95vw, 1.4375rem);
    font-weight: 650;
    font-stretch: var(--semi);
    text-decoration: none;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 360ms var(--ease-out);
}

.nav-item:hover .nav-link,
.nav-item.is-open .nav-link {
    color: var(--blue);
}

.nav-item:hover .nav-link::after,
.nav-item.is-open .nav-link::after {
    transform: scaleX(1);
}

.nav-trigger {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 44px;
    margin-right: 0.35rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink-soft);
    cursor: pointer;
}

.nav-trigger svg {
    width: 12px;
    height: 12px;
    transition: transform 300ms var(--ease-out);
}

.nav-item.is-open .nav-trigger svg {
    transform: rotate(180deg);
}

.mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 30px 60px -30px rgba(13, 20, 51, 0.35);
    opacity: 0;
    transition: opacity 240ms var(--ease-out);
}

/* The panel fades in and stays fully hit-testable the whole time, so the
   pointer never falls through a half-open panel. */
.nav-item.is-open .mega {
    opacity: 1;
}

.mega-grid {
    transform: translateY(-10px);
    transition: transform 420ms var(--ease-out);
}

.nav-item.is-open .mega-grid {
    transform: none;
}

.is-switching .mega,
.is-switching .mega-grid,
.is-switching .mega-links li,
.is-switching .mega-feature img {
    transition: none;
}

.mega-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 3.5rem);
    padding-block: 2.5rem 3rem;
}

.mega-title {
    display: block;
    color: var(--blue);
    font-size: clamp(2.5rem, 4vw, 4rem);
    font-weight: 850;
    font-stretch: var(--condensed);
    line-height: 1.02;
    text-decoration: none;
}

.mega-title:hover {
    color: var(--blue);
}

.mega-intro p {
    margin-top: 1rem;
    color: var(--ink-soft);
    font-size: var(--step-1);
    line-height: 1.4;
}

.mega-stay,
.mega-cta {
    margin-top: 1.25rem;
}

.mega-links {
    display: grid;
    align-content: start;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mega-links li {
    border-top: 1px solid var(--rule);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 360ms var(--ease-out), transform 460ms var(--ease-out);
    transition-delay: calc(var(--i) * 45ms + 80ms);
}

.nav-item.is-open .mega-links li {
    opacity: 1;
    transform: none;
}

.mega-links a {
    display: grid;
    gap: 0.15rem;
    min-height: 52px;
    padding: 0.8rem 2.5rem 0.8rem 0;
    color: var(--ink);
    text-decoration: none;
    background: linear-gradient(90deg, rgba(18, 195, 206, 0.12), transparent) no-repeat 0 0 / 0 100%;
    transition: background-size 420ms var(--ease-out);
}

.mega-links a > span {
    transition: transform 420ms var(--ease-out);
}

.mega-links a:hover {
    background-size: 100% 100%;
}

.mega-links a:hover > span {
    transform: translateX(0.9rem);
}

.mega-links .t {
    font-size: var(--step-1);
    font-weight: 750;
    font-stretch: var(--semi);
    line-height: 1.15;
}

.mega-links .d {
    color: var(--ink-soft);
    font-size: 1.125rem;
    line-height: 1.35;
}

.mega-feature {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    color: var(--navy);
    text-decoration: none;
}

.mega-feature .ph {
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    aspect-ratio: 4 / 3;
    background: var(--paper);
}

.mega-feature img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.08);
    transition: transform 900ms var(--ease-out);
}

.mega-feature.is-contain img {
    object-fit: contain;
    padding: 1.5rem;
}

.nav-item.is-open .mega-feature img {
    transform: scale(1);
}

.mega-feature:hover img {
    transform: scale(1.04);
}

.mega-feature .t {
    font-size: var(--step-1);
    font-weight: 800;
    font-stretch: var(--semi);
    line-height: 1.15;
}

.mega-feature:hover .t {
    color: var(--blue);
    text-decoration: underline;
}

/* Blog menu: the five newest posts, photo over title and teaser. */
.mega-grid--posts {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
}

.mega-posts {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(1rem, 1.6vw, 1.75rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mega-posts li {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 360ms var(--ease-out), transform 460ms var(--ease-out);
    transition-delay: calc(var(--i) * 55ms + 80ms);
}

.nav-item.is-open .mega-posts li {
    opacity: 1;
    transform: none;
}

.mega-posts a {
    display: grid;
    align-content: start;
    gap: 0.6rem;
    color: var(--ink);
    text-decoration: none;
}

.mega-posts .ph {
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    aspect-ratio: 4 / 3;
    background: var(--paper);
}

.mega-posts img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 900ms var(--ease-out);
}

.mega-posts a:hover img {
    transform: scale(1.05);
}

.mega-posts .t {
    color: var(--blue);
    font-size: 1.1875rem;
    font-weight: 800;
    font-stretch: var(--semi);
    line-height: 1.15;
    text-wrap: balance;
}

.mega-posts a:hover .t {
    text-decoration: underline;
    text-decoration-color: var(--cyan);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
}

.mega-posts .d {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.4;
}

.mega-posts .mega-posts-all {
    display: none;
}

@media (max-width: 80rem) {
    .mega-posts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .mega-posts li:nth-child(5) {
        display: none;
    }
}

.search-open {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: 50%;
    background: var(--white);
    color: var(--ink);
    cursor: pointer;
    transition: background-color 260ms var(--ease-out), color 260ms var(--ease-out), border-color 260ms var(--ease-out);
}

.search-open:hover {
    border-color: var(--blue);
    background: var(--blue);
    color: var(--white);
}

.search-open svg {
    width: 20px;
    height: 20px;
}

/* The cart link next to the search button, shown only with items in the
   cart. The bubble shows the item count. */
.cart-open {
    position: relative;
}

.cart-count {
    position: absolute;
    top: -4px;
    right: -6px;
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 2px solid var(--white);
    border-radius: 10px;
    background: var(--cyan);
    color: var(--navy);
    font-size: 0.6875rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Search panel: a full-width sheet that opens below the header bar, which
   stays visible. search_controller sets --search-top to the header's bottom. */

.search-panel {
    width: 100%;
    max-width: none;
    height: auto;
    max-height: calc(100dvh - var(--search-top, 0px));
    margin: var(--search-top, 0px) 0 0;
    bottom: auto;
    padding: 0;
    border: 0;
    background: var(--white);
    color: var(--ink);
    box-shadow: 0 40px 80px -40px rgba(13, 20, 51, 0.5);
    overflow-y: auto;
}

.search-panel[open] {
    animation: search-in 360ms var(--ease-out);
}

.search-panel::backdrop {
    top: var(--search-top, 0px);
    background: rgba(13, 20, 51, 0.45);
    backdrop-filter: blur(3px);
}

@keyframes search-in {
    from { transform: translateY(-24px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

.has-modal {
    overflow: hidden;
}

.search-inner {
    padding-block: 1.5rem 2.5rem;
}

.search-top {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.search-form {
    position: relative;
    flex: 1;
    min-width: 0;
}

.search-form svg {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    width: 24px;
    height: 24px;
    color: var(--blue);
    transform: translateY(-50%);
    pointer-events: none;
}

.search-form input {
    width: 100%;
    min-height: 64px;
    padding: 0 1.25rem 0 3.5rem;
    border: 2px solid var(--rule);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
}

.search-form input:focus {
    border-color: var(--blue);
    background: var(--white);
    outline: none;
}

.search-close {
    display: grid;
    place-items: center;
    flex: none;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
}

.search-close:hover {
    background: var(--navy);
    color: var(--white);
}

.search-close svg {
    width: 22px;
    height: 22px;
}

.search-body {
    margin-top: 1.75rem;
}

.search-results {
    margin: 0;
    padding: 0;
    list-style: none;
}

.search-results:empty {
    display: none;
}

.search-results li + li {
    border-top: 1px solid var(--rule);
}

.search-results a {
    display: grid;
    gap: 0.25rem;
    padding: 0.9rem 0.75rem;
    border-radius: var(--radius);
    color: var(--ink);
    text-decoration: none;
}

.search-results a:hover,
.search-results a:focus-visible {
    background: var(--paper);
}

.search-results strong {
    color: var(--navy);
    font-size: var(--step-1);
    font-weight: 750;
    font-stretch: var(--semi);
    line-height: 1.2;
}

.search-results span {
    color: var(--ink-soft);
    font-size: 1.0625rem;
    line-height: 1.45;
}

.search-results .search-all a {
    color: var(--blue);
    font-weight: 700;
}

.search-empty {
    padding: 0 0 2rem;
    color: var(--ink-soft);
    font-size: var(--step-0);
}

.search-quick[hidden] {
    display: none;
}

.search-quick {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 3rem;
}

.search-quick h2 {
    color: var(--blue);
    font-size: var(--step-2);
}

.search-quick ul {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.search-quick li {
    border-top: 1px solid var(--rule);
}

.search-quick a {
    display: flex;
    align-items: center;
    min-height: 52px;
    color: var(--ink);
    font-size: var(--step-1);
    text-decoration: none;
}

.search-quick a:hover {
    color: var(--blue);
}

@media (max-width: 40rem) {
    .search-quick {
        grid-template-columns: minmax(0, 1fr);
    }

    .search-inner {
        padding-block: 1rem 2rem;
    }
}

.menu-toggle {
    display: none;
}

@media (max-width: 72rem) {
    .tagline {
        display: none;
    }
}

/* The cart icon takes 64px of the row, so the slogan gives way earlier. */
@media (min-width: 64.01rem) and (max-width: 77.5rem) {
    .header-row:has(.cart-open) .tagline {
        display: none;
    }
}

@media (max-width: 64rem) {
    :root {
        --header-h: 64px;
    }

    .header-row {
        flex-wrap: wrap;
        gap: 0.5rem 0.75rem;
    }

    /* The first line keeps the full header height when the open menu wraps
       below it, so logo, tagline and buttons stay where they were. */
    .header-row > .brand {
        min-height: var(--header-h);
    }

    .brand img {
        height: 34px;
    }

    .tagline {
        display: inline-flex;
        padding-left: 0.75rem;
        font-size: 0.8125rem;
    }

    .search-open {
        margin-left: auto;
    }

    .search-open + .cart-open {
        margin-left: 0;
    }

    .menu-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        min-height: 44px;
        padding: 0.5rem 0.9rem;
        border: 2px solid var(--navy);
        border-radius: var(--radius);
        background: var(--white);
        color: var(--navy);
        font: inherit;
        font-weight: 700;
        font-stretch: var(--semi);
        cursor: pointer;
    }

    .menu-toggle .bars {
        display: grid;
        gap: 4px;
    }

    .menu-toggle .bars span {
        display: block;
        width: 18px;
        height: 2px;
        background: currentColor;
        transition: transform 260ms var(--ease-out), opacity 200ms;
    }

    .menu-toggle[aria-expanded="true"] .bars span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .menu-toggle[aria-expanded="true"] .bars span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle[aria-expanded="true"] .bars span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .site-nav {
        display: none;
        order: 10;
        flex-basis: 100%;
        max-height: calc(100svh - var(--header-h) - 1rem);
        margin: 0 calc(-1 * var(--gutter));
        padding: 0 var(--gutter) 1.5rem;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .site-nav.is-open {
        display: block;
    }

    .nav-list {
        display: block;
    }

    .nav-item {
        flex-wrap: wrap;
        border-top: 1px solid var(--rule);
    }

    .nav-link {
        flex: 1;
        min-height: 56px;
        padding-left: 0;
        font-size: 1.5rem;
        font-weight: 850;
        font-stretch: var(--condensed);
    }

    .nav-link::after {
        display: none;
    }

    .nav-trigger {
        width: 56px;
        height: 56px;
        margin: 0;
    }

    .nav-trigger svg {
        width: 16px;
        height: 16px;
    }

    .mega {
        position: static;
        flex-basis: 100%;
        box-shadow: none;
        border: 0;
    }

    .mega-intro,
    .mega-feature {
        display: none;
    }

    .mega-grid {
        display: block;
        padding: 0 0 1rem;
    }

    .mega-links a {
        min-height: 48px;
        padding-block: 0.6rem;
    }

    /* In the phone menu each post is a row: small photo, then the title. */
    .mega-posts {
        display: block;
    }

    .mega-posts li,
    .mega-posts li:nth-child(5) {
        display: block;
        border-top: 1px solid var(--rule);
    }

    .mega-posts a {
        grid-template-columns: 5rem minmax(0, 1fr);
        align-items: center;
        gap: 0.9rem;
        padding-block: 0.7rem;
    }

    .mega-posts .d {
        display: none;
    }

    .mega-posts .t {
        font-size: 1.0625rem;
    }

    .mega-posts .mega-posts-all {
        display: block;
    }

    .mega-posts-all a {
        display: flex;
        min-height: 48px;
        padding-block: 0.6rem;
    }
}

/* Reveal on scroll */

.js .reveal {
    clip-path: inset(0 0 100% 0);
    transform: translateY(0.4em);
    transition: clip-path 900ms var(--ease-out), transform 900ms var(--ease-out);
}

.js .reveal.is-in {
    clip-path: none;
    transform: none;
}

@media print {
    .js .reveal {
        clip-path: none;
        transform: none;
    }
}

/* Join bar */

.join {
    display: grid;
    gap: 0.6rem;
    max-width: 34rem;
}

.join p {
    color: var(--ink-soft);
    font-size: 1.125rem;
}

.join-field {
    display: flex;
    padding: 4px;
    border: 1px solid var(--rule);
    border-radius: calc(var(--radius) + 4px);
    background: var(--white);
    transition: border-color 260ms, box-shadow 260ms;
}

.join-field:focus-within {
    border-color: var(--cyan);
    box-shadow: 0 0 0 4px rgba(18, 195, 206, 0.18);
}

.join input {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    padding: 0 0.9rem;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
}

.join input:focus {
    outline: none;
}

.join .button {
    flex: none;
}

/* Hero: the Frankfurt skyline draws itself */

.hero {
    position: relative;
    background:
        radial-gradient(60rem 30rem at 78% 30%, rgba(18, 195, 206, 0.14), transparent 70%),
        linear-gradient(180deg, var(--sky) 0%, #f5f9fd 60%, var(--white) 100%);
    overflow: clip;
}

.hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 34rem);
    align-items: center;
    min-height: clamp(32rem, calc(100svh - var(--header-h) - 44px - 6.5rem), 46rem);
    padding-block: clamp(2rem, 4vw, 3.5rem);
}

.hero-copy {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 1.1rem;
    padding-bottom: clamp(1.5rem, 2vw, 2rem);
}

.hero h1 {
    color: var(--blue);
    font-size: clamp(3rem, 1.8rem + 3.4vw, 4.75rem);
    line-height: 1.04;
    letter-spacing: -0.015em;
}

.hero-accent {
    color: var(--cyan);
    font-style: normal;
}

.reveal-lines > span {
    display: block;
    overflow: clip;
    overflow-clip-margin: 0.1em;
    padding-bottom: 0.2em;
    margin-bottom: -0.2em;
}

.reveal-lines > span > span {
    display: block;
    animation: line-up 1100ms var(--ease-out) both;
}

.reveal-lines > span:nth-child(2) > span {
    animation-delay: 110ms;
}

.reveal-lines > span:nth-child(3) > span {
    animation-delay: 220ms;
}

@keyframes line-up {
    from { transform: translateY(105%); }
    to { transform: none; }
}

.hero-text {
    display: grid;
    gap: 0.75rem;
    gap: 0.6rem;
    max-width: 36rem;
    color: var(--ink-soft);
    font-size: var(--step-0);
    line-height: 1.6;
    animation: fade-up 900ms 380ms var(--ease-out) both;
}

.hero-copy > .actions,
.hero-copy > .join {
    animation: fade-up 900ms 520ms var(--ease-out) both;
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

.skyline {
    position: absolute;
    right: 0;
    bottom: clamp(1.5rem, 5vh, 3.5rem);
    z-index: 1;
    width: min(60%, 64rem);
    margin: 0;
    pointer-events: none;
}

.skyline-place {
    position: absolute;
    right: 7%;
    bottom: 4%;
    font-size: clamp(1.125rem, 0.85rem + 0.7vw, 1.5rem);
    font-weight: 800;
    font-stretch: 75%;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--blue);
    -webkit-text-stroke: 0.3em #fff;
    paint-order: stroke fill;
    text-shadow: 0 0 0.4em #fff, 0 0 0.8em #fff;
    animation: fade-up 900ms 1400ms var(--ease-out) both;
}

.skyline-art {
    width: 100%;
    height: auto;
    overflow: visible;
}

.skyline-paths path {
    stroke: var(--cyan);
    stroke-width: 14;
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    fill-opacity: 0;
    animation:
        sky-draw 1600ms var(--ease-in-out) forwards,
        sky-fill 900ms var(--ease-out) forwards;
    animation-delay:
        calc(var(--x) * 1500ms + 200ms),
        calc(var(--x) * 1500ms + 1100ms);
}

@keyframes sky-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes sky-fill {
    to { fill-opacity: 1; stroke-width: 0; }
}

/* The partner river under the skyline */

.river {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: 0.9rem 0 0.7rem var(--gutter);
    border-top: 2px solid var(--navy);
    background:
        linear-gradient(90deg, rgba(18, 195, 206, 0.12), rgba(33, 63, 154, 0.06)),
        var(--white);
}

.river-title {
    flex: none;
    white-space: nowrap;
    color: var(--blue);
    font-size: 1.75rem;
    font-weight: 800;
    font-stretch: var(--semi);
    line-height: 1.15;
    letter-spacing: 0;
}

.river-track {
    display: flex;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.river-list {
    display: flex;
    align-items: center;
    gap: clamp(2rem, 4vw, 3.75rem);
    flex: none;
    margin: 0;
    padding: 0.75rem clamp(1rem, 2vw, 1.875rem);
    list-style: none;
    animation: river 46s linear infinite;
}

.river:hover .river-list,
.river:focus-within .river-list {
    animation-play-state: paused;
}

@keyframes river {
    to { transform: translateX(-100%); }
}

.river-list a,
.river-list span {
    display: grid;
    place-items: center;
    min-height: 56px;
}

.river-list img,
.logo-field img {
    width: auto;
    height: 40px;
    max-width: 150px;
    object-fit: contain;
    transition: transform 360ms var(--ease-out), filter 360ms;
}

.river-list a:hover img,
.logo-field a:hover img {
    transform: translateY(-3px) scale(1.06);
}

/* Intro under the partner band */

.intro {
    padding-block: clamp(3rem, 6vw, 5rem) 0;
}

.intro-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem clamp(2rem, 6vw, 6rem);
}

.intro p {
    max-width: 36rem;
    color: var(--ink);
    font-size: var(--step-2);
    line-height: 1.45;
}

@media (max-width: 64rem) {
    .intro-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Section heads */

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.section-head h2 {
    color: var(--blue);
}

/* Community services */

.services {
    position: relative;
    padding-block: var(--space-xl);
}

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

.service-grid a {
    display: grid;
    align-content: start;
    gap: 0.9rem;
    color: var(--navy);
    text-decoration: none;
}

.service-photo {
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    aspect-ratio: 4 / 3;
}

.service-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 900ms var(--ease-out);
}

.service-grid a:hover .service-photo img {
    transform: scale(1.06);
}

.service-grid h3 {
    margin-top: 0.35rem;
    color: var(--blue);
    font-size: 1.75rem;
    line-height: 1.05;
}

.service-grid h3::after {
    content: "";
    display: block;
    width: 2.5rem;
    height: 3px;
    margin-top: 0.7rem;
    background: var(--cyan);
    transition: width 500ms var(--ease-out);
}

.service-grid a:hover h3::after {
    width: 100%;
}

.service-grid p {
    color: var(--ink-soft);
    line-height: 1.6;
}

@media (max-width: 64rem) {
    .service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 40rem) {
    .service-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Combining Finance and Tech: the towers */

.combine {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: var(--navy);
    color: rgba(255, 255, 255, 0.86);
}

.combine-media {
    position: relative;
    min-height: 34rem;
    overflow: hidden;
}

.combine-photo {
    position: absolute;
    inset: 0;
    display: block;
    cursor: zoom-in;
}

.combine-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
}

.combine-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 55%, var(--navy));
}

.combine-text {
    display: grid;
    align-content: center;
    gap: 1.5rem;
    padding: var(--space-xl) var(--gutter);
    max-width: 42rem;
    font-size: var(--step-1);
    line-height: 1.6;
}

.combine h2 {
    margin-bottom: 0.5rem;
    color: var(--white);
}

.combine a:not(.button) {
    color: var(--cyan);
}

.combine .actions {
    margin-top: 0.75rem;
}

/* Blog */

.blog {
    padding-block: var(--space-xl);
    background: var(--paper);
}

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

.post-list article {
    position: relative;
    display: grid;
    align-content: start;
    gap: 0.75rem;
}

/* The title link covers the whole card, so a click on the text opens the post too. */
.post-list h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
}

.post-list h3 a:focus-visible {
    outline: none;
}

.post-list h3 a:focus-visible::after {
    outline: 3px solid var(--cyan);
    outline-offset: 6px;
}

.post-photo {
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    aspect-ratio: 4 / 3;
}

.post-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 900ms var(--ease-out);
}

.post-list article:hover .post-photo img {
    transform: scale(1.07);
}

.post-list h3 {
    margin-top: 0.4rem;
    font-size: 1.75rem;
    line-height: 1.02;
}

.post-list h3 a {
    color: var(--blue);
    text-decoration: none;
    background: linear-gradient(var(--cyan), var(--cyan)) no-repeat 0 100% / 0 2px;
    transition: background-size 500ms var(--ease-out);
}

.post-list article:hover h3 a {
    background-size: 100% 2px;
}

.post-list p {
    color: var(--ink-soft);
    font-size: 1.125rem;
    line-height: 1.6;
}

.read-more {
    justify-self: start;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-stretch: var(--semi);
}

/* Masterclass */

.masterclass {
    padding-block: var(--space-xl);
}

.masterclass-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 6rem);
}

.masterclass-photo {
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    aspect-ratio: 4 / 3;
    cursor: zoom-in;
}

.masterclass-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 900ms var(--ease-out);
}

.masterclass-photo:hover img {
    transform: scale(1.04);
}

.masterclass-text {
    display: grid;
    gap: 1.5rem;
    max-width: 38rem;
    font-size: var(--step-1);
    line-height: 1.6;
}

.masterclass h2 {
    color: var(--blue);
    margin-bottom: 0.5rem;
}

.masterclass .actions {
    margin-top: 0.75rem;
}

/* Engage */

.engage {
    position: relative;
    display: grid;
    min-height: clamp(36rem, 90svh, 52rem);
    align-items: center;
    color: rgba(255, 255, 255, 0.9);
    overflow: hidden;
    isolation: isolate;
}

.engage-photo {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    cursor: zoom-in;
}

.engage-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.engage-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(13, 20, 51, 0.95) 0%, rgba(13, 20, 51, 0.82) 45%, rgba(23, 45, 115, 0.35) 100%);
}

.engage-text {
    display: grid;
    gap: 1.5rem;
    padding-block: var(--space-xl);
    pointer-events: none;
    font-size: var(--step-1);
    line-height: 1.6;
}

.engage-text > * {
    max-width: 40rem;
    pointer-events: auto;
}

.engage h2 {
    color: var(--white);
    margin-bottom: 0.5rem;
}

/* On navy, links are white with a cyan underline; the hover marker is
   solid cyan under navy text. */
.engage {
    --link-line: var(--cyan);
    --link-mark: var(--cyan);
    --link-hover: var(--navy);
}

.engage a:not(.button) {
    color: var(--white);
}

.engage .actions {
    margin-top: 0.75rem;
}

/* Scroll-driven motion where the browser supports it */

@supports (animation-timeline: view()) {
    .combine-photo img,
    .engage-photo img {
        animation: drift linear both;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
    }

    .masterclass-photo img {
        animation: drift-soft linear both;
        animation-timeline: view();
    }

    @media (min-width: 64.0625rem) {
        .skyline {
            animation: sink linear both;
            animation-timeline: scroll(root);
            animation-range: 0 90vh;
        }
    }
}

@keyframes drift {
    from { transform: scale(1.22) translateY(-4%); }
    to { transform: scale(1.02) translateY(4%); }
}

@keyframes drift-soft {
    from { transform: scale(1.12) translateY(-3%); }
    to { transform: scale(1.02) translateY(3%); }
}

@keyframes sink {
    to { transform: translateY(12%) scale(1.04); }
}

/* Footer */

.happen {
    position: relative;
    padding-block: clamp(2rem, 4vw, 3rem);
    background: linear-gradient(110deg, var(--blue) 0%, var(--blue-deep) 60%, #1b62b5 100%);
    color: rgba(255, 255, 255, 0.9);
    overflow: hidden;
}

.happen-grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 4rem);
}

.happen-photo {
    margin: 0;
}

.happen-photo a {
    display: block;
    width: clamp(7rem, 11vw, 10rem);
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(18, 195, 206, 0.35);
    cursor: zoom-in;
}

.happen-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms var(--ease-out);
}

.happen-photo a:hover img {
    transform: scale(1.06);
}

.happen-text {
    display: grid;
    gap: 1rem;
}

.happen h2 a {
    color: var(--white);
    text-decoration: none;
}

.happen h2 a:hover {
    text-decoration: underline;
}

.alliance {
    padding-block: 0 clamp(2rem, 4vw, 3rem);
}

/* A hairline across the page starts the footer, so the about line
   does not float under a white page section (operator, 2026-09-26). */
.alliance-grid {
    border-top: 1px solid var(--rule);
    padding-top: clamp(2rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 5vw, 5rem);
}

.alliance-logo img {
    width: 100%;
    max-width: 26rem;
}

.alliance-grid p {
    margin-bottom: 1rem;
    color: var(--ink-soft);
    font-size: var(--step-1);
    line-height: 1.45;
}

.supporters {
    padding-block: var(--space-l);
    background: var(--paper);
}

.supporters h2 {
    color: var(--blue);
    font-size: var(--step-2);
    text-wrap: balance;
}

.logo-field {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    align-items: center;
    gap: 2.25rem 2.5rem;
    margin: 2rem 0;
    padding: 0;
    list-style: none;
}

.logo-field a,
.logo-field span {
    display: grid;
    place-items: center start;
    min-height: 56px;
}

.logo-field img {
    height: 44px;
    max-width: 100%;
}

.supporters-note {
    color: var(--ink-soft);
}

.footer-base {
    padding-block: 2rem 1rem;
}

.footer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem 2rem;
}

.footer-id {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.footer-id .tagline {
    display: inline-flex;
}

.footer-mid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1.5rem;
}

.footer-mid .social {
    gap: 0.75rem;
}

.footer-mid .social a {
    width: 56px;
    height: 56px;
}

.footer-mid .social svg {
    width: 28px;
    height: 28px;
}

.footer-brand img {
    width: auto;
    height: 40px;
}

.button--small {
    min-height: 44px;
    padding: 0.5rem 1rem;
    font-size: 1rem;
}

.footer-join {
    justify-self: end;
}

.footer-join .join {
    display: grid;
    justify-items: end;
    gap: 0.4rem;
    margin: 0;
}

.footer-join .join p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 1rem;
}

.footer-join .join-field {
    width: min(26rem, 100%);
}

/* Login, join and password reset show only the link line: same space
   above and below it. */
.footer-base:has(.wrap > .footer-links:first-child) {
    padding-block: 1.25rem;
}

.wrap > .footer-links:first-child {
    margin-top: 0;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0.875rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.75rem;
}

/* The space between the links is padding, so each link's hit area is
   44px tall and reaches its neighbor. */
.footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.625rem;
    color: #6f778c;
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--ink-soft);
    text-decoration: underline;
}

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

.social a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--blue);
    transition: background-color 260ms, color 260ms, transform 360ms var(--ease-out);
}

.social a:hover {
    background: var(--blue);
    color: var(--white);
    transform: translateY(-3px);
}

.social svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 64rem) {
    .footer-row {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
    }

    .footer-mid {
        justify-content: flex-start;
    }

    .footer-join {
        justify-self: start;
    }

    .footer-join .join {
        justify-items: start;
    }
}

@media (max-width: 48rem) {
    .footer-join {
        width: 100%;
    }

    .footer-mid .social a {
        width: 48px;
        height: 48px;
    }

    .footer-mid .social svg {
        width: 24px;
        height: 24px;
    }

    .footer-join .join {
        justify-items: start;
    }

    .footer-join .join-field {
        width: 100%;
    }
}

/* Links to other websites carry an arrow-out icon after the text. Image
   links (logos, photos) and the social icons stay without it. */
a[href^="http"]:not([href*="finance-loop.net"]):not(:has(img)):not(:is(.social, .stay-social) a)::after {
    content: "";
    display: inline-block;
    flex: none;
    width: 0.72em;
    height: 0.72em;
    margin-left: 0.15em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 10 14'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 10 14'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") no-repeat center / contain;
    vertical-align: -0.02em;
}

/* In a button the flex gap already separates the icon; pull it in to half
   the gap. The selector repeats the one above to outweigh it. */
a.button[href^="http"]:not([href*="finance-loop.net"]):not(:has(img)):not(:is(.social, .stay-social) a)::after {
    margin-left: -0.3em;
}

/* Lightbox */

.lightbox {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(8, 12, 32, 0.96);
    color: var(--white);
    overflow: hidden;
}

.lightbox::backdrop {
    background: transparent;
}

.lightbox[open] {
    animation: lb-in 320ms var(--ease-out);
}

@keyframes lb-in {
    from { background: rgba(8, 12, 32, 0); }
}

.lb-bar {
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem clamp(0.75rem, 2vw, 1.5rem);
}

.lb-count {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-stretch: var(--semi);
    opacity: 0.85;
}

.lb-tools {
    display: flex;
    gap: 0.25rem;
}

.lb-tools button,
.lb-nav {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--white);
    cursor: pointer;
    transition: background-color 200ms;
}

.lb-tools button:hover,
.lb-nav:hover {
    background: rgba(255, 255, 255, 0.14);
}

.lb-tools button.is-done {
    color: var(--cyan);
}

.lb-tools svg,
.lb-nav svg {
    width: 22px;
    height: 22px;
}

.lb-stage {
    position: absolute;
    inset: 4rem clamp(0.5rem, 5vw, 5rem) 4.5rem;
    display: grid;
    place-items: center;
    margin: 0;
    overflow: hidden;
}

.lb-stage img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 3px;
    cursor: zoom-in;
    transition: transform 420ms var(--ease-out);
    touch-action: pan-y;
    user-select: none;
    -webkit-user-drag: none;
}

.lb-stage img.is-moving {
    transition: none;
}

.lightbox.is-zoomed .lb-stage img {
    cursor: grab;
    touch-action: none;
}

.lightbox.is-zoomed .lb-stage img:active {
    cursor: grabbing;
}

.lb-stage figcaption {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 1.25rem;
    padding-inline: 4rem;
    text-align: center;
    font-weight: 600;
    font-stretch: var(--semi);
}

.lb-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 56px;
    height: 56px;
    margin-top: -28px;
    background: rgba(255, 255, 255, 0.08);
}

.lb-prev {
    left: clamp(0.25rem, 1.5vw, 1.25rem);
}

.lb-next {
    right: clamp(0.25rem, 1.5vw, 1.25rem);
}

.lb-prev svg {
    transform: scaleX(-1);
}

.lightbox.is-single .lb-nav {
    display: none;
}

[data-lightbox] {
    cursor: zoom-in;
}

/* Small screens */

@media (max-width: 64rem) {
    .hero-grid {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        padding-top: 1.5rem;
    }

    .skyline {
        position: relative;
        right: auto;
        bottom: auto;
        order: -1;
        width: 150%;
        margin: 0 0 1rem -18%;
    }

    .skyline-place {
        right: 20%;
    }

    .hero-copy {
        padding-bottom: 2.5rem;
    }

    .river {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        padding: 1.25rem 0 0.5rem;
    }

    /* On a phone the label is a small centered line above the logos
       (operator, 2026-09-26). */
    .river-title {
        max-width: none;
        padding-inline: var(--gutter);
        text-align: center;
        font-size: 0.875rem;
        font-weight: 700;
    }

    .combine,
    .masterclass-grid,
    .alliance-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .combine-media {
        min-height: 22rem;
    }

    .combine-photo::after {
        background: linear-gradient(180deg, transparent 55%, var(--navy));
    }

    .combine-text {
        padding-top: 2.5rem;
    }

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

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


}

@media (max-width: 40rem) {
    .post-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .join-field {
        flex-wrap: wrap;
    }

    .join input {
        flex-basis: 100%;
    }

    .join .button {
        flex: 1;
        justify-content: center;
    }

    .notices ul {
        flex-direction: column;
        gap: 0;
        padding-block: 0.3rem;
    }

    .notices li {
        min-width: 0;
        max-width: 100%;
    }

    /* One line per notice on phones; a long title ends in an ellipsis and
       the close button sits at the right edge. */
    .notices a {
        display: flex;
        flex: 1;
        min-width: 0;
        max-width: 100%;
        min-height: 36px;
        line-height: 1.3;
    }

    .notices a > span {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .notices .pulse,
    .notices a::after {
        flex-shrink: 0;
    }

    .header-row {
        gap: 0.3rem;
    }

    .brand img {
        height: 25px;
    }

    .tagline {
        padding-left: 0.45rem;
        font-size: 0.69rem;
    }

    .menu-toggle {
        padding: 0 0.6rem;
        gap: 0.4rem;
        font-size: 1rem;
    }

    .menu-toggle .bars span {
        width: 16px;
    }
}

/* Below 370px the slogan gives way, so logo, search and "Menu" stay on one row. */
@media (max-width: 23rem) {
    .header-row .tagline {
        display: none;
    }

    .engage-photo::after {
        background: rgba(13, 20, 51, 0.86);
    }

    .lb-nav {
        top: auto;
        bottom: 0.75rem;
        margin: 0;
    }

    .lb-stage figcaption {
        bottom: 1.6rem;
        padding-inline: 5rem;
        font-size: 1.0625rem;
    }
}

/* With the cart icon the row needs 48px more, so the slogan gives way
   earlier. */
@media (max-width: 27.5rem) {
    .header-row:has(.cart-open) .tagline {
        display: none;
    }
}

/* Page modal: a linked page (the terms) opens in a sheet from the right, so
   the form it belongs to stays in view. On phones it rises from the bottom. */

.modal {
    width: min(42rem, 100vw);
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    background: var(--white);
    color: var(--ink);
    box-shadow: -40px 0 80px -40px rgba(13, 20, 51, 0.5);
    overflow: hidden;
}

.modal::backdrop {
    background: rgba(13, 20, 51, 0.45);
    backdrop-filter: blur(3px);
}

.modal[open] {
    animation: modal-in 360ms var(--ease-out);
}

@keyframes modal-in {
    from { transform: translateX(3rem); opacity: 0; }
}

.modal-sheet {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100%;
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem clamp(1.25rem, 3vw, 2.25rem);
    border-bottom: 1px solid var(--rule);
}

.modal-head {
    position: relative;
}

.modal[aria-busy="true"] .modal-head::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent) 0 0 / 40% 100% no-repeat;
    animation: modal-load 900ms linear infinite;
}

@keyframes modal-load {
    from { background-position: -40% 0; }
    to { background-position: 140% 0; }
}

.modal-head h2 {
    margin: 0;
    color: var(--blue);
    font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
    line-height: 1.06;
}

.modal-close {
    display: grid;
    place-items: center;
    flex: none;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
}

.modal-close:hover {
    background: var(--navy);
    color: var(--white);
}

.modal-close svg {
    width: 20px;
    height: 20px;
}

.modal-body {
    padding: 1.5rem clamp(1.25rem, 3vw, 2.25rem) 2.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    font-size: 1.125rem;
    line-height: 1.65;
}

.modal-body > * + * {
    margin-top: 1.5rem;
}

.modal-body > :first-child,
.modal-body > :first-child > :first-child {
    margin-top: 0;
}

.modal-body .c-hero-text > * + *,
.modal-body .c-text > * + * {
    margin-top: 1em;
}

.modal-body .c-text {
    font-size: inherit;
}

.modal-body h2,
.modal-body h3,
.modal-body h4 {
    margin-top: 1.6em;
    color: var(--blue);
    font-size: var(--step-1);
    line-height: 1.15;
}

.modal-body a {
    color: var(--blue);
    text-underline-offset: 0.18em;
}

.modal-body ul,
.modal-body ol {
    padding-left: 1.3em;
}

.modal-foot {
    padding: 1rem clamp(1.25rem, 3vw, 2.25rem);
    border-top: 1px solid var(--rule);
    font-size: 1rem;
}

.modal-foot a {
    color: var(--blue);
    font-weight: 600;
    text-underline-offset: 0.18em;
}

@media (max-width: 40rem) {
    .modal {
        width: 100vw;
        height: 92dvh;
        margin: auto 0 0;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -40px 80px -40px rgba(13, 20, 51, 0.5);
    }

    .modal[open] {
        animation-name: modal-up;
    }
}

@keyframes modal-up {
    from { transform: translateY(3rem); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }

    .river-list {
        animation: none !important;
    }

    .river-track {
        overflow-x: auto;
    }

    .skyline-paths path {
        stroke-width: 0;
        fill-opacity: 1;
    }

    .combine-photo img,
    .engage-photo img,
    .masterclass-photo img,
    .skyline {
        animation: none !important;
    }
}

/* Cookie consent: a bar fixed to the bottom edge until a choice is made. */

.consent {
    position: fixed;
    inset: auto 0 0;
    z-index: 70;
    border-top: 3px solid var(--cyan);
    background: var(--white);
    box-shadow: 0 -20px 50px -20px rgba(13, 20, 51, 0.35);
    animation: consent-in 480ms var(--ease-out) both;
}

.consent[hidden] {
    display: none;
}

@keyframes consent-in {
    from { transform: translateY(100%); }
    to { transform: none; }
}

.consent-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    padding-block: 1rem;
}

.consent p {
    flex: 1 1 28rem;
    max-width: 60ch;
    color: var(--ink);
    font-size: 1.0625rem;
    line-height: 1.45;
}

.consent p a {
    color: var(--blue);
    font-weight: 700;
}

.consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

@media (max-width: 40rem) {
    .consent-actions {
        width: 100%;
    }

    .consent-actions .button {
        flex: 1;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .consent {
        animation: none;
    }
}

/* Placeholder for an embed that waits for consent. */

.consent-ph {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 1rem;
    min-height: 14rem;
    padding: 2rem 1.5rem;
    border-radius: var(--radius);
    background: var(--navy);
    color: var(--white);
    text-align: center;
}

.c-frame--video .consent-ph {
    min-height: 0;
    aspect-ratio: 16 / 9;
}

.consent-ph p {
    max-width: 40ch;
    font-size: var(--step-0);
}

/* Exit intent: "Let's stay in touch", centered over the page. Navy side
   with the skyline on the left, the signup on the right; on phones the
   navy part sits on top. */
.stay {
    width: min(60rem, calc(100vw - 2rem));
    max-width: none;
    max-height: calc(100dvh - 2rem);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: calc(var(--radius) + 4px);
    background: var(--white);
    color: var(--ink);
    box-shadow: 0 50px 120px -40px rgba(13, 20, 51, 0.7);
    overflow: auto;
    overscroll-behavior: contain;
}

.stay::backdrop {
    background: rgba(13, 20, 51, 0.6);
    backdrop-filter: blur(4px);
}

.stay[open] {
    animation: stay-in 520ms var(--ease-out);
}

@keyframes stay-in {
    from { transform: translateY(1.5rem) scale(0.97); opacity: 0; }
}

.stay-sheet {
    position: relative;
    outline: none;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    min-height: 32rem;
}

.stay-side {
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3.5vw, 3rem);
    background:
        radial-gradient(34rem 24rem at 70% 100%, rgba(18, 195, 206, 0.3), transparent 70%),
        linear-gradient(160deg, var(--navy) 0%, #152463 70%, var(--blue) 130%);
    color: var(--white);
}

.stay-side h2 {
    position: relative;
    z-index: 1;
    max-width: 8ch;
    color: var(--white);
    font-size: clamp(2.75rem, 1.6rem + 3.6vw, 4.5rem);
    font-weight: 850;
    font-stretch: var(--condensed);
    line-height: 0.95;
}

.stay-skyline {
    position: absolute;
    inset: auto -8% 0 -30%;
    aspect-ratio: 2520 / 1280;
    background: var(--cyan);
    opacity: 0.55;
    -webkit-mask: var(--skyline) no-repeat center bottom / 100% auto;
    mask: var(--skyline) no-repeat center bottom / 100% auto;
}

.stay-main {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3.5vw, 3rem);
}

.stay-close {
    position: absolute;
    z-index: 2;
    top: 0.75rem;
    right: 0.75rem;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
}

.stay-close:hover {
    background: var(--paper);
    color: var(--navy);
}

.stay-close svg {
    width: 22px;
    height: 22px;
}

.stay-lead {
    padding-right: 2rem;
    color: var(--blue);
    font-size: var(--step-2);
    font-weight: 800;
    font-stretch: var(--semi);
    line-height: 1.15;
}

.stay-main > p:not([class]) {
    max-width: 40ch;
    color: var(--ink-soft);
    font-size: var(--step-0);
    line-height: 1.55;
}

.stay-form {
    max-width: none;
    margin-top: 0.5rem;
}

.stay-terms {
    margin-top: -0.25rem;
    color: var(--ink-soft);
    font-size: 0.9375rem;
}

.stay-social {
    margin-top: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
}

.stay-social p {
    color: var(--ink-soft);
    font-size: 1.0625rem;
}

.stay-social ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5rem;
    margin: 0.35rem 0 0;
    padding: 0;
    list-style: none;
}

.stay-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--blue);
    font-weight: 700;
    text-decoration: none;
}

.stay-social a:hover {
    color: var(--navy);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.stay-social svg {
    width: 32px;
    height: 32px;
}

/* Keeps the dialog closed for 24 hours; the X only closes it. */
.stay-dismiss {
    align-self: flex-end;
    min-height: 44px;
    margin-top: -0.75rem;
    padding: 0 0.25rem;
    border: 0;
    background: none;
    color: var(--ink-soft);
    font: inherit;
    font-size: 0.9375rem;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

.stay-dismiss:hover {
    color: var(--navy);
}

@media (max-width: 48rem) {
    .stay {
        width: calc(100vw - 1.5rem);
        max-height: calc(100dvh - 1.5rem);
    }

    .stay-sheet {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .stay-side {
        min-height: 10rem;
        padding-bottom: 2rem;
    }

    .stay-side h2 {
        max-width: none;
        padding-right: 2.5rem;
    }

    .stay-skyline {
        inset: auto -45% 0 25%;
        opacity: 0.4;
    }

    .stay-main {
        gap: 0.85rem;
        padding-block: 1.75rem;
    }

    .stay-social ul {
        gap: 0 1.1rem;
    }

    .stay-close {
        z-index: 2;
        color: var(--white);
    }

    .stay-close:hover {
        background: rgba(255, 255, 255, 0.12);
        color: var(--white);
    }

    .stay-lead {
        padding-right: 0;
    }

    .stay .join-field {
        flex-wrap: wrap;
        gap: 4px;
    }

    .stay .join-field .button {
        flex: 1 1 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stay[open] {
        animation: none;
    }
}

/* The three topics on a navy band (about-us). A cyan bar with the IT and
   AI line runs across all three columns, and each topic hangs from it on
   a thin cyan rule (operator, 2026-09-26). */
.c-topics {
    --link-line: var(--cyan);
    --link-mark: var(--cyan);
    --link-hover: var(--navy);
    margin-top: var(--c-gap, var(--space-l));
    padding-block: var(--space-l);
    background: var(--blue);
    color: var(--white);
}

.c-topics .c-title {
    color: var(--white);
}

.c-topics-span {
    margin-top: 1.5rem;
    padding: 0.8rem 1.1rem;
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--cyan);
    color: var(--navy);
    font-size: var(--step-0);
    font-weight: 700;
    line-height: 1.35;
}

/* The global cyan selection vanishes on the cyan bar and turns white text
   navy on the navy band; both get their own. */
.c-topics ::selection {
    background: var(--cyan);
    color: var(--navy);
}

.c-topics-span::selection,
.c-topics-span ::selection {
    background: var(--navy);
    color: var(--white);
}

.c-topics-span a {
    color: var(--navy);
    --link-line: var(--navy);
    --link-mark: rgba(13, 20, 51, 0.15);
}

.c-topics-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border: 2px solid var(--cyan);
    border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    list-style: none;
}

.c-topics-list > li {
    padding: 1.75rem clamp(1.25rem, 2vw, 1.75rem);
}

.c-topics-list > li + li {
    border-left: 2px solid var(--cyan);
}

.c-topics-list h3 {
    color: var(--white);
    font-size: var(--step-2);
    font-stretch: var(--semi);
    line-height: 1.1;
}

.c-topics-list .c-text {
    margin-top: 0.9rem;
    color: rgba(255, 255, 255, 0.92);
    font-size: var(--step-0);
}

.c-topics .c-text a {
    overflow-wrap: normal;
    color: var(--white);
}

@media (max-width: 48rem) {
    .c-topics-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .c-topics-list > li + li {
        border-top: 2px solid var(--cyan);
        border-left: 0;
    }
}