/* Mach - stylesheet
   Palette is seven values. Change them here and the whole site follows. */

:root {
  /* Surfaces */
  --paper:        #EAE8E3;   /* page background (warm) */
  --paper-2:      #F4F2ED;   /* raised: cards, panels, boxes */
  --rule:         #C9C5BD;   /* hairlines and grid seams */
  --petrol:       #0D242A;   /* dark surface: calculator, buttons, emphasis */
  --rule-dark:    rgba(255,255,255,.16); /* hairlines on dark */

  /* Ink */
  --ink:          #15171B;   /* headings, body */
  --muted:        #57544D;   /* labels, card body, secondary copy */
  --ink-on-dark:  #F4F2ED;
  --muted-on-dark:#A3B2B4;
  --faint-on-dark:#92A1A3;   /* calculator footnote */

  /* Accent - one hue, three lightnesses */
  --signal:       #B8431E;   /* on light */
  --signal-lift:  #E07A4E;   /* on dark */
  --signal-deep:  #9C3617;   /* button hover and small light-surface labels */

  /* Type */
  --display: 'Archivo', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  /* Rhythm */
  --shell: 1120px;
  --pad: 28px;
  --section-y: 76px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); }
a:hover { color: var(--signal); }

:focus-visible { outline: 2px solid var(--signal-deep); outline-offset: 3px; }
.section--dark :focus-visible,
.contrast-block :focus-visible { outline-color: var(--signal-lift); }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad); }

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

h1, h2 { font-weight: 800; letter-spacing: -.028em; line-height: 1.04; margin: 0; }
h1 { font-size: clamp(2.5rem, 6.2vw, 4.6rem); max-width: 16ch; }
h2 { font-size: clamp(1.9rem, 3.9vw, 2.9rem); }
h3 { font-weight: 600; font-size: 1.15rem; letter-spacing: -.01em; line-height: 1.3; margin: 0 0 9px; }

p { text-wrap: pretty; }

.lede {
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  line-height: 1.5;
  color: var(--muted);
  max-width: 52ch;
  margin: 0;
}

/* Mono tracking is limited to three steps: .04 tight, .1 normal, .16 wide. */
.mono   { font-family: var(--mono); letter-spacing: .04em; }
.mono-n { font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.mono-w { font-family: var(--mono); letter-spacing: .16em; text-transform: uppercase; }

/* Section eyebrow with trailing rule */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
}
.eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.eyebrow--dark { color: var(--muted-on-dark); }
.eyebrow--dark::after { background: var(--rule-dark); }

.tag {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--signal-deep);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

.btn {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 26px;
  border: 1px solid var(--petrol);
  background: var(--petrol);
  color: var(--ink-on-dark);
  transition: background .16s ease, border-color .16s ease, color .16s ease;
  display: inline-block;
  cursor: pointer;
}
.btn:hover { background: var(--signal-deep); border-color: var(--signal-deep); color: var(--ink-on-dark); }

.btn--ghost { background: transparent; color: var(--petrol); }
.btn--ghost:hover { background: var(--petrol); color: var(--ink-on-dark); }

/* ---------- Header ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 93%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.site-head__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 15px var(--pad);
  max-width: var(--shell);
  margin: 0 auto;
}
.brand {
  font-family: var(--display);
  font-weight: 800;
  font-size: 20.5px;
  letter-spacing: .015em;
  line-height: 1;
  text-decoration: none;
  color: var(--petrol);
}
.brand,
.brand:hover,
.brand:focus,
.brand:active { color: var(--petrol) !important; }
.brand span,
.brand:hover span,
.brand:focus span,
.brand:active span { color: var(--signal) !important; }
.site-nav { display: flex; flex-wrap: wrap; gap: 24px; font-size: 12px; }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover { color: var(--ink); }

@media (max-width: 767px) {
  .site-head__in { flex-wrap: nowrap; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
  .site-nav { display: none; }
  .site-head__in > .btn { padding: 12px 14px; font-size: 10.5px; white-space: nowrap; }
}

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

.section { padding: var(--section-y) 0; border-bottom: 1px solid var(--rule); }
.section--hero { padding-top: 88px; padding-bottom: 64px; }
.section--dark { background: var(--petrol); color: var(--ink-on-dark); border-bottom: 0; }
.section--dark h2 { color: var(--ink-on-dark); }
.section--dark .lede { color: var(--muted-on-dark); }

.section__head { max-width: 62ch; margin-bottom: 44px; }
.section__head h2 { margin-bottom: 18px; }
.section__head h2:only-child, .section__head h2:last-child { margin-bottom: 0; }

.contrast-block {
  margin-bottom: 44px;
  padding: 28px;
  border: 1px solid var(--petrol);
  background: var(--petrol);
  color: var(--ink-on-dark);
}
.contrast-block .tag { display: block; margin-bottom: 14px; color: var(--signal-lift); }
.contrast-block h2 { margin-bottom: 14px; color: var(--ink-on-dark); font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.contrast-block p:last-child { max-width: 78ch; margin: 0; color: var(--muted-on-dark); font-size: 15px; line-height: 1.6; }

/* Plain two-part disclosure. Deliberately unnumbered and unlabelled. The
   founder line and the role disclosure carry themselves without scaffolding. */
.disclosure {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px;
}
.disclosure p { max-width: 48ch; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.disclosure strong { color: var(--petrol); font-weight: 600; }
.disclosure a { color: var(--ink); text-underline-offset: 3px; }

/* Square, hairlined, sized like a document photo rather than a hero portrait. */
.disclosure__founder { display: flex; gap: 18px; align-items: flex-start; }
.disclosure__photo {
  flex: 0 0 auto;
  width: 104px;
  height: 104px;
  border: 1px solid var(--rule);
  object-fit: cover;
  filter: saturate(.92);
}

@media (max-width: 820px) {
  .disclosure { grid-template-columns: 1fr; gap: 22px; }
  .disclosure p { max-width: none; }
}
/* Side by side leaves the text ~25ch on a phone. Stack instead. */
@media (max-width: 620px) {
  .disclosure__founder { flex-direction: column; gap: 14px; }
  .disclosure__photo { width: 88px; height: 88px; }
}

/* ---------- Cell strips ----------
   Fixed-count strips use wrapping flex with a growable basis, so a wrapped row
   stretches to fill the width instead of leaving a gap. Borders sit on the
   cells; the parent supplies the seam colour. */

.strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.strip > * { background: var(--paper-2); }
.strip--dark { background: var(--rule-dark); border-color: var(--rule-dark); }
.strip--dark > * { background: var(--petrol); }
.strip--dark .card h3 { color: var(--ink-on-dark); }
.strip--dark .card p { color: var(--muted-on-dark); }
.section--dark .tag { color: var(--signal-lift); }

/* Cell counts are pinned explicitly. A growable flex-basis stretches a wrapped
   row but cannot control how many items wrap, so a basis wider than the
   container always yields 3+1 with the orphan spanning full width. */
.cell-4 { flex: 1 1 calc(25% - 1px); min-width: 0; padding: 26px 22px; }
.cell-2 { flex: 1 1 calc(50% - 1px); min-width: 0; padding: 24px; }
.cell-3 { flex: 1 1 calc(33.333% - 1px); min-width: 0; padding: 24px; }
.cell-half { flex: 1 1 calc(50% - 1px); min-width: 0; padding: 34px; }

@media (max-width: 980px) { .cell-4 { flex-basis: calc(50% - 1px); } }
@media (max-width: 620px) {
  .cell-4, .cell-2, .cell-3, .cell-half { flex-basis: 100%; }
}
@media (min-width: 621px) and (max-width: 980px) { .cell-3 { flex-basis: calc(50% - 1px); } }
.card p { font-size: 15px; color: var(--muted); margin: 0; line-height: 1.55; }
.card p a { color: var(--ink); text-underline-offset: 3px; }
.card .tag { display: block; margin-bottom: 14px; }

/* ---------- Connected operating path ---------- */

.operating-path {
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.operating-path::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 23px;
  left: 24px;
  right: calc(25% - 24px);
  height: 2px;
  background: var(--petrol);
}
.operating-path__step {
  position: relative;
  z-index: 1;
  flex: 1 1 25%;
  min-width: 0;
  padding-right: 28px;
}
.operating-path__step:last-child { padding-right: 0; }
.operating-path__marker {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--petrol);
  background: var(--paper);
  color: var(--signal);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
}
.operating-path__body { margin-top: 20px; }
.operating-path__body .tag { display: block; margin-bottom: 12px; font-size: 10.5px; letter-spacing: .1em; }
.operating-path__body p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; }

@media (max-width: 820px) {
  .operating-path { flex-wrap: wrap; }
  .operating-path::before {
    top: 24px;
    bottom: 24px;
    left: 23px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .operating-path__step {
    flex-basis: 100%;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 20px;
    padding: 0 0 30px;
  }
  .operating-path__step:last-child { padding-bottom: 0; }
  .operating-path__body { margin-top: 0; }
}

/* ---------- Data tables ----------
   One component for the service levels and the regulated-cargo matrix.
   --stack collapses to rows on mobile; --wide stays a desktop matrix and
   becomes labeled configuration cards on small screens. */

.data-table { border: 1px solid var(--petrol); background: var(--paper-2); }
.data-table--service { max-width: 960px; }
.data-table__wrap { overflow-x: auto; }
.data-table table { width: 100%; border-collapse: collapse; }
.data-table__caption {
  padding: 16px 20px 12px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-align: left;
  text-transform: uppercase;
}
.data-table th,
.data-table td {
  padding: 18px 20px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
  font-size: 14.5px;
  line-height: 1.55;
}
.data-table thead th {
  background: var(--petrol);
  color: var(--ink-on-dark);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.data-table tbody th { color: var(--petrol); font-weight: 600; font-size: 15px; }
.data-table tbody td { color: var(--muted); }
.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td { border-bottom: 0; }

.data-table--stack tbody th { width: 30%; }

.data-table--wide { min-width: 800px; }
.data-table--wide tbody th { width: 21%; }
.data-table--wide td:nth-of-type(1) {
  width: 15%;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .04em;
  white-space: nowrap;
}
.data-table--wide td:nth-of-type(2) { width: 35%; }
.data-table--wide .cargo-code { color: var(--signal-deep); font-weight: 600; }
.data-table--wide .cargo-code--neutral { color: var(--muted); }
.data-table--wide .cargo-preferred { background: var(--paper); }
.data-table--wide .cargo-acceptance { color: var(--ink); font-weight: 600; }

.data-table--dark { border-color: var(--rule-dark); background: transparent; }
.data-table--dark th,
.data-table--dark td { border-bottom-color: var(--rule-dark); }
.data-table--dark thead th { border-bottom-color: var(--signal); }
.data-table--dark tbody th { color: var(--ink-on-dark); }
.data-table--dark tbody td { color: var(--muted-on-dark); }
.data-table--dark tbody td:nth-of-type(1) { color: var(--signal-lift); }

@media (max-width: 620px) {
  .data-table .data-table__wrap { overflow-x: visible; }
  .data-table .data-table--wide { min-width: 0; }
  .data-table .data-table--wide,
  .data-table .data-table--wide tbody,
  .data-table .data-table--wide tr { display: block; }
  .data-table .data-table--wide thead { display: none; }
  .data-table .data-table--wide tbody tr {
    padding: 18px 16px;
    border-bottom: 1px solid var(--rule);
  }
  .data-table .data-table--wide tbody tr:last-child { border-bottom: 0; }
  .data-table .data-table--wide tbody th,
  .data-table .data-table--wide tbody td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
  }
  .data-table .data-table--wide tbody th {
    margin-bottom: 12px;
    font-size: 15px;
  }
  .data-table .data-table--wide tbody td {
    display: grid;
    grid-template-columns: minmax(92px, 30%) minmax(0, 1fr);
    gap: 12px;
    margin-top: 10px;
    font-size: 14px;
    white-space: normal;
  }
  .data-table .data-table--wide tbody td::before {
    content: attr(data-label);
    color: var(--muted);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .1em;
    line-height: 1.4;
    text-transform: uppercase;
  }
  .data-table--dark .data-table--wide tbody tr { border-bottom-color: var(--rule-dark); }
  .data-table--dark .data-table--wide tbody td::before { color: var(--faint-on-dark); }
  .data-table__caption { padding: 14px 16px 11px; font-size: 10.5px; }
  .scroll-hint { display: none; }
}

.table-foot {
  max-width: 84ch;
  margin: 18px 0 0;
  color: var(--faint-on-dark);
  font-size: 13.5px;
  line-height: 1.6;
}

/* Only shown where the wide matrix actually needs sideways scrolling. */
.scroll-hint {
  display: none;
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint-on-dark);
}

/* The matrix is 800px wide plus shell padding and borders. */
@media (max-width: 862px) {
  .scroll-hint { display: block; }
}

#cargo .section__head h2 { max-width: 26ch; }
#cargo .scroll-hint { color: var(--muted); }

/* ---------- Situations ---------- */

.situations { margin-top: 44px; }
.situations h3 {
  margin: 0 0 20px;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}
.situation-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  border: 1px solid var(--rule);
  background: var(--rule);
}
.situation-grid article {
  flex: 1 1 calc(25% - 1px);
  min-width: 0;
  padding: 24px 22px;
  background: var(--paper-2);
}
.situation-grid h4 {
  margin: 0 0 8px;
  font-size: 1.04rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
}
.situation-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}
@media (max-width: 980px) {
  .situation-grid article { flex-basis: calc(50% - 1px); }
}
@media (max-width: 620px) {
  .situation-grid article { flex-basis: 100%; }
}

/* ---------- Forwarding comparison ---------- */

.control-flow {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-top: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
  background: var(--rule-dark);
}
.control-flow__step {
  padding: 26px 0;
  background: var(--petrol);
}
.control-flow__label {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--signal-lift);
}
.control-flow__pair {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}
.control-flow__pair p {
  flex: 1 1 calc(50% - 13px);
  min-width: 0;
  margin: 0;
  padding-left: 16px;
  border-left: 1px solid rgba(255,255,255,.22);
  color: var(--muted-on-dark);
  font-size: 15.5px;
  line-height: 1.55;
}
.control-flow__pair p:last-child {
  border-left: 2px solid var(--signal-lift);
  color: var(--ink-on-dark);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.45;
}
.control-flow__legend {
  margin: 22px 0 0;
  color: var(--faint-on-dark);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
}

@media (max-width: 620px) {
  .control-flow__pair { gap: 16px; }
  .control-flow__pair p { flex-basis: 100%; }
}

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

.hero-copy { margin: 0 0 36px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-note { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--muted); }
.hero-route { max-width: 760px; margin: 38px 0 0; color: var(--petrol); }
.hero-route svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero-route__mobile { display: none; }
.hero-route .route-line { fill: none; stroke: var(--signal); stroke-width: 2; stroke-dasharray: 5 7; }
.hero-route .route-arrowhead { fill: var(--signal); }
.hero-route .route-node { fill: var(--petrol); stroke: var(--paper); stroke-width: 5; }
.hero-route text { font-family: var(--mono); text-transform: uppercase; }
.hero-route .route-kicker { fill: var(--muted); font-size: 10px; letter-spacing: .16em; }
.hero-route .route-codes { fill: var(--petrol); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.lane-note { margin: 12px 0 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--muted); }

.lane {
  margin: 44px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--petrol);
}
.lane > div { flex: 1 1 calc(25% - 1px); min-width: 0; background: var(--paper-2); padding: 16px 18px; }
@media (max-width: 980px) { .lane > div { flex-basis: calc(50% - 1px); } }
@media (max-width: 620px) { .lane > div { flex-basis: 100%; } }
.lane dt {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.lane dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

/* ---------- Emphasis bar ---------- */

.note-bar {
  margin-top: 34px;
  border: 1px solid var(--petrol);
  border-top-color: var(--rule-dark);
  padding: 26px 28px;
  background: var(--petrol);
  color: var(--ink-on-dark);
}
.note-bar p {
  margin: 0;
  font-weight: 600;
  font-size: 1.22rem;
  letter-spacing: -.02em;
  line-height: 1.35;
}
/* ---------- Calculator ----------
   Not used on the homepage. Retained, together with the guarded calculator
   logic in app.js, so the tool can be restored on its own page if customers
   ask for it. Delete both together if that never happens. */

.field { margin-bottom: 26px; }
.field:last-child { margin-bottom: 0; }
.field label {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  margin-bottom: 11px;
}
.field__row { display: flex; align-items: center; gap: 14px; }
.field input[type=range] { flex: 1; min-width: 0; height: 6px; accent-color: var(--signal-lift); }
.field output {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-on-dark);
  min-width: 96px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.field__money {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--rule-dark);
  padding: 10px 12px;
}
.field__money:focus-within { border-color: var(--signal-lift); outline: 2px solid var(--signal-lift); outline-offset: 1px; }
.field__money span { color: var(--muted-on-dark); font-family: var(--mono); font-size: 13px; }
.field__money input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink-on-dark);
  font-family: var(--mono);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.field__money--days input { text-align: right; }

.out { margin-bottom: 30px; }
.out__label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  margin-bottom: 10px;
}
.out__num {
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.out__num--lg { font-size: clamp(2.1rem, 5vw, 3.1rem); color: var(--signal-lift); }
.out__num--sm { font-size: clamp(1.5rem, 3.2vw, 2rem); color: var(--ink-on-dark); }
.out__sub { font-size: 14.5px; color: var(--muted-on-dark); margin-top: 9px; line-height: 1.5; }

.calc-foot {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--faint-on-dark);
  line-height: 1.65;
  padding-top: 22px;
  border-top: 1px solid var(--rule-dark);
}
.calc-decision { margin-top: 28px; }
.calc-decision-details > summary { display: none; }
.calc-decision-details > summary::-webkit-details-marker { display: none; }

/* ---------- FAQ ---------- */

.faq { max-width: 78ch; border-top: 1px solid var(--rule); }
.faq details { min-width: 0; border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--signal);
}
.faq details[open] summary::after { content: '−'; }
.faq__answer {
  max-width: 66ch;
  padding: 0 0 22px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}
.faq__answer p { margin: 0 0 14px; }
.faq__answer p:last-child { margin-bottom: 0; font-size: 15px; }

/* ---------- Start ---------- */

.start-box { background: var(--paper-2); border: 1px solid var(--petrol); padding: 46px; }
.start-box h2 { margin-bottom: 20px; max-width: 20ch; }
.start-box .lede { margin-bottom: 32px; }

.brief { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--rule); }
.brief-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.brief-grid--quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.brief-kicker { display: block; margin: 0 0 12px; }
.brief-field { display: grid; gap: 7px; min-width: 0; }
.brief-field--wide { grid-column: 1 / -1; }
.brief-field label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.brief-field label span[aria-hidden="true"] { color: var(--signal); }
.brief-optional { font-size: 10px; letter-spacing: .04em; text-transform: none; color: var(--muted); }
.brief-field input,
.brief-field select,
.brief-field textarea {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  padding: 12px 13px;
}
.brief-field textarea { min-height: 108px; resize: vertical; }
.brief-field input::placeholder,
.brief-field textarea::placeholder { color: var(--muted); opacity: .85; }
.brief-field input:focus,
.brief-field select:focus,
.brief-field textarea:focus { border-color: var(--petrol); outline: 2px solid var(--signal); outline-offset: 1px; }
.brief-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.brief .cf-turnstile { margin-top: 20px; }
.brief-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 22px; }
.brief-actions .btn[disabled] { cursor: wait; opacity: .58; }
.brief-note { margin: 14px 0 0; color: var(--muted); font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; line-height: 1.6; }
.brief-note a { color: var(--ink); }
.brief-privacy { max-width: 78ch; margin: 10px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.brief-more { margin-top: 26px; border: 1px solid var(--rule); background: var(--paper); }
.brief-more summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  color: var(--petrol);
  font-weight: 600;
  line-height: 1.4;
}
.brief-more summary::-webkit-details-marker { display: none; }
.brief-more summary::after { content: '+'; color: var(--signal); font-family: var(--mono); font-size: 1.2rem; font-weight: 400; }
.brief-more[open] summary::after { content: '−'; }
.brief-more__body { padding: 24px 20px; border-top: 1px solid var(--rule); }

.privacy-copy { max-width: 76ch; color: var(--muted); font-size: 15px; line-height: 1.65; }
.privacy-copy p { margin: 0 0 16px; }
.privacy-copy p:last-child { margin-bottom: 0; }
.privacy-copy strong { color: var(--ink); }
.privacy-copy a { color: var(--ink); }
.privacy-effective { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; }

@media (max-width: 620px) {
  .start-box { padding: 30px 22px; }
  .note-bar { padding: 22px; }
  .data-table th,
  .data-table td { padding: 15px 16px; }
  .data-table--stack,
  .data-table--stack tbody,
  .data-table--stack tr { display: block; }
  .data-table--stack thead { display: none; }
  .data-table--stack tbody tr { padding: 18px 16px; border-bottom: 1px solid var(--rule); }
  .data-table--stack tbody tr:last-child { border-bottom: 0; }
  .data-table--stack tbody th,
  .data-table--stack tbody td { display: block; width: auto; padding: 0; border: 0; }
  .data-table--stack tbody th { margin-bottom: 8px; }
  .data-table--stack tbody td::before {
    content: 'When it fits';
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .faq { grid-template-columns: 1fr; gap: 8px; }
  .faq summary { font-size: 1rem; }
  .faq__answer { padding-right: 28px; }
  .brief-grid { grid-template-columns: 1fr; gap: 14px; }
  .brief-grid--quick { grid-template-columns: 1fr; }
  .brief-field--wide { grid-column: auto; }
  .hero-route { margin-top: 30px; }
  .hero-route .hero-route__svg { display: none; }
  .hero-route__mobile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
  }
  .hero-route__mobile-block { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .hero-route__mobile-block span {
    color: var(--muted);
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .1em;
    line-height: 1.35;
    text-transform: uppercase;
  }
  .hero-route__mobile-block strong {
    color: var(--petrol);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.45;
  }
  .hero-route__mobile-arrow { color: var(--signal); font-family: var(--mono); font-size: 18px; }
  .scroll-hint { display: none; }
  .calc-decision-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border: 1px solid var(--rule-dark);
    background: var(--petrol);
    color: var(--ink-on-dark);
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .calc-decision-details > summary::after { content: '+'; color: var(--signal-lift); font-size: 1.2rem; font-weight: 400; }
  .calc-decision-details[open] > summary { border-bottom-color: var(--signal); }
  .calc-decision-details[open] > summary::after { content: '−'; }
  .calc-decision-details .calc-decision__body { border-top: 0; }
}

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

.site-foot { padding: 56px 0 44px; font-size: 14.5px; }
.foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 40px;
}
.foot-meta,
.foot-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
.foot-meta {
  color: var(--muted);
  font-family: var(--display);
  font-size: inherit;
  letter-spacing: normal;
}
.foot-contact { color: var(--muted); }
.foot-meta a,
.foot-contact a { color: var(--muted); }

@media (max-width: 620px) {
  .site-foot { padding: 44px 0 32px; }
  .foot-row { align-items: flex-start; flex-direction: column; gap: 18px; }
  .foot-meta,
  .foot-contact { align-items: flex-start; }
}

/* ---------- Motion ---------- */

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .62s cubic-bezier(.2,.7,.3,1) both; }
.rise-1 { animation-delay: .05s; }
.rise-2 { animation-delay: .13s; }
.rise-3 { animation-delay: .21s; }
.rise-4 { animation-delay: .29s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}