/* =====================================================================
   ASB Freight — section effects (driven by assets/js/fx.js) and the
   futuristic finish: glass panels, glowing hairlines, star-dust on navy,
   HUD service cards, the carriers console, the client strip.

   Two layers:
   1. The LOOK (glass, glow, hairlines) applies everywhere, with or without
      JavaScript, so the static page is already the finished design.
   2. Everything that MOVES is scoped to html.fx, which fx.js sets only when
      motion is allowed. Without it (no JavaScript, reduced motion,
      <html data-fx="off">, print) every section shows its final layout.

   README rule kept: no transform, filter, perspective or overflow on an
   ancestor of a sticky or fixed element (.hero__pin, .stop__card,
   .offices__grid, .stage, .journey__rail, .nav). Transforms here sit on
   the sticky elements themselves or on their children only.
   ===================================================================== */

:root {
  /* hairline that runs royal blue to ASB orange round a panel's edge */
  --fx-hair: linear-gradient(135deg, rgba(31, 78, 156, 0.6), rgba(31, 78, 156, 0) 36%, rgba(245, 131, 31, 0) 64%, rgba(245, 131, 31, 0.7));
  --fx-hair-dark: linear-gradient(135deg, rgba(140, 175, 255, 0.55), rgba(255, 255, 255, 0.06) 40%, rgba(255, 255, 255, 0.04) 60%, rgba(245, 131, 31, 0.75));
  --fx-glow-blue: rgba(31, 78, 156, 0.45);
  --fx-glow-orange: rgba(245, 131, 31, 0.55);
}

/* ---- shared: gradient hairline round a panel --------------------------- */
.fact::before, .stop__card::before, .form-card::before, .networks::before, .vmv__card::before, .offices__copy::before, .carriers__panel::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--fx-hair);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.networks::before, .vmv__card::before, .offices__copy::before { background: var(--fx-hair-dark); }

/* ---- star-dust on the navy About section -----------------------------------
   Faint, kept inside the rounded box, and never under the text: a dot between two letters reads as
   stray punctuation. Wide screens keep it to the right of the text column (Vision, Mission, Values and
   the space below them); one column (phones, tablets) has text across its whole width, so none there.
   (The footer has none for the same reason: its text runs across its whole width.) */
.about::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; pointer-events: none;
  border-radius: inherit; opacity: 0.35;
  background-image:
    radial-gradient(circle at 8% 12%, #fff 0 1px, transparent 1.6px),
    radial-gradient(circle at 23% 64%, rgba(255, 255, 255, 0.8) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 41% 28%, #fff 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 57% 83%, rgba(255, 255, 255, 0.7) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 72% 41%, rgba(255, 190, 130, 0.95) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 88% 9%, rgba(255, 255, 255, 0.8) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 94% 72%, rgba(160, 195, 255, 0.95) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 15% 93%, rgba(255, 255, 255, 0.6) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 34% 47%, rgba(160, 195, 255, 0.7) 0 0.7px, transparent 1.3px),
    radial-gradient(circle at 63% 16%, rgba(255, 255, 255, 0.6) 0 0.7px, transparent 1.3px);
  background-size: 360px 320px;
  /* faded at the top and bottom, and clear of the text column on the left */
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent), linear-gradient(90deg, transparent 0 50%, #000 66%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent), linear-gradient(90deg, transparent 0 50%, #000 66%);
  mask-composite: intersect;
}
@media (max-width: 980px) { .about::before { display: none; } }

/* ---- headings with depth ------------------------------------------------- */
.journey__head h2, .carriers__title, .contact h2 { text-shadow: 0 18px 44px rgba(20, 32, 58, 0.12); }
.about h2, .offices h2 { text-shadow: 0 0 46px rgba(80, 130, 230, 0.55); }
.carriers__title .accent { text-shadow: 0 16px 40px rgba(245, 131, 31, 0.16); }

/* ---- home screen pieces (steps 2 and 3; hero.css places them) --------------- */
.fact {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.9), rgba(244, 247, 252, 0.78));
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(20, 32, 58, 0.06), 0 34px 70px -38px rgba(20, 32, 58, 0.45);
}
.fact__n { text-shadow: 0 1px 0 #fff, 0 16px 34px rgba(31, 78, 156, 0.2); }
.fact dd { position: relative; padding-top: 14px; }
.fact dd::before {   /* a short instrument line between number and label */
  content: ""; position: absolute; left: 0; top: 0; width: 36px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--blue), var(--orange));
}
@media (max-width: 640px) {
  .fact dd { padding: 0 0 0 16px; }
  .fact dd::before { top: 4px; bottom: 4px; width: 2px; height: auto; background: linear-gradient(var(--blue), var(--orange)); }
}
.badges li img { box-shadow: inset 0 0 0 1px rgba(20, 32, 58, 0.04); }
.networks__title::before {   /* a small orbit mark */
  content: ""; display: inline-block; vertical-align: middle; width: 0.62em; height: 0.62em; margin: -0.12em 0.4em 0 0; border-radius: 50%;
  border: 2px solid rgba(140, 175, 255, 0.9); box-shadow: 0 0 0 4px rgba(140, 175, 255, 0.15), 0 0 18px rgba(140, 175, 255, 0.6), inset 0 0 0 3px var(--navy), inset 0 0 0 6px var(--orange);
}

/* ---- our solutions: HUD service cards ------------------------------------ */
.stop__card {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.8) 55%, rgba(242, 246, 252, 0.86));
  border: 0;
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(20, 32, 58, 0.06), 0 44px 90px -34px rgba(20, 32, 58, 0.42), 0 0 0 1px rgba(20, 32, 58, 0.04);
}
.stop__card::after {   /* HUD corner brackets */
  --c: rgba(31, 78, 156, 0.4);
  content: ""; position: absolute; inset: 9px; pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) left top / 16px 1.5px, linear-gradient(var(--c), var(--c)) left top / 1.5px 16px,
    linear-gradient(var(--c), var(--c)) right top / 16px 1.5px, linear-gradient(var(--c), var(--c)) right top / 1.5px 16px,
    linear-gradient(var(--c), var(--c)) left bottom / 16px 1.5px, linear-gradient(var(--c), var(--c)) left bottom / 1.5px 16px,
    linear-gradient(var(--c), var(--c)) right bottom / 16px 1.5px, linear-gradient(var(--c), var(--c)) right bottom / 1.5px 16px;
  background-repeat: no-repeat;
}
.stop__card > * { position: relative; z-index: 1; }
.stop__num { display: flex; align-items: center; gap: 12px; color: var(--blue); }
.stop__num::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px rgba(245, 131, 31, 0.2), 0 0 12px rgba(245, 131, 31, 0.7); }
.stop__meter { flex: 0 1 120px; height: 2px; border-radius: 2px; background: rgba(20, 32, 58, 0.1); overflow: hidden; }
.stop__meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--orange)); transform-origin: 0 50%; }
.stop__card > .stop__ghost {   /* big outlined stop number, in the card's empty bottom-right corner */
  position: absolute; z-index: 0; bottom: 8px; right: 22px; pointer-events: none; user-select: none;
  font: 300 clamp(72px, 6.6vw, 104px)/0.9 var(--font-display); letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 1px rgba(31, 78, 156, 0.22);
}
.stop__tag { display: inline-block; padding: 6px 12px; border-radius: var(--pill); background: rgba(31, 78, 156, 0.07); box-shadow: inset 0 0 0 1px rgba(31, 78, 156, 0.12); }
.ticks li::before { box-shadow: -1px 1px 6px rgba(245, 131, 31, 0.35); }
.pills li { background: #fff; box-shadow: inset 0 0 0 1px rgba(31, 78, 156, 0.14), 0 6px 14px -8px rgba(31, 78, 156, 0.4); }
.stop__cta { padding: 8px 0; }
.stop__cta:hover { color: var(--navy); }

/* the 01–06 rail */
.journey__rail { background: rgba(255, 255, 255, 0.78); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(20, 32, 58, 0.06), 0 24px 50px -22px rgba(20, 32, 58, 0.45); }
.journey__rail li { position: relative; }
.journey__rail li.is-on { color: var(--navy); }
.journey__rail li.is-on::after { content: ""; position: absolute; left: -17px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 8px rgba(245, 131, 31, 0.9); }
.journey__rail-fill { overflow: visible; }
.journey__rail-fill::after { background: linear-gradient(var(--blue), var(--orange)); box-shadow: 0 0 10px rgba(245, 131, 31, 0.7); border-radius: 2px; }

/* ---- carriers: a glass console over a faint dot field ------------------------ */
.carriers {
  background:
    radial-gradient(55% 70% at 72% 52%, rgba(31, 78, 156, 0.1), transparent 70%),
    radial-gradient(30% 40% at 8% 20%, rgba(255, 255, 255, 0.9), transparent 70%),
    var(--paper);
}
.carriers::before {   /* glowing hairline along the rounded top edge */
  content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(31, 78, 156, 0.4) 30%, rgba(245, 131, 31, 0.6) 70%, transparent);
}
.carriers::after {    /* a dot field behind the console, fading out toward the edges */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(31, 78, 156, 0.26) 1px, transparent 1.6px);
  background-size: 22px 22px; background-position: 11px 11px;
  -webkit-mask-image: radial-gradient(48% 62% at 66% 54%, #000 20%, transparent 72%);
  mask-image: radial-gradient(48% 62% at 66% 54%, #000 20%, transparent 72%);
}
.carriers__panel {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.5) 60%, rgba(236, 241, 250, 0.6));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(20, 32, 58, 0.04), 0 60px 110px -60px rgba(20, 32, 58, 0.45);
}
.carriers__panel::after { z-index: 2; opacity: 0.8; }

/* ---- about + clients (navy) ---------------------------------------------- */
.about {
  background:
    radial-gradient(60% 45% at 85% 8%, rgba(31, 78, 156, 0.55), transparent 70%),
    radial-gradient(45% 35% at 5% 70%, rgba(31, 78, 156, 0.3), transparent 70%),
    linear-gradient(180deg, var(--navy), #111c33);
}
.vmv__card {
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  background: radial-gradient(240px circle at 100% 0%, rgba(80, 130, 230, 0.3), transparent 65%), linear-gradient(165deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 44px 80px -40px rgba(0, 0, 0, 0.75);
  transition: box-shadow 0.4s var(--ease);
}
.vmv__card:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 44px 80px -40px rgba(0, 0, 0, 0.75), 0 0 50px -10px rgba(80, 130, 230, 0.6); }
.vmv__card h3::before { box-shadow: 0 0 0 4px rgba(245, 131, 31, 0.16), 0 0 16px rgba(245, 131, 31, 0.85); }
.about__more > summary > span { box-shadow: 0 0 0 0 rgba(245, 131, 31, 0); }
.about__more[open] > summary > span { box-shadow: 0 0 18px -2px rgba(245, 131, 31, 0.55); }
.group__cos li::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px rgba(245, 131, 31, 0.8); }
.marquee__track li { transition: box-shadow 0.4s var(--ease); }
.clients::before { background: linear-gradient(90deg, rgba(140, 175, 255, 0.35), rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.04)); }

/* ---- offices --------------------------------------------------------------- */
.office-list li.is-on { box-shadow: inset 3px 0 0 var(--orange), 0 16px 34px -18px rgba(245, 131, 31, 0.55); }
.office-list li.is-on .office-list__pin { box-shadow: 0 0 0 4px rgba(245, 131, 31, 0.16), 0 0 18px rgba(245, 131, 31, 0.6); }

/* ---- contact + form ---------------------------------------------------------- */
.contact { background: radial-gradient(50% 50% at 80% 30%, rgba(31, 78, 156, 0.08), transparent 70%), var(--paper); }
.form-card {
  background: linear-gradient(165deg, #fff, #fbfcfe);
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(20, 32, 58, 0.06), 0 44px 90px -40px rgba(20, 32, 58, 0.4);
  transition: box-shadow 0.5s var(--ease);
}
.form-card:focus-within { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(31, 78, 156, 0.16), 0 50px 110px -40px rgba(31, 78, 156, 0.5); }
.input, .select, .textarea { background-color: #fdfdfe; }
.input:hover:not(:focus), .select:hover:not(:focus), .textarea:hover:not(:focus) { border-color: #cdd5e2; }
.input:focus, .select:focus, .textarea:focus { background-color: #fff; box-shadow: 0 0 0 4px rgba(31, 78, 156, 0.14), 0 12px 30px -12px rgba(31, 78, 156, 0.5); }
.segmented { box-shadow: inset 0 1px 2px rgba(20, 32, 58, 0.08); }
.segmented input:checked + label { box-shadow: 0 0 0 1px rgba(31, 78, 156, 0.1), 0 8px 18px -8px rgba(31, 78, 156, 0.45); }
.chips input:checked + label { box-shadow: 0 8px 18px -8px rgba(20, 32, 58, 0.6); }
.contact__lines a, .contact__people a { transition: color 0.2s, text-decoration-color 0.2s; }
.contact__info a:hover { text-decoration-color: var(--blue); }

/* ---- footer ---------------------------------------------------------------- */
.site-footer { overflow: hidden; }
.site-footer::before {   /* glowing hairline along the top */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(245, 131, 31, 0.7) 30%, rgba(110, 155, 255, 0.8) 70%, transparent);
  box-shadow: 0 0 18px rgba(245, 131, 31, 0.4);
}
.site-footer > .wrap { position: relative; z-index: 1; }
.footer-grid nav a { transition: color 0.2s, text-shadow 0.3s; }
.footer-grid nav a:hover { text-shadow: 0 0 16px rgba(255, 255, 255, 0.45); }
.socials a { transition: background 0.25s, border-color 0.25s, box-shadow 0.3s, color 0.25s; }
.socials a:hover { box-shadow: 0 0 22px rgba(245, 131, 31, 0.55); }

/* ==========================================================================
   MOTION — only with html.fx (fx.js running, motion allowed). Screen only, so
   print always gets the static layout.
   ========================================================================== */
@media screen {
  /* fx.js writes transform and opacity every frame; a CSS transition on them would lag behind */
  html.fx .fx-el { transition: box-shadow 0.4s var(--ease), border-color 0.3s, background-color 0.3s; }
  html.fx .vmv__card:hover { transform: none; }

  /* words that stand up out of the page */
  html.fx [data-fx="words"] { perspective: 900px; perspective-origin: 30% 100%; }
  html.fx .fx-w { display: inline-block; transform-origin: 50% 100%; }

  /* sticky service cards swing in from their left edge */
  html.fx .stop__card { transform-origin: 0% 40%; }

  /* carriers: the tiles wait, unseen, for their flip in (fx.js plays it when the panel arrives) */
  html.fx [data-fx-flip]:not(.is-in) .logos > li { opacity: 0; }
  html.fx .carriers__list.is-leaving { z-index: 1; }

  /* the client strip runs on its own: the list and its copy side by side, one list-width per loop.
     It holds still while the pointer is on it, off screen, or after its pause button */
  html.fx .marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
  html.fx .marquee__track { display: flex; gap: 0; width: max-content; animation: fx-marquee var(--marquee-dur, 70s) linear infinite; }
  html.fx .marquee__track li { flex: none; width: 148px; margin-right: 12px; }
  html.fx .marquee:hover .marquee__track, html.fx .marquee:focus-within .marquee__track,
  html.fx .clients.is-paused .marquee__track, html.fx .clients.is-idle .marquee__track { animation-play-state: paused; }
  @keyframes fx-marquee { to { transform: translate3d(-50%, 0, 0); } }

  /* soft glare that follows the pointer on tilting cards (mouse only) */
  html.fx [data-fx-tilt] { --fx-glare: rgba(31, 78, 156, 0.1); }
  html.fx .about [data-fx-tilt] { --fx-glare: rgba(255, 255, 255, 0.14); }
  html.fx [data-fx-tilt]::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.4s;
    background: radial-gradient(380px circle at var(--gx, 50%) var(--gy, 0%), var(--fx-glare), transparent 55%);
  }
  @media (hover: hover) and (pointer: fine) {
    html.fx [data-fx-tilt]:hover::after { opacity: 1; }
  }
}
@media screen and (max-width: 760px) { html.fx .marquee__track li { width: 128px; } }
/* the strip's pause button exists only while the strip runs */
html:not(.fx) .marquee__toggle { display: none; }

/* ---- phones: lighter decoration ------------------------------------------- */
@media (max-width: 640px) {
  .stop__card > .stop__ghost { font-size: 60px; right: 16px; }
  .carriers::after { -webkit-mask-image: radial-gradient(80% 50% at 50% 62%, #000 20%, transparent 72%); mask-image: radial-gradient(80% 50% at 50% 62%, #000 20%, transparent 72%); }
}

/* ---- print: no decoration layers ------------------------------------------- */
@media print {
  .about::before, .carriers::after, .logos li::before, .logos li::after, .marquee__track > .is-copy { display: none; }
}