/* solvair.eu apex — LAYOUT pass, dark-blue theme. Whole-page navy gradient with the globe
   image up top dropping into it; semi-transparent white tiles let the background show through.
   The map placeholder at the top is where the real interactive map will go. Font = Lato. */

:root {
    --navy: #11275d;
    --ink: #1a2230;
    --muted: #6b7690;
    --link: #2a5bb0;
    --tile: rgba(255, 255, 255, 0.9);   /* white tiles, translucent so the bg shows through */
    --tile-line: rgba(17, 39, 93, 0.12);
    --on-dark: #e6ecfa;                  /* text sitting directly on the dark background */
    --on-dark-soft: #b9c6e6;
}

* { box-sizing: border-box; }

/* The full-bleed elements (map canvas, header fade, starfield) are sized in vw, which counts
   the scrollbar — without this the page scrolls sideways by the scrollbar's width. Set on both
   html and body because a propagated value from body alone leaves the fixed starfield unclipped.
   Nothing here is position: sticky, so clipping the viewport axis costs us nothing. */
html, body { overflow-x: hidden; }

body {
    font-family: 'Lato', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    margin: 0;
    color: var(--on-dark);
    line-height: 1.55;
    font-weight: 400;
    /* near-black navy gradient the whole way down to the footer */
    background: linear-gradient(180deg, #0a1a3a 0%, #060d20 45%, #02040c 100%);
    background-color: #02040c;
    min-height: 100vh;
}

a { color: var(--link); }

/* Starfield canvas: fixed behind the content. */
#apex-stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.apex-hero, .apex-main, .logo-strip-wrap, .apex-help-band, .apex-showcase { position: relative; z-index: 2; }
.apex-geobar { position: relative; z-index: 4; }

/* ---- Top geo bar: full-width, dismissible ---- */
.apex-geobar {
    display: flex; align-items: center; gap: 0.5rem;
    background: rgba(255, 255, 255, 0.95); color: var(--ink); padding: 0.5rem 1rem; font-size: 0.92rem;
}
.apex-geobar-inner {
    flex: 1; display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem;
    align-items: center; justify-content: center;
}
.apex-geobar .apex-geo-cta { font-weight: 700; text-decoration: none; }
.apex-geobar-close {
    flex: none; font-size: 1.4rem; line-height: 1; background: none; border: 0; cursor: pointer;
    color: var(--muted); padding: 0 0.25rem;
}
.apex-geobar-close:hover { color: var(--ink); }

/* ---- Hero: logo + small title, sitting OVER the top of the map (the map's black fade
        strip keeps it readable). Negative margin pulls the map up underneath. ---- */
.apex-hero {
    text-align: center; padding: 2.25rem 1.25rem 0; color: #fff;
    position: relative; z-index: 5; margin-bottom: -170px;
    /* z-index 5, ABOVE .apex-main (3): both were 3, and the map — being later in the DOM —
       won the tie and painted straight over the ::before fade, so the logo sat on bare
       Norway. Nothing in the hero is clickable, so it passes pointer events through to the
       country shapes it now overlaps. */
    pointer-events: none;
    /* -170px (not the hero's ~160px height): the map must sit FLUSH against the page top,
       so pull it a few px further than the hero is tall — a sliver of arctic ocean cropping
       off the top beats a strip of page background showing above the map (Jason, 07-24). */
}
.apex-logo { height: 55px; width: auto; margin-bottom: 0.9rem; }
.apex-title-sm {
    font-size: clamp(1.35rem, 3vw, 1.9rem); font-weight: 300; letter-spacing: 0.02em;
    margin: 0; color: #eaf1ff;
}

/* ---- Main container ---- */
/* No bottom padding: the globe band below is pulled up to meet the list (see .apex-showcase).
   z-index 3 keeps the last rows above the globe where the two overlap. */
.apex-main { max-width: 1040px; margin: 0 auto; padding: 0 1.25rem; z-index: 3; }

h2 { font-family: 'Lato', sans-serif; font-weight: 400; font-size: 1.4rem; color: #fff; margin: 0 0 1rem; }

/* ---- Interactive map + country selector ---- */
.apex-map { margin-bottom: 2.5rem; }
/* Full-bleed map that breaks out of the centred container. */
.apex-map-wide { position: relative; }
.apex-map-wide .apex-map-canvas {
    max-width: none; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    /* An explicit height, not min-height: the canvas inside is height:100% and needs a
       definite box to resolve against, or it collapses to nothing. Capped in vh so the map
       band always fits the first screen instead of scaling with viewport WIDTH. */
    height: min(78vh, 720px);
    /* Hairline closing the map band. On the canvas, NOT a ::after on the section: a pseudo-
       element is the section's LAST child, so it rendered below the hint bar rather than
       under the map, and the hint jumped above it the moment a country was selected. As a
       border it is flush to the map edge (margin-bottom 0) and the hint always sits below. */
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    /* Clip the band. The SVG is overflow:visible so the globe can bleed sideways, but once the
       band is capped to the window height that bleed also runs DOWNWARD past the hairline and
       North Africa spilled into the A-Z listings. Clipping here makes the hairline a real edge. */
    overflow: hidden;
}
/* Dark band behind the logo + title so they stay readable over the map. Anchored to the TOP
   of the page (the hero starts at y=0, or under the geo bar when that's shown), NOT to the
   map — the map is pulled up underneath by the hero's negative margin, so anchoring it there
   started the fade partway down the page. Solid at the very top, gone just below the subtitle.
   Stops track the content: logo centre ~63px (75%), subtitle centre ~135px (50%), out by 280px.
   z-index -1 keeps it inside the hero's stacking context: behind the logo, above the map. */
.apex-hero::before {
    content: ''; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 300px;
    z-index: -1; pointer-events: none;
    /* Near-BLACK, not page-navy: at wide viewports lit countries (Norway) reach the very
       top of the map, and the old navy-at-75% band vanished against them (Jason, 07-24).
       CENTRED ellipse, not a full-width linear band (2026-07-27): the fade only has to protect
       the LOGO, which is centred, but a full-width band also blacked out Iceland — measured
       sitting at y=56..120, i.e. inside the 300px fade, so it rendered as a dark shape despite
       being is-active with the correct fill. Falling away laterally keeps the logo readable and
       lets the map's top corners show. */
    background: radial-gradient(ellipse 32% 100% at 50% 0%,
        #04070f 0,
        rgba(4, 7, 15, 0.85) 28%,
        rgba(4, 7, 15, 0.5) 58%,
        rgba(4, 7, 15, 0.2) 80%,
        rgba(4, 7, 15, 0) 100%);
}
.apex-map-canvas {
    position: relative; width: 100%; max-width: 1000px; margin: 0 auto 1rem;
    min-height: 260px;
}
/* The globe canvas fills the map band. The vignette that used to sit on the SVG is gone —
   the globe has its own rim and the sphere edge does the same job honestly. */
.apex-map-canvas canvas {
    width: 100%; height: 100%; display: block;
    touch-action: none;                 /* the globe claims gestures inside its own box */
    cursor: grab;
}
.apex-map-canvas canvas:active { cursor: grabbing; }

/* Scroll cue — sits BELOW the map band in normal flow, so a drag on it scrolls the page
   instead of being swallowed by the canvas's touch-action:none. */
.apex-scrollcue {
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    margin: 0.9rem auto 0; padding: 0.35rem 0.9rem 0.5rem;
    color: rgba(255, 255, 255, 0.62);
    background: none; border: 0; border-radius: 8px; font: inherit; cursor: pointer;
    transition: opacity 0.4s ease, color 0.2s ease; opacity: 1;
}
.apex-scrollcue:hover, .apex-scrollcue:focus-visible { color: #fff; }
.apex-scrollcue:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 2px; }
.apex-scrollcue.is-gone { opacity: 0; }
.apex-scrollcue-text {
    font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
.apex-scrollcue svg { animation: apex-cue-bob 1.9s ease-in-out infinite; }
@keyframes apex-cue-bob {
    0%, 100% { transform: translateY(0);    opacity: 0.55; }
    50%      { transform: translateY(5px);  opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .apex-scrollcue svg { animation: none; opacity: 0.85; }
}
.apex-map-fallback {
    display: flex; align-items: center; justify-content: center; min-height: 260px;
    margin: 0; border: 2px dashed rgba(255, 255, 255, 0.28); border-radius: 12px;
    background: rgba(255, 255, 255, 0.05); color: var(--on-dark-soft); letter-spacing: 0.03em;
}
/* Country colours now live in globe.js, which paints them onto the canvas — there are no
   SVG paths left to style, and no hit proxies: you zoom into Malta instead of faking a
   bigger target for it. */

/* Hover popup */
.apex-map-popup {
    position: absolute; z-index: 5; min-width: 190px; max-width: 250px;
    background: #fff; color: var(--ink); border-radius: 8px; padding: 0.7rem 0.85rem;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4); font-size: 0.9rem; text-align: left;
    /* Read-only tooltip: never intercept a click aimed at the country shape underneath. */
    pointer-events: none;
    /* Pop + fade in. The origin is the edge nearest the country, so it grows out of the
       shape; map.js flips it when the popup has to sit below instead of above. */
    opacity: 0; transform: translateY(6px) scale(0.94); transform-origin: 50% 100%;
    transition: opacity 0.16s ease, transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.apex-map-popup.is-below { transform: translateY(-6px) scale(0.94); transform-origin: 50% 0; }
.apex-map-popup.is-shown, .apex-map-popup.is-below.is-shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .apex-map-popup { transition: none; transform: none; }
}
.apex-map-popup h3 { margin: 0 0 0.35rem; font-size: 1rem; color: var(--navy); }
.apex-map-popup .pop-site { display: inline-block; font-weight: 700; margin-bottom: 0.45rem; text-decoration: none; }
.apex-map-popup .pop-dist strong { display: block; color: #33405a; }
.apex-map-popup .pop-dist span { display: block; color: var(--muted); font-size: 0.85rem; }
.apex-map-popup a { color: var(--link); }

/* Filter hint bar */
/* Sits BELOW the hairline (see the canvas border above) — it is the way back out of a
   selection, so it belongs with the list it filtered, not inside the map band. */
.apex-map-hint {
    display: flex; gap: 0.75rem; align-items: center; justify-content: center;
    margin: 1.15rem 0 0; color: var(--on-dark);
}
.apex-map-hint[hidden] { display: none; }
#apex-map-hint-text { font-weight: 700; }
#apex-map-reset {
    font: inherit; background: rgba(255, 255, 255, 0.12); color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 6px;
    padding: 0.3rem 0.75rem; cursor: pointer;
}
#apex-map-reset:hover { background: rgba(255, 255, 255, 0.2); }
/* ---- Countries A–Z ----------------------------------------------------------------------
   One row per country, carrying whichever of the two we have side by side. The columns are
   labelled because the two things are NOT interchangeable: a .eu site is SolvAir's own and
   permanent, a distributor is an independent partner and can change. */
.apex-az { margin-top: 1rem; }
.apex-az-note { color: var(--on-dark-soft); font-size: 0.92rem; margin: -0.6rem 0 1.75rem; }
/* min-height: filtering to one country leaves the list ~200px tall, and the globe band's
   deep negative margin would then climb over the row's contact lines. Never bites at 29 rows. */
.apex-az-list { list-style: none; margin: 0; padding: 0; min-height: 300px; }
.apex-az-list li { padding: 1.35rem 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.apex-az-list li.is-here { box-shadow: inset 3px 0 0 #6f9be6; padding-left: 1rem; }

.az-country { font-size: 1.3rem; font-weight: 400; color: #fff; margin: 0 0 0.85rem; }
.az-tag {
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; vertical-align: middle;
    color: var(--on-dark-soft); border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px; padding: 0.12rem 0.55rem; margin-left: 0.6rem;
}
.az-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 1.1rem 2.5rem; }
@media (max-width: 620px) { .az-cols { grid-template-columns: 1fr; } }
.az-label {
    display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--on-dark-soft); opacity: 0.7; margin-bottom: 0.35rem;
}
.az-site-link { font-weight: 700; }
.az-empty { color: rgba(255, 255, 255, 0.28); }
.az-company { display: block; color: #fff; }
/* Address: collapsed behind a native <details> so 19 rows don't read as a wall of text. */
.az-address { margin: 0.3rem 0 0.55rem; }
.az-address > summary {
    display: inline-block; cursor: pointer; list-style: none;
    font-size: 0.85rem; color: var(--on-dark-soft); opacity: 0.8;
}
.az-address > summary::-webkit-details-marker { display: none; }
.az-address > summary::after { content: ' \25be'; }        /* ▾ / ▴ */
.az-address[open] > summary::after { content: ' \25b4'; }
.az-address > summary:hover { opacity: 1; color: #cfe0ff; }
.apex-az-list address { font-style: normal; color: var(--on-dark-soft); font-size: 0.88rem; margin: 0.35rem 0 0; }
.apex-az-list dl { display: grid; grid-template-columns: auto 1fr; gap: 0.12rem 0.75rem; margin: 0; font-size: 0.9rem; }
.apex-az-list dt { color: var(--on-dark-soft); opacity: 0.75; }
.apex-az-list dd { margin: 0; }
.apex-az-list a { color: #cfe0ff; text-decoration: none; word-break: break-word; }
.apex-az-list a:hover { text-decoration: underline; }

/* ---- Filter animation (a map selection narrows the list to one country) ---- */
.apex-az-list li.is-hiding {
    opacity: 0; transform: scale(0.97); pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
@keyframes apexItemIn {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}
.apex-az-list li.is-entering { animation: apexItemIn 0.35s ease both; }
@media (prefers-reduced-motion: reduce) {
    .apex-az-list li.is-entering { animation: none; }
    .apex-az-list li.is-hiding { transition: none; }
}

/* ---- Full-width bands (client strip, contact/brochure) ---- */
.apex-band { width: 100%; }
/* Contact + brochure band: the country sites' UI language (Jason 2026-09-29), with values measured from a rendered
   country page: pale-grey band, Lato Light 36px navy headings, #555 body text, white 6px-radius fields, the green
   submit and the dark square "Download PDF now" button with its italic size note. */
.apex-help-band { background: #f6f6f6; padding: 3.5rem 1.25rem; border-top: 1px solid #e2e7ef; }
.apex-help {
    max-width: 1116px; margin: 0 auto;
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem;
}
@media (max-width: 720px) { .apex-help { grid-template-columns: 1fr; } .apex-panel h2 { font-size: 30px; } }
.apex-panel { background: none; border: 0; border-radius: 0; padding: 0; color: var(--ink); }
.apex-panel h2 { font-family: 'Lato', sans-serif; font-weight: 300; font-size: 36px; line-height: 1.1; color: #2a3e79; text-align: left; margin: 0 0 0.75rem; }
.apex-panel > p { font-size: 18px; line-height: 1.6; color: #555; margin: 0 0 1.25rem; }
.apex-form { display: grid; gap: 12px; }
.apex-form input, .apex-form textarea {
    font: inherit; font-size: 15.5px; width: 100%; padding: 13px 16px; border: 1px solid #d5dae2;
    border-radius: 6px; background: #fff; color: #2b3037;
}
.apex-form input::placeholder, .apex-form textarea::placeholder { color: #98a0ab; }
.apex-form textarea { resize: vertical; min-height: 150px; }
.apex-form button {
    font: inherit; font-size: 20px; font-weight: 600; justify-self: start; width: 100%; max-width: 390px;
    background: #b0d039; color: #fff; border: 0; border-radius: 6px; padding: 15px 0; cursor: pointer;
    transition: background-color 0.2s ease;
}
.apex-form button:hover, .apex-form button:focus-visible { background: #9dbd2b; }
.apex-form-note { font-size: 0.78rem; color: var(--muted); margin: 0.1rem 0 0; }
.apex-brochure { text-align: left; }
.apex-brochure-cover { display: block; margin: 0 0 1.25rem; }
.apex-brochure-cover img { display: block; width: 100%; max-width: 380px; height: auto; }
/* The country sites' .button.button-grey */
.apex-button-grey, .popup-print-dl-btn {
    display: inline-block; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 1.6; font-weight: 400;
    background: #3f3f3f; color: #fff; border: 1px solid #3f3f3f; border-radius: 0; padding: 10px 48px;
    text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease;
}
.apex-button-grey:hover, .apex-button-grey:focus-visible,
.popup-print-dl-btn:hover, .popup-print-dl-btn:focus-visible { background: #222; border-color: #222; color: #fff; }
.apex-brochure-note { color: #555; font-size: 14.4px; margin: 0.6rem 0 0; }

/* ---- Client logo strip ----
   Ported verbatim from solvair.co.uk (wp-content/themes/solvair-theme/inc/client-logos.php)
   so the apex behaves identically: a transform-driven marquee that drifts with page scroll and
   can be dragged, rather than the old native overflow-x scroller.
   touch-action:pan-y — the strip takes horizontal gestures, the page keeps vertical ones. */
.logo-strip-wrap { width: 100%; overflow: hidden; background: #fff; padding: 26px 0; }
.logo-strip {
    width: 100%; overflow: hidden; cursor: grab; touch-action: pan-y;
    /* Ghost both ends so it reads as "there is more" rather than as a hard crop. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.logo-strip.is-dragging { cursor: grabbing; }
.logo-strip__track { display: flex; align-items: center; width: max-content; will-change: transform; }
.logo-strip__item {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    height: 66px; padding: 0 39px; box-sizing: border-box;
}
.logo-strip__item img {
    max-height: 46px; max-width: 150px; width: auto; height: auto; object-fit: contain;
    user-select: none; -webkit-user-drag: none; pointer-events: none;
}
@media (max-width: 768px) {
    .logo-strip-wrap { padding: 18px 0; }
    .logo-strip__item { height: 56px; padding: 0 30px; }
    .logo-strip__item img { max-height: 38px; max-width: 128px; }
}

/* ---- Showcase: the dark listings fade into the full-width (uncropped) globe image, which
        ends flush against the white strip below. ---- */
/* Pulled up under the end of the A–Z list so the globe rises behind the last rows instead of
   sitting below a gap. No background of its own — the page gradient shows through, which is what
   the globe's own top fade (mask below) needs to blend into. */
.apex-showcase {
    position: relative; text-align: center; overflow: hidden;
    /* The band's height is the globe image's, which scales with viewport width — so the overlap
       has to scale too, or on a phone the "2000 satisfied customers" line rides up into the last
       row. Capped so it doesn't run away on ultrawide.
       Deep pull (was -4vw): at -4vw a tall empty stretch of globe sat between the last A–Z row
       and the customers line. Overlapping the listings further crops that dead space off the
       TOP of the band — and the globe's own top fade (mask below) covers most of the overlap,
       so the listings still read (.apex-main z-index 3 keeps them above). */
    margin-top: max(-190px, -13vw);
}
/* Text pushed down over the lower globe, close to the logo strip. */
.apex-showcase-inner {
    /* bottom 4.25rem, not 2: sitting almost on the logo strip left the copy hugging the
       bottom of a tall band. Lifted so it reads centred in the globe that's visible. */
    position: absolute; left: 0; right: 0; bottom: 4.25rem; z-index: 2;
    max-width: 1000px; margin: 0 auto; padding: 0 1.25rem;
}
.apex-showcase-head {
    /* weight 100: the self-hosted Lato stops at 300 (Light), so this resolves to Light —
       which is the intended look. No Hairline face is shipped just for one line. */
    font-size: clamp(1.35rem, 3vw, 2.15rem); font-weight: 100;
    color: #eaf1ff; line-height: 1.3; margin: 0;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}
/* On a phone the globe band is shorter than the line of copy, so absolutely positioning the
   copy inside it pushes it up out of the band and over whatever sits above. Let it flow. */
@media (max-width: 700px) {
    .apex-showcase-inner { position: static; padding: 1.25rem 1.25rem 1.5rem; }
}
.apex-globe {
    display: block; width: 100%; height: auto; position: relative; z-index: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 26%);
}
.apex-btn {
    display: inline-block; font-weight: 700; text-decoration: none; color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 6px; padding: 0.7rem 1.5rem;
    background: rgba(255, 255, 255, 0.08);
}
.apex-btn:hover { background: rgba(255, 255, 255, 0.18); }

/* ---- Fixed bottom strip: logo + two brochure links + copyright ----
   There is no separate dark-blue footer any more. Instead the strip itself turns navy as you
   arrive at the bottom of the page and back to white as you leave, so the page is finished by
   the bar that is already there. `--t` is 0..1, set by map.js on scroll, and everything below
   is driven from it — background, text, borders and which logo is showing. */
/* Must equal the strip's height EXACTLY: any more and the page background shows as a dark
   band between the content and the strip — which is where the blue footer used to be and read
   as a leftover once it was removed; any less and the strip covers the last line. map.js
   measures the strip and sets this precisely, since the strip's height changes with wrapping;
   the value here is the pre-script fallback. */
body { padding-bottom: 66px; }
.apex-strip {
    --t: 0;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
    display: flex; align-items: center; gap: 0.75rem;
    min-height: 66px; padding: 0.5rem 1.25rem;      /* 30% taller again (was 51px) */
    background: #fff;
    /* No border-top — the drop shadow alone separates the strip from the content. A hairline
       on top of it read as a stray white line, and it is the wrong edge to draw twice. */
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
    isolation: isolate;                              /* keep the tint behind the content */
}
/* The navy is a separate layer faded in over the white, rather than an animated background-
   color: one compositor-friendly property, and the white stays underneath as the fallback if
   the script never runs. */
.apex-strip::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: var(--navy); opacity: var(--t);
}
.apex-strip-logo {
    flex: 0 0 auto; display: block; position: relative;
    width: 83px; height: 26px;
}
.apex-strip-logo img {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block;
}
.apex-strip-logo-dark  { opacity: calc(1 - var(--t)); }
.apex-strip-logo-light { opacity: var(--t); }
/* Links take the remaining width and centre within it — the logo sits left, links read centred. */
.apex-strip-links {
    flex: 1 1 auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 0.3rem 1.1rem; font-size: 0.9rem; line-height: 1.3; text-align: center;
}
.apex-strip-link {
    /* Navy on white at the top of the page, white on navy at the bottom — the text has to
       travel the opposite way to the background or it disappears halfway. The plain colour is
       the fallback for anything without color-mix. */
    color: var(--navy);
    color: color-mix(in srgb, #ffffff calc(var(--t) * 100%), var(--navy));
    text-decoration: none; font-weight: 600;
    padding: 0.15rem 0.25rem; border-radius: 4px;
}
.apex-strip-link:hover, .apex-strip-link:focus {
    color: var(--link);
    color: color-mix(in srgb, #9dc0ff calc(var(--t) * 100%), var(--link));
    text-decoration: underline;
}
.apex-strip-divider {
    width: 1px; height: 1rem;
    background: rgba(17, 39, 93, 0.25);
    background: color-mix(in srgb, rgba(255,255,255,.4) calc(var(--t) * 100%), rgba(17,39,93,.25));
}
/* Copyright sits right, and stays quiet — grey, not another navy link fighting the two CTAs. */
.apex-strip-copy {
    flex: 0 0 auto; font-size: 0.78rem; white-space: nowrap;
    color: var(--muted);
    color: color-mix(in srgb, rgba(255,255,255,.6) calc(var(--t) * 100%), var(--muted));
}
@media (max-width: 480px) {
    .apex-strip-links { gap: 0.15rem 0.75rem; font-size: 0.8rem; }
    .apex-strip-divider { display: none; }   /* labels wrap gracefully; neither link is hidden */
    .apex-strip-logo { width: 70px; height: 22px; }
    .apex-strip-copy { display: none; }      /* the two CTAs earn the width on a phone */
    body { padding-bottom: 84px; }           /* fallback only; map.js measures the real height */
}

/* ---- Cookie consent banner ----
   Bottom-left card, clear of the fixed strip (which is 66px + shadow). Deliberately NOT a
   full-width blocker: nothing here is gated behind consent except analytics, so it should
   inform without hijacking the page. */
.apex-consent {
    position: fixed; left: 1rem; bottom: calc(66px + 1rem); z-index: 9500;
    max-width: 380px; padding: 1rem 1.1rem;
    background: #fff; color: var(--ink); border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    font-size: 0.86rem; line-height: 1.5;
    opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease;
}
.apex-consent.is-shown { opacity: 1; transform: none; }
.apex-consent-text { margin: 0 0 0.8rem; }
.apex-consent-text a { color: var(--link); }
.apex-consent-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.apex-consent-btn {
    font: inherit; font-weight: 700; cursor: pointer;
    padding: 0.45rem 0.9rem; border-radius: 6px; border: 1px solid transparent;
}
.apex-consent-btn.is-primary { background: var(--navy); color: #fff; }
.apex-consent-btn.is-primary:hover { background: #1b3a80; }
.apex-consent-btn.is-secondary { background: #fff; color: var(--ink); border-color: rgba(17, 39, 93, 0.3); }
.apex-consent-btn.is-secondary:hover { background: #f2f4f8; }
.apex-consent-btn:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
@media (max-width: 480px) {
    .apex-consent { left: 0.6rem; right: 0.6rem; max-width: none; bottom: calc(84px + 0.6rem); }
}
@media (prefers-reduced-motion: reduce) {
    .apex-consent { transition: none; transform: none; }
}

/* ---- Brochure popup (ported from english/assets/css/site.css .popup-print* + .cf-ts,
   and the .solvair-form-response feedback rules). The dialog is a light panel by design;
   colours kept as the country builds; the download button shares .apex-button-grey (the country
   .button-grey) defined with the contact/brochure band above. ---- */
.solvair-form-response { margin: 1em 0; padding: 0.8em 1em; border-radius: 6px; font-size: 1em; line-height: 1.4; }
.solvair-form-response.is-ok { background: #e6f4ea; color: #1e7e34; border: 1px solid #b7dfc1; }
.solvair-form-response.is-error { background: #fde8e8; color: #b02a37; border: 1px solid #f3c2c7; }
.solvair-form-noscript { color: #3a3f47; font-size: 15px; }

.popup-print[hidden] { display: none; }
.popup-print { position: fixed; inset: 0; z-index: 10000; }
.popup-print-overlay { position: absolute; inset: 0; background: rgba(20, 22, 60, 0.72); }
.popup-print-dialog {
    position: relative;
    background: #fff;
    color: #2b3037;
    max-width: 820px;
    width: calc(100% - 32px);
    margin: 6vh auto 0;
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
    max-height: 88vh;
    overflow-y: auto;
}
.popup-band { padding: 34px 42px 32px; }
.popup-band-download { background: #fff; }
.popup-band-request { background: #f4f6f8; }
/* Download band = text (left) + brochure cover (right), like the country brochure section. */
.popup-band-download-inner { display: flex; gap: 30px; align-items: center; }
.popup-print-text { flex: 1 1 auto; min-width: 0; }
.popup-print-cover {
    flex: 0 0 auto; width: 200px; height: auto; display: block;
}
.popup-print-dialog h2 { margin: 0 0 10px; font-size: 27px; color: var(--navy); }
.popup-band p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.6; color: #3a3f47; }
.popup-print-filesize { font-size: 12.5px !important; margin: 12px 0 0 !important; color: #7a8089; }
.popup-print-intro { margin: 0 0 20px !important; }
.popup-print-form input, .popup-print-form textarea { font-family: inherit; } /* the address box fell back to monospace */
.popup-print-grid { display: grid; grid-template-columns: 1fr; gap: 0 24px; }
@media (min-width: 640px) {
    .popup-print-grid { grid-template-columns: 1fr 1fr; }
    .popup-print-address textarea { height: calc(100% - 14px); }
}
@media (max-width: 639px) {
    /* stack in natural order with the submit LAST (after the address) */
    .popup-print-grid { display: flex; flex-direction: column; }
    .popup-print-fields, .popup-print-address { display: contents; }
    .popup-print-form input[type="submit"] { order: 9; }
    .popup-band { padding: 26px 24px; }
    /* Cover above the text when the band is too narrow for two columns. */
    .popup-band-download-inner { flex-direction: column-reverse; gap: 18px; align-items: flex-start; }
    .popup-print-cover { width: 160px; }
}
.popup-print-form input.wpcf7-text,
.popup-print-form textarea.wpcf7-textarea {
    width: 100%;
    margin: 0 0 14px;
    padding: 13px 16px;
    font-size: 15.5px;
    line-height: 1.4;
    color: #2b3037;
    background: #fff;
    border: 1px solid #d5dae2;
    border-radius: 6px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.popup-print-form input.wpcf7-text:focus,
.popup-print-form textarea.wpcf7-textarea:focus {
    outline: none;
    border-color: #1a63ab;
    box-shadow: 0 0 0 3px rgba(26, 99, 171, 0.14);
}
.popup-print-form ::placeholder { color: #98a0ab; }
.popup-print-address textarea { min-height: 150px; resize: vertical; }

/* "Speak to a SolvAir engineer: <number>" under the download button. Sized up from the
   filesize note next to it — this is an action, not a footnote. */
.popup-print-call { margin: 0.55rem 0 0; font-size: 0.95rem; color: var(--ink); }
.popup-print-call a { font-weight: 700; text-decoration: none; white-space: nowrap; }
.popup-print-call a:hover, .popup-print-call a:focus { text-decoration: underline; }
.popup-print-form input[type="submit"] {
    width: 100%; display: block; margin: 0 0 14px;
    background-color: #b0d039; color: #fff; border: 0; border-radius: 6px;
    padding: 14px 0; font-size: 16.5px; font-weight: 600; letter-spacing: 0.2px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(120, 150, 30, 0.25);
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.popup-print-form input[type="submit"]:hover {
    background-color: #a2c22d;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(120, 150, 30, 0.3);
}
.popup-print-next { margin: 8px 0 0 !important; font-size: 13.5px !important; color: #6a7078; }
.popup-print-close {
    position: absolute; top: 14px; right: 16px; z-index: 1;
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; line-height: 1; color: #9aa1ab; text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.popup-print-close:hover { color: #2b3037; background: #eef1f4; }

/* Anti-spam box — a notice, not a control: it must never outweigh the submit button. */
.cf-ts { display: block; margin: 22px 0 0; padding: 14px 16px 12px; border: 1px solid #e2e4e7; border-radius: 6px; background: #f7f7f8; max-width: 420px; }
.cf-ts__title { display: block; margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #5b6169; line-height: 1.2; }
.cf-ts__note { display: block; margin: 8px 0 0; font-size: 12px; color: #6c727a; line-height: 1.4; }
.cf-ts .cf-turnstile { margin: 0; }
.cf-ts .cf-turnstile iframe { max-width: 100%; }
/* Idle = Turnstile verifying invisibly: the box collapses (not display:none — Turnstile
   can't render into a display:none container). popup.js drops the class when needed. */
.cf-ts.is-idle { height: 0; margin: 0; padding: 0; border: 0; overflow: hidden; }