/* ============================================================
   Legacy Auto Trading — landing page
   Design tokens mirror the client workspace at legacyautotracking.com
   ============================================================ */

:root {
  color-scheme: dark;

  /* Surfaces */
  --ink:            #080808;
  --canvas:         #0e0c09;
  --panel:          #14110d;
  --panel-raised:   #1d1813;
  --glass:          #1a1510b8;
  --glass-strong:   #100d0adb;
  /* The sticky header needs its own tone, and the constraint is that the page
     behind it is two colours, not one: --ink under plain sections, --canvas
     under the alternating bands. No opaque fill matches both.
     
     So it is tinted rather than painted — a low alpha lets the header track
     whatever is behind it, and this particular value sits equidistant from
     both. Measured as the largest channel difference against each:
     
         --glass-strong  #100d0a at .86    7 off ink,  2 off canvas
         ink             #080808 at .86    0 off ink,  5 off canvas
         this            #0b0a08 at .65    2 off ink,  2 off canvas
     
     Two levels on a near-black background is below the threshold where an
     edge reads. The blur does the work of keeping the nav legible over the
     hero photograph, which is what the tint used to be carrying. */
  --glass-header:   #0b0a08a6;

  /* Brand */
  --gold:           #d9b56b;
  --gold-muted:     #e8cf9a;
  --gold-deep:      #b8934c;
  --ice:            #f7f2e8;
  --muted:          #c5b8a4;
  --muted-dim:      #8e8478;

  /* Lines */
  --stroke:         #b8bec754;

  /* Scrollbars are tinted toward the page, not toward the border token.
     --stroke is a cool blue-grey; on this warm near-black it reads as a cold
     light bar and pulls the eye off the content. */
  --scroll-thumb:       #8e847821;
  --scroll-thumb-live:  #8e84786b;
  --scroll-page:        #6f675c;
  --scroll-page-live:   #8e8478;
  --stroke-soft:    #a9b1ba29;

  /* Radii — children stay at or below their parent */
  --r-panel:        28px;
  --r-card:         22px;
  --r-field:        18px;
  --r-media:        14px;
  --r-pill:         999px;

  /* Layered shadows: ambient + direct */
  --shadow-1: 0 1px 2px #0006, 0 6px 18px -12px #0009;
  --shadow-2: 0 2px 6px #00000073, 0 18px 44px -22px #000000bf;
  --shadow-3: 0 8px 20px #00000080, 0 40px 80px -32px #000000d9;
  --glow-gold: 0 0 0 1px #d9b56b47, 0 8px 26px -10px #d9b56b6b;
  --edge-highlight: inset 0 1px 0 #ffffff0e;

  --focus-ring: 0 0 0 2px var(--ink), 0 0 0 4px var(--gold);

  /* Motion */
  --dur-fast:  .13s;
  --dur-base:  .22s;
  --dur-slow:  .34s;
  --dur-reveal: .78s;                                /* scroll entrances */
  --ease-reveal: cubic-bezier(.22, .68, 0, 1);
  --ease-out:    cubic-bezier(.32, .72, 0, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);

  /* Layout */
  --header-h: 72px;
  --shell:      1200px;
  --shell-narrow: 780px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  --font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* One grade for every photograph on the page. The stock shots arrive in four
     unrelated colour stories — cold blue skies, white desks, red containers —
     and untreated they fight both each other and the warm dark palette. */
  --grade:       saturate(.32) sepia(.34) brightness(.66) contrast(1.06);
  --grade-hover: saturate(.5)  sepia(.22) brightness(.78) contrast(1.04);
}

/* ───────────────────────── Reset & base ───────────────────────── */

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

/* `hidden` must win over any display we set on a component. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--ice);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: #d9b56b33;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-muted); }

/* Section anchors clear the sticky header */
section[id], [id] { scroll-margin-top: calc(var(--header-h) + 24px); }

/* The window scrollbar. Left at the platform default it renders a pale grey
   bar down the edge of a near-black page — the single brightest thing on
   screen. Recoloured to sit in the page, but deliberately kept at the
   default width: it is a control people grab, and thinning it to match the
   panels would trade a real hit target for looks. */
html {
  scrollbar-color: var(--scroll-page) transparent;
}
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb {
  background: var(--scroll-page);
  border-radius: 8px;
  border: 4px solid var(--ink);   /* inset, so the thumb reads narrower than it is */
}
::-webkit-scrollbar-thumb:hover { background: var(--scroll-page-live); }
::-webkit-scrollbar-corner { background: var(--ink); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 6px;
}

::selection { background: #d9b56b40; color: var(--ice); }

/* ───────────────────────── Utilities ───────────────────────── */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell-narrow { max-width: var(--shell-narrow); }

.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
  border-radius: 0 0 var(--r-field) var(--r-field);
  transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus-visible {
  transform: translate(-50%, 0);
  color: var(--ink);
}

.gold-text {
  background: linear-gradient(100deg, var(--gold-muted) 10%, var(--gold) 45%, var(--gold-deep) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  margin: 0 0 .875rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}

.lede { font-size: 1.0625rem; color: var(--muted); }
.note { font-size: .9375rem; color: var(--muted-dim); }

/* ───────────────────────── Buttons ───────────────────────── */

/* Mirrors .legacy-btn in the client workspace: flat fills, 18px radius, no
   resting shadow, and a 0.13s transition. The only glow is on primary hover. */
.btn {
  --btn-pad-y: 12px;
  --btn-pad-x: 20px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 1.15px solid transparent;
  border-radius: var(--r-field);
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  touch-action: manipulation;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}
.btn:active:not(:disabled) { transform: scale(.975); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-sm  { min-height: 40px; --btn-pad-y: 9px;  --btn-pad-x: 16px; font-size: .85rem; }
.btn-lg  { min-height: 52px; --btn-pad-y: 15px; --btn-pad-x: 26px; font-size: 1rem; }
.btn-block { width: 100%; }

.btn-gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
.btn-gold:hover:not(:disabled),
.btn-gold:active:not(:disabled) {
  background: var(--gold-muted);
  border-color: var(--gold-muted);
  color: var(--ink);
  box-shadow: var(--glow-gold);
}

.btn-ghost {
  background: transparent;
  border-color: var(--stroke);
  color: var(--ice);
}
.btn-ghost:hover:not(:disabled),
.btn-ghost:active:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold-muted);
  background: #d9b56b14;
}

/* Loading state — spinner appears, label stays */
.btn-spinner { display: none; }
.btn.is-loading .btn-spinner {
  display: block;
  width: 16px; height: 16px;
  border: 2px solid #08080840;
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ───────────────────────── Header ───────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-top: env(safe-area-inset-top);
  background: transparent;
  transition:
    background-color var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out),
    border-color var(--dur-slow) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: var(--glass-header);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

/* The header used to end on a hairline border and a shadow. Over the hero
   that reads fine, but over a flat dark section — the inventory grid, the
   lower half of the page — a near-opaque bar meeting a near-black page at a
   1px line looks like a slab stuck on top rather than part of it.
   
   This is that edge instead: a short gradient hanging below the header that
   carries its colour down into the page and disappears. It sits outside the
   header box, so it never clips the nav text the way masking the header
   itself would. */
.site-header::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 100%;
  height: 34px;
  background: linear-gradient(to bottom, #0a0908cc 0%, #0a09085c 45%, #0a090800 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.site-header.is-stuck::after { opacity: 1; }

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 8px;
  transition: opacity var(--dur-base) var(--ease-out);
}
.brand:hover { opacity: .82; }
.brand img { width: auto; height: 38px; }

.nav-desktop { margin-inline: auto; }
.nav-list { display: flex; align-items: center; gap: .25rem; }
.nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .4rem .8rem;
  border-radius: var(--r-pill);
  color: var(--muted);
  font-size: .9375rem;
  font-weight: 500;
  transition: color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.nav-list a:hover { color: var(--ice); background: #ffffff0d; }

.header-actions {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-left: auto;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  background: #ffffff08;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  color: var(--ice);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.nav-toggle:hover { background: #ffffff14; border-color: var(--gold); }
.nav-toggle-bars { display: grid; gap: 4px; width: 18px; }
.nav-toggle-bars i {
  display: block; height: 2px; width: 100%;
  background: currentColor; border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* The menu hangs inside the header, so it shares that surface rather than
   painting its own. Two near-black fills of slightly different tone, stacked,
   drew a line straight across between the bar and the menu — and the panel's
   own blur was a second blur inside the header's, which only deepened it. */
.nav-mobile {
  padding: .5rem var(--gutter) calc(1.25rem + env(safe-area-inset-bottom));
  background: transparent;
  overscroll-behavior: contain;
}

/* Opening the menu turns the header surface on even at the top of the page,
   where the bar is otherwise transparent over the hero photo. */
.site-header:has(.nav-toggle[aria-expanded="true"]) {
  background: var(--glass-header);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

/* Without :has() the header cannot know the menu is open, so the panel keeps
   a surface of its own — the same tone, so the two still meet invisibly. */
@supports not selector(:has(*)) {
  .nav-mobile {
    background: var(--glass-header);
    backdrop-filter: blur(14px);
  }
}
.nav-mobile ul { display: grid; gap: 2px; }
.nav-mobile a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: .5rem .75rem;
  border-radius: 12px;
  color: var(--ice);
  font-size: 1rem;
  font-weight: 500;
}
.nav-mobile a:hover { background: #ffffff0d; color: var(--gold-muted); }
.nav-mobile-actions {
  display: grid;
  gap: .625rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--stroke-soft);
}

/* ───────────────────────── Hero ───────────────────────── */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(92svh, 820px);
  margin-top: calc(var(--header-h) * -1 - env(safe-area-inset-top));
  padding: calc(var(--header-h) + 5rem) 0 5rem;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  filter: saturate(.42) sepia(.28) brightness(.72) contrast(1.05);
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, #080808e6 0%, #080808a6 30%, #080808cc 70%, var(--ink) 100%),
    linear-gradient(100deg, #080808f2 0%, #08080899 55%, #0808084d 100%),
    radial-gradient(120% 80% at 15% 40%, #1a1208b3 0%, transparent 60%);
}
.hero-inner { position: relative; max-width: 820px; }

.hero-title {
  margin: 0 0 1.25rem;
  font-size: clamp(2.25rem, 6.2vw, 4.25rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
}
.hero-sub {
  max-width: 58ch;
  margin: 0 0 2rem;
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  color: var(--muted);
  text-wrap: pretty;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2.5rem; }

/* ───────────────────────── Stock preview ─────────────────────────
   A shelf of real cars on the landing page. The second row is deliberately
   cut off by a gradient into the page background: it reads as "there is more
   than this" without pretending to be a full listing, and the call to action
   sits right where the eye lands when the cars fade out. */

.home-stock { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }

.stock-viewport { position: relative; }

.stock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: clamp(.875rem, 2vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Height is a proportion of the grid, so it always lands mid-second-row
   whatever the column count. pointer-events:none keeps the cards under it
   clickable right up to the point they disappear. */
.stock-fade {
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 58%;
  background: linear-gradient(to bottom, #08080800 0%, #080808d9 55%, var(--ink) 88%);
  pointer-events: none;
}

.stock-actions {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: .625rem;
  margin-top: -1.25rem;
  text-align: center;
}
.stock-note { margin: 0; }

/* Card */
.stock-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--stroke-soft);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.stock-card:hover {
  transform: translateY(-3px);
  border-color: #d9b56b47;
  box-shadow: var(--shadow-2);
}
.stock-card:focus-within { border-color: var(--gold); box-shadow: var(--shadow-2), var(--glow-gold); }

/* The whole card is one link; the title carries the accessible name. */
.stock-link { color: inherit; text-decoration: none; }
.stock-link::after { content: ""; position: absolute; inset: 0; }
.stock-link:hover { color: inherit; }

.stock-photo {
  position: relative;
  aspect-ratio: 3 / 2;
  background: #0a0908;
  overflow: hidden;
}
/* Direct child only — the brand mark's own img lives in here too. */
.stock-photo > img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.stock-photo > img.is-loaded { opacity: 1; }
.stock-card:hover .stock-photo > img { transform: scale(1.03); }

/* Same mark, same corner, same reason as the inventory page: these are
   studio shots on near-white grounds and the wordmark is light. */
.stock-mark {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  display: flex;
  padding: .3125rem .5rem;
  background: #0808088c;
  border: 1px solid #ffffff24;
  border-radius: 8px;
  backdrop-filter: blur(9px) saturate(115%);
  -webkit-backdrop-filter: blur(9px) saturate(115%);
  pointer-events: none;
}
.stock-mark img { width: 68px; height: auto; display: block; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .stock-mark { background: #080808e6; }
}

.stock-body { display: grid; gap: .25rem; padding: .875rem 1rem 1.0625rem; }
.stock-name { margin: 0; font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.stock-trim {
  margin: 0;
  font-size: .8125rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stock-price {
  margin: .25rem 0 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .stock-card, .stock-card:hover, .stock-photo > img { transition: none; transform: none; }
}

/* ───────────────────────── Auction partners ───────────────────────── */

.auctions {
  position: relative;
  padding: 2.75rem 0 3rem;
}
/* Divider that fades out before it reaches either page edge. */
.auctions::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--stroke-soft) 22%, var(--stroke-soft) 78%, transparent);
  pointer-events: none;
}
.auctions-title {
  margin-bottom: 2rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-dim);
  text-align: center;
}
.auction-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 6vw, 4.5rem);
}
/* No plates — four light cards on a near-black page were the loudest thing on
   it. The three wordmarks are forced to a single ivory; America's Auto Auction
   keeps its colour because its lettering is knocked out of the map shape and
   flattening it would erase the name. */
.auction-logos li {
  display: flex;
  align-items: center;
  justify-content: center;
}
.auction-logos img {
  width: auto;
  opacity: .58;
  transition: opacity var(--dur-base) var(--ease-out);
}
.auction-logos li:hover img { opacity: .95; }

.logo-manheim img,
.logo-openlane img,
.logo-acv img {
  filter: brightness(0) invert(1) sepia(.16) saturate(1.1);
}
/* Greyscale keeps this mark's internal contrast — its name is knocked out of
   the shape — while sepia pulls it into the same warm family as the wordmarks.
   Colour returns on hover. */
.logo-aaa img {
  filter: grayscale(1) sepia(.42) brightness(1.22) contrast(1.05);
  opacity: .66;
}
.logo-aaa:hover img { filter: none; opacity: 1; }

/* Heights are tuned per mark so they balance optically, not geometrically. */
.logo-manheim  img { height: 30px; }
.logo-openlane img { height: 18px; }
.logo-acv      img { height: 26px; }
.logo-aaa      img { height: 44px; }

/* ───────────────────────── Language switcher ───────────────────────── */

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: #ffffff0a;
  border: 1px solid var(--stroke-soft);
  border-radius: var(--r-pill);
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 34px;
  padding: 0 .5rem;
  background: none;
  border: 0;
  border-radius: var(--r-pill);
  color: var(--muted);
  font-family: inherit;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.lang-btn:hover { color: var(--ice); background: #ffffff12; }
.lang-btn[aria-pressed="true"] {
  background: var(--gold);
  color: var(--ink);
}
.lang-btn[lang="ar"] { font-size: 1rem; }

/* ───────────────────────── Stats ───────────────────────── */

.stats-band {
  padding: 2.5rem 0;
  /* Same colour as before — it just arrives over 44px instead of on a line. */
  background: linear-gradient(180deg,
    #0e0c0900 0,
    var(--canvas) 44px,
    var(--canvas) calc(100% - 44px),
    #0e0c0900 100%);
}
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem 2rem;
  margin: 0;
}
.stat { text-align: left; }
.stat dt {
  order: 2;
  font-size: .875rem;
  color: var(--muted-dim);
  text-wrap: balance;
}
.stat dd {
  order: 1;
  margin: 0 0 .25rem;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.stat { display: flex; flex-direction: column; }

/* ───────────────────────── Sections ───────────────────────── */

.section { padding: clamp(4rem, 9vw, 7rem) 0; }
/* Tonal bands fade in and out over --band, so the step between #080808 and
   #0e0c09 is gradual rather than a hard edge. Same two colours as before. */
.section-alt {
  --band: 120px;
  background: linear-gradient(180deg,
    #0e0c0900 0,
    var(--canvas) var(--band),
    var(--canvas) calc(100% - var(--band)),
    #0e0c0900 100%);
}
/* Contact runs straight into the footer, so it must not fade back out or a
   dark gap opens between two areas that are the same colour. */
.section-alt:last-of-type {
  background: linear-gradient(180deg, #0e0c0900 0, var(--canvas) var(--band), var(--canvas) 100%);
}

.section-head {
  max-width: 640px;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.section-head h2,
.split-text h2 {
  font-size: clamp(1.875rem, 3.6vw, 2.75rem);
  margin-bottom: 1rem;
}
.section-sub { font-size: 1.0625rem; color: var(--muted); margin: 0; }

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
.split-text { min-width: 0; }
.split-text p { color: var(--muted); }
.split-text .lede { color: var(--ice); }
.split-media { min-width: 0; }

.media-frame {
  margin: 0;
  border-radius: var(--r-panel);
  overflow: hidden;
  border: 1px solid var(--stroke-soft);
  box-shadow: var(--shadow-3);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; filter: var(--grade); }
.media-map img { filter: none; }   /* the map is already in palette */

.value-list {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--stroke-soft);
}
.value-list li { display: grid; gap: .125rem; }
.value-name {
  font-weight: 600;
  color: var(--ice);
  font-size: .9375rem;
  letter-spacing: .01em;
}
.value-desc { color: var(--muted-dim); font-size: .9375rem; }

/* ───────────────────────── Cards ───────────────────────── */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1.25rem;
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--stroke-soft);
  border-radius: var(--r-panel);
  overflow: hidden;
  box-shadow: var(--shadow-1), var(--edge-highlight);
  transition:
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.card:hover {
  transform: translateY(-3px);
  border-color: #d9b56b59;
  box-shadow: var(--shadow-2);
}
.card-media {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--panel-raised);
}
.card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--grade);
  transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out);
}
/* Warm wash that ties each photo into the card it sits on. */
.card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0e0c0933 0%, #14110dd9 100%);
  pointer-events: none;
}
.card:hover .card-media img { transform: scale(1.04); filter: var(--grade-hover); }
.card-body { padding: 1.5rem; }
.card-body h3 {
  margin-bottom: .5rem;
  font-size: 1.1875rem;
  color: var(--ice);
}
.card-body p { margin: 0; color: var(--muted); font-size: .9375rem; }

/* ───────────────────────── Steps ───────────────────────── */

.steps {
  display: grid;
  gap: 0;
  margin-inline-start: 1.25rem;
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  padding-block: 0 2.25rem;
  padding-inline: 2rem 0;
}
.step:last-child { padding-bottom: 0; }

/* Each step draws only the segment to the NEXT one, so the track stops at the
   final marker instead of trailing off past the last paragraph. */
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 44px;
  bottom: -4px;
  width: 1px;
  background: var(--stroke-soft);
}

.step-num {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  background: var(--panel-raised);
  border: 1px solid #d9b56b59;
  border-radius: 50%;
  color: var(--gold);
  font-size: .8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-1);
}
/* The last marker is filled, so the sequence reads as arriving somewhere. */
.step:last-child .step-num {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}

.step-body { grid-column: 2; padding-top: .35rem; }
.step-body h3 { margin-bottom: .375rem; font-size: 1.125rem; color: var(--ice); }
.step-body p { margin: 0; color: var(--muted); font-size: .9375rem; max-width: 60ch; }

/* ───────────────────────── Coverage ───────────────────────── */

.coverage-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin: 2rem 0 1.5rem;
}
.coverage-h {
  margin-bottom: .875rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.tick-list { display: grid; gap: .625rem; }
.tick-list li {
  position: relative;
  padding-inline-start: 1.625rem;
  color: var(--muted);
  font-size: .9375rem;
}
/* A checkmark needs a tall, narrow box: the short arm is the width. */
.tick-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px; top: .28em;
  width: 5px; height: 9px;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg);
  transform-origin: center;
}
.tick-gold li { color: var(--ice); }
.port-main { color: var(--ice); font-weight: 600; }

/* ───────────────────────── Workspace ───────────────────────── */

.workspace-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 3.5rem);
  background:
    radial-gradient(100% 120% at 85% 15%, #2a1f0e 0%, transparent 55%),
    var(--panel);
  border: 1px solid var(--stroke-soft);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-3), var(--edge-highlight);
}
.workspace-copy h2 { font-size: clamp(1.75rem, 3.2vw, 2.375rem); margin-bottom: 1rem; }
.workspace-copy > p { color: var(--muted); max-width: 52ch; }
.workspace-copy .tick-list { margin: 1.75rem 0; }
.workspace-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }

.mock-window {
  background: var(--ink);
  border: 1px solid var(--stroke-soft);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-3);
}
.mock-bar {
  display: flex;
  gap: 6px;
  padding: .75rem 1rem;
  background: var(--panel-raised);
  border-bottom: 1px solid var(--stroke-soft);
}
.mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ffffff1f; }
.mock-bar i:first-child { background: #d9b56b8c; }
/* ── Draggable window ──
   The window floats inside the padding of .workspace-mock, so the slack it can
   move through is exactly that padding. */
.workspace-mock {
  position: relative;
  padding: clamp(20px, 4vw, 40px);
  border-radius: var(--r-panel);
}
.workspace-mock::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed var(--stroke-soft);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.workspace-mock.is-dragging::before,
.workspace-mock:focus-within::before { opacity: 1; }

.tracker {
  translate: var(--dx, 0px) var(--dy, 0px);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
/* Only the snap-back animates; dragging must track the pointer exactly. */
.tracker.is-resetting { transition: translate var(--dur-slow) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.workspace-mock.is-dragging .tracker { box-shadow: var(--shadow-3), var(--glow-gold); }

.mock-bar {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.mock-bar:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--r-card) var(--r-card) 0 0; }
.workspace-mock.is-dragging .mock-bar { cursor: grabbing; }
/* Keep a drag from selecting text or poking the controls underneath. */
.workspace-mock.is-dragging { user-select: none; -webkit-user-select: none; }
.workspace-mock.is-dragging .tracker-body { pointer-events: none; }

.mock-title {
  margin-inline-start: .5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .6875rem;
  color: var(--muted-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ── Interactive sample shipment ── */

.tracker-body { padding: 1.25rem 1.25rem 1.375rem; }

.tracker-hint {
  margin: 0 0 1.5rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-dim);
}

.tracker-track { position: relative; }

/* Rail and fill sit behind the dots, level with their centres. */
/* Six equal columns put the outer dot centres at 1/12 from each edge, so the
   rail starts and ends there and the fill lands exactly on a dot. */
.tracker-rail,
.tracker-fill {
  position: absolute;
  top: 7px;
  inset-inline: 8.3333%;
  height: 2px;
  border-radius: 2px;
}
.tracker-rail { background: var(--stroke-soft); }
.tracker-fill {
  background: var(--gold);
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease-out);
}
[dir="rtl"] .tracker-fill { transform-origin: right center; }

.tracker-stages {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .25rem;
}

.tracker-stage {
  display: grid;
  justify-items: center;
  gap: .5rem;
  padding: 0 0 .25rem;
  min-height: 44px;
  background: none;
  border: 0;
  border-radius: 10px;
  color: var(--muted-dim);
  font-family: inherit;
  font-size: .625rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--dur-base) var(--ease-out);
}
.tracker-stage:hover { color: var(--muted); }
.tracker-stage.is-active { color: var(--gold-muted); }

.tracker-dot {
  width: 16px; height: 16px;
  background: var(--panel-raised);
  border: 2px solid var(--stroke);
  border-radius: 50%;
  transition:
    transform var(--dur-base) var(--ease-spring),
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.tracker-stage:hover .tracker-dot { border-color: var(--muted-dim); }
/* Stages already passed stay filled, so the journey reads at a glance. */
.tracker-stage.is-done .tracker-dot {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
}
.tracker-stage.is-active .tracker-dot {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.35);
}

.tracker-label { max-width: 8ch; overflow-wrap: break-word; }

.tracker-panels { margin-top: 1.25rem; }
.tracker-panel { min-height: 66px; }
.tracker-panel:focus-visible { box-shadow: var(--focus-ring); border-radius: 10px; }
.tracker-panel > * { animation: tracker-in var(--dur-slow) var(--ease-out) both; }

@keyframes tracker-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.tracker-status {
  margin: 0 0 .375rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--ice);
  text-wrap: pretty;
}
.tracker-detail {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .6875rem;
  color: var(--muted-dim);
  animation-delay: 60ms;
}

/* ───────────────────────── FAQ ───────────────────────── */

.faq { display: grid; gap: .75rem; }
.faq-item {
  background: var(--panel);
  border: 1px solid var(--stroke-soft);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur-base) var(--ease-out);
}
.faq-item:hover { border-color: var(--stroke); }
.faq-item h3 { margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: normal; }

.faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 56px;
  padding: 1rem 1.25rem;
  background: none;
  border: 0;
  border-radius: var(--r-card);
  color: var(--ice);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.faq-trigger:hover { background: #ffffff08; color: var(--gold-muted); }
.faq-trigger > span:first-child { min-width: 0; }

.faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 22px; height: 22px;
  border: 1px solid var(--stroke);
  border-radius: 50%;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 1.5px;
  background: var(--gold);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-trigger[aria-expanded="true"] .faq-icon { border-color: var(--gold); transform: rotate(180deg); }
.faq-trigger[aria-expanded="true"] .faq-icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }

.faq-panel { padding: 0 1.25rem 1.25rem; }
.faq-panel p { margin: 0; color: var(--muted); font-size: .9375rem; max-width: 68ch; }

/* ───────────────────────── Contact ───────────────────────── */

.split-contact { align-items: start; }

.contact-list {
  display: grid;
  gap: 1.125rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--stroke-soft);
}
.contact-list li { display: grid; gap: .125rem; }
.contact-label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.contact-list a, .contact-list span:not(.contact-label) {
  font-size: 1rem;
  color: var(--ice);
  word-break: break-word;
}
.contact-list a {
  display: inline-flex;        /* inline boxes ignore min-height */
  align-items: center;
  align-self: start;
  min-height: 28px;
  color: var(--gold);
}
.contact-list a:hover { color: var(--gold-muted); text-decoration: underline; }

.contact-form {
  display: grid;
  gap: 1.125rem;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--panel);
  border: 1px solid var(--stroke-soft);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-2), var(--edge-highlight);
}
.form-intro { margin: 0; font-size: .8125rem; color: var(--muted-dim); }

.field { display: grid; gap: .4375rem; min-width: 0; }
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 1.125rem;
}
.field label {
  font-size: .875rem;
  font-weight: 500;
  color: var(--ice);
}
.req { color: var(--gold); margin-left: .125rem; }
.optional { color: var(--muted-dim); font-weight: 400; font-size: .8125rem; }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: .75rem 1rem;
  background: var(--ink);
  color: var(--ice);
  border: 1px solid var(--stroke);
  border-radius: var(--r-field);
  font-family: inherit;
  font-size: 16px; /* ≥16px keeps iOS from zooming on focus */
  line-height: 1.4;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.field textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.field select {
  appearance: none;
  background-color: var(--ink);
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-inline-end: 2.75rem;
  cursor: pointer;
}
.field select option { background-color: var(--panel); color: var(--ice); }

/* Placeholders carry example formats, so they clear 4.5:1 like body text. */
.field input::placeholder,
.field textarea::placeholder { color: #877e71; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: #b8bec78c; }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: var(--focus-ring);
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #ff8a6b; }

.field-error {
  display: flex;
  align-items: flex-start;
  gap: .375rem;
  margin: 0;
  font-size: .8125rem;
  font-weight: 500;
  color: #ff8a6b;
}
.field-error::before { content: "⚠"; flex-shrink: 0; line-height: 1.4; }

.field-hint { margin: 0; font-size: .75rem; color: var(--muted-dim); }
kbd {
  padding: .1rem .35rem;
  background: var(--panel-raised);
  border: 1px solid var(--stroke-soft);
  border-radius: 5px;
  font-family: inherit;
  font-size: .6875rem;
}

.form-status { margin: 0; font-size: .875rem; min-height: 1.25rem; }
.form-status:empty { display: none; }
.form-status.is-ok    { color: var(--gold-muted); }
.form-status.is-error { color: #ff8a6b; }

/* ───────────────────────── Footer ───────────────────────── */

.site-footer {
  background: var(--canvas);
  padding-bottom: env(safe-area-inset-bottom);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-block: clamp(3rem, 6vw, 4rem);
}
.footer-brand img { width: auto; height: 44px; margin-bottom: 1rem; }
.footer-brand p { color: var(--muted-dim); font-size: .9375rem; max-width: 38ch; }

.footer-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 2rem;
}
.footer-h {
  margin-bottom: .875rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.footer-nav ul { display: grid; gap: .125rem; }
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--muted);
  font-size: .9375rem;
}
.footer-nav a:hover { color: var(--gold-muted); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--stroke-soft);
}
.footer-base p { margin: 0; font-size: .8125rem; color: var(--muted-dim); }
.footer-base a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;           /* the text is only 16px tall — widen the target */
  color: var(--muted-dim);
}
.footer-base a:hover { color: var(--gold); text-decoration: underline; }
.footer-disclaimer { max-width: 46ch; }

/* The credit sits last on a wide screen and drops under the rest on a narrow
   one, where space-between would otherwise strand it alone on a line. */
.footer-credit { margin-inline-start: auto; }
.footer-credit a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 620px) {
  .footer-credit { margin-inline-start: 0; }
}

/* ───────────────────────── Reveal on scroll ───────────────────────── */

.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--dur-reveal) var(--ease-reveal),
    transform var(--dur-reveal) var(--ease-reveal);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ───────────────────────── Responsive ───────────────────────── */

@media (min-width: 880px) {
  .split { grid-template-columns: 1.05fr .95fr; }
  .split-reverse .split-text { order: 2; }
  .split-reverse .split-media { order: 1; }
  .split-contact { grid-template-columns: .9fr 1.1fr; }
  .workspace-panel { grid-template-columns: 1.05fr .95fr; }
  .steps { margin-left: 1.5rem; }
}

@media (max-width: 1040px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-quote { display: none; }
}

/* Touch pointers need roomier targets than a mouse does. */
@media (pointer: coarse) {
  .footer-nav a,
  .footer-base a,
  .contact-list a { min-height: 44px; }
}

@media (max-width: 620px) {
  .brand img { height: 32px; }
  .hero { min-height: auto; padding-top: calc(var(--header-h) + 3.5rem); padding-bottom: 3.5rem; }
  .hero-cta .btn { flex: 1 1 auto; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer-base { flex-direction: column; align-items: flex-start; }
}

/* Ultra-wide: keep line lengths sane rather than letting text sprawl */
@media (min-width: 1700px) {
  :root { --shell: 1320px; }
}

/* ───────────────────────── Interaction & motion ─────────────────────────
   Everything here animates transform or opacity only, and every autoplaying
   piece runs once on entry rather than looping, so nothing needs a stop
   control and nothing fights the reduced-motion block below.
   ------------------------------------------------------------------ */

/* Reading progress — a gold hairline across the bottom of the header. */
.scroll-progress {
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 2px;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  background: var(--gold);
  transform: scaleX(var(--read, 0));
  transform-origin: left center;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
[dir="rtl"] .scroll-progress span { transform-origin: right center; }
.site-header.is-stuck .scroll-progress span { opacity: 1; }

/* Hero: the image settles once on load, then tracks the scroll.
   `translate` and `scale` are independent properties, so the two compose
   without either overwriting a shared `transform`. */
.hero-bg {
  scale: 1.05;
  will-change: translate;
}
.js .hero-bg { animation: hero-settle 1.8s var(--ease-out) both; }
@keyframes hero-settle {
  from { scale: 1.14; opacity: .4; }
  to   { scale: 1.05; opacity: 1; }
}

/* Staggered entrance for the hero copy. */
.js .hero-inner > .reveal { transition-delay: var(--enter-delay, 0ms); }

/* Steps: a gold line that fills as you scroll the journey. */
.steps { position: relative; }
.steps::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 44px;
  width: 1px;
  height: var(--track-h, 0px);
  background: var(--gold);
  transform: scaleY(var(--track, 0));
  transform-origin: top center;
  transition: transform var(--dur-slow) linear;
  pointer-events: none;
}
.step-num {
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-spring);
}
.step.is-reached .step-num {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
[dir="rtl"] .step.is-reached .step-num { transform: translateX(50%) scale(1.06); }
.step.is-reached .step-num { transform: translateX(-50%) scale(1.06); }

/* Cards: a soft gold spotlight that follows the pointer. */
.card { position: relative; }
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    22rem circle at var(--mx, 50%) var(--my, 0%),
    #d9b56b1f, transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.card:hover::after,
.card:focus-within::after { opacity: 1; }

/* Coverage: the shipping lane drawn over the photograph. */
.media-map {
  position: relative;
  aspect-ratio: 195 / 110;   /* matches the map viewBox, so nothing is cropped */
  background: radial-gradient(120% 90% at 50% 40%, #12100c 0%, var(--ink) 100%);
}
.worldmap-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.route-path {
  stroke: var(--gold);
  stroke-width: .7;
  stroke-dasharray: 2.4 3;
  stroke-linecap: round;
  opacity: .9;
}
.route-node circle { fill: var(--gold); }
.route-node-ring {
  fill: #d9b56b26;
  stroke: var(--gold);
  stroke-width: .35;
  opacity: .8;
}
.route-ship {
  fill: var(--ice);
  offset-path: path("M 104.5 52.5 Q 160 29 215 60.5");
  offset-rotate: 0deg;
  offset-distance: 100%;
}
/* Runs once each time the lane scrolls into view — never a loop. */
.route.is-sailing .route-ship { animation: sail 3.4s var(--ease-out) both; }
@keyframes sail {
  from { offset-distance: 0%;   opacity: 0; }
  12%  { opacity: 1; }
  90%  { opacity: 1; }
  to   { offset-distance: 100%; opacity: 1; }
}

.route-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.route-label {
  position: absolute;
  padding: .3rem .6rem;
  background: #080808cc;
  border: 1px solid var(--stroke-soft);
  border-radius: var(--r-pill);
  font-size: .6875rem;
  font-weight: 600;
  color: var(--ice);
  white-space: nowrap;
}
/* Percentages derived from the map viewBox: (x-50)/195 and (y-16)/110. */
.route-label-start { left: 27.9%; top: 33.2%; transform: translate(-50%, 14px); }
.route-label-end   { left: 84.6%; top: 40.5%; transform: translate(-50%, 14px); }

/* ───────────────────────── Controls don't select ─────────────────────────
   A control's text is a label, not content. Left selectable, clicking or
   dragging one highlights the word and leaves a caret sitting in it, which
   reads as a text field and is the single most irritating thing about a
   dense UI.

   Deliberately NOT listed: form fields, phone numbers, email addresses, VINs
   and stock numbers, and body copy. Those are all things someone reasonably
   wants to select and copy. */

button,
summary,
[role="button"],
[role="tab"],
.btn,
.skip-link,
.lane-opt,
.lang-btn,
.nav-toggle,
.faq-trigger,
.tracker-stage,
.stock-link,
.nav-list a,
.nav-mobile a,
.footer-nav a {
  -webkit-user-select: none;
  user-select: none;
}

/* A phone number or an email address is always worth copying, wherever it
   sits — including the footer list and the "Call us" button, both of which
   the rule above would otherwise have caught. */
a[href^="tel:"],
a[href^="mailto:"] {
  -webkit-user-select: text;
  user-select: text;
}

/* ───────────────────────── Lane picker ─────────────────────────
   Origin and destination columns beside the map. Native radios do the
   semantics and the arrow-key behaviour; everything here is presentation. */

.lane-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.lane-group + .lane-group { margin-top: 0; }
.lane-list { display: grid; gap: .0625rem; margin: .25rem 0 0; }

.lane-opt {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 32px;
  padding: .1875rem .375rem;
  margin-inline-start: -.375rem;
  border-radius: 9px;
  color: var(--muted);
  font-size: .875rem;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.lane-opt:hover { color: var(--ice); background: #ffffff08; }

/* The input stays in the layout (not display:none) so it keeps its role and
   stays reachable; it is the mark beside it that is painted. */
.lane-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.lane-mark {
  flex: none;
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 1.15px solid var(--stroke);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.lane-opt input:checked ~ .lane-mark {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 3px var(--gold);
}
.lane-opt input:focus-visible ~ .lane-mark { box-shadow: inset 0 0 0 3px var(--gold), var(--focus-ring); }
.lane-opt input:checked ~ .lane-name { color: var(--ice); font-weight: 600; }

.lane-name { min-width: 0; }

/* Ports this origin does not reach. Left in place rather than hidden so the
   list keeps its shape and you can see what exists — the line-through says
   "not from here", not "does not exist". */
.lane-opt.is-unavailable {
  color: var(--muted-dim);
  cursor: not-allowed;
  opacity: .55;
}
.lane-opt.is-unavailable:hover { background: none; color: var(--muted-dim); }
.lane-opt.is-unavailable .lane-name { text-decoration: line-through; text-decoration-thickness: 1px; }
.lane-opt.is-unavailable .lane-mark { border-style: dashed; }
.lane-note { margin: .625rem 0 0; font-size: .75rem; }

@media (pointer: coarse) {
  .lane-opt { min-height: 44px; }
}

/* ───────────────────────── Arabic & RTL ───────────────────────── */

:root:lang(ar) {
  --font: "Cairo", "Noto Sans Arabic", ui-sans-serif, system-ui, sans-serif;
}

/* Arabic letterforms join up: tracking and uppercasing either do nothing or
   actively break the script, so both are switched off. */
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) h4,
:lang(ar) .hero-title, :lang(ar) .stat dd,
:lang(ar) .eyebrow, :lang(ar) .coverage-h, :lang(ar) .contact-label,
:lang(ar) .footer-h, :lang(ar) .auctions-title, :lang(ar) .value-name {
  letter-spacing: normal;
}
:lang(ar) .eyebrow, :lang(ar) .coverage-h, :lang(ar) .contact-label,
:lang(ar) .footer-h, :lang(ar) .auctions-title {
  text-transform: none;
}
/* Arabic sits taller in the line box than Latin at the same size. */
:lang(ar) body { line-height: 1.8; }
:lang(ar) .hero-title { line-height: 1.25; }
:lang(ar) h2 { line-height: 1.35; }

/* Numbers, emails and the phone number stay left-to-right inside Arabic text. */
:lang(ar) .num,
:lang(ar) .mock-vin { direction: ltr; unicode-bidi: isolate; }

/* Fixes that logical properties cannot express. */
[dir="rtl"] .hero-scrim {
  background:
    linear-gradient(180deg, #080808e6 0%, #080808a6 30%, #080808cc 70%, var(--ink) 100%),
    linear-gradient(260deg, #080808f2 0%, #08080899 55%, #0808084d 100%),
    radial-gradient(120% 80% at 85% 40%, #1a1208b3 0%, transparent 60%);
}
[dir="rtl"] .step-num { transform: translateX(50%); }
[dir="rtl"] .field select {
  background-position: 14px calc(50% + 2px), 20px calc(50% + 2px);
}

/* ───────────────────────── Reduced motion ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .card:hover { transform: none; }
  .card:hover .card-media img { transform: none; }
  .btn:active { transform: none; }
}