/* ================================================================
   MASHOFE.COM - Cabanga Africa (Pty) Ltd
   Corridor at dusk. Bitumen ground, high-visibility amber accent,
   bone light. Signature device: the route plate.
   ================================================================ */

/* ---------------- self-hosted type ---------------- */
@font-face{font-family:'Barlow';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/Barlow-400.woff') format('woff')}
@font-face{font-family:'Barlow';font-weight:500;font-style:normal;font-display:swap;src:url('../fonts/Barlow-500.woff') format('woff')}
@font-face{font-family:'Barlow';font-weight:600;font-style:normal;font-display:swap;src:url('../fonts/Barlow-600.woff') format('woff')}
@font-face{font-family:'Barlow Condensed';font-weight:600;font-style:normal;font-display:swap;src:url('../fonts/BarlowCondensed-600.woff') format('woff')}
@font-face{font-family:'Barlow Condensed';font-weight:700;font-style:normal;font-display:swap;src:url('../fonts/BarlowCondensed-700.woff') format('woff')}
@font-face{font-family:'Barlow Condensed';font-weight:800;font-style:normal;font-display:swap;src:url('../fonts/BarlowCondensed-800.woff') format('woff')}

:root {
  --bit:        #131A22;
  --bit-2:      #1A232D;
  --bit-3:      #26313D;
  --bit-line:   #35404E;
  --amber:       #E08A1E;
  --amber-lift:  #F2A544;
  --amber-deep:  #8D5207;
  --bone:       #F2EEE6;
  --bone-lift:  #FAF7F1;
  --bone-line:  #DCD5C9;
  --slate:      #5A6470;
  --slate-soft: #838C97;
  --ink:        #171C22;
  --r:          4px;
  --topbar:     58px;
  --tabbar:     58px;
  --wrap:       1120px;
  --font-display: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", "DejaVu Sans Condensed", system-ui, sans-serif;
  --font-body:    "Barlow", "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  padding-bottom: var(--tabbar);
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; }
img { height: auto; }

a { color: var(--amber-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--bit); }

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

.skip {
  position: absolute; left: 8px; top: -60px;
  background: var(--amber); color: var(--bit);
  padding: 10px 14px; border-radius: var(--r);
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .06em; z-index: 60; transition: top .12s;
}
.skip:focus { top: 8px; }

/* ---------------- type ---------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.005em;
  margin: 0 0 12px;
}

h1 { font-size: clamp(2.1rem, 7.4vw, 3.6rem); text-transform: uppercase; letter-spacing: .01em; }
h2 { font-size: clamp(1.5rem, 4.6vw, 2.15rem); text-transform: uppercase; letter-spacing: .015em; }
h3 { font-size: 1.22rem; letter-spacing: .01em; }
h4 { font-size: 1.02rem; }

p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .78rem;
  color: var(--amber);
  margin: 0 0 10px;
  display: block;
}
.eyebrow-dark { color: var(--slate); }

.lede { font-size: 1.12rem; color: #333A42; max-width: 62ch; }
.muted { color: var(--slate); }
.small { font-size: .88rem; }

.rule { height: 1px; background: var(--bone-line); border: 0; margin: 28px 0; }

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

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 18px; }
.section { padding: 40px 0; }
.section-tight { padding: 26px 0; }
.section-bit { background: var(--bit); color: var(--bone); }
.section-bit h2, .section-bit h3 { color: var(--bone-lift); }
.section-bit .lede { color: #B9C2CC; }
.section-bit a { color: var(--amber-lift); }

.grid { display: grid; gap: 14px; }
@media (min-width: 721px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 981px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------- top bar ---------------- */

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--bit);
  border-bottom: 1px solid var(--bit-line);
}
.topbar-in {
  height: var(--topbar);
  display: flex; align-items: center; gap: 14px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand:hover { color: inherit; }
.brand-mark { width: 32px; height: 32px; flex: none; }
.brand-logo { display: block; height: 26px; width: auto; flex: none; }
@media (max-width: 420px) { .brand-logo { height: 22px; } }
.brand-name {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 1.16rem;
  color: var(--bone-lift);
  line-height: 1;
}
.brand-sub {
  display: none;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .66rem;
  color: var(--slate-soft);
  margin-top: 3px;
}

.sectionnav { display: none; margin-left: auto; gap: 4px; }
.sectionnav a {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .86rem;
  color: #A3AEBA;
  text-decoration: none;
  padding: 8px 11px;
  border-radius: var(--r);
  white-space: nowrap;
}
.sectionnav a:hover { color: var(--bone-lift); background: var(--bit-2); }
.sectionnav a[aria-current="page"] { color: var(--amber); background: var(--bit-2); }

@media (min-width: 721px) {
  .sectionnav { display: flex; }
  body { padding-bottom: 0; }
}

/* ---------------- bottom tabs ---------------- */

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: var(--bit);
  border-top: 1px solid var(--bit-line);
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; height: var(--tabbar);
  text-decoration: none; color: #8C97A3;
  font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: .08em; font-size: .68rem;
}
.tabbar a[aria-current="page"] { color: var(--amber); }
.tabbar svg { width: 20px; height: 20px; }
@media (min-width: 721px) { .tabbar { display: none; } }

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

.hero { background: var(--bit); color: var(--bone); padding: 46px 0 40px; position: relative; overflow: hidden; }
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: linear-gradient(90deg, var(--amber-deep), var(--amber) 40%, var(--amber-deep) 70%, transparent);
}
.hero h1 { color: var(--bone-lift); max-width: 15ch; }
.hero .lede { color: #C2BDB2; }
.hero-plate { position: absolute; right: -34px; top: 22px; width: 210px; opacity: .1; pointer-events: none; }
@media (min-width: 721px) {
  .hero { padding: 74px 0 62px; }
  .hero-plate { right: 40px; top: 40px; width: 260px; opacity: .16; }
  .hero .lede { max-width: 52ch; }
}

.doors { display: grid; gap: 12px; margin-top: 26px; }
@media (min-width: 601px) { .doors { grid-template-columns: 1fr 1fr; max-width: 700px; } }

.door {
  display: block; text-decoration: none;
  background: var(--bit-2); border: 1px solid var(--bit-line);
  border-radius: var(--r); padding: 16px 18px;
  color: var(--bone);
}
.door:hover { border-color: var(--amber); color: var(--bone); }
.door strong {
  display: block; font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .06em; font-size: 1.24rem; color: var(--bone-lift); margin-bottom: 2px;
}
.door span { color: #96A2AF; font-size: .93rem; }
.door em { font-style: normal; color: var(--amber); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em;
  font-size: .95rem; line-height: 1;
  padding: 14px 20px; border-radius: var(--r);
  background: var(--amber); color: var(--bit);
  border: 1px solid var(--amber); text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--amber-lift); border-color: var(--amber-lift); color: var(--bit); }
.section-bit a.btn, .hero a.btn, .section-bit a.btn:hover, .hero a.btn:hover { color: var(--bit); }
.btn-ghost { background: transparent; color: var(--bit); border-color: var(--bit); }
.btn-ghost:hover { background: var(--bit); color: var(--bone); }
.section-bit a.btn-ghost, .section-bit .btn-ghost, .hero a.btn-ghost, .hero .btn-ghost {
  color: var(--bone); border-color: #47535F; background: transparent;
}
.section-bit a.btn-ghost:hover, .section-bit .btn-ghost:hover,
.hero a.btn-ghost:hover, .hero .btn-ghost:hover { background: var(--bit-3); color: var(--bone-lift); border-color: var(--amber); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btnrow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

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

.card {
  background: var(--bone-lift);
  border: 1px solid var(--bone-line);
  border-radius: var(--r);
  padding: 18px;
}
.section-bit .card { background: var(--bit-2); border-color: var(--bit-line); color: #B9C2CC; }

/* corridor card - the assay stamp sits into the top-left */
.listing {
  display: block; text-decoration: none; color: inherit;
  background: var(--bone-lift);
  border: 1px solid var(--bone-line);
  border-radius: var(--r);
  padding: 16px 16px 14px;
  position: relative;
}
.listing:hover { border-color: var(--amber); color: inherit; }
.listing:hover .listing-go { color: var(--amber-deep); }
.corridor-head { display: flex; gap: 12px; align-items: flex-start; }
.listing-plate { width: 46px; height: 46px; flex: none; margin-top: 1px; }
.listing-place {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 1.3rem; line-height: 1.06; letter-spacing: .015em;
}
.listing-country { color: var(--slate); font-size: .86rem; letter-spacing: .02em; }
.listing-figure {
  display: flex; align-items: baseline; gap: 7px;
  margin: 14px 0 2px; padding-top: 12px;
  border-top: 1px solid var(--bone-line);
}
.listing-qty { font-family: var(--font-display); font-size: 2.3rem; line-height: 1; letter-spacing: -.01em; }
.listing-unit { font-family: var(--font-display); text-transform: uppercase; font-size: 1rem; color: var(--amber-deep); letter-spacing: .08em; }
.listing-what { font-family: var(--font-display); text-transform: uppercase; font-size: .84rem; letter-spacing: .12em; color: var(--slate); }
.listing-meta { color: var(--slate); font-size: .88rem; margin-top: 6px; }
.listing-go {
  margin-top: 12px; font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .1em; font-size: .82rem; color: var(--slate);
}

.plate-strike { transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .plate-strike { animation: strike .34s cubic-bezier(.2,.9,.3,1) both; }
}
@keyframes strike {
  from { opacity: 0; transform: scale(1.13) rotate(-6deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}

/* ---------------- figures / stat row ---------------- */

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--bone-line); border: 1px solid var(--bone-line); border-radius: var(--r); overflow: hidden; }
.section-bit .stats { background: var(--bit-line); border-color: var(--bit-line); }
.stat { background: var(--bone-lift); padding: 14px 16px; }
.section-bit .stat { background: var(--bit-2); }
.stat-n { font-family: var(--font-display); font-size: 1.9rem; line-height: 1.05; }
.section-bit .stat-n { color: var(--bone-lift); }
.stat-l { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; color: var(--slate); }
@media (min-width: 721px) { .stats { grid-template-columns: repeat(4, 1fr); } }

/* ---------------- steps (a real sequence) ---------------- */

.steps { counter-reset: step; display: grid; gap: 14px; }
.step { position: relative; padding-left: 52px; }
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute; left: 0; top: -2px;
  font-family: var(--font-display); font-size: 1.5rem;
  color: var(--amber); letter-spacing: .04em;
}
.step h3 { margin-bottom: 4px; }
@media (min-width: 721px) { .steps-3 { grid-template-columns: repeat(3, 1fr); gap: 26px; } }

/* ---------------- does / does not ---------------- */

.ledger { display: grid; gap: 12px; }
@media (min-width: 721px) { .ledger { grid-template-columns: 1fr 1fr; gap: 18px; } }
.ledger-col { border: 1px solid var(--bone-line); border-radius: var(--r); padding: 16px 18px; background: var(--bone-lift); }
.ledger-col h3 { display: flex; align-items: center; gap: 8px; }
.ledger ul { list-style: none; margin: 0; padding: 0; }
.ledger li { padding: 8px 0 8px 24px; border-top: 1px solid var(--bone-line); position: relative; }
.ledger li::before { position: absolute; left: 0; top: 8px; font-family: var(--font-display); }
.ledger-does li::before { content: "+"; color: var(--amber-deep); font-size: 1.2rem; line-height: 1.2; }
.ledger-not li::before { content: "\2013"; color: var(--slate); font-size: 1.2rem; line-height: 1.2; }

/* ---------------- forms ---------------- */

.form { max-width: 620px; }
.field { margin-bottom: 16px; }
.field > label, .fieldset > legend {
  display: block;
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .1em; font-size: .82rem; color: var(--bit);
  margin-bottom: 6px; padding: 0;
}
.hint { color: var(--slate); font-size: .84rem; margin: 0 0 6px; }
select, input[type="text"], input[type="tel"], input[type="email"], input[type="number"], textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem;
  padding: 12px 12px; border: 1px solid #C3BEB3; border-radius: var(--r);
  background: #FFFEFB; color: var(--ink);
}
select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--slate) 50%), linear-gradient(135deg, var(--slate) 50%, transparent 50%); background-position: calc(100% - 18px) 22px, calc(100% - 12px) 22px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 34px; }
textarea { min-height: 96px; resize: vertical; }
select:focus, input:focus, textarea:focus { border-color: var(--amber); }
.field-err select, .field-err input, .field-err textarea { border-color: #9C3226; background: #FFF7F4; }
.err { color: #9C3226; font-size: .85rem; margin-top: 5px; display: none; }
.field-err .err { display: block; }
.row2 { display: grid; gap: 12px; }
@media (min-width: 601px) { .row2 { grid-template-columns: 1fr 1fr; } }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.check input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.fieldset { border: 0; padding: 0; margin: 0 0 16px; }
.dial { display: grid; grid-template-columns: 116px 1fr; gap: 10px; }
.formnote {
  margin-top: 18px; padding: 14px 16px; border-radius: var(--r);
  background: #E8E3D8; border: 1px solid var(--bone-line); font-size: .9rem; color: #3E4650;
}

/* a form sitting on a bitumen section still has to be readable */
.section-bit .field > label, .section-bit .fieldset > legend { color: var(--bone-lift); }
.section-bit .hint { color: #93A0AD; }
.section-bit .check { color: var(--bone); }
.section-bit .formnote { background: var(--bit-2); border-color: var(--bit-line); color: #B9C2CC; }
.section-bit .callout { background: var(--bit-2); border-color: var(--bit-line); color: var(--bone); }

/* Light-surface components are allowed to sit inside a bitumen section.
   When they do, the section's own colours would put bone text on a bone
   card, so each light surface resets itself and its children back to ink. */
.section-bit .ledger-col,
.section-bit .tier,
.section-bit .corridor,
.section-bit .refcard { color: var(--ink); }

.section-bit .ledger-col h3,
.section-bit .tier h3,
.section-bit .corridor h3,
.section-bit .refcard h3 { color: var(--ink); }

.section-bit .ledger-col a,
.section-bit .tier a,
.section-bit .corridor a,
.section-bit .refcard a { color: var(--amber-deep); }

.section-bit .ledger li { border-top-color: var(--bone-line); }
.section-bit .ledger-col .small,
.section-bit .refcard .small,
.section-bit .tier-who,
.section-bit .corridor .corridor-route,
.section-bit .corridor .fact-l { color: var(--slate); }
.section-bit .corridor .fact-v { color: var(--ink); }
.section-bit .refcode { color: var(--ink); }

/* ---------------- filters ---------------- */

.filters { display: grid; gap: 10px; margin-bottom: 18px; }
@media (min-width: 721px) { .filters { grid-template-columns: repeat(3, 1fr) auto; align-items: end; } }
.filters .field { margin-bottom: 0; }
.filter-count { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; color: var(--slate); padding-bottom: 12px; }

.empty { border: 1px dashed var(--bone-line); border-radius: var(--r); padding: 30px 20px; text-align: center; color: var(--slate); }
.empty h3 { color: var(--ink); }

/* ---------------- reference code ---------------- */

.refcard {
  border: 1px solid var(--bit-line); border-radius: var(--r);
  background: var(--bit); color: var(--bone-lift);
  padding: 22px; text-align: center;
}
.refcode {
  font-family: var(--font-display); font-size: clamp(2rem, 9vw, 3rem);
  letter-spacing: .12em; color: var(--amber); line-height: 1;
  margin: 6px 0 10px;
}
.refcard p { color: #A3AEBA; }

.watchlist { list-style: none; padding: 0; margin: 0; }
.watchlist li { border-top: 1px solid var(--bone-line); padding: 12px 0; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.linkbtn { background: none; border: 0; padding: 0; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; color: var(--amber-deep); cursor: pointer; }
.linkbtn:hover { color: var(--bit); }

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

.prose { max-width: 70ch; }
.prose h2 { margin-top: 30px; }
.prose h3 { margin-top: 22px; }
.prose ul, .prose ol { padding-left: 20px; margin: 0 0 14px; }
.prose li { margin-bottom: 6px; }
.prose dt { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; margin-top: 16px; }
.prose dd { margin: 4px 0 0; }

.callout {
  border-left: 3px solid var(--amber);
  background: var(--bone-lift);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 14px 16px; margin: 18px 0;
}

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

.footer { background: var(--bit); color: #96A2AF; padding: 34px 0 30px; margin-top: 20px; }
.footer .foot-h { color: var(--bone-lift); font-size: .9rem; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 10px; }
.footer a { color: #AEB8C3; text-decoration: none; }
.footer a:hover { color: var(--amber); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 7px; font-size: .93rem; }
.footer-grid { display: grid; gap: 24px; }
@media (min-width: 721px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-legal { border-top: 1px solid var(--bit-line); margin-top: 26px; padding-top: 18px; font-size: .84rem; color: #79838F; }
.footer-legal p { margin-bottom: 6px; }

/* ---------------- misc ---------------- */

.tag {
  display: inline-block; font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .12em; font-size: .72rem; padding: 3px 8px; border-radius: var(--r);
  background: #E3E0D8; color: #3B444E; border: 1px solid var(--bone-line);
}
.tag-amber { background: rgba(224,138,30,.16); border-color: rgba(224,138,30,.5); color: var(--amber-deep); }
.section-bit .tag { background: var(--bit-3); border-color: var(--bit-line); color: #AEB8C3; }

.breadcrumb { font-size: .85rem; color: var(--slate); margin-bottom: 12px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; }
.breadcrumb a { color: var(--slate); text-decoration: none; }
.breadcrumb a:hover { color: var(--bit); }

.pagehead { padding: 30px 0 4px; }
.pagehead h1 { font-size: clamp(1.9rem, 6.4vw, 3rem); }

.hide { display: none !important; }

/* ---------------- injected marks ---------------- */

.brand-mark svg { width: 100%; height: 100%; display: block; }
.hero-plate svg { width: 100%; height: 100%; display: block; }

.listing-detail-head { display: flex; gap: 14px; align-items: flex-start; }
.listing-detail-head h1 { margin-bottom: 0; }
.detail-plate { width: 62px; height: 62px; flex: none; margin-top: 4px; }
@media (min-width: 721px) { .detail-plate { width: 84px; height: 84px; } }


/* ---------------- search bar ---------------- */

.searchbar { margin-bottom: 12px; }
.searchbar label {
  display: block; font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .12em; font-size: .78rem; color: var(--slate); margin-bottom: 6px;
}
.searchbar input {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 1rem;
  border: 1px solid var(--bone-line); border-radius: var(--r);
  background: var(--bone-lift); color: var(--ink); -webkit-appearance: none;
}
.searchbar input:focus { outline: 2px solid var(--amber); outline-offset: 1px; border-color: var(--amber); }
.searchbar input::-webkit-search-cancel-button { cursor: pointer; }

.boardbar { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 0 14px; }
.boardbar .filter-count { padding-bottom: 0; }

/* ---------------- window pills ---------------- */

.pill {
  display: inline-block; font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .1em; font-size: .7rem; padding: 3px 8px; border-radius: var(--r);
  border: 1px solid transparent; white-space: nowrap;
}
.pill-open { background: rgba(224,138,30,.14); border-color: rgba(224,138,30,.42); color: var(--amber-deep); }
.pill-closing { background: rgba(156,50,38,.1); border-color: rgba(156,50,38,.4); color: #8A2C21; }
.pill-closed { background: #E0DDD5; border-color: var(--bone-line); color: var(--slate); }

/* The same pills sitting on bitumen. The light-ground colours drop to 2.3:1
   and 1.2:1 against a dark section, which is a WCAG AA failure, so the dark
   ground gets its own set rather than reusing them. */
.section-bit .pill-open {
  background: rgba(224,138,30,.18); border-color: rgba(224,138,30,.55); color: #F2A544;
}
.section-bit .pill-closing {
  background: rgba(214,96,77,.16); border-color: rgba(214,96,77,.5); color: #E8836F;
}
.section-bit .pill-closed {
  background: var(--bit-3); border-color: var(--bit-line); color: #B4ADA2;
}

.listing-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.listing-foot .listing-go { margin-top: 0; }
.listing-closed { opacity: .62; }
.listing-closed:hover { opacity: 1; }
/* The word "Closed" is the one thing on a closed card that still has to be
   read. --slate on the pill's own grey lands at 4.43:1, just under the floor,
   and it only surfaced once a sample window aged past its date. */
.pill-closed { color: var(--ink); }

/* ---------------- cargo chips ---------------- */

.cargowall { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.chip {
  font-size: .86rem; padding: 5px 10px; border-radius: var(--r);
  border: 1px solid var(--bit-line); background: var(--bit-2); color: #8C97A3;
}
.chip b { font-family: var(--font-display); color: #AEB8C3; margin-right: 3px; }
.chip-on { border-color: rgba(224,138,30,.5); color: var(--bone); }
.chip-on b { color: var(--amber); }

.cargo-check { display: grid; gap: 8px; }
@media (min-width: 601px) { .cargo-check { grid-template-columns: 1fr 1fr; } }

/* ---------------- mastheads ---------------- */

.masthead-wall { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.masthead {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em;
  font-size: .82rem; padding: 6px 11px; border-radius: var(--r);
  border: 1px solid var(--bone-line); background: var(--bone-lift);
  color: #3B444E; text-decoration: none;
}
.masthead { display: flex; flex-direction: column; gap: 2px; }
.masthead-title { display: block; }
.masthead-where {
  font-family: var(--font-body); text-transform: none; letter-spacing: .01em;
  font-size: .68rem; opacity: .72;
}
.masthead:hover { border-color: var(--amber); color: var(--amber-deep); }
.section-bit .masthead { background: var(--bit-2); border-color: var(--bit-line); color: #AEB8C3; }
.section-bit .masthead:hover { border-color: var(--amber); color: var(--amber-lift); }

/* ---------------- access tiers ---------------- */

.tier {
  border: 1px solid var(--bone-line); border-radius: var(--r);
  background: var(--bone-lift); padding: 20px 18px; display: flex; flex-direction: column;
}
.tier-intelligence { border-color: rgba(224,138,30,.55); }
.tier-price {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em;
  font-size: .92rem; color: var(--amber-deep); margin-top: 2px;
}
.tier-who { color: var(--slate); font-size: .9rem; margin: 8px 0 12px; }
.tier ul { list-style: none; margin: 0; padding: 0; }
.tier li { padding: 7px 0 7px 22px; border-top: 1px solid var(--bone-line); position: relative; font-size: .93rem; }
.tier li::before { position: absolute; left: 0; top: 7px; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.2; }
.tier-gets li::before { content: "+"; color: var(--amber-deep); }
.tier-not li::before { content: "\2013"; color: var(--slate); }
.tier-not li { color: var(--slate); }

/* ---------------- dispatch issues ---------------- */

.issues { display: grid; gap: 14px; }
@media (min-width: 721px) { .issues { grid-template-columns: 1fr 1fr 1fr; } }
.issue {
  border: 1px solid var(--bone-line); border-radius: var(--r);
  background: var(--bone-lift); padding: 18px;
}
.issue-next { border-color: rgba(224,138,30,.55); }
.issue-tag { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.issue-period { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; color: var(--slate); }
.issue h3 { font-size: 1.12rem; margin-bottom: 8px; }
.issue p { font-size: .93rem; color: #3B444E; margin: 0; }


/* ================================================================
   MASHOFE.COM ADDITIONS - the route lane, the backhaul flag, corridors,
   truck cards. Everything below is specific to freight.
   ================================================================ */

/* ---------------- the route lane ---------------- */

.lane { display: flex; align-items: center; gap: 10px; margin: 14px 0 2px; padding-top: 12px; border-top: 1px solid var(--bone-line); }
.lane-end { min-width: 0; }
.lane-town { font-family: var(--font-display); text-transform: uppercase; font-size: 1.18rem; line-height: 1.05; letter-spacing: .015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lane-cc { font-family: var(--font-display); font-size: .74rem; letter-spacing: .16em; color: var(--slate); text-transform: uppercase; }
.lane-arrow { flex: 1 1 auto; height: 1px; background: var(--bone-line); position: relative; min-width: 22px; }
.lane-arrow::after {
  content: ""; position: absolute; right: -1px; top: -3px;
  border-left: 7px solid var(--amber); border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
}
.section-bit .lane { border-top-color: var(--bit-line); }
.section-bit .lane-arrow { background: var(--bit-line); }

/* ---------------- backhaul flag ---------------- */
/* the sharpest field on the board gets the loudest treatment */

.backhaul {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .1em; font-size: .72rem; padding: 4px 9px;
  border-radius: var(--r); background: var(--amber); color: var(--bit);
  font-weight: 700; white-space: nowrap;
}
.backhaul svg { width: 13px; height: 13px; display: block; }
.backhaul-none { background: transparent; border: 1px dashed var(--bone-line); color: var(--slate); font-weight: 600; }

/* ---------------- load / truck card extras ---------------- */

.listing-cargo { font-family: var(--font-display); text-transform: uppercase; font-size: 1.02rem; letter-spacing: .04em; line-height: 1.15; }
.listing-tonnes { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; }
.listing-tonnes span { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--amber-deep); margin-left: 3px; }
.listing-rig { color: var(--slate); font-size: .86rem; margin-top: 4px; }
.listing-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.verified { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; color: var(--amber-deep); }
.verified svg { width: 13px; height: 13px; }
.section-bit .verified { color: var(--amber-lift); }

.operator { font-family: var(--font-display); text-transform: uppercase; font-size: 1.24rem; line-height: 1.06; letter-spacing: .015em; }
.operator-sub { color: var(--slate); font-size: .86rem; }

/* ---------------- spec table (load detail) ---------------- */

.spec { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: .95rem; }
.spec caption { text-align: left; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; color: var(--slate); padding-bottom: 8px; }
.spec th, .spec td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--bone-line); vertical-align: top; }
.spec th { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: var(--slate); font-weight: 600; width: 42%; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
@media (min-width: 721px) { .spec th { width: 30%; } }

/* ---------------- corridors ---------------- */

.corridor {
  background: var(--bone-lift); border: 1px solid var(--bone-line);
  border-radius: var(--r); padding: 18px; border-left: 3px solid var(--amber);
}
.corridor h3 { margin-bottom: 4px; }
.corridor-route { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em; font-size: .86rem; color: var(--slate); margin-bottom: 12px; }
.corridor-facts { display: grid; gap: 10px; margin-top: 12px; }
@media (min-width: 721px) { .corridor-facts { grid-template-columns: repeat(2, 1fr); } }
.fact-l { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--slate); }
.fact-v { font-size: .94rem; }
.posts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.post {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .07em;
  font-size: .74rem; padding: 3px 8px; border: 1px solid var(--bone-line);
  border-radius: var(--r); background: var(--bone); color: var(--ink);
}

/* ---------------- two-door split on board pages ---------------- */

.boardswitch { display: flex; gap: 0; margin: 0 0 16px; border: 1px solid var(--bone-line); border-radius: var(--r); overflow: hidden; }
.boardswitch a {
  flex: 1; text-align: center; padding: 11px 8px; text-decoration: none;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em;
  font-size: .82rem; color: var(--slate); background: var(--bone-lift);
}
.boardswitch a[aria-current="page"] { background: var(--bit); color: var(--bone-lift); }

/* ---------------- saved board ---------------- */

.savebtn { }
.saved-note { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; color: var(--slate); }

/* ================= v1.4 - the third door ================= */

/* Three boards, three doors. The two-door block keeps its old width; the
   three-door block is wider so no card is squeezed. */
@media (min-width: 601px) {
  .doors-3 { grid-template-columns: 1fr 1fr; max-width: 700px; }
}
@media (min-width: 921px) {
  .doors-3 { grid-template-columns: repeat(3, 1fr); max-width: 1040px; }
}

/* The three-door block sits on a bone section, so its doors need the light
   treatment - the .door rules were written for a bitumen section. */
.section:not(.section-bit) .door {
  background: var(--bone-lift);
  border-color: var(--bone-line);
  color: var(--ink);
}
.section:not(.section-bit) .door:hover { border-color: var(--amber-deep); color: var(--ink); }
.section:not(.section-bit) .door strong { color: var(--ink); }
.section:not(.section-bit) .door span { color: var(--slate); }
/* The call-to-action inside a light-ground door was never recoloured with the
   rest of it - amber on bone lifts is 2.51:1. Deep amber is 5.88:1. */
.section:not(.section-bit) .door em { color: var(--amber-deep); }

/* Service tick grid on the agent posting form. */
.checkgrid { display: grid; gap: 10px; margin-top: 6px; }
@media (min-width: 641px) { .checkgrid { grid-template-columns: 1fr 1fr; } }
.checkgrid .check {
  align-items: flex-start;
  border: 1px solid var(--bone-line);
  border-radius: var(--r);
  padding: 11px 13px;
  background: var(--bone-lift);
  color: var(--ink);
  cursor: pointer;
}
.checkgrid .check:hover { border-color: var(--amber-deep); }
.checkgrid .check input { margin-top: 3px; flex: none; }
.checkgrid .check .small { color: var(--slate); }

/* Six tabs now that agents have their own door. */
.tabbar { grid-template-columns: repeat(6, 1fr); }
.tabbar a { font-size: .62rem; letter-spacing: .06em; }
@media (min-width: 421px) { .tabbar a { font-size: .68rem; letter-spacing: .08em; } }

/* The section links will not fit every desktop width, so the bar scrolls
   rather than wrapping into the masthead. */
.sectionnav { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; min-width: 0; }
.sectionnav::-webkit-scrollbar { display: none; }
@media (min-width: 721px) and (max-width: 1100px) {
  .sectionnav a { padding: 8px 8px; font-size: .78rem; letter-spacing: .07em; }
}
/* At full width the eight links ran 11px past the bar, so the last item -
   How it works - was being clipped off the right edge. Tightening the tracking
   and the horizontal padding buys back 30px and the whole menu sits on screen. */
@media (min-width: 1101px) {
  .sectionnav a { padding: 8px 9px; letter-spacing: .075em; }
}

/* The clearing block on a cross-border load detail. */
#detail-clearing .grid { margin-top: 18px; }

/* ================= v1.5 LIVE WIRE - illustration and scope ================= */

/* THE HERO ART.
   Standing rule: illustration is generous and confident. It takes its own
   side of the section and carries real weight against the headline - it is
   never a small spot graphic tucked in a corner. */
.heroart { margin: 26px 0 0; }
.heroart img { display: block; width: 100%; height: auto; }

@media (min-width: 861px) {
  /* Two columns inside the existing container: words on the left, the
     illustration holding the whole right-hand side of the section. */
  .hero .wrap, .pagehead .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
    column-gap: 44px;
    align-items: center;
  }
  .hero .wrap > *:not(.heroart), .pagehead .wrap > *:not(.heroart) { grid-column: 1; }
  .heroart {
    grid-column: 2; grid-row: 1 / span 30;
    align-self: center; margin: 0;
  }
  .hero, .pagehead { overflow: hidden; }
}
@media (min-width: 1240px) {
  .hero .wrap, .pagehead .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 48%); }
}

/* On a bitumen hero the plate device and a full illustration would fight,
   so the plate stands down where the art is. */
.hero .hero-plate { display: none; }

.pagehead { padding: 30px 0 8px; }
@media (min-width: 861px) { .pagehead { padding: 44px 0 26px; min-height: 340px; } }

/* ---------------- inline stroke icons ---------------- */

.ic { width: 20px; height: 20px; flex: none; display: block; }

/* ---------------- the scope switch ----------------
   Domestic or cross-border is the first decision on a board, so it gets a
   real control with icons rather than a line in a dropdown. */

.scopeswitch {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 0 0 18px;
}
.scopebtn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 10px; cursor: pointer;
  background: var(--bone-lift); color: var(--slate);
  border: 1px solid var(--bone-line); border-radius: var(--r);
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .09em; font-size: .84rem; line-height: 1;
}
.scopebtn:hover { border-color: var(--amber-deep); color: var(--ink); }
.scopebtn .ic { width: 19px; height: 19px; }
.scopebtn.is-on {
  background: var(--bit); border-color: var(--bit);
  color: var(--bone-lift); font-weight: 600;
}
.scopebtn.is-on .ic { color: var(--amber); }
@media (max-width: 520px) {
  .scopebtn { flex-direction: column; gap: 5px; padding: 11px 5px; font-size: .7rem; }
}

/* ---------------- the scope choice cards ---------------- */

.scopepick { display: grid; gap: 16px; margin-top: 22px; }
@media (min-width: 761px) { .scopepick { grid-template-columns: 1fr 1fr; } }

.scopecard {
  display: block; text-decoration: none; overflow: hidden;
  border: 1px solid var(--bone-line); border-radius: var(--r);
  background: var(--bone-lift); color: var(--ink);
}
.scopecard:hover { border-color: var(--amber-deep); color: var(--ink); }
.scopecard img { display: block; width: 100%; height: auto; background: var(--bone); }
.scopecard-body { padding: 18px 20px 20px; }
.scopetag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .12em; font-size: .78rem; color: var(--amber-deep);
}
.scopetag .ic { width: 17px; height: 17px; }
.scopecard strong {
  display: block; margin-top: 8px; font-family: var(--font-display);
  font-size: 1.5rem; line-height: 1.1; color: var(--ink);
}
.scopecard span:not(.scopetag) { display: block; margin-top: 7px; color: var(--slate); }
.scopecard em {
  display: block; margin-top: 12px; font-style: normal;
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .1em; font-size: .82rem; color: var(--amber-deep);
}

.section-bit .scopecard { background: var(--bit-2); border-color: var(--bit-line); color: var(--bone); }
.section-bit .scopecard strong { color: var(--bone-lift); }
.section-bit .scopecard span:not(.scopetag) { color: #BDB7AC; }
.section-bit .scopetag, .section-bit .scopecard em { color: var(--amber); }
.section-bit .scopecard img { background: var(--bit-3); }

/* ---------------- the cross-border-only note ---------------- */

.scopenote {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 18px; padding: 14px 16px;
  border: 1px solid var(--bone-line); border-left: 4px solid var(--amber);
  border-radius: var(--r); background: var(--bone-lift); color: var(--slate);
  max-width: 62ch;
}
.scopenote .ic { color: var(--amber-deep); margin-top: 2px; }
.scopenote p { margin: 0; }
.scopenote strong { color: var(--ink); }
.section-bit .scopenote { background: var(--bit-2); border-color: var(--bit-line); color: #BDB7AC; }
.section-bit .scopenote strong { color: var(--bone-lift); }

/* ==================== v1.6 THE SHORTLIST ====================
   The cart. Gather several listings, ask for the introductions once. */

.pick { display: flex; flex-direction: column; }
.pick > .listing { flex: 1 1 auto; }

.pickbtn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: -1px; padding: 11px 12px; cursor: pointer;
  background: var(--bone-lift); color: var(--ink);
  border: 1px solid var(--bone-line); border-radius: 0 0 var(--r) var(--r);
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .09em; font-size: .8rem; line-height: 1;
}
.pickbtn:hover:not(:disabled) { border-color: var(--amber-deep); color: var(--amber-deep); }
.pickbtn .ic { width: 17px; height: 17px; }
.pickbtn.is-on {
  background: var(--bit); border-color: var(--bit); color: var(--bone-lift);
}
.pickbtn.is-on .ic { color: var(--amber); }
.pickbtn:disabled { cursor: not-allowed; color: var(--slate); background: var(--bone); }

.section-bit .pickbtn { background: var(--bit-2); border-color: var(--bit-line); color: var(--bone); }
.section-bit .pickbtn:disabled { color: var(--slate-soft); background: var(--bit); }

/* the live count on the chrome */
.slnav {
  display: inline-flex; align-items: center; gap: 7px; margin-left: 18px;
  padding: 7px 13px; border: 1px solid var(--bit-line); border-radius: var(--r);
  color: var(--bone); text-decoration: none;
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .09em; font-size: .8rem; white-space: nowrap;
}
.slnav:hover { border-color: var(--amber); color: var(--bone-lift); }
@media (max-width: 900px) { .slnav { display: none; } }

.slbadge {
  display: none; min-width: 20px; height: 20px; padding: 0 6px;
  align-items: center; justify-content: center;
  background: var(--amber); color: var(--bit);
  border-radius: 10px; font-family: var(--font-body);
  font-size: .72rem; font-weight: 700; line-height: 1;
}
.slbadge.on { display: inline-flex; }
.tabbar .slbadge {
  position: absolute; top: 4px; left: 50%; margin-left: 6px;
}
.tabbar a { position: relative; }

/* the shortlist page */
.slstate {
  margin-top: 14px; font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: .1em;
  font-size: .86rem; color: var(--amber-deep);
}
.slgroup { margin-top: 30px; }
.slgroup:first-child { margin-top: 0; }
.slgroup h3 {
  font-family: var(--font-display); font-size: 1.4rem;
  padding-bottom: 8px; border-bottom: 1px solid var(--bone-line);
}
#s-items { font-family: var(--font-body); font-size: .92rem; }

/* ============ COSA NOSTRA - the three public states ============
   A post is marked by what the sheet says about it and nothing else. While
   the gates are undeployed every post reads "Post not confirmed", because
   claiming otherwise would be claiming a check nobody made. */

.mark {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 3px;
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .09em; font-size: .74rem; line-height: 1.5;
}
.mark svg { width: 13px; height: 13px; }

.mark-genuine { background: var(--bone); color: var(--ink); border: 1px solid var(--bone-line); }
.mark-verified { background: var(--amber); color: var(--bit); font-weight: 600; }
/* Not confirmed is stated plainly and never styled to look like a mark of trust. */
.mark-none { background: transparent; color: var(--slate); border: 1px dashed var(--bone-line); }

.section-bit .mark-genuine { background: var(--bit-3); color: var(--bone); border-color: var(--bit-line); }
.section-bit .mark-none { color: var(--slate-soft); border-color: var(--bit-line); }

/* a declared field is never styled as a confirmed one */
.declared { color: var(--slate); font-style: normal; }
.declared::after {
  content: "declared"; margin-left: 7px; padding: 1px 6px;
  border: 1px solid var(--bone-line); border-radius: 3px;
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .08em; font-size: .68rem; color: var(--slate);
}

/* the code-entry step */
.codestep {
  margin-top: 22px; padding: 22px;
  border: 1px solid var(--bone-line); border-left: 4px solid var(--amber);
  border-radius: var(--r); background: var(--bone-lift);
}
.codestep h3 { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 8px; }
.codestep p { margin: 0 0 12px; color: var(--slate); }
.codestep #gate-code {
  font-family: var(--font-display); font-size: 1.7rem;
  letter-spacing: .38em; text-align: center; max-width: 260px;
}
.codeerr { color: var(--amber-deep); font-weight: 600; }
.section-bit .codestep { background: var(--bit-2); border-color: var(--bit-line); border-left-color: var(--amber); }
.section-bit .codestep p { color: #BDB7AC; }

/* the standing notice while the gates are undeployed */
.gatenote {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 18px; padding: 14px 16px; max-width: 66ch;
  border: 1px solid var(--bone-line); border-left: 4px solid var(--slate);
  border-radius: var(--r); background: var(--bone-lift); color: var(--slate);
}
.gatenote .ic { color: var(--slate); margin-top: 2px; }
.gatenote p { margin: 0; }
.gatenote strong { color: var(--ink); }
.gatenote em { font-style: normal; font-weight: 600; }

/* the install button - hidden until an install is genuinely available */
.btn-install { display: inline-flex; align-items: center; gap: 8px; }
.btn-install[hidden] { display: none !important; }
.hero .btn-install { background: transparent; color: var(--bone); border: 1px solid var(--bit-line); }
.hero .btn-install:hover { border-color: var(--amber); color: var(--bone-lift); }
.installhelp {
  margin-top: 12px; padding: 14px 16px; max-width: 44ch;
  border: 1px solid var(--bone-line); border-left: 4px solid var(--amber);
  border-radius: var(--r); background: var(--bone-lift); color: var(--slate);
}
.installhelp p { margin: 0 0 8px; }
.installhelp ol { margin: 0; padding-left: 20px; }
.installhelp li { margin-bottom: 5px; }
.installhelp .ic { display: inline-block; vertical-align: -4px; margin-left: 4px; }
.hero .installhelp { background: var(--bit-2); border-color: var(--bit-line); color: #BDB7AC; }

/* ================= SAUCE v2.1 - Phase C, tap targets =================
   Measured at 390px: .pickbtn came in at 354x41 and the footer link lists at
   17-18px high. Both are lifted to a 44px touch target on coarse pointers
   only, so the desktop spacing and rhythm are unchanged. */
@media (pointer: coarse) {
  .pickbtn { min-height: 44px; padding-top: 13px; padding-bottom: 13px; }
  .footer ul a { display: inline-block; padding: 7px 0; }
  .tabbar a { min-height: 48px; }
  .brand { min-height: 44px; }
  .listing-go, .linkbtn, .breadcrumb a, .footer p a, a[href^="mailto:"] {
    display: inline-block; padding-top: 12px; padding-bottom: 12px;
  }
  .breadcrumb { padding-top: 0; padding-bottom: 0; }
}
.lede-meta { margin: 6px 0 0; font-size: .9rem; color: var(--slate); }

/* ================= SAUCE v2.1 - Phase C, data tables =================
   The SEO-readiness clause wants a real table on substantive pages. Styled to
   the locked system: bone-lift ground, hairline rules, condensed display face
   in the head, and a horizontal scroll shell so a wide table never forces the
   page sideways on a phone. */
.tablewrap { margin-top: 22px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.dt {
  width: 100%; border-collapse: collapse; min-width: 460px;
  background: var(--bone-lift); border: 1px solid var(--bone-line);
  border-radius: var(--r); overflow: hidden; font-size: .94rem;
}
/* The section <h2> already states what the table shows, so a visible caption
   just repeats it. Kept in the accessibility tree, taken off the screen. */
table.dt caption {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
table.dt th, table.dt td {
  padding: 11px 14px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--bone-line);
}
table.dt thead th {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .08em; font-size: .78rem; color: var(--ink);
  background: var(--bone); border-bottom: 2px solid var(--bone-line);
}
table.dt tbody tr:last-child th, table.dt tbody tr:last-child td { border-bottom: 0; }
table.dt tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
table.dt td { color: var(--slate); }
.section-bit table.dt { background: var(--bit-2); border-color: var(--bit-line); }
.section-bit table.dt thead th { background: var(--bit); color: var(--bone-lift); border-bottom-color: var(--bit-line); }
.section-bit table.dt th, .section-bit table.dt td { border-bottom-color: var(--bit-line); }
.section-bit table.dt tbody th { color: var(--bone-lift); }
.section-bit table.dt td { color: #A9B4C0; }
.steps { list-style: none; padding-left: 0; margin: 0; }


/* ============================================================ drawn doors
   The three entrances lead with a scene and close with a short action, not a
   paragraph. The reader is choosing which of these people they are, and the
   figure in each scene answers that faster than a sentence does. */

.doors-art { display: grid; gap: 14px; margin-top: 24px; }
@media (min-width: 640px) { .doors-art { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

.door-art {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--bit-2); border: 1px solid var(--bit-line);
  border-radius: var(--r); overflow: hidden; color: var(--bone);
  transition: border-color .18s ease, transform .18s ease;
}
.door-art:hover, .door-art:focus-visible { border-color: var(--amber); color: var(--bone); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .door-art:hover { transform: translateY(-2px); }
}
.door-art figure { margin: 0; padding: 14px 14px 0; background: transparent; }
.door-art img { display: block; width: 100%; height: auto; }
.door-art-body { padding: 4px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.door-art strong {
  display: block; font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .05em; font-size: 1.34rem; line-height: 1.06; color: var(--bone-lift);
}
.door-art .door-go {
  margin-top: auto; align-self: flex-start;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .09em;
  font-size: .92rem; line-height: 1;
  background: var(--amber); color: var(--bit);
  padding: 11px 15px; border-radius: var(--r); min-height: 44px;
  display: inline-flex; align-items: center; gap: 7px;
}
.door-art:hover .door-go { background: var(--amber-lift); }

.section:not(.section-bit) .door-art { background: var(--bone-lift); border-color: var(--bone-line); color: var(--ink); }
.section:not(.section-bit) .door-art:hover { border-color: var(--amber-deep); }
.section:not(.section-bit) .door-art strong { color: var(--ink); }
.section:not(.section-bit) .door-art .door-go { background: var(--amber-deep); color: var(--bone-lift); }
.section:not(.section-bit) .door-art:hover .door-go { background: #A5610A; }

/* ========================================================== drawn sequence
   Order carries real information on this board - nothing can be taken off it
   before it is posted - so the arrows between the stages are structural, not
   ornamental. They lie flat on narrow screens and point down instead. */

.flow { display: grid; gap: 16px; margin-top: 26px; list-style: none; padding: 0; counter-reset: flow; }
@media (min-width: 860px) { .flow { grid-template-columns: repeat(3, 1fr); gap: 46px; } }

.flow-step { position: relative; margin: 0; }
.flow-art {
  background: var(--bit-2); border: 1px solid var(--bit-line);
  border-radius: var(--r); padding: 12px; margin-bottom: 14px;
}
.flow-art img { display: block; width: 100%; height: auto; }
.section:not(.section-bit) .flow-art { background: var(--bone-lift); border-color: var(--bone-line); }

.flow-step h3 {
  margin: 0 0 5px; display: flex; align-items: baseline; gap: 9px;
}
.flow-step h3::before {
  counter-increment: flow; content: "0" counter(flow);
  font-family: var(--font-display); font-size: 1.06rem;
  color: var(--amber); letter-spacing: .05em; flex: none;
}
.section:not(.section-bit) .flow-step h3::before { color: var(--amber-deep); }
.flow-step p { margin: 0; }

/* the connector */
.flow-step + .flow-step::before {
  content: ""; position: absolute; background: var(--amber); opacity: .8;
}
@media (max-width: 859px) {
  .flow-step + .flow-step::before {
    top: -12px; left: 50%; width: 2px; height: 10px; transform: translateX(-50%);
  }
}
@media (min-width: 860px) {
  .flow-step + .flow-step::before {
    left: -33px; top: 58px; width: 20px; height: 2px;
  }
  .flow-step + .flow-step::after {
    content: ""; position: absolute; left: -19px; top: 53px;
    width: 8px; height: 8px; border-top: 2px solid var(--amber);
    border-right: 2px solid var(--amber); transform: rotate(45deg); opacity: .8;
  }
}

/* =============================================================== accordion
   Questions and corridors both open on demand. Built on details/summary so it
   works with script off and answers keyboard and screen readers for free. */

.qas { display: grid; gap: 8px; }
.qa {
  border: 1px solid var(--bone-line); border-radius: var(--r);
  background: var(--bone-lift); overflow: hidden;
}
.section-bit .qa, .qa-bit { border-color: var(--bit-line); background: var(--bit-2); }

.qa > summary {
  cursor: pointer; list-style: none; padding: 15px 46px 15px 17px;
  position: relative; min-height: 44px; display: flex; align-items: center;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .045em;
  font-size: 1.04rem; line-height: 1.16; color: var(--ink);
}
.section-bit .qa > summary, .qa-bit > summary { color: var(--bone-lift); }
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--amber-deep); border-bottom: 2px solid var(--amber-deep);
  transform: rotate(45deg); transition: transform .18s ease;
}
.section-bit .qa > summary::after, .qa-bit > summary::after {
  border-color: var(--amber);
}
.qa[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.qa > summary:hover { background: rgba(224, 138, 30, .07); }
.qa > summary:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.qa-body { padding: 0 17px 16px; }
.qa-body > :last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .qa > summary::after { transition: none; } }

/* the corridor accordion, where a route opens its own detail */
.corridors-ac { margin-top: 20px; }
.corr-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.corr-route {
  font-family: var(--font-mono, var(--font-body)); font-size: .84rem;
  color: var(--slate); text-transform: none; letter-spacing: 0;
}
.section-bit .corr-route, .qa-bit .corr-route { color: var(--slate-soft); }
.corr-facts { display: grid; gap: 14px; margin-top: 4px; }
@media (min-width: 700px) { .corr-facts { grid-template-columns: 1fr 1fr; } }

/* ============================================================ gate cards
   Used by the compliance standard and by the contact routes. */

.gates { display: grid; gap: 14px; margin-top: 22px; }
@media (min-width: 620px) { .gates { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .gates { grid-template-columns: repeat(3, 1fr); } }

.gate {
  background: var(--bit-2); border: 1px solid var(--bit-line);
  border-radius: var(--r); padding: 18px;
}
.section:not(.section-bit) .gate { background: var(--bone-lift); border-color: var(--bone-line); }
.gate-ic { display: block; width: 42px; height: 42px; margin-bottom: 12px; }
.gate h3 { margin: 0 0 6px; font-size: 1.08rem; }
.gate p { margin: 0; font-size: .95rem; }
.gate-go { margin-top: 11px !important; }
.gate-go a {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .08em; font-size: .86rem;
}

/* ======================================================== compliance badge
   A narrow claim, stated narrowly. It says the documents were seen; the
   compliance page says what that does and does not cover. */

.cbadge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .07em; font-size: .72rem; line-height: 1;
  padding: 6px 9px; border-radius: var(--r);
  background: rgba(224, 138, 30, .14); color: var(--amber);
  border: 1px solid rgba(224, 138, 30, .45); text-decoration: none;
}
.cbadge svg { width: 13px; height: 13px; flex: none; }
.cbadge:hover { background: rgba(224, 138, 30, .24); color: var(--amber); }
.section:not(.section-bit) .cbadge,
.listing .cbadge { color: var(--amber-deep); border-color: rgba(141, 82, 7, .45); background: rgba(224, 138, 30, .12); }
.section:not(.section-bit) .cbadge:hover { color: var(--amber-deep); }

.cnote {
  display: block; margin-top: 14px; font-size: .88rem; color: var(--slate);
}
.section-bit .cnote { color: var(--slate-soft); }

/* =============================================================== pagination
   A thousand postings do not open as one page. Twenty by default, up to a
   hundred on request, and only the listing block repaints. */

.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-top: 22px;
  padding-top: 18px; border-top: 1px solid var(--bone-line);
}
.section-bit .pager, .pager-bit { border-top-color: var(--bit-line); }
.pager-pages { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pager-btn {
  min-width: 44px; min-height: 44px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: .98rem; letter-spacing: .04em;
  background: transparent; color: inherit; cursor: pointer;
  border: 1px solid var(--bone-line); border-radius: var(--r);
}
.section-bit .pager-btn, .pager-bit .pager-btn { border-color: var(--bit-line); }
.pager-btn:hover:not([disabled]) { border-color: var(--amber-deep); }
.section-bit .pager-btn:hover:not([disabled]) { border-color: var(--amber); }
.pager-btn[aria-current="true"] {
  background: var(--amber-deep); border-color: var(--amber-deep); color: var(--bone-lift);
}
.section-bit .pager-btn[aria-current="true"] { background: var(--amber); border-color: var(--amber); color: var(--bit); }
.pager-btn[disabled] { opacity: .38; cursor: default; }
.pager-gap { padding: 0 4px; color: var(--slate); }
.pager-size { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--slate); }
.section-bit .pager-size { color: var(--slate-soft); }
.pager-size select { min-height: 44px; }
.pager-note { width: 100%; font-size: .86rem; color: var(--slate); }
.section-bit .pager-note { color: var(--slate-soft); }

/* ======================================================== section artwork
   Standing rule on these builds: illustration is generous and confident. A
   section that carries a scene gives it half the row and real weight against
   the headline, never a timid spot graphic in a corner. */

.split { display: grid; gap: 26px; align-items: center; margin-top: 24px; }
@media (min-width: 900px) { .split { grid-template-columns: 1.05fr .95fr; gap: 44px; } }
/* v2.2.0 STANDING RULE - illustration on the RIGHT, text and buttons on the
   LEFT, on every split section across the site. The mirrored variant that
   used to sit here is gone; nothing flips. */
.split-art img { display: block; width: 100%; height: auto; }
.split-body > :first-child { margin-top: 0; }


/* The three doors are the whole point of the hero, so they break out of the
   text column and run the full width of the section under the headline and
   the scene, rather than being squeezed into the copy column beside the art. */
@media (min-width: 861px) {
  .hero .wrap > .doors-art { grid-column: 1 / -1; margin-top: 34px; }
  .hero .wrap > .btnrow { grid-column: 1 / -1; }
}
.door-art .door-go { white-space: nowrap; }
.door-art .door-go svg { width: 17px; height: 17px; flex: none; }
.hero .doors-art .door-art figure { padding: 18px 18px 0; }


/* A pending check is not a failed one, and it must not read like a warning
   flag. Same shape as the earned badge, drained of the amber. */
.cbadge-open {
  background: transparent; color: var(--slate);
  border-color: var(--bone-line); border-style: dashed;
}
.section-bit .cbadge-open, .listing .cbadge-open { color: var(--slate-soft); border-color: var(--bit-line); }
.cbadge-open:hover { color: var(--ink); border-color: var(--amber-deep); background: transparent; }
.section-bit .cbadge-open:hover { color: var(--bone-lift); border-color: var(--amber); }


/* ---- verification fixes, v1.9.0 ----

   The corridor accordion travels, and it took the routes page's fact labels
   with it. Those are coloured for bone. On a bitumen section --slate lands at
   2.64:1 against --bit-2, so the label and the value both lift to the tones
   that ground already uses everywhere else. This is the same fault that has
   produced every contrast failure in this codebase's life: a component moved
   from one ground to the other without its colours moving with it. */
.section-bit .fact-l, .qa-bit .fact-l { color: var(--slate-soft); }
.section-bit .fact-v, .qa-bit .fact-v { color: var(--bone); }
.section-bit .corr-route, .qa-bit .corr-route { color: var(--slate-soft); }
.section-bit .posts .post, .qa-bit .posts .post { border-color: var(--bone-line); }

/* Same mistake, my own: the pending badge reached for --slate-soft, which is
   a bitumen tone, and landed on a bone listing at 2.87:1. */
.cbadge-open { color: var(--slate); }
.listing .cbadge-open, .section:not(.section-bit) .cbadge-open { color: #4C555F; }
.section-bit .cbadge-open, .qa-bit .cbadge-open { color: var(--slate-soft); }

/* A muted note on bitumen is not --slate. */
.section-bit .small.muted, .section-bit .cnote, .hero .small.muted { color: var(--slate-soft); }

/* Any data table gets the horizontal shell, not just the ones that shipped
   with it. Below the shell width the table scrolls; the page never does. */
.dt-shell { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.dt-shell table.dt { min-width: 460px; }
@media (max-width: 520px) { .dt-shell table.dt { min-width: 420px; } }

/* Standalone links in running prose are exempt from the target-size minimum,
   but a link that stands alone as a control is not. Anything that is its own
   block gets the floor on every pointer, not only coarse ones. */
.gate-go a, .footer ul a, .breadcrumb a, .pager-btn, .listing-go, .cbadge {
  display: inline-flex; align-items: center; min-height: 24px;
}
@media (pointer: coarse) {
  .gate-go a, .footer ul a, .breadcrumb a, .listing-go, .cbadge { min-height: 44px; }
}


/* A control that is not a word in a sentence gets the full target floor on
   every pointer type, not only touch. These are the last three that were
   still short: the shortlist toggle on an agent card, the standalone links
   in the contact routes table, and the search input on the detail page. */
.linkbtn { min-height: 24px; display: inline-flex; align-items: center; }
.dt th a, .dt td a { display: inline-flex; align-items: center; min-height: 24px; }
.dt-shell input, .listing-search input, input[type="search"] { min-height: 44px; }
@media (pointer: coarse) { .linkbtn, .dt th a, .dt td a { min-height: 44px; } }


/* A link that is the whole of its paragraph is a control, not prose. */
.footer p a, .breadcrumb a, .prose > p > a:only-child {
  display: inline-flex; align-items: center; min-height: 24px;
}
@media (pointer: coarse) { .footer p a, .breadcrumb a { min-height: 44px; } }

/* Form controls carry the full floor everywhere. A checkbox is small by
   nature, so the box grows rather than relying on the label to be the target. */
input[type="date"], input[type="text"], input[type="tel"],
input[type="email"], input[type="number"], select, textarea { min-height: 44px; }
input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; }
@media (pointer: coarse) { input[type="checkbox"], input[type="radio"] { width: 26px; height: 26px; } }

.empty > p { margin: 0; }
.empty > p + p { margin-top: 8px; }


/* The lede is capped at 52ch for a full-width row. Inside a split it is
   already in a column, so the cap fights the grid and leaves the column
   half-used while the art sits beside a ragged short measure. */
.split .split-body .lede { max-width: none; }
.split .split-body > :last-child { margin-bottom: 0; }
.split-art img { max-width: 100%; }


/* ---- the tier accordion ----
   Same component as the questions and the corridors, with one difference: the
   price is the thing being compared, so it stays visible while the row is
   shut. It sits on the summary, right-aligned away from the name, and drops
   under it on a narrow column rather than crowding the chevron. */

.tiers-ac .qa-tier > summary { padding-right: 46px; }
.tier-head {
  display: flex; align-items: baseline; gap: 10px 14px;
  flex-wrap: wrap; width: 100%;
}
.tiers-ac .tier-head > .tier-price {
  margin-left: auto; font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: .09em; font-size: .78rem;
  color: var(--amber-deep); white-space: nowrap;
}
.section-bit .tiers-ac .tier-head > .tier-price,
.qa-bit .tier-head > .tier-price { color: var(--amber); }
@media (max-width: 460px) {
  .tiers-ac .tier-head > .tier-price { margin-left: 0; width: 100%; }
}
.tiers-ac .qa-body .tier-gets { margin: 0; padding: 0; list-style: none; }
.tiers-ac .qa-body .tier-gets li {
  padding: 9px 0 9px 22px; position: relative;
  border-top: 1px solid var(--bone-line); font-size: .95rem;
}
.section-bit .tiers-ac .qa-body .tier-gets li { border-top-color: var(--bit-line); }
.tiers-ac .qa-body .tier-gets li:first-child { border-top: 0; padding-top: 0; }
.tiers-ac .qa-body .tier-gets li::before {
  content: "+"; position: absolute; left: 0; top: 9px;
  color: var(--amber-deep); font-family: var(--font-display); line-height: 1;
}
.tiers-ac .qa-body .tier-gets li:first-child::before { top: 0; }
.section-bit .tiers-ac .qa-body .tier-gets li::before { color: var(--amber); }


/* The three audience doors now read "For shippers", "For transporters",
   "For agents" - longer than the labels the bar was tuned for, and it
   overflowed by 32px at 1280. The bar tightens through the middle of the
   range and opens back up where there is room, so it fits at every width
   without dropping an item or scrolling. */
/* The container is capped at --wrap, so a wider viewport gives the bar no
   extra room - the tight measure has to hold all the way up, not hand back
   space that does not exist above 1340. */
@media (min-width: 1101px) {
  .sectionnav { gap: 1px; }
  .sectionnav a { padding: 8px 6px; letter-spacing: .045em; font-size: .765rem; }
}


/* GALLIS 4.1/4.2. The home hero art measured at 14.7% of its field against a
   40% floor. It shrank when the three doors took the full width beneath it -
   the art kept its old column while the section grew a whole new row under it.
   The scene now holds its own half of the upper row at full bleed rather than
   sitting as a 520px picture in a 1440px band. */
@media (min-width: 861px) {
  .hero .wrap { align-items: center; }
  .hero .heroart { justify-self: stretch; }
  .hero .heroart img { width: 100%; max-width: 100%; height: auto; }
}
/* v2.2.0. The bleed is gone. The scene is generous but it is held inside its
   own column and scales down with it instead of overlapping the field. */
@media (min-width: 1200px) {
  .hero .heroart { margin-right: 0; }
}


/* Still 36.3% against the 40% floor after the bleed, because the doors row
   grew the section faster than the scene grew inside it. The art column takes
   a larger share of the upper row and the section's vertical padding comes in,
   which lifts the drawn layer over the bar without shrinking the headline. */
@media (min-width: 1240px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 56%); column-gap: 34px; }
}
@media (min-width: 861px) {
  .hero { padding-top: 46px; padding-bottom: 46px; }
}


/* The founder block on /about/. Measure held to the body column so the bio
   reads as prose rather than spanning the full bone field. */
.bio { max-width: none; }
.bio p { margin: 0 0 14px; }
.bio-links { font-family: var(--dsp); text-transform: uppercase;
  letter-spacing: .06em; font-size: 14px; }
.bio-links a { color: var(--amber-deep); text-underline-offset: 3px; }
.section-bone .bio-links a:hover { color: var(--ink); }


/* The founder band carries its own art column rather than leaving half the
   section empty. Art beside the words, never stacked under them. */
@media (min-width: 861px) {
  .section-bone .wrap:has(.bio) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 48%);
    column-gap: 40px; align-items: center;
  }
  .section-bone .wrap:has(.bio) > .eyebrow,
  .section-bone .wrap:has(.bio) > h2,
  .section-bone .wrap:has(.bio) > .bio { grid-column: 1; }
  .bioart { grid-column: 2; grid-row: 1 / span 3; justify-self: stretch; }
  .bioart img { width: 100%; height: auto; display: block; }
}
@media (max-width: 860px) { .bioart { display: none; } }


/* Ground-bound, not hand-applied: any eyebrow sitting on bone takes the deep
   amber automatically. --amber is 2.51:1 on bone and fails; --amber-deep is
   5.88:1 and passes. This is the failure that keeps recurring whenever a
   component moves grounds, so it is now bound to the ground rather than to a
   class somebody has to remember. */
.section-bone .eyebrow, .bone .eyebrow { color: var(--amber-deep); }


/* The primary action now lives in the hero band rather than halfway down the
   page. Sits under the lede with air above it so it reads as the page's ask,
   not as a stray control. */
.btnrow-hero { margin-top: 22px; }
@media (min-width: 861px) { .btnrow-hero { margin-top: 26px; } }


/* Second lede in a pagehead, where a CTA band folded up into the hero. Reads as
   supporting copy, not as a second opening statement. */
.pagehead .lede-2 { margin-top: 14px; font-size: 1rem; color: var(--slate); }


/* ---------------------------------------------------------------------------
   v2.2.0 - THE THREE CHOOSER BUTTONS ON THE HOME HERO

   These are buttons, not illustration sections. The drawing inside each one was
   running the full card width and driving the whole card up with it. The mark is
   now sized in proportion to the button it sits in, and the card comes down to
   the size of a thing you press.
   --------------------------------------------------------------------------- */
.doors-art { gap: 12px; margin-top: 22px; }
.door-art figure { padding: 14px 14px 0; text-align: center; }
.door-art figure img { width: 100%; max-width: 132px; margin: 0 auto; }
.door-art-body { padding: 2px 16px 15px; gap: 7px; }
.door-art strong { font-size: 1rem; }
.hero .doors-art .door-art figure { padding: 15px 16px 0; }
@media (min-width: 861px) {
  .door-art figure img { max-width: 118px; }
}

/* ---------------------------------------------------------------------------
   v2.2.0 - THE DARK SECTION MUST MEET THE DARK FOOTER

   The footer carried a 20px top margin, which on any page ending on a dark
   section drew a bone band between two dark grounds. Where the last thing in
   the page is dark, the footer sits flush against it.
   --------------------------------------------------------------------------- */
main:has(> .section-bit:last-child) + .footer,
main:has(> .pagehead:last-child) + .footer,
.footer.footer-flush { margin-top: 0; }

.hero .stats .stat { background: var(--bit-2); }
.hero .stats .stat-n { color: var(--amber); }
.hero .stats .stat-l { color: #B9C2CC; }
@media (min-width: 861px) {
  .hero .wrap > .stats { grid-column: 1; }
}

/* ---------------------------------------------------------------------------
   v2.2.0 - THE HOME HERO ROWS

   The scene used to span every row in the section, so the three doors - which
   run the full width beneath it - dragged the rows apart and left a hole
   between the lede and the buttons. It now spans only the rows the words
   occupy, and the doors sit under both columns as their own band.
   --------------------------------------------------------------------------- */
@media (min-width: 861px) {
  .hero .heroart { grid-column: 2; grid-row: 1 / span 5; align-self: center; }
  /* The hero button row and the count bar belong beside the scene, in the
     words column - not thrown full width under it. */
  .hero .wrap > .btnrow-hero,
  .hero .wrap > .btnrow-install { grid-column: 1; align-self: start; }
}

/* The home hero carries three browse actions in the words column, so the row
   tightens a little to hold them on one line without shrinking the label. */
@media (min-width: 861px) {
  .hero .btnrow-hero .btn { padding: 13px 15px; letter-spacing: .075em; }
}


/* ---------------------------------------------------------------------------
   v2.3.0 - THE INSTALL ACTION TAKES THE COUNT BAR'S SLOT

   The bar is off the site. The one thing worth asking for at the top of the
   home page is the app itself, so it sits where the bar was - in the words
   column, under the three browse actions, not adrift at the foot of the hero.
   --------------------------------------------------------------------------- */
.hero .btnrow-install { margin-top: 14px; }
.hero .btnrow-install .btn-install { border-color: var(--bit-line); }

/* ---------------------------------------------------------------------------
   v2.3.0 - THE THREE CHOOSERS ARE THEIR OWN BAND

   They were sitting inside the hero on the same ground, so the eye read one
   long section instead of a statement followed by a choice. They now stand on
   a lifted ground of their own with a rule above them, and the cards sit on
   the hero's darker ground so they read as pressable against it.
   --------------------------------------------------------------------------- */
.section-doors {
  background: var(--bit-2);
  border-top: 1px solid var(--bit-line);
  padding: 30px 0 34px;
}
.section-doors .doors-art { margin-top: 0; }
.section-doors .door-art { background: var(--bit); border-color: var(--bit-line); }
.section-doors .door-art:hover { border-color: var(--amber); }

/* ---------------------------------------------------------------------------
   v2.3.0 - THE CHOOSERS ARE FLUSH LEFT AND SIZED TO THEIR CONTENT

   The drawing was centred while the label and the action strip beneath it were
   not, which opened a gap on the left of the mark and a wider one on its right.
   All three rows now start on the same left edge, and the card comes in to the
   width of the content instead of stretching across a third of the band and
   leaving the space empty.
   --------------------------------------------------------------------------- */
@media (min-width: 640px) { .door-art { max-width: 300px; } }
.door-art figure { text-align: left; padding: 15px 16px 0; }
.door-art figure img { max-width: 100%; margin: 0; }
.door-art-body { padding: 6px 16px 16px; }
.door-art strong { font-size: 1.06rem; }
@media (min-width: 640px) {
  .doors-art { justify-items: start; }
}
@media (min-width: 861px) {
  .door-art figure img { max-width: 100%; }
  .doors-art { justify-content: space-between; grid-template-columns: repeat(3, minmax(0, 300px)); }
}

/* ---------------------------------------------------------------------------
   v2.3.0 - ONE MEASURE FOR BODY COPY

   A paragraph inside a split sat in a half column while the next paragraph on
   the same page ran the full 1120px band, so the page read as two different
   documents. Running text now holds one measure wherever it sits.
   --------------------------------------------------------------------------- */
.section > .wrap > p,
.section > .wrap > .lede,
.pagehead > .wrap > .lede { max-width: 74ch; }

/* ---------------------------------------------------------------------------
   v2.3.0 - SECTIONS DECLARE THEIR EDGES

   Two sections on the same ground ran together with nothing between them. A
   hairline marks the join where the ground itself does not.
   --------------------------------------------------------------------------- */
.section + .section:not(.section-bit) { border-top: 1px solid var(--bone-line); }
.pagehead:not(.hero) + .section:not(.section-bit) { border-top: 1px solid var(--bone-line); }
.pagehead { padding-bottom: 34px; }
.section-bit + .section-bit { border-top: 1px solid var(--bit-line); }


/* ---------------------------------------------------------------------------
   v2.4.0 - THE DESK HAS NUMBERS

   The contact page carried an email address and nothing else. A transporter
   at a border post wants to call, so the numbers lead and the form follows.
   --------------------------------------------------------------------------- */
.numbers { display: grid; gap: 14px; margin-top: 24px; }
@media (min-width: 720px) { .numbers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.numcard {
  background: var(--bit-2); border: 1px solid var(--bit-line);
  border-radius: var(--r); padding: 18px 18px 20px;
  display: flex; flex-direction: column; gap: 7px;
}
.numcard .num-l {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .09em; font-size: .78rem; color: var(--amber);
}
.numcard .num-v {
  font-family: var(--font-display); font-size: 1.24rem; line-height: 1.1;
  color: var(--bone-lift); text-decoration: none; word-break: break-word;
  min-height: 30px; display: inline-flex; align-items: center;
}
.numcard .num-v:hover, .numcard .num-v:focus-visible { color: var(--amber-lift); }
.numcard .num-n { font-size: .93rem; color: #B9C2CC; }
.section:not(.section-bit) .numcard { background: var(--bone-lift); border-color: var(--bone-line); }
.section:not(.section-bit) .numcard .num-l { color: var(--amber-deep); }
.section:not(.section-bit) .numcard .num-v { color: var(--ink); }
.section:not(.section-bit) .numcard .num-n { color: var(--slate); }

/* The form sits in the words column beside the scene, so it must not inherit
   the 74ch measure that governs running text. */
.section > .wrap .split-body > .form { max-width: none; }

/* ---------------------------------------------------------------------------
   v2.4.0 - TALK TO A PERSON IS A BUTTON

   It was a text link buried in a paragraph of footer copy, which is the one
   place on the page a reader in trouble is actually looking.
   --------------------------------------------------------------------------- */
.foot-cta { margin: 14px 0 0; }
.btn-foot { display: inline-flex; }
.footer .btn-foot { border-color: var(--bit-line); color: var(--bone-lift); }
.footer .btn-foot:hover, .footer .btn-foot:focus-visible {
  border-color: var(--amber); color: var(--bone-lift); background: var(--bit-2);
}

/* ================================================= v2.5.0 the four desks
   The numbers band carries one card per market - Botswana, Zimbabwe, South
   Africa, Zambia - and every card offers the same two ways in: a phone line
   and the same line on WhatsApp. Four across on a wide screen, two on a
   tablet, one on a phone. */

.numbers-4 { gap: 14px; }
@media (min-width: 620px) { .numbers-4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .numbers-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.numcard .num-wa {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 2px 0 10px;
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .08em; font-size: .78rem;
  color: var(--amber); text-decoration: none;
}
.numcard .num-wa .ic { width: 17px; height: 17px; flex: 0 0 17px; }
.numcard .num-wa:hover, .numcard .num-wa:focus-visible { color: var(--amber-lift); }
.numcard .num-wa span { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.section:not(.section-bit) .numcard .num-wa { color: var(--amber-deep); }

.deskmail { margin-top: 18px; font-size: .95rem; color: #B9C2CC; }
.deskmail a { color: var(--amber); }
.section:not(.section-bit) .deskmail { color: var(--slate); }
.section:not(.section-bit) .deskmail a { color: var(--amber-deep); }

/* The send-a-message form lost its art column in v2.5.0 and now takes the
   whole row, so it is released from the 620px form measure. The single
   short input is held to half a row so it does not stretch to 1120px. */
#form-contact { max-width: none; }
@media (min-width: 601px) { .field-half { max-width: calc(50% - 6px); } }

/* ============================================ v2.5.0 the compliance ladder
   The six gates are the spine of the compliance page, so they are numbered
   and they carry a rule. The numeral leads, the icon answers it across the
   card, and the amber edge makes the row read as a ladder rather than as six
   paragraphs that happen to sit next to each other. */

.gates-6 { margin-top: 26px; }
@media (min-width: 980px) { .gates-6 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .gates-4 { grid-template-columns: repeat(4, 1fr); } }

.gate-num, .gate-rule { border-top: 3px solid var(--amber); padding-top: 15px; }
.section:not(.section-bit) .gate-num,
.section:not(.section-bit) .gate-rule { border-top-color: var(--amber-deep); }

.gate-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.gate-head .gate-ic { margin-bottom: 0; }
.gnum {
  font-family: var(--font-display); font-weight: 800;
  font-size: 2.5rem; line-height: 1; letter-spacing: .02em;
  color: var(--amber);
}
.section:not(.section-bit) .gnum { color: var(--amber-deep); }

/* The two ledger columns say opposite things, so they stop looking the same:
   the column that grants something carries the amber edge, the column that
   withholds it carries a plain one. */
.ledger-strong .ledger-col { border-top-width: 3px; padding-top: 14px; }
.ledger-strong .ledger-does { border-top-color: var(--amber-deep); }
.ledger-strong .ledger-not { border-top-color: var(--slate); }
.ledger-strong .ledger-col h3 {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .08em; font-size: .95rem;
}
.section-bit .ledger-strong .ledger-does { border-top-color: var(--amber); }

/* ---------------------------------------------------- v2.5.0 board widths
   Browse loads runs three columns like every other board. A load card carries
   more inside it than a truck or an agent card - two towns, two country codes
   and a figure - so between the tablet breakpoint and 980px it drops to two
   rather than squeezing three and pushing the row off the screen. */
@media (min-width: 721px) and (max-width: 979px) {
  #board-grid.grid-3 { grid-template-columns: 1fr 1fr; }
}

/* The WhatsApp line on a desk card is a tap target, so it gets the height. */
.numcard .num-wa { padding: 4px 0; min-height: 26px; }