/* 7 Cities Towing and Recycling. Trucks first, paperwork second. Logo purple as big flat fields, slab ink,
   card stock and paper. Antonio for fleet lettering, Commissioner for text. Square corners everywhere. */
@view-transition { navigation: auto; }
:root {
  --purple: #5B2E9E; --purple-d: #47227E; --lilac: #CDB8F0; --on-purple: #EFE8FA;
  --ink: #141218; --ink-2: #221E29; --paper: #F7F6F3; --card: #EEEDEA; --rule: #CFCAD8; --quiet: #5C5866;
  --disp: 'Antonio', 'Arial Narrow', sans-serif; --text: 'Commissioner', system-ui, sans-serif;
  --gut: 20px; --max: 1280px; --edge: max(var(--gut), (100vw - var(--max)) / 2);
  --m-dur: .7s; --m-ease: cubic-bezier(.25, .8, .2, 1); --m-rise: 18px;
  --sec: 72px;
}
@media (max-width: 719px) { :root { --m-dur: .6s; --m-rise: 14px; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.6 var(--text); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; }
p { margin: 0; }
.wrap { width: min(var(--max), 100% - 2 * var(--gut)); margin-inline: auto; }
.label { font: 600 .78rem/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; }
.h2 { font: 700 clamp(2.75rem, 11vw, 4.5rem)/.95 var(--disp); text-transform: uppercase; letter-spacing: .005em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 50; background: var(--ink); color: #fff; padding: 12px 16px; font-weight: 700; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: #fff; }

/* buttons: square, fill sweep from the kit */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 28px; text-decoration: none; font: 700 1.06rem/1 var(--text); letter-spacing: .01em; border: 0; border-radius: 0; cursor: pointer; transition: background-color .25s, color .25s, transform .15s; }
.btn:active { transform: translateY(1px); }
.btn.light { background: #fff; color: var(--purple); --m-fill: rgba(91, 46, 158, .12); }
.btn.light:hover { background: #F1EBFA; }
.btn.light:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

/* demo bar */
.preview { background: var(--ink); color: #C9C3D3; font: 500 .75rem/16px var(--text); letter-spacing: .06em; text-align: center; padding: 8px var(--gut); }
.preview b { color: #fff; font-weight: 700; }

/* header */
.top { position: sticky; top: 0; z-index: 20; background: var(--paper); transition: transform .45s var(--m-ease), box-shadow .3s; }
.top.is-scrolled { box-shadow: 0 1px 0 var(--rule); }
.top.is-hidden { transform: translateY(-100%); }
.top .wrap { display: flex; align-items: center; gap: 24px; height: 64px; }
.top .logo { display: block; padding: 6px 0; }
.top .logo img { width: 104px; }
.top nav { display: none; }
.top .ph { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; font: 700 1.3rem/1 var(--disp); letter-spacing: .03em; text-decoration: none; background: linear-gradient(var(--purple), var(--purple)) 0 calc(100% - 6px) / 0 2px no-repeat; transition: background-size .35s var(--m-ease); }
.top .ph:hover, .top .ph:focus-visible { background-size: 100% 2px; }
.top .ph small { display: none; }

/* hero: full-bleed slideshow; a solid purple panel overlaps its lower edge (phones) or sits in its lower-left corner */
/* phones: the photo takes whatever the first screen leaves above the panel (header and preview bar are 112px),
   so the Call button always lands inside it and nothing moves once it's drawn */
/* the ground under the photo is the asphalt's own dark grey, so the first frame never shows a flat ink slab */
.hero { position: relative; background: #3A1F66; display: flex; flex-direction: column; min-height: calc(100svh - 112px); }
.show { position: relative; flex: 1 1 auto; min-height: 300px; overflow: hidden; background: #3A1F66; }
.show-in, .show [data-slideshow] { position: absolute; inset: 0; }
.show [data-slideshow] img { width: 100%; height: 100%; object-fit: cover; }
.show .s1 img { object-position: 50% 62%; }
.show .s2 img { object-position: 50% 32%; }
.show .m-pause { top: 12px; right: 12px; bottom: auto; border-radius: 0; background: var(--ink); border: 1px solid rgba(255, 255, 255, .45); }
.show .m-pause:hover { background: var(--purple); }
/* the purple is drawn by ::before so the panel can wipe up without clipping (and delaying) the type inside it */
.panel { position: relative; z-index: 2; color: #fff; padding: 28px var(--gut) 40px; }
.panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--purple); }
.panel h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.panel h1 .w > span { display: inline-block; }
.panel .hrs { display: block; color: #fff; margin-bottom: 10px; }
.panel h1 { font: 700 clamp(2.9rem, 14.6vw, 3.6rem)/.92 var(--disp); text-transform: uppercase; letter-spacing: .005em; margin: 0 0 12px; }
.panel .line { color: var(--on-purple); max-width: 30em; margin-bottom: 24px; }
.panel .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.panel .more { display: inline-flex; color: #fff; font-weight: 600; text-decoration: none; min-height: 44px; align-items: center; gap: 8px; }

/* reviews: ink on paper, so purple stays a field for the hero and the Seven Cities only */
.reviews { background: var(--paper); color: var(--ink); padding: var(--sec) 0 calc(var(--sec) - 8px); }
/* phones: heading and rating share one baseline over one rule; the lead quote set large, the second smaller;
   opening quote marks hang outside the text edge; the section ends on the Google link */
.reviews .h2 { margin: 0; }
.rv-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.rating { font: 600 .9375rem/1.4 var(--text); }
/* the link lives with the heading (one sticky unit on desktop); phones move it under the last quote */
@media (max-width: 859px) {
  .reviews .wrap { display: flex; flex-direction: column; }
  .rv-head { display: contents; }
  .quotes { order: 1; }
  .rv-more { order: 2; margin-top: 12px; }
}
.rv-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--purple); font-weight: 600; text-decoration: none; }
.quotes { list-style: none; margin: 0; padding: 0; }
.quotes li { padding: 28px 0; border-bottom: 1px solid var(--rule); }
.quotes blockquote, .own { margin: 0; }
.quotes blockquote p, .own p { text-indent: -.42em; }
/* phones keep 20px clear of the screen edge: the mark hangs at the gutter, the text runs .42em in from it */
@media (max-width: 859px) { .quotes blockquote p, .own p { padding-left: .42em; } }
.quotes blockquote p { font: 400 1.1875rem/1.45 var(--text); max-width: 34em; }
.quotes .q1 blockquote p { font: 500 1.5rem/1.35 var(--text); max-width: 30ch; }
.quotes .who { display: flex; align-items: center; gap: 12px; margin-top: 20px; color: var(--quiet); }
.quotes .who::before { content: ""; width: 40px; height: 3px; background: var(--purple); }

/* services: the tow ticket on card stock */
.services { background: var(--card); padding: var(--sec) 0; }
.ticket { position: relative; background: #fff; border: 1px solid var(--rule); }
.ticket::before, .ticket::after { content: ""; position: absolute; top: var(--tear, 150px); width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: var(--card); border: 1px solid var(--rule); }
.ticket::before { left: -13px; clip-path: inset(0 0 0 50%); }
.ticket::after { right: -13px; clip-path: inset(0 50% 0 0); }
/* phones: 32px over the heading, 24px from the USDOT line to the tear (the notches follow --tear) */
.ticket { --tear: 132px; }
.t-head { display: grid; gap: 16px; padding: 32px 20px 24px; border-bottom: 2px dashed var(--rule); min-height: var(--tear, 150px); align-content: end; }
.t-head .meta { display: grid; gap: 6px; color: var(--quiet); font-size: .75rem; letter-spacing: .14em; }
.t-body { padding: 0 20px 8px; }
.rows { list-style: none; margin: 0; padding: 0; }
/* phones: numeral and title share a line, the description runs the full row width from the gutter */
.rows > li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 14px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.rows > li > div { display: contents; }
.rows > li:last-of-type { border-bottom: 0; }
.rows .n { font: 600 .85rem/1 var(--text); letter-spacing: .08em; color: var(--quiet); font-variant-numeric: tabular-nums; }
.rows h3 { font: 700 clamp(2.1rem, 10.3vw, 2.5rem)/.95 var(--disp); text-transform: uppercase; letter-spacing: .01em; }
.rows p { grid-column: 1 / -1; margin-top: 10px; color: var(--quiet); font-size: 1.0625rem; line-height: 1.45; max-width: 34em; }
/* a row's own photo sits under its text, across the full ticket width */
.row-pic { grid-column: 1 / -1; display: block; margin-top: 16px; background: var(--card); }
.row-pic img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
[data-pic="vans"] .row-pic img { object-position: 40% 60%; }
.t-fig { display: none; }
.t-foot { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; padding: 20px; background: var(--ink); color: #fff; }
.t-foot .label { color: #C9C3D3; }
.t-foot a { display: inline-flex; align-items: center; min-height: 44px; font: 700 1.9rem/1 var(--disp); letter-spacing: .03em; text-decoration: none; }

/* service area: the seven cities, a route board on purple, then the blue Sterling full-bleed */
.area { background: var(--purple); color: #fff; padding-top: var(--sec); }
.area .label { color: var(--lilac); }
.area .h2 { margin: 12px 0 20px; }
.area .intro { color: var(--on-purple); max-width: 30em; }
.cities { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .3); counter-reset: c; }
.cities li { position: relative; display: grid; grid-template-columns: 44px 1fr auto; align-items: baseline; gap: 12px; padding: 12px 0 14px; }
.cities li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255, 255, 255, .3); transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html.m-on .cities li[data-reveal] { opacity: 1; transform: none; }
  html.m-on .cities li::after { transform: scaleX(0); transition: transform .4s var(--m-ease-io) var(--d, 0ms); }
  html.m-on .cities li > * { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .5s var(--m-ease) calc(var(--d, 0ms) + 160ms), transform .5s var(--m-ease) calc(var(--d, 0ms) + 160ms); }
  html.m-on .cities li > .tag { transform: none; transition-delay: 820ms; }
  html.m-on .cities li.is-in::after { transform: none; }
  html.m-on .cities li.is-in > * { opacity: 1; transform: none; }
}
.cities .n { font: 600 .85rem/1 var(--text); letter-spacing: .08em; color: var(--lilac); font-variant-numeric: tabular-nums; }
.cities .c { font: 700 clamp(2.1rem, 10vw, 4.75rem)/1 var(--disp); text-transform: uppercase; letter-spacing: .01em; }
.cities .tag { color: var(--lilac); }
.cities .home .c { color: #fff; }
/* phones: the truck closes the band, edge to edge on both sides; the purple ends at its top edge */
.area { padding-bottom: 0; }
.area-photo { position: relative; margin: 48px calc(-1 * var(--gut)) 0; }
.area-photo .m-frame { position: relative; aspect-ratio: 13 / 11; overflow: hidden; background: var(--ink); }
.area-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }

/* about: edge-to-edge split, the credited door photo and the company's plate */
.about { background: var(--paper); display: grid; grid-template-columns: minmax(0, 1fr) 236px; }
/* the door close-up full-bleed, the hook-up shot smaller and overlapping its lower-right corner (Mammoet's
   layered square crops), the one credit beside it */
/* phones: the figure's parts sit straight on the section grid. Under the door photo: the owner's name at the left,
   the hook-up shot (216 wide) pulled 120px up over the photo's corner at the right, the credit one line under it */
.about-photo { margin: 0; display: contents; }
.about-plate { grid-column: 1 / -1; grid-row: 5; padding: 48px var(--gut); }
.about-plate > .plate { margin: 0; }
.about-img { grid-column: 1 / -1; grid-row: 2; aspect-ratio: 4 / 3; overflow: hidden; background: var(--card); }
.about-img img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.about-hook { grid-column: 2; grid-row: 3; position: relative; z-index: 1; margin: -120px 0 0 0; border: 0 solid var(--paper); border-width: 6px 0 0 6px; background: var(--paper); }
.about-hook img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 40%; }
.credit { grid-column: 2; grid-row: 4; padding: 10px var(--gut) 0 0; color: var(--quiet); font: 500 .75rem/17px var(--text); letter-spacing: .02em; white-space: nowrap; }
.about-owner { grid-column: 1; grid-row: 3; padding: 20px 12px 0 var(--gut); }
.about-owner .label { display: block; margin-bottom: 8px; color: var(--quiet); }
.about-owner .nm { display: block; font: 700 clamp(2.25rem, 10vw, 2.75rem)/.95 var(--disp); text-transform: uppercase; letter-spacing: .01em; }
.about-text { grid-column: 1 / -1; grid-row: 1; padding: var(--sec) var(--gut) 40px; }
.about .h2 { margin: 0 0 24px; }
.h2.ruled::before { content: ""; display: block; width: 40px; height: 4px; margin-bottom: 20px; background: var(--purple); }
.own { font: 500 clamp(1.35rem, 5.4vw, 1.75rem)/1.4 var(--text); max-width: 26em; }
.own-src { margin-top: 12px; color: var(--quiet); font-size: .9rem; }
.plate { border: 1px solid var(--ink); background: #fff; max-width: 560px; }
.plate-h { background: var(--ink); color: #fff; padding: 14px 16px 12px; border-bottom: 4px solid var(--purple); font: 700 1.15rem/1.15 var(--disp); text-transform: uppercase; letter-spacing: .06em; }
.plate dl { margin: 0; padding: 4px 16px; }
.plate dl div { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.plate dl div:last-child { border-bottom: 0; }
.plate dt { color: var(--quiet); font-size: .78rem; }
.plate dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.plate dd a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; text-decoration-color: var(--purple); text-underline-offset: 3px; }

/* hours: a timetable on ink */
.hours { background: var(--ink); color: #fff; padding: var(--sec) 0; }
.hours .label { color: #C9C3D3; }
.hours-g { display: grid; gap: 32px; }
.tt { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; border-top: 1px solid rgba(255, 255, 255, .2); }
.tt th, .tt td { padding: 16px 0 14px; border-bottom: 1px solid rgba(255, 255, 255, .2); font: 700 2.75rem/1 var(--disp); letter-spacing: .01em; text-transform: uppercase; }
.tt th { text-align: left; position: relative; transition: padding .4s var(--m-ease); }
.tt td { text-align: right; }
.tt abbr { text-decoration: none; border: 0; cursor: default; }
.tt .closed th, .tt .closed td { color: #9F98AA; }
.tt .is-today th, .tt .is-today td { color: var(--lilac); }
.tt .is-today th { padding-left: 20px; }
.tt .is-today th::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; background: var(--lilac); }
.hours-g .label { margin-bottom: 8px; }
.yard address { font-style: normal; font-size: 1.1rem; }
.dir { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; color: var(--lilac); font-weight: 600; text-decoration: none; }
.big-ph { display: inline-block; min-height: 44px; font: 700 clamp(2.6rem, 12vw, 4.5rem)/1 var(--disp); letter-spacing: .02em; text-decoration: none; }

/* footer: a spec plate on paper */
.foot { background: var(--paper); padding: var(--sec) 0 24px; }
.foot-plate { border: 1px solid var(--ink); background: #fff; }
.foot-logo { padding: 24px 20px; border-bottom: 1px solid var(--rule); }
.foot-logo img { width: 200px; }
.foot dl { margin: 0; padding: 0 20px; }
.foot abbr { text-decoration: none; }
.foot dl div { display: grid; grid-template-columns: 88px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.foot dl div:last-child { border-bottom: 0; }
.foot dt { color: var(--quiet); }
.foot dd { margin: 0; overflow-wrap: anywhere; }
.foot dd a { display: inline-flex; min-height: 32px; align-items: center; text-decoration: none; }
.foot .tel { font: 700 1.5rem/1 var(--disp); letter-spacing: .03em; }
.foot-base { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; padding: 16px 20px; background: var(--ink); color: #C9C3D3; font-size: .9rem; }
.foot-base .legal { display: flex; gap: 20px; }
.foot-base a { color: #fff; text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
/* phones: three even rows, each 44px tall so the visible gaps match */
@media (max-width: 859px) {
  .foot-base { display: grid; gap: 0; justify-content: start; padding-block: 16px; font-size: .875rem; }
  .foot-base > span:first-child { display: flex; align-items: center; min-height: 44px; white-space: nowrap; }
  .foot-base .legal { gap: 24px; }
}

/* phone action bar; the body keeps its height clear below the footer */
@media (max-width: 859px) { body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); } }
/* tucked away from the first paint (the kit only hides it once its script runs), shown when the hero's Call leaves */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) { [data-actionbar]:not(.is-shown) { translate: 0 calc(100% + 24px); } }
.actionbar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1.3fr 1fr 1fr; background: var(--ink); padding-bottom: env(safe-area-inset-bottom); }
.actionbar a { min-height: 56px; display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; font-weight: 600; border-left: 1px solid rgba(255, 255, 255, .16); --m-fill: rgba(255, 255, 255, .14); }
.actionbar a:first-child { background: var(--purple); border: 0; }

/* 404 */
.lost { background: var(--purple); color: #fff; padding: 96px 0 112px; }
.lost h1 { font: 700 clamp(3rem, 14vw, 7rem)/.92 var(--disp); text-transform: uppercase; margin: 12px 0 20px; }
.lost .label { color: var(--lilac); }
.lost p.line { color: var(--on-purple); max-width: 32em; margin-bottom: 28px; }
.lost .actions { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
.lost .actions a.m-link { color: #fff; font-weight: 600; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }

/* entrance, pure CSS from the first paint (no script, no observer): the photo shows alone and settles from 1.05
   over 700ms; the purple panel wipes up from its lower edge (its ::before, 0-340ms) while the type rides it:
   label 120ms, the name word by word from 180ms (30ms apart), line 340ms, buttons 420ms */
@media (prefers-reduced-motion: no-preference) {
  .show-in { animation: hero-settle .7s var(--m-ease) both; }
  .panel::before { animation: hero-wipe .34s var(--m-ease) both; }
  .panel .hrs, .panel .line, .panel .actions { animation: hero-rise .5s var(--m-ease) both; }
  .panel .hrs { animation-delay: 120ms; }
  .panel .line { animation-delay: 340ms; }
  .panel .actions { animation-delay: 420ms; }
  .panel h1 .w > span { animation: hero-word .5s var(--m-ease) both; animation-delay: 180ms; }
  .panel h1 .w:nth-child(2) > span { animation-delay: 210ms; }
  .panel h1 .w:nth-child(3) > span { animation-delay: 240ms; }
  .panel h1 .w:nth-child(4) > span { animation-delay: 270ms; }
  .panel h1 .w:nth-child(5) > span { animation-delay: 300ms; }
}
/* phones: the name starts while the purple is still wiping, so the panel is never an empty slab */
@media (prefers-reduced-motion: no-preference) and (max-width: 859px) {
  .panel::before { animation: hero-wipe-ph .3s var(--m-ease) both; }
  .panel .hrs { animation-delay: 60ms; }
  .panel h1 .w > span { animation-delay: 120ms; }
  .panel h1 .w:nth-child(2) > span { animation-delay: 140ms; }
  .panel h1 .w:nth-child(3) > span { animation-delay: 160ms; }
  .panel h1 .w:nth-child(4) > span { animation-delay: 180ms; }
  .panel h1 .w:nth-child(5) > span { animation-delay: 200ms; }
  .panel .line { animation-delay: 300ms; }
  .panel .actions { animation-delay: 360ms; }
}
@keyframes hero-settle { from { scale: 1.05; } to { scale: 1; } }
@keyframes hero-wipe { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
/* phones: the purple's leading edge is already a third of the way up in the very first frame */
@keyframes hero-wipe-ph { from { clip-path: inset(66% 0 0 0); } to { clip-path: inset(0); } }
@keyframes hero-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes hero-word { from { transform: translate3d(0, 110%, 0); } to { transform: none; } }

/* tablets */
@media (min-width: 600px) {
  :root { --gut: 32px; --sec: 96px; }
  .t-head { padding: 32px 32px 32px; }
  .t-body { padding: 0 32px 8px; }
  .t-foot { padding: 20px 32px; }
  .foot-logo, .foot dl { padding-inline: 32px; }
  .foot-base { padding-inline: 32px; }
}

/* desktop */
@media (min-width: 860px) {
  :root { --gut: 40px; --sec: 120px; }
  body { font-size: 1.0625rem; }
  .top .wrap { height: 80px; }
  .top .logo img { width: 136px; }
  .top nav { display: flex; gap: 32px; margin-left: auto; }
  .top nav a { text-decoration: none; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
  .top .ph { margin-left: 16px; font-size: 1.6rem; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; }
  .top .ph small { display: block; font: 600 .66rem/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--quiet); }
  .hero { display: block; min-height: 0; background: var(--ink); }
  .show { height: clamp(600px, calc(100svh - 114px), 940px); min-height: 0; }
  .show .s1 img { object-position: 50% 50%; }
  .show .s2 img { object-position: 50% 40%; }
  .show .m-pause { top: auto; bottom: 20px; right: 20px; }
  /* 52px lower than before, so the top edge lands under the grille on the bumper line, not across its stripes */
  .panel { position: absolute; left: 0; bottom: 0; margin: 0; width: min(650px, 46vw); padding: 28px 48px 32px var(--edge); }
  .panel .hrs { margin-bottom: 24px; }
  .panel h1 { font-size: clamp(4.5rem, 5.6vw, 6.25rem); margin-bottom: 20px; }
  .panel .line { font-size: 1.125rem; margin-bottom: 18px; }

  .g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .rating { font-size: 1.375rem; }
  .reviews { padding-bottom: var(--sec); }
  /* left: heading, rating and link as one sticky unit; right: the lead quote large, the second narrow and offset */
  .reviews .rv-head { grid-column: 1 / 5; grid-row: 1; align-self: stretch; display: flex; flex-direction: column; }
  .reviews .rv-top { display: block; padding: 0; border: 0; }
  .reviews .h2 { margin-bottom: 16px; }
  .reviews .rv-more { margin-top: auto; align-self: flex-start; }
  .reviews .quotes { grid-column: 5 / 13; grid-row: 1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 24px; }
  .quotes li { padding: 0; border: 0; }
  /* Mayo in cols 5-9, Yohn in 10-12 starting level with Mayo's fifth line, so the two run side by side */
  .quotes .q1 { grid-column: 1 / 6; }
  .quotes .q2 { grid-column: 6 / -1; padding-top: calc(4 * 2.125rem * 1.25); padding-left: 0; }
  .quotes .q1 blockquote p { font: 500 2.125rem/1.25 var(--text); max-width: 25ch; }
  .quotes .q2 blockquote p { font-size: 1.25rem; line-height: 1.45; max-width: 26ch; }

  .ticket { --tear: 188px; max-width: 1160px; margin-inline: auto; }
  .t-head { grid-template-columns: 1fr auto; align-items: end; padding: 40px 56px 36px; }
  .t-head .h2 { font-size: clamp(4rem, 6vw, 5.5rem); }
  .t-head .meta { text-align: right; font-size: .76rem; }
  .t-body { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; padding: 0 0 0 56px; align-items: start; }
  .rows { padding: 16px 0 40px; }
  .rows > li { grid-template-columns: 56px 1fr; gap: 0 12px; padding: 28px 0 28px; }
  .rows > li > div { display: block; }
  .rows .n { transition: color .3s; }
  .rows h3 { font-size: clamp(2.6rem, 3.4vw, 3rem); line-height: 1; transform-origin: 0 100%; transition: color .3s, scale .45s var(--m-ease); }
  .rows p { margin-top: 8px; font-size: 1.25rem; line-height: 1.5; max-width: 40ch; }
  /* the row under the pointer reads at the larger scale, in purple (scaled, so the list never reflows) */
  .rows > li.is-active h3 { color: var(--purple); scale: 1.2; }
  .rows > li.is-active .n { color: var(--purple); }
  .t-fig.is-live { display: block; position: sticky; top: 82px; height: 560px; overflow: hidden; background: var(--card); }
  .t-fig .row-pic { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .3s ease; }
  .t-fig .row-pic.is-active { opacity: 1; }
  /* the 3:2 wides, cropped in tight so the truck and its load fill the frame */
  .t-fig .row-pic { overflow: hidden; }
  .t-fig .row-pic img { height: 100%; aspect-ratio: auto; object-position: 78% 42%; scale: 1; }
  .t-fig .pic-junk img { object-position: 50% 58%; scale: 1.15; }
  .t-foot { padding: 24px 56px; }
  .t-foot a { font-size: 2.4rem; }

  /* desktop: the truck sits in the left column under the intro, beside the seven cities, all on purple */
  .area { padding-bottom: var(--sec); background: var(--purple); }
  .area-g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; grid-template-rows: auto 1fr; }
  .area .head { grid-column: 1 / 7; grid-row: 1; }
  .area .cities { grid-column: 7 / 13; grid-row: 1 / 3; margin-top: 0; }
  .cities li { grid-template-columns: 64px 1fr auto; padding: 16px 0 18px; }
  /* the truck runs off the left edge of the page, beside the index */
  /* it fills the rest of the left column, so its foot lands on Newport News's bottom rule */
  .area-photo { grid-column: 1 / 7; grid-row: 2; align-self: stretch; display: flex; margin: 80px 0 0 calc(-1 * var(--edge)); }
  .area-photo .m-frame { flex: 1; aspect-ratio: auto; min-height: 480px; }
  .area-photo img { position: absolute; inset: 0; object-position: 50% 40%; }

  /* the door close-up runs the full section height in the left half; the hook-up shot straddles its right edge,
     72px of it on paper in the column gap. The right column runs text → owner → plate → credit, 48px apart */
  .about { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto auto 1fr; }
  .about-img { grid-column: 1; grid-row: 1 / -1; position: relative; aspect-ratio: auto; min-height: 760px; }
  .about-img img { position: absolute; inset: 0; object-position: 30% 45%; }
  .about-hook { grid-column: 1; grid-row: 1 / -1; align-self: end; justify-self: end; width: 300px; margin: 0 -72px 96px 0; border: 0; background: none; }
  .about-hook::before { content: ""; position: absolute; z-index: -1; inset: -6px 72px -6px -6px; background: var(--paper); }
  .about-text, .about-owner, .about-plate, .credit { grid-column: 2; padding-left: 120px; padding-right: var(--edge); }
  .about-text { grid-row: 1; padding-top: var(--sec); }
  .about-owner { grid-row: 2; padding-top: 48px; }
  .about-owner .nm { font-size: 3rem; }
  .about-plate { grid-row: 3; padding-top: 48px; padding-bottom: 0; }
  .credit { grid-row: 4; padding-top: 16px; padding-bottom: var(--sec); white-space: normal; }
  .about-text > *, .about-plate > *, .about-owner > * { max-width: 560px; }

  .hours-g { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; }
  /* heading across the top; below it both columns start on one rule: the number (and the yard under it) on the
     left, the timetable on the right */
  .hours-g { row-gap: 0; }
  .hours-g > .h2 { grid-column: 1 / -1; grid-row: 1; margin-bottom: 40px; }
  .hours-g::before { content: ""; grid-column: 1 / -1; grid-row: 2; align-self: start; border-top: 1px solid #3A3640; }
  .hours-g .call { grid-column: 1 / 7; grid-row: 2 / 4; align-self: start; padding-top: 22px; }
  /* the number on two lines, so its block runs as tall as the timetable and the yard beside it */
  .hours-g .big-ph { display: flex; flex-direction: column; align-items: flex-start; font-size: min(9rem, 10vw); line-height: .95; }
  .hours-g .tt { grid-column: 7 / 13; grid-row: 2; align-self: start; border-top: 0; }
  .hours-g .yard { grid-column: 7 / 13; grid-row: 3; align-self: start; padding-top: 24px; }
  .tt th, .tt td { border-bottom-color: #3A3640; }
  .tt th, .tt td { padding: 22px 0 18px; font-size: 4rem; }
  .tt .is-today th::before { top: 20px; bottom: 18px; }

  .foot { padding: var(--sec) 0 24px; }
  .foot-plate { display: grid; grid-template-columns: 4fr 8fr; }
  .foot-logo { display: flex; align-items: center; justify-content: center; padding: 32px; border-bottom: 0; border-right: 1px solid var(--rule); }
  .foot-logo img { width: 280px; }
  .foot dl { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; padding: 8px 40px; }
  .foot dl div:nth-child(-n+2) { grid-column: 1 / -1; }
  .foot dl div:nth-child(3) { border-bottom: 0; }
  .foot-base { grid-column: 1 / -1; padding: 12px 40px; }
  .actionbar { display: none; }
  .lost { padding: 160px 0; }
}