/* COUPONS4U brand overview. Values come from the DMEXCO loop: Quicksand, CD red, ink. */

@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/quicksand-latin-wght-normal.woff2') format('woff2-variations');
    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;
}

@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/quicksand-latin-ext-wght-normal.woff2') format('woff2-variations');
    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;
}

:root {
    --red: #d93e24;
    --red-dark: #b8321c;
    --red-pale: #f3d2cb;
    --red-soft: #ea9c8d;
    --red-tint: #fdf1ee;
    --ink: #333f49;
    --ink-2: #5b6770;
    --ink-3: #8a959d;
    --line: #e4e8eb;
    --line-strong: #c9d0d5;
    --land: #dfe3e6;
    --band: #f5f6f7;
    --white: #ffffff;

    --font: 'Quicksand', ui-rounded, system-ui, sans-serif;
    --ease: cubic-bezier(.22, 1, .36, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);

    --container: 1280px;
    --gutter: clamp(16px, 4vw, 48px);
    --section: clamp(72px, 10vw, 144px);
    --header-h: 64px;
}

@media (min-width: 860px) {
    :root { --header-h: 76px; }
}

/* ---------- Base ---------- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 24px);
    scrollbar-color: var(--line-strong) transparent;
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font-family: var(--font);
    font-weight: 500;
    font-size: 1.0625rem;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, figure { margin: 0; }
p { text-wrap: pretty; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: .08em; }
button { font: inherit; color: inherit; }

::selection { background: var(--red); color: var(--white); }

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

#main:focus { outline: none; }

.container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

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

.skip-link {
    position: absolute;
    left: var(--gutter);
    top: -100px;
    z-index: 100;
    padding: .7em 1.1em;
    background: var(--ink);
    color: var(--white);
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
}
.skip-link:focus { top: 12px; }

.icon {
    width: 1em; height: 1em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.flag {
    width: auto;
    height: 18px;
    border-radius: 3px; /* same rounding for every flag, the square Swiss one included */
}

.section-title {
    font-weight: 700;
    font-size: clamp(1.75rem, 1.15rem + 2.1vw, 3.25rem);
    line-height: 1.12;
    letter-spacing: -.01em;
    text-wrap: balance;
}

.section-intro {
    margin-top: 1rem;
    max-width: 62ch;
    color: var(--ink-2);
    font-size: 1.1875rem;
}

/* The dashed cut line, used sparingly: under the claim here, and as the transatlantic arc on the map. */
.cutline {
    display: block;
    width: min(60%, 22rem);
    height: 5px;
    background: repeating-linear-gradient(90deg, var(--red) 0 18px, transparent 18px 32px);
    border-radius: 3px;
}

.button {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    padding: .85em 1.35em;
    border-radius: 12px;
    background: var(--red);
    color: var(--white);
    font-weight: 700;
    font-size: 1.0625rem;
    text-decoration: none;
    transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.button:hover { background: var(--red-dark); }
.button:active { transform: translateY(1px); }
.button .icon { stroke-width: 2.2; }

/* ---------- Header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--white);
    box-shadow: 0 1px 0 transparent;
    transition: box-shadow .3s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 6px 18px -14px rgb(51 63 73 / .45); }

.site-header__inner {
    display: flex;
    align-items: center;
    gap: clamp(12px, 3vw, 40px);
    height: var(--header-h);
}

.site-header__logo { flex: none; margin-right: auto; }
.site-header__logo img { width: auto; height: clamp(34px, 3.2vw, 44px); }

.site-nav__list { display: flex; gap: clamp(16px, 2.4vw, 36px); }

.site-nav__link {
    position: relative;
    display: block;
    padding-block: .4em;
    font-weight: 600;
    font-size: .98rem;
    text-decoration: none;
    transition: color .2s var(--ease);
}
.site-nav__link::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--red);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s var(--ease);
}
.site-nav__link:hover { color: var(--red); }
.site-nav__link[aria-current='true'] { color: var(--red); }
.site-nav__link[aria-current='true']::after { transform: scaleX(1); }

.lang {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: var(--band);
}
.lang__link {
    padding: .25em .6em;
    border-radius: 7px;
    font-weight: 700;
    font-size: .8125rem;
    letter-spacing: .06em;
    text-decoration: none;
    color: var(--ink-2);
    transition: color .2s, background-color .2s;
}
.lang__link:hover { color: var(--ink); }
.lang__link[aria-current='true'] { background: var(--white); color: var(--red); box-shadow: 0 1px 3px rgb(51 63 73 / .15); }

.menu-toggle { display: none; }

@media (max-width: 859.98px) {
    .js .menu-toggle {
        display: inline-flex;
        align-items: center;
        gap: .5em;
        order: 3;
        padding: .45em .2em;
        border: 0;
        background: none;
        font-weight: 700;
        font-size: .9375rem;
        cursor: pointer;
    }
    .menu-toggle__bars, .menu-toggle__bars::before {
        display: block;
        width: 18px; height: 2px;
        background: currentColor;
        border-radius: 2px;
        transition: transform .3s var(--ease);
    }
    .menu-toggle__bars { position: relative; transform: translateY(-3px); }
    .menu-toggle__bars::before { content: ''; position: absolute; top: 6px; }
    .menu-toggle[aria-expanded='true'] .menu-toggle__bars { transform: rotate(45deg); }
    .menu-toggle[aria-expanded='true'] .menu-toggle__bars::before { transform: translateY(-6px) rotate(-90deg); }

    .js .site-nav {
        position: absolute;
        top: var(--header-h);
        left: 0; right: 0;
        padding: 8px var(--gutter) 24px;
        background: var(--white);
        box-shadow: 0 1px 0 var(--line), 0 18px 30px -24px rgb(51 63 73 / .5);
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s;
    }
    .js .site-nav.is-open {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition-delay: 0s;
    }
    .site-nav__list { flex-direction: column; gap: 0; }
    .site-nav__link { padding-block: .8em; font-size: 1.25rem; border-bottom: 1px solid var(--line); }
    .site-nav__link::after { display: none; }
    .no-js .site-nav { display: none; }
}

/* ---------- Reveal ---------- */

.js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Hero ---------- */

.hero { padding-block: clamp(24px, 3vw, 44px) clamp(20px, 2.2vw, 32px); }

.hero__grid {
    display: grid;
    gap: clamp(28px, 4vw, 48px);
    align-items: center;
}

.hero__title {
    color: var(--red);
    font-weight: 700;
    font-size: clamp(1.75rem, .95rem + 3.3vw, 4rem);
    line-height: 1.04;
    letter-spacing: .055em;
    text-transform: uppercase;
    text-wrap: balance;
    overflow-wrap: break-word;
}
/* Long German compounds in caps only get hyphenated where a whole word cannot fit. */
@media (max-width: 359.98px) { .hero__title { hyphens: auto; } }

.hero__cutline { margin-top: clamp(14px, 1.4vw, 20px); }
/* Wipes in with the claim above it: a fully clipped element is never reported as intersecting. */
.js .hero__cutline { clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--ease) .35s; }
.js .hero__title.is-in + .hero__cutline { clip-path: inset(0 0 0 0); }

.hero__sub {
    margin-top: clamp(14px, 1.6vw, 20px);
    max-width: 44ch;
    font-size: clamp(1.1875rem, 1rem + .7vw, 1.625rem);
    line-height: 1.45;
    --i: 3;
}

.badges {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(10px, 1.6vw, 20px);
    width: min(100%, 22rem);
}

.badge {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border-radius: 15.33%; /* rx 46 of 300, as in the loop's badge files */
    background: var(--red);
    box-shadow: 0 14px 24px -18px rgb(140 30 12 / .7);
    transition-delay: calc(300ms + var(--i, 0) * 110ms) !important;
}
.badge__icon { width: 100%; height: 100%; overflow: visible; }
.js .badge { transform: translateY(34px) scale(.86); }
.js .badge.is-in { transform: none; }

.badge__arm {
    position: absolute;
    inset: 13%;
    width: 74% !important;
    height: 74% !important;
    transform-origin: 50% 50%;
}
/* Each badge acts out its own object once per play: lift the bag, roll the cart,
   tip the coupon while its perforation runs, cut with the scissors. Lengths are in SVG units. */
.badge__motion, .bag__handle { transform-box: fill-box; }
.badge__motion { transform-origin: 50% 100%; }
.bag__handle { transform-origin: 50% 100%; }
[data-badge='coupon'] .badge__motion { transform-origin: 50% 50%; }

.badge.is-playing[data-badge='bag'] .badge__motion { animation: bag-lift .95s var(--ease-in-out); }
.badge.is-playing[data-badge='bag'] .bag__handle { animation: handle-swing .95s var(--ease-in-out); }
.badge.is-playing[data-badge='cart'] .badge__motion { animation: cart-roll 1s var(--ease-in-out); }
.badge.is-playing[data-badge='coupon'] .badge__motion { animation: coupon-tip .9s var(--ease-in-out); }
.badge.is-playing .badge__dashes { animation: dash-run .9s linear; }
.badge.is-playing .badge__arm--a { animation: snip-a .34s var(--ease-in-out) 2; }
.badge.is-playing .badge__arm--b { animation: snip-b .34s var(--ease-in-out) 2; }

@keyframes bag-lift {
    30% { transform: translateY(-14px) rotate(-5deg); }
    55% { transform: translateY(-6px) rotate(4deg); }
    80% { transform: translateY(0) rotate(-1.5deg); }
}
@keyframes handle-swing {
    30% { transform: rotate(9deg); }
    60% { transform: rotate(-7deg); }
    85% { transform: rotate(2deg); }
}
@keyframes cart-roll {
    25% { transform: translateX(-9px) rotate(-3deg); }
    60% { transform: translateX(12px) rotate(2deg); }
    85% { transform: translateX(-3px); }
}
@keyframes coupon-tip {
    35% { transform: rotate(-12deg) scale(1.08); }
    65% { transform: rotate(5deg) scale(1.02); }
}
@keyframes dash-run { to { stroke-dashoffset: -28; } }
@keyframes snip-a { 40% { transform: rotate(11deg); } }
@keyframes snip-b { 40% { transform: rotate(-11deg); } }

@media (min-width: 900px) {
    .hero__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
    .badges { width: clamp(280px, 26vw, 360px); }
}

/* ---------- Board: market switchboard ---------- */

.board { padding-bottom: var(--section); }

.board__head { padding-block: clamp(4px, .8vw, 10px) clamp(12px, 1.2vw, 16px); }
.board__head .section-title { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); }

.rail-wrap { display: none; }
.js .rail-wrap {
    display: block;
    position: sticky;
    top: var(--header-h);
    z-index: 20;
    background: var(--white);
    transition: box-shadow .3s var(--ease);
}
.rail-wrap.is-stuck { box-shadow: 0 1px 0 var(--line), 0 8px 16px -14px rgb(51 63 73 / .5); }

.rail {
    position: relative;
    display: flex;
    gap: 8px;
    padding-block: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
}
.rail::-webkit-scrollbar { display: none; }

/* Wide enough to stop scrolling: the markets wrap onto a second row rather than running off the
   right edge, so every market a visitor can choose is on screen at once. */
@media (min-width: 1100px) {
    .rail { mask-image: none; overflow: visible; flex-wrap: wrap; }
}

.rail__btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .55em;
    height: 44px;
    padding: 0 .75em 0 .9em;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--white);
    font-weight: 700;
    font-size: .9375rem;
    white-space: nowrap;
    scroll-snap-align: start;
    cursor: pointer;
    transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.rail__btn .flag { height: 15px; border-radius: 2.5px; }
.rail__btn:hover { border-color: var(--line-strong); background: var(--band); }
.rail__count {
    min-width: 1.6em;
    padding: .05em .45em;
    border-radius: 6px;
    background: var(--band);
    color: var(--ink-2);
    font-size: .8125rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    transition: inherit;
}
.rail__btn[aria-pressed='true'] { background: var(--red); border-color: var(--red); color: var(--white); }
.rail__btn[aria-pressed='true'] .rail__count { background: rgb(255 255 255 / .2); color: var(--white); }

.board__stage { position: relative; padding-top: clamp(8px, 1vw, 12px); }

.map__frame {
    position: relative;
    aspect-ratio: 2;
    overflow: hidden;
}
@media (min-width: 640px) { .map__frame { aspect-ratio: 2.5; } }
/* The section sets --map-aspect to match the overview it framed; see _brands.html.twig. */
@media (min-width: 1100px) { .map__frame { aspect-ratio: var(--map-aspect, 3.9); } }

.map__svg { width: 100%; height: 100%; }

/* .map__land is a market country with no brands: drawn as ordinary land, not as a hole. */
.map__context path,
.map__land {
    fill: var(--land);
    stroke: var(--white);
    stroke-width: 1.25;
    vector-effect: non-scaling-stroke;
}

.map__market {
    fill: var(--red);
    stroke: var(--white);
    stroke-width: 1.75;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transition: fill .6s var(--ease);
}
.map__svg:not([data-active='all']) .map__market:not(.is-active) { fill: var(--red-pale); }
/* Countries with brands are a second way to choose a market. */
.js .map__svg:not([data-active='all']) { cursor: zoom-out; }
.js .map__market.is-selectable, .js .pin:not(.is-off) { cursor: pointer; }
/* A frame stretched north for a Nordic market can be dragged; touch keeps the page scrolling. */
.js .map__svg[data-pannable][data-active='all'] { cursor: grab; touch-action: pan-y; }
.js .map__svg[data-pannable].is-panning { cursor: grabbing; }
.map__market.is-selectable:hover { fill: var(--red-dark); transition-duration: .15s; }
.map__svg:not([data-active='all']) .map__market.is-selectable:not(.is-active):hover { fill: var(--red-soft); }
.pin.is-off { pointer-events: none; }

.map__arc {
    fill: none;
    stroke: var(--red);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 11 9;
    vector-effect: non-scaling-stroke;
    transition: opacity .5s var(--ease);
}
.map__svg:not([data-active='all']) .map__arc { opacity: 0; }

.map__arc-reveal {
    fill: none;
    stroke: #fff;
    stroke-width: 40;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}
.js .map__arc-reveal { stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease-in-out) .5s; }
.js .board.is-in .map__arc-reveal { stroke-dashoffset: 0; }

.pin { transition: opacity .45s var(--ease); }
.pin__dot { fill: var(--red); stroke: var(--white); stroke-width: 3; }
.pin__pulse {
    fill: var(--red);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}
.pin.is-off { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
    .js .board.is-in .pin:not(.is-off) .pin__pulse {
        animation: pulse 2.4s var(--ease) infinite;
        animation-delay: calc(var(--i, 0) * 180ms);
    }
}
@keyframes pulse {
    0% { opacity: .45; transform: scale(1); }
    100% { opacity: 0; transform: scale(2.6); }
}

.map__caption {
    display: flex;
    align-items: center;
    gap: .6em;
    margin-bottom: 6px;
    color: var(--ink-2);
    font-weight: 600;
    font-size: .9375rem;
}
.map__caption::before {
    content: '';
    flex: none;
    width: 10px; height: 10px;
    border: 2px solid var(--white);
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 1px var(--red);
}

.brands {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
    margin-top: clamp(28px, 4vw, 48px);
    padding: 1px;
    --logo-base: 96px;
}
@media (min-width: 640px) { .brands { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .brands { grid-template-columns: repeat(3, minmax(0, 1fr)); --logo-base: 108px; } }

.brand {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white);
    /* The hairlines belong to the cells and fill the 1px gaps, so a grid area without a
       cell stays white instead of showing a grey block. */
    outline: 1px solid var(--line);
    transition: opacity .45s var(--ease), transform .8s var(--ease);
    transition-delay: calc(var(--i, 0) * 50ms);
}
.brand > * { transition: opacity .45s var(--ease), filter .45s var(--ease); }
.js .brand.is-in { transition-delay: 0s; }
/* Dim the cell's content, not the cell: the grid's hairline colour must not show through. */
.js .brand.is-dim > * { opacity: .28; filter: grayscale(1); }
/* Phones and tablets have no leader lines: the chosen market's brands move up, right under
   the map, and the other brands shrink to one compact row each. */
@media (max-width: 999.98px) {
    .brand.is-dim { order: 1; }
    .js .brand.is-dim > * { opacity: .45; }
    .js .brand.is-dim .brand__link { min-height: 0; padding-block: 12px; gap: 0; }
    .js .brand.is-dim .brand__mark { min-height: 32px; gap: 12px; }
    .js .brand.is-dim .brand__mark .flag { height: 14px; }
    .js .brand.is-dim .brand__logo { --logo-h: calc(var(--logo-base) * var(--logo-k, .5) * .5); }
    .js .brand.is-dim .brand__shot,
    .js .brand.is-dim .brand__domain { display: none; }
}

.brand__link {
    /* Stacked from the top: a screenshot of the same proportions in every cell, then a
       fixed-height logo row, so logos and domains line up across a grid row. */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
    padding: clamp(20px, 2.2vw, 28px) clamp(18px, 2vw, 28px);
    text-decoration: none;
    transition: background-color .25s var(--ease);
}
.brand:has(> a.brand__link:hover) { background: var(--red-tint); }
a.brand__link:focus-visible { outline-offset: -3px; border-radius: 0; }

/* The platform's website as a small physical screen: hairline ring, soft slate drop. On hover it
   lifts, the page inside drifts closer and the ring warms to red, like the cell around it. */
.brand__shot {
    position: relative;
    align-self: stretch;
    aspect-ratio: 16 / 10;
    margin-bottom: 6px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--band);
    box-shadow: 0 0 0 1px var(--line), 0 16px 28px -22px rgb(51 63 73 / .4);
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.brand__shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transform-origin: top center;
    transition: transform .9s var(--ease);
}
a.brand__link:hover .brand__shot {
    transform: translateY(-3px);
    box-shadow: 0 0 0 1px var(--red-pale), 0 24px 34px -24px rgb(51 63 73 / .5);
}
a.brand__link:hover .brand__shot img { transform: scale(1.04); }

/* Tall enough for the tallest lockup (Grüne Gutscheine, logo factor ~.65). */
.brand__mark { display: flex; align-items: center; justify-content: center; gap: 16px; min-width: 0; min-height: calc(var(--logo-base) * .7); }
.brand__mark .flag { flex: none; }
.brand__mark .flag { align-self: center; }

.brand__logo {
    /* Laid out at the size the hover zoom needs and scaled back down at rest, so the hover
       only ever scales the rendering down. Zooming up put the artwork on fractional pixels
       and made it look soft. The negative margin takes the extra height back out of the
       layout, so both states look exactly as before and no row moves. */
    --zoom: 1.03;
    --logo-h: calc(var(--logo-base) * var(--logo-k, .5));
    width: auto;
    height: calc(var(--logo-h) * var(--zoom));
    margin-block: calc(var(--logo-h) * (1 - var(--zoom)) / 2);
    min-width: 0;
    max-width: min(100%, 300px);
    object-fit: contain;
    object-position: center;
    transform: scale(calc(1 / var(--zoom)));
    transform-origin: center;
    transition: transform .4s var(--ease);
}
a.brand__link:hover .brand__logo { transform: none; }

.brand__name { font-weight: 700; font-size: 1.375rem; }

.brand__domain {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    color: var(--ink-2);
    font-weight: 600;
    font-size: .875rem;
    transition: color .2s var(--ease);
}
a.brand__link:hover .brand__domain { color: var(--red); }


.leaders {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
.leaders path {
    fill: none;
    stroke: var(--red);
    stroke-width: 1.25;
    filter: drop-shadow(0 0 1.5px var(--white)); /* keeps the line readable where it crosses the red market */
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset .7s var(--ease);
}
.leaders path.is-drawn { stroke-dashoffset: 0; }
.leaders circle { fill: var(--red); stroke: var(--white); stroke-width: 2; opacity: 0; transition: opacity .3s var(--ease) .45s; }
.leaders circle.is-drawn { opacity: 1; }
@media (max-width: 999.98px) { .leaders { display: none; } }

/* ---------- Awards ---------- */

.awards { padding-block: var(--section); background: var(--band); }

.awards__grid {
    display: grid;
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
}
@media (min-width: 1000px) {
    .awards__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.awards__title span { display: block; }
.awards__brand {
    width: auto;
    height: clamp(40px, 4.6vw, 64px);
    margin-top: clamp(14px, 1.6vw, 22px);
}

.awards__sub {
    margin-top: clamp(20px, 2.4vw, 32px);
    max-width: 30ch;
    color: var(--ink-2);
    font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem);
    --i: 2;
}

.seals {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(28px, 5vw, 72px);
    --seal-base: clamp(150px, 19vw, 280px);
}
.seal { width: calc(var(--seal-base) * var(--seal-k, 1)); }
.seal img { width: 100%; filter: drop-shadow(0 18px 22px rgb(51 63 73 / .14)); }

.js .seal { opacity: 0; transform: scale(.82); transition: none; }
.js .seal.is-in { opacity: 1; transform: none; animation: seal-in .95s var(--ease) both; animation-delay: calc(var(--i, 0) * 220ms); }
@keyframes seal-in {
    0% { opacity: 0; transform: scale(.82); }
    65% { opacity: 1; transform: scale(1.03); }
    100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
    .js .seal.is-in img { animation: breathe 7s var(--ease-in-out) 1.4s infinite alternate; }
}
@keyframes breathe { to { transform: scale(1.018); } }

/* ---------- Product (vchfy) ---------- */

.vx { padding-block: var(--section); overflow: hidden; }

.vx__head { display: flex; flex-direction: column; align-items: center; text-align: center; }

.vx__logo { width: auto; height: clamp(40px, 5.4vw, 76px); }

.vx__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 1.4vw, 18px);
    margin-top: clamp(20px, 2.6vw, 36px);
    font-weight: 700;
    font-size: clamp(1.3125rem, .95rem + 1.5vw, 2.625rem);
    line-height: 1.2;
    text-wrap: balance;
}
.vx__title { width: 100%; }
.vx__title > * { max-width: 100%; }
.vx__line:last-child { --i: 2; }

.search {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    max-width: 100%;
    min-width: 0;
    padding: .16em .7em .16em .18em;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    box-shadow: 0 18px 34px -24px rgb(51 63 73 / .5);
    font-size: clamp(1rem, .4rem + 4vw, 4.25rem);
    line-height: 1.25;
    letter-spacing: -.01em;
    --i: 1;
}
.search__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.3em; height: 1.3em;
    border-radius: 50%;
    background: var(--red-tint);
}
.search__icon svg { width: .55em; height: .55em; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }
.search__query { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search__primary { color: var(--red); }
.search__secondary { color: var(--ink-3); }
.search__caret {
    display: inline-block;
    width: .07em;
    height: 1em;
    margin-inline: .06em .14em;
    background: var(--ink);
    vertical-align: -.12em;
}
@media (prefers-reduced-motion: no-preference) {
    .search__caret { animation: caret 1.05s steps(1) infinite; }
}
@keyframes caret { 50% { opacity: 0; } }
.js .search[data-typing] .search__secondary { opacity: 0; }
.search__secondary { transition: opacity .5s var(--ease); }

.vx__body {
    display: grid;
    gap: clamp(36px, 5vw, 56px);
    margin-top: clamp(40px, 6vw, 72px);
}
.vx__body .imac { order: -1; }

.vx__stats { display: grid; gap: clamp(32px, 5vw, 44px) clamp(20px, 4vw, 40px); }

/* Below desktop the two side lists merge into one centred grid, two figures per row,
   in the slide's order (2×, 80 %, 30 %, +15 %, 50 %, 100 %). */
@media (max-width: 1099.98px) {
    .vx__body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 44px) clamp(20px, 4vw, 40px); }
    .vx__body .imac { grid-column: 1 / -1; margin-bottom: clamp(4px, 2vw, 16px); }
    .vx__stats { display: contents; }
    .stat { align-items: center; text-align: center; }
    .stat__label { max-width: 20ch; }
}

.stat { display: flex; flex-direction: column; gap: .3em; }
.stat__value {
    color: var(--red);
    font-weight: 700;
    font-size: clamp(2.25rem, 1.4rem + 2.6vw, 4.25rem);
    line-height: 1;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}
.stat__label { max-width: 24ch; font-size: clamp(1rem, .9rem + .4vw, 1.3125rem); line-height: 1.35; text-wrap: balance; }

@media (min-width: 1100px) {
    .vx__body { grid-template-columns: minmax(0, 1fr) minmax(0, 600px) minmax(0, 1fr); align-items: center; }
    .vx__body .imac { order: 0; }
    .vx__stats { grid-template-columns: 1fr; gap: clamp(36px, 3.4vw, 52px); }
    .vx__stats--start { text-align: right; }
    .vx__stats--start .stat { align-items: flex-end; }
    .js .vx__stats--start .stat { transform: translateX(-54px); }
    .js .vx__stats--end .stat { transform: translateX(54px); }
    .js .vx__stats .stat.is-in { transform: none; }
}

.imac { position: relative; width: min(100%, 600px); margin-inline: auto; }
/* Screen opening of the loop's iMac render (mac_bezel.png), measured from the loop's spec. */
.imac__screen {
    position: absolute;
    left: 2.523%;
    top: 2.968%;
    width: 94.956%;
    height: 63.38%;
    overflow: hidden;
    background: var(--white);
}
.imac__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.imac__bezel { position: relative; width: 100%; filter: drop-shadow(0 26px 30px rgb(150 70 30 / .18)); }

.vx__cta { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 64px); }

/* ---------- Contact ---------- */

.contact {
    padding-block: clamp(80px, 12vw, 168px);
    background: var(--red);
    color: var(--white);
    text-align: center;
}
.contact :focus-visible { outline-color: var(--white); }

.contact__inner { display: flex; flex-direction: column; align-items: center; }

.contact__title {
    font-weight: 700;
    font-size: clamp(2.5rem, 1.1rem + 5.6vw, 6rem);
    line-height: 1.02;
    letter-spacing: -.015em;
    text-wrap: balance;
}

.contact__via {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35em;
    margin-top: clamp(28px, 4vw, 48px);
    --i: 1;
}
.contact__sub { color: var(--white); font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); }
.contact__mail {
    font-weight: 700;
    font-size: clamp(1.375rem, .9rem + 2.4vw, 3.25rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
    text-decoration-thickness: 2px;
    text-decoration-color: rgb(255 255 255 / .5);
    transition: text-decoration-color .25s var(--ease);
}
.contact__mail:hover { text-decoration-color: var(--white); }

.social { display: flex; gap: 14px; margin-top: clamp(32px, 4.5vw, 52px); --i: 2; }
.social__link {
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    border: 2px solid var(--white);
    border-radius: 50%;
    background: var(--white);
    color: var(--red);
    transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.social__link:hover { background: transparent; color: var(--white); transform: translateY(-2px); }
.social__link:focus-visible { border-radius: 50%; }
.social__icon { width: 24px; height: 24px; }

/* ---------- Footer ---------- */

.site-footer { padding-block: clamp(40px, 5vw, 64px); }

.site-footer__inner {
    display: grid;
    gap: 20px 32px;
    align-items: center;
    color: var(--ink-2);
    font-size: .9375rem;
}
@media (min-width: 800px) { .site-footer__inner { grid-template-columns: auto 1fr auto; } }

.site-footer__logo img { width: auto; height: 44px; }
.site-footer__nav ul { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer__nav a { font-weight: 600; text-decoration: none; }
.site-footer__nav a:hover { color: var(--red); text-decoration: underline; }

/* ---------- Legal pages ---------- */

.legal { padding-block: clamp(48px, 7vw, 96px) var(--section); }
.legal__inner { max-width: calc(72ch + 2 * var(--gutter)); }
.legal__title { color: var(--red); font-weight: 700; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.1; }
.legal__body { margin-top: 1.5em; }
.legal__body > * + * { margin-top: 1em; }
.legal__body a { color: var(--red); }

/* ---------- Narrow screens: more air between stacked elements ---------- */
/* Desktop rhythm is untouched (the first viewport must keep the whole map). */

@media (max-width: 899.98px) {
    .hero { padding-block: 44px 64px; }
    .hero__grid { gap: 40px; }
    .hero__cutline { margin-top: 20px; }
    .hero__sub { margin-top: 20px; }
}

@media (max-width: 639.98px) {
    :root { --gutter: 22px; --section: 96px; }

    .badges { width: min(100%, 19rem); gap: 16px; }

    .board__head { padding-block: 0 24px; }
    .board__head .section-title { font-size: 1.375rem; }
    .rail { padding-block: 10px; }
    .board__stage { padding-top: 20px; }
    .map__caption { margin-bottom: 14px; }
    .brands { margin-top: 40px; }
    .brand__link { gap: 16px; padding: 30px 24px; }

    .awards__grid { gap: 56px; }
    .awards__brand { margin-top: 18px; max-width: min(100%, 300px); height: auto; }
    .awards__sub { margin-top: 24px; }
    .seals { gap: 32px; }

    .vx__title { gap: 16px; margin-top: 28px; }
    .vx__body { margin-top: 52px; row-gap: 44px; }
    .vx__body .imac { margin-bottom: 12px; }
    .vx__cta { margin-top: 56px; }

    .contact { padding-block: 104px; }
    .contact__via { margin-top: 40px; gap: 8px; }
    .social { margin-top: 44px; gap: 18px; }

    .site-footer { padding-block: 56px 64px; }
    .site-footer__inner { gap: 24px; }
}

/* ---------- Narrow screens: single-column sections are centred ---------- */

@media (max-width: 899.98px) {
    .hero__copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
    .badges { margin-inline: auto; }
    .awards__copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
    .awards__brand { margin-inline: auto; }
}

@media (max-width: 799.98px) {
    .site-footer__inner { justify-items: center; text-align: center; }
    .site-footer__nav ul { justify-content: center; }
}

@media (max-width: 639.98px) {
    .board__head { text-align: center; }
    .section-intro { margin-inline: auto; }
    .map__caption { justify-content: center; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
    }
    .js [data-reveal] { opacity: 1; transform: none; }
    .js .hero__cutline { clip-path: none; }
    .leaders path { stroke-dasharray: none; }
}