/* ==========================================================================
   Xport International
   Design note: the company's real asset is knowing where risk transfers.
   So the page is built like a trade document: paper, ink, hairline rules,
   mono for codes and data. One accent, taken from the logo arrow.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --ink:        #10161c;
  --ink-2:      #495663;
  --ink-3:      #7c8894;
  --paper:      #f4f5f3;
  --paper-2:    #eaece7;
  --white:      #ffffff;
  --navy:       #0b3c5d;
  --navy-2:     #072a41;
  --navy-3:     #051d2e;
  --amber:      #f2c230;
  --amber-deep: #8a6a00;
  --rule:       #d3d7cf;
  --rule-dark:  rgba(255,255,255,.16);

  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* fluid scale, utopia-style */
  --step--2: clamp(0.69rem, 0.67rem + 0.10vw, 0.75rem);
  --step--1: clamp(0.80rem, 0.76rem + 0.19vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.24vw, 1.15rem);
  --step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.52rem);
  --step-2:  clamp(1.45rem, 1.26rem + 0.94vw, 2.05rem);
  --step-3:  clamp(1.75rem, 1.42rem + 1.63vw, 2.80rem);
  --step-4:  clamp(2.10rem, 1.55rem + 2.74vw, 3.80rem);
  --step-5:  clamp(2.55rem, 1.60rem + 4.72vw, 5.60rem);
  --step-6:  clamp(3.00rem, 1.36rem + 8.20vw, 8.00rem);

  --gut: clamp(1.25rem, 4vw, 4.5rem);
  --sect: clamp(4.5rem, 10vw, 11rem);
  --maxw: 1440px;

  --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; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1,h2,h3,h4,h5 { margin: 0; font-weight: 600; line-height: 1.03; letter-spacing: -0.028em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* ---------- layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.section { padding-block: var(--sect); }
.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* kicker: the mono voice, used for labels and codes throughout */
.kicker {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.kicker--amber { color: var(--amber-deep); }
.kicker--light { color: rgba(255,255,255,.62); }

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); letter-spacing: -0.012em; }

/* ==========================================================================
   header
   ========================================================================== */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.hdr__in {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 68px;
}
.hdr__brand {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; margin-right: auto; flex-shrink: 0;
}
/* The client's approved logo, a raster. It carries its own colour and its own
   modelling, so nothing here recolours it. Slightly taller than the mark it
   replaced: the globe reads as a blob below about 28px. */
.mark { width: 31px; height: 30px; flex: 0 0 31px; }
.wordmark {
  font-size: 1.02rem; font-weight: 600; letter-spacing: -0.03em;
  line-height: 1; white-space: nowrap;
}
.wordmark span { color: var(--ink-3); font-weight: 400; }

.nav { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.9rem); }
.nav a {
  position: relative;
  font-size: var(--step--1); font-weight: 500; letter-spacing: -0.005em;
  text-decoration: none; padding-block: .4rem; color: var(--ink-2);
  transition: color .22s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--amber);
}
.hdr__tel {
  font-family: var(--mono); font-size: var(--step--1); font-weight: 500;
  text-decoration: none; white-space: nowrap; color: var(--ink);
  padding: .42rem .78rem; border: 1px solid var(--rule); border-radius: 2px;
  transition: border-color .22s var(--ease), background .22s var(--ease);
}
.hdr__tel:hover { border-color: var(--ink); background: var(--white); }

/* burger */
.burger { display: none; width: 40px; height: 40px; margin-right: -8px; position: relative; }
.burger span {
  position: absolute; left: 9px; right: 9px; height: 1.5px; background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 20px; }
.burger span:nth-child(3) { top: 25px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* drawer: anchored to the sticky header, never fixed with calc offsets */
.drawer {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--paper);              /* fully opaque */
  border-bottom: 1px solid var(--rule);
  display: none; padding: .5rem var(--gut) 1.5rem;
  box-shadow: 0 1px 1px rgba(16,22,28,.04), 0 12px 28px -8px rgba(16,22,28,.14);
  /* the unfolded four-language list makes this taller than a short phone */
  max-height: calc(100dvh - 68px); overflow-y: auto; overscroll-behavior: contain;
}
.drawer.is-open { display: block; }
.drawer a {
  display: block; padding: .95rem 0; text-decoration: none;
  font-size: var(--step-1); font-weight: 500; letter-spacing: -0.02em;
  border-bottom: 1px solid var(--rule);
}
.drawer a:last-of-type { border-bottom: 0; }
.drawer__tel {
  display: inline-block; margin-top: 1.1rem; font-family: var(--mono);
  font-size: var(--step-0); text-decoration: none;
  border: 1px solid var(--ink); padding: .7rem 1.1rem; border-radius: 2px;
}

@media (max-width: 900px) {
  .nav, .hdr__tel { display: none; }
  .burger { display: block; }
}

/* ==========================================================================
   buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: var(--step--1); font-weight: 500; letter-spacing: .01em;
  text-decoration: none; padding: .85rem 1.35rem; border-radius: 2px;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink);
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { background: var(--navy); border-color: var(--navy); transform: translateY(-1px); }
.btn svg { transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { background: var(--white); border-color: var(--ink); color: var(--ink); }
.btn--onDark { background: var(--amber); color: var(--navy-3); border-color: var(--amber); font-weight: 600; }
.btn--onDark:hover { background: #ffd24d; border-color: #ffd24d; }

/* ==========================================================================
   hero
   ========================================================================== */
/* grid overlay: the copy sets the floor height, so it can never clip */
.hero { position: relative; background: var(--navy-3); display: grid; isolation: isolate; }
.hero__media { grid-area: 1 / 1; position: relative; }
.hero__media img {
  width: 100%; height: 100%; min-height: clamp(430px, 70vh, 700px);
  object-fit: cover; object-position: 50% 55%;
}
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(94deg, rgba(5,29,46,.94) 0%, rgba(5,29,46,.80) 34%, rgba(5,29,46,.32) 62%, rgba(5,29,46,.12) 100%),
    linear-gradient(to top, rgba(5,29,46,.65), transparent 42%);
}
.hero__body {
  grid-area: 1 / 1; z-index: 1;
  display: flex; align-items: center; color: #fff;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.hero__col { max-width: 46rem; }
.hero h1 {
  font-size: clamp(2.35rem, 1.45rem + 3.9vw, 4.7rem);
  font-weight: 600; letter-spacing: -0.042em;
  margin-top: 1.05rem; max-width: 15ch;
}
.hero h1 em { font-style: normal; color: var(--amber); }
.hero__sub {
  margin-top: 1.5rem; max-width: 46ch; font-size: var(--step-0);
  color: rgba(255,255,255,.80); line-height: 1.6;
}
.hero__cta { margin-top: 2.1rem; display: flex; flex-wrap: wrap; gap: .8rem; }

/* the manifest strip: overlaps the photo edge, breaking the grid */
.manifest {
  position: relative; z-index: 2; margin-top: -1px;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
}
.manifest__in {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
}
.manifest__cell {
  padding: 1.5rem clamp(1rem,2.2vw,2rem);
  border-left: 1px solid var(--rule);
}
.manifest__cell:first-child { border-left: 0; }
.manifest__cell dt {
  font-family: var(--mono); font-size: var(--step--2); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.manifest__cell dd {
  margin: .5rem 0 0; font-size: var(--step--1); line-height: 1.45; color: var(--ink);
  font-weight: 500; letter-spacing: -0.012em;
}
@media (max-width: 860px) {
  .manifest__in { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .manifest__cell:nth-child(3) { border-left: 0; }
  .manifest__cell:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 460px) {
  .manifest__in { grid-template-columns: minmax(0,1fr); }
  .manifest__cell { border-left: 0; border-bottom: 1px solid var(--rule); }
  .manifest__cell:last-child { border-bottom: 0; }
}

/* ==========================================================================
   positioning statement
   ========================================================================== */
.stmt__grid {
  display: grid; grid-template-columns: minmax(0,4fr) minmax(0,7fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
@media (max-width: 900px) { .stmt__grid { grid-template-columns: minmax(0,1fr); gap: 2rem; } }
.stmt__aside { position: sticky; top: 100px; }
@media (max-width: 900px) { .stmt__aside { position: static; } }
.stmt h2 {
  font-size: var(--step-3); letter-spacing: -0.035em; max-width: 18ch;
}
.stmt__body { font-size: var(--step-1); line-height: 1.55; color: var(--ink-2); }
.stmt__body p + p { margin-top: 1.3rem; }
.stmt__body strong { color: var(--ink); font-weight: 500; }

/* ==========================================================================
   capabilities: an index, not a card grid
   ========================================================================== */
.cap { border-top: 1px solid var(--rule); }
.cap__row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0,1fr) minmax(0,1.15fr) 2.5rem;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
  padding-block: clamp(1.8rem, 3.4vw, 2.9rem);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  position: relative;
  transition: background .3s var(--ease);
}
.cap__row::before {
  content: ""; position: absolute; left: calc(var(--gut) * -1); right: calc(var(--gut) * -1);
  top: 0; bottom: 0; background: var(--white); opacity: 0; z-index: -1;
  transition: opacity .3s var(--ease);
}
.cap__row:hover::before { opacity: 1; }
.cap__code {
  font-family: var(--mono); font-size: var(--step--1); font-weight: 500;
  letter-spacing: .1em; color: var(--ink-3); padding-top: .35rem;
  transition: color .3s var(--ease);
}
.cap__row:hover .cap__code { color: var(--amber-deep); }
.cap__title {
  font-size: var(--step-2); font-weight: 500; letter-spacing: -0.032em; line-height: 1.1;
}
.cap__desc { color: var(--ink-2); font-size: var(--step--1); line-height: 1.6; }
.cap__desc ul { margin-top: .85rem; }
.cap__desc li { position: relative; padding-left: 1.05rem; margin-top: .3rem; }
.cap__desc li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; background: var(--amber);
}
.cap__go {
  align-self: center; justify-self: end; color: var(--ink-3);
  transition: transform .3s var(--ease), color .3s var(--ease);
}
.cap__row:hover .cap__go { transform: translateX(5px); color: var(--ink); }
@media (max-width: 820px) {
  .cap__row { grid-template-columns: minmax(0,1fr); gap: .7rem; }
  .cap__go { display: none; }
  .cap__title { margin-top: .15rem; }
}

/* index variant: the client's copy gives a name for each offering and no
   summary underneath it, so the description column is dropped rather than
   padded out with sentences the original never had. */
.cap--index .cap__row {
  grid-template-columns: 5.5rem minmax(0,1fr) 2.5rem;
  align-items: center;
  padding-block: clamp(1.4rem, 2.6vw, 2.1rem);
}
.cap--index .cap__code { padding-top: 0; }
.cap--index .cap__title { font-size: var(--step-1); }
@media (max-width: 820px) {
  .cap--index .cap__row { grid-template-columns: minmax(0,1fr); align-items: start; }
}

/* ==========================================================================
   full-bleed photo band with overlapping caption
   ========================================================================== */
.band { position: relative; background: var(--navy-3); }
.band__img { width: 100%; height: clamp(300px, 46vh, 520px); object-fit: cover; opacity: .78; }
.band__over {
  position: absolute; left: 0; right: 0; bottom: 0;
}
.band__card {
  background: var(--paper); padding: clamp(1.6rem,3.2vw,2.6rem);
  max-width: 46rem; margin-bottom: calc(var(--sect) * -0.34);
  position: relative;
  box-shadow: 0 1px 2px rgba(5,29,46,.10), 0 24px 50px -18px rgba(5,29,46,.42);
}
.band__card h3 { font-size: var(--step-2); letter-spacing: -0.032em; max-width: 20ch; }
.band__card p { margin-top: .9rem; color: var(--ink-2); font-size: var(--step--1); line-height: 1.6; max-width: 52ch; }
.band + .section { padding-top: calc(var(--sect) * 0.85); }
@media (max-width: 700px) {
  .band__card { margin-bottom: -2.2rem; }
}

/* ==========================================================================
   INCOTERMS risk track: the one gesture at scale
   ========================================================================== */
.track { background: var(--navy-2); color: #fff; }
.track__head {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(1.5rem,4vw,4rem); align-items: end; margin-bottom: clamp(2.4rem,5vw,4rem);
}
@media (max-width: 820px) { .track__head { grid-template-columns: minmax(0,1fr); gap: 1.2rem; } }
.track__head h2 { font-size: var(--step-3); letter-spacing: -0.035em; max-width: 16ch; margin-top: .9rem; }
.track__head p { color: rgba(255,255,255,.66); font-size: var(--step--1); line-height: 1.65; max-width: 46ch; }

/* term chips */
.terms { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: clamp(2rem,4vw,3rem); }
.term {
  font-family: var(--mono); font-size: var(--step--1); font-weight: 500; letter-spacing: .06em;
  padding: .5rem .78rem; border-radius: 2px;
  border: 1px solid var(--rule-dark); color: rgba(255,255,255,.72);
  transition: all .22s var(--ease);
}
.term:hover { border-color: rgba(255,255,255,.42); color: #fff; }
.term[aria-pressed="true"] {
  background: var(--amber); border-color: var(--amber); color: var(--navy-3); font-weight: 600;
}

/* ---- transfer bars ----
   Two bars, not one rail. Each is filled for the stretch the SELLER carries,
   then hollow for the buyer. The gap between where the two fills end is the
   thing worth seeing, so it has to be legible at a glance. */
.xfer {
  display: grid; grid-template-columns: 4.6rem minmax(0,1fr);
  gap: .55rem 1.1rem; align-items: center;
}

/* the seven-stage scale sits above the bars, aligned to the same track */
.xfer__scale { grid-column: 2; position: relative; height: 3.1rem; }
.xfer__tick { position: absolute; bottom: 0; }
.xfer__tick::after {
  content: ""; position: absolute; left: 0; bottom: -.5rem;
  width: 1px; height: .5rem; background: rgba(255,255,255,.22);
}
.xfer__tick span {
  position: absolute; bottom: .3rem; left: 0; transform: translateX(-50%);
  white-space: nowrap; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .03em; text-transform: uppercase; color: rgba(255,255,255,.44);
  transition: color .35s var(--ease);
}
.xfer__tick[data-edge="start"] span { transform: none; }
.xfer__tick[data-edge="end"]   span { transform: translateX(-100%); }
.xfer__tick.is-risk span, .xfer__tick.is-cost span { color: #fff; }

.xfer__k {
  font-family: var(--mono); font-size: var(--step--2); letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.58);
  display: flex; align-items: center; gap: .45rem;
}
.xfer__k i { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; }
.xfer__k i.risk { background: var(--amber); }
.xfer__k i.cost { background: #6fb3e0; }

.xfer__track {
  position: relative; height: 14px; border-radius: 2px;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
.xfer__fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  border-radius: 2px; transition: width .55s var(--ease);
}
.xfer__fill--risk { background: var(--amber); }
.xfer__fill--cost { background: #6fb3e0; }
.xfer__edge {
  position: absolute; top: -6px; bottom: -6px; width: 2px; left: 0;
  background: #fff; transition: left .55s var(--ease);
}

.xfer__cap {
  grid-column: 2; font-size: var(--step--1); color: rgba(255,255,255,.70);
  line-height: 1.5; margin-bottom: .45rem;
}
.xfer__cap b { color: #fff; font-weight: 500; }
.xfer__cap .sep { color: rgba(255,255,255,.34); padding: 0 .45rem; }

.xfer__mode {
  grid-column: 1 / -1; margin-top: .9rem; padding-top: 1rem;
  border-top: 1px solid var(--rule-dark);
  font-size: var(--step--1); color: #fff;
}
.xfer__mode span { color: rgba(255,255,255,.55); }

@media (max-width: 760px) {
  .xfer { grid-template-columns: minmax(0,1fr); gap: .35rem; }
  .xfer__scale { display: none; }      /* captions name the point in words */
  .xfer__k { grid-column: 1; margin-top: 1.1rem; }
  .xfer__track { grid-column: 1; }
  .xfer__cap { grid-column: 1; }
}

.track__note {
  margin-top: 2rem; font-size: var(--step--2); color: rgba(255,255,255,.46);
  font-family: var(--mono); line-height: 1.6;
}
.track__note a { color: rgba(255,255,255,.72); }

/* ==========================================================================
   incoterms full glossary table
   ========================================================================== */
.gloss { border-top: 1px solid var(--rule); }
.gloss__row {
  display: grid; grid-template-columns: 6.5rem minmax(0,1fr) minmax(0,1.3fr);
  gap: clamp(1rem,3vw,2.5rem);
  padding-block: clamp(1.5rem,2.8vw,2.2rem);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.gloss__code {
  font-family: var(--mono); font-size: var(--step-1); font-weight: 500;
  letter-spacing: .02em; color: var(--ink); line-height: 1.1;
}
.gloss__code small {
  display: block; margin-top: .45rem; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 400;
}
.gloss__name { font-size: var(--step-0); font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }
.gloss__name span { display: block; margin-top: .45rem; font-family: var(--mono); font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; color: var(--amber-deep); font-weight: 400; }
.gloss__txt { color: var(--ink-2); font-size: var(--step--1); line-height: 1.65; }
@media (max-width: 800px) {
  .gloss__row { grid-template-columns: 5rem minmax(0,1fr); }
  .gloss__txt { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
  .gloss__row { grid-template-columns: minmax(0,1fr); gap: .5rem; }
}

/* ==========================================================================
   page head (inner pages)
   ========================================================================== */
.phead { background: var(--navy-3); color: #fff; padding-block: clamp(2.9rem,6vw,5.2rem); }
.phead__in {
  display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
  gap: clamp(1.4rem,5vw,4.5rem); align-items: end;
}
@media (max-width: 880px) { .phead__in { grid-template-columns: minmax(0,1fr); gap: 1.2rem; } }
.phead h1 { font-size: var(--step-4); letter-spacing: -0.04em; max-width: 15ch; margin-top: 1rem; }
.phead p { margin: 0; max-width: 48ch; color: rgba(255,255,255,.72); font-size: var(--step-0); line-height: 1.6; }

/* ==========================================================================
   service detail blocks (services page)
   ========================================================================== */
.svc { border-bottom: 1px solid var(--rule); }
.svc:last-of-type { border-bottom: 0; }
/* The client's own copy is very unevenly distributed between the two service
   blocks, so a centred photo leaves several hundred pixels of dead column
   beside the longer one. The photo sticks instead, using the same offset as
   .stmt__aside so the two sticky behaviours match. */
.svc__in {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(2rem,5vw,5rem); align-items: start;
  padding-block: clamp(3rem,6vw,5.5rem);
}
.svc:nth-child(even) .svc__media { order: 2; }
.svc__media { position: sticky; top: 100px; }
.svc__media img { width: 100%; height: clamp(260px,34vw,440px); object-fit: cover; }
.svc h2 { font-size: var(--step-3); letter-spacing: -0.035em; margin-top: .9rem; max-width: 15ch; }
.svc p { margin-top: 1.2rem; color: var(--ink-2); line-height: 1.7; max-width: 50ch; }
.svc__list { margin-top: 1.6rem; border-top: 1px solid var(--rule); }
.svc__list li {
  padding: .75rem 0 .75rem 1.15rem; border-bottom: 1px solid var(--rule);
  font-size: var(--step--1); position: relative;
}
.svc__list li::before {
  content: ""; position: absolute; left: 0; top: 1.32em;
  width: 5px; height: 5px; background: var(--amber);
}
.svc__list a {
  text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 1px;
  transition: border-color .2s var(--ease);
}
.svc__list a:hover { border-color: var(--ink); }
/* the list is also used inside a statement block, where the body type is larger */
.stmt__body .svc__list li { color: var(--ink); }
@media (max-width: 860px) {
  .svc__in { grid-template-columns: minmax(0,1fr); gap: 1.8rem; }
  .svc:nth-child(even) .svc__media { order: 0; }
  .svc__media { position: static; }
}

/* ==========================================================================
   contact
   ========================================================================== */
.contact__grid {
  display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr);
  gap: clamp(2rem,6vw,5rem);
}
@media (max-width: 880px) { .contact__grid { grid-template-columns: minmax(0,1fr); } }
.dl { border-top: 1px solid var(--rule); }
.dl__row { padding: 1.15rem 0; border-bottom: 1px solid var(--rule); }
.dl__row dt {
  font-family: var(--mono); font-size: var(--step--2); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.dl__row dd { margin: .45rem 0 0; font-size: var(--step-0); letter-spacing: -0.015em; }
.dl__row dd a { text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
.dl__row dd a:hover { border-color: var(--ink); }

.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .45rem; }
.field label {
  font-family: var(--mono); font-size: var(--step--2); letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
}
.field input, .field textarea, .field select {
  font: inherit; font-size: var(--step-0);
  padding: .8rem .9rem; border: 1px solid var(--rule); border-radius: 2px;
  background: var(--white); color: var(--ink); width: 100%;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(11,60,93,.10);
}
.field textarea { resize: vertical; min-height: 8.5rem; }
.field--2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.1rem; }
@media (max-width: 560px) { .field--2 { grid-template-columns: minmax(0,1fr); } }
.form__note { font-size: var(--step--2); color: var(--ink-3); line-height: 1.6; font-family: var(--mono); }

/* honeypot: off-screen rather than display:none, because some bots skip
   anything that is not rendered. Never focusable, never announced. */
.form__hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0;
}

/* the reply the visitor gets after pressing send */
.form__status {
  font-size: var(--step--1); line-height: 1.6;
  border-left: 3px solid var(--rule); padding: .15rem 0 .15rem .9rem;
  margin: 0; display: none;
}
.form__status.is-on { display: block; }
.form__status.is-ok   { border-left-color: var(--navy); color: var(--ink); }
.form__status.is-err  { border-left-color: var(--amber-deep); color: var(--ink-2); }
.form.is-sending button[type="submit"] { opacity: .55; pointer-events: none; }

/* ==========================================================================
   CTA + footer
   ========================================================================== */
/* deliberately on paper: keeps the track, the CTA and the footer from
   merging into one undifferentiated navy slab at the foot of the page */
.cta { background: var(--paper-2); }
.cta__in {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: clamp(1.5rem,4vw,3rem); align-items: center;
}
@media (max-width: 760px) { .cta__in { grid-template-columns: minmax(0,1fr); justify-items: start; } }
.cta h2 { font-size: var(--step-3); letter-spacing: -0.035em; max-width: 18ch; margin-top: .9rem; }
.cta .kicker { color: var(--amber-deep); }

.ftr { background: var(--navy-3); color: rgba(255,255,255,.62); border-top: 1px solid var(--rule-dark); }
.ftr__in {
  display: grid; grid-template-columns: minmax(0,2fr) repeat(2, minmax(0,1fr));
  gap: clamp(1.8rem,4vw,3rem); padding-block: clamp(3rem,5vw,4.5rem);
}
@media (max-width: 780px) { .ftr__in { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px) { .ftr__in { grid-template-columns: minmax(0,1fr); } }
.ftr__brand .wordmark { color: #fff; }
.ftr__brand .wordmark span { color: rgba(255,255,255,.5); }
.ftr__blurb { margin-top: 1.1rem; font-size: var(--step--1); line-height: 1.65; max-width: 34ch; }
.ftr h4 {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.42); margin-bottom: 1rem;
}
.ftr li { margin-bottom: .55rem; }
.ftr a { text-decoration: none; font-size: var(--step--1); transition: color .2s var(--ease); }
.ftr a:hover { color: #fff; }
.ftr__base {
  border-top: 1px solid var(--rule-dark); padding-block: 1.4rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  font-family: var(--mono); font-size: var(--step--2); color: rgba(255,255,255,.42);
}
.ftr__base a { font-size: inherit; }

/* ==========================================================================
   reveal on scroll
   ========================================================================== */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }

/* ==========================================================================
   container specification table
   Rebuilt from the client's 2015 weighttable.png so it is selectable,
   searchable and readable on a phone. Scrolls inside itself; the page never
   scrolls sideways.
   ========================================================================== */
.spec__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 1.6rem; }
.spec {
  border-collapse: collapse; width: 100%; min-width: 44rem;
  font-size: var(--step--1);
}
.spec caption {
  text-align: left; color: var(--ink-2); font-size: var(--step--1);
  line-height: 1.6; margin-bottom: 1.2rem; max-width: 62ch;
}
.spec th, .spec td { padding: .62rem .8rem; text-align: right; border-bottom: 1px solid var(--rule); }
.spec thead th {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--ink); white-space: nowrap;
}
.spec tbody th {
  text-align: left; font-weight: 400; color: var(--ink-2); white-space: nowrap;
}
.spec tbody th[scope="rowgroup"] {
  font-family: var(--mono); font-size: var(--step--2); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink); padding-top: 1.4rem;
  border-bottom: 0;
}
.spec td { font-variant-numeric: tabular-nums; }
.spec td small { display: block; color: var(--ink-3); font-size: .82em; margin-top: .12rem; }
.spec tbody tr:hover td, .spec tbody tr:hover th { background: var(--white); }
.spec__note { margin-top: 1rem; font-family: var(--mono); font-size: var(--step--2); color: var(--ink-3); line-height: 1.6; }

/* ==========================================================================
   language switcher
   Four languages will not sit in the header as a row of chips without
   crowding it, and a row of country flags would be a lie here: English and
   French are both Canada for this company, and Traditional Chinese has no
   honest flag. So the header carries one control showing the current
   language, and it opens the four written in their own names. The drawer
   shows that same list already unfolded, since it has the room.
   ========================================================================== */
.lang { position: relative; flex-shrink: 0; }

.lang__btn {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: .1em; line-height: 1; color: var(--ink);
  padding: .46rem .58rem .46rem .5rem;
  border: 1px solid var(--rule); border-radius: 2px; background: transparent;
  transition: border-color .22s var(--ease), background .22s var(--ease);
}
.lang__btn:hover { border-color: var(--ink); background: var(--white); }
.lang__btn[aria-expanded="true"] { border-color: var(--ink); background: var(--white); }
.lang__globe { color: var(--ink-3); transition: color .22s var(--ease); }
.lang__btn:hover .lang__globe,
.lang__btn[aria-expanded="true"] .lang__globe { color: var(--ink); }
.lang__caret { color: var(--ink-3); transition: transform .25s var(--ease); }
.lang__btn[aria-expanded="true"] .lang__caret { transform: rotate(180deg); }

.lang__menu {
  position: absolute; top: calc(100% + .55rem); right: 0; z-index: 5;
  min-width: 12.75rem; padding: .3rem;
  background: var(--white); border: 1px solid var(--rule); border-radius: 3px;
  /* layered, not a single flat drop */
  box-shadow: 0 1px 2px rgba(16,22,28,.05), 0 4px 10px -4px rgba(16,22,28,.10),
              0 18px 34px -12px rgba(16,22,28,.22);
  opacity: 0; visibility: hidden; transform: translateY(-5px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: none; }

/* one row shape, shared by the dropdown and the drawer list */
.lang__item {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  text-decoration: none; border-radius: 2px; color: var(--ink-2);
  padding: .62rem .7rem;
  font-size: var(--step--1); font-weight: 500; letter-spacing: -0.012em;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.lang__item:hover { background: var(--paper); color: var(--ink); }
.lang__item[aria-current="true"] {
  color: var(--ink); background: var(--paper);
  box-shadow: inset 2px 0 0 var(--amber);
}
.lang__tag {
  font-family: var(--mono); font-size: var(--step--2); letter-spacing: .1em;
  color: var(--ink-3); flex-shrink: 0;
}
.lang__item[aria-current="true"] .lang__tag { color: var(--amber-deep); }

/* drawer: the same four, already open */
.lang--stack { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.lang__label {
  font-family: var(--mono); font-size: var(--step--2); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 .55rem;
}
/* `.drawer a` sets display:block and wins on specificity, so the row has to
   restate the flex here or the code sits jammed against the name. */
.drawer .lang--stack a.lang__item {
  display: flex; border-bottom: 0; font-size: var(--step-0);
  /* full bleed: half-bleeding into the gutter reads like a mistake */
  margin-inline: calc(var(--gut) * -1); padding: .82rem var(--gut);
  border-radius: 0;
}
.drawer .lang--stack a.lang__item[aria-current="true"] { background: var(--paper-2); }

/* the header control is also a phone tap target, so give it the height */
@media (max-width: 900px) {
  .lang__btn { padding-block: .82rem; }
}
/* once the drawer is open the four are already listed inside it, so the
   header control would only open a panel on top of its own contents.
   Without :has support this just stays visible, which still works. */
.hdr:has(.drawer.is-open) .hdr__in .lang { display: none; }

/* ==========================================================================
   Traditional Chinese
   Latin type settings do not transfer. Negative tracking makes CJK glyphs
   collide, 1.03 line-height stacks them on top of each other, and uppercase
   is meaningless. The mono stack keeps IBM Plex Mono for Latin codes (EXW,
   CUS) and falls through to a CJK face for everything else.
   ========================================================================== */
html[lang^="zh"] {
  --sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Hiragino Sans CNS", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
          "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", monospace;
}
html[lang^="zh"] body { line-height: 1.85; }
html[lang^="zh"] h1,
html[lang^="zh"] h2,
html[lang^="zh"] h3,
html[lang^="zh"] h4,
html[lang^="zh"] h5 { letter-spacing: 0; font-weight: 700; line-height: 1.32; }
html[lang^="zh"] .hero h1 { line-height: 1.24; }
html[lang^="zh"] .wordmark { letter-spacing: 0; }
html[lang^="zh"] .kicker,
html[lang^="zh"] .xfer__k,
html[lang^="zh"] .marker__k,
html[lang^="zh"] .field label,
html[lang^="zh"] .dl__row dt,
html[lang^="zh"] .manifest__cell dt,
html[lang^="zh"] .lang__label,
html[lang^="zh"] .ftr h4 { text-transform: none; letter-spacing: .06em; }
/* 語言 at the Latin mono size reads as a smudge; give the two glyphs room */
html[lang^="zh"] .lang__label { font-size: var(--step--1); }
html[lang^="zh"] .stmt__body { line-height: 1.9; }
html[lang^="zh"] .cap__desc,
html[lang^="zh"] .gloss__txt,
html[lang^="zh"] .svc p { line-height: 1.9; }
html[lang^="zh"] .manifest__cell dd { letter-spacing: 0; line-height: 1.65; }
/* CJK has no spaces: keep breaks on character boundaries, not mid-word Latin */
html[lang^="zh"] p,
html[lang^="zh"] li,
html[lang^="zh"] dd { line-break: strict; word-break: normal; overflow-wrap: break-word; }
/* the seven-point scale labels are short in Chinese, give them room to breathe */
html[lang^="zh"] .xfer__tick span { font-size: 10.5px; letter-spacing: .02em; }
html[lang^="zh"] .gloss__name span { text-transform: none; letter-spacing: .04em; }
html[lang^="zh"] .spec thead th,
html[lang^="zh"] .spec tbody th[scope="rowgroup"] { text-transform: none; letter-spacing: .04em; }

/* CJK max-widths: `ch` is measured on the Latin zero, so 15ch is only about
   7 Chinese characters and headlines break mid-compound. Use em, where 1em is
   one full-width glyph. */
html[lang^="zh"] .hero h1        { max-width: 17em; }
html[lang^="zh"] .phead h1       { max-width: 17em; }
html[lang^="zh"] .stmt h2,
html[lang^="zh"] .cta h2         { max-width: 15em; }
html[lang^="zh"] .track__head h2 { max-width: 14em; }
html[lang^="zh"] .band__card h3  { max-width: 17em; }
html[lang^="zh"] .hero__sub      { max-width: 34em; }
html[lang^="zh"] .stmt__body p,
html[lang^="zh"] .svc p          { max-width: 40em; }