/* Autohaus Berlin — shared stylesheet (en / de / ar / fr) */

/* No web fonts are loaded from anywhere. This file used to @import Inter and
   Cairo from fonts.googleapis.com, which sends every visitor's IP address to
   Google on every page view. LG München I held exactly that to breach the
   GDPR (20.01.2022, 3 O 17493/20) and rejected legitimate interest as a legal
   basis, because the fonts could simply be hosted locally - so it cannot be
   fixed by mentioning it in the privacy policy.
   The stacks below still name Inter and Cairo first: a family name with no
   @font-face behind it only ever matches a copy already installed on the
   visitor's own device, and makes no network request. Everyone else gets the
   system's own UI face. */

:root {
  /* Deeper, more neutral ground. Premium dark reads near-black, not navy —
     the old #161826 was light enough to look flat under large type. */
  --bg: #0b0c11;
  --surface: #101219;
  --text: #ffffff;
  --accent: #9184d9;
  --accent-light: #d2cefd;
  --card-bg: #101219;
  --card-border: #22252e;
  --hairline: rgba(255,255,255,0.10);
  --badge-bg: rgba(145,132,217,0.14);
  --badge-text: #cfc8f5;
  --muted-70: #a7acb4;
  --muted-65: #969ba3;
  --muted-55: #7a7e84;
  --muted-40: #55585d;
  --band-bg: #101219;
  --error: #f0a5a5;

  /* Type scale — large tight display, small wide-tracked labels. */
  --display: clamp(38px, 6.4vw, 84px);
  --h2: clamp(27px, 3.4vw, 44px);
  --h3: clamp(18px, 1.4vw, 21px);
  --label-ls: 0.16em;
}

* { box-sizing: border-box; }

/* --sbw is the width of the vertical scrollbar. 100vw includes it, so the
   full-bleed bands (.showcase, .plate) have to subtract it or they sit 7-8px
   off centre and hang over the edge. site.js measures it; 0 is the correct
   fallback for overlay scrollbars and for no-JS. */
:root { --sbw: 0px; }

html, body { margin: 0; padding: 0; max-width: 100%; }

/* clip, not hidden. overflow-x:hidden on the root turns html into a scroll
   container, and position:sticky on the header then has nothing to stick to -
   the nav scrolled away with the page. clip contains the same overflow without
   creating a scroll container, so sticky keeps working. */
body { overflow-x: clip; }

body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.55;
}

:root {
  --font-latin: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
                'Helvetica Neue', Arial, sans-serif;
  /* SF Arabic / Geeza Pro on Apple, Segoe UI and Tahoma carry Arabic on
     Windows, Noto Sans Arabic on Android */
  --font-arabic: 'Cairo', 'SF Arabic', 'Geeza Pro', 'Segoe UI',
                 'Noto Sans Arabic', Tahoma, sans-serif;
}
body.font-latin { font-family: var(--font-latin); }
body.font-arabic { font-family: var(--font-arabic); }

/* Arabic is a connected script: negative tracking pulls glyphs together and
   sub-1.0 leading clips ascenders. The Latin display treatment is relaxed here. */
body.font-arabic .hero-title,
body.font-arabic .section-title,
body.font-arabic .article-title,
body.font-arabic .stat-value,
body.font-arabic .cta-band-title,
body.font-arabic .why-title,
body.font-arabic .quote-h1,
body.font-arabic .summary-heading { letter-spacing: normal; line-height: 1.3; }
body.font-arabic .section-label,
body.font-arabic .main-nav a,
body.font-arabic .btn-outline,
body.font-arabic .btn-outline-light,
body.font-arabic .btn-hero,
body.font-arabic .hero-eyebrow,
body.font-arabic .footer-heading { letter-spacing: 0.02em; }

::selection { background: rgba(145,132,217,0.3); }

a { color: inherit; }

img { max-width: 100%; }

.container { max-width: 1320px; margin: 0 auto; padding-inline: 28px; }

/* HEADER */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(11,12,17,0.82); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,0.06); }
.site-header .container { padding-block: 14px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; row-gap: 12px; }
.brand { display: flex; align-items: center; gap: 11px; margin-inline-end: auto; text-decoration: none; }
/* 96px was oversized for a header bar — a restrained mark reads more premium. */
.brand img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.brand span { font-size: 13.5px; font-weight: 500; letter-spacing: 0.2em; }
.main-nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.main-nav a { text-decoration: none; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-70); transition: color .15s ease; }
.main-nav a:hover, .main-nav a:focus-visible { color: #fff; }
.header-actions { display: flex; align-items: center; gap: 11.2px; }

.lang-switch { display: inline-flex; overflow: hidden; border: 1px solid var(--hairline); border-radius: 8px; }
.lang-switch a { display: inline-block; background: transparent; color: var(--muted-55); border: none; padding: 6px 11px; font-size: 12px; font-weight: 500; cursor: pointer; text-decoration: none; border-inline-start: 1px solid var(--hairline); }
.lang-switch a:first-child { border-inline-start: none; }
.lang-switch a.active { background: var(--accent); color: var(--bg); }

/* The switcher now sits in the bar rather than inside the drawer, so a phone
   can offer it without opening the menu. That puts it earlier in the markup
   than the menu; on a wide screen `order` puts it back exactly where it has
   always been, to the right of the links. */
@media (min-width: 701px) {
  .site-header .brand          { order: 0; }
  .site-header .main-nav       { order: 1; }
  .site-header .lang-switch    { order: 2; }
  .site-header .header-actions { order: 3; }
}

/* Masthead across the top of the drawer. Decorative: the bar carries the real
   link home, and a second one here would only make a screen reader announce
   the company twice on the way into the menu. */
.nav-brand { display: none; }

/* ---------------------------------------------------------------------------
   MOBILE NAVIGATION — hamburger + drawer.
   .nav-panel is `display: contents` on desktop, so the nav and the header
   actions remain direct children of the header row exactly as before. Only
   below 700px does the wrapper become a real box that slides in. The toggle
   is revealed by html.js, so without JavaScript the wrapper stays transparent
   and the old inline nav still works.
   --------------------------------------------------------------------------- */
.nav-panel { display: contents; }
.nav-toggle, .nav-scrim { display: none; }

/* One solid primary button; everything else is a quiet outline. Tighter radius
   and tracked uppercase labels read more considered than pill-shaped buttons. */
.btn-outline { color: #fff; border: 1px solid rgba(255,255,255,0.22); text-decoration: none; padding: 9px 18px; border-radius: 3px; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; background: transparent; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.btn-outline:hover, .btn-outline:focus-visible { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.04); }
.btn-outline-light { border: 1px solid rgba(255,255,255,0.22); color: #fff; text-decoration: none; padding: 13px 24px; border-radius: 3px; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; transition: border-color .15s ease; }
.btn-outline-light:hover, .btn-outline-light:focus-visible { border-color: rgba(255,255,255,0.5); }
/* Hero primary: filled, so there is exactly one obvious action on the page. */
.btn-hero { padding: 13px 26px; font-size: 11.5px; background: var(--accent); border-color: var(--accent); color: #0b0c11; font-weight: 600; }
.btn-hero:hover, .btn-hero:focus-visible { background: #a396e6; border-color: #a396e6; }

/* HERO */
.hero { position: relative; overflow: hidden; }
.hero-glow { position: absolute; top: 50%; inset-inline-end: -8%; transform: translateY(-50%); width: 820px; max-width: 70vw; aspect-ratio: 1/1; overflow: hidden; border-radius: 50%; opacity: 0.022; pointer-events: none; z-index: 0; }
.hero-glow img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.7); }
.hero-grid { position: relative; z-index: 1; padding-block: clamp(44px,7vw,88px); display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 44px; align-items: center; }

/* HOME PAGE HERO (.hero-photo) — the car photo sits behind the headline
   rather than beside it. Beside it, the photo was a boxed thumbnail that
   stacked into a second screen of dead height on a phone; behind it, it
   carries the headline and costs no extra height at all.
   Scoped to .hero-photo so the 26 market pages keep the two-column hero. */
.hero-photo { isolation: isolate; min-height: clamp(520px, 72vh, 720px);
  display: flex; align-items: flex-end; }
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media img { width: 100%; height: 100%; object-fit: cover;
  object-position: 62% 52%; display: block; }
/* Vertical only, so it reads the same in LTR and RTL. The sky in this photo
   is near-white, so the alpha over the text band has to reach ~0.55 before
   white type clears WCAG AA against it - measured, not guessed. Above the
   text the scrim stays light so the photo is still a photo. */
.hero-media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(6,7,10,0.30) 0px, rgba(6,7,10,0.34) 60px,
    rgba(6,7,10,0.66) 190px, rgba(6,7,10,0.74) 62%,
    rgba(6,7,10,0.93) 100%); }
.hero-inner { position: relative; z-index: 1; width: 100%;
  padding-block: clamp(56px, 9vw, 104px) clamp(40px, 5vw, 68px); }
.hero-inner .hero-title, .hero-inner .hero-sub { text-shadow: 0 2px 20px rgba(0,0,0,0.55); }
.hero-eyebrow-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16.8px; }
.hero-eyebrow-row img { display: none; }
.hero-eyebrow { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: var(--label-ls); text-transform: uppercase; padding: 4px 11px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.16); color: var(--muted-70); }
/* Display type: large, weight 500, negative tracking, line-height just under 1. */
.hero-title { font-size: var(--display); max-width: 13ch; line-height: 0.98; font-weight: 500; letter-spacing: -0.032em; margin: 22px 0 20px; text-wrap: balance; color: #fff; }
.hero-sub { font-size: 16.5px; line-height: 1.65; color: rgba(255,255,255,0.86); max-width: 560px; margin: 0 0 34px; text-wrap: pretty; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-eyebrow { border-color: rgba(255,255,255,0.34); color: #fff;
  background: rgba(6,7,10,0.68); backdrop-filter: blur(3px); }
.hero-links a { color: rgba(255,255,255,0.82); }

/* MOBILE "READ MORE"
   One disclosure per optional paragraph. The markup ships with `open`, so
   without JavaScript — and on desktop — the page reads exactly as it did.
   site.js closes them only on a narrow screen, where the length is the
   problem. Cards are not included: they are <a> elements that already say
   "Read more", and a <details> cannot legally live inside a link. */
.m-more > summary { display: none; }

/* STATS */
.stats-band { background: var(--band-bg); }
/* Columns are capped so a small number of stats stays visually grouped
   instead of stretching across the full band width. */
/* 270px cap: four columns (4x270 + 3x22.4 gap = 1147px) fit the 1195px
   content width, while a smaller number of stats stays centred and grouped. */
.stats-grid { padding-block: 33.6px; display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,270px)); gap: 22.4px; justify-content: center; align-items: start; }
.stat-value { font-size: clamp(34px,4vw,54px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: #fff; }
.stat-label { font-size: 12.5px; color: var(--muted-65); margin-top: 4px; }
.stat-detail { font-size: 11.5px; line-height: 1.5; color: var(--muted-55); margin-top: 6px; text-wrap: pretty; }

/* SECTIONS */
section.page-section { padding-block: clamp(64px,8.5vw,132px); }
section.page-section.no-top-pad { padding-top: 0; }
.section-intro { max-width: 680px; margin: 0 0 52px; }
/* Micro-label: small, heavily tracked, no pill — reads as an editorial kicker. */
.section-label { display: inline-block; font-size: 10.5px; font-weight: 500; letter-spacing: var(--label-ls); text-transform: uppercase; padding: 0; background: none; color: var(--muted-55); margin-bottom: 16px; }
.section-title { font-size: var(--h2); font-weight: 500; letter-spacing: -0.028em; line-height: 1.04; margin: 0; text-wrap: balance; color: #fff; }
.section-lead { font-size: 14.5px; line-height: 1.65; color: var(--muted-70); margin: 12px 0 0; text-wrap: pretty; }
.divider { height: 1px; margin: 0 0 39.2px; background: linear-gradient(to right, transparent, var(--hairline) 48px, var(--hairline) calc(100% - 48px), transparent); }

/* SERVICES */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 16.8px; }
.service-card { background: var(--card-bg); border-radius: 4px; padding: 30px 26px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 0 0 1px var(--card-border); transition: box-shadow .15s ease; }
.service-card:hover { box-shadow: 0 0 0 1px rgba(255,255,255,0.18); }
/* Cards that link to their own detail page: the whole card is the hit area. */
a.service-card { text-decoration: none; color: inherit; }
a.service-card:hover, a.service-card:focus-visible { box-shadow: 0 0 0 1px rgba(145,132,217,0.55); }
.service-more { margin-top: auto; padding-top: 4px; font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
a.service-card:hover .service-more { color: #b3a8ec; }
body.font-arabic .service-more { letter-spacing: 0.02em; }
/* Numerals, not circles — the index reads as a caption, not a badge. */
.service-icon { width: auto; height: auto; border-radius: 0; border: none; color: var(--muted-55); display: block; font-weight: 500; font-size: 12px; letter-spacing: 0.14em; margin-bottom: 4px; }
.service-title { font-size: 17px; font-weight: 500; margin: 0; text-wrap: pretty; }
.service-desc { font-size: 13px; line-height: 1.6; color: var(--muted-70); margin: 0; text-wrap: pretty; }

/* PROCESS */
.process-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 22.4px; }
.process-step { border-inline-start: 1px solid rgba(255,255,255,0.12); padding-inline-start: 18px; }
.process-num { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; color: var(--muted-55); margin-bottom: 12px; }
.process-title { font-size: 15.5px; font-weight: 500; margin: 0 0 6px; text-wrap: pretty; }
.process-desc { font-size: 13px; line-height: 1.55; color: var(--muted-65); margin: 0; text-wrap: pretty; }

/* WHY */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 44px; align-items: center; }
.why-image { width: 100%; aspect-ratio: 4/3; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px var(--card-border); }
.why-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.why-title { font-size: clamp(24px,2.8vw,30px); font-weight: 500; letter-spacing: -0.015em; margin: 11.2px 0 14px; text-wrap: pretty; }
.why-body { font-size: 14.5px; line-height: 1.65; color: var(--muted-70); margin: 0 0 22.4px; text-wrap: pretty; }
.why-points { display: flex; flex-direction: column; gap: 11.2px; list-style: none; padding: 0; margin: 0; }
.why-point { display: flex; gap: 10px; align-items: flex-start; }
.why-point .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 8px; flex-shrink: 0; display: inline-block; }
.why-point span.txt { font-size: 13.5px; line-height: 1.55; }

/* FAQ */
.faq-list { max-width: 820px; display: flex; flex-direction: column; gap: 8.4px; }
.faq-item { border-radius: 4px; background: var(--card-bg); box-shadow: 0 0 0 1px var(--card-border); overflow: hidden; }
.faq-item summary { list-style: none; width: 100%; text-align: start; background: none; border: none; color: var(--text); padding: 16px 18px; font-size: 14.5px; font-weight: 500; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-marker { color: var(--accent); font-size: 18px; flex-shrink: 0; line-height: 1; }
/* Markers sit inside <details> in both layouts — where .faq-item IS the details
   (homepage, country pages) and where it wraps one (FAQ page's <article> card) —
   so keying off the details element alone covers both. */
details[open] .faq-marker.plus { display: none; }
details:not([open]) .faq-marker.minus { display: none; }

.faq-answer { margin: 0; padding: 0 18px 16px; font-size: 13.5px; line-height: 1.6; color: var(--muted-70); text-wrap: pretty; }
/* Question text is a real heading on the FAQ page, but must look like the
   summary line, not a section title. */
.faq-q { font-size: 14.5px; font-weight: 500; line-height: 1.45; margin: 0; color: var(--text); text-wrap: pretty; }
.faq-answer p { margin: 0 0 12px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer ul, .faq-answer ol { margin: 0 0 12px; padding-inline-start: 20px; }
.faq-answer li { margin-bottom: 6px; }
.faq-answer strong { color: var(--text); font-weight: 500; }
.faq-answer a { color: var(--accent); text-decoration: none; }
.faq-answer a:hover, .faq-answer a:focus-visible { text-decoration: underline; }

/* INQUIRY FORM */
/* Only /quote/ uses this now, and there the form leads: it takes the wider
   column and comes first in the markup, so on a phone - where the columns
   stack - the first field is near the top rather than below two screens of
   introduction. */
.inquiry-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr);
  gap: 44px; align-items: start; }
/* .inquiry-title / .inquiry-sub were the heading and standfirst above the
   pasted-in form. The form now lives only on /quote/, where the page's own
   h1 does that job, so both rules went with it - .cta-band-title and
   .cta-band-sub carry the same type down at the closing band. */
.form-card { background: var(--card-bg); border-radius: 4px; box-shadow: 0 0 0 1px var(--card-border); padding: 28px; display: flex; flex-direction: column; gap: 16.8px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 16.8px; }
.form-field { display: block; font-size: 12px; color: var(--muted-70); }
.form-field .field-input, .form-field input, .form-field select, .form-field textarea {
  display: block; width: 100%; min-height: 36px; margin-top: 5px; padding: 6px 10px; font-size: 14px;
  color: var(--text); background: var(--bg); border: 1px solid var(--hairline); border-radius: 8px; box-sizing: border-box; font-family: inherit;
}
.form-field textarea { resize: vertical; }
.phone-row { display: flex; gap: 8px; margin-top: 5px; }
.phone-row select { min-height: 36px; padding: 6px 6px; font-size: 14px; color: var(--text); background: var(--bg); border: 1px solid var(--hairline); border-radius: 8px; width: 88px; font-family: inherit; }
.phone-row input { flex: 1; min-height: 36px; padding: 6px 10px; font-size: 14px; color: var(--text); background: var(--bg); border: 1px solid var(--hairline); border-radius: 8px; box-sizing: border-box; font-family: inherit; }
.contact-method-label { font-size: 12px; color: var(--muted-70); margin-bottom: 8px; }
.contact-method-options { display: flex; gap: 16px; flex-wrap: wrap; }
.contact-method-options label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.contact-method-options input { accent-color: var(--accent); width: 15px; height: 15px; }
.btn-submit { align-self: flex-start; color: var(--accent); border: 1px solid var(--accent); background: transparent; padding: 9.8px 22px; border-radius: 8px; font-size: 14.5px; font-weight: 500; cursor: pointer; margin-top: 4px; }
.btn-submit:disabled { opacity: 0.6; cursor: default; }
.form-error-msg { font-size: 13px; color: var(--error); margin: 0; }
.form-success-card { background: var(--card-bg); border-radius: 8px; box-shadow: 0 0 0 1px var(--card-border); padding: 33.6px; text-align: center; }
.form-success-check { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--accent); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 20px; margin: 0 auto; }
.form-success-title { font-size: 21px; font-weight: 500; margin: 14px 0 8px; }
.form-success-sub { font-size: 14px; color: var(--muted-70); margin: 0; }

/* After sending: the card is the one thing that should read as done. A solid
   accent tick and an accent edge, and the page scrolls it into the middle of
   the screen (site.js). */
.form-success-card { box-shadow: 0 0 0 1px var(--accent); scroll-margin-block: 90px; }
.form-success-card:focus { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.form-success-check { background: var(--accent); color: var(--bg); font-weight: 700; }
.form-success-sent { font-size: 13px; line-height: 1.55; color: var(--muted-70); margin: 14px 0 0; }
/* an email address has no spaces to break at; let it wrap anywhere rather
   than push the card wider than a phone screen */
.form-success-sent strong { color: #fff; font-weight: 500; overflow-wrap: anywhere; }
/* Without JavaScript the server redirects to /quote/#form-success; :target
   reveals the card there, since there is no script to remove [hidden]. */
.form-success-card:target { display: block; }
/* .form-card is display:flex, and any display rule outranks the browser's own
   [hidden] { display: none } - so after a successful send the script's
   form.hidden = true did nothing, and the whole form stayed on screen under
   the "Thank you" card, inviting a second submission. Same fault as the map
   panel and the menu backdrop earlier. */
.form-card[hidden] { display: none; }

.form-error-msg { line-height: 1.5; }
.form-error-msg a { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.hp-field { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------------------
   QUOTE FORM - three numbered steps.
   The form is long by nature (buyer type, contact, destination, car, message),
   so it is broken into fieldsets that each answer one question, with the
   required/optional status stated on every single field rather than inferred.
   --------------------------------------------------------------------------- */
.form-card { gap: 0; }
.form-intro { margin: 0 0 22px; font-size: 12.5px; line-height: 1.6; color: var(--muted-65); }
.req { color: var(--accent); font-weight: 600; margin-inline-start: 1px; }
.opt-tag { font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted-55); margin-inline-start: 6px; }
body.font-arabic .opt-tag { letter-spacing: normal; text-transform: none; }

.fset { border: 0; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 16.8px; }
.fset:last-of-type { margin-bottom: 20px; }
.fset-legend { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0 0 14px;
  margin-bottom: 4px; border-bottom: 1px solid var(--hairline);
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--text); }
.fset-num { display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; flex-shrink: 0; border-radius: 50%;
  background: var(--accent); color: #0b0c11; font-size: 11.5px; font-weight: 700; }

.field-label { display: block; font-size: 12px; color: var(--muted-70); margin-bottom: 9px; }

/* Segmented control for the private/business choice - a real radio group
   underneath, so it still works with a keyboard and without JS. */
.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.seg-opt { position: relative; }
.seg-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg-opt span { display: inline-block; padding: 9px 16px; border-radius: 8px;
  border: 1px solid var(--hairline); background: var(--bg);
  font-size: 13.5px; color: var(--muted-70); cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease; }
.seg-opt span:hover { color: var(--text); border-color: var(--muted-55); }
.seg-opt input:checked + span { border-color: var(--accent); color: var(--text);
  background: rgba(145,132,217,0.12); }
.seg-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Same control, smaller, for the contact-method pills. */
.pill-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill span { display: inline-block; padding: 7px 14px; border-radius: 20px;
  border: 1px solid var(--hairline); background: var(--bg);
  font-size: 13px; color: var(--muted-70); cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease; }
.pill span:hover { color: var(--text); }
.pill input:checked + span { border-color: var(--accent); color: var(--text);
  background: rgba(145,132,217,0.12); }
.pill input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* What the chosen destination actually means for the paperwork. */
.dest-hint { display: block; margin-top: 8px; padding: 9px 12px; border-radius: 7px;
  background: rgba(145,132,217,0.09); border-inline-start: 2px solid var(--accent);
  font-size: 11.5px; line-height: 1.55; color: var(--muted-70); }
.dest-hint[hidden] { display: none; }

.form-field input:focus-visible, .form-field select:focus-visible,
.form-field textarea:focus-visible, .phone-row input:focus-visible,
.phone-row select:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(145,132,217,0.18); }
.form-field select { cursor: pointer; }
.form-field optgroup { background: var(--bg); color: var(--muted-55);
  font-size: 12px; font-style: normal; font-weight: 600; }
.form-field optgroup option { color: var(--text); font-weight: 400; }
.phone-row select { width: auto; max-width: 47%; }

.btn-submit { align-self: stretch; text-align: center; background: var(--accent);
  color: #0b0c11; border-color: var(--accent); font-weight: 600; padding: 13px 22px; }
.btn-submit:hover:not(:disabled) { background: #a99ee6; border-color: #a99ee6; }
.form-note { margin-top: 12px; }

@media (min-width: 560px) {
  .btn-submit { align-self: flex-start; min-width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .seg-opt span, .pill span { transition: none; }
}

/* PLAIN-LANGUAGE SUMMARY (what we do) */
.summary-section { max-width: 860px; margin-inline: auto; padding-block: clamp(36px,5vw,60px); }
.summary-heading { font-size: clamp(22px,2.6vw,28px); font-weight: 500; letter-spacing: -0.015em; margin: 0 0 14px; }
.summary-lead { font-size: 16px; line-height: 1.7; color: var(--text); margin: 0 0 14px; text-wrap: pretty; }
.summary-body { font-size: 14.5px; line-height: 1.7; color: var(--muted-70); margin: 0 0 12px; text-wrap: pretty; }
.summary-lead strong, .summary-body strong { color: var(--text); font-weight: 500; }

/* ARTICLE / BLOG */
.article-header { max-width: 760px; }
.article-title { font-size: clamp(28px,3.6vw,40px); font-weight: 500; line-height: 1.18; letter-spacing: -0.015em; margin: 12px 0 14px; text-wrap: pretty; }
.article-standfirst { font-size: 16.5px; line-height: 1.65; color: var(--muted-70); margin: 0 0 18px; text-wrap: pretty; }
.article-meta { font-size: 12.5px; color: var(--muted-55); display: flex; flex-wrap: wrap; gap: 6px 14px; }

.article-body { max-width: 760px; font-size: 15.5px; line-height: 1.75; }
.article-body h2 { font-size: clamp(21px,2.4vw,26px); font-weight: 500; letter-spacing: -0.01em; margin: 44px 0 12px; text-wrap: pretty; }
.article-body h3 { font-size: 17.5px; font-weight: 500; margin: 30px 0 8px; text-wrap: pretty; }
.article-body p { color: var(--muted-70); margin: 0 0 16px; text-wrap: pretty; }
.article-body ul, .article-body ol { color: var(--muted-70); margin: 0 0 18px; padding-inline-start: 22px; }
.article-body li { margin-bottom: 8px; }
.article-body strong { color: var(--text); font-weight: 500; }
.article-body a { color: var(--accent); text-decoration: none; }
.article-body a:hover, .article-body a:focus-visible { text-decoration: underline; }
/* A button inside an article body is still a button: the accent link colour
   above outranks .btn-hero on specificity and painted accent text on the
   accent fill, which made the label invisible. */
.article-body a.btn-outline:not(.btn-hero),
.article-body a.btn-outline-light { color: var(--text); }
.article-body a.btn-hero { color: #0b0c11; }
.article-body a.btn-hero:hover, .article-body a.btn-outline:hover,
.article-body a.btn-outline-light:hover { text-decoration: none; }
.article-body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14px; }
.article-body th, .article-body td { text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--hairline); }
.article-body th { color: var(--text); font-weight: 500; }
.article-body td { color: var(--muted-70); }
.table-scroll { overflow-x: auto; margin: 0 0 20px; }
.article-body blockquote { margin: 0 0 18px; padding-inline-start: 16px; border-inline-start: 2px solid var(--accent); color: var(--muted-70); }

.article-cta { margin-top: 40px; background: var(--card-bg); border-radius: 8px; box-shadow: 0 0 0 1px var(--card-border); padding: 24px; }
.article-cta h2 { margin-top: 0; font-size: 19px; }
.article-cta p { margin-bottom: 16px; }

.blog-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 16.8px; }
.blog-card { background: var(--card-bg); border-radius: 8px; box-shadow: 0 0 0 1px var(--card-border); padding: 22.4px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--text); transition: box-shadow 0.15s ease, transform 0.15s ease; }
.blog-card:hover, .blog-card:focus-visible { box-shadow: 0 0 0 1px var(--accent); transform: translateY(-2px); }
.blog-card h2, .blog-card h3 { font-size: 17px; font-weight: 500; margin: 0; text-wrap: pretty; }
.blog-card p { font-size: 13px; line-height: 1.6; color: var(--muted-70); margin: 0; text-wrap: pretty; }
.blog-card .read-more { font-size: 12.5px; color: var(--accent); margin-top: auto; }

/* QUOTE PAGE */
.breadcrumb { font-size: 12.5px; color: var(--muted-55); margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.breadcrumb a { color: var(--accent); text-decoration: none; }
.breadcrumb a:hover, .breadcrumb a:focus-visible { text-decoration: underline; }

/* Heading, one line, form. The introduction that used to sit here - four
   selling points and three steps - is now in .quote-aside beside the form. */
.quote-intro { margin-bottom: clamp(24px,3vw,34px); }
.quote-h1 { max-width: 20ch; margin-top: 12px; }
.quote-lead { max-width: 58ch; margin: 12px 0 0; font-size: 15px;
  line-height: 1.6; color: var(--muted-70); }

/* Supporting column: reassurance for anyone who wants it, out of the way of
   anyone who just wants to type. Sticky so it stays alongside a long form;
   it stops being sticky when it stacks under the form on a narrow screen. */
.quote-aside { background: var(--surface); border: 1px solid var(--card-border);
  border-radius: 12px; padding: 26px 24px; position: sticky; top: 88px; }
.quote-aside .quote-usp { grid-template-columns: 1fr; margin-top: 0; }
.quote-aside .quote-steps { margin-top: 24px; padding-top: 22px;
  border-top: 1px solid var(--hairline); }

.quote-usp { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 12px 22px; max-width: 900px; }
.quote-usp li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.quote-usp .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 7px; flex-shrink: 0; display: inline-block; }

.quote-steps { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.quote-step { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.55; color: var(--muted-70); }
.quote-step strong { color: var(--text); font-weight: 500; }
.quote-step-num {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  border: 1px solid var(--accent); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 500;
}

/* One column below this: the form first, its supporting column after it.
   Sticky is switched off - there is nothing left to stick alongside. */
@media (max-width: 900px) {
  .inquiry-grid { grid-template-columns: 1fr; gap: 32px; }
  .quote-aside { position: static; top: auto; }
}
@media (max-width: 700px) {
  .quote-aside { padding: 22px 18px; }
  .quote-lead { font-size: 14.5px; }
}

.form-note { font-size: 11.5px; line-height: 1.5; color: var(--muted-55); margin: 0; }

/* COUNTRY / DESTINATION LINKS */
.country-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 12px; }
.country-card {
  background: var(--card-bg); border-radius: 8px; padding: 16px 18px; box-shadow: 0 0 0 1px var(--card-border);
  text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: 4px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.country-card:hover, .country-card:focus-visible { box-shadow: 0 0 0 1px var(--accent); transform: translateY(-2px); }
.country-name { font-size: 15px; font-weight: 500; }
.country-port { font-size: 12.5px; color: var(--muted-65); }

/* TRUST LOGOS */
.trust-logos { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16.8px; }
.trust-logo-card { background: #f3f5fe; border-radius: 10px; padding: 16.8px 28px; display: flex; align-items: center; justify-content: center; height: 88px; }
.trust-logo-card img { height: 54px; width: auto; object-fit: contain; display: block; }
.trust-logo-card img.giropay { height: 38px; }

/* FOOTER */
.site-footer { padding: 33.6px 22.4px 22.4px; }
.footer-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 28px; }
.footer-brand { max-width: 300px; }
.footer-brand-row { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.footer-brand-row img { width: 44px; height: 44px; object-fit: contain; }
.footer-brand-row span { font-size: 18px; font-weight: 500; }
.footer-tagline { font-size: 12.5px; color: var(--muted-55); line-height: 1.6; margin: 0; }
.footer-heading { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-55); margin-bottom: 11.2px; }
.footer-contact { display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--muted-70); }
.footer-contact a { color: var(--accent); text-decoration: none; }
.footer-lang { display: flex; align-items: flex-start; }
.footer-countries { margin: 22.4px auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 12.5px; }
.footer-countries-label { color: var(--muted-55); }
.footer-countries a { color: var(--accent); text-decoration: none; }
.footer-countries a:hover, .footer-countries a:focus-visible { text-decoration: underline; }
.footer-legal { margin: 14px auto 0; font-size: 11.5px; color: var(--muted-55);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
/* The privacy policy, one click from every page. Muted to sit with the
   copyright line, but still clearly a link and large enough to tap. */
.footer-privacy { color: var(--muted-70); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,0.25);
  padding-block: 6px; }
.footer-privacy:hover, .footer-privacy:focus-visible { color: #fff;
  text-decoration-color: var(--accent); }
.footer-privacy[aria-current="page"] { color: #fff; }

/* the link to the policy inside the note under the enquiry form */
.form-note a { color: var(--muted-70); text-decoration: underline;
  text-underline-offset: 2px; }
.form-note a:hover, .form-note a:focus-visible { color: #fff; }

/* Anything the site owner still has to fill in on a legal page. Deliberately
   loud: it must not be possible to publish one of these without noticing. */
mark.fill-in { background: #f5c542; color: #0b0c11; padding: 1px 6px;
  border-radius: 3px; font-weight: 600; }

/* FLOATING QUOTE CTA */
.quote-float {
  position: fixed; bottom: 22px; inset-inline-end: 22px;
  background: var(--accent); color: var(--bg);
  border: 1px solid var(--accent); text-decoration: none;
  padding: 12px 20px; border-radius: 8px; font-size: 13.5px; font-weight: 600;
  box-shadow: 0 6px 18px rgba(0,0,0,0.55); z-index: 60;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
}
.quote-float:hover, .quote-float:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.6); }
/* Steps aside while the closing band - which carries the same button - is on
   screen. Set from site.js; without it the button behaves as it always did. */
.quote-float.is-stood-down { opacity: 0; pointer-events: none; transform: translateY(10px); }

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

/* ---- Tablet header: one line, nav scrolls sideways ---- */
@media (max-width: 900px) and (min-width: 701px) {
  .site-header .container { padding-block: 10px; gap: 12px; }
  .brand img { width: 34px; height: 34px; }
  .brand span { font-size: 11.5px; letter-spacing: 0.16em; }
  .main-nav {
    order: 3; width: 100%; flex-wrap: nowrap; gap: 18px;
    overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .main-nav::-webkit-scrollbar { display: none; }
  .main-nav a { white-space: nowrap; }
  .header-actions { gap: 8px; }
  .header-actions .btn-outline { padding: 8px 12px; font-size: 10.5px; }
}

/* ---- Phone header: logo + hamburger, everything else in the drawer ---- */
/* Below this the row genuinely runs out of width, so the wordmark goes and
   the logo mark carries the brand. The full name is still across the top of
   the drawer, one tap away. */
@media (max-width: 359px) {
  .brand span { display: none; }
}

@media (max-width: 700px) {
  /* backdrop-filter on the header makes it the containing block for any
     position:fixed descendant, which sized the drawer to the header instead
     of the screen. A solid bar on a phone is cheaper to paint anyway. */
  .site-header { backdrop-filter: none; background: rgba(11,12,17,0.96); }
  .site-header .container { padding-block: 9px; gap: 12px; flex-wrap: nowrap; }
  .brand img { width: 32px; height: 32px; }
  /* The four language buttons now share this row, which leaves the wordmark
     about 110px. At the old 11px/0.14em it wanted 128 and broke onto a second
     line, so the tracking comes in and it is told not to wrap. */
  .brand span { font-size: 10.5px; letter-spacing: 0.04em; white-space: nowrap; }

  /* The switcher stays in the bar on a phone. Tighter than the desktop one so
     the row is still logo + four languages + button inside 360px. */
  .site-header .lang-switch { flex-shrink: 0; }
  .site-header .lang-switch a { padding: 6px 7px; font-size: 11px; }

  html.js .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex-shrink: 0;
    padding: 0; border: 1px solid var(--hairline); border-radius: 9px;
    background: transparent; color: #fff; cursor: pointer;
    /* The drawer is a child of the header and sits at z-index 60, so it was
       painted over its own close button: tapping the X did nothing. Only the
       backdrop, Escape or picking a link would close the menu. */
    position: relative; z-index: 61;
  }
  html.js .nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  /* three bars drawn from one element, so there is nothing to keep in sync */
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
    content: ""; display: block; width: 19px; height: 2px; border-radius: 2px;
    background: currentColor; transition: transform .22s ease, opacity .16s ease;
  }
  .nav-toggle-bars { position: relative; }
  .nav-toggle-bars::before { position: absolute; top: -6px; }
  .nav-toggle-bars::after  { position: absolute; top: 6px; }
  html.nav-open .nav-toggle-bars { background: transparent; }
  html.nav-open .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
  html.nav-open .nav-toggle-bars::after  { transform: translateY(-6px) rotate(-45deg); }

  html.js .nav-panel {
    display: flex; flex-direction: column; gap: 26px;
    /* top/bottom rather than inset-block: the block axis is the same in both
       writing directions, and the shorthand was not stretching the panel */
    position: fixed; top: 0; bottom: 0; inset-inline-end: 0;
    width: min(84vw, 330px); z-index: 60;
    /* 15px puts the masthead logo on the same baseline as the one in the bar:
       the bar centres a 32px mark inside the 44px toggle, so it starts at
       9 + (44-32)/2. */
    padding: 15px 26px 30px;
    background: var(--surface);
    border-inline-start: 1px solid var(--hairline);
    box-shadow: -18px 0 46px rgba(0,0,0,0.5);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    /* visibility cannot tween: give it a zero duration and delay the hide
       until the slide-out has finished. Transitioning it over .26s instead
       left the panel invisible for the whole opening animation - the slide
       was never seen, and its links could not take focus. */
    transition: transform .26s cubic-bezier(.3,.7,.3,1), visibility 0s linear .26s;
  }
  html[dir="rtl"].js .nav-panel { transform: translateX(-100%);
    box-shadow: 18px 0 46px rgba(0,0,0,0.5); }
  html.js.nav-open .nav-panel { transform: none; visibility: visible;
    transition: transform .26s cubic-bezier(.3,.7,.3,1), visibility 0s; }

  /* Logo across the top of the drawer, sized and tracked to match the bar so
     the two read as the same masthead when the panel slides over it. */
  html.js .nav-panel .nav-brand {
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 20px; border-bottom: 1px solid var(--hairline);
  }
  html.js .nav-panel .nav-brand img {
    width: 32px; height: 32px; object-fit: contain; flex-shrink: 0;
  }
  html.js .nav-panel .nav-brand span {
    font-size: 11px; font-weight: 500; letter-spacing: 0.14em; color: #fff;
  }

  html.js .nav-panel .main-nav {
    flex-direction: column; align-items: stretch; gap: 0; width: auto; overflow: visible;
  }
  html.js .nav-panel .main-nav a {
    font-size: 15px; letter-spacing: 0.02em; text-transform: none;
    color: #fff; padding: 14px 0; border-bottom: 1px solid var(--hairline);
  }
  html.js .nav-panel .main-nav a:last-child { border-bottom: 0; }
  html.js .nav-panel .header-actions {
    flex-direction: column; align-items: stretch; gap: 16px;
  }
  /* the drawer already offers the quote button - two of them, overlapping,
     is just clutter */
  html.nav-open .quote-float { opacity: 0; pointer-events: none; }
  html.js .nav-panel .btn-outline {
    text-align: center; padding: 14px 18px; font-size: 12.5px;
    background: var(--accent); color: var(--bg); border-color: var(--accent);
  }

  /* This rule sets display:block, and an author rule outranks the browser's
     own [hidden] { display: none } - so the scrim stayed in the layout while
     the drawer was closed: a full-screen, fully transparent layer at z-index
     55 over every page under 700px, swallowing every tap on the site.
     pointer-events is what makes it inert, not the hidden attribute, and it
     keeps the fade in both directions (display:none would not). */
  html.js .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(4,5,8,0.62); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
  }
  html.js.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  html.nav-open, html.nav-open body { overflow: hidden; }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  html.js .nav-panel, html.js .nav-scrim,
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { transition: none; }
}
@media (max-width: 560px) {
  .container { padding-inline: 20px; }
  section.page-section { padding-block: clamp(48px,11vw,72px); }
  .hero-title { max-width: none; }
}

/* ============================================================
   MOTION
   Pure CSS transitions driven by one IntersectionObserver.
   No library, no scroll listener, no layout thrash.
   Everything is disabled under prefers-reduced-motion, and every
   effect is gated on .js so content is fully visible without it.
   ============================================================ */

/* Smooth in-page navigation (Services / Process / FAQ anchors). */
html { scroll-behavior: smooth; scroll-padding-top: 90px; }

/* Page entry: one short fade so the first paint doesn't snap in. */
.js body { animation: ah-page-in .45s ease-out both; }
@keyframes ah-page-in { from { opacity: 0; } to { opacity: 1; } }

/* Scroll reveal. Only transform+opacity — both GPU-composited, so this
   never triggers layout or paint. */
.js main > section { opacity: 0; transform: translateY(18px); will-change: opacity, transform; }
.js main > section.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
  will-change: auto;
}
/* Hero is above the fold — show immediately, never wait on the observer. */
.js main > section.hero { opacity: 1; transform: none; }

/* Children stagger inside a revealed section. */
.js .is-in .service-card,
.js .is-in .process-step,
.js .is-in .blog-card,
.js .is-in .country-card,
.js .is-in .stats-grid > div { animation: ah-rise .5s cubic-bezier(.22,.61,.36,1) both; }
@keyframes ah-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.js .is-in > * > :nth-child(1), .js .is-in .service-card:nth-child(1) { animation-delay: .02s; }
.js .is-in .service-card:nth-child(2), .js .is-in .process-step:nth-child(2),
.js .is-in .blog-card:nth-child(2), .js .is-in .country-card:nth-child(2),
.js .is-in .stats-grid > div:nth-child(2) { animation-delay: .07s; }
.js .is-in .service-card:nth-child(3), .js .is-in .process-step:nth-child(3),
.js .is-in .blog-card:nth-child(3), .js .is-in .country-card:nth-child(3),
.js .is-in .stats-grid > div:nth-child(3) { animation-delay: .14s; }
.js .is-in .service-card:nth-child(4), .js .is-in .process-step:nth-child(4),
.js .is-in .country-card:nth-child(4),
.js .is-in .stats-grid > div:nth-child(4) { animation-delay: .21s; }
.js .is-in .service-card:nth-child(5), .js .is-in .process-step:nth-child(5),
.js .is-in .country-card:nth-child(5) { animation-delay: .28s; }
.js .is-in .process-step:nth-child(6), .js .is-in .country-card:nth-child(6) { animation-delay: .35s; }

/* Micro-interactions */
.hero-image img, .why-image img { transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.hero-image:hover img, .why-image:hover img { transform: scale(1.03); }
.footer-contact a, .breadcrumb a, .faq-answer a, .article-body a { transition: color .15s ease, opacity .15s ease; }
.faq-item summary { transition: background .15s ease; }
.faq-item summary:hover { background: rgba(255,255,255,0.02); }
.faq-marker { transition: transform .2s ease; }
details[open] .faq-marker { transform: rotate(180deg); }
.trust-logo-card { transition: transform .2s ease; }
.trust-logo-card:hover { transform: translateY(-2px); }

/* Respect the OS setting: no motion at all, nothing hidden. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js body { animation: none; }
  .js main > section { opacity: 1; transform: none; transition: none; }
  .js .is-in .service-card, .js .is-in .process-step, .js .is-in .blog-card,
  .js .is-in .country-card, .js .is-in .stats-grid > div { animation: none; }
  .hero-image img, .why-image img, .trust-logo-card, .faq-marker { transition: none; }
  .hero-image:hover img, .why-image:hover img, .trust-logo-card:hover { transform: none; }
}

/* Listing-link field + B2B block */
.field-listing input { font-size: 13.5px; }
.field-hint { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.5; color: var(--muted-55); }
.buyer-type { padding-bottom: 2px; }
.b2b-fields { display: flex; flex-direction: column; gap: 16.8px; padding: 20px; border-radius: 4px;
  background: rgba(145,132,217,0.05); box-shadow: 0 0 0 1px rgba(145,132,217,0.22); }
.b2b-fields[hidden] { display: none; }
/* Without JS the toggle never runs, so show the business fields rather than
   locking trade buyers out of them. */
html:not(.js) .b2b-fields[hidden] { display: flex; }

.b2b-head { display: flex; flex-direction: column; gap: 8px;
  padding-bottom: 16px; border-bottom: 1px solid rgba(145,132,217,0.18); }
.b2b-badge { align-self: flex-start; font-size: 10.5px; font-weight: 600;
  letter-spacing: var(--label-ls); text-transform: uppercase; color: var(--accent);
  padding: 4px 10px; border-radius: 999px; box-shadow: 0 0 0 1px rgba(145,132,217,0.35); }
.b2b-greeting { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted-65); }
.b2b-greeting.is-named { color: var(--text); }
.b2b-greeting.is-named bdi { font-weight: 600; }
body.font-arabic .b2b-badge { letter-spacing: normal; }


/* IMAGE + TEXT SWAPPER
   Picture on one side, copy on the other. Advancing crossfades the picture
   and floats the copy across to the opposite side: the copy fades down, the
   column order flips while it is invisible, then it fades back in. */
.swapper { display: flex; align-items: center; gap: clamp(24px, 3.4vw, 52px);
  flex-wrap: wrap; margin-top: 36px; }
.swap-media { position: relative; flex: 1 1 340px; min-width: 0; aspect-ratio: 16/10;
  border-radius: 6px; overflow: hidden; background: var(--surface);
  box-shadow: 0 0 0 1px var(--card-border); }
.swap-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .55s ease; }
.swap-img.is-on { opacity: 1; }
.swap-copy { display: grid; flex: 1 1 300px; min-width: 0;
  transition: opacity .22s ease, transform .22s ease; }
/* The two panels share one grid cell, so a plain cross-fade shows both
   headlines on top of each other for about a third of a second - it reads as
   doubled text. Sequence them instead: the outgoing panel fades out first,
   and the incoming one waits for it before fading in. Photos still
   cross-fade, because a dissolve between two images looks right. */
.swap-panel { grid-area: 1 / 1; opacity: 0; pointer-events: none;
  transition: opacity .16s ease; }
.swap-panel.is-on { opacity: 1; pointer-events: auto;
  transition: opacity .2s ease .17s; }
.swapper.is-b .swap-media { order: 2; }
.swapper.is-swapping .swap-copy { opacity: 0; transform: translateX(26px); }
.swapper.is-b.is-swapping .swap-copy { transform: translateX(-26px); }

.swap-kicker { display: block; font-size: 10.5px; letter-spacing: var(--label-ls);
  text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.swap-title { margin: 0 0 10px; font-size: clamp(20px, 2.2vw, 28px); font-weight: 500;
  letter-spacing: -0.02em; color: #fff; text-wrap: balance; }
.swap-text { margin: 0; font-size: 14px; line-height: 1.65; color: var(--muted-70);
  text-wrap: pretty; }
body.font-arabic .swap-kicker { letter-spacing: 0.02em; }
body.font-arabic .swap-title { letter-spacing: normal; line-height: 1.35; }

.swap-dots { display: flex; gap: 8px; margin-top: 18px; }
.swap-dot { width: 30px; height: 3px; border-radius: 2px; border: 0; padding: 0;
  cursor: pointer; background: rgba(255,255,255,0.22); transition: background .15s ease; }
.swap-dot[aria-current="true"] { background: var(--accent); }
.swap-dot:hover { background: rgba(255,255,255,0.45); }
.swap-hint { margin: 12px 0 0; font-size: 11.5px; color: var(--muted-55); }

@media (max-width: 720px) {
  .swap-media { flex-basis: 100%; aspect-ratio: 4/3; }
  .swap-copy { flex-basis: 100%; }
  /* On touch the order swap just makes the page jump, so keep it stacked. */
  .swapper.is-b .swap-media { order: 0; }
  .swapper.is-swapping .swap-copy,
  .swapper.is-b.is-swapping .swap-copy { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .swap-img, .swap-copy, .swap-panel,
  .swap-panel.is-on, .showcase-copy .swap-panel.is-on { transition: none; }
  .swapper.is-swapping .swap-copy,
  .swapper.is-b.is-swapping .swap-copy { transform: none; opacity: 1; }
}


/* FULL-BLEED SHOWCASE
   One big picture with the short version of the message on it. The whole
   band is a link; the pictures alternate but both lead to the same page, so
   what you read is always what you get when you click. */
.showcase-band { position: relative; padding: 0; }
.showcase { position: relative; display: block; width: calc(100vw - var(--sbw));
  margin-inline-start: calc(50% - (100vw - var(--sbw)) / 2);
  aspect-ratio: 21/9; overflow: hidden; text-decoration: none; color: inherit;
  background: var(--surface); }
.showcase .swap-img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.showcase .swap-img.is-on { opacity: 1; }
.showcase::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(6,7,10,0.93) 0%, rgba(6,7,10,0.55) 46%, rgba(6,7,10,0.08) 100%); }
.showcase-copy { position: absolute; inset-block-end: 0; inset-inline-start: 0;
  width: 100%; z-index: 1; display: grid;
  padding: 0 clamp(24px, 5vw, 76px) clamp(26px, 4vw, 54px); }
.showcase-copy .swap-panel { grid-area: 1 / 1; opacity: 0; pointer-events: none;
  transition: opacity .16s ease; max-width: 62ch; }
.showcase-copy .swap-panel.is-on { opacity: 1;
  transition: opacity .2s ease .17s; }
.showcase-kicker { display: block; font-size: 10.5px; letter-spacing: var(--label-ls);
  text-transform: uppercase; color: var(--accent-light); margin-bottom: 10px; }
.showcase-title { margin: 0 0 12px; font-size: clamp(23px, 3.4vw, 44px); font-weight: 500;
  letter-spacing: -0.028em; line-height: 1.08; color: #fff; text-wrap: balance; }
.showcase-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px;
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.45); padding-bottom: 3px; }
.showcase:hover .showcase-cta { border-bottom-color: var(--accent); }
/* .showcase-band .swap-dots is gone: .showcase-band is only on the four home
   pages and their band no longer switches pictures. The .swap-dots rules
   themselves stay - the B2B and country pages still cross-fade. */
body.font-arabic .showcase-kicker, body.font-arabic .showcase-cta { letter-spacing: 0.02em; }
body.font-arabic .showcase-title { letter-spacing: normal; line-height: 1.3; }

/* Compact "what we do" line under the picture, with the full plain-text
   summary kept in the page (collapsed) so crawlers and assistants still read it. */
.summary-brief { max-width: 74ch; margin: 30px 0 0; font-size: 15.5px;
  line-height: 1.7; color: var(--muted-70); }
.summary-more { margin-top: 14px; }
.summary-more > summary { cursor: pointer; font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); list-style: none; }
.summary-more > summary::-webkit-details-marker { display: none; }
.summary-more > summary:hover { color: #b3a8ec; }
.summary-more .summary-body { margin-top: 14px; }
body.font-arabic .summary-more > summary { letter-spacing: 0.02em; }

/* On a phone the caption comes out of the picture and sits under it.
   Overlaying a two-line headline on a 375px-wide photograph left the type
   sitting across the ship, and the scrim needed to keep it readable buried
   half the map. Below, the picture is shown whole and clean and the words
   are just words. The desktop band is unchanged - at that size there is
   room for the headline in the dark lower corner. */
@media (max-width: 760px) {
  /* the link stops being a fixed-ratio frame and becomes picture + caption */
  .showcase { aspect-ratio: auto; overflow: visible; background: none; }
  /* 16/9 is the picture's own ratio, so nothing is cropped */
  .showcase .swap-img { position: static; width: 100%; height: auto;
    aspect-ratio: 16/9; opacity: 1; transition: none; }
  /* the scrim only ever existed to make overlaid text legible */
  .showcase::after { display: none; }
  .showcase-copy { position: static; width: auto; padding: 16px 20px 0; }
  .showcase-copy .swap-panel { opacity: 1; transition: none; }
  .showcase-title { font-size: 22px; }
}

/* Tighter vertical rhythm: the old padding cost ~200px per section boundary
   and made the homepage a seven-screen scroll. */
section.page-section { padding-block: clamp(48px, 5.6vw, 92px); }
.faq-all { margin: 22px 0 0; }
.faq-all a { font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); text-decoration: none; }
.faq-all a:hover { color: #b3a8ec; }
body.font-arabic .faq-all a { letter-spacing: 0.02em; }

/* Quick links under the hero buttons: cheap in height, and they give anyone
   who already knows what they want a direct way in. */
.hero-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 26px 0 0;
  padding: 0; list-style: none; }
.hero-links a { font-size: 11.5px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted-70); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color .15s ease, border-color .15s ease; }
.hero-links a:hover, .hero-links a:focus-visible { color: #fff; border-bottom-color: var(--accent); }
body.font-arabic .hero-links a { letter-spacing: 0.02em; }

/* ENTRY-POINT GRID
   Replaces three prose sections. Icons sit next to a real label - an icon on
   its own is a guessing game, which is exactly what NN/g warns about. */
.section-lead { margin: 14px 0 0; font-size: 15px; line-height: 1.65; color: var(--muted-70); max-width: 62ch; }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.tile { display: flex; flex-direction: column; gap: 9px; padding: 24px 22px 22px;
  background: var(--card-bg); border-radius: 5px; box-shadow: 0 0 0 1px var(--card-border);
  text-decoration: none; color: inherit; transition: box-shadow .15s ease, transform .15s ease; }
.tile:hover, .tile:focus-visible { box-shadow: 0 0 0 1px rgba(145,132,217,0.55); transform: translateY(-2px); }
.tile-icon { width: 24px; height: 24px; color: var(--accent); flex-shrink: 0; }
.tile-title { font-size: 15.5px; font-weight: 500; color: #fff; }
.tile-desc { font-size: 12.5px; line-height: 1.55; color: var(--muted-65); text-wrap: pretty; }

.port-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.port-label { font-size: 11px; letter-spacing: var(--label-ls); text-transform: uppercase;
  color: var(--muted-55); margin-inline-end: 4px; }
.port-strip a { font-size: 12.5px; color: var(--muted-70); text-decoration: none;
  padding: 5px 13px; border-radius: 999px; box-shadow: 0 0 0 1px var(--card-border);
  transition: color .15s ease, box-shadow .15s ease; }
.port-strip a:hover, .port-strip a:focus-visible { color: #fff; box-shadow: 0 0 0 1px rgba(145,132,217,0.55); }
body.font-arabic .port-label { letter-spacing: 0.02em; }
@media (prefers-reduced-motion: reduce) { .tile:hover { transform: none; } }

/* SHIPPING SLIDER (shipping & logistics pages)
   Caption sits on the picture. Native scroll-snap does the swiping, so a
   touch drag works with no JS; arrows and dots are layered on top. */
.ship-slider { position: relative; margin-top: 8px; }
.ship-track { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; border-radius: 6px; box-shadow: 0 0 0 1px var(--card-border);
  -ms-overflow-style: none; scrollbar-width: none; }
.ship-track::-webkit-scrollbar { display: none; }
.ship-slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; margin: 0;
  aspect-ratio: 21/9; overflow: hidden; background: var(--surface); }
.ship-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ship-cap { position: absolute; inset-inline-start: 0; inset-block-end: 0; width: 100%;
  padding: 92px 30px 26px; margin: 0;
  background: linear-gradient(to top, rgba(6,7,10,0.92) 0%, rgba(6,7,10,0.72) 40%, rgba(6,7,10,0) 100%); }
.ship-kicker { display: block; font-size: 10.5px; letter-spacing: var(--label-ls);
  text-transform: uppercase; color: var(--accent-light); margin-bottom: 8px; }
.ship-title { margin: 0 0 6px; font-size: clamp(19px, 2.2vw, 27px); font-weight: 500;
  letter-spacing: -0.02em; color: #fff; }
.ship-text { margin: 0; font-size: 13.5px; line-height: 1.6; color: #d8dade; max-width: 62ch; }
body.font-arabic .ship-kicker { letter-spacing: 0.02em; }
body.font-arabic .ship-title { letter-spacing: normal; line-height: 1.35; }

.ship-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: rgba(11,12,17,0.62); border: 1px solid rgba(255,255,255,0.28); color: #fff;
  font-size: 19px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, border-color .15s ease; }
.ship-nav:hover, .ship-nav:focus-visible { background: rgba(11,12,17,0.88); border-color: rgba(255,255,255,0.6); }
.ship-nav[disabled] { opacity: 0.32; cursor: default; }
.ship-prev { inset-inline-start: 14px; }
.ship-next { inset-inline-end: 14px; }
.ship-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.ship-dot { width: 34px; height: 3px; border-radius: 2px; border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,0.22); transition: background .15s ease; }
.ship-dot[aria-current="true"] { background: var(--accent); }
.ship-dot:hover { background: rgba(255,255,255,0.45); }

@media (max-width: 700px) {
  .ship-slide { aspect-ratio: 4/3; }
  .ship-cap { padding: 74px 20px 20px; }
  .ship-nav { display: none; }
}

/* ---------------------------------------------------------------------------
   PHONE: shorten the home page.
   Three moves, in order of how much they save: the hero photo no longer needs
   its own block, the card descriptions collapse into the card title (the card
   is a link that already says "Read more"), and the loose paragraphs go behind
   a disclosure. Nothing is removed from the HTML, so nothing is lost to search
   engines or to anyone without JavaScript.
   --------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .hero-photo { min-height: clamp(430px, 68vh, 540px); }
  /* a portrait crop of a very wide photo shows only ~25% of its width:
     centre that window on the car, not on the loading ramp */
  .hero-media img { object-position: 51% 50%; }
  .hero-photo .hero-inner { padding-block: 40px 34px; }
  .hero-title { margin: 16px 0 14px; }
  .hero-sub { margin-bottom: 24px; font-size: 15.5px; }
  /* duplicates the nav two rows above it */
  .hero-links { display: none; }

  /* the card is the "read more" - its title and icon are enough on a phone */
  .service-desc, .tile-desc { display: none; }
  .service-card { padding-block: 20px; }
  .tile { padding: 18px 16px; }

  html.js .m-more > summary {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 2px 0 18px; padding: 0; cursor: pointer; list-style: none;
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--accent);
  }
  html.js .m-more > summary::-webkit-details-marker { display: none; }
  html.js .m-more > summary::after { content: "\25BE"; font-size: 9px; }
  html.js .m-more[open] > summary { margin-bottom: 8px; }
  html.js .m-more[open] > summary::after { content: "\25B4"; }
  /* over the photo the accent purple is too dark to read - go white there */
  html.js .hero-photo .m-more > summary { color: #fff; margin: 8px 0 24px;
    text-shadow: 0 1px 10px rgba(0,0,0,0.75); }
  html.js .hero-photo .m-more[open] > summary { margin-bottom: 14px; }
  html.js .m-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  body.font-arabic html.js .m-more > summary,
  html.js body.font-arabic .m-more > summary { letter-spacing: normal; text-transform: none; }
}
@media (prefers-reduced-motion: reduce) { .ship-track { scroll-behavior: auto; } }

/* FULL-BLEED PICTURE BAND
   Breaks a long article into readable stretches. Sits directly in <main> so
   it inherits the scroll-reveal, plus a slow settle on the image itself. */
.plate-band { padding: 0; margin-block: clamp(40px, 5vw, 76px); }
.plate { position: relative; width: calc(100vw - var(--sbw)); margin: 0;
  margin-inline-start: calc(50% - (100vw - var(--sbw)) / 2);
  aspect-ratio: 21/9; overflow: hidden; background: var(--surface); }
.plate img, .plate video { width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.06); transition: transform 1.6s cubic-bezier(.2,.6,.2,1); }
main > section.is-in .plate img, main > section.is-in .plate video { transform: scale(1); }
.plate::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(6,7,10,0.92) 0%, rgba(6,7,10,0.48) 44%, rgba(6,7,10,0) 100%); }
.plate-cap { position: absolute; inset-block-end: 0; inset-inline-start: 0; z-index: 1;
  max-width: 60ch; margin: 0; padding: 0 clamp(24px, 5vw, 76px) clamp(24px, 3.4vw, 46px); }
.plate-kicker { display: block; font-size: 10.5px; letter-spacing: var(--label-ls);
  text-transform: uppercase; color: var(--accent-light); margin-bottom: 9px; }
.plate-text { margin: 0; font-size: clamp(16px, 1.7vw, 23px); font-weight: 500; line-height: 1.35;
  letter-spacing: -0.015em; color: #fff; text-wrap: pretty; }
body.font-arabic .plate-kicker { letter-spacing: 0.02em; }
body.font-arabic .plate-text { letter-spacing: normal; line-height: 1.5; }

@media (max-width: 760px) {
  .plate { aspect-ratio: 4/3; }
  .plate-cap { padding-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .plate img, .plate video { transform: none; transition: none; }
}
/* The intro video carries its own on-screen text, so it gets no overlay
   caption and only a light vignette instead of the heavy reading gradient. */
.plate[data-plain]::after { background: linear-gradient(to top, rgba(6,7,10,0.45) 0%, rgba(6,7,10,0) 38%); }
.footer-address { font-style: normal; line-height: 1.55; }

/* Labels are only ever shown in the zoomed view, where the viewBox is ~109
   units wide instead of 1000 - so they need sizing for that scale, not the
   world one, or a single country name spans a third of the map. */
.wm-dest text { font-size: 2px; stroke-width: 0.5px; }

/* ---------------------------------------------------------------------------
   TWO ROUTES - EU delivery vs full export.
   The single most useful thing a visitor can learn before asking for a price,
   so it gets two equal cards rather than a buried paragraph.
   --------------------------------------------------------------------------- */
.track-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.track { display: flex; flex-direction: column; gap: 11px; padding: 26px 24px 22px;
  border-radius: 10px; background: var(--card-bg); box-shadow: 0 0 0 1px var(--card-border);
  text-decoration: none; color: inherit;
  transition: box-shadow .18s ease, transform .18s ease, background .18s ease; }
.track:hover { transform: translateY(-2px); background: var(--surface);
  box-shadow: 0 0 0 1px rgba(145,132,217,0.5), 0 12px 30px rgba(0,0,0,0.32); }
.track-eu { border-inline-start: 3px solid var(--accent); }
.track-ex { border-inline-start: 3px solid #7b71bd; }
.track-lab { font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent); }
.track-h { font-size: 19px; font-weight: 500; margin: 0; letter-spacing: -0.01em; }
.track-p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--muted-70); }
.track-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 3px 0 0; padding: 0; list-style: none; }
.track-chips li { font-size: 11px; padding: 4px 10px; border-radius: 20px;
  background: rgba(145,132,217,0.12); color: var(--muted-70); }
.track-link { margin-top: auto; padding-top: 6px; font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); }
.track:hover .track-link { color: #b9afee; }
body.font-arabic .track-lab, body.font-arabic .track-link { letter-spacing: normal; text-transform: none; }

/* EU page: the three differences, then the country list. */
.eu-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.eu-card { padding: 24px; border-radius: 10px; background: var(--card-bg);
  box-shadow: 0 0 0 1px var(--card-border); }
.eu-card h3 { margin: 0 0 9px; font-size: 16.5px; font-weight: 500; }
.eu-card p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--muted-70); }
.eu-card strong { color: var(--text); font-weight: 600; }
.eu-card em { color: var(--accent); font-style: normal; font-weight: 600; }
.eu-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.eu-chips li { font-size: 13px; padding: 7px 14px; border-radius: 8px;
  background: var(--card-bg); box-shadow: 0 0 0 1px var(--card-border); color: var(--muted-70); }

@media (prefers-reduced-motion: reduce) {
  .track { transition: none; }
  .track:hover { transform: none; }
}

/* WORLD MAP — all 26 markets, click a country to zoom in.
   Geometry is Natural Earth 50m, projected and inlined at build time, so
   there is no map library and no extra request. */
.wm-wrap { position: relative; border-radius: 8px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--card-border); }
.wm { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 490; }
.wm-land path { fill: #1a1f2b; stroke: #10141d; stroke-width: 0.4;
  stroke-linejoin: round; }
.wm-land path.wm-de { fill: #443e63; stroke: #7b71bd; stroke-width: 0.5; }
.wm-served a { cursor: pointer; }
.wm-served path { fill: var(--accent); fill-opacity: 0.45; stroke: #b9afee;
  stroke-width: 0.45; stroke-linejoin: round;
  transition: fill-opacity .18s ease, stroke-width .18s ease; }
.wm-served a:hover path, .wm-served a:focus-visible path,
.wm-served a.is-lit path { fill-opacity: 0.95; stroke-width: 0.9; }
.wm-served a:focus-visible { outline: none; }
/* EU states are a different kind of destination - no customs procedure, no
   shipping arc - so they get their own colour rather than blending into the
   export markets. Blue, next to the brand purple, reads as "the other one". */
.wm-served a.wm-c-eu path { fill: #4c7fc4; fill-opacity: 0.4; stroke: #9dc2f0; }
.wm-served a.wm-c-eu:hover path, .wm-served a.wm-c-eu:focus-visible path,
.wm-served a.wm-c-eu.is-lit path { fill-opacity: 0.9; }

/* Routes out of Bremerhaven. Every marker is a near-zero-length path drawn
   with a round cap and a non-scaling stroke, so a dot stays the same size on
   screen no matter how far the viewBox is zoomed in. Nothing here takes a
   click - the countries underneath stay the hit targets. */
.wm-routes, .wm-origin { pointer-events: none; }
.wm-route { fill: none; stroke: #8d82d8; stroke-width: 1.1; stroke-opacity: 0.42;
  stroke-linecap: round; vector-effect: non-scaling-stroke;
  transition: stroke-opacity .22s ease, stroke-width .22s ease; }
.wm-dot { stroke: var(--accent); stroke-width: 4.5; stroke-linecap: round;
  stroke-opacity: 0.9; fill: none; vector-effect: non-scaling-stroke;
  transition: stroke-opacity .22s ease, stroke-width .22s ease; }

/* A continent view or a picked country quiets everything it is not about. */
.wm[data-focus] .wm-route, .wm[data-focus] .wm-dot,
.wm[data-region] .wm-route, .wm[data-region] .wm-dot { stroke-opacity: 0.09; }
.wm[data-region="europe"] .wm-route[data-cont="europe"],
.wm[data-region="africa"] .wm-route[data-cont="africa"],
.wm[data-region="asia"]   .wm-route[data-cont="asia"] { stroke-opacity: 0.5; }
.wm[data-region="europe"] .wm-dot[data-cont="europe"],
.wm[data-region="africa"] .wm-dot[data-cont="africa"],
.wm[data-region="asia"]   .wm-dot[data-cont="asia"] { stroke-opacity: 0.95; }
.wm .wm-route.is-lit { stroke: #cfc7ff; stroke-opacity: 1; stroke-width: 1.7; }
.wm .wm-dot.is-lit { stroke-opacity: 1; stroke-width: 6.5; }

.wm-origin-halo { stroke: #7b71bd; stroke-width: 13; stroke-linecap: round;
  stroke-opacity: 0.22; fill: none; vector-effect: non-scaling-stroke; }
.wm-origin-dot { stroke: #cfc7ff; stroke-width: 6; stroke-linecap: round;
  fill: none; vector-effect: non-scaling-stroke; }
/* Text is the one thing that cannot use non-scaling-stroke, so site.js hands
   the map its zoom factor as --wmz and the label divides it back out. */
.wm-origin-label { fill: #cfc7ff; font-family: var(--font-latin); font-weight: 600;
  font-size: calc(9px * var(--wmz, 1)); text-anchor: end;
  paint-order: stroke; stroke: rgba(8,10,15,0.85);
  stroke-width: calc(2.5px * var(--wmz, 1)); stroke-linejoin: round; }

.wm-panel { position: absolute; inset-block-end: 74px; inset-inline-start: 18px;
  z-index: 3; display: flex; align-items: center; gap: 16px;
  padding: 13px 16px; border-radius: 7px; background: rgba(11,13,18,0.94);
  box-shadow: 0 0 0 1px rgba(145,132,217,0.45), 0 10px 28px rgba(0,0,0,0.45);
  backdrop-filter: blur(8px); max-width: calc(100% - 36px); }
/* display:flex above outranks the browser's [hidden] rule, so the panel was
   sitting there empty until something was clicked. */
.wm-panel[hidden] { display: none; }
.wm-panel-name { display: block; font-size: 15px; font-weight: 600; color: #fff; }
.wm-panel-port { display: block; font-size: 12px; color: var(--muted-65); margin-top: 3px; }
.wm-panel-link { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); text-decoration: none; white-space: nowrap; }
.wm-panel-link:hover { color: #b9afee; }
.wm-panel-x { background: none; border: 0; color: var(--muted-55); font-size: 20px;
  line-height: 1; cursor: pointer; padding: 0 2px; }
.wm-panel-x:hover { color: #fff; }
body.font-arabic .wm-panel-link { letter-spacing: 0.02em; }

.wm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  padding: 13px 18px; border-top: 1px solid var(--hairline); background: #0b0d12; }
.wm-views { display: inline-flex; border: 1px solid var(--hairline); border-radius: 8px; overflow: hidden; }
.wm-btn { background: transparent; border: 0; border-inline-start: 1px solid var(--hairline);
  color: var(--muted-70); font: inherit; font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 8px 13px; cursor: pointer;
  transition: background .15s ease, color .15s ease; }
.wm-btn:first-child { border-inline-start: 0; }
.wm-btn:hover { color: #fff; }
.wm-btn.is-on { background: var(--accent); color: #0b0c11; }
.wm-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; list-style: none;
  font-size: 11.5px; color: var(--muted-65); }
.wm-legend li { display: flex; align-items: center; gap: 7px; }
.wm-key { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.wm-key-from { background: #cfc7ff; box-shadow: 0 0 0 3px rgba(123,113,189,0.35); }
.wm-key-to { background: var(--accent); }
.wm-key-eu { background: #4c7fc4; }
.wm-key-route { width: 18px; height: 0; border-radius: 0;
  border-top: 2px solid #8d82d8; }
.wm-hint { margin: 0; font-size: 11.5px; color: var(--muted-55); }
body.font-arabic .wm-btn { letter-spacing: 0.02em; }

@media (max-width: 700px) {
  .wm-bar { justify-content: center; }
  .wm-panel { inset-block-end: auto; inset-block-start: 12px; inset-inline-start: 12px;
    flex-wrap: wrap; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .wm-served path, .wm-route, .wm-dot, .dest-card { transition: none; }
  .dest-card:hover { transform: none; }
}

/* ---- Closing call to action ---------------------------------------------
   What is left where the enquiry form used to be pasted at the foot of the
   home page and the six country pages. It keeps the same heading and sentence
   the form was introduced with, and hands the visitor to /quote/, where the
   form is now kept in one place.
   Logical properties throughout so the Arabic build mirrors without a
   second rule. */
.cta-band {
  display: grid; grid-template-columns: 1fr auto; gap: 32px 48px; align-items: center;
  background: var(--surface); border: 1px solid var(--card-border);
  border-radius: 14px; padding: 40px 44px;
}
.cta-band-main { max-width: 56ch; }
.cta-band-title { font-size: clamp(26px,3vw,32px); font-weight: 500;
  letter-spacing: -0.015em; margin: 11.2px 0 14px; color: #fff; text-wrap: pretty; }
.cta-band-sub { font-size: 14.5px; line-height: 1.65; color: var(--muted-70);
  margin: 0; text-wrap: pretty; }
.cta-band-side { display: flex; flex-direction: column; gap: 12px; min-width: 232px; }
/* .btn-outline-light is not a flex box on its own, so centre both buttons here
   rather than leaving one label left-aligned next to the other. */
.cta-band-btn { display: inline-flex; align-items: center; justify-content: center;
  text-align: center; }
.cta-band-note { margin: 2px 0 0; font-size: 12px; line-height: 1.5;
  color: var(--muted-55); text-align: center; text-wrap: pretty; }

@media (max-width: 860px) {
  .cta-band { grid-template-columns: 1fr; gap: 26px; padding: 32px 26px; }
  .cta-band-side { min-width: 0; }
  .cta-band-note { text-align: start; }
}
@media (max-width: 700px) {
  .cta-band { padding: 24px 20px; border-radius: 12px; }
  .cta-band-title { margin-block: 8px 10px; }
}