/* ============================================
   RAM SITE SOLUTIONS — DESIGN TOKENS
   ============================================ */
:root {
  --color-bg: #2B2E33;
  --color-bg-alt: #33363C;
  --color-surface: #3A3E45;
  --color-line: #4C5058;
  --color-fg: #F3EFE7;       /* cream — matches logo background */
  --color-fg-dim: #B9B7B2;
  --color-accent: #7A2530;   /* oxblood maroon — matches logo plate. BACKGROUNDS/BORDERS ONLY */
  --color-accent-light: #A8384A;
  /* Rose for maroon TEXT on dark backgrounds. Lightened from #E08FA0 on
     2026-10-19: lifting the page off near-black also lifted the card
     surface, which dropped this to 4.4:1 against it, just under AA.
     Re-check this pair if the surface token moves again. */
  --color-accent-text: #E8A2B0;
  --color-accent-dim: #3A1218;
  --color-good: #6FA96F;
  --color-bad: #C25B4A;

  /* The hero headline sits on a photograph, not on the page, so the
     shading that keeps it readable must stay dark in BOTH themes. Only
     the bottom stop blends into whatever colour the page is. Keeping
     these separate is what lets the hero survive a theme flip. */
  --hero-shade: 20, 21, 24;

  /* Text sitting on something that is dark in BOTH themes: the hero
     photograph, a maroon button, the callout chip over the rig. These
     never flip, which is the difference between a theme and a filter. */
  --color-on-dark: #F3EFE7;
  --color-on-dark-dim: #C9C5BD;

  /* The header is a surface, not a constant. */
  --header-bg: rgba(20, 23, 26, 0.88);

  --font-display: 'Archivo Black', 'Arial Black', sans-serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --wrap: 1180px;
  --radius: 3px;
  --rail: 6px;
}

/* ============================================
   LIGHT MODE
   ============================================
   Not the dark theme turned up. A different room.

   The background is concrete in daylight rather than paper: this is a
   yard, and a literary cream would belong to a different business. Cards
   LIFT above the page here (surface lighter than bg), the exact inverse
   of the dark theme where they sink below it, because that is how light
   actually behaves on each.

   Three tokens cannot simply be reused and are the whole reason this is
   a hand-built theme rather than a filter:
     - accent-text was a pale rose tuned to sit on near-black. On
       concrete it is unreadable, so it becomes the deep oxblood.
     - accent-dim was a near-black maroon used as a fill behind accent
       text. It becomes a pale maroon tint.
     - good and bad were lightened for a dark page and fail contrast on
       a light one, so both are darkened.
   The oxblood accent itself is the one colour that holds on both, which
   is what keeps the brand intact across the flip.
   ============================================ */
:root[data-theme="light"] {
  --color-bg: #E8E5DE;
  --color-bg-alt: #F1EEE8;
  --color-surface: #FCFBF8;
  --color-line: #CBC5B9;
  --color-fg: #1E2023;
  --color-fg-dim: #5A5852;
  --color-accent: #7A2530;
  --color-accent-light: #96303F;
  --color-accent-text: #6B1F29;
  --color-accent-dim: #F0DFE1;
  --color-good: #3E7A43;
  --color-bad: #A33A28;
  --header-bg: rgba(250, 248, 244, 0.90);
}

@media (min-width: 1300px) {
  :root { --wrap: 1440px; }
}
@media (min-width: 821px) {
  :root { --rail: 12px; }
}

* { box-sizing: border-box; }

/* display:grid / flex silently beat the [hidden] attribute — this has bitten
   the notify forms and the modal already, so enforce it once, globally */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.012) 0px,
      rgba(255,255,255,0.012) 1px,
      transparent 1px,
      transparent 34px
    ),
    radial-gradient(ellipse at 20% -10%, rgba(122,37,48,0.16) 0%, transparent 45%),
    radial-gradient(ellipse at 100% 0%, rgba(255,255,255,0.03) 0%, transparent 40%),
    var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
body::after {
  /* film-grain texture, fixed so it reads as one continuous surface */
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 140px 140px;
}

main { position: relative; z-index: 2; }

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

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

h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; color: var(--color-fg-dim); }

.mono { font-family: var(--font-mono); }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  color: var(--color-accent-text);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.9em;
}

.section { padding: 68px 0; }
#trailers { padding-top: 40px; }
@media (max-width: 820px) {
  /* on a narrow screen, two adjacent 68px paddings read as one big dead
     zone rather than two intentional breathing spaces — tighten it up */
  .section { padding: 44px 0; }
  #trailers { padding-top: 20px; }
}
.section-alt {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.014) 0px, rgba(255,255,255,0.014) 1px, transparent 1px, transparent 30px),
    radial-gradient(ellipse at 90% 0%, rgba(122,37,48,0.10) 0%, transparent 50%),
    var(--color-bg-alt);
}
.section-head { max-width: 640px; margin-bottom: 36px; }
.section-sub { font-size: 1.02rem; }

/* signature: hazard-stripe rail pinned to viewport edge */
.hazard-rail {
  position: fixed;
  top: 0; left: 0;
  width: var(--rail); height: 100%;
  z-index: 60;
  background: repeating-linear-gradient(
    -45deg,
    var(--color-accent) 0 8px,
    var(--color-bg) 8px 16px
  );
}
@media (min-width: 821px) {
  .hazard-rail {
    background: repeating-linear-gradient(
      -45deg,
      var(--color-accent) 0 15px,
      var(--color-bg) 15px 30px
    );
  }
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  background: transparent;   /* <button> otherwise falls back to the UA default */
  color: var(--color-fg);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: linear-gradient(180deg, #93303C 0%, var(--color-accent) 48%, #631C26 100%);
  color: var(--color-on-dark);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    0 6px 16px rgba(0,0,0,0.35);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.2s ease;
}
.btn-primary:hover {
  background: linear-gradient(180deg, #A8384A 0%, #8B2C38 52%, #6E212C 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    0 0 22px rgba(168,56,74,0.55),
    0 8px 20px rgba(0,0,0,0.4);
}
.btn-outline {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transition: border-color 0.15s ease, box-shadow 0.2s ease, background 0.15s ease;
}
.btn-outline:hover {
  border-color: var(--color-accent-light);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 16px rgba(168,56,74,0.28);
}
.btn-outline { border-color: var(--color-fg-dim); color: var(--color-fg); }
.btn-outline:hover { border-color: var(--color-fg); }
.btn-ghost { border: 1px solid var(--color-line); color: var(--color-fg); }
.btn-sm { padding: 9px 16px; font-size: 0.72rem; }

/* ============ HEADER ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-line);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 10px 26px rgba(0,0,0,0.35);
  padding-left: var(--rail); /* offset for hazard rail */
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { height: 44px; width: auto; display: block; }
.main-nav { display: flex; gap: 28px; }
.main-nav a {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--color-fg-dim);
  text-transform: uppercase;
}
.main-nav a:hover { color: var(--color-accent-text); }
/* ============ LIGHT / DARK SWITCH ============
   Not a sun and a moon: an icon pair that has to be learned is the wrong
   control for a business site. This reads as a two-position rocker with
   the positions written on it, in the same mono the rest of the header
   labels use, so there is nothing to decode.

   The words are Light and Dark rather than Day and Night on purpose. On
   a rental site "Day" and "Night" sound like hours of operation or when
   a can can be dropped, and nothing about choosing a theme should touch
   the buying decision.

   It is a single button rather than two, because this is one decision
   with two states, and the accessible name says what pressing it will
   DO rather than what it currently is — the one thing a switch has to
   get right for someone who cannot see the knob.

   The knob carries a real press: it sinks and narrows on :active, which
   is the physical answer rule 2 asks for, and it is the only moving
   part so the header stays quiet. */
.theme-switch {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0 10px 0 auto;
  cursor: pointer;
  line-height: 0;
  flex: 0 0 auto;
}
.theme-switch-track {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  isolation: isolate;
  border: 1px solid var(--color-line);
  border-radius: 2px;
  background: var(--color-bg-alt);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.theme-switch-opt {
  position: relative;
  z-index: 1;
  padding: 6px 11px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-fg-dim);
  transition: color 0.18s ease;
}
/* The knob sits under the labels and slides between the two halves. */
.theme-switch-knob {
  position: absolute;
  z-index: 0;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(50% - 2px);
  border-radius: 1px;
  background: var(--color-accent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset,
              0 2px 5px rgba(0, 0, 0, 0.35);
  transform: translateX(100%);
  transition: transform 0.26s cubic-bezier(0.2, 0.9, 0.25, 1);
}
:root[data-theme="light"] .theme-switch-knob { transform: translateX(0); }
/* Whichever half the knob is under gets the readable colour. */
:root[data-theme="light"] .theme-switch-opt:first-child,
:root:not([data-theme="light"]) .theme-switch-opt:last-child {
  color: #F3EFE7;
}
.theme-switch:hover .theme-switch-track { border-color: var(--color-accent-light); }
.theme-switch:active .theme-switch-knob {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45) inset;
  filter: brightness(0.9);
}
.theme-switch:focus-visible .theme-switch-track {
  outline: 2px solid var(--color-accent-light);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .theme-switch-knob { transition: none; }
}

.header-call { display: none; }
@media (min-width: 860px) { .header-call { display: inline-flex; } }
@media (max-width: 720px) { .main-nav { display: none; } }

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  margin-left: var(--rail);
  background: var(--color-bg);
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Was saturate(0.85) contrast(1.05), which drained the photo before the
     scrim darkened it again. Read as "too dark" and it measured 52 out of
     255 on the first screen. Applied to the video and its still fallback
     together so the two never disagree. */
  filter: saturate(1) contrast(1) brightness(1.28);
}
.hero-fallback {
  position: absolute;
  inset: 0;
  display: none;
}
.hero-fallback img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  /* Was saturate(0.85) contrast(1.05), which drained the photo before the
     scrim darkened it again. Read as "too dark" and it measured 52 out of
     255 on the first screen. Applied to the video and its still fallback
     together so the two never disagree. */
  filter: saturate(1) contrast(1) brightness(1.28);
}
.hero.video-off .hero-video { display: none; }
.hero.video-off .hero-fallback { display: block; }

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--hero-shade),0.04) 0%, rgba(var(--hero-shade),0.30) 55%, var(--color-bg) 97%),
    linear-gradient(90deg, rgba(var(--hero-shade),0.38) 0%, rgba(var(--hero-shade),0.02) 45%);
}
.hero-frame {
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(243,239,231,0.14);
  pointer-events: none;
}
@media (min-width: 821px) {
  /* wider side margins, tighter top/bottom — a more cinematic letterbox
     instead of the video reading like it's squeezed into a square-ish frame */
  .hero-frame { inset: 16px 46px; }
}

/* The hero sits on a photograph in both themes, so its text does not
   follow the page. Flipping it to ink in light mode put dark letters on
   a dark picture. */
.hero .eyebrow { color: var(--color-on-dark-dim); text-shadow: 0 1px 8px rgba(0,0,0,0.85); }
.hero h1, .hero-sub { color: var(--color-on-dark); text-shadow: 0 2px 14px rgba(0,0,0,0.5); }
.hero-content {
  position: relative;
  padding-bottom: 76px;
  padding-top: 72px;
  max-width: 760px;
}
.hero-sub { font-size: 1.08rem; max-width: 46ch; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

@media (min-width: 821px) {
  /* wide screens have the room — let the headline spread across two lines
     instead of wrapping tight into three within a narrow column */
  .hero-content { max-width: 900px; }
  .hero h1 { font-size: clamp(2.6rem, 4.4vw, 3.9rem); }
}
@media (min-width: 1300px) {
  .hero-content { max-width: 1040px; }
  .hero h1 { font-size: clamp(2.8rem, 3.6vw, 4.2rem); }
}

@media (max-width: 820px) {
  /* heading pinned top, buttons pinned bottom, photograph visible between */
  .hero { align-items: stretch; min-height: 96vh; }
  .hero-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-top: 30px;   /* header is sticky; hero starts below it already */
    padding-bottom: 38px;
  }
  .hero .eyebrow { margin-bottom: 1.1em; }
  .hero h1 { margin-bottom: 0; }
  .hero-sub { margin-top: auto; margin-bottom: 0; }
  .hero-actions { gap: 12px; margin-top: 22px; }
  .hero-actions .btn { width: 100%; }
  .hero-scrim {
    background:
      /* Phone layout stacks the headline over the photo, so the top and
         bottom bands still have to carry text. Lightened in the middle,
         where nothing sits, and only eased at the ends. */
      linear-gradient(180deg,
        rgba(var(--hero-shade),0.74) 0%,
        rgba(var(--hero-shade),0.48) 22%,
        rgba(var(--hero-shade),0.06) 42%,
        rgba(var(--hero-shade),0.10) 55%,
        rgba(var(--hero-shade),0.72) 78%,
        var(--color-bg) 100%);
  }
  .hero-fallback img { object-position: 30% 50%; }
  .hero-frame { inset: 10px; }
}
@media (max-width: 720px) {
}

/* ============ CARBON FIBER SURFACE + LIGHT STREAKS ============ */
.carbon { position: relative; isolation: isolate; }

/* woven twill: two light diagonals, two dark, offset into a 2x2 weave.
   Texture is meant to give the panel a material, not to be looked at.
   It was reading as a repeating pattern over the size picker and making
   the text harder to read (Sotero, 2026-10-19), so the weave is now
   much fainter and the tile is larger, which reads as a surface rather
   than as a grid. Light mode gets it fainter again: the same dark
   diagonals that barely register on charcoal bite hard on concrete. */
.carbon { --twill-dark: rgba(0,0,0,0.30); --twill-light: rgba(243,239,231,0.026); }
:root[data-theme="light"] .carbon {
  --twill-dark: rgba(0,0,0,0.10);
  --twill-light: rgba(255,255,255,0.40);
}
.carbon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.20;
  background-image:
    linear-gradient(27deg,  var(--twill-light) 4px, transparent 4px),
    linear-gradient(207deg, var(--twill-light) 4px, transparent 4px),
    linear-gradient(27deg,  var(--twill-dark) 4px, transparent 4px),
    linear-gradient(207deg, var(--twill-dark) 4px, transparent 4px);
  background-position: 0 4px, 8px 0, 0 8px, 8px 4px;
  background-size: 16px 16px;
}
:root[data-theme="light"] .carbon::before { opacity: 0.10; }

/* ============ SPEC DIAGRAM / PARALLAX INFOGRAPHIC ============ */
.diagram {
  position: relative;
  padding: 60px 0 76px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(122,37,48,0.14) 0%, transparent 55%),
    var(--color-bg-alt);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  overflow: hidden;
}
.diagram-eyebrow { text-align: center; }
.diagram-wrap { position: relative; }
.diagram-stage {
  position: relative;
  max-width: 980px;
  margin: 40px auto 0;
}
@media (min-width: 1300px) {
  .diagram-stage { max-width: 1220px; }
}
.diagram-truck {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 40px 50px rgba(0,0,0,0.55));
  will-change: transform;
}

.callout {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  will-change: transform;
}
.callout-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent-light);
  box-shadow: 0 0 0 5px rgba(168,56,74,0.16);
  flex: none;
}
.callout-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.72rem;
  line-height: 1.3;
  max-width: 190px;
}
.callout-label strong {
  color: var(--color-fg);
  font-size: 0.76rem;
  letter-spacing: 0.01em;
}
.callout-label span { color: var(--color-fg-dim); }

/* connecting leader lines via pseudo-elements, drawn toward the truck */
.callout::before {
  content: "";
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, var(--color-accent-light), transparent);
  top: 4px;
}

.callout-1 { top: 6%; left: -2%; text-align: right; flex-direction: row-reverse; }
.callout-1::before { right: 100%; width: 40px; background: linear-gradient(270deg, var(--color-accent-light), transparent); }
.callout-1 .callout-label { text-align: right; align-items: flex-end; }

.callout-2 { top: 20%; right: -4%; }
.callout-2::before { left: -40px; width: 40px; }

.callout-3 { bottom: 22%; left: -6%; text-align: right; flex-direction: row-reverse; }
.callout-3::before { right: 100%; width: 46px; background: linear-gradient(270deg, var(--color-accent-light), transparent); }
.callout-3 .callout-label { text-align: right; align-items: flex-end; }

.callout-4 { bottom: 4%; right: 2%; }
.callout-4::before { left: -40px; width: 40px; }

@media (max-width: 900px) {
  .diagram-stage { max-width: 640px; }
  .callout { position: static; display: grid; grid-template-columns: 8px 1fr; align-items: start; margin: 14px 20px; text-align: left !important; flex-direction: row !important; }
  .callout .callout-label { text-align: left !important; align-items: flex-start !important; max-width: none; }
  .callout::before { display: none; }
  .diagram-stage { display: flex; flex-direction: column; gap: 4px; }
  .diagram-truck { order: -1; margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .diagram-truck, .callout { transform: none !important; }
}

/* ============ SPEC PLATES ============ */
@media (min-width: 1100px) {
}
.plate {
  background:
    linear-gradient(168deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.012) 22%, transparent 46%),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px),
    var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    0 14px 30px rgba(0,0,0,0.30);
  transition: transform 0.25s cubic-bezier(.2,.7,.3,1), box-shadow 0.25s ease, border-color 0.25s ease;
}
.plate:hover {
  transform: translateY(-3px);
  border-color: var(--color-accent-light);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    0 0 0 1px rgba(168,56,74,0.25),
    0 20px 40px rgba(0,0,0,0.42);
}
.plate::before {
  /* rivet corners on the illustration panel */
  content: "";
  position: absolute;
  z-index: 2;
  top: 10px; left: 10px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-line);
  box-shadow: calc(100% - 5px) 0 0 var(--color-line);
}
.rig3d {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: pan-y;   /* horizontal swipes orbit, vertical still scrolls */
}
.plate-photo:has(.rig3d.is-dragging) {
  box-shadow: inset 0 0 0 1px rgba(168,56,74,0.4), inset 0 0 30px rgba(122,37,48,0.22);
}
.rig3d.is-dragging { cursor: grabbing; }
.plate-foot .btn { width: 100%; }

/* stock indicator */
.stock {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-fg-dim);
}
.stock-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.plate.is-out .plate-photo { opacity: 0.55; }

/* rental duration picker */
.duration {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 12px;
}
.dur-btn {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  color: var(--color-fg-dim);
  border-radius: var(--radius);
  padding: 9px 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.dur-btn:hover { border-color: #55565B; color: var(--color-fg); }
.dur-btn.is-active {
  background: linear-gradient(180deg, #93303C 0%, var(--color-accent) 100%);
  border-color: var(--color-accent-light);
  color: var(--color-fg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 0 14px rgba(168,56,74,0.4);
}

/* headline price */
.price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--color-line);
}
.status-available { background: var(--color-good); box-shadow: 0 0 0 3px rgba(111,169,111,0.18); }
.status-rented { background: var(--color-bad); box-shadow: 0 0 0 3px rgba(194,91,74,0.18); }

.prohibited {
  margin-top: 40px;
  padding: 20px 24px;
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.prohibited h4 {
  margin: 0 0 12px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent-text);
}
.prohibited-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  color: var(--color-fg-dim);
}
.prohibited-list li::before { content: "— "; color: var(--color-line); }

/* ============ ACTION STRIP ============ */
.action-strip {
  position: relative;
  height: 260px;
  overflow: hidden;
  margin: 28px 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.4);
}
.action-strip img {
  width: 100%;
  height: 136%;
  position: absolute;
  top: -18%;
  left: 0;
  object-fit: cover;
  will-change: transform;
}

/* ============ AVAILABILITY BOARD ============ */
.board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.board-pill.available { background: rgba(111,169,111,0.15); color: var(--color-good); }
.board-pill.rented { background: rgba(194,91,74,0.15); color: var(--color-bad); }

/* ============ ABOUT ============ */
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.about-photo img { border-radius: var(--radius); border: 1px solid var(--color-line); }
.about-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.about-badges span {
  border: 1px solid var(--color-accent-dim);
  color: var(--color-accent-text);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  padding: 6px 10px;
  border-radius: 999px;
}
@media (max-width: 800px) {
  .about-grid { grid-template-columns: 1fr; }
}

/* ============ QUOTE / CONTACT ============ */
.quote-head { max-width: 640px; margin-bottom: 32px; }
.quote-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 56px;
  align-items: start;
}
.quote-form { display: grid; gap: 16px; margin-top: 0; }
.field { display: grid; gap: 6px; }
.field label { font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-fg-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.field input, .field textarea {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  color: var(--color-fg);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  resize: vertical;
}
.field input:focus, .field textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}
.form-note { margin-top: 4px; font-size: 0.72rem; color: var(--color-fg-dim); }

.contact-card {
  background:
    linear-gradient(170deg, rgba(255,255,255,0.05) 0%, transparent 38%),
    var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 14px 30px rgba(0,0,0,0.28);
}
.contact-card h3 { margin-bottom: 12px; }
.contact-card h4 { margin: 20px 0 10px; font-size: 0.85rem; color: var(--color-accent-text); text-transform: uppercase; letter-spacing: 0.06em; }
.contact-line { margin-bottom: 6px; font-size: 0.88rem; }
.contact-line a:hover { color: var(--color-accent-text); }
.hours { display: grid; gap: 6px; }
.hours > div { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--color-fg-dim); }
.hours dd { margin: 0; color: var(--color-fg); }

@media (max-width: 800px) {
  .quote-grid { grid-template-columns: 1fr; }
}

/* ============ FOOTER ============ */
.site-footer {
  border-top: 1px solid var(--color-line);
  padding: 28px 0 40px;
  margin-left: var(--rail);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.72rem;
  color: var(--color-fg-dim);
}

/* ============ TOAST ============ */
.demo-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 12px);
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  color: var(--color-fg);
  padding: 12px 18px;
  border-radius: var(--radius);
  font-size: 0.78rem;
  max-width: min(90vw, 420px);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
}
.demo-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ============ FOCUS / MOTION ============ */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}

/* ============ SIZE FINDER ============ */
.finder-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  align-items: stretch;
}
@media (max-width: 860px) { .finder-grid { grid-template-columns: 1fr; } }

.finder-input label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-fg-dim);
  margin-bottom: 8px;
}
.finder-input textarea {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  color: var(--color-fg);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  resize: vertical;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.finder-input textarea:focus {
  outline: 2px solid var(--color-accent-light);
  outline-offset: 1px;
}
.finder-or {
  margin: 16px 0 10px;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg-dim);
}
.finder-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  color: var(--color-fg-dim);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.chip:hover { border-color: var(--color-accent-light); color: var(--color-fg); }

.finder-visual {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--color-line);
  box-shadow: 0 14px 30px rgba(0,0,0,0.28);
}
.finder-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
}
.finder-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(20,21,23,0.75) 100%);
}
@media (max-width: 860px) {
  /* The action-strip photo sits just below this on mobile — two images
     back to back with nothing tying them together read as a mistake.
     Desktop keeps this one since it's paired with the finder result there. */
  .finder-visual { display: none; }
}

.finder-result {
  background:
    linear-gradient(170deg, rgba(255,255,255,0.05) 0%, transparent 40%),
    var(--color-surface);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 14px 30px rgba(0,0,0,0.28);
}
.finder-size {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1;
  margin: 0 0 12px;
  color: var(--color-fg);
}
.finder-why { font-size: 0.9rem; margin-bottom: 14px; }
.finder-notes {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  font-size: 0.74rem;
  color: var(--color-fg-dim);
  display: grid;
  gap: 6px;
}
.finder-notes li::before { content: "— "; color: var(--color-line); }
.finder-disclaimer {
  margin: 14px 0 0;
  font-size: 0.68rem;
  color: var(--color-fg-dim);
  opacity: 0.8;
}

/* ============ FULL-BLEED VIDEO BAND ============ */
/* Desktop already has the autoplaying hero video — this band exists only
   because mobile turns that off (no autoplay) and needs a tap-to-play spot. */
.video-band {
  position: relative;
  /* NOT width:100%. These sit beside the hazard rail via
     margin-left, and a full-width box plus that margin pushed the
     page --rail px wider than the viewport, so every page scrolled
     sideways by 6px on a phone and 12px on desktop. */
  width: calc(100% - var(--rail));
  margin-left: var(--rail);          /* clears the hazard rail */
  background: #000;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  overflow: hidden;
  line-height: 0;
}
@media (min-width: 821px) {
  .video-band { display: none; }
}
.vb-player {
  display: block;
  width: 100%;
  height: clamp(240px, 46vw, 560px);
  object-fit: cover;
  filter: saturate(0.9) contrast(1.04);
}
.video-band.is-playing .vb-player { filter: none; }

.vb-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 84px;
  height: 84px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.vb-play svg { width: 100%; height: 100%; display: block; }
.vb-play circle {
  fill: rgba(43,46,51,0.55);
  stroke: var(--color-fg);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}
.vb-play polygon { fill: var(--color-fg); }
.vb-play:hover { transform: scale(1.06); }
.vb-play:hover circle { fill: rgba(122,37,48,0.72); }
.video-band.is-playing .vb-play { opacity: 0; pointer-events: none; }

.vb-cap {
  position: absolute;
  left: 24px;
  bottom: 16px;
  padding: 6px 12px;
  background: rgba(43,46,51,0.62);
  border-radius: var(--radius);
  backdrop-filter: blur(4px);
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-fg-dim);
  line-height: 1.4;
  text-shadow: 0 1px 6px rgba(0,0,0,0.8);
  pointer-events: none;
}
.video-band.is-playing .vb-cap { opacity: 0; transition: opacity 0.2s ease; }

@media (max-width: 620px) {
  .vb-play { width: 64px; height: 64px; }
  .vb-cap { left: 16px; font-size: 0.62rem; }
}

/* ============ QUICK SELECT ============ */
.qs-duration {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.qs-dur-label {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg-dim);
}
.qs-duration .duration { margin-bottom: 0; width: min(340px, 100%); }

.qs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 16px;
}
@media (min-width: 1000px) {
  .qs-grid { grid-template-columns: repeat(4, 1fr); }
}
.qs-tile {
  background:
    linear-gradient(168deg, rgba(255,255,255,0.05) 0%, transparent 44%),
    var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 24px rgba(0,0,0,0.26);
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.qs-tile.is-picked {
  border-color: var(--color-accent-light);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.09),
    0 0 0 1px rgba(168,56,74,0.3),
    0 0 24px rgba(122,37,48,0.35),
    0 14px 30px rgba(0,0,0,0.34);
}
.qs-tile.is-out { opacity: 0.72; }
.qs-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.qs-head h3 { margin: 0; font-size: 1.05rem; }
.qs-dims { font-size: 0.64rem; color: var(--color-fg-dim); }
.qs-stock {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 12px;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-fg-dim);
}
.qs-price { display: flex; align-items: baseline; gap: 6px; margin: 0 0 14px; }
.qs-amt { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; color: var(--color-fg); }
.qs-each { font-size: 0.66rem; color: var(--color-fg-dim); }

/* Out-of-stock row: always occupies the same slot in every tile (just
   invisible when the size is in stock) so a whole row of tiles never
   goes uneven depending on which ones happen to be sold out. */
.qs-oos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  min-height: 58px;
  visibility: hidden;
}
.qs-oos.is-visible { visibility: visible; }
.qs-step {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg);
}
.qs-btn {
  background: none;
  border: none;
  color: var(--color-fg);
  font-size: 1.05rem;
  line-height: 1;
  padding: 11px 0;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.qs-btn:hover:not(:disabled) { background: var(--color-accent); }
.qs-btn:disabled { color: #5A5B5F; cursor: not-allowed; }
.qs-qty {
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  border-left: 1px solid var(--color-line);
  border-right: 1px solid var(--color-line);
  padding: 10px 0;
}

.qs-summary {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding: 18px 22px;
  background:
    linear-gradient(170deg, rgba(255,255,255,0.05) 0%, transparent 40%),
    var(--color-surface);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
}
.qs-total { display: flex; flex-direction: column; gap: 3px; }
.qs-total-sub { opacity: 0.72; }
.qs-total-value-sm { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 700; }
.qs-total-label {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg-dim);
}
.qs-total-value { font-family: var(--font-display); font-size: 1.25rem; line-height: 1; }
.qs-summary .btn { margin-left: auto; }
.qs-summary .btn.is-disabled { opacity: 0.45; pointer-events: none; }
.qs-note { margin-top: 12px; font-size: 0.66rem; color: var(--color-fg-dim); }

@media (max-width: 620px) {
  .qs-summary { align-items: stretch; gap: 16px; }
  .qs-summary .btn { margin-left: 0; width: 100%; }
}

/* [hidden] loses to display:grid — make it win */
.qs-grid { align-items: start; }

/* ============ SPEC SHEET MODAL ============ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal[hidden] { display: none !important; }
.modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(10,11,12,0.78);
  backdrop-filter: blur(3px);
}
.modal-panel {
  position: relative;
  width: min(620px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 30px;
  background:
    linear-gradient(172deg, rgba(255,255,255,0.05) 0%, transparent 34%),
    var(--color-surface);
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius);
  box-shadow: 0 30px 70px rgba(0,0,0,0.55);
}
.modal-panel h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 0.4em; }
.modal-sm .modal-panel { width: min(440px, 100%); }
.modal-sub { font-size: 0.9rem; margin-bottom: 22px; }
.modal-x {
  position: absolute;
  top: 12px; right: 14px;
  background: none;
  border: none;
  color: var(--color-fg-dim);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.modal-x:hover { color: var(--color-fg); }

.spec-sheet {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 22px;
}
.spec-rows { display: grid; gap: 10px; }
.spec-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 10px;
  align-items: baseline;
  font-size: 0.85rem;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--color-line);
}
.spec-qty { color: var(--color-accent-text); font-weight: 700; }
.spec-name { color: var(--color-fg); }
.spec-rate { font-size: 0.68rem; color: var(--color-fg-dim); }
.spec-line { font-weight: 700; color: var(--color-fg); }
.spec-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 14px;
}
.spec-total-sub { margin-top: 8px; opacity: 0.72; }
.spec-total-sub .mono { text-transform: none; letter-spacing: normal; font-size: 0.74rem; }
.spec-total-value-sm { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 700; color: var(--color-fg); }
.spec-total .mono { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-fg-dim); }
.spec-total-value { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; }
.spec-fine { margin: 12px 0 0; font-size: 0.64rem; color: var(--color-fg-dim); }

.modal-form { display: grid; gap: 14px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

.modal-done { text-align: center; padding: 22px 0 6px; }
.spec-done-mark {
  font-size: 2.4rem;
  color: var(--color-good);
  margin: 0 0 6px;
}
.modal-done h3 { margin-bottom: 8px; }
.modal-done p { max-width: 40ch; margin: 0 auto 20px; }

/* ============ BRAND LOGO SLAB ============ */
/* Only section on the page with a light background — the logo's text is
   black, so it needs a light surface to read on, and this doubles as a
   deliberate brand pause between the story and the final CTA. */
.brand-slab {
  position: relative;
  /* NOT width:100%. These sit beside the hazard rail via
     margin-left, and a full-width box plus that margin pushed the
     page --rail px wider than the viewport, so every page scrolled
     sideways by 6px on a phone and 12px on desktop. */
  width: calc(100% - var(--rail));
  margin-left: var(--rail);
  padding: 52px 24px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.5) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(0,0,0,0.06) 0%, transparent 60%),
    repeating-linear-gradient(135deg, rgba(0,0,0,0.028) 0px, rgba(0,0,0,0.028) 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 7px),
    #C7C2B8;   /* concrete grey — light enough for the logo's black type */
  border-top: 1px solid rgba(0,0,0,0.15);
  border-bottom: 1px solid rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-slab::after {
  /* fine grain, matches the texture treatment used elsewhere on dark panels */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 140px 140px;
}
.brand-slab-logo {
  position: relative;
  width: min(560px, 82%);
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.22));
}
@media (max-width: 620px) {
  .brand-slab { padding: 56px 20px; }
  .brand-slab-logo { width: min(400px, 88%); }
}

.pin-error { color: var(--color-bad); font-size: 0.72rem; margin: -4px 0 0; }

/* ============ UNCONFIRMED DATA ============
   Sotero's prices, tonnage and unit counts are confirmed. Nobody has
   measured the containers, so every dimension on the page is invented.
   Rather than quietly shipping plausible numbers, anything unmeasured is
   marked: a corner flag on the drawing, a dotted rule under the figure.

   Deliberately not styled as an error. It is a note to the client on a
   demo, not a warning to a customer — .confirm-flag sits in maroon, the
   brand colour, not the red of .status-rented. When the real numbers
   land, flip dimsConfirmed in fleet.js and all of this stops rendering
   on its own; none of it needs unpicking by hand. */


/* Top LEFT on purpose: .plate-photo::after already parks "DRAG TO LOOK
   AROUND" in the top right corner. */

.plate.is-unconfirmed .plate-photo {
  box-shadow: inset 0 0 0 1px rgba(168, 56, 74, 0.22);
}

/* Applies to a <span> in the tiles and a <dd> in the spec plates, so it
   stays a text-level treatment and sets no layout of its own. */
.is-unconfirmed {
  text-decoration: underline dotted var(--color-accent-light);
  text-underline-offset: 3px;
  cursor: help;
}

/* ============ CUSTOMER TYPE + TONNAGE ============ */
.qs-term-note {
  margin: -14px 0 22px;
  padding-left: 0;
  border-left: 0 solid transparent;
  transition: padding-left 0.18s ease, border-left-width 0.18s ease;
  font-size: 0.68rem;
  line-height: 1.6;
  color: var(--color-fg-dim);
  max-width: 62ch;
}
/* Commercial carries three lines of terms where residential has one.
   The accent bar marks it as the more conditional of the two without
   implying the sentence itself is unverified. */
.qs-term-note.is-commercial {
  padding-left: 11px;
  border-left: 2px solid var(--color-accent-light);
}

/* The trailer is the only thing on the grid the customer has to tow.
   Marked rather than described, because someone scanning tiles for a
   price will not read a terms paragraph before they pick one. Uses the
   cream foreground on a maroon bar so it reads as a property of the
   unit, not as a warning about it. */
.qs-tow {
  /* Present in every tile so all four keep the same height; only the
     towed unit actually shows it. visibility rather than display, so
     the space stays reserved. */
  visibility: hidden;
  display: inline-block;
  margin: 0 0 12px;
  padding: 3px 8px;
  border-radius: 2px;
  background: var(--color-accent-dim);
  border: 1px solid var(--color-accent-light);
  color: var(--color-accent-text);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.qs-tow.is-on { visibility: visible; }

.qs-tons {
  margin: 0 0 12px;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

/* ============ SERVICE AREA ============ */
.service-counties { line-height: 1.7; }
.service-note { color: var(--color-fg-dim); font-size: 0.72rem; }

/* If the scale drawings could not start (no canvas context on the
   device), the plates still carry the specs, so drop the empty picture
   area and the drag hint rather than leaving a dead box above real
   information. */
.plate-grid.rig-failed .plate-photo { display: none; }
.plate-grid.rig-failed .plate-photo::after { content: none; }

/* ============ SIZE REFERENCE: ONE CARD AT A TIME ============
   The drawings used to all spin at once, which read as four things
   competing rather than one thing being examined. Now the swing belongs
   to whichever card the visitor is on, and the others settle back.

   What recedes is the picture, not the numbers. The blur is on the
   drawing only: footprint, tonnage and overage stay crisp on every card,
   because comparing those across sizes is the whole job of this section.
   Dimming the specs would make the section worse at the one thing it is
   for. */

.plate {
  transition: transform 0.3s ease, border-color 0.3s ease,
              box-shadow 0.3s ease, opacity 0.3s ease;
}

.plate-grid.has-active .plate:not(.is-active) {
  opacity: 0.82;
  transform: scale(0.985);
}
.plate-grid.has-active .plate:not(.is-active) .plate-photo {
  filter: saturate(0.45) brightness(0.72) blur(1.4px);
  opacity: 0.75;
}

.plate.is-active {
  border-color: var(--color-accent-light);
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.09),
    0 0 0 1px rgba(168,56,74,0.34),
    0 0 30px rgba(122,37,48,0.30),
    0 16px 34px rgba(0,0,0,0.36);
}
.plate.is-active .plate-photo {
  filter: none;
  opacity: 1;
}

/* The canvas takes keyboard focus so this section is operable without a
   mouse. Ring on the card, not the canvas, so it reads as one object. */
.plate .rig3d:focus { outline: none; }
.plate .rig3d:focus-visible + .confirm-flag,
.plate:has(.rig3d:focus-visible) {
  outline: 2px solid var(--color-accent-text);
  outline-offset: 2px;
}

/* The hint only belongs on the card being looked at. On the others it was
   four copies of the same instruction competing with the drawings. */
.plate.is-active .plate-photo::after { opacity: 0.5; }
.plate.is-active .plate-photo:hover::after { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .plate, .plate-photo { transition: none; }
  .plate-grid.has-active .plate:not(.is-active) .plate-photo {
    filter: saturate(0.5) brightness(0.75);   /* dim, but no blur to swim in */
  }
  .plate.is-active { transform: none; }
}

/* ============ SIZE EXPLORER ============
   One container, one six-foot figure, and a picker. Replaces the row of
   four near-identical drawings: every roll-off shares the same floor, so
   four of them side by side spent the section showing no difference and
   shrank the figure to a thumbnail four times over. */

.explorer {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(250px, 0.9fr);
  gap: 26px;
  align-items: stretch;
  margin-bottom: 26px;
}
@media (max-width: 900px) {
  .explorer { grid-template-columns: 1fr; gap: 18px; }
}

.explorer-stage {
  position: relative;
  aspect-ratio: 16 / 10;
  min-height: 300px;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse at 50% 118%, rgba(122,37,48,0.15) 0%, transparent 62%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 26px),
    var(--color-bg);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.explorer-stage.is-active {
  border-color: var(--color-accent-light);
  box-shadow: inset 0 0 0 1px rgba(168,56,74,0.28), inset 0 0 44px rgba(122,37,48,0.2);
}
.explorer-stage .rig3d { width: 100%; height: 100%; }
@media (max-width: 900px) {
  .explorer-stage { aspect-ratio: 4 / 3; min-height: 240px; }
}

.explorer-drag,
.explorer-tow {
  position: absolute;
  margin: 0;
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
}
.explorer-drag {
  right: 12px; top: 10px;
  color: var(--color-fg-dim);
  opacity: 0.45;
  transition: opacity 0.2s ease;
}
.explorer-stage.is-active .explorer-drag { opacity: 0; }
.explorer-tow {
  left: 12px; top: 10px;
  visibility: hidden;
  padding: 3px 8px;
  border: 1px solid var(--color-accent-light);
  border-radius: 2px;
  background: rgba(58,18,24,0.9);
  color: var(--color-accent-text);
  font-weight: 700;
}
.explorer-tow.is-on { visibility: visible; }

.explorer-pick { display: flex; flex-direction: column; gap: 14px; }

.size-btns { display: grid; gap: 8px; }
@media (max-width: 900px) {
  .size-btns { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

/* Above the minimum on purpose: this is the control the whole section
   turns on, so it gets a real pressed state rather than a border swap. */
.size-btn {
  appearance: none;
  width: 100%;
  padding: 13px 16px;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background:
    linear-gradient(168deg, rgba(255,255,255,0.05) 0%, transparent 46%),
    var(--color-surface);
  color: var(--color-fg);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  transition: border-color 0.18s ease, transform 0.12s ease,
              background 0.18s ease, box-shadow 0.18s ease;
}
.size-btn:hover { border-color: var(--color-accent-light); transform: translateX(2px); }
.size-btn:active { transform: translateX(2px) scale(0.995); }
.size-btn:focus-visible {
  outline: 2px solid var(--color-accent-text);
  outline-offset: 2px;
}
.size-btn.is-active {
  border-color: var(--color-accent-light);
  background:
    linear-gradient(168deg, rgba(255,255,255,0.08) 0%, transparent 46%),
    var(--color-accent);
  /* The selected size fills with maroon, which is maroon in both themes,
     so its label cannot follow the page or light mode puts dark ink on
     it. */
  color: var(--color-on-dark);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 0 20px rgba(122,37,48,0.35);
}

.explorer-readout {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.65;
  color: var(--color-accent-text);
}
.explorer-note {
  margin: 0;
  font-size: 0.66rem;
  line-height: 1.6;
  color: var(--color-fg-dim);
}

/* ---- comparison table ---- */
.size-table-wrap { overflow-x: auto; }
.size-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 0.78rem;
}
/* Visible to a screen reader, out of the way visually: the readable note
   lives outside the scroll container so it never needs a sideways drag. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.size-table-note {
  margin: 10px 0 0;
  font-size: 0.66rem;
  line-height: 1.6;
  color: var(--color-fg-dim);
}
.size-table th, .size-table td {
  padding: 11px 14px;
  text-align: right;
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--color-fg);
  white-space: nowrap;
}
.size-table thead th {
  text-align: right;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg-dim);
  border-bottom-color: var(--color-accent-light);
}
.size-table tbody th[scope="row"],
.size-table thead th:first-child { text-align: left; font-weight: 700; }
.size-table tbody tr { transition: background 0.2s ease; }
.size-table tbody tr.is-active { background: rgba(122,37,48,0.17); }
.size-table tbody tr.is-active th[scope="row"] { color: var(--color-accent-text); }

/* If the drawing could not start, the table still carries every number. */
.explorer.rig-failed .explorer-stage { display: none; }
.explorer.rig-failed { grid-template-columns: 1fr; }

@media (prefers-reduced-motion: reduce) {
  .size-btn, .explorer-stage, .size-table tbody tr { transition: none; }
  .size-btn:hover, .size-btn:active { transform: none; }
}

/* Under the picker, so that column is not two thirds empty. Labels come
   from the size finder's own chips, matched with the finder's own logic. */
.explorer-jobs {
  margin-top: 2px;
  padding-top: 14px;
  border-top: 1px dashed var(--color-line);
}
.explorer-jobs-head {
  margin: 0 0 9px;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg-dim);
}
.explorer-jobs-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.explorer-jobs-list li {
  padding: 5px 10px;
  border: 1px solid var(--color-line);
  border-radius: 2px;
  background: rgba(255,255,255,0.03);
  font-size: 0.68rem;
  color: var(--color-fg);
}

/* ============ SOTERO'S 2026-09-28 NOTES ============ */

/* "THE RIG" bigger. It is the label for the one big illustration on the
   page and was set at the same size as every other eyebrow. */
.diagram-eyebrow {
  font-size: 1.05rem;
  letter-spacing: 0.28em;
  color: var(--color-accent-text);
  margin-bottom: 6px;
}
@media (min-width: 821px) {
  .diagram-eyebrow { font-size: 1.3rem; }
}

/* "It is hard to read the information about the rear doors."
   The callouts float over the truck art with nothing behind them, so on a
   wide screen the rear-doors label lands on the bright part of the image
   and disappears. It read fine on his phone because the mobile rule below
   drops them out of the picture and stacks them underneath.
   Fix is a plate behind the text, not a smaller image. */
@media (min-width: 901px) {
  .callout-label {
    padding: 8px 11px;
    border: 1px solid var(--color-line);
    border-left: 2px solid var(--color-accent-light);
    border-radius: 2px;
    background: rgba(20, 21, 23, 0.9);
    backdrop-filter: blur(3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  }
  .callout-3 .callout-label { border-left: 0; border-right: 2px solid var(--color-accent-light); }
  /* The chip stays a dark plate in both themes, so its text does too. */
  .callout-label strong { color: var(--color-on-dark); }
  .callout-label span { color: var(--color-on-dark-dim); }
}

/* "Is all font the same? It looks different in different sections."
   Three faces is the design: a heavy display face for headlines, a mono
   for data and labels, and a sans for reading. What was wrong is that
   several blocks of ordinary prose were set in the mono, which is what
   made it look like the font changed between sections for no reason.
   Mono now earns its place on data, not on sentences. */
.qs-note,
.qs-term-note,
.explorer-note,
.size-table-note,
.explorer-jobs-list li,
.finder-disclaimer,
.qs-note, .size-table-note, .explorer-note { font-size: 0.74rem; }
.qs-term-note { font-size: 0.78rem; }

/* A size with no published rate asks for a call instead of showing a
   number we were never given. */
.qs-amt.is-call {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--color-accent-text);
}

/* Second axis of the picker. Same control as customer type, stacked
   under it, so the two read as one set of choices rather than two
   unrelated widgets. */
#length-btns { display: flex; flex-wrap: wrap; gap: 0; }
#length-btns .dur-btn { flex: 1 1 auto; white-space: nowrap; }

/* The size finder hands its answer to the picker, so the tile it just
   added has to be findable when the page lands there. */
.qs-tile.is-flash {
  animation: qs-flash 1.4s ease-out;
}
@keyframes qs-flash {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 24px rgba(0,0,0,0.26); }
  18%      { box-shadow: 0 0 0 2px var(--color-accent-light), 0 0 34px rgba(122,37,48,0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .qs-tile.is-flash { animation: none; box-shadow: 0 0 0 2px var(--color-accent-light); }
}

/* When the suggested size is out, that line leads the notes. */
.finder-notes .finder-out { color: var(--color-accent-text); font-weight: 600; }

/* "Is all font the same? It looks different in different sections."
   Three faces is the design: a heavy display face for headlines, a mono
   for data and labels, a sans for reading. What was wrong is that several
   blocks of ordinary prose were set in the mono, which is what made the
   font look like it changed between sections for no reason. Mono earns
   its place on data, not on sentences.

   (This rule once ended with a .plate-note selector and was swept up with
   that dead family, because the sweep read multi-line selector lists by
   their last line only. Keep the whole list on view when editing.) */
.qs-note,
.qs-term-note,
.explorer-note,
.size-table-note,
.explorer-jobs-list li,
.finder-disclaimer {
  font-family: var(--font-body);
  letter-spacing: 0;
}

/* ============ SCRIPTURE BAND ============
   He asked for this big on the page. Given its own quiet band between the
   about section and the logo slab, so it closes out the who-we-are stretch
   rather than interrupting anyone trying to price a dumpster. Nothing else
   competes with it inside the band. */
.verse {
  padding: clamp(56px, 9vw, 104px) 0;
  margin-left: var(--rail);
  width: calc(100% - var(--rail));
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(122,37,48,0.17) 0%, transparent 62%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 30px),
    var(--color-bg-alt);
}
.verse-quote {
  margin: 0 auto;
  /* Not ch. A ch unit is the width of a "0", and in a heavy display face
     that is wide enough that 24ch set this as a nine-line ribbon instead
     of a statement. Fixed measure, so it breaks into three or four lines. */
  max-width: min(860px, 92%);
  text-align: center;
}
.verse-quote p {
  margin: 0 0 18px;
  font-family: var(--font-display);
  /* Floor raised so it still reads as the big thing on a phone. At the
     old 1.5rem it was only half again the body size, which is just
     "slightly larger text" rather than the statement he asked for. */
  font-size: clamp(1.8rem, 5.2vw, 2.9rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--color-fg);
  text-wrap: balance;
}
.verse-ref {
  display: inline-block;
  font-size: 0.68rem;
  font-style: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}


/* The line under the about heading, carrying his three words. */
.about-kicker {
  margin: -6px 0 18px;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

/* Service area, stated where somebody is actually choosing a size rather
   than only in the contact card at the foot of the page. */
.qs-area {
  margin: -8px 0 20px;
  padding-left: 11px;
  border-left: 2px solid var(--color-line);
  font-family: var(--font-body);
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--color-fg-dim);
  max-width: 70ch;
}

/* Out of stock is the moment this page earns its keep: the customer who
   would otherwise ring a competitor. That was a text link the size of a
   footnote, and people skimmed straight past it. It is now the loudest
   thing on a sold-out tile, taking the visual place the quantity stepper
   has on the others, so the eye lands on it in the same spot. */
.qs-oos-cta {
  display: block;
  width: 100%;
  padding: 11px 12px;
  cursor: pointer;
  text-align: center;
  border: 1px solid var(--color-accent-light);
  border-radius: var(--radius);
  background:
    linear-gradient(168deg, rgba(255,255,255,0.06) 0%, transparent 48%),
    var(--color-accent-dim);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.qs-oos-cta:hover {
  background: var(--color-accent);
  color: var(--color-on-dark);
  border-color: var(--color-accent-text);
  transform: translateY(-1px);
}
.qs-oos-cta:focus-visible {
  outline: 2px solid var(--color-accent-text);
  outline-offset: 2px;
}
.qs-oos-cta-main {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-fg);
}
.qs-oos-cta-sub {
  display: block;
  margin-top: 3px;
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-accent-text);
}

/* ============ PHOTOS AND OUR WORK ============
   Both of these only exist on the public site once Sotero has added
   something. The CSS is here from the start so the day he adds a photo
   it already looks finished, rather than needing another deploy. */

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.shot {
  margin: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface);
}
.shot img { display: block; width: 100%; height: 240px; object-fit: cover; }
.shot figcaption {
  padding: 10px 13px;
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--color-fg-dim);
  border-top: 1px solid var(--color-line);
}
.shots-empty {
  padding: 34px 0;
  font-size: 0.86rem;
  color: var(--color-fg-dim);
}

.cases { display: grid; gap: 18px; }
@media (min-width: 900px) {
  .cases { grid-template-columns: repeat(2, 1fr); }
  .cases-teaser { grid-template-columns: repeat(3, 1fr); }
}
.case {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
  background:
    linear-gradient(168deg, rgba(255,255,255,0.04) 0%, transparent 44%),
    var(--color-surface);
}
.case-shot img { display: block; width: 100%; height: 210px; object-fit: cover; }
.case-body { padding: 18px 20px 20px; }
.case-where {
  margin: 0 0 7px;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.case-body h3 { margin: 0 0 9px; font-size: 1.12rem; }
.case-blurb { margin: 0 0 12px; font-size: 0.88rem; line-height: 1.6; color: var(--color-fg-dim); }
.case-unit {
  margin: 0;
  padding-top: 11px;
  border-top: 1px dashed var(--color-line);
  font-size: 0.68rem;
  color: var(--color-fg);
}
.cases-teaser + .btn { margin-top: 22px; }

/* ============ FORM STATUS + HONEYPOT ============
   The honeypot is off-screen rather than display:none, because some bots
   skip hidden fields and a screen reader is told to ignore it anyway. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formstatus {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.5;
  min-height: 1.2em;
}
.formstatus.is-good { color: var(--color-good); }
.formstatus.is-bad  { color: var(--color-bad); }