/* Precision Equipment Rentals: "Big sky, black steel". See DESIGN.md.
   Colors are sampled from his own photos, decals and logo. Radius 0 everywhere. */

/* v2.4 (11/5): stand-ins for Barlow Condensed while the web font loads, scaled to the same width (measured on the site's
   headlines at weight 800: Arial Narrow Bold 86.2%, Arial Bold 70.7%, Roboto Bold 75.2%). Headlines then wrap the same in
   both fonts, so the page doesn't jump when Barlow Condensed arrives (it did: CLS 0.21 on the MT120 page at 1024px).
   Arrows (U+2190-21FF) are left out, so the → in links keeps its size. */
@font-face { font-family: "BC Fallback Narrow"; src: local("Arial Narrow Bold"), local("ArialNarrow-Bold"); font-weight: 100 900; size-adjust: 86%; unicode-range: U+0-218F, U+2200-10FFFF; }
@font-face { font-family: "BC Fallback Arial"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 100 900; size-adjust: 70.5%; unicode-range: U+0-218F, U+2200-10FFFF; }
@font-face { font-family: "BC Fallback Roboto"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 100 900; size-adjust: 75%; unicode-range: U+0-218F, U+2200-10FFFF; }

:root {
  --sky-hi: #1E4A86; --sky: #2F66AE; --sky-lo: #7DB4DC;
  --steel: #101214; --steel-2: #17191C; --rail: #24272B; --seam: #2E3236;
  --decal: #EEE9DC; --decal-2: #C9C4B7; --decal-3: #8E8A80;
  --gold: #D4AD50;   /* accent gold, lightened from #B08C2F per Lee's 11/2 screen recording (sampled RGB 212,173,80) */
  --gold-hi: #E2C170; /* hover for the gold hero button */
  --gold-l: rgba(176, 140, 47, .55); /* 1px header/footer/bar hairlines: unchanged */
  --hero: #171715;   /* home hero: flat charcoal (Lee's 11/2 recording), replaced the sky gradient */
  --ground: #F3F3F0; --ground-2: #E7E7E2; --ground-3: #D9D9D3;
  --ink: #121416; --ink-2: #484D53; --ink-3: #6A6F75;
  --line-d: rgba(238, 233, 220, .14); --line-l: rgba(18, 20, 22, .14);
  --f-disp: "Barlow Condensed", "BC Fallback Narrow", "BC Fallback Arial", "BC Fallback Roboto", "Arial Narrow", sans-serif;
  --f-body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --g: clamp(16px, 4vw, 40px);
  --maxw: 1240px;
  --hdr: 68px;
  --ease: cubic-bezier(.2, .75, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 12px); }
@media (prefers-reduced-motion: no-preference) { html.smooth { scroll-behavior: smooth; } } /* .smooth is added on load (site.js) */
body { margin: 0; background: var(--steel); color: var(--decal); font: 400 17px/1.55 var(--f-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--decal); outline-offset: 3px; }
.sec--ground :focus-visible, .sec--ground2 :focus-visible, .pg-light :focus-visible { outline-color: var(--ink); }
.quote--big :focus-visible { outline-color: var(--gold); } /* v3.0: links inside the dark review card */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--g)); margin-inline: auto; padding-inline: var(--g); }
.mono { font-family: var(--f-mono); font-weight: 500; letter-spacing: .02em; }
.muted { opacity: .78; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--decal); color: var(--steel); padding: 10px 14px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }


/* ---------- buttons ---------- */
.btn { --bh: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--bh); padding: 0 22px; border: 2px solid transparent; font: 700 19px/1 var(--f-disp); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform .25s var(--ease), background-color .2s, color .2s, border-color .2s; -webkit-tap-highlight-color: transparent; }
.btn svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.btn:active { transform: translateY(1px) scale(.985); }
.btn--decal { background: var(--decal); color: var(--steel); }
.btn--decal:hover { background: #fff; }
.btn--steel { background: var(--steel); color: var(--decal); border-color: var(--steel); }
.btn--steel:hover { background: var(--steel-2); border-color: var(--decal); }
.btn--ink { background: var(--ink); color: var(--ground); }
.btn--ink:hover { background: #2a2e33; }
.btn--line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--line:hover { background: var(--ink); color: var(--ground); }
.btn--line-light { border-color: var(--decal); color: var(--decal); background: transparent; }
.btn--line-light:hover { background: var(--decal); color: var(--steel); }
.btn--gold { background: var(--gold); color: var(--steel); }
.btn--gold:hover { background: var(--gold-hi); }
.link-arrow { display: inline-flex; gap: 8px; align-items: center; font: 700 18px/1 var(--f-disp); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; padding: 12px 0; border-bottom: 2px solid currentColor; }
.link-arrow span { transition: transform .25s var(--ease); }
.link-arrow:hover span { transform: translateX(4px); }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--steel); box-shadow: inset 0 -1px 0 var(--gold-l); }
.hdr-in { display: flex; align-items: center; gap: 20px; height: var(--hdr); }
.hdr-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.hdr-mark { width: 38px; height: auto; }
.hdr-words { width: 132px; height: auto; }
.hdr-nav { margin-left: auto; }
.hdr-list { display: flex; gap: 4px; }
.hdr-list a { display: block; padding: 12px 12px; font: 600 17px/1 var(--f-disp); letter-spacing: .07em; text-transform: uppercase; text-decoration: none; color: var(--decal-2); position: relative; }
.hdr-list a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.hdr-list a:hover, .hdr-list a[aria-current] { color: var(--decal); }
.hdr-list a:hover::after, .hdr-list a[aria-current]::after { transform: scaleX(1); }
.hdr-call { flex: none; display: flex; flex-direction: column; align-items: flex-end; text-decoration: none; line-height: 1; padding: 8px 0 8px 18px; border-left: 1px solid var(--line-d); }
.hdr-call-k { font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--decal-3); margin-bottom: 6px; }
.hdr-call [data-phone] { font: 700 22px/1 var(--f-disp); letter-spacing: .03em; }
.hdr-call:hover [data-phone] { color: #fff; }
.hdr-menu { display: none; }
@media (prefers-reduced-motion: no-preference) {
  }

@media (max-width: 1120px) {
  .hdr-list-rev { display: none; }
}
@media (max-width: 900px) {
  :root { --hdr: 62px; }
  .hdr-call { display: none; }
  .hdr-menu { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px 0 12px; background: none; border: 0; cursor: pointer; font: 700 17px/1 var(--f-disp); letter-spacing: .08em; text-transform: uppercase; }
  .hdr-menu-bars { position: relative; width: 22px; height: 12px; }
  .hdr-menu-bars i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .3s var(--ease); }
  .hdr-menu-bars i:first-child { top: 0; } .hdr-menu-bars i:last-child { bottom: 0; }
  .hdr-menu[aria-expanded="true"] .hdr-menu-bars i:first-child { transform: translateY(5px) rotate(45deg); }
  .hdr-menu[aria-expanded="true"] .hdr-menu-bars i:last-child { transform: translateY(-5px) rotate(-45deg); }
  .hdr-list { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; padding: 8px var(--g) 18px; background: var(--steel); border-bottom: 1px solid var(--line-d); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .3s var(--ease), visibility 0s .3s; }
  .hdr-list[data-open] { visibility: visible; opacity: 1; transform: none; transition: opacity .25s, transform .3s var(--ease); }
  .hdr-list a { padding: 15px 0; font-size: 22px; border-bottom: 1px solid var(--line-d); }
  .hdr-list a::after { display: none; }
  .hdr-list-book, .hdr-list-rev { display: block; }
}

/* ---------- hero: flat charcoal (Lee's 11/2 recording; was v2's sky gradient). The photo's mask fades into it. ---------- */
.hero { position: relative; color: #fff; background: var(--hero); overflow: hidden; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero-copy { position: relative; z-index: 2; padding: clamp(28px, 7vw, 56px) var(--g) 28px; }
.hero-title { display: flex; flex-direction: column; font-family: var(--f-disp); text-transform: uppercase; }
.hero-name { font: 700 clamp(17px, 2.2vw, 22px)/1.1 var(--f-disp); letter-spacing: .16em; color: var(--decal); margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.hero-name::before { content: ""; width: 28px; height: 3px; background: var(--decal); flex: none; }
.hero-line { font-weight: 800; font-size: clamp(50px, min(7.4vw, 13.2vh), 112px); line-height: .9; letter-spacing: .005em;  }
.hero-lede { margin-top: 20px; max-width: 34em; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.5; color: #F4F6F8; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 20px; font-size: 16px; }
.stars-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; min-height: 32px; }
.stars-link:hover b { text-decoration: underline; }
.stars { color: #FFD45A; letter-spacing: .08em; font-size: 15px; }
.stars-link b { font-weight: 700; }
.open { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; }
.hero-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero-photo { position: relative; margin: 0; }
.hero-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 70%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%); mask-image: linear-gradient(180deg, transparent 0, #000 24%); }
@media (min-width: 600px) and (max-width: 1023px) { .hero-img { aspect-ratio: 16 / 11; object-position: 50% 62%; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-img { animation: settle 1.6s var(--ease) both; }
}
.hero-img { filter: brightness(.9) saturate(1.04); }
@keyframes settle { from { transform: scale(1.05); opacity: .4; } to { transform: none; opacity: 1; } }

@media (min-width: 1024px) {
  .hero { min-height: clamp(560px, calc(100svh - var(--hdr) - 5px), 820px); display: grid; }
  .hero-in { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: stretch; }
  .hero-copy { align-self: center; padding: clamp(24px, 5vh, 64px) 24px clamp(24px, 5vh, 56px) max(var(--g), calc((100vw - var(--maxw)) / 2)); }
  .hero-photo { height: 100%; min-height: 100%; }
  .hero-img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-position: 50% 62%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 12%, #000 30%);
    mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 12%, #000 30%); }
}

/* ---------- sections ---------- */
.sec { position: relative; padding-block: clamp(64px, 9vw, 120px); overflow-x: clip; }
.sec--steel { background: var(--steel); color: var(--decal); }
.sec--ground { background: var(--ground); color: var(--ink); }
.sec--ground2 { background: var(--ground-2); color: var(--ink); }
.sec--sky { background: linear-gradient(180deg, var(--sky-hi), var(--sky) 70%, #3A74BA); color: #fff; }
.sec-head { margin-bottom: clamp(32px, 4.5vw, 56px); max-width: 760px; }
.sec-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; max-width: none; }
.kicker { display: flex; align-items: center; gap: 10px; font: 600 13px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--decal-2); margin-bottom: 16px; }
.kicker--ink { color: var(--ink-2); }
.sec--sky .kicker { color: #E3ECF5; }
.kicker::before { content: ""; width: 28px; height: 2px; background: var(--gold); flex: none; }
.h2 { font: 800 clamp(40px, 6vw, 76px)/.94 var(--f-disp); text-transform: uppercase; letter-spacing: .005em; }
.h2 .dim { color: var(--decal-3); }
.h2--ink { color: var(--ink); }
.h3 { font: 700 clamp(24px, 2.6vw, 30px)/1.05 var(--f-disp); text-transform: uppercase; letter-spacing: .03em; }
.sec-lede { margin-top: 18px; font-size: clamp(17px, 1.5vw, 19px); color: var(--decal-2); max-width: 40em; }
.sec-lede a { color: var(--decal); font-weight: 600; }
.sec-lede--ink { color: var(--ink-2); }
.sec--sky .sec-lede { color: #EEF3F8; }

/* ---------- rate panels: his trailer sides ---------- */
.panels { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 880px) { .panels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.panel { position: relative; background: #16181B; border: 1px solid #262A2E; border-top: 2px solid var(--gold); display: flex; flex-direction: column; transition: border-color .3s, background-color .3s; }
.panel:hover { background: #191C1F; border-color: #33383D; border-top-color: var(--gold); }
.panel-body { padding: 26px 26px 24px; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "size price" "spec spec" "cap cap" "go go"; align-items: end; gap: 6px 16px; flex: 1; }
.panel-size { grid-area: size; display: flex; align-items: baseline; gap: 8px; font-family: var(--f-disp); text-transform: uppercase; color: var(--decal); }
.panel-size b { font-size: clamp(76px, 8vw, 104px); line-height: .82; font-weight: 800; letter-spacing: -.01em; }
.panel-size span { font-size: 26px; font-weight: 700; letter-spacing: .08em; }
.panel-price { grid-area: price; font: 800 clamp(40px, 4vw, 52px)/.9 var(--f-disp); color: var(--decal); text-align: right; }
.panel-price .cur { font-size: .55em; vertical-align: .55em; margin-right: 2px; font-weight: 700; }
.panel-spec { grid-area: spec; display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-d); }
.panel-spec div { display: flex; gap: 8px; align-items: baseline; }
.panel-spec dt { font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--decal-3); }
.panel-spec dd { font: 600 17px/1.2 var(--f-mono); color: var(--decal); }
.panel-go { grid-area: go; margin-top: 14px; display: inline-flex; gap: 8px; align-items: center; min-height: 44px; font: 700 17px/1 var(--f-disp); letter-spacing: .07em; text-transform: uppercase; text-decoration: none; color: var(--decal-2); }
.panel-go span { transition: transform .25s var(--ease); }
.panel:hover .panel-go, .panel-go:focus-visible { color: var(--decal); }
.panel:hover .panel-go span { transform: translateX(5px); }
/* ---------- to-scale side views ---------- */
.scale { margin-top: clamp(36px, 5vw, 64px); border-top: 1px solid var(--line-d); padding-top: 28px; }
.scale-head { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.scale .scale-head { display: block; margin-bottom: 18px; }
.scale-note { margin-top: 8px; max-width: 52em; font-size: 15px; color: var(--decal-3); }
.sp-post { stroke: #2C3136; stroke-width: 1.5; fill: none; }
.sp-decal { opacity: .92; }
.scale-head .h3 { flex: none; }
.sp-row { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .sp-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sp { margin: 0; padding: 14px 12px 12px; background: #121417; border: 1px solid #23272B; }
.sp-svg { width: 100%; height: auto; overflow: visible; }
.sp-ground { stroke: var(--decal-3); stroke-width: 1.5; }
.sp-hatch { stroke: var(--decal-3); stroke-width: 1; opacity: .35; fill: none; }
.sp-body { fill: #1E2125; }
.sp-edge { fill: none; stroke: var(--decal); stroke-width: 2; }
.sp-crease { stroke: #3A3F44; stroke-width: 1.5; fill: none; }
.sp-frame { fill: #30353A; }
.sp-frame-l { fill: none; stroke: #30353A; stroke-width: 6; }
.sp-fender { fill: none; stroke: #30353A; stroke-width: 5; }
.sp-tire { fill: #0A0B0C; stroke: #3C4146; stroke-width: 1.5; }
.sp-rim { fill: #3A3F44; }
.sp-person { fill: var(--decal-2); }
.sp-dim { fill: none; stroke: var(--decal-2); stroke-width: 1.2; }
.sp-dim--soft { stroke: var(--decal-3); stroke-dasharray: 3 3; }
.sp-lbl { font: 600 15px var(--f-mono); fill: var(--decal); }
.sp-lbl--soft { fill: var(--decal-3); }
.sp-cap { display: flex; gap: 8px; align-items: baseline; margin-top: 8px; font: 500 12px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--decal-3); }
.sp-cap b { font: 800 22px/1 var(--f-disp); letter-spacing: .02em; color: var(--decal); }
.plate-fig { margin: 22px -10px 0; }
.plate-fig .sp { background: transparent; border: 0; padding: 0; }
.plate-fig .sp-cap { display: none; }
@media (max-width: 640px) { .sp-lbl { font-size: 25px; } .sp-lbl--soft { font-size: 20px; } }
.rates-more { margin-top: 30px; }

/* ---------- what it's for ---------- */
.haul-in { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 1000px) { .haul-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.haul-list { margin-top: 30px; border-top: 2px solid var(--ink); }
.haul-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-l); font: 800 clamp(30px, 3.8vw, 48px)/1 var(--f-disp); text-transform: uppercase; letter-spacing: .005em; }
.also { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; padding: 16px 18px; background: var(--ink); color: var(--ground); }
.also-k { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #B9BDC2; }
.also-v { font-weight: 600; }
.fig { position: relative; }
.fig-img { width: 100%; object-fit: cover; }
.haul-photo .fig-img { aspect-ratio: 4 / 5; } /* roofers is cropped to 4:5 in tools/make_images.py */
/* ---------- how it works ---------- */
.steps { position: relative; display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); }
.steps::before { content: ""; position: absolute; left: 16px; top: 8px; bottom: 8px; width: 2px; background: rgba(18, 20, 22, .22); }
.step { position: relative; padding: 0 0 36px 64px; }
.step-n { position: absolute; left: 0; top: 0; width: 34px; height: 34px; display: grid; place-items: center; font-size: 13px; background: var(--ink); color: var(--ground); }
.step-h { font: 800 34px/1 var(--f-disp); text-transform: uppercase; margin: 2px 0 10px; }
.step p { color: var(--ink-2); max-width: 24em; }
.step a { color: var(--ink); font-weight: 700; }

@media (min-width: 1000px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .steps::before { left: 0; right: 0; top: 16px; bottom: auto; width: auto; height: 2px; background: rgba(18, 20, 22, .22); }
  .step { padding: 64px 0 0; }
  .step-n { top: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .steps::before { transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease) .1s; }
  .js .steps[data-in]::before { transform: none; }
  @media (max-width: 999px) { .js .steps::before { transform: scaleY(0); transform-origin: top; } .js .steps[data-in]::before { transform: none; } }
}

/* ---------- reel ---------- */
.reel-sec .sec-head { margin-bottom: 36px; }
.reel-ctl { display: flex; align-items: center; gap: 22px; }
.reel-pause { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; background: transparent; border: 2px solid var(--decal-3); cursor: pointer; font: 700 16px/1 var(--f-disp); letter-spacing: .07em; text-transform: uppercase; color: var(--decal-2); }
.reel-pause:hover { color: var(--decal); border-color: var(--decal); }
.ico-pause { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.reel-pause[aria-pressed="true"] .ico-pause { width: 0; height: 0; border-left: 10px solid currentColor; border-right: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.reel { overflow: hidden; }
.reel-track { display: flex; gap: 14px; width: max-content; padding-inline: var(--g); }
.reel-track > li { flex: none; }
.reel-item { display: block; width: clamp(240px, 70vw, 340px); padding: 0; border: 0; background: #1B1E21; cursor: zoom-in; overflow: hidden; }
.reel-item img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .6s var(--ease), opacity .4s; }
.reel-item:hover img { transform: scale(1.035); }
.reel[data-moving] .reel-track { animation: reel var(--dur, 90s) linear infinite; }
.reel[data-moving][data-paused] .reel-track, .reel[data-moving]:hover .reel-track, .reel[data-moving]:focus-within .reel-track { animation-play-state: paused; }
@keyframes reel { to { transform: translateX(calc(var(--shift, 0) * -1px)); } }
.reel[data-static] { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.reel[data-static] .reel-track > li { scroll-snap-align: start; }

/* ---------- reviews ---------- */
.rev-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; margin-bottom: 40px; }
.rev-sub { margin-top: 12px; color: var(--ink-2); font-size: 17px; }
.stars--ink { color: #C99A12; }
.rev-acts { display: flex; flex-wrap: wrap; gap: 12px; }
.quotes { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .quotes { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: stretch; } .quote--big { grid-row: span 2; display: flex; flex-direction: column; } .quote--big blockquote { flex: 1; } }
.quote.quote--big { background: var(--ink); color: var(--ground); border-top-color: var(--gold); }
.quote.quote--big blockquote p { color: var(--ground); font-size: clamp(28px, 3.2vw, 44px); line-height: 1.1; }
.quote.quote--big .quote-by span { color: #A7ACB2; }
.quote { background: #fff; border: 1px solid var(--line-l); border-top: 4px solid var(--ink); padding: 26px 26px 22px; }
.quote-stars { color: #C99A12; letter-spacing: .1em; font-size: 15px; margin-bottom: 14px; }
.quote blockquote p { font: 600 clamp(22px, 2.1vw, 27px)/1.22 var(--f-disp); letter-spacing: .005em; color: var(--ink); }
.quote-by { margin-top: 18px; font: 700 16px/1 var(--f-body); }
.quote-by span { color: var(--ink-3); font-weight: 500; }
.quote-mark { display: block; font: 800 120px/.6 var(--f-disp); color: var(--gold); margin: 8px 0 -6px; }
.quote:not(.quote--big) .quote-mark { display: none; }
.quote.quote--big { justify-content: flex-start; }
.rev-note { margin-top: 26px; color: var(--ink-2); }
/* v3.0: live reviews from the review bot (site.js renderReviews). One or two cards share the width; 4-5 (or no short one
   for the big card) put the big card full width on top and the rest side by side. Long reviews get body-size type. */
.quote-by .quote-name { color: inherit; }
.quote-by a.quote-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.quote-by a.quote-name:hover { text-decoration-thickness: 2px; }
.quote--long blockquote p { font: 500 17px/1.55 var(--f-body); letter-spacing: 0; }
.quote blockquote p, .quote-by { overflow-wrap: anywhere; } /* a pasted link in a review must not run out of its card */
.quote-avatar { display: inline-block; width: 28px; height: 28px; border-radius: 50%; vertical-align: middle; margin: -4px 8px 0 0; object-fit: cover; background: var(--line-l); }
.quote-by a.quote-src { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Google Maps attribution (Places policies): the exact words, never wrapped, sans-serif, weight 400, normal tracking,
   12-16px, #5E5E5E on the light ground (white on dark); the filter notice + terms pointer sit next to it */
.gm-attr { font: 400 15px/1.3 var(--f-body); letter-spacing: normal; text-transform: none; white-space: nowrap; color: #5E5E5E; }
.gm-attr--light { color: #fff; font-size: inherit; }
.stars-src { white-space: normal; }
.rev-src { margin-top: 18px; font-size: 14px; line-height: 1.5; color: var(--ink-2); max-width: 62em; }
.rev-src .gm-attr { margin-right: 10px; }
.rev-src a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 700px) {
  .quotes.quotes--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* flex so the small cards always fill their row (a grid with a full-width card keeps empty auto-fit columns) */
  .quotes.quotes--many { display: flex; flex-wrap: wrap; }
  .quotes.quotes--many > li { flex: 1 1 240px; }
  .quotes.quotes--many > .quote--big { flex-basis: 100%; }
}
@media (min-width: 900px) {
  .quotes.quotes--one { grid-template-columns: minmax(0, 1fr); }
  .quotes.quotes--one .quote--big, .quotes.quotes--two .quote--big, .quotes.quotes--many .quote--big { grid-row: auto; }
}

/* ---------- service area ---------- */
.area-in { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 1000px) { .area-in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.area-copy .btn { margin-top: 28px; }
.area-map { position: relative; }
.map-svg { position: relative; aspect-ratio: 1000 / 760; background: #1C4377; border: 1px solid var(--line-l); overflow: hidden; }
.map-svg svg { width: 100%; height: 100%; }
.map-svg .land { fill: #8FB1D3; }
.map-svg .water, .map-svg #pontchartrain { fill: #1C4377; }
.map-svg .river { fill: none; stroke: #1C4377; stroke-width: 3; }
.zone-n { fill: #EEE9DC; }
.zone-s { fill: url(#hatchS); }
.map-dot { fill: #101214; }
.map-town { font: 600 22px var(--f-body); fill: #101214; letter-spacing: .01em; paint-order: stroke; stroke: rgba(238, 233, 220, .85); stroke-width: 5px; stroke-linejoin: round; }
.map-lake { font: 600 22px var(--f-mono); fill: #CFE0F0; letter-spacing: .32em; }
.map-region { font: 800 64px var(--f-disp); fill: #101214; letter-spacing: .04em; }
@media (max-width: 640px) { .map-town { font-size: 30px; stroke-width: 7px; } .map-minor { display: none; } .map-lake { font-size: 30px; } .map-region { font-size: 84px; } }
@media (prefers-reduced-motion: no-preference) {
  .map-zones, .map-labels { opacity: 0; transition: opacity 1s var(--ease) .2s; }
  .map-labels { transition-delay: .6s; }
  .area-map[data-in] .map-svg[data-ready] .map-zones, .area-map[data-in] .map-svg[data-ready] .map-labels { opacity: 1; }
}
.map-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.map-key { width: 16px; height: 10px; display: inline-block; }
.map-key--n { background: #EEE9DC; outline: 1px solid var(--ink-3); }
.map-key--s { background: repeating-linear-gradient(45deg, #EEE9DC 0 3px, #8FB1D3 3px 6px); }

/* ---------- CTA: the trailer side ---------- */
.cta { overflow: hidden; }
.cta-in { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 900px) { .cta-in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.cta-plate { background: #000; display: grid; place-items: center; padding: clamp(28px, 4vw, 48px); border: 1px solid #23262A; max-width: 520px; }
.cta-logo { width: 100%; max-width: 420px; }
.cta-num { font: 800 clamp(56px, 8.6vw, 128px)/.86 var(--f-disp); letter-spacing: .01em; }
.cta-num a { text-decoration: none; }
.cta-num a:hover { color: #fff; }
.cta-rent { display: flex; align-items: center; gap: 16px; font: 800 clamp(40px, 5.4vw, 80px)/.95 var(--f-disp); text-transform: uppercase; letter-spacing: .06em; margin-top: 8px; color: var(--decal-2); }
.cta-rent::before { content: ""; width: clamp(28px, 4vw, 56px); height: 3px; background: var(--gold); flex: none; }
.cta-lede { margin-top: 22px; max-width: 34em; color: var(--decal-2); font-size: 18px; }
.cta-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- footer ---------- */
.ftr { background: #0B0C0E; color: var(--decal-2); padding-bottom: 20px; border-top: 1px solid var(--gold-l); }
.ftr-in { display: grid; gap: 40px; padding-block: clamp(48px, 6vw, 80px) 40px; }
@media (min-width: 1100px) { .ftr-in { grid-template-columns: 260px 1fr; gap: 64px; } }
.ftr-logo { width: 220px; }
.ftr-tag { margin-top: 18px; font: 700 18px/1.2 var(--f-disp); letter-spacing: .08em; text-transform: uppercase; color: var(--decal); }
.ftr-tag span { color: var(--gold); }
.ftr-cols { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .ftr-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ftr-h { font: 600 12px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--decal-3); margin-bottom: 14px; }
.ftr-phone { font: 800 34px/1 var(--f-disp); color: var(--decal); text-decoration: none; letter-spacing: .02em; }
.ftr-phone:hover { color: #fff; }
.ftr-small { margin-top: 10px; font-size: 15px; }
.ftr-links li { margin-top: 2px; }
.ftr-links a { display: inline-block; padding: 8px 0; text-decoration: none; color: var(--decal); font-weight: 500; }
.ftr-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ftr-handle { display: block; overflow-wrap: break-word; font: 500 13px/1.3 var(--f-mono); color: var(--decal-3); }
.ftr-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 18px; border-top: 1px solid var(--line-d); font-size: 13px; color: var(--decal-3); }

/* ---------- phone action bar ---------- */
.bar { display: none; }
@media (max-width: 760px) {
  .ftr { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--steel); padding-bottom: env(safe-area-inset-bottom); transition: transform .35s var(--ease);  border-top: 1px solid var(--gold-l); }
  .bar-in { display: grid; grid-template-columns: repeat(3, 1fr); }
  .bar-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 61px; text-decoration: none; font: 700 18px/1 var(--f-disp); letter-spacing: .08em; text-transform: uppercase; color: var(--decal); }
  .bar-btn + .bar-btn { border-left: 1px solid var(--line-d); }
  .bar-btn svg { width: 19px; height: 19px; fill: currentColor; }
  .bar-btn--go { background: var(--decal); color: var(--steel); }
  .bar-btn--go svg { fill: none; stroke: currentColor; stroke-width: 2; }
}

/* ---------- lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 90; background: rgba(8, 9, 10, .985); display: grid; grid-template-rows: auto 1fr; opacity: 0; transition: opacity .25s; }
.lb[data-show] { opacity: 1; }
.lb[hidden] { display: none; }
.lb-top { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 0 20px; }
.lb-count { font: 500 14px/1 var(--f-mono); color: var(--decal-2); }
.lb-x, .lb-nav { width: 52px; height: 52px; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; color: var(--decal); }
.lb-x svg, .lb-nav svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.lb-x:hover, .lb-nav:hover { background: rgba(238, 233, 220, .1); }
.lb-fig { display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; min-height: 0; padding: 8px 64px 18px; }
.lb-fig img { max-width: 100%; max-height: calc(100svh - 150px); width: auto; height: auto; object-fit: contain; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lb-prev { left: 6px; } .lb-next { right: 6px; }
@media (max-width: 640px) { .lb-fig { padding: 8px 8px 76px; } .lb-nav { top: auto; bottom: 10px; transform: none; } }
body.lb-open .bar { visibility: hidden; }

/* ---------- reveals ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 70ms); }
  .js .rv[data-in] { opacity: 1; transform: none; }
  .js .panel.rv { transform: translateX(48px); }
  .js .panel.rv[data-in] { transform: none; }
}

/* ---------- inner pages ---------- */
.ph { position: relative; background: var(--steel); padding-block: clamp(48px, 7vw, 96px) clamp(36px, 5vw, 64px); }
.ph-title { font: 800 clamp(48px, 8vw, 104px)/.9 var(--f-disp); text-transform: uppercase; }
.ph-lede { margin-top: 18px; max-width: 40em; font-size: clamp(17px, 1.6vw, 20px); color: var(--decal-2); }
.ph-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* spec sheets */
.notes { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); border-top: 2px solid var(--ink); margin-top: 40px; }
@media (min-width: 800px) { .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.note { padding: 22px 22px 22px 0; border-bottom: 1px solid var(--line-l); }
/* 2 x 2 from 800px (four notes since Lee's 11/2 recording): a rule between the columns and between the rows */
@media (min-width: 800px) { .note:nth-child(odd) { border-right: 1px solid var(--line-l); } .note:nth-child(even) { padding-left: 22px; } .note:nth-last-child(-n + 2):nth-child(odd), .note:last-child { border-bottom: 0; } }
.note h3 { font: 800 26px/1 var(--f-disp); text-transform: uppercase; margin-bottom: 10px; }
.note p { color: var(--ink-2); }
.note a { color: var(--ink); font-weight: 700; }
.note [data-phone] { white-space: nowrap; } /* keeps 985-951-9904 on one line in the longer "Need it longer?" note */

/* gallery */
.gal { columns: 1; column-gap: 14px; }
@media (min-width: 560px) { .gal { columns: 2; } }
@media (min-width: 960px) { .gal { columns: 3; } }
.gal li { break-inside: avoid; margin-bottom: 14px; }
.gal-item { display: block; width: 100%; padding: 0; border: 0; background: #1B1E21; cursor: zoom-in; overflow: hidden; position: relative; }
.gal-item img { width: 100%; transition: transform .6s var(--ease); }
.gal-item:hover img { transform: scale(1.03); }
.gal-no { position: absolute; left: 0; top: 0; padding: 5px 8px; font: 500 12px/1 var(--f-mono); background: rgba(16, 18, 20, .86); color: var(--decal); letter-spacing: .08em; }

/* book-by-text builder */
.bk { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 1000px) { .bk { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.bk-form { display: grid; gap: 34px; }
.bk-ticket { border-top: 3px solid var(--gold); position: sticky; top: calc(var(--hdr) + 24px); background: var(--steel); color: var(--decal); }
.bk-ticket-in { padding: 24px 24px 26px; }
.bk-ticket h2 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; font: 800 30px/1 var(--f-disp); text-transform: uppercase; }
.bk-ticket h2 .mono { font-size: 12px; color: var(--decal-3); letter-spacing: .14em; }
.bk-to { margin-top: 10px; font: 500 14px/1.4 var(--f-mono); color: var(--decal-3); }
.bk-msg { margin-top: 18px; padding: 16px; min-height: 180px; white-space: pre-wrap; background: #0B0C0E; border: 1px dashed #3A3F44; font: 500 15px/1.6 var(--f-mono); color: var(--decal); }
.bk-acts { display: grid; gap: 10px; margin-top: 18px; }
.bk-acts .btn { width: 100%; }
.bk-copy[data-done] { background: #5BE38C; color: var(--steel); }
.bk-fine { margin-top: 14px; font-size: 14px; color: var(--decal-3); }
.pg-light { background: var(--ground); color: var(--ink); }
.bk-ticket :focus-visible { outline-color: var(--decal); }

/* ---------- inner-page extras ---------- */
.ph-split { display: grid; gap: 32px; align-items: end; }
@media (min-width: 1000px) { .ph-split { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 56px; } }
.ph-photo .fig-img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 60%; } /* Request a rental hero (house-wrap-43, already cut to 4:3 at this framing): roofline to the box's feet */
.fig-cap { margin-top: 10px; font-size: 15px; color: var(--decal-2); text-wrap: pretty; }
.notes-head { display: grid; gap: 28px; align-items: end; }
@media (min-width: 900px) { .notes-head { grid-template-columns: minmax(0, 1fr) minmax(0, .75fr); } }
.notes-photo .fig-img { aspect-ratio: 3 / 2; object-position: 50% 60%; }
.cta--slim { padding-block: clamp(48px, 6vw, 80px); }
.cta-in--slim { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px; }
.cta-in--slim .cta-acts { margin-top: 0; }
.gal-sec { padding-top: clamp(40px, 5vw, 64px); }
.gal-more { margin-top: 28px; color: var(--decal-2); }
.gal-more a { color: var(--decal); font-weight: 600; }
.pg-book .bk-ticket .btn--line-light { min-height: 50px; }
.bk-msg { overflow-wrap: anywhere; }

/* ---------- spec plates (sizes page) ---------- */
.plates { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .plates { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plate { display: flex; flex-direction: column; padding: 30px 28px 28px; background: #16181B; border: 1px solid #262A2E; border-top: 2px solid var(--gold); scroll-margin-top: calc(var(--hdr) + 20px); }
.plate-size { display: flex; align-items: baseline; gap: 10px; font-family: var(--f-disp); text-transform: uppercase; color: var(--decal); }
.plate-size b { font-size: clamp(110px, 11vw, 150px); line-height: .8; font-weight: 800; letter-spacing: -.02em; }
.plate-size span { font-size: 30px; font-weight: 700; letter-spacing: .1em; }
.plate-spec { margin-top: 26px; border-top: 1px solid var(--line-d); }
.plate-spec div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line-d); }
.plate-spec dt { font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--decal-3); }
.plate-spec dd { font: 600 18px/1.2 var(--f-mono); color: var(--decal); }
.plate-spec .plate-price { font: 800 44px/1 var(--f-disp); }
.plate .plate-go { margin-top: 22px; }
.plate .plate .plates-sec { padding-top: 8px; }
.plates-sec .scale { margin-top: 48px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.map-state { fill: none; stroke: #101214; stroke-width: 1.4; opacity: .35; }
.plates-q { margin-top: 28px; max-width: 760px; padding-left: 16px; border-left: 2px solid var(--gold); }
.plates-q p { font: 600 24px/1.25 var(--f-disp); color: var(--decal); }
.plates-q footer { margin-top: 8px; font: 600 15px/1 var(--f-body); color: var(--decal-3); }

.area .h2 { font-size: clamp(40px, 4.8vw, 64px); }

/* ---------- contractors ---------- */
.pro-in { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 1000px) { .pro-in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
/* Request a rental hero (v2.4): the dumpster photo with Bobcat's MT120 photo under it */
.ph-pics { display: grid; gap: 12px; align-content: start; }
@media (min-width: 600px) and (max-width: 999px) { .ph-pics { grid-template-columns: minmax(0, 1.333fr) minmax(0, 1.499fr); } } /* side by side, same height (4:3 and 700:467) */
.ph-split--pics { align-items: center; } /* two photos stand taller than the copy, so the copy centres on them */
.ph-photo--mt .fig-img { aspect-ratio: 700 / 467; object-position: 50% 50%; }
.pro-photo .fig-img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 60%; } /* tilt-pines: box and trailer, pines above */
.pro .h2 { font-size: clamp(44px, 6.4vw, 84px); }
.pro-ticks { margin-top: 24px; display: grid; gap: 10px; }
.pro-ticks li { display: flex; align-items: center; gap: 14px; font: 600 18px/1.3 var(--f-body); color: var(--decal); }
.pro-ticks li::before { content: ""; width: 22px; height: 2px; background: var(--gold); flex: none; }
.pro-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.pro-list { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); border-top: 2px solid var(--gold); }
@media (min-width: 760px) { .pro-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pro-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pro-list li { padding: 22px 22px 22px 0; border-bottom: 1px solid var(--line-d); display: grid; gap: 8px; }
.pro-list b { font: 800 26px/1 var(--f-disp); text-transform: uppercase; color: var(--decal); }
.pro-list span { color: var(--decal-2); }
.pro-more { margin-top: 26px; }
@media (max-width: 559px) { .pro-more .link-arrow { display: inline; padding: 0; border-bottom: 0; line-height: 1.5; text-decoration: underline 2px; text-underline-offset: 6px; } }
.ph-pro { color: var(--decal); font-weight: 600; }
.pro-quote { padding-block: clamp(40px, 5vw, 64px); }

/* ---------- v2 (10/30): MT120, contact, request form ---------- */
/* header: more items, so drop the extras earlier (all come back in the phone menu) */
/* v2.4: Request a rental stays in the menu at every desktop width (it replaced Contractors); Contact and Our work drop first */
@media (max-width: 1085px) { .hdr-list-contact { display: none; } }
@media (max-width: 980px) { .hdr-list-work { display: none; } }
@media (max-width: 900px) { .hdr-list-book, .hdr-list-contact, .hdr-list-work { display: block; } }

.hero-soon { display: inline; color: #fff; font-weight: 600; text-underline-offset: 3px; }
.hero-soon:hover { text-decoration-thickness: 2px; }
.dim-ink { color: var(--ink-3); }

/* MT120 status plate (home band) */
.mt-plate { background: #16181B; color: var(--decal); border: 1px solid #262A2E; border-top: 2px solid var(--gold); padding: 26px 26px 13px; max-width: 520px; width: 100%; }
.mt-plate-k { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--decal-3); }
.mt-plate-status { margin-top: 10px; font: 800 clamp(48px, 6vw, 76px)/.9 var(--f-disp); text-transform: uppercase; color: var(--decal); }
.mt-plate-spec { margin-top: 20px; }
.mt-plate-spec dd { font-size: 16px; text-align: right; }

/* home band */
.equip-in { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 1000px) { .equip-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } .equip-in .mt-plate { justify-self: end; } }
.equip .h2 { font-size: clamp(44px, 6vw, 80px); }
.equip-ticks { margin-top: 22px; display: grid; gap: 10px; }
.equip-ticks li { display: flex; align-items: baseline; gap: 12px; font-size: 18px; color: var(--ink-2); }
.equip-ticks li::before { content: ""; width: 22px; height: 2px; background: var(--gold); flex: none; transform: translateY(-5px); }
.equip-ticks b { font: 700 22px/1 var(--f-disp); letter-spacing: .02em; color: var(--ink); }
.equip-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* MT120 page */
/* hero since v2.3: the title, then the lede and buttons (beside the title from 1000px, bottoms aligned), then Bobcat's photos */
.ph-split--mt { gap: 0; }
@media (min-width: 1000px) { .ph-split--mt { grid-template-columns: minmax(0, 1.2fr) minmax(420px, .8fr); gap: 56px; } .ph-split--mt .ph-lede { margin-top: 0; } }
@media (min-width: 1000px) and (max-width: 1179px) { .ph-split--mt { gap: 40px; } } /* the right column keeps both buttons on one row; 40px leaves the title room so it never wraps */
/* phones: the two hero buttons share one row and the top padding shrinks, so the first photo shows on a real phone's first screen (review 11/5) */
@media (max-width: 520px) { .ph--mt { padding-top: 28px; } }
@media (min-width: 360px) and (max-width: 520px) { .ph-split--mt .ph-acts { flex-wrap: nowrap; gap: 10px; } .ph-split--mt .ph-acts .btn { --bh: 50px; flex: 1 1 0; padding-inline: 10px; font-size: 16px; white-space: nowrap; } }
.ph-soon { color: var(--decal-3); }
.mt-deliver-in { display: grid; gap: 28px 64px; align-items: center; }
@media (min-width: 1000px) { .mt-deliver-in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.mt-rule { display: grid; gap: 10px; padding: 26px 28px; background: var(--ink); color: var(--ground); border-left: 3px solid var(--gold); }
.mt-rule-k { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #B9BDC2; }
.mt-rule-v { font: 700 clamp(24px, 2.6vw, 32px)/1.2 var(--f-disp); letter-spacing: .01em; color: #fff; }
.mt-spec-grid { display: grid; gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--gold); }
@media (min-width: 900px) { .mt-spec-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mt-spec-grid div { padding: 20px 18px 22px 0; border-bottom: 1px solid var(--line-d); display: grid; gap: 8px; align-content: space-between; }
.mt-spec-grid dt { font: 500 12px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--decal-3); }
.mt-spec-grid dd { font: 800 clamp(26px, 3vw, 38px)/1 var(--f-disp); color: var(--decal); }
.mt-terms-in { display: grid; gap: 28px 64px; align-items: end; }
@media (min-width: 1000px) { .mt-terms-in { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } .mt-terms-cta { justify-content: flex-end; } }
.mt-terms-acts, .mt-terms-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* contact (home bottom section) */
.cta-copy .kicker { margin-bottom: 18px; }
.contact-list { margin-top: 26px; border-top: 1px solid var(--line-d); max-width: 620px; }
.contact-list div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line-d); align-items: baseline; }
.contact-list dt { font: 500 12px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--decal-3); }
.contact-list dd { color: var(--decal); font-size: 17px; overflow-wrap: anywhere; }
.contact-list a { color: var(--decal); font-weight: 600; }
@media (max-width: 520px) { .contact-list div { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* request form */
.bk-err { margin-top: -2px; font: 600 14px/1.3 var(--f-body); color: #B3261E; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bk-notice { margin-top: 18px; padding-left: 12px; border-left: 2px solid var(--gold); font-size: 15px; color: var(--decal-2); }
.bk-notice b { color: var(--decal); }
.bk-acts .btn[aria-disabled="true"] { opacity: .6; cursor: default; }
.bk-status { margin-top: 14px; padding: 14px 16px; font-size: 15px; line-height: 1.45; border: 1px solid var(--line-d); background: #0B0C0E; color: var(--decal); }
.bk-status[data-kind="ok"] { border-color: #5BE38C; }
.bk-status[data-kind="err"] { border-color: #E06B5F; }
.bk-status a { color: var(--decal); font-weight: 700; }

/* ---------- review fixes (10/30) ---------- */
.bk-status:empty { padding: 0; margin: 0; border: 0; }
.bk-status:focus { outline: none; }
.bk-status:focus-visible { outline: 3px solid var(--decal); outline-offset: 3px; }
.mt-plate-spec dd { text-wrap: balance; }
.mt-plate-spec div:last-child { border-bottom: 0; }
/* Rates & terms row: "See more" opens the MT120 page's Rates & rental terms section (Cager 11/5) */
.plate-more { display: block; margin-top: 8px; font: 600 14px/1.2 var(--f-mono); color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.plate-more:hover { color: var(--decal); }
.mt-plate :focus-visible { outline-color: var(--decal); }
.plate-spec dd { text-align: right; text-wrap: balance; }
.plate-fig { margin-top: auto; padding-top: 22px; }
.ftr-h--sub { margin-top: 22px; }
@media (max-width: 999px) { .mt-terms-cta { margin-top: 0; } }
@media (min-width: 1000px) { .mt-terms-cta { display: grid; justify-content: end; } .mt-terms-cta .btn { width: 100%; } }
@media (max-width: 899px) { .cta-plate { display: none; } }
/* keep focused controls and results clear of the fixed phone bar */
@media (max-width: 760px) {
  html { scroll-padding-bottom: calc(61px + env(safe-area-inset-bottom) + 12px); }
  .bk-status { scroll-margin-bottom: calc(61px + env(safe-area-inset-bottom) + 16px); }
}
/* ---------- v2.2 (11/2): Lee's request form (book.html), MT120 photos + attachments ---------- */
:root {
  --gold-d: #6E5418;     /* dark gold for TEXT and rules on the light grounds: 6.4:1 on --ground, 7.1:1 on white (Lee's form measured about #6A5015 to #725728). --gold #D4AD50 stays a dark-ground colour */
  --field-line: #92928D; /* request-form field borders: 3.1:1 on white (WCAG 1.4.11). Lee's lighter grey (about #BBBBB9 re-measured) is about 1.9:1 */
  --card-line: #E2E1DB;  /* the white step cards' edge on the cream ground (decorative) */
}
/* intro: the same cream as the form, straight under the header (no dark band) */
.ph--light { background: var(--ground); color: var(--ink); padding-block: clamp(36px, 6vw, 80px) clamp(24px, 3.2vw, 40px); }
.ph-eyebrow { margin-bottom: 14px; font: 700 13px/1.3 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-d); }
.ph-title--plain { font: 700 clamp(38px, 5.4vw, 68px)/1.04 var(--f-body); letter-spacing: -.015em; text-transform: none; color: var(--ink); }
.ph-lede--ink { max-width: 34em; color: var(--ink); }
/* v2.4: the form section follows the dark four-points band now, so it keeps the normal section padding; Lee's intro is its heading */
.rq-head { margin-bottom: clamp(24px, 3.2vw, 40px); }
.rq-sec { scroll-margin-top: calc(20px - clamp(64px, 9vw, 120px)); } /* = .sec padding-block: lands the eyebrow 32px under the header */

/* step cards */
.bk-form.rq { gap: clamp(16px, 2vw, 24px); }
.rq-card { display: grid; gap: 18px; min-width: 0; padding: clamp(20px, 3.4vw, 32px); background: #fff; border: 1px solid var(--card-line); border-radius: 8px; }
.rq-legend { display: flex; align-items: baseline; gap: 18px; margin-bottom: 2px; font: 700 clamp(24px, 2.4vw, 28px)/1.15 var(--f-body); letter-spacing: -.005em; color: var(--ink); }
.rq-num { flex: none; font: 700 16px/1 var(--f-body); font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--gold-d); }
.rq-field { display: grid; gap: 8px; align-content: start; min-width: 0; }
.rq-field > label, .rq-attach > legend { font: 700 16px/1.3 var(--f-body); color: var(--ink); }
.rq input:not([type="checkbox"]), .rq select, .rq textarea {
  display: block; width: 100%; min-width: 0; max-width: 100%; height: 52px; margin: 0; padding: 0 14px;
  border: 1px solid var(--field-line); border-radius: 4px; background-color: #fff; color: var(--ink); box-shadow: none;
  font: 400 17px/1.3 var(--f-body); -webkit-appearance: none; appearance: none;
}
.rq textarea { height: auto; min-height: 104px; padding: 12px 14px; line-height: 1.45; resize: vertical; }
.rq textarea[rows="2"] { min-height: 0; } /* "Other attachment needs": a true 2-line box, so Lee's placeholder wraps instead of being cut on phones */
.rq ::placeholder { color: #6E7277; opacity: 1; } /* 4.8:1 on white */
.rq select { padding-right: 42px; text-overflow: ellipsis; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Cpath d='M2 7l4-4 4 4M2 11l4 4 4-4' fill='none' stroke='%23121416' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 15px center / 11px 17px; }
/* iOS: an empty date box keeps its height and never grows past the card */
.rq input[type="date"] { line-height: 50px; text-align: left; }
.rq input[type="date"]::-webkit-date-and-time-value { min-height: 1.3em; margin: 0; text-align: left; }
.rq input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .75; }
/* :focus-within keeps the ring on a desktop date box while its calendar-icon Tab stop is focused */
.rq input:not([type=checkbox]):not([type=radio]):focus, .rq input:not([type=checkbox]):not([type=radio]):focus-within, .rq select:focus, .rq textarea:focus { border-color: var(--gold-d); outline: 2px solid var(--gold-d); outline-offset: 2px; }
.rq [aria-invalid="true"] { border-color: #B3261E; box-shadow: inset 0 0 0 1px #B3261E; }
.rq .bk-err { margin: 0; }
.rq-req { color: var(--ink); }
.rq-help { font: 400 15px/1.45 var(--f-body); color: var(--ink-3); }
.rq-checks { display: grid; }
.rq-check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 0; cursor: pointer; font: 400 17px/1.4 var(--f-body); color: var(--ink); }
.rq-check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--gold-d); cursor: pointer; }
.rq-check input:focus-visible { outline: 2px solid var(--gold-d); outline-offset: 2px; }
.rq-flex .rq-help { margin-top: -2px; }
.rq-mt { display: grid; gap: 18px; }
.rq-notice { padding: 16px 18px; background: #F6EFDD; border-left: 3px solid var(--gold-d); font: 400 17px/1.45 var(--f-body); color: var(--ink); }
.rq-attach { display: grid; min-width: 0; margin: 0; padding: 0; border: 0; }
.rq-attach > legend { padding: 0; margin-bottom: 4px; }
.rq-attach .rq-help { margin-top: 2px; }
.rq-two { display: grid; gap: 18px 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .rq-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* City and ZIP stack on phones like Lee's version, and pair up from 560px */
@media (min-width: 560px) { .rq-two--city { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 18px 12px; } }
.pg-book .bk-ticket { border-radius: 8px; overflow: hidden; }
/* small phones (360px): a little less card padding and 16px field text, so the longest option ("15 yard dumpster — $350 / 3 days") shows in full in the closed select. 16px keeps iOS from zooming on focus */
@media (max-width: 380px) { .rq-card { padding: 20px 16px; } .rq input:not([type="checkbox"]), .rq select, .rq textarea { font-size: 16px; } .rq select { padding-right: 38px; background-position: right 13px center; } }

/* MT120 page: an Attachments row under the spec grid; Bobcat's photos (in the hero since v2.3) stack on phones and sit side by side from 760px */
.mt-attach { display: grid; gap: 12px; padding: 22px 0 24px; border-bottom: 1px solid var(--line-d); }
@media (min-width: 900px) { .mt-attach { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: 0; align-items: baseline; } .mt-attach-k { grid-row: span 2; } }
.mt-attach-k { font: 500 12px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--decal-3); }
.mt-attach-list { display: flex; flex-wrap: wrap; gap: 10px 36px; }
.mt-attach-list li { display: flex; align-items: baseline; gap: 12px; font: 800 clamp(24px, 2.6vw, 32px)/1.05 var(--f-disp); text-transform: uppercase; color: var(--decal); }
.mt-attach-list li::before { content: ""; flex: none; width: 22px; height: 2px; background: var(--gold); transform: translateY(-.3em); }
.mt-attach-note { color: var(--decal-2); }
.mt-photos { margin-top: clamp(32px, 4.4vw, 56px); }
.mt-photos-list { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
/* columns in proportion to each photo's aspect (1179x788, 1179x957), so the two stand at the same height */
@media (min-width: 760px) { .mt-photos-list { grid-template-columns: minmax(0, 1.496fr) minmax(0, 1.232fr); } }
.mt-photo img { width: 100%; }

/* v2.5: MT120 rates table (Lee's 11/5 rate sheet) */
.mt-rates-wrap { margin-top: clamp(28px, 4vw, 48px); background: #fff; border: 1px solid var(--card-line); border-radius: 8px; overflow: hidden; }
.mt-rates { width: 100%; border-collapse: collapse; font: 400 17px/1.35 var(--f-body); color: var(--ink); font-variant-numeric: tabular-nums; }
.mt-rates th, .mt-rates td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--card-line); }
.mt-rates thead th { font: 700 13px/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); background: var(--ground); }
.mt-rates tbody th { font-weight: 700; }
.mt-rates td b { font: 800 26px/1 var(--f-disp); }
.mt-rates tbody tr:last-child th, .mt-rates tbody tr:last-child td { border-bottom: 0; }
.mt-rates-ext td { font-weight: 700; color: var(--gold-d); }
.mt-rules { display: grid; gap: 10px; margin-top: 22px; max-width: 70em; }
.mt-rules li { position: relative; padding-left: 22px; color: var(--ink-2); }
.mt-rules li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 2px; background: var(--gold-d); }
/* phones: each period becomes a small card (label left, value right) */
@media (max-width: 639px) {
  .mt-rates thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mt-rates, .mt-rates tbody, .mt-rates tr, .mt-rates th, .mt-rates td { display: block; }
  .mt-rates tr { padding: 14px 16px; border-bottom: 1px solid var(--card-line); }
  .mt-rates tbody tr:last-child { border-bottom: 0; }
  .mt-rates th, .mt-rates td { padding: 0; border: 0; }
  .mt-rates tbody th { margin-bottom: 8px; font-size: 18px; }
  .mt-rates td { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
  .mt-rates td::before { content: attr(data-label); color: var(--ink-3); }
  .mt-rates td b { font-size: 22px; }
}

/* ---------- v2.5 (11/6): request form, one step at a time + a live estimate ---------- */
.rq-set { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.rq-q { display: block; padding: 0; font: 700 16px/1.3 var(--f-body); color: var(--ink); }
.rq-flabel { font: 700 16px/1.3 var(--f-body); color: var(--ink); }
/* the step number becomes a ring that fills in gold once the step is complete */
.rq-num { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1.5px solid var(--gold-d); border-radius: 50%; font-size: 14px; transition: background-color .3s, color .3s; }
.rq-card[data-done] .rq-num { background: var(--gold-d); color: #fff; }
.rq-legend { align-items: center; }
@media (prefers-reduced-motion: no-preference) {
  .rq-card[data-step] { animation: rq-in .5s var(--ease) both; }
  .rq-set, .rq-mt { animation: rq-in .4s var(--ease) both; }
}
@keyframes rq-in { from { opacity: 0; transform: translateY(12px); } }

/* tiles (radios): white cards, a gold edge + tick when picked */
.rq-tiles { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.rq-tiles--size { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rq-tiles--period { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rq-tile { position: relative; display: block; min-width: 0; cursor: pointer; }
.rq .rq-tile input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.rq-tile-in { position: relative; display: grid; align-content: start; gap: 4px; height: 100%; padding: 16px 40px 16px 16px; border: 1px solid var(--field-line); border-radius: 8px; background: #fff;
  transition: border-color .2s, box-shadow .2s, background-color .2s, transform .2s var(--ease); }
.rq-tile-in b { font: 700 17px/1.25 var(--f-body); color: var(--ink); }
.rq-tile-in small { font: 400 14px/1.35 var(--f-body); color: var(--ink-3); }
.rq-tile-in::after { content: ""; position: absolute; top: 14px; right: 14px; width: 18px; height: 18px; border: 1.5px solid var(--field-line); border-radius: 50%; background: #fff no-repeat center / 10px 10px; transition: background-color .2s, border-color .2s; }
@media (hover: hover) { .rq-tile:hover .rq-tile-in { border-color: var(--ink-3); box-shadow: 0 8px 22px rgba(18, 20, 22, .08); transform: translateY(-1px); } }
.rq-tile input:checked + .rq-tile-in { border-color: var(--gold-d); background: #FBF8F0; box-shadow: inset 0 0 0 1px var(--gold-d), 0 8px 22px rgba(110, 84, 24, .12); }
.rq-tile input:checked + .rq-tile-in::after { border-color: var(--gold-d); background-color: var(--gold-d);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2 4 7.6 8.6 2.6' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.rq-tile input:focus-visible + .rq-tile-in { outline: 2px solid var(--gold-d); outline-offset: 2px; }
/* size tiles: the size big, its period and price under it */
.rq-tile--size .rq-tile-in { padding: 14px 12px; gap: 6px; }
.rq-tile--size .rq-tile-in::after { top: 10px; right: 10px; }
.rq-tile--size b { font: 800 clamp(26px, 7vw, 36px)/.95 var(--f-disp); text-transform: uppercase; letter-spacing: .01em; }
.rq-tile-k { font: 500 12px/1.3 var(--f-mono); letter-spacing: .04em; color: var(--ink-3); }
.rq-tile-p { font: 700 19px/1.1 var(--f-body); font-variant-numeric: tabular-nums; color: var(--ink); }
.rq-tile-p--q { font-size: 16px; color: var(--gold-d); }
.rq-tile--period .rq-tile-in { padding: 14px 36px 14px 14px; }

/* contractors: a row per size with a stepper */
.rq-qty { display: grid; border: 1px solid var(--field-line); border-radius: 8px; background: #fff; }
.rq-qty-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 12px 12px 16px; }
.rq-qty-row + .rq-qty-row { border-top: 1px solid var(--card-line); }
.rq-qty-k { display: grid; gap: 4px; min-width: 0; }
.rq-qty-k b { font: 800 30px/.95 var(--f-disp); text-transform: uppercase; color: var(--ink); }
.rq-qty-k small { font: 500 12px/1.3 var(--f-mono); letter-spacing: .04em; color: var(--ink-3); }
.rq-step { display: inline-flex; flex: none; align-items: center; border: 1px solid var(--field-line); border-radius: 999px; background: #fff; }
.rq-step-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; font: 500 24px/1 var(--f-body); color: var(--ink); cursor: pointer; transition: background-color .2s; }
@media (hover: hover) { .rq-step-btn:hover:not(:disabled) { background: var(--ground); } }
.rq-step-btn:disabled { color: #B9BBB8; cursor: default; }
.rq-step-btn:focus-visible { outline: 2px solid var(--gold-d); outline-offset: 1px; }
.rq .rq-step input { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; background: none; text-align: center; font: 700 19px/1 var(--f-body); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.rq .rq-step input::-webkit-outer-spin-button, .rq .rq-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rq .rq-step input:focus { outline: 2px solid var(--gold-d); outline-offset: 0; border-radius: 4px; }
.rq-extra { display: grid; gap: 10px; }
.rq-extra-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.rq-extra-row .rq-help { margin: 0; }

/* the Bobcat's attachments show the price for the chosen period */
.rq-att-p { margin-left: 4px; font-weight: 700; color: var(--gold-d); font-variant-numeric: tabular-nums; }

/* a pickup date set by the rental period: shown, not picked */
.rq-fixed { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border: 1px dashed var(--field-line); border-radius: 4px; background: #F7F6F2; font: 400 17px/1.3 var(--f-body); color: var(--ink-3); }
.rq-fixed[data-set] { color: var(--ink); font-weight: 600; }
.rq-fixed::before { content: ""; flex: none; width: 14px; height: 16px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Crect x='1' y='7' width='12' height='8' rx='1.5' fill='%236E5418'/%3E%3Cpath d='M4 7V5a3 3 0 0 1 6 0v2' fill='none' stroke='%236E5418' stroke-width='1.6'/%3E%3C/svg%3E"); }

/* phones and tablets: a one-line estimate under the choices (the full panel comes at the end) */
.rq-est-inline { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 2px 0 0; padding: 14px 16px; border-radius: 8px; background: var(--steel); color: var(--decal); }
.rq-est-inline span { font: 600 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--decal-3); }
.rq-est-inline b { font: 800 28px/1 var(--f-disp); font-variant-numeric: tabular-nums; text-align: right; }
@media (min-width: 1000px) { .rq-est-inline { display: none; } }
@media (max-width: 999px) { .bk:not([data-stage="4"]) .bk-ticket { display: none; } }

/* the estimate panel */
.rq-est-empty { margin-top: 18px; color: var(--decal-3); }
.rq-est-lines { display: grid; margin-top: 18px; border-top: 1px solid #2A2E33; }
.rq-est-lines li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px solid #2A2E33; font-size: 15px; color: var(--decal-2); }
.rq-est-lines b { flex: none; font: 600 16px/1.3 var(--f-body); color: var(--decal); font-variant-numeric: tabular-nums; text-align: right; } /* not the mono font: its slashed zeros read as struck-through prices */
.rq-est-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 16px; }
.rq-est-total span { font: 600 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--decal-3); }
.rq-est-total b { font: 800 clamp(40px, 4vw, 52px)/1 var(--f-disp); color: var(--decal); font-variant-numeric: tabular-nums; }
.rq-est-note { margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--decal-3); }
.rq-msg { margin-top: 18px; border-top: 1px solid #2A2E33; }
.rq-msg summary { display: flex; align-items: center; gap: 10px; padding: 14px 0 2px; cursor: pointer; list-style: none; font: 600 12px/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--decal-2); }
.rq-msg summary::-webkit-details-marker { display: none; }
.rq-msg summary::before { content: "+"; content: "+" / ""; display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid #3A3F44; border-radius: 50%; font: 500 14px/1 var(--f-body); }
.rq-msg[open] summary::before { content: "−"; content: "−" / ""; }
.rq-msg .bk-msg { min-height: 0; margin-top: 12px; }

/* v2.5 review fixes (11/6) */
.nw { white-space: nowrap; }
.rq fieldset[aria-invalid="true"] { box-shadow: none; }
.rq-est-inline b[data-soft] { font: 600 13px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--decal-2); }
/* tiles follow the card's own width: phones, and the 430-590px desktop card, get rows; tablets get columns */
.rq-card { container-type: inline-size; }
.rq-tiles--period .rq-tile:last-child { grid-column: 1 / -1; }
.rq-tile--period .rq-tile-in { padding-right: 14px; }
.rq-tile--period .rq-tile-in > b { padding-right: 26px; }
@container (min-width: 640px) { .rq-tiles--who { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 480px) { .rq-tiles--more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 639px) { .rq-tiles--who .rq-tile-in::after { top: 50%; right: 16px; margin-top: -9px; } }
@container (max-width: 479px) { .rq-tiles--more .rq-tile-in::after { top: 50%; right: 16px; margin-top: -9px; } }
@container (min-width: 600px) { .rq-tile--size .rq-tile-in { grid-template-rows: auto 1fr auto; } }
@container (max-width: 599px) {
  .rq-tiles--size { grid-template-columns: minmax(0, 1fr); }
  .rq-tiles--size .rq-tile--size .rq-tile-in { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "s p" "k p"; align-items: center; gap: 6px 12px; padding: 14px 48px 14px 16px; }
  .rq-tiles--size .rq-tile--size b { grid-area: s; }
  .rq-tiles--size .rq-tile--size .rq-tile-k { grid-area: k; }
  .rq-tiles--size .rq-tile--size .rq-tile-p { grid-area: p; font-size: 21px; }
  .rq-tiles--size .rq-tile--size .rq-tile-in::after { top: 50%; right: 16px; margin-top: -9px; }
}
/* short desktop windows: the estimate panel scrolls inside itself rather than pushing Send below the fold */
@media (min-width: 1000px) and (max-height: 960px) { .pg-book .bk-ticket { max-height: calc(100vh - var(--hdr) - 48px); overflow-y: auto; overscroll-behavior: contain; } }
@media (min-width: 700px) { .mt-rates tbody th { white-space: nowrap; } }
.mt-rates td::before { font-weight: 400; color: var(--ink-3); }

/* v2.6: delivery by distance on the MT120 page (Lee 11/7) */
.mt-dist { margin-top: 16px; padding: 18px 20px; background: #fff; border: 1px solid var(--card-line); border-radius: 8px; max-width: 560px; }
.mt-dist-k { font: 700 13px/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.mt-dist-list { display: grid; margin-top: 10px; }
.mt-dist-list li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--card-line); font: 400 17px/1.35 var(--f-body); color: var(--ink); font-variant-numeric: tabular-nums; }
.mt-dist-list li:first-child { border-top: 0; }
.mt-dist-list b { font-weight: 700; text-align: right; }