/* ==========================================================================
   REMAL International — design system
   --------------------------------------------------------------------------
   Palette is taken from the client's own wordmark: aubergine letterforms,
   an orange accent and a dark-green leaf, on the linen ground the original
   was printed against. Aubergine leads rather than the linen, deliberately:
   cream-plus-serif-plus-warm-accent is the default look every generated food
   site arrives in, and leading with the deep purple puts this one somewhere
   else entirely.

   Type carries three jobs, one face each:
     Cinzel      the wordmark and brand moments only — never body copy
     Archivo     display and text; a grotesque, so it argues with the serif
     Plex Mono   the data layer: HS codes, tonnages, Incoterms, lot specs

   The mono layer is the concept. This is a commodity trading company, so the
   page is built like a cargo manifest: real numbers, in a monospace rail,
   running underneath the marketing. Structure encodes fact, not decoration.
   ========================================================================== */

:root {
  /* ground + ink */
  --linen:            #EFE9DE;
  --paper:            #F8F5EF;
  --paper-2:          #FFFFFF;
  --ink:              #1B1420;
  --ink-2:            #453950;
  --muted:            #6B5F76;
  --line:             #DED4C6;
  --line-strong:      #C9BCA9;

  /* brand */
  --aubergine:        #3D2456;
  --aubergine-deep:   #241435;
  --aubergine-mid:    #5A3C78;
  --aubergine-tint:   #EDE7F2;
  --orange:           #C56A14;   /* fills and accents only */
  --orange-bright:    #D2761E;   /* fills; 5.14:1 with deep aubergine on top */
  --orange-text:      #96500B;   /* TEXT on light grounds: 6.09:1 white, 5.04:1 linen */
  --orange-on-dark:   #E9A45C;   /* TEXT on aubergine grounds: 6.27:1 */
  --orange-soft:      #F3E2CE;
  --leaf:             #24451F;
  --leaf-mid:         #33612A;
  --leaf-light:       #8CBF6B;
  --leaf-tint:        #E4EFDD;

  /* on dark grounds */
  --on-dark:          #F3EEE6;
  --on-dark-2:        #CDBFD9;
  --on-dark-muted:    #9A87A9;
  --on-dark-line:     #402A57;

  /* type */
  --f-brand: "Cinzel", Georgia, "Times New Roman", serif;
  --f-sans:  "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono:  "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* rhythm */
  --wrap: 1180px;
  --gut: clamp(20px, 4vw, 40px);
  --sec: clamp(64px, 9vw, 128px);
  --r: 4px;
  --r-lg: 8px;

  --shadow-sm: 0 1px 2px rgba(27, 20, 32, .06), 0 2px 8px rgba(27, 20, 32, .05);
  --shadow:    0 2px 4px rgba(27, 20, 32, .05), 0 14px 40px rgba(27, 20, 32, .09);
  --shadow-lg: 0 4px 8px rgba(27, 20, 32, .06), 0 28px 70px rgba(27, 20, 32, .14);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -.025em; line-height: 1.08; text-wrap: balance; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.15em; }
li { margin-bottom: .4em; }
a { color: var(--orange-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--orange-bright); outline-offset: 2px; border-radius: 2px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.wrap { width: min(100% - (var(--gut) * 2), var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - (var(--gut) * 2), 760px); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--aubergine-deep); color: var(--on-dark);
  padding: 12px 18px; border-radius: 0 0 var(--r) 0; font-weight: 600;
}
.skip:focus { left: 0; }

.vh {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------- type --- */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--orange-text); margin: 0 0 14px;
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: var(--orange-bright); flex: none;
}
.on-dark .eyebrow, .hero .eyebrow, .cta-band .eyebrow { color: var(--orange-on-dark); }
.on-dark .eyebrow::before, .hero .eyebrow::before, .cta-band .eyebrow::before { background: var(--orange-bright); }

.h1 { font-size: clamp(38px, 6.4vw, 74px); }
.h2 { font-size: clamp(29px, 4.2vw, 50px); }
.h3 { font-size: clamp(21px, 2.3vw, 27px); letter-spacing: -.02em; }
.h4 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }

.lede { font-size: clamp(17px, 1.65vw, 21px); color: var(--ink-2); line-height: 1.58; max-width: 62ch; }
.on-dark .lede { color: #DCD0E6; }

.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.data-label {
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.on-dark .data-label, .hero .data-label, .route .data-label,
.cta-band .data-label { color: var(--on-dark-muted); }

/* --------------------------------------------------------------- brand -- */
.brandmark { display: inline-flex; align-items: center; gap: .42em; text-decoration: none; }
.brandmark:hover { text-decoration: none; }
.brandmark .word {
  font-family: var(--f-brand); font-weight: 600;
  color: var(--aubergine); letter-spacing: .04em; line-height: 1;
  font-size: 1.55rem; display: inline-block;
}
.brandmark .word .cap { font-size: 1em; }
.brandmark .word .sc { font-size: .735em; }
.brandmark .leaf { width: .95em; height: .95em; flex: none; transform: translateY(-.06em); }
.brandmark .leaf .blade { fill: var(--leaf); }
.brandmark .leaf .rib { stroke: var(--leaf-mid); }
.brandmark .leaf .stem { stroke: var(--orange-bright); }
.on-dark .brandmark .word { color: var(--on-dark); }
.on-dark .brandmark .leaf .blade { fill: var(--leaf-light); }
.on-dark .brandmark .leaf .rib { stroke: #B9DBA0; }

/* --------------------------------------------------------------- header - */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(248, 245, 239, .88);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line); }
.nav-row { display: flex; align-items: center; gap: 18px; height: 74px; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-links a {
  color: var(--ink-2); font-size: 15px; font-weight: 500;
  padding: 9px 13px; border-radius: var(--r); position: relative;
  transition: color .18s var(--ease);
}
.nav-links a:hover { color: var(--aubergine); text-decoration: none; }
.nav-links a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px;
  height: 2px; background: var(--orange); transform: scaleX(0);
  transform-origin: left; transition: transform .28s var(--ease);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--aubergine); }
/* .nav-links a is (0,2,0) and was winning over .btn-primary (0,1,0), so the
   header CTA rendered dark text the button rule never asked for. */
.nav-links a.btn-primary { color: var(--aubergine-deep); }
.nav-links a.btn-primary:hover { color: var(--aubergine-deep); }
.nav-links a.btn::after { display: none; }

.lang-switch {
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 6px 12px; color: var(--muted); margin-left: 6px;
}
.lang-switch:hover { border-color: var(--aubergine); color: var(--aubergine); text-decoration: none; }

.nav-cta { margin-left: 8px; }

.burger {
  display: none; margin-left: auto; width: 44px; height: 44px;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  background: transparent; cursor: pointer; padding: 0;
  align-items: center; justify-content: center; flex-direction: column; gap: 4px;
}
.burger span { display: block; width: 18px; height: 1.6px; background: var(--aubergine); transition: transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--f-sans); font-size: 15px; font-weight: 600;
  padding: 14px 24px; border-radius: var(--r); border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; line-height: 1;
  transition: background .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 16px; height: 16px; flex: none; }

/* Deep aubergine on bright orange measures 5.14:1. White on the same fill
   is 3.86:1 and fails, and darkening the fill enough to carry white text
   would have dulled the only vivid colour in the palette. */
.btn-primary { background: var(--orange-bright); color: var(--aubergine-deep); font-weight: 700;
  box-shadow: 0 6px 18px rgba(197, 106, 20, .30); }
.btn-primary:hover { background: #E0851F; color: var(--aubergine-deep);
  box-shadow: 0 10px 26px rgba(197, 106, 20, .38); }

.btn-dark { background: var(--aubergine); color: var(--on-dark); }
.btn-dark:hover { background: var(--aubergine-deep); }

.btn-ghost { border-color: var(--line-strong); color: var(--aubergine); background: transparent; }
.btn-ghost:hover { border-color: var(--aubergine); background: var(--aubergine-tint); }

/* Dark-ground variant. This must list every dark section, not just .on-dark:
   the hero and the CTA band are dark but carry their own classes, and without
   them .btn-ghost inherits the light-ground rule and renders aubergine text on
   an aubergine background — measured at 1.29:1 against a 4.5:1 requirement. */
.on-dark .btn-ghost,
.hero .btn-ghost,
.cta-band .btn-ghost {
  border-color: rgba(243, 238, 230, .38);
  color: var(--on-dark);
  background: transparent;
}
.on-dark .btn-ghost:hover,
.hero .btn-ghost:hover,
.cta-band .btn-ghost:hover {
  border-color: var(--on-dark);
  background: rgba(255, 255, 255, .09);
  color: var(--on-dark);
}

.btn-wa { background: var(--leaf-mid); color: #fff; }
.btn-wa:hover { background: var(--leaf); }

.btn-sm { padding: 10px 16px; font-size: 14px; }

/* --------------------------------------------------------------- section */
.sec { padding: var(--sec) 0; position: relative; }
.sec-tight { padding: clamp(44px, 6vw, 78px) 0; }
.on-linen { background: var(--linen); }
.on-white { background: var(--paper-2); }
.on-dark {
  background: var(--aubergine-deep); color: var(--on-dark);
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--on-dark); }
.on-dark p { color: var(--on-dark-2); }
.on-dark a:not(.btn), .hero a:not(.btn), .cta-band a:not(.btn) { color: var(--orange-on-dark); }

.sec-head { max-width: 66ch; margin-bottom: clamp(34px, 4.5vw, 58px); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .eyebrow { justify-content: center; }
.sec-head p { margin-top: 18px; }

/* --------------------------------------------------------------- hero --- */
.hero {
  position: relative; overflow: hidden;
  background: var(--aubergine-deep); color: var(--on-dark);
  padding: clamp(56px, 8vw, 104px) 0 clamp(60px, 8vw, 108px);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--hero-img);
  background-size: cover; background-position: center;
  opacity: .26; filter: saturate(.72);
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(110% 80% at 12% 8%, rgba(36,20,53,.62) 0%, rgba(36,20,53,.94) 58%, #241435 100%),
    linear-gradient(180deg, rgba(36,20,53,.2) 0%, rgba(36,20,53,.85) 88%);
}
.hero > .wrap { position: relative; z-index: 2; }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { font-size: clamp(36px, 5.9vw, 70px); }
.hero h1 .hl { color: var(--orange-bright); }
.hero .lede { margin-top: 22px; color: #DCD0E6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.hero-trust {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 34px;
  padding-top: 24px; border-top: 1px solid var(--on-dark-line);
  font-family: var(--f-mono); font-size: 12px; color: var(--on-dark-2);
}
.hero-trust span { display: flex; align-items: center; gap: 8px; }
.hero-trust svg { width: 13px; height: 13px; color: var(--leaf-light); flex: none; }

/* route map --------------------------------------------------------------- */
/* Real geography, not an abstract curve: the Alexandria-Constanta sea route
   over Natural Earth coastlines. The passage through the Dardanelles, the Sea
   of Marmara and the Bosphorus is the whole reason transit is 10-14 days, so
   the map earns its place by explaining a number stated next to it. */
.route {
  background: rgba(255,255,255,.045); border: 1px solid var(--on-dark-line);
  border-radius: var(--r-lg); padding: clamp(18px, 2.4vw, 26px);
  backdrop-filter: blur(8px);
}
.route-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.route-map { position: relative; margin: 0 0 18px; border-radius: var(--r); overflow: hidden; }
.route-svg { width: 100%; height: auto; display: block; }
.route-svg .sea { fill: #170C24; }
.route-svg .land path {
  fill: #402A5C; stroke: #5C4084; stroke-width: .6; stroke-linejoin: round;
}
.route-svg .route-track {
  fill: none; stroke: #5C4084; stroke-width: 1.8; stroke-dasharray: 3 5;
}
.route-svg .route-live {
  fill: none; stroke: var(--orange-on-dark); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200);
}
.is-revealed .route-svg .route-live { animation: sail 2.4s var(--ease) .3s forwards; }
@keyframes sail { to { stroke-dashoffset: 0; } }
.route-svg .port { fill: var(--aubergine-deep); stroke: var(--orange-on-dark); stroke-width: 2.4; }
.route-svg .port-label {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em;
  fill: var(--on-dark); paint-order: stroke;
  stroke: rgba(23,12,36,.85); stroke-width: 3.5px; stroke-linejoin: round;
}
.route-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--on-dark-line); border: 1px solid var(--on-dark-line); border-radius: var(--r); overflow: hidden; }
.route-stats div { background: #2A1840; padding: 13px 15px; }
.route-stats strong { display: block; font-family: var(--f-mono); font-size: 19px; font-weight: 600; color: var(--on-dark); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.route-stats span { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-muted); }

@media (prefers-reduced-motion: reduce) {
  .is-revealed .route-svg .route-live { animation: none; stroke-dashoffset: 0; }
}

/* --------------------------------------------------- manifest data rail - */
.manifest {
  background: var(--aubergine); color: var(--on-dark);
  border-top: 1px solid var(--on-dark-line); border-bottom: 1px solid var(--on-dark-line);
  overflow: hidden;
}
.manifest-track {
  display: flex; gap: 0; align-items: stretch;
  font-family: var(--f-mono); font-size: 12px; white-space: nowrap;
}
.manifest-track > div {
  padding: 15px clamp(18px, 3vw, 34px);
  border-right: 1px solid rgba(255,255,255,.11);
  display: flex; align-items: center; gap: 10px; flex: none;
}
.manifest-track b { color: var(--orange-on-dark); font-weight: 600; }
.manifest-track span { color: var(--on-dark-2); }
.manifest { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.manifest::-webkit-scrollbar { display: none; }
/* Centre only when the row genuinely fits; otherwise it must be able to
   scroll, or the first and last cells are clipped with no way to reach them. */
.manifest-track { justify-content: flex-start; min-width: min-content; }
@media (min-width: 1400px) { .manifest-track { justify-content: center; } }

/* --------------------------------------------------------------- cards -- */
.grid { display: grid; gap: clamp(14px, 1.6vw, 20px); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--linen); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card-media img { transform: scale(1.045); }
.card-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(36,20,53,0) 46%, rgba(36,20,53,.62) 100%);
}
.card-hs {
  position: absolute; left: 12px; bottom: 11px; z-index: 2;
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; color: #fff;
  background: rgba(36,20,53,.72); border: 1px solid rgba(255,255,255,.22);
  padding: 4px 9px; border-radius: 3px; backdrop-filter: blur(4px);
}
.card-body { padding: clamp(18px, 2vw, 24px); display: flex; flex-direction: column; flex: 1; gap: 10px; }
.card-body h3 { font-size: 20px; letter-spacing: -.02em; }
.card-body p { color: var(--ink-2); font-size: 15.5px; line-height: 1.55; margin: 0; }
.card-more {
  margin-top: auto; padding-top: 6px; font-family: var(--f-mono); font-size: 11.5px;
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-text);
  display: inline-flex; align-items: center; gap: 8px;
}
.card-more svg { width: 13px; height: 13px; transition: transform .25s var(--ease); }
.card:hover .card-more svg { transform: translateX(4px); }
.card-link { position: absolute; inset: 0; z-index: 3; }
.card { position: relative; }

/* service / step cards (no image) */
.tile {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 11px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--line-strong); }
.tile .num {
  font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em;
  color: var(--orange-text); margin-bottom: 2px;
}
.tile h3 { font-size: 18.5px; }
.tile p { font-size: 15.3px; color: var(--ink-2); line-height: 1.55; margin: 0; }
.on-dark .tile { background: rgba(255,255,255,.045); border-color: var(--on-dark-line); }
.on-dark .tile:hover { background: rgba(255,255,255,.07); border-color: var(--aubergine-mid); }
.on-dark .tile p { color: var(--on-dark-2); }

/* --------------------------------------------------------------- specs -- */
.spec-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.spec-table th, .spec-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.spec-table th {
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); width: 34%; white-space: nowrap;
}
.spec-table td { color: var(--ink-2); }
.spec-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper-2); }

.item-list { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--paper-2); }
.item-list li { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.item-list li:last-child { border-bottom: 0; }
.item-list .nm { font-weight: 600; font-size: 15.5px; color: var(--ink); flex: 1 1 220px; }
.item-list .hs { font-family: var(--f-mono); font-size: 12px; color: var(--orange-text); font-weight: 600; }
.item-list .nt { font-size: 14px; color: var(--muted); flex: 1 1 100%; }
@media (min-width: 700px) { .item-list .nt { flex: 0 1 auto; margin-left: auto; text-align: right; } }

/* --------------------------------------------------------------- stats -- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.stats > div { background: var(--paper-2); padding: clamp(20px, 2.4vw, 30px); }
.stats strong { display: block; font-size: clamp(30px, 3.4vw, 42px); font-weight: 800; letter-spacing: -.035em; color: var(--aubergine); line-height: 1; font-variant-numeric: tabular-nums; }
.stats span { display: block; margin-top: 9px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.on-dark .stats { background: var(--on-dark-line); border-color: var(--on-dark-line); }
.on-dark .stats > div { background: #2A1840; }
.on-dark .stats strong { color: var(--orange-bright); }
.on-dark .stats span { color: var(--on-dark-muted); }

/* --------------------------------------------------------------- split -- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 5vw, 70px); align-items: center; }
.split-media { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.split-media img { width: 100%; }
.media-tag {
  position: absolute; left: 14px; bottom: 14px;
  background: rgba(36,20,53,.82); color: var(--on-dark);
  border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(6px);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em;
  padding: 7px 11px; border-radius: 3px;
}

/* real-shipment proof block */
.proof { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(22px, 3.5vw, 44px); align-items: center; }
.proof-media { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--on-dark-line); position: relative; }
.proof-media img, .proof-media video { width: 100%; display: block; }
.proof-media .tag {
  position: absolute; left: 10px; top: 10px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(36,20,53,.8); border: 1px solid rgba(255,255,255,.22);
  color: var(--on-dark); padding: 5px 9px; border-radius: 3px;
}

/* --------------------------------------------------------------- forms -- */
.form-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 34px); box-shadow: var(--shadow-sm); }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field label { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.field .req { color: var(--orange-text); }
.field input, .field select, .field textarea {
  font-family: var(--f-sans); font-size: 16px; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--line-strong); border-radius: var(--r);
  padding: 12px 14px; width: 100%;
  transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--orange); background: var(--paper-2);
  box-shadow: 0 0 0 3px rgba(197,106,20,.14);
}
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 13.5px; color: var(--muted); margin-top: 14px; line-height: 1.5; }
.form-msg { margin-top: 16px; padding: 14px 16px; border-radius: var(--r); font-size: 15px; display: none; }
.form-msg.ok { display: block; background: var(--leaf-tint); border: 1px solid var(--leaf-light); color: var(--leaf); }
.form-msg.err { display: block; background: #FBE9E7; border: 1px solid #E9A79F; color: #A32C1D; }
.btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }
/* Fallback link shown when the form backend cannot be reached. It carries
   the visitor's own answers into a pre-filled email, so a misconfigured
   backend costs them nothing. */
.form-fallback {
  display: inline-block; margin-top: 6px; font-weight: 700;
  color: #A32C1D; text-decoration: underline; text-underline-offset: 3px;
}
.form-fallback:hover { color: #7E1F13; }

/* --------------------------------------------------------------- contact */
.contact-lines { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 2px; }
.contact-lines li { margin: 0; }
.contact-lines a, .contact-lines .static {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px 0;
  border-bottom: 1px solid var(--line); color: var(--ink);
}
.contact-lines a:hover { text-decoration: none; color: var(--orange-text); }
.contact-lines .ico { width: 19px; height: 19px; flex: none; color: var(--orange-text); margin-top: 3px; }
.contact-lines .k { display: block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.contact-lines .v { font-size: 16px; font-weight: 500; }

/* --------------------------------------------------------------- faq ---- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 44px 20px 0; position: relative;
  font-size: 17.5px; font-weight: 600; color: var(--ink); line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--orange-text); border-bottom: 2px solid var(--orange-text);
  transform: translateY(-70%) rotate(45deg); transition: transform .28s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .ans { padding: 0 0 22px; color: var(--ink-2); max-width: 74ch; }

/* --------------------------------------------------------------- prose -- */
.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(24px, 2.8vw, 33px); margin: 2.2em 0 .6em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: clamp(19px, 2vw, 23px); margin: 1.9em 0 .5em; }
.prose p, .prose li { color: var(--ink-2); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 1.6em 0; }
.prose th, .prose td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.prose th { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--linen); }
.prose .tblwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
.prose .tblwrap table { margin: 0; }
.callout {
  background: var(--orange-soft); border: 1px solid #E5C79F; border-left: 3px solid var(--orange-text);
  border-radius: var(--r); padding: 18px 22px; margin: 1.8em 0;
}
.callout p { color: #6A4310; margin-bottom: .6em; }
.callout p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- crumbs - */
.crumbs { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--muted); padding: 20px 0 0; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--orange-text); }
.crumbs span { margin: 0 8px; opacity: .5; }

/* --------------------------------------------------------------- cta ---- */
.cta-band {
  background: linear-gradient(115deg, var(--aubergine-deep) 0%, var(--aubergine) 62%, #4A2D68 100%);
  color: var(--on-dark); border-radius: var(--r-lg); overflow: hidden;
  padding: clamp(32px, 5vw, 60px); position: relative;
}
.cta-band::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(210,118,30,.24) 0%, transparent 68%);
  pointer-events: none;
}
.cta-band .inner { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 26px; align-items: center; justify-content: space-between; }
.cta-band h2 { font-size: clamp(24px, 3.1vw, 38px); max-width: 20ch; }
.cta-band p { margin-top: 12px; max-width: 46ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------- footer - */
.site-footer { background: var(--aubergine-deep); color: var(--on-dark-2); padding: clamp(48px, 6vw, 76px) 0 30px; font-size: 15px; }
/* The footer is a dark ground but is not a .on-dark section, so the brand
   colours have to be restated here or the wordmark renders aubergine on
   aubergine and disappears. */
.site-footer .brandmark .word { color: var(--on-dark); }
.site-footer .brandmark .leaf .blade { fill: var(--leaf-light); }
.site-footer .brandmark .leaf .rib { stroke: #B9DBA0; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: clamp(26px, 4vw, 52px); }
.site-footer h4 { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 15px; }
.site-footer nav { display: flex; flex-direction: column; gap: 9px; }
.site-footer nav a { color: var(--on-dark-2); font-size: 15px; }
.site-footer nav a:hover { color: var(--orange-on-dark); text-decoration: none; }
.foot-about p { color: var(--on-dark-muted); font-size: 14.5px; max-width: 42ch; margin-top: 16px; }
.legal-block {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--on-dark-line);
  font-family: var(--f-mono); font-size: 11.5px; line-height: 1.8; color: var(--on-dark-muted);
}
.legal-block b { color: var(--on-dark-2); font-weight: 600; }
.foot-bottom {
  margin-top: clamp(34px, 4vw, 52px); padding-top: 22px; border-top: 1px solid var(--on-dark-line);
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center;
  font-size: 13px; color: var(--on-dark-muted);
}
.foot-bottom nav { flex-direction: row; gap: 20px; margin-left: auto; }
.foot-bottom a { color: var(--on-dark-muted); font-size: 13px; }

/* --------------------------------------------------------------- 404 ---- */
.err-page { min-height: 62vh; display: grid; place-items: center; text-align: center; padding: var(--sec) 0; }
.err-code { font-family: var(--f-mono); font-size: clamp(56px, 12vw, 130px); font-weight: 600; color: var(--line-strong); line-height: 1; letter-spacing: -.04em; }

/* --------------------------------------------------------------- reveal - */
/* The hidden state is deliberately scoped to .js-reveal, which ONLY the script
   adds. No script, stale script, or thrown error means this rule never applies
   and every element is visible. An entrance animation must never be able to
   decide whether a page has content. */
.js-reveal .reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js-reveal .reveal.is-revealed { opacity: 1; transform: none; }
.js-reveal .reveal-d1 { transition-delay: .07s; }
.js-reveal .reveal-d2 { transition-delay: .14s; }
.js-reveal .reveal-d3 { transition-delay: .21s; }
.js-reveal .reveal-d4 { transition-delay: .28s; }
.js-reveal .reveal-d5 { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
  .is-revealed .route-map .live { animation: none; stroke-dashoffset: 0; }
  .card:hover, .tile:hover, .btn:hover { transform: none; }
  .card:hover .card-media img { transform: none; }
  * { scroll-behavior: auto !important; }
}

/* --------------------------------------------------------------- resp --- */
@media (max-width: 1000px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .burger { display: flex; }
  .nav-links {
    position: absolute; left: var(--gut); right: var(--gut); top: 70px;
    background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg); flex-direction: column; align-items: stretch;
    padding: 12px; gap: 2px; display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 13px 14px; font-size: 16px; }
  .nav-links a::after { display: none; }
  .nav-cta, .lang-switch { margin-left: 0; }
  .nav-cta { margin-top: 6px; justify-content: center; }
  .lang-switch { align-self: flex-start; margin-top: 6px; }
  .g-3, .g-2 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .proof { grid-template-columns: 1fr; }
  .cta-band .inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 620px) {
  body { font-size: 16.5px; }
  .g-4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-bottom nav { margin-left: 0; }
  .hero-actions .btn { width: 100%; }
  .spec-table th { width: 42%; white-space: normal; }
}

/* --------------------------------------------------------------- print -- */
@media print {
  .site-header, .burger, .cta-band, .hero::before, .hero::after { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .sec { padding: 12pt 0; }
  a { color: #000; text-decoration: underline; }
}

/* --------------------------------------------------------------- utils --- */
/* These exist because the production CSP (style-src 'self') silently drops
   every inline style="" attribute. Anything that would have been an inline
   style has to be a class, or it simply does not apply on the live site. */
.mt-sm   { margin-top: 14px; }
.mt      { margin-top: 18px; }
.mt-md   { margin-top: 22px; }
.mt-lg   { margin-top: 26px; }
.mt-xl   { margin-top: 32px; }
.mt-2xl  { margin-top: 38px; }
.mt-3xl  { margin-top: 64px; }
.mb      { margin-bottom: 18px; }
.mb-lg   { margin-bottom: 20px; }
.pt-0    { padding-top: 0; }
.pt-tight{ padding-top: clamp(30px, 4vw, 52px); }
.tc      { text-align: center; }
.w-full  { width: 100%; }
.ai-start{ align-items: start; }
.jc-center { justify-content: center; }
.measure { margin: 16px auto 0; max-width: 52ch; }
.measure-sub { margin: 10px auto 0; max-width: 52ch; color: var(--muted); font-size: 15px; }

/* The hero photograph. It used to arrive as a custom property on an inline
   style attribute, which the CSP discarded, so the hero shipped with no
   image at all. */
.hero::before { background-image: url('/assets/img/hero-1024.jpg'); }