/* ==========================================================================
   Rukyan International Limited — site stylesheet
   Design: "The Manifest" — customs paperwork / container-stencil vernacular.
   Tokens first; components style through tokens only, never inside a media query.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* --- Tokens: light -------------------------------------------------------- */
:root {
  /* Steel ink and cool paper — neutrals biased blue toward the ground, not
     inherited greys. Safety orange is the single bold spend. */
  --ink:          #10222C;
  --steel-800:    #17303D;
  --steel-700:    #1C3A4B;
  --steel-500:    #46697D;

  --paper:        #F2F4F5;
  --surface:      #FFFFFF;
  --surface-2:    #E9EDEF;
  --border:       #D3DBDF;
  --border-strong:#A9B8C0;

  --text:         #10222C;
  --text-muted:   #4E6675;
  --text-faint:   #5D7183;      /* 4.6:1 on --paper, the darkest ground it sits on */

  --accent:       #E2622A;
  --accent-hover: #C9511E;
  --accent-ink:   #B84310;      /* the accent, deep enough to be read as text on
                                   every light ground: >=4.6:1 on paper, surface,
                                   surface-2 and accent-soft */
  --accent-soft:  #FBEBE2;
  --on-accent:    #FFFFFF;

  /* The accent as a ground with --on-accent text on top: buttons, the skip link,
     the pressed language tab. The brand orange is only 3.5:1 under white, so it is
     darkened to clear AA while holding the same hue — #E2622A stays the accent
     everywhere it is a rule, an edge or a fill behind nothing. */
  --accent-solid:       #C34E1B;   /* 4.7:1 under white */
  --accent-solid-hover: #A8410F;   /* 6.1:1 under white */

  --focus:        #E2622A;

  /* The hero and footer commit to a dark steel ground in both themes —
     a deliberate constant, like a container hull. */
  --hull-bg:      #10222C;
  --hull-bg-2:    #17303D;
  --hull-text:    #E8EFF2;
  --hull-muted:   #9CB2BE;
  --hull-line:    #2C4757;

  /* Type */
  --font-display: "IBM Plex Sans Condensed", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.8125rem;
  --fs-cap:  0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.625rem;
  --fs-2xl:  2.125rem;
  --fs-3xl:  2.75rem;

  /* Space */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --wrap: 1180px;
  --radius: 3px;   /* near-square: stencilled crate, not a rounded app card */
  --shadow: 0 1px 2px rgba(16,34,44,.06), 0 8px 24px -12px rgba(16,34,44,.18);
}

/* --- Tokens: dark --------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #0C1A22;
    --surface:      #12242E;
    --surface-2:    #17303D;
    --border:       #24404E;
    --border-strong:#3A5A6B;

    --text:         #E6EEF1;
    --text-muted:   #A3B8C3;
    --text-faint:   #7690A0;

    --accent:       #F2793E;      /* lifted so it holds on the dark ground */
    --accent-hover: #FF9060;
    --accent-ink:   #F2793E;      /* on a dark ground the brand orange already clears AA */
    --accent-soft:  #2A1A12;
    --on-accent:    #1A0B04;

    /* Dark flips the button to near-black on the lifted orange, which is already
       6.9:1 — no darkening needed, so the ground stays the accent itself. */
    --accent-solid:       #F2793E;
    --accent-solid-hover: #FF9060;

    --focus:        #F2793E;

    --hull-bg:      #081319;
    --hull-bg-2:    #10242F;
    --hull-line:    #23414F;

    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  }
}

/* The viewer's toggle stamps data-theme on :root and must win both ways. */
:root[data-theme="dark"] {
  --paper:        #0C1A22;
  --surface:      #12242E;
  --surface-2:    #17303D;
  --border:       #24404E;
  --border-strong:#3A5A6B;
  --text:         #E6EEF1;
  --text-muted:   #A3B8C3;
  --text-faint:   #7690A0;
  --accent:       #F2793E;
  --accent-hover: #FF9060;
  --accent-ink:   #F2793E;      /* on a dark ground the brand orange already clears AA */
  --accent-soft:  #2A1A12;
  --on-accent:    #1A0B04;
  --accent-solid:       #F2793E;
  --accent-solid-hover: #FF9060;
  --focus:        #F2793E;
  --hull-bg:      #081319;
  --hull-bg-2:    #10242F;
  --hull-line:    #23414F;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
}
:root[data-theme="light"] {
  --paper:        #F2F4F5;
  --surface:      #FFFFFF;
  --surface-2:    #E9EDEF;
  --border:       #D3DBDF;
  --border-strong:#A9B8C0;
  --text:         #10222C;
  --text-muted:   #4E6675;
  --text-faint:   #5D7183;
  --accent:       #E2622A;
  --accent-hover: #C9511E;
  --accent-ink:   #B84310;
  --accent-soft:  #FBEBE2;
  --on-accent:    #FFFFFF;
  --accent-solid:       #C34E1B;
  --accent-solid-hover: #A8410F;
  --focus:        #E2622A;
  --hull-bg:      #10222C;
  --hull-bg-2:    #17303D;
  --hull-line:    #2C4757;
  --shadow: 0 1px 2px rgba(16,34,44,.06), 0 8px 24px -12px rgba(16,34,44,.18);
}

/* --- Base ----------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.005em;
  text-wrap: balance;
  color: var(--text);
}
h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, var(--fs-3xl)); }
h2 { font-size: clamp(1.75rem, 1.25rem + 1.8vw, var(--fs-2xl)); }
h3 { font-size: var(--fs-lg); letter-spacing: 0; }
h4 { font-size: var(--fs-base); letter-spacing: 0; }

p { text-wrap: pretty; }
strong { font-weight: 600; }

a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--accent-solid); color: var(--on-accent); }

/* --- Layout primitives ---------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s5);
}
.prose { max-width: 65ch; }
.prose > * + * { margin-top: var(--s4); }

.section { padding-block: clamp(var(--s8), 8vw, var(--s9)); }
.section--tight { padding-block: clamp(var(--s7), 6vw, var(--s8)); }
.section--paper { background: var(--paper); }
.section--surface { background: var(--surface); border-block: 1px solid var(--border); }

.stack   { display: flex; flex-direction: column; }
.stack-3 { gap: var(--s3); }
.stack-4 { gap: var(--s4); }
.stack-5 { gap: var(--s5); }
.stack-6 { gap: var(--s6); }
.stack-7 { gap: var(--s7); }

/* Skip link */
.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 200;
  background: var(--accent-solid); color: var(--on-accent);
  padding: var(--s3) var(--s4); font-weight: 600;
  transition: top .15s ease;
}
.skip:focus { top: var(--s4); }

/* --- Eyebrow / section heading -------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  gap: var(--s3);
}
.eyebrow::before {
  content: "";
  width: 24px; height: 2px;
  background: var(--accent);
  flex: none;
}
.section-head { display: flex; flex-direction: column; gap: var(--s4); max-width: 62ch; }
.section-head p { color: var(--text-muted); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-base);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--s3) var(--s5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .08s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent-solid); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-solid-hover); }
.btn--ghost {
  background: transparent; color: var(--text);
  border-color: var(--border-strong);
}
.btn--ghost:hover { border-color: var(--text); }
.btn--onhull {
  background: transparent; color: var(--hull-text);
  border-color: rgba(255,255,255,.28);
}
.btn--onhull:hover { border-color: var(--hull-text); background: rgba(255,255,255,.06); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* --- Header --------------------------------------------------------------- */
.topbar {
  background: var(--hull-bg);
  color: var(--hull-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--hull-line);
}
.topbar .wrap {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  justify-content: space-between; align-items: center;
  min-height: 34px;
  padding-block: var(--s1);
}
.topbar-item { display: inline-flex; align-items: center; gap: var(--s2); }
.topbar-item b { color: var(--hull-text); font-weight: 500; }

/* Each item claims its own row on a narrow screen, pushing the hero below the
   fold. Drop the least load-bearing one rather than let the bar grow. */
@media (max-width: 720px) {
  .topbar .wrap { justify-content: center; gap: var(--s1) var(--s4); }
  .topbar-item:last-child { display: none; }
}

.masthead {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}
.masthead .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5);
  min-height: 68px;
}

/* Logo: a stencilled container mark */
.logo { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; }
.logo-mark { flex: none; }
.logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.logo-name {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.0625rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text);
}
.logo-sub {
  font-family: var(--font-mono);
  font-size: 0.6875rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-faint);
}

/* Nav */
.nav { display: flex; align-items: center; gap: var(--s1); }
.nav a:not(.btn) {
  font-family: var(--font-display);
  font-size: var(--fs-cap);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  padding: var(--s2) var(--s3);
  border-radius: var(--radius);
  position: relative;
}
.nav a:not(.btn):hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute; left: var(--s3); right: var(--s3); bottom: 0;
  height: 2px; background: var(--accent);
}
.nav-cta { margin-left: var(--s3); }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--s2) var(--s3);
  cursor: pointer;
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; align-items: center; gap: var(--s2); }
  .nav {
    display: none;
    position: absolute; inset-inline: 0; top: 100%;
    flex-direction: column; align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: var(--s3) var(--s5) var(--s5);
    box-shadow: var(--shadow);
  }
  .nav[data-open="true"] { display: flex; }
  .nav a:not(.btn) { padding: var(--s3) 0; border-bottom: 1px solid var(--border); }
  .nav a[aria-current="page"]::after { left: 0; right: auto; width: 20px; bottom: 6px; }
  .nav-cta { margin: var(--s4) 0 0; }
  .masthead .wrap { position: relative; }
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--hull-bg);
  color: var(--hull-text);
  overflow: hidden;
  isolation: isolate;
}
/* Container-yard grid: stacked boxes, drawn not decorated */
.hero-grid {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to right, var(--hull-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hull-line) 1px, transparent 1px);
  background-size: 88px 44px;
  opacity: .5;
  mask-image: radial-gradient(120% 100% at 82% 40%, #000 0%, transparent 72%);
}
.hero-glow {
  position: absolute; z-index: -1;
  width: 620px; height: 620px; right: -140px; top: -180px;
  background: radial-gradient(circle, rgba(226,98,42,.24), transparent 62%);
  pointer-events: none;
}
.hero .wrap {
  padding-block: clamp(var(--s8), 9vw, 118px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(var(--s6), 5vw, var(--s8));
  align-items: center;
}
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } }

.hero h1 { color: var(--hull-text); }
.hero h1 em {
  font-style: normal;
  color: var(--accent);
}
.hero-lede {
  color: var(--hull-muted);
  font-size: var(--fs-lg);
  max-width: 54ch;
  line-height: 1.5;
}
.hero-eyebrow { color: var(--accent); }

/* Route ticker: the literal thing this business does */
.hero-routes {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--hull-muted);
  letter-spacing: 0.04em;
  padding-top: var(--s2);
}
.hero-routes span { display: inline-flex; align-items: center; gap: var(--s2); }
.hero-routes span::before { content: "→"; color: var(--accent); }

/* Manifest card — a bill of lading, rendered as a data block */
.manifest {
  background: var(--hull-bg-2);
  border: 1px solid var(--hull-line);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.6);
  overflow: hidden;
}
.manifest-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--hull-line);
  background: rgba(255,255,255,.03);
}
.manifest-title {
  font-family: var(--font-display);
  font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--hull-text);
}
.manifest-stamp {
  font-family: var(--font-mono);
  font-size: var(--fs-xs); letter-spacing: 0.1em;
  color: var(--accent);
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 1px var(--s2);
  text-transform: uppercase;
}
.manifest-rows { display: flex; flex-direction: column; }
.manifest-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s4);
  align-items: baseline;
  padding: var(--s3) var(--s4);
  border-bottom: 1px dashed var(--hull-line);
}
.manifest-row:last-child { border-bottom: 0; }
.manifest-row dt {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--hull-muted);
}
.manifest-row dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-cap);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--hull-text);
  text-align: right;
}
.manifest-row dd b { color: var(--accent); font-weight: 500; }
.manifest-foot {
  padding: var(--s3) var(--s4);
  background: rgba(255,255,255,.03);
  border-top: 1px solid var(--hull-line);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--hull-muted);
  letter-spacing: 0.04em;
}

/* --- Cards ---------------------------------------------------------------- */
.grid { display: grid; gap: var(--s4); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s3);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.card:hover { border-color: var(--border-strong); }
.card p { color: var(--text-muted); font-size: var(--fs-base); margin: 0; }
.card h3 { margin: 0; }

/* Service card: the code is a real classifier, so it earns its place */
.card--service { position: relative; padding-top: var(--s6); }
.card--service .card-code {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.card--service::before {
  content: "";
  position: absolute; top: 0; left: 0; width: 40px; height: 3px;
  background: var(--accent);
}
.card-icon { color: var(--accent); }

/* --- Process: a real sequence, so it is numbered ------------------------- */
.steps { display: grid; gap: 0; counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s5);
  padding: var(--s5) 0;
  border-top: 1px solid var(--border);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--border); }
.step-num {
  counter-increment: step;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.08em;
  padding-top: 4px;
  min-width: 3ch;
  font-variant-numeric: tabular-nums;
}
.step-num::before { content: counter(step, decimal-leading-zero); }
.step-body { display: flex; flex-direction: column; gap: var(--s2); }
.step-body h3 { margin: 0; }
.step-body p { margin: 0; color: var(--text-muted); max-width: 68ch; }
.step-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
@media (max-width: 640px) { .step { grid-template-columns: 1fr; gap: var(--s2); } }

/* --- Data table ----------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
  min-width: 620px;
}
table.data caption {
  text-align: left;
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--fs-cap);
  color: var(--text);
}
table.data th, table.data td {
  padding: var(--s3) var(--s5);
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
table.data thead th {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-2);
  white-space: nowrap;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
table.data td strong { font-weight: 600; }

/* --- Pills / chips -------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px var(--s3);
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  color: var(--text-muted);
}
.pill--accent { color: var(--accent-ink); border-color: currentColor; background: var(--accent-soft); }
.pill-row { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* --- Markets -------------------------------------------------------------- */
.market {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.market-flag {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--hull-text);
  background: var(--steel-700);
  padding: var(--s2) var(--s2);
  border-radius: 2px;
  flex: none;
  min-width: 3.4ch;
  text-align: center;
}
/* "Anywhere else" — the one flag that is a fill rather than a plate. */
.market-flag--accent { background: var(--accent-solid); color: var(--on-accent); }

.market-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.market-body strong { font-family: var(--font-display); letter-spacing: 0.02em; }
.market-body span { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.4; }

/* --- Stat row ------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.stat {
  padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s1);
  border-right: 1px solid var(--border);
}
.stat:last-child { border-right: 0; }
.stat-value {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat-value b { color: var(--accent); font-weight: 700; }
.stat-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
@media (max-width: 760px) {
  .stat { border-right: 0; border-bottom: 1px solid var(--border); }
  .stat:last-child { border-bottom: 0; }
}

/* --- Split feature -------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(var(--s6), 5vw, var(--s8));
  align-items: start;
}
.checklist { display: flex; flex-direction: column; gap: var(--s3); }
/* The marker is absolutely positioned rather than a grid track: a <strong> and the
   text node after it would each become their own grid item and split across rows.
   The tick is drawn from borders, not a "✓" glyph — U+2713 is absent from the
   Plex latin subset and would fall back or render as tofu. */
.checklist li {
  position: relative;
  padding-left: 28px;
  color: var(--text-muted);
  font-size: var(--fs-base);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.45em;
  width: 6px;
  height: 11px;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checklist li strong { color: var(--text); font-weight: 600; }

/* --- CTA band ------------------------------------------------------------- */
.cta-band {
  background: var(--hull-bg);
  color: var(--hull-text);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 22px,
    rgba(226,98,42,.07) 22px 44px
  );
}
.cta-band .wrap {
  padding-block: var(--s8);
  display: flex; flex-wrap: wrap; gap: var(--s6);
  align-items: center; justify-content: space-between;
}
.cta-band h2 { color: var(--hull-text); max-width: 22ch; }
.cta-band p { color: var(--hull-muted); max-width: 46ch; margin-top: var(--s3); }

/* --- Forms ---------------------------------------------------------------- */
.form { display: grid; gap: var(--s4); }
.field { display: flex; flex-direction: column; gap: var(--s2); }
.field label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field label .req { color: var(--accent); }
.field input, .field select, .field textarea {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--s3) var(--s3);
  font-size: var(--fs-base);
  color: var(--text);
  width: 100%;
  transition: border-color .15s ease;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--text-faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
  outline-offset: 0;
}
.field textarea { min-height: 130px; resize: vertical; }
.field-hint { font-size: var(--fs-sm); color: var(--text-faint); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--s4); }
.form-note {
  font-size: var(--fs-sm);
  color: var(--text-faint);
  border-left: 2px solid var(--border-strong);
  padding-left: var(--s3);
}

/* --- Contact blocks ------------------------------------------------------- */
.office {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s3);
}
.office-role {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.office h3 { margin: 0; }
.office address {
  font-style: normal;
  color: var(--text-muted);
  font-size: var(--fs-base);
  line-height: 1.6;
}
.office-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-faint);
  letter-spacing: 0.04em;
  border-top: 1px dashed var(--border-strong);
  padding-top: var(--s3);
  margin-top: auto;
}

/* --- FAQ ------------------------------------------------------------------ */
.faq { border-top: 1px solid var(--border); }
.faq details {
  border-bottom: 1px solid var(--border);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s4) var(--s6) var(--s4) 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--text);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: var(--fs-lg);
  line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--accent); }
.faq-body { padding: 0 var(--s6) var(--s5) 0; color: var(--text-muted); max-width: 68ch; }
.faq-body > * + * { margin-top: var(--s3); }

/* --- Page header (interior pages) ---------------------------------------- */
.pagehead {
  background: var(--hull-bg);
  color: var(--hull-text);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--hull-line);
}
.pagehead::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(to right, var(--hull-line) 1px, transparent 1px);
  background-size: 88px 100%;
  opacity: .55;
  mask-image: linear-gradient(to bottom, #000, transparent);
}
.pagehead .wrap {
  padding-block: clamp(var(--s7), 6vw, var(--s8));
  display: flex; flex-direction: column; gap: var(--s4);
  max-width: min(var(--wrap), 100%);
}
.pagehead h1 { color: var(--hull-text); max-width: 20ch; }
.pagehead p { color: var(--hull-muted); max-width: 62ch; font-size: var(--fs-lg); line-height: 1.5; }

.crumbs {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hull-muted);
  display: flex; gap: var(--s2); flex-wrap: wrap;
}
.crumbs a { color: var(--hull-muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs span[aria-hidden] { color: var(--hull-line); }

/* --- Footer --------------------------------------------------------------- */
.footer {
  background: var(--hull-bg);
  color: var(--hull-muted);
  border-top: 3px solid var(--accent);
  padding-block: var(--s8) var(--s5);
  font-size: var(--fs-base);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(min(240px, 100%), 1.4fr) repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: var(--s6);
}
/* auto-fit always lays down at least one track, so below ~720px the 240px + 170px
   minimums exceed the viewport and push the page sideways. Drop to explicit
   columns rather than relying on the tracks to shrink — they cannot. */
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s5); }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}
.footer h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hull-text);
  margin-bottom: var(--s3);
}
.footer-links { display: flex; flex-direction: column; gap: var(--s2); }
.footer-links a { color: var(--hull-muted); text-decoration: none; font-size: var(--fs-base); }
.footer-links a:hover { color: var(--accent); }
.footer address { font-style: normal; line-height: 1.6; font-size: var(--fs-sm); }
.footer-blurb { max-width: 40ch; line-height: 1.6; font-size: var(--fs-base); }
.footer .logo-name, .footer .logo-sub { color: var(--hull-text); }
.footer .logo-sub { color: var(--hull-muted); }

.colophon {
  margin-top: var(--s7);
  padding-top: var(--s4);
  border-top: 1px solid var(--hull-line);
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  justify-content: space-between; align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--hull-muted);
}
.colophon a { color: var(--hull-muted); }

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

/* --- Language switch ------------------------------------------------------ */
.langswitch {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  border: 1px solid var(--hull-line);
  border-radius: 2px;
  padding: 1px;
  flex: none;
}
.lang {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1;
  padding: 4px var(--s2);
  background: transparent;
  border: 0;
  border-radius: 1px;
  color: var(--hull-muted);
  cursor: pointer;
  transition: color .12s ease, background-color .12s ease;
}
.lang:hover { color: var(--hull-text); }
.lang[aria-pressed="true"] {
  background: var(--accent-solid);
  color: var(--on-accent);
}

/* The required marker is decoration — the input's `required` attribute is what
   assistive tech announces. Keeping it in CSS leaves the label as clean text for
   translation instead of splitting it around a <span>. */
.field label.is-required::after {
  content: "*";
  color: var(--accent);
  margin-left: 4px;
}

/* --- Section photography --------------------------------------------------
   Each block carries a photograph of the thing it is talking about. They are
   backgrounds, not subjects: a low opacity plus a partial desaturation keeps
   them as texture and depth, and leaves the type doing the work. Cards and
   tables keep their solid --surface so content never sits on a busy image.

   A photo is attached with two classes: `bg` (the mechanism) and `bg--<name>`
   (which picture). Opacity is a token so dark grounds can carry more image.
   ------------------------------------------------------------------------- */
.bg {
  position: relative;
  isolation: isolate;
  /* The image layer is scaled up slightly to hide the blur's soft edges, which
     makes it wider than its section — without this it pushes the page sideways.
     The dark bands already clipped; the light sections did not. */
  overflow: hidden;
}
.bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;              /* above the section's own background, below content */
  background-image: var(--bg-img);
  background-size: cover;
  background-position: var(--bg-pos, center);
  background-repeat: no-repeat;
  opacity: var(--bg-op, 0.07);
  /* Slightly soft: on a light ground a sharp photograph competes with the type
     for attention at any opacity high enough to be seen at all. The scale
     compensates for the blur eating into the edges. */
  filter: grayscale(0.55) contrast(1.02) blur(1.5px);
  transform: scale(1.04);
  pointer-events: none;
}
/* On a light ground the picture is texture only. Busy photographs (a market
   stall, a container stack) turn to visual noise long before they get dark
   enough to hurt contrast, so this stays low and heavily desaturated. */
.bg { --bg-op: 0.07; }                       /* the light default, not just a fallback */
@media (prefers-color-scheme: dark) {
  .bg { --bg-op: 0.10; }
}
:root[data-theme="dark"] .bg { --bg-op: 0.10; }
:root[data-theme="light"] .bg { --bg-op: 0.07; }

/* Dark grounds swallow an image, so they carry far more of it. */
.hero.bg::before,
.pagehead.bg::before,
.cta-band.bg::before {
  --bg-op: 0.46;
  filter: grayscale(0.5) contrast(1.1);
  transform: none;   /* the scrim handles legibility here; keep the photo sharp */
}
/* The toggles above must not leak into the dark bands, which set their own. */
.hero.bg, .pagehead.bg, .cta-band.bg,
:root[data-theme="dark"] .hero.bg, :root[data-theme="dark"] .pagehead.bg, :root[data-theme="dark"] .cta-band.bg,
:root[data-theme="light"] .hero.bg, :root[data-theme="light"] .pagehead.bg, :root[data-theme="light"] .cta-band.bg {
  --bg-op: 0.46;
}

/* A scrim over the image on the dark bands: the copy sits on the left, so the
   ground stays near-solid there and the photograph opens up to the right where
   there is nothing to read. Painted after ::before, so it lands on top of the
   image but still behind the content. */
.hero.bg::after,
.pagehead.bg::after,
.cta-band.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg,
      var(--hull-bg) 0%,
      color-mix(in srgb, var(--hull-bg) 84%, transparent) 30%,
      color-mix(in srgb, var(--hull-bg) 30%, transparent) 60%,
      transparent 82%),
    linear-gradient(to bottom,
      transparent 40%,
      color-mix(in srgb, var(--hull-bg) 65%, transparent) 100%);
  pointer-events: none;
}
/* The CTA band centres nothing and spans wide, so it wants an even wash. */
.cta-band.bg::after {
  background: linear-gradient(90deg,
    var(--hull-bg) 0%,
    color-mix(in srgb, var(--hull-bg) 78%, transparent) 55%,
    color-mix(in srgb, var(--hull-bg) 60%, transparent) 100%);
}

/* The pictures. Kept here rather than inline so the preview build can inline
   them, and so swapping in the company's own photography is a one-line edit. */
.bg--yiwu-market     { --bg-img: url("../img/yiwu-market.webp"); }
.bg--yiwu-stall      { --bg-img: url("../img/yiwu-stall.webp"); }
.bg--yiwu-dock       { --bg-img: url("../img/yiwu-dock.webp"); }
.bg--shenzhen-market { --bg-img: url("../img/shenzhen-market.webp"); }
.bg--port            { --bg-img: url("../img/port.webp"); }
.bg--containers      { --bg-img: url("../img/containers.webp"); }
.bg--ship            { --bg-img: url("../img/ship.webp"); }
.bg--warehouse       { --bg-img: url("../img/warehouse.webp"); }
.bg--factory         { --bg-img: url("../img/factory.webp"); }
.bg--hongkong        { --bg-img: url("../img/hongkong.webp"); }

/* Framing: the copy occupies the left of every dark band, so each photograph is
   positioned to put its subject in the open right-hand side. */
.hero.bg--port          { --bg-pos: 62% 45%; }
.pagehead.bg--ship      { --bg-pos: 62% 58%; }
.pagehead.bg--yiwu-stall{ --bg-pos: 72% center; }
.pagehead.bg--factory   { --bg-pos: 70% center; }
.pagehead.bg--hongkong  { --bg-pos: 66% 70%; }
.pagehead.bg--yiwu-market { --bg-pos: 74% center; }
.cta-band.bg--yiwu-market { --bg-pos: center 62%; }

/* Photo credit line in the footer (CC BY images require naming the author). */
.credits {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--hull-muted);
  opacity: .75;
  line-height: 1.5;
}
.credits a { color: inherit; }
.credits a:hover { color: var(--accent); }

/* --- Form status ---------------------------------------------------------
   The reply to a submission. Colour is a signal here, not decoration, so it is
   semantic (ok / error) and independent of the brand accent — and it is backed
   by a word, never colour alone. */
.form-status {
  font-size: var(--fs-base);
  line-height: 1.5;
  padding: var(--s3) var(--s4);
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  border-left-width: 3px;
  background: var(--surface-2);
  color: var(--text);
}
.form-status[data-kind="ok"] {
  border-color: #1F7A5C;
  background: color-mix(in srgb, #1F7A5C 10%, var(--surface));
}
.form-status[data-kind="error"] {
  border-color: #B3261E;
  background: color-mix(in srgb, #B3261E 8%, var(--surface));
}
@media (prefers-color-scheme: dark) {
  .form-status[data-kind="ok"]    { border-color: #4ECFA4; background: color-mix(in srgb, #4ECFA4 12%, var(--surface)); }
  .form-status[data-kind="error"] { border-color: #FF8A80; background: color-mix(in srgb, #FF8A80 12%, var(--surface)); }
}
:root[data-theme="dark"] .form-status[data-kind="ok"]    { border-color: #4ECFA4; background: color-mix(in srgb, #4ECFA4 12%, var(--surface)); }
:root[data-theme="dark"] .form-status[data-kind="error"] { border-color: #FF8A80; background: color-mix(in srgb, #FF8A80 12%, var(--surface)); }

/* The submit button while a request is in flight. */
.btn:disabled { opacity: .6; cursor: progress; }