/* ==========================================================================
   v20.css — home-v20 deltas ONLY (2026-07-15, 9 Jul client-call build).
   Loaded LAST, after v18.css. Every class is prefixed .v20- to avoid the class
   collisions with zara.css that burned this project before. Three changes:
     A · horizontal animated TIMELINE (how-it-works)
     B · "your country isn't listed?" CTA under the comparison tool
     C · auto-sliding European-cities carousel (compliance section media)
   ========================================================================== */


/* ======================= CHANGE A — HORIZONTAL TIMELINE =======================
   One continuous cobalt line with 5 nodes. Desktop (≥980px): a native position:sticky
   track — as you scroll it, the JS scrubs the line-fill L→R (scaleX) and lights each
   node/card in sequence. Mobile (<980px): a VERTICAL timeline (line on the left, nodes
   stacked). No-JS / reduced-motion: the fill defaults to scaleX(1) (fully drawn) and the
   nodes render active — a complete, static timeline. The JS resets the fill to 0 before it
   animates (desktop+motion only) and restores '' on teardown. */
.v20-tl{background:#fff;position:relative;z-index:1;padding-block:0}
.v20-tl h2{margin-bottom:clamp(2.4rem,5vw,3.4rem)}

.v20-tl-track{position:relative;margin-top:clamp(1rem,2vw,1.6rem)}
.v20-tl-row{list-style:none;margin:0;padding:0;padding-top:34px;
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.7rem,1.3vw,1.1rem)}

/* the connector line runs node-centre → node-centre (nodes are centred in 5 equal columns,
   so their centres sit at 10/30/50/70/90% — the line is inset to 10%/90%). */
.v20-tl-line{position:absolute;top:34px;left:10%;right:10%;height:3px;
  background:rgba(1,30,147,.18);border-radius:2px;overflow:hidden}
.v20-tl-fill{display:block;height:100%;width:100%;background:var(--blue);
  transform:scaleX(1);transform-origin:left center;will-change:transform}

.v20-tl-item{position:relative;padding-top:42px}
.v20-tl-node{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  width:48px;height:48px;border-radius:50%;background:#fff;border:2px solid var(--blue);
  display:grid;place-items:center;z-index:2;transition:background .3s ease,border-color .3s ease}
.v20-tl-n{grid-area:1/1;font-family:var(--serif);font-weight:400;font-size:1.1rem;color:var(--blue);transition:opacity .25s ease}
.v20-tl-chk{grid-area:1/1;width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.5);transition:opacity .3s ease,transform .3s ease}

.v20-tl-card{border:1px solid var(--line);background:#fff;padding:1.6rem 1.3rem;
  transition:background .4s ease,border-color .4s ease}
.v20-tl-card h3{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(1.12rem,1.5vw,1.4rem);color:var(--blue);line-height:1.15}
.v20-tl-card p{margin-top:.55rem;font-size:.9rem;color:var(--muted);line-height:1.5;transition:color .4s ease}

/* activated node/card (added progressively by the scrub on desktop) */
.v20-tl-item.is-on .v20-tl-node{background:var(--blue);border-color:#fff}
.v20-tl-item.is-on .v20-tl-n{opacity:0}
.v20-tl-item.is-on .v20-tl-chk{opacity:1;transform:scale(1)}
.v20-tl-item.is-on .v20-tl-card{background:var(--blue);border-color:var(--blue)}
.v20-tl-item.is-on .v20-tl-card h3,.v20-tl-item.is-on .v20-tl-card p{color:#fff}

/* desktop: the sticky scroll-track (native sticky, no pin-spacer → no engage/release jump) */
@media (min-width:980px){
  .v20-tl .v20-tl-scroll{height:200vh;position:relative}
  .v20-tl .v20-tl-stick{position:sticky;top:0;height:100vh;box-sizing:border-box;background:#fff;
    display:flex;flex-direction:column;justify-content:center;padding:110px 0 2.5rem}
}

/* mobile: VERTICAL timeline — line on the left, nodes stacked, cards to the right.
   No scroll animation here (the scrub is ≥980px only), so the line is drawn and the
   nodes render active by default; cards stay white/readable. */
@media (max-width:979px){
  .v20-tl .v20-tl-scroll{height:auto}
  .v20-tl .v20-tl-stick{position:static;padding-block:clamp(2.5rem,8vw,4rem)}
  .v20-tl-track{margin-top:clamp(1.4rem,4vw,2rem)}
  .v20-tl-row{grid-template-columns:1fr;gap:0;padding-top:0}
  .v20-tl-line{top:0;bottom:0;left:23px;right:auto;width:3px;height:auto}
  .v20-tl-fill{width:100%;height:100%;transform:scaleY(1);transform-origin:top center}
  .v20-tl-item{padding-top:0;padding-left:66px;padding-bottom:clamp(1.5rem,5vw,2.2rem);min-height:48px}
  .v20-tl-item:last-child{padding-bottom:0}
  .v20-tl-node{top:0;left:23px;transform:translate(-50%,0)}
  .v20-tl-node{background:var(--blue);border-color:#fff}
  .v20-tl-n{opacity:0}
  .v20-tl-chk{opacity:1;transform:scale(1)}
  .v20-tl-card{background:#fff;border-color:var(--line)}
  .v20-tl-card h3{color:var(--blue)}
  .v20-tl-card p{color:var(--muted)}
}

/* reduced motion (any width): static, fully drawn — nodes active, no transitions.
   Cards stay white (we never colour them without the scrub). */
@media (prefers-reduced-motion:reduce){
  .v20-tl-fill{transform:scaleX(1)}
  .v20-tl-node{background:var(--blue);border-color:#fff}
  .v20-tl-n{opacity:0}
  .v20-tl-chk{opacity:1;transform:scale(1)}
  .v20-tl-node,.v20-tl-chk,.v20-tl-card,.v20-tl-n{transition:none}
}


/* ======================= CHANGE B — "COUNTRY NOT LISTED" CTA ==================
   Quiet one-liner now DIRECTLY under the picker row, above the cards (George 2026-07-16). */
.v16-why2 .v20-notlisted{margin-top:1rem;font-size:.95rem;color:var(--muted);line-height:1.6}
.v16-why2 .v20-notlisted a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.v16-why2 .v20-notlisted a:hover{color:var(--red)}

/* Change B (sizing, George 2026-07-16): the "See it next to <select>" row was rendering at
   display scale — the native <select> inherited it and its dropdown opened huge. Drop the heading
   to h3 scale and set the <select> to body/paragraph text size so the dropdown renders normally
   and the row sits neatly inline. Keeps the serif + the quiet underline chrome. */
.v16-why2 .cmpbig{font-size:clamp(1.2rem,1.9vw,1.55rem)}
.v16-why2 .bigsel{font-size:clamp(1rem,1.4vw,1.15rem);border-bottom-width:1.5px;
  padding:.02em 1.35em .1em .12em}


/* ======================= CHANGE C — CITIES CAROUSEL ==========================
   Replaces the single static image in the navy compliance section. The wrapper keeps its
   .media.cooler classes, so the slides inherit the section's muted "cooler" filter and the
   fixed-height box (from .split .media) — the slides are absolutely positioned, so there is
   NO layout shift. Crossfade only; a thin row of dots is the only chrome. */
.v20-carousel{position:relative}
.v20-slides{position:absolute;inset:0}
.v20-slide{position:absolute;inset:0;margin:0;opacity:0;pointer-events:none;transition:opacity 1s ease}
.v20-slide.is-active{opacity:1;pointer-events:auto}
.v20-slide img{width:100%;height:100%;object-fit:cover;display:block}
.v20-slide figcaption{position:absolute;left:0;bottom:0;margin:1rem;padding:.28rem .7rem;
  font-family:var(--serif);font-weight:300;font-size:.95rem;letter-spacing:.02em;color:#fff;
  background:rgba(13,31,60,.5);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.v20-dots{position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;gap:.5rem;justify-content:center;padding:1rem}
.v20-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.5);cursor:pointer;transition:background .25s ease,transform .25s ease}
.v20-dot:hover{background:rgba(255,255,255,.8)}
.v20-dot.is-active{background:#fff;transform:scale(1.25)}
/* prev/next arrows (George 2026-07-16): subtle thin chevrons on the photo edges signalling the
   photos can be swiped — quiet white at rest, stronger on hover/focus, no button box. */
.v20-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:34px;height:46px;display:grid;place-items:center;padding:0;border:0;background:none;
  color:#fff;opacity:.5;cursor:pointer;transition:opacity .25s ease}
.v20-arrow:hover,.v20-arrow:focus-visible{opacity:1}
.v20-arrow:focus{outline:none}
.v20-arrow:focus-visible{outline:2px solid rgba(255,255,255,.85);outline-offset:2px}
.v20-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.v20-prev{left:.25rem}
.v20-next{right:.25rem}
@media (prefers-reduced-motion:reduce){
  .v20-slide{transition:none}
  .v20-arrow{transition:none}
}


/* ======================= HEADER — George's pick (lab variation #2) ===========
   Ported from mockups/headers-v20.html (hv20-h03, the pale-tint two-line institutional
   header). Every class stays prefixed .hv20- (no collision with zara.css / the v14–v18
   layers). Reuses the shared tokens (--blue/--tint/--line/--serif) + .btn/.btn-primary
   (the red CTA) + the .zic red-seal icon system. STICKY for real via .is-sticky (BOTH
   lines stay on scroll — the 9 Jul call decision); z-index above page content, below the
   floating contact tab (z61) + glass dock (z60). Mobile (<1200px) collapses to the big-logo
   + call + hamburger bar with one dropdown. hv20.css is NOT loaded on this page. */

/* shared shell */
.hv20-h{position:relative;background:#fff}
.hv20-h.is-sticky{position:sticky;top:0;z-index:55}
.hv20-in{max-width:1440px;margin:0 auto;padding-inline:clamp(1rem,2.5vw,2.25rem)}
.hv20-logolink{display:inline-flex;align-items:center;flex:none}
.hv20-logo{height:clamp(70px,5.6vw,82px);width:auto;display:block}

/* primary services menu — comfortably readable (~17px) */
.hv20-nav{display:flex;align-items:center;gap:clamp(1rem,1.7vw,1.6rem);list-style:none;margin:0;padding:0}
.hv20-nav a{font-size:clamp(1rem,1.15vw,1.06rem);color:var(--blue);font-weight:400;letter-spacing:.005em;
            white-space:nowrap;line-height:1;transition:opacity .2s ease}
.hv20-nav a:hover{opacity:.55}

/* secondary links (Contact) — body-copy colour; hierarchy from size, not grey */
.hv20-sec{display:inline-flex;align-items:center;gap:1.3rem;list-style:none;margin:0;padding:0}
.hv20-sec a{font-size:.92rem;color:var(--blue);font-weight:400;letter-spacing:.01em;white-space:nowrap}
.hv20-sec a:hover{opacity:.55}

/* top-line utility items (phone / address) — body-copy colour throughout */
.hv20-tu{display:inline-flex;align-items:center;gap:.55rem;font-size:.92rem;color:var(--blue);
         white-space:nowrap;line-height:1.2}
.hv20-tu .zic{width:20px;height:20px;color:var(--blue);flex:none}
.hv20-tu b{font-weight:500;color:var(--blue)}
.hv20-tu.link:hover{opacity:.6}

/* language picker — off locale dimmed by opacity, not grey */
.hv20-lang{display:inline-flex;align-items:center;gap:.45rem;font-size:.92rem;letter-spacing:.05em}
.hv20-lang a{color:var(--blue);opacity:.6}
.hv20-lang a.on{color:var(--blue);opacity:1;font-weight:600}
.hv20-lang .sep{opacity:.4;color:var(--blue)}
.hv20-lang .zic{width:18px;height:18px;color:var(--blue);margin-right:.15rem}

/* the CTA — confident red, prominent */
.hv20-cta{flex:none;font-size:1rem}

/* variation #2 · PALE-TINT UTILITY: top line on --tint (phone + address left · Contact + EN/DE
   right) | main: logo · 4 items (+ muted Team) · red CTA */
.hv20-h03 .hv20-top{background:var(--tint)}
.hv20-h03 .hv20-top .hv20-in{display:flex;align-items:center;gap:2rem;padding-block:.7rem}
.hv20-h03 .hv20-topright{margin-left:auto;display:flex;align-items:center;gap:1.5rem}
.hv20-h03 .hv20-main .hv20-in{display:flex;align-items:center;gap:clamp(1rem,1.8vw,1.6rem);padding-block:1.3rem}
.hv20-h03 .hv20-nav{margin-left:.4rem}
.hv20-h03 .hv20-nav .team a{color:var(--blue);opacity:.55}   /* demoted by opacity, not grey */
.hv20-h03 .hv20-cta{margin-left:auto}
.hv20-h03 .hv20-logo{height:clamp(72px,5.7vw,84px)}

/* mobile collapse: BIG logo + call + hamburger, one dropdown */
.hv20-mbar{display:none;align-items:center;justify-content:space-between;gap:1rem;
           padding:.85rem clamp(1.25rem,5vw,2rem);background:#fff}
.hv20-mbar .hv20-logo{height:clamp(36px,11vw,46px)}   /* the 1100×240 logo is WIDE — shrink at 320 */
.hv20-mact{display:flex;align-items:center;gap:.35rem}
.hv20-mcall{display:inline-flex;padding:.45rem}
.hv20-mcall .zic{width:26px;height:26px;color:var(--blue)}
.hv20-burger{background:none;border:0;cursor:pointer;padding:.5rem;display:inline-flex;align-items:center}
.hv20-drop{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;
           box-shadow:0 20px 50px rgba(1,30,147,.13);border-top:1px solid var(--line);
           max-height:0;overflow:hidden;opacity:0;
           transition:max-height .42s ease,opacity .3s ease;z-index:30}
.hv20-drop.open{max-height:88vh;opacity:1;overflow-y:auto}
.hv20-drop a:not(.btn){display:block;padding:1rem clamp(1.25rem,5vw,2rem);
           font-size:1.12rem;color:var(--blue);border-bottom:1px solid var(--line)}
.hv20-drop a:not(.btn):hover{background:var(--wash)}
.hv20-drop .hv20-drop-sep{display:block;height:.5rem;background:var(--tint);border:0}
.hv20-drop .hv20-drop-info{padding:1rem clamp(1.25rem,5vw,2rem);display:flex;flex-direction:column;gap:.8rem;
           background:var(--tint)}
.hv20-drop .hv20-drop-info .hv20-tu{white-space:normal;align-items:flex-start}   /* address may wrap at 320 */
.hv20-drop a.btn{display:flex;margin:1.1rem clamp(1.25rem,5vw,2rem)}

/* a genuinely BIG header (large logo + four full-length service labels + CTA) needs desktop
   width, so it collapses to the mobile bar at 1200px */
@media (max-width:1200px){
  .hv20-h .hv20-desk{display:none !important}
  .hv20-mbar{display:flex}
  .hv20-drop{display:block}
}

/* anchor offset so on-page targets (#bulgaria, #start, …) clear the sticky header, no jump.
   Overrides zara.css [id]{scroll-margin-top:7rem} on this page only. */
[id]{scroll-margin-top:11rem}
@media (max-width:1200px){ [id]{scroll-margin-top:5.5rem} }