/*
 * Jagelo Haulage, "midnight precision".
 *
 * Container haulage runs on 4am pulls, 30-minute vehicle booking slots and a
 * demurrage clock that bills by the day. The palette is a port at night under
 * sodium light, and the single accent is signal amber, the colour of the
 * beacon on a container handler. Status colours appear only where status is
 * actually shown.
 *
 * Every colour pair below was measured, not asserted: 32 pairs across both
 * modes, all at or above their WCAG 2.2 requirement. Form control borders
 * clear 3:1 (SC 1.4.11) in both modes, which is why --edge is its own token.
 *
 * Structure, so a theme can never render one mode's text on the other's
 * ground: the full light palette lives on :root, and dark redefines only
 * tokens for every visitor who has not chosen light. Dark is the default
 * regardless of the OS setting. Components read tokens and nothing else.
 */

/* ------------------------------------------------------------ tokens --- */

:root {
  color-scheme: light;

  --ground:    #F5F7FA;
  --surface:   #FFFFFF;
  --surface-2: #EEF1F6;
  --rail:      #DCE2EA;
  --edge:      #7C889A;
  --text:      #0B1220;
  --muted:     #4A5A70;
  --accent:    #FF8A1F;
  --accent-text: #9A4D05;
  --on-accent: #0B1220;
  --focus:     #9A4D05;
  --danger:    #B42318;
  --success:   #067647;
  --warn:      #8A5A00;
  --logo-accent: #238BE8;
  --highlight: inset 0 1px 0 rgb(255 255 255 / 0.6);
  --scrim:     rgb(11 18 32 / 0.55);

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Utopia-style fluid scale, 320px to 1440px, 1.25 at small, 1.333 at large. */
  --step--1: clamp(0.833rem, 0.80rem + 0.17vw, 0.938rem);
  --step-0:  clamp(1rem, 0.96rem + 0.20vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.13rem + 0.35vw, 1.5rem);
  --step-2:  clamp(1.44rem, 1.32rem + 0.58vw, 2rem);
  --step-3:  clamp(1.728rem, 1.54rem + 0.94vw, 2.667rem);
  --step-4:  clamp(2.074rem, 1.78rem + 1.47vw, 3.556rem);
  --step-5:  clamp(2.488rem, 2.04rem + 2.24vw, 4.741rem);

  --space-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.28rem);
  --space-2xs: clamp(0.5rem, 0.48rem + 0.1vw, 0.56rem);
  --space-xs:  clamp(0.75rem, 0.72rem + 0.15vw, 0.84rem);
  --space-s:   clamp(1rem, 0.96rem + 0.2vw, 1.13rem);
  --space-m:   clamp(1.5rem, 1.44rem + 0.3vw, 1.69rem);
  --space-l:   clamp(2rem, 1.91rem + 0.44vw, 2.25rem);
  --space-xl:  clamp(3rem, 2.87rem + 0.65vw, 3.38rem);
  --space-2xl: clamp(4rem, 3.83rem + 0.87vw, 4.5rem);
  --space-3xl: clamp(6rem, 5.74rem + 1.30vw, 6.75rem);

  --measure: 1280px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --col-gap: clamp(1rem, 0.75rem + 1.2vw, 2rem);
  --prose: 34rem;

  --radius-control: 2px;
  --radius-card: 4px;

  --header-h: 4rem;
  --subnav-h: 0px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --t-state: 150ms;
  --t-reveal: 250ms;
}

/* Dark is the site's look for everyone, whatever the phone or computer is set
   to (the owner's call, 24 September 2026). Light stays one click away on the
   footer toggle, which stamps data-theme="light" and so skips this block. */
:root:not([data-theme="light"]) {
  color-scheme: dark;
  --ground:    #05080F;
  --surface:   #0B1220;
  --surface-2: #111A2B;
  --rail:      #16202F;
  --edge:      #55667E;
  --text:      #E8EDF5;
  --muted:     #8FA0B8;
  --accent-text: #FF8A1F;
  --on-accent: #05080F;
  --focus:     #FF8A1F;
  --danger:    #FF6B6B;
  --success:   #3DDC97;
  --warn:      #FFC53D;
  --highlight: inset 0 1px 0 rgb(255 255 255 / 0.04);
  --scrim:     rgb(0 0 0 / 0.6);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground:    #05080F;
  --surface:   #0B1220;
  --surface-2: #111A2B;
  --rail:      #16202F;
  --edge:      #55667E;
  --text:      #E8EDF5;
  --muted:     #8FA0B8;
  --accent-text: #FF8A1F;
  --on-accent: #05080F;
  --focus:     #FF8A1F;
  --danger:    #FF6B6B;
  --success:   #3DDC97;
  --warn:      #FFC53D;
  --highlight: inset 0 1px 0 rgb(255 255 255 / 0.04);
  --scrim:     rgb(0 0 0 / 0.6);
}

@media (max-width: 899px) {
  :root { --header-h: 3.5rem; }
}

@media (min-width: 900px) {
  /* The port bar only sticks on screens tall enough to afford two bars. On a
     phone it would take a quarter of the viewport alongside the header and
     the call bar, so there it scrolls with the page. */
  :root { --subnav-h: 3rem; }
}

/* -------------------------------------------------------------- base --- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--subnav-h) + 1rem);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-stretch: 100%;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
img { font-style: italic; }
input, button, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
p, h1, h2, h3, h4, dl, dd, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
table { border-collapse: collapse; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

/* SC 2.4.11 Focus Not Obscured: a sticky header must never cover the thing
   that just received focus, so every focusable element and every heading
   stops short of it when scrolled into view. */
:where(a, button, input, select, textarea, summary, [tabindex], h1, h2, h3) {
  scroll-margin-top: calc(var(--header-h) + var(--subnav-h) + 1rem);
}

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

::selection { background: var(--accent); color: var(--on-accent); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------- typography --- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); font-stretch: 112%; }
h2 { font-size: var(--step-3); font-stretch: 112%; }
h3 { font-size: var(--step-1); font-stretch: 104%; letter-spacing: 0; }
h4 { font-size: var(--step-0); letter-spacing: 0; }

.lead {
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--muted);
  max-width: 38rem;
  text-wrap: pretty;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.mono, code, kbd {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.muted { color: var(--muted); }

/* ---------------------------------------------------------- layout --- */

.container {
  width: 100%;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--space-2xl); }
.section--tight { padding-block: var(--space-xl); }
.section--rule { border-top: 1px solid var(--rail); }
.section--surface { background: var(--surface); border-block: 1px solid var(--rail); }

@media (max-width: 719px) {
  .section { padding-block: var(--space-xl); }
}

.section-head {
  display: grid;
  gap: var(--space-xs);
  margin-bottom: var(--space-l);
  max-width: 44rem;
}
.section-head p { color: var(--muted); max-width: var(--prose); text-wrap: pretty; }

.stack { display: grid; gap: var(--space-s); }
.stack--m { gap: var(--space-m); }

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--col-gap);
}

.split {
  display: grid;
  gap: var(--space-l) var(--col-gap);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--reverse > :first-child { order: 2; }
}

@media (min-width: 900px) {
  .split--media { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
  .split--media > figure { order: -1; }
}

.prose-width { max-width: var(--prose); }

/* ------------------------------------------------------- skip link --- */

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: var(--space-2xs) var(--space-s);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  border-radius: var(--radius-control);
  text-decoration: none;
}
.skip-link:focus-visible { top: var(--space-2xs); }

/* ----------------------------------------------------- utility bar --- */

.utility {
  border-bottom: 1px solid var(--rail);
  font-size: var(--step--1);
  color: var(--muted);
}
.utility__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  min-height: 2.25rem;
}
.utility__cred { display: flex; gap: var(--space-m); flex-wrap: wrap; }
.utility__cred span { white-space: nowrap; }
.utility__cred .mono { color: var(--text); }
.utility__phone {
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  padding-block: var(--space-3xs);
}
.utility__phone:hover { text-decoration: underline; }

@media (max-width: 719px) {
  .utility__cred { display: none; }
  .utility__inner { justify-content: flex-end; }
}

/* ---------------------------------------------------------- header --- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-state) var(--ease), border-color var(--t-state) var(--ease);
}
.site-header.is-scrolled,
.site-header:focus-within {
  background: var(--ground);
  border-bottom-color: var(--rail);
}
/* Without scripting the header cannot know it has scrolled, so it starts
   opaque rather than floating transparent over the content for ever. */
.no-js .site-header { background: var(--ground); border-bottom-color: var(--rail); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  color: var(--text);
  text-decoration: none;
  margin-right: auto;
  padding-block: var(--space-2xs);
}
.brand svg { width: clamp(9.5rem, 8rem + 5vw, 12.5rem); height: auto; }

.nav { display: none; }
@media (min-width: 900px) {
  .nav { display: flex; align-items: center; gap: var(--space-3xs); }
}
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--space-xs);
  font-weight: 500;
  text-decoration: none;
  color: var(--muted);
  border-radius: var(--radius-control);
  transition: color var(--t-state) var(--ease), background-color var(--t-state) var(--ease);
}
.nav a:hover { color: var(--text); background: var(--surface-2); }
.nav a[aria-current="page"] {
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.header-actions { display: flex; align-items: center; gap: var(--space-2xs); }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--edge);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--t-state) var(--ease);
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn svg { width: 1.25rem; height: 1.25rem; }

@media (min-width: 900px) {
  .header-actions .icon-btn--call,
  .header-actions .icon-btn--menu { display: none; }
}
@media (max-width: 899px) {
  .header-actions .btn--header { display: none; }
}

/* ------------------------------------------------------ nav sheet --- */

.nav-sheet {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--ground);
  color: var(--text);
}
.nav-sheet::backdrop { background: var(--scrim); }
.nav-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding-inline: var(--gutter);
  border-bottom: 1px solid var(--rail);
}
.nav-sheet__body {
  display: grid;
  gap: var(--space-l);
  padding: var(--space-m) var(--gutter) var(--space-xl);
}
.nav-sheet__links { display: grid; }
.nav-sheet__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.25rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  font-stretch: 108%;
  text-decoration: none;
  border-bottom: 1px solid var(--rail);
}
.nav-sheet__ports { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.nav-sheet__ports a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--space-s);
  border: 1px solid var(--edge);
  border-radius: var(--radius-control);
  text-decoration: none;
  font-weight: 500;
}

/* ---------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 2.75rem;
  padding: var(--space-2xs) var(--space-m);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-weight: 700;
  font-size: var(--step-0);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t-state) var(--ease), border-color var(--t-state) var(--ease), color var(--t-state) var(--ease);
}
.btn svg { width: 1.1em; height: 1.1em; flex: none; }

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
}
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 88%, white); }
.btn--primary:active { background: color-mix(in srgb, var(--accent) 86%, black); }

.btn--secondary {
  background: transparent;
  border-color: var(--edge);
  color: var(--text);
}
.btn--secondary:hover { background: var(--surface-2); }
.btn--secondary:active { background: var(--rail); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  padding-inline: var(--space-3xs);
  text-decoration: none;
}
.btn--ghost:hover { text-decoration: underline; text-decoration-thickness: 2px; }

.btn--block { width: 100%; }
.btn--header { min-height: 2.5rem; padding-inline: var(--space-s); }

.btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn.is-loading { pointer-events: none; }

/* ------------------------------------------------------------- hero --- */

.hero { padding-block: var(--space-xl) var(--space-2xl); }
.hero__grid {
  display: grid;
  gap: var(--space-xl) var(--col-gap);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}

.hero__copy { display: grid; gap: var(--space-m); align-content: start; }

.hero h1 {
  font-size: var(--step-5);
  font-stretch: 112%;
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 14ch;
}
.hero h1 .eyebrow { display: block; margin-bottom: var(--space-s); letter-spacing: 0.08em; }

.hero__sub {
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--muted);
  max-width: 34rem;
  text-wrap: pretty;
}
.hero__since { max-width: 34rem; color: var(--muted); text-wrap: pretty; }
.hero__since strong { color: var(--text); font-weight: 600; }

/* The single flourish: an amber rule that passes once, like a beacon, then
   stays. Everything else on the site is still. */
.beacon-rule {
  height: 2px;
  background: var(--accent);
  transform-origin: left center;
  width: 100%;
  max-width: 14rem;
}
@media (prefers-reduced-motion: no-preference) {
  .beacon-rule { animation: beacon-pass 700ms var(--ease) 150ms both; }
  @keyframes beacon-pass {
    from { transform: scaleX(0); opacity: 0.4; }
    to   { transform: scaleX(1); opacity: 1; }
  }
}

/* ------------------------------------------------------ proof strip --- */

.proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--rail);
}
@media (min-width: 560px) { .proof { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Term then value in the markup, so a screen reader hears "containers a
   year, 13,000+"; figure first on screen, because that is what the eye is
   looking for. */
.proof__item {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--space-3xs);
  padding: var(--space-s) var(--space-s) var(--space-s) 0;
  border-bottom: 1px solid var(--rail);
}
@media (min-width: 560px) {
  .proof__item { border-bottom: 0; }
  .proof__item + .proof__item { padding-left: var(--space-s); border-left: 1px solid var(--rail); }
}
@media (max-width: 559px) {
  .proof__item:nth-child(even) { padding-left: var(--space-s); border-left: 1px solid var(--rail); }
}
.proof__figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.proof__label { font-size: var(--step--1); color: var(--muted); line-height: 1.35; }

/* --------------------------------------------------------- raised card --- */

.card {
  background: var(--surface);
  border: 1px solid var(--rail);
  border-radius: var(--radius-card);
  box-shadow: var(--highlight);
}
.card__pad { padding: var(--space-m); }

/* -------------------------------------------------------- quote form --- */

.quote-card { position: relative; }
.quote-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-m) var(--space-m) 0;
}
.quote-card__head h2, .quote-card__head h3 {
  font-size: var(--step-2);
  font-stretch: 108%;
}
.quote-card__step {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--muted);
  white-space: nowrap;
}
.quote-card form { padding: var(--space-m); }

.qf { display: grid; gap: var(--space-m); }
.qf__step { display: grid; gap: var(--space-m); border: 0; padding: 0; margin: 0; min-width: 0; }
.qf__step[hidden], .js-hidden { display: none !important; }
.qf__row { display: grid; gap: var(--space-m); }
@media (min-width: 560px) {
  .qf__row--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.quote-card .qf__row--2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) {
  .quote-card .qf__row--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.field { display: grid; gap: var(--space-3xs); align-content: start; }
.field__label {
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
}
.field__label .opt { font-weight: 400; color: var(--muted); }
.field__hint { font-size: var(--step--1); color: var(--muted); line-height: 1.4; }
.field__echo {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--success);
}
.field__echo:empty { display: none; }
.field__error {
  display: flex;
  gap: var(--space-3xs);
  align-items: flex-start;
  font-size: var(--step--1);
  color: var(--danger);
  font-weight: 500;
}
.field__error svg { width: 1em; height: 1em; flex: none; margin-top: 0.15em; }
.field__error:empty { display: none; }

.input, .select, .textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.65rem 0.8rem;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius-control);
  color: var(--text);
  transition: border-color var(--t-state) var(--ease), background-color var(--t-state) var(--ease);
}
.input:hover, .select:hover, .textarea:hover { background: var(--surface-2); }
.textarea { min-height: 6rem; resize: vertical; line-height: 1.5; }
.select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
}
.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: 0.8; }
.input--mono { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; }

.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea { border-color: var(--danger); border-width: 2px; }

/* Radios shown as a set of choices, not hidden in a select, so the whole
   decision is visible on a phone. Checked is marked by border, weight and a
   filled dot together, never by colour alone. */
.choices { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--space-2xs); }
.choices legend { padding: 0; margin-bottom: var(--space-3xs); }
.choices__set {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2xs);
}
.choice { position: relative; }
.choice input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.choice span {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding-inline: 0.65rem;
  border: 1px solid var(--edge);
  border-radius: var(--radius-control);
  font-size: var(--step--1);
  font-weight: 500;
  white-space: nowrap;
  transition: border-color var(--t-state) var(--ease), background-color var(--t-state) var(--ease);
}
.choice span::before {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  flex: none;
  border: 1px solid var(--edge);
  border-radius: 50%;
}
/* Narrow phones: "Out of gauge" would touch its border at three across. */
@media (max-width: 400px) {
  .choice span { padding-inline: 0.5rem; gap: 0.35rem; line-height: 1.2; }
}
.choice:hover span { background: var(--surface-2); }
.choice input:checked + span {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  font-weight: 700;
}
.choice input:checked + span::before {
  border-color: var(--accent);
  background: radial-gradient(circle, var(--accent) 45%, transparent 50%);
}
.choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 359px) { .choices__set { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.stepper {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 3rem;
  max-width: 11rem;
}
.stepper button {
  min-height: 3rem;
  border: 1px solid var(--edge);
  background: var(--surface);
  color: var(--text);
  font-size: var(--step-1);
  line-height: 1;
}
.stepper button:hover { background: var(--surface-2); }
.stepper button:first-child { border-radius: var(--radius-control) 0 0 var(--radius-control); }
.stepper button:last-child { border-radius: 0 var(--radius-control) var(--radius-control) 0; }
.stepper .input {
  border-radius: 0;
  border-inline: 0;
  text-align: center;
  font-family: var(--font-mono);
  -moz-appearance: textfield;
}
.stepper .input::-webkit-outer-spin-button,
.stepper .input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.no-js .stepper { grid-template-columns: minmax(0, 1fr); }
.no-js .stepper button { display: none; }
.no-js .stepper .input { border-inline: 1px solid var(--edge); border-radius: var(--radius-control); }

.check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  cursor: pointer;
  font-weight: 500;
}
.check input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  flex: none;
  accent-color: var(--accent);
}

.qf__flags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
  padding-top: var(--space-2xs);
  border-top: 1px solid var(--rail);
}
.qf__reveal {
  display: grid;
  gap: var(--space-m);
  padding-left: var(--space-s);
  border-left: 2px solid var(--accent);
}
.qf__reveal[hidden] { display: none; }

.qf__summary {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-s);
  background: var(--surface-2);
  border: 1px solid var(--rail);
  border-radius: var(--radius-control);
}
.qf__summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
}
.qf__summary dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3xs) var(--space-s);
  font-size: var(--step--1);
}
.qf__summary dt { color: var(--muted); }
.qf__summary dd { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.qf__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
}
.qf__actions .btn--primary { flex: 1 1 12rem; }
.qf__assure { font-size: var(--step--1); color: var(--muted); }

.notice {
  display: flex;
  gap: var(--space-xs);
  align-items: flex-start;
  padding: var(--space-s);
  border: 1px solid var(--rail);
  border-left: 3px solid var(--muted);
  border-radius: var(--radius-control);
  background: var(--surface);
}
.notice svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 0.15em; }
.notice--ok { border-left-color: var(--success); }
.notice--ok svg { color: var(--success); }
.notice--err { border-left-color: var(--danger); }
.notice--err svg { color: var(--danger); }
.notice strong { display: block; }
.notice__list { margin: var(--space-2xs) 0 0; padding-left: 1.1em; display: grid; gap: 0.2rem; }
.notice__list a { color: var(--text); text-decoration-color: var(--danger); text-underline-offset: 0.2em; }

/* ------------------------------------------------------- port subnav --- */

.port-bar {
  background: var(--ground);
  border-block: 1px solid var(--rail);
}
@media (min-width: 900px) {
  .port-bar { position: sticky; top: var(--header-h); z-index: 40; }
}
.port-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  min-height: 3rem;
}
.port-bar__label {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.port-bar__list {
  display: flex;
  gap: var(--space-3xs);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.port-bar__list::-webkit-scrollbar { display: none; }
.port-bar__list li { scroll-snap-align: start; flex: none; }
.port-bar__list a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--space-xs);
  color: var(--muted);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-control);
  transition: color var(--t-state) var(--ease), background-color var(--t-state) var(--ease);
}
.port-bar__list a:hover { color: var(--text); background: var(--surface-2); }
.port-bar__list a[aria-current="page"] {
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* -------------------------------------------------------- port cards --- */

.port-grid {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 560px) { .port-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .port-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.port-card {
  position: relative;
  display: grid;
  gap: var(--space-s);
  align-content: start;
  padding: var(--space-m);
  background: var(--surface);
  border: 1px solid var(--rail);
  border-radius: var(--radius-card);
  box-shadow: var(--highlight);
  text-decoration: none;
  transition: background-color var(--t-state) var(--ease), border-color var(--t-state) var(--ease);
}
.port-card:hover { background: var(--surface-2); border-color: var(--edge); }
.port-card__name {
  display: grid;
  gap: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  font-stretch: 110%;
  line-height: 1.05;
}
.port-card__name::after {
  content: "";
  display: block;
  height: 2px;
  width: 2rem;
  background: var(--accent);
  transition: width var(--t-state) var(--ease);
}
.port-card:hover .port-card__name::after,
.port-card:focus-visible .port-card__name::after { width: 100%; }
.port-card__lane { color: var(--muted); line-height: 1.5; text-wrap: pretty; }
.port-card__moves {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--muted);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--rail);
}
.port-card__go {
  display: block;
  font-weight: 700;
  color: var(--accent-text);
  text-wrap: pretty;
}
.port-card__go svg { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; margin-left: 0.2em; }

/* ------------------------------------------------------ service list --- */

.service-list { display: grid; border-top: 1px solid var(--rail); }
@media (min-width: 800px) {
  .service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .split .service-list { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1200px) {
  .split .service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.service-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3xs) var(--space-s);
  align-items: start;
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--rail);
  text-decoration: none;
}
.service-row h3 { font-size: var(--step-1); }
.service-row p { grid-column: 1; color: var(--muted); font-size: var(--step--1); line-height: 1.5; }
.service-row svg { grid-row: 1 / span 2; grid-column: 2; width: 1.25rem; height: 1.25rem; color: var(--accent-text); margin-top: 0.3em; transition: transform var(--t-state) var(--ease); }
.service-row:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }

/* ------------------------------------------------------------ tables --- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rail);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.table { width: 100%; font-size: var(--step--1); }
.table caption {
  text-align: left;
  padding: var(--space-s);
  color: var(--muted);
  caption-side: bottom;
  border-top: 1px solid var(--rail);
}
.table th, .table td {
  padding: 0.8rem var(--space-s);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rail);
}
.table thead th {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: calc(var(--step--1) * 0.95);
  color: var(--muted);
  white-space: nowrap;
}
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: 0; }
.table tbody th { font-weight: 600; white-space: nowrap; }
.table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
@media (max-width: 719px) {
  .table tbody th, .table thead th:first-child {
    position: sticky;
    left: 0;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--rail);
  }
}
/*
 * A table whose rows read as records: on a phone each row becomes a small
 * block (name, the two measurements side by side, then the note) instead of
 * four columns squeezed into 340px, which made single rows 200px tall.
 */
@media (max-width: 639px) {
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table--stack, .table--stack tbody { display: block; }
  .table--stack tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3xs) var(--space-s);
    padding: var(--space-s);
    border-bottom: 1px solid var(--rail);
  }
  .table--stack tbody tr:last-child { border-bottom: 0; }
  .table--stack th, .table--stack td { padding: 0; border: 0; }
  .table--stack tbody th { grid-column: 1 / -1; position: static; box-shadow: none; background: none; white-space: normal; font-size: var(--step-0); }
  .table--stack td[data-label] { display: grid; gap: 0.1rem; text-align: left; }
  .table--stack td[data-label]::before {
    content: attr(data-label);
    font-family: var(--font-body);
    font-size: calc(var(--step--1) * 0.9);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .table--stack td:last-child { grid-column: 1 / -1; color: var(--muted); margin-top: var(--space-3xs); }
  .table--stack caption { display: block; }
}

/* ------------------------------------------------------ credentials --- */

.creds { display: grid; border-top: 1px solid var(--rail); }
@media (min-width: 800px) {
  .creds { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
}
.cred {
  display: grid;
  gap: var(--space-3xs);
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--rail);
}
.cred dt { font-weight: 600; }
.cred__ref {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.cred__detail { color: var(--muted); font-size: var(--step--1); line-height: 1.5; max-width: 30rem; }

/* ------------------------------------------------------------- steps --- */

.steps {
  display: grid;
  gap: var(--space-l);
  counter-reset: step;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 800px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
  .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-l); }
}
@media (min-width: 1100px) {
  .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.step {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  padding-top: var(--space-m);
  border-top: 2px solid var(--rail);
  counter-increment: step;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--accent-text);
  font-weight: 500;
}
.step:first-child { border-top-color: var(--accent); }
.step p { color: var(--muted); text-wrap: pretty; }

/* ---------------------------------------------------------- accordion --- */

.faq { border-top: 1px solid var(--rail); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--rail); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s);
  min-height: 3.5rem;
  padding-block: var(--space-s);
  font-weight: 600;
  font-size: var(--step-1);
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  flex: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-state) var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq summary:hover { color: var(--accent-text); }
.faq details > div { padding-bottom: var(--space-m); color: var(--muted); max-width: var(--prose); }
.faq details > div p + p { margin-top: var(--space-xs); }

/* ---------------------------------------------------------- insights --- */

.insights {
  display: grid;
  gap: var(--space-s);
  grid-auto-flow: column;
  grid-auto-columns: minmax(16rem, 82%);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-2xs);
  scrollbar-width: thin;
}
@media (min-width: 800px) {
  .insights { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
}
.insight {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  padding-top: var(--space-s);
  border-top: 1px solid var(--rail);
  scroll-snap-align: start;
}
.insight time { font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted); }
.insight h3 { font-size: var(--step-1); line-height: 1.25; }
.insight h3 a { text-decoration: none; }
.insight h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.insight p { color: var(--muted); font-size: var(--step--1); line-height: 1.5; }

/* --------------------------------------------------------------- fleet --- */

.fleet-photo {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--rail);
  background: var(--surface);
  aspect-ratio: 630 / 780;
  /* Capped by width, never by height: a height cap with object-fit cover
     cropped the roof off on tablets. The image is framed at exactly 630:780,
     so the box always shows all of it. */
  width: 100%;
  max-width: 36rem;
  justify-self: center;
}
.fleet-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.fleet-photo figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-xs) var(--space-s);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: #E8EDF5;
  background: linear-gradient(to top, rgb(5 8 15 / 0.85), rgb(5 8 15 / 0));
}

.facts { display: grid; border-top: 1px solid var(--rail); }
.fact {
  display: grid;
  grid-template-columns: minmax(8rem, auto) minmax(0, 1fr);
  gap: var(--space-s);
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--rail);
  font-size: var(--step--1);
}
.fact dt { color: var(--muted); }
.fact dd { font-weight: 500; }
.fact dd .mono { font-weight: 500; }
/* In a page hero, under the lead: three facts a buyer scans before reading. */
.facts--hero { margin-top: var(--space-xs); max-width: 38rem; }
/* A term and a sentence about it: the term carries the weight, the sentence is muted. */
.facts--wide .fact { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); padding-block: var(--space-s); font-size: var(--step-0); }
.facts--wide .fact dt { color: var(--text); font-weight: 600; }
.facts--wide .fact dd { color: var(--muted); font-weight: 400; line-height: 1.5; }
@media (min-width: 640px) {
  .facts--wide .fact { grid-template-columns: minmax(10rem, 2fr) minmax(0, 5fr); gap: var(--space-s); }
}
.fact-source { margin-top: var(--space-2xs); font-size: calc(var(--step--1) * 0.95); color: var(--muted); }

/* Where the boxes go: a destination and how we get there. */
.lane-list { display: grid; border-top: 1px solid var(--rail); }
.lane-list li {
  display: grid;
  gap: 0.15rem;
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--rail);
}
.lane-list strong { font-weight: 600; }
.lane-list span { color: var(--muted); font-size: var(--step--1); }

/* Things to have ready. The tick is the list marker, not decoration. */
.check-list { display: grid; gap: var(--space-2xs); }
.check-list li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--space-2xs); align-items: start; }
.check-list svg { width: 1.25rem; height: 1.25rem; color: var(--accent-text); margin-top: 0.15em; }

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

.cta-band {
  position: relative;
  background: var(--surface);
  border-block: 1px solid var(--rail);
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
}
.cta-band__inner {
  display: grid;
  gap: var(--space-m);
  align-items: center;
  padding-block: var(--space-xl);
}
@media (min-width: 800px) {
  .cta-band__inner { grid-template-columns: minmax(0, 1fr) auto; }
}
.cta-band h2 { font-size: var(--step-3); max-width: 22ch; }
.cta-band p { color: var(--muted); margin-top: var(--space-xs); max-width: var(--prose); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* ---------------------------------------------------------- page hero --- */

.page-hero { padding-block: var(--space-l) var(--space-xl); border-bottom: 1px solid var(--rail); }
.page-hero__grid {
  display: grid;
  gap: var(--space-xl) var(--col-gap);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .page-hero__grid--with-aside { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}
.page-hero__copy { display: grid; gap: var(--space-s); align-content: start; }
.page-hero h1 { max-width: 20ch; }

.crumbs { margin-bottom: var(--space-m); }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
  color: var(--muted);
}
.crumbs li { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.crumbs li + li::before { content: "/"; color: var(--edge); }
.crumbs a { text-decoration: none; padding-block: var(--space-3xs); }
.crumbs a:hover { text-decoration: underline; color: var(--text); }
.crumbs [aria-current="page"] { color: var(--text); }

/* ------------------------------------------------------------- prose --- */

.prose { max-width: 42rem; }
.prose > * + * { margin-top: var(--space-s); }
.prose h2 { font-size: var(--step-2); margin-top: var(--space-xl); font-stretch: 108%; }
.prose h3 { font-size: var(--step-1); margin-top: var(--space-l); }
.prose h4 { margin-top: var(--space-m); }
.prose p, .prose li { text-wrap: pretty; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: var(--space-3xs); }
.prose li::marker { color: var(--accent-text); }
.prose a { color: var(--accent-text); }
.prose strong { font-weight: 700; }
.prose blockquote {
  padding-left: var(--space-s);
  border-left: 2px solid var(--accent);
  color: var(--muted);
}
.prose img {
  border-radius: var(--radius-card);
  border: 1px solid var(--rail);
  height: auto;
}
.prose figure figcaption { margin-top: var(--space-2xs); font-size: var(--step--1); color: var(--muted); }
.prose table {
  display: block;
  overflow-x: auto;
  width: 100%;
  font-size: var(--step--1);
  border: 1px solid var(--rail);
  border-radius: var(--radius-card);
}
.prose th, .prose td { padding: 0.65rem var(--space-xs); border-bottom: 1px solid var(--rail); text-align: left; vertical-align: top; }
.prose th { font-weight: 600; background: var(--surface-2); }
.prose hr { border: 0; border-top: 1px solid var(--rail); margin-block: var(--space-l); }
.prose .article-emphasis { font-weight: 600; }

.with-aside {
  display: grid;
  gap: var(--space-xl) var(--col-gap);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1000px) {
  .with-aside { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; }
  .with-aside__aside { position: sticky; top: calc(var(--header-h) + var(--subnav-h) + var(--space-m)); }
}

/* ---------------------------------------------------------- blog list --- */

.post-list { display: grid; border-top: 1px solid var(--rail); }
@media (min-width: 800px) {
  .post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
}
@media (min-width: 1100px) {
  .post-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.post-item {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--rail);
}
.post-item__img {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--rail);
}
.post-item__img img { width: 100%; height: 100%; object-fit: cover; }
.post-item time { font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted); }
.post-item h2 { font-size: var(--step-1); line-height: 1.25; font-stretch: 100%; letter-spacing: 0; }
.post-item h2 a { text-decoration: none; }
.post-item h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.post-item p { color: var(--muted); font-size: var(--step--1); line-height: 1.5; }
.post-item__title { font-size: var(--step-1); line-height: 1.25; font-stretch: 100%; letter-spacing: 0; }
.post-item__title a { text-decoration: none; }
.post-item__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.pager__count { margin-top: var(--space-xs); font-size: var(--step--1); color: var(--muted); }

/* ------------------------------------------------------------ article --- */

.page-hero--article { padding-bottom: var(--space-l); }
.article-head { max-width: 48rem; }
.article-head h1 { max-width: none; font-size: var(--step-4); }
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--muted);
}
.article-meta [aria-hidden] { color: var(--edge); }
.hub-link a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-s);
  border: 1px solid var(--rail);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  font-size: var(--step--1);
  text-decoration: none;
}
.hub-link a:hover { border-color: var(--edge); border-left-color: var(--accent); }
.hub-link svg { width: 1em; height: 1em; color: var(--accent-text); }
.article-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.article-body { max-width: 44rem; }
.article-body > p:first-of-type { margin-top: 0; }
.aside-card { display: grid; gap: var(--space-s); padding: var(--space-m); }
.aside-card__title { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); line-height: 1.2; font-stretch: 104%; }
.aside-card .muted { font-size: var(--step--1); line-height: 1.5; }
.aside-card__facts { margin-top: var(--space-2xs); }
.aside-card__facts .fact { grid-template-columns: minmax(0, 1fr) auto; }

.pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-l);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.pager a, .pager span {
  display: inline-grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: var(--space-xs);
  border: 1px solid var(--rail);
  border-radius: var(--radius-control);
  text-decoration: none;
}
.pager a:hover { background: var(--surface-2); border-color: var(--edge); }
.pager [aria-current="page"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 600; }
.pager .gap { border-color: transparent; }

/* ------------------------------------------------------------- footer --- */

.site-footer {
  border-top: 1px solid var(--rail);
  padding-block: var(--space-2xl) var(--space-l);
  font-size: var(--step--1);
}
.site-footer__grid {
  display: grid;
  gap: var(--space-l) var(--col-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.site-footer__brand { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .site-footer__brand { grid-column: auto; }
}
@media (min-width: 1100px) {
  .site-footer__grid { grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)) minmax(0, 3fr); }
}
.site-footer__brand { display: grid; gap: var(--space-s); align-content: start; }
.site-footer__brand svg { width: 11rem; color: var(--text); }
.site-footer__brand p { color: var(--muted); max-width: 26rem; line-height: 1.55; }
.site-footer h2 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-xs);
  font-stretch: 100%;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; }
.site-footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  text-decoration: none;
}
.site-footer li a:hover { text-decoration: underline; }
.site-footer address { font-style: normal; line-height: 1.7; }
.site-footer address a { text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.site-footer address a:hover { text-decoration: underline; }

.site-footer__social { display: flex; gap: var(--space-2xs); margin-top: var(--space-s); }

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-s) var(--space-l);
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--rail);
  color: var(--muted);
}
.site-footer__reg { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m); }
.site-footer__reg .mono { color: var(--text); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m); }
.site-footer__links a { display: inline-flex; min-height: 2.25rem; align-items: center; text-decoration: none; }
.site-footer__links a:hover { text-decoration: underline; color: var(--text); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2.75rem;
  padding-inline: var(--space-xs);
  background: transparent;
  border: 1px solid var(--edge);
  border-radius: var(--radius-control);
  color: var(--text);
  font-size: var(--step--1);
}
.theme-toggle:hover { background: var(--surface-2); }
.theme-toggle svg { width: 1rem; height: 1rem; }
.no-js .theme-toggle { display: none; }

/* ------------------------------------------------------ mobile call bar --- */

.call-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--gutter) calc(var(--space-2xs) + env(safe-area-inset-bottom));
  background: var(--ground);
  border-top: 1px solid var(--rail);
  transition: transform var(--t-reveal) var(--ease);
}
.call-bar.is-hidden { transform: translateY(110%); }
@media (min-width: 900px) { .call-bar { display: none; } }
@media (max-width: 899px) { body { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); } }

/* ----------------------------------------------------------------- 404 --- */

.not-found { padding-block: var(--space-3xl); }
.not-found__code { font-family: var(--font-mono); color: var(--accent-text); font-size: var(--step-1); }

/* ------------------------------------------------------------ motion --- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ------------------------------------------------------------- print --- */

@media print {
  .utility, .site-header, .port-bar, .call-bar, .site-footer__social, .theme-toggle, .quote-card { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  a { color: #000; }
}

/* Theme toggle shows the theme it would switch to. */
.theme-toggle__light { display: none; }
.theme-toggle[data-effective="dark"] .theme-toggle__light { display: block; }
.theme-toggle[data-effective="dark"] .theme-toggle__dark { display: none; }

/* A measurement column holding a range or "Varies" is not an exact figure. */
.table .num--text { color: var(--muted); }