/* ==========================================================================
   Contract Loop — design system
   Brand palette + type lifted from CL_Intro.pptx:
     navy  #03234A  (logo "Contract")      blue #0268BF (logo "Loop")
     deck accents: indigo #25316B · teal #0E8F95 · green #67893C · purple #602E91
   Type: Jost (geometric, stands in for the deck's Century Gothic) + Inter.
   Built by AlexWeb — alexweb.be
   ========================================================================== */

:root {
    --navy: #03234A;
    --navy-900: #021A36;
    --navy-800: #062F60;
    --navy-700: #0B3D78;
    --blue: #0268BF;
    --blue-700: #0159A8;
    --blue-600: #0A5AA6;
    --blue-300: #4FA3E3;
    --sky: #4FC3F7;
    --pale: #EAF2FB;
    --pale-50: #F6FAFE;
    --paper: #FFFFFF;
    --ink: #10243B;
    --muted: #5A7085;
    --line: #DFE8F3;
    --line-soft: #EDF3FA;

    --indigo: #25316B;
    --teal: #0E8F95;
    --green: #67893C;
    --purple: #602E91;
    --amber: #E08A34;

    /* Softer, more deliberate corner language than the old all-pill look:
       controls 12px, cards 16px, panels 24px. */
    --r-btn: 12px;
    --radius: 16px;
    --radius-lg: 24px;

    /* Layered shadows — a tight contact shadow plus a wide ambient one reads
       far cleaner than a single big blur. */
    --shadow-sm: 0 1px 2px rgba(3, 35, 74, .05), 0 4px 14px -6px rgba(3, 35, 74, .10);
    --shadow: 0 2px 4px rgba(3, 35, 74, .04), 0 14px 34px -12px rgba(3, 35, 74, .18);
    --shadow-lg: 0 4px 8px rgba(3, 35, 74, .05), 0 30px 60px -18px rgba(3, 35, 74, .26);

    --ease: cubic-bezier(.22, .68, 0, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);

    --wrap: 1240px;
    --nav-h: 72px;
}

@property --spot { syntax: '<number>'; inherits: false; initial-value: 0; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 1rem); }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--ink);
    background: var(--paper);
    line-height: 1.7;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
    font-family: 'Jost', 'Century Gothic', 'Futura', sans-serif;
    color: var(--navy);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -.02em;
    text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 4.4vw, 3.5rem); }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
h3 { font-size: clamp(1.22rem, 1.8vw, 1.48rem); }
h4 { font-size: 1.1rem; }

p { margin-bottom: 1.05rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue); text-decoration: none; transition: color .22s ease; }
a:hover { color: var(--navy); }

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--blue); color: #fff; }

:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
    border-radius: 6px;
}
.bg-navy :focus-visible, .hero :focus-visible, .cta-band :focus-visible,
.page-hero :focus-visible, .footer :focus-visible, .navbar:not(.scrolled) :focus-visible { outline-color: var(--sky); }

.container { max-width: var(--wrap); margin: 0 auto; padding: 0 1.75rem; }
.narrow { max-width: 820px; margin-left: auto; margin-right: auto; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--navy);
    color: #fff;
    padding: .7rem 1.2rem;
    z-index: 2000;
}
.skip-link:focus { left: 0; color: #fff; }

/* --- eyebrow / labels -------------------------------------------------
   A short rule before the label anchors it to the column edge and stops the
   all-caps text floating on its own. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: 'Jost', sans-serif;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 1rem;
}
.eyebrow::before {
    content: '';
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    opacity: .55;
    flex: none;
}
.eyebrow-light { color: var(--sky); }
.section-head.center .eyebrow { justify-content: center; }

.section-head { max-width: 760px; margin-bottom: 3.4rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { color: var(--muted); font-size: 1.1rem; margin-top: 1rem; }
.bg-navy .section-head p { color: rgba(255, 255, 255, .72); }

.lead { font-size: 1.13rem; color: var(--muted); }

/* --- buttons ----------------------------------------------------------
   Gradient fill + inset top highlight + a coloured contact shadow: reads as a
   physical control instead of a flat capsule. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .82rem 1.55rem;
    font-family: 'Jost', sans-serif;
    font-size: .96rem;
    font-weight: 500;
    letter-spacing: .005em;
    border-radius: var(--r-btn);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .25s var(--ease-out), box-shadow .25s ease,
                background .22s ease, color .22s ease, border-color .22s ease;
    white-space: nowrap;
    text-align: center;
    position: relative;
    isolation: isolate;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: .06s; }

.btn-primary {
    background: linear-gradient(180deg, #1279D3, var(--blue-700));
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22),
                0 1px 2px rgba(1, 60, 115, .28),
                0 8px 20px -8px rgba(2, 104, 191, .60);
}
.btn-primary:hover {
    color: #fff;
    background: linear-gradient(180deg, #1a86e0, #0763b6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26),
                0 2px 4px rgba(1, 60, 115, .22),
                0 14px 28px -10px rgba(2, 104, 191, .70);
}
.btn-teal {
    background: linear-gradient(180deg, #17A3A9, var(--teal));
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22),
                0 1px 2px rgba(8, 80, 84, .28),
                0 8px 20px -8px rgba(14, 143, 149, .60);
}
.btn-teal:hover {
    color: #fff;
    background: linear-gradient(180deg, #1DB0B6, #0B7E84);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26),
                0 2px 4px rgba(8, 80, 84, .22),
                0 14px 28px -10px rgba(14, 143, 149, .70);
}

.btn-outline {
    border-color: var(--line);
    color: var(--navy);
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.btn-outline:hover { border-color: var(--blue-300); color: var(--blue); box-shadow: var(--shadow); }

/* Glass button for dark backgrounds. */
.btn-ghost {
    border-color: rgba(255, 255, 255, .34);
    color: #fff;
    background: rgba(255, 255, 255, .11);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .5); }

.btn-white {
    background: #fff;
    color: var(--navy);
    box-shadow: 0 1px 2px rgba(2, 20, 40, .18), 0 12px 26px -10px rgba(2, 20, 40, .45);
}
.btn-white:hover { background: #fff; color: var(--blue); box-shadow: 0 2px 4px rgba(2, 20, 40, .2), 0 18px 34px -12px rgba(2, 20, 40, .5); }

.btn-lg { padding: 1rem 2rem; font-size: 1.02rem; }
.btn-sm { padding: .6rem 1.1rem; font-size: .88rem; }
.btn-block { width: 100%; }

.btn-arrow::after {
    content: '';
    width: 1em; height: 1em;
    flex: none;
    background: currentColor;
    /* chevron-right, masked so it inherits the button's colour */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
    transition: transform .28s var(--ease-out);
}
.btn-arrow:hover::after { transform: translateX(4px); }

/* --- navbar ----------------------------------------------------------
   Sits transparent over the dark hero every page opens with, then turns into a
   solid white bar once you scroll. The old permanently-translucent white bar
   turned muddy grey over the navy hero. */
.navbar {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--nav-h);
    z-index: 1000;
    transition: background .3s ease, box-shadow .3s ease, height .3s ease;
}
.navbar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--line-soft);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.navbar.scrolled::before { opacity: 1; }
.navbar.scrolled { box-shadow: 0 1px 0 rgba(3, 35, 74, .04), 0 8px 30px -12px rgba(3, 35, 74, .18); }

/* Unscrolled: a soft dark scrim so nav text stays legible over any hero art. */
.navbar::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: calc(var(--nav-h) + 24px);
    background: linear-gradient(rgba(2, 22, 45, .38), transparent);
    opacity: 1;
    transition: opacity .3s ease;
    pointer-events: none;
    z-index: -1;
}
.navbar.scrolled::after { opacity: 0; }

.nav-container {
    position: relative;
    max-width: none;
    height: 100%;
    margin: 0 auto;
    /* Full-bleed: the logo hugs the left edge instead of sitting inside the
       1240px text column with 150px of dead space beside it. */
    padding: 0 clamp(1.1rem, 2.6vw, 2.4rem);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    z-index: 1;
}

.nav-logo { margin-right: auto; display: flex; align-items: center; }
.nav-logo img {
    height: 56px;
    width: auto;
    transition: opacity .3s ease, filter .3s ease;
}
/* Over the dark hero the dark wordmark is invisible — knock it white. */
.navbar:not(.scrolled) .nav-logo img { filter: brightness(0) invert(1); }
.nav-logo:hover img { opacity: .82; }

.nav-menu {
    display: flex;
    align-items: center;
    gap: .15rem;
    list-style: none;
}
.nav-menu > li > a {
    display: block;
    font-family: 'Jost', sans-serif;
    font-size: .94rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .78);
    padding: .48rem .85rem;
    border-radius: 9px;
    position: relative;
    transition: color .2s ease, background .2s ease;
}
.nav-menu > li > a:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.nav-menu > li > a.active { color: #fff; background: rgba(255, 255, 255, .14); }

.navbar.scrolled .nav-menu > li > a { color: var(--muted); }
.navbar.scrolled .nav-menu > li > a:hover { color: var(--navy); background: var(--pale); }
.navbar.scrolled .nav-menu > li > a.active { color: var(--blue); background: var(--pale); }

.nav-actions { display: flex; align-items: center; gap: .7rem; }

/* language switch — a compact segmented control, not two stray links */
.lang-switch {
    display: flex;
    align-items: center;
    gap: 2px;
    font-family: 'Jost', sans-serif;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .05em;
    padding: 3px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
}
.lang-switch a {
    padding: .22rem .55rem;
    border-radius: 6px;
    color: rgba(255, 255, 255, .68);
    line-height: 1.5;
    transition: background .2s ease, color .2s ease;
}
.lang-switch a.active { background: #fff; color: var(--navy); }
.lang-switch a:not(.active):hover { color: #fff; background: rgba(255, 255, 255, .14); }

.navbar.scrolled .lang-switch { background: var(--pale-50); border-color: var(--line); }
.navbar.scrolled .lang-switch a { color: var(--muted); }
.navbar.scrolled .lang-switch a.active { background: var(--navy); color: #fff; }
.navbar.scrolled .lang-switch a:not(.active):hover { background: var(--pale); color: var(--navy); }

/* Nav CTA: glass over the hero, solid blue once the bar goes white. */
.nav-actions .btn { padding: .6rem 1.15rem; font-size: .9rem; }
.navbar:not(.scrolled) .nav-actions .btn-primary {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: none;
}
.navbar:not(.scrolled) .nav-actions .btn-primary:hover {
    background: #fff;
    border-color: #fff;
    color: var(--navy);
}

/* scroll progress — injected by script.js */
.scroll-progress {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease;
}
.navbar.scrolled .scroll-progress { opacity: 1; }
.scroll-progress i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--blue), var(--sky));
    transform: scaleX(0);
    transform-origin: 0 50%;
}

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px; height: 42px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}
.hamburger span {
    display: block;
    width: 20px; height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .3s var(--ease-out), opacity .2s ease, background .3s ease;
    margin: 0 auto;
}
.navbar.scrolled .hamburger { background: var(--pale-50); border-color: var(--line); }
.navbar.scrolled .hamburger span { background: var(--navy); }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Drawer open at scroll 0: force the solid bar so the white panel has a bar to
   hang from instead of floating under transparent nav text. */
.navbar.menu-open::before { opacity: 1; }
.navbar.menu-open::after { opacity: 0; }
.navbar.menu-open .nav-logo img { filter: none; }
.navbar.menu-open .nav-menu > li > a { color: var(--muted); }
.navbar.menu-open .nav-menu > li > a.active { color: var(--blue); }
.navbar.menu-open .lang-switch { background: var(--pale-50); border-color: var(--line); }
.navbar.menu-open .lang-switch a { color: var(--muted); }
.navbar.menu-open .lang-switch a.active { background: var(--navy); color: #fff; }
.navbar.menu-open .hamburger { background: var(--pale-50); border-color: var(--line); }
.navbar.menu-open .hamburger span { background: var(--navy); }

/* --- sections --------------------------------------------------------- */
section { padding: clamp(4.4rem, 7.5vw, 7rem) 0; }
.section-tight { padding: clamp(3.4rem, 5vw, 4.6rem) 0; }
.bg-pale { background: var(--pale-50); }
.bg-blue-pale { background: linear-gradient(180deg, var(--pale), #F3F8FE); }
.bg-navy {
    background:
        radial-gradient(900px 520px at 85% -10%, rgba(79, 195, 247, .13), transparent 60%),
        radial-gradient(700px 480px at 0% 110%, rgba(2, 104, 191, .22), transparent 62%),
        var(--navy);
    color: rgba(255, 255, 255, .82);
}
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4 { color: #fff; }

/* --- hero ------------------------------------------------------------- */
.hero {
    position: relative;
    padding: calc(var(--nav-h) + 5rem) 0 5.5rem;
    background:
        radial-gradient(760px 520px at 84% 6%, rgba(79, 195, 247, .30), transparent 62%),
        radial-gradient(680px 520px at 4% 96%, rgba(2, 104, 191, .40), transparent 64%),
        linear-gradient(152deg, #02203F 0%, #052F61 46%, #0A4C8F 100%);
    color: rgba(255, 255, 255, .84);
    overflow: hidden;
}
/* slow-drifting aurora, keeps the flat gradient alive */
.hero::before {
    content: '';
    position: absolute;
    top: -34%; right: -14%;
    width: 780px; height: 780px;
    background: radial-gradient(circle, rgba(79, 195, 247, .26), transparent 62%);
    animation: drift 22s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-70px, 60px, 0) scale(1.12); }
}
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 62px 62px;
    mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 78%);
    pointer-events: none;
}
.hero .container { position: relative; z-index: 2; }

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 4rem;
    align-items: center;
}
/* No eyebrow above the hero headline any more — the slogan itself is the first
   thing on the page, so give it room to land on two lines instead of four. */
.hero h1 { color: #fff; margin-bottom: 1.3rem; max-width: 27ch; }
.hero h1 em {
    font-style: normal;
    background: linear-gradient(100deg, var(--sky), #9ad9fb);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero-sub { font-size: 1.16rem; color: rgba(255, 255, 255, .78); margin-bottom: 1.5rem; max-width: 34em; }

.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.6rem; }

/* Equal columns with hairline dividers — the old auto-width tracks let
   the labels wrap into each other and nothing lined up. */
.hero-trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding-top: 1.8rem;
    border-top: 1px solid rgba(255, 255, 255, .16);
}
.hero-trust > div { padding-right: 1.3rem; }
.hero-trust > div + div { padding-left: 1.5rem; border-left: 1px solid rgba(255, 255, 255, .13); }
.hero-trust div strong {
    display: block;
    font-family: 'Jost', sans-serif;
    font-size: clamp(1.3rem, 1.8vw, 1.6rem);
    color: #fff;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: .15rem;
    font-variant-numeric: tabular-nums;
}
.hero-trust div span { display: block; font-size: .84rem; line-height: 1.45; color: rgba(255, 255, 255, .6); }

/* hero visual: the loop dial */
.hero-visual { display: flex; align-items: center; justify-content: center; }

.loop-dial {
    position: relative;
    width: min(400px, 100%);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}
/* soft halo behind the wordmark */
.loop-dial::before {
    content: '';
    position: absolute;
    inset: 16%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79, 195, 247, .20), transparent 66%);
    pointer-events: none;
}
/* outer dashed ring, counter-rotating slowly against the sweep */
.loop-dial::after {
    content: '';
    position: absolute;
    inset: -3%;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, .15);
    animation: loop-spin 46s linear infinite reverse;
    pointer-events: none;
}
.loop-dial > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.loop-ring-track { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 8; }
.loop-ring-live {
    fill: none;
    stroke: var(--sky);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 150 830;
    filter: drop-shadow(0 0 10px rgba(79, 195, 247, .75));
    animation: loop-spin 5.5s linear infinite;
    transform-origin: 50% 50%;
}
@keyframes loop-spin { to { transform: rotate(360deg); } }

.loop-node {
    position: absolute;
    width: 130px;
    text-align: center;
    font-family: 'Jost', sans-serif;
    font-size: .84rem;
    color: rgba(255, 255, 255, .92);
    line-height: 1.35;
}
.loop-node b {
    width: 44px; height: 44px;
    margin: 0 auto .5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    border: 1.5px solid rgba(255, 255, 255, .3);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: grid; place-items: center;
    font-size: .82rem; font-weight: 600;
    color: var(--sky);
    /* lights up as the sweep head passes it */
    animation: node-pulse 5.5s ease-in-out infinite;
}
@keyframes node-pulse {
    0%, 12%, 100% { box-shadow: 0 0 0 0 rgba(79, 195, 247, 0); border-color: rgba(255, 255, 255, .3); }
    4%  { box-shadow: 0 0 0 7px rgba(79, 195, 247, .16); border-color: rgba(79, 195, 247, .85); }
}
.loop-node.n1 { top: -7%; left: 50%; transform: translateX(-50%); }
.loop-node.n2 { top: 50%; right: -16%; transform: translateY(-50%); }
.loop-node.n3 { bottom: -7%; left: 50%; transform: translateX(-50%); }
.loop-node.n4 { top: 50%; left: -16%; transform: translateY(-50%); }
/* sweep starts at 3 o'clock (n2) and runs clockwise */
.loop-node.n2 b { animation-delay: 0s; }
.loop-node.n3 b { animation-delay: 1.375s; }
.loop-node.n4 b { animation-delay: 2.75s; }
.loop-node.n1 b { animation-delay: 4.125s; }

.loop-core {
    width: 46%;
    display: grid;
    place-items: center;
    text-align: center;
}
.loop-core img { width: 100%; opacity: .97; }

/* hero entrance — only when JS is running, so a blocked script never leaves
   the hero invisible */
.js .hero-copy > *,
.js .hero-visual { animation: rise .85s var(--ease-out) both; }
.js .hero-copy > *:nth-child(1) { animation-delay: .06s; }
.js .hero-copy > *:nth-child(2) { animation-delay: .14s; }
.js .hero-copy > *:nth-child(3) { animation-delay: .22s; }
.js .hero-copy > *:nth-child(4) { animation-delay: .30s; }
.js .hero-copy > *:nth-child(5) { animation-delay: .38s; }
.js .hero-visual { animation-duration: 1.1s; animation-delay: .2s; }
@keyframes rise {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}

/* --- page header (inner pages) ---------------------------------------- */
.page-hero {
    padding: calc(var(--nav-h) + 4rem) 0 3rem;
    background:
        radial-gradient(620px 420px at 88% -20%, rgba(79, 195, 247, .24), transparent 64%),
        radial-gradient(520px 380px at 2% 120%, rgba(2, 104, 191, .30), transparent 66%),
        linear-gradient(150deg, #02203F, #063A75);
    color: rgba(255, 255, 255, .8);
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at 70% 0%, #000 10%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse at 70% 0%, #000 10%, transparent 72%);
    pointer-events: none;
}
.page-hero .container { position: relative; z-index: 2; max-width: var(--wrap); }
.page-hero h1 { color: #fff; margin-bottom: 1rem; max-width: 26ch; }
.page-hero p { font-size: 1.11rem; color: rgba(255, 255, 255, .76); max-width: 44em; }
.js .page-hero .container > * { animation: rise .8s var(--ease-out) both; }
.js .page-hero .container > *:nth-child(1) { animation-delay: .04s; }
.js .page-hero .container > *:nth-child(2) { animation-delay: .12s; }
.js .page-hero .container > *:nth-child(3) { animation-delay: .2s; }
.js .page-hero .container > *:nth-child(4) { animation-delay: .28s; }

.breadcrumb { font-size: .84rem; color: rgba(255, 255, 255, .5); margin-bottom: 1rem; }
.breadcrumb a { color: rgba(255, 255, 255, .72); }
.breadcrumb a:hover { color: #fff; }

/* --- generic grids ---------------------------------------------------- */
.grid { display: grid; gap: 1.6rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
.split-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); }

/* --- cards ------------------------------------------------------------
   The radial highlight tracks the cursor (--mx/--my set in script.js) and
   fades in via the animatable --spot property. */
.card, .step, .route, .price-card {
    background-color: #fff;
    background-image: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%),
                      rgba(2, 104, 191, calc(.085 * var(--spot))), transparent 72%);
    background-repeat: no-repeat;
    transition: transform .3s var(--ease-out), box-shadow .3s ease,
                border-color .3s ease, --spot .35s ease;
}
.card:hover, .step:hover, .route:hover, .price-card:hover { --spot: 1; }

.card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.9rem 1.7rem;
    position: relative;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #CFE0F2; }
.card h3, .card h4 { margin-bottom: .6rem; }
.card p { color: var(--muted); font-size: .97rem; }

.card-icon {
    width: 46px; height: 46px;
    border-radius: 13px;
    display: grid; place-items: center;
    margin-bottom: 1.1rem;
    background: var(--pale);
    color: var(--blue);
    box-shadow: inset 0 0 0 1px rgba(2, 104, 191, .08);
    transition: transform .3s var(--ease-out);
}
.card-icon svg { width: 23px; height: 23px; }
.card:hover .card-icon, .route:hover .card-icon { transform: scale(1.08) rotate(-3deg); }
.card-icon.i-indigo { background: rgba(37, 49, 107, .1); color: var(--indigo); }
.card-icon.i-teal { background: rgba(14, 143, 149, .11); color: var(--teal); }
.card-icon.i-green { background: rgba(103, 137, 60, .12); color: var(--green); }
.card-icon.i-purple { background: rgba(96, 46, 145, .1); color: var(--purple); }
.card-icon.i-amber { background: rgba(224, 138, 52, .13); color: var(--amber); }

/* --- the 4-step loop --------------------------------------------------
   A continuous rail behind the cards reads as one process; the old free-floating
   arrows between boxes did not. */
.steps-rail { position: relative; }
.steps-rail::before {
    content: '';
    position: absolute;
    top: 3.35rem; left: 6%; right: 6%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--blue-300) 12%, var(--sky) 88%, transparent);
    opacity: .45;
}
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; position: relative; }
.step {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.9rem 1.5rem 1.7rem;
}
.step:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: #CFE0F2; }
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 11px;
    background: linear-gradient(180deg, var(--blue), var(--blue-700));
    color: #fff;
    font-family: 'Jost', sans-serif;
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: 0;
    margin-bottom: 1rem;
    box-shadow: 0 6px 14px -6px rgba(2, 104, 191, .7);
    /* The markup reads "STEP 01" — keep it for screen readers, but collapse it
       visually and render just the digit through the pseudo-element. */
    font-size: 0;
    position: relative;
}
.step-num::after {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: .95rem;
}
.step:nth-child(1) .step-num::after { content: '1'; }
.step:nth-child(2) .step-num::after { content: '2'; }
.step:nth-child(3) .step-num::after { content: '3'; }
.step:nth-child(4) .step-num::after { content: '4'; }
.step h3 { font-size: 1.18rem; margin-bottom: .5rem; }
.step p { color: var(--muted); font-size: .94rem; }
.step::after { display: none; }

/* --- problem cards (dark) ---------------------------------------------
   Lifted off the navy with a lighter fill and a hairline so they read as cards. */
.problem-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .04));
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: var(--radius);
    padding: 1.8rem 1.6rem;
    position: relative;
    transition: transform .3s var(--ease-out), border-color .3s ease, box-shadow .3s ease;
}
.problem-card:hover {
    transform: translateY(-5px);
    border-color: rgba(79, 195, 247, .45);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.problem-card h3 { font-size: 1.16rem; margin-bottom: .5rem; }
.problem-card p { color: rgba(255, 255, 255, .68); font-size: .95rem; }
.problem-card .card-icon {
    background: rgba(79, 195, 247, .14);
    color: var(--sky);
    box-shadow: inset 0 0 0 1px rgba(79, 195, 247, .22);
}
.problem-card:hover .card-icon { transform: scale(1.08) rotate(-3deg); }

/* --- promise band ----------------------------------------------------- */
.promise {
    position: relative;
    background:
        radial-gradient(600px 300px at 88% 0%, rgba(79, 195, 247, .22), transparent 62%),
        linear-gradient(120deg, var(--navy), var(--navy-700));
    border-radius: var(--radius-lg);
    padding: clamp(2.2rem, 4vw, 3.2rem);
    color: rgba(255, 255, 255, .82);
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(2rem, 4vw, 3rem);
    align-items: center;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.promise::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at 85% 10%, #000, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 85% 10%, #000, transparent 70%);
    pointer-events: none;
}
.promise > * { position: relative; z-index: 1; }
.promise h2 { color: #fff; margin-bottom: .8rem; }
.promise-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.promise-stats > div {
    padding: 1rem 1.1rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
}
.promise-stats strong {
    display: block;
    font-family: 'Jost', sans-serif;
    font-size: 1.95rem;
    color: var(--sky);
    line-height: 1.1;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.promise-stats span { font-size: .88rem; color: rgba(255, 255, 255, .66); }

/* --- checklist -------------------------------------------------------- */
.checklist { list-style: none; }
.checklist li { position: relative; padding-left: 2.1rem; margin-bottom: .85rem; color: var(--muted); }
.checklist li::before {
    content: '';
    position: absolute;
    left: 0; top: .28em;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--pale);
    box-shadow: inset 0 0 0 1px rgba(2, 104, 191, .14);
}
.checklist li::after {
    content: '';
    position: absolute;
    left: 6px; top: .72em;
    width: 9px; height: 5px;
    border-left: 2px solid var(--blue);
    border-bottom: 2px solid var(--blue);
    transform: rotate(-45deg);
}
.checklist.on-dark li { color: rgba(255, 255, 255, .76); }
.checklist.on-dark li::before { background: rgba(79, 195, 247, .14); box-shadow: inset 0 0 0 1px rgba(79, 195, 247, .28); }
.checklist.on-dark li::after { border-color: var(--sky); }

/* Small-print caveat under a list or a stat block. */
.footnote {
    margin-top: 1.1rem;
    font-size: .82rem;
    line-height: 1.6;
    color: var(--muted);
}
.promise-note {
    grid-column: 1 / -1;
    margin: 0;
    font-size: .78rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .6);
}

/* --- pricing ---------------------------------------------------------- */
.price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; align-items: stretch; }
.price-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1.9rem, 3vw, 2.6rem) clamp(1.5rem, 2.4vw, 2.2rem);
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: var(--shadow-sm);
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.price-card.featured {
    border-color: rgba(2, 104, 191, .45);
    box-shadow: 0 0 0 4px rgba(2, 104, 191, .07), var(--shadow);
}
.price-badge {
    position: absolute;
    top: -14px; left: clamp(1.5rem, 2.4vw, 2.2rem);
    background: linear-gradient(180deg, #1279D3, var(--blue-700));
    color: #fff;
    font-family: 'Jost', sans-serif;
    font-size: .73rem;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    padding: .38rem 1rem;
    border-radius: 999px;
    box-shadow: 0 8px 18px -8px rgba(2, 104, 191, .8);
}
.price-card h3 { font-size: 1.5rem; margin-bottom: .5rem; }
.price-card > p { color: var(--muted); font-size: .97rem; }
.price-tag {
    font-family: 'Jost', sans-serif;
    font-size: clamp(2.6rem, 4vw, 3.1rem);
    font-weight: 600;
    color: var(--navy);
    line-height: 1;
    margin: 1.5rem 0 .3rem;
    letter-spacing: -.03em;
}
.price-tag small { font-size: 1rem; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.price-meta { font-size: .89rem; color: var(--muted); margin-bottom: 1.4rem; }
.price-card .checklist { margin: 1.4rem 0 2rem; flex-grow: 1; }
.price-card .checklist li { font-size: .95rem; }

.turnaround {
    display: inline-flex;
    /* The price card is a flex column, so without this the pill stretches to the
       full card width and stops reading as a badge. */
    align-self: flex-start;
    align-items: center;
    gap: .45rem;
    background: var(--pale);
    color: var(--navy);
    font-family: 'Jost', sans-serif;
    font-size: .83rem;
    font-weight: 500;
    padding: .38rem .95rem;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(2, 104, 191, .1);
}

/* --- route chooser (two big options) ---------------------------------- */
.route-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.route {
    /* Column layout so the call-to-action lines up across both cards even when
       one has a longer paragraph. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1.8rem, 3vw, 2.4rem) clamp(1.5rem, 2.4vw, 2.1rem);
    color: inherit;
    position: relative;
    box-shadow: var(--shadow-sm);
}
.route::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: linear-gradient(90deg, var(--blue), var(--sky));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--ease-out);
}
.route:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: #CFE0F2; color: inherit; }
.route:hover::before { transform: scaleX(1); }
.route h3 { margin-bottom: .7rem; }
.route p { color: var(--muted); font-size: .98rem; }

/* Pricing sits on the card itself, so nobody assumes the €250 covers a review. */
.route p.route-price {
    margin-top: 1.1rem;
    padding: .8rem 1rem;
    border-radius: 10px;
    background: var(--pale);
    font-size: .88rem;
    line-height: 1.55;
    color: var(--navy);
}
.route p.route-price .route-note {
    display: block;
    margin-top: .45rem;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--muted);
}
.route-go {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: auto;
    padding-top: 1.4rem;
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    color: var(--blue);
}
.route-go::after {
    content: '';
    width: 1em; height: 1em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
    transition: transform .3s var(--ease-out);
}
.route:hover .route-go::after { transform: translateX(5px); }

/* --- client reviews --------------------------------------------------- */
/* One star drawn once and repeated with a mask, so a rating is a fill width
   rather than fifteen inline SVGs per card. Five cells are always painted: the
   grey track is what makes a four-star review read as four out of five instead
   of just "four stars". The glyph is centred in its cell, so a fractional fill
   (the 4.8 average) clips the last star where you would expect it to. */
.stars {
    --star-w: 1.18em;
    position: relative;
    display: block;
    width: calc(5 * var(--star-w));
    height: var(--star-w);
    background: rgba(3, 35, 74, .17);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1 12.29 6.85 18.56 7.22 13.71 11.21 15.29 17.28 10 13.9 4.71 17.28 6.29 11.21 1.44 7.22 7.71 6.85Z'/%3E%3C/svg%3E") left center / var(--star-w) var(--star-w) repeat-x;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1 12.29 6.85 18.56 7.22 13.71 11.21 15.29 17.28 10 13.9 4.71 17.28 6.29 11.21 1.44 7.22 7.71 6.85Z'/%3E%3C/svg%3E") left center / var(--star-w) var(--star-w) repeat-x;
}
.stars > i { position: absolute; inset: 0 auto 0 0; background: #F0A828; }
.on-dark .stars, .bg-navy .stars { background: rgba(255, 255, 255, .22); }

.reviews-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.6rem 2.5rem;
    margin-bottom: 2.6rem;
}
.reviews-head h2 { margin-bottom: .5rem; max-width: 24ch; }
.reviews-head > div:first-child p { color: var(--muted); max-width: 46ch; }

.rating-badge {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.1rem 1.5rem;
    box-shadow: var(--shadow-sm);
    flex: 0 0 auto;
}
.rating-score {
    font-family: 'Jost', sans-serif;
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}
.rating-score small { font-size: .95rem; font-weight: 500; color: var(--muted); }
.rating-badge .stars { font-size: 1.05rem; margin-bottom: .4rem; }
.rating-meta { font-size: .87rem; color: var(--muted); line-height: 1.5; }
.rating-meta strong { color: var(--ink); font-weight: 600; }

/* The carousel is a scroll-snap rail: the arrows just page the scroll port, so
   it keeps working with the keyboard, a trackpad and a thumb, and degrades to
   a plain swipeable row with JS off. */
.reviews-carousel { position: relative; }
.reviews-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2 * 1.6rem) / 3);
    gap: 1.6rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 4px 1.4rem;
    margin: -4px -4px 0;
    scrollbar-width: none;
}
.reviews-track::-webkit-scrollbar { display: none; }

.review-card {
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.6rem 1.5rem 1.4rem;
    box-shadow: var(--shadow-sm);
}
.review-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin-bottom: 1rem;
}
.review-top .stars { flex: 0 0 auto; font-size: 1rem; }
.review-card blockquote {
    font-size: .97rem;
    line-height: 1.65;
    color: var(--ink);
    margin-bottom: 1.3rem;
}
.review-card blockquote::before { content: '\201C'; }
.review-card blockquote::after { content: '\201D'; }
.review-tag {
    flex: 0 1 auto;
    font-family: 'Jost', sans-serif;
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--blue);
    background: var(--pale);
    border-radius: 999px;
    padding: .3rem .7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.review-by {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-top: auto;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line-soft);
}
.review-avatar {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: 'Jost', sans-serif;
    font-size: .88rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(140deg, var(--blue), var(--navy-800));
}
.review-who { min-width: 0; }
.review-who strong { display: block; font-family: 'Jost', sans-serif; font-size: .95rem; color: var(--navy); }
.review-who span { display: block; font-size: .8rem; color: var(--muted); line-height: 1.4; }
.review-who time { color: inherit; }

.reviews-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: .4rem;
}
.rev-arrow {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--blue);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.rev-arrow svg { width: 20px; height: 20px; }
.rev-arrow:hover:not(:disabled) { background: var(--blue); color: #fff; border-color: var(--blue); }
.rev-arrow:disabled { opacity: .35; cursor: default; }

.reviews-dots { display: flex; gap: .45rem; margin-left: auto; }
.reviews-dots button {
    position: relative;
    width: 8px; height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(3, 35, 74, .2);
    cursor: pointer;
    transition: background .2s ease, width .25s var(--ease-out);
}
.reviews-dots button[aria-current="true"] { width: 22px; border-radius: 999px; background: var(--blue); }
/* An 8px dot is a 8px target. Stretch the hit area out to a thumb's worth
   without touching what is drawn. */
.reviews-dots button::after {
    content: '';
    position: absolute;
    inset: -16px -7px;
}

/* No JS: the arrows and dots do nothing, so don't advertise them. */
html:not(.js) .reviews-nav { display: none; }

/* --- forms ------------------------------------------------------------ */
.form-shell {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1.6rem, 3vw, 2.8rem);
    box-shadow: var(--shadow);
}
.form-section { margin-bottom: 2.4rem; }
.form-section:last-child { margin-bottom: 0; }
.form-section-title {
    font-family: 'Jost', sans-serif;
    font-size: 1.13rem;
    font-weight: 600;
    color: var(--navy);
    padding-bottom: .7rem;
    margin-bottom: 1.4rem;
    border-bottom: 1px solid var(--line-soft);
    display: flex;
    align-items: center;
    gap: .7rem;
}
.form-section-title span {
    width: 27px; height: 27px;
    flex: none;
    border-radius: 9px;
    background: linear-gradient(180deg, var(--blue), var(--blue-700));
    color: #fff;
    display: grid; place-items: center;
    font-size: .78rem;
    box-shadow: 0 5px 12px -6px rgba(2, 104, 191, .8);
}

.field { margin-bottom: 1.25rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.field label {
    display: block;
    font-family: 'Jost', sans-serif;
    font-size: .92rem;
    font-weight: 500;
    color: var(--navy);
    margin-bottom: .42rem;
}
.field .hint { font-size: .83rem; color: var(--muted); margin: -.15rem 0 .5rem; font-weight: 400; }
.req { color: var(--blue); }

.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field input[type=date],
.field select,
.field textarea {
    width: 100%;
    font-family: inherit;
    font-size: .98rem;
    color: var(--ink);
    background: var(--pale-50);
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: .82rem 1rem;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
/* A textarea the registry sized explicitly keeps that size: a two-line address
   field has no business being as tall as the objective box. */
.field textarea[rows] { min-height: 0; }
.field select {
    appearance: none; -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A7085' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.6rem;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: #C9DCEF; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(2, 104, 191, .12);
}
.field input::placeholder, .field textarea::placeholder { color: #9BAEC0; }

/* checkbox / radio choices */
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
/* `.field .choice` outranks `.field label { display: block }`, as `.check` does below. */
.choice,
.field .choice {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .85rem 1rem;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--pale-50);
    cursor: pointer;
    font-size: .95rem;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.choice:hover { border-color: var(--blue-300); background: #fff; }
.choice input { margin-top: .28rem; accent-color: var(--blue); flex: none; }
.choice:has(input:checked) {
    border-color: var(--blue);
    background: var(--pale);
    box-shadow: 0 0 0 3px rgba(2, 104, 191, .09);
}
.choice span small { display: block; color: var(--muted); font-size: .84rem; line-height: 1.45; }

/* document picker ------------------------------------------------------ */
/* The input is clipped rather than display:none so it keeps its place in the
   tab order — the drop zone is only a label for it, and Enter on the focused
   input still opens the file dialog. */
.upload-input {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.upload-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    text-align: center;
    padding: 1.7rem 1.2rem;
    border: 1.5px dashed #C4D8EC;
    border-radius: 12px;
    background: var(--pale-50);
    color: var(--muted);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.upload-drop:hover, .upload-drop.dragover { border-color: var(--blue); background: var(--pale); }
.upload-drop.dragover { box-shadow: 0 0 0 4px rgba(2, 104, 191, .12); }
.upload-input:focus-visible + .upload-drop {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
    border-color: var(--blue);
}
.upload-icon { color: var(--blue); }
.upload-icon svg { width: 26px; height: 26px; display: block; }
.upload-cta { font-size: .96rem; color: var(--ink); }
.upload-cta strong { color: var(--blue); font-weight: 600; }
.upload-meta { font-size: .82rem; }

.upload-list { list-style: none; margin: .8rem 0 0; display: grid; gap: .5rem; }
.upload-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .8rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font-size: .9rem;
}
.upload-item .doc { flex: none; color: var(--blue); }
.upload-item .doc svg { width: 20px; height: 20px; display: block; }
.upload-item b { font-weight: 500; color: var(--ink); word-break: break-word; }
.upload-item .bytes { flex: none; margin-left: auto; color: var(--muted); font-size: .82rem; }
.upload-item.too-big { border-color: #E7C9A6; background: #FDF7F0; }
.upload-item.too-big .bytes { color: var(--amber); font-weight: 600; }
/* Refused outright rather than merely oversized: the file will not be sent. */
.upload-item.wrong-type { border-color: #E4B4AE; background: #FDF3F2; }
.upload-item.wrong-type b { text-decoration: line-through; color: var(--muted); }
.upload-item.wrong-type .bytes { color: #B42318; font-weight: 600; }
.upload-remove {
    flex: none;
    width: 26px; height: 26px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    transition: background .2s ease, color .2s ease;
}
.upload-remove:hover { background: var(--pale); color: var(--navy); }
.upload-note { margin: .7rem 0 0 !important; }

/* No JS: the drop zone is inert, so show the plain file input instead. */
html:not(.js) .upload-drop { display: none; }
html:not(.js) .upload-input {
    position: static;
    width: auto; height: auto;
    margin: 0;
    clip: auto;
    clip-path: none;
    white-space: normal;
}

.consent { display: flex; align-items: flex-start; gap: .7rem; font-size: .92rem; color: var(--muted); }
.consent input { margin-top: .3rem; accent-color: var(--blue); flex: none; }

/* Checkbox groups on the contract form — the annex picker, for one. Rendered by
   contract-request.js from a `multiselect` field, so there is no markup for
   these anywhere in the HTML. */
.check-group { display: grid; gap: .1rem; }
/* `.field .check` so it outranks `.field label { display: block }`, which
   otherwise sat the box flush against its text. */
.check,
.field .check {
    display: flex; align-items: flex-start; gap: .7rem;
    padding: .5rem .7rem; margin-left: -.7rem;
    border-radius: 8px; font-size: .95rem; cursor: pointer;
    transition: background .15s ease;
}
.check:hover { background: rgba(15, 42, 71, .04); }
.check input { margin-top: .28rem; accent-color: var(--blue); flex: none; }

/* contract-request.js hides questions that do not apply with `hidden`. A
   `.field-row` sets its own display, which would otherwise win over it. */
.form-shell [hidden] { display: none !important; }

.form-status { margin-top: 1rem; font-size: .95rem; min-height: 1.4em; font-weight: 500; }
.form-status.error { color: #b42318; }
.form-status.success { color: #067647; }
/* Sending: dim the form so a second click reads as obviously pointless. */
.form-shell.sending { opacity: .72; pointer-events: none; }
.form-shell.sent .form-section, .form-shell.sent button[type="submit"] { opacity: .55; }

.form-aside {
    background:
        radial-gradient(400px 260px at 100% 0%, rgba(79, 195, 247, .18), transparent 62%),
        linear-gradient(160deg, var(--navy), var(--navy-800));
    color: rgba(255, 255, 255, .78);
    border-radius: var(--radius-lg);
    padding: clamp(1.6rem, 2.6vw, 2.2rem);
    position: sticky;
    top: calc(var(--nav-h) + 1.2rem);
    box-shadow: var(--shadow);
}
.form-aside h3 { color: #fff; font-size: 1.22rem; margin-bottom: 1rem; }
.form-aside h4 { color: #fff; margin: 1.6rem 0 .7rem; font-size: .95rem; }
.form-aside p { font-size: .94rem; }
.form-aside .checklist li { font-size: .92rem; }
.form-aside .footnote { color: rgba(255, 255, 255, .58); font-size: .78rem; }

.form-layout { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(1.8rem, 3vw, 2.5rem); align-items: start; }

/* --- Launch gate (js/launch-gate.js) ----------------------------------
   Until Contract Loop opens, the request pages sit behind a full-screen
   "coming soon" layer, after the reference Michael sent: the page stays
   faintly visible through a fog, a large thin all-caps title in the middle,
   one sentence, one field and one button. The nav stays above it and takes
   its solid white look, which the dark hero would otherwise need. */
html.launch-gated { overflow: hidden; }
.form-shell.is-gated { user-select: none; }

.launch-gate {
    position: fixed;
    inset: 0;
    z-index: 950;                       /* under the navbar (1000) */
    display: flex;
    overflow-y: auto;
    padding: calc(var(--nav-h) + 2rem) 16px 2.5rem;
    background:
        radial-gradient(ellipse 70% 55% at 50% 48%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
        radial-gradient(ellipse 60% 45% at 12% 100%, rgba(200, 216, 234, .55), transparent 70%),
        radial-gradient(ellipse 55% 40% at 92% 96%, rgba(214, 226, 240, .6), transparent 70%),
        linear-gradient(180deg, rgba(233, 240, 248, .84) 0%, rgba(244, 247, 251, .88) 55%, rgba(226, 234, 244, .9) 100%);
    -webkit-backdrop-filter: blur(24px) saturate(65%);
    backdrop-filter: blur(24px) saturate(65%);
    animation: launch-fog-in .9s var(--ease-out) both;
}
/* Firefox and older Safari get the fog without the blur behind it. */
@supports not ((backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px))) {
    .launch-gate { background-color: #EEF3F9; }
}
@keyframes launch-fog-in { from { opacity: 0; } to { opacity: 1; } }

.launch-gate-inner {
    margin: auto;                        /* centred, but scrolls when short */
    width: min(960px, 100%);
    text-align: center;
    animation: rise 1s .15s var(--ease-out) both;
}
.launch-gate-title {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: clamp(2.3rem, 7.4vw, 4.6rem);
    line-height: 1.05;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--navy);
    margin: 0 0 1.4rem;
    padding-left: .14em;                 /* optical centre: balance the trailing tracking */
}
.launch-gate-body {
    font-size: clamp(.98rem, 1.6vw, 1.08rem);
    line-height: 1.7;
    color: var(--muted);
    max-width: 34em;
    margin: 0 auto 2.2rem;
}
.launch-gate-form { max-width: 470px; margin: 0 auto; text-align: left; }
.launch-gate-form label {
    display: block;
    font-family: 'Jost', sans-serif;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: .55rem;
    text-align: center;
}
.launch-gate-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.launch-gate-row input[type=email] {
    flex: 1 1 220px;
    min-width: 0;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: rgba(255, 255, 255, .88);
    border: 1px solid #CFDCEA;
    border-radius: 4px;
    padding: .9rem 1rem;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.launch-gate-row input[type=email]::placeholder { color: #9BAEC0; }
.launch-gate-row input[type=email]:hover { border-color: #B7CBE0; }
.launch-gate-row input[type=email]:focus {
    outline: none;
    background: #fff;
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(2, 104, 191, .12);
}
/* The dark block button of the reference, in the brand navy. */
.launch-gate-btn {
    flex: 1 1 auto;
    justify-content: center;
    white-space: nowrap;
    font-family: 'Jost', sans-serif;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff;
    background: var(--navy);
    border: 1px solid var(--navy);
    border-radius: 4px;
    padding: .9rem 1.6rem;
    box-shadow: 0 10px 24px -12px rgba(3, 35, 74, .55);
}
.launch-gate-btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.launch-gate .form-status { margin-top: .8rem; font-size: .9rem; text-align: center; }

/* The white nav bar, as when scrolled, so it reads over the fog. */
html.launch-gated .navbar::before { opacity: 1; }
html.launch-gated .navbar::after { opacity: 0; }
html.launch-gated .navbar .nav-logo img { filter: none; }
html.launch-gated .navbar .nav-menu > li > a { color: var(--muted); }
html.launch-gated .navbar .nav-menu > li > a:hover { color: var(--navy); background: var(--pale); }
html.launch-gated .navbar .lang-switch { background: var(--pale-50); border-color: var(--line); }
html.launch-gated .navbar .lang-switch a { color: var(--muted); }
html.launch-gated .navbar .lang-switch a.active { background: var(--navy); color: #fff; }
html.launch-gated .navbar .lang-switch a:not(.active):hover { background: var(--pale); color: var(--navy); }
html.launch-gated .navbar .hamburger { background: var(--pale-50); border-color: var(--line); }
html.launch-gated .navbar .hamburger span { background: var(--navy); }
html.launch-gated .navbar :focus-visible { outline-color: var(--blue); }
html.launch-gated .to-top { display: none; }

.notice {
    background: var(--pale);
    border: 1px solid rgba(2, 104, 191, .16);
    border-left: 3px solid var(--blue);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    font-size: .92rem;
    color: var(--navy);
    margin-bottom: 1.5rem;
}
.notice strong { display: block; margin-bottom: .15rem; }
.notice p { margin-bottom: 0; }
.notice-list { margin: .5rem 0 0; padding-left: 1.1rem; }
.notice-list li { margin-bottom: .3rem; }
.notice-list li:last-child { margin-bottom: 0; }

/* --- Payment page (payment.html / nl/betaling.html) -------------------- */
.pay-layout { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(1.8rem, 3vw, 2.5rem); align-items: start; }
.pay-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: clamp(1.4rem, 3vw, 2.2rem);
}
.pay-card > h2 { font-size: 1.4rem; margin-bottom: .4rem; }
.pay-card > .lead { font-size: 1rem; margin-bottom: 1.5rem; }
.pay-example {
    background: #FFF6EC;
    border: 1px solid rgba(224, 138, 52, .35);
    border-left: 3px solid var(--amber);
    border-radius: 12px;
    padding: .8rem 1.1rem;
    font-size: .9rem;
    color: #7A4310;
    margin-bottom: 1.5rem;
}
.pay-grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.4rem, 3vw, 2.2rem); align-items: start; }
.pay-qr { text-align: center; }
.pay-qr-box {
    width: 208px; height: 208px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.pay-qr-box svg { display: block; width: 100%; height: 100%; }
.pay-qr figcaption { font-size: .82rem; color: var(--muted); margin-top: .6rem; max-width: 208px; }
.pay-details { display: grid; gap: 0; margin: 0; }
.pay-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--line-soft);
}
.pay-row:first-child { padding-top: 0; }
.pay-row dt { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.pay-row dd { margin: .15rem 0 0; font-size: 1.05rem; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.pay-row.total dd { font-size: 1.35rem; color: var(--navy); font-weight: 600; }
.pay-row small { display: block; font-size: .82rem; color: var(--muted); font-weight: 400; }
.pay-copy {
    flex: none;
    font: inherit; font-size: .82rem; font-weight: 500;
    color: var(--blue);
    background: var(--pale);
    border: 1px solid rgba(2, 104, 191, .16);
    border-radius: 8px;
    padding: .38rem .75rem;
    cursor: pointer;
    transition: background .15s ease;
}
.pay-copy:hover { background: #DCEAF8; }
.pay-copy.copied { color: #067647; background: #ECFDF3; border-color: rgba(6, 118, 71, .25); }
.pay-note { font-size: .9rem; color: var(--muted); margin-top: 1.4rem; }
.pay-missing[hidden], .pay-ready[hidden] { display: none; }

@media (max-width: 900px) {
    .pay-layout { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .pay-grid { grid-template-columns: 1fr; }
    .pay-qr-box { margin: 0 auto; }
    .pay-qr figcaption { margin-left: auto; margin-right: auto; }
}

/* --- FAQ --------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); transition: background .25s ease; }
.faq details[open] { background: linear-gradient(180deg, var(--pale-50), transparent); }
.faq summary {
    font-family: 'Jost', sans-serif;
    font-size: 1.06rem;
    font-weight: 500;
    color: var(--navy);
    padding: 1.3rem 3rem 1.3rem 0;
    cursor: pointer;
    list-style: none;
    position: relative;
    transition: color .2s ease;
}
.faq summary:hover { color: var(--blue); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '';
    position: absolute;
    right: .35rem; top: 50%;
    width: 26px; height: 26px;
    transform: translateY(-50%);
    border-radius: 8px;
    background: var(--pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230268BF' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/13px no-repeat;
    transition: transform .3s var(--ease-out), background-color .2s ease;
}
.faq details[open] summary::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230268BF' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
    transform: translateY(-50%) rotate(180deg);
}
.faq details > div { padding: 0 3rem 1.5rem 0; color: var(--muted); font-size: .98rem; }
.faq details[open] > div { animation: fadeIn .4s var(--ease-out) both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* --- CTA band --------------------------------------------------------- */
.cta-band {
    background:
        radial-gradient(700px 420px at 50% 120%, rgba(79, 195, 247, .26), transparent 62%),
        linear-gradient(120deg, #02203F, #0A4C8F);
    color: rgba(255, 255, 255, .82);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: radial-gradient(ellipse at 50% 100%, #000, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 100%, #000, transparent 72%);
    pointer-events: none;
}
.cta-band .container { position: relative; z-index: 2; }
.cta-band .eyebrow { justify-content: center; }
.cta-band h2 { color: #fff; margin-bottom: 1rem; max-width: 24ch; margin-left: auto; margin-right: auto; }
.cta-band p { max-width: 40em; margin: 0 auto 2rem; font-size: 1.08rem; color: rgba(255, 255, 255, .78); }
.cta-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* --- footer ----------------------------------------------------------- */
.footer {
    position: relative;
    background:
        radial-gradient(700px 340px at 12% 0%, rgba(2, 104, 191, .18), transparent 62%),
        var(--navy-900);
    color: rgba(255, 255, 255, .62);
    padding: 4.4rem 0 0;
    font-size: .93rem;
}
/* gradient hairline instead of a hard edge against the section above */
.footer::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(79, 195, 247, .5), transparent);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 2.6rem 2rem;
    padding-bottom: 3rem;
}
.footer-brand { max-width: 42ch; }
.footer-brand img { height: 30px; margin-bottom: 1.15rem; }
.footer-brand p { font-size: .92rem; line-height: 1.65; }
.footer h4 {
    color: #fff;
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 1.15rem;
    font-weight: 600;
}
.footer ul { list-style: none; }
.footer li { margin-bottom: .58rem; }
.footer a {
    color: rgba(255, 255, 255, .62);
    /* underline grows from the left on hover */
    background-image: linear-gradient(var(--sky), var(--sky));
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: color .2s ease, background-size .3s var(--ease-out);
}
.footer a:hover { color: var(--sky); background-size: 100% 1px; }
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .09);
    padding: 1.4rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .6rem 1.4rem;
    flex-wrap: wrap;
    font-size: .86rem;
    color: rgba(255, 255, 255, .42);
}
.footer-bottom a { color: rgba(255, 255, 255, .55); }

.eu-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(79, 195, 247, .1);
    border: 1px solid rgba(79, 195, 247, .24);
    color: var(--sky);
    font-size: .77rem;
    padding: .4rem .9rem;
    border-radius: 999px;
    margin-top: 1.3rem;
    /* Sits inside the narrow brand column — keep it a single-line pill rather
       than letting it wrap into a two-line box. */
    white-space: nowrap;
}
.eu-badge::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--sky);
    box-shadow: 0 0 0 3px rgba(79, 195, 247, .2);
    flex: none;
}

/* back to top — injected by script.js */
.to-top {
    position: fixed;
    right: 1.4rem; bottom: 1.4rem;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--navy);
    box-shadow: var(--shadow);
    cursor: pointer;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .3s ease, transform .3s var(--ease-out), color .2s ease, border-color .2s ease;
    z-index: 900;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { color: var(--blue); border-color: var(--blue-300); }
.to-top svg { width: 18px; height: 18px; }

/* --- scroll reveal ----------------------------------------------------
   Only hidden when JavaScript is actually running. Without the `js` class
   (script blocked, old browser, crawler) every section renders normally
   instead of staying invisible at opacity 0. */
.js .reveal {
    opacity: 0;
    transform: translateY(26px) scale(.985);
    transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.js .reveal.visible { opacity: 1; transform: none; }

/* --- video / flow player ---------------------------------------------- */
/* The footage is 848x480, so the player is capped near its native width —
   stretched across the full column it goes soft, and it crowds the copy it is
   meant to support. */
.video-frame {
    position: relative;
    max-width: 480px;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background:
        radial-gradient(500px 300px at 50% 0%, rgba(79, 195, 247, .18), transparent 60%),
        linear-gradient(150deg, #052F61, #0A4C8F);
    box-shadow: 0 18px 40px -24px rgba(3, 35, 74, .55);
    aspect-ratio: 16 / 9;
    color: rgba(255, 255, 255, .8);
}
/* Faint grid over the poster frame. It hides once playback starts, so it never
   sits on top of the footage itself. */
.video-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 46px 46px;
    pointer-events: none;
    transition: opacity .35s ease;
}
.video-frame.playing::after { opacity: 0; }

.video-el {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #052F61;
}

/* The cover carries the pitch until the visitor presses play; the native
   controls take over from there. */
.video-cover {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    padding: 2rem;
    cursor: pointer;
    background: linear-gradient(160deg, rgba(5, 47, 97, .82), rgba(10, 76, 143, .68));
    transition: opacity .35s ease, visibility .35s ease;
}
.video-frame.playing .video-cover {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.video-play {
    position: relative;
    width: 64px; height: 64px;
    margin: 0 auto 1rem;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    border: 1.5px solid rgba(255, 255, 255, .35);
    display: grid; place-items: center;
    color: #fff;
    cursor: pointer;
    transition: transform .3s var(--ease-out), background .3s ease;
}
.video-play:focus-visible {
    outline: 2px solid var(--sky);
    outline-offset: 4px;
}
/* pulsing ring, so the still frame feels alive */
.video-play::before {
    content: '';
    position: absolute;
    inset: -1.5px;
    border-radius: 50%;
    border: 1.5px solid rgba(79, 195, 247, .6);
    animation: ping 2.8s var(--ease-out) infinite;
}
@keyframes ping {
    0% { transform: scale(1); opacity: .7; }
    70%, 100% { transform: scale(1.5); opacity: 0; }
}
.video-cover:hover .video-play { transform: scale(1.07); background: rgba(79, 195, 247, .3); }
.video-play svg { width: 22px; height: 22px; margin-left: 3px; }
.video-cover h4 { color: #fff; margin-bottom: .35rem; font-size: 1.12rem; }
.video-cover p { font-size: .86rem; color: rgba(255, 255, 255, .74); max-width: 26em; margin: 0 auto; }

/* Buffering: the ring stops pulsing and starts spinning, so a slow first byte
   looks like waiting rather than like nothing happened. */
.video-frame.loading .video-play::before {
    animation: spin 0.9s linear infinite;
    border-color: rgba(255, 255, 255, .25);
    border-top-color: var(--sky);
    inset: -4px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.video-frame.loading .video-play svg { opacity: .4; }

/* play() was refused — surface the native controls under the cover copy. */
.video-frame.needs-controls .video-cover { background: linear-gradient(160deg, rgba(5, 47, 97, .72), rgba(10, 76, 143, .5)); }
.video-frame.needs-controls .video-cover h4,
.video-frame.needs-controls .video-cover p { display: none; }

/* small fact strip under the video, so the column does not end in dead space */
.media-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .8rem;
    margin-top: 1.1rem;
    max-width: 480px;
    margin-inline: auto;
}
.media-facts div {
    background: var(--pale-50);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: .85rem .95rem;
}
.media-facts strong {
    display: block;
    font-family: 'Jost', sans-serif;
    font-size: 1.05rem;
    color: var(--navy);
    line-height: 1.2;
}
.media-facts span { font-size: .8rem; color: var(--muted); line-height: 1.4; display: block; }

/* --- deliverables ------------------------------------------------------ */
.deliverable {
    display: flex;
    gap: 1.1rem;
    padding: 1.35rem 0;
    border-bottom: 1px solid var(--line-soft);
}
.deliverable:last-child { border-bottom: 0; }
.deliverable .card-icon { margin-bottom: 0; flex: none; }
.deliverable h4 { margin-bottom: .25rem; }
.deliverable p { color: var(--muted); font-size: .95rem; margin: 0; }
.deliverable:hover .card-icon { transform: scale(1.08) rotate(-3deg); }
.bg-navy .deliverable { border-bottom-color: rgba(255, 255, 255, .12); }
.bg-navy .deliverable p { color: rgba(255, 255, 255, .68); }

/* --- ecosystem figure -------------------------------------------------- */
.ecosystem-figure { text-align: center; position: relative; }
.ecosystem-figure img {
    margin: 0 auto;
    max-width: min(520px, 100%);
    animation: float 7s ease-in-out infinite alternate;
}
@keyframes float { from { transform: translateY(-7px); } to { transform: translateY(7px); } }
.ecosystem-figure figcaption { font-size: .89rem; color: var(--muted); margin-top: 1rem; }

/* --- timeline (growth phases) ------------------------------------------ */
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
.timeline::before {
    content: '';
    position: absolute;
    top: 21px; left: 8%; right: 8%;
    height: 2px;
    background: linear-gradient(90deg, var(--blue), var(--sky));
    opacity: .35;
}
.tl-item { position: relative; padding: 0 1.2rem; text-align: center; }
.tl-dot {
    width: 44px; height: 44px;
    margin: 0 auto 1.4rem;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--blue);
    color: var(--blue);
    display: grid; place-items: center;
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    font-size: .9rem;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 0 6px rgba(2, 104, 191, .07);
}
.tl-item h4 { margin-bottom: .5rem; }
.tl-when {
    display: block;
    font-family: 'Jost', sans-serif;
    font-size: .78rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: .5rem;
}
.tl-item p { color: var(--muted); font-size: .94rem; }
.tl-metric {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    font-family: 'Jost', sans-serif;
    font-size: .91rem;
    color: var(--navy);
    font-weight: 500;
}

/* --- chips ------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .45rem 1.05rem;
    font-size: .91rem;
    color: var(--navy);
    font-family: 'Jost', sans-serif;
    box-shadow: var(--shadow-sm);
    transition: transform .25s var(--ease-out), border-color .25s ease, color .25s ease;
}
.chip:hover { transform: translateY(-2px); border-color: var(--blue-300); color: var(--blue); }
.chip-on-dark {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .88);
    box-shadow: none;
}
.chip-on-dark:hover { color: #fff; border-color: rgba(79, 195, 247, .6); }

/* --- comparison table --------------------------------------------------- */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
}
table.compare { width: 100%; border-collapse: collapse; min-width: 620px; font-size: .96rem; }
table.compare th, table.compare td { padding: 1rem 1.3rem; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.compare thead th {
    font-family: 'Jost', sans-serif;
    font-size: .94rem;
    color: var(--navy);
    background: var(--pale-50);
    font-weight: 600;
    border-bottom-color: var(--line);
}
table.compare tbody th { font-weight: 500; color: var(--muted); font-size: .91rem; width: 28%; }
table.compare tbody td { color: var(--ink); }
table.compare tbody tr { transition: background .2s ease; }
table.compare tbody tr:hover { background: var(--pale-50); }
table.compare tr:last-child th, table.compare tr:last-child td { border-bottom: 0; }

/* --- quote -------------------------------------------------------------- */
.quote {
    position: relative;
    padding-left: 1.8rem;
    font-family: 'Jost', sans-serif;
    font-size: 1.28rem;
    line-height: 1.5;
    color: var(--navy);
    font-weight: 400;
}
.quote::before {
    content: '';
    position: absolute;
    left: 0; top: .25em; bottom: .25em;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--blue), var(--sky));
}
.bg-navy .quote { color: #fff; }
.quote cite { display: block; font-family: 'Inter', sans-serif; font-size: .89rem; color: var(--muted); font-style: normal; margin-top: .9rem; }
.bg-navy .quote cite { color: rgba(255, 255, 255, .6); }

/* --- founders -----------------------------------------------------------
   Portrait cards side by side. The photo slot is an initials disc until
   the real headshots land — swap .founder-photo for an <img> then. */
.founders { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8rem; }
/* A lone card would otherwise sit in a half-width column with dead space
   beside it. Centre it instead, capped so the bio does not run too wide. */
.founders:has(> .founder:only-child) { grid-template-columns: minmax(0, 44rem); justify-content: center; }
.founder { padding: 2.1rem 1.9rem; }
.founder-head { display: flex; align-items: center; gap: 1.15rem; margin-bottom: 1.5rem; }
.founder-photo {
    width: 74px; height: 74px;
    flex: none;
    border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(155deg, var(--navy-700), var(--blue));
    color: #fff;
    font-family: 'Jost', sans-serif;
    font-size: 1.7rem;
    font-weight: 500;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.founder-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.founder-head h3 { margin: 0; }
.founder-role { display: block; color: var(--muted); font-size: .9rem; margin-top: .3rem; }
.founder > p { color: var(--muted); font-size: .98rem; }
.founder > p + p { margin-top: 1rem; }
.founder-word { margin-top: 1.7rem; padding-top: 1.6rem; border-top: 1px solid var(--line-soft); }
.founder-word .quote { font-size: 1.06rem; }

/* --- security items ----------------------------------------------------- */
.sec-item { display: flex; gap: 1.1rem; align-items: flex-start; }
.sec-item .card-icon { flex: none; margin-bottom: 0; }
.sec-item h4 { margin-bottom: .3rem; }
.sec-item p { color: var(--muted); font-size: .95rem; margin: 0; }
.sec-item:hover .card-icon { transform: scale(1.08) rotate(-3deg); }

/* --- nav CTA that only appears in the mobile drawer --------------------- */
.nav-cta-mobile { display: none; }

/* --- responsive -------------------------------------------------------- */
@media (max-width: 1024px) {
    .timeline { grid-template-columns: 1fr; gap: 2.4rem; }
    .timeline::before { display: none; }
    .tl-item { text-align: left; padding: 0; }
    .tl-dot { margin: 0 0 1rem; }
    /* min() with 100%, or this max-width beats the global img rule and the
       1600px source overflows the column on a phone. */
    .ecosystem-figure img { max-width: min(420px, 100%); }
    .hero-grid { gap: 2.5rem; }
    .loop-dial { width: min(360px, 100%); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
    .steps-rail::before { display: none; }
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; max-width: 46ch; }
    .form-layout { grid-template-columns: 1fr; }
    .form-aside { position: static; }
    .promise { grid-template-columns: 1fr; }
    .nav-menu { gap: 0; }
    .nav-menu > li > a { padding: .48rem .6rem; font-size: .9rem; }
    .reviews-track { grid-auto-columns: calc((100% - 1.6rem) / 2); }
}

/* The hero only stacks once two columns genuinely stop working — at 1024 the
   dial used to eat the whole first screen and push the headline below the fold. */
@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; gap: 3.2rem; }
    .hero h1 { max-width: 22ch; }
    .hero-visual { order: -1; }
    .loop-dial { width: min(340px, 76%); }
}

@media (max-width: 860px) {
    body { font-size: 16px; }

    .nav-menu {
        position: fixed;
        top: var(--nav-h);
        left: 0; right: 0;
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: .7rem 1.5rem 1.5rem;
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow);
        transform: translateY(-14px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .28s ease, transform .32s var(--ease-out);
        max-height: calc(100vh - var(--nav-h));
        overflow-y: auto;
    }
    .nav-menu.open { transform: none; opacity: 1; pointer-events: auto; }
    .nav-menu > li > a {
        display: block;
        padding: .9rem .2rem;
        border-radius: 0;
        border-bottom: 1px solid var(--line-soft);
        font-size: 1.04rem;
        color: var(--navy);
        background: none;
    }
    .nav-menu > li > a:hover, .nav-menu > li > a.active { background: none; color: var(--blue); }
    .nav-menu > li:last-child > a { border-bottom: 0; }
    .hamburger { display: flex; }
    .nav-logo img { height: 42px; }
    .nav-actions .btn { display: none; }
    .nav-cta-mobile { display: block; }
    .nav-cta-mobile a { border-bottom: 0 !important; margin-top: 1rem; width: 100%; }
    .nav-cta-mobile a.btn-primary { color: #fff; padding: .9rem 1.5rem; font-size: .98rem; }
    /* Keep the frame at the footage's own ratio — a 4/3 box would crop it. */
    .video-cover { padding: 1.4rem; }
    .video-play { width: 60px; height: 60px; margin-bottom: .9rem; }

    .split, .grid-2, .grid-3, .grid-4, .price-grid, .route-grid,
    .steps, .field-row, .choice-grid, .promise-stats, .founders { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.2rem 1.5rem; }
    .footer-brand { grid-column: 1 / -1; }
    .hero { padding-top: calc(var(--nav-h) + 2.6rem); }

    /* Three columns of stats do not fit a phone — two here, one below 520px. */
    .hero-trust { grid-template-columns: 1fr 1fr; gap: 1.3rem 0; }
    .hero-trust > div { padding-right: 1rem; }
    .hero-trust > div:nth-child(odd) { padding-left: 0; border-left: 0; }
    .hero-trust > div:nth-child(even) { padding-left: 1.2rem; }

    /* The dial's labels hang 16% outside the ring on each side, so the visual
       occupies 1.32x its own width. Size it off the viewport, not the parent. */
    .loop-dial { width: min(300px, 58vw); }
    .loop-node { width: 110px; font-size: .78rem; }

    .media-facts { grid-template-columns: repeat(3, 1fr); }

    /* One review per screen, but leave a sliver of the next card visible so the
       rail reads as swipeable without an arrow tap. */
    .reviews-track { grid-auto-columns: 88%; }
    .reviews-head { display: block; }
    .reviews-head .rating-badge { margin-top: 1.4rem; }
    .to-top { right: 1rem; bottom: 1rem; }

    /* Thumb-sized language switch — .22rem of padding is a 26px-tall target. */
    .lang-switch a { padding: .5rem .7rem; }
}

/* Small phones: one stat per row, and pull the dial in further. */
@media (max-width: 520px) {
    /* 11-12px uppercase is hard work on a phone. */
    .eyebrow { font-size: .8rem; }
    .review-tag { font-size: .78rem; }
    .price-badge { font-size: .78rem; }
    /* A longer badge line must wrap here rather than push the page sideways. */
    .eu-badge { font-size: .8rem; white-space: normal; }

    .hero-trust { grid-template-columns: 1fr; }
    .hero-trust > div { padding: 0 0 0 0 !important; border-left: 0 !important; }
    .hero-trust > div + div { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 1.1rem !important; }
    /* One card per page means one dot per review — twelve of them need to be
       allowed to wrap rather than shove the arrows off the row. */
    .reviews-dots { flex-wrap: wrap; justify-content: flex-end; gap: .38rem; }
    .loop-dial { width: min(215px, 56vw); }
    .loop-node { width: 98px; font-size: .72rem; }
    .loop-node b { width: 36px; height: 36px; font-size: .74rem; }
    h1 { font-size: clamp(2rem, 8.2vw, 2.5rem); }
    .container { padding: 0 1.2rem; }
    .media-facts { grid-template-columns: 1fr; }
    .hero-actions .btn { width: 100%; }
    .footer-grid { grid-template-columns: 1fr; }
}

/* Comparison tables become cards on a phone. Gated on .js because the column
   labels are stamped on by script.js — without it the table stays scrollable,
   which is worse but never unlabelled. */
@media (max-width: 620px) {
    .js .table-wrap {
        overflow: visible;
        border: 0;
        background: none;
        box-shadow: none;
        border-radius: 0;
    }
    .js table.compare { min-width: 0; }
    .js table.compare thead { display: none; }
    .js table.compare,
    .js table.compare tbody,
    .js table.compare tr,
    .js table.compare th,
    .js table.compare td { display: block; width: auto; }

    .js table.compare tbody tr {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
        padding: 1.15rem 1.25rem 1.3rem;
    }
    .js table.compare tbody tr + tr { margin-top: .9rem; }
    .js table.compare tbody tr:hover { background: #fff; }

    .js table.compare tbody th {
        width: auto;
        font-family: 'Jost', sans-serif;
        font-size: 1.04rem;
        font-weight: 600;
        color: var(--navy);
        padding: 0 0 .75rem;
        margin-bottom: .85rem;
        border-bottom: 1px solid var(--line-soft);
    }
    .js table.compare tbody td { padding: 0; border: 0; }
    .js table.compare tbody td + td { margin-top: .95rem; }
    .js table.compare tbody td::before {
        content: attr(data-col);
        display: block;
        font-family: 'Jost', sans-serif;
        font-size: .76rem;
        font-weight: 500;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--blue);
        margin-bottom: .3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        /* Delays matter as much as durations here: without this the staggered
           entrances still hold content at opacity 0 for a beat. */
        animation-delay: 0s !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }
    html { scroll-behavior: auto; }
    .reviews-track { scroll-behavior: auto; }
    .js .reveal { opacity: 1; transform: none; }
    .ecosystem-figure img, .hero::before { animation: none !important; }
}

@media print {
    .navbar, .cta-band, .hamburger, .to-top, .scroll-progress { display: none !important; }
    body { font-size: 12pt; padding-top: 0; }
    .hero, .page-hero, .bg-navy, .footer { background: #fff !important; color: #000 !important; }
    .hero h1, .page-hero h1, .bg-navy h2, .footer h4 { color: #000 !important; }
}