/* HAKEM TRANSPORT — strap by strap.
   Mobile first: the base rules are the phone; 768 / 1024 / 1440 add room. Every colour is a token
   in :root. Motion lives only inside the prefers-reduced-motion: no-preference block at the end,
   and the page reads complete without it. */

@font-face {
  font-family: "League Gothic";
  src: url(fonts/league-gothic-latin.woff2) format("woff2");
  font-weight: 400;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Brygada 1918";
  src: url(fonts/brygada-1918-latin.woff2) format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Brygada 1918";
  src: url(fonts/brygada-1918-italic-latin.woff2) format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --stp-ground: #0F1014;
  --stp-panel: #181A1F;
  --stp-ink: #EDEEF1;
  --stp-muted: #9A9EA8;
  --stp-yellow: #E6E33C;
  --stp-red: #E2574C;

  --stp-bar: #121318;
  --stp-tile: #23262D;
  --stp-tile-hi: #2D3139;
  --stp-input: #101116;
  --stp-steel: #474C56;
  --stp-steel-hi: #5B606B;
  --stp-steel-lo: #2A2E35;
  --stp-wood: #6E5E47;
  --stp-blocks: #4E525B;
  --stp-cartons: #7E838D;
  --stp-cloth: #2A2D34;
  --stp-pleat: #353942;
  --stp-yellow-deep: #B9B62C;
  --stp-yellow-ink: #0F1014;
  --stp-edge: rgba(237, 238, 241, .12);
  --stp-edge-strong: rgba(237, 238, 241, .34);
  --stp-dawn: rgba(70, 92, 132, .22);
  --stp-scrim-strong: rgba(15, 16, 20, .9);
  --stp-scrim-mid: rgba(15, 16, 20, .62);
  --stp-scrim-soft: rgba(15, 16, 20, .28);
  --stp-scrim-clear: rgba(15, 16, 20, 0);
  --stp-rig-bg: #0F1014;
  --stp-shadow: rgba(0, 0, 0, .75);
  --stp-red-wash: rgba(226, 87, 76, .12);
  --stp-yellow-wash: rgba(230, 227, 60, .1);

  --stp-display: "League Gothic", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --stp-text: "Brygada 1918", Georgia, "Times New Roman", serif;
  --stp-gutter: clamp(18px, 5vw, 72px);
  --stp-wide: 1320px;
  --stp-measure: 64ch;
  --stp-mark: 52px;
}

/* ---- reset, kept to what this site needs ---- */
*, *::before, *::after { box-sizing: border-box; }
:where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol, fieldset) { margin: 0; }
:where(fieldset) { padding: 0; border: 0; min-width: 0; }
:where(ul.stp-plain, ol.stp-plain) { list-style: none; padding: 0; }
:where(img, svg, picture) { display: block; max-width: 100%; }
:where(input, button, select, textarea) { font: inherit; color: inherit; }
:where(a) { color: inherit; }

html { background: var(--stp-ground); overflow-x: clip; }
body {
  min-height: 100vh;
  font-family: var(--stp-text);
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--stp-ink);
  background-color: var(--stp-ground);
  background-image: radial-gradient(130% 60% at 22% -8%, var(--stp-dawn) 0%, var(--stp-scrim-clear) 62%), url(tex/grain.png);
  background-size: 100% 1400px, 256px 256px;
  background-repeat: no-repeat, repeat;
  font-synthesis-weight: none;
  overflow-x: clip;
}

h1, h2, .stp-display {
  font-family: var(--stp-display);
  font-weight: 400;
  font-synthesis: none;
  text-transform: uppercase;
  letter-spacing: .012em;
  line-height: .92;
}
h2 { font-size: clamp(2.7rem, 1.9rem + 3.2vw, 4.6rem); text-wrap: balance; }
h3 {
  font-family: var(--stp-text);
  font-weight: 700;
  font-size: 1.28rem;
  line-height: 1.25;
}
p + p { margin-top: .85em; }
strong { font-weight: 700; }
a { text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--stp-yellow); }
:focus-visible { outline: 3px solid var(--stp-yellow); outline-offset: 3px; }

.stp-jump {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 60;
  padding: 12px 18px;
  background: var(--stp-yellow);
  color: var(--stp-yellow-ink);
  font-weight: 700;
  text-decoration: none;
}
.stp-jump:focus { top: 12px; }

[hidden] { display: none !important; }
.stp-hide {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ============ masthead: the rule is a strap, the mark stands on it ============ */
.stp-mast {
  position: relative;
  z-index: 30;
  background: var(--stp-bar);
}
.stp-mast::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--stp-yellow) 0 9px, var(--stp-yellow-deep) 9px 10px);
  z-index: 1;
}
.stp-mast-in {
  max-width: var(--stp-wide);
  margin: 0 auto;
  min-height: 60px;
  padding: 0 var(--stp-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.stp-word {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  text-decoration: none;
}
.stp-word svg { width: auto; height: 18px; }
.stp-word:hover { color: inherit; }
.stp-w-a { fill: var(--stp-ink); }
.stp-w-b { fill: var(--stp-yellow); }
.stp-word:hover svg { filter: brightness(1.08); }
.stp-mast-mark {
  position: absolute;
  left: 54%;
  bottom: calc(var(--stp-mark) * -.165);
  width: var(--stp-mark);
  height: var(--stp-mark);
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
}

/* ---- the pages panel: a trailer deck whose bays are the pages ---- */
.stp-bays > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 16px 0 14px;
  border-radius: 4px;
  background: var(--stp-tile);
  box-shadow: inset 0 -3px 0 var(--stp-yellow);
  font-family: var(--stp-display);
  font-size: 1.32rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}
.stp-bays > summary::-webkit-details-marker { display: none; }
.stp-bays > summary:hover { background: var(--stp-tile-hi); }
.stp-bays[open] > summary { background: var(--stp-yellow); color: var(--stp-yellow-ink); box-shadow: none; }
.stp-bays-glyph { display: block; width: 26px; height: 16px; }
.stp-bays-glyph rect { fill: currentColor; }
.stp-bays-panel {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 2px);
  z-index: 2;
  padding: 26px var(--stp-gutter) 34px;
  background: var(--stp-panel);
  box-shadow: 0 28px 48px -18px var(--stp-shadow);
}
.stp-bayline {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  display: grid;
  grid-template-rows: 14px auto 12px;
  padding: 0 14px 26px;
}
.stp-deck-head, .stp-deck-doors {
  display: block;
  background: var(--stp-steel);
  border-radius: 2px;
}
.stp-deck-bays {
  list-style: none;
  margin: 0;
  padding: 10px 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: var(--stp-steel-lo);
}
.stp-deck-bays li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.stp-bay {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  min-height: 74px;
  height: 100%;
  padding: 12px 13px 11px;
  border-radius: 3px;
  background: var(--stp-tile);
  box-shadow: inset 0 3px 0 var(--stp-tile-hi);
  color: var(--stp-ink);
  text-decoration: none;
}
.stp-bay-name {
  font-family: var(--stp-display);
  font-size: 1.42rem;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.stp-bay-what {
  font-size: .86rem;
  line-height: 1.3;
  color: var(--stp-muted);
}
.stp-bay:hover { background: var(--stp-tile-hi); box-shadow: inset 0 3px 0 var(--stp-yellow); color: var(--stp-ink); }
.stp-bay[aria-current="page"] { background: var(--stp-yellow); color: var(--stp-yellow-ink); box-shadow: none; }
.stp-bay[aria-current="page"] .stp-bay-what { color: var(--stp-yellow-ink); }
.stp-bay:focus-visible { outline-color: var(--stp-ink); }
.stp-deck-axles {
  position: absolute;
  right: -2px;
  bottom: 30px;
  display: grid;
  gap: 6px;
}
.stp-deck-axles i, .stp-deck-axles::before {
  display: block;
  width: 8px; height: 26px;
  border-radius: 3px;
  background: var(--stp-steel-hi);
}
.stp-deck-axles.is-left { left: -2px; right: auto; }

/* ============ buttons ============ */
.stp-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.stp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 20px;
  border: 0;
  border-radius: 4px;
  background: var(--stp-yellow);
  color: var(--stp-yellow-ink);
  font-family: var(--stp-text);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
}
.stp-btn svg { width: 18px; height: 18px; flex: none; }
.stp-btn:hover { color: var(--stp-yellow-ink); background: var(--stp-ink); }
.stp-btn-quiet {
  background: var(--stp-tile);
  color: var(--stp-ink);
  box-shadow: inset 0 -3px 0 var(--stp-yellow);
}
.stp-btn-quiet:hover { background: var(--stp-tile-hi); color: var(--stp-ink); }

/* ============ the opening band ============ */
.stp-open {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(560px, 84vh, 880px);
  overflow: clip;
}
.stp-open > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 22% 50%;
  z-index: -2;
}
.stp-open-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, var(--stp-ground) 0%, var(--stp-scrim-mid) 30%, var(--stp-scrim-soft) 62%, var(--stp-scrim-mid) 100%);
}
.stp-open-copy {
  width: 100%;
  max-width: var(--stp-wide);
  margin: 0 auto;
  padding: 120px var(--stp-gutter) 64px;
}
.stp-open-where {
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stp-yellow);
}
.stp-open h1 {
  margin-top: 14px;
  font-size: clamp(3.8rem, 1.4rem + 10vw, 9.6rem);
  line-height: .86;
  max-width: 9ch;
}
.stp-open h1 .stp-open-sub {
  display: block;
  margin-top: .22em;
  font-size: .38em;
  letter-spacing: .05em;
  line-height: 1.05;
  color: var(--stp-yellow);
  max-width: 16ch;
}
.stp-open-lede {
  margin-top: 22px;
  max-width: 31rem;
  font-size: 1.12rem;
  line-height: 1.55;
}

/* ============ the run: a pinned trailer, the stages pass under it ============ */
.stp-run { position: relative; }
.stp-rig {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 8px 0 6px;
  background: var(--stp-rig-bg);
  box-shadow: 0 14px 26px -16px var(--stp-shadow);
}
.stp-rig-svg { width: 100%; height: auto; max-height: 27vh; margin: 0 auto; }
.stp-rig-now {
  max-width: var(--stp-wide);
  margin: 2px auto 0;
  padding: 0 var(--stp-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  font-size: .86rem;
  line-height: 1.35;
  color: var(--stp-muted);
}
.stp-rig-step {
  font-family: var(--stp-display);
  font-size: 1.2rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--stp-yellow);
}

.stp-r-ground { stroke: var(--stp-steel); stroke-width: 3; }
.stp-r-chassis, .stp-r-leg { fill: var(--stp-steel-lo); }
.stp-r-guard { fill: none; stroke: var(--stp-steel); stroke-width: 5; }
.stp-r-tyre { fill: var(--stp-input); stroke: var(--stp-steel-lo); stroke-width: 4; }
.stp-r-hub { fill: var(--stp-steel-hi); }
.stp-r-lamp { fill: var(--stp-red); }
.stp-r-rail, .stp-r-head, .stp-r-post { fill: var(--stp-steel); }
.stp-r-head { fill: var(--stp-steel-hi); }
.stp-r-deck { fill: var(--stp-steel-lo); }
.stp-r-stanchion { fill: var(--stp-steel-lo); }
.stp-r-ghost { fill: none; stroke: var(--stp-muted); stroke-width: 2; stroke-dasharray: 8 7; opacity: 0; }
.stp-r-blk { fill: var(--stp-blocks); }
.stp-r-ctn { fill: var(--stp-cartons); }
.stp-r-band { stroke: var(--stp-ground); stroke-width: 2; opacity: .55; }
.stp-r-film { stroke: var(--stp-ink); stroke-width: 3; opacity: .16; }
.stp-r-pallet { fill: var(--stp-wood); }
.stp-r-gap { fill: var(--stp-steel-lo); }
.stp-r-web, .stp-r-cap { fill: var(--stp-yellow); }
.stp-r-buckle { fill: var(--stp-steel-hi); }
.stp-r-arm { fill: var(--stp-ink); }
.stp-r-forces { opacity: 0; }
.stp-r-shaft { fill: none; stroke: var(--stp-red); stroke-width: 7; stroke-linecap: butt; }
.stp-r-tip, .stp-r-dot { fill: var(--stp-red); }
.stp-r-ring { fill: none; stroke: var(--stp-red); stroke-width: 6; }
.stp-r-label {
  font-family: var(--stp-display);
  font-size: 21px;
  letter-spacing: .06em;
  fill: var(--stp-red);
}
.stp-r-label-frame { fill: var(--stp-red); opacity: 0; }
@media (max-width: 760px) { .stp-r-label { display: none; } }
.stp-r-cloth { fill: var(--stp-cloth); }
.stp-r-pleat { stroke: var(--stp-pleat); stroke-width: 3; }
.stp-r-buckle-strap { fill: var(--stp-steel-hi); }
.stp-r-curtain {
  transform-box: view-box;
  transform-origin: 1434px 0;
  transform: scaleX(.075);
}
.stp-r-frame { stroke: var(--stp-red); stroke-width: 6; opacity: 0; }
.stp-r-strap, .stp-r-unit, .stp-r-fwd, .stp-r-rear, .stp-r-side, .stp-r-ratchet { transform-box: view-box; }
.stp-r-side { transform-origin: 793px 58px; }

/* ============ stages ============ */
.stp-stage {
  position: relative;
  max-width: var(--stp-wide);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 128px) var(--stp-gutter) clamp(28px, 4vw, 56px);
}
.stp-stage-head { display: grid; gap: 14px; margin-bottom: 26px; max-width: 58rem; }
.stp-state {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--stp-muted);
}
.stp-tag {
  display: inline-block;
  width: 30px;
  height: 9px;
  border-radius: 2px;
  background: var(--stp-yellow);
  box-shadow: 0 0 0 3px var(--stp-yellow-wash);
}
.stp-stage-body { max-width: var(--stp-measure); }
.stp-stage-body p { font-size: 1.0625rem; }
.stp-split { display: grid; gap: 30px; }
.stp-aside {
  padding: 22px 22px 20px;
  border-radius: 6px;
  background: var(--stp-panel);
}
.stp-aside h3 { margin-bottom: 12px; }
.stp-ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.stp-ticks li { position: relative; padding-left: 30px; }
.stp-ticks li::before {
  content: "";
  position: absolute;
  left: 2px; top: .52em;
  width: 16px; height: 9px;
  border-left: 3px solid var(--stp-yellow);
  border-bottom: 3px solid var(--stp-yellow);
  transform: rotate(-45deg);
}
.stp-statement {
  font-family: var(--stp-display);
  text-transform: uppercase;
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.2rem);
  line-height: .98;
  letter-spacing: .01em;
  max-width: 18ch;
  margin: 8px 0 26px;
  color: var(--stp-yellow);
}

/* pallet footprints drawn to scale (an information drawing, not decoration) */
.stp-feet { display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-end; margin-top: 30px; }
.stp-foot-pallet { display: grid; gap: 8px; }
.stp-foot-pallet span.stp-pal {
  display: block;
  border-radius: 3px;
  background:
    linear-gradient(90deg, var(--stp-wood) 0 12%, var(--stp-steel-lo) 12% 44%, var(--stp-wood) 44% 56%, var(--stp-steel-lo) 56% 88%, var(--stp-wood) 88%);
}
.stp-pal-uk { width: 150px; height: 125px; }
.stp-pal-eu { width: 150px; height: 100px; }
.stp-feet-box { display: grid; gap: 18px; }
.stp-feet-box .stp-feet { margin-top: 0; }
.stp-feet-box figcaption, .stp-fifth figcaption { font-size: .95rem; color: var(--stp-muted); line-height: 1.5; }
.stp-fifth { display: grid; gap: 16px; }
.stp-fifth-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.stp-fifth-row i { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--stp-tile-hi); }
.stp-fifth-row i.is-held { background: var(--stp-yellow); }
.stp-fifth figcaption b { color: var(--stp-ink); font-weight: 700; }
.stp-foot-pallet b { font-family: var(--stp-display); font-weight: 400; font-size: 1.3rem; letter-spacing: .05em; text-transform: uppercase; }
.stp-foot-pallet small { color: var(--stp-muted); font-size: .9rem; }

/* comparison of bodies */
.stp-bodies { display: grid; gap: 14px; margin-top: 28px; }
.stp-body {
  padding: 20px 22px;
  border-radius: 6px;
  background: var(--stp-panel);
  box-shadow: inset 4px 0 0 var(--stp-steel-hi);
}
.stp-body.is-standard { box-shadow: inset 4px 0 0 var(--stp-red); }
.stp-body.is-xl { box-shadow: inset 4px 0 0 var(--stp-yellow); }
.stp-body h3 { margin-bottom: 8px; }

/* ============ full-bleed art bands, type set over the quiet part ============ */
.stp-band {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(420px, 64vh, 760px);
  margin: clamp(30px, 5vw, 60px) 0;
  overflow: clip;
}
.stp-band > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.stp-band-scrim { position: absolute; inset: 0; z-index: -1; }
.stp-band-copy {
  width: 100%;
  max-width: var(--stp-wide);
  margin: 0 auto;
  padding: 48px var(--stp-gutter);
}
.stp-band-text, .stp-band-line, .stp-band-note { display: block; }
.stp-band-line {
  font-family: var(--stp-display);
  text-transform: uppercase;
  font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4.8rem);
  line-height: .95;
  letter-spacing: .012em;
  max-width: 15ch;
}
.stp-band-note { margin-top: 14px; max-width: 30rem; font-size: 1.02rem; }

.stp-band--strap { align-items: center; }
.stp-band--strap > img { object-position: 18% 50%; }
.stp-band--strap .stp-band-scrim {
  background: linear-gradient(180deg, var(--stp-scrim-mid) 0%, var(--stp-scrim-strong) 46%, var(--stp-scrim-strong) 100%);
}
.stp-band--strap .stp-band-copy { display: flex; justify-content: flex-end; }
.stp-band--strap .stp-band-text { max-width: 30rem; }

.stp-band--sky { align-items: start; }
.stp-band--sky .stp-band-line { max-width: 20ch; }
.stp-band--sky > img { object-position: 40% 100%; }
.stp-band--sky .stp-band-scrim {
  background: linear-gradient(180deg, var(--stp-scrim-mid) 0%, var(--stp-scrim-soft) 38%, var(--stp-scrim-clear) 60%, var(--stp-scrim-soft) 100%);
}

.stp-band--yard { align-items: start; }
.stp-band--yard > img { object-position: 60% 80%; }
.stp-band--yard .stp-band-scrim {
  background: linear-gradient(180deg, var(--stp-scrim-strong) 0%, var(--stp-scrim-strong) 30%, var(--stp-scrim-mid) 48%, var(--stp-scrim-clear) 66%, var(--stp-scrim-soft) 100%);
}
.stp-band--yard .stp-band-copy { display: flex; justify-content: flex-end; }

.stp-band--night { align-items: start; }
.stp-band--night > img { object-position: 60% 32%; }
.stp-band--night .stp-band-scrim {
  background: linear-gradient(180deg, var(--stp-scrim-mid) 0%, var(--stp-scrim-soft) 40%, var(--stp-scrim-clear) 62%, var(--stp-scrim-soft) 100%);
}
.stp-band--night .stp-band-line { max-width: 17ch; }
.stp-form-lead { margin-top: 30px; }
.stp-form-intro { margin-top: 8px; max-width: var(--stp-measure); }

.stp-band--apron { align-items: end; }
.stp-band--apron > img { object-position: 64% 40%; }
.stp-band--apron .stp-band-scrim {
  background: linear-gradient(0deg, var(--stp-scrim-strong) 0%, var(--stp-scrim-strong) 30%, var(--stp-scrim-mid) 56%, var(--stp-scrim-clear) 80%);
}

.stp-band--mist { align-items: start; }
.stp-band--mist > img { object-position: 30% 40%; }
.stp-band--mist .stp-band-scrim {
  background: linear-gradient(0deg, var(--stp-ground) 0%, var(--stp-scrim-clear) 30%);
}
.stp-band--mist .stp-band-copy { display: flex; justify-content: flex-end; }
.stp-band--mist .stp-band-line,
.stp-band--mist .stp-band-note { color: var(--stp-yellow-ink); }

.stp-band--cab { align-items: start; }
.stp-band--cab > img { object-position: 50% 42%; }
.stp-band--cab .stp-band-scrim {
  background: linear-gradient(180deg, var(--stp-scrim-mid) 0%, var(--stp-scrim-mid) 30%, var(--stp-scrim-soft) 50%, var(--stp-scrim-clear) 66%, var(--stp-scrim-soft) 100%);
}

/* ============ the restraint calculator ============ */
.stp-tool {
  margin-top: 34px;
  display: grid;
  align-items: start;
  gap: 26px;
  padding: clamp(18px, 3vw, 34px);
  border-radius: 8px;
  background: var(--stp-panel);
  box-shadow: inset 0 4px 0 var(--stp-yellow);
}
.stp-tool-head h3 { font-size: 1.42rem; }
.stp-tool-head p { margin-top: 6px; color: var(--stp-muted); font-size: .98rem; }
.stp-inputs { display: grid; gap: 18px; align-content: start; }
.stp-entry { display: grid; gap: 6px; }
.stp-entry > label, .stp-seg > legend, .stp-q > label, .stp-q > legend {
  font-weight: 600;
  font-size: .98rem;
  line-height: 1.3;
}
.stp-entry small, .stp-q small { color: var(--stp-muted); font-size: .88rem; line-height: 1.4; }
.stp-in, .stp-q input:not([type="radio"]):not([type="checkbox"]), .stp-q textarea, .stp-q select {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 0;
  border-radius: 4px;
  background: var(--stp-input);
  box-shadow: inset 0 -2px 0 var(--stp-edge-strong), inset 0 0 0 1px var(--stp-edge);
  font-size: 1.04rem;
}
.stp-in:focus, .stp-q input:focus, .stp-q textarea:focus, .stp-q select:focus {
  outline: none;
  box-shadow: inset 0 -3px 0 var(--stp-yellow), inset 0 0 0 1px var(--stp-edge-strong), 0 0 0 3px var(--stp-yellow-wash);
}
.stp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stp-seg { display: grid; gap: 8px; }
.stp-seg-row { display: flex; flex-wrap: wrap; gap: 8px; }
.stp-seg label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 14px 8px 12px;
  border-radius: 4px;
  background: var(--stp-tile);
  cursor: pointer;
  font-size: .98rem;
}
.stp-seg label:hover { background: var(--stp-tile-hi); }
.stp-seg label:has(input:checked) { background: var(--stp-yellow); color: var(--stp-yellow-ink); font-weight: 600; }
.stp-dot, .stp-seg input[type="radio"], .stp-q input[type="radio"], .stp-q input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: 50%;
  background: var(--stp-input);
  box-shadow: inset 0 0 0 2px var(--stp-edge-strong);
  cursor: pointer;
}
.stp-seg input[type="radio"]:checked { background: var(--stp-yellow-ink); box-shadow: inset 0 0 0 5px var(--stp-yellow-ink), inset 0 0 0 9px var(--stp-yellow); }
.stp-seg input:focus-visible, .stp-q input[type="radio"]:focus-visible, .stp-q input[type="checkbox"]:focus-visible { outline: 3px solid var(--stp-ink); outline-offset: 3px; }

.stp-out { display: grid; gap: 18px; align-content: start; }
.stp-out.is-stale .stp-dirs, .stp-out.is-stale .stp-straps { opacity: .45; }
.stp-out-weight { font-size: 1.06rem; }
.stp-out-weight strong { color: var(--stp-yellow); }
.stp-dirs { display: grid; gap: 16px; }
.stp-dir { display: grid; gap: 6px; }
.stp-dir-name { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; }
.stp-dir-name span:last-child { font-family: var(--stp-display); font-weight: 400; font-size: 1.36rem; letter-spacing: .03em; color: var(--stp-red); }
.stp-dir-name span.is-zero { color: var(--stp-yellow); }
.stp-meter {
  position: relative;
  height: 16px;
  border-radius: 3px;
  background: var(--stp-input);
  overflow: clip;
}
.stp-meter i {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--k, 0));
}
.stp-meter .stp-need { background: var(--stp-red); }
.stp-k100 { --k: 1; }
.stp-k50 { --k: .5; }
.stp-k20 { --k: .2; }
.stp-meter .stp-held { background: var(--stp-yellow); }
.stp-dir-figs { font-size: .9rem; color: var(--stp-muted); line-height: 1.4; }
.stp-straps {
  padding: 16px 18px;
  border-radius: 6px;
  background: var(--stp-tile);
}
.stp-straps p + p { margin-top: 6px; }
.stp-straps strong { font-family: var(--stp-display); font-weight: 400; font-size: 1.6rem; letter-spacing: .03em; color: var(--stp-yellow); }
.stp-warn {
  padding: 14px 18px;
  border-radius: 6px;
  background: var(--stp-red-wash);
  box-shadow: inset 4px 0 0 var(--stp-red);
  font-size: .98rem;
}
.stp-basis { font-size: .9rem; color: var(--stp-muted); }
.stp-basis ul { margin: 8px 0 0; padding-left: 1.1em; display: grid; gap: 4px; }
.stp-tool-go { justify-self: start; }

/* ============ inner pages ============ */
.stp-page-head {
  max-width: var(--stp-wide);
  margin: 0 auto;
  padding: clamp(84px, 12vw, 150px) var(--stp-gutter) 10px;
}
.stp-page-head h1 { font-size: clamp(3.2rem, 1.6rem + 6.4vw, 7.4rem); line-height: .88; max-width: 13ch; }
.stp-page-head .stp-lede { margin-top: 22px; max-width: 40rem; font-size: 1.16rem; line-height: 1.55; }
/* inner-page opening: copy on one side, the page's own drawing or picture on the other */
.stp-page-head--split { display: grid; gap: 30px; }
.stp-head-copy { min-width: 0; }
.stp-head-fig { margin: 0; min-width: 0; max-width: 640px; }
.stp-head-fig > figcaption { margin-top: 12px; max-width: 34rem; font-size: .92rem; line-height: 1.5; color: var(--stp-muted); }
.stp-dw { width: 100%; height: auto; }
.stp-head-art img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 30px 60px -34px var(--stp-shadow); }

/* drawing vocabulary */
.stp-dw-ground { stroke: var(--stp-steel-hi); stroke-width: 2; }
.stp-dw-road { fill: var(--stp-steel-lo); }
.stp-dw-body { fill: var(--stp-tile-hi); }
.stp-dw-cab { fill: var(--stp-steel-hi); }
.stp-dw-glass { fill: var(--stp-ground); }
.stp-dw-chassis { fill: var(--stp-steel-lo); }
.stp-dw-tail { fill: var(--stp-steel); }
.stp-dw-tyre { fill: var(--stp-input); stroke: var(--stp-steel); stroke-width: 3; }
.stp-dw-hub { fill: var(--stp-steel-hi); }
.stp-dw-deck { fill: var(--stp-steel); }
.stp-dw-rail { fill: none; stroke: var(--stp-steel-hi); stroke-width: 3; }
.stp-dw-underside { stroke: var(--stp-red); stroke-width: 3; }
.stp-dw-signface { fill: var(--stp-ink); }
.stp-dw-signring { fill: none; stroke: var(--stp-red); stroke-width: 6; }
.stp-dw-signmark { fill: var(--stp-ground); }
.stp-dw-notice { fill: var(--stp-yellow); }
.stp-dw-notice-big, .stp-dw-notice-small { fill: var(--stp-yellow-ink); font-family: var(--stp-display); }
.stp-dw-notice-big { font-size: 46px; letter-spacing: .02em; }
.stp-dw-notice-small { font-size: 24px; letter-spacing: .08em; }
.stp-dw-noticeline { stroke: var(--stp-yellow); stroke-width: 2.5; stroke-dasharray: 10 7; }
.stp-dw-dim { fill: none; stroke: var(--stp-yellow); stroke-width: 2; }
.stp-dw-dim.is-bridge { stroke: var(--stp-red); }
.stp-dw-name, .stp-dw-what, .stp-dw-dimtext, .stp-dw-dimlabel { font-family: var(--stp-display); letter-spacing: .05em; }
.stp-dw-name { fill: var(--stp-ink); font-size: 26px; }
.stp-dw-what { fill: var(--stp-muted); font-size: 22px; }
.stp-dw-dimtext { fill: var(--stp-ink); font-size: 22px; }
.stp-dw-dimtext.is-bridge { fill: var(--stp-red); }
.stp-dw-dimlabel { fill: var(--stp-yellow); font-size: 22px; }

/* the Lorry Control dial */
.stp-clock { display: grid; gap: 14px; justify-items: start; }
.stp-clock-dial { width: min(100%, 340px); }
.stp-dial-track { fill: none; stroke: var(--stp-tile); stroke-width: 40; }
.stp-dial-arc { fill: none; stroke: var(--stp-red); stroke-width: 40; }
.stp-dial-tick { stroke: var(--stp-steel-hi); stroke-width: 2; }
.stp-dial-tick.is-major { stroke: var(--stp-ink); stroke-width: 3; }
.stp-dial-hour, .stp-dial-mark, .stp-dial-day, .stp-dial-now { font-family: var(--stp-display); letter-spacing: .05em; }
.stp-dial-hour { fill: var(--stp-muted); font-size: 24px; }
.stp-dial-mark { fill: var(--stp-ink); font-size: 24px; }
.stp-dial-day { fill: var(--stp-ink); font-size: 40px; }
.stp-dial-now { fill: var(--stp-yellow); font-size: 30px; }
.stp-dial-hand path { stroke: var(--stp-yellow); stroke-width: 5; stroke-linecap: round; }
.stp-dial-hand circle { fill: var(--stp-yellow); }
.stp-dial-hand circle + circle { fill: var(--stp-yellow-ink); }
.stp-clock-say { margin: 0; max-width: 30rem; }
.stp-clock-now { font-family: var(--stp-display); font-size: 1.7rem; line-height: 1.05; letter-spacing: .03em; text-transform: uppercase; }
.stp-clock-now.is-on { color: var(--stp-red); }
.stp-clock-now.is-off { color: var(--stp-yellow); }
.stp-clock-line { margin-top: 6px; font-size: .98rem; color: var(--stp-muted); }
.stp-clock-days { display: flex; flex-wrap: wrap; gap: 6px; }
.stp-clock-days button {
  min-width: 46px; min-height: 44px; padding: 0 10px;
  border: 0; border-radius: 4px; background: var(--stp-tile); color: var(--stp-ink);
  font-family: var(--stp-display); font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
.stp-clock-days button:hover { background: var(--stp-tile-hi); }
.stp-clock-days button[aria-pressed="true"] { background: var(--stp-yellow); color: var(--stp-yellow-ink); }
.stp-clock-days button.is-today { box-shadow: inset 0 -3px 0 var(--stp-yellow); }
.stp-clock-days button.is-today[aria-pressed="true"] { box-shadow: none; }

.stp-sect {
  max-width: var(--stp-wide);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 84px) var(--stp-gutter) 0;
}
.stp-sect h2 { margin-bottom: 22px; }
.stp-sect-body { max-width: var(--stp-measure); }
.stp-sect-body > h3 { margin: 28px 0 8px; }
.stp-sect-body ul { padding-left: 1.15em; display: grid; gap: 6px; margin: 12px 0; }

.stp-loads { display: grid; gap: 12px; margin-top: 8px; }
.stp-load {
  display: grid;
  gap: 8px;
  padding: 20px 22px;
  border-radius: 6px;
  background: var(--stp-panel);
}
.stp-load h3 { font-family: var(--stp-display); font-weight: 400; font-size: 1.85rem; letter-spacing: .03em; text-transform: uppercase; line-height: 1; }
.stp-load p { color: var(--stp-ink); }
.stp-load .stp-needs { color: var(--stp-muted); font-size: .96rem; }
.stp-load .stp-needs b { color: var(--stp-yellow); font-weight: 600; }

.stp-week { margin-top: 26px; display: grid; gap: 6px; }
.stp-week-row { display: grid; grid-template-columns: 3.2rem 1fr; gap: 10px; align-items: center; }
.stp-week-row > b { font-family: var(--stp-display); font-weight: 400; font-size: 1.2rem; letter-spacing: .05em; }
.stp-week-day {
  position: relative;
  height: 22px;
  border-radius: 3px;
  background: var(--stp-tile);
  overflow: clip;
}
.stp-week-day i {
  position: absolute;
  top: 0; bottom: 0;
  background: var(--stp-red);
}
.stp-week-day .stp-h0-7 { left: 0; width: 29.1667%; }
.stp-week-day .stp-h21-24 { left: 87.5%; width: 12.5%; }
.stp-week-day .stp-h13-24 { left: 54.1667%; width: 45.8333%; }
.stp-week-day .stp-h0-24 { left: 0; width: 100%; }
.stp-week-scale em { font-style: normal; }
.stp-week-scale { display: grid; grid-template-columns: 3.2rem 1fr; gap: 10px; font-size: .8rem; color: var(--stp-muted); }
.stp-week-scale span { display: flex; justify-content: space-between; }
.stp-week-key { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 10px; font-size: .92rem; color: var(--stp-muted); }
.stp-week-key i { display: inline-block; width: 22px; height: 10px; border-radius: 2px; margin-right: 8px; vertical-align: middle; background: var(--stp-red); }
.stp-week-key i.is-open { background: var(--stp-tile); }

.stp-rules { width: 100%; margin: 6px 0 22px; border-collapse: separate; border-spacing: 0 6px; font-size: 1rem; }
.stp-rules caption { caption-side: bottom; text-align: left; padding-top: 6px; color: var(--stp-muted); font-size: .9rem; }
.stp-rules th, .stp-rules td { padding: 10px 12px; text-align: left; background: var(--stp-panel); }
.stp-rules thead th { background: transparent; font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--stp-muted); padding-top: 0; padding-bottom: 2px; }
.stp-rules tbody th { font-weight: 600; border-radius: 4px 0 0 4px; }
.stp-rules tbody td:last-child { border-radius: 0 4px 4px 0; }
.stp-rules td { font-family: var(--stp-display); font-size: 1.25rem; letter-spacing: .05em; text-transform: uppercase; color: var(--stp-yellow); }
.stp-rules td.is-no { color: var(--stp-muted); }
/* under 640px the four columns do not fit: one block per vehicle class, each answer labelled */
@media (max-width: 639px) {
  .stp-rules, .stp-rules tbody, .stp-rules tr, .stp-rules th, .stp-rules td { display: block; }
  .stp-rules { margin-bottom: 18px; }
  .stp-rules caption { display: block; padding: 0 0 10px; }
  .stp-rules thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stp-rules tbody tr { margin-top: 8px; padding: 12px 14px 8px; border-radius: 4px; background: var(--stp-panel); }
  .stp-rules tbody th { padding: 0 0 6px; background: transparent; border-radius: 0; font-size: 1.04rem; }
  .stp-rules td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 6px 0; background: transparent; border-radius: 0;
    box-shadow: inset 0 1px 0 var(--stp-edge);
  }
  .stp-rules tbody td:last-child { border-radius: 0; }
  .stp-rules td::before {
    content: attr(data-label);
    font-family: var(--stp-text); font-size: .95rem; letter-spacing: 0; text-transform: none; color: var(--stp-ink);
  }
}
.stp-links { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.stp-links a { display: inline-flex; min-height: 44px; align-items: center; }

/* securing page: three people, three forces, a strap's label */
.stp-trio { display: grid; gap: 12px; }
.stp-trio-cell { padding: 20px 22px; border-radius: 6px; background: var(--stp-panel); box-shadow: inset 0 4px 0 var(--stp-yellow); }
.stp-trio-cell h3 { font-family: var(--stp-display); font-weight: 400; font-size: 1.9rem; letter-spacing: .03em; text-transform: uppercase; line-height: 1; margin-bottom: 8px; }
.stp-trio-note { margin-top: 18px; max-width: var(--stp-measure); color: var(--stp-muted); }
.stp-forces { display: grid; gap: 14px; }
.stp-forces-bars { display: grid; gap: 12px; }
.stp-forces-bars p { display: grid; grid-template-columns: 5.4rem 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; margin: 0; }
.stp-forces-bars span { grid-row: 1 / 3; font-family: var(--stp-display); font-size: 1.3rem; letter-spacing: .05em; text-transform: uppercase; }
.stp-forces-bars b { font-weight: 600; font-size: .86rem; color: var(--stp-muted); }
.stp-fb { display: block; height: 14px; border-radius: 3px; background: var(--stp-red); }
.stp-fb-1 { width: 100%; }
.stp-fb-h { width: 50%; }
.stp-forces figcaption, .stp-label figcaption { font-size: .92rem; color: var(--stp-muted); }
.stp-pair-cols { display: grid; gap: 26px; }
.stp-pair-cols h3 { margin: 0 0 8px; }
.stp-pair-cols h3 + p + h3, .stp-pair-cols p + h3 { margin-top: 20px; }
.stp-label { display: grid; gap: 14px; }
.stp-label-tag {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
  align-items: baseline;
  padding: 16px 18px;
  border-radius: 4px;
  background: var(--stp-yellow);
  color: var(--stp-yellow-ink);
}
.stp-label-tag span:nth-child(odd) { font-family: var(--stp-display); font-size: 1.6rem; line-height: 1; }
.stp-label-tag span:nth-child(even) { font-weight: 600; font-size: .92rem; }
.stp-std { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.stp-std b { display: inline-block; font-weight: 700; color: var(--stp-yellow); margin-right: 6px; }
.stp-band--buckle { align-items: center; }
.stp-band--buckle > img { object-position: 10% 30%; }
.stp-band--buckle .stp-band-scrim {
  background: linear-gradient(180deg, var(--stp-scrim-mid) 0%, var(--stp-scrim-strong) 50%, var(--stp-scrim-strong) 100%);
}
.stp-band--buckle .stp-band-copy { display: flex; justify-content: flex-end; }
.stp-band--buckle .stp-band-text { max-width: 28rem; }
.stp-two-up { display: grid; gap: 30px; }

/* height tool */
.stp-hgt { margin-top: 30px; }
.stp-hgt-out { display: grid; gap: 14px; }
.stp-cabfigure {
  display: inline-grid;
  justify-items: center;
  gap: 4px;
  padding: 14px 26px 16px;
  border-radius: 6px;
  background: var(--stp-yellow);
  color: var(--stp-yellow-ink);
  justify-self: start;
}
.stp-cabfigure b { font-family: var(--stp-display); font-weight: 400; font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem); line-height: 1; letter-spacing: .02em; }
.stp-cabfigure span { font-weight: 600; font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; }
.stp-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.stp-checks li { padding-left: 26px; position: relative; }
.stp-checks li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 14px; border-radius: 50%; background: var(--stp-yellow); }
.stp-checks li.is-bad::before { background: var(--stp-red); }

/* enquiry form */
.stp-form { margin-top: 30px; display: grid; gap: 22px; }
.stp-set {
  display: grid;
  gap: 16px;
  padding: 20px 20px 22px;
  border-radius: 8px;
  background: var(--stp-panel);
}
.stp-set > legend {
  float: left;
  width: 100%;
  margin-bottom: 4px;
  font-family: var(--stp-display);
  font-size: 1.7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
}
.stp-set > legend + * { clear: left; }
.stp-q { display: grid; gap: 6px; align-content: start; }
.stp-q textarea { min-height: 110px; resize: vertical; }
.stp-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.stp-choices label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 14px 8px 12px;
  border-radius: 4px;
  background: var(--stp-tile);
  cursor: pointer;
}
.stp-choices label:has(input:checked) { background: var(--stp-tile-hi); box-shadow: inset 0 -3px 0 var(--stp-yellow); }
.stp-q input[type="checkbox"] { border-radius: 3px; }
.stp-q input[type="radio"]:checked, .stp-q input[type="checkbox"]:checked { background: var(--stp-yellow); box-shadow: inset 0 0 0 4px var(--stp-input); }
.stp-q input[type="checkbox"]:checked { box-shadow: inset 0 0 0 3px var(--stp-input); }
/* honeypot: inside the viewport but clipped to nothing, out of the tab order and hidden from screen readers */
.stp-trap { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.stp-trap input { background: var(--stp-input); border: 2px solid var(--stp-steel); }
.stp-q .stp-err { color: var(--stp-red); font-size: .92rem; font-weight: 600; }
.stp-q.is-wrong input, .stp-q.is-wrong textarea { box-shadow: inset 0 -3px 0 var(--stp-red), inset 0 0 0 1px var(--stp-red); }
.stp-sent {
  padding: 20px 22px;
  border-radius: 8px;
  background: var(--stp-panel);
  box-shadow: inset 4px 0 0 var(--stp-yellow);
}
.stp-sent[hidden] { display: none; }
.stp-sent h2 { font-size: 2.4rem; margin-bottom: 10px; }
.stp-sent.is-problem { box-shadow: inset 4px 0 0 var(--stp-red); }

/* company: the mark at a real size */
.stp-facts { display: grid; gap: 0; margin: 4px 0 18px; }
.stp-facts div { display: grid; gap: 2px; padding: 12px 0; box-shadow: inset 0 -1px 0 var(--stp-edge); }
.stp-facts dt { font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--stp-muted); }
.stp-facts dd { font-size: 1.1rem; }
.stp-ident-text { margin-top: 18px; max-width: 34rem; color: var(--stp-muted); }
.stp-optional { font-weight: 400; color: var(--stp-muted); }
.stp-ident { display: grid; gap: 28px; align-items: center; margin-top: 10px; }
.stp-ident-mark { width: min(220px, 52vw); height: auto; }
.stp-ident-word { width: min(320px, 72vw); height: auto; }

/* closing block of the index */
.stp-close {
  max-width: var(--stp-wide);
  margin: clamp(60px, 9vw, 120px) auto 0;
  padding: 0 var(--stp-gutter);
  display: grid;
  gap: 28px;
  align-items: center;
}
.stp-close-mark { width: min(200px, 48vw); height: auto; }
.stp-close-word { width: min(260px, 64vw); height: auto; margin-top: 18px; }
.stp-close p { max-width: 36rem; }
.stp-close h2 { margin-bottom: 18px; }
.stp-carry { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.stp-carry li {
  padding: 8px 14px;
  border-radius: 4px;
  background: var(--stp-panel);
  font-size: .96rem;
}

/* ============ the shipper account ============ */
.stp-dock-head { padding-bottom: 6px; }
.stp-dock-head h1 { font-size: clamp(3rem, 1.6rem + 5vw, 6rem); max-width: 16ch; overflow-wrap: anywhere; }
.stp-dock-nav {
  max-width: var(--stp-wide);
  margin: 22px auto 0;
  padding: 0 var(--stp-gutter);
  display: flex; flex-wrap: wrap; gap: 6px;
}
.stp-dock-tab {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 14px;
  border: 0; border-radius: 4px;
  background: var(--stp-tile); color: var(--stp-ink);
  box-shadow: inset 0 -3px 0 var(--stp-steel-hi);
  font-family: var(--stp-display); font-size: 1.25rem; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
}
.stp-dock-tab:hover { background: var(--stp-tile-hi); color: var(--stp-ink); }
.stp-dock-tab[aria-current="page"] { background: var(--stp-yellow); color: var(--stp-yellow-ink); box-shadow: none; }
.stp-dock-count {
  min-width: 26px; padding: 2px 6px; border-radius: 3px;
  background: var(--stp-ground); color: var(--stp-ink);
  font-size: 1rem; text-align: center;
}
.stp-dock-out { margin: 0 0 0 auto; }
.stp-dock-out .stp-dock-tab { box-shadow: inset 0 -3px 0 var(--stp-red); }
.stp-dock { padding-top: 26px; }
.stp-dock-note {
  margin: 0 0 22px; padding: 14px 18px; border-radius: 6px;
  background: var(--stp-yellow-wash); box-shadow: inset 4px 0 0 var(--stp-yellow);
}
.stp-dock-problems { margin-bottom: 18px; }
.stp-dock-problems ul { margin: 6px 0 0; padding-left: 1.1em; }
.stp-dock-form { margin-top: 18px; }
.stp-dock-aside { margin-top: 16px; color: var(--stp-muted); }
.stp-dock-empty { max-width: var(--stp-measure); padding: 18px 20px; border-radius: 6px; background: var(--stp-panel); color: var(--stp-muted); }
.stp-dock-h2 { margin: 44px 0 6px; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); }
.stp-dock-h2.is-first { margin-top: 4px; }
.stp-dock-who { margin: 0; font-weight: 600; }
.stp-dock-mail { margin: 18px 0 24px; max-width: var(--stp-measure); color: var(--stp-muted); }
.stp-dock-hint { max-width: var(--stp-measure); margin-top: 26px; padding: 14px 18px; border-radius: 6px; background: var(--stp-panel); box-shadow: inset 4px 0 0 var(--stp-yellow); }
.stp-dock-danger { box-shadow: inset 4px 0 0 var(--stp-red); }
.stp-dock-danger > p { margin: 0; color: var(--stp-muted); }
.stp-dock-remove { margin-top: 10px; }
.stp-dock-from {
  display: grid; gap: 14px; align-items: end;
  padding: 18px 20px; border-radius: 8px; background: var(--stp-panel);
}
.stp-dock-call { scroll-margin-top: 20px; }
.stp-facts div { align-content: start; }
.stp-load-facts dd { white-space: pre-line; overflow-wrap: anywhere; }

/* what the account holds: three bays on a deck */
.stp-hold { list-style: none; margin: 0; padding: 10px; display: grid; gap: 8px; border-radius: 6px; background: var(--stp-steel-lo); }
.stp-hold li {
  display: grid; gap: 4px; padding: 16px 18px; border-radius: 4px;
  background: var(--stp-tile); box-shadow: inset 0 3px 0 var(--stp-yellow);
}
.stp-hold b { font-family: var(--stp-display); font-weight: 400; font-size: 1.8rem; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.stp-hold span { color: var(--stp-muted); font-size: .98rem; line-height: 1.4; }

.stp-bayrow { display: grid; gap: 10px; }
.stp-baytile {
  display: grid; gap: 4px; padding: 18px 20px 20px; border-radius: 6px;
  background: var(--stp-panel); box-shadow: inset 0 4px 0 var(--stp-yellow);
  color: var(--stp-ink); text-decoration: none;
}
.stp-baytile:hover { background: var(--stp-tile); color: var(--stp-ink); }
.stp-baytile b { font-family: var(--stp-display); font-weight: 400; font-size: 1.6rem; letter-spacing: .05em; text-transform: uppercase; }
.stp-baytile-n { font-family: var(--stp-display); font-size: 3.4rem; line-height: .9; color: var(--stp-yellow); }
.stp-baytile span:last-child { color: var(--stp-muted); font-size: .96rem; }

/* points */
.stp-points, .stp-sums, .stp-jobs { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.stp-point, .stp-sum {
  display: grid; gap: 8px; align-content: start; padding: 18px 20px 20px; border-radius: 6px;
  background: var(--stp-panel); box-shadow: inset 0 4px 0 var(--stp-yellow);
}
.stp-point-role, .stp-sum-when { margin: 0; font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--stp-muted); }
.stp-point-name, .stp-sum h3 { margin: 0; font-family: var(--stp-display); font-weight: 400; font-size: 1.9rem; line-height: 1; letter-spacing: .03em; text-transform: uppercase; overflow-wrap: anywhere; }
.stp-point-where { margin: 0; font-size: 1.04rem; overflow-wrap: anywhere; }
.stp-point-facts { margin: 4px 0 0; display: grid; gap: 6px; }
.stp-point-facts div { display: grid; gap: 1px; }
.stp-point-facts dt { font-weight: 600; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--stp-muted); }
.stp-point-facts dd { margin: 0; font-size: .98rem; white-space: pre-line; overflow-wrap: anywhere; }
.stp-point-acts { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.stp-point-acts a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* calculations */
.stp-sum form { margin: 0; }
.stp-sum-in { margin: 0; color: var(--stp-muted); font-size: .96rem; }
.stp-sum-out { margin: 4px 0 0; display: grid; gap: 8px; }
.stp-sum-out div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 6px; box-shadow: inset 0 1px 0 var(--stp-edge); }
.stp-sum-out dt { font-size: .96rem; }
.stp-sum-out dd { margin: 0; font-family: var(--stp-display); font-size: 1.5rem; letter-spacing: .03em; color: var(--stp-red); white-space: nowrap; }
.stp-sum-out div:last-child dd { color: var(--stp-yellow); }

/* loads and their status: a strap with three ratchets */
.stp-job { display: grid; gap: 12px; padding: 16px 18px; border-radius: 6px; background: var(--stp-panel); }
.stp-job-link { display: grid; gap: 2px; color: var(--stp-ink); text-decoration: none; min-width: 0; }
.stp-job-link:hover .stp-job-ref { text-decoration: underline; }
.stp-job-ref { font-family: var(--stp-display); font-size: 1.6rem; letter-spacing: .05em; color: var(--stp-yellow); }
.stp-job-route { font-weight: 600; overflow-wrap: anywhere; }
.stp-job-when { color: var(--stp-muted); font-size: .92rem; }
.stp-haul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.stp-haul li { position: relative; display: grid; gap: 2px; padding-left: 34px; }
.stp-haul li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 3px;
  background: var(--stp-tile); box-shadow: inset 0 0 0 2px var(--stp-steel-hi);
}
.stp-haul li::after {
  content: ""; position: absolute; left: 8px; top: 24px; bottom: -14px; width: 4px; background: var(--stp-steel-lo);
}
.stp-haul li:last-child::after { display: none; }
.stp-haul li.is-done::before { background: var(--stp-yellow); box-shadow: none; }
.stp-haul li.is-done::after { background: var(--stp-yellow); }
.stp-haul li.is-now::before { background: var(--stp-yellow); box-shadow: 0 0 0 4px var(--stp-yellow-wash), inset 0 0 0 5px var(--stp-yellow-ink); }
.stp-haul-name { font-family: var(--stp-display); font-size: 1.5rem; letter-spacing: .05em; text-transform: uppercase; line-height: 1.1; }
.stp-haul li.is-next .stp-haul-name { color: var(--stp-muted); }
.stp-haul-when { font-weight: 600; font-size: .9rem; color: var(--stp-yellow); }
.stp-haul li.is-next .stp-haul-when { color: var(--stp-muted); }
.stp-haul-what { font-size: .95rem; color: var(--stp-muted); }
.stp-haul.is-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.stp-haul.is-compact li { padding: 26px 6px 0 0; }
.stp-haul.is-compact li::before { top: 0; width: 16px; height: 16px; }
.stp-haul.is-compact li::after { left: 16px; right: 0; top: 6px; bottom: auto; width: auto; height: 4px; }
.stp-haul.is-compact .stp-haul-name { font-size: 1.05rem; }

/* keeping a calculation from the tool */
.stp-keep { display: grid; gap: 10px; margin-top: 8px; padding-top: 18px; box-shadow: inset 0 1px 0 var(--stp-edge); }
.stp-keep small { color: var(--stp-muted); font-size: .88rem; }

/* ============ footer: who we are, exactly as registered ============ */
.stp-foot {
  position: relative;
  margin-top: clamp(70px, 10vw, 140px);
  background: var(--stp-panel);
}
.stp-foot::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--stp-yellow) 0 9px, var(--stp-yellow-deep) 9px 10px);
}
.stp-foot-in {
  max-width: var(--stp-wide);
  margin: 0 auto;
  padding: 44px var(--stp-gutter) 38px;
  display: grid;
  gap: 26px;
}
.stp-foot-title { font-family: var(--stp-display); font-size: 1.9rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1; }
.stp-reg { display: grid; gap: 12px 30px; }
.stp-reg div { display: grid; gap: 2px; }
.stp-reg dt { font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--stp-muted); }
.stp-reg dd { font-size: 1rem; line-height: 1.4; }
.stp-reg dd a { font-weight: 600; }
.stp-foot-note { max-width: 46rem; font-size: .95rem; color: var(--stp-muted); }
.stp-foot-pages { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .95rem; }
.stp-foot-pages a { display: inline-flex; align-items: center; min-height: 40px; }

/* 404 */
.stp-lost { max-width: var(--stp-wide); margin: 0 auto; padding: clamp(90px, 14vw, 170px) var(--stp-gutter) 20px; }
.stp-lost h1 { font-size: clamp(3.4rem, 2rem + 6vw, 7rem); }
.stp-lost p { margin-top: 18px; max-width: 34rem; }
.stp-lost h2 { margin-top: 44px; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); }

/* the narrowest phones: wordmark and mark shrink so the mark sits clear of both neighbours */
@media (max-width: 359px) {
  :root { --stp-mark: 44px; }
  .stp-word svg { height: 15px; }
  .stp-mast-mark { left: 50%; }
}

/* ============ 768+ ============ */
@media (min-width: 768px) {
  :root { --stp-mark: 74px; }
  .stp-mast-in { min-height: 72px; }
  .stp-word svg { height: 26px; }
  .stp-mast-mark { left: 50%; }
  .stp-split { grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: 44px; align-items: start; }
  .stp-split-even { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; }
  .stp-split-table { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stp-bodies { grid-template-columns: 1fr 1fr; }
  .stp-pair { gap: 16px; }
  .stp-loads { grid-template-columns: 1fr 1fr; }
  .stp-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stp-pair-cols { grid-template-columns: 1fr 1fr; gap: 48px; }
  .stp-two-up { grid-template-columns: 1fr 1fr; gap: 48px; }
  .stp-points, .stp-sums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stp-bayrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stp-dock-from { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .stp-job { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; }
  .stp-haul:not(.is-compact) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .stp-haul:not(.is-compact) li { padding: 34px 18px 0 0; }
  .stp-haul:not(.is-compact) li::before { top: 0; }
  .stp-haul:not(.is-compact) li::after { left: 20px; right: 0; top: 8px; bottom: auto; width: auto; height: 4px; }
  .stp-reg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stp-ident, .stp-close { grid-template-columns: auto 1fr; gap: 44px; }
  .stp-set { padding: 26px 28px 28px; }
  .stp-set-two { grid-template-columns: 1fr 1fr; }
  .stp-set-two > legend { grid-column: 1 / -1; }
  .stp-set-two > .stp-q-wide { grid-column: 1 / -1; }
}

/* ============ 1024+ : the deck turns side-on, bays in a row ============ */
@media (min-width: 1024px) {
  body { font-size: 1.125rem; }
  .stp-stage-body p { font-size: 1.125rem; }
  .stp-open-scrim {
    background:
      linear-gradient(90deg, var(--stp-scrim-strong) 0%, var(--stp-scrim-strong) 36%, var(--stp-scrim-mid) 50%, var(--stp-scrim-clear) 72%),
      linear-gradient(0deg, var(--stp-ground) 0%, var(--stp-scrim-clear) 26%);
  }
  .stp-open { align-items: center; }
  .stp-open-copy { padding: 140px var(--stp-gutter) 110px; }
  .stp-bayline {
    max-width: var(--stp-wide);
    grid-template-columns: 18px minmax(0, 1fr) 14px;
    grid-template-rows: auto;
    padding: 0 0 34px;
  }
  .stp-deck-bays {
    display: flex;
    gap: 7px;
    padding: 12px 8px;
  }
  .stp-deck-bays li { flex: 1 1 auto; }
  .stp-deck-bays li:last-child:nth-child(odd) { grid-column: auto; }
  .stp-bay { min-height: 96px; }
  .stp-deck-axles { display: flex; gap: 12px; right: 9%; bottom: 4px; }
  .stp-deck-axles i, .stp-deck-axles::before { width: 30px; height: 30px; border-radius: 50%; background: var(--stp-input); box-shadow: inset 0 0 0 7px var(--stp-steel-hi); }
  .stp-deck-axles.is-left { display: none; }
  .stp-band--strap .stp-band-scrim {
    background: linear-gradient(90deg, var(--stp-scrim-clear) 30%, var(--stp-scrim-mid) 52%, var(--stp-scrim-strong) 70%);
  }
  .stp-tool { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); column-gap: 44px; }
  .stp-cols { max-width: none; columns: 2; column-gap: 48px; }
  .stp-cols p { break-inside: avoid; }
  .stp-tool-head { grid-column: 1 / -1; }
  .stp-reg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stp-loads { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stp-points, .stp-sums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stp-band--buckle .stp-band-scrim {
    background: linear-gradient(90deg, var(--stp-scrim-clear) 34%, var(--stp-scrim-mid) 54%, var(--stp-scrim-strong) 72%);
  }
  .stp-facts { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .stp-reg .is-wide { grid-column: span 2; }
  .stp-page-head--split {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    column-gap: 56px;
    align-items: center;
    padding-top: clamp(84px, 9vw, 128px);
  }
  .stp-page-head--split h1 { font-size: clamp(3.2rem, 1rem + 4.6vw, 6.2rem); }
  .stp-head-fig { max-width: none; }
  .stp-clock { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); column-gap: 26px; align-items: center; }
  .stp-clock-dial { grid-row: span 2; width: 100%; }
  .stp-clock-days { align-self: start; }
}


/* ============ motion — only for people who have not asked for less ============ */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .stp-mast-mark { animation: stp-land 1s cubic-bezier(.2, .9, .25, 1) .2s both; }
  .stp-moving .stp-tag { opacity: 0; transform: translateY(-26px) scaleX(.6); }
  .stp-moving .stp-tag.is-set { animation: stp-settle .8s cubic-bezier(.25, .9, .3, 1) both; }
  .stp-bay, .stp-btn, .stp-seg label, .stp-choices label, .stp-bays > summary {
    transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease, color .18s ease;
  }
  .stp-bay:hover { transform: translateY(-3px); }
  .stp-btn:hover svg { transform: translateX(3px); }
  .stp-btn svg { transition: transform .2s ease; }
  .stp-bays[open] .stp-bays-panel { animation: stp-drop .32s cubic-bezier(.2, .8, .2, 1) both; }
  .stp-bays[open] .stp-bay { animation: stp-settle .5s cubic-bezier(.25, .9, .3, 1) both; animation-delay: calc(var(--n, 0) * 45ms); }
  .stp-meter i { transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
  .stp-word svg { transition: filter .2s ease; }
  .stp-in, .stp-q input, .stp-q textarea { transition: box-shadow .16s ease; }
}
@keyframes stp-land {
  0% { opacity: 0; transform: translate(-50%, -30px); }
  58% { opacity: 1; transform: translate(-50%, 3px); }
  78% { transform: translate(-50%, -1px); }
  100% { transform: translate(-50%, 0); }
}
@keyframes stp-settle {
  0% { opacity: 0; transform: translateY(-26px) scaleX(.6); }
  60% { opacity: 1; transform: translateY(3px) scaleX(1.04); }
  80% { transform: translateY(-1px) scaleX(1); }
  100% { opacity: 1; transform: none; }
}
@keyframes stp-drop {
  0% { opacity: 0; transform: translateY(-14px); }
  100% { opacity: 1; transform: none; }
}

/* ============ realism round (2026-11-13): the company frame and consignment tracking ============ */

/* footer: contact and small print, a row of painted bays */
.stp-fine-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.stp-fine-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border-radius: 4px; background: var(--stp-tile); box-shadow: inset 0 -3px 0 var(--stp-steel-hi);
  color: var(--stp-ink); font-weight: 600; font-size: .95rem; text-decoration: none;
}
.stp-fine-link:hover { background: var(--stp-tile-hi); box-shadow: inset 0 -3px 0 var(--stp-yellow); color: var(--stp-ink); }
.stp-fine-link[aria-current="page"] { background: var(--stp-yellow); color: var(--stp-yellow-ink); box-shadow: none; }
.stp-foot-reg .stp-reg { margin-top: 14px; }

/* a table with words in it (steps, cookies): rows on a dark deck, stacked per row on a phone */
.stp-table-wrap { max-width: 100%; }
.stp-tbl { width: 100%; margin: 10px 0 8px; border-collapse: separate; border-spacing: 0 6px; font-size: 1rem; line-height: 1.45; }
.stp-tbl caption { caption-side: bottom; text-align: left; padding-top: 6px; color: var(--stp-muted); font-size: .9rem; }
.stp-tbl th, .stp-tbl td { padding: 12px 14px; text-align: left; vertical-align: top; background: var(--stp-panel); }
.stp-tbl thead th { background: transparent; font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--stp-muted); padding-top: 0; padding-bottom: 2px; }
.stp-tbl tbody th { font-family: var(--stp-display); font-weight: 400; font-size: 1.35rem; letter-spacing: .04em; text-transform: uppercase; color: var(--stp-yellow); border-radius: 4px 0 0 4px; white-space: nowrap; }
.stp-tbl:not(.stp-tbl-cookie) tbody tr:last-child th { color: var(--stp-red); }
.stp-tbl-cookie tbody th { color: var(--stp-yellow); font-family: var(--stp-text); font-size: 1rem; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.stp-tbl-cookie code { overflow-wrap: normal; }
.stp-tbl tbody td:last-child { border-radius: 0 4px 4px 0; color: var(--stp-muted); }
.stp-tbl code, .stp-sect code { font-size: .92em; overflow-wrap: anywhere; }
@media (max-width: 639px) {
  .stp-tbl, .stp-tbl tbody, .stp-tbl tr, .stp-tbl th, .stp-tbl td { display: block; }
  .stp-tbl caption { display: block; padding: 0 0 8px; }
  .stp-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stp-tbl tbody tr { margin-top: 8px; padding: 12px 14px 10px; border-radius: 4px; background: var(--stp-panel); }
  .stp-tbl tbody th { padding: 0 0 6px; background: transparent; border-radius: 0; white-space: normal; }
  .stp-tbl td { padding: 6px 0; background: transparent; border-radius: 0; box-shadow: inset 0 1px 0 var(--stp-edge); }
  .stp-tbl tbody td:last-child { border-radius: 0; }
  .stp-tbl td::before { content: attr(data-label); display: block; font-weight: 600; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--stp-muted); }
}

/* the consignment timeline: a strap with a ratchet at every step the desk has set */
.stp-haul-note { margin-top: 6px; padding: 8px 10px; border-radius: 4px; background: var(--stp-yellow-wash); font-size: .95rem; overflow-wrap: anywhere; }
.stp-haul-note b { display: block; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--stp-yellow); }
.stp-haul li.is-closed::before { background: var(--stp-red); box-shadow: 0 0 0 4px var(--stp-red-wash); }
.stp-haul li.is-closed .stp-haul-name { color: var(--stp-red); }
.stp-haul li.is-closed .stp-haul-when { color: var(--stp-red); }
.stp-haul-mini { margin: 0; display: grid; gap: 6px; }
.stp-haul-blocks { display: flex; gap: 4px; }
.stp-haul-blocks i { flex: 1 1 0; height: 10px; border-radius: 2px; background: var(--stp-tile); box-shadow: inset 0 0 0 1px var(--stp-steel); }
.stp-haul-blocks i.is-done, .stp-haul-blocks i.is-now { background: var(--stp-yellow); box-shadow: none; }
.stp-haul-mini.is-closed .stp-haul-blocks i:last-child { background: var(--stp-red); }
.stp-haul-mini-now { font-family: var(--stp-display); font-size: 1.25rem; letter-spacing: .05em; text-transform: uppercase; line-height: 1.1; }
.stp-haul-mini-now small { font-family: var(--stp-text); font-size: .86rem; letter-spacing: 0; text-transform: none; color: var(--stp-muted); }
.stp-haul-mini.is-closed .stp-haul-mini-now { color: var(--stp-red); }
.stp-dock-track { margin: 18px 0 0; max-width: var(--stp-measure); padding: 14px 18px; border-radius: 6px; background: var(--stp-panel); box-shadow: inset 4px 0 0 var(--stp-yellow); }
.stp-dock-export { display: grid; gap: 12px; align-items: center; margin: 4px 0 6px; padding: 16px 18px; border-radius: 6px; background: var(--stp-panel); }
.stp-dock-export p { margin: 0; color: var(--stp-muted); max-width: 46rem; }
.stp-dock-export .stp-btn { justify-self: start; }
@media (min-width: 768px) {
  .stp-haul:not(.is-compact) { grid-template-columns: none; gap: 14px; }
  .stp-haul:not(.is-compact) li { padding: 0 0 0 34px; }
  .stp-haul:not(.is-compact) li::before { top: 2px; }
  .stp-haul:not(.is-compact) li::after { left: 8px; right: auto; top: 24px; bottom: -14px; width: 4px; height: auto; }
  .stp-dock-export { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (min-width: 1024px) {
  .stp-haul:not(.is-compact) { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; }
  .stp-haul:not(.is-compact) li { padding: 34px 16px 0 0; }
  .stp-haul:not(.is-compact) li::before { top: 0; }
  .stp-haul:not(.is-compact) li::after { left: 20px; right: 0; top: 8px; bottom: auto; width: auto; height: 4px; }
}

/* tracking: the lookup, a reference and a postcode */
.stp-trace { display: grid; gap: 14px; padding: 20px; border-radius: 8px; background: var(--stp-panel); box-shadow: inset 0 4px 0 var(--stp-yellow); }
.stp-trace-row { display: grid; gap: 14px; align-items: start; }
.stp-trace-row .stp-btn { justify-self: start; }
.stp-trace input { text-transform: uppercase; letter-spacing: .04em; }
.stp-trace input::placeholder { text-transform: none; color: var(--stp-muted); opacity: .8; }
.stp-trace-not { margin-top: 14px; color: var(--stp-muted); font-size: .96rem; }
.stp-trace-head h1 { overflow-wrap: anywhere; }
.stp-trace-ends { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 6px 0 4px; }
.stp-trace-ends p { margin: 0; display: grid; gap: 2px; padding: 12px 16px; border-radius: 4px; background: var(--stp-tile); }
.stp-trace-ends p span { font-weight: 600; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--stp-muted); }
.stp-trace-ends p b { font-family: var(--stp-display); font-weight: 400; font-size: 2rem; letter-spacing: .04em; line-height: 1; }
.stp-trace-ends .stp-trace-arrow { align-self: center; padding: 0 2px; background: none; font-size: 1.6rem; color: var(--stp-yellow); }
.stp-trace-ends .stp-trace-now { background: var(--stp-yellow); color: var(--stp-yellow-ink); }
.stp-trace-ends .stp-trace-now span { color: var(--stp-yellow-ink); }
.stp-trace-call .stp-trace { margin-top: 0; }
@media (min-width: 640px) {
  .stp-trace-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .stp-trace-row .stp-btn { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .stp-trace-sect .stp-trace-row { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .stp-trace-ends .stp-trace-now { margin-left: auto; }
}

/* crop for the seal picture: the hardware, not the empty door */
.stp-head-art--seal img { aspect-ratio: 5 / 4; object-fit: cover; object-position: 18% 50%; }

/* contact: the desk picture, the words set in its dark window wall */
.stp-cover { position: relative; display: grid; isolation: isolate; }
.stp-cover > img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 26% 50%; }
.stp-cover-scrim { display: none; }
.stp-cover-copy { width: 100%; max-width: var(--stp-wide); margin: 0 auto; padding: 30px var(--stp-gutter) 0; }
.stp-cover-copy h1 { font-size: clamp(3.2rem, 1.6rem + 6.4vw, 7rem); line-height: .88; max-width: 12ch; }
.stp-cover-copy .stp-lede { margin-top: 22px; max-width: 34rem; font-size: 1.16rem; line-height: 1.55; }
@media (min-width: 1024px) {
  .stp-cover > img, .stp-cover-scrim, .stp-cover-copy { grid-area: 1 / 1; }
  .stp-cover > img { aspect-ratio: auto; height: 100%; min-height: 600px; max-height: 780px; object-position: 0% 50%; z-index: -2; }
  .stp-cover-scrim {
    display: block; z-index: -1;
    background: linear-gradient(90deg, var(--stp-scrim-clear) 26%, var(--stp-scrim-mid) 40%, var(--stp-scrim-strong) 50%, var(--stp-scrim-strong) 100%),
                linear-gradient(0deg, var(--stp-ground) 0%, var(--stp-scrim-clear) 24%);
  }
  .stp-cover-copy { align-self: center; display: grid; justify-items: end; padding: 110px var(--stp-gutter) 90px; }
  .stp-cover-copy > div { width: min(100%, 36rem); }
}

/* contact: the address in large type, desk hours, what to put in a message */
.stp-mail-big { font-family: var(--stp-display); font-size: clamp(1.9rem, 1.2rem + 3vw, 3.2rem); line-height: 1.05; letter-spacing: .02em; overflow-wrap: anywhere; }
.stp-mail-big a { text-decoration-thickness: 2px; color: var(--stp-yellow); }
.stp-hours-list { margin: 0; display: grid; gap: 0; }
.stp-hours-list div { display: grid; gap: 2px; padding: 10px 0; box-shadow: inset 0 -1px 0 var(--stp-edge); }
.stp-hours-list div:last-child { box-shadow: none; }
.stp-hours-list dt { font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--stp-muted); }
.stp-hours-list dd { margin: 0; font-family: var(--stp-display); font-size: 1.6rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.05; }
.stp-include { display: grid; gap: 10px; }
.stp-include-cell { padding: 18px 20px; border-radius: 6px; background: var(--stp-panel); box-shadow: inset 4px 0 0 var(--stp-steel-hi); }
.stp-include-cell h3 { margin-bottom: 6px; }
.stp-include-cell p { color: var(--stp-ink); font-size: 1rem; }
.stp-addr { font-family: var(--stp-display); font-size: 1.7rem; line-height: 1.1; letter-spacing: .03em; text-transform: uppercase; }
.stp-reach { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.stp-reach a {
  display: grid; gap: 2px; min-height: 64px; padding: 14px 18px; border-radius: 4px;
  background: var(--stp-tile); box-shadow: inset 0 -3px 0 var(--stp-yellow); color: var(--stp-ink); text-decoration: none;
}
.stp-reach a:hover { background: var(--stp-tile-hi); color: var(--stp-ink); }
.stp-reach b { font-family: var(--stp-display); font-weight: 400; font-size: 1.5rem; letter-spacing: .05em; text-transform: uppercase; line-height: 1.05; }
.stp-reach span { color: var(--stp-muted); font-size: .95rem; line-height: 1.35; }
@media (min-width: 768px) {
  .stp-include { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .stp-include { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* privacy: one entry per kind of thing kept, its four answers in a column */
.stp-facts-one { grid-template-columns: none !important; margin: 0; }
.stp-kept { display: grid; gap: 14px; margin-top: 26px; }
.stp-kept-item { padding: 20px 22px 18px; border-radius: 6px; background: var(--stp-panel); }
.stp-kept-item h3 { font-family: var(--stp-display); font-weight: 400; font-size: 1.85rem; letter-spacing: .03em; text-transform: uppercase; line-height: 1; margin-bottom: 12px; }
.stp-kept-item dl { margin: 0; display: grid; gap: 0; }
.stp-kept-item dl div { display: grid; gap: 2px; padding: 9px 0; box-shadow: inset 0 1px 0 var(--stp-edge); }
.stp-kept-item dt { font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--stp-yellow); }
.stp-kept-item dd { margin: 0; font-size: 1rem; line-height: 1.5; }
.stp-kept-note { margin-top: 18px; max-width: var(--stp-measure); color: var(--stp-muted); }
.stp-rights { display: grid; gap: 4px; margin-top: 4px; }
.stp-rights-cell { display: grid; gap: 6px; align-content: start; padding: 18px 0 16px; box-shadow: inset 0 -1px 0 var(--stp-edge); }
.stp-rights-cell h3 { font-family: var(--stp-display); font-weight: 400; font-size: 2.1rem; letter-spacing: .03em; text-transform: uppercase; line-height: 1; color: var(--stp-yellow); }
.stp-rights-how { margin-top: 22px; }
@media (min-width: 768px) {
  .stp-kept { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stp-kept-item dl div { grid-template-columns: 9.5rem minmax(0, 1fr); gap: 14px; }
  .stp-rights { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}
@media (min-width: 1024px) {
  .stp-rights { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 24px; }
  .stp-rights-cell { box-shadow: inset 0 3px 0 var(--stp-yellow); padding-top: 20px; }
}

/* conditions of carriage: clauses in two columns, the refusals in red */
.stp-terms { display: grid; gap: 30px; }
.stp-term h3 { margin-bottom: 8px; font-size: 1.32rem; }
.stp-term p, .stp-term li { max-width: 36rem; }
.stp-term ul { margin: 8px 0 0; padding-left: 1.15em; display: grid; gap: 6px; }
.stp-term-no { padding: 18px 20px; border-radius: 6px; background: var(--stp-red-wash); box-shadow: inset 4px 0 0 var(--stp-red); }
@media (min-width: 900px) {
  .stp-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; row-gap: 36px; }
}

/* complaints: three steps with their dates, then the ways out */
.stp-route { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.stp-route li { position: relative; display: grid; gap: 6px; align-content: start; padding: 20px 22px; border-radius: 6px; background: var(--stp-panel); }
.stp-route-when { font-family: var(--stp-display); font-size: 1.9rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1; color: var(--stp-yellow); }
.stp-exits { display: grid; gap: 12px; margin-top: 24px; }
.stp-exit { display: grid; gap: 8px; align-content: start; padding: 18px 20px; border-radius: 6px; background: var(--stp-panel); box-shadow: inset 0 -4px 0 var(--stp-steel-hi); }
.stp-exit p:last-child a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .stp-route { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .stp-route li { border-radius: 0; box-shadow: inset 0 4px 0 var(--stp-yellow); }
  .stp-route li + li { box-shadow: inset 0 4px 0 var(--stp-yellow), inset 1px 0 0 var(--stp-edge); }
  .stp-route li:first-child { border-radius: 6px 0 0 6px; }
  .stp-route li:last-child { border-radius: 0 6px 6px 0; }
  .stp-exits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* accessibility: what was checked, a heading in the margin and the result beside it */
.stp-a11y-state { font-family: var(--stp-display); font-size: 1.7rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.05; color: var(--stp-yellow); }
.stp-checked { display: grid; gap: 0; }
.stp-checked-row { display: grid; gap: 6px; padding: 18px 0; box-shadow: inset 0 -1px 0 var(--stp-edge); }
.stp-checked-row h3 { font-family: var(--stp-display); font-weight: 400; font-size: 1.7rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1; }
.stp-checked-row p { max-width: 46rem; }
@media (min-width: 768px) {
  .stp-checked-row { grid-template-columns: 15rem minmax(0, 1fr); gap: 28px; align-items: baseline; }
}

/* shipper questions: question in the display face, answer under it, two columns on a wide screen */
.stp-asks { display: grid; gap: 0; }
.stp-ask { padding: 20px 0 22px; box-shadow: inset 0 -1px 0 var(--stp-edge); break-inside: avoid; }
.stp-ask h3 { font-size: 1.3rem; margin-bottom: 8px; }
.stp-ask h3::before { content: "Q"; display: inline-block; margin-right: 10px; padding: 0 6px; border-radius: 3px; background: var(--stp-yellow); color: var(--stp-yellow-ink); font-family: var(--stp-display); font-weight: 400; font-size: 1.05rem; line-height: 1.35; vertical-align: 2px; }
.stp-ask-a { max-width: 38rem; }
@media (min-width: 1024px) {
  .stp-asks { display: block; columns: 2; column-gap: 56px; }
}
.stp-cookie-notes { margin-top: 18px; }
.stp-cookie-notes p + p { margin-top: 0; }
.stp-term ul + p, .stp-sect-body ul + p { margin-top: .85em; }
/* ten bays: two rows of five until the deck is long enough for one */
@media (min-width: 1024px) and (max-width: 1279px) {
  .stp-deck-bays { flex-wrap: wrap; }
  .stp-deck-bays li { flex: 1 1 calc(20% - 6px); }
  .stp-bay { min-height: 84px; }
}
.stp-haul li { align-content: start; }
/* the tracking page's sky band carries a longer line than the first page's: a deeper dusk behind it */
.stp-band--sky.stp-band--dusk .stp-band-scrim {
  background: linear-gradient(180deg, var(--stp-scrim-strong) 0%, var(--stp-scrim-strong) 28%, var(--stp-scrim-mid) 48%, var(--stp-scrim-soft) 60%, var(--stp-scrim-clear) 72%, var(--stp-scrim-soft) 100%);
}
.stp-cover-copy h1 { margin-top: 18px; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .stp-cover-scrim {
    background: linear-gradient(90deg, var(--stp-scrim-clear) 14%, var(--stp-scrim-mid) 28%, var(--stp-scrim-strong) 37%, var(--stp-scrim-strong) 100%),
                linear-gradient(0deg, var(--stp-ground) 0%, var(--stp-scrim-clear) 24%);
  }
}