/* ==========================================================================
   Self-hosted fonts — 2026-09-07. Latin subset, variable weight 400-700,
   one file per family (20 KB + 47 KB). font-display: swap so text paints in
   the fallback stack immediately; both files are preloaded in <head>.
   ========================================================================== */
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/oswald-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/inter-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Cameron's Brokerage Inc. — theme layer over scrollcraft.css
   Grammar: chaptered editorial. See BRIEF.md §3.

   Palette values are taken VERBATIM from the token table in the project
   CLAUDE.md. Do not substitute aesthetic judgement for these — the build
   has already drifted off them once.
   ========================================================================== */

:root {
  /* --- brand tokens, from CLAUDE.md "Design source of truth" ------------- */
  --cb-primary:       #ff6b35;
  --cb-primary-dark:  #e85a28;
  --cb-primary-glow:  rgba(255, 107, 53, .30);
  --cb-primary-soft:  rgba(255, 107, 53, .15);
  --cb-primary-line:  rgba(255, 107, 53, .35);
  --cb-bg:            #0f1419;
  --cb-secondary:     #1a2332;
  --cb-secondary-lt:  #2a3647;
  --cb-card-bg:       rgba(26, 35, 50, .6);
  --cb-border:        rgba(255, 255, 255, .1);
  --cb-text-muted:    #b0b8c4;

  /* --- engine token overrides ------------------------------------------- */
  --sc-canvas:     var(--cb-bg);
  --sc-surface:    var(--cb-secondary);
  --sc-ink:        #f2f5f8;
  --sc-ink-soft:   var(--cb-text-muted);
  --sc-accent:     var(--cb-primary);
  --sc-accent-ink: #15100c;

  --sc-hairline:        var(--cb-border);
  --sc-hairline-strong: rgba(255, 255, 255, .2);

  /* Oswald + Inter are locked by CLAUDE.md. taste.md discourages Inter as a
     default; brand rules win over the skill default. */
  --sc-font-display: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --sc-font-text:    "Inter", system-ui, -apple-system, sans-serif;

  --sc-r-sm: 8px;   /* inputs, per CLAUDE.md */
  --sc-r-md: 12px;  /* standard */
  --sc-r-lg: 16px;  /* large */

  /* --- chapter grounds. Hard cuts, NOT drift. --------------------------- */
  /* Chaptered editorial forbids a continuous drift gradient: a cut is not an
     interpolation. Each chapter paints its own opaque ground. */
  --cb-ground-plate:  #0b0f13;
  --cb-ground-ch1:    #0f1419;
  --cb-ground-peak:   #070a0d;
  --cb-ground-ch2:    #131b25;
  --cb-ground-ch3:    #0d1620;
  --cb-ground-close:  #0b0f13;

  /* --- the ledger ------------------------------------------------------- */
  --cb-folio-w: clamp(3.5rem, 7vw, 7.5rem);
}

/* ==========================================================================
   Blue hour
   The vibe answer was "blue-hour cinematography". With no photography and no
   generation key, blue hour is delivered as LIGHT rather than as a picture:
   a cold sky falling to a dark horizon, with warm sodium-orange sources
   reading against it. Every ground below is a real blue-hour sample, not a
   generic dark theme.
   ========================================================================== */

body {
  /* The design's ground is a 135deg gradient (CLAUDE.md); translucent
     cards only read against one. No background-attachment: fixed. */
  background: linear-gradient(135deg, var(--cb-bg), var(--cb-secondary));
  -webkit-font-smoothing: antialiased;
}

/* Per-section opaque grounds — the hard cuts this grammar requires. Each
   chapter is its own 135deg gradient (2026-09-07): a flat solid under
   rgba(26,35,50,.6) + blur(14px) cards rendered them as flat plates, the
   exact "pasted on" failure CLAUDE.md warns about. Different pairs per
   chapter keep the cuts. The peak stays solid: nothing translucent sits on
   it and the numeral wants the darkest ground on the page. */
.cb-ch--plate { background: var(--cb-ground-plate); }
.cb-ch--one   { background: linear-gradient(135deg, var(--cb-ground-ch1) 0%, var(--cb-secondary) 100%); }
.cb-ch--peak  { background: var(--cb-ground-peak); }
.cb-ch--two   { background: linear-gradient(135deg, var(--cb-ground-ch2) 0%, var(--cb-secondary-lt) 130%); }
.cb-ch--three { background: linear-gradient(135deg, var(--cb-ground-ch3) 0%, var(--cb-secondary) 100%); }
.cb-ch--close { background: var(--cb-ground-close); }

/* ==========================================================================
   Typography floor
   Oswald is condensed and uppercase-friendly. It needs positive tracking at
   small sizes and tight tracking at display sizes — the inverse of the
   engine's defaults, which are tuned for a geometric sans.
   ========================================================================== */

.sc-display {
  font-family: var(--sc-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.02;
}

.sc-display--xl { letter-spacing: -0.02em; }

/* Chapter intertitles. This is where the maximalism lives: extreme scale,
   not continuous motion. */
.cb-intertitle {
  font-family: var(--sc-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(3rem, 13vw, 11rem);
  line-height: 0.88;
  letter-spacing: -0.03em;
  margin: 0;
}

.cb-eyebrow {
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cb-primary);
  margin: 0 0 var(--sc-4);
}

/* taste.md caps eyebrows at one per three sections. This page uses three
   across six sections and they are chapter markers, not decoration. */

.cb-body {
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-base);
  line-height: 1.68;
  color: var(--cb-text-muted);
  max-width: 58ch;
}

.cb-body strong { color: var(--sc-ink); font-weight: 600; }

.cb-lede {
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-lg);
  line-height: 1.45;
  color: var(--sc-ink);
  max-width: 46ch;
  font-weight: 400;
}

/* ==========================================================================
   The folio — chaptered editorial's own chrome, no fixed nav bar.
   It carries the Ledger Margin (the signature move).
   ========================================================================== */

.cb-folio {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--cb-folio-w);
  height: 100vh;
  height: 100dvh;
  z-index: var(--sc-z-chrome);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: var(--sc-5) 0;
  border-right: 1px solid var(--cb-border);
  background: rgba(11, 15, 19, .72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
}

.cb-folio > * { pointer-events: auto; }


/* The running year. Tabular figures so the layout never jitters as it ticks. */
.cb-folio__year {
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.5vw, 1.4rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--sc-ink);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 1;
  transition: color var(--sc-d-base) var(--sc-ease-out);
}

.cb-folio__year[data-cb-milestone="true"] { color: var(--cb-primary); }

/* The rule that fills as the years pass. Scale, not height — height animates
   layout, transform does not. */
.cb-folio__track {
  position: relative;
  flex: 1;
  width: 2px;
  margin: var(--sc-5) 0;
  background: var(--cb-border);
  overflow: hidden;
}

.cb-folio__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--cb-primary), var(--cb-primary-dark));
  transform-origin: top center;
  transform: scaleY(var(--cb-ledger, 0));
  will-change: transform;
}

.cb-folio__chapter {
  font-family: var(--sc-font-text);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--cb-text-muted);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* Phone: the folio becomes a top bar. A 7vw vertical rail on a 390px screen
   is 27px and unreadable. */
@media (max-width: 60rem) {
  :root { --cb-folio-w: 100%; }

  /* Bottom edge, not top: the nav bar owns the top of a phone screen now
     (2026-09-05), and two stacked bars ate a fifth of the viewport. */
  .cb-folio {
    top: auto;
    bottom: 0;
    height: auto;
    flex-direction: row;
    align-items: center;
    padding: var(--sc-3) var(--sc-4);
    border-right: 0;
    border-top: 1px solid var(--cb-border);
    gap: var(--sc-4);
    padding-bottom: max(var(--sc-3), env(safe-area-inset-bottom));
  }

  .cb-folio__year,
  .cb-folio__chapter { writing-mode: horizontal-tb; }

  .cb-folio__track { width: auto; height: 2px; margin: 0; flex: 1; }

  .cb-folio__fill {
    transform-origin: left center;
    transform: scaleX(var(--cb-ledger, 0));
  }
}

/* ==========================================================================
   Page shell — content clears the folio
   ========================================================================== */

.cb-main { padding-left: var(--cb-folio-w); }

@media (max-width: 60rem) {
  /* No top padding since 2026-09-05: the hero clears the nav itself, and
     the folio bar now sits at the bottom edge. */
  .cb-main { padding-left: 0; padding-top: 0; }
}

.cb-wrap {
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 4rem);
}

.cb-section { padding-block: clamp(4rem, 9vw, 10rem); }

/* devices.md §8: a flow section directly after a pinned act takes reduced
   block padding, or the reader gets a near-empty screen while the stage
   scrolls off. */
.cb-section--after-pin { padding-block-start: clamp(1.5rem, 3vw, 3rem); }

/* ==========================================================================
   Hazard geometry — the brand's own texture, at chapter cuts.
   -45deg, 22px bands, dark band #12171d (CLAUDE.md).
   ========================================================================== */

.cb-hazard {
  height: 14px;
  background: repeating-linear-gradient(
    -45deg,
    var(--cb-primary) 0 22px,
    #12171d 22px 44px
  );
}

.cb-hazard--thin { height: 6px; opacity: .5; }

/* ==========================================================================
   Chapter title page (the plate). Grammar: type on the ground, no media
   above the fold, media starts in chapter one.
   ========================================================================== */

.cb-plate {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sc-6);
}

.cb-plate__title {
  font-family: var(--sc-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 9.5vw, 8.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin: 0;
}

.cb-plate__title em {
  font-style: normal;
  color: var(--cb-primary);
}

.cb-plate__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-3) var(--sc-6);
  padding-top: var(--sc-5);
  border-top: 1px solid var(--cb-border);
  font-size: var(--sc-t-sm);
  color: var(--cb-text-muted);
}

.cb-plate__meta dt {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--cb-primary);
  margin-bottom: var(--sc-1);
}

.cb-plate__meta dd { margin: 0; color: var(--sc-ink); }

/* ==========================================================================
   Chapter one — the yard. Media column with parallax planes.
   Grammar: media sits in its own column with a caption. It never bleeds
   under type.
   ========================================================================== */

.cb-spread {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

@media (min-width: 62rem) {
  .cb-spread { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .cb-spread--flip > :first-child { order: 2; }
}

.cb-figure {
  position: relative;
  margin: 0;
  border: 1px solid var(--cb-border);
  border-radius: var(--sc-r-lg);
  overflow: hidden;
  background: var(--cb-ground-peak);
}

.cb-figure__stage {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  isolation: isolate;
}

@media (max-width: 62rem) {
  .cb-figure__stage { aspect-ratio: 4 / 3; }
}

/* Photographic plates.
   The image is deliberately larger than its frame so parallax travel never
   exposes an edge. max-width:none matters: a global img{max-width:100%} would
   shrink an absolutely positioned shot to the frame on phones and the travel
   would clip. */
.cb-shot {
  position: absolute;
  inset: -8% 0;
  width: 100%;
  height: 116%;
  max-width: none;
  object-fit: cover;
  display: block;
  will-change: transform;
  /* Parallaxed elements transition OPACITY ONLY — a transform transition eases
     every per-frame scroll write and reads as the image lagging the thumb. */
  transition: opacity var(--sc-d-slow) var(--sc-ease-out);
}

/* Blue hour is already cold; a light touch keeps the greys from going muddy
   once the image is scaled down. */
.cb-figure__stage .cb-shot { filter: saturate(1.04) contrast(1.03); }

.cb-figure--wide { margin: 0; }
.cb-figure__stage--wide { aspect-ratio: 21 / 9; }

@media (max-width: 62rem) {
  .cb-figure__stage--wide { aspect-ratio: 3 / 2; }
}

/* The cab shot rides the rail as its own item. */
.cb-rail__item--shot {
  position: relative;
  width: clamp(20rem, 34vw, 32rem);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--cb-border);
  border-radius: var(--sc-r-md);
  background: var(--cb-ground-peak);
  display: flex;
  flex-direction: column;
}

.cb-rail__item--shot .cb-shot { position: relative; inset: auto; height: 100%; flex: 1; }

.cb-rail__item--shot figcaption {
  padding: var(--sc-3) var(--sc-4);
  border-top: 1px solid var(--cb-border);
  font-size: var(--sc-t-xs);
  color: var(--cb-text-muted);
}

@media (max-width: 60rem) {
  .cb-rail__item--shot { width: min(80vw, 19rem); }
}

/* Section floor fade — hides the clip line where planes meet the figure edge. */
.cb-figure__stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 34%;
  background: linear-gradient(180deg, transparent, var(--cb-ground-peak));
  pointer-events: none;
  z-index: 5;
}

.cb-figure figcaption {
  padding: var(--sc-4) var(--sc-5);
  border-top: 1px solid var(--cb-border);
  font-size: var(--sc-t-xs);
  line-height: 1.5;
  color: var(--cb-text-muted);
}

.cb-figure figcaption b {
  display: block;
  color: var(--sc-ink);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Placeholder badge — visible on purpose. This must not ship silently. */
.cb-placeholder {
  position: absolute;
  z-index: 6;
  top: var(--sc-3);
  left: var(--sc-3);
  padding: 4px 9px;
  border: 1px solid var(--cb-primary-line);
  border-radius: 999px;
  background: rgba(7, 10, 13, .8);
  font-family: var(--sc-font-text);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cb-primary);
}

/* ==========================================================================
   THE PEAK — the ledger takes the frame.
   ========================================================================== */

.cb-peak {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  text-align: center;
}

.cb-peak__year {
  font-family: var(--sc-font-display);
  font-weight: 700;
  /* tabular-nums is a no-op here: the Google-served Oswald subset has no
     tnum table, so the box width swung ~80px between 2019 and 2026 and
     forced a layout pass every frame of the peak. Fix the box instead. */
  display: inline-block;
  min-width: 2.45em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  /* 24rem, not 30: at 30rem the numeral was 538px tall in a 900px viewport
     and was fully on screen for only ~300px of scroll, so the 75-year count
     had to sprint. Smaller numeral, longer window, slower count. */
  font-size: clamp(6rem, 28vw, 24rem);
  line-height: 1;
  letter-spacing: -0.045em;
  margin: 0;
  color: var(--sc-ink);
  /* line-height 1 + padding, so the reveal wipe does not shear the figures.
     devices.md §4: clip-path is relative to the border box, not the ink. */
  padding: 0.06em 0;
}

.cb-peak__caption {
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-lg);
  color: var(--cb-text-muted);
  max-width: 34ch;
  margin: var(--sc-5) auto 0;
}

.cb-peak__caption b { color: var(--sc-ink); font-weight: 600; }

/* The decades ladder behind the number. Opacity is driven per-rung from
   --sc-p in JS so the reader sees seventy-five years pass, not one number change. */
.cb-decades {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.5rem, 1.8vh, 1.4rem);
  padding-inline: var(--sc-5);
  pointer-events: none;
  z-index: 0;
}

.cb-decade {
  display: flex;
  align-items: center;
  gap: var(--sc-4);
  font-family: var(--sc-font-display);
  font-size: clamp(0.7rem, 1.4vw, 1rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cb-text-muted);
  opacity: var(--cb-rung, 0.08);
}

.cb-decade::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .4;
}

.cb-peak__fg { position: relative; z-index: 2; }

/* ==========================================================================
   Chapter two — the work. Numbered steps.
   ========================================================================== */

.cb-steps {
  display: grid;
  gap: var(--sc-5);
  counter-reset: step;
  padding: 0;
  margin: 0;
  list-style: none;
}

@media (min-width: 54rem) {
  .cb-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The list also carries .sc-stack for the stagger reveal, and .sc-stack adds
   margin-top to every child after the first. Inside a grid that pushed cards
   two and three down and shortened them by the same amount. Grid gap owns
   the spacing here. */
.cb-steps > * + *,
.cb-colophon__grid > * + * { margin-top: 0; }

.cb-step {
  position: relative;
  padding: var(--sc-6) var(--sc-5) var(--sc-5);
  border: 1px solid var(--cb-border);
  border-radius: var(--sc-r-md);
  background: var(--cb-card-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.cb-step::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  top: var(--sc-4);
  right: var(--sc-5);
  font-family: var(--sc-font-display);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--cb-primary);
  opacity: .28;
}

.cb-step h3 {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-xl);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin: 0 0 var(--sc-3);
}

.cb-step p { margin: 0; font-size: var(--sc-t-sm); line-height: 1.6; color: var(--cb-text-muted); }

/* Industries list — set as label schema, not marketing copy. */
.cb-industries {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-2);
  padding: 0;
  margin: var(--sc-6) 0 0;
  list-style: none;
}

.cb-industries li {
  padding: 7px 14px;
  border: 1px solid var(--cb-border);
  border-radius: 999px;
  font-size: var(--sc-t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cb-text-muted);
}

/* ==========================================================================
   Chapter three — the cab. Truck-type rail (pan act).
   ========================================================================== */

/* The pan stage is sticky at top:0 and 100svh tall, so without this the
   card headings sat under the fixed nav for the whole hold and the bottom
   half of the screen was empty. Centre the rail and reserve the nav. */
[data-sc-act="pan"] [data-sc-stage] {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-top: var(--cb-nav-h);
}

.cb-rail {
  display: flex;
  gap: var(--sc-5);
  align-items: flex-start;
  padding-inline: clamp(1.25rem, 4vw, 4rem);
  will-change: transform;
}

.cb-rail__item {
  flex: 0 0 auto;
  width: clamp(15rem, 23vw, 21rem);
  padding: var(--sc-6) var(--sc-5);
  border: 1px solid var(--cb-border);
  border-radius: var(--sc-r-md);
  background: var(--cb-card-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  /* Staggered settle, driven from --sc-p in JS. Opacity floored at .55 so a
     not-yet-settled card reads as arriving, not as failing to load. */
  opacity: var(--cb-settle, 1);
}

/* devices.md §3: the rail's own heading and closing note are rail ITEMS.
   They earn their place and they add the width the travel needs. */
.cb-rail__item--head,
.cb-rail__item--tail {
  border-color: transparent;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  width: clamp(17rem, 27vw, 25rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cb-rail__item h3 {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-lg);
  text-transform: uppercase;
  margin: 0 0 var(--sc-3);
  letter-spacing: 0.01em;
}

.cb-spec {
  margin: 0;
  font-size: var(--sc-t-sm);
  line-height: 1.7;
  color: var(--cb-text-muted);
}

.cb-spec div { display: flex; justify-content: space-between; gap: var(--sc-3); padding: 6px 0; border-bottom: 1px solid var(--cb-border); }
.cb-spec div:last-child { border-bottom: 0; }
.cb-spec dt { color: var(--cb-text-muted); }
.cb-spec dd { margin: 0; color: var(--sc-ink); font-weight: 600; text-align: right; }

@media (prefers-reduced-motion: reduce) {
  .cb-rail__item { opacity: 1 !important; }
}

/* ==========================================================================
   Requirements block (drivers)
   ========================================================================== */

.cb-reqs { display: grid; gap: var(--sc-4); padding: 0; margin: var(--sc-6) 0 0; list-style: none; }

@media (min-width: 46rem) { .cb-reqs { grid-template-columns: 1fr 1fr; } }

.cb-req {
  display: flex;
  gap: var(--sc-3);
  align-items: baseline;
  padding: var(--sc-4);
  border-left: 2px solid var(--cb-primary-line);
  background: rgba(26, 35, 50, .35);
  font-size: var(--sc-t-sm);
  color: var(--cb-text-muted);
}

.cb-req b { color: var(--sc-ink); font-weight: 600; }

/* ==========================================================================
   Colophon — the close. Grammar: masthead plate, small type, CTA set as a
   line of running text rather than a button island. No magnet, no spotlight.
   ========================================================================== */

.cb-colophon {
  padding-block: clamp(4rem, 8vw, 8rem);
  border-top: 1px solid var(--cb-border);
}

.cb-colophon__grid {
  display: grid;
  gap: var(--sc-6);
  font-size: var(--sc-t-sm);
}

@media (min-width: 54rem) {
  .cb-colophon__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.cb-colophon h2 {
  font-family: var(--sc-font-display);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--cb-primary);
  margin: 0 0 var(--sc-3);
}

.cb-colophon p { margin: 0 0 var(--sc-2); color: var(--cb-text-muted); line-height: 1.65; }

.cb-colophon a { color: var(--sc-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cb-colophon a:hover { color: var(--cb-primary); }

/* The ask, as running text. Doubled selector so it beats .cb-colophon p. */
.cb-colophon .cb-ask,
.cb-ask {
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-xl);
  line-height: 1.45;
  max-width: none;
  color: var(--sc-ink);
  margin: 0 0 var(--sc-7);
  font-weight: 400;
}

.cb-ask a {
  color: var(--cb-primary);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
  white-space: nowrap;
}

.cb-ask a:hover { color: var(--cb-primary-dark); }

/* Skip link — the folio is the first thing in the tab order otherwise. */
.cb-skip {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: var(--sc-3) var(--sc-4);
  background: var(--cb-primary);
  color: var(--sc-accent-ink);
  font-weight: 700;
}

.cb-skip:focus { left: var(--sc-4); top: var(--sc-4); position: fixed; }

/* ==========================================================================
   Column stack for cue-driven blocks inside pinned acts.
   Deliberately NOT .sc-stack: that class pairs with data-sc-stagger and
   data-sc-in, and its children stay hidden until the IntersectionObserver
   fires. Inside a pinned act it never does.
   ========================================================================== */

.cb-colstack { display: flex; flex-direction: column; gap: var(--sc-5); }
.cb-colstack > * { margin: 0; }

/* Step headings wrap to two lines at some widths; reserve the corner so a
   wrapped heading can never run under the numeral. */
.cb-step h3 { padding-right: 2.6rem; }

/* ==========================================================================
   Mobile: the folio is a FIXED top bar, so pinned stages scroll underneath
   it. A pinned stage is centred in the viewport, which puts its first line
   directly under the bar — "THE YARD" and the colophon ask were both being
   clipped. Reserve the bar's height inside the stages themselves; padding on
   .cb-main only moves the document, not a position:fixed stage.
   ========================================================================== */

:root { --cb-bar-h: 0px; }

@media (max-width: 60rem) {
  :root { --cb-bar-h: 4.25rem; }

  [data-sc-stage] > .cb-wrap,
  .cb-peak,
  .cb-rail { padding-top: var(--cb-bar-h); }

  /* The rail already reserves the bar above; do not stack the desktop
     stage padding on top of it. */
  [data-sc-act="pan"] [data-sc-stage] { padding-top: 0; }

  .cb-colophon { padding-block-start: calc(var(--cb-bar-h) + var(--sc-6)); }

  /* Chapter intertitles are sized off vw; at 390px the clamp floor still
     collides with the bar on two lines. Pull the ceiling in on phones. */
  .cb-intertitle { font-size: clamp(2.4rem, 11vw, 4.5rem); }

  /* Spec rows are read cropped as the rail travels (devices.md §3). Keep the
     value from being squeezed to nothing when a card is half off-screen. */
  .cb-spec div { flex-wrap: nowrap; }
  .cb-spec dd { flex: 0 0 auto; white-space: nowrap; }

  .cb-rail__item { width: min(74vw, 17rem); }
  .cb-rail__item--head,
  .cb-rail__item--tail { width: min(84vw, 20rem); }
}

/* ==========================================================================
   BLUR-RESOLVE HEADLINES
   The technique the client identified on the reference site: a headline
   arrives slightly out of focus and resolves sharp as it rises. It reads as
   a camera finding focus, which is why it suits a page whose art direction is
   cinematography.

   Piggybacks on the engine's own entrance class rather than adding a second
   observer: the engine writes .sc-in when [data-sc-in] enters the viewport.
   Blur is expensive to animate, so it is confined to headings — never body
   copy, and never more than a few elements on screen at once.
   ========================================================================== */

.cb-intertitle,
.cb-plate__title,
.cb-hero__title,
.cb-ask,
.cb-step h3 {
  filter: blur(9px);
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    filter   760ms var(--sc-ease-out),
    opacity  620ms var(--sc-ease-out),
    transform 760ms var(--sc-ease-out);
  will-change: filter, opacity, transform;
}

[data-sc-in].sc-in .cb-intertitle,
[data-sc-in].sc-in .cb-plate__title,
[data-sc-in].sc-in .cb-hero__title,
[data-sc-in].sc-in .cb-ask,
.sc-in .cb-intertitle,
.sc-in .cb-plate__title,
.sc-in .cb-ask,
.sc-in.cb-step h3,
[data-sc-in].sc-in.cb-steps .cb-step h3 {
  filter: blur(0);
  opacity: 1;
  transform: none;
}

/* Chapter one is a flow act now, so .sc-in fires and the standard
   blur-resolve above owns it. The old --cb-focus path is kept only for any
   heading that still lives inside a pinned act. */
[data-sc-cue] .cb-intertitle {
  filter: blur(calc(9px * (1 - var(--cb-focus, 1))));
  opacity: 1;
  transform: none;
}

/* Once the rail act is running, its cards must not sit blurred. */
.cb-rail .cb-intertitle { filter: none; opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cb-intertitle,
  .cb-plate__title,
  .cb-hero__title,
  .cb-ask,
  .cb-step h3,
  [data-sc-cue] .cb-intertitle {
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Folio progress dot — the reference site's glowing scroll indicator, folded
   into the folio rail we already have rather than added as a second element.
   ========================================================================== */

.cb-folio__track { overflow: visible; }

.cb-folio__dot {
  position: absolute;
  left: 50%;
  top: 0;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--cb-primary);
  box-shadow: 0 0 0 3px rgba(255, 107, 53, .18), 0 0 14px 2px rgba(255, 107, 53, .55);
  transform: translateY(calc(var(--cb-ledger, 0) * var(--cb-track-len, 0px)));
  will-change: transform;
}

@media (max-width: 60rem) {
  .cb-folio__dot {
    top: 50%;
    left: 0;
    margin: -3.5px 0 0 -3.5px;
    transform: translateX(calc(var(--cb-ledger, 0) * var(--cb-track-len, 0px)));
  }
}

/* ==========================================================================
   Chapter one gets a full-width scene above the text spread.
   The grammar forbids media bleeding UNDER type; it does not forbid the
   media column being wide. Type still sits in its own block below.
   ========================================================================== */

@media (min-width: 62rem) {
  .cb-spread--scene {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.28fr);
    /* The text column is much taller than the figure; aligning to start left
       a screen-height hole under the scene. */
    align-items: center;
  }
}

.cb-figure__stage { isolation: isolate; }
.cb-plane--berm { z-index: 3; }
.cb-plane--truck { z-index: 2; }

/* Motion plates. A <video> needs object-fit exactly like the <img> it
   replaced, and a poster that fills the frame rather than letterboxing. */
video.cb-shot { object-fit: cover; background: var(--cb-ground-peak); }


/* ==========================================================================
   THE NAV — 2026-09-05. Fixed bar to the right of the folio rail.
   Inter, sentence case, translucent, per the project CLAUDE.md.
   ========================================================================== */

:root { --cb-nav-h: 5rem; }
/* Badge steps 60 / 80 / 96px with the viewport (CLAUDE.md) so its own
   lettering stays legible; the bar grows with it. */
@media (min-width: 62rem)  { :root { --cb-nav-h: 6rem; } }
@media (min-width: 100rem) { :root { --cb-nav-h: 7rem; } }

.cb-nav {
  position: fixed;
  top: 0;
  left: var(--cb-folio-w);
  right: 0;
  height: var(--cb-nav-h);
  z-index: var(--sc-z-chrome);
  display: flex;
  align-items: center;
  gap: var(--sc-5);
  padding-inline: clamp(1rem, 3vw, 2.5rem);
  background: rgba(15, 20, 25, .9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cb-border);
  font-family: var(--sc-font-text);
}

.cb-nav__badge { display: flex; flex: 0 0 auto; }
/* The badge already reads "Cameron's Brokerage Inc. / For all your dump
   trucking needs" (CLAUDE.md sizes it 60-96px so that stays legible). One
   badge on the page: the folio rail no longer carries one. */
.cb-nav__badge img { display: block; width: 60px; height: auto; }
@media (min-width: 62rem)  { .cb-nav__badge img { width: 80px; } }
@media (min-width: 100rem) { .cb-nav__badge img { width: 96px; } }

.cb-nav__links { display: flex; gap: var(--sc-5); margin-left: var(--sc-4); }

.cb-nav__links a,
.cb-nav__tel {
  color: var(--sc-ink);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 600;
  opacity: .85;
  transition: opacity 240ms var(--sc-ease-out);
}
.cb-nav__links a:hover,
.cb-nav__tel:hover { opacity: 1; }

.cb-nav__tel { margin-left: auto; font-variant-numeric: tabular-nums; }
/* Five links (Service Area added 2026-10-16) plus the phone and CTA: no
   link may break onto two lines, and the row tightens under 72rem. */
.cb-nav__links a, .cb-nav__tel { white-space: nowrap; }
@media (min-width: 60.01rem) and (max-width: 72rem) {
  .cb-nav__links { gap: var(--sc-4); margin-left: var(--sc-3); }
  .cb-nav__links a, .cb-nav__tel { font-size: .875rem; }
  .cb-nav__cta { padding: 12px 16px; font-size: .8rem; }
}

/* Buttons — the project spec: Inter 700, uppercase, .05em, 12px radius,
   gradient primary that lifts on hover. */
.cb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sc-font-text);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1;
  padding: 16px 32px;
  border-radius: 12px;
  text-decoration: none;
  color: #fff;
  white-space: nowrap;
  transition: transform 240ms var(--sc-ease-out),
              box-shadow 240ms var(--sc-ease-out),
              background-color 240ms var(--sc-ease-out);
}

.cb-btn--primary {
  background: linear-gradient(135deg, var(--cb-primary), var(--cb-primary-dark));
  box-shadow: 0 12px 30px var(--cb-primary-glow);
}
.cb-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(255, 107, 53, .4);
}

.cb-btn--ghost {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cb-btn--ghost:hover { background: rgba(255, 255, 255, .1); }

.cb-nav__cta { padding: 12px 22px; font-size: .85rem; }

@media (max-width: 60rem) {
  .cb-nav { left: 0; height: 4rem; gap: var(--sc-4); }
  /* Phone touch targets: every link in the 4rem bar is at least 48px tall
     (QA 2026-10-15 measured the CTA at 32px and the badge at 36px). The
     badge image stays 44px; the link around it grows, not the picture. */
  .cb-nav__badge { align-items: center; justify-content: center; min-width: 48px; min-height: 48px; }
  .cb-nav__badge img { width: 44px; }
  .cb-nav__links { display: none; }
  .cb-nav__tel { font-size: .9rem; padding-block: 14px; }
  .cb-nav__cta { padding: 0 16px; min-height: 48px; font-size: .75rem; }
}

@media (max-width: 26rem) {
  .cb-nav__tel { display: none; }
}

/* ==========================================================================
   THE HERO — layered depth, 2026-09-05. See the (C) hero spec.

   Three plates, one frame. The outer .cb-hero__layer carries the live
   scroll + pointer offset written by hero.js as custom properties; the
   inner <img> carries the one-shot load settle. The far plate lags the page
   hardest, the near plate leads it slightly. Nearer = faster = closer.
   ========================================================================== */

.cb-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

.cb-hero__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  --cb-sy: 0px;
  --cb-mx: 0;
  --cb-my: 0;
}

.cb-hero__layer {
  position: absolute;
  /* A little headroom top and bottom. Positive (downward) travel never
     exposes an edge because the part of the stage it uncovers has already
     scrolled off the top; only the small negative near-plate travel needs
     room at the bottom. */
  inset: -6% 0 -14% 0;
  will-change: transform;
}

.cb-hero__layer picture { display: block; width: 100%; height: 100%; }

.cb-hero__layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;   /* keeps the tipped box right of the headline */
}

/* Depth = the background lagging the page. The section itself scrolls at
   1x; a plate translated DOWN by r * scroll therefore moves at (1 - r) x.
   Far plate holds at ~0.4x, the truck at ~0.72x, the mud in front at ~0.92x. The copy rides at 1x, in front of the truck. Pointer
   offsets are a few px in the opposite sense: near follows the hand most. */
.cb-hero__layer--far {
  transform: translate3d(calc(var(--cb-mx) * -8px),
                         calc(var(--cb-sy) * 0.58 + var(--cb-my) * -5px), 0);
}
.cb-hero__layer--mid {
  transform: translate3d(calc(var(--cb-mx) * 16px),
                         calc(var(--cb-sy) * 0.28 + var(--cb-my) * 10px), 0);
}
.cb-hero__layer--near {
  /* +0.08, not -0.10: at -0.10 the mud band had climbed 170px over the
     wheels by half a screen of scroll and the truck read as sinking. */
  transform: translate3d(calc(var(--cb-mx) * 30px),
                         calc(var(--cb-sy) * 0.08 + var(--cb-my) * 16px), 0);
}

/* Load settle: each plate arrives from a little lower, the far one also a
   touch larger, so the frame assembles into place rather than appearing. */
/* Gated on .js (set inline in <head>) so a no-script page shows the plates
   registered, not stuck 40px apart. */
.js .cb-hero__layer--far  img { transform: translate3d(0, 18px, 0) scale(1.04); }
.js .cb-hero__layer--mid  img { transform: translate3d(0, 28px, 0); }
.js .cb-hero__layer--near img { transform: translate3d(0, 40px, 0); }

.cb-hero__layer img {
  transition: transform 1100ms var(--sc-ease-out);
}
.cb-hero.is-live .cb-hero__layer img { transform: none; }

/* Type legibility: the sky is already empty on the left, so the scrim is
   light. Bottom fade lands the fold on the hazard stripe cleanly. */
.cb-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11, 15, 19, .72) 0%, rgba(11, 15, 19, .35) 42%, rgba(11, 15, 19, 0) 70%),
    linear-gradient(0deg, rgba(11, 15, 19, .85) 0%, rgba(11, 15, 19, 0) 38%),
    linear-gradient(180deg, rgba(11, 15, 19, .55) 0%, rgba(11, 15, 19, 0) 22%);
}

.cb-hero__wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--cb-nav-h) + var(--sc-6));
  padding-bottom: var(--sc-8);
  /* Type leaves as the fold does. --cb-hy is 0 at the top, 1 once gone.
     Hold full opacity through the first 35% (the CTAs are still the fold),
     then fade out by 75% so the hazard cut lands on an empty plate. */
  opacity: calc(1 - clamp(0, (var(--cb-hy, 0) - 0.35) / 0.4, 1));
}

.cb-hero__copy { max-width: 50rem; }

.cb-hero__h1 { margin: 0; }
.cb-hero__eyebrow { display: block; margin-bottom: var(--sc-4); }

/* The business name: first line of the h1, set as a proper heading rather
   than an eyebrow so the page identifies itself before the tagline. */
.cb-hero__name {
  display: block;
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sc-ink);
  margin-bottom: var(--sc-4);
  text-shadow: 0 1px 18px rgba(0, 0, 0, .6);
}

.cb-hero__title {
  display: block;
  font-family: var(--sc-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.8rem, 7.6vw, 6.8rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin: 0;
  text-shadow: 0 2px 40px rgba(0, 0, 0, .45);
}
.cb-hero__title em { font-style: normal; color: var(--cb-primary); }

.cb-hero__lede { max-width: 34rem; text-shadow: 0 1px 18px rgba(0, 0, 0, .6); }

.cb-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sc-3); padding-top: var(--sc-2); }

.cb-hero__since {
  position: absolute;
  right: clamp(1.25rem, 4vw, 4rem);
  bottom: var(--sc-7);
  margin: 0;
  text-align: right;
  font-family: var(--sc-font-text);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--cb-text-muted);
}
.cb-hero__since b {
  display: block;
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--sc-ink);
  margin-top: var(--sc-1);
}

@media (max-width: 60rem) {
  .cb-hero { align-items: flex-start; }
  .cb-hero__wrap {
    justify-content: flex-start;
    padding-top: calc(4rem + var(--sc-7));
    padding-bottom: 24vh;   /* leaves the truck's wheels in frame under the copy */
  }
  /* Portrait plates: the frame is composed for this box, so centre it. */
  .cb-hero__layer img { object-position: 50% 50%; }
  .cb-hero__title { font-size: clamp(2.6rem, 13vw, 4.6rem); }
  .cb-hero__name { font-size: 1.15rem; }
  /* The folio bar at the bottom edge already shows the founding year on phones; a second
     one a thumb-width above it read as a mistake. */
  .cb-hero__since { display: none; }
  .cb-hero__scrim {
    background:
      linear-gradient(180deg, rgba(11, 15, 19, .85) 0%, rgba(11, 15, 19, .55) 45%, rgba(11, 15, 19, 0) 70%),
      linear-gradient(0deg, rgba(11, 15, 19, .9) 0%, rgba(11, 15, 19, 0) 30%);
  }
}

/* Wide screens: the 16:9 frame fills a wider box, so shift the plates right
   to keep the tipped box off the headline. All three layers move together. */
@media (min-width: 100rem) {
  .cb-hero__layer img { object-position: 72% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .cb-hero__layer,
  .cb-hero__layer img { transform: none !important; transition: none !important; }
  .cb-hero__wrap { opacity: 1 !important; }
}


/* ==========================================================================
   Anchors land below the fixed nav (nav links, skip link, colophon chapter
   links). Mobile nav is 4rem.
   ========================================================================== */
html { scroll-padding-top: var(--cb-nav-h); }
@media (max-width: 60rem) { html { scroll-padding-top: 4rem; } }

/* ==========================================================================
   NO-JS FLOOR. Every hide-until-revealed rule in the engine stylesheet and
   above assumes a script will flip it. Without JS the page was ~90% blank.
   The engine stylesheet is not edited; these overrides load after it.
   ========================================================================== */
html:not(.js) [data-sc-in],
html:not(.js) [data-sc-stagger] > *,
html:not(.js) [data-sc-cue],
html:not(.js) .cb-intertitle,
html:not(.js) .cb-plate__title,
html:not(.js) .cb-hero__title,
html:not(.js) .cb-ask,
html:not(.js) .cb-step h3 {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* The pan rail becomes a native horizontal scroller, as it does under
   reduced motion; otherwise the last two cards and the requirements are
   clipped off the right edge with no way to reach them. */
html:not(.js) [data-sc-act="pan"] [data-sc-stage] {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
html:not(.js) .cb-rail__item { opacity: 1 !important; }


/* ==========================================================================
   Peak on phones — 2026-09-07. The decade ladder was centred behind the
   numeral and ran straight through it; the caption overprinted two rungs.
   Ladder goes to the top band, tighter; the numeral and caption sit below.
   ========================================================================== */
@media (max-width: 60rem) {
  .cb-decades {
    justify-content: flex-start;
    padding-top: calc(var(--cb-bar-h) + var(--sc-4));
    gap: var(--sc-2);
  }
  .cb-decade { font-size: 0.62rem; letter-spacing: 0.2em; }
  .cb-peak__fg { margin-top: 7rem; }
  .cb-peak__year { font-size: clamp(5rem, 30vw, 8rem); }
  .cb-peak__caption { font-size: var(--sc-t-base, 1rem); padding-inline: var(--sc-4); }
}


/* ==========================================================================
   Chapter three, rebuilt 2026-09-07 — cab plate + four-up + strip.
   The pan rail CSS above is retired but left in place; nothing uses it.
   ========================================================================== */

.cb-cabplate {
  position: relative;
  min-height: 78vh;
  min-height: 78svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  /* Flow act stage: not sticky. The engine adds .sc-stage; override it. */
  position: relative !important;
  height: auto !important;
  top: auto !important;
}

.cb-cabplate__media {
  position: absolute;
  inset: -16% 0;      /* headroom for the parallax travel */
  z-index: 0;
}
.cb-cabplate__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 50%;
  /* .cb-shot positions absolutely at inset -8%; this plate owns its box. */
  position: static;
  inset: auto;
}

.cb-cabplate__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(13, 22, 32, .88) 0%, rgba(13, 22, 32, .45) 50%, rgba(13, 22, 32, .1) 100%),
    linear-gradient(0deg, rgba(13, 22, 32, .92) 0%, rgba(13, 22, 32, 0) 45%),
    linear-gradient(180deg, rgba(13, 22, 32, .5) 0%, rgba(13, 22, 32, 0) 25%);
}

.cb-cabplate__copy {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: calc(var(--cb-nav-h) + var(--sc-7));
  padding-bottom: var(--sc-8);
}
.cb-cabplate__copy .cb-lede { max-width: 36rem; text-shadow: 0 1px 18px rgba(0, 0, 0, .6); }

.cb-cabplate__caption {
  position: absolute;
  right: clamp(1.25rem, 4vw, 4rem);
  bottom: var(--sc-5);
  z-index: 2;
  margin: 0;
  font-family: var(--sc-font-text);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cb-text-muted);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .7);
}
@media (max-width: 60rem) {
  .cb-cabplate__caption { right: auto; left: clamp(1.25rem, 4vw, 4rem); bottom: var(--sc-4); }
}

/* Four truck types. Grid gap owns the spacing (the list also carries
   .sc-stack for the stagger; see .cb-steps for the same fix). */
.cb-types {
  display: grid;
  gap: var(--sc-5);
  padding: 0;
  margin: 0;
  list-style: none;
}
.cb-types > * + * { margin-top: 0; }
@media (min-width: 46rem) { .cb-types { grid-template-columns: 1fr 1fr; } }
@media (min-width: 70rem) { .cb-types { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cb-types--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cb-types.cb-types--one { grid-template-columns: minmax(0, 34rem); justify-content: center; }

.cb-type {
  padding: var(--sc-6) var(--sc-5) var(--sc-5);
  border: 1px solid var(--cb-border);
  border-radius: var(--sc-r-md);
  background: var(--cb-card-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}

/* Card photo: bleeds to the card edges above the schematic. Generated, one
   shoot, all side-on facing right so the four read as a line-up. */
.cb-type__photo {
  display: block;
  width: calc(100% + 2 * var(--sc-5));
  max-width: none;
  height: auto;              /* beats the height="600" attribute */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin: calc(-1 * var(--sc-6)) calc(-1 * var(--sc-5)) var(--sc-5);
  border-bottom: 1px solid var(--cb-border);
  filter: saturate(.92);
}
.cb-type h3 {
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: var(--sc-t-xl);
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0 0 var(--sc-4);
}

.cb-reqstrip { margin-top: var(--sc-9); }
.cb-reqs--strip { margin-top: var(--sc-4); }
@media (min-width: 62rem) { .cb-reqs--strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cb-reqstrip__ask { margin-top: var(--sc-6); }

@media (max-width: 60rem) {
  .cb-cabplate { min-height: 62svh; }
  .cb-cabplate__copy { padding-top: calc(4rem + var(--sc-7)); }
  .cb-cabplate__media img { object-position: 60% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .cb-cabplate__media img { transform: none !important; }
}


/* ==========================================================================
   Colophon NAP — 2026-09-07. Mirrors _partials/footer.html.
   ========================================================================== */
.cb-colophon address { font-style: normal; margin: 0 0 var(--sc-2); color: var(--cb-text-muted); line-height: 1.65; }
.cb-colophon__tagline { color: var(--sc-ink) !important; font-weight: 600; margin-bottom: var(--sc-3) !important; }
.cb-colophon h2.cb-colophon__sub { margin-top: var(--sc-6); }

/* Phones: the folio bar sits on the bottom edge; give the last line room. */
@media (max-width: 60rem) {
  .cb-colophon { padding-bottom: calc(var(--cb-bar-h) + var(--sc-7)); }
}
.cb-colophon__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sc-3) var(--sc-6);
  margin-top: var(--sc-9);
  padding-top: var(--sc-5);
  border-top: 1px solid var(--cb-border);
  font-size: var(--sc-t-sm);
  color: var(--cb-text-muted);
}
.cb-colophon__bottom p { margin: 0; }


/* Long-label CTAs (e.g. "Request Trucks — (905) 988-5454") may wrap on phones
   instead of running off the edge. */
@media (max-width: 60rem) {
  .cb-hero__ctas .cb-btn { white-space: normal; text-align: center; width: 100%; line-height: 1.25; }
}


/* ==========================================================================
   SECONDARY PAGES — 2026-09-09. companies.html, owner-operators.html.
   Same theme, no folio rail, no scroll engine.
   ========================================================================== */

.cb-page { --cb-folio-w: 0px; }
.cb-page .cb-main { padding-left: 0; }
.cb-page__main { padding-top: var(--cb-nav-h); }
@media (max-width: 60rem) { .cb-page__main { padding-top: 4rem; } }

.cb-pagehead { padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4rem); }
.cb-pagehead__title {
  font-family: var(--sc-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.8rem, 8vw, 6.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin: var(--sc-3) 0 var(--sc-5);
}
.cb-pagehead .cb-lede { max-width: 40rem; }
.cb-pagehead__fair { margin-top: var(--sc-4); }
.cb-pagehead__call {
  font-family: var(--sc-font-text);
  color: var(--cb-text-muted);
  max-width: 40rem;
  margin: var(--sc-5) 0 0;
  line-height: 1.6;
}
.cb-pagehead__call a { color: var(--cb-primary); text-decoration: underline; text-underline-offset: 4px; }

/* Form + aside grid */
.cb-formgrid { display: grid; gap: var(--sc-8); }
@media (min-width: 64rem) {
  .cb-formgrid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
  .cb-aside { position: sticky; top: calc(var(--cb-nav-h) + var(--sc-5)); }
}

.cb-aside { display: grid; gap: var(--sc-5); }
.cb-aside__card {
  padding: var(--sc-6) var(--sc-5);
  border: 1px solid var(--cb-border);
  border-radius: var(--sc-r-md);
  background: var(--cb-card-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.cb-aside__card .cb-eyebrow { margin-bottom: var(--sc-4); }
.cb-aside__card .cb-body { margin: 0 0 var(--sc-3); }
.cb-aside__card a { color: var(--cb-primary); text-decoration: underline; text-underline-offset: 4px; }
/* Buttons inside a card keep their own colours; the link rule above must
   not turn a primary button's label orange-on-orange. */
.cb-aside__card .cb-btn { color: #fff; text-decoration: none; }
.cb-aside__steps, .cb-aside__list { margin: 0; padding: 0 0 0 1.2em; color: var(--cb-text-muted); line-height: 1.6; display: grid; gap: var(--sc-3); }
.cb-aside__list { list-style: none; padding: 0; }
.cb-aside__steps b, .cb-aside__list b { color: var(--sc-ink); }

/* The forms. Inputs 8px radius (CLAUDE.md), translucent on the gradient,
   orange focus ring, 52px minimum touch height. */
.cb-form { font-family: var(--sc-font-text); }
.cb-fieldset { border: 0; padding: 0; margin: 0; }
.cb-fieldset + .cb-fieldset { margin-top: var(--sc-8); }
.cb-legend {
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: var(--sc-t-xl);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--sc-ink);
  margin-bottom: var(--sc-5);
  padding: 0;
}
.cb-row { display: grid; gap: var(--sc-4); }
@media (min-width: 40rem) { .cb-row { grid-template-columns: 1fr 1fr; } }
.cb-field { margin-bottom: var(--sc-5); min-width: 0; }
.cb-field--group { border: 0; padding: 0; }
.cb-label {
  display: block;
  font-size: var(--sc-t-sm);
  font-weight: 600;
  color: var(--sc-ink);
  margin-bottom: var(--sc-2);
  padding: 0;
}
.cb-label--sub { margin-top: var(--sc-4); }
.cb-star { color: var(--cb-primary); margin-left: 2px; }
.cb-hint { display: block; font-size: 0.85rem; color: var(--cb-text-muted); margin-top: var(--sc-2); line-height: 1.5; }

.cb-input, .cb-select, .cb-textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: var(--sc-3) var(--sc-4);
  font: inherit;
  font-size: 1rem;
  color: var(--sc-ink);
  background: rgba(15, 20, 25, .6);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  transition: border-color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.cb-input::placeholder, .cb-textarea::placeholder { color: #6b747d; }
.cb-input:hover, .cb-select:hover, .cb-textarea:hover { border-color: rgba(255, 255, 255, .3); }
.cb-input:focus, .cb-select:focus, .cb-textarea:focus {
  outline: none;
  border-color: var(--cb-primary);
  box-shadow: 0 0 0 3px var(--cb-primary-glow);
}
.cb-input:user-invalid, .cb-select:user-invalid, .cb-textarea:user-invalid { border-color: #ff5d5d; }
.cb-textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.cb-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b0b8c4'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1.25rem;
}
.cb-select option { background: #1a2332; color: #f4f2ef; }
.cb-input[type="date"] { color-scheme: dark; }

.cb-choices { display: flex; flex-wrap: wrap; gap: var(--sc-3); }
.cb-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-3);
  min-height: 52px;
  padding: var(--sc-3) var(--sc-4);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  background: rgba(15, 20, 25, .6);
  color: var(--cb-text-muted);
  cursor: pointer;
  transition: border-color 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.cb-choice:hover { border-color: rgba(255, 255, 255, .3); }
.cb-choice input { accent-color: var(--cb-primary); width: 20px; height: 20px; cursor: pointer; margin: 0; }
.cb-choice:has(input:checked) { border-color: var(--cb-primary); background: var(--cb-primary-glow); color: var(--sc-ink); }
.cb-choice:has(input:focus-visible) { outline: 3px solid var(--cb-primary); outline-offset: 2px; }

/* Honeypot: off-screen, never display:none (some bots skip hidden inputs
   but fill visually-hidden ones, which is what we want). */
.cb-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cb-form__submit { margin-top: var(--sc-7); }
.cb-btn--block { display: flex; width: 100%; }
.cb-form__note { margin-top: var(--sc-4); font-size: var(--sc-t-sm); color: var(--cb-text-muted); line-height: 1.6; }
.cb-form__note a { color: var(--cb-primary); text-decoration: underline; text-underline-offset: 4px; }
.cb-btn[disabled] { opacity: .6; cursor: progress; transform: none; }


/* ==========================================================================
   CONTACT PAGE — 2026-09-10
   ========================================================================== */
.cb-contact__number { margin: var(--sc-5) 0 0; }
.cb-contact__number a {
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6.5vw, 5rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--cb-primary);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.cb-contact__number a:hover { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 3px; }

.cb-contactgrid { display: grid; gap: var(--sc-8); }
@media (min-width: 64rem) { .cb-contactgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; } }

.cb-contact__cards { display: grid; gap: var(--sc-5); }
@media (min-width: 40rem) and (max-width: 63.99rem) { .cb-contact__cards { grid-template-columns: 1fr 1fr; } }

.cb-contact__hours { margin: 0; display: grid; gap: var(--sc-3); }
.cb-contact__hours div { display: grid; gap: 2px; }
.cb-contact__hours dt { font-size: var(--sc-t-sm); color: var(--cb-text-muted); }
.cb-contact__hours dd { margin: 0; color: var(--sc-ink); font-weight: 600; }

.cb-contact__h2 {
  font-family: var(--sc-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: var(--sc-3) 0 var(--sc-4);
}
.cb-contact__area .cb-body { margin: 0 0 var(--sc-5); }
.cb-contact__area a { color: var(--cb-primary); text-decoration: underline; text-underline-offset: 4px; }
.cb-contact__map {
  border: 1px solid var(--cb-border);
  border-radius: var(--sc-r-md);
  overflow: hidden;
  background: var(--cb-card-bg);
  margin-bottom: var(--sc-5);
  aspect-ratio: 10 / 7;
}
.cb-contact__map iframe { display: block; width: 100%; height: 100%; border: 0; filter: saturate(.85) contrast(1.05); }


/* Chapter two copy under the three steps runs the full grid width, so it
   lines up with the cards above it instead of stopping at the measure. */
.cb-work__copy .cb-body { max-width: none; }


/* A lede that should hold one line on desktop. Wraps on phones as normal. */
.cb-lede--wide { max-width: none; }


/* ==========================================================================
   ABOUT PAGE — 2026-09-25
   ========================================================================== */
.cb-about { display: grid; gap: var(--sc-8); }
@media (min-width: 64rem) {
  .cb-about { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
}
.cb-about__h2 {
  font-family: var(--sc-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: var(--sc-8) 0 var(--sc-4);
}
.cb-about__main > .cb-about__h2:first-child { margin-top: 0; }
.cb-about__main .cb-body { max-width: none; margin: 0 0 var(--sc-4); }
.cb-about__facts { margin: 0; display: grid; gap: var(--sc-3); }
.cb-about__facts div { display: grid; grid-template-columns: 7rem 1fr; gap: var(--sc-3); padding-bottom: var(--sc-3); border-bottom: 1px solid var(--cb-border); }
.cb-about__facts div:last-child { border-bottom: 0; padding-bottom: 0; }
.cb-about__facts dt { font-size: var(--sc-t-sm); color: var(--cb-text-muted); }
.cb-about__facts dd { margin: 0; color: var(--sc-ink); font-weight: 600; }

/* Pages where a short head sits straight above the body: close the gap. */
.cb-section--tight { padding-block-start: var(--sc-7); }
.cb-page .cb-pagehead + .cb-section--tight { padding-block-start: var(--sc-6); }

/* ---------------------------------------------------------------------------
   City pages (2026-10-09). .cb-needs is the visible "Needs Dan" placeholder:
   it must not survive to a shipped page. .cb-faq is the questions list.
   --------------------------------------------------------------------------- */
.cb-needs { border: 1px dashed var(--cb-primary); border-radius: 12px; padding: var(--sc-4) var(--sc-5); margin: 0 0 var(--sc-5); background: rgba(255,107,53,.06); }
.cb-needs .cb-body { margin-bottom: var(--sc-3); }
.cb-needs .cb-body:last-child { margin-bottom: 0; }
.cb-needs__label { margin: 0 0 var(--sc-2); font-size: var(--sc-t-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--cb-primary); }
.cb-needs--inline { display: block; }
.cb-needs--inline .cb-needs__label { display: block; }
.cb-faq { margin: 0; display: grid; gap: var(--sc-4); }
.cb-faq > div { padding-bottom: var(--sc-4); border-bottom: 1px solid var(--cb-border); }
.cb-faq > div:last-child { border-bottom: 0; }
.cb-faq dt { font-weight: 700; color: var(--sc-ink); margin-bottom: var(--sc-2); }
.cb-faq dd { margin: 0; color: var(--cb-text-muted); line-height: 1.6; }
.cb-city__links a, .cb-city__sources a { color: var(--cb-primary); text-decoration: underline; text-underline-offset: 4px; }
.cb-city__sources { font-size: var(--sc-t-sm); line-height: 1.8; }

/* ---------------------------------------------------------------------------
   Service-area hub (2026-10-16). .cb-map is the inline SVG built by
   lab/map/make_map.py from the Region's municipal-boundary open data; each
   municipality is an <a> wrapping a <path>, the four with city pages carry
   --page. .cb-hub__cities is the four city-page cards; .cb-hub__town is one
   of the nine town sections (an h2 plus a paragraph, anchored by slug).
   --------------------------------------------------------------------------- */
.cb-map { display: block; width: 100%; height: auto; max-width: 52rem; margin: 0 auto; overflow: visible; }
/* The panel is the water: a faint blue field the land sits on, so the
   Region's outline reads as a shoreline rather than a dark blob. */
.cb-map__bleed { padding: var(--sc-5) var(--sc-4); border: 1px solid var(--cb-border); border-radius: var(--sc-r-md); background: radial-gradient(120% 90% at 50% 40%, rgba(70, 110, 160, .22), rgba(40, 60, 90, .10) 60%, rgba(15, 20, 25, 0) 100%), rgba(255,255,255,.02); }
.cb-map__area path { fill: url(#cb-map-land); stroke: rgba(255,255,255,.55); stroke-width: 1.1; stroke-linejoin: round; transition: fill .15s, stroke .15s; filter: drop-shadow(0 2px 2px rgba(0,0,0,.45)); }
.cb-map__area--page path { fill: url(#cb-map-page); stroke: rgba(255,160,120,.9); }
.cb-map__area:hover path, .cb-map__area:focus-visible path { fill: var(--cb-primary); stroke: #fff; }
.cb-map__area:focus-visible, .cb-map__marker:focus-visible { outline: none; }
.cb-map__marker circle { fill: var(--cb-primary); stroke: #0f1419; stroke-width: 2; }
.cb-map__marker .cb-map__hit { fill: transparent; stroke: none; }
.cb-map__marker:hover circle:not(.cb-map__hit), .cb-map__marker:focus-visible circle:not(.cb-map__hit) { r: 10; }
.cb-map__labels text { fill: #fff; font-family: var(--sc-font-text); font-size: 13px; font-weight: 600; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: rgba(15,20,25,.85); stroke-width: 3px; stroke-linejoin: round; }
.cb-map__water text { fill: rgba(160,190,225,.55); font-family: var(--sc-font-text); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; text-anchor: middle; pointer-events: none; }
/* Phone: the map bleeds to the screen edges so the smallest municipality
   (Thorold) still clears a 48px touch target; the section clips the bleed. */
@media (max-width: 40rem) { .cb-map__labels text { font-size: 17px; } .cb-map__water text { font-size: 15px; } .cb-map__bleed { margin-inline: -16px; padding: var(--sc-4) 4px; border-radius: 0; border-inline: 0; } }
.cb-map__bleed { overflow: hidden; }
.cb-map__key { margin: var(--sc-4) auto 0; max-width: 52rem; font-size: var(--sc-t-sm); color: var(--cb-text-muted); text-align: center; }
.cb-map__key i { display: inline-block; width: .9em; height: .9em; border-radius: 3px; vertical-align: -.1em; margin-right: .35em; background: #7c4228; border: 1px solid rgba(255,160,120,.9); }

.cb-hub__cities { display: grid; gap: var(--sc-4); margin: 0 0 var(--sc-6); padding: 0; list-style: none; }
@media (min-width: 40rem) { .cb-hub__cities { grid-template-columns: 1fr 1fr; } }
.cb-hub__cities li { margin: 0; }
.cb-hub__city { display: block; height: 100%; padding: var(--sc-5); border: 1px solid var(--cb-border); border-radius: var(--sc-r-md); background: var(--cb-card-bg); color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.cb-hub__city:hover, .cb-hub__city:focus-visible { border-color: var(--cb-primary); transform: translateY(-2px); }
.cb-hub__city b { display: block; font-family: var(--sc-font-display); font-weight: 700; text-transform: uppercase; font-size: 1.35rem; letter-spacing: -.01em; margin-bottom: var(--sc-2); color: var(--cb-primary); }
.cb-hub__city span { color: var(--cb-text-muted); line-height: 1.5; }
.cb-hub__town { scroll-margin-top: calc(var(--cb-nav-h) + 1rem); }
.cb-hub__town h2 { font-family: var(--sc-font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.5rem, 2.8vw, 2.1rem); line-height: 1; letter-spacing: -.02em; margin: var(--sc-7) 0 var(--sc-3); }
.cb-hub__town h2 small { display: block; font-family: var(--sc-font-text); font-weight: 600; font-size: var(--sc-t-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--cb-text-muted); margin-bottom: var(--sc-2); }