/* ==========================================================================
   Easy Global — site.css
   Shared design system for all pages. See easy-global-website-brief.md.

   HARD RULES (from the brief, do not "improve" these away):
   - Light theme only. No dark sections anywhere.
   - Text is pure black or pure white ONLY, chosen by background.
     Never navy-on-paper, never grey-on-white. Hierarchy comes from
     size/weight/space, not colour.
   - Navy/emerald/sky/yellow/coral are for UI, illustration and 3D materials.
     They are never a text colour.
   ========================================================================== */

:root{
  /* Brand — hex taken from the logo SVGs themselves, not the original brief. */
  --navy:#153b8d;
  --emerald:#1ad687;
  --sky:#2fa8f5;
  --yellow:#ffc93c;
  --coral:#ff6b5b;

  --paper:#fcfbf7;
  --navy-tint:#e8ecf5;

  --ink:#000;
  --on-dark:#fff;

  /* Service accents — one per service, per the brief. */
  --svc-trd:var(--navy);
  --svc-src:var(--yellow);
  --svc-imx:var(--sky);
  --svc-cnf:var(--emerald);
  --svc-exp:var(--coral);

  --font-display:'Big Shoulders Display',Impact,sans-serif;
  --font-body:'IBM Plex Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  --shell:1200px;
  --gutter:clamp(20px,5vw,48px);
  --nav-h:72px;

  --r:14px;
  --line:2px solid var(--navy);
  --hair:1px solid rgba(21,59,141,.18);

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

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

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(16px,1.05vw,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,canvas{display:block;max-width:100%}
a{color:inherit}

/* Global scrollbar — the default OS/Chrome bar is a thick hard-gray slab
   that clashes with everything else on this page. Thin, brand-tinted,
   rounded, matching the treatment already used on the testimonials rail.
   Firefox gets `scrollbar-width:thin` + tinted colours (no custom shape
   possible there); Chrome/Edge/Safari get the full webkit treatment. */
html{
  scrollbar-width:thin;
  scrollbar-color:rgba(21,59,141,.32) transparent;
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background-color:rgba(21,59,141,.28);
  border-radius:99px;
  border:2px solid var(--paper);
  background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background-color:rgba(21,59,141,.48)}

/* Visible keyboard focus — required. */
:focus-visible{
  outline:3px solid var(--navy);
  outline-offset:3px;
  border-radius:4px;
}

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

/* ---------- Type ---------------------------------------------------------- */

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-.01em;
  text-transform:uppercase;
  margin:0;
}
/* h1 is hero-only and signed off — leave it at .95. h2/h3 sit at smaller
   sizes where Big Shoulders' tall caps need more room to breathe. */
h1{font-size:clamp(44px,7.4vw,92px);line-height:.95}
h2{font-size:clamp(34px,5vw,62px);line-height:1.06}
h3{font-size:clamp(22px,2.4vw,30px);line-height:1.16}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

/* Mono eyebrow. Black text; the accent is the dash beside it, not the type. */
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 18px;
}
.eyebrow::before{
  content:"";
  width:28px;
  height:3px;
  background:var(--navy);
  flex:none;
}
.eyebrow--emerald::before{background:var(--emerald)}
.eyebrow--coral::before{background:var(--coral)}
.eyebrow--sky::before{background:var(--sky)}
.eyebrow--on-navy{color:var(--on-dark)}
.eyebrow--on-navy::before{background:var(--emerald)}

.lede{font-size:clamp(17px,1.5vw,21px);line-height:1.55;max-width:60ch}
.mono{font-family:var(--font-mono)}

/* ---------- Buttons ------------------------------------------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  padding:14px 22px;
  border-radius:999px;
  border:2px solid var(--navy);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  transition:transform .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(21,59,141,.18)}
.btn:active{transform:translateY(0)}

/* Coral CTA — white text on saturated block is the sanctioned exception. */
.btn--wa{
  background:var(--coral);
  border-color:var(--coral);
  color:var(--on-dark);
}
.btn--wa:hover{box-shadow:0 10px 26px rgba(255,107,91,.42)}
.btn--navy{background:var(--navy);border-color:var(--navy);color:var(--on-dark)}
.btn--ghost-light{border-color:var(--on-dark);color:var(--on-dark)}
.btn--ghost-light:hover{background:var(--on-dark);color:var(--ink)}
.btn svg{width:16px;height:16px;fill:currentColor;flex:none}

/* ---------- Nav ----------------------------------------------------------- */

.nav{
  position:sticky;
  top:0;
  z-index:50;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  background:rgba(252,251,247,.86);
  backdrop-filter:blur(12px);
  border-bottom:var(--hair);
}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:24px}

/* Logo = vector mark + live text wordmark. The supplied SVG sets the wordmark
   in 'Diamante-DemiBold', a font that does not exist on the web — so the mark
   is inlined and the wordmark is real text in the display face. */
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand__mark{width:44px;height:auto}
.brand__mark .plane{fill:var(--emerald)}
.brand__mark .ship{fill:var(--navy)}
.brand__word{
  font-family:var(--font-display);
  font-weight:700;
  font-size:23px;
  line-height:1;
  letter-spacing:.02em;
  text-transform:uppercase;
  white-space:nowrap;
}

.nav__links{display:flex;align-items:center;gap:28px}
.nav__links a{
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  position:relative;
  padding:4px 0;
}
.nav__links a::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:100%;height:2px;
  background:var(--emerald);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.nav__cta{flex:none}

.nav__burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.nav__burger span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0}

@media (max-width:900px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:block}
  .nav__links.is-open{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    position:absolute;
    top:var(--nav-h);
    left:0;right:0;
    background:var(--paper);
    border-bottom:var(--hair);
    padding:24px var(--gutter) 28px;
  }
}

/* ---------- Sections ------------------------------------------------------ */

.sec{padding:clamp(72px,9vw,120px) 0}
.sec--tint{background:var(--navy-tint)}
.sec__head{max-width:66ch;margin-bottom:clamp(36px,4vw,56px)}

/* ---------- Hero ---------------------------------------------------------- */

.hero{position:relative;padding:clamp(40px,5vw,64px) 0 clamp(64px,7vw,96px);overflow:hidden}

/* Background video — desktop + motion-allowed only, see js/hero-video.js.
   Sits behind everything (z-index:0); the copy/globe grid is lifted above
   it (z-index:1) so text and the 3D scene are always readable regardless
   of what's playing underneath. */
.hero__bg{position:absolute;inset:0;z-index:0;background:var(--paper)}
.hero__bg video{
  width:100%;height:100%;object-fit:cover;display:block;
  /* The source footage is a normal contrasty photoreal clip — real shadows,
     real saturation. This site has zero dark sections anywhere, so pull it
     toward the brand's light/airy palette rather than let it sit as a heavy
     photographic layer under everything else. */
  filter:brightness(1.22) contrast(0.72) saturate(0.65);
}
/* Fades from near-opaque cream on the left (where the headline sits) to
   fully transparent on the right (where the globe/video motion is) — the
   same left-clear / right-busy composition the video itself was shot to. */
.hero__bg-scrim{
  position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(252,251,247,.96) 0%,
    rgba(252,251,247,.82) 32%,
    rgba(252,251,247,.35) 58%,
    rgba(252,251,247,0) 76%);
}

.hero__in{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(24px,4vw,56px);
  /* Copy is the taller column, so centering the shorter stage against it
     leaves the globe sitting well below the eyebrow/headline — top-align
     instead so the globe starts level with the eyebrow. */
  align-items:start;
  min-height:min(76vh,680px);
}
.hero__copy{position:relative;z-index:2}
.hero h1{margin-bottom:22px}
.hero h1 em{font-style:normal;position:relative;white-space:nowrap}
/* Accent as UI (an underline), never as text colour. */
.hero h1 em::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:.08em;
  height:.1em;
  background:var(--emerald);
  z-index:-1;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

.hero__stage{position:relative;aspect-ratio:1/1;min-height:320px}
.hero__stage canvas{width:100%;height:100%}
.hero__fallback{
  position:absolute;inset:0;
  display:none;
  place-items:center;
  border-radius:50%;
  background:radial-gradient(circle at 38% 32%,var(--navy-tint),rgba(21,59,141,.10));
  border:var(--hair);
}
.hero__stage.is-fallback .hero__fallback{display:grid}

/* Route legend under the globe. */
.legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  margin-top:14px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.07em;
  text-transform:uppercase;
  justify-content:center;
}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:16px;height:3px;border-radius:2px;flex:none}
.legend .air{background:var(--sky)}
.legend .sea{background:var(--emerald)}
.legend .exp{background:var(--coral)}

@media (max-width:900px){
  .hero__in{grid-template-columns:1fr;min-height:0}
  .hero__stage{order:-1;aspect-ratio:4/3;min-height:0;max-height:44vh}
}

/* ---------- Corridor strip ------------------------------------------------ */

.corridor{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
  background:var(--paper);
  border:var(--hair);
  border-radius:var(--r);
  padding:clamp(24px,2.6vw,34px);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.sec--tint .card{background:var(--paper)}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(21,59,141,.13)}
.card h3{margin-bottom:10px}
.card__rule{width:36px;height:4px;border-radius:2px;background:var(--navy);margin-bottom:18px}
.card__rule--emerald{background:var(--emerald)}
.card__rule--coral{background:var(--coral)}
.card__rule--yellow{background:var(--yellow)}

/* Two-up growth pillars (Trading & Sourcing) on the homepage. */
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:860px){.pillars{grid-template-columns:1fr}}

/* The three corridor countries. */
.lanes{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.lane{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:5px 11px;
  border-radius:999px;
  background:var(--navy);
  color:var(--on-dark);
}
.lane--cn{background:var(--emerald);color:var(--ink)}
.lane--ae{background:var(--yellow);color:var(--ink)}

@media (max-width:860px){.corridor{grid-template-columns:1fr}}

/* ---------- Warehouse / flow --------------------------------------------- */

/* Two warehouses — Guangzhou and Dubai. Both run the same model, so they get
   identical cards rather than one "main" warehouse and a footnote. */
.whs{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.wh-card{
  background:var(--paper);
  border:var(--hair);
  border-radius:var(--r);
  overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.sec--tint .wh-card{background:var(--paper)}
.wh-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(21,59,141,.13)}
.wh-card__body{padding:clamp(24px,2.6vw,34px)}
.wh-card h3{margin:12px 0 10px}
.wh-card__body > p{margin-bottom:22px}

.wh-card__shot{
  position:relative;
  aspect-ratio:16/8;
  overflow:hidden;
  background:var(--navy-tint);
}
.wh-card__shot img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease);
}
.wh-card:hover .wh-card__shot img{transform:scale(1.04)}
/* Keeps the photo from competing with the copy and pulls it toward the palette
   rather than letting raw stock colour fight the brand. */
.wh-card__shot::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(21,59,141,.28),rgba(21,59,141,0) 55%);
}

.flow{display:grid;gap:14px}
/* Nested inside a card, so no second border — the tint carries the grouping. */
.wh-card .flow__row{
  background:var(--navy-tint);
  border:0;
  border-radius:10px;
  padding:18px;
}
.flow__row{
  background:var(--paper);
  border:var(--hair);
  border-radius:var(--r);
  padding:22px;
}
.flow__label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:999px;
  margin-bottom:16px;
}
.flow__label--air{background:var(--sky);color:var(--ink)}
.flow__label--sea{background:var(--emerald);color:var(--ink)}
.flow__label--exp{background:var(--coral);color:var(--ink)}

.flow__steps{
  list-style:none;
  margin:0;padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 4px;
}
.flow__steps li{
  font-family:var(--font-mono);
  font-size:12.5px;
  line-height:1.3;
  padding:8px 12px;
  border-radius:8px;
  background:var(--navy-tint);
}
/* Inside a card the row is already tinted — steps need to lift off it. */
.wh-card .flow__steps li{background:var(--paper)}
.sec--tint .flow__steps li{background:var(--navy-tint)}
.flow__steps li.is-key{
  background:var(--navy);
  color:var(--on-dark);
  font-weight:600;
}
.flow__steps li[aria-hidden="true"]{
  background:none;
  padding:0 2px;
  font-size:15px;
  opacity:.5;
}

.eta{
  margin-top:16px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.05em;
}

@media (max-width:900px){.whs{grid-template-columns:1fr}}

/* ---------- Services ------------------------------------------------------ */

.svcs{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.svc{
  grid-column:span 2;
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--paper);
  border:var(--hair);
  border-radius:var(--r);
  padding:clamp(24px,2.4vw,32px);
  text-decoration:none;
  overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
/* 5 cards on a 6-col grid: 3 up top, 2 wider below — no orphan gap. */
.svc:nth-child(4),.svc:nth-child(5){grid-column:span 3}

.svc::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:5px;
  background:var(--acc);
}
.svc:hover{transform:translateY(-5px);box-shadow:0 16px 38px rgba(21,59,141,.15)}
.svc__code{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  padding:4px 9px;
  border-radius:6px;
  background:var(--acc);
  color:var(--acc-ink,var(--ink));
  margin-bottom:16px;
  align-self:flex-start;
}
.svc h3{margin-bottom:10px}
.svc__arrow{
  margin-top:18px;
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:gap .3s var(--ease);
  /* Also used standalone (not nested in a .svc card link) — e.g. the
     Trading/Sourcing pillar cards — so it needs to look right as its own <a>. */
  text-decoration:none;
  color:inherit;
}
.svc:hover .svc__arrow,
.svc__arrow:hover{gap:14px}

.svc--trd{--acc:var(--svc-trd);--acc-ink:var(--on-dark)}
.svc--src{--acc:var(--svc-src)}
.svc--imx{--acc:var(--svc-imx)}
.svc--cnf{--acc:var(--svc-cnf)}
.svc--exp{--acc:var(--svc-exp)}

@media (max-width:960px){
  .svcs{grid-template-columns:repeat(2,1fr)}
  .svc,.svc:nth-child(4),.svc:nth-child(5){grid-column:span 1}
}
@media (max-width:620px){
  .svcs{grid-template-columns:1fr}
}

/* ---------- Credentials --------------------------------------------------- */

.creds{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cred{
  display:flex;
  align-items:center;
  gap:16px;
  background:var(--paper);
  border:var(--hair);
  border-radius:var(--r);
  padding:22px 24px;
  text-decoration:none;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.cred:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(21,59,141,.13)}
.cred__tick{
  width:38px;height:38px;
  flex:none;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--emerald);
}
.cred__tick svg{width:18px;height:18px;fill:var(--ink)}
.cred__t{font-weight:600;line-height:1.25}
.cred__s{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}

@media (max-width:860px){.creds{grid-template-columns:1fr}}

/* ---------- Testimonials -------------------------------------------------- */

/* Horizontal scroller, not a 3-up grid: tighter gap, cards sit side by side
   and run off the right edge so it reads as a rail you can push. */
.quotes{
  display:flex;
  gap:6px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  /* Bleed to the viewport edge so the last card is visibly cut off — that's
     the affordance telling you there's more. */
  margin-inline:calc(var(--gutter) * -1);
  padding:4px var(--gutter) 18px;
  scrollbar-width:thin;
  scrollbar-color:var(--line-fade, rgba(21,59,141,.3)) transparent;
}
.quotes::-webkit-scrollbar{height:6px}
.quotes::-webkit-scrollbar-track{background:transparent}
.quotes::-webkit-scrollbar-thumb{background:rgba(21,59,141,.26);border-radius:99px}
.quotes::-webkit-scrollbar-thumb:hover{background:rgba(21,59,141,.45)}

/* Styled to match .card exactly — same padding, rule, hover lift. */
.quote{
  flex:0 0 clamp(268px,29vw,352px);
  scroll-snap-align:start;
  background:var(--paper);
  border:var(--hair);
  border-radius:var(--r);
  padding:clamp(24px,2.6vw,34px);
  display:flex;
  flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.quote:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(21,59,141,.13)}
.quote blockquote{margin:0 0 20px;font-size:16.5px;line-height:1.6;flex:1}
.quote figcaption{border-top:var(--hair);padding-top:16px}
.quote__n{font-weight:600}
.quote__r{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em}

/* ---------- Partners (7 — centred wrap, never a grid with a hole) --------- */

.partners{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:clamp(24px,4vw,56px);
}
.partners li{list-style:none;flex:0 0 auto}
.partners img{
  height:clamp(30px,3.4vw,44px);
  width:auto;
  filter:grayscale(1);
  opacity:.62;
  /* Some source logos (hti.png) have an opaque white background baked in,
     which shows as a visible box against this cream page. Multiply blend
     mathematically erases a white/near-white background against a
     near-white page while leaving colored backgrounds (UCC's brown card)
     essentially untouched — don't remove this thinking it's redundant. */
  mix-blend-mode:multiply;
  transition:filter .3s var(--ease),opacity .3s var(--ease),transform .3s var(--ease);
}
.partners img:hover{filter:grayscale(0);opacity:1;transform:scale(1.06)}

/* ---------- CTA ----------------------------------------------------------- */

.cta{background:var(--navy);color:var(--on-dark);padding:clamp(64px,7vw,96px) 0}
.cta h2{margin-bottom:18px}
.cta .lede{margin-bottom:30px}
.cta__actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Footer -------------------------------------------------------- */

.foot{border-top:var(--hair);padding:56px 0 40px}
.foot__in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.foot h4{
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin:0 0 16px;
}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline;text-underline-offset:3px}
.foot__note{
  margin-top:44px;
  padding-top:22px;
  border-top:var(--hair);
  font-family:var(--font-mono);
  font-size:11.5px;
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  justify-content:space-between;
}
.foot .brand{margin-bottom:16px}

@media (max-width:860px){.foot__in{grid-template-columns:1fr;gap:32px}}

/* ---------- Service deep-dive (services.html) ----------------------------- */

.svc-hero{padding:clamp(48px,6vw,72px) 0 clamp(28px,3vw,40px)}
.svc-hero h1{margin-bottom:18px}

/* Jump nav — mono chips linking to each #anchor section. */
.jump{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:28px;
}
.jump a{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  padding:8px 14px;
  border-radius:999px;
  border:var(--hair);
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.jump a:hover{transform:translateY(-2px);border-color:var(--navy)}
.jump a i{
  display:inline-block;
  width:8px;height:8px;
  border-radius:50%;
  margin-right:8px;
  background:var(--acc,var(--navy));
  vertical-align:middle;
}

.svc-sec{
  scroll-margin-top:calc(var(--nav-h) + 16px);
  padding:clamp(56px,7vw,96px) 0;
  border-top:var(--hair);
}
.svc-sec:first-of-type{border-top:0}

.svc-sec__top{
  display:flex;
  align-items:baseline;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:22px;
}
.svc-sec__code{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
  letter-spacing:.1em;
  padding:6px 12px;
  border-radius:6px;
  background:var(--acc);
  color:var(--acc-ink,var(--ink));
}
.svc-sec--trd{--acc:var(--svc-trd);--acc-ink:var(--on-dark)}
.svc-sec--src{--acc:var(--svc-src)}
.svc-sec--imx{--acc:var(--svc-imx)}
.svc-sec--cnf{--acc:var(--svc-cnf)}
.svc-sec--exp{--acc:var(--svc-exp)}

.svc-sec__grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(28px,4vw,56px);
  align-items:start;
}
.svc-sec__grid .lede{margin-bottom:20px}

/* Numbered process steps — Trading. */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.steps li{display:flex;gap:14px;align-items:flex-start}
.steps__n{
  flex:none;
  width:30px;height:30px;
  border-radius:50%;
  background:var(--navy-tint);
  display:grid;place-items:center;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
}

/* Sourcing's two add-on capabilities. */
.feats{display:grid;gap:14px}
.feat{
  background:var(--paper);
  border:var(--hair);
  border-radius:12px;
  padding:20px;
}
.feat h4{margin:0 0 8px;font-family:var(--font-body);font-weight:600;font-size:15px}

/* C&F required documents. */
.doclist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.doclist li{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:13px;
}
.doclist li::before{
  content:"";
  width:7px;height:7px;
  border-radius:2px;
  background:var(--acc,var(--navy));
  flex:none;
}

/* Side panel shared by every section — lead time / note box. */
.svc-panel{
  background:var(--navy-tint);
  border-radius:var(--r);
  padding:clamp(22px,2.2vw,28px);
}
.sec--tint .svc-panel{background:var(--paper)}
.svc-panel h4{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin:0 0 16px;
}
.svc-panel .eta{margin-top:0}
.rate-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:11px 0;
  border-bottom:var(--hair);
  font-size:14.5px;
}
.rate-row:last-child{border-bottom:0}
.rate-row strong{font-family:var(--font-mono);font-size:13px;white-space:nowrap}

@media (max-width:900px){.svc-sec__grid{grid-template-columns:1fr}}

/* ---------- Journey (process.html horizontal scroll-camera) --------------- */

.journey{position:relative;background:var(--navy-tint);overflow:hidden}
.journey__pin{
  height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
}
/* Fallback state (reduced motion, no GSAP, or small screens): a plain
   horizontally scrollable strip instead of a pinned/scrubbed section. */
.journey.is-plain .journey__pin{
  height:auto;
  padding:56px 0;
  overflow-x:auto;
  align-items:stretch;
}
.journey__track{
  display:flex;
  align-items:center;
  gap:28px;
  padding-inline:var(--gutter);
  will-change:transform;
}
.journey.is-plain .journey__track{will-change:auto}

.journey__arrow{flex:none;font-family:var(--font-mono);font-size:22px;opacity:.4}

.stage{
  flex:none;
  width:min(78vw,340px);
  background:var(--paper);
  border-radius:var(--r);
  padding:26px;
  box-shadow:0 10px 30px rgba(21,59,141,.08);
}
.stage__n{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;height:34px;
  border-radius:50%;
  background:var(--navy);
  color:var(--on-dark);
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
  margin-bottom:16px;
}
.stage h3{font-size:19px;margin-bottom:8px}
.stage p{font-size:14.5px}

/* The one stage that splits into air/sea — two mini flow-cards stacked. */
.stage--split{width:min(84vw,388px);display:grid;gap:12px}
.stage--split .stage__n{grid-column:1/-1}
.split-row{
  background:var(--navy-tint);
  border-radius:10px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:12px;
}
.split-row .flow__label{margin:0}
.split-row .eta{margin:0;font-size:12.5px}

.journey__hint{
  position:absolute;
  bottom:20px;left:0;right:0;
  text-align:center;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.55;
}
.journey.is-plain .journey__hint{display:none}

@media (max-width:760px){
  /* Pinning a horizontal scrub on small screens fights native scroll and
     mobile viewport-height quirks more than it's worth — always plain there. */
  .journey .journey__pin{height:auto;padding:40px 0;overflow-x:auto;align-items:stretch}
  .journey .journey__hint{display:none}
}

/* ---------- Intake requirements (process.html) ----------------------------- */

.reqs{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.req{
  background:var(--paper);
  border:var(--hair);
  border-radius:12px;
  padding:20px 22px;
}
.req h4{margin:0 0 8px;font-size:15px}
.req .tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:5px;
  background:var(--coral);
  color:var(--ink);
  margin-bottom:10px;
}
.req .tag--optional{background:var(--navy-tint)}
@media (max-width:700px){.reqs{grid-template-columns:1fr}}

/* ---------- Delivery choice (process.html) --------------------------------- */

.choice{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:700px){.choice{grid-template-columns:1fr}}

/* ---------- Team (about.html) ---------------------------------------------- */

.team{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.team-card{
  background:var(--paper);
  border:var(--hair);
  border-radius:var(--r);
  padding:22px;
  text-align:center;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.sec--tint .team-card{background:var(--paper)}
.team-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(21,59,141,.13)}
.team-card__photo{
  width:96px;height:96px;
  border-radius:50%;
  overflow:hidden;
  margin:0 auto 16px;
  background:var(--navy-tint);
  border:3px solid var(--paper);
  outline:1px solid rgba(21,59,141,.16);
}
.team-card__photo img{width:100%;height:100%;object-fit:cover}
.team-card h3{font-size:17px;margin-bottom:4px}
.team-card__title{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.05em;
  color:var(--ink);
  opacity:.68;
}

@media (max-width:860px){.team{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.team{grid-template-columns:1fr}}

/* ---------- Contact (contact.html) ------------------------------------------ */

.contact{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,4vw,56px);align-items:start}

.contact__primary{
  display:flex;
  align-items:center;
  gap:16px;
  background:var(--coral);
  border-radius:var(--r);
  padding:24px 26px;
  text-decoration:none;
  color:var(--ink);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.contact__primary:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(255,107,91,.35)}
.contact__primary svg{width:30px;height:30px;flex:none;fill:var(--ink)}
.contact__primary strong{display:block;font-size:19px}
.contact__primary span{font-family:var(--font-mono);font-size:13px}

.contact-list{display:grid;gap:14px;margin-top:16px}
.contact-row{
  display:flex;
  align-items:flex-start;
  gap:14px;
  background:var(--paper);
  border:var(--hair);
  border-radius:12px;
  padding:18px 20px;
  text-decoration:none;
  color:var(--ink);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.contact-row:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(21,59,141,.1)}
.contact-row__icon{
  flex:none;
  width:38px;height:38px;
  border-radius:50%;
  background:var(--navy-tint);
  display:grid;place-items:center;
}
.contact-row__icon svg{width:17px;height:17px;fill:var(--navy)}
.contact-row__label{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.6;
  margin-bottom:3px;
}

.map-frame{
  position:relative;
  border-radius:var(--r);
  overflow:hidden;
  border:var(--hair);
  aspect-ratio:4/3;
  background:var(--navy-tint);
}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

@media (max-width:900px){.contact{grid-template-columns:1fr}}

/* ---------- Reveals ------------------------------------------------------- */

.reveal{opacity:0;transform:translateY(22px)}
.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    transition-duration:.001ms!important;
  }
}