/* =========================================================
   EURO DESSANT: site.css
   Light look: white and sky sections, navy bar and footer,
   one accent blue. Manrope throughout (css/fonts.css).
   ========================================================= */

:root {
  color-scheme: light;
  --white: #ffffff;
  --sky: #eaf3fc;
  --navy: #12264f;
  --navy-deep: #0c1a3a;
  --accent: #1d5fd6;
  --accent-hover: #174bb0;
  --text: #1b2433;
  --muted: #55627a;
  --line: #d7e1ee;
  --error: #b3261e;
  --gutter: clamp(16px, 4vw, 32px);
  --maxw: 1240px;
  --bar-h: 72px;
  --card-pad: 44px;
  --radius: 18px;
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --shadow-float: 0 30px 70px -26px rgba(12, 26, 58, .55), 0 8px 20px -8px rgba(12, 26, 58, .22);
  --shadow-rest: 0 1px 2px rgba(12, 26, 58, .06), 0 10px 28px -18px rgba(12, 26, 58, .28);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 16px); }
body { margin: 0; background: var(--white); color: var(--text); font-family: var(--font); font-size: 1rem; font-weight: 500; line-height: 1.6; font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
button { font: inherit; }
address { font-style: normal; }
h1, h2, h3 { margin: 0; color: var(--navy); font-weight: 800; text-wrap: balance; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
[hidden], .hidden-field { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.container { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.container.narrow { width: min(100% - 2 * var(--gutter), 820px); }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.center { text-align: center; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.skip { position: absolute; left: 16px; top: -90px; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--white); color: var(--navy); font-weight: 700; text-decoration: none; box-shadow: var(--shadow-float); }
.skip:focus { top: 14px; }

/* ---------- Preview ribbon ---------- */
.ribbon { margin: 0; padding: 7px var(--gutter); background: var(--sky); border-bottom: 1px solid var(--line); color: var(--navy); font-size: .8125rem; font-weight: 700; text-align: center; }

/* ---------- Top bar ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--navy); color: var(--white); transition: box-shadow .2s ease; }
.nav.scrolled { box-shadow: 0 10px 30px -16px rgba(12, 26, 58, .8); }
.nav :focus-visible { outline-color: var(--white); }
.nav-inner { display: flex; align-items: center; gap: 14px; min-height: var(--bar-h); width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.brand { display: inline-flex; align-items: center; flex: none; height: 44px; border-radius: 10px; }
.brand img { width: auto; height: 34px; filter: brightness(0) invert(1); }
.burger { display: none; }
.nav-menu { display: flex; align-items: center; margin-left: auto; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 11px; border-radius: 999px; color: rgba(255, 255, 255, .9); font-size: .9375rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .18s ease, color .18s ease; }
.nav-links a:hover { background: rgba(255, 255, 255, .12); color: var(--white); }
/* Current page: a white pill with navy bold text, so it never depends on colour alone. */
.nav-links a[aria-current="page"] { background: var(--white); color: var(--navy); font-weight: 800; }
.ext-mark { display: inline-block; margin-left: .25em; line-height: 1; }
.ext-mark svg { width: .8em; height: .8em; vertical-align: baseline; }
/* The office number: beside the menu button on tablets, beside the full menu on wide screens.
   Phones get the call bar at the bottom instead (see "Call bar"). */
.nav-call { display: none; flex: none; align-items: center; gap: 8px; height: 44px; padding: 0 10px; border-radius: 999px; color: var(--white); font-size: .9375rem; font-weight: 800; text-decoration: none; white-space: nowrap; transition: background-color .18s ease; }
.nav-call:hover { background: rgba(255, 255, 255, .12); color: var(--white); }
.nav-call .icon-phone { width: 16px; height: 16px; }
@media (min-width: 1360px) { .nav-call { display: inline-flex; margin-left: 4px; } }
@media (min-width: 760px) and (max-width: 1159.98px) {
  .nav-call { display: inline-flex; order: 1; margin-left: auto; }
  .nav-call + .lang { margin-left: 4px; }
}
.lang { display: flex; align-items: center; gap: 2px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .22); }
.lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 32px; padding: 0 10px; border-radius: 999px; color: rgba(255, 255, 255, .9); font-size: .8125rem; font-weight: 700; letter-spacing: .05em; text-decoration: none; }
.lang a[aria-current] { background: var(--white); color: var(--navy); font-weight: 800; }
.lang a:not([aria-current]):hover { background: rgba(255, 255, 255, .14); color: var(--white); }

@media (max-width: 1159.98px) {
  :root { --bar-h: 60px; }
  .brand img { height: 30px; }
  .burger { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 14px; border: 1.5px solid rgba(255, 255, 255, .6); border-radius: 999px; background: transparent; color: var(--white); font-size: .9375rem; font-weight: 700; cursor: pointer; transition: background-color .18s ease, color .18s ease; }
  .burger[aria-expanded="true"] { background: var(--white); border-color: var(--white); color: var(--navy); }
  .burger-icon { position: relative; flex: none; width: 18px; height: 14px; }
  .burger-icon span { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease, top .2s ease; }
  .burger-icon span:nth-child(1) { top: 0; }
  .burger-icon span:nth-child(2) { top: 6px; }
  .burger-icon span:nth-child(3) { top: 12px; }
  .burger[aria-expanded="true"] .burger-icon span:nth-child(1) { top: 6px; transform: rotate(45deg); }
  .burger[aria-expanded="true"] .burger-icon span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] .burger-icon span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

  .nav-menu { position: absolute; top: 100%; left: 0; right: 0; display: block; max-height: calc(100vh - var(--bar-h)); max-height: calc(100dvh - var(--bar-h)); overflow: auto; padding: 10px var(--gutter) 20px; background: var(--navy-deep); box-shadow: 0 26px 40px -22px rgba(12, 26, 58, .7); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
  .nav-menu.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav-links { display: block; }
  .nav-links a { display: flex; height: auto; min-height: 52px; padding: 8px 16px; border-radius: 14px; font-size: 1.0625rem; white-space: normal; }
  .nav-links a + a { margin-top: 2px; }
  /* The language switch stays in the bar on phones, beside the menu button. */
  .lang { order: 2; margin-left: auto; padding-left: 0; border-left: 0; }
  .burger { order: 3; }
  .lang a { height: 40px; min-width: 44px; }

  /* Without JavaScript the menu is simply shown in full under the logo. */
  html:not(.js) .burger { display: none; }
  html:not(.js) .nav { position: static; }
  html:not(.js) .nav-inner { flex-wrap: wrap; height: auto; padding-block: 8px; }
  html:not(.js) .nav-menu { position: static; width: 100%; max-height: none; padding-inline: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
}

@media (max-width: 379.98px) {
  .nav-inner { gap: 8px; }
  .brand img { height: 26px; }
  .lang a { min-width: 38px; padding: 0 6px; }
  .burger { gap: 8px; padding: 0 12px 0 11px; }
}

/* ---------- Buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 0 26px; border: 1.5px solid transparent; border-radius: 999px; font-size: 1rem; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--white); }
.btn-primary:hover { background: var(--accent-hover); color: var(--white); }
.btn-secondary { background: var(--white); border-color: var(--navy); color: var(--navy); }
.btn-secondary:hover { background: var(--sky); color: var(--navy); }
.btn-light { background: var(--white); color: var(--navy); }
.btn-light:hover { background: var(--sky); color: var(--navy); }
.btn[disabled] { opacity: .65; cursor: default; }
.more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; text-decoration: none; }
.more:hover { text-decoration: underline; }
.more:not(.ext)::after { content: ''; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform .18s ease; }
.more:not(.ext):hover::after { transform: translateX(3px) rotate(45deg); }

/* ---------- Clips (see js/video.js) ---------- */
.clip { position: relative; overflow: hidden; background: var(--line); }
.clip picture { display: contents; }
.clip-poster, .clip-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip-video { opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.clip.is-playing .clip-video { opacity: 1; }
.clip-toggle { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 44px; height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .95); color: var(--navy); font-size: .875rem; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 8px 22px -8px rgba(12, 26, 58, .6); }
.clip-toggle:hover { background: var(--white); }
.clip-toggle:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; box-shadow: 0 0 0 8px var(--navy); }
/* pause bars by default; a play triangle when paused */
.clip-toggle::before { content: ''; flex: none; width: 11px; height: 13px; border-left: 4px solid var(--accent); border-right: 4px solid var(--accent); }
.clip-toggle.is-paused::before { width: 0; height: 0; border: 7px solid transparent; border-right-width: 0; border-left: 12px solid var(--accent); }
.clip.is-failed .clip-toggle { display: none; }
/* High contrast mode recolours every border, which would turn the play triangle into a block. */
@media (forced-colors: active) {
  .clip-toggle::before { forced-color-adjust: none; border-left-color: ButtonText; border-right-color: ButtonText; }
  .clip-toggle.is-paused::before { border-left-color: ButtonText; }
}
/* with a mouse, card clips simply play on hover: no button needed there */
@media (hover: hover) and (pointer: fine) {
  .clip[data-clip="hover"] .clip-toggle { display: none; }
}
.clip:not(.has-toggle) .clip-toggle { display: none; }

/* ---------- Home hero ("B", owner and his mother 2026-10-15) ----------
   What the office does in three short lines over the port footage, then the three steps on a
   white bar that overlaps the footage, then the other two services, the company facts and the
   legal line. The first screen has to answer "what do they do" in two seconds. */
.hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(560px, calc(100vh - var(--bar-h) - 34px), 760px); min-height: clamp(560px, calc(100svh - var(--bar-h) - 34px), 760px); padding-block: 56px 150px; background: var(--navy-deep); color: var(--white); }
.hero-media { position: absolute; inset: 0; z-index: -1; background: var(--navy-deep); }
.hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(12, 26, 58, .92) 0%, rgba(12, 26, 58, .76) 50%, rgba(12, 26, 58, .28) 100%); }
/* Icon only: the label lives in aria-label. */
.hero-media .clip-toggle { top: 16px; bottom: auto; right: max(var(--gutter), calc((100% - var(--maxw)) / 2)); background: rgba(255, 255, 255, .86); }
.hero-media .clip-toggle:hover { background: var(--white); }
.hero-inner { position: relative; z-index: 2; pointer-events: none; }
.hero-inner > * { pointer-events: auto; }
/* 24ch holds the longest Lithuanian line ("Priimame Klaipėdoje ir Rygoje.") on one line on a laptop. */
.hero h1 { max-width: 24ch; color: var(--white); font-size: clamp(2.375rem, 1.2rem + 4.4vw, 4.5rem); line-height: 1.02; letter-spacing: -.04em; }
.hero h1 span { display: block; text-wrap: balance; }
.hero h1 span:nth-child(2) { color: #9cc3ff; }
.hero-sub { max-width: 36rem; margin: 22px 0 0; color: rgba(255, 255, 255, .9); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.5; text-wrap: pretty; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn-outline-light { background: transparent; border-color: rgba(255, 255, 255, .8); color: var(--white); }
.btn-outline-light:hover { background: rgba(255, 255, 255, .12); color: var(--white); }
.btn .icon-phone { width: 18px; height: 18px; }
.hero :focus-visible { outline-color: var(--white); }

.steps-wrap { position: relative; z-index: 3; margin-top: -104px; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; border-radius: 22px; background: var(--white); box-shadow: var(--shadow-float); list-style: none; counter-reset: step; }
.steps li { display: flex; gap: 16px; align-items: flex-start; padding: 26px 28px; counter-increment: step; }
.steps li + li { border-left: 1px solid var(--line); }
.steps li::before { content: counter(step); display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--sky); color: var(--accent); font-weight: 800; }
.steps p { margin: 0; }
.steps b { display: block; color: var(--navy); font-size: 1.125rem; font-weight: 800; line-height: 1.25; }
.steps span { color: var(--muted); font-size: .9375rem; }

.hero-after { padding-block: 26px 0; }
.also { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin: 0; color: var(--muted); font-weight: 600; }
.also b { color: var(--navy); }
.also span { display: inline-flex; align-items: center; gap: 7px; }
.also-ico { display: inline-block; flex: none; width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.proof { margin-top: 22px; overflow: hidden; border-radius: 20px; background: var(--sky); border: 1px solid var(--line); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 28px; margin: 0; padding: 22px var(--card-pad) 18px; }
.facts div { padding-left: 14px; border-left: 3px solid var(--accent); }
.facts dt { color: var(--text); font-size: 1rem; font-weight: 600; line-height: 1.35; }
.facts dd { margin: 2px 0 0; color: var(--navy); font-size: 1.25rem; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.hero-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; margin: 0; padding: 4px var(--card-pad) 10px; color: var(--text); font-size: 1.0625rem; }
.hero-tel { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--navy); font-size: 1.3125rem; font-weight: 800; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.hero-tel:hover { color: var(--accent-hover); }
.hero-tel .icon-phone { width: 20px; height: 20px; color: var(--accent); }
.hero-mail { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.hero-legal { margin: 0; padding: 14px var(--card-pad) 16px; border-top: 1px solid var(--line); background: var(--white); color: var(--text); font-size: .9375rem; line-height: 1.55; }
/* Each item wraps as a whole, so a company code or postcode is never split across lines. */
.hero-legal span { display: inline-block; }
.hero-legal a { display: inline-block; font-weight: 700; }

@media (max-width: 999.98px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899.98px) {
  .hero { padding-block: 72px 76px; }
  .steps-wrap { margin-top: -40px; }
  .steps { grid-template-columns: 1fr; }
  .steps li { padding: 18px 20px; }
  .steps li + li { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 759.98px) {
  :root { --card-pad: 22px; }
  .hero { min-height: 0; padding-block: 76px 64px; }
  .hero-media .clip-toggle { top: 12px; right: 12px; }
  .actions { gap: 10px; margin-top: 24px; }
  .actions .btn { flex: 1 1 auto; min-height: 50px; padding: 0 18px; }
  /* The call bar at the bottom of the screen already carries Call and Get a quote. */
  .hero .actions .btn-primary { display: none; }
  .facts { gap: 14px 18px; padding-block: 18px 14px; }
}
@media (max-width: 479.98px) {
  .facts { grid-template-columns: 1fr; gap: 12px; }
}

/* ---------- Call bar (phones only): Call and Get a quote, always in reach ---------- */
.callbar { display: none; }
@media (max-width: 759.98px) {
  .callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 10px; padding: 10px var(--gutter); padding-bottom: max(10px, env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -12px 30px -20px rgba(12, 26, 58, .55); }
  .callbar .btn { min-height: 50px; padding: 0 12px; }
  .callbar .icon-phone { flex: none; }
  /* The open menu can end partway down the bar on short screens, so the bar steps aside. */
  html:has(.nav-menu.is-open) .callbar { visibility: hidden; }
  /* Room for the bar under the footer, and focused items never hide behind it. */
  html { scroll-padding-bottom: 84px; }
  body { padding-bottom: calc(71px + env(safe-area-inset-bottom, 0px)); }
  .page-contact { padding-bottom: 0; }
  .page-contact .callbar { display: none; }
}
/* Short screens (a phone held sideways, or a page zoomed in a long way): no fixed bar,
   the hero keeps its own button. */
@media (max-width: 759.98px) and (max-height: 439.98px) {
  .callbar { display: none; }
  html { scroll-padding-bottom: 0; }
  body { padding-bottom: 0; }
  .hero .actions .btn-primary { display: inline-flex; }
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(56px, 7.5vw, 104px); }
.section.tight { padding-top: clamp(24px, 3vw, 40px); }
.section.sky { background: var(--sky); }
.section-head { max-width: 46rem; margin-bottom: clamp(24px, 3vw, 40px); }
.section-head.center { margin-inline: auto; }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem); line-height: 1.1; letter-spacing: -.03em; }
h3 { font-size: 1.25rem; line-height: 1.25; letter-spacing: -.015em; }
.eyebrow { margin: 0 0 10px; color: var(--accent); font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.lead { margin: 14px 0 0; color: var(--muted); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.55; text-wrap: pretty; }

/* ---------- What we move ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-rest); transition: box-shadow .22s ease; }
@media (hover: hover) { .card:hover { box-shadow: 0 1px 2px rgba(12, 26, 58, .06), 0 24px 44px -22px rgba(12, 26, 58, .45); } }
.card-media { aspect-ratio: 16 / 10; }
.card-body { display: flex; flex: 1; flex-direction: column; padding: 22px 24px 12px; }
.card-body p { margin: 8px 0 6px; color: var(--muted); }
.card-body .more { align-self: flex-start; margin-top: auto; }
@media (max-width: 899.98px) { .cards { grid-template-columns: 1fr; gap: 16px; } .card-media { aspect-ratio: 16 / 9; } }

/* ---------- Split (text beside media) ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.split-text p { color: var(--muted); }
.split-text .lead { margin-bottom: 20px; }
.split-text h2 + p { margin-top: 14px; }
.frame { aspect-ratio: 16 / 10; border-radius: 20px; box-shadow: var(--shadow-float); }
@media (max-width: 899.98px) { .split { grid-template-columns: 1fr; } }
.ticks { display: grid; gap: 10px; margin: 0 0 18px; }
.ticks li { position: relative; padding-left: 30px; color: var(--navy); font-weight: 700; }
.ticks li::before { content: ''; position: absolute; left: 4px; top: .42em; width: 12px; height: 7px; border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent); transform: rotate(-45deg); }

/* ---------- Ports band ---------- */
.ports { position: relative; isolation: isolate; padding-block: clamp(56px, 8vw, 120px); background: var(--navy-deep); }
.ports-media { position: absolute; inset: 0; z-index: 0; }
.ports .container { position: relative; z-index: 2; pointer-events: none; }
.ports-panel { width: min(600px, 100%); padding: 36px var(--card-pad) 24px; border-radius: 20px; background: var(--white); box-shadow: var(--shadow-float); pointer-events: auto; }
.ports-panel p { margin: 12px 0 0; color: var(--muted); }
.port-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 8px; }
.port-list li { padding: 8px 14px; border-radius: 999px; background: var(--sky); border: 1px solid var(--line); color: var(--navy); font-size: .9375rem; font-weight: 700; }
@media (max-width: 759.98px) {
  .ports { padding-block: 0 40px; background: var(--white); }
  .ports-media { position: relative; inset: auto; height: 220px; }
  .ports .container { margin-top: -48px; }
  .ports-media .clip-toggle { top: 12px; bottom: auto; }
  /* the narrow crop would otherwise show only haze: keep the quay and cranes in frame */
  .ports-media .clip-poster, .ports-media .clip-video { object-position: 88% 75%; }
}

/* ---------- YouTube (click to load) ---------- */
.yt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.yt-grid figure { margin: 0; }
.yt-grid figcaption { margin-top: 12px; color: var(--navy); font-weight: 700; }
.yt { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: var(--navy-deep); box-shadow: var(--shadow-rest); }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-play { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.yt-play img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.yt-play:hover img { transform: scale(1.03); }
.yt-btn { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(255, 255, 255, .95); box-shadow: 0 10px 30px -8px rgba(12, 26, 58, .7); }
.yt-btn::before { content: ''; position: absolute; left: 29px; top: 23px; border: 13px solid transparent; border-right-width: 0; border-left: 21px solid var(--accent); }
.yt-play:focus-visible { outline: 3px solid var(--accent); outline-offset: -6px; box-shadow: inset 0 0 0 3px var(--white); }
.yt-note { margin: 12px 0 0; color: var(--muted); font-size: .875rem; }
@media (max-width: 759.98px) { .yt-grid { grid-template-columns: 1fr; } }

/* ---------- Team ---------- */
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 24px; }
.person { padding: 28px 24px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-rest); }
.avatar { display: block; width: 88px; height: 88px; margin-bottom: 16px; border-radius: 50%; object-fit: cover; background: var(--navy); box-shadow: 0 0 0 1px var(--line); }
.role { margin: 6px 0 0; color: var(--muted); }
@media (max-width: 759.98px) { .team { grid-template-columns: 1fr; gap: 14px; } .person { display: grid; grid-template-columns: 64px 1fr; column-gap: 16px; align-items: center; padding: 18px 20px; } .avatar { grid-row: span 2; width: 64px; height: 64px; margin: 0; } }

/* ---------- Contact band ---------- */
.cta-band { background: var(--navy); color: var(--white); padding-block: clamp(44px, 6vw, 72px); }
.cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.cta-band h2 { color: var(--white); }
.cta-band p { margin: 10px 0 0; color: rgba(255, 255, 255, .86); font-size: 1.0625rem; }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.cta-mail { display: inline-flex; align-items: center; min-height: 44px; color: var(--white); font-weight: 700; }
.cta-mail:hover { color: var(--white); }
.cta-band :focus-visible { outline-color: var(--white); }

/* ---------- Sub-page headers ---------- */
.page-hero { position: relative; background: var(--white); padding-bottom: clamp(24px, 4vw, 48px); }
.page-hero-media { height: clamp(240px, 38vw, 440px); background: var(--navy-deep); }
.page-hero .container { position: relative; z-index: 2; margin-top: clamp(-120px, -9vw, -64px); pointer-events: none; }
.page-hero-panel { width: min(720px, 100%); padding: 34px var(--card-pad) 34px; border-radius: 20px; background: var(--white); box-shadow: var(--shadow-float); pointer-events: auto; }
.page-hero h1, .page-top h1 { font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem); line-height: 1.04; letter-spacing: -.035em; }
.page-hero-media .clip-toggle { top: 16px; bottom: auto; right: max(var(--gutter), calc((100% - var(--maxw)) / 2)); }
.page-top { padding-block: clamp(40px, 6vw, 80px) 0; }
@media (max-width: 759.98px) { .page-hero-panel { padding: 24px var(--card-pad); } }

/* ---------- Services ---------- */
.service-list { display: grid; gap: 0; }
.service { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 24px; padding-block: 36px; border-top: 1px solid var(--line); }
.service:first-child { border-top: 0; padding-top: 0; }
.service-no { margin: 0; color: var(--accent); font-size: 1.125rem; font-weight: 800; letter-spacing: .06em; }
.service p { max-width: 44rem; margin: 12px 0 0; color: var(--muted); font-size: 1.0625rem; }
.service .ticks { margin: 18px 0 0; }
.service .more { margin-top: 4px; }
@media (max-width: 759.98px) { .service { grid-template-columns: 1fr; gap: 8px; padding-block: 28px; } }

.handle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.handle li { padding: 28px 24px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); }
.handle p { margin: 10px 0 0; color: var(--muted); }
@media (max-width: 899.98px) { .handle { grid-template-columns: 1fr; gap: 14px; } }

.faq { display: grid; gap: 12px; }
.faq details { border-radius: 14px; background: var(--white); border: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 20px; color: var(--navy); font-size: 1.0625rem; font-weight: 800; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 9px; height: 9px; border-right: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent); transform: rotate(45deg); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:focus-visible { outline-offset: -3px; border-radius: 14px; }
.faq p { margin: 0; padding: 0 20px 20px; color: var(--muted); }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.prose { max-width: 46rem; }
.prose p { font-size: 1.125rem; line-height: 1.7; }
.prose .pull { margin-top: 1.4em; padding-left: 20px; border-left: 3px solid var(--accent); color: var(--navy); font-size: 1.375rem; font-weight: 800; line-height: 1.35; }
.about-card { padding: 28px 26px; border-radius: var(--radius); background: var(--sky); border: 1px solid var(--line); }
.about-card h2 { margin-bottom: 18px; font-size: 1.25rem; letter-spacing: -.015em; }
.about-card .ticks { margin: 0; }
.about-card .ticks li { font-weight: 600; }
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.values li { padding: 28px 24px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); }
.values h2 { font-size: 1.25rem; letter-spacing: -.015em; }
.values p { margin: 10px 0 0; color: var(--muted); }
.details { margin: 0; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); overflow: hidden; }
.details div { display: grid; grid-template-columns: minmax(140px, 34%) 1fr; gap: 6px 20px; padding: 14px 22px; border-top: 1px solid var(--line); }
.details div:first-child { border-top: 0; }
.details dt { color: var(--muted); font-weight: 600; }
.details dd { margin: 0; color: var(--navy); font-weight: 700; overflow-wrap: anywhere; }
@media (max-width: 899.98px) { .about-grid, .values { grid-template-columns: 1fr; } .values { gap: 14px; } }
@media (max-width: 519.98px) { .details div { grid-template-columns: 1fr; } }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.contact-form { padding: clamp(22px, 3vw, 36px); border-radius: 20px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-rest); }
.form { display: grid; gap: 18px; }
.frow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.fgroup { display: grid; gap: 6px; align-content: start; }
.fgroup label { color: var(--navy); font-size: .9375rem; font-weight: 700; }
.req { color: var(--error); }
.opt { color: var(--muted); font-weight: 500; }
.fgroup input, .fgroup textarea { width: 100%; min-height: 52px; padding: 13px 16px; border: 1.5px solid #76859e; border-radius: 12px; background: var(--white); color: var(--text); font: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
.fgroup textarea { min-height: 140px; resize: vertical; }
.fgroup input:focus, .fgroup textarea:focus { outline: 3px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.ferr { display: none; color: var(--error); font-size: .875rem; font-weight: 600; }
.fgroup.invalid .ferr { display: block; }
.fgroup.invalid input, .fgroup.invalid textarea { border-color: var(--error); }
.form-note { margin: 0; color: var(--muted); font-size: .875rem; }
.submit-error { display: none; margin: 0; padding: 12px 16px; border-radius: 12px; background: #fdecea; color: var(--error); font-weight: 600; }
.submit-error.show { display: block; }
.form .btn { justify-self: start; }
.form-success { padding: 8px 4px; }
.form-success:focus { outline: none; }
.form-success h2 { font-size: 1.5rem; letter-spacing: -.015em; }
.form.is-ready .nojs { display: none; }
.form-success p { margin: 10px 0 0; color: var(--muted); }
.form-success:not(.is-demo) .demo-note, .form-success.is-demo .real-note { display: none; }
.offices { display: grid; gap: 16px; }
.office { padding: 24px; border-radius: var(--radius); background: var(--sky); border: 1px solid var(--line); }
.office h2 { margin-bottom: 10px; font-size: 1.125rem; letter-spacing: 0; }
.office address, .office p { margin: 0; color: var(--text); }
.office-lines { margin-top: 10px !important; }
.office-lines a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 700; }
.office-hours { margin-top: 8px !important; color: var(--muted) !important; font-size: .9375rem; }
.office-note { margin: 0; color: var(--muted); font-size: .9375rem; }
@media (max-width: 899.98px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 519.98px) { .frow { grid-template-columns: 1fr; } .form .btn { justify-self: stretch; } }

/* ---------- Shipping rate checker (/rates) ----------
   Markup, ids and behaviour come from the gateway (js/rates.js is a straight copy), so the
   class names are the gateway's rc-* ones. The look is this site's: the front is a white card
   with the contact form's fields, the back is a navy container door. rates.js sets the card's
   height to the face showing; the min-height is only the pre-script fallback. */
.rates .rates-note { max-width: 40rem; margin: 22px auto 0; color: var(--muted); font-size: .9375rem; text-align: center; }
.rates .rates-note strong { color: var(--navy); }
.rates .rates-note + .rates-note { margin-top: 8px; }
.rc-stage { max-width: 540px; margin-inline: auto; perspective: 1400px; }
.rc-card { position: relative; min-height: 560px; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2, .8, .25, 1), min-height .45s ease; }
.rc-card.is-flipped { transform: rotateY(180deg); }
.rc-face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: clamp(22px, 4vw, 34px); border-radius: 20px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.rc-front { background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-float); }
.rc-title { font-size: 1.5rem; letter-spacing: -.015em; }
.rc-lede { margin: 6px 0 20px; color: var(--muted); }
.rc-fld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.rc-fld > span { color: var(--navy); font-size: .9375rem; font-weight: 700; }
.rc-fld select, .rc-ctl select {
  width: 100%; min-width: 0; min-height: 52px; padding: 13px 42px 13px 16px; border: 1.5px solid #76859e; border-radius: 12px;
  /* A file, not a data: URL: the site's CSP allows images from 'self' only. */
  background: var(--white) url("/images/chevron-down.svg") no-repeat right 16px center;
  color: var(--text); font: 600 1rem/1.3 var(--font); -webkit-appearance: none; appearance: none; cursor: pointer;
}
.rc-fld select:focus-visible, .rc-ctl select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.rc-hint { margin: -6px 0 12px; color: var(--accent); font-size: .875rem; font-weight: 700; line-height: 1.4; }
.rc-hint.is-error { color: var(--error); }
.rc-hint:empty { display: none; }
.rc-sub { margin: -8px 0 14px; color: var(--muted); font-size: .8125rem; line-height: 1.4; }
#rcLocFld[hidden] + #rcLocSub { display: none; }
.rc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 16px; }
.rc-chip { min-height: 36px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--sky); color: var(--navy); font: 700 .875rem var(--font); cursor: pointer; transition: border-color .18s ease, background-color .18s ease; }
.rc-chip:hover, .rc-chip.is-active { border-color: var(--accent); background: var(--white); }
.rc-chip.is-active { box-shadow: inset 0 0 0 1px var(--accent); }
.rc-chip:disabled { opacity: .55; cursor: default; }
.rc-go { width: 100%; margin-top: auto; }
.rc-go:disabled { cursor: progress; }

/* the back: a corrugated container door in the site's navy */
.rc-back {
  overflow: hidden; transform: rotateY(180deg); color: var(--white);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 26px, transparent 26px 52px), var(--navy);
  box-shadow: var(--shadow-float);
}
.rc-back::before, .rc-back::after { content: ''; position: absolute; top: 14px; bottom: 14px; width: 5px; border-radius: 3px; background: rgba(255, 255, 255, .08); }
.rc-back::before { left: 14px; }
.rc-back::after { right: 14px; }
.rc-back :focus-visible { outline-color: var(--white); }
.rc-stencil { margin: 0 0 4px; color: #9cc3ff; font: 800 .6875rem/1.4 ui-monospace, Consolas, monospace; letter-spacing: .3em; text-transform: uppercase; }
.rc-route { margin: 0 0 10px; color: var(--white); font-size: 1.1875rem; font-weight: 800; line-height: 1.25; text-transform: uppercase; }
.rc-route:focus { outline: none; }
.rc-explain { margin: 0 0 12px; color: rgba(255, 255, 255, .78); font-size: .8125rem; }
.rc-note { margin: 0 0 10px; color: #ffd27a; font-size: .8125rem; font-weight: 700; line-height: 1.4; }
.rc-lines { flex: 0 1 auto; overflow: auto; margin: 0 6px 14px 0; border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; background: rgba(0, 0, 0, .18); }
.rc-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 16px; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: .9375rem; }
.rc-line:last-child { border-bottom: 0; }
.rc-line .rc-port { font-weight: 700; }
.rc-line .rc-price { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-line.is-best { background: rgba(156, 195, 255, .14); }
.rc-line.is-best .rc-price, .rc-line.is-best .rc-port { color: #bcd8ff; }
.rc-line .rc-tag { margin-left: 8px; color: #9cc3ff; font-size: .625rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.rc-ask { color: #ffd27a; font-size: .875rem; font-weight: 700; }
.rc-lines-sum { flex: 0 0 auto; overflow: visible; }
.rc-lines-sum .rc-line { padding: 16px; font-size: 1rem; }
.rc-fcl { margin: 0 6px 14px 0; padding: 10px 16px 13px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; background: rgba(0, 0, 0, .18); }
.rc-fcl:empty { display: none; }
.rc-fcl-head { color: #9cc3ff; font: 800 .625rem/1.4 ui-monospace, Consolas, monospace; letter-spacing: .22em; text-transform: uppercase; }
.rc-fcl-row { display: flex; gap: 8px; margin-top: 9px; }
.rc-fcl-cell { flex: 1; text-align: center; }
.rc-fcl-cell b { display: block; font-size: .9375rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.rc-fcl-cell span { color: rgba(255, 255, 255, .72); font-size: .6875rem; }
.rc-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; }
.rc-ctl select { flex: 1 1 160px; width: auto; min-height: 48px; padding-block: 10px; font-size: .9375rem; }
.rc-ctl .btn { min-height: 48px; padding: 0 20px; font-size: .9375rem; }
@media (prefers-reduced-motion: reduce) { .rc-card { transition: none; } }

/* ---------- Privacy ---------- */
.draft-flag { display: inline-block; margin: 18px 0 0; padding: 10px 16px; border-radius: 12px; background: #fff6da; border: 1px solid #ecd27a; color: #5c4400; font-weight: 700; }
.legal h2 { margin: 1.8em 0 .5em; font-size: 1.375rem; letter-spacing: -.015em; }
.legal h2:first-child { margin-top: 0; }
.legal p { font-size: 1.0625rem; color: var(--text); }

/* ---------- Footer ---------- */
.footer { background: var(--navy-deep); color: rgba(255, 255, 255, .86); padding-block: clamp(44px, 6vw, 72px) 28px; font-size: .9375rem; }
.footer a { color: var(--white); text-decoration-color: rgba(255, 255, 255, .45); }
.footer a:hover { color: var(--white); text-decoration-color: var(--white); }
.footer :focus-visible { outline-color: var(--white); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr .8fr; gap: 32px 40px; }
.foot-brand img { width: auto; height: 34px; filter: brightness(0) invert(1); }
.foot-brand p { max-width: 20rem; margin: 16px 0 0; }
.foot-col h2 { margin-bottom: 12px; color: var(--white); font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.foot-col address { line-height: 1.75; }
.foot-col strong { color: var(--white); }
.foot-col li a, .foot-col address a { display: inline-flex; align-items: center; min-height: 32px; }
.foot-legal { margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .16); }
.foot-legal p { max-width: 70rem; margin: 0 0 10px; font-size: .875rem; color: rgba(255, 255, 255, .78); }
.foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-top: 18px !important; }
.foot-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-legal .foot-bottom { max-width: none; }
@media (max-width: 999.98px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559.98px) { .footer-grid { grid-template-columns: 1fr; gap: 26px; } }

/* ---------- Print ---------- */
@media print {
  .skip, .ribbon, .nav-menu, .nav-call, .callbar, .lang, .burger, .clip-video, .clip-toggle, .yt-btn, .yt-note, .form .btn { display: none !important; }
  .nav { position: static; }
  .nav, .cta-band, .footer { background: none; color: var(--text); }
  .brand img, .foot-brand img { filter: none; }
  .cta-band h2, .cta-band p, .cta-mail, .footer a, .foot-col h2, .foot-col strong, .foot-legal p { color: var(--text); }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}