/* =========================================================
   AETEK — Concept
   Dark-first industrial B2B design system
   ========================================================= */

/* Saira is self-hosted: loading it from Google would send visitor IPs
   to Google without consent (LG München I, 3 O 17493/20) */
@font-face {
    font-family: "Saira";
    font-style: normal;
    font-weight: 500 800;
    font-display: swap;
    src: url("assets/fonts/saira-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Saira";
    font-style: normal;
    font-weight: 500 800;
    font-display: swap;
    src: url("assets/fonts/saira-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --navy-900: #04121e;
    --navy-850: #061826;
    --navy-800: #061d2f;
    --navy-700: #0a2740;
    --navy-600: #0d4067;

    --blue: #4da3ff;
    --blue-soft: #86c2ff;
    --blue-deep: #1a6fd4;

    /* metallic gold — the light/dark banding is what reads as metal */
    --gold: #f2b51d;
    --gold-mid: #dd970f;
    --gold-light: #ffd94d;
    --gold-bright: #fff5b5;
    --gold-deep: #b5700c;
    --gold-metal: linear-gradient(100deg,
        var(--gold-deep) 0%, var(--gold-mid) 10%, var(--gold) 19%,
        var(--gold-light) 25%, var(--gold-bright) 30%, var(--gold-light) 35%,
        var(--gold) 43%, var(--gold-mid) 52%, var(--gold-deep) 60%,
        var(--gold-mid) 70%, var(--gold) 80%, var(--gold-light) 90%, var(--gold-deep) 100%);

    --text: #e9f1f8;
    --muted: #97aec4;
    --line: rgba(122, 170, 214, 0.16);
    --line-strong: rgba(122, 170, 214, 0.32);

    --surface: rgba(255, 255, 255, 0.032);
    --surface-hi: rgba(255, 255, 255, 0.055);

    --font-display: "Saira", "Aptos", "Segoe UI", system-ui, sans-serif;
    --font-body: "Aptos", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;

    --radius: 14px;
    --radius-lg: 22px;

    --shell: min(1240px, 100% - 48px);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);

    --header-h: 76px;
}

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

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

body {
    margin: 0;
    background-color: var(--navy-900);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin: 0;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.container { width: var(--shell); margin-inline: auto; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--blue);
    color: var(--navy-900);
    padding: 12px 20px;
    font-weight: 700;
}
.skip-link:focus { left: 12px; top: 12px; }

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

/* ---------------- Metallic gold ----------------
   The gradient's first and last stop match, so the tile repeats seamlessly
   and the shimmer can loop by sliding one full tile width. */
.gold-text,
.bridge-ca .bridge-label {
    background-image: var(--gold-metal);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: goldShimmer 7s linear infinite;
}
@keyframes goldShimmer {
    from { background-position: 0% center; }
    to   { background-position: -200% center; }
}

/* ---------------- Scroll progress ---------------- */
.scroll-progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 2px;
    z-index: 120;
    background: transparent;
    pointer-events: none;
}
.scroll-progress span {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--blue-deep), var(--blue) 55%, var(--gold));
    box-shadow: 0 0 14px rgba(77, 163, 255, 0.7);
}

/* ---------------- Buttons ---------------- */
.btn {
    --btn-bg: transparent;
    --btn-fg: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px;
    border-radius: 999px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
                background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    will-change: transform;
}

.btn svg {
    width: 18px; height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.35s var(--ease);
}
.btn:hover svg { transform: translateX(4px); }

.btn-primary {
    --btn-bg: var(--blue);
    --btn-fg: #04121e;
    box-shadow: 0 10px 30px -12px rgba(77, 163, 255, 0.85);
}
.btn-primary:hover {
    background: var(--blue-soft);
    box-shadow: 0 18px 44px -14px rgba(77, 163, 255, 0.95);
}

.btn-ghost {
    border-color: var(--line-strong);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(6px);
}
.btn-ghost:hover {
    border-color: var(--blue);
    background: rgba(77, 163, 255, 0.1);
    color: #fff;
}

.btn-sm { padding: 11px 20px; font-size: 0.85rem; }
.btn-lg { padding: 18px 34px; font-size: 1.05rem; }

/* ---------------- Header ---------------- */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: var(--header-h);
    display: flex;
    align-items: center;
    transition: background-color 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
    border-bottom: 1px solid transparent;
}

.site-header.is-stuck {
    background: rgba(4, 18, 30, 0.82);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom-color: var(--line);
}

.header-inner {
    width: var(--shell);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.logo-link { display: inline-flex; line-height: 0; }
.site-logo {
    height: 15px;
    width: auto;
    transition: opacity 0.3s ease;
}
.logo-link:hover .site-logo { opacity: 0.75; }

.main-nav {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.nav-link {
    position: relative;
    padding: 8px 14px;
    font-family: var(--font-display);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--muted);
    text-decoration: none;
    border-radius: 999px;
    transition: color 0.25s ease;
    white-space: nowrap;
}
.nav-link:hover, .nav-link.is-active { color: #fff; }

.nav-indicator {
    position: absolute;
    left: 0; top: 50%;
    height: 32px;
    width: 0;
    translate: 0 -50%;
    border-radius: 999px;
    background: rgba(77, 163, 255, 0.14);
    border: 1px solid rgba(77, 163, 255, 0.3);
    opacity: 0;
    transition: transform 0.45s var(--ease), width 0.45s var(--ease), opacity 0.3s ease;
    pointer-events: none;
}
.nav-indicator.is-on { opacity: 1; }

.header-actions { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
    display: none;
    width: 42px; height: 42px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    padding: 0;
    position: relative;
}
/* centred from the middle of the box, so borders and rounding cannot shift them */
.nav-toggle span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px; height: 2px;
    margin: -1px 0 0 -10px;
    background: var(--text);
    border-radius: 2px;
    transition: transform 0.35s var(--ease), opacity 0.2s ease;
}
.nav-toggle span:nth-child(1) { transform: translateY(-6px); }
.nav-toggle span:nth-child(3) { transform: translateY(6px); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

/* ---------------- Hero ---------------- */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: calc(var(--header-h) + 60px) 0 90px;
    overflow: hidden;
    background: var(--navy-800);
    isolation: isolate;
}

/* overall brightness lives on the container so slides can be fully opaque:
   the incoming slide fades in over a still-opaque outgoing one (no dip) */
.hero-media { position: absolute; inset: 0; z-index: -3; opacity: 0.82; }

.hero-slide {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--img);
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 1.8s ease-in-out;
}
.hero-slide.is-active  { opacity: 1; z-index: 2; }
.hero-slide.is-leaving { opacity: 1; z-index: 1; }
/* up to 900 px wide the page offers the smaller copy of the photo (--img-sm); a slide without one keeps --img */
@media (max-width: 900px) { .hero-slide { background-image: var(--img-sm, var(--img)); } }

/* same animation on both states: swapping the class does not restart it,
   so the outgoing slide keeps zooming until it is fully covered */
.hero-slide.is-active,
.hero-slide.is-leaving {
    animation: kenburns 10s linear forwards;
}

@keyframes kenburns {
    from { transform: scale(1.02); }
    to   { transform: scale(1.1); }
}

.hero-canvas {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    opacity: 0.85;
}

.hero-veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(125% 95% at 18% 32%, rgba(4, 18, 30, 0.04) 0%, rgba(4, 18, 30, 0.58) 72%),
        linear-gradient(to top, var(--navy-900) 2%, rgba(4, 18, 30, 0.42) 40%, rgba(4, 18, 30, 0.12) 100%);
}

.hero-inner {
    width: var(--shell);
    margin-inline: auto;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 9px 18px 9px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blue-soft);
    margin-bottom: 30px;
}
.badge-arrow {
    font-size: 1rem;
    background-image: var(--gold-metal);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: goldShimmer 7s linear infinite;
}

.pulse-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--blue);
    position: relative;
    flex: none;
}
.pulse-dot::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid var(--blue);
    animation: pulseRing 2.4s ease-out infinite;
}
@keyframes pulseRing {
    0%   { transform: scale(0.6); opacity: 1; }
    100% { transform: scale(1.7); opacity: 0; }
}

.hero-title {
    font-size: clamp(2.6rem, 6.4vw, 5.4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.02;
    margin: 0 0 28px;
    text-wrap: balance;
    text-shadow: 0 2px 26px rgba(4, 18, 30, 0.62);
}
.hero-title .line { display: block; overflow: hidden; --line-delay: 0.10s; }
.hero-title .line:nth-child(2) { --line-delay: 0.26s; }
.hero-title .line:nth-child(3) { --line-delay: 0.42s; }
/* the headline is translated as a whole, so a line may hold more than the two
   words the English one has — the stagger is built from the line and the word
   position instead of being spelled out per slot */
.hero-title .word {
    display: inline-block;
    transform: translateY(105%);
    opacity: 0;
    --word-delay: 0s;
    animation: wordUp 1s var(--ease) forwards;
    animation-delay: calc(var(--line-delay) + var(--word-delay));
}
.hero-title .word:nth-child(2) { --word-delay: 0.08s; }
.hero-title .word:nth-child(3) { --word-delay: 0.16s; }
.hero-title .word:nth-child(4) { --word-delay: 0.24s; }

@keyframes wordUp {
    to { transform: translateY(0); opacity: 1; }
}

/* text-shadow would be painted over a background-clip:text fill and muddy it,
   so gradient words use a filter shadow instead */
.hero-title .accent,
.hero-title .accent-warm { text-shadow: none; }
.hero-title .accent { filter: drop-shadow(0 2px 16px rgba(4, 18, 30, 0.55)); }

.hero-title .accent {
    background: linear-gradient(100deg, var(--blue-soft), var(--blue) 60%, var(--blue-deep));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero-title .accent-warm {
    background-image: var(--gold-metal);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* must keep wordUp — the shorthand would otherwise drop the entrance animation */
    animation: wordUp 1s var(--ease) forwards, goldShimmer 7s linear infinite;
    filter: drop-shadow(0 2px 18px rgba(232, 176, 20, 0.32));
}

.hero-sub {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    color: #c3d4e4;
    max-width: 780px;
    margin-bottom: 38px;
    text-shadow: 0 1px 14px rgba(4, 18, 30, 0.8);
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 64px; }

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 56px;
    margin: 0;
    padding-top: 30px;
    border-top: 1px solid var(--line);
}
.stat { min-width: 120px; }
.stat-value {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.4vw, 2.9rem);
    font-weight: 700;
    line-height: 1;
    color: #fff;
    margin: 0;
}
.stat-label {
    margin: 6px 0 0;
    font-size: 0.85rem;
    color: var(--muted);
    letter-spacing: 0.02em;
}

/* scroll cue */
.scroll-cue {
    position: absolute;
    right: max(28px, calc((100% - var(--shell)) / 2));
    bottom: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--muted);
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    z-index: 3;
}
.scroll-cue-line {
    width: 1px; height: 46px;
    background: linear-gradient(to bottom, transparent, var(--blue));
    position: relative;
    overflow: hidden;
}
.scroll-cue-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--blue);
    animation: cueDrop 2s ease-in-out infinite;
}
@keyframes cueDrop {
    0%   { transform: translateY(-100%); }
    60%  { transform: translateY(100%); }
    100% { transform: translateY(100%); }
}

/* ---------------- Ticker ---------------- */
.ticker {
    border-block: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
    padding: 14px 0;
    position: relative;
    z-index: 2;
}
/* children carry the spacing (not `gap`) so a 2x duplicated track
   loops seamlessly at exactly -50% */
.ticker-track > * { margin-right: 28px; flex: none; }
.ticker-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: slide 38s linear infinite;
    font-family: var(--font-display);
    font-size: 0.82rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
}
.ticker-track i { color: var(--blue); font-style: normal; font-size: 0.6rem; }
@keyframes slide {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ---------------- Sections ---------------- */
.section { padding: clamp(90px, 11vw, 160px) 0; position: relative; }

.section-head { margin-bottom: 64px; max-width: 900px; }
.section-head.center { margin-inline: auto; text-align: center; }

.eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 18px;
}

.display {
    font-size: clamp(1.9rem, 4vw, 3.2rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    text-wrap: balance;
}
.display.xl { font-size: clamp(2.4rem, 6vw, 4.6rem); }
.display em {
    font-style: normal;
    background: linear-gradient(100deg, var(--blue-soft), var(--blue) 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.section-intro {
    margin-top: 22px;
    font-size: 1.05rem;
    color: var(--muted);
    max-width: 640px;
}
.section-head.center .section-intro { margin-inline: auto; }

/* ---------------- Market ---------------- */
.section-market::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(70% 55% at 80% 0%, rgba(77, 163, 255, 0.11), transparent 70%);
    pointer-events: none;
}

.market-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(36px, 5vw, 80px);
    align-items: center;
}
.lead { font-size: 1.1rem; color: var(--muted); }
.statement {
    margin-top: 28px;
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.2vw, 1.75rem);
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
    padding-left: 22px;
    border-left: 3px solid var(--blue);
}
.statement strong { color: var(--blue-soft); white-space: nowrap; }

/* bridge visual */
.bridge {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, var(--surface-hi), transparent 60%);
    backdrop-filter: blur(4px);
}
.bridge-side { text-align: center; }
.bridge-label {
    display: block;
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 14px;
    color: var(--blue);
}
/* colour comes from the metallic gradient rule above */
.bridge-list {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--muted);
}
.bridge-list li {
    padding: 9px 6px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
}
.bridge-link {
    position: relative;
    width: 64px; height: 2px;
    background: linear-gradient(90deg, var(--blue), var(--gold));
    border-radius: 2px;
}
.bridge-pulse {
    position: absolute;
    top: 50%; left: 0;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px var(--blue);
    translate: 0 -50%;
    animation: bridgeFlow 2.8s linear infinite;
}
.bridge-pulse:nth-child(2) { animation-delay: 0.95s; }
.bridge-pulse:nth-child(3) { animation-delay: 1.9s; }
@keyframes bridgeFlow {
    0%   { left: -4px; opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { left: calc(100% - 3px); opacity: 0; }
}

/* ---------------- Footprint map ---------------- */
.geo { margin-top: clamp(80px, 9vw, 130px); }

.geo-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px 60px;
    margin-bottom: 34px;
}
.geo-title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    letter-spacing: -0.02em;
    text-wrap: balance;
}
/* blue -> gold, the same west-to-east reading as the map colours */
.geo-title em {
    font-style: normal;
    background: linear-gradient(100deg, var(--blue-soft), var(--blue) 30%, var(--gold) 85%, var(--gold-light));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.geo-intro { max-width: 400px; margin: 0; color: var(--muted); }

.geo-card {
    position: relative;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(70% 90% at 58% 42%, rgba(13, 64, 103, 0.38), transparent 72%),
        linear-gradient(165deg, var(--surface-hi), rgba(255, 255, 255, 0.01));
    overflow: hidden;
}

.geo-map { position: relative; aspect-ratio: 600 / 320; }

.geo-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    /* dissolve the edges so the crop reads as focus, not as a cut */
    -webkit-mask-image:
        linear-gradient(90deg, transparent, #000 7%, #000 94%, transparent),
        linear-gradient(180deg, transparent, #000 8%, #000 93%, transparent);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(90deg, transparent, #000 7%, #000 94%, transparent),
        linear-gradient(180deg, transparent, #000 8%, #000 93%, transparent);
    mask-composite: intersect;
}

.geo-grid {
    fill: none;
    stroke: rgba(122, 170, 214, 0.07);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.geo-land path {
    fill: rgba(151, 174, 196, 0.075);
    stroke: #051523;
    stroke-width: 1;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transition: fill 0.9s ease var(--d, 0ms);
}
.geo-card.is-visible .geo-land .is-market { fill: rgba(77, 163, 255, 0.34); }
.geo-card.is-visible .geo-land .is-ca     { fill: rgba(242, 181, 29, 0.36); }

/* hover must not wait for the staggered entrance delay */
.geo-card.is-visible .geo-land .is-market:hover,
.geo-card.is-visible .geo-land .is-ca:hover { transition-delay: 0ms; transition-duration: 0.25s; }
.geo-card.is-visible .geo-land .is-market:hover { fill: rgba(77, 163, 255, 0.55); }
.geo-card.is-visible .geo-land .is-ca:hover     { fill: rgba(242, 181, 29, 0.55); }

/* pins are HTML so their labels stay legible at every map size */
.geo-pin {
    position: absolute;
    width: 0;
    height: 0;
    z-index: 2;
    pointer-events: none;
}
.geo-pin-dot {
    position: absolute;
    left: -6px; top: -6px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow: 0 0 0 3px rgba(242, 181, 29, 0.28), 0 0 18px rgba(242, 181, 29, 0.85);
    transform: scale(0);
    transition: transform 0.6s var(--ease) var(--pd, 0ms);
}
.geo-pin-dot::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 1px solid var(--gold);
    animation: pulseRing 2.4s ease-out infinite;
}
.geo-pin--hq .geo-pin-dot {
    left: -8px; top: -8px;
    width: 16px; height: 16px;
    background: radial-gradient(circle, #fff 0 28%, var(--gold-light) 34%);
}

.geo-pin-label {
    position: absolute;
    display: flex;
    flex-direction: column;
    padding: 7px 13px 8px;
    border: 1px solid rgba(242, 181, 29, 0.34);
    border-radius: 10px;
    background: rgba(4, 18, 30, 0.8);
    backdrop-filter: blur(6px);
    white-space: nowrap;
    line-height: 1.2;
    opacity: 0;
    transition: opacity 0.6s ease calc(var(--pd, 0ms) + 200ms), translate 0.6s var(--ease) calc(var(--pd, 0ms) + 200ms);
}
.geo-pin-label strong {
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
}
/* Saira ships without Cyrillic, so the local name uses the body font on purpose */
.geo-pin-native {
    font-family: var(--font-body);
    font-weight: 500;
    color: #c3d4e4;
}
.geo-pin-label small {
    margin-top: 3px;
    font-family: var(--font-display);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-light);
}
.geo-pin--left   .geo-pin-label { right: 18px; top: 0; transform: translateY(-50%); translate: 8px 0; text-align: right; }
.geo-pin--top    .geo-pin-label { bottom: 18px; left: 0; transform: translateX(-50%); translate: 0 8px; align-items: center; }
.geo-pin--bottom .geo-pin-label { top: 18px; left: 0; transform: translateX(-50%); translate: 0 -8px; align-items: center; }
.geo-card.is-visible .geo-pin-dot { transform: scale(1); }
.geo-card.is-visible .geo-pin-label { opacity: 1; translate: 0 0; }

.geo-tip {
    position: absolute;
    z-index: 3;
    padding: 6px 11px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: rgba(4, 18, 30, 0.92);
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 14px));
}
.geo-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 30px;
    padding: 18px 28px;
    border-top: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}
.geo-key { display: inline-flex; align-items: center; gap: 10px; }
.geo-key::before {
    content: "";
    width: 12px; height: 12px;
    border-radius: 3px;
    flex: none;
}
.geo-key--pin::before    { border-radius: 50%; background: var(--gold-light); box-shadow: 0 0 0 3px rgba(242, 181, 29, 0.28), 0 0 10px rgba(242, 181, 29, 0.8); transform: scale(0.8); }
.geo-key--market::before { background: rgba(77, 163, 255, 0.45); box-shadow: inset 0 0 0 1px var(--blue); }
.geo-key--ca::before     { background: rgba(242, 181, 29, 0.5); box-shadow: inset 0 0 0 1px var(--gold); }
/* ---------------- Approach: vertical flow + Central Asia panel ---------------- */
.section-approach { background: var(--navy-850); border-block: 1px solid var(--line); }

.approach-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
}
.approach-main .section-head { margin-bottom: 56px; }

.flow { list-style: none; margin: 0; padding: 0; position: relative; }

/* the step spacing is what gives the country panel its scroll distance */
.flow-step {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 68px 1fr;
    column-gap: 26px;
    align-items: start;
    padding-bottom: clamp(56px, 12vh, 120px);
}
.flow-step:last-of-type { padding-bottom: clamp(24px, 6vh, 60px); }
.flow-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px; height: 68px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: var(--navy-800);
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--blue);
    transition: transform 0.4s var(--ease), border-color 0.4s ease,
                box-shadow 0.4s ease, color 0.4s ease, background-color 0.4s ease;
}
.flow-step.is-active .flow-num,
.flow-step:hover .flow-num {
    border-color: var(--blue);
    background: var(--navy-600);
    color: #fff;
    box-shadow: 0 0 0 6px rgba(77, 163, 255, 0.08), 0 12px 34px -12px rgba(77, 163, 255, 0.9);
}
.flow-text { max-width: 480px; }
.flow-step h3 { font-size: 1.5rem; margin: 12px 0 8px; transition: color 0.4s ease; }
.flow-lead {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--blue-soft);
}
.flow-text p:not(.flow-lead) { margin: 0 0 16px; color: var(--muted); font-size: 0.98rem; }
.flow-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.flow-points li {
    position: relative;
    padding-left: 24px;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--text);
}
.flow-points li::before {
    content: "";
    position: absolute;
    left: 2px; top: 0.35em;
    width: 11px; height: 6px;
    border-left: 2px solid var(--blue);
    border-bottom: 2px solid var(--blue);
    transform: rotate(-45deg);
}

/* height is set in script.js so the rail ends exactly at the last number */
.flow-rail {
    position: absolute;
    left: 33px;
    top: 34px;
    width: 2px;
    height: 0;
    background: var(--line);
    z-index: 0;
}
.flow-rail-fill {
    display: block;
    width: 100%;
    height: 0%;
    background: linear-gradient(180deg, var(--blue), var(--gold));
    box-shadow: 0 0 12px rgba(77, 163, 255, 0.6);
}

/* country panel: sticks while the steps scroll past */
.ca-panel { position: sticky; top: calc(var(--header-h) + 28px); }
.ca-card {
    position: relative;
    isolation: isolate;
    padding: 26px 28px 22px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--navy-800);
    overflow: hidden;
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7);
}

/* city photo across the top of the card, fading into navy where the facts begin;
   each image carries its own object-position so the landmark stays in frame */
/* overflow clip: the Ken Burns scale would otherwise push the photo past the fade */
.ca-bgs { position: absolute; top: 0; left: 0; right: 0; height: 60%; z-index: -1; overflow: hidden; }
.ca-bgs::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(4, 18, 30, 0.6) 0%, rgba(4, 18, 30, 0.08) 18%, rgba(4, 18, 30, 0.1) 45%,
        rgba(6, 29, 47, 0.8) 78%, var(--navy-800) 100%);
}
.ca-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.07);
    transition: opacity 0.9s ease, transform 7s linear;
}
.ca-bg.is-active { opacity: 1; transform: scale(1); }

.ca-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.ca-kicker {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--blue-soft);
    text-shadow: 0 1px 10px rgba(4, 18, 30, 0.8);
}
.ca-count { font-family: var(--font-display); font-size: 0.85rem; color: #c3d4e4; white-space: nowrap; text-shadow: 0 1px 10px rgba(4, 18, 30, 0.8); }
.ca-count b { font-size: 1.15rem; color: #fff; }

/* top-left sits in open sky on every photo, so it never covers a landmark */
.ca-minimap {
    position: absolute;
    top: 60px;
    left: 20px;
    z-index: 1;
    width: 28%;
    max-width: 160px;
    height: auto;
    padding: 8px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: rgba(4, 18, 30, 0.55);
    backdrop-filter: blur(8px);
}
.ca-mm-land {
    fill: rgba(151, 174, 196, 0.16);
    stroke: var(--navy-900);
    stroke-width: 1;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transition: fill 0.5s ease;
}
.ca-mm-land.is-active { fill: rgba(242, 181, 29, 0.75); }
.ca-mm-cap { fill: #fff; opacity: 0; transition: opacity 0.4s ease; }
.ca-mm-cap.is-active { opacity: 1; filter: drop-shadow(0 0 3px rgba(255, 217, 77, 0.9)); }

/* slides share one grid cell, so the stage is as tall as the tallest slide */
.ca-stage { display: grid; }
.ca-slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity 0.45s ease, transform 0.6s var(--ease), visibility 0s linear 0.45s;
}
.ca-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.5s ease 0.1s, transform 0.6s var(--ease) 0.1s, visibility 0s;
}

/* empty window onto the photo */
.ca-visual { height: clamp(150px, 24vh, 250px); }

.ca-landmark-name {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #c3d4e4;
    text-shadow: 0 1px 8px rgba(4, 18, 30, 0.9);
}
.ca-headline { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
/* body font on purpose: Saira has no Cyrillic, and all five should look alike */
.ca-name-native {
    font-family: var(--font-body);
    font-size: 0.55em;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--muted);
    white-space: nowrap;
}
.ca-flag {
    flex: none;
    width: 40px; height: 30px;
    border-radius: 4px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 6px 16px -6px rgba(0, 0, 0, 0.6);
}
.ca-name {
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 18px rgba(4, 18, 30, 0.7);
}

.ca-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.ca-fact {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid rgba(122, 170, 214, 0.2);
    border-radius: 12px;
    background: rgba(6, 29, 47, 0.62);
    backdrop-filter: blur(10px);
}
.ca-fact--wide { grid-column: 1 / -1; }
.ca-fact dt {
    margin-bottom: 4px;
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--blue);
}
.ca-fact dd { margin: 0; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: #fff; }

.ca-fact--insight {
    border-color: rgba(242, 181, 29, 0.3);
    background: linear-gradient(120deg, rgba(242, 181, 29, 0.12), rgba(6, 29, 47, 0.62) 55%);
}
.ca-fact--insight dt { color: var(--gold-light); }
.ca-fact--insight dd { font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; line-height: 1.5; color: var(--text); }

.ca-sectors { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ca-sectors li {
    padding: 6px 13px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(13, 64, 103, 0.45);
    font-size: 0.85rem;
    font-weight: 600;
}

.ca-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.ca-dots { display: flex; gap: 8px; }
.ca-dot {
    position: relative;
    width: 8px; height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(122, 170, 214, 0.32);
    cursor: pointer;
    transition: width 0.35s var(--ease), background-color 0.3s ease;
}
.ca-dot::after { content: ""; position: absolute; inset: -9px -4px; }
.ca-dot:hover { background: var(--blue-soft); }
.ca-dot.is-active { width: 28px; background: linear-gradient(90deg, var(--blue), var(--gold)); }
.ca-arrow {
    width: 36px; height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}
.ca-arrow:hover { border-color: var(--blue); background: rgba(77, 163, 255, 0.12); }
.ca-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* the sticky panel must fit the viewport, so it tightens on short laptop screens */
@media (min-width: 901px) and (max-height: 880px) {
    .ca-panel { top: calc(var(--header-h) + 12px); }
    .ca-card { padding: 20px 24px 16px; }
    .ca-visual { height: clamp(60px, 100vh - 660px, 180px); }
    .ca-minimap { top: 50px; width: 20%; padding: 6px; }
    .ca-headline { margin-bottom: 10px; }
    .ca-name { font-size: 1.9rem; }
    .ca-fact { padding: 8px 12px; }
    .ca-nav { margin-top: 12px; }
}
@media (min-width: 901px) and (max-height: 740px) {
    .ca-landmark-name { display: none; }
    .ca-minimap { display: none; }
}

/* ---------------- FAQ (landing pages) ---------------- */
.faq { display: grid; gap: 14px; max-width: 900px; }
.faq-item {
    padding: 24px 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(165deg, var(--surface-hi), rgba(255, 255, 255, 0.012));
}
.faq-item h3 { font-size: 1.12rem; margin-bottom: 8px; }
.faq-item p { margin: 0; color: var(--muted); }

@media (max-width: 620px) {
    .faq-item { padding: 20px 18px; }
}

/* ---------------- Bento / services ---------------- */
/* "E" layout: the capability-profile card on the left, three services stacked right */
.bento {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 20px;
}
.card {
    position: relative;
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg, var(--surface-hi), rgba(255, 255, 255, 0.012));
    overflow: hidden;
    transition: transform 0.45s var(--ease), border-color 0.4s ease;
}
.card-lg { grid-row: span 3; }
.card:hover { transform: translateY(-5px); border-color: var(--line-strong); }

/* mouse-following spotlight */
.spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%),
                rgba(77, 163, 255, 0.16), transparent 62%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.spotlight:hover::before { opacity: 1; }

.card-icon {
    width: 52px; height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    border: 1px solid var(--line-strong);
    background: rgba(77, 163, 255, 0.08);
    margin-bottom: 26px;
}
.card-icon svg {
    width: 24px; height: 24px;
    fill: none;
    stroke: var(--blue);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.card h3 { font-size: 1.3rem; margin-bottom: 14px; }

/* ---------------- Capability radar (inside the tall service card) ---------------- */
.card-lg { display: flex; flex-direction: column; }
.card-lg .card-tag { align-self: flex-start; }

/* fills the card's spare height and sits centred in it */
.radar {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin: 30px 0 0;
    padding-top: 26px;
    border-top: 1px solid var(--line);
    text-align: center;
}
.radar-head { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.radar-badge {
    margin-bottom: 8px;
    padding: 4px 12px;
    border: 1px solid rgba(242, 181, 29, 0.4);
    border-radius: 999px;
    background: rgba(242, 181, 29, 0.08);
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-light);
}
/* the example's gold is the site's metal, not a flat orange */
.radar-badge,
.radar-readout .is-gold,
.radar-toggle[aria-pressed="true"] {
    background-image: var(--gold-metal);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: goldShimmer 7s linear infinite;
}
.radar-text { max-width: 460px; margin-top: 10px; font-size: 0.9rem; line-height: 1.6; color: var(--muted); }
.radar-title {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--blue);
}
.radar-sub { font-size: 0.88rem; color: var(--muted); }

/* borrows the card's side padding: the labels need the width more than the gutter does */
.radar-svg { display: block; width: calc(100% + 44px); max-width: 480px; margin-inline: -22px; height: auto; overflow: visible; }

.radar-ring { fill: none; stroke: rgba(122, 170, 214, 0.16); stroke-width: 1; stroke-dasharray: 3 3; }
.radar-target {
    fill: rgba(242, 181, 29, 0.04);
    stroke: url(#radarGold) var(--gold);
    stroke-width: 1.6;
    stroke-linejoin: round;
}
.radar-tdot { fill: url(#radarGold) var(--gold); }
.radar-actual {
    fill: rgba(77, 163, 255, 0.2);
    stroke: var(--blue);
    stroke-width: 2;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 8px rgba(77, 163, 255, 0.45));
}
.radar-dia {
    fill: var(--blue-soft);
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.25s var(--ease), fill 0.25s ease;
}
.radar-dot.is-active .radar-dia { transform: scale(1.7); fill: #fff; }

.radar-gap {
    stroke: url(#radarGold) var(--gold-light);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 2 4;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.radar-gap.is-on { opacity: 1; }

.radar-axis { cursor: pointer; outline: none; }
.radar-hit { fill: transparent; }
.radar-spoke { stroke: rgba(122, 170, 214, 0.12); stroke-width: 1; transition: stroke 0.25s ease; }
.radar-axis text {
    fill: var(--muted);
    font-family: var(--font-body);
    font-size: 13.5px;
    transition: fill 0.25s ease;
}
.radar-axis.is-active .radar-spoke { stroke: rgba(134, 194, 255, 0.55); }
.radar-axis.is-active text { fill: #fff; }
.radar-axis:focus-visible text { fill: #fff; text-decoration: underline; }

.radar-foot { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.radar-legend {
    display: flex;
    gap: 22px;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}
.radar-key { display: inline-flex; align-items: center; gap: 8px; }
.radar-key::before { content: ""; width: 18px; height: 2px; border-radius: 2px; }
.radar-key--actual::before { background: var(--blue); box-shadow: 0 0 8px rgba(77, 163, 255, 0.8); }
.radar-key--target::before { background-image: var(--gold-metal); background-size: 200% auto; animation: goldShimmer 7s linear infinite; }

.radar-readout { min-height: 1.6em; margin: 0; font-size: 0.88rem; color: var(--muted); }
.radar-readout strong { color: #fff; font-weight: 600; }
.radar-readout .is-gold { color: var(--gold-light); }
.radar-toggle { font-size: 0.8rem; }
.radar-toggle[aria-pressed="true"] { border-color: rgba(242, 181, 29, 0.6); }
.card p { color: var(--muted); font-size: 0.96rem; }
.card-tag {
    display: inline-block;
    margin-top: 22px;
    padding: 5px 13px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}

/* a tag that is also a link into the BDaaS subpage — blue instead of the
   static tags' muted grey, with a small arrow as the "find out more" cue */
.card-tag--link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--blue);
    border-color: rgba(77, 163, 255, 0.35);
    text-decoration: none;
    transition: color 0.3s ease, border-color 0.3s ease, gap 0.3s var(--ease);
}
.card-tag--link:hover {
    color: var(--blue-soft);
    border-color: rgba(77, 163, 255, 0.7);
    gap: 9px;
}
.card-tag--link svg {
    width: 11px; height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------------- Focus / marquee ---------------- */
.section-focus { overflow: hidden; }
.focus-bg {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(4, 18, 30, 0.86), rgba(4, 18, 30, 0.94)),
                      url('assets/img/20280828 background.webp');
    background-size: cover;
    background-position: center;
    z-index: -1;
}

.marquee { display: grid; gap: 16px; margin-top: 10px; }
.marquee-row { overflow: hidden; }
.marquee-track > * { margin-right: 16px; flex: none; }
.marquee-track {
    display: flex;
    width: max-content;
    animation: slide 34s linear infinite;
}
.marquee-row.reverse .marquee-track { animation-direction: reverse; }

.chip {
    padding: 15px 30px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(13, 64, 103, 0.35);
    backdrop-filter: blur(4px);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
    color: var(--text);
}

/* accessible text list (visually hidden, keeps content for SEO/AT) */
.focus-list {
    list-style: none;
    margin: 0; padding: 0;
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

/* ---------------- Why ---------------- */
.why-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: clamp(40px, 6vw, 90px);
    align-items: center;
}
.why-copy p { color: var(--muted); }

.lang-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 34px 0 26px; }
.lang-pills span {
    padding: 9px 20px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.88rem;
    background: rgba(255, 255, 255, 0.03);
}
.tagline {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text) !important;
}

.why-badge { position: relative; text-align: center; }
.why-badge img {
    width: min(160px, 55%);
    margin-inline: auto;
    position: relative;
    z-index: 1;
    animation: floaty 7s ease-in-out infinite;
}
@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}
.badge-glow {
    position: absolute;
    left: 50%; top: 42%;
    width: 220px; height: 220px;
    translate: -50% -50%;
    background: radial-gradient(circle, rgba(56, 214, 118, 0.22), transparent 62%);
    filter: blur(14px);
}
.badge-caption {
    margin-top: 22px;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.85rem;
}
.badge-caption span {
    color: var(--muted);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
}

/* ---------------- CTA ---------------- */
.section-cta {
    background: var(--navy-850);
    border-top: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}
.section-cta::before {
    content: "";
    position: absolute;
    left: 50%; top: -30%;
    width: 900px; height: 900px;
    translate: -50% 0;
    background: radial-gradient(circle, rgba(77, 163, 255, 0.14), transparent 62%);
    pointer-events: none;
}

.audience-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}
.audience {
    position: relative;
    padding: 40px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg, var(--surface-hi), rgba(255, 255, 255, 0.012));
    overflow: hidden;
    transition: transform 0.45s var(--ease), border-color 0.4s ease;
}
.audience:hover { transform: translateY(-5px); border-color: var(--line-strong); }
.audience-flag {
    display: inline-block;
    padding: 6px 15px;
    border-radius: 999px;
    background: rgba(77, 163, 255, 0.14);
    border: 1px solid rgba(77, 163, 255, 0.3);
    color: var(--blue-soft);
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 22px;
}
/* the pill tint sits on ::before so the label itself can carry the
   metallic gradient (background-clip: text needs the background free) */
.audience-flag.warm {
    position: relative;
    isolation: isolate;
    border-color: rgba(232, 176, 20, 0.38);
    background-image: var(--gold-metal);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: goldShimmer 7s linear infinite;
}
.audience-flag.warm::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: rgba(232, 176, 20, 0.12);
}
.audience h3 { font-size: 1.4rem; margin-bottom: 12px; }
.audience p { color: var(--muted); }

.contact-panel {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(32px, 4vw, 56px);
    align-items: start;
    padding: clamp(28px, 4vw, 52px);
    scroll-margin-top: calc(var(--header-h) + 24px);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: linear-gradient(120deg, rgba(13, 64, 103, 0.55), rgba(4, 18, 30, 0.45));
    position: relative;
}
.contact-kicker {
    font-family: var(--font-display);
    font-size: 0.76rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--blue);
}
.contact-claim {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: 700;
}
.contact-claim em { font-style: normal; color: var(--blue-soft); }
.contact-text p:last-child { color: var(--muted); }
.contact-direct { font-size: 0.92rem; }
.contact-direct a { color: var(--blue-soft); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.contact-direct a:hover { color: #fff; }

/* ---------------- Contact form ---------------- */
.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
}
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field-full { grid-column: 1 / -1; }
.field label {
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}
.field label span { color: var(--blue); }
.field input,
.field textarea {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: rgba(4, 18, 30, 0.55);
    color: var(--text);
    font: inherit;
    font-size: 0.95rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:hover,
.field textarea:hover { border-color: rgba(122, 170, 214, 0.5); }
.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--blue);
    background: rgba(4, 18, 30, 0.8);
    box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.2);
}
.field.is-invalid input,
.field.is-invalid textarea { border-color: #ff7a7a; box-shadow: 0 0 0 3px rgba(255, 122, 122, 0.15); }

/* spam trap: kept out of sight and out of the accessibility tree */
.field-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.form-privacy { flex: 1 1 260px; margin: 0; font-size: 0.8rem; line-height: 1.55; color: var(--muted); }
.form-privacy a { color: var(--blue-soft); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.contact-form.is-sending button { opacity: 0.7; cursor: progress; }

.form-status {
    margin: 0;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.9rem;
    border: 1px solid transparent;
}
.form-status.is-success { background: rgba(56, 214, 118, 0.1); border-color: rgba(56, 214, 118, 0.35); color: #9ff0bf; }
.form-status.is-error { background: rgba(255, 122, 122, 0.1); border-color: rgba(255, 122, 122, 0.35); color: #ffb3b3; }

/* ---------------- Imprint ---------------- */
.imprint {
    padding: 34px 0 30px;
    background: var(--navy-800);
    border-top: 1px solid var(--line);
}
.imprint-title {
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    margin-bottom: 20px;
}
.imprint-title span { color: var(--muted); font-weight: 500; font-size: 0.85rem; }
.imprint-grid {
    display: grid;
    grid-template-columns: repeat(5, auto);
    gap: 16px 30px;
    justify-content: space-between;
}
.imprint-col h3 {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 6px;
}
.imprint-col p { font-size: 0.9rem; color: var(--muted); line-height: 1.5; }
.imprint-col a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.imprint-col a:hover { color: var(--blue); }
.imprint-col .imprint-sub { margin-top: 12px; }
.imprint-trademark {
    margin: 20px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 0.82rem;
    color: var(--muted);
}
.imprint-trademark sup { font-size: 0.6em; }
.imprint-lei { margin-top: 6px; padding-top: 0; border-top: 0; }
.imprint-trademark a { color: var(--blue-soft); text-decoration: none; border-bottom: 1px solid var(--line-strong); margin-left: 4px; white-space: nowrap; }
.imprint-trademark a:hover { color: #fff; }

/* trademark/LEI text on the left, scannable LinkedIn QR code on the right —
   the border/spacing moves here so the two legal paragraphs sit flush left */
.imprint-foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 28px;
    margin: 20px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.imprint-legal { flex: 1 1 auto; min-width: 0; }
.imprint-legal .imprint-trademark { margin: 0; padding-top: 0; border-top: 0; }
.imprint-legal .imprint-lei { margin-top: 6px; }

.imprint-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: none;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.25s ease, transform 0.25s ease;
}
.imprint-qr:hover { color: var(--blue); transform: translateY(-2px); }
/* padding gives the code a quiet zone — the source graphic is traced tight
   to its modules with no margin, so without this it reads as clipped */
.imprint-qr svg { display: block; padding: 8px; box-sizing: content-box; }
.imprint-qr span {
    font-family: var(--font-display);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ceo-name { display: flex; align-items: center; gap: 10px; }
.linkedin-link {
    display: inline-flex;
    border: none !important;
    color: var(--muted);
    transition: color 0.25s ease, transform 0.25s ease;
}
.linkedin-link:hover { color: var(--blue); transform: translateY(-2px); }

/* ---------------- Legal page ---------------- */
.legal { padding: calc(var(--header-h) + 80px) 0 100px; }
.legal-inner { max-width: 820px; }
.legal h1 { margin-bottom: 20px; }
.legal-lead { font-size: 1.1rem; color: var(--muted); margin-bottom: 50px; }
.legal-links { margin-top: 56px; font-size: 0.9rem; color: var(--muted); }
.legal h2 {
    font-size: 1.35rem;
    margin: 48px 0 14px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}
.legal h3 {
    font-size: 1rem;
    margin: 28px 0 10px;
    color: var(--blue-soft);
    letter-spacing: 0.01em;
}
.legal p, .legal li { color: var(--muted); }
.legal ul { padding-left: 20px; margin: 0 0 1em; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--blue); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.legal a:hover { color: var(--blue-soft); }
.legal-back { margin-top: 56px; }
.legal h2[id] { scroll-margin-top: calc(var(--header-h) + 24px); }
.legal-date { margin-top: 40px; font-size: 0.85rem; }
.legal code {
    font-size: 0.88em;
    padding: 1px 6px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
}

/* ---------------- Footer ---------------- */
.site-footer { padding: 16px 0; background: var(--navy-900); border-top: 1px solid var(--line); }
.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.footer-copy { font-size: 0.85rem; color: var(--muted); margin: 0; }
.footer-links { list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; }
.footer-links a {
    font-size: 0.85rem;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.25s ease;
}
.footer-links a:hover { color: var(--blue); }

/* ---------------- Floating actions ---------------- */
.floating-actions {
    position: fixed;
    right: 22px; bottom: 22px;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.floating-btn {
    width: 48px; height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: rgba(13, 64, 103, 0.7);
    backdrop-filter: blur(10px);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.35s ease, transform 0.35s var(--ease),
                visibility 0.35s ease, background-color 0.25s ease;
}
.floating-btn.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.floating-btn:hover { background: var(--blue); color: var(--navy-900); }
.floating-btn svg {
    width: 19px; height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------------- Popup ---------------- */
.popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(2, 10, 18, 0.72);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.popup-overlay[hidden] { display: none; }
.popup-overlay.is-open { opacity: 1; }

.popup-box {
    position: relative;
    width: 100%;
    max-width: 600px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--navy-800);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(77, 163, 255, 0.08);
    transform: translateY(18px) scale(0.96);
    transition: transform 0.5s var(--ease);
}
.popup-overlay.is-open .popup-box { transform: none; }

.popup-link { display: block; }
.popup-image { display: block; width: 100%; height: auto; }

.popup-close {
    position: absolute;
    top: 12px; right: 12px;
    width: 38px; height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    background: rgba(4, 18, 30, 0.6);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.25s var(--ease);
}
.popup-close:hover { background: var(--blue); color: var(--navy-900); transform: rotate(90deg); }

/* ---------------- Consent banner ---------------- */
.consent {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 2100;
    width: min(460px, calc(100% - 40px));
    padding: 22px 24px 18px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: rgba(6, 29, 47, 0.94);
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.75);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.35s ease, transform 0.35s var(--ease);
}
.consent[hidden] { display: none; }
.consent.is-open { opacity: 1; transform: none; }

.consent-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.consent-icon {
    flex: none;
    width: 36px; height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid var(--line-strong);
    background: rgba(77, 163, 255, 0.1);
}
.consent-icon svg {
    width: 18px; height: 18px;
    fill: none;
    stroke: var(--blue);
    stroke-width: 1.8;
    stroke-linecap: round;
}
.consent-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.25;
    margin: 0;
}
.consent-body { font-size: 0.88rem; line-height: 1.55; color: var(--muted); margin: 0 0 12px; }

.consent-points { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; }
.consent-points li {
    position: relative;
    padding-left: 24px;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--text);
}
.consent-points li::before {
    content: "";
    position: absolute;
    left: 2px; top: 0.3em;
    width: 12px; height: 7px;
    border-left: 2px solid var(--blue);
    border-bottom: 2px solid var(--blue);
    transform: rotate(-45deg);
}

/* accept and decline must stay visually equal (TDDDG § 25, DSK guidance):
   a highlighted accept button can void the consent */
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.consent-actions .btn { justify-content: center; }

.consent-link {
    display: inline-block;
    margin-top: 12px;
    font-size: 0.8rem;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid var(--line-strong);
}
.consent-link:hover { color: var(--blue); }

@media (max-width: 620px) {
    .consent { left: 12px; right: 12px; bottom: 12px; width: auto; }
}

/* ---------------- Reveal ---------------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
    :root { --shell: min(1240px, 100% - 36px); }

    .nav-toggle { display: block; }
    .main-nav {
        position: fixed;
        inset: var(--header-h) 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 18px;
        background: rgba(4, 18, 30, 0.96);
        backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--line);
        transform: translateY(-14px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, transform 0.35s var(--ease), visibility 0.3s;
    }
    .main-nav.is-open { opacity: 1; visibility: visible; transform: none; }
    .nav-link { padding: 14px 10px; font-size: 1rem; }
    .nav-indicator { display: none; }
    .header-actions .btn { display: none; }

    .market-grid, .why-grid, .contact-panel { grid-template-columns: 1fr; }

    /* one column: the panel becomes a normal swipe/tap slideshow below the steps */
    .approach-grid { grid-template-columns: 1fr; }
    .flow-step, .flow-step:last-of-type { padding-bottom: 40px; }
    .ca-panel { position: static; }
    .bento { grid-template-columns: 1fr; }
    .card-lg { grid-row: auto; }
    .audience-grid { grid-template-columns: 1fr; }
    .imprint-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-stats { gap: 22px 40px; }
}

@media (max-width: 620px) {
    .flow-step { grid-template-columns: 56px 1fr; column-gap: 18px; }
    .flow-num { width: 56px; height: 56px; font-size: 1rem; }
    .flow-rail { left: 27px; top: 28px; }
    .flow-step h3 { font-size: 1.3rem; margin-top: 8px; }
    .ca-card { padding: 22px 18px 18px; }
    .ca-minimap { top: 54px; left: 14px; width: 32%; padding: 6px; }
    .ca-visual { height: 170px; }
    .ca-fact { padding: 10px 12px; }
    .ca-facts { grid-template-columns: 1fr 1fr; }
    .ca-fact--ind { grid-column: 1 / -1; }
    .ca-fact--insight dd { font-size: 0.92rem; }
    .ca-fact dd { font-size: 1.05rem; }
    .imprint-grid { grid-template-columns: 1fr; }
    .imprint-foot { flex-direction: column; align-items: flex-start; gap: 20px; }
    .imprint-qr { flex-direction: row; align-self: flex-start; }
    .contact-form { grid-template-columns: 1fr; }
    .form-footer .btn { width: 100%; justify-content: center; }
    .hero-cta .btn { width: 100%; justify-content: center; }
    .card, .audience { padding: 28px 24px; }
    .footer-inner { justify-content: center; text-align: center; }

    /* narrow map: zoom in and trim the Atlantic side, city names only */
    .geo-map { width: 125%; margin-left: -15%; }
    .geo-pin-label { padding: 4px 8px; border-radius: 7px; }
    .geo-pin-label strong { font-size: 0.72rem; }
    .geo-pin-label small { display: none; }
    .geo-pin-dot { left: -4px; top: -4px; width: 8px; height: 8px; }
    .geo-pin--hq .geo-pin-dot { left: -5px; top: -5px; width: 10px; height: 10px; }
    .geo-pin--left   .geo-pin-label { right: auto; left: 0; top: auto; bottom: 11px; transform: translateX(-50%); }
    .geo-pin--top    .geo-pin-label { bottom: 11px; }
    .geo-pin--bottom .geo-pin-label { top: 11px; }
    .geo-pin--end    .geo-pin-label { left: auto; right: -14px; transform: none; }
    .geo-pin--west-sm .geo-pin-label { top: 0; bottom: auto; left: auto; right: 11px; transform: translateY(-50%); }
    .geo-legend { padding: 16px 20px; gap: 10px 22px; }
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .hero-title .word { transform: none; opacity: 1; }
    .hero-slide.is-active { opacity: 1; transform: none; }
    [data-reveal] { opacity: 1; transform: none; }
    .ticker-track, .marquee-track { animation: none; }
    .why-badge img { animation: none; }
    .geo * { transition-delay: 0s !important; }
}

/* =========================================================
   BDaaS subpage (bdaas.html)
   Reuses the shared system; only the page-specific pieces live here.
   ========================================================= */

/* ---------------- Nav: link that leaves the one-pager ----------------
   The scrollspy only tracks in-page anchors, so a page link marks itself. */
.nav-link--page { display: inline-flex; align-items: center; gap: 7px; }
.nav-link--page::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.16);
    flex: none;
}
.nav-link--page.is-active::before { background: var(--gold); box-shadow: 0 0 0 3px rgba(242, 181, 29, 0.24); }

/* ---------------- Subpage hero ----------------
   Fills the screen like the landing hero (base .hero already centers its
   content and sets min-height), so a fresh visit or a scroll to the top
   never shows the next section peeking in at the bottom. */
.hero--page {
    padding: calc(var(--header-h) + 78px) 0 96px;
}
.hero--page .hero-media { opacity: 0.6; }

.hero-title-page {
    font-size: clamp(1.95rem, 4.2vw, 3.5rem);
    max-width: 17ch;
    margin-bottom: 22px;
}
.hero-title-page em {
    font-style: normal;
    display: inline;
    background: linear-gradient(100deg, var(--blue-soft), var(--blue) 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero--page .hero-sub {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.05rem, 1.7vw, 1.35rem);
    color: var(--text);
    margin-bottom: 20px;
}
.hero-lead {
    max-width: 620px;
    color: #c3d4e4;
    margin-bottom: 38px;
    text-shadow: 0 1px 14px rgba(4, 18, 30, 0.8);
}

/* the three "more than" lines — the promise, stated by what BDaaS is not */
.more-than {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 48px;
    margin: 0;
    padding-top: 30px;
    border-top: 1px solid var(--line);
}
.more-than li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--muted);
}
.more-than strong { color: var(--text); font-weight: 600; }
.more-icon {
    width: 40px; height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: rgba(77, 163, 255, 0.08);
    flex: none;
}
.more-icon svg {
    width: 19px; height: 19px;
    fill: none;
    stroke: var(--blue);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* right-aligned hero copy — the hero photography reads best with the
   text set against its right edge; kept left on narrow phones, where a
   ragged-right, wrapped paragraph is easier to read */
@media (min-width: 621px) {
    .hero--page .hero-inner { text-align: right; }
    .hero--page .hero-sub,
    .hero--page .hero-lead,
    .hero--page .hero-title-page {
        margin-left: auto;
        margin-right: 0;
    }
    .hero--page .hero-cta { justify-content: flex-end; }
    .hero--page .more-than { justify-content: flex-end; }
}

/* ---------------- 01 The model: chevron stages ---------------- */
.section-model { background: var(--navy-850); border-block: 1px solid var(--line); }

.stages {
    list-style: none;
    display: flex;
    margin: 0 0 clamp(44px, 6vw, 72px);
    padding: 0;
}
.stage {
    --tint: 0.05;
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    margin-left: -22px;
    padding: 30px 22px 30px 46px;
    background:
        linear-gradient(165deg, rgba(77, 163, 255, var(--tint)), rgba(255, 255, 255, 0.015)),
        var(--navy-800);
    /* the notch on the left and the point on the right interlock the row */
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%, 22px 50%);
    /* opacity/transform match the shared reveal, which this rule would otherwise replace */
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.4s var(--ease);
}
.stage:first-child {
    margin-left: 0;
    padding-left: 26px;
    border-radius: var(--radius) 0 0 var(--radius);
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%);
}
.stage:nth-child(1) { --tint: 0.04; }
.stage:nth-child(2) { --tint: 0.07; }
.stage:nth-child(3) { --tint: 0.10; }
.stage:nth-child(4) { --tint: 0.13; }
.stage:nth-child(5) { --tint: 0.17; }
.stage:hover { filter: brightness(1.22); }

.stage-num {
    display: block;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--blue);
    margin-bottom: 14px;
}
.stage-icon {
    display: block;
    margin-bottom: 16px;
}
.stage-icon svg {
    width: 26px; height: 26px;
    fill: none;
    stroke: var(--blue-soft);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.stage h3 {
    font-size: 1.06rem;
    line-height: 1.25;
    margin-bottom: 8px;
}
.stage p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--muted);
}

.statement--wide {
    max-width: 780px;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
}
.statement--wide strong { color: var(--blue-soft); }

/* ---------------- Shared: icon card grids ---------------- */
.sub-head {
    font-size: 1.35rem;
    margin-bottom: 26px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
/* on the landing pages it follows body copy, not a section head */
.market-grid + .sub-head { margin-top: clamp(48px, 6vw, 80px); }

.provides,
.qualifiers {
    display: grid;
    gap: 18px;
}
/* five cards on a six-column grid: three up top, the last two centred below */
.provides { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.provide { grid-column: span 2; }
.provide:nth-child(4) { grid-column: 2 / span 2; }
.provide:nth-child(5) { grid-column: 4 / span 2; }
/* the smaller country pages carry four: three up top, the last one centred */
.provides:has(.provide:nth-child(4):last-child) .provide:nth-child(4) { grid-column: 3 / span 2; }

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

.provide,
.qualifier {
    position: relative;
    padding: 30px 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg, var(--surface-hi), rgba(255, 255, 255, 0.012));
    overflow: hidden;
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), border-color 0.4s ease;
}
.provide:hover,
.qualifier:hover { transform: translateY(-5px); border-color: var(--line-strong); }

.provide .card-icon,
.qualifier .card-icon { width: 46px; height: 46px; margin-bottom: 20px; }
.provide .card-icon svg,
.qualifier .card-icon svg { width: 21px; height: 21px; }

.provide h3 { font-size: 1.02rem; line-height: 1.3; margin-bottom: 10px; }
.qualifier h4 {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0 0 10px;
}
.provide p,
.qualifier p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }

.section-fit { background: var(--navy-850); border-block: 1px solid var(--line); }

/* ---------------- 04 The path ---------------- */
.section-how .flow--wide .flow-text { max-width: 760px; }
.section-how .flow--wide .flow-points { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 26px; }

/* ---------------- 05 Engagement options ---------------- */
.section-options { background: var(--navy-850); border-block: 1px solid var(--line); }

.options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}
.option {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 36px 32px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg, var(--surface-hi), rgba(255, 255, 255, 0.012));
    overflow: hidden;
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), border-color 0.4s ease;
}
.option:hover { transform: translateY(-5px); border-color: var(--line-strong); }

.option-step {
    display: inline-block;
    align-self: flex-start;
    padding: 6px 15px;
    border-radius: 999px;
    background: rgba(77, 163, 255, 0.14);
    border: 1px solid rgba(77, 163, 255, 0.3);
    color: var(--blue-soft);
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 24px;
}
/* the pill tint sits on ::before so the label can carry the metallic gradient */
.option-step--warm {
    position: relative;
    isolation: isolate;
    border-color: rgba(232, 176, 20, 0.38);
    background-image: var(--gold-metal);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: goldShimmer 7s linear infinite;
}
.option-step--warm::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: rgba(232, 176, 20, 0.12);
}

.option .card-icon { margin-bottom: 22px; }
.option h3 { font-size: 1.22rem; line-height: 1.25; margin-bottom: 12px; }
.option-claim {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--blue-soft);
    margin-bottom: 12px;
}
.option p { color: var(--muted); font-size: 0.94rem; }
.option-outcome {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-size: 0.92rem;
    color: var(--text) !important;
}
.option-outcome span {
    display: block;
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 6px;
}
.option--flagship {
    border-color: rgba(232, 176, 20, 0.34);
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(242, 181, 29, 0.09), transparent 62%),
        linear-gradient(165deg, var(--surface-hi), rgba(255, 255, 255, 0.012));
}
.option--flagship:hover { border-color: rgba(242, 181, 29, 0.6); }
.option--flagship .option-outcome span { color: var(--gold); }

/* ---------------- 06 Outcomes ---------------- */
.section-gains::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(70% 55% at 50% 0%, rgba(77, 163, 255, 0.09), transparent 70%);
    pointer-events: none;
}

.gains {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    margin: 0 0 clamp(44px, 5vw, 64px);
    padding: 0;
}
.gain {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 28px 18px;
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease),
                border-color 0.4s ease, background-color 0.4s ease;
}
.gain:hover { border-color: var(--line); background: var(--surface); }
.gain-icon {
    width: 58px; height: 58px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: rgba(77, 163, 255, 0.08);
}
.gain-icon svg {
    width: 25px; height: 25px;
    fill: none;
    stroke: var(--blue);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.gain h3 { font-size: 0.98rem; line-height: 1.35; font-weight: 600; }

.trustbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(20px, 3vw, 40px);
    padding: clamp(22px, 3vw, 32px) clamp(24px, 3.5vw, 42px);
    border: 1px solid var(--line);
    border-left: 3px solid var(--blue);
    border-radius: var(--radius);
    background: var(--surface);
}
.trustbar-seal svg {
    width: 42px; height: 42px;
    fill: none;
    stroke: var(--blue);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.trustbar p {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(0.98rem, 1.5vw, 1.1rem);
    font-weight: 500;
    line-height: 1.5;
    color: var(--text);
}
.trustbar-claim {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    line-height: 2;
    text-align: right;
    color: var(--muted);
    white-space: nowrap;
}

/* ---------------- 07 CTA tail ---------------- */
/* a row of links, not a sentence: the gap is what separates them */
.cta-back {
    margin-top: 44px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 28px;
    text-align: center;
    font-size: 0.92rem;
}
.cta-back a {
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid var(--line-strong);
    transition: color 0.3s ease;
}
.cta-back a:hover { color: var(--blue); }

/* ---------------- Responsive ---------------- */
@media (max-width: 1100px) {
    .gains { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stage { padding: 24px 16px 24px 38px; }
    .stage h3 { font-size: 0.98rem; }
    .stage p { font-size: 0.82rem; }
}

@media (max-width: 900px) {
    .provides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .provide,
    .provide:nth-child(4) { grid-column: auto; }
    .provide:nth-child(5) { grid-column: 1 / -1; }

    .qualifiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .options { grid-template-columns: 1fr; }
    .trustbar { grid-template-columns: auto 1fr; }
    .trustbar-claim { grid-column: 2; text-align: left; }

    /* stacked: the chevron becomes a numbered rail item */
    .stages { display: grid; grid-template-columns: 1fr; gap: 10px; }
    .stage,
    .stage:first-child {
        margin-left: 0;
        padding: 22px 24px;
        clip-path: none;
        border-radius: var(--radius);
        border: 1px solid var(--line);
        border-left: 3px solid var(--blue);
    }
    .stage-icon { position: absolute; top: 22px; right: 22px; margin: 0; }
    .stage h3 { font-size: 1.1rem; }
    .stage p { font-size: 0.9rem; }

    .more-than { gap: 14px 32px; }
    .more-than li { font-size: 0.94rem; }
}

@media (max-width: 620px) {
    .provides,
    .qualifiers,
    .gains { grid-template-columns: 1fr; }
    .provide,
    .provide:nth-child(4),
    .provide:nth-child(5) { grid-column: auto; }
    .provide, .qualifier, .option { padding: 26px 22px; }
    .hero--page .hero-cta .btn { width: 100%; justify-content: center; }
    .more-than { flex-direction: column; gap: 14px; }
    .gain { flex-direction: row; text-align: left; gap: 18px; padding: 16px 14px; }
    .gain-icon { width: 46px; height: 46px; }
    .trustbar { grid-template-columns: 1fr; }
    .trustbar-claim { grid-column: 1; }
}

/* ---------------- Card link into a detail page ---------------- */
.card-link { margin: 18px 0 0; }
.card-link a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
    transition: color 0.3s ease, gap 0.3s var(--ease);
}
.card-link a:hover { color: var(--blue-soft); gap: 12px; }
.card-link svg {
    width: 16px; height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------------- Language switcher ----------------
   Eight languages do not fit a flat row of labels, so the header keeps only the
   current flag and its code; the rest open in a menu below. Each entry carries
   its own endonym, the one label a visitor who reads none of the other
   languages on the page can recognise. */
.lang-switch {
    position: relative;
    flex: none;
}

.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 9px 5px 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted);
    cursor: pointer;
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}
.lang-toggle:hover,
.lang-toggle[aria-expanded="true"] {
    color: #fff;
    border-color: var(--line-strong);
    background: var(--surface-hi);
}

.lang-flag {
    display: block;
    width: 21px;
    height: 16px;
    border-radius: 2px;
    object-fit: cover;
    /* the pale flags (uz, tj, tm) would otherwise dissolve into the header */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.lang-tag {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
}

.lang-caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    opacity: 0.7;
    transition: transform 0.25s var(--ease);
}
.lang-toggle[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }

.lang-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 120;
    min-width: 190px;
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: rgba(6, 24, 38, 0.96);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
.lang-menu[hidden] { display: none; }

.lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 9px;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.lang-option:hover,
.lang-option:focus-visible { color: #fff; background: var(--surface-hi); }
.lang-option[aria-current="true"] {
    background: rgba(77, 163, 255, 0.16);
    color: var(--blue-soft);
}

.lang-name {
    flex: 1;
    font-size: 0.86rem;
}
/* the code repeats the flag for anyone who cannot place it */
.lang-option .lang-tag { font-size: 0.62rem; opacity: 0.6; }

@media (max-width: 900px) {
    /* the CTA button hides on mobile, the switcher stays */
    .lang-switch { margin-right: 4px; }
    .lang-toggle { gap: 5px; padding: 5px 7px 5px 5px; }
    .lang-toggle .lang-tag { font-size: 0.66rem; letter-spacing: 0.06em; }
}

@media (max-width: 380px) {
    /* the flag alone still says which language is active */
    .lang-toggle .lang-tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lang-caret { transition: none; }
}

/* =========================================================
   Central Asia layer: ornaments, country gateway, cross-links
   The flag ornaments (assets/svg/ornaments, trimmed from
   assets/svg/flag_ornaments) are used as masks, so the metallic
   gold that marks Central Asia everywhere else on the site fills
   them at any size. Europe is blue, Central Asia is gold.
   ========================================================= */
.orn {
    display: block;
    background-image: var(--gold-metal);
    background-size: 200% auto;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    animation: goldShimmer 7s linear infinite;
    pointer-events: none;
}
.orn-kz        { -webkit-mask-image: url("assets/svg/ornaments/kz.svg");        mask-image: url("assets/svg/ornaments/kz.svg"); }
.orn-kz-emblem { -webkit-mask-image: url("assets/svg/ornaments/kz-emblem.svg"); mask-image: url("assets/svg/ornaments/kz-emblem.svg"); }
.orn-kz-band   { -webkit-mask-image: url("assets/svg/ornaments/kz-band.svg");   mask-image: url("assets/svg/ornaments/kz-band.svg"); }
.orn-uz        { -webkit-mask-image: url("assets/svg/ornaments/uz.svg");        mask-image: url("assets/svg/ornaments/uz.svg"); }
.orn-tm        { -webkit-mask-image: url("assets/svg/ornaments/tm.svg");        mask-image: url("assets/svg/ornaments/tm.svg"); }
.orn-tm-emblem { -webkit-mask-image: url("assets/svg/ornaments/tm-emblem.svg"); mask-image: url("assets/svg/ornaments/tm-emblem.svg"); }
.orn-tm-band   { -webkit-mask-image: url("assets/svg/ornaments/tm-band.svg");   mask-image: url("assets/svg/ornaments/tm-band.svg"); }
.orn-kg        { -webkit-mask-image: url("assets/svg/ornaments/kg.svg");        mask-image: url("assets/svg/ornaments/kg.svg"); }
.orn-tj        { -webkit-mask-image: url("assets/svg/ornaments/tj.svg");        mask-image: url("assets/svg/ornaments/tj.svg"); }

/* ---------------- Nav: Central Asia dropdown ----------------
   One entry for all five country pages instead of two loose links. */
.nav-drop { position: relative; }
.nav-drop-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 0;
    border-radius: 999px;
    background: none;
    font-family: var(--font-display);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--muted);
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.25s ease, background-color 0.25s ease;
}
.nav-drop-toggle::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.16);
    flex: none;
}
.nav-drop-toggle:hover,
.nav-drop.is-open .nav-drop-toggle { color: #fff; }
.nav-drop-toggle.is-active { color: #fff; background: rgba(77, 163, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(77, 163, 255, 0.3); }
.nav-drop-toggle.is-active::before { background: var(--gold); box-shadow: 0 0 0 3px rgba(242, 181, 29, 0.24); }
.nav-drop.is-open .lang-caret { transform: rotate(180deg); }

.nav-drop-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    z-index: 120;
    min-width: 268px;
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: rgba(6, 24, 38, 0.96);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -6px);
    transition: opacity 0.22s ease, transform 0.3s var(--ease), visibility 0s linear 0.22s;
}
/* invisible bridge, so the pointer can travel from the label into the menu */
.nav-drop-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-drop.is-open .nav-drop-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity 0.22s ease, transform 0.3s var(--ease), visibility 0s;
}
@media (hover: hover) and (min-width: 901px) {
    .nav-drop:hover .nav-drop-menu {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
        transition: opacity 0.22s ease, transform 0.3s var(--ease), visibility 0s;
    }
    .nav-drop:hover .nav-drop-toggle { color: #fff; }
    .nav-drop:hover .lang-caret { transform: rotate(180deg); }
}
.nav-drop-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: 9px;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.nav-drop-item:hover,
.nav-drop-item:focus-visible { color: #fff; background: var(--surface-hi); }
.nav-drop-item[aria-current="page"] { background: rgba(77, 163, 255, 0.16); color: var(--blue-soft); }
.nav-drop-name { font-size: 0.88rem; font-weight: 600; font-family: var(--font-display); }
.nav-drop-cap { font-size: 0.72rem; opacity: 0.65; }

@media (max-width: 900px) {
    .nav-drop-toggle {
        width: 100%;
        padding: 16px 10px 8px;
        font-size: 0.7rem;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--gold-light);
        cursor: default;
        pointer-events: none;
    }
    .nav-drop-toggle.is-active { background: none; box-shadow: none; color: var(--gold-light); }
    .nav-drop-toggle .lang-caret { display: none; }
    .nav-drop-menu {
        position: static;
        min-width: 0;
        padding: 0 0 8px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2px;
        border: 0;
        background: none;
        box-shadow: none;
        backdrop-filter: none;
        opacity: 1;
        transform: none;
        transition: none;
    }
    /* the menu shows and hides with the closed nav panel; "visible" here
       would leave its links tappable, unseen, over the page */
    .nav-drop-menu,
    .nav-drop.is-open .nav-drop-menu { visibility: inherit; }
    .nav-drop-menu::before { display: none; }
    .nav-drop-item { grid-template-columns: auto 1fr; padding: 11px 10px; }
    .nav-drop-cap { display: none; }
}

/* ---------------- Country gateway ----------------
   Five doors into the country pages, each marked with its flag ornament. */
.gateway-wrap { margin-top: clamp(64px, 8vw, 110px); }
.gateway-head {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 26px;
}
.gateway-head .eyebrow { margin: 0; flex: none; }
.gateway-head::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }

.gateway {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}
.gateway--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gateway > li { display: flex; }

.gate {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 28px 22px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(172deg, var(--surface-hi), rgba(255, 255, 255, 0.012) 62%);
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.45s var(--ease), border-color 0.4s ease, box-shadow 0.45s ease, opacity 0.9s var(--ease);
}
/* warm halo the ornament sits in */
.gate::after {
    content: "";
    position: absolute;
    left: 50%; top: 6px;
    width: 220px; height: 170px;
    translate: -50% 0;
    background: radial-gradient(closest-side, rgba(242, 181, 29, 0.16), transparent);
    opacity: 0.55;
    z-index: -1;
    transition: opacity 0.45s ease;
}
.gate:hover,
.gate:focus-visible {
    transform: translateY(-6px);
    border-color: rgba(242, 181, 29, 0.42);
    box-shadow: 0 26px 54px -30px rgba(242, 181, 29, 0.5);
}
.gate:hover::after, .gate:focus-visible::after { opacity: 1; }

.gate-orn {
    width: 100%;
    height: 108px;
    margin: 0 auto 24px;
    opacity: 0.8;
    transition: opacity 0.4s ease, transform 0.6s var(--ease);
}
.gate:hover .gate-orn, .gate:focus-visible .gate-orn { opacity: 1; transform: scale(1.06); }

.gate-head { display: flex; align-items: center; gap: 10px; }
.gate-flag {
    flex: none;
    width: 22px; height: 16px;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.gate-name { font-family: var(--font-display); font-size: 1.14rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
/* body font on purpose: Saira has no Cyrillic */
.gate-native { margin-top: 3px; font-size: 0.84rem; color: var(--muted); }
.gate-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-light);
}
.gate-meta::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(242, 181, 29, 0.16);
}
.gate-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--blue);
    transition: color 0.3s ease;
}
/* two lines tall even when the label fits on one, so the rules line up across the row */
.gate-cta { min-height: calc(18px + 2.7em); }
.gate-spacer { flex: 1; min-height: 20px; }
.gate-cta svg,
.xlink-arrow {
    flex: none;
    width: 16px; height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.35s var(--ease);
}
.gate:hover .gate-cta { color: var(--blue-soft); }
.gate:hover .gate-cta svg { transform: translateX(4px); }

@media (max-width: 1100px) {
    .gateway { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .gateway > li { grid-column: span 2; }
    .gateway > li:nth-child(4) { grid-column: 2 / span 2; }
    .gateway > li:nth-child(5) { grid-column: 4 / span 2; }
    .gateway--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gateway--4 > li, .gateway--4 > li:nth-child(4) { grid-column: auto; }
}
@media (max-width: 620px) {
    .gateway, .gateway--4 { grid-template-columns: 1fr; gap: 12px; }
    .gateway > li, .gateway > li:nth-child(4), .gateway > li:nth-child(5) { grid-column: auto; }
    .gate { display: grid; grid-template-columns: 84px 1fr; column-gap: 18px; align-items: center; padding: 18px; }
    .gate::after { left: 60px; top: 50%; width: 150px; height: 130px; translate: -50% -50%; }
    .gate-orn { grid-row: 1 / span 3; height: 72px; margin: 0; }
    .gate-meta { margin-top: 8px; }
    .gate-cta { grid-column: 2; min-height: 0; padding-top: 12px; margin-top: 12px; font-size: 0.78rem; }
    .gate-spacer { display: none; }
}

/* ---------------- Cross-link cards (services, sectors) ---------------- */
.xlinks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.xlinks > li { display: flex; }
.xlink {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    padding: 22px 22px 22px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg, var(--surface-hi), rgba(255, 255, 255, 0.012));
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.45s var(--ease), border-color 0.4s ease, opacity 0.9s var(--ease);
}
.xlink:hover, .xlink:focus-visible { transform: translateY(-4px); border-color: var(--line-strong); }
.xlink .card-icon { width: 48px; height: 48px; margin: 0; flex: none; }
.xlink .card-icon svg { width: 22px; height: 22px; }
.xlink-body { flex: 1; min-width: 0; }
.xlink-kicker {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--blue);
}
.xlink-title { display: block; font-family: var(--font-display); font-size: 1rem; font-weight: 700; line-height: 1.3; }
.xlink-arrow { color: var(--blue); }
.xlink:hover .xlink-arrow { transform: translateX(4px); }

.section-focus .xlinks { width: var(--shell); margin: clamp(48px, 6vw, 72px) auto 0; }

@media (max-width: 900px) { .xlinks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .xlinks { grid-template-columns: 1fr; gap: 12px; } }

/* approach steps link into the matching service page */
.flow-text p.card-link { margin: 20px 0 0; }
.card-link + .card-link { margin-top: 10px; }

/* ---------------- Subpage: breadcrumb ---------------- */
.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
}
.crumbs li { display: inline-flex; align-items: center; gap: 12px; }
.crumbs li + li::before {
    content: "";
    width: 5px; height: 5px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.55;
}
.crumbs a { color: var(--muted); text-decoration: none; transition: color 0.25s ease; text-shadow: 0 1px 10px rgba(4, 18, 30, 0.8); }
.crumbs a:hover { color: var(--blue-soft); }
.crumbs [aria-current] { color: var(--blue-soft); }
@media (min-width: 621px) { .hero--page .crumbs { justify-content: flex-end; } }

.hero-badge-flag {
    width: 21px; height: 15px;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
    flex: none;
}

/* ---------------- Subpage hero: ornament / glyph ----------------
   The hero copy sits right on wider screens, so the left half is free
   for the country ornament or the service glyph. */
.hero--page .hero-inner { position: relative; z-index: 1; }
.hero-orn,
.hero-glyph {
    position: absolute;
    z-index: 0;
    left: max(40px, calc((100% - 1240px) / 2 + 10px));
    top: 50%;
    width: min(33vw, 420px);
    aspect-ratio: 1;
    translate: 0 -44%;
    pointer-events: none;
}
.hero-orn {
    opacity: 0.62;
    animation: goldShimmer 7s linear infinite, ornIn 1.8s var(--ease) 0.2s both;
}
/* the flag's hoist band runs down the left edge, as it does on the flag */
.hero-band {
    position: absolute;
    z-index: 0;
    top: 0; bottom: 0;
    left: clamp(8px, 1.6vw, 26px);
    width: clamp(22px, 2.4vw, 36px);
    background-image: linear-gradient(180deg, var(--gold-deep), var(--gold) 20%, var(--gold-bright) 32%, var(--gold) 44%, var(--gold-deep) 60%, var(--gold) 78%, var(--gold-light) 90%, var(--gold-deep));
    background-size: 100% 200%;
    -webkit-mask-repeat: repeat-y;
            mask-repeat: repeat-y;
    -webkit-mask-size: 100% auto;
            mask-size: 100% auto;
    -webkit-mask-position: top center;
            mask-position: top center;
    opacity: 0.45;
    animation: goldFlow 7s linear infinite, ornIn 1.6s var(--ease) both;
    pointer-events: none;
}
@keyframes goldFlow {
    from { background-position: 0 0%; }
    to   { background-position: 0 -200%; }
}
@keyframes ornIn {
    from { opacity: 0; scale: 0.94; }
}
/* line art needs more presence than the filled ornaments to read as strongly */
.hero-glyph { opacity: 1; animation: ornIn 1.6s var(--ease) 0.2s both; }
.hero-glyph svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 5px rgba(255, 217, 77, 0.5)) drop-shadow(0 0 18px rgba(242, 181, 29, 0.25)); }
/* widths are in viewBox units (120 across): 0.3 is about 1px at full size */
.hg-ring { fill: none; stroke: url(#hgRing); stroke-width: 0.3; stroke-opacity: 0.8; }
.hg-ring--gold { stroke-opacity: 1; stroke-dasharray: 0.2 2.6; stroke-width: 0.9; stroke-linecap: round; }
.hg-spin { transform-origin: 60px 60px; animation: hgSpin 90s linear infinite; }
@keyframes hgSpin { to { transform: rotate(360deg); } }
.hg-tick { stroke: url(#hgRing); stroke-width: 0.4; }
.hg-icon {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* like the ornaments: a fine bright outline traces, then the gold line fills out */
.hg-trace { stroke: #ffe68a; stroke-width: 0.09; animation: hgFade 0.8s ease 2.6s forwards; }
.hg-trace > * { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: hgDraw 2.2s var(--ease) 0.5s forwards; }
.hg-fill { stroke: url(#hgStroke); stroke-width: 0.09; opacity: 0; animation: hgThicken 1s var(--ease) 2.1s forwards; }
.hg-sparks .hg-fill { opacity: 1; animation: none; stroke-width: 0.26; stroke: #ffe68a; }
@keyframes hgThicken { to { opacity: 1; stroke-width: 0.28; } }
@keyframes hgFade { to { opacity: 0; } }
@keyframes hgDraw { to { stroke-dashoffset: 0; } }

/* the news hero is lower than the others: a smaller glyph keeps clear of the header */
.hero--news .hero-glyph { width: min(26vw, 330px); translate: 0 -40%; }

@media (max-width: 1100px) {
    .hero-orn, .hero-glyph { opacity: 0.4; width: min(40vw, 380px); }
    .hero-glyph { opacity: 0.55; }
}
@media (max-width: 620px) {
    .hero-orn, .hero-glyph {
        left: auto;
        right: -10%;
        top: calc(var(--header-h) + 10px);
        translate: none;
        width: 62vw;
        opacity: 0.24;
    }
    .hero-band { opacity: 0.28; width: 16px; left: 4px; }
}

/* ---------------- Country map card ---------------- */
.presence-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(36px, 5vw, 80px);
    align-items: center;
}
.presence-grid .section-head { margin-bottom: 0; }
.market-grid--map { align-items: start; }

.cmap {
    position: relative;
    isolation: isolate;
    margin: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(80% 70% at 70% 15%, rgba(77, 163, 255, 0.1), transparent 70%),
        var(--navy-800);
    overflow: hidden;
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7);
}
.cmap-stage { position: relative; }
.cmap-svg { display: block; width: 100%; height: auto; }
.cmap-grid { fill: none; stroke: rgba(122, 170, 214, 0.07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cmap-ctx { fill: rgba(151, 174, 196, 0.06); stroke: rgba(122, 170, 214, 0.16); stroke-width: 0.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.cmap-ca { fill: rgba(151, 174, 196, 0.13); stroke: rgba(4, 18, 30, 0.9); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.cmap-self {
    fill: rgba(242, 181, 29, 0.2);
    fill-opacity: 0;
    stroke: var(--gold);
    stroke-width: 0.4;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    filter: drop-shadow(0 0 4px rgba(255, 217, 77, 0.55));
    transition: stroke-dashoffset 2s var(--ease) 0.2s, fill-opacity 1s ease 0.9s;
}
.cmap.is-visible .cmap-self { stroke-dashoffset: 0; fill-opacity: 1; }
.cmap-link { fill: none; stroke: var(--blue); stroke-width: 1.4; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 0.6s ease 1.3s; }
.cmap.is-visible .cmap-link { opacity: 0.8; }

.cmap-orn {
    flex: none;
    width: 76px;
    height: 58px;
    opacity: 0.9;
}
.cmap-pin {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 9px;
    translate: -7px -50%;
    opacity: 0;
    transition: opacity 0.6s ease 0.9s;
}
.cmap.is-visible .cmap-pin { opacity: 1; }
.cmap-pin--hub { transition-delay: 1.2s; }
.cmap-pin--left { flex-direction: row-reverse; translate: calc(-100% + 7px) -50%; }
.cmap-pin i {
    position: relative;
    width: 14px; height: 14px;
    border-radius: 50%;
    flex: none;
    background: #fff;
    border: 3px solid var(--navy-800);
    box-shadow: 0 0 0 1.5px var(--gold), 0 0 12px rgba(255, 217, 77, 0.8);
}
.cmap-pin--hub i { background: var(--blue); box-shadow: 0 0 0 1.5px var(--blue-soft), 0 0 14px rgba(77, 163, 255, 0.9); }
.cmap-pin--hub i::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 1px solid var(--blue);
    animation: pulseRing 2.4s ease-out infinite;
}
.cmap-pin > span {
    display: grid;
    padding: 5px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    background: rgba(4, 18, 30, 0.78);
    backdrop-filter: blur(6px);
    white-space: nowrap;
    line-height: 1.25;
}
.cmap-pin--left > span { text-align: right; }
.cmap-pin b { font-family: var(--font-display); font-size: 0.86rem; color: #fff; }
.cmap-pin small { font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-light); }
.cmap-pin--hub small { color: var(--blue-soft); }

.cmap-foot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 20px 26px 22px;
    border-top: 1px solid var(--line);
    background: linear-gradient(120deg, rgba(242, 181, 29, 0.1), rgba(4, 18, 30, 0.35) 55%);
}
.cmap-kicker {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-light);
}
.cmap-foot p { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--text); }

@media (max-width: 900px) { .presence-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
    .cmap-pin b { font-size: 0.76rem; }
    .cmap-pin small { font-size: 0.56rem; }
    .cmap-long { display: none; }
    .cmap-pin > span { padding: 4px 8px; }
    .cmap-foot { padding: 18px 20px; }
    .cmap-orn { width: 52px; height: 42px; }
}

/* ---------------- Audience cards: country ornaments ---------------- */
.audience-orns {
    position: absolute;
    right: 30px; bottom: 30px;
    display: flex;
    gap: 12px;
    opacity: 0.6;
    transition: opacity 0.4s ease;
}
.audience-orns .orn { width: 58px; height: 46px; }
.audience:hover .audience-orns { opacity: 1; }
@media (max-width: 620px) { .audience-orns { right: 22px; bottom: 24px; } .audience-orns .orn { width: 40px; height: 32px; } }

/* ---------------- Section watermark ---------------- */
.has-orn { isolation: isolate; }
.sec-orn {
    position: absolute;
    z-index: -1;
    left: -4%;
    top: 3%;
    width: min(40vw, 520px);
    aspect-ratio: 1;
    opacity: 0.08;
}

/* ---------------- Subpage: explore further ---------------- */
.section-next {
    padding: clamp(70px, 8vw, 120px) 0;
    background: var(--navy-900);
    border-top: 1px solid var(--line);
}
.section-next .section-head { margin-bottom: 44px; }
.section-next .gateway-wrap { margin-top: 0; }
.section-next .gateway-wrap + .gateway-wrap { margin-top: 52px; }

/* ---------------- Inline cross-links: pills instead of underlined text ---------------- */
.cta-back a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.025);
    transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
.cta-back a:hover { border-color: rgba(77, 163, 255, 0.45); background: rgba(77, 163, 255, 0.08); }
.cta-back + .cta-back { margin-top: 12px; }

/* ---------------- Footer: site directory ---------------- */
.footer-dir {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 32px clamp(24px, 4vw, 56px);
    padding: clamp(48px, 6vw, 72px) 0 clamp(36px, 4vw, 52px);
    border-bottom: 1px solid var(--line);
    margin-bottom: 16px;
}
.footer-dir-brand p { margin: 16px 0 0; max-width: 32ch; font-size: 0.88rem; color: var(--muted); }
.footer-dir-orns { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.footer-dir-orns .orn { width: 36px; height: 30px; opacity: 0.55; }
.footer-dir h2 {
    margin: 0 0 16px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--blue);
}
.footer-dir ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-dir a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.88rem;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.25s ease;
}
.footer-dir a:hover { color: #fff; }
.footer-dir a[aria-current="page"] { color: var(--blue-soft); }
.footer-dir .lang-flag { width: 18px; height: 13px; }
@media (max-width: 900px) { .footer-dir { grid-template-columns: 1fr 1fr; } .footer-dir-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-dir { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
    .orn, .hero-band, .hg-spin { animation: none; }
    .hg-trace { display: none; }
    .hg-fill { opacity: 1; stroke-width: 0.28; animation: none; }
    .cmap-self { stroke-dashoffset: 0; fill-opacity: 1; }
    .cmap-pin, .cmap-link { opacity: 1; }
}
/* the directory above already carries the logo */
.site-footer:has(.footer-dir) .footer-inner > .logo-link { display: none; }

/* =========================================================
   Refinements: rhythm, tile layouts, stronger calls to action,
   self-drawing ornaments
   ========================================================= */

/* ---------------- Section rhythm ----------------
   Two stacked sections used to add up to 300px of empty navy. */
.section { padding: clamp(72px, 8.5vw, 124px) 0; }
.section-head { margin-bottom: clamp(36px, 4.5vw, 56px); }
.section-next { padding: clamp(64px, 7vw, 104px) 0; }
@media (max-width: 620px) {
    .section { padding: 64px 0; }
    .section-next { padding: 56px 0; }
    .section-head { margin-bottom: 32px; }
    .hero--page { padding-bottom: 64px; }
    .gateway-wrap { margin-top: 56px; }
}

/* long statements wrap on phones instead of pushing the page sideways */
@media (max-width: 620px) {
    .statement strong { white-space: normal; }
}

.section { isolation: isolate; }

/* ---------------- Tile layouts ---------------- */
/* six cards: 3 + 3 (the five-card rule used to leave one orphan) */
.provides:has(> .provide:nth-child(6)) > .provide { grid-column: span 2; }
/* four cards: one row */
.provides:has(> .provide:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.provides:has(> .provide:nth-child(4):last-child) > .provide { grid-column: auto; }
@media (max-width: 1100px) {
    .provides:has(> .provide:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .provides:has(> .provide:nth-child(6)) > .provide { grid-column: auto; }
}
/* phones: icon beside the text, a third of the height */
@media (max-width: 620px) {
    .provides:has(> .provide:nth-child(4):last-child) { grid-template-columns: 1fr; }
    .provide {
        display: grid;
        grid-template-columns: 40px 1fr;
        column-gap: 14px;
        align-items: start;
        padding: 18px 18px 18px 16px;
    }
    .provide .card-icon { width: 40px; height: 40px; margin: 0; grid-row: 1 / span 2; border-radius: 11px; }
    .provide .card-icon svg { width: 19px; height: 19px; }
    .provide h3 { margin: 2px 0 6px; }
    .provides { gap: 10px; }
}

/* lists and FAQs use the full width: two columns, a lone last item spans both */
@media (min-width: 901px) {
    .faq { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .faq > .faq-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.faq-item { position: relative; transition: border-color 0.4s ease, transform 0.45s var(--ease), opacity 0.9s var(--ease); }
.faq-item::before {
    content: "";
    position: absolute;
    left: -1px; top: 22px; bottom: 22px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--blue), var(--gold));
    opacity: 0.55;
}
.faq-item:hover { border-color: var(--line-strong); }
.faq-item h3 { line-height: 1.3; }
@media (max-width: 620px) {
    .faq-item { padding: 20px 20px 20px 22px; }
}

/* "what this is / is not" lines: icon + one text block (text used to split into flex items) */
.more-than li { align-items: center; }
.more-text { flex: 1; min-width: 0; }
@media (max-width: 620px) {
    .more-than li { align-items: flex-start; }
    .more-icon { width: 36px; height: 36px; }
}

/* text-only sections: heading left, copy right */
@media (min-width: 901px) {
    .section > .container:has(> .section-head + .market-copy):not(:has(.market-grid)) {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        column-gap: clamp(40px, 6vw, 96px);
        align-items: start;
    }
    .section > .container:has(> .section-head + .market-copy):not(:has(.market-grid)) > .section-head {
        margin-bottom: 0;
    }
    .section > .container:has(> .section-head + .market-copy):not(:has(.market-grid)) > :not(.section-head):not(.market-copy) { grid-column: 1 / -1; }
}
/* the closing statement of a text section becomes a card */
.market-copy .statement {
    margin-top: 32px;
    padding: 22px 24px 22px 26px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--blue);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: linear-gradient(110deg, rgba(77, 163, 255, 0.1), rgba(255, 255, 255, 0.015) 70%);
}

/* cross-link cards: an orphan row is centred, like the service tiles */
.xlinks { display: flex; flex-wrap: wrap; justify-content: center; }
.xlinks > li { flex: 0 1 calc((100% - 32px) / 3); }
@media (max-width: 900px) { .xlinks > li { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 620px) { .xlinks > li { flex-basis: 100%; } }

/* ---------------- Calls to action ----------------
   Every link into another page reads as a button, with an arrow chip
   that fills on hover. */
.cta-back a {
    gap: 12px;
    padding: 8px 8px 8px 20px;
    border: 1px solid rgba(77, 163, 255, 0.4);
    background: rgba(77, 163, 255, 0.09);
    color: var(--blue-soft);
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    box-shadow: 0 10px 28px -18px rgba(77, 163, 255, 0.8);
}
.cta-back a::after {
    content: "";
    flex: none;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304121e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 5l7 7-7 7'/%3E%3C/svg%3E") center / 15px no-repeat;
    transition: transform 0.35s var(--ease), background-color 0.3s ease;
}
.cta-back a.is-back { flex-direction: row-reverse; padding: 8px 20px 8px 8px; }
.cta-back a.is-back::after { transform: scaleX(-1); }
.cta-back a:hover { color: #fff; border-color: var(--blue); background: rgba(77, 163, 255, 0.18); }
.cta-back a:hover::after { transform: translateX(3px); background-color: var(--blue-soft); }
.cta-back a.is-back:hover::after { transform: scaleX(-1) translateX(3px); }
.cta-back + .cta-back { margin-top: 14px; }
@media (max-width: 620px) {
    .cta-back { flex-direction: column; align-items: stretch; }
    .cta-back a { justify-content: space-between; font-size: 0.86rem; }
}

.card-link a {
    gap: 12px;
    padding: 7px 7px 7px 16px;
    border: 1px solid rgba(77, 163, 255, 0.38);
    border-radius: 999px;
    background: rgba(77, 163, 255, 0.08);
    color: var(--blue-soft);
    transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
.card-link a svg {
    width: 28px; height: 28px;
    padding: 7px;
    border-radius: 50%;
    background: var(--blue);
    stroke: var(--navy-900);
    stroke-width: 2.4;
    transition: transform 0.35s var(--ease);
}
.card-link a:hover { gap: 12px; color: #fff; border-color: var(--blue); background: rgba(77, 163, 255, 0.18); }
.card-link a:hover svg { transform: translateX(3px); }
.card-link + .card-link { margin-top: 10px; }

.gate-cta svg,
.xlink-arrow {
    width: 30px; height: 30px;
    padding: 7px;
    border-radius: 50%;
    border: 1px solid rgba(77, 163, 255, 0.45);
    transition: transform 0.35s var(--ease), background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.gate:hover .gate-cta svg,
.gate:focus-visible .gate-cta svg,
.xlink:hover .xlink-arrow,
.xlink:focus-visible .xlink-arrow { background: var(--blue); border-color: var(--blue); color: var(--navy-900); transform: translateX(3px); }
.gate-cta { color: var(--blue-soft); }

/* ---------------- Self-drawing ornaments ----------------
   script.js inlines the ornament SVG, one path per shape. Each shape
   traces its outline in bright gold, then fills with the metal. */
.orn.is-inline {
    background: none;
    -webkit-mask: none;
            mask: none;
    animation: none;
}
.orn.is-inline > svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* filled shapes (holes included) fade in on their own cue; the outlines trace
   first and fade once their shape is filled. --ob-k scales the durations. */
.ob-f { fill-opacity: 0; }
.ob-s {
    fill: none;
    stroke: #ffe68a;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
}
/* radial reveal: the clip circle grows from the centre of the ornament */
.ob-f.is-radial { fill-opacity: 1; }
.ob-clip { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.orn.is-built .ob-f.is-radial { animation: none; }
.orn.is-built .ob-clip { animation: obGrow var(--fd, 1.6s) cubic-bezier(0.35, 0.1, 0.55, 1) var(--df, 0s) forwards; }
@keyframes obGrow { to { transform: scale(1); } }
.orn.is-built .ob-f { animation: obFill calc(0.8s * var(--ob-k, 1)) ease var(--df, 0s) forwards; }
.orn.is-built .ob-s {
    animation:
        obDraw calc(1s * var(--ob-k, 1)) cubic-bezier(0.45, 0, 0.2, 1) var(--d, 0s) forwards,
        obFade 0.6s ease var(--dfade, 1s) forwards;
}
.orn.is-inline > svg { filter: drop-shadow(0 0 6px rgba(255, 217, 77, 0.35)); }
.gate-orn.is-inline > svg { filter: none; }
@keyframes obDraw { to { stroke-dashoffset: 0; } }
@keyframes obFill { to { fill-opacity: 1; } }
@keyframes obFade { to { stroke-opacity: 0; } }
.hero-orn { --ob-speed: 1.35; }
.gate-orn { --ob-speed: 0.8; }
.hero-orns .orn { --ob-speed: 0.85; }
.audience-orns .orn, .cmap-orn { --ob-speed: 0.8; }
.hero-orn.is-inline { animation: none; opacity: 0.75; }
/* the Kazakh eagle flies on once built: the wings beat about their roots, and
   the bird lifts on each downstroke and settles on the upstroke */
.hero-orn.is-built .ob-bird { animation: obBob 2.2s ease-in-out var(--ob-loop, 4s) infinite; }
.hero-orn.is-built .ob-wl { animation: obFlapL 2.2s ease-in-out var(--ob-loop, 4s) infinite; }
.hero-orn.is-built .ob-wr { animation: obFlapR 2.2s ease-in-out var(--ob-loop, 4s) infinite; }
@keyframes obBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1.8px); }
}
@keyframes obFlapL {
    0%, 100% { transform: rotate(0deg); }
    42% { transform: rotate(-20deg); }
}
@keyframes obFlapR {
    0%, 100% { transform: rotate(0deg); }
    42% { transform: rotate(20deg); }
}
/* effects drawn only for the motion (see build() in script.js): hidden at rest,
   and in the small ornaments, which do not move */
.ob-fx:not(.is-glow) { fill: none; stroke-linecap: round; }
.ob-meteor, .ob-flare, .ob-trail, .ob-impact { opacity: 0; }
.ob-meteor .ob-fx:not(.is-glow) { stroke-width: 1.4; }
.ob-trail .ob-fx { stroke-width: 0.35; }

/* Uzbekistan, shooting stars: now and then a meteor with a golden tail streaks
   across (--i: its cue, --mx/--my: its flight), and the star it brushes past
   flares. Seven in a 14s cycle, each on its own path; a flight takes 1.4s, fading in and out. */
.hero-orn.is-built .ob-meteor { animation: obMeteor 14s linear calc(var(--ob-loop, 4s) + var(--i, 0) * 1s) infinite; }
.hero-orn.is-built .ob-flare { animation: obFlare 14s linear calc(var(--ob-loop, 4s) + var(--i, 0) * 1s) infinite; }
@keyframes obMeteor {
    0% { opacity: 0; transform: translate(0, 0); }
    3.2% { opacity: 1; }
    6.8% { opacity: 1; }
    10%, 100% { opacity: 0; transform: translate(var(--mx, 0), var(--my, 0)); }
}
@keyframes obFlare {
    0% { opacity: 0; transform: scale(0) rotate(0deg); animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1); }
    1.67% { opacity: 1; transform: scale(1) rotate(45deg); animation-timing-function: ease-in; }
    5.1%, 100% { opacity: 0; transform: scale(0.2) rotate(90deg); }
}

/* Turkmenistan, the turning sky: the stars circle slowly within the crescent's
   embrace and, as in a long exposure, draw fading arcs behind them */
.hero-orn { --sweep: 5s; }   /* one turn of the sweep: the streaks below run on the same value */
.hero-orn.is-built .ob-orbit { animation: obSweep var(--sweep) cubic-bezier(0.62, 0, 0.38, 1) var(--ob-loop, 4s) infinite; }
/* a sweep: the formation starts slowly, is fastest as it passes the crescent
   (half way round) and slows again to the turning point */
@keyframes obSweep { to { transform: rotate(360deg); } }
.hero-orn.is-built .ob-trail { animation: obFadeIn 4s ease var(--ob-loop, 4s) forwards; }
/* the crescent is jostled by the draught of the stars rushing past: still while
   they are slow, knocked as they reach their top speed (half way round), then
   swaying to rest, each swing smaller. Same duration as the sweep. */
.hero-orn.is-built .ob-jostle { animation: obJostle var(--sweep) ease-in-out var(--ob-loop, 4s) infinite; }
@keyframes obJostle {
    0%, 36% { transform: rotate(0deg) translateX(0); }
    45% { transform: rotate(-2.4deg) translateX(0.5px); }
    53% { transform: rotate(2.8deg) translateX(-0.4px); }
    61% { transform: rotate(-2deg) translateX(0.3px); }
    69% { transform: rotate(1.3deg) translateX(-0.2px); }
    77% { transform: rotate(-0.7deg); }
    85% { transform: rotate(0.3deg); }
    93%, 100% { transform: rotate(0deg) translateX(0); }
}
/* the streaks lengthen with the speed: none at rest, the whole arc at the peak
   of the sweep (the same duration, --sweep, and curve as obSweep, sampled over its time) */
.ob-trail .ob-fx { stroke-linecap: butt; stroke-dasharray: 1 1; animation: obStreak var(--sweep) linear var(--ob-loop, 4s) infinite; }
@keyframes obStreak {
    0% { stroke-dashoffset: -1.03; }
    5% { stroke-dashoffset: -0.993; }
    10% { stroke-dashoffset: -0.948; }
    15% { stroke-dashoffset: -0.893; }
    20% { stroke-dashoffset: -0.825; }
    25% { stroke-dashoffset: -0.737; }
    30% { stroke-dashoffset: -0.623; }
    35% { stroke-dashoffset: -0.474; }
    40% { stroke-dashoffset: -0.286; }
    45% { stroke-dashoffset: -0.093; }
    50% { stroke-dashoffset: 0; }
    55% { stroke-dashoffset: -0.093; }
    60% { stroke-dashoffset: -0.286; }
    65% { stroke-dashoffset: -0.474; }
    70% { stroke-dashoffset: -0.623; }
    75% { stroke-dashoffset: -0.737; }
    80% { stroke-dashoffset: -0.825; }
    85% { stroke-dashoffset: -0.893; }
    90% { stroke-dashoffset: -0.948; }
    95% { stroke-dashoffset: -0.993; }
    100% { stroke-dashoffset: -1.03; }
}
@keyframes obFadeIn { to { opacity: 1; } }
/* Kyrgyzstan: the ring of rays turns slowly about the disc, the tunduk holds still */
.hero-orn.is-built .ob-turn { animation: obTurn 60s linear var(--ob-loop, 4s) infinite; }
@keyframes obTurn { to { transform: rotate(360deg); } }
/* Tajikistan: the crown, its stars with it, is lifted, straightened and set
   down, and impact lines flash out from both ends of its base; once it sits,
   the stars zoom pair by pair from the bottom of the arc to the top, as they
   were built. All share one 6s cycle, so they stay in step. */
.ob-impact .ob-fx { stroke-width: 1.5; }
.hero-orn.is-built .ob-crown { animation: obCrown 6s ease-in-out var(--ob-loop, 4s) infinite; }
.hero-orn.is-built .ob-impact { animation: obImpact 6s linear var(--ob-loop, 4s) infinite; }
@keyframes obImpact {
    0%, 23.6% { opacity: 0; transform: scale(0.5); }
    24.2% { opacity: 1; transform: scale(0.65); animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
    29% { opacity: 1; transform: scale(1.05); animation-timing-function: ease-in; }
    34%, 100% { opacity: 0; transform: scale(1.2); }
}
.hero-orn.is-built .ob-zoom { animation: obZoom 6s ease-in-out calc(var(--ob-loop, 4s) + 1.9s + var(--i, 0) * 0.3s) infinite; }
@keyframes obCrown {
    0%, 30%, 100% { transform: translateY(0) rotate(0deg); }
    10% { transform: translateY(-8px) rotate(-3deg); }
    17% { transform: translateY(-8px) rotate(0deg); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); }
    24% { transform: translateY(0) rotate(0deg); }
    27% { transform: translateY(-0.8px) rotate(0deg); }
}
@keyframes obZoom {
    0%, 14%, 100% { transform: scale(1); }
    6% { transform: scale(1.35); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-orn.is-built .ob-bird, .hero-orn.is-built .ob-wl, .hero-orn.is-built .ob-wr,
    .hero-orn.is-built .ob-turn, .hero-orn.is-built .ob-crown, .hero-orn.is-built .ob-zoom, .hero-orn.is-built .ob-impact,
    .hero-orn.is-built .ob-meteor, .hero-orn.is-built .ob-flare, .hero-orn.is-built .ob-orbit, .hero-orn.is-built .ob-jostle, .hero-orn.is-built .ob-trail, .hero-orn.is-built .ob-trail .ob-fx { animation: none; }
}
@media (max-width: 1100px) { .hero-orn.is-inline { opacity: 0.4; } }
@media (max-width: 620px) { .hero-orn.is-inline { opacity: 0.24; } }
/* outline width in screen pixels, converted by script.js */
.orn { --ob-line: 0.9; }
.hero-orn { --ob-line: 1.2; }

/* landing hero: the five ornaments assemble along the bottom edge */
.hero-orns {
    position: absolute;
    z-index: 2;
    right: max(24px, calc((100% - var(--shell)) / 2));
    bottom: 120px;
    display: flex;
    align-items: flex-end;
    gap: 22px;
    pointer-events: none;
}
.hero-orns .orn { width: 56px; height: 48px; opacity: 0.9; }
@media (max-width: 1100px) { .hero-orns { display: none; } }

@media (prefers-reduced-motion: reduce) {
    .ob-f { fill-opacity: 1; }
    .ob-s { display: none; }
    .ob-clip { transform: none; }
    .orn.is-built .ob-f, .orn.is-built .ob-s, .orn.is-built .ob-clip { animation: none; }
}
/* four cards: beats the older "centre the fourth card" rule, which is more specific */
.provides:has(> .provide:nth-child(4):last-child) > .provide.provide:nth-child(n) { grid-column: auto; }

/* ---------------- Nav: page links only ----------------
   Services, Industrial Focus and Central Asia open as menus, BDaaS links directly. */
.main-nav { gap: 2px; }
.nav-drop-ico {
    flex: none;
    width: 18px; height: 18px;
    fill: none;
    stroke: var(--blue);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.nav-drop-item[aria-current="page"] .nav-drop-ico { stroke: var(--blue-soft); }
.nav-drop-item:has(.nav-drop-ico) { grid-template-columns: auto 1fr; }
/* services and sectors carry icons, not flags: the dots all match */
.nav-drop:has(#navServices) .nav-drop-toggle::before,
.nav-drop:has(#navSectors) .nav-drop-toggle::before { background: var(--blue); box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.16); }
/* the current page's dot is gold, even inside a Services/Sectors dropdown
   (a :has() selector outranks a plain compound one, so this needs saying
   again here) */
.nav-drop:has(#navServices) .nav-drop-toggle.is-active::before,
.nav-drop:has(#navSectors) .nav-drop-toggle.is-active::before { background: var(--gold); box-shadow: 0 0 0 3px rgba(242, 181, 29, 0.24); }
@media (min-width: 901px) {
    .nav-drop-menu { min-width: 250px; }
}
@media (max-width: 900px) {
    .main-nav { max-height: calc(100svh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 24px; }
    .nav-drop:has(#navServices) .nav-drop-menu,
    .nav-drop:has(#navSectors) .nav-drop-menu { grid-template-columns: 1fr; }
    .nav-drop-item { white-space: normal; }
    .main-nav > .nav-link--page { margin-top: 10px; border-top: 1px solid var(--line); border-radius: 0; padding-top: 18px; }
}


/* =========================================================
   News / Insights
   news.html (every language) is generated by bin/news/build_news.py
   from the AETEK INSIGHTS texts; the landing hero shows the two
   newest headlines.
   ========================================================= */

/* ---------------- Nav + footer: News stands on its own ---------------- */
/* five entries between logo and actions: tighter on small laptops, and the
   dots give way first where it is tightest */
@media (min-width: 901px) and (max-width: 1240px) {
    .header-inner { gap: 14px; }
    .main-nav { gap: 0; }
    .main-nav .nav-link,
    .main-nav .nav-drop-toggle { padding-inline: 9px; font-size: 0.82rem; }
    .header-actions .btn-sm { padding-inline: 16px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
    .site-logo { height: 12px; }
    .main-nav .nav-link,
    .main-nav .nav-drop-toggle { padding-inline: 7px; gap: 5px; }
    .main-nav .nav-link--page::before,
    .main-nav .nav-drop-toggle::before { display: none; }
}
@media (max-width: 900px) {
    .main-nav > .nav-link--news { margin-top: 0; border-top: 0; padding-top: 14px; }
}

.footer-dir-pages { display: grid; justify-items: start; gap: 14px; margin-top: 34px; }
.footer-dir a.footer-dir-page {
    gap: 8px;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--blue);
}
.footer-dir a.footer-dir-page:hover { color: #fff; }
.footer-dir a.footer-dir-page[aria-current="page"] { color: var(--blue-soft); }

/* imprint: the company carries its LinkedIn page like the managing director */
.company-name { display: flex; align-items: center; gap: 10px; }

/* ---------------- Landing hero: headline and figures left, latest news right ----------------
   The panel closes flush with the four figures, so both end on one line. */
.hero-inner--news {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    grid-template-areas:
        "badge news"
        "title news"
        "stats news";
    column-gap: clamp(32px, 5vw, 80px);
    align-items: end;
}
.hero-inner--news > .hero-badge { grid-area: badge; justify-self: start; align-self: start; }
.hero-inner--news > .hero-title { grid-area: title; margin-bottom: 0; }
/* the headline shares its width with the panel, one step smaller so the
   longer translations still break into three lines */
.hero-inner--news .hero-title { font-size: clamp(2.5rem, 5.1vw, 4.8rem); }
.hero-inner--news > .hero-stats { grid-area: stats; margin-top: clamp(40px, 6vh, 64px); }
.hero-inner--news > .hero-news { grid-area: news; }

/* frosted glass, like the Europe ⇄ Central Asia badge */
.hero-news {
    padding: 20px 24px 8px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.hero-news-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
/* the category reads like the hero badge, one size down */
.hero-news-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 11px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--blue-soft);
}
.hero-news-badge .pulse-dot { width: 6px; height: 6px; }
.hero-news-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.25s ease;
}
.hero-news-all:hover { color: #fff; }
.hero-news svg {
    flex: none;
    width: 14px; height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s var(--ease);
}
.hero-news-all:hover svg { transform: translateX(3px); }
.hero-news-title {
    margin: 0 0 6px;
    font-size: clamp(1.7rem, 2.4vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}
.hero-news-list { list-style: none; margin: 0; padding: 0; }
.hero-news-list li + li { border-top: 1px solid var(--line); }
.hero-news-list a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    align-items: center;
    padding: 13px 0;
    text-decoration: none;
}
.hero-news-list time {
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 3px;
}
.hero-news-name {
    grid-column: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 0.96rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
    transition: color 0.25s ease;
}
.hero-news-list svg { grid-column: 2; grid-row: 1 / span 2; color: var(--muted); }
.hero-news-list a:hover .hero-news-name { color: #fff; }
.hero-news-list a:hover svg { color: var(--blue); transform: translateX(3px); }

@media (max-width: 1100px) {
    .hero-inner--news {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "badge" "title" "stats" "news";
    }
    .hero-inner--news > .hero-news { margin-top: 36px; max-width: 540px; }
}
@media (max-width: 620px) {
    .hero-news { padding: 18px 18px 6px; }
}

/* ---------------- News page ---------------- */
.news-lang-note { margin: -18px 0 0; font-size: 0.85rem; color: var(--muted); }
.section-news { padding-top: clamp(56px, 7vw, 96px); }

.news-list {
    display: grid;
    gap: 14px;
    max-width: 1100px;
    margin-inline: auto;
}
.news-item {
    --news-aside: 200px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg, var(--surface-hi), rgba(255, 255, 255, 0.012));
    scroll-margin-top: calc(var(--header-h) + 20px);
    transition: border-color 0.3s ease;
    interpolate-size: allow-keywords;
}
.news-item:hover,
.news-item[open] { border-color: var(--line-strong); }

/* an article on a page of its own: the body is always open, no summary line above it */
.news-item--page .news-body { padding-top: 30px; }

.news-summary {
    display: grid;
    grid-template-columns: var(--news-aside) minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 28px;
    padding: 26px 30px;
    list-style: none;
    cursor: pointer;
    border-radius: var(--radius-lg);
}
.news-summary::-webkit-details-marker { display: none; }
.news-summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.news-date {
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--blue);
}
.news-title {
    font-size: clamp(1.1rem, 1.8vw, 1.45rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    text-wrap: balance;
    transition: color 0.25s ease;
}
.news-summary:hover .news-title { color: #fff; }
.news-toggle {
    width: 42px; height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    color: var(--blue-soft);
    transition: transform 0.45s var(--ease), background-color 0.3s ease, border-color 0.3s ease;
}
.news-toggle svg,
.news-foot svg {
    width: 18px; height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.news-summary:hover .news-toggle { border-color: var(--blue); background: rgba(77, 163, 255, 0.1); }
.news-item[open] .news-toggle { transform: rotate(180deg); border-color: var(--blue); background: rgba(77, 163, 255, 0.14); }

/* the open/close slide runs where the browser can animate to auto height;
   elsewhere the article simply appears */
/* clip, not hidden: a hidden box would become the sticky figure's scroll
   container and hold the image down by its whole sticky offset */
.news-item::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 0.55s var(--ease), content-visibility 0.55s allow-discrete;
}
.news-item[open]::details-content { block-size: auto; }

.news-body {
    display: grid;
    grid-template-columns: var(--news-aside) minmax(0, 1fr);
    gap: 28px;
    padding: 4px 30px 30px;
}
/* starts level with the text; further images stack below the first. A single
   image stays in view while a long article is read — a stack would be taller
   than the screen, so it scrolls with the text */
.news-figure {
    display: grid;
    gap: 14px;
    align-self: start;
    margin: 0;
}
.news-figure:not(:has(img + img)) {
    position: sticky;
    top: calc(var(--header-h) + 24px);
}
.news-figure img {
    width: 100%;
    height: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.news-text { grid-column: 2; max-width: 70ch; }
.news-text p { color: #c3d4e4; line-height: 1.75; }
.news-text h3 {
    margin: 34px 0 12px;
    font-size: 1.15rem;
    color: #fff;
}
.news-text p a { color: var(--blue-soft); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.news-text p a:hover { color: #fff; }

.news-timeline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--gold);
}
.news-timeline li:not(:last-child)::after { content: "→"; margin-left: 10px; font-weight: 400; color: var(--muted); }
.news-timeline li:last-child { color: var(--blue); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.85em; align-self: center; }

.news-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}
.news-source,
.news-close {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.news-foot svg { width: 15px; height: 15px; }
.news-close { margin-left: auto; }
.news-source:hover,
.news-close:hover { border-color: var(--blue); background: rgba(77, 163, 255, 0.1); color: #fff; }

.section-news .cta-back { max-width: 1100px; margin: 48px auto 0; }

@media (max-width: 760px) {
    .news-summary {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "date toggle" "title title";
        padding: 20px 20px 22px;
    }
    .news-date { grid-area: date; }
    .news-toggle { grid-area: toggle; width: 38px; height: 38px; }
    .news-title { grid-area: title; }
    .news-body { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 0 20px 24px; }
    .news-figure { max-width: 420px; }
    .news-figure:not(:has(img + img)) { position: static; }
    /* several images: two per row, the first one full width */
    .news-figure:has(img + img) { grid-template-columns: 1fr 1fr; max-width: none; gap: 10px; }
    .news-figure:has(img + img) img:first-child { grid-column: 1 / -1; }
    .news-text { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .news-item::details-content { transition: none; }
    .news-toggle { transition: none; }
}

/* ---------------- Scroll cue: in the free margin, never over the content ----------------
   Centred in the right-hand gutter outside the content frame; where that
   gutter is too narrow to hold it, the cue is left out. */
.scroll-cue { right: calc((100% - var(--shell)) / 4); transform: translateX(50%); }
@media (max-width: 1459px) { .scroll-cue { display: none; } }

/* =========================================================
   Landing intro (intro.js)
   Europe ⇄ Central Asia in gold line art, played over a darkened hero
   when the landing page is opened from outside; it fades out where it
   stands and the hero comes in.
   ========================================================= */
.hero--intro .hero-inner { position: relative; z-index: 1; }

.hero-intro {
    position: absolute;
    z-index: 0;
    left: 0; top: 0; width: 0; height: 0;
    visibility: hidden;
    pointer-events: none;
    --k: 1;
    transition: opacity 1.1s ease;
}
.hero-intro.is-ready { visibility: visible; }
.hero-intro.is-leaving { opacity: 0; }
.hero-intro svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------------- The stage ---------------- */
.hero--intro::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(90% 80% at 50% 48%, rgba(4, 18, 30, 0.6), rgba(4, 18, 30, 0.94));
    opacity: 0;
    transition: opacity 1.2s ease;
    pointer-events: none;
}
.intro-stage .hero--intro::before { opacity: 1; }
.intro-stage .hero-intro { z-index: 4; }
/* the copy waits for the handover; should the script never run, it shows
   up on its own after a few seconds */
.intro-stage .hero--intro .hero-inner,
.intro-stage .hero--intro .scroll-cue {
    opacity: 0;
    visibility: hidden;
    animation: introFailsafe 0s linear 9s forwards;
}
.intro-stage .hero--intro .hero-title .word { animation: introFailsafeWord 0s linear 9s forwards; }
@keyframes introFailsafe { to { opacity: 1; visibility: visible; } }
@keyframes introFailsafeWord { to { opacity: 1; transform: none; } }

/* the handover: the headline builds as usual, the rest follows it in */
.intro-enter .hero--intro .hero-badge { animation: introUp 0.9s var(--ease) 0.05s both; }
.intro-enter .hero--intro .hero-stats { animation: introUp 0.9s var(--ease) 0.5s both; }
.intro-enter .hero--intro .hero-news { animation: introUp 0.9s var(--ease) 0.65s both; }
.intro-enter .hero--intro .scroll-cue { animation: introUp 0.9s var(--ease) 0.9s both; }
@keyframes introUp { from { opacity: 0; translate: 0 22px; } }

.intro-skip {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: clamp(16px, 3.2vh, 34px);
    translate: -50% 0;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 18px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.25s ease, border-color 0.25s ease;
}
.intro-skip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.intro-skip:hover { color: #fff; border-color: var(--blue); }
.intro-stage .intro-skip:not([hidden]) { display: inline-flex; animation: introFade 0.6s ease 1s both; }
@keyframes introFade { from { opacity: 0; } }

/* ---------------- The picture ---------------- */
.hero-intro .ix-station {
    font-family: var(--font-display);
    font-weight: 600;
    fill: #e9f1f8;
    paint-order: stroke;
    stroke: rgba(4, 18, 30, 0.8);
    stroke-width: 5px;
    stroke-linejoin: round;
}
.hero-intro .ix-hub {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.22em;
}

/* every stroke is measured as 1 (pathLength), so one dash draws it */
.hero-intro .ix-draw,
.hero-intro .ix-trace { stroke-dasharray: 1 1; }
.hero-intro .ix-pop,
.hero-intro .ix-pulse,
.hero-intro .ix-spin { transform-box: fill-box; transform-origin: center; }
.hero-intro .ix-pulse { opacity: 0; }
.hero-intro.is-done .ix-trace { stroke-opacity: 0; }

.hero-intro.is-playing .ix-draw { animation: ixDraw calc(var(--t, 1s) * var(--k)) cubic-bezier(0.65, 0, 0.35, 1) calc(var(--d, 0s) * var(--k)) both; }
.hero-intro.is-playing .ix-draw.ix-lin { animation-timing-function: linear; }
.hero-intro.is-playing .ix-trace {
    animation:
        ixDraw calc(var(--t, 1s) * var(--k)) cubic-bezier(0.65, 0, 0.35, 1) calc(var(--d, 0s) * var(--k)) both,
        ixOut calc(0.7s * var(--k)) ease calc(var(--d2, 1s) * var(--k)) both;
}
.hero-intro.is-playing .ix-fade { animation: ixFade calc(var(--t, 1s) * var(--k)) ease calc(var(--d, 0s) * var(--k)) both; }
.hero-intro.is-playing .ix-fill { animation: ixFill calc(var(--t, 1s) * var(--k)) ease calc(var(--d, 0s) * var(--k)) both; }
.hero-intro.is-playing .ix-pop { animation: ixPop calc(var(--t, 0.5s) * var(--k)) cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--d, 0s) * var(--k)) both; }
.hero-intro.is-playing .ix-rise { animation: ixRise calc(var(--t, 0.6s) * var(--k)) var(--ease) calc(var(--d, 0s) * var(--k)) both; }
.hero-intro.is-playing .ix-pulse { animation: ixPulse calc(1.5s * var(--k)) ease-out calc(var(--d, 0s) * var(--k)) forwards; }
.hero-intro.is-ready .ix-spin { animation: ixSpin 150s linear infinite; }
.hero-intro.is-paused .ix-spin { animation-play-state: paused; }

/* hidden until the pen sets down: a zero-length dash with a round cap would
   show as a dot before the line starts */
@keyframes ixDraw { from { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: 1; } to { stroke-dashoffset: 0; } }
@keyframes ixOut { to { stroke-opacity: 0; } }
@keyframes ixFade { from { opacity: 0; } }
@keyframes ixFill { from { fill-opacity: 0; } }
@keyframes ixPop { from { opacity: 0; transform: scale(0.2); } }
@keyframes ixRise { from { opacity: 0; transform: translateY(14px); } }
@keyframes ixPulse { from { opacity: 0.85; transform: scale(1); } to { opacity: 0; transform: scale(1.32); } }
@keyframes ixSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .hero-intro.is-ready .ix-spin { animation: none; }
}

/* @round1:start */
/* =========================================================
   Subpages: more life between hero and footer
   Everything here hangs off markup the landing pages already share
   (sections, eyebrows, icon cards, FAQ), so the three languages need no
   extra copy. script.js adds the decorative parts (numerals, photo band,
   step track, accordion) and drives the scroll effects.
   ========================================================= */

/* ---------------- Hero: depth while scrolling away ---------------- */
.hero--page .hero-media { transform: translate3d(0, var(--hero-shift, 0px), 0); }
.hero--page .hero-inner {
    opacity: var(--hero-fade, 1);
    transform: translate3d(0, calc(var(--hero-shift, 0px) * -0.3), 0);
}

/* country pages: the market in three figures, under the calls to action.
   Out of the flow, in the space the buttons' margin and the hero padding
   already leave, so the hero keeps its height and fits the screen. */
.hero-kpis {
    position: absolute;
    right: 0;
    bottom: -56px;
    display: grid;
    grid-auto-flow: column;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: rgba(4, 18, 30, 0.55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.9);
    overflow: hidden;
    text-align: left;
}
.hero-kpi { position: relative; padding: 14px clamp(16px, 2vw, 26px) 15px; }
.hero-kpi + .hero-kpi { border-left: 1px solid var(--line); }
.hero-kpi::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--blue), var(--gold));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.2s var(--ease);
}
.hero-kpis.is-visible .hero-kpi::after { transform: scaleX(1); }
.hero-kpis.is-visible .hero-kpi:nth-child(2)::after { transition-delay: 0.15s; }
.hero-kpis.is-visible .hero-kpi:nth-child(3)::after { transition-delay: 0.3s; }
.hero-kpi dt {
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 4px;
}
.hero-kpi dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1.7vw, 1.5rem);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 620px) {
    .hero-kpis { left: 0; bottom: -40px; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hero-kpi { padding: 12px 12px 13px; }
    .hero-kpi dt { font-size: 0.56rem; letter-spacing: 0.12em; }
    .hero-kpi dd { font-size: 1.02rem; }
}

/* ---------------- Section decoration: numeral, rule, glow ---------------- */
.sec-deco {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
/* the chapter number from the eyebrow, set huge in outline behind the heading */
.sec-num {
    position: absolute;
    top: clamp(18px, 3vw, 44px);
    right: calc((100% - var(--shell)) / 2 - 0.04em);
    font-family: var(--font-display);
    font-size: clamp(7rem, 17vw, 15.5rem);
    font-weight: 800;
    line-height: 0.8;
    letter-spacing: -0.05em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(122, 170, 214, 0.2);
    background: linear-gradient(180deg, rgba(77, 163, 255, 0.13), rgba(242, 181, 29, 0.05) 55%, transparent 85%);
    -webkit-background-clip: text;
    background-clip: text;
    opacity: 0;
    /* the entrance runs on `translate`, the scroll parallax on `transform`,
       so the parallax follows the scroll without the entrance's easing */
    translate: 0 40px;
    transform: translate3d(0, var(--num-shift, 0px), 0);
    transition: opacity 1.4s var(--ease), translate 1.4s var(--ease);
}
.sec-deco.is-in .sec-num { opacity: 1; translate: 0 0; }
/* centred headings: the numeral stands centred behind them */
.sec-deco--center .sec-num { left: 0; right: 0; text-align: center; }

/* a line drawn along the top edge as the section arrives, with a spark running ahead */
.sec-rule {
    position: absolute;
    top: 0;
    left: calc((100% - var(--shell)) / 2);
    width: var(--shell);
    height: 1px;
    background: linear-gradient(90deg, var(--blue) 0%, var(--gold) 34%, rgba(242, 181, 29, 0) 78%);
    opacity: 0.75;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.8s var(--ease);
}
.sec-deco.is-in .sec-rule { transform: scaleX(1); }
.sec-rule::after {
    content: "";
    position: absolute;
    top: -3px;
    left: 0;
    width: 90px;
    height: 7px;
    border-radius: 7px;
    background: radial-gradient(closest-side, var(--gold-bright), rgba(255, 217, 77, 0.5) 45%, rgba(255, 217, 77, 0));
    opacity: 0;
}
.sec-deco.is-in .sec-rule::after { animation: ruleSpark 2.4s var(--ease) 0.2s both; }
@keyframes ruleSpark {
    0%   { left: 0; opacity: 0; }
    12%  { opacity: 1; }
    100% { left: 72%; opacity: 0; }
}

/* a slow glow that drifts behind each section, alternating sides */
.sec-glow {
    position: absolute;
    width: clamp(380px, 48vw, 720px);
    aspect-ratio: 1;
    top: -12%;
    left: -14%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(77, 163, 255, 0.1), rgba(77, 163, 255, 0) 70%);
    animation: glowDrift 22s ease-in-out infinite alternate;
}
.sec-deco--alt .sec-glow {
    left: auto;
    right: -16%;
    top: 30%;
    background: radial-gradient(closest-side, rgba(242, 181, 29, 0.07), rgba(242, 181, 29, 0) 70%);
    animation-duration: 26s;
}
@keyframes glowDrift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(8%, 14%, 0) scale(1.15); }
}

/* card sections sit on a faint engineering grid */
.sec-deco--grid::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(122, 170, 214, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(122, 170, 214, 0.055) 1px, transparent 1px);
    background-size: 56px 56px;
    background-position: center top;
    -webkit-mask-image: radial-gradient(70% 65% at 50% 55%, #000 20%, transparent 78%);
    mask-image: radial-gradient(70% 65% at 50% 55%, #000 20%, transparent 78%);
}

@media (max-width: 620px) {
    .sec-num { font-size: 6.2rem; top: 18px; -webkit-text-stroke-width: 0.8px; }
}

/* ---------------- Photo band between the first two sections ---------------- */
.photo-band {
    position: relative;
    height: clamp(230px, 34vw, 460px);
    overflow: hidden;
    isolation: isolate;
    background: var(--navy-900);
}
.photo-band-img {
    position: absolute;
    inset: -22% 0;
    z-index: -2;
    background-size: cover;
    background-position: center 62%;
    filter: saturate(0.8) contrast(1.08) brightness(0.78);
    transform: translate3d(0, var(--band-shift, 0px), 0) scale(1.12);
}
/* fades into the navy above and below, cooled on the left */
.photo-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, var(--navy-900) 0%, rgba(4, 18, 30, 0.1) 30%, rgba(4, 18, 30, 0.15) 66%, var(--navy-900) 100%),
        linear-gradient(90deg, rgba(6, 29, 47, 0.75) 0%, rgba(6, 29, 47, 0.1) 55%, rgba(6, 29, 47, 0.45) 100%);
}
/* scan lines over the photo, like a technical display */
.photo-band::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: repeating-linear-gradient(0deg, rgba(4, 18, 30, 0.22) 0 1px, transparent 1px 4px);
    mix-blend-mode: multiply;
}
/* the page's subject, in outline letters, drifting across */
.photo-band-track {
    position: absolute;
    left: 0;
    bottom: 12%;
    display: flex;
    width: max-content;
    animation: bandMarquee 48s linear infinite;
}
.photo-band-track span {
    display: flex;
    align-items: center;
    gap: 0.45em;
    padding-right: 0.45em;
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 7.5vw, 6.6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px rgba(233, 241, 248, 0.42);
}
.photo-band-track span::after {
    content: "";
    flex: none;
    width: 0.16em;
    height: 0.16em;
    border-radius: 50%;
    background: var(--gold-metal);
    box-shadow: 0 0 18px rgba(242, 181, 29, 0.6);
}
@keyframes bandMarquee { to { transform: translateX(-50%); } }

/* ---------------- Icon cards: number, edge light, watermark, self-drawing icon ---------------- */
.hero--page ~ .section .provides { counter-reset: prov; }
.hero--page ~ .section .provide {
    counter-increment: prov;
    transition: opacity 0.9s var(--ease), transform 0.6s var(--ease), border-color 0.4s ease, box-shadow 0.5s ease, background-color 0.5s ease;
}
/* the number hangs on the card's heading, not on its icon: the icon tilts on hover and
   would take the number with it; the heading is not positioned, so the number sits in the card's corner */
.hero--page ~ .section .provides:not(.provides--steps) .provide h3::after {
    content: counter(prov, decimal-leading-zero);
    position: absolute;
    top: 30px;
    right: 26px;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    background: var(--gold-metal);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0.85;
}
.hero--page ~ .section .provide::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--blue) 25%, var(--gold) 75%, transparent);
    transform: scaleX(0);
    transition: transform 0.7s var(--ease);
}
.hero--page ~ .section .provide:hover {
    border-color: rgba(77, 163, 255, 0.42);
    box-shadow: 0 30px 70px -40px rgba(77, 163, 255, 0.55);
}
.hero--page ~ .section .provide:hover::after { transform: scaleX(1); }
.hero--page ~ .section .provide .card-icon { transition: border-color 0.4s ease, box-shadow 0.5s ease, background-color 0.4s ease, transform 0.6s var(--ease); }
.hero--page ~ .section .provide:hover .card-icon {
    border-color: rgba(77, 163, 255, 0.7);
    background-color: rgba(77, 163, 255, 0.16);
    box-shadow: 0 0 0 6px rgba(77, 163, 255, 0.06), 0 0 26px rgba(77, 163, 255, 0.35);
    transform: translateY(-2px) rotate(-4deg);
}
.hero--page ~ .section .provide h3 { transition: color 0.3s ease; }
.hero--page ~ .section .provide:hover h3 { color: #fff; }

/* the card's icon again, large and faint in the lower corner */
.card-ghost {
    position: absolute;
    right: -22px;
    bottom: -26px;
    width: 128px;
    height: 128px;
    fill: none;
    stroke: rgba(122, 170, 214, 0.075);
    stroke-width: 0.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    transition: transform 0.9s var(--ease), stroke 0.5s ease;
}
.provide:hover .card-ghost { transform: rotate(-10deg) scale(1.1); stroke: rgba(77, 163, 255, 0.16); }

/* icons trace themselves once their card has revealed (script.js sets pathLength) */
.card-icon svg.is-draw :is(path, circle, rect, line, polyline, ellipse) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-visible .card-icon svg.is-draw :is(path, circle, rect, line, polyline, ellipse) {
    animation: iconDraw 1.5s var(--ease) 0.25s forwards;
}
@keyframes iconDraw { to { stroke-dashoffset: 0; } }

@media (max-width: 620px) {
    .hero--page ~ .section .provides:not(.provides--steps) .provide h3::after { top: 16px; right: 16px; font-size: 0.7rem; }
    .hero--page ~ .section .provide h3 { padding-right: 26px; }
    .card-ghost { width: 92px; height: 92px; right: -16px; bottom: -20px; }
}

/* ---------------- A four-step route becomes a track ---------------- */
.steps-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 20px;
    height: 34px;
}
.steps-track::before,
.steps-track-fill {
    content: "";
    position: absolute;
    top: 16px;
    left: 49px;
    right: calc((100% - 54px) / 4 - 49px);
    height: 2px;
    border-radius: 2px;
    background: var(--line-strong);
}
.steps-track-fill {
    background: linear-gradient(90deg, var(--blue), var(--gold));
    box-shadow: 0 0 14px rgba(242, 181, 29, 0.45);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 2.2s var(--ease) 0.2s;
}
.steps-track.is-in .steps-track-fill { transform: scaleX(1); }
.steps-track-node {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    margin-left: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: var(--navy-850);
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    transition: border-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease, background-color 0.5s ease;
    transition-delay: calc(0.25s + var(--i, 0) * 0.55s);
}
.steps-track.is-in .steps-track-node {
    border-color: var(--gold);
    color: var(--navy-900);
    background: var(--gold-metal);
    background-size: 220% 100%;
    box-shadow: 0 0 0 5px rgba(242, 181, 29, 0.12), 0 0 22px rgba(242, 181, 29, 0.45);
}
@media (max-width: 1100px) {
    .steps-track { display: none; }
}

/* ---------------- Sector chips: dot, stagger, shine ---------------- */
.hero--page ~ .section .ca-sectors { gap: 10px; }
.hero--page ~ .section .ca-sectors li {
    position: relative;
    overflow: hidden;
    padding: 9px 17px 9px 31px;
    background: linear-gradient(160deg, rgba(13, 64, 103, 0.55), rgba(6, 29, 47, 0.6));
    transition: transform 0.4s var(--ease), border-color 0.35s ease, box-shadow 0.4s ease, color 0.3s ease;
}
.hero--page ~ .section .ca-sectors li::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: var(--gold-metal);
    box-shadow: 0 0 10px rgba(242, 181, 29, 0.55);
}
.hero--page ~ .section .ca-sectors li::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 50%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.14), transparent);
    transform: skewX(-20deg);
    transition: left 0.7s var(--ease);
}
.hero--page ~ .section .ca-sectors li:hover {
    transform: translateY(-3px);
    border-color: rgba(242, 181, 29, 0.6);
    box-shadow: 0 14px 30px -18px rgba(242, 181, 29, 0.6);
    color: #fff;
}
.hero--page ~ .section .ca-sectors li:hover::after { left: 120%; }
.hero--page ~ .section .ca-sectors.is-visible > li { animation: chipIn 0.7s var(--ease) backwards; animation-delay: calc(0.12s + var(--i, 0) * 0.06s); }
@keyframes chipIn { from { opacity: 0; transform: translateY(14px) scale(0.92); } }

/* ---------------- The closing statement as a pull quote ---------------- */
.hero--page ~ .section .market-copy .statement {
    position: relative;
    overflow: hidden;
    padding: 30px 64px 30px 32px;
    border-left: 1px solid var(--line);
    font-size: clamp(1.35rem, 2.3vw, 1.85rem);
}
.hero--page ~ .section .market-copy .statement::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--blue), var(--gold-light), var(--gold-deep), var(--blue));
    background-size: 100% 300%;
    animation: barFlow 6s linear infinite;
}
.hero--page ~ .section .market-copy .statement::after {
    content: "\201D";
    position: absolute;
    top: -0.12em;
    right: 0.12em;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 6.5em;
    line-height: 1;
    color: rgba(77, 163, 255, 0.13);
    pointer-events: none;
}
.hero--page ~ .section .statement strong {
    background: linear-gradient(95deg, var(--blue-soft) 0%, var(--blue) 45%, var(--gold-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
@keyframes barFlow { to { background-position: 0 300%; } }
@media (max-width: 620px) {
    .hero--page ~ .section .market-copy .statement { padding: 24px 40px 24px 24px; }
    .hero--page ~ .section .market-copy .statement::after { font-size: 4.4em; }
}

/* ---------------- FAQ: heading beside an accordion ---------------- */
@media (min-width: 901px) {
    .section > .container:has(> .faq--acc) {
        display: grid;
        grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
        column-gap: clamp(40px, 6vw, 96px);
        align-items: start;
    }
    .section > .container:has(> .faq--acc) > .section-head {
        position: sticky;
        top: calc(var(--header-h) + 40px);
        margin-bottom: 0;
    }
    .section > .container:has(> .faq--acc) > :not(.section-head):not(.faq) { grid-column: 1 / -1; }
}
.faq.faq--acc { grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: none; }
.faq--acc > .faq-item:last-child:nth-child(odd) { grid-column: auto; }
.faq--acc .faq-item {
    padding: 0;
    transition: border-color 0.4s ease, background-color 0.4s ease, box-shadow 0.5s ease, opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.faq--acc .faq-item::before { opacity: 0; transition: opacity 0.4s ease; }
.faq--acc .faq-item.is-open {
    border-color: rgba(77, 163, 255, 0.38);
    background-color: rgba(77, 163, 255, 0.05);
    box-shadow: 0 26px 60px -42px rgba(77, 163, 255, 0.6);
}
.faq--acc .faq-item.is-open::before { opacity: 1; }
.faq--acc .faq-item h3 { margin: 0; font-size: 1.06rem; }
.faq-q {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    width: 100%;
    padding: 22px 24px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}
.faq-q:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: var(--radius); }
.faq-no {
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--blue);
    transition: color 0.3s ease;
}
.faq-item.is-open .faq-no { color: var(--gold); }
.faq-q:hover .faq-qt { color: var(--blue-soft); }
.faq-qt { transition: color 0.3s ease; }
.faq-ico {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    transition: transform 0.5s var(--ease), background-color 0.3s ease, border-color 0.3s ease;
}
.faq-ico::before,
.faq-ico::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 1.6px;
    margin: -0.8px 0 0 -6px;
    border-radius: 2px;
    background: var(--blue-soft);
    transition: transform 0.5s var(--ease), background-color 0.3s ease;
}
.faq-ico::after { transform: rotate(90deg); }
.faq-q:hover .faq-ico { border-color: var(--blue); }
.faq-item.is-open .faq-ico { transform: rotate(180deg); background: var(--blue); border-color: var(--blue); }
.faq-item.is-open .faq-ico::before,
.faq-item.is-open .faq-ico::after { background: var(--navy-900); }
.faq-item.is-open .faq-ico::after { transform: rotate(0deg); }
.faq-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s var(--ease);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; min-height: 0; }
.faq--acc .faq-a p {
    padding: 0 64px 24px 62px;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.4s ease, transform 0.5s var(--ease);
}
.faq-item.is-open .faq-a p { opacity: 1; transform: none; transition-delay: 0.1s; }
@media (max-width: 620px) {
    .faq-q { gap: 12px; padding: 18px 16px; }
    .faq--acc .faq-a p { padding: 0 18px 20px 46px; }
    .faq-ico { width: 28px; height: 28px; }
}

/* ---------------- Calm for those who asked for it ---------------- */
@media (prefers-reduced-motion: reduce) {
    .hero--page .hero-media,
    .hero--page .hero-inner { transform: none; opacity: 1; }
    .sec-glow,
    .photo-band-track,
    .hero--page ~ .section .market-copy .statement::before { animation: none; }
    .sec-num { transform: none; translate: none; transition: opacity 0.6s ease; }
    .sec-rule { transform: none; transition: none; }
    .sec-deco.is-in .sec-rule::after { animation: none; }
    .photo-band-img { transform: scale(1.12); }
    .hero--page ~ .section .ca-sectors.is-visible > li { animation: none; }
    .faq-a, .faq--acc .faq-a p { transition: none; }
}
/* @round1:end */

/* @sig:start */
/* =========================================================
   Signature sections: every landing page carries one section
   of its own, drawn from its subject (built by the sig generator).
   ========================================================= */

/* ---------------- Page accents ---------------- */
:root { --acc: 77, 163, 255; }
[data-page="mining"]    { --acc: 226, 132, 74; }
[data-page="tech"]      { --acc: 64, 206, 226; }
[data-page="recycling"] { --acc: 84, 206, 132; }
[data-page="kz"]        { --acc: 0, 186, 214; }
[data-page="uz"]        { --acc: 104, 132, 255; }
[data-page="kg"]        { --acc: 240, 88, 80; }
[data-page="tj"]        { --acc: 92, 190, 104; }
[data-page="tm"]        { --acc: 32, 178, 146; }

/* the accent tints the section glows and the photo band */
[data-page] .hero--page ~ .section .sec-deco:not(.sec-deco--alt) .sec-glow {
    background: radial-gradient(closest-side, rgba(var(--acc), 0.12), rgba(var(--acc), 0) 70%);
}
[data-page] .photo-band::before {
    background:
        linear-gradient(180deg, var(--navy-900) 0%, rgba(4, 18, 30, 0.1) 30%, rgba(4, 18, 30, 0.15) 66%, var(--navy-900) 100%),
        linear-gradient(90deg, rgba(var(--acc), 0.3) 0%, rgba(6, 29, 47, 0.1) 55%, rgba(6, 29, 47, 0.45) 100%);
}
[data-page] .hero--page .pulse-dot { background: rgb(var(--acc)); box-shadow: 0 0 0 0 rgba(var(--acc), 0.6); }

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

/* ---------------- Shared ---------------- */
.section-sig { overflow: hidden; }
.section-sig::before { content: none; }
.sig-eyebrow { display: inline-flex; align-items: center; gap: 12px; color: rgb(var(--acc)); }
.sig-eyebrow i {
    flex: none;
    width: 8px; height: 8px;
    transform: rotate(45deg);
    background: rgb(var(--acc));
    box-shadow: 0 0 14px rgba(var(--acc), 0.9);
    animation: sigBlink 2.6s ease-in-out infinite;
}
@keyframes sigBlink { 50% { opacity: 0.35; } }
.sig-note {
    margin: 18px 0 0;
    font-size: 0.78rem;
    color: var(--muted);
    opacity: 0.8;
}
.sig-note::before { content: "\2139\FE0E"; margin-right: 8px; color: rgb(var(--acc)); }

.section-sig button { font: inherit; color: inherit; cursor: pointer; }
.section-sig [hidden] { display: none !important; }
/* once the script has chosen an entry, only its panel shows */
[data-pick][data-active] [data-pick-panel]:not(.is-active) { display: none; }
[data-pick-panel].is-active { animation: sigPanelIn 0.55s var(--ease); }
@keyframes sigPanelIn { from { opacity: 0; transform: translateY(10px); } }

.sig-card {
    padding: clamp(22px, 2.6vw, 32px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg, var(--surface-hi), rgba(255, 255, 255, 0.012));
}
.mx-panel, .sn-panel, .fs-panel, .pt-panel, .lp-panel, .hb-panel, .rt-panel, .rl-panel, .cs-panel, .pp-panel, .sp-panel {
    position: relative;
    padding: clamp(22px, 2.6vw, 32px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg, var(--surface-hi), rgba(255, 255, 255, 0.012));
    overflow: hidden;
}
.mx-panel::before, .sn-panel::before, .fs-panel::before, .pt-panel::before, .lp-panel::before, .hb-panel::before,
.rt-panel::before, .rl-panel::before, .cs-panel::before, .pp-panel::before, .sp-panel::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, rgb(var(--acc)), var(--gold));
}
.section-sig h3 { line-height: 1.25; }
.section-sig p { color: var(--muted); }

.sig-tags, .fs-tags, .rt-tags { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fs-tags li, .rt-tags li {
    padding: 6px 13px;
    border: 1px solid rgba(var(--acc), 0.4);
    border-radius: 999px;
    background: rgba(var(--acc), 0.08);
    font-size: 0.8rem;
    font-weight: 600;
}

.sig-meter {
    position: relative;
    display: inline-grid;
    grid-template-columns: repeat(4, 22px);
    gap: 4px;
    vertical-align: middle;
}
.sig-meter i { height: 6px; border-radius: 3px; background: var(--line-strong); }
.sig-meter::after {
    content: "";
    position: absolute;
    left: 0; top: 0;
    height: 6px;
    width: calc(var(--v) * 26px - 4px);
    border-radius: 3px;
    background: linear-gradient(90deg, rgb(var(--acc)), var(--gold));
    -webkit-mask: repeating-linear-gradient(90deg, #000 0 22px, transparent 22px 26px);
    mask: repeating-linear-gradient(90deg, #000 0 22px, transparent 22px 26px);
    transform-origin: left;
    animation: sigGrow 0.8s var(--ease) both;
}
@keyframes sigGrow { from { transform: scaleX(0); } }

/* ======================= Market entry: model city =======================
   Four buildings, each one bigger than the last (stand, warehouse, office, own campus), put up one
   after the other when the section scrolls in; a crane keeps lifting crates while they go up.
   Markup comes from sig-generator/modelcity.py. The picker (data-pick) sets data-active on .mx. */
.mx { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.mx-city { position: relative; margin: 0 0 44px; padding-bottom: 58px; }
.mx-scene { position: relative; }
.mx-scene svg { display: block; width: 100%; height: auto; overflow: visible; }
.mx-scene svg * { vector-effect: non-scaling-stroke; }

.mx-s { fill: var(--navy-800); stroke: rgba(134, 194, 255, 0.78); stroke-width: 1.4; stroke-linejoin: round; transition: stroke 0.5s ease; }
.mx-s2 { fill: var(--navy-850); stroke: rgba(134, 194, 255, 0.4); stroke-width: 1; }
.mx-d { fill: rgba(134, 194, 255, 0.12); stroke: rgba(134, 194, 255, 0.55); stroke-width: 1; transition: stroke 0.5s ease; }
.mx-w { fill: rgba(134, 194, 255, 0.3); stroke: none; transition: fill 0.5s ease; }
.mx-l { fill: none; stroke: rgba(134, 194, 255, 0.55); stroke-width: 1.2; stroke-linecap: round; }
.mx-l--f { stroke: rgba(134, 194, 255, 0.28); stroke-width: 1; }
.mx-l--c { stroke: rgba(134, 194, 255, 0.3); stroke-width: 1; }
.mx-pole { fill: rgba(134, 194, 255, 0.7); stroke: none; }
.mx-st { fill: rgba(77, 163, 255, 0.78); stroke: none; }
.mx-st--a { fill: rgba(233, 241, 248, 0.62); }
.mx-crate { fill: rgba(242, 181, 29, 0.22); stroke: rgba(242, 181, 29, 0.85); stroke-width: 1.1; }
.mx-flag { fill: var(--gold); stroke: none; transform-box: fill-box; transform-origin: 0 50%; animation: mxWave 2.6s ease-in-out infinite; }
.mx-beacon { fill: var(--gold-light); filter: drop-shadow(0 0 5px rgba(255, 217, 77, 0.9)); animation: sigBlink 1.6s ease-in-out infinite; }
.mx-far rect { fill: rgba(134, 194, 255, 0.05); }
.mx-ground { fill: none; stroke: var(--line-strong); stroke-width: 1.2; }
.mx-ground-band { fill: rgba(122, 170, 214, 0.05); }
.mx-zone-box { fill: rgba(242, 181, 29, 0.035); stroke: rgba(242, 181, 29, 0.4); stroke-width: 1; stroke-dasharray: 5 5; }
.mx-crane .mx-cr { fill: rgba(10, 39, 64, 0.6); stroke: rgba(134, 194, 255, 0.34); stroke-width: 1; }
.mx-cable { fill: none; stroke: rgba(134, 194, 255, 0.5); stroke-width: 1; transform-box: fill-box; transform-origin: 50% 0; animation: mxCable 5s ease-in-out infinite; }
.mx-hook { animation: mxHook 5s ease-in-out infinite; }
.mx-smoke circle { fill: rgba(233, 241, 248, 0.5); stroke: none; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; animation: mxSmoke 4.2s linear infinite; animation-delay: calc(4.6s + var(--s)); }
.mx-trail { fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.75; }
.mx-badge circle { fill: var(--navy-850); stroke: var(--gold); stroke-width: 1.4; }
.mx-badge text { fill: var(--gold-light); font-family: var(--font-display); font-size: 13px; font-weight: 700; }

/* the build-up: parts settle onto the ground one after another; poles, antenna and chimney grow upward */
.mx-p { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.is-in .mx-p { animation: mxBuild 0.75s var(--ease) var(--d, 0s) both; }
.is-in .mx-p--up { animation-name: mxUp; }
.is-in .mx-trail { animation: sigDraw 3.4s var(--ease) 1.4s forwards; }
@keyframes mxBuild { 0% { opacity: 0; translate: 0 -26px; } 60% { opacity: 1; translate: 0 3px; } 100% { opacity: 1; translate: 0 0; } }
@keyframes mxUp { from { opacity: 1; scale: 1 0; } to { opacity: 1; scale: 1 1; } }
@keyframes sigDraw { to { stroke-dashoffset: 0; } }
@keyframes sigRing { from { transform: scale(0.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@keyframes mxWave { 0%, 100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(-5deg) scaleX(0.9); } }
@keyframes mxCable { 0%, 100% { scale: 1 1; } 50% { scale: 1 2.3; } }
@keyframes mxHook { 0%, 100% { translate: 0 0; } 50% { translate: 0 52px; } }
@keyframes mxSmoke { 0% { opacity: 0; translate: 0 0; scale: 0.5; } 18% { opacity: 0.55; } 100% { opacity: 0; translate: 14px -54px; scale: 1.8; } }
@keyframes mxTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.mx-w--t { animation: mxTwinkle 5s ease-in-out infinite; animation-delay: calc(var(--t) + 5s); }

/* the chosen model lights up, the others step back */
.mx-b { transition: opacity 0.5s ease, filter 0.5s ease; }
.mx[data-active] .mx-b { opacity: 0.42; }
.mx[data-active="direct"] .mx-b[data-b="direct"],
.mx[data-active="dist"] .mx-b[data-b="dist"],
.mx[data-active="rep"] .mx-b[data-b="rep"],
.mx[data-active="sub"] .mx-b[data-b="sub"] { opacity: 1; filter: drop-shadow(0 0 14px rgba(242, 181, 29, 0.32)); }
.mx[data-active="direct"] .mx-b[data-b="direct"] :is(.mx-s, .mx-s2, .mx-d, .mx-pole),
.mx[data-active="dist"] .mx-b[data-b="dist"] :is(.mx-s, .mx-s2, .mx-d, .mx-pole),
.mx[data-active="rep"] .mx-b[data-b="rep"] :is(.mx-s, .mx-s2, .mx-d, .mx-pole),
.mx[data-active="sub"] .mx-b[data-b="sub"] :is(.mx-s, .mx-s2, .mx-d, .mx-pole) { stroke: var(--gold); }
.mx[data-active="direct"] .mx-b[data-b="direct"] .mx-w,
.mx[data-active="dist"] .mx-b[data-b="dist"] .mx-w,
.mx[data-active="rep"] .mx-b[data-b="rep"] .mx-w,
.mx[data-active="sub"] .mx-b[data-b="sub"] .mx-w { fill: rgba(255, 217, 77, 0.92); }

/* labels over the street: text stays HTML so it never shrinks with the picture */
.mx-zonelabel, .mx-legend {
    position: absolute;
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    pointer-events: none;
}
.mx-zonelabel { left: 4.4%; top: 41%; color: var(--gold); }
.mx-legend { left: 3%; top: 3%; display: flex; align-items: center; gap: 10px; font-style: italic; font-weight: 500; letter-spacing: 0.02em; text-transform: none; font-size: 0.78rem; color: var(--gold-light); opacity: 0; transition: opacity 0.8s ease 2.4s; }
.mx-legend::before { content: ""; width: 34px; height: 0; border-top: 2px solid var(--gold); opacity: 0.75; }
.is-in .mx-legend { opacity: 0.9; }
.mx-bhit {
    position: absolute;
    left: var(--l); width: var(--w);
    top: 0; bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    z-index: 1;
}
.mx-bhit:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mx-bl {
    display: grid;
    justify-items: center;
    gap: 6px;
    max-width: 100%;
    padding-bottom: 2px;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    color: var(--muted);
    transition: color 0.3s ease;
}
.mx-bl i {
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    border: 1.5px solid var(--line-strong);
    border-radius: 50%;
    font-style: normal;
    font-size: 0.72rem;
    transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.mx-bhit:hover .mx-bl, .mx-bhit.is-active .mx-bl { color: #fff; }
.mx-bhit.is-active .mx-bl i { border-color: var(--gold); background: var(--gold-metal); color: var(--navy-900); }
.mx-axis {
    position: absolute;
    right: 0; bottom: -34px;
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}
.mx-axis::after { content: " \2192"; color: var(--gold); }
.mx-panel h3 { font-size: 1.25rem; margin-bottom: 20px; }
.mx-meters { display: grid; gap: 12px; margin: 0; }
.mx-meters div { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.mx-meters dt { font-size: 0.86rem; color: var(--muted); }
.mx-meters dd { margin: 0; }
.mx-when { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.mx-when b { color: rgb(var(--acc)); font-weight: 600; }
@media (max-width: 900px) {
    .mx { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .mx-city { margin-bottom: 40px; padding-bottom: 66px; }
    .mx-bl { font-size: 0.64rem; gap: 4px; }
    .mx-bl i { width: 18px; height: 18px; font-size: 0.62rem; }
    .mx-zonelabel { font-size: 0.52rem; letter-spacing: 0.08em; }
    .mx-legend { display: none; }
}

/* ======================= Business development: two curves ======================= */
.pl-legend { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 0.86rem; }
.pl-legend li { display: flex; align-items: center; gap: 10px; }
.pl-legend li::before { content: ""; width: 30px; height: 3px; border-radius: 2px; }
.pl-legend-a::before { background: rgba(233, 241, 248, 0.5); }
.pl-legend-b::before { background: linear-gradient(90deg, var(--blue), var(--gold-light)); }
.pl-scroll { overflow-x: auto; padding: 8px 0 30px 34px; }
.pl-chart { position: relative; min-width: 640px; aspect-ratio: 1000 / 380; }
.pl-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pl-grid { stroke: var(--line); stroke-width: 1; fill: none; }
.pl-area { fill: url(#plFill); opacity: 0; transition: opacity 1.6s ease 1.6s; }
.is-in .pl-area { opacity: 1; }
.pl-a, .pl-b { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.pl-a { stroke: rgba(233, 241, 248, 0.5); stroke-width: 2; }
.pl-b { stroke: url(#plLine); stroke-width: 3.5; filter: drop-shadow(0 0 8px rgba(77, 163, 255, 0.5)); }
.is-in .pl-a { animation: sigDraw 2.6s var(--ease) 0.2s forwards; }
.is-in .pl-b { animation: sigDraw 3s var(--ease) 0.6s forwards; }
.pl-ann, .pl-stop { position: absolute; left: var(--x); top: var(--y); }
.pl-ann i {
    position: absolute;
    left: -6px; top: -6px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow: 0 0 0 5px rgba(242, 181, 29, 0.18), 0 0 18px rgba(242, 181, 29, 0.7);
    transform: scale(0);
    transition: transform 0.5s var(--ease) var(--d);
}
.pl-ann b {
    position: absolute;
    left: 0; bottom: 16px;
    transform: translateX(-50%);
    padding: 6px 11px;
    border: 1px solid rgba(242, 181, 29, 0.4);
    border-radius: 8px;
    background: rgba(6, 24, 38, 0.92);
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.6s ease var(--d), transform 0.6s var(--ease) var(--d);
}
.pl-ann:last-of-type b { transform: translateX(-80%); }
.is-in .pl-ann i { transform: scale(1); }
.is-in .pl-ann b { opacity: 1; }
.pl-fair {
    position: absolute;
    left: var(--x);
    top: 6%;
    height: 78%;
    border-left: 1px dashed rgba(233, 241, 248, 0.3);
}
.pl-fair b, .pl-stop b {
    position: absolute;
    top: -4px; left: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(233, 241, 248, 0.6);
    white-space: nowrap;
}
.pl-stop b { top: -24px; left: 0; letter-spacing: 0; text-transform: none; font-style: italic; font-weight: 400; }
.pl-y {
    position: absolute;
    left: -34px; bottom: 16%;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}
.pl-tick { position: absolute; left: var(--x); bottom: -26px; transform: translateX(-50%); font-size: 0.7rem; color: var(--muted); white-space: nowrap; }

/* ======================= Procurement: the corridor ======================= */
.cr { --u: 1; display: grid; grid-template-columns: 120px minmax(0, 1fr) 120px; gap: 18px; align-items: center; }
.cr-node { display: grid; justify-items: center; gap: 10px; text-align: center; font-family: var(--font-display); }
.cr-node svg { width: 96px; height: 96px; overflow: visible; }
.cr-ring { fill: rgba(77, 163, 255, 0.07); stroke: var(--blue); stroke-width: 1.2; }
/* Central Asia: outer ring and core are drawn as HTML pseudo-elements over the svg so they can
   carry the same flowing gold metal (goldShimmer) as the headline text; svg strokes cannot */
.cr-node--ca { --cr-s: 96px; position: relative; }
.cr-node--ca .cr-ring { fill: rgba(242, 181, 29, 0.06); stroke: none; }
.cr-node--ca .cr-ring--dot { fill: none; stroke: var(--blue); }
.cr-node--ca .cr-core { fill: transparent; }
.cr-node--ca::before,
.cr-node--ca::after {
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% - var(--cr-s) / 2);
    width: var(--cr-s); height: var(--cr-s);
    pointer-events: none;
    background-image: var(--gold-metal);
    background-size: 200% auto;
    animation: goldShimmer 7s linear infinite;
}
.cr-node--ca::before {
    -webkit-mask: radial-gradient(circle closest-side, transparent 88.5%, #000 89%, #000 91%, transparent 91.5%);
            mask: radial-gradient(circle closest-side, transparent 88.5%, #000 89%, #000 91%, transparent 91.5%);
}
.cr-node--ca::after {
    top: calc(var(--cr-s) * 0.375); left: calc(50% - var(--cr-s) * 0.125);
    width: calc(var(--cr-s) * 0.25); height: calc(var(--cr-s) * 0.25);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(242, 181, 29, 0.8);
    animation: goldShimmer 7s linear infinite, sigBlink 3s ease-in-out infinite;
}
.cr-ring--dot { fill: none; stroke-dasharray: 2 4; transform-origin: 40px 40px; animation: crSpin 18s linear infinite; }
.cr-core { fill: var(--gold); filter: drop-shadow(0 0 8px rgba(242, 181, 29, 0.8)); animation: sigBlink 3s ease-in-out infinite; }
.cr-stars { fill: var(--gold); filter: drop-shadow(0 0 2.5px rgba(255, 217, 77, 0.75)); transform-origin: 40px 40px; animation: crSpin 40s linear infinite; }
@keyframes crSpin { to { transform: rotate(360deg); } }
.cr-track { display: grid; gap: 14px; }
.cr-lane { display: grid; gap: 8px; }
.cr-lane-label { font-size: 0.8rem; color: var(--muted); }
.cr-lane--west .cr-lane-label { text-align: right; }
.cr-lane--east .cr-lane-label::before { content: "\2192  "; color: var(--blue); }
.cr-lane--west .cr-lane-label::before { content: "\2190  "; color: var(--gold); }
.cr-belt {
    position: relative;
    height: 54px;
    overflow: hidden;
    border-bottom: 1px solid var(--line-strong);
    background:
        repeating-linear-gradient(90deg, rgba(122, 170, 214, 0.22) 0 10px, transparent 10px 22px) 0 calc(100% - 3px) / 100% 1px no-repeat,
        linear-gradient(0deg, rgba(122, 170, 214, 0.06), transparent 70%);
}
/* vehicles are single-colour silhouettes: the svg is only the mask, the flowing metal behind it
   is the same gold (goldShimmer) as the headline text, and a blue twin for the eastbound lane */
.cr-v {
    position: absolute;
    bottom: 5px;
    width: var(--w); height: var(--h);
    background-image: var(--cr-metal);
    background-size: 200% auto;
    -webkit-mask: var(--cr-sprite) center / 100% 100% no-repeat;
            mask: var(--cr-sprite) center / 100% 100% no-repeat;
    animation: var(--cr-move) 18s linear infinite, goldShimmer 7s linear infinite;
    animation-delay: calc(var(--i) * -6s), 0s;
    will-change: left;
}
.cr-v--truck { --w: calc(71px * var(--u)); --h: calc(34px * var(--u)); --cr-sprite: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2071%2034'%3E%3Cpath%20fill-opacity='0.9'%20fill-rule='evenodd'%20d='M0%203h4.6v21h-4.6zM5.2%203h4.6v21h-4.6zM10.3%203h4.6v21h-4.6zM15.5%203h4.6v21h-4.6zM20.6%203h4.6v21h-4.6zM25.8%203h4.6v21h-4.6zM30.9%203h4.6v21h-4.6zM36.1%203h4.6v21h-4.6zM41.2%203h4.6v21h-4.6z'/%3E%3Cpath%20fill-opacity='1'%20fill-rule='evenodd'%20d='M0%2024.5h70v3h-70zM44%2022h6v2.5h-6zM47%202h1.6v8h-1.6z'/%3E%3Cpath%20fill-opacity='1'%20fill-rule='evenodd'%20d='M48%209H59Q62%209%2063.6%2011.4L69%2020Q70%2021.6%2070%2023.4V24.5H48zM51%2011.5H58.6L64.4%2020H51z'/%3E%3Cpath%20fill-opacity='1'%20fill-rule='evenodd'%20d='M4.8%2029.5a4.2%204.2%200%201%200%208.4%200a4.2%204.2%200%201%200%20-8.4%200zM7.5%2029.5a1.5%201.5%200%201%200%203%200a1.5%201.5%200%201%200%20-3%200zM13.3%2029.5a4.2%204.2%200%201%200%208.4%200a4.2%204.2%200%201%200%20-8.4%200zM16%2029.5a1.5%201.5%200%201%200%203%200a1.5%201.5%200%201%200%20-3%200zM48.8%2029.5a4.2%204.2%200%201%200%208.4%200a4.2%204.2%200%201%200%20-8.4%200zM51.5%2029.5a1.5%201.5%200%201%200%203%200a1.5%201.5%200%201%200%20-3%200zM57.8%2029.5a4.2%204.2%200%201%200%208.4%200a4.2%204.2%200%201%200%20-8.4%200zM60.5%2029.5a1.5%201.5%200%201%200%203%200a1.5%201.5%200%201%200%20-3%200z'/%3E%3Cpath%20fill-opacity='0.55'%20fill-rule='evenodd'%20d='M68.6%2017.5h1.4v2h-1.4z'/%3E%3C/svg%3E"); animation-name: var(--cr-move), goldShimmer, crBump; animation-duration: 18s, 7s, 0.42s; animation-delay: calc(var(--i) * -6s), 0s, 0s; animation-direction: normal, normal, alternate; animation-timing-function: linear, linear, ease-in-out; }
.cr-v--train { --w: calc(172px * var(--u)); --h: calc(34.5px * var(--u)); --cr-sprite: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%2030'%3E%3Cpath%20fill-opacity='0.95'%20fill-rule='evenodd'%20d='M0.5%208h2.9v11.5h-2.9zM3.9%208h2.9v11.5h-2.9zM7.3%208h2.9v11.5h-2.9zM10.7%208h2.9v11.5h-2.9zM14.1%208h2.9v11.5h-2.9zM17.5%208h2.9v11.5h-2.9zM20.9%208h2.9v11.5h-2.9z'/%3E%3Cpath%20fill-opacity='0.65'%20fill-rule='evenodd'%20d='M26.5%208h2.9v11.5h-2.9zM29.9%208h2.9v11.5h-2.9zM33.3%208h2.9v11.5h-2.9zM36.7%208h2.9v11.5h-2.9zM40.1%208h2.9v11.5h-2.9zM43.5%208h2.9v11.5h-2.9zM46.9%208h2.9v11.5h-2.9z'/%3E%3Cpath%20fill-opacity='0.85'%20fill-rule='evenodd'%20d='M52.5%208h2.9v11.5h-2.9zM55.9%208h2.9v11.5h-2.9zM59.3%208h2.9v11.5h-2.9zM62.7%208h2.9v11.5h-2.9zM66.1%208h2.9v11.5h-2.9zM69.5%208h2.9v11.5h-2.9zM72.9%208h2.9v11.5h-2.9z'/%3E%3Cpath%20fill-opacity='0.55'%20fill-rule='evenodd'%20d='M78.5%208h2.9v11.5h-2.9zM81.9%208h2.9v11.5h-2.9zM85.3%208h2.9v11.5h-2.9zM88.7%208h2.9v11.5h-2.9zM92.1%208h2.9v11.5h-2.9zM95.5%208h2.9v11.5h-2.9zM98.9%208h2.9v11.5h-2.9z'/%3E%3Cpath%20fill-opacity='1'%20fill-rule='evenodd'%20d='M0%2020h25v2.4h-25zM25%2021h1.2v1h-1.2zM26%2020h25v2.4h-25zM51%2021h1.2v1h-1.2zM52%2020h25v2.4h-25zM77%2021h1.2v1h-1.2zM78%2020h25v2.4h-25zM103%2021h1.2v1h-1.2zM104%2025h45v2h-45z'/%3E%3Cpath%20fill-opacity='1'%20fill-rule='evenodd'%20d='M106%208H134Q139%208%20142%2011L148%2019V25H106zM110%2012h5v5h-5zM118%2012h5v5h-5zM127%2011H133L137%2017H127z'/%3E%3Cpath%20fill-opacity='1'%20fill-rule='evenodd'%20d='M121%203h7v1h-7zM123.2%204V8H124.8V4z'/%3E%3Cpath%20fill-opacity='1'%20fill-rule='evenodd'%20d='M1%2027a2.5%202.5%200%201%200%205%200a2.5%202.5%200%201%200%20-5%200zM2.6%2027a0.9%200.9%200%201%200%201.8%200a0.9%200.9%200%201%200%20-1.8%200zM6%2027a2.5%202.5%200%201%200%205%200a2.5%202.5%200%201%200%20-5%200zM7.6%2027a0.9%200.9%200%201%200%201.8%200a0.9%200.9%200%201%200%20-1.8%200zM14.5%2027a2.5%202.5%200%201%200%205%200a2.5%202.5%200%201%200%20-5%200zM16.1%2027a0.9%200.9%200%201%200%201.8%200a0.9%200.9%200%201%200%20-1.8%200zM19.5%2027a2.5%202.5%200%201%200%205%200a2.5%202.5%200%201%200%20-5%200zM21.1%2027a0.9%200.9%200%201%200%201.8%200a0.9%200.9%200%201%200%20-1.8%200zM27%2027a2.5%202.5%200%201%200%205%200a2.5%202.5%200%201%200%20-5%200zM28.6%2027a0.9%200.9%200%201%200%201.8%200a0.9%200.9%200%201%200%20-1.8%200zM32%2027a2.5%202.5%200%201%200%205%200a2.5%202.5%200%201%200%20-5%200zM33.6%2027a0.9%200.9%200%201%200%201.8%200a0.9%200.9%200%201%200%20-1.8%200zM40.5%2027a2.5%202.5%200%201%200%205%200a2.5%202.5%200%201%200%20-5%200zM42.1%2027a0.9%200.9%200%201%200%201.8%200a0.9%200.9%200%201%200%20-1.8%200zM45.5%2027a2.5%202.5%200%201%200%205%200a2.5%202.5%200%201%200%20-5%200zM47.1%2027a0.9%200.9%200%201%200%201.8%200a0.9%200.9%200%201%200%20-1.8%200zM53%2027a2.5%202.5%200%201%200%205%200a2.5%202.5%200%201%200%20-5%200zM54.6%2027a0.9%200.9%200%201%200%201.8%200a0.9%200.9%200%201%200%20-1.8%200zM58%2027a2.5%202.5%200%201%200%205%200a2.5%202.5%200%201%200%20-5%200zM59.6%2027a0.9%200.9%200%201%200%201.8%200a0.9%200.9%200%201%200%20-1.8%200zM66.5%2027a2.5%202.5%200%201%200%205%200a2.5%202.5%200%201%200%20-5%200zM68.1%2027a0.9%200.9%200%201%200%201.8%200a0.9%200.9%200%201%200%20-1.8%200zM71.5%2027a2.5%202.5%200%201%200%205%200a2.5%202.5%200%201%200%20-5%200zM73.1%2027a0.9%200.9%200%201%200%201.8%200a0.9%200.9%200%201%200%20-1.8%200zM79%2027a2.5%202.5%200%201%200%205%200a2.5%202.5%200%201%200%20-5%200zM80.6%2027a0.9%200.9%200%201%200%201.8%200a0.9%200.9%200%201%200%20-1.8%200zM84%2027a2.5%202.5%200%201%200%205%200a2.5%202.5%200%201%200%20-5%200zM85.6%2027a0.9%200.9%200%201%200%201.8%200a0.9%200.9%200%201%200%20-1.8%200zM92.5%2027a2.5%202.5%200%201%200%205%200a2.5%202.5%200%201%200%20-5%200zM94.1%2027a0.9%200.9%200%201%200%201.8%200a0.9%200.9%200%201%200%20-1.8%200zM97.5%2027a2.5%202.5%200%201%200%205%200a2.5%202.5%200%201%200%20-5%200zM99.1%2027a0.9%200.9%200%201%200%201.8%200a0.9%200.9%200%201%200%20-1.8%200zM109.3%2026.8a2.7%202.7%200%201%200%205.4%200a2.7%202.7%200%201%200%20-5.4%200zM111%2026.8a1%201%200%201%200%202%200a1%201%200%201%200%20-2%200zM117.3%2026.8a2.7%202.7%200%201%200%205.4%200a2.7%202.7%200%201%200%20-5.4%200zM119%2026.8a1%201%200%201%200%202%200a1%201%200%201%200%20-2%200zM129.3%2026.8a2.7%202.7%200%201%200%205.4%200a2.7%202.7%200%201%200%20-5.4%200zM131%2026.8a1%201%200%201%200%202%200a1%201%200%201%200%20-2%200zM138.3%2026.8a2.7%202.7%200%201%200%205.4%200a2.7%202.7%200%201%200%20-5.4%200zM140%2026.8a1%201%200%201%200%202%200a1%201%200%201%200%20-2%200z'/%3E%3Cpath%20fill-opacity='0.55'%20fill-rule='evenodd'%20d='M0%2029.3h150v0.7h-150z'/%3E%3C/svg%3E"); animation-name: var(--cr-move), goldShimmer, crBump; animation-duration: 18s, 7s, 0.3s; animation-delay: calc(var(--i) * -6s), 0s, 0s; animation-direction: normal, normal, alternate; animation-timing-function: linear, linear, ease-in-out; }
.cr-v--ship { --w: calc(156px * var(--u)); --h: calc(43px * var(--u)); --cr-sprite: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20130%2036'%3E%3Cpath%20fill-opacity='0.95'%20fill-rule='evenodd'%20d='M28%2018.6h8.8v3.9h-8.8zM37.4%205.4h8.8v3.9h-8.8zM46.8%209.8h8.8v3.9h-8.8zM56.2%2014.2h8.8v3.9h-8.8zM65.6%2018.6h8.8v3.9h-8.8zM75%205.4h8.8v3.9h-8.8zM84.4%209.8h8.8v3.9h-8.8zM93.8%2014.2h8.8v3.9h-8.8zM103.2%2018.6h8.8v3.9h-8.8z'/%3E%3Cpath%20fill-opacity='0.65'%20fill-rule='evenodd'%20d='M28%2014.2h8.8v3.9h-8.8zM37.4%2018.6h8.8v3.9h-8.8zM46.8%205.4h8.8v3.9h-8.8zM56.2%209.8h8.8v3.9h-8.8zM65.6%2014.2h8.8v3.9h-8.8zM75%2018.6h8.8v3.9h-8.8zM103.2%2014.2h8.8v3.9h-8.8z'/%3E%3Cpath%20fill-opacity='0.8'%20fill-rule='evenodd'%20d='M28%209.8h8.8v3.9h-8.8zM37.4%2014.2h8.8v3.9h-8.8zM46.8%2018.6h8.8v3.9h-8.8zM65.6%209.8h8.8v3.9h-8.8zM75%2014.2h8.8v3.9h-8.8zM84.4%2018.6h8.8v3.9h-8.8z'/%3E%3Cpath%20fill-opacity='0.55'%20fill-rule='evenodd'%20d='M37.4%209.8h8.8v3.9h-8.8zM46.8%2014.2h8.8v3.9h-8.8zM56.2%2018.6h8.8v3.9h-8.8zM65.6%205.4h8.8v3.9h-8.8zM75%209.8h8.8v3.9h-8.8zM84.4%2014.2h8.8v3.9h-8.8zM93.8%2018.6h8.8v3.9h-8.8z'/%3E%3Cpath%20fill-opacity='0.95'%20fill-rule='evenodd'%20d='M3%2023H127L115%2032H9z'/%3E%3Cpath%20fill-opacity='1'%20fill-rule='evenodd'%20d='M10%209h13v14h-13zM12%204h9v5h-9zM15%200.5h4v3.5h-4zM13%205.2h7v1.6h-7zM12%2012h9v1.2h-9zM12%2015.5h9v1.2h-9zM12%2019h9v1.2h-9z'/%3E%3Cpath%20fill='none'%20stroke='black'%20stroke-opacity='0.5'%20stroke-width='1'%20d='M0%2034q4%20-2.4%208%200q4%202.4%208%200q4%20-2.4%208%200q4%202.4%208%200q4%20-2.4%208%200q4%202.4%208%200q4%20-2.4%208%200q4%202.4%208%200q4%20-2.4%208%200q4%202.4%208%200q4%20-2.4%208%200q4%202.4%208%200q4%20-2.4%208%200q4%202.4%208%200q4%20-2.4%208%200q4%202.4%208%200q4%20-2.4%208%200q4%202.4%208%200M-5%2035.5q4%20-2.4%208%200q4%202.4%208%200q4%20-2.4%208%200q4%202.4%208%200q4%20-2.4%208%200q4%202.4%208%200q4%20-2.4%208%200q4%202.4%208%200q4%20-2.4%208%200q4%202.4%208%200q4%20-2.4%208%200q4%202.4%208%200q4%20-2.4%208%200q4%202.4%208%200q4%20-2.4%208%200q4%202.4%208%200q4%20-2.4%208%200q4%202.4%208%200'/%3E%3C/svg%3E"); transform-origin: 50% 85%; animation-name: var(--cr-move), goldShimmer, crRock; animation-duration: 18s, 7s, 3.4s; animation-delay: calc(var(--i) * -6s), 0s, calc(var(--i) * -1.1s); animation-direction: normal, normal, alternate; animation-timing-function: linear, linear, ease-in-out; }
.cr-lane--east .cr-v {
    --cr-move: crMoveE;
    --cr-metal: linear-gradient(100deg, var(--blue-deep) 0%, var(--blue) 18%, var(--blue-soft) 30%, var(--blue) 44%, var(--blue-deep) 60%, var(--blue) 80%, var(--blue-deep) 100%);
}
.cr-lane--west .cr-v {
    --cr-move: crMoveW;
    --cr-metal: var(--gold-metal);
    scale: -1 1;
}
@keyframes crMoveE { from { left: calc(var(--w) * -1); } to { left: 100%; } }
@keyframes crMoveW { from { left: 100%; } to { left: calc(var(--w) * -1); } }
@keyframes crBump { to { translate: 0 -0.8px; } }
@keyframes crRock { from { translate: 0 0; rotate: -0.7deg; } to { translate: 0 1.4px; rotate: 0.7deg; } }
@media (prefers-reduced-motion: reduce) {
    .cr-v { animation: none; left: calc(8% + var(--i) * 30%); }
}
.cr-gates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.cr-gate {
    position: relative;
    padding: 12px 12px 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(6, 24, 38, 0.85);
    animation: crGate 7.2s ease-in-out infinite;
    animation-delay: calc(var(--i) * 1.2s);
}
.cr-gate::before {
    content: "";
    position: absolute;
    left: 50%; top: -15px; bottom: -15px;
    width: 1px;
    z-index: -1;
    background: linear-gradient(180deg, transparent, rgba(var(--acc), 0.6), transparent);
}
@keyframes crGate {
    0%, 22%, 100% { border-color: var(--line); box-shadow: none; }
    8% { border-color: rgba(242, 181, 29, 0.75); box-shadow: 0 0 24px -6px rgba(242, 181, 29, 0.6); }
}
.cr-gate-no { display: block; font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; color: var(--gold); margin-bottom: 4px; }
.cr-gate-name { display: block; font-size: 0.8rem; line-height: 1.3; }
.cr-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.cr-kpi { display: flex; align-items: center; gap: 18px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.cr-kpi b {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    background: var(--gold-metal);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.cr-kpi span { font-size: 0.88rem; color: var(--muted); }
@media (max-width: 1000px) {
    .cr { grid-template-columns: 1fr; }
    .cr-node { grid-auto-flow: column; justify-content: start; }
    .cr { --u: 0.65; }
    .cr-node svg { width: 56px; height: 56px; }
    .cr-node--ca { order: 3; --cr-s: 56px; }
    .cr-node--ca::before { left: 0; }
    .cr-node--ca::after { left: calc(var(--cr-s) * 0.375); }
    .cr-gates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cr-kpis { grid-template-columns: 1fr; }
}

/* ======================= Project development: Gantt ======================= */
.gt-legend { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 0.84rem; }
.gt-legend li { display: flex; align-items: center; gap: 10px; }
.gt-legend li::before { content: ""; width: 28px; height: 10px; border-radius: 5px; }
.gt-legend-lead::before { background: linear-gradient(90deg, var(--blue), var(--gold)); }
.gt-legend-spec::before { background: repeating-linear-gradient(135deg, rgba(122, 170, 214, 0.45) 0 3px, transparent 3px 7px); border: 1px solid rgba(122, 170, 214, 0.5); }
.gt-legend-gate::before { width: 10px; height: 10px; border-radius: 1px; transform: rotate(45deg); background: var(--gold); }
.gt-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(6, 24, 38, 0.6); }
.gt-grid { position: relative; min-width: 760px; padding: 0 28px 8px 0; overflow: hidden; }
.gt-row { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: stretch; border-bottom: 1px solid var(--line); transition: background-color 0.3s ease; }
.gt-row:last-of-type { border-bottom: 0; }
.gt-row:not(.gt-row--head):hover { background: rgba(var(--acc), 0.05); }
.gt-label { display: flex; align-items: center; padding: 12px 18px 12px 22px; font-size: 0.88rem; }
.gt-track {
    position: relative;
    min-height: 48px;
    background: linear-gradient(90deg, var(--line) 1px, transparent 1px) left / 25% 100%;
}
.gt-phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: 64px; }
.gt-phase { display: grid; align-content: center; gap: 2px; padding: 12px 14px; font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; }
.gt-phase b { font-size: 0.7rem; color: var(--gold); letter-spacing: 0.12em; }
.gt-gate { position: absolute; left: var(--x); bottom: -7px; z-index: 2; }
.gt-gate i {
    position: absolute;
    left: -7px; top: 0;
    width: 14px; height: 14px;
    transform: rotate(45deg) scale(0);
    background: var(--gold-metal);
    box-shadow: 0 0 14px rgba(242, 181, 29, 0.7);
    transition: transform 0.5s var(--ease) calc(1.2s + var(--i) * 0.35s);
}
.is-in .gt-gate i { transform: rotate(45deg) scale(1); }
.gt-gate b { display: none; }
.gt-gate::after {
    content: "";
    position: absolute;
    left: 0; top: 14px;
    height: 800px;
    border-left: 1px dashed rgba(242, 181, 29, 0.4);
}
.gt-bar {
    position: absolute;
    top: 50%;
    left: var(--s);
    width: var(--w);
    height: 14px;
    margin-top: -7px;
    border-radius: 7px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1s var(--ease) calc(0.4s + var(--i) * 0.14s);
}
.is-in .gt-bar { transform: scaleX(1); }
.gt-bar--lead { background: linear-gradient(90deg, var(--blue), var(--gold)); box-shadow: 0 0 18px -4px rgba(77, 163, 255, 0.7); }
.gt-bar--spec { background: repeating-linear-gradient(135deg, rgba(122, 170, 214, 0.42) 0 4px, transparent 4px 9px); border: 1px solid rgba(122, 170, 214, 0.5); }
.gt-sweep {
    position: absolute;
    top: 0; bottom: 0;
    left: 260px;
    width: 2px;
    background: linear-gradient(180deg, transparent, var(--gold-light), transparent);
    box-shadow: 0 0 16px rgba(255, 217, 77, 0.8);
    opacity: 0;
}
.is-in .gt-sweep { animation: gtSweep 3.4s var(--ease) 0.4s forwards; }
@keyframes gtSweep { 0% { left: 260px; opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - 28px); opacity: 0; } }

/* ======================= Market intelligence: report pages ======================= */
.rp-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.rp-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    font-family: var(--font-display) !important;
    font-weight: 600;
    font-size: 0.9rem;
    transition: border-color 0.3s ease, background 0.3s ease;
}
.rp-tab b { font-size: 0.7rem; color: var(--muted); letter-spacing: 0.1em; }
.rp-tab.is-active { border-color: rgb(var(--acc)); background: rgba(var(--acc), 0.14); }
.rp-tab.is-active b { color: var(--gold); }
.rp-doc {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: linear-gradient(170deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
    box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.95), 0 0 0 6px rgba(255, 255, 255, 0.015);
    overflow: hidden;
}
.rp-doc-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 20px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
}
.rp-doc-bar span { margin-right: auto; }
.rp-doc-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.rp-page { padding: clamp(18px, 3vw, 34px); }
.hm-scroll { overflow-x: auto; }
.hm { border-collapse: separate; border-spacing: 6px; width: 100%; min-width: 600px; }
.hm thead th { font-family: var(--font-display); font-size: 0.74rem; font-weight: 600; text-align: center; padding: 0 4px 6px; }
.hm thead th img { display: block; margin: 0 auto 6px; border-radius: 2px; }
.hm tbody th { text-align: left; font-size: 0.86rem; font-weight: 600; padding-right: 12px; white-space: nowrap; }
.hm-c {
    height: 34px;
    border-radius: 8px;
    transform: scale(0.4);
    opacity: 0;
    transition: transform 0.5s var(--ease) var(--d), opacity 0.5s ease var(--d), box-shadow 0.3s ease;
}
.is-in .hm-c { transform: none; opacity: 1; }
.hm-c--0 { background: rgba(255, 255, 255, 0.025); border: 1px dashed rgba(122, 170, 214, 0.18); }
.hm-c--1 { background: rgba(var(--acc), 0.3); }
.hm-c--2 { background: var(--gold-metal); background-size: 300% 100%; box-shadow: 0 0 16px -6px rgba(242, 181, 29, 0.8); }
.hm-c:hover { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); }
.hm-legend { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.8rem; color: var(--muted); }
.hm-legend li { display: flex; align-items: center; gap: 8px; background: none !important; border: 0 !important; box-shadow: none !important; }
.hm-legend li::before { content: ""; width: 18px; height: 12px; border-radius: 4px; }
.hm-legend .hm-c--2::before { background: var(--gold-metal); }
.hm-legend .hm-c--1::before { background: rgba(var(--acc), 0.3); }
.hm-legend .hm-c--0::before { border: 1px dashed rgba(122, 170, 214, 0.35); }

.sn { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; }
.sn-graph { position: relative; aspect-ratio: 1.3; margin: 16px 40px 30px; }
.sn-graph svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sn-edge { stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 4 5; opacity: 0.5; transition: opacity 0.3s ease, stroke-width 0.3s ease; animation: snFlow 1.4s linear infinite; }
@keyframes snFlow { to { stroke-dashoffset: -18; } }
.sn-edge--dec { stroke: var(--gold); }
.sn-edge--spec { stroke: var(--blue); }
.sn-edge--inf { stroke: rgba(233, 241, 248, 0.5); }
.sn-edge--rule { stroke: #b49cff; }
.sn-edge.is-active { opacity: 1; stroke-width: 2.6; stroke-dasharray: none; }
.sn-centre {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 96px; height: 96px;
    display: grid;
    place-items: center;
    padding: 10px;
    border-radius: 50%;
    text-align: center;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    background: radial-gradient(circle, rgba(var(--acc), 0.35), rgba(6, 24, 38, 0.95) 72%);
    border: 1px solid rgba(var(--acc), 0.6);
    box-shadow: 0 0 40px -6px rgba(var(--acc), 0.6);
}
.sn-node {
    position: absolute;
    left: var(--x); top: var(--y);
    transform: translate(-50%, -50%);
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    width: 120px;
    text-align: center;
}
.sn-node i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; background: var(--navy-850); transition: transform 0.35s var(--ease), box-shadow 0.35s ease; }
.sn-node span { font-size: 0.76rem; font-weight: 600; line-height: 1.25; color: var(--muted); transition: color 0.3s ease; }
.sn-node--dec { color: var(--gold); }
.sn-node--spec { color: var(--blue); }
.sn-node--inf { color: rgba(233, 241, 248, 0.7); }
.sn-node--rule { color: #b49cff; }
.sn-node.is-active i { transform: scale(1.35); background: currentColor; box-shadow: 0 0 22px currentColor; }
.sn-node.is-active span, .sn-node:hover span { color: #fff; }
.sn-panel h4 { font-size: 1.15rem; margin: 12px 0 8px; }
.sn-panel p { margin: 0; }
.sn-tag { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.sn-tag--dec { background: rgba(242, 181, 29, 0.15); color: var(--gold-light); }
.sn-tag--spec { background: rgba(77, 163, 255, 0.15); color: var(--blue-soft); }
.sn-tag--inf { background: rgba(233, 241, 248, 0.08); color: var(--text); }
.sn-tag--rule { background: rgba(180, 156, 255, 0.15); color: #cfc2ff; }
@media (max-width: 900px) {
    .sn { grid-template-columns: 1fr; }
    .sn-graph { margin: 16px 34px 30px; }
    .sn-node { width: 86px; }
    .sn-node span { font-size: 0.66rem; }
    .sn-centre { width: 70px; height: 70px; font-size: 0.66rem; }
}

/* ======================= Partnerships: commitment scale ======================= */
.sp-scale { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: start; }
.sp-end { padding-top: 14px; font-family: var(--font-display); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); max-width: 110px; }
.sp-end:last-child { text-align: right; color: var(--gold); }
.sp-rail { position: relative; height: 92px; margin: 0 20px; }
.sp-rail::before { content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 4px; border-radius: 2px; background: var(--line-strong); }
.sp-fill {
    position: absolute;
    left: 0; top: 18px;
    height: 4px;
    width: calc(var(--pos, 0) * 100%);
    border-radius: 2px;
    background: linear-gradient(90deg, rgb(var(--acc)), var(--gold));
    box-shadow: 0 0 14px rgba(242, 181, 29, 0.5);
    transition: width 0.6s var(--ease);
}
.sp-rail input[type="range"] {
    position: absolute;
    left: -16px; top: 4px;
    width: calc(100% + 32px);
    height: 32px;
    margin: 0;
    z-index: 2;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}
.sp-rail input[type="range"]::-webkit-slider-runnable-track { height: 32px; background: transparent; }
.sp-rail input[type="range"]::-moz-range-track { height: 32px; background: transparent; }
.sp-rail input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 3px solid var(--navy-900);
    background: var(--gold-metal);
    box-shadow: 0 0 0 2px var(--gold), 0 0 24px rgba(242, 181, 29, 0.7);
    transition: left 0.6s var(--ease);
}
.sp-rail input[type="range"]::-moz-range-thumb {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 3px solid var(--navy-900);
    background: var(--gold);
    box-shadow: 0 0 0 2px var(--gold), 0 0 24px rgba(242, 181, 29, 0.7);
}
.sp-rail input[type="range"]:focus-visible { outline: none; }
.sp-rail input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--gold), 0 0 0 6px rgba(77, 163, 255, 0.6); }
.sp-stop {
    position: absolute;
    left: calc(var(--p) * 100%);
    top: 0;
    width: 132px;
    margin-left: -66px;
    padding: 0;
    border: 0;
    background: none;
    display: grid;
    justify-items: center;
    gap: 12px;
}
.sp-stop i { width: 14px; height: 14px; margin-top: 13px; border-radius: 50%; background: var(--navy-850); border: 2px solid var(--line-strong); transition: border-color 0.3s ease; }
.sp-stop span { font-size: 0.78rem; font-weight: 600; line-height: 1.3; color: var(--muted); text-align: center; transition: color 0.3s ease; }
.sp-stop:hover span, .sp-stop.is-active span { color: #fff; }
.sp-stop.is-active span { color: var(--gold-light); }
.sp-panels { margin-top: 28px; }
.sp-panel { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); grid-template-rows: auto 1fr; gap: 0 40px; align-items: start; }
.sp-panel h3 { grid-column: 1; font-size: 1.3rem; margin-bottom: 18px; }
.sp-bars { grid-column: 1; }
.sp-facts { grid-column: 2; grid-row: 1 / span 2; }
.sp-bars { display: grid; gap: 14px; }
.sp-bars div { display: grid; gap: 6px; font-size: 0.8rem; color: var(--muted); }
.sp-bar { position: relative; display: block; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.sp-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; border-radius: 4px; transform-origin: left; animation: sigGrow 0.9s var(--ease) both; }
.sp-bar--commit::after { width: calc(var(--commit) * 100%); background: linear-gradient(90deg, rgb(var(--acc)), var(--gold)); }
.sp-bar--hold::after { width: calc(var(--hold) * 100%); background: linear-gradient(90deg, var(--blue-deep), var(--blue-soft)); }
.sp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; }
.sp-facts div { padding-left: 16px; border-left: 1px solid var(--line-strong); }
.sp-facts dt { font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--acc)); margin-bottom: 8px; }
.sp-facts dd { margin: 0; font-size: 0.92rem; line-height: 1.5; }
@media (max-width: 900px) {
    .sp-scale { grid-template-columns: 1fr; gap: 6px; }
    .sp-end { display: none; }
    .sp-rail { height: 46px; }
    .sp-stop span { display: none; }
    .sp-panel { grid-template-columns: 1fr; gap: 20px; }
    .sp-facts { grid-column: 1; grid-row: auto; }
    .sp-facts { grid-template-columns: 1fr; }
}

/* ======================= Mining: flowsheet and elements ======================= */
.fs-line { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.fs-pipe { position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 37px; height: 6px; border-radius: 3px; background: var(--line-strong); }
.fs-pipe-fill { position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(90deg, rgba(var(--acc), 0.9), var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform 2.6s var(--ease) 0.3s; }
.is-in .fs-pipe-fill { transform: scaleX(1); }
.fs-ore {
    position: absolute;
    top: 50%; left: 0;
    width: 10px; height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: #8f8174;
    opacity: 0;
    animation: fsOre 10s linear infinite;
    animation-delay: calc(var(--i) * -1s);
    animation-play-state: paused;
}
.is-in .fs-ore { animation-play-state: running; }
@keyframes fsOre {
    0% { left: 0; opacity: 0; background: #8f8174; transform: scale(1.1); }
    4% { opacity: 1; }
    55% { background: #9a8b7c; transform: scale(1); }
    66% { background: var(--gold); transform: scale(0.75); box-shadow: 0 0 10px rgba(242, 181, 29, 0.9); }
    96% { opacity: 1; }
    100% { left: 100%; opacity: 0; background: var(--gold-light); transform: scale(0.6); }
}
.fs-st { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; padding: 0; border: 0; background: none; text-align: center; }
.fs-ico {
    display: grid;
    place-items: center;
    width: 80px; height: 80px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: var(--navy-850);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.6s ease calc(var(--i) * 0.16s), transform 0.6s var(--ease) calc(var(--i) * 0.16s), border-color 0.3s ease, box-shadow 0.4s ease, background-color 0.3s ease;
}
.is-in .fs-ico { opacity: 1; transform: none; }
.fs-ico svg { width: 32px; height: 32px; fill: none; stroke: rgb(var(--acc)); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fs-st:hover .fs-ico { border-color: rgba(var(--acc), 0.7); }
.fs-st.is-active .fs-ico { border-color: var(--gold); background: rgba(var(--acc), 0.18); box-shadow: 0 0 0 6px rgba(var(--acc), 0.1), 0 0 30px rgba(var(--acc), 0.55); }
.fs-st.is-active .fs-ico svg { stroke: var(--gold-light); }
.fs-no { font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; color: var(--gold); letter-spacing: 0.12em; }
.fs-name { font-family: var(--font-display); font-size: 0.86rem; font-weight: 600; line-height: 1.25; max-width: 150px; color: var(--muted); transition: color 0.3s ease; }
.fs-st.is-active .fs-name, .fs-st:hover .fs-name { color: #fff; }
.fs-control { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 22px auto 0; padding-top: 14px; width: 84%; border-top: 1px dashed rgba(var(--acc), 0.45); font-size: 0.82rem; text-align: center; }
.fs-control span { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--acc)); box-shadow: 0 0 12px rgb(var(--acc)); animation: sigBlink 1.8s ease-in-out infinite; }
.fs-panels { margin-top: 24px; }
.fs-panel h3 { display: flex; align-items: baseline; gap: 12px; font-size: 1.2rem; margin-bottom: 8px; }
.fs-panel h3 span { font-size: 0.8rem; color: var(--gold); }
.fs-panel p { margin: 0; max-width: 720px; }
.els { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; perspective: 900px; }
.el {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 150px;
    padding: 12px 14px 14px;
    border: 1px solid rgba(var(--acc), 0.35);
    border-radius: 12px;
    background: linear-gradient(160deg, rgba(var(--acc), 0.13), rgba(255, 255, 255, 0.02));
    transition: transform 0.5s var(--ease), border-color 0.3s ease, box-shadow 0.4s ease;
}
.el:hover { transform: translateY(-6px) rotateX(8deg); border-color: var(--gold); box-shadow: 0 24px 40px -24px rgba(var(--acc), 0.9); }
.el-z { font-size: 0.72rem; font-weight: 700; color: var(--muted); }
.el-sym {
    margin-top: 2px;
    font-family: var(--font-display);
    font-size: 2.7rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    background: linear-gradient(160deg, #fff, rgb(var(--acc)));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.el:nth-child(1) .el-sym { background-image: linear-gradient(160deg, #eaffc9, #8fd14f); }
.el:nth-child(2) .el-sym { background-image: linear-gradient(160deg, #ffd1b0, #c8642c); }
.el:nth-child(3) .el-sym { background-image: var(--gold-metal); }
.el:nth-child(4) .el-sym { background-image: linear-gradient(160deg, #e8f0f6, #7f9bb3); }
.el:nth-child(5) .el-sym { background-image: linear-gradient(160deg, #eef2f6, #8da2b4); }
.el:nth-child(6) .el-sym { background-image: linear-gradient(160deg, #ffffff, #a9b8c6); }
.el:nth-child(8) .el-sym { background-image: linear-gradient(160deg, #ffffff, #b9c6d2); }
.el-name { margin-top: 6px; font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; }
.el-flags { display: flex; gap: 5px; margin-top: auto; padding-top: 10px; }
.el-flags img { border-radius: 2px; }
.el-note { margin-top: 8px; font-size: 0.72rem; line-height: 1.35; color: var(--gold-light); }
.els .el { opacity: 0; transform: translateY(16px); }
.els.is-visible .el { opacity: 1; transform: none; transition: opacity 0.6s ease calc(var(--i) * 0.07s), transform 0.6s var(--ease) calc(var(--i) * 0.07s), border-color 0.3s ease, box-shadow 0.4s ease; }
.els.is-visible .el:hover { transform: translateY(-6px) rotateX(8deg); transition-delay: 0s; }
@media (max-width: 760px) {
    .fs-line { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; }
    .fs-pipe { display: none; }
    .fs-ico { width: 64px; height: 64px; }
}

/* ======================= Industrial technology: plant hotspots ======================= */
.pt { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.pt-stage {
    position: relative;
    aspect-ratio: 1000 / 460;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(60% 70% at 50% 60%, rgba(var(--acc), 0.1), transparent 70%),
        linear-gradient(rgba(122, 170, 214, 0.05) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, rgba(122, 170, 214, 0.05) 1px, transparent 1px) 0 0 / 40px 40px,
        rgba(6, 24, 38, 0.6);
    overflow: hidden;
}
.pt-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pt-svg * { vector-effect: non-scaling-stroke; }
.pt-ground { stroke: var(--line-strong); stroke-width: 1.5; }
.pt-wall { fill: none; stroke: rgba(122, 170, 214, 0.55); stroke-width: 1.5; stroke-linejoin: round; }
.pt-m { fill: rgba(255, 255, 255, 0.025); stroke: rgba(233, 241, 248, 0.68); stroke-width: 1.5; stroke-linejoin: round; }
.pt-thin { fill: none; stroke: rgba(122, 170, 214, 0.5); stroke-width: 1; }
.pt-pipe { fill: none; stroke: rgb(var(--acc)); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 8 6; animation: ptFlow 1s linear infinite; }
@keyframes ptFlow { to { stroke-dashoffset: -14; } }
.pt-needle { stroke: var(--gold); stroke-width: 2; stroke-linecap: round; transform-origin: 235px 280px; animation: ptNeedle 3.2s ease-in-out infinite; }
@keyframes ptNeedle { 0%, 100% { transform: rotate(-35deg); } 50% { transform: rotate(40deg); } }
.pt-roll { fill: none; stroke: rgba(233, 241, 248, 0.7); stroke-width: 1.5; stroke-dasharray: 6 5; animation: ptRoll 1.2s linear infinite; }
.pt-roll-spoke { display: none; }
@keyframes ptRoll { to { stroke-dashoffset: -22; } }
.pt-belt .pt-box { fill: rgba(var(--acc), 0.25); stroke: rgb(var(--acc)); stroke-width: 1.2; animation: ptBelt 6s linear infinite; animation-delay: calc(var(--i) * -1.5s); }
@keyframes ptBelt {
    0% { transform: translate(470px, 360px); opacity: 0; }
    6%, 92% { opacity: 1; }
    100% { transform: translate(708px, 360px); opacity: 0; }
}
.pt-led { fill: #5be37d; animation: sigBlink 1.1s steps(2) infinite; }
.pt-led--2 { fill: var(--gold); animation-duration: 1.7s; }
.pt-fan { transform-box: fill-box; transform-origin: center; animation: crSpin 1.6s linear infinite; }
.pt-arm { transform-origin: 780px 250px; animation: ptArm 4s ease-in-out infinite; }
@keyframes ptArm { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(16deg); } }
.pt-hs {
    position: absolute;
    left: var(--x); top: var(--y);
    width: 30px; height: 30px;
    margin: -15px 0 0 -15px;
    padding: 0;
    border: 2px solid var(--navy-900);
    border-radius: 50%;
    background: rgb(var(--acc));
    color: var(--navy-900);
    font-family: var(--font-display) !important;
    font-size: 0.8rem;
    font-weight: 800;
    box-shadow: 0 0 0 0 rgba(var(--acc), 0.6);
    animation: ptPulse 2.4s ease-out infinite;
    animation-delay: calc(var(--i) * 0.3s);
    transition: transform 0.35s var(--ease), background 0.3s ease;
}
@keyframes ptPulse { 0% { box-shadow: 0 0 0 0 rgba(var(--acc), 0.6); } 70%, 100% { box-shadow: 0 0 0 14px rgba(var(--acc), 0); } }
.pt-hs:hover { transform: scale(1.12); }
.pt-hs.is-active { background: var(--gold-metal); transform: scale(1.22); animation: none; box-shadow: 0 0 0 5px rgba(242, 181, 29, 0.25), 0 0 26px rgba(242, 181, 29, 0.8); }
.pt-side { display: grid; gap: 16px; }
.pt-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pt-li {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    font-size: 0.78rem;
    font-weight: 600;
    text-align: left;
    line-height: 1.25;
    transition: border-color 0.3s ease, background 0.3s ease;
}
.pt-li b { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(var(--acc), 0.2); color: rgb(var(--acc)); font-size: 0.72rem; }
.pt-li:hover { border-color: rgba(var(--acc), 0.5); }
.pt-li.is-active { border-color: var(--gold); background: rgba(242, 181, 29, 0.08); }
.pt-li.is-active b { background: var(--gold); color: var(--navy-900); }
.pt-panel h3 { display: flex; align-items: center; gap: 12px; font-size: 1.15rem; margin-bottom: 16px; }
.pt-panel h3 b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--gold-metal); color: var(--navy-900); font-size: 0.85rem; }
.pt-panel dl { display: grid; gap: 14px; margin: 0; }
.pt-panel dt { font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--acc)); margin-bottom: 4px; }
.pt-panel dd { margin: 0; color: var(--text); }
@media (max-width: 1000px) {
    .pt { grid-template-columns: 1fr; }
    .pt-hs { width: 24px; height: 24px; margin: -12px 0 0 -12px; font-size: 0.68rem; }
}

/* ======================= Recycling: material loop ======================= */
.lp { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: center; }
.lp-stage { position: relative; aspect-ratio: 1; width: 100%; max-width: 540px; margin: 30px auto; }
.lp-stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lp-ring { fill: none; stroke: var(--line); stroke-width: 0.35; stroke-dasharray: 0.6 1.2; }
.lp-arc { fill: none; stroke: rgb(var(--acc)); stroke-width: 0.7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 1px rgba(var(--acc), 0.9)); }
.is-in .lp-arc { animation: sigDraw 0.9s var(--ease) forwards; animation-delay: calc(0.3s + var(--i) * 0.28s); }
.lp-orbit { transform-origin: 50px 50px; animation: crSpin 26s linear infinite; }
.lp-dot { fill: var(--gold-light); transform-origin: 50px 50px; transform: rotate(calc(var(--i) * 30deg)); filter: drop-shadow(0 0 1.2px rgba(255, 217, 77, 0.9)); }
.lp-dot:nth-child(even) { fill: rgb(var(--acc)); }
.lp-branch { fill: none; stroke: rgba(var(--acc), 0.6); stroke-width: 0.35; stroke-dasharray: 1 1; }
.lp-core {
    position: absolute;
    left: 50%; top: 50%;
    width: 22%; aspect-ratio: 1;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(var(--acc), 0.4);
    background: radial-gradient(circle, rgba(var(--acc), 0.2), rgba(6, 24, 38, 0.2) 70%);
}
.lp-core svg { width: 46%; height: 46%; fill: none; stroke: rgb(var(--acc)); stroke-width: 1.4; stroke-linecap: round; animation: crSpin 16s linear infinite reverse; }
.lp-node {
    position: absolute;
    left: var(--x); top: var(--y);
    transform: translate(-50%, -50%);
    padding: 0;
    border: 0;
    background: none;
    z-index: 1;
}
.lp-node b {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 1.5px solid rgb(var(--acc));
    background: var(--navy-850);
    font-family: var(--font-display);
    font-size: 0.82rem;
    color: rgb(var(--acc));
    transition: transform 0.35s var(--ease), background 0.3s ease, color 0.3s ease, box-shadow 0.4s ease;
}
.lp-node span { position: absolute; width: 140px; font-size: 0.8rem; font-weight: 600; line-height: 1.25; color: var(--muted); transition: color 0.3s ease; }
.lp-node[data-side="top"] span { bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); text-align: center; }
.lp-node[data-side="bottom"] span { top: calc(100% + 8px); left: 50%; transform: translateX(-50%); text-align: center; }
.lp-node[data-side="right"] span { left: calc(100% + 12px); top: 50%; transform: translateY(-50%); text-align: left; }
.lp-node[data-side="left"] span { right: calc(100% + 12px); top: 50%; transform: translateY(-50%); text-align: right; }
.lp-node:hover span, .lp-node.is-active span { color: #fff; }
.lp-node.is-active b { transform: scale(1.18); background: rgb(var(--acc)); color: var(--navy-900); box-shadow: 0 0 0 7px rgba(var(--acc), 0.15), 0 0 30px rgba(var(--acc), 0.7); }
.lp-sat {
    position: absolute;
    left: var(--x); top: var(--y);
    transform: translate(-50%, -50%);
    padding: 5px 11px;
    border: 1px dashed rgba(var(--acc), 0.7);
    border-radius: 999px;
    background: rgba(6, 24, 38, 0.92);
    font-size: 0.7rem;
    font-weight: 600;
    color: rgb(var(--acc));
    white-space: nowrap;
    transition: background 0.3s ease, color 0.3s ease;
}
.lp-sat.is-active { background: rgb(var(--acc)); color: var(--navy-900); border-style: solid; }
.lp-panel { min-height: 200px; }
.lp-panel-no { font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; color: var(--gold); }
.lp-panel h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); margin: 10px 0 12px; }
.lp-panel p { margin: 0; font-size: 1rem; }
@media (max-width: 900px) {
    .lp { grid-template-columns: 1fr; }
    .lp-node { width: 96px; }
    .lp-node b { width: 36px; height: 36px; font-size: 0.72rem; }
    .lp-node span { width: 90px; font-size: 0.66rem; }
    .lp-node[data-side="right"] span { left: auto; right: 50%; top: calc(100% + 6px); transform: translateX(50%); text-align: center; }
    .lp-node[data-side="left"] span { right: auto; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); text-align: center; }
    .lp-sat { font-size: 0.6rem; padding: 4px 8px; }
}

/* ======================= Kazakhstan: industrial map ======================= */
.hb-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.hb-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    font-size: 0.82rem;
    font-weight: 600;
    transition: border-color 0.3s ease, background 0.3s ease;
}
.hb-filter::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.hb-filter.is-active { border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); }
.hb-cat--metals { --c: #e0864a; }
.hb-cat--oil { --c: #b49cff; }
.hb-cat--energy { --c: #ffd94d; }
.hb-cat--trade { --c: #4da3ff; }
.hb-body { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; }
.hb-map {
    position: relative;
    aspect-ratio: 249.5 / 154.7;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(rgba(122, 170, 214, 0.05) 1px, transparent 1px) 0 0 / 5% 8%,
        linear-gradient(90deg, rgba(122, 170, 214, 0.05) 1px, transparent 1px) 0 0 / 5% 8%,
        rgba(6, 24, 38, 0.6);
    overflow: hidden;
}
.hb-map svg, .pp-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hb-map .cmap-ctx, .pp-map .cmap-ctx { fill: rgba(122, 170, 214, 0.07); stroke: rgba(122, 170, 214, 0.22); stroke-width: 0.25; }
.hb-land {
    fill: rgba(var(--acc), 0.12);
    stroke: rgb(var(--acc));
    stroke-width: 0.5;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    filter: drop-shadow(0 0 2px rgba(var(--acc), 0.6));
}
.is-in .hb-land { animation: sigDraw 2.6s var(--ease) 0.2s forwards; }
.hb-pin {
    position: absolute;
    left: var(--x); top: var(--y);
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: none;
    transform: translate(-7px, -50%);
    transition: opacity 0.35s ease;
    z-index: 1;
}
.hb-pin--left { flex-direction: row-reverse; transform: translate(calc(-100% + 7px), -50%); }
.hb-pin i { position: relative; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--navy-900); background: var(--c, #4da3ff); box-shadow: 0 0 10px var(--c, #4da3ff); transition: transform 0.35s var(--ease); }
.hb-pin[data-cat^="metals"] { --c: #e0864a; }
.hb-pin[data-cat^="oil"] { --c: #b49cff; }
.hb-pin[data-cat^="energy"] { --c: #ffd94d; }
.hb-pin[data-cat^="trade"] { --c: #4da3ff; }
.hb-pin span { padding: 2px 7px; border-radius: 6px; background: rgba(4, 18, 30, 0.75); font-size: 0.74rem; font-weight: 600; white-space: nowrap; color: var(--muted); transition: color 0.3s ease, background 0.3s ease; }
.hb-pin:hover span { color: #fff; }
.hb-pin.is-active i { transform: scale(1.5); }
.hb-pin.is-active i::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid var(--c); animation: sigRing 1.8s ease-out infinite; }
.hb-pin.is-active span { color: var(--navy-900); background: var(--c); }
.hb-pin--below { flex-direction: column; gap: 4px; transform: translate(-50%, -7px); }
.hb-pin.is-dim { opacity: 0.18; }
.hb-panel h3 { font-size: 1.4rem; margin-bottom: 12px; }
.hb-cats { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hb-cats li { padding: 4px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; border: 1px solid var(--c); color: var(--c); }
.hb-panel p { margin: 0; }
@media (max-width: 900px) {
    .hb-body { grid-template-columns: 1fr; }
    .hb-pin span { font-size: 0.6rem; padding: 1px 4px; }
    .hb-pin i { width: 10px; height: 10px; }
}

/* ======================= Uzbekistan, Kyrgyzstan, Tajikistan: map layers ======================= */
/* numbered pins (route stops, dams) */
.hb-pin i:not(:empty) {
    display: grid;
    place-items: center;
    width: 20px; height: 20px;
    font-family: var(--font-display);
    font-size: 0.62rem;
    font-weight: 800;
    font-style: normal;
    color: var(--navy-900);
}
.hb-pin--above { flex-direction: column-reverse; gap: 4px; transform: translate(-50%, calc(-100% + 7px)); }
.hb-pin--dam i:not(:empty) { width: 17px; height: 17px; font-size: 0.56rem; }
.hb-pin--dam:not(.is-active):not(:hover) span { display: none; }
.hb-pin--gate i { border-radius: 2px; transform: rotate(45deg); }
.hb-pin--gate.is-active i { transform: rotate(45deg) scale(1.5); }

/* Uzbekistan: the caravan road, drawn, then travelled */
.mp-road { fill: none; stroke: var(--gold); stroke-width: 0.7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 1px rgba(242, 181, 29, 0.8)); }
.is-in .mp-road { animation: sigDraw 3s var(--ease) 0.4s forwards; }
.mp-road-dash { fill: none; stroke: rgba(4, 18, 30, 0.85); stroke-width: 0.32; stroke-dasharray: 0.9 1.4; animation: ppGas 2.4s linear infinite; }
.mp-caravan { fill: var(--gold-light); filter: drop-shadow(0 0 1.6px rgba(255, 217, 77, 1)); }
.mp--uz .hb-map::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%236884ff' stroke-width='1' stroke-opacity='0.14'%3E%3Cpath d='M40 14l7.6 18.4L66 40l-18.4 7.6L40 66l-7.6-18.4L14 40l18.4-7.6z'/%3E%3Cpath d='M21.6 21.6h36.8v36.8H21.6z' transform='rotate(45 40 40)'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
    -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, transparent 30%, #000);
    mask-image: radial-gradient(80% 80% at 50% 50%, transparent 30%, #000);
}

/* Kyrgyzstan: the crossings as gates pointing out of the country */
.mp-gate { fill: none; stroke: rgb(var(--acc)); stroke-width: 0.55; stroke-linecap: round; stroke-dasharray: 0.7 0.7; animation: mpOut 1.2s linear infinite; opacity: 0.6; transition: opacity 0.3s ease, stroke-width 0.3s ease; }
.mp-gate.is-active { opacity: 1; stroke-width: 0.8; stroke: var(--gold); }
@keyframes mpOut { to { stroke-dashoffset: -1.4; } }
.mp--kg .rl-eaeu { margin-top: 22px; }

/* Tajikistan: the Vakhsh, with water running through the cascade */
.mp-river { fill: none; stroke: rgba(92, 200, 255, 0.35); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.mp-water { fill: none; stroke: #b5e8ff; stroke-width: 0.45; stroke-linecap: round; stroke-dasharray: 0.5 1.3; animation: mpWater 1.1s linear infinite; filter: drop-shadow(0 0 0.8px rgba(92, 200, 255, 0.9)); }
@keyframes mpWater { to { stroke-dashoffset: -1.8; } }

.rl-eaeu {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-top: 18px;
    padding: 22px 28px;
    border: 1px solid rgba(var(--acc), 0.4);
    border-radius: var(--radius-lg);
    background: linear-gradient(110deg, rgba(var(--acc), 0.16), rgba(255, 255, 255, 0.02) 70%);
}
.rl-eaeu b {
    flex: none;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 800;
    line-height: 1;
    background: var(--gold-metal);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.rl-eaeu b small { margin-left: 8px; font-size: 0.42em; letter-spacing: 0.02em; }
.rl-eaeu p { margin: 0; color: var(--text); }

.cs-uses-head { margin-top: clamp(40px, 5vw, 64px); }
.cs-uses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cs-uses li { display: grid; gap: 6px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.cs-uses svg { width: 30px; height: 30px; fill: none; stroke: rgb(var(--acc)); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cs-uses b { font-family: var(--font-display); }
.cs-uses span { font-size: 0.88rem; color: var(--muted); }
@media (max-width: 760px) { .cs-uses { grid-template-columns: 1fr; } }

/* ======================= Turkmenistan: gas routes ======================= */
.pp { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; }
.pp-map {
    position: relative;
    aspect-ratio: 168 / 100;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: radial-gradient(40% 50% at 20% 40%, rgba(77, 163, 255, 0.08), transparent 70%), rgba(6, 24, 38, 0.6);
    overflow: hidden;
}
.pp-land { fill: rgba(var(--acc), 0.12); stroke: rgb(var(--acc)); stroke-width: 0.45; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-in .pp-land { animation: sigDraw 2.4s var(--ease) 0.2s forwards; }
.pp-route { fill: none; stroke: rgba(233, 241, 248, 0.22); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.3s ease, opacity 0.3s ease; }
.pp-route--uc { stroke-dasharray: 2 1.4; }
.pp-route--pl { stroke-dasharray: 0.3 1.3; }
.pp-gas { fill: none; stroke-width: 0.55; stroke-linecap: round; stroke-dasharray: 1 2.6; animation: ppGas 1.4s linear infinite; opacity: 0.85; transition: opacity 0.3s ease, stroke-width 0.3s ease; }
.pp-gas--op { stroke: var(--gold-light); }
.pp-gas--uc { stroke: rgb(var(--acc)); animation-duration: 2.6s; }
.pp-gas--pl { stroke: rgba(233, 241, 248, 0.7); animation-duration: 4s; }
@keyframes ppGas { to { stroke-dashoffset: -3.6; } }
.pp[data-active] .pp-route:not(.is-active), .pp[data-active] .pp-gas:not(.is-active) { opacity: 0.32; }
.pp-route.is-active { stroke: rgba(242, 181, 29, 0.55); stroke-width: 1.8; }
.pp-gas.is-active { stroke-width: 0.8; opacity: 1; filter: drop-shadow(0 0 0.8px rgba(255, 217, 77, 0.9)); }
.pp-sea { position: absolute; left: 7%; top: 22%; font-size: 0.72rem; font-style: italic; letter-spacing: 0.12em; color: rgba(134, 194, 255, 0.55); }
.pp-exit {
    position: absolute;
    left: var(--x); top: var(--y);
    transform: translate(-50%, -50%);
    padding: 3px 9px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(4, 18, 30, 0.85);
    font-size: 0.66rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--muted);
    transition: color 0.3s ease, border-color 0.3s ease;
}
.pp-exit--l { transform: translate(-12%, -170%); }
.pp-exit--r { transform: translate(-88%, -50%); }
.pp-exit.is-active { color: var(--navy-900); background: var(--gold); border-color: var(--gold); }
.pp-city { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 5px; transform: translate(-4px, -50%); font-size: 0.68rem; font-weight: 600; color: var(--text); white-space: nowrap; pointer-events: none; text-shadow: 0 1px 6px #04121e; }
.pp-city i { width: 8px; height: 8px; border-radius: 50%; background: var(--text); }
.pp-city--cap i { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.pp-city--field i { width: 12px; height: 12px; background: rgb(var(--acc)); box-shadow: 0 0 0 0 rgba(var(--acc), 0.7); animation: ptPulse 2s ease-out infinite; }
.pp-side { display: grid; gap: 14px; }
.pp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pp-btn {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    text-align: left;
    transition: border-color 0.3s ease, background 0.3s ease;
}
.pp-btn i { height: 3px; border-radius: 2px; background: var(--gold-light); }
.pp-btn--uc i { background: repeating-linear-gradient(90deg, rgb(var(--acc)) 0 6px, transparent 6px 9px); }
.pp-btn--pl i { background: repeating-linear-gradient(90deg, rgba(233, 241, 248, 0.7) 0 2px, transparent 2px 6px); }
.pp-btn b { font-size: 0.86rem; }
.pp-btn small { font-size: 0.68rem; color: var(--muted); }
.pp-btn:hover { border-color: rgba(var(--acc), 0.5); }
.pp-btn.is-active { border-color: var(--gold); background: rgba(242, 181, 29, 0.08); }
.pp-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.pp-status--op { background: rgba(242, 181, 29, 0.16); color: var(--gold-light); }
.pp-status--uc { background: rgba(var(--acc), 0.18); color: rgb(var(--acc)); }
.pp-status--pl { background: rgba(233, 241, 248, 0.08); color: var(--text); }
.pp-panel h3 { font-size: 1.25rem; margin: 10px 0 2px; }
.pp-dest { margin: 0 0 8px; font-size: 0.82rem; color: var(--gold-light) !important; }
.pp-panel p:last-child { margin: 0; }
@media (max-width: 900px) {
    .pp { grid-template-columns: 1fr; }
    .pp-exit { font-size: 0.52rem; padding: 2px 5px; }
    .pp-city { font-size: 0.56rem; }
}

/* ---------------- Calm for those who asked for it ---------------- */
@media (prefers-reduced-motion: reduce) {
    .section-sig *, .section-sig *::before, .section-sig *::after { animation: none !important; transition: none !important; }
    .mx-trail, .pl-a, .pl-b, .lp-arc, .hb-land, .pp-land, .rl-edge { stroke-dashoffset: 0; }
    .gt-bar, .cs-dam, .fs-pipe-fill { transform: none; }
    .mx-p, .mx-legend, .fs-ico, .rt-stop, .rl-mark, .hm-c, .els .el, .rl-back, .rl-front, .pl-area, .pl-ann b { opacity: 1; transform: none; }
    .pl-ann i, .gt-gate i { transform: rotate(45deg); }
    .pl-ann i { transform: none; }
}

/* ---------------- Phones: fewer labels at once ---------------- */
@media (max-width: 620px) {
    /* the two side stations stack in the middle of the loop */
    .lp-core, .lp-branch { display: none; }
    .lp-sat { left: 50% !important; }
    .lp-sat[data-pick-key="water"] { top: 48% !important; }
    .lp-sat[data-pick-key="air"] { top: 61% !important; }
    /* maps: only the selected place carries its name */
    .hb-pin:not(.is-active) span { display: none; }
    .pp-exit:not(.is-active) { display: none; }
    .pp-city--field { font-size: 0; gap: 0; }
}

/* zoomed maps draw finer lines */
.mp--kg .hb-land { stroke-width: 0.32; }
.mp--tj .hb-land { stroke-width: 0.16; }
.mp--tj .cmap-ctx { stroke-width: 0.08; }
.mp--tj .mp-river { stroke-width: 0.5; }
.mp--tj .mp-water { stroke-width: 0.17; stroke-dasharray: 0.2 0.5; animation-name: mpWaterFine; }
@keyframes mpWaterFine { to { stroke-dashoffset: -0.7; } }
@media (max-width: 760px) {
    .rl-eaeu { flex-direction: column; align-items: flex-start; gap: 10px; }
}
/* =========================================================
   Second signature sections: region maps, a second view per
   country and the tools of the service pages.
   ========================================================= */

/* ---------------- Panel actions: enquiry and link ---------------- */
.sig-acts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.sig-ask { font-size: 0.84rem; font-weight: 600; color: rgb(var(--acc)); transition: color 0.3s ease; }
.sig-ask:hover { color: #fff; }
.sig-share { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font-size: 0.78rem; color: var(--muted) !important; transition: color 0.3s ease; }
.sig-share:hover { color: #fff !important; }
.sig-share svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sig-share.is-done { color: #9be15d !important; }
.hb-country {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 6px 13px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
    transition: border-color 0.3s ease, background 0.3s ease;
}
.hb-country img { border-radius: 2px; }
.hb-country:hover { border-color: rgb(var(--acc)); background: rgba(var(--acc), 0.12); }
.hb-panel h3 small { margin-left: 6px; font-size: 0.8rem; font-weight: 500; color: var(--muted); }

/* ---------------- Region maps (mining, technology, recycling) ---------------- */
.rg .hb-body { grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); }
.rg-map .hb-land { stroke-width: 0.4; }
.rg-cn {
    fill: rgba(233, 241, 248, 0.16);
    font-family: var(--font-display);
    font-size: 3.1px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-anchor: middle;
    pointer-events: none;
}
.hb-pin--sized i { width: var(--s); height: var(--s); opacity: 0.9; }
.hb-pin--sized { transform: translate(calc(var(--s) / -2), -50%); }
.hb-pin--sized.hb-pin--left { transform: translate(calc(-100% + var(--s) / 2), -50%); }
.hb-pin--sized.hb-pin--above { transform: translate(-50%, calc(-100% + var(--s) / 2)); }
.hb-pin--sized.hb-pin--below { transform: translate(-50%, calc(var(--s) / -2)); }
.hb-pin--sized.is-active i { transform: scale(1.2); }

/* ---------------- Kazakhstan: periodic table ---------------- */
.pe-body { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
@media (max-width: 900px) { .pe-body { grid-template-columns: 1fr; } }
.pe-table {
    display: grid;
    grid-template-columns: repeat(18, minmax(0, 1fr));
    grid-template-rows: repeat(7, auto) 8px repeat(2, auto);
    gap: 3px;
}
.pe-cell, .pe-el { aspect-ratio: 1; border-radius: 4px; }
.pe-cell {
    display: grid;
    place-items: center;
    font-size: 0.56rem;
    color: rgba(233, 241, 248, 0.2);
    border: 1px solid rgba(122, 170, 214, 0.08);
}
.pe-gap { font-size: 0.4rem; letter-spacing: -0.02em; }
.pe-el {
    position: relative;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--c) !important;
    background: color-mix(in srgb, var(--c) 16%, transparent) !important;
    transition: transform 0.35s var(--ease), background 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
}
.pe-el b { font-family: var(--font-display); font-size: clamp(0.6rem, 1.05vw, 0.95rem); font-weight: 800; color: #fff; }
.pe-el small { position: absolute; top: 1px; left: 3px; font-size: 0.42rem; color: var(--c); }
.pe-el:hover { transform: scale(1.1); }
.pe-el.is-active { z-index: 1; transform: scale(1.22); background: var(--c) !important; box-shadow: 0 0 18px var(--c); }
.pe-el.is-active b, .pe-el.is-active small { color: var(--navy-900); }
.pe-el.is-dim { opacity: 0.2; }
.is-in .pe-el { animation: ptPop 0.6s var(--ease) both; }
.is-in .pe-el:nth-of-type(3n) { animation-delay: 0.1s; }
.is-in .pe-el:nth-of-type(3n + 1) { animation-delay: 0.2s; }
@keyframes ptPop { from { opacity: 0; transform: scale(0.4); } }
.pe-big {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 76px; height: 76px;
    margin-bottom: 14px;
    border: 2px solid var(--c);
    border-radius: 12px;
    background: color-mix(in srgb, var(--c) 14%, transparent);
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--c);
}
.pe-big small { position: absolute; top: 4px; left: 7px; font-size: 0.7rem; }
@media (max-width: 620px) {
    .pe-table { gap: 2px; }
    .pe-cell { font-size: 0; }
    .pe-el b { font-size: 0.5rem; }
    .pe-el small { display: none; }
}

/* ---------------- Uzbekistan: population pyramid ---------------- */
.py { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.py-legend, .py-row { display: grid; grid-template-columns: 1fr 56px 1fr; align-items: center; }
.py-legend { margin-bottom: 8px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.py-legend span:first-child { text-align: right; }
.py-legend span:nth-child(2) { text-align: center; }
.py-rows { display: grid; gap: 3px; }
.py-row { cursor: pointer; transition: opacity 0.3s ease; }
.py-bar { height: 17px; width: var(--w); transition: transform 1s var(--ease), background 0.3s ease, box-shadow 0.3s ease; }
.py-bar--m { justify-self: end; border-radius: 5px 0 0 5px; background: color-mix(in srgb, var(--c) 55%, transparent); transform-origin: right; }
.py-bar--w { justify-self: start; border-radius: 0 5px 5px 0; background: color-mix(in srgb, var(--c) 38%, transparent); transform-origin: left; }
.section-sig:not(.is-in) .py-bar { transform: scaleX(0); }
.py-age { text-align: center; font-size: 0.68rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.py-row.is-active .py-bar { background: var(--c); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 45%, transparent); }
.py-row.is-active .py-age { color: #fff; font-weight: 700; }
.py[data-active] .py-row:not(.is-active) { opacity: 0.45; }
.py-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.py-tab {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--surface);
    text-align: left;
    transition: border-color 0.3s ease, background 0.3s ease;
}
.py-tab b { font-size: 0.8rem; }
.py-tab small { font-size: 0.7rem; color: var(--muted); }
.py-tab.is-active { border-color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.py-share { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px !important; }
.py-share b { font-family: var(--font-display); font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 800; line-height: 1; color: var(--c); }
.py-share span { color: var(--muted); }
.py-panel::before { background: var(--c) !important; }
.py-median { display: grid; gap: 8px; margin-top: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); }
.py-median > span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.py-median div { position: relative; height: 28px; border-radius: 7px; background: rgba(255, 255, 255, 0.04); overflow: hidden; }
.py-median i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: linear-gradient(90deg, rgba(var(--acc), 0.85), rgba(var(--acc), 0.35)); }
.py-median--de i { background: linear-gradient(90deg, rgba(185, 195, 207, 0.45), rgba(185, 195, 207, 0.15)) !important; }
.py-median b { position: relative; padding: 0 12px; font-size: 0.82rem; line-height: 28px; }
@media (max-width: 900px) {
    .py { grid-template-columns: 1fr; }
    .py-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .py-bar { height: 13px; }
}

/* ---------------- Kyrgyzstan: road profile ---------------- */
.pf-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.pf-tab, .db-tab, .al-tab {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    font-size: 0.86rem;
    font-weight: 600;
    transition: border-color 0.3s ease, background 0.3s ease;
}
.pf-tab.is-active, .db-tab.is-active, .al-tab.is-active { border-color: rgb(var(--acc)); background: rgba(var(--acc), 0.16); }
.pf-sum { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 34px; margin: 0 0 16px; padding: 0; }
.pf-sum li { display: grid; font-size: 0.78rem; color: var(--muted); }
.pf-sum b { font-family: var(--font-display); font-size: 1.5rem; color: #fff; }
.pf-body { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; }
.pf-chart, .ss-plot {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(90deg, rgba(122, 170, 214, 0.05) 1px, transparent 1px) 0 0 / 10% 100%,
        rgba(6, 24, 38, 0.6);
    overflow: hidden;
}
.pf-chart { aspect-ratio: 1000 / 320; }
.pf-chart svg, .ss-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pf-grid { stroke: rgba(122, 170, 214, 0.14); stroke-width: 1; stroke-dasharray: 4 6; }
.pf-area { fill: rgba(var(--acc), 0.14); }
.pf-line { fill: none; stroke: rgb(var(--acc)); stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px rgba(var(--acc), 0.7)); }
.is-in .pf-line { animation: sigDraw 2.4s var(--ease) 0.2s forwards; }
.pf-gl { position: absolute; left: 10px; transform: translateY(-120%); font-size: 0.62rem; color: rgba(233, 241, 248, 0.35); pointer-events: none; }
.pf-stop {
    position: absolute;
    left: var(--x); top: var(--y);
    z-index: 1;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    transform: translate(-50%, calc(-100% + 7px));
}
.pf-stop--left { align-items: flex-end; transform: translate(calc(-100% + 7px), calc(-100% + 7px)); }
.pf-stop--right { align-items: flex-start; transform: translate(-7px, calc(-100% + 7px)); }
.pf-stop i { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--navy-900); background: rgb(var(--acc)); box-shadow: 0 0 10px rgb(var(--acc)); transition: transform 0.35s var(--ease), background 0.3s ease; }
.pf-stop span { display: grid; padding: 2px 8px; border-radius: 6px; background: rgba(4, 18, 30, 0.8); font-size: 0.64rem; line-height: 1.3; text-align: center; white-space: nowrap; color: var(--muted); transition: background 0.3s ease, color 0.3s ease; }
.pf-stop--left span { text-align: right; }
.pf-stop--right span { text-align: left; }
.pf-stop b { font-size: 0.72rem; color: #fff; }
.pf-stop small { font-size: 1em; }
.pf-stop.is-active i { transform: scale(1.4); background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.pf-stop.is-active span { background: rgb(var(--acc)); color: var(--navy-900); }
.pf-stop.is-active b { color: var(--navy-900); }
.pf-dl { display: flex; gap: 28px; margin: 0 0 12px; }
.pf-dl dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.pf-dl dd { margin: 0; font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; }
@media (max-width: 900px) { .pf-body { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
    .pf-stop:not(.is-active) span { display: none; }
    .pf-stop i { width: 11px; height: 11px; }
    .pf-gl { display: none; }
}

/* ---------------- Tajikistan: a year of water and power ---------------- */
.ss, .gx { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; }
.ss-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 10px; font-size: 0.76rem; color: var(--muted); }
.ss-l-w::before, .ss-l-d::before { content: ""; display: inline-block; margin-right: 8px; vertical-align: middle; }
.ss-l-w::before { width: 12px; height: 12px; border-radius: 3px; background: #5cc8ff; }
.ss-l-d::before { width: 18px; height: 3px; border-radius: 2px; background: var(--gold); }
.ss-plot { aspect-ratio: 1200 / 340; background-size: calc(100% / 12) 100%, auto; }
.ss-water { fill: rgba(92, 200, 255, 0.32); transform-box: fill-box; transform-origin: bottom; transition: transform 0.9s var(--ease), fill 0.3s ease; transition-delay: calc(var(--i) * 60ms), 0s; }
.section-sig:not(.is-in) .ss-water { transform: scaleY(0); }
.ss-demand { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px rgba(242, 181, 29, 0.7)); }
.is-in .ss-demand { animation: sigDraw 2.2s var(--ease) 0.6s forwards; }
.ss-dot { fill: var(--navy-900); stroke: var(--gold); stroke-width: 3; }
.ss-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.ss-col { display: flex; align-items: flex-end; justify-content: center; padding: 0 0 6px; border: 0; background: none; transition: background 0.3s ease; }
.ss-col span { font-size: 0.66rem; color: var(--muted); }
.ss-col:hover { background: rgba(var(--acc), 0.06); }
.ss-col.is-active { background: linear-gradient(180deg, rgba(var(--acc), 0), rgba(var(--acc), 0.2)); }
.ss-col.is-active span { color: #fff; font-weight: 700; }
.ss[data-active="m0"] .ss-water:nth-child(1), .ss[data-active="m1"] .ss-water:nth-child(2), .ss[data-active="m2"] .ss-water:nth-child(3),
.ss[data-active="m3"] .ss-water:nth-child(4), .ss[data-active="m4"] .ss-water:nth-child(5), .ss[data-active="m5"] .ss-water:nth-child(6),
.ss[data-active="m6"] .ss-water:nth-child(7), .ss[data-active="m7"] .ss-water:nth-child(8), .ss[data-active="m8"] .ss-water:nth-child(9),
.ss[data-active="m9"] .ss-water:nth-child(10), .ss[data-active="m10"] .ss-water:nth-child(11), .ss[data-active="m11"] .ss-water:nth-child(12) { fill: #5cc8ff; }
.ss-range { display: block; margin-top: 14px; }
.ss-range input { width: 100%; accent-color: rgb(var(--acc)); cursor: pointer; }
.ss-meter { display: grid; gap: 6px; margin-bottom: 12px; }
.ss-meter span { font-size: 0.74rem; color: var(--muted); }
.ss-meter i { position: relative; display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.ss-meter i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); border-radius: 4px; background: #5cc8ff; animation: sigGrow 0.8s var(--ease) both; transform-origin: left; }
.ss-meter--d i::after { background: var(--gold); }
.ss-panel h3 small, .gx-panel h3 small { margin-left: 6px; font-size: 0.8rem; font-weight: 500; color: var(--muted); }
@media (max-width: 900px) { .ss, .gx { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .ss-col span { font-size: 0.5rem; } }

/* ---------------- Turkmenistan: who buys the gas ---------------- */
.gx-key, .gx-legend { list-style: none; margin: 0; padding: 0; }
.gx-key { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; font-size: 0.76rem; color: var(--muted); }
.gx-key li::before, .gx-legend li::before { content: ""; display: inline-block; flex: none; width: 10px; height: 10px; margin-right: 8px; border-radius: 3px; background: var(--c); }
.gx-rows { display: grid; gap: 6px; }
.gx-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: none;
    text-align: left;
    transition: border-color 0.3s ease, background 0.3s ease;
}
.gx-year { font-family: var(--font-display); font-weight: 700; color: var(--muted); }
.gx-bar { display: flex; height: 24px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, 0.04); transition: opacity 0.3s ease; }
.gx-bar i { width: var(--w); background: var(--c); transform-origin: left; transition: transform 1s var(--ease); }
.gx-bar i + i { box-shadow: inset 2px 0 0 var(--navy-900); }
.section-sig:not(.is-in) .gx-bar i { transform: scaleX(0); }
.gx-row:hover { background: var(--surface); }
.gx-row.is-active { border-color: var(--line-strong); background: var(--surface-hi); }
.gx-row.is-active .gx-year { color: #fff; }
.gx[data-active] .gx-row:not(.is-active) .gx-bar { opacity: 0.45; }
.gx-panel h3 { font-family: var(--font-display); font-size: 2rem; }
.gx-legend { display: grid; gap: 8px; margin-bottom: 14px; }
.gx-legend li { display: flex; align-items: center; gap: 4px; color: var(--muted); }
.gx-legend b { min-width: 78px; font-family: var(--font-display); font-size: 1.25rem; color: #fff; }
.gx-range { margin-top: 12px; }

/* ---------------- Market entry: entry check ---------------- */
.qz { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.qz-qs { display: grid; gap: 14px; }
.qz-q { min-width: 0; margin: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.qz-q legend { float: left; display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 12px; padding: 0; font-family: var(--font-display); font-weight: 700; }
.qz-q legend b { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(var(--acc), 0.18); color: rgb(var(--acc)); font-size: 0.78rem; transition: background 0.3s ease, color 0.3s ease; }
.qz-q:has(input:checked) legend b { background: rgb(var(--acc)); color: var(--navy-900); }
.qz-opts { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.qz-opt { position: relative; cursor: pointer; }
.qz-opt input { position: absolute; opacity: 0; pointer-events: none; }
.qz-opt span { display: block; padding: 9px 15px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 0.84rem; transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease; }
.qz-opt:hover span { border-color: rgba(var(--acc), 0.6); }
.qz-opt input:checked + span { border-color: rgb(var(--acc)); background: rgba(var(--acc), 0.2); color: #fff; }
.qz-opt input:focus-visible + span { outline: 2px solid rgb(var(--acc)); outline-offset: 2px; }
.qz-out {
    position: sticky;
    top: 100px;
    padding: clamp(22px, 2.6vw, 30px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg, var(--surface-hi), rgba(255, 255, 255, 0.012));
}
.qz.is-done .qz-out { border-color: rgba(var(--acc), 0.5); }
.qz-step { margin: 0 0 14px; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; }
.qz-bars { list-style: none; display: grid; gap: 10px; margin: 0 0 20px; padding: 0; }
.qz-bars li { display: grid; gap: 5px; font-size: 0.8rem; color: var(--muted); transition: color 0.3s ease; }
.qz-bars i { position: relative; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.qz-bars i::after { content: ""; position: absolute; inset: 0; border-radius: 4px; background: linear-gradient(90deg, rgba(var(--acc), 0.9), var(--gold)); transform: scaleX(var(--v, 0)); transform-origin: left; transition: transform 0.6s var(--ease); }
.qz-bars li.is-best { color: #fff; font-weight: 700; }
.qz-empty p { margin: 0; font-size: 0.9rem; }
.qz-result { animation: sigPanelIn 0.55s var(--ease); }
.qz-kicker { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgb(var(--acc)); }
.qz-result h3 { margin: 6px 0 10px; font-size: 1.5rem; }
.qz-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; }
.qz-link { font-size: 0.84rem; font-weight: 600; color: rgb(var(--acc)); }
.qz-reset { display: block; margin-top: 18px; padding: 0; border: 0; background: none; font-size: 0.78rem; color: var(--muted) !important; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
    .qz { grid-template-columns: 1fr; }
    .qz-out { position: static; }
}

/* ---------------- Project development: size and time ---------------- */
.tl-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tl-key {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: var(--surface);
    text-align: left;
    transition: border-color 0.3s ease, background 0.3s ease;
}
.tl-key b { font-family: var(--font-display); font-size: 1.05rem; }
.tl-key small { font-size: 0.76rem; color: var(--muted); }
.tl-key.is-active { border-color: rgb(var(--acc)); background: rgba(var(--acc), 0.14); }
.tl-range { margin: 14px 0 22px; }
.tl-panel, .db-panel {
    position: relative;
    padding: clamp(22px, 2.6vw, 32px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg, var(--surface-hi), rgba(255, 255, 255, 0.012));
}
.tl-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 24px; }
.tl-head h3 { margin: 0; font-size: 1.5rem; }
.tl-head h3 small { display: block; margin-top: 4px; font-size: 0.86rem; font-weight: 500; color: var(--muted); }
.tl-dur { margin: 0; text-align: right; }
.tl-dur span { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; }
.tl-dur b {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 800;
    background: var(--gold-metal);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.tl-gantt { display: grid; gap: 10px; }
.tl-row { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: center; gap: 16px; }
.tl-name { font-size: 0.84rem; color: var(--muted); }
.tl-track { position: relative; height: 14px; border-radius: 7px; background: rgba(255, 255, 255, 0.04); }
.tl-track i { position: absolute; top: 0; bottom: 0; left: var(--a); width: var(--b); border-radius: 7px; background: linear-gradient(90deg, rgba(var(--acc), 0.95), var(--gold)); transform-origin: left; animation: sigGrow 0.8s var(--ease) both; animation-delay: calc(var(--i) * 120ms); }
.tl-ticks { position: relative; height: 18px; margin-left: 226px; font-size: 0.66rem; color: var(--muted); }
.tl-ticks span { position: absolute; left: var(--x); transform: translateX(-50%); }
.tl-ticks .tl-unit { left: auto; right: calc(100% + 12px); transform: none; }
.tl-panel h4, .db-panel h4 { margin: 26px 0 10px; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.tl-chips, .db-chips, .db-rank { list-style: none; margin: 0; padding: 0; }
.tl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-chips li { padding: 7px 13px; border: 1px solid rgba(var(--acc), 0.4); border-radius: 999px; background: rgba(var(--acc), 0.08); font-size: 0.8rem; animation: sigPanelIn 0.5s var(--ease) both; animation-delay: calc(var(--i) * 60ms); }
@media (max-width: 760px) {
    .tl-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tl-row { grid-template-columns: 1fr; gap: 4px; }
    .tl-ticks { margin-left: 0; }
    .tl-ticks .tl-unit { display: none; }
    .tl-dur { text-align: left; }
}

/* ---------------- Market intelligence: country dashboard ---------------- */
.db-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.db-tab img { border-radius: 2px; }
.db-tiles { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; }
.db-tiles li { display: grid; align-content: start; gap: 4px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(6, 24, 38, 0.5); animation: sigPanelIn 0.5s var(--ease) both; }
.db-tiles li:nth-child(2) { animation-delay: 0.06s; }
.db-tiles li:nth-child(3) { animation-delay: 0.12s; }
.db-tiles li:nth-child(4) { animation-delay: 0.18s; }
.db-tiles span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.db-tiles b { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; line-height: 1.1; }
.db-tiles small { font-size: 0.76rem; color: var(--muted); }
.db-cols { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 24px; }
.db-rank { display: grid; gap: 7px; }
.db-rank li { display: flex; align-items: center; gap: 10px; }
.db-rank b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(var(--acc), 0.18); color: rgb(var(--acc)); font-size: 0.72rem; }
.db-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.db-chips li { padding: 5px 11px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 0.8rem; }
.db-check { margin-top: 26px; padding: 2px 18px 14px; border-left: 3px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0; background: rgba(242, 181, 29, 0.06); }
.db-check h4 { margin-top: 12px !important; }
.db-check p { margin: 0; color: var(--text); }
.db-cols > div:not(.db-check) h4 { margin-top: 26px; }
@media (max-width: 900px) {
    .db-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .db-cols { grid-template-columns: 1fr; gap: 0; }
}

/* ---------------- Calm for those who asked for it ---------------- */
@media (prefers-reduced-motion: reduce) {
    .pf-line, .ss-demand { stroke-dashoffset: 0; }
    .section-sig .py-bar, .section-sig .ss-water, .section-sig .gx-bar i { transform: none; }
}
/* =========================================================
   BDaaS: the concept compared, who does what, a fit check,
   two paths over time and the questions.
   ========================================================= */
.bv-panel, .bw-panel {
    position: relative;
    padding: clamp(22px, 2.6vw, 32px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg, var(--surface-hi), rgba(255, 255, 255, 0.012));
}

/* ---------------- Compared ---------------- */
.bv-tabs, .bw-tabs { margin-bottom: 18px; }
.bv-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.bv-tab {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 10px 18px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    font-size: 0.9rem;
    font-weight: 600;
    transition: border-color 0.3s ease, background 0.3s ease;
}
.bv-tab small { font-weight: 500; color: var(--muted); }
.bv-tab.is-active { border-color: rgb(var(--acc)); background: rgba(var(--acc), 0.16); }
.bv-table { width: 100%; border-collapse: collapse; }
.bv-table th, .bv-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); }
.bv-table tbody tr:last-child th, .bv-table tbody tr:last-child td { border-bottom: 0; }
.bv-table thead th { width: 170px; text-align: center; font-family: var(--font-display); font-size: 0.92rem; color: var(--muted); }
.bv-table thead th.bv-bd { color: #fff; }
.bv-table tbody th { text-align: left; font-size: 0.94rem; font-weight: 500; color: var(--text); }
.bv-table td { text-align: center; }
.bv-table .bv-bd { background: rgba(var(--acc), 0.08); }
.bv-table thead .bv-bd { border-radius: 12px 12px 0 0; background: rgba(var(--acc), 0.18); }
.bv-table tbody tr { animation: sigPanelIn 0.5s var(--ease) both; animation-delay: calc(var(--i) * 50ms); }
.bv-mark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; }
.bv-mark svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.bv-mark--2 { background: rgba(155, 225, 93, 0.16); color: #9be15d; }
.bv-mark--1 { background: rgba(255, 217, 77, 0.14); color: #ffd94d; }
.bv-mark--0 { background: rgba(255, 255, 255, 0.05); color: rgba(233, 241, 248, 0.35); }
.bv-when {
    margin: 18px 0 0;
    padding: 14px 18px;
    border-left: 3px solid var(--gold);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: rgba(242, 181, 29, 0.06);
    color: var(--text) !important;
}
.bv-when b { color: var(--gold-light); }
@media (max-width: 620px) {
    .bv-table th, .bv-table td { padding: 9px 4px; }
    .bv-table thead th { width: 64px; font-size: 0.7rem; }
    .bv-table tbody th { font-size: 0.8rem; }
    .bv-mark { width: 24px; height: 24px; }
    .bv-tab { padding: 8px 13px; font-size: 0.8rem; }
}

/* ---------------- Who does what ---------------- */
.bw-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.bw-tab {
    display: grid;
    align-content: start;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: var(--surface);
    text-align: left;
    transition: border-color 0.3s ease, background 0.3s ease;
}
.bw-tab b { font-family: var(--font-display); font-size: 0.8rem; color: rgb(var(--acc)); }
.bw-tab span { font-size: 0.88rem; font-weight: 600; }
.bw-tab.is-active { border-color: rgb(var(--acc)); background: rgba(var(--acc), 0.14); }
.bw-h { display: none; }
.bw-cols { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); gap: 16px; align-items: stretch; }
.bw-col { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); }
.bw-col--a { border-color: rgba(var(--acc), 0.45); background: linear-gradient(160deg, rgba(var(--acc), 0.14), rgba(var(--acc), 0.03)); }
.bw-col--y { background: rgba(255, 255, 255, 0.025); }
.bw-col h4 { margin: 0 0 14px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.bw-logo { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.22em; color: #fff; }
.bw-col ul { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.bw-col li { position: relative; padding-left: 22px; animation: sigPanelIn 0.5s var(--ease) both; animation-delay: calc(var(--i) * 80ms); }
.bw-col li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--acc)); }
.bw-col--y li::before { background: transparent; border: 2px solid var(--gold); width: 7px; height: 7px; }
.bw-mid { display: grid; place-items: center; }
.bw-mid svg { width: 34px; height: 34px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bw-out { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.bw-out > div { display: grid; gap: 4px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(6, 24, 38, 0.5); }
.bw-out span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.bw-out b { font-family: var(--font-display); font-size: 1.05rem; }
.bw-out .bw-gate { border-color: rgba(242, 181, 29, 0.4); }
.bw-gate span { color: var(--gold); }
@media (max-width: 760px) {
    .bw-tab { padding: 10px 0; text-align: center; }
    .bw-tab span { display: none; }
    .bw-tab b { font-size: 1rem; }
    .bw-h { display: block; margin: 0 0 14px; font-size: 1.25rem; }
    .bw-cols, .bw-out { grid-template-columns: 1fr; }
    .bw-mid { height: 36px; }
    .bw-mid svg { transform: rotate(90deg); }
}

/* ---------------- Two paths over time ---------------- */
.bx-chart {
    padding: clamp(20px, 2.6vw, 30px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(6, 24, 38, 0.6);
}
.bx-plot { position: relative; }
.bx-lane, .bx-axis { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: center; gap: 18px; }
.bx-lane { margin-bottom: 16px; }
.bx-lane--bd { margin-bottom: 30px; }
.bx-name { font-family: var(--font-display); font-size: 0.92rem; font-weight: 700; color: var(--muted); }
.bx-lane--bd .bx-name { color: rgb(var(--acc)); }
.bx-track { position: relative; height: 42px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); }
.bx-seg {
    position: absolute;
    top: 4px; bottom: 4px;
    left: var(--a);
    width: var(--b);
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 7px;
    box-shadow: inset 2px 0 0 rgba(4, 18, 30, 0.9);
    font-style: normal;
    overflow: hidden;
    transform-origin: left;
    transition: transform 1s var(--ease);
}
.section-sig:not(.is-in) .bx-seg { transform: scaleX(0); }
.bx-lane--bd .bx-seg:nth-child(2) { transition-delay: 0.2s; }
.bx-lane--bd .bx-seg:nth-child(3) { transition-delay: 0.4s; }
.bx-seg span { overflow: hidden; font-size: 0.72rem; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.bx-seg--setup { background: repeating-linear-gradient(135deg, rgba(185, 195, 207, 0.22) 0 6px, rgba(185, 195, 207, 0.1) 6px 12px); color: var(--text); }
.bx-seg--market { background: linear-gradient(90deg, rgba(var(--acc), 0.9), rgba(var(--acc), 0.6)); color: var(--navy-900); }
.bx-lane--bd .bx-seg--market:nth-child(3) { background: linear-gradient(90deg, rgba(var(--acc), 0.75), var(--gold)); }
.bx-seg--opt { top: auto; bottom: -14px; height: 8px; padding: 0; border: 1px dashed var(--gold); background: rgba(242, 181, 29, 0.12); box-shadow: none; overflow: visible; }
.bx-seg--opt span { position: absolute; top: 10px; right: 0; font-size: 0.64rem; font-weight: 600; color: var(--gold); }
.bx-flag { position: absolute; top: -7px; bottom: -7px; left: var(--a); border-left: 2px solid var(--gold); z-index: 1; }
.bx-flag::after { content: ""; position: absolute; top: -2px; left: 0; width: 13px; height: 10px; background: var(--gold); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.bx-unit { text-align: right; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.bx-ticks { position: relative; height: 44px; }
.bx-ticks > span { position: absolute; left: var(--a); top: 0; transform: translateX(-50%); font-size: 0.68rem; color: var(--muted); }
.bx-key { position: absolute; left: var(--a); top: 18px; display: grid; place-items: center; width: 30px; height: 24px; padding: 0; border: 0; background: none; transform: translateX(-50%); }
.bx-key span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bx-key::before { content: ""; width: 10px; height: 10px; border: 2px solid rgba(233, 241, 248, 0.45); border-radius: 50%; transition: transform 0.3s var(--ease), background 0.3s ease, border-color 0.3s ease; }
.bx-key:hover::before { border-color: #fff; }
.bx-key.is-active::before { border-color: var(--gold); background: var(--gold); transform: scale(1.3); box-shadow: 0 0 10px var(--gold); }
.bx-over { position: absolute; top: -8px; bottom: 24px; left: 228px; right: 0; pointer-events: none; }
.bx-cursor { position: absolute; top: 0; bottom: 0; left: var(--cx, 0%); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.7); transition: left 0.6s var(--ease); }
.bx[data-active="m0"] { --cx: 0%; }
.bx[data-active="m3"] { --cx: 12.5%; }
.bx[data-active="m6"] { --cx: 25%; }
.bx[data-active="m12"] { --cx: 50%; }
.bx[data-active="m18"] { --cx: 75%; }
.bx[data-active="m24"] { --cx: 100%; }
.bx-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 6px 0 0; padding: 0; font-size: 0.76rem; color: var(--muted); }
.bx-legend li::before { content: ""; display: inline-block; width: 18px; height: 10px; margin-right: 8px; border-radius: 3px; vertical-align: -1px; }
.bx-l-setup::before { background: repeating-linear-gradient(135deg, rgba(185, 195, 207, 0.4) 0 4px, rgba(185, 195, 207, 0.15) 4px 8px); }
.bx-l-market::before { background: rgb(var(--acc)); }
.bx-l-flag::before { width: 3px !important; background: var(--gold); }
.bx-range { margin-top: 16px; }
.bx-panels { margin-top: 18px; }
.bx-panel h3 { margin: 0 0 14px; font-family: var(--font-display); font-size: 1.4rem; }
.bx-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bx-card { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 255, 255, 0.025); }
.bx-card--bd { border-color: rgba(var(--acc), 0.45); background: linear-gradient(160deg, rgba(var(--acc), 0.12), rgba(var(--acc), 0.02)); }
.bx-card h4 { margin: 0 0 8px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.bx-card--bd h4 { color: rgb(var(--acc)); }
.bx-card p { margin: 0 0 16px; }
.bx-card dl { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0; }
.bx-card dt { margin-bottom: 6px; font-size: 0.7rem; color: var(--muted); }
.bx-card dd { margin: 0; font-size: 0.86rem; }
.bx-card .is-yes { font-weight: 700; color: #9be15d; }
.bx-card .is-no { color: var(--muted); }
@media (max-width: 760px) {
    .bx-lane, .bx-axis { grid-template-columns: 1fr; gap: 6px; }
    .bx-unit { display: none; }
    .bx-over { left: 0; top: 18px; }
    .bx-cards { grid-template-columns: 1fr; }
    .bx-seg { padding: 0 6px; }
    .bx-seg span { font-size: 0.6rem; }
}

/* nothing to reset before the first answer */
.qz:not(:has(input:checked)) .qz-reset { visibility: hidden; }
/* =========================================================
   Mining: the ores under the deposit map, each stone drawn as
   facets with a sheen running over it. A tile sets the map's
   commodity filter; the filter in turn dims the other tiles.
   ========================================================= */
.ore-strip { margin-top: clamp(28px, 4vw, 44px); }
.ore-head { margin: 0 0 14px; font-size: 1.1rem; }
.ore-head small { margin-left: 10px; font-size: 0.8rem; font-weight: 500; color: var(--muted); }
.ore-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.ore {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 12px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
        radial-gradient(90% 60% at 50% 40%, color-mix(in srgb, var(--c) 12%, transparent), transparent 70%),
        linear-gradient(170deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
    text-align: left;
    overflow: hidden;
    transition: border-color 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease, transform 0.4s var(--ease);
}
.ore::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--c), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.ore:hover, .ore.is-active { border-color: color-mix(in srgb, var(--c) 55%, transparent); transform: translateY(-2px); }
.ore.is-on::after { opacity: 1; }
.ore.is-dim { opacity: 0.25; transform: none; }
.ore-name {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c);
    white-space: nowrap;
}
.ore-stage { display: block; width: 100%; margin: 2px 0 0; }
.ore-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ore-facets path { stroke-width: 0.6; stroke-linejoin: round; }
.ore-edge { fill: none; stroke: rgba(0, 0, 0, 0.45); stroke-width: 1.2; stroke-linejoin: round; }
.ore-shadow { fill: rgba(0, 0, 0, 0.55); filter: blur(4px); transform-box: fill-box; transform-origin: center; }
.ore-rock { transform-box: view-box; transform-origin: 50% 60%; animation: oreFloat 7s ease-in-out infinite; animation-delay: calc(var(--i) * -0.6s); }
@keyframes oreFloat { 50% { transform: translateY(-5px) rotate(-1.5deg); } }
@keyframes oreShadow { 50% { transform: scale(0.88); opacity: 0.7; } }
.ore-sheen { transform: translateX(-140px); animation: oreSheen 6s ease-in-out infinite; animation-delay: calc(var(--i) * 0.45s); }
@keyframes oreSheen { 0%, 55% { transform: translateX(-140px); } 85%, 100% { transform: translateX(150px); } }
.ore-spark { fill: #fff; opacity: 0; transform-box: fill-box; transform-origin: center; animation: oreSpark 3.9s ease-in-out infinite; animation-delay: calc(var(--d) + var(--i) * 0.3s); }
@keyframes oreSpark { 0%, 70%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 80% { opacity: 1; transform: scale(1) rotate(45deg); } }
.ore-sym { display: flex; align-items: baseline; gap: 5px; }
.ore-sym b {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.1;
    background: linear-gradient(180deg, #fff, var(--c));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.ore-sym small { font-size: 0.66rem; font-weight: 700; color: var(--muted); }
.ore-flags { display: flex; gap: 4px; margin-top: 6px; }
.ore-flags img { border-radius: 2px; }
.section-sig:not(.is-in) .ore { opacity: 0; }
.is-in .ore { animation: sigPanelIn 0.7s var(--ease) backwards; animation-delay: calc(var(--i) * 50ms); }

/* the selected ore, in one line under the tiles */
.ore-panels { margin-top: 12px; }
.ore-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
    padding: 14px 20px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--c);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: rgba(6, 24, 38, 0.5);
}
.ore-panel h4 { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 1rem; color: var(--c); }
.ore-panel h4 b { font-family: var(--font-display); font-size: 1.2rem; color: #fff; }
.ore-fact { font-size: 0.8rem; font-weight: 600; color: var(--c); }
.ore-fact b { font-family: var(--font-display); color: #fff; }
.ore-panel p { flex: 1 1 100%; margin: 0; font-size: 0.88rem; }
.ore-panel--intro { border-left-color: rgb(var(--acc)); }
.ore-panel--intro p { color: var(--muted); }
.ore-panel .ore-nomap { font-size: 0.76rem; font-style: italic; opacity: 0.8; }
@media (max-width: 1000px) { .ore-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 620px) {
    .ore-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .ore { padding: 10px 8px 8px; }
    .ore-name { font-size: 0.6rem; }
    .ore-sym b { font-size: 1.15rem; }
    .ore-head small { display: block; margin: 4px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .ore-sheen { transform: translateX(-140px); } }

/* country buttons over the deposit map */
.geo-btn::before { display: none; }
.geo-btn img { border-radius: 2px; }
.geo-btn.is-active { border-color: rgb(var(--acc)); background: rgba(var(--acc), 0.16); }
.geo-btn--all { padding-left: 18px; padding-right: 18px; }
.geo-count { align-self: center; margin-left: auto; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
/* the ore that narrows the map carries a ring; greyed-out ores cannot be chosen */
.ore.is-on { box-shadow: 0 0 0 2px var(--c), 0 14px 30px -20px color-mix(in srgb, var(--c) 80%, transparent); }
.ore:disabled { cursor: default; pointer-events: none; }
.ore-none { margin: 12px 0 0; padding: 12px 18px; border: 1px dashed var(--line-strong); border-radius: var(--radius); font-size: 0.88rem; }
@media (max-width: 620px) { .geo-count { flex-basis: 100%; margin-left: 0; } }

/* countries that are not chosen fade back; only the chosen countries' sites carry names */
.rg-map .hb-land { transition: fill 0.5s ease, stroke 0.5s ease, filter 0.5s ease; }
.rg-map .hb-land.is-off { fill: rgba(122, 170, 214, 0.04); stroke: rgba(122, 170, 214, 0.26); filter: none; }
.rg-cn { transition: fill 0.5s ease; }
.rg-cn.is-off { fill: rgba(233, 241, 248, 0.06); }
.hb-pin.is-off { pointer-events: none; }
.hb-pin.is-off span { display: none; }
/* the ores that are not at the selected site stay greyed, but a click still narrows the map to them */
.ore { transition-property: border-color, box-shadow, opacity, transform; }
.ore.is-away { opacity: 0.28; }
.ore.is-away:hover { opacity: 0.65; }

/* sites with several ores: the dot is cut into their colours, and the ring pulses through them */
.hb-pin.hb-pin--multi i { background: none; }
.hb-pin.hb-pin--multi i::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: var(--multi);
    box-shadow: 0 0 0 2px var(--navy-900), 0 0 10px color-mix(in srgb, var(--c1) 70%, transparent);
    animation: mcSpin 7s linear infinite;
}
.hb-pin.hb-pin--multi i::after {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    border: 1.5px solid var(--c1);
    opacity: 0;
    animation: sigRing 1.8s ease-out infinite, var(--mcn) calc(1.8s * var(--n)) step-end infinite;
}
@keyframes mcSpin { to { transform: rotate(360deg); } }
@keyframes mc2 { 0% { border-color: var(--c1); } 50% { border-color: var(--c2); } }
@keyframes mc3 { 0% { border-color: var(--c1); } 33.33% { border-color: var(--c2); } 66.66% { border-color: var(--c3); } }
@keyframes mc4 { 0% { border-color: var(--c1); } 25% { border-color: var(--c2); } 50% { border-color: var(--c3); } 75% { border-color: var(--c4); } }
@keyframes mc5 { 0% { border-color: var(--c1); } 20% { border-color: var(--c2); } 40% { border-color: var(--c3); } 60% { border-color: var(--c4); } 80% { border-color: var(--c5); } }
.hb-pin.hb-pin--multi.is-dim i::after { animation: none; }
/* an ore chosen: the sites that show are drawn in its colour, a pulse still marks the ones with more ores */
.has-ore .hb-pin:not(.is-dim) { --c: var(--ore-c) !important; }
.has-ore .hb-pin.hb-pin--multi:not(.is-dim) i::before { background: var(--ore-c); box-shadow: 0 0 0 2px var(--navy-900), 0 0 10px var(--ore-c); animation: none; }
.has-ore .hb-pin.hb-pin--multi:not(.is-dim) i::after { border-color: var(--ore-c); animation: sigRing 1.8s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .hb-pin.hb-pin--multi i::before, .hb-pin.hb-pin--multi i::after { animation: none; } }

/* the ore's description under the site window, beside the map */
.hb-side { display: grid; gap: 14px; min-width: 0; align-self: start; }
.hb-side .ore-panels { margin-top: 0; }
.hb-side .ore-panel { padding: 16px 20px; border-radius: var(--radius-lg); border-left-width: 3px; }
.hb-side .ore-panel h4 { font-size: 1.05rem; }

/* deposit map: a site shows its name only when it is chosen (or touched) */
.rg--zm .hb-pin > span { opacity: 0; pointer-events: none; }
/* only the dot takes the click: the invisible name beside it must not cover the sites around it */
.rg--zm .hb-pin { pointer-events: none; }
.rg--zm .hb-pin > i { pointer-events: auto; }
/* smaller dots, so that neighbouring sites do not cover each other at the overview; the one under the cursor comes to the front */
.rg--zm .hb-pin > i:empty { width: 10px; height: 10px; }
.rg--zm .hb-pin:hover, .rg--zm .hb-pin.is-active { z-index: 5; }
.rg--zm .hb-pin:hover > span, .rg--zm .hb-pin:focus-visible > span, .rg--zm .hb-pin.is-active > span { opacity: 1; z-index: 3; }

/* deposit map: zoom and move. --z, --tx and --ty are set by the script; the sites keep their size */
.rg--zm .rg-map { --z: 1; --tx: 0px; --ty: 0px; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.rg--zm .rg-map.is-zoomed { cursor: grab; touch-action: none; }
.rg--zm .rg-map.is-dragging { cursor: grabbing; }
.rg--zm .rg-map > svg { transform: translate(var(--tx), var(--ty)) scale(var(--z)); transform-origin: 0 0; }
.rg--zm .rg-map .hb-land { stroke-width: calc(0.4px / var(--z)); }
.rg--zm .rg-map .cmap-ctx { stroke-width: calc(0.25px / var(--z)); }
.rg--zm .rg-map .rg-cn { font-size: calc(3.1px / var(--z)); letter-spacing: calc(0.6px / var(--z)); }
.rg--zm .rg-map .hb-pin { left: calc(var(--x) * var(--z) + var(--tx)); top: calc(var(--y) * var(--z) + var(--ty)); }
.rg-zoom { position: absolute; right: 14px; bottom: 14px; z-index: 4; display: flex; gap: 10px; }
.rg-zoom button { width: 48px; height: 48px; padding: 0; border-radius: 12px; border: 1px solid var(--line); background: rgba(6, 24, 38, 0.9); color: #e9f1f8; font: 600 1.6rem/1 var(--font-body, inherit); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; }
.rg-zoom button:hover, .rg-zoom button:focus-visible { border-color: rgba(77, 163, 255, 0.7); background: rgba(10, 36, 56, 0.95); }
@media (max-width: 600px) { .rg-zoom { right: 10px; bottom: 10px; gap: 8px; } .rg-zoom button { width: 44px; height: 44px; } }

.rg--zm .hb-panel { position: relative; }
.sig-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: rgba(6, 24, 38, 0.6); color: #e9f1f8; font: 400 1.4rem/1 var(--font-body, inherit); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; }
.sig-x:hover, .sig-x:focus-visible { border-color: rgba(77, 163, 255, 0.7); background: rgba(10, 36, 56, 0.95); }
.rg--zm .hb-panel h3 { padding-right: 40px; }

/* the band of typical demand in the flowsheet: the home page's ticker, running to the right */
.ticker--right .ticker-track { animation-direction: reverse; }

/* no country names on the deposit map */
.rg--zm .rg-cn { display: none; }

/* no drifting lights at the sides of the sections */
.sec-glow { display: none; }

/* the rules between the sections: in the page's accent only, drawn out from the middle */
.sec-rule {
    background: linear-gradient(90deg, rgba(var(--acc), 0) 0%, rgba(var(--acc), 0.85) 50%, rgba(var(--acc), 0) 100%);
    opacity: 1;
    transform-origin: center;
}
/* only the "close-up" sections carry a rule, and the line is the source of a light that builds up below it */
.hero--page ~ .section:not(.section-sig) .sec-rule { display: none; }
.sec-rule::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    width: auto; height: 240px;
    border-radius: 0;
    background: radial-gradient(70% 100% at 50% 0, rgba(var(--acc), 0.26), rgba(var(--acc), 0.08) 45%, rgba(var(--acc), 0) 75%);
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    pointer-events: none;
    transition: transform 2.2s var(--ease) 0.2s, opacity 2.2s var(--ease) 0.2s;
}
.sec-deco.is-in .sec-rule::after { animation: none; left: 0; opacity: 1; transform: scaleY(1); }

/* deposit map: sites outside the chosen ore or country are gone, not greyed */
.rg--zm .hb-pin { transition: opacity 0.3s ease; }
.rg--zm .hb-pin.is-dim, .rg--zm .hb-pin.is-off { opacity: 0; pointer-events: none; }
.rg--zm .hb-pin.is-dim > i, .rg--zm .hb-pin.is-off > i { pointer-events: none; }

/* no big chapter numerals behind the headings */
.sec-num { display: none; }

.rg--mining .ore-panel { position: relative; padding-right: 56px; }

/* text sections: the copy on the right starts level with the eyebrow; the second paragraph is the consequence and gets an accent line */
@media (min-width: 901px) {
    .hero--page ~ .section .market-copy { display: flex; flex-direction: column; gap: 28px; }
    .hero--page ~ .section .market-copy > p { margin: 0; }
    .hero--page ~ .section .market-copy > p.lead { font-size: 1.12rem; line-height: 1.75; }
    .hero--page ~ .section .market-copy > p:not(.lead) {
        padding-left: 22px;
        border-left: 2px solid rgba(var(--acc), 0.7);
        color: var(--text);
    }
}

/* deposit map: the land is more transparent, so that the sites stand out */
.rg--zm .rg-map .hb-land { fill: rgba(var(--acc), 0.04); }
.rg--zm .rg-map .cmap-ctx { fill: rgba(122, 170, 214, 0.025); }
.rg--zm .rg-map .hb-land.is-off { fill: rgba(122, 170, 214, 0.015); }

/* deposit map: all sites the same size, nothing pulses or turns; the chosen one is marked by a still ring */
.rg--zm .hb-pin i:empty, .rg--zm .hb-pin--sized i:empty, .rg--zm .hb-pin.is-active i:empty { width: 10px; height: 10px; transform: none; opacity: 1; }
.rg--zm .hb-pin.hb-pin--multi i::before { inset: 0; animation: none !important; box-shadow: 0 0 0 2px var(--navy-900); }
.rg--zm .hb-pin i::after, .rg--zm .hb-pin.hb-pin--multi i::after, .rg--zm .has-ore .hb-pin.hb-pin--multi:not(.is-dim) i::after { animation: none !important; opacity: 0; }
.rg--zm .hb-pin.is-active i::after, .rg--zm .hb-pin.hb-pin--multi.is-active i::after { opacity: 1; inset: -6px; border: 1.5px solid #fff; transform: none; }
.rg--zm .rg-map .pp-exit { left: calc(var(--x) * var(--z) + var(--tx)); top: calc(var(--y) * var(--z) + var(--ty)); }

/* ---------------- Kyrgyzstan: altitude ---------------- */
.al-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.al-body { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.al-chart { position: relative; aspect-ratio: 1000 / 400; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(var(--acc), 0.03), rgba(var(--acc), 0.1)); overflow: hidden; }
.al-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.al-grid { stroke: rgba(122, 170, 214, 0.16); stroke-width: 1; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.al-area { fill: rgba(122, 170, 214, 0.1); }
.al-line { fill: none; stroke: rgb(var(--acc)); stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.is-in .al-line { animation: sigDraw 2.6s var(--ease) 0.2s forwards; }
.al-gl { position: absolute; left: 10px; transform: translateY(-115%); font-size: 0.68rem; color: var(--muted); pointer-events: none; }
.al-level { position: absolute; left: 0; right: 0; top: var(--lv, 50%); height: 0; border-top: 1px solid rgba(var(--acc), 0.9); box-shadow: 0 0 14px rgba(var(--acc), 0.55); transition: top 0.5s var(--ease); pointer-events: none; }
.al-pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); padding: 10px; border: 0; background: none; cursor: pointer; }
.al-pin i { display: block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--navy-900); background: rgb(var(--acc)); box-shadow: 0 0 10px rgba(var(--acc), 0.8); transition: background 0.3s ease, box-shadow 0.3s ease; }
.al-pin span { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 2px 7px; border-radius: 6px; background: rgba(4, 18, 30, 0.75); font-size: 0.72rem; font-weight: 600; white-space: nowrap; color: var(--muted); transition: color 0.3s ease, background 0.3s ease; }
.al-pin:hover span { color: #fff; }
.al-pin.is-active i { background: #fff; box-shadow: 0 0 0 4px rgba(var(--acc), 0.5); }
.al-pin.is-active span { color: var(--navy-900); background: rgb(var(--acc)); }
.al-range { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 6px 12px; margin-bottom: 16px; }
.al-range span { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.al-range b { font-family: var(--font-display); font-size: 1.8rem; line-height: 1; }
.al-range input { grid-column: 1 / -1; width: 100%; accent-color: rgb(var(--acc)); }
.al-vals { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.al-vals li { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
.al-vals li span { font-size: 0.74rem; color: var(--muted); }
.al-vals li b { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.15; }
.al-vals li small { font-size: 0.7rem; color: var(--muted); min-height: 1em; }
.al-panel .al-of { margin: -6px 0 10px; font-size: 0.82rem; font-weight: 600; color: var(--muted); }
@media (max-width: 900px) { .al-body { grid-template-columns: 1fr; } }

/* headings: only the hero's carry colour (Europe blue, Central Asia gold, the home page's animated gold); the others stay white */
.display em { background: none; color: inherit; -webkit-text-fill-color: currentColor; animation: none; }
.hero-title-page em, .hero-title-page .rg-ca {
    background-image: var(--gold-metal);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: goldShimmer 7s linear infinite;
}
.hero-title-page .rg-eu {
    background: linear-gradient(100deg, var(--blue-soft), var(--blue) 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.hero-title-page em.em-mix { background: none; color: inherit; -webkit-text-fill-color: currentColor; animation: none; }
@media (prefers-reduced-motion: reduce) { .hero-title-page em, .hero-title-page .rg-ca { animation: none; } }

/* section names (01 — The Sector ...) in the page's accent, as the close-up's */
[data-page] .eyebrow { color: rgb(var(--acc)); }
/* the contact form and everything below it keep the blue */
[data-page] .section:has(#contactForm) .eyebrow, [data-page] .section-next .eyebrow, [data-page] .imprint .eyebrow, [data-page] .site-footer .eyebrow { color: var(--blue); }

/* the hero takes the page's accent too: badge, current crumb and the three figures (their frame in the accent only) */
[data-page] .hero--page .hero-badge { color: rgb(var(--acc)); border-color: rgba(var(--acc), 0.45); }
[data-page] .hero--page .crumbs [aria-current], [data-page] .hero--page .crumbs a:hover { color: rgb(var(--acc)); }
[data-page] .hero-kpis { border-color: rgba(var(--acc), 0.5); }
[data-page] .hero-kpi + .hero-kpi { border-left-color: rgba(var(--acc), 0.3); }
[data-page] .hero-kpi::after { background: rgb(var(--acc)); }
[data-page] .hero-kpi dt { color: rgb(var(--acc)); }

/* the scroll cue, the scroll bar and the dots of the band under the hero in the page's accent */
[data-page] .scroll-cue-line { background: linear-gradient(to bottom, transparent, rgb(var(--acc))); }
[data-page] .scroll-cue-line::after { background: rgb(var(--acc)); }
[data-page] .scroll-progress span { background: linear-gradient(90deg, rgba(var(--acc), 0.45), rgb(var(--acc))); box-shadow: 0 0 14px rgba(var(--acc), 0.7); }
[data-page] .ticker-track i { color: rgb(var(--acc)); }

/* ======================= Corridor heading arrows =======================
   A real element sits between "both" and "ways" in the corridor heading (set by
   bin/i18n/add_corridor_arrows.py); its dashes run both ways. */
.qk-arrows { display: inline-block; width: 1.15em; height: 0.74em; margin: 0 0.06em; vertical-align: -0.04em; overflow: visible; }
.qk-arrows path { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.qk-arrows .qk-e { stroke: var(--blue); }
.qk-arrows .qk-w { stroke: var(--gold); }
.qk-arrows .qk-run { stroke-dasharray: 5 6; animation: qkRunE 0.9s linear infinite; }
.qk-arrows .qk-w.qk-run { animation-name: qkRunW; }
@keyframes qkRunE { to { stroke-dashoffset: -11; } }
@keyframes qkRunW { to { stroke-dashoffset: 11; } }
@media (prefers-reduced-motion: reduce) { .qk-arrows .qk-run { animation: none; } }

/* @sig:end */

/* =========================================================
   Sources, comparison, routes, glossary, print (October 2026)
   ========================================================= */

/* ---- where a figure comes from: one quiet line under it ---- */
.src-note {
    margin: 14px 0 0;
    font-size: 0.74rem;
    line-height: 1.55;
    color: var(--muted);
    opacity: 0.85;
}
.src-note a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 2px;
}
.src-note a:hover { color: var(--blue-soft); text-decoration-color: currentColor; }
.ca-slide .src-note { margin-top: 12px; font-size: 0.7rem; }
.hero-src {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    max-width: 620px;
    margin: -24px 0 48px auto;
    text-align: right;
}
.hero-src .src-note { margin: 0; }
@media (max-width: 900px) {
    .hero-src { align-items: flex-start; margin: 8px 0 40px; text-align: left; }
}

/* ---- tabs shared by the comparison and the routes ---- */
.cmp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 26px;
}
.cmp-tab {
    padding: 9px 18px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font: 600 0.86rem/1.2 var(--font-display);
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}
.cmp-tab:hover { color: var(--text); border-color: var(--blue); }
.cmp-tab.is-active { background: var(--blue); border-color: var(--blue); color: var(--navy-900); }
.cmp-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---- compare the five markets ---- */
.section-compare { background: var(--navy-900); }
.cmp-chart {
    margin: 0;
    padding: clamp(20px, 3vw, 34px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}
.cmp-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cmp-row {
    display: grid;
    grid-template-columns: minmax(150px, 210px) 1fr minmax(84px, auto);
    align-items: center;
    gap: 18px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    transition: transform 0.6s var(--ease);
}
.cmp-row:last-child { border-bottom: 0; }
.cmp-name {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    text-decoration: none;
    font: 600 0.98rem/1.2 var(--font-display);
}
.cmp-name:hover .cmp-cn { color: var(--blue-soft); }
.cmp-flag { width: 24px; height: 18px; border-radius: 3px; flex: none; }
/* members of the Eurasian Economic Union carry a small gold mark (see the legend) */
.cmp-row[data-eaeu] .cmp-cn::after,
.cmp-eaeu-key {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 8px;
    border-radius: 50%;
    background: var(--gold);
    vertical-align: 2px;
}
.cmp-eaeu-key { margin: 0 10px 0 0; }
.cmp-bar { position: relative; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.05); overflow: hidden; }
.cmp-bar i {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--blue-deep), var(--blue));
    transform-origin: left center;
    transform: scaleX(var(--w, 0));
    transition: transform 0.8s var(--ease);
}
.cmp-chart:not(.is-visible) .cmp-bar i { transform: scaleX(0); }
.cmp-row.is-est .cmp-bar i { background: repeating-linear-gradient(90deg, rgba(77, 163, 255, 0.55) 0 6px, rgba(77, 163, 255, 0.25) 6px 9px); }
.cmp-val {
    font: 600 1.05rem/1 var(--font-display);
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--text);
    white-space: nowrap;
}
.cmp-foot { margin-top: 18px; }
.cmp-note { margin: 0; font-size: 0.8rem; line-height: 1.55; color: var(--muted); }
.cmp-note a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); }
.cmp-legend { margin: 16px 0 0; font-size: 0.82rem; color: var(--muted); }
@media (max-width: 620px) {
    .cmp-row { grid-template-columns: 1fr auto; gap: 8px 12px; }
    .cmp-bar { grid-column: 1 / -1; grid-row: 2; }
}

/* ---- routes to Central Asia ---- */
.rt-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
}
@media (max-width: 900px) { .rt-grid { grid-template-columns: 1fr; } }
.rt-map {
    margin: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}
.rt-map svg { display: block; width: 100%; height: auto; }
.rt-sea ellipse { fill: rgba(77, 163, 255, 0.07); stroke: rgba(77, 163, 255, 0.18); }
.rt-sea-name { fill: rgba(134, 194, 255, 0.55); font: italic 11px var(--font-body); text-anchor: middle; }
.rt-route path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.4s ease, stroke 0.4s ease; }
.rt-rail { stroke: var(--gold); }
.rt-ferry { stroke: var(--gold); stroke-dasharray: 2 6; }
.rt-node { fill: var(--navy-800); stroke: var(--gold); stroke-width: 2; transition: opacity 0.4s ease; }
.rt-node--eu { fill: var(--blue); stroke: var(--blue); }
.rt-node--ca { fill: var(--gold); }
.rt-city { fill: var(--text); font: 600 12px var(--font-display); text-anchor: middle; transition: opacity 0.4s ease; }
.rt-city--main { font-size: 13px; }
@media (max-width: 620px) {
    .rt-city { font-size: 19px; }
    .rt-city--main { font-size: 20px; }
    .rt-sea-name { font-size: 16px; }
    .rt-map { padding: 10px; }
}
/* the route not chosen steps back */
.rt[data-active="north"] svg [data-route="middle"],
.rt[data-active="middle"] svg [data-route="north"] { opacity: 0.16; }
.rt[data-active="north"] svg [data-route="middle"] path,
.rt[data-active="middle"] svg [data-route="north"] path { stroke: var(--muted); }
.rt-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 0.76rem; color: var(--muted); }
.rt-key::before { content: ""; display: inline-block; width: 22px; height: 0; margin-right: 8px; vertical-align: middle; border-top: 3px solid var(--gold); }
.rt-key--ferry::before { border-top-style: dotted; }
.rt-key--note::before { display: none; }
.rt-key--note { margin-left: auto; font-style: italic; }
.rt-panel h3 { margin: 0 0 14px; font: 600 1.35rem/1.2 var(--font-display); }
.rt-facts { margin: 0; display: grid; gap: 14px; }
.rt-facts > div { display: grid; grid-template-columns: 72px 1fr; gap: 12px; }
.rt-facts dt { font: 600 0.72rem/1.6 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.rt-facts dd { margin: 0; color: var(--text); line-height: 1.6; font-size: 0.95rem; }
.rt-chart { margin-top: 26px; }
.rt-chart-title { margin: 0 0 12px; font-size: 0.82rem; color: var(--muted); }
.rt-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rt-bars li { display: grid; grid-template-columns: minmax(120px, 44%) 1fr auto; align-items: center; gap: 12px; font-size: 0.82rem; color: var(--muted); }
.rt-bars i { height: 8px; border-radius: 99px; background: var(--gold); width: calc(var(--v) / 55 * 100%); }
.rt-bars .is-proj i { background: repeating-linear-gradient(90deg, var(--gold) 0 6px, rgba(242, 181, 29, 0.35) 6px 9px); }
.rt-bars b { font: 600 0.92rem/1 var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rt-panels .src-note { margin-top: 22px; }

/* ---- glossary: a term that explains itself ---- */
.gl {
    text-decoration: underline dotted;
    text-decoration-color: var(--gold);
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    cursor: help;
    border-radius: 3px;
}
.gl:hover, .gl.is-open { color: var(--gold-light); }
.gl:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.gl-tip {
    position: fixed;
    z-index: 120;
    padding: 14px 16px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--navy-700);
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.7);
    color: var(--text);
    font-size: 0.86rem;
    line-height: 1.55;
}
.gl-tip strong { display: block; margin-bottom: 4px; font-family: var(--font-display); color: var(--gold); }

/* ---- routes map: real coastlines and stations (make_routes_map.py) ----
   The map is drawn in the units of the site's world map; --u turns a size in
   pixels into map units for the width the map is shown at. */
.rt { --u: 0.46; }
.rt-grid { grid-template-columns: 1fr; gap: clamp(22px, 3vw, 36px); }
.rt-map { padding: clamp(10px, 1.6vw, 18px); background: linear-gradient(180deg, rgba(10, 39, 64, 0.55), rgba(4, 18, 30, 0.7)); }
.rt-land path { fill: rgba(151, 174, 196, 0.08); stroke: #051523; stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rt-land .is-eu { fill: rgba(77, 163, 255, 0.2); }
.rt-land .is-ca { fill: rgba(242, 181, 29, 0.2); }
.rt-route path { stroke-width: calc(var(--u) * 3.2px); vector-effect: none; }
.rt-ferry { stroke-dasharray: 0.1 calc(var(--u) * 9px); }
.rt-train { r: calc(var(--u) * 4px); fill: var(--gold-bright); filter: drop-shadow(0 0 4px rgba(242, 181, 29, 0.9)); transition: opacity 0.4s ease; }
.rt-port { width: calc(var(--u) * 10px); height: calc(var(--u) * 10px); transform-box: fill-box; transform-origin: center; transform: rotate(45deg);
    fill: var(--navy-800); stroke: var(--gold); stroke-width: calc(var(--u) * 2.4px); transition: opacity 0.4s ease; }
.rt-node { r: calc(var(--u) * 4.6px); stroke-width: calc(var(--u) * 2.4px); }
.rt-node--eu, .rt-node--ca { r: calc(var(--u) * 7px); }
.rt-city { font: 600 calc(var(--u) * 13px) var(--font-display); paint-order: stroke; stroke: #04121e; stroke-width: calc(var(--u) * 4px); stroke-linejoin: round; }
.rt-city--main { font-size: calc(var(--u) * 15px); }
.rt-sea-name { font: italic calc(var(--u) * 12px) var(--font-body); fill: rgba(134, 194, 255, 0.75); paint-order: stroke; stroke: #04121e; stroke-width: calc(var(--u) * 3px); }
.rt[data-active="north"] svg .rt-train[data-route="middle"],
.rt[data-active="middle"] svg .rt-train[data-route="north"] { opacity: 0; }
.rt-key--port::before { width: 8px; height: 8px; border: 2px solid var(--gold); background: var(--navy-800); transform: rotate(45deg); margin: 0 12px 0 7px; vertical-align: 1px; }
/* the details below the map: the facts on the left, the days on the right */
@media (min-width: 900px) {
    .rt-panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 72px); align-items: start; }
    .rt-panel h3 { grid-column: 1 / -1; }
    .rt-panel[hidden] { display: none; }
    .rt-panel .rt-chart { margin-top: 0; }
}
@media (max-width: 1099px) { .rt { --u: 0.7; } }
@media (max-width: 759px) { .rt { --u: 0.95; } }
@media (max-width: 620px) { .rt { --u: 1; } .rt-map { padding: 8px; } .rt-city--minor { display: none; } }
@media (prefers-reduced-motion: reduce) { .rt-train { display: none; } }

/* BDaaS hero: the highlighted words ("regional organization") in the blue of the home page's hero */
[data-page="bdaas"] .hero-title-page em {
    background: linear-gradient(100deg, var(--blue-soft), var(--blue) 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: none;
}

/* ---- routes map, round two: the Northern route and the sanctioned countries in red, a train and a freighter ---- */
.rt { --rt-n: #ff7364; --rt-s: 190, 45, 66; }
.rt-route[data-route="north"] path { stroke: var(--rt-n); }
.rt-node[data-route="north"] { stroke: var(--rt-n); }
.rt-land .is-sanc { fill: rgba(var(--rt-s), 0.26); stroke: rgba(255, 110, 100, 0.3); }
.rt[data-active="middle"] .rt-land .is-sanc { fill: rgba(var(--rt-s), 0.17); }

/* the vehicles: drawn around their own centre, so the scale keeps them on the line */
.rt-train { fill: none; filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.55)); }
.rt-train[data-route="north"] { --vc: var(--rt-n); }
.rt-train[data-route="middle"] { --vc: var(--gold-light); }
.rt-veh { transform: scale(calc(var(--u) * 1.35)); }
.rt-veh path, .rt-veh circle { fill: var(--vc); stroke: #04121e; stroke-width: 1.3; paint-order: stroke; stroke-linejoin: round; }
.rt-veh .rt-box { opacity: 0.7; }
.rt-veh circle { fill: #04121e; stroke: var(--vc); stroke-width: 0.9; }
.rt-veh .rt-win { fill: #04121e; stroke: none; }
.rt-veh .rt-line { fill: none; stroke: var(--vc); stroke-width: 1; stroke-linecap: round; paint-order: normal; }

/* the legend is neutral: the colours belong to the routes (the dots on the tabs) */
.rt-key::before { border-top-color: rgba(233, 241, 248, 0.85); }
.rt-key--port::before { border-color: rgba(233, 241, 248, 0.85); }
.rt-key--sanc::before { display: inline-block; width: 14px; height: 12px; margin: 0 8px 0 12px; border: 1px solid rgba(255, 110, 100, 0.55); border-radius: 3px; background: rgba(var(--rt-s), 0.45); vertical-align: -2px; }
.rt-tabs .cmp-tab::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; background: var(--gold); vertical-align: 1px; }
.rt-tabs .cmp-tab[data-route="north"]::before { background: var(--rt-n); }
.rt-panel[data-route-panel="north"]::before { background: linear-gradient(180deg, #ff8a7c, #b0263e); }
.rt-panel[data-route-panel="north"] .rt-facts dt { color: #ff8a7c; }

/* ---- routes map, round three: a quieter red, the open Kazakh stretch in gold ---- */
.rt { --rt-n: #d57f74; --rt-s: 148, 52, 66; }
.rt-route[data-route="north"] path.rt-dom { stroke: var(--gold); }
.rt-land .is-sanc { fill: rgba(var(--rt-s), 0.16); stroke: rgba(213, 127, 116, 0.16); }
.rt[data-active="middle"] .rt-land .is-sanc { fill: rgba(var(--rt-s), 0.1); }
.rt-train[data-route="north"], .rt-train[data-route="middle"] { --vc: initial; }
.rt-veh--red { --vc: var(--rt-n); }
.rt-veh--gold { --vc: var(--gold-light); }
.rt-key--sanc::before { border-color: rgba(213, 127, 116, 0.4); background: rgba(var(--rt-s), 0.35); }
.rt-panel[data-route-panel="north"]::before { background: linear-gradient(180deg, #d57f74, #7d2f3d); }
.rt-panel[data-route-panel="north"] .rt-facts dt { color: #d9897f; }
.rt-node.rt-node--dom { stroke: var(--gold); }

/* ---- routes map, round four: the Northern route is not running (faint, dashed), smaller vehicles ---- */
.rt-route[data-route="north"] path.rt-closed { stroke: var(--rt-n); stroke-opacity: 0.5; stroke-dasharray: calc(var(--u) * 11px) calc(var(--u) * 7px); stroke-linecap: butt; }
.rt-node[data-route="north"], .rt-node.rt-node--dom { stroke: var(--rt-n); stroke-opacity: 0.6; }
.rt-veh { transform: scale(calc(var(--u) * 0.9)); }
.rt-veh path, .rt-veh circle { stroke-width: 1.1; }
.rt-key--closed::before { border-top: 3px dashed rgba(213, 127, 116, 0.65); width: 22px; }

/* ---- routes map, round five: names next to their stations, the tab "Other routes" (road via Georgia, road via Iran) ---- */
.rt-city { transform: translate(calc(var(--dx, 0) * var(--u) * 1px), calc(var(--dy, 0) * var(--u) * 1px)); }
.rt-route path.rt-road { stroke: var(--gold-light); stroke-width: calc(var(--u) * 2.2px); }
.rt-route path.rt-iran { stroke: #8fb0cf; stroke-dasharray: calc(var(--u) * 9px) calc(var(--u) * 5px); stroke-linecap: butt; }
.rt:not([data-active="alt"]) svg [data-route="alt"] { opacity: 0; pointer-events: none; }
.rt[data-active="alt"] svg [data-route="north"],
.rt[data-active="alt"] svg [data-route="middle"],
.rt[data-active="north"] svg [data-route="middle alt"] { opacity: 0.16; }
.rt[data-active="alt"] svg [data-route="north"] path,
.rt[data-active="alt"] svg [data-route="middle"] path { stroke: var(--muted); }
.rt[data-active="alt"] svg .rt-train { opacity: 0; }
.rt[data-active="alt"] .rt-panels > .src-note { display: none; }
.rt-tabs .cmp-tab[data-route="alt"]::before { background: linear-gradient(90deg, var(--gold-light) 50%, #8fb0cf 50%); }
.rt-key--road::before { border-top: 2px solid var(--gold-light); }
.rt-key--iran::before { border-top: 3px dashed #8fb0cf; }
.rt-panel[data-route-panel="alt"] .rt-facts, .rt-panel[data-route-panel="alt"] .src-note { grid-column: 1 / -1; }
.rt-panel[data-route-panel="alt"] .src-note { margin-top: 22px; }

/* ---- the message field: roomier, and it grows with the text (script.js, growingMessage) ---- */
.field textarea { min-height: 200px; max-height: 75vh; overflow-y: auto; line-height: 1.6; }
.field textarea[id="cf-message"] { resize: none; }

/* ---- sub-page heroes: the photo shows brighter (as on the home page); the veil keeps the text readable and fades into the page at the bottom ---- */
.hero--page .hero-media { opacity: 0.74; }
.hero--page .hero-veil {
    background:
        linear-gradient(to bottom, rgba(4, 18, 30, 0.5) 0%, rgba(4, 18, 30, 0) 24%),
        linear-gradient(to left, rgba(4, 18, 30, 0.34) 0%, rgba(4, 18, 30, 0) 62%),
        radial-gradient(125% 95% at 18% 32%, rgba(4, 18, 30, 0.02) 0%, rgba(4, 18, 30, 0.47) 72%),
        linear-gradient(to top, var(--navy-900) 2%, rgba(4, 18, 30, 0.34) 38%, rgba(4, 18, 30, 0.08) 100%);
}

/* @track:start */
/* ======================= Track record page =======================
   Built by bin/trackrecord/build_track_record.py (the CSS is installed by the same script).
   Proof strip, scroll-driven journey map, "what it means for you", the URARUS showcase, questions. */
.hero--track .hero-glyph { width: min(26vw, 330px); translate: 0 -40%; }

/* ---- shared card pieces ---- */
.tr-card {
    position: relative;
    padding: clamp(20px, 2.4vw, 28px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg, var(--surface-hi), rgba(255, 255, 255, 0.012));
    transition: border-color 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
}
.tr-year {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    background-image: var(--gold-metal);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: goldShimmer 7s linear infinite;
}
.tr-place {
    display: block;
    margin: 8px 0 12px;
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}
.tr-card h3 { font-size: 1.12rem; line-height: 1.3; margin: 0 0 8px; }
.tr-card p { margin: 0; font-size: 0.93rem; color: var(--muted); }
.tr-card a { color: var(--blue-soft); text-decoration: underline; text-underline-offset: 3px; }

/* ---- proof strip right under the hero ---- */
.tr-strip { padding-block: clamp(34px, 5vw, 60px); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(10, 39, 64, 0.5), transparent); }
.tr-stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 1fr); gap: 0; }
.tr-stat b i { font-style: normal; }
.tr-stat.tr-stat--wide span { max-width: 36ch; }
.tr-stat { padding: 6px clamp(14px, 2.4vw, 32px); border-left: 1px solid var(--line-strong); }
.tr-stat:first-child { border-left: 0; padding-left: 0; }
.tr-stat b {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1;
    letter-spacing: -0.03em;
    background-image: var(--gold-metal);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: goldShimmer 7s linear infinite;
}
.tr-stat span { display: block; margin-top: 10px; max-width: 22ch; font-size: 0.88rem; line-height: 1.4; color: var(--muted); }

/* ---- the journey: a map that follows the story as you scroll ---- */
.tm { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.tm-map { position: sticky; top: calc(var(--header-h) + 72px); }
.tm-frame {
    padding: clamp(8px, 1.4vw, 16px);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(10, 39, 64, 0.6), rgba(4, 18, 30, 0.75));
    overflow: hidden;
}
.tm-frame svg { display: block; width: 100%; height: auto; }
.tm-land path { fill: rgba(151, 174, 196, 0.08); stroke: #051523; stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tm-land .is-eu { fill: rgba(77, 163, 255, 0.2); }
.tm-land .is-ca { fill: rgba(242, 181, 29, 0.14); transition: fill 1.2s ease; }
.tm[data-year="2018"] .tm-land .is-ca, .tm[data-year="2022"] .tm-land .is-ca { fill: rgba(242, 181, 29, 0.2); }
.tm[data-year="2025"] .tm-land .is-ca { fill: rgba(242, 181, 29, 0.34); }
.tm-arc { fill: none; stroke: var(--blue-soft); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 1.6s var(--ease), opacity 0.4s ease, stroke 0.6s ease; }
.tm-arc.is-on { stroke-dashoffset: 0; opacity: 0.9; }
.tm-arc--ca { stroke: var(--gold); stroke-width: 1.5; }
.tm-arc--ca.is-on { opacity: 0.55; }
.tm[data-year="2025"] .tm-arc--ca.is-on { opacity: 1; stroke: var(--gold-light); filter: drop-shadow(0 0 4px rgba(255, 217, 77, 0.7)); }
.tm-arc.is-standby { stroke: rgba(151, 174, 196, 0.55); stroke-dasharray: 3 4; stroke-dashoffset: 0; opacity: 0.7; }
.tm-n { opacity: 0; transition: opacity 0.6s ease; }
.tm-n.is-on { opacity: 1; }
.tm-dot { fill: var(--blue); stroke: #051523; stroke-width: 1.5; transition: fill 0.5s ease; }
.tm-n--ca .tm-dot { fill: var(--gold); }
.tm-ring { fill: none; stroke: var(--gold-light); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.tm-n.is-now .tm-ring { animation: tmPulse 1.8s ease-out infinite; }
@keyframes tmPulse { from { transform: scale(0.5); opacity: 0.95; } to { transform: scale(3.2); opacity: 0; } }
.tm-n.is-standby .tm-dot { fill: rgba(151, 174, 196, 0.8); }
.tm-n.is-standby .tm-name { fill: var(--muted); }
.tm-name { fill: var(--text); font-family: var(--font-display); font-size: 11px; font-weight: 600; paint-order: stroke; stroke: #051523; stroke-width: 3px; stroke-linejoin: round; }
.tm-info { display: flex; align-items: baseline; gap: 18px; margin-top: 16px; padding: 0 6px; min-height: 4.6rem; }
.tm-year {
    flex: none;
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 5vw, 3.8rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    background-image: var(--gold-metal);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: goldShimmer 7s linear infinite;
}
.tm-cap { font-size: 0.98rem; line-height: 1.4; color: var(--text); transition: opacity 0.35s ease; }
.tm-cap small { display: block; margin-top: 4px; font-size: 0.8rem; color: var(--muted); }
.tm-steps { padding-bottom: 18vh; }
.tm-step { display: flex; align-items: center; min-height: 32vh; padding: 3vh 0; }
.tm-step .tr-card { width: 100%; opacity: 0.5; transform: scale(0.985); transition: opacity 0.5s ease, transform 0.5s var(--ease), border-color 0.5s ease, box-shadow 0.5s ease; }
.tm-step.is-active .tr-card { opacity: 1; transform: none; border-color: rgba(242, 181, 29, 0.5); box-shadow: 0 0 44px -16px rgba(242, 181, 29, 0.45); }
.tm-step--pause .tr-card { border-style: dashed; }
.tm-step--pause .tr-year { background-image: none; color: var(--muted); animation: none; -webkit-text-fill-color: currentColor; }
/* ---- the eleven years in three eras, under the map ---- */
.tm-rail { display: flex; gap: 12px; margin: 22px 0 0; }
.tm-era { flex: var(--n) 1 0; min-width: 0; }
.tm-era b { display: block; margin-bottom: 12px; padding-bottom: 7px; border-bottom: 2px solid var(--line-strong); font-family: var(--font-display); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); transition: color 0.4s ease, border-color 0.4s ease; }
.tm-era.is-current b { color: var(--gold-light); border-color: var(--gold); }
.tm-era ol { position: relative; display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; }
.tm-era ol::before { content: ""; position: absolute; left: 6px; right: 6px; top: 4px; height: 2px; background: var(--line-strong); }
.tm-era li { position: relative; display: grid; justify-items: center; gap: 8px; flex: 1 1 0; }
.tm-era i { position: relative; z-index: 1; width: 10px; height: 10px; border: 2px solid var(--line-strong); border-radius: 50%; background: var(--navy-900); transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s var(--ease), box-shadow 0.4s ease; }
.tm-era span { font-size: 0.62rem; color: var(--muted); transition: color 0.4s ease; }
.tm-era li.is-done i { background: var(--gold); border-color: var(--gold); }
.tm-era li.is-done span { color: var(--text); }
.tm-era li.is-active i { transform: scale(1.5); box-shadow: 0 0 0 5px rgba(242, 181, 29, 0.18), 0 0 16px rgba(242, 181, 29, 0.7); }
.tm-era li.is-active span { color: var(--gold-light); font-weight: 600; }

/* ---- the four sub-links: part of the hero (pills as on the hero badge), then a sticky bar under the header ---- */
.tr-subnav { position: sticky; top: var(--header-h); z-index: 20; margin-top: -64px; border-bottom: 1px solid transparent; transition: background 0.35s ease, border-color 0.35s ease; }
.tr-subnav.is-stuck { background: rgba(4, 18, 30, 0.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: var(--line); }
.tr-subnav-in { display: flex; justify-content: flex-start; align-items: center; gap: 10px; height: 64px; overflow-x: auto; scrollbar-width: none; }
.tr-subnav-in::-webkit-scrollbar { display: none; }
.tr-subnav a {
    flex: none; text-decoration: none; display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 18px 9px 14px; border: 1px solid var(--line-strong); border-radius: 999px;
    background: rgba(255, 255, 255, 0.04); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    font-family: var(--font-display); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--blue-soft); transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.tr-subnav a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgba(74, 163, 255, 0.18); transition: background 0.3s ease, box-shadow 0.3s ease; }
.tr-subnav a:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.4); }
.tr-subnav a.is-active { border-color: var(--gold); color: var(--gold-light, #ffd94d); background: rgba(242, 181, 29, 0.1); }
.tr-subnav a.is-active::before { background: var(--gold); box-shadow: 0 0 0 3px rgba(242, 181, 29, 0.22); }
@media (max-width: 620px) { .tr-subnav a { padding: 8px 14px 8px 12px; font-size: 0.7rem; letter-spacing: 0.1em; } }
.tr-page .section { padding-block: clamp(54px, 6.5vw, 96px); }
.tr-page .section-head { margin-bottom: clamp(26px, 3.2vw, 42px); }

/* ---- what it means for you: six compact cards ---- */
.tr-needs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tr-need {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px 24px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg, var(--surface-hi), rgba(255, 255, 255, 0.012));
    transition: border-color 0.4s ease, transform 0.4s var(--ease);
}
.tr-need:hover { border-color: rgba(242, 181, 29, 0.45); transform: translateY(-3px); }
.tr-need-no { position: absolute; top: 20px; right: 22px; font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; color: var(--gold); }
.tr-need small { display: block; font-family: var(--font-display); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.tr-need h3 { margin: 0 0 12px; font-size: 1.12rem; line-height: 1.3; min-height: 2.6em; }
.tr-need-have { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.tr-need-have small { color: var(--gold); }
.tr-need p { margin: 6px 0 0; font-size: 0.9rem; color: var(--muted); }

/* ---- URARUS showcase ---- */
.tr-ref {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
    padding: clamp(24px, 3.4vw, 44px);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg, var(--surface-hi), rgba(255, 255, 255, 0.012));
}
.tr-ref h3 { font-size: 1.5rem; margin: 0 0 14px; }
.tr-ref p { color: var(--muted); }
.tr-ref a:not(.tr-link) { color: var(--blue-soft); text-decoration: underline; text-underline-offset: 3px; }
.tr-ref .tr-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 18px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
    transition: border-color 0.3s ease, background 0.3s ease;
}
.tr-ref .tr-link:hover { border-color: var(--gold); background: rgba(242, 181, 29, 0.08); }
.tr-ref .tr-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tr-facts { margin: 0; display: grid; gap: 0; }
.tr-facts div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 0.92rem; }
.tr-facts div:first-child { border-top: 0; padding-top: 0; }
.tr-facts dt { color: var(--muted); }
.tr-facts dd { margin: 0; }
.tr-facts .tr-standby { color: var(--gold-light); }
.tr-ref--status { margin-top: 64px; }

.tr-privacy { display: flex; align-items: center; gap: 8px; margin: -4px 0 22px; font-size: 0.82rem; color: var(--muted); }
.tr-privacy svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tr-i { position: relative; display: inline-block; margin-left: 8px; padding: 0 2px; border: 0; background: none; color: var(--gold); font: inherit; font-size: 0.95em; line-height: 1; cursor: help; transition: color 0.25s ease; }
.tr-i::before { content: "\2139\FE0E"; }
.tr-i:hover, .tr-i:focus-visible { color: var(--gold-light, #ffd94d); outline: none; }
.tr-i-tip { position: absolute; z-index: 30; left: 50%; bottom: calc(100% + 10px); width: max-content; max-width: min(250px, 72vw); padding: 9px 13px; border: 1px solid var(--line-strong); border-radius: 10px; background: rgba(4, 18, 30, 0.97); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); font: 400 0.8rem/1.45 var(--font-body, inherit); font-style: normal; letter-spacing: 0; text-transform: none; text-align: left; color: var(--text); opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; pointer-events: none; }
.tr-i:hover .tr-i-tip, .tr-i:focus .tr-i-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.tr-facts .tr-i-tip { left: auto; right: -6px; transform: translate(0, 4px); }
.tr-facts .tr-i:hover .tr-i-tip, .tr-facts .tr-i:focus .tr-i-tip { transform: translate(0, 0); }
.tr-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.tr-fig { padding: 20px 22px 18px; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius); background: var(--surface); }
.tr-fig b {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.6vw, 2.9rem);
    line-height: 1.05;
    background-image: var(--gold-metal);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: goldShimmer 7s linear infinite;
}
.tr-fig span { display: block; margin-top: 6px; font-size: 0.86rem; color: var(--muted); }
.tr-sub {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 64px 0 26px;
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--blue-soft);
}
.tr-sub::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }

.tr-chain { position: relative; }
.tr-chain ol { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.tr-chain-line {
    position: absolute;
    left: 12.5%; right: 12.5%;
    top: 29px;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(242, 181, 29, 0.6) 0 8px, transparent 8px 16px);
    animation: trDash 1.1s linear infinite;
}
.tr-chain-line i {
    position: absolute;
    top: -4px; left: 0;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow: 0 0 12px 2px rgba(255, 217, 77, 0.8);
    animation: trTravel 5.4s linear infinite;
}
.tr-chain-line i:nth-child(2) { animation-delay: -1.8s; }
.tr-chain-line i:nth-child(3) { animation-delay: -3.6s; }
@keyframes trDash { to { background-position: 16px 0; } }
@keyframes trTravel { from { left: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } to { left: calc(100% - 10px); opacity: 0; } }
.tr-node { text-align: center; }
.tr-node-ico { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 16px; border: 2px solid var(--blue); border-radius: 50%; background: var(--navy-900); box-shadow: 0 0 0 6px var(--navy-900); }
.tr-node:nth-child(n+3) .tr-node-ico { border-color: var(--gold); }
.tr-node:nth-child(3) .tr-node-ico { box-shadow: 0 0 0 6px var(--navy-900), 0 0 28px rgba(242, 181, 29, 0.45); }
.tr-node-ico svg { width: 26px; height: 26px; fill: none; stroke: var(--blue-soft); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tr-node:nth-child(n+3) .tr-node-ico svg { stroke: var(--gold-light); }
.tr-node b { display: block; font-family: var(--font-display); font-size: 1.12rem; }
.tr-node em { display: block; margin: 4px 0 10px; font-style: normal; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.tr-node p { margin: 0 auto; max-width: 24ch; font-size: 0.88rem; color: var(--muted); }
.tr-caps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tr-caps .provide { grid-column: auto; }
.tr-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.tr-app { padding-top: 16px; border-top: 2px solid var(--gold); }
.tr-app h4 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; font-family: var(--font-display); font-size: 1.08rem; }
.tr-app h4 span { font-size: 0.7rem; color: var(--gold); letter-spacing: 0.1em; }
.tr-app ul { list-style: none; margin: 0; padding: 0; }
.tr-app li { position: relative; padding: 9px 0 9px 18px; border-bottom: 1px solid var(--line); font-size: 0.9rem; color: var(--muted); }
.tr-app li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.tr-stories { margin: 30px 0 0; padding: 14px 20px; border-left: 3px solid var(--gold); background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; font-size: 0.92rem; color: var(--muted); }
.tr-stories b { margin-right: 12px; font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }

/* ---- URARUS tabs ---- */
.tr-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 38px 0 30px; }
.tr-tabs button { padding: 11px 20px; border: 1px solid var(--line-strong); border-radius: 999px; background: none; color: var(--muted); font-family: var(--font-display); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease; }
.tr-tabs button:hover { color: var(--text); border-color: var(--blue-soft); }
.tr-tabs button[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: var(--navy-900); }
.tr-tabs button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.tr-panel { animation: sigPanelIn 0.55s var(--ease); }
.tr-panel[hidden] { display: none; }

/* ---- questions: one open at a time is not enforced, all can be read ---- */
.tr-faq { display: grid; gap: 12px; max-width: 920px; }
.tr-q { border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(165deg, var(--surface-hi), rgba(255, 255, 255, 0.012)); transition: border-color 0.4s ease, background-color 0.4s ease; }
.tr-q[open] { border-color: rgba(77, 163, 255, 0.4); background-color: rgba(77, 163, 255, 0.05); }
.tr-q summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 20px 24px; cursor: pointer; list-style: none; }
.tr-q summary::-webkit-details-marker { display: none; }
.tr-q summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: var(--radius-lg); }
.tr-q-no { font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; color: var(--blue); }
.tr-q-t { font-family: var(--font-display); font-size: 1.04rem; font-weight: 600; line-height: 1.35; }
.tr-q-ico { position: relative; width: 14px; height: 14px; }
.tr-q-ico::before, .tr-q-ico::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; background: var(--gold); transition: transform 0.3s var(--ease); }
.tr-q-ico::after { transform: rotate(90deg); }
.tr-q[open] .tr-q-ico::after { transform: rotate(0deg); }
.tr-q p { margin: 0; padding: 0 24px 22px 66px; color: var(--muted); }

/* ---- closing band ---- */
.tr-band {
    position: relative;
    overflow: hidden;
    padding: clamp(34px, 5vw, 64px);
    border: 1px solid rgba(242, 181, 29, 0.4);
    border-radius: var(--radius-lg);
    background: radial-gradient(80% 140% at 85% 0%, rgba(242, 181, 29, 0.14), transparent 60%), linear-gradient(165deg, var(--surface-hi), rgba(255, 255, 255, 0.012));
    text-align: center;
}
.tr-band h2 { margin: 0 auto 14px; max-width: 22ch; }
.tr-band p { max-width: 58ch; margin: 0 auto 26px; color: var(--muted); }
.tr-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

@media (max-width: 1000px) {
    .tr-needs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tm { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .tm-map { top: calc(var(--header-h) + 46px); z-index: 3; padding: 8px 0 6px; background: var(--navy-900); }
    .tm-frame { padding: 6px; }
    .tm-info { margin-top: 10px; min-height: 3.6rem; }
    .tm-steps { padding-bottom: 6vh; }
    .tm-step { min-height: 30vh; }
    .tr-ref { grid-template-columns: minmax(0, 1fr); }
    .tr-figs, .tr-caps, .tr-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tr-chain-line { display: none; }
    .tr-chain ol { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .tr-chain ol::before { content: ""; position: absolute; left: 29px; top: 30px; bottom: 30px; width: 2px; background: repeating-linear-gradient(180deg, rgba(242, 181, 29, 0.6) 0 8px, transparent 8px 16px); }
    .tr-node { display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: 18px; text-align: left; align-items: start; }
    .tr-node-ico { margin: 0; grid-row: 1 / span 3; }
    .tr-node p { margin: 0; max-width: none; }
    .tr-node em { margin: 2px 0 6px; }
}
@media (max-width: 760px) {
    .tr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
    .tr-stat:nth-child(3) { border-left: 0; padding-left: 0; }
    .tr-needs { grid-template-columns: minmax(0, 1fr); }
    .tr-need h3 { min-height: 0; }
    .tr-need:hover { transform: none; }
    .tr-q p { padding-left: 24px; }
    .tm-era b { display: none; }
}
@media (max-width: 520px) {
    .tr-figs, .tr-caps, .tr-apps { grid-template-columns: minmax(0, 1fr); }
    .tr-facts div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (max-width: 760px) {
    .tm-frame svg { height: 138px; }
    .tm-year { font-size: 2.3rem; }
    .tm-cap { font-size: 0.88rem; }
    .tm-cap small { display: none; }
    .tm-info { min-height: 0; margin-top: 8px; align-items: center; }
    .tm-step { min-height: 26vh; }
}
@media (prefers-reduced-motion: reduce) {
    .tr-year, .tr-stat b, .tm-year, .tr-fig b { animation: none; }
    .tr-chain-line, .tr-chain-line i, .tm-n.is-now .tm-ring { animation: none; }
    .tm-step .tr-card { opacity: 1; transform: none; }
}

/* Background hero glyph (generated by glyph.py): a seal of proven competence */
.hero-glyph--track * { transform-box: fill-box; transform-origin: center; }
.hero-glyph--track .tg-wreath { transform-box: view-box; transform-origin: 0 0; }
.tg-seal { fill: none; stroke: url(#hgRing); stroke-width: 2.6; stroke-dasharray: 0.7 2.35; stroke-opacity: 0.9; animation: tgSealSpin 140s linear infinite; }
@keyframes tgSealSpin { to { transform: rotate(-360deg); } }
.tg-stem { fill: none; stroke: url(#hgStroke); stroke-width: 0.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; stroke-opacity: 0.9; animation: tgDraw 1.5s var(--ease) 0.3s both; }
.tg-leaf { fill: rgba(242, 181, 29, 0.24); stroke: url(#hgStroke); stroke-width: 0.45; stroke-linejoin: round; transform-box: view-box; transform-origin: 0 0; animation: tgPop 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) var(--d, 1s) both, tgSway var(--sw, 3.6s) ease-in-out calc(var(--d, 1s) + 0.8s) infinite alternate; }
@keyframes tgSway { from { rotate: -2.4deg; } to { rotate: 2.4deg; } }
.tg-shield-fill { fill: rgba(242, 181, 29, 0.1); animation: tgFade 1s ease 1.8s both; }
.tg-shield { fill: none; stroke: url(#hgStroke); stroke-width: 1.2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 1.2px rgba(255, 217, 77, 0.8)); animation: tgDraw 1.8s var(--ease) 0.5s both; }
.tg-rim { fill: none; stroke: url(#hgRing); stroke-width: 0.35; stroke-opacity: 0.75; animation: tgFade 1s ease 2s both; }
.tg-shine { fill: url(#tgShine); animation: tgShine 7s ease-in-out 4.6s infinite; }
.tg-check { fill: none; stroke: #ffe68a; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 2px #ffd94d) drop-shadow(0 0 6px rgba(242, 181, 29, 0.7)); animation: tgDraw 0.9s var(--ease) 2.4s both, tgGlow 7s ease-in-out 4.6s infinite; }
.tg-burst { fill: none; stroke: #ffd94d; stroke-width: 0.6; opacity: 0; animation: tgBurst 1.3s ease-out 3.2s both; }
.tg-sparks { fill: none; stroke: #fff5b5; stroke-width: 0.7; stroke-linecap: round; opacity: 0; animation: tgSparks 1.1s ease-out 3.2s both; }
.tg-star { fill: #fff5b5; filter: drop-shadow(0 0 2.2px #ffd94d) drop-shadow(0 0 7px rgba(242, 181, 29, 0.8)); animation: tgStar 0.9s cubic-bezier(0.3, 1.6, 0.5, 1) 3.5s both, tgTwinkle 4s ease-in-out 4.6s infinite; }
@keyframes tgDraw { from { stroke-dashoffset: 1; } }
@keyframes tgPop { from { scale: 0; opacity: 0; } }
@keyframes tgFade { from { opacity: 0; } }
@keyframes tgBurst { 0% { scale: 1; opacity: 0.9; } 100% { scale: 4.6; opacity: 0; } }
@keyframes tgSparks { 0% { scale: 0.6; opacity: 0; } 25% { opacity: 1; } 100% { scale: 1.35; opacity: 0; } }
@keyframes tgStar { from { scale: 0; rotate: -90deg; opacity: 0; } }
@keyframes tgTwinkle { 0%, 100% { scale: 1; rotate: 0deg; } 50% { scale: 1.22; rotate: 45deg; } }
@keyframes tgShine { 0%, 40%, 100% { translate: 0 0; opacity: 0; } 4% { opacity: 1; } 34% { translate: 92px 0; opacity: 1; } 38% { translate: 92px 0; opacity: 0; } }
@keyframes tgGlow { 0%, 38%, 100% { filter: drop-shadow(0 0 2px #ffd94d) drop-shadow(0 0 6px rgba(242, 181, 29, 0.7)); } 18% { filter: drop-shadow(0 0 3px #fff5b5) drop-shadow(0 0 12px rgba(255, 217, 77, 1)); } }
@media (prefers-reduced-motion: reduce) {
    .hero-glyph--track * { animation: none !important; }
    .tg-burst, .tg-sparks, .tg-shine { display: none; }
}
/* @track:end */