/* =====================================================================
   NBLA LLC — site.css
   One stylesheet, one system. Sections:
   1. Font   2. Tokens   3. Base   4. Layout   5. Signature devices
   6. Buttons + links   7. Header   8. Heroes   9. Sections + components
   10. Quote form   11. Footer + mobile bar   12. Review-only   13. Motion
   ===================================================================== */

/* 1. FONT — Overpass is an open-source family drawn from Highway Gothic,
   the lettering on U.S. interstate signs. One variable file, 100–900. */
@font-face {
  font-family: "Overpass";
  src: url("/assets/fonts/overpass-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* 2. TOKENS ----------------------------------------------------------- */
:root {
  /* Color: road, daylight, trailer tape */
  --asphalt: #1d1f22;        /* primary dark surface, body ink */
  --asphalt-2: #2a2d31;      /* raised dark surface */
  --asphalt-3: #3d4146;      /* rules on dark */
  --night: #141618;          /* footer, deepest surface */
  --paper: #f6f5f2;          /* primary light surface */
  --concrete: #e9e8e3;       /* alternate light surface */
  --steel: #c8c7c1;          /* rules on light */
  --ink: #1d1f22;
  --ink-2: #555a5f;          /* secondary text on light (5.9:1 on paper) */
  --fog: #b4b9be;            /* secondary text on dark (8:1 on asphalt) */
  --white: #ffffff;
  --red: #d42e26;            /* tape red; white text 4.98:1 */
  --red-deep: #b0221b;       /* pressed / hover */
  --brand-red: #e43b32;      /* logo red, graphic use only (not behind text) */

  /* Type: one family; sizes in rem; fluid between 360px and 1440px */
  --font: "Overpass", "Helvetica Neue", Arial, sans-serif;
  --fs-sm: 0.875rem;                                   /* 14 */
  --fs-body: clamp(1.0625rem, 1.02rem + 0.18vw, 1.125rem); /* 17 → 18 */
  --fs-lead: clamp(1.125rem, 1.04rem + 0.4vw, 1.375rem);   /* 18 → 22 */
  --fs-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);       /* 20 → 24 */
  --fs-h2: clamp(1.75rem, 1.42rem + 1.45vw, 2.75rem);      /* 28 → 44 */
  --fs-h1: clamp(2.125rem, 1.6rem + 2.35vw, 3.75rem);      /* 34 → 60 (hard max) */
  --fs-kicker: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem); /* 17 → 21 */
  --lh-tight: 1.04;
  --lh-head: 1.12;
  --lh-body: 1.55;
  --measure: 62ch;
  --measure-lead: 48ch;

  /* Space: 4px base */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem;
  --section-y: clamp(3.5rem, 2.4rem + 4.6vw, 7rem);    /* 56 → 112 */
  --hero-top: clamp(1.75rem, 1rem + 3vw, 4rem);        /* below the header */

  /* Layout */
  --page: 1240px;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);          /* 16 → 40 */
  --header-h: 4.5rem;                                   /* 72 */
  --bar-h: 3.5rem;                                      /* mobile call/quote bar */

  /* Image ratios */
  --r-pano: 12 / 5;
  --r-hero: 5 / 4;
  --r-mobile-pano: 8 / 5;

  /* Lines, edges */
  --radius: 4px;
  --rule: 1px solid var(--steel);
  --rule-dark: 1px solid var(--asphalt-3);
  --lift: 0 1px 0 rgba(0, 0, 0, 0.04), 0 18px 40px -24px rgba(20, 22, 24, 0.45);
  --focus: var(--ink);

  /* Signature patterns */
  --tape: repeating-linear-gradient(90deg, var(--red) 0 44px, var(--white) 44px 72px);
  /* MUTCD lane line: 10-ft dash, 30-ft gap (1:3) */
  --lane-x: repeating-linear-gradient(90deg, var(--white) 0 30px, transparent 30px 120px);
  --lane-y: repeating-linear-gradient(180deg, var(--white) 0 30px, transparent 30px 120px);
}

/* 3. BASE ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
h1, h2, h3 { line-height: var(--lh-head); letter-spacing: -0.012em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 860; line-height: var(--lh-tight); letter-spacing: -0.022em; }
h2 { font-size: var(--fs-h2); font-weight: 820; }
h3 { font-size: var(--fs-h3); font-weight: 780; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--red); }
strong, b { font-weight: 760; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.surface-dark { --focus: var(--white); color: var(--white); background: var(--asphalt); }
[hidden] { display: none !important; }
.nw { white-space: nowrap; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s4); top: -100px; z-index: 100;
  padding: var(--s3) var(--s4); background: var(--white); color: var(--ink);
  font-weight: 760; border: 3px solid var(--ink); border-radius: var(--radius);
}
.skip-link:focus { top: var(--s4); }

/* 4. LAYOUT ----------------------------------------------------------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--page)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section--concrete { background: var(--concrete); }
.section--tight { padding-block: calc(var(--section-y) * 0.7); }
.section-head { display: grid; gap: var(--s4); max-width: 46rem; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem); }
.section-head p { color: var(--ink-2); font-size: var(--fs-lead); max-width: var(--measure-lead); }
.surface-dark .section-head p { color: var(--fog); }
.prose p + p { margin-top: var(--s4); }
.prose { max-width: var(--measure); }
.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); }
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .split > :first-child { grid-column: 1 / span 6; }
  .split > :last-child { grid-column: 7 / span 6; }
  .split--wide-left > :first-child { grid-column: 1 / span 7; }
  .split--wide-left > :last-child { grid-column: 8 / span 5; }
}

/* 5. SIGNATURE DEVICES ------------------------------------------------ */
/* Trailer conspicuity tape: red/white, the edge of every NBLA trailer */
.tape { display: block; height: 6px; background: var(--tape); }
/* Lane line: the white line, 1:3 dash-to-gap */
.lane { display: block; height: 4px; background: var(--lane-x); }

/* Door lettering — how USDOT/MC appear on a working truck */
.creds { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s5); margin: 0; }
.creds div { display: flex; align-items: baseline; gap: 0.4em; }
.creds dt { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); }
.creds dd { margin: 0; font-weight: 820; letter-spacing: 0.02em; font-size: 1.0625rem; }
.surface-dark .creds dt { color: var(--fog); }
.creds a { font-size: var(--fs-sm); font-weight: 650; }

/* 6. BUTTONS + LINKS -------------------------------------------------- */
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 3.25rem; padding: 0.55em 1.35em 0.45em;
  border: 2px solid transparent; border-radius: var(--radius);
  font: inherit; font-size: 1.0625rem; font-weight: 800; line-height: 1.1; letter-spacing: 0.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.1s ease;
}
.btn:active { transform: translateY(1px); }
/* Primary quote action: intentionally tactile, like a physical control on working equipment. */
.btn--quote {
  background: linear-gradient(180deg, #e13a31 0%, var(--red) 70%, #c72820 100%);
  color: var(--white);
  border-color: #971d17;
  box-shadow: 0 4px 0 #861914, 0 9px 18px -11px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.28);
  transform: translateY(-2px);
}
.btn--quote:hover {
  background: linear-gradient(180deg, #ed443a 0%, #dc332a 70%, #c72820 100%);
  box-shadow: 0 5px 0 #861914, 0 11px 20px -11px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.32);
  transform: translateY(-3px);
}
.btn--quote:active {
  background: var(--red-deep);
  box-shadow: 0 1px 0 #76130f, 0 4px 10px -8px rgba(0,0,0,.75), inset 0 1px 2px rgba(0,0,0,.22);
  transform: translateY(2px);
}
.btn--call { border-color: currentColor; color: var(--ink); background: transparent; }
.btn--call:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.surface-dark .btn--call { color: var(--white); }
.surface-dark .btn--call:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn__num { font-weight: 560; letter-spacing: 0.01em; opacity: 0.92; }
.btn[aria-busy="true"] { opacity: 0.75; cursor: progress; }

.go { /* contextual secondary link */
  display: inline-flex; align-items: center; gap: 0.5em; font-weight: 800;
  text-decoration: none; border-bottom: 3px solid var(--red); padding: 0.2em 0 0.1em;
}
.go:hover { border-bottom-color: currentColor; }
.go svg { width: 1.1em; height: 1.1em; }

/* 7. HEADER ------------------------------------------------------------ */
.site-header { position: sticky; top: 0; z-index: 50; }
.site-header .bar { background: var(--asphalt); color: var(--white); }
.site-header .wrap { display: flex; align-items: center; gap: var(--s5); min-height: var(--header-h); }
.brand { display: block; flex: none; text-decoration: none; }
.brand img { width: 136px; height: auto; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: clamp(0.75rem, 0.2rem + 1.2vw, 1.75rem); list-style: none; margin: 0; padding: 0; }
.nav a { display: block; padding: 0.6rem 0 0.45rem; font-weight: 700; text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
.nav a:hover { border-bottom-color: var(--fog); }
.nav a[aria-current="page"] { border-bottom-color: var(--red); }
.nav .nav-home { display: none; }
.header-call { font-weight: 800; text-decoration: none; white-space: nowrap; letter-spacing: 0.01em; display: inline-flex; gap: 0.45em; align-items: center; }
.header-call svg { width: 1.05em; height: 1.05em; }
.header-call .call-short { display: none; }
.header-call:hover { text-decoration: underline; }
.site-header .btn { min-height: 2.875rem; padding-inline: 1.1em; }
.menu-btn { display: none; }
.menu-btn .i-close, .menu-btn[aria-expanded="true"] .i-open { display: none; }
.menu-btn[aria-expanded="true"] .i-close { display: block; }

@media (max-width: 1199px) {
  .header-call .call-short { display: inline; }
  .header-call .call-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 999px) {
  .site-header .wrap { gap: var(--s3); }
  .brand { margin-right: auto; }
  .menu-btn {
    display: inline-flex; align-items: center; gap: 0.5em;
    min-height: 2.875rem; padding: 0 0.9em; border: 2px solid var(--asphalt-3); border-radius: var(--radius);
    background: none; color: var(--white); font: inherit; font-weight: 750; cursor: pointer;
  }
  .menu-btn svg { width: 1.1em; height: 1.1em; }
  .nav { display: none; position: absolute; inset: 100% 0 auto; margin: 0; background: var(--asphalt); border-top: var(--rule-dark); box-shadow: 0 24px 40px -20px rgba(0,0,0,.6); }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; gap: 0; width: min(100% - 2 * var(--gutter), var(--page)); margin-inline: auto; padding: var(--s3) 0 var(--s5); }
  .nav a { padding: 0.9rem 0; font-size: 1.1875rem; border-bottom: var(--rule-dark); }
  .nav a[aria-current="page"] { border-bottom: var(--rule-dark); box-shadow: inset 4px 0 0 var(--red); padding-left: 0.9rem; }
  .nav .nav-home { display: block; }
}
@media (max-width: 899px) {
  .header-call, .site-header .btn--quote { display: none; } /* the bottom bar carries both */
}
@media (max-width: 599px) {
  :root { --header-h: 3.75rem; }
  .brand img { width: 112px; }
  /* phones: the fixed bar carries Call + Quote, so the hero leads with words and the picture */
  .hero--band .actions, .hero--split .copy > .actions { display: none; }
}

/* 8. HEROES ------------------------------------------------------------ */
/* Two variants, one rule:
   .hero--band  — pages about the whole outfit (Home, Equipment): text band over a full-width media strip.
   .hero--split — pages about one job (Hotshot, Auto, Where We Run): copy 7 cols, media 5 cols at 5:4. */
.hero { padding-top: var(--hero-top); }
.hero .kicker { font-size: var(--fs-kicker); font-weight: 720; color: var(--fog); margin-bottom: var(--s3); max-width: 46ch; }
.hero h1 { max-width: 17ch; }
.hero .lead { font-size: var(--fs-lead); line-height: 1.45; max-width: var(--measure-lead); }
.hero h1 + .lead, .hero .h1-follow + .lead { margin-top: var(--s5); }
.hero .lead + .lead { margin-top: var(--s3); }
.hero .note { margin-top: var(--s4); color: var(--fog); max-width: var(--measure-lead); }
.hero .actions { margin-top: var(--s6); }
.hero .creds { margin-top: var(--s5); }

.hero--split { padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.hero--split .grid { display: grid; gap: var(--s7); }
.hero--split .media { aspect-ratio: var(--r-hero); background: var(--asphalt-2); overflow: hidden; }
.hero--split .media img { width: 100%; height: 100%; object-fit: cover; }
.hero--split .media > picture, .hero--split .media > .slot { height: 100%; aspect-ratio: auto; }
@media (max-width: 899px) { .hero--split .media:not(.trip) { aspect-ratio: 3 / 2; } }
@media (min-width: 900px) {
  .hero--split .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s6); align-items: start; }
  .hero--split .copy { grid-column: 1 / span 7; }
  .hero--split .media { grid-column: 8 / span 5; }
}

.hero--band .band { display: grid; gap: var(--s5); padding-bottom: clamp(1.75rem, 1rem + 2.5vw, 3rem); }
.hero--band h1 { max-width: none; }
.hero h1 .ln { display: block; }
.hero--band h1:has(.ln) { font-size: min(var(--fs-h1), 7.9vw); }
@media (min-width: 1100px) {
  .hero--band .band { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s6); align-items: start; }
  .hero--band .band > .side { padding-top: 0.6rem; }
  .hero--band .band > .head { grid-column: 1 / span 7; }
  .hero--band .band > .side { grid-column: 8 / span 5; }
  .hero--band .actions { margin-top: var(--s5); }
}
.hero .lead .ln { display: block; text-wrap: balance; }
.h1-follow { font-size: calc(var(--fs-h1) * 0.62); font-weight: 820; line-height: 1.1; letter-spacing: -0.015em; color: var(--fog); margin: var(--s4) 0 var(--s5); }
.h1-follow .ln { display: block; }
.lead-p { font-size: var(--fs-lead); line-height: 1.45; color: var(--ink-2); margin-top: var(--s4); }
.prose .actions, .prose .steps { margin-top: var(--s6); }
.route-link { margin-top: var(--s7); }
.who-title { margin-bottom: var(--s6); }
.asks-title { margin-bottom: var(--s4); }
.after-asks { margin-top: var(--s5); }
.fits-note { margin-top: var(--s6); max-width: 46rem; }
.more { margin-top: var(--s5); font-size: 1.0625rem; color: var(--ink); font-weight: 650; }
.quote-section { padding-top: var(--s7); }
.pano { position: relative; max-width: 1680px; margin-inline: auto; }
.pano img { width: 100%; aspect-ratio: var(--r-mobile-pano); object-fit: cover; }
@media (min-width: 700px) { .pano img { aspect-ratio: var(--r-pano); } }
.tag {
  position: absolute; left: var(--gutter); bottom: var(--s4);
  padding: 0.35em 0.7em 0.25em; background: rgba(20, 22, 24, 0.82); color: var(--white);
  font-size: var(--fs-sm); font-weight: 720; border-left: 4px solid var(--red);
}

/* 9. SECTIONS + COMPONENTS -------------------------------------------- */

/* Two lanes, one truck (Home) */
.lanes { display: grid; border-top: 1px solid var(--steel); }
.lanes > article { padding-block: var(--s6); display: grid; gap: var(--s4); align-content: start; }
.lanes > article + article { border-top: var(--rule); }
.lanes h3 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 860; letter-spacing: -0.02em; line-height: 1.05; }
.lanes .what { max-width: 40ch; font-size: var(--fs-lead); line-height: 1.45; }
.lanes .rides { display: grid; gap: 0.15rem; padding-top: var(--s4); margin-top: var(--s2); border-top: 3px solid var(--ink); }
.lanes .rides > span { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); }
.lanes .rides strong { font-size: var(--fs-h3); line-height: 1.25; }
.lanes .go { justify-self: start; align-self: start; margin-top: var(--s2); }
@media (min-width: 760px) {
  /* two lanes with a divider; subgrid keeps the "Rides on" rows level */
  .lanes { grid-template-columns: 1fr 1px 1fr; grid-template-rows: repeat(4, auto); column-gap: clamp(2rem, 1rem + 3vw, 4rem); }
  .lanes::before { content: ""; grid-column: 2; grid-row: 1 / span 4; background: var(--steel); margin-top: var(--s6); }
  .lanes > article { grid-row: 1 / span 4; grid-template-rows: subgrid; }
  .lanes > article:first-child { grid-column: 1; }
  .lanes > article:last-child { grid-column: 3; }
  .lanes > article + article { border-top: 0; }
}
.pulled { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: baseline; justify-content: space-between; margin-top: var(--s6); padding-top: var(--s5); border-top: 3px solid var(--ink); }
.pulled p { font-size: var(--fs-lead); font-weight: 700; max-width: 60ch; text-wrap: balance; }

/* The white line (Home): Troy → pickup → delivery */
.route { margin-top: var(--s6); }
.route-band { overflow: hidden; }
.route ol { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; position: relative; }
.route li { position: relative; padding: 0 0 var(--s6) 2.75rem; }
.route li:last-child { padding-bottom: 0; }
.route li::before { /* stop marker */
  content: ""; position: absolute; left: 0.25rem; top: 0.2rem; width: 1rem; height: 1rem;
  border-radius: 50%; background: var(--asphalt); border: 3px solid var(--white);
}
.route li:first-child::before { background: var(--red); border-color: var(--red); }
.route ol::before { /* the line */
  content: ""; position: absolute; left: calc(0.75rem - 3px); top: 0.6rem; bottom: 0.6rem; width: 6px;
  background: repeating-linear-gradient(180deg, var(--white) 0 18px, transparent 18px 72px);
}
.route strong { display: block; font-size: var(--fs-h3); font-weight: 800; line-height: 1.2; }
.route li > span { color: var(--fog); }
@media (min-width: 900px) {
  .route ol { grid-template-columns: repeat(3, 1fr); }
  .route li { padding: 2.5rem var(--s5) 0 0; }
  .route li::before { left: 0; top: 0; }
  /* the line runs off both edges of the screen: the road keeps going */
  .route ol::before { left: calc(50% - 50vw); right: calc(50% - 50vw); top: calc(0.6rem - 3px); bottom: auto; width: auto; height: 6px; background: repeating-linear-gradient(90deg, var(--white) 0 40px, transparent 40px 160px); }
  .route li::before { width: 1.25rem; height: 1.25rem; }
}

/* Paperwork: door lettering plate + insurance */
.paper { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .paper { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; } .paper > .door { grid-column: 1 / span 5; } .paper > .papers { grid-column: 7 / span 6; } }
.door {
  position: relative; background: var(--white); padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  box-shadow: var(--lift); border-radius: 6px 6px 6px 28px; overflow: hidden;
  display: grid; align-content: start; gap: var(--s6); align-self: start;
}
.door .crease { /* the body crease every truck door has, always below the lettering */
  display: block; height: 2px; margin-inline: calc(-1 * clamp(1.75rem, 1rem + 3vw, 3rem));
  background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(255,255,255,.9));
}
.door p { position: relative; font-weight: 860; line-height: 1.08; letter-spacing: 0.01em; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); }
.door p > span { display: block; }
.door p > span:first-child { font-size: 1.12em; letter-spacing: -0.005em; }
.door small { position: relative; display: block; margin-top: var(--s5); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; }
.papers { display: grid; gap: var(--s5); align-content: start; }
.limits { display: grid; gap: 0; margin: 0; border-top: 3px solid var(--ink); }
.limits div { display: grid; grid-template-columns: minmax(7.5rem, auto) 1fr; gap: var(--s4); align-items: baseline; padding: var(--s4) 0; border-bottom: var(--rule); }
.limits dt { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 860; letter-spacing: -0.01em; order: 0; }
.limits dd { margin: 0; font-weight: 650; }
.fine { font-size: var(--fs-sm); color: var(--ink-2); max-width: 60ch; }
.surface-dark .fine { color: var(--fog); }

/* Four questions + CTA band */
.cta-band { position: relative; }
.cta-band > .tape { position: absolute; inset: 0 0 auto; }
.cta-band .wrap { display: grid; gap: var(--s6); }
.cta-band h2 { max-width: 22ch; }
.cta-band .actions { margin-top: var(--s2); }
.questions { display: grid; gap: 0; counter-reset: q; list-style: none; margin: 0; padding: 0; border-top: var(--rule-dark); }
.questions li { counter-increment: q; display: grid; grid-template-columns: 2.5rem 1fr; padding: var(--s4) 0; border-bottom: var(--rule-dark); font-size: var(--fs-h3); font-weight: 760; line-height: 1.25; }
.questions li::before { content: counter(q); color: var(--fog); font-weight: 600; }
@media (min-width: 900px) {
  .cta-band .wrap { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s6); align-items: end; }
  .cta-band .wrap > :first-child { grid-column: 1 / span 6; }
  .cta-band .wrap > :last-child { grid-column: 7 / span 6; }
}

/* Manifest list (Hotshot loads) */
.manifest { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--ink); }
.manifest li { padding: var(--s4) 0 0.8rem; border-bottom: var(--rule); font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.manifest li.muted { color: var(--ink-2); font-weight: 650; }
@media (min-width: 700px) { .manifest { grid-template-columns: 1fr 1fr; column-gap: var(--s6); } }
.callout { display: grid; gap: var(--s3); padding-left: var(--s5); border-left: 4px solid var(--red); }
.callout strong { font-size: var(--fs-h3); line-height: 1.25; }

/* Checklist (what we'll ask) */
.asks { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--ink); }
.asks li { display: grid; gap: 0.1rem; padding: var(--s4) 0; border-bottom: var(--rule); }
.asks strong { font-size: 1.125rem; }
.asks li > span { color: var(--ink-2); }

/* Next-stop links (cross-links) */
.next { display: grid; gap: var(--s5); }
.next a.card { display: grid; gap: var(--s2); padding: var(--s5) var(--s5) var(--s5); background: var(--white); text-decoration: none; border-top: 4px solid var(--ink); box-shadow: var(--lift); }
.next a.card:hover { border-top-color: var(--red); }
.next .card > span { color: var(--ink-2); }
.next .card strong { font-size: var(--fs-h3); line-height: 1.2; }
.next .card em { font-style: normal; font-weight: 800; margin-top: var(--s2); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 0.25em; }
@media (min-width: 760px) { .next { grid-template-columns: 1fr 1fr; } }

/* Capacity (Auto) */
.capacity { display: grid; gap: var(--s5); }
@media (min-width: 760px) { .capacity { grid-template-columns: 1fr 1fr; } }
.capacity figure { display: grid; gap: var(--s4); align-content: start; padding: var(--s6) var(--s5) var(--s5); background: var(--white); box-shadow: var(--lift); border-top: 4px solid var(--ink); }
.capacity .cars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; color: var(--ink); align-items: end; max-width: 40rem; }
.capacity .cars svg { width: 100%; height: auto; }
.capacity figcaption { display: grid; gap: 0.15rem; }
.capacity figcaption strong { font-size: var(--fs-h3); }
.capacity figcaption > span { color: var(--ink-2); }
.car .ink { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* Who it's for (Auto) */
.who { display: grid; gap: var(--s6); }
.who article { display: grid; gap: var(--s3); align-content: start; }
.who article + article { padding-top: var(--s6); border-top: var(--rule); }
@media (min-width: 900px) {
  .who { grid-template-columns: 1fr 1fr; column-gap: var(--s7); }
  .who article + article { padding-top: 0; border-top: 0; }
}

/* Triptych (Equipment): truck → trailer → mission */
.rig3 { display: grid; gap: 4px; max-width: 1680px; margin-inline: auto; padding-inline: var(--gutter); }
.rig3 > figure { display: grid; grid-template-rows: auto 1fr; background: var(--asphalt-2); }
.rig3 picture, .rig3 .mission-face { aspect-ratio: var(--r-hero); overflow: hidden; }
.rig3 img { width: 100%; height: 100%; object-fit: cover; }
.rig3 figcaption { padding: var(--s5) var(--s5) var(--s6); display: grid; gap: var(--s2); align-content: start; }
.rig3 figcaption strong { font-size: var(--fs-h2); font-weight: 860; line-height: 1; letter-spacing: -0.02em; }
.rig3 figcaption > span { color: var(--fog); font-size: var(--fs-lead); line-height: 1.4; max-width: 30ch; }
.rig3 .mission { background: var(--red); }
.rig3 .mission figcaption > span { color: var(--white); }
.rig3 .mission-face { display: grid; align-content: end; padding: var(--s5); background: var(--red); position: relative; }
.rig3 .mission-face::after { content: ""; position: absolute; left: var(--s5); right: 0; bottom: 0; height: 5px; background: var(--lane-x); }
.rig3 .mission-face p { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); font-weight: 880; line-height: 1.02; letter-spacing: -0.02em; color: var(--white); }
.rig3 .mission-face p > span { display: block; }
@media (min-width: 900px) { .rig3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rig3 > figure { min-width: 0; }
@media (max-width: 899px) { .rig3 .mission-face { aspect-ratio: auto; padding-top: var(--s7); } }

/* The decks: a spec-plate list of every trailer NBLA runs */
.rig3 .decks-face { min-width: 0; background: var(--asphalt); display: grid; align-content: center; padding: var(--s5) clamp(1rem, 0.5rem + 1.5vw, 2rem); }
@media (min-width: 900px) { .rig3 .decks { grid-template-rows: 1fr auto; } .rig3 .decks-face { aspect-ratio: auto; } }
.rig3 .decks-face ul { list-style: none; margin: 0; padding: 0; display: grid; }
.rig3 .decks-face li { display: flex; align-items: center; gap: var(--s4); padding: 0.75rem 0 0.6rem; border-bottom: var(--rule-dark); font-size: clamp(1.125rem, 0.7rem + 1vw, 1.625rem); font-weight: 820; letter-spacing: -0.01em; color: var(--white); }
.rig3 .decks-face li:first-child { border-top: var(--rule-dark); }
.rig3 .decks-face li::before { content: ""; flex: none; width: 2.25rem; height: 5px; background: var(--tape); background-size: 72px 5px; }
@media (max-width: 899px) { .rig3 .decks-face { aspect-ratio: auto; padding-block: var(--s6); } }

/* Stanza panel: the hotshot hero's media column until photo HS-01 exists */
.hero--split .media.stanza { aspect-ratio: auto; overflow: visible; position: relative; display: grid; align-content: center; gap: var(--s5);
  padding: clamp(1.75rem, 1rem + 3vw, 3rem) clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1.75rem, 1rem + 3vw, 3rem) calc(clamp(1.5rem, 1rem + 2vw, 2.5rem) + 1.5rem); }
.stanza::before { content: ""; position: absolute; left: clamp(1.5rem, 1rem + 2vw, 2.5rem); top: 0; bottom: 0; width: 5px; background: repeating-linear-gradient(180deg, var(--white) 0 28px, transparent 28px 84px); }
.stanza-lines { display: grid; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.625rem); font-weight: 860; line-height: 1.12; letter-spacing: -0.02em; }
.stanza-lines span { display: block; }
.stanza-end { font-size: var(--fs-lead); font-weight: 700; color: var(--fog); }
.slot-note { font-size: var(--fs-sm); color: #f2d48a; border-top: var(--rule-dark); padding-top: var(--s3); }

/* Deck matcher table (Equipment) */
.match { width: 100%; border-collapse: collapse; border-top: 3px solid var(--ink); }
.match th, .match td { text-align: left; vertical-align: top; padding: var(--s4) var(--s4) var(--s4) 0; border-bottom: var(--rule); }
.match thead th { font-size: var(--fs-sm); font-weight: 750; color: var(--ink-2); padding-block: var(--s3); }
.match tbody th { font-size: 1.125rem; font-weight: 780; width: 42%; }
.match td { font-weight: 650; }
@media (max-width: 699px) {
  .match thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .match, .match tbody, .match tr, .match th, .match td { display: block; width: auto; }
  .match tr { padding: var(--s4) 0; border-bottom: var(--rule); }
  .match th, .match td, .match tbody th { border: 0; padding: 0.15rem 0; width: auto; }
  .match td::before { content: attr(data-label) ": "; font-weight: 700; color: var(--ink-2); }
}

/* Trip starter (Where We Run hero media): the white line joins your two ends */
.trip { background: var(--asphalt-2); padding: clamp(1.25rem, 0.8rem + 2vw, 2.25rem); display: grid; grid-template-rows: auto 1fr auto; gap: var(--s4); position: relative; }
.trip h2 { font-size: var(--fs-h3); font-weight: 800; }
.trip .ends { display: grid; grid-template-rows: auto 1fr auto; position: relative; padding-left: 2.25rem; }
.trip .ends::before { content: ""; position: absolute; left: calc(0.6rem - 2px); top: 2.6rem; bottom: 2.6rem; width: 4px; background: var(--lane-y); background-size: 4px 48px; }
.trip .end { position: relative; display: grid; gap: 0.3rem; }
.trip .end::before { content: ""; position: absolute; left: -2.25rem; top: 2.45rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 3px solid var(--white); background: var(--asphalt-2); }
.trip .end:first-child::before { background: var(--red); border-color: var(--red); }
.trip label { font-weight: 720; font-size: var(--fs-sm); color: var(--fog); }
.trip input[type="text"] { width: 100%; min-height: 3.25rem; padding: 0.6rem 0.8rem 0.5rem; border: 2px solid #8d9297; border-radius: var(--radius); background: var(--asphalt); color: var(--white); font: inherit; }
.trip input[type="text"]::placeholder { color: #8d9297; }
.trip input[type="text"]:focus-visible { border-color: var(--white); outline-offset: 2px; }
.trip .btn { width: 100%; }
.hero--split .media.trip { aspect-ratio: auto; overflow: visible; }
.trip .ends { gap: clamp(2rem, 1.2rem + 3vw, 4rem); }

/* How the route works (Where We Run) */
.steps { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; counter-reset: st; border-top: 3px solid var(--ink); }
.steps li { counter-increment: st; display: grid; grid-template-columns: 3rem 1fr; padding: var(--s4) 0; border-bottom: var(--rule); font-size: 1.125rem; font-weight: 700; }
.steps li::before { content: counter(st); font-size: var(--fs-h3); font-weight: 860; line-height: 1.1; color: var(--red); }
.base { background: var(--asphalt); color: var(--white); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); display: grid; gap: var(--s3); position: relative; }
.base::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--tape); }
.base .label { color: var(--fog); font-weight: 700; font-size: var(--fs-sm); }
.base strong { font-size: var(--fs-h2); font-weight: 860; line-height: 1.05; }
.base p:not(.label) { color: var(--fog); }

/* Photo slot (art-directed placeholder; see IMAGE-MANIFEST.md) */
.slot { position: relative; display: grid; align-content: center; gap: var(--s3); aspect-ratio: var(--r-hero); padding: clamp(2rem, 1.2rem + 3vw, 3.5rem); background: var(--asphalt-2); color: var(--white); overflow: hidden; }
.slot::before, .slot::after { content: ""; position: absolute; width: 32px; height: 32px; border: 0 solid var(--fog); }
.slot::before { left: 16px; top: 16px; border-left-width: 2px; border-top-width: 2px; }
.slot::after { right: 16px; bottom: 16px; border-right-width: 2px; border-bottom-width: 2px; }
.slot .lane { position: absolute; left: 0; right: 0; bottom: 22%; opacity: 0.5; }
.slot .slot-id { font-size: var(--fs-sm); font-weight: 760; color: var(--fog); }
.slot .slot-title { font-weight: 820; font-size: var(--fs-h3); line-height: 1.2; max-width: 20ch; }
.slot .slot-brief { color: var(--fog); max-width: 34ch; }

/* 10. QUOTE FORM ------------------------------------------------------- */
.quote-head { padding-bottom: var(--s6); }
.quote-head h1 + .lead { margin-top: 0; }
.quote-head .wrap { display: grid; gap: var(--s4); }
.quote-grid { display: grid; gap: var(--s7); }
@media (min-width: 1000px) {
  .quote-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s6); align-items: start; }
  .quote-grid > form, .quote-grid > .form-done { grid-column: 1 / span 8; }
  .quote-grid > aside { grid-column: 9 / span 4; position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
.form { display: grid; gap: var(--s7); counter-reset: step; }
.form > fieldset:not([hidden]) { counter-increment: step; }
.form legend .step::before { content: counter(step); }
.form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--s5); }
.form fieldset[hidden] { display: none; }
.form legend { padding: 0; margin-bottom: var(--s5); font-size: var(--fs-h3); font-weight: 820; }
.form legend .step { color: var(--red); font-weight: 860; margin-right: 0.6em; }
.fields { display: grid; gap: var(--s5); }
@media (min-width: 640px) { .fields--2 { grid-template-columns: 1fr 1fr; } .span-all { grid-column: 1 / -1; } }
.field { display: grid; gap: 0.4rem; align-content: start; }
.field label, .field .label { font-weight: 760; }
.field .hint { color: var(--ink-2); font-size: var(--fs-sm); margin-top: -0.2rem; }
.field .opt { font-weight: 500; color: var(--ink-2); }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; min-height: 3.25rem; padding: 0.7rem 0.85rem 0.55rem;
  border: 2px solid #73787d; border-radius: var(--radius); background: var(--white);
  color: var(--ink); font: inherit; font-size: max(1rem, var(--fs-body));
}
textarea { min-height: 7.5rem; resize: vertical; line-height: 1.45; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 1.25rem) 55%, calc(100% - 0.9rem) 55%; background-size: 0.4rem 0.4rem; background-repeat: no-repeat; padding-right: 2.5rem; }
input:hover, select:hover, textarea:hover { border-color: var(--ink); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--ink); outline: 3px solid var(--ink); outline-offset: 1px; }
[aria-invalid="true"] { border-color: var(--red) !important; box-shadow: inset 4px 0 0 var(--red); }
.err { color: var(--red-deep); font-weight: 720; font-size: var(--fs-sm); }
.err:empty { display: none; }

.choices { display: grid; gap: var(--s3); }
@media (min-width: 640px) { .choices { grid-template-columns: 1fr 1fr; } }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice label { display: grid; gap: 0.3rem; min-height: 100%; padding: var(--s5) var(--s5) var(--s5) 3.4rem; background: var(--white); border: 2px solid #73787d; border-radius: var(--radius); cursor: pointer; }
.choice label::before { content: ""; position: absolute; left: var(--s5); top: 1.65rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2px solid var(--ink); background: var(--white); }
.choice strong { font-size: 1.1875rem; line-height: 1.2; }
.choice label > span { color: var(--ink-2); font-size: var(--fs-sm); }
.choice input:checked + label { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.choice input:checked + label::before { background: var(--ink); box-shadow: inset 0 0 0 3px var(--white); }
.choice input:focus-visible + label { outline: 3px solid var(--ink); outline-offset: 3px; }
.choice--sm label { padding: 0.8rem 0.8rem 0.7rem 2.9rem; }
.choice--sm label::before { left: 0.9rem; top: 0.95rem; }

.vehicle { display: grid; gap: var(--s4); padding: var(--s5); background: var(--white); border-left: 4px solid var(--ink); }
.vehicle[hidden] { display: none; }
.vehicle .vtitle { font-weight: 800; }
.vehicle .runs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (min-width: 640px) { .vehicle .row { display: grid; grid-template-columns: 7rem 1fr 1fr; gap: var(--s4); } .vehicle .runs { grid-template-columns: repeat(3, auto); justify-content: start; } }
.vehicle .row { display: grid; gap: var(--s4); }
.runs-legend { font-weight: 760; margin-bottom: var(--s2); }
.vehicle fieldset { gap: 0; }

.photos { display: grid; gap: var(--s3); }
.photos input[type="file"]::file-selector-button { font: inherit; font-weight: 760; margin-right: var(--s4); padding: 0.6rem 1rem 0.5rem; border: 2px solid var(--ink); border-radius: var(--radius); background: var(--white); color: var(--ink); cursor: pointer; }
.photos input[type="file"] { font: inherit; font-size: var(--fs-sm); padding: var(--s4); border: 2px dashed #73787d; border-radius: var(--radius); background: var(--white); width: 100%; }
.thumbs { display: flex; flex-wrap: wrap; gap: var(--s3); list-style: none; margin: 0; padding: 0; }
.thumbs li { position: relative; width: 6rem; }
.thumbs img { width: 6rem; height: 6rem; object-fit: cover; border-radius: var(--radius); }
.thumbs button { margin-top: 0.3rem; width: 100%; min-height: 2.25rem; font: inherit; font-size: var(--fs-sm); font-weight: 700; background: none; border: 2px solid var(--steel); border-radius: var(--radius); cursor: pointer; }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.submit-row { display: grid; gap: var(--s4); justify-items: start; padding-top: var(--s5); border-top: 3px solid var(--ink); }
.submit-row .btn { min-width: min(100%, 18rem); }
.submit-row p { color: var(--ink-2); font-size: var(--fs-sm); max-width: 52ch; }

.alert { padding: var(--s5); border-left: 6px solid var(--red); background: var(--white); box-shadow: var(--lift); display: grid; gap: var(--s3); }
.alert h2 { font-size: var(--fs-h3); }
.alert ul { margin: 0; padding-left: 1.2rem; }
.alert a { font-weight: 700; }
.form-done { display: grid; gap: var(--s4); padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); background: var(--asphalt); color: var(--white); --focus: var(--white); position: relative; }
.form-done::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--tape); }
.form-done h2 { font-size: var(--fs-h2); }
.form-done p { color: var(--fog); max-width: 52ch; }
.form-done .ref { color: var(--white); font-weight: 800; }
.form-done[hidden] { display: none; }
.form-done, #form-errors, #send-fail { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.copybox { white-space: pre-wrap; font: inherit; font-size: var(--fs-sm); background: var(--concrete); padding: var(--s4); max-height: 16rem; overflow: auto; }

.aside-card { display: grid; gap: var(--s5); padding: var(--s6) var(--s5); background: var(--asphalt); color: var(--white); --focus: var(--white); position: relative; }
.aside-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--tape); }
.aside-card h2 { font-size: var(--fs-h3); }
.aside-card p { color: var(--fog); }
.aside-card .btn { width: 100%; justify-content: center; }
.aside-card hr { border: 0; border-top: var(--rule-dark); margin: 0; width: 100%; }
.aside-card .limits { border-top-color: var(--asphalt-3); }
.aside-card .limits div { border-bottom: var(--rule-dark); grid-template-columns: 6.5rem 1fr; }
.aside-card .limits dt { font-size: 1.375rem; }
.aside-card .limits dd { color: var(--fog); }

/* 11. FOOTER + MOBILE BAR ---------------------------------------------- */
.site-footer { background: var(--night); color: var(--fog); --focus: var(--white); padding-block: var(--s8) var(--s6); font-size: var(--fs-sm); }
.site-footer .cols { display: grid; gap: var(--s6); }
.site-footer h2 { font-size: var(--fs-sm); color: var(--white); font-weight: 760; margin-bottom: var(--s3); letter-spacing: 0.01em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.site-footer a { color: var(--white); text-decoration: none; display: inline-block; padding: 0.35rem 0; font-weight: 650; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .foot-brand p { max-width: 34ch; margin-top: var(--s4); font-size: 1rem; color: var(--fog); }
.site-footer .foot-brand img { width: 150px; }
.site-footer .legal { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); justify-content: space-between; margin-top: var(--s7); padding-top: var(--s5); border-top: var(--rule-dark); }
.site-footer .reg { color: var(--white); font-weight: 760; }
@media (min-width: 760px) { .site-footer .cols { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }

.mobile-bar { display: none; }
@media (max-width: 899px) {
  .mobile-bar {
    display: grid; grid-template-columns: 1fr 1fr; position: fixed; inset: auto 0 0; z-index: 60;
    padding-bottom: env(safe-area-inset-bottom); background: var(--asphalt); box-shadow: 0 -10px 30px -12px rgba(0,0,0,.55);
  }
  .mobile-bar a { display: flex; align-items: center; justify-content: center; gap: 0.5em; min-height: var(--bar-h); font-weight: 820; font-size: 1.0625rem; text-decoration: none; color: var(--white); }
  .mobile-bar a:last-child { background: var(--red); }
  .mobile-bar a:focus-visible { outline-offset: -4px; outline-color: var(--white); }
  .mobile-bar svg { width: 1.1em; height: 1.1em; }
  body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(var(--bar-h) + 1.5rem); }
  .mobile-bar--solo { grid-template-columns: 1fr; }
  .mobile-bar--solo a:last-child { background: var(--asphalt); }
}

/* 12. REVIEW-ONLY ------------------------------------------------------ */
.review-note { background: #fff4cf; color: var(--ink); font-size: var(--fs-sm); font-weight: 650; padding: 0.5rem 0; text-align: center; }
.review-note a { font-weight: 800; }

/* 13. MOTION ----------------------------------------------------------- */
/* One orchestrated moment per page: the white line draws in once. */
@media (prefers-reduced-motion: no-preference) {
  .js .route.is-armed ol::before { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(.2,.7,.2,1); }
  @media (max-width: 899px) { .js .route.is-armed ol::before { clip-path: inset(0 0 100% 0); } }
  .js .route.is-armed.is-in ol::before { clip-path: inset(0 0 0 0); }
  .js .trip .ends::before { animation: roll 1.6s cubic-bezier(.2,.7,.2,1) both 0.3s; }
  @keyframes roll { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Print: the quote summary and contact details, nothing else */
@media print {
  .site-header, .mobile-bar, .site-footer .cols, .tape, .pano, .rig3 picture { display: none !important; }
  body { padding: 0; background: #fff; }
  .surface-dark { background: #fff; color: #000; }
}