/* 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;
    /* Body text: 20px on phones, 22px from about 1150px up. */
    --step-0: clamp(1.25rem, 1.05rem + 0.45vw, 1.375rem);
    --step-1: clamp(1.375rem, 1.2rem + 0.4vw, 1.5rem);
    --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, .c-plan-items 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, .c-plan-items 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, .c-plan-items 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 */

/* The bar is the cyan of "Finance and Tech" in the home headline. The
   dots are primary blue (operator, 2026-09-28). All text is white
   (operator, 2026-09-29), although white on this cyan is about 2:1. */
.notices {
    background: var(--cyan);
    color: var(--white);
    font-size: var(--step--1);
}

.notices :focus-visible {
    outline-color: var(--white);
}

/* The notices stay on one line in the centered content column, starting
   at the logo edge. When they do not fit, the titles shorten with an ellipsis
   (operator, 2026-09-29: "dürfen nicht umbrechen"). */
.notices ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 0 1.25rem;
    /* margin-block only: the inline auto margins of .wrap center the row. */
    margin-block: 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;
    flex: 0 1 auto;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.notices a {
    min-width: 0;
}

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

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

.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: var(--white);
    cursor: pointer;
}

.notice-close:hover {
    background: rgba(255, 255, 255, 0.2);
    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;
}

.notices .pulse,
.notices .pulse::after {
    background: var(--blue);
}

@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: 52px;
}

.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;
}

/* "About" in the header row, "About Finance Loop" in the phone menu. */
.nav-label-phone {
    display: none;
}

.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: var(--blue);
    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-cta {
    margin-top: 1.25rem;
}

.mega-intro .mega-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.25rem 0 0;
}

.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 language switcher: the same round button as search, with the code of
   the other language. It links to the same page in that language.
   The line box is trimmed to cap height and baseline, and the top padding
   puts that box in the middle of the circle. A grid centers the whole line
   box with its descender, which set the capitals 1.2 px high. */
.lang-switch {
    display: block;
    box-sizing: border-box;
    flex: none;
    width: 44px;
    height: 44px;
    padding-top: calc((42px - 1cap) / 2);
    text-align: center;
    text-box: trim-both cap alphabetic;
    border: 1px solid var(--rule);
    border-radius: 50%;
    background: var(--white);
    color: var(--navy);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background-color 260ms var(--ease-out), color 260ms var(--ease-out), border-color 260ms var(--ease-out);
}

.lang-switch:hover {
    border-color: var(--blue);
    background: var(--blue);
    color: var(--white);
}

.nav-lang {
    display: none;
}

/* 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;
    }

    .lang-switch {
        margin-left: auto;
    }

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

    /* Styled like the round search button next to it. */
    .menu-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        min-height: 44px;
        padding: 0 1rem;
        border: 1px solid var(--rule);
        border-radius: 22px;
        background: var(--white);
        color: var(--ink);
        font: inherit;
        font-weight: 600;
        font-stretch: var(--semi);
        cursor: pointer;
        transition: background-color 260ms var(--ease-out), color 260ms var(--ease-out), border-color 260ms var(--ease-out);
    }

    .menu-toggle:hover {
        border-color: var(--blue);
        background: var(--blue);
        color: var(--white);
    }

    .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);
    }

    /* The panel spans the full screen width, so its scrollbar sits on the
       screen edge; flex-basis adds back the two negative margins. The
       inherited scrollbar-color is reset because it forces the thin system
       bar and switches off the ::-webkit-scrollbar rules below
       (operator, 2026-09-27). */
    .site-nav {
        display: none;
        order: 10;
        flex-basis: calc(100% + 2 * var(--gutter));
        max-height: calc(100svh - var(--header-h) - 1rem - var(--consent-h, 0px));
        margin: 0 calc(-1 * var(--gutter));
        padding: 0 var(--gutter) 1.5rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-color: auto;
    }

    .site-nav::-webkit-scrollbar {
        width: 8px;
    }

    .site-nav::-webkit-scrollbar-track {
        background: var(--paper);
    }

    .site-nav::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background: var(--blue);
    }

    .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;
    }

    /* Title and description of a phone sub item take one line each and
       end in an ellipsis when too long. Blog post titles get two lines
       next to the photo (operator, 2026-09-29). */
    .mega-links a {
        min-height: 48px;
        padding: 0.55rem 0;
    }

    .mega-links a > span {
        min-width: 0;
    }

    .nav-label-wide {
        display: none;
    }

    .nav-label-phone {
        display: inline;
    }

    /* In the phone menu a chevron marks each sub item as a link
       (operator, 2026-09-27); the description lines up with the title. */
    .mega-links .t {
        overflow: hidden;
        font-size: 1.0625rem;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .mega-links .t::before {
        content: "";
        display: inline-block;
        width: 0.5rem;
        height: 0.8rem;
        margin-right: 0.6rem;
        vertical-align: -0.05em;
        background-color: var(--blue);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 2 6 6-6 6'/%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 10 16' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 2 6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
    }

    .mega-links .d {
        overflow: hidden;
        padding-left: 1.1rem;
        font-size: 0.9375rem;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* 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 {
        display: -webkit-box;
        overflow: hidden;
        font-size: 1rem;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .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) minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 4rem);
    align-content: center;
    align-items: end;
    /* Space above and below the copy, a third less than the old centered
       min-height left (operator, 2026-09-27). */
    padding-block: clamp(2rem, 5vw, 5.75rem);
}

.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; }
}

/* The skyline fills the right column and sits vertically centered on the
   text (operator, 2026-09-27). At 38rem it was too small; at 60 % of the
   window it had been too big. */
.skyline {
    position: relative;
    z-index: 1;
    align-self: center;
    justify-self: end;
    width: min(100%, 50rem);
    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; }
}

/* Crypto price band above the homepage hero, in the blue of the old
   site's ticker. Rising and falling changes are pale green and pale red,
   both above 4.5:1 on the blue; the triangle and the sign carry the
   direction for readers who do not see the color. */

.ticker {
    display: flex;
    align-items: stretch;
    background: var(--blue);
    color: var(--white);
    font-size: 0.875rem;
    line-height: 1.2;
}

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

.ticker-list {
    display: flex;
    align-items: center;
    gap: 2.25rem;
    flex: none;
    margin: 0;
    padding: 0.6rem 1.125rem;
    list-style: none;
    animation: river 320s linear infinite;
}

.ticker:hover .ticker-list {
    animation-play-state: paused;
}

.ticker.is-driven .ticker-track {
    cursor: grab;
    touch-action: pan-y;
}

.ticker.is-driven .ticker-list {
    animation: none;
    will-change: transform;
}

.ticker.is-dragging .ticker-track {
    cursor: grabbing;
    user-select: none;
}

.ticker-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* A white disc behind each logo, so black marks (XRP, Stellar) stay
   visible on the blue. */
.ticker-list img {
    width: 22px;
    height: 22px;
    padding: 2px;
    border-radius: 50%;
    background: var(--white);
    object-fit: contain;
}

.ticker-name {
    font-weight: 600;
}

.ticker-name span {
    color: rgba(255, 255, 255, 0.74);
    font-weight: 400;
}

.ticker-change {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
}

.ticker-change svg {
    width: 0.6rem;
    height: 0.6rem;
}

.ticker-change.is-up {
    color: #86e8b1;
}

.ticker-change.is-down {
    color: #ffb1b1;
}

.ticker-change.is-down svg {
    transform: rotate(180deg);
}

.ticker-source {
    display: flex;
    flex: none;
    align-items: center;
    padding: 0 0.25rem 0 0.75rem;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.75rem;
    text-decoration: none;
}

.ticker-source:hover {
    color: var(--white);
    text-decoration: underline;
}

.ticker-close {
    display: grid;
    place-items: center;
    flex: none;
    align-self: center;
    width: 32px;
    height: 32px;
    margin: 0 0.375rem 0 0.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
}

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

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

/* Phones: a lower band with smaller type. It is 36px high, the same as
   the cyan notice bar in its place (operator, 2026-09-29). */
@media (max-width: 40rem) {
    .ticker {
        min-height: 36px;
        font-size: 0.75rem;
    }

    .ticker-list {
        gap: 1.5rem;
        padding-block: 0.35rem;
    }

    .ticker-list li {
        gap: 0.375rem;
    }

    .ticker-list img {
        width: 18px;
        height: 18px;
        padding: 1.5px;
    }

    .ticker-change svg {
        width: 0.5rem;
        height: 0.5rem;
    }

    .ticker-source {
        padding-left: 0.4rem;
        font-size: 0.625rem;
    }

    .ticker-close {
        width: 28px;
        height: 28px;
        margin-right: 0.25rem;
    }

    .ticker-close svg {
        width: 14px;
        height: 14px;
    }
}

/* The partner river under the skyline. It sits between two light gray
   rules, the same 1px line as under the header (operator, 2026-09-27). */

.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: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    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-title a {
    color: inherit;
    text-decoration: none;
}

.river-title a:hover {
    color: var(--navy);
    text-decoration: underline solid var(--blue);
    text-decoration-thickness: 0.08em;
}

/* The phone label names who trusts Finance Loop; the desktop row has
   room only for the short one (operator, 2026-09-29). */
.river-title-long {
    display: none;
}

.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%); }
}

/* With JavaScript the river controller moves the lists, and the band can
   be dragged with the mouse or a finger (operator, 2026-09-26). The CSS
   animation above stays as the fallback without JavaScript. */
.river.is-driven .river-track {
    overflow: hidden;
    cursor: grab;
    touch-action: pan-y;
}

.river.is-driven .river-list {
    animation: none;
    will-change: transform;
}

.river.is-dragging .river-track {
    cursor: grabbing;
    user-select: none;
}

.river.is-dragging .river-list a {
    cursor: grabbing;
}

.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 */

/* Heading and link stay on one line, centered on each other, at every
   width (operator, 2026-09-27: "From Our Blog" and "all blog posts"). */
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    /* Headings sit close to their items: "From Our Blog", "Community
       Services" and every card block (operator, 2026-09-27). */
    margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
}

.section-head :is(h1, h2) {
    min-width: 0;
    color: var(--blue);
}

.section-head .more {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Desktop: the link sits on the baseline of the heading. With centered
   boxes "details" stood visibly above "Services" (operator,
   2026-09-27). */
@media (min-width: 64.01rem) {
    .section-head {
        align-items: baseline;
    }
}

/* 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;
    margin: 0;
    overflow: hidden;
}

/* Photo caption in the bottom left corner. A click on it reaches the
   lightbox link under it. */
.combine-place {
    position: absolute;
    left: var(--gutter);
    bottom: var(--gutter);
    z-index: 1;
    max-width: calc(100% - 2 * var(--gutter));
    font-size: var(--step--1);
    font-weight: 600;
    line-height: 1.3;
    color: var(--white);
    text-shadow: 1px 1px 3px #000;
    pointer-events: none;
}

.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-0);
    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 card_link controller opens the post on a click anywhere in the card,
   and text stays selectable. This layer only draws the keyboard focus ring
   around the whole card. */
.post-list article {
    cursor: pointer;
}

.post-list h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    pointer-events: none;
}

.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;
}

/* Masterclass */

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

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

.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-0);
    line-height: 1.6;
}

/* The heading runs over photo and text, left-aligned (operator, 2026-09-27). */
.masterclass h2 {
    grid-column: 1 / -1;
    color: var(--blue);
    margin: 0;
}

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

/* Engage */

.engage {
    position: relative;
    display: grid;
    /* The operator found the full-screen height too tall (2026-09-27). */
    min-height: clamp(26rem, 60svh, 36rem);
    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-l);
    pointer-events: none;
    font-size: var(--step-0);
    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);
}

/* The featured plan card is primary blue: links as on navy. */
.c-plan.is-featured {
    --link-line: var(--cyan);
    --link-mark: var(--cyan);
    --link-hover: var(--navy);
}

.c-plan.is-featured .c-plan-items a {
    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: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
}

.happen-main {
    display: grid;
    gap: 1rem;
    align-content: center;
}

.happen-head {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2rem);
}

.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 h2 a {
    color: var(--white);
    text-decoration: none;
}

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

.happen-alliance {
    --link-line: var(--cyan);
    --link-mark: var(--cyan);
    --link-hover: var(--navy);
    display: grid;
    gap: 1rem;
    align-content: center;
}

.happen-alliance .alliance-logo {
    justify-self: start;
}

/* All three logos in white on the blue band. At most 2.25rem high; on a
   narrow screen the strip shrinks as a whole instead of being squeezed
   (operator, 2026-09-27). */
.happen-alliance .alliance-logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 2.25rem;
    filter: brightness(0) invert(1);
}

/* On phones the logo strip sits further below the buttons (operator,
   2026-09-27). */
@media (max-width: 64rem) {
    .happen-alliance {
        margin-top: 1.5rem;
    }
}

.happen-alliance p {
    color: rgba(255, 255, 255, 0.9);
    text-wrap: pretty;
}

.happen-alliance p a {
    color: var(--white);
}

/* Text links on a navy or blue band are light cyan and semibold, so they
   stand apart from the white text (operator, 2026-09-26). */
:is(.engage, .happen-alliance, .c-topics-list) :where(p, dd, li) a:not([class]) {
    color: #8ee6ec;
    font-weight: 600;
}

.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%;
}

/* The footer logos are the 4:3 canvases of /about-us/ with the mark in
   the middle, so every logo gets a cell of the same size. Phones show
   three per row (operator, 2026-09-27). */
.supporters .logo-field {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.5rem 2rem;
}

.supporters .logo-field a,
.supporters .logo-field span {
    min-height: 0;
    place-items: center;
}

.supporters .logo-field img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    transition: transform 420ms var(--ease-out);
}

/* The hovered partner logo grows to 118 % with a cyan bar under it
   (operator, 2026-09-27; the old 6 % lift was too weak). The other logos
   keep their color: fading them to gray was rejected the same day. */
.supporters .logo-field a {
    position: relative;
}

.supporters .logo-field a::after {
    content: "";
    position: absolute;
    inset: auto 18% 4% 18%;
    height: 3px;
    background: var(--cyan);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 380ms var(--ease-out);
}

.supporters .logo-field a:is(:hover, :focus-visible) img {
    transform: translateY(-4px) scale(1.18);
}

.supporters .logo-field a:is(:hover, :focus-visible)::after {
    transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
    .supporters .logo-field img,
    .supporters .logo-field a::after {
        transition: none;
    }

    .supporters .logo-field a:is(:hover, :focus-visible) img {
        transform: none;
    }
}

@media (max-width: 64rem) {
    .supporters .logo-field {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* On phones the logos follow closer under the heading (operator,
   2026-09-27). */
@media (max-width: 40rem) {
    .supporters .logo-field {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.25rem 1rem;
        margin-top: 0.75rem;
    }
}

.supporters-note {
    max-width: none;
    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: flex-end;
    gap: 0.75rem 1.5rem;
}

/* Icons close together: 44px hit areas, 4px apart (operator, 2026-09-26). */
.footer-mid .social {
    gap: 0.25rem;
}

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

.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: center;
}

.footer-join .join {
    display: grid;
    justify-items: center;
    text-align: center;
    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;
    }

    /* Stacked, the video call button sits right above the link line;
       2rem keeps them apart (operator, 2026-09-27). */
    .footer-row + .footer-links {
        margin-top: 2rem;
    }

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

    .footer-join .join {
        justify-items: start;
        text-align: left;
    }
}

/* Phones show no Finance Loop logo and slogan in the footer; the header
   already carries them. The social icons and "Request video call" are
   hidden on phones as well (operator, 2026-09-27). */
@media (max-width: 40rem) {
    .footer-id,
    .footer-mid {
        display: none;
    }

    /* "Get our news! By submitting..." fits on one line: the size follows
       the screen width, 1rem at most (operator, 2026-09-27). The German
       sentence is 27 % longer, so its divisor is larger. */
    .footer-join .join p {
        font-size: min(1rem, calc((100vw - 3rem) / 23));
        white-space: nowrap;
    }

    .footer-join .join p:lang(de) {
        font-size: min(1rem, calc((100vw - 3rem) / 29.5));
    }
}

@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;
}

/* In the notice bar the margin cancels the link's 0.65rem flex gap. */
.notices a[href^="http"]:not([href*="finance-loop.net"]):not(:has(img)):not(:is(.social, .stay-social) a)::after {
    margin-left: calc(0.15em - 0.65rem);
}

/* 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;
    /* Fixed tracks let the photo's max-height resolve, so the whole photo
       fits the stage at 1x. An auto row grew with the photo and cut it off. */
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    place-items: center;
    margin: 0;
    overflow: hidden;
    /* The photo follows mouse and finger at every zoom level (operator,
       2026-09-27), so the browser gets no touch gesture of its own here. */
    touch-action: none;
    cursor: grab;
}

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

/* At 1x the photo may sit anywhere in the viewer, up to the screen edge. */
.lightbox:not(.is-zoomed) .lb-stage {
    overflow: visible;
}

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

.lb-stage:active,
.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 {
        justify-self: auto;
        order: -1;
        width: 150%;
        margin: 0 0 2.25rem -18%;
    }

    /* Under the ground line, flush with the right edge of the text column
       (the figure is 150 % wide and overhangs it by 32 %), so it needs no
       white halo over the houses. */
    .skyline .skyline-place {
        top: calc(100% + 0.375rem);
        right: calc(32% / 1.5);
        bottom: auto;
        -webkit-text-stroke: 0;
        text-shadow: none;
    }

    .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;
    }

    .river-title-short {
        display: none;
    }

    .river-title-long {
        display: inline;
    }

    .combine,
    .masterclass-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;
    }

    /* No padding: the 36px link row makes the bar as high as the crypto
       ticker on phones (operator, 2026-09-29). */
    .notices ul {
        flex-direction: column;
        gap: 0;
        padding-block: 0;
    }

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

    /* One notice on phones: base.html.twig marks the one with the earliest
       last day. Once it is hidden, the bar stays empty until the next load. */
    .notices.has-next li:not(.is-next),
    .notices.has-next:not(:has(li.is-next:not([hidden]))) {
        display: none;
    }

    /* 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: 34px;
    }

    /* The slogan fills the room beside search and menu and may wrap. */
    .tagline {
        flex: 1 1 0;
        min-width: 0;
        padding-left: 0.45rem;
        font-size: 0.69rem;
        white-space: normal;
    }

    /* On phones the menu button is a 44px circle like search; the word
       "Menu" stays for screen readers. */
    .menu-toggle {
        justify-content: center;
        width: 44px;
        padding: 0;
        border-radius: 50%;
    }

    .menu-toggle .menu-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* 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 fills the screen. */

.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-title {
    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;
        margin: 0;
        box-shadow: none;
    }

    .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-logo {
    position: relative;
    z-index: 1;
    display: block;
    width: auto;
    height: 2rem;
    margin-bottom: 1.25rem;
}

.stay-side h2 {
    position: relative;
    z-index: 1;
    color: var(--white);
    font-size: clamp(2rem, 1.2rem + 1.6vw, 2.4rem);
    font-weight: 850;
    font-stretch: var(--condensed);
    line-height: 0.95;
}

.stay-members {
    position: relative;
    z-index: 1;
    margin-top: 1rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9375rem;
    line-height: 1.45;
}

.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]) {
    color: var(--ink-soft);
    font-size: var(--step-0);
    line-height: 1.55;
}

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

/* The frame sits on the email input only, never around the button. */
.stay .join-field {
    gap: 0.5rem;
    padding: 0;
    border: 0;
    background: none;
}

.stay .join-field:focus-within {
    box-shadow: none;
}

.stay .join-field input {
    min-height: 48px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--white);
}

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

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

.stay-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1.25rem;
    /* No visible line above Dismiss; the transparent border keeps its
       1px of space (operator, 2026-09-29). */
    border-top: 1px solid transparent;
}

.stay-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5rem;
    margin: 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 {
    flex: none;
    min-height: 44px;
    padding: 0.5rem 1.25rem;
    border: 2px solid var(--rule);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--ink-soft);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
}

.stay-dismiss:hover {
    border-color: var(--ink-soft);
    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 {
        padding-block: 1.5rem 1.25rem;
    }

    .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 {
        gap: 0 0.75rem;
    }

    .stay-foot {
        margin-top: 0.25rem;
        padding-top: 0.75rem;
    }

    .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;
}

@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;
    }
}

/* The keyword list that closes a page (docs/seo.md, rule 5). Each term
   links to the site search for it. */
.c-keywords {
    padding-block: 2rem 2.5rem;
    border-top: 1px solid var(--rule);
}

.c-keywords .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1.25rem;
}

.c-keywords-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    font-stretch: 100%;
    letter-spacing: 0;
    color: var(--ink);
}

.c-keywords ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
}

/* Phones: the language button leaves the header row and closes the open
   menu as a text link. */
@media (max-width: 40rem) {
    .header-row .lang-switch {
        display: none;
    }

    .header-row .lang-switch + .search-open {
        margin-left: auto;
    }

    .nav-lang {
        display: flex;
        align-items: center;
        min-height: 56px;
        border-top: 1px solid var(--rule);
        font-weight: 700;
    }
}