/*
 * NTI Global site stylesheet (Version B port).
 *
 * Every colour comes from the design tokens in :root. Changing a token means
 * re-running scripts/validate_site.py, which recomputes the contrast pairs
 * from this file. No inline styles anywhere, so a strict CSP can be applied.
 */

/* Self-hosted, version-pinned fonts (see third_party/CHECKSUMS.json). Latin subset. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap;
  src: url("third_party/fonts/archivo-latin-600-normal.b3c7a6723662.woff2") format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap;
  src: url("third_party/fonts/archivo-latin-700-normal.8aaed9b7a093.woff2") format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("third_party/fonts/inter-latin-400-normal.f837d382a885.woff2") format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url("third_party/fonts/inter-latin-500-normal.42b95430773b.woff2") format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url("third_party/fonts/inter-latin-600-normal.75fb76ec3559.woff2") format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url("third_party/fonts/jetbrains-mono-latin-500-normal.b1734e00c40a.woff2") format('woff2'); }

:root {
  --navy: #112E50;
  --navy-deep: #0A1D33;
  --navy-mid: #1B4470;
  --yellow: #FFC635;
  --yellow-hover: #FFD469;
  --amber: #8A5E00;
  --paper: #F7F6F3;
  --steel: #5F6E7F;
  --line: #DDDCD6;
  --ink: #14181D;
  --white: #FFFFFF;

  --on-dark: #FFFFFF;
  --on-dark-nav: #D3DEEA;
  --on-dark-pill: #C6D5E4;
  --on-dark-brand: #B9CADB;
  --on-dark-soft: #A9BCCF;
  --on-dark-mute: #8FA5BD;
  --text-deep: #2C333C;

  --focus-in: #0A1D33;
  --focus-out: #FFC635;
  --focus-in-dark: #FFFFFF;
  --ring-in: var(--focus-in);

  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --ease-out: cubic-bezier(.2, .75, .25, 1);
  --ease-fly: cubic-bezier(.16, .84, .28, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--navy-deep);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
a { color: inherit; }
img, video { max-width: 100%; }
.mono { font-family: var(--font-mono); font-weight: 500; }

/* Two tone focus ring: inner stroke, then a yellow halo. Light surfaces use a
   navy stroke; dark surfaces switch --ring-in to white. */
:focus-visible {
  outline: 3px solid var(--focus-out);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--ring-in);
}
/* The inner stroke follows the surface the control sits on, not the page region:
   .surf-dark for navy surfaces, .surf-light for white and paper ones. Nearest wins,
   so a light panel inside a dark stage keeps its navy stroke. */
.surf-dark { --ring-in: var(--focus-in-dark); }
.surf-light { --ring-in: var(--focus-in); }
.field input:focus-visible { outline: 0; box-shadow: none; }
.field:focus-within {
  outline: 3px solid var(--focus-out);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--ring-in), 0 18px 42px rgba(0, 0, 0, .34);
}
main:focus { outline: 0; box-shadow: none; }
body.lb-open { overflow: hidden; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--yellow); color: var(--navy-deep);
  padding: 12px 20px; font-weight: 600; text-decoration: none;
}
.skip:focus { left: 0; }

/* header */
header { background: var(--navy); position: relative; z-index: 20; flex-shrink: 0; }
.bar {
  max-width: 1180px; margin: 0 auto; display: flex; align-items: center;
  gap: 20px; padding: 13px 26px;
}
.logo { display: flex; align-items: baseline; gap: 9px; text-decoration: none; flex-shrink: 0; }
.logo b {
  font-family: var(--font-display); font-weight: 700; font-size: 23px;
  letter-spacing: -.02em; color: var(--on-dark);
}
.logo b i { font-style: normal; color: var(--yellow); }
.logo span {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-dark-brand); font-weight: 500;
}
.nav { margin-left: auto; display: flex; gap: 2px; }
.nav a {
  font-size: 13.5px; font-weight: 500; color: var(--on-dark-nav);
  text-decoration: none; padding: 9px 13px; border-radius: 4px; min-height: 40px;
  display: inline-flex; align-items: center;
}
.nav a:hover { color: var(--on-dark); background: rgba(255, 255, 255, .1); }
.nav a[aria-current="page"] { color: var(--on-dark); box-shadow: inset 0 -3px 0 var(--yellow); border-radius: 4px 4px 0 0; }
.nav a[aria-current="page"]:focus-visible { box-shadow: 0 0 0 2px var(--ring-in); }
/* the yellow and navy duct ring motif */
.band {
  height: 5px;
  background: repeating-linear-gradient(90deg, var(--yellow) 0 44px, var(--navy-deep) 44px 56px);
}

main.page { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* the stage fills the viewport so nothing needs scrolling above a gallery */
.stage {
  flex: 1; position: relative; display: flex; flex-direction: column;
  justify-content: center; padding: 44px 26px; overflow: hidden;
  background:
    radial-gradient(1000px 420px at 50% -10%, rgba(255, 198, 53, .11), transparent 62%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 78px),
    var(--navy-deep);
}
.inner { max-width: 1180px; margin: 0 auto; width: 100%; position: relative; z-index: 2; }
.scrolls { overflow-y: auto; }

/* back control and step readout */
.crumb { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.crumb a {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500;
  color: var(--on-dark-pill); text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .24); padding: 10px 16px; border-radius: 999px;
}
.crumb a:hover { background: rgba(255, 255, 255, .1); color: var(--on-dark); }
.crumb .step {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-dark-mute); margin-left: auto;
}

h1 {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.025em;
  line-height: 1.05; font-size: clamp(28px, 4.4vw, 50px); color: var(--on-dark);
  max-width: 19ch; margin-bottom: 14px;
}
.lede { font-size: 17px; color: var(--on-dark-soft); max-width: 58ch; margin-bottom: 6px; }
.hint { font-size: 14px; color: var(--on-dark-mute); margin-bottom: 26px; }
.eyebrow {
  display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; background: rgba(255, 198, 53, .16); color: var(--yellow);
  padding: 5px 12px; border-radius: 3px; margin-bottom: 16px;
}

/* option cards: a photograph first, the label confirms the choice */
.opts { display: grid; gap: 15px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.opt {
  position: relative; background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .17); border-radius: 10px;
  display: flex; flex-direction: column;
  transition: background .22s ease, border-color .22s ease, transform .22s ease;
}
/* The card itself does not clip, so the focus ring on its link can draw outside it.
   The photograph clips itself and carries the card's top corners. */
.opt-pic { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy); border-radius: 9px 9px 0 0; }
.opt-pic img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--ease-out);
}
.opt-pic::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 29, 51, .55) 0%, rgba(10, 29, 51, 0) 62%);
}
.opt:hover .opt-pic img, .opt:focus-within .opt-pic img { transform: scale(1.06); }
.opt-body { display: block; padding: 19px 21px 20px; }
.opt:hover, .opt:focus-within {
  background: rgba(255, 198, 53, .13); border-color: var(--yellow); transform: translateY(-4px);
}
.opt-title {
  font-family: var(--font-display); font-size: 20px; font-weight: 600;
  color: var(--on-dark); margin-bottom: 5px; letter-spacing: -.015em;
}
.opt-title a { color: inherit; text-decoration: none; }
/* the whole card is the click target */
.opt-title a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.opt-title a:focus-visible { outline: 0; box-shadow: none; }
.opt-title a:focus-visible::after {
  outline: 3px solid var(--focus-out); outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--ring-in); border-radius: 10px;
}
.opt p { font-size: 13.5px; color: var(--on-dark-soft); line-height: 1.5; }
.opt .go {
  display: flex; align-items: center; gap: 7px; margin-top: 15px; font-size: 12.5px;
  font-weight: 600; color: var(--yellow); opacity: 0; transform: translateX(-5px);
  transition: opacity .22s ease, transform .22s ease;
}
.opt:hover .go, .opt:focus-within .go { opacity: 1; transform: none; }

/* show all disclosure */
.showall { display: flex; justify-content: center; margin-top: 24px; }
.showbtn {
  display: inline-flex; align-items: center; gap: 11px; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 14.5px;
  background: var(--yellow); color: var(--navy-deep); border: 0;
  padding: 14px 28px; border-radius: 999px; min-height: 48px;
  transition: background .2s ease, transform .2s ease;
}
.showbtn:hover { background: var(--yellow-hover); transform: translateY(-2px); }
.showbtn svg { transition: transform .35s var(--ease-out); }
.showbtn[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Without script the extra products simply show. With script they start
   collapsed, stay in the DOM for crawlers, and are inert until opened. */
.panelwrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s var(--ease-out); }
.panelin { overflow: hidden; min-height: 0; margin: 0 -10px; }
/* the side and bottom padding gives the focus ring room inside the clipping box */
.panelwrap .opts { padding: 16px 10px 12px; }
.js .panelwrap:not(.open) { grid-template-rows: 0fr; }
.js .panelwrap:not(.open) .panelin { visibility: hidden; }
.js .panelwrap.open .panelin { visibility: visible; transition: visibility 0s; }

/* product panel */
.panel {
  display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); align-items: center;
}
.shotwrap {
  margin: 0; border-radius: 10px; overflow: hidden;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .2), 0 18px 36px rgba(0, 0, 0, .3), 0 42px 84px rgba(0, 0, 0, .3);
}
.shotwrap img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; }
.facts { display: grid; gap: 0; grid-template-columns: 1fr 1fr; margin: 22px 0 26px; }
.facts div { padding: 13px 16px 13px 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.facts div:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.facts dt {
  font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-dark-mute); margin-bottom: 4px;
}
.facts dd { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--on-dark); }

/* the three terminal actions */
.acts { display: grid; gap: 11px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.act {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--yellow); color: var(--navy-deep); text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: 14.5px;
  padding: 16px 20px; border-radius: 8px; line-height: 1.25;
}
.act:hover { background: var(--yellow-hover); }
.act.ghost { background: rgba(255, 255, 255, .08); color: var(--on-dark); border: 1px solid rgba(255, 255, 255, .26); }
.act.ghost:hover { background: rgba(255, 255, 255, .16); }
.act svg { flex-shrink: 0; }

/* project pages */
.callouts { display: flex; flex-wrap: wrap; gap: 9px; margin: 26px 0 24px; list-style: none; }
.callouts li {
  font-size: 13px; font-weight: 500; color: var(--navy-deep); background: var(--yellow);
  padding: 7px 15px; border-radius: 999px;
}
.bundle { display: grid; gap: 10px; margin: 24px 0 26px; list-style: none; }
.brow {
  position: relative; display: flex; align-items: center; gap: 16px;
  background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 8px; padding: 14px 18px;
}
.brow:hover, .brow:focus-within { border-color: var(--yellow); }
.brow b { font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--yellow); width: 26px; flex-shrink: 0; }
.brow .t {
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-dark-mute); margin-bottom: 2px;
}
.brow .v { font-size: 15.5px; color: var(--on-dark); font-weight: 500; }
.brow .v a { text-decoration: none; }
.brow .v a::after { content: ""; position: absolute; inset: 0; }
.brow .v a:focus-visible { outline: 0; box-shadow: none; }
.brow .v a:focus-visible::after {
  outline: 3px solid var(--focus-out); outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--ring-in); border-radius: 8px;
}

/* search: one field, two modes */
.home-h { text-align: center; margin: 0 auto 12px; max-width: 22ch; position: relative; }
.home-h .hl { display: block; transition: opacity .45s ease, transform .45s ease; }
.home-h .hl.alt { position: absolute; inset: 0; opacity: 0; transform: translateY(10px); pointer-events: none; }
.home-h[data-show="projects"] .hl[data-mode="products"] { opacity: 0; transform: translateY(-10px); }
.home-h[data-show="projects"] .hl.alt { opacity: 1; transform: none; }
.home-lede { text-align: center; margin: 0 auto 26px; }
.search { max-width: 720px; margin: 0 auto; }
.modes { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; border: 0; min-width: 0; }
.mode-input { position: absolute; width: 1px; height: 1px; margin: -1px; opacity: 0; overflow: hidden; }
.mode {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--on-dark-pill);
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .22);
  padding: 11px 26px; min-height: 44px; border-radius: 999px; cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.mode-input:checked + .mode { background: var(--yellow); color: var(--navy-deep); border-color: var(--yellow); }
.mode-input:focus-visible + .mode {
  outline: 3px solid var(--focus-out); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ring-in);
}
/* attention only, never selection: the pulse says "there are two of these" */
.mode.pulse {
  background: rgba(255, 198, 53, .24); border-color: var(--yellow);
  color: var(--on-dark); transform: translateY(-2px);
}
.field {
  display: flex; align-items: center; gap: 13px; background: var(--white); border-radius: 10px;
  padding: 8px 8px 8px 20px; border: 1px solid rgba(255, 255, 255, .3);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .34);
}
.field svg { flex-shrink: 0; color: var(--steel); }
.field input {
  flex: 1; border: 0; outline: 0; background: transparent; font-family: inherit;
  font-size: 16.5px; color: var(--ink); padding: 14px 0; min-width: 0;
}
.field input::placeholder { color: var(--steel); opacity: 1; }
.field button {
  flex-shrink: 0; border: 0; cursor: pointer; background: var(--yellow); color: var(--navy-deep);
  font-family: var(--font-display); font-weight: 600; font-size: 14.5px;
  padding: 14px 26px; border-radius: 6px; min-height: 48px;
}
.field button:hover { background: var(--yellow-hover); }
.prompt { font-size: 14px; color: var(--yellow); min-height: 21px; margin-top: 11px; text-align: center; font-weight: 500; }

/* the pause control for the rotating examples (WCAG 2.2.2); script reveals it */
.cycle {
  display: block; margin: 0 auto 14px; cursor: pointer; background: transparent;
  color: var(--on-dark-pill); border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px;
  font-family: var(--font-body); font-size: 13px; font-weight: 500; padding: 8px 18px; min-height: 44px;
}
.cycle[hidden] { display: none; }
.cycle:hover { background: rgba(255, 255, 255, .1); color: var(--on-dark); }
.cycle[aria-pressed="true"] { background: rgba(255, 198, 53, .16); border-color: var(--yellow); color: var(--on-dark); }
.cycle[aria-pressed="true"]::after { content: " (Paused)"; }

/* typeahead list under the field: part number and short name only */
.suggest { margin-top: 10px; }
.suggest-list { list-style: none; background: var(--white); border-radius: 10px; overflow: hidden; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); }
.suggest-list li + li { border-top: 1px solid var(--line); }
.suggest-list a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 12px 18px; min-height: 48px;
  color: var(--ink); text-decoration: none;
}
.suggest-list a:hover { background: var(--paper); }
.suggest-name { color: var(--text-deep); font-size: 14px; }
.suggest-note { color: var(--on-dark); font-size: 14px; }

/* search results panel */
.results { max-width: 720px; margin: 30px auto 0; }
.search-summary { color: var(--on-dark); font-size: 17px; font-weight: 500; margin-bottom: 14px; overflow-wrap: anywhere; }
.search-results { color: var(--on-dark-soft); font-size: 15px; }
/* busy: a visible text cue, no motion, so reduced motion needs no special case */
.results[aria-busy="true"] .search-results { opacity: .55; }
.results[aria-busy="true"]::before { content: "Searching\2026"; display: block; color: var(--yellow); font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.part-list { list-style: none; display: grid; gap: 12px; margin-top: 6px; }
.part {
  background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 8px; padding: 14px 18px;
}
.part-id { font-size: 18px; color: var(--on-dark); overflow-wrap: anywhere; }
.part-line { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-mute); margin: 2px 0 6px; }
.part-desc { color: var(--on-dark); font-size: 15.5px; overflow-wrap: anywhere; }
.msg p { color: var(--on-dark); font-size: 16px; max-width: 62ch; }
.help-list { list-style: none; margin-top: 12px; display: grid; gap: 2px; color: var(--on-dark); }
.help-list a, .next a { display: inline-block; padding: 8px 0; color: var(--yellow); }
.next { margin-top: 18px; color: var(--on-dark); }

/* gallery, the only place scrolling is expected */
.gal { display: grid; gap: 13px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-top: 8px; list-style: none; }
.gal button {
  position: relative; padding: 0; border: 0; background: var(--navy); border-radius: 8px;
  overflow: hidden; cursor: zoom-in; aspect-ratio: 3 / 2; display: block; width: 100%;
}
.gal img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vids { display: grid; gap: 15px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-bottom: 30px; }
.vids figure { background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .15); border-radius: 8px; overflow: hidden; }
.vids video { width: 100%; display: block; aspect-ratio: 16 / 9; background: #000; }
.vids figcaption { padding: 12px 15px; font-size: 13.5px; color: var(--on-dark-soft); }
.spaced { margin-top: 20px; }

/* FAQ */
.faq { max-width: 74ch; }
.faq details { border-bottom: 1px solid rgba(255, 255, 255, .15); }
.faq summary {
  cursor: pointer; padding: 17px 0; font-family: var(--font-display); font-size: 17px; font-weight: 600;
  color: var(--on-dark); list-style: none; display: flex; align-items: center; gap: 14px; min-height: 48px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; color: var(--yellow); font-size: 21px; width: 18px; flex-shrink: 0; }
.faq details[open] summary::before { content: "\2013"; }
.faq p { padding: 0 0 19px 32px; font-size: 15.5px; color: var(--on-dark-soft); max-width: 66ch; }

/* crawlable text, present at load, visually quiet */
.deep { background: var(--paper); color: var(--text-deep); padding: 34px 26px; flex-shrink: 0; }
.deep-in { max-width: 74ch; margin: 0 auto; }
.deep h2 { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--navy); margin-bottom: 9px; }
.deep p { font-size: 14.5px; line-height: 1.66; }

/* legal and stub pages */
.doc {
  background: var(--paper); color: var(--text-deep); border-radius: 10px;
  padding: 30px 32px; max-width: 74ch; margin-top: 20px;
}
.doc h2 { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--navy); margin: 22px 0 8px; }
.doc h2:first-child { margin-top: 0; }
.doc p, .doc li { font-size: 15.5px; line-height: 1.66; margin-bottom: 10px; }
.doc ul { padding-left: 22px; }
.doc a { color: var(--navy); }
.draft {
  background: var(--yellow); color: var(--navy-deep); border-radius: 8px;
  padding: 14px 18px; max-width: 74ch; font-size: 14.5px; font-weight: 500; margin-bottom: 4px;
}
.draft strong { font-family: var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.todo { background: rgba(255, 198, 53, .35); padding: 0 4px; border-radius: 3px; font-weight: 600; }

footer {
  background: var(--navy-deep); border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 18px 26px; color: var(--on-dark-soft); font-size: 12.5px; flex-shrink: 0;
}
.foot { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; }
.foot ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.foot a { color: var(--on-dark-soft); text-decoration: none; font-size: 12.5px; padding: 11px 8px; display: inline-block; }
.foot a:hover { color: var(--on-dark); text-decoration: underline; }
.foot .r { margin-left: auto; }

/* entrance: content is in the DOM the whole time, only opacity and transform
   change. Gated on the js class so a page without script is fully visible. */
.js .fly { opacity: 0; }
.js .fly.in { opacity: 1; transition: opacity .55s ease, transform .75s var(--ease-fly); transform: none; }
/* entrance offsets exist only with script, so a page without it is never displaced */
.js .fly.l:not(.in) { transform: translateX(-54px); }
.js .fly.r:not(.in) { transform: translateX(54px); }
.js .fly.u:not(.in) { transform: translateY(30px); }
/* fail open: if the script never runs the entrance, show everything anyway */
@keyframes show { to { opacity: 1; transform: none; } }
.js .fly:not(.in) { animation: show .01s 3s forwards; }
/* leaving: the outgoing panel clears before the next page paints */
body.exit .stage .inner { opacity: 0; transform: translateX(-40px); transition: opacity .28s ease, transform .3s ease; }

/* lightbox. The close button and arrows sit above the figure with z-index,
   because they precede it in the DOM and the figure would otherwise paint on
   top and swallow every click. */
.lb {
  position: fixed; inset: 0; z-index: 300; background: rgba(10, 29, 51, .95);
  display: none; align-items: center; justify-content: center; padding: 30px;
}
.lb.on { display: flex; }
.lb figure {
  position: relative; z-index: 1; max-width: min(1040px, 88vw); max-height: 86vh;
  display: flex; flex-direction: column; gap: 13px; cursor: zoom-out;
}
.lb img { max-width: 100%; max-height: 76vh; object-fit: contain; border-radius: 8px; }
.lb figcaption { color: var(--on-dark-pill); font-size: 14px; text-align: center; }
.lb button {
  position: absolute; z-index: 2; border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .1); color: var(--on-dark); border-radius: 50%; cursor: pointer;
}
.lb .x { top: 20px; right: 22px; width: 48px; height: 48px; font-size: 22px; }
.lb .p, .lb .n { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 20px; }
.lb .p { left: 20px; }
.lb .n { right: 20px; }
.lb button:hover { background: rgba(255, 255, 255, .2); }

@media (max-width: 860px) {
  .bar { flex-wrap: wrap; gap: 4px 20px; padding: 10px 20px; }
  .nav { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .nav a { padding: 10px 12px; }
  .stage { padding: 30px 20px; justify-content: flex-start; }
  .panel { grid-template-columns: 1fr; gap: 24px; }
  .shotwrap { order: -1; }
  .shotwrap img { aspect-ratio: 3 / 2; }
  .facts { grid-template-columns: 1fr; }
  .facts div:nth-child(2) { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 13px; }
  .js .fly.l:not(.in), .js .fly.r:not(.in) { transform: translateY(28px); }
  .showbtn { width: 100%; justify-content: center; }
  .modes { flex-wrap: wrap; }
  .mode { flex: 1; padding: 11px 16px; }
  .field { flex-wrap: wrap; padding: 8px; }
  .field input { flex-basis: 100%; padding: 12px; }
  .field button { width: 100%; }
  .foot .r { margin-left: 0; }
  .doc { padding: 22px 20px; }
}

@media (forced-colors: active) {
  .mode { border: 2px solid ButtonText; }
  .mode-input:checked + .mode { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .band { forced-color-adjust: none; }
  .nav a[aria-current="page"] { text-decoration: underline; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
  .opt, .opt .go { transition: none !important; }
  .opt:hover, .opt:focus-within { transform: none !important; }
  .opt-pic img { transition: none !important; }
  .opt:hover .opt-pic img, .opt:focus-within .opt-pic img { transform: none !important; }
  .fly, .fly.l, .fly.r, .fly.u { opacity: 1 !important; transform: none !important; transition: none !important; }
  body.exit .stage .inner { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mode, .home-h .hl { transition: none !important; }
  .panelwrap, .showbtn, .showbtn svg { transition: none !important; }
  .showbtn:hover { transform: none !important; }
  .opt .go { transform: none !important; }
  .mode.pulse {
    background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .22);
    color: var(--on-dark-pill); transform: none;
  }
}

/* Track A Shipment form: visible labels above each field, the button inside the last field */
.track-form { max-width: 720px; margin: 0 auto; display: grid; gap: 14px; }
.track-label { display: block; color: var(--on-dark); font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.track-hint { color: var(--on-dark-mute); font-size: 13.5px; margin-top: 6px; }
.track-carrier { background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .15); border-radius: 8px; padding: 14px 18px; }
.track-carrier .part-id { font-family: var(--font-display); }