/* Royce's Wrecker Service. Two voices from the truck: the wine door script (the name only) and the white
   rail lettering on black (everything else). Cab white, rail black, door wine, aluminium. Square corners. */
:root {
  --cab: #F4F1EC; --cab-2: #EAE5DD; --ink: #141414; --ink-2: #4A4643; --wine: #76232F; --wine-d: #5C1A24;
  --wine-l: #A9505E; --steel: #B8BBBE; --steel-d: #5E6266; --rule: rgba(20, 20, 20, .16); --rule-dk: rgba(244, 241, 236, .2);
  --script: "Pinyon Script", cursive; --cond: "Encode Sans Condensed", "Arial Narrow", sans-serif;
  --text: "Encode Sans", system-ui, sans-serif;
  --gut: 20px; --edge: max(var(--gut), calc((100vw - 1280px) / 2 + var(--gut)));
  --sec: 88px;
  --m-dur: 900ms; --m-ease: cubic-bezier(.2, .7, .1, 1); --m-rise: 18px;
}
@media (min-width: 900px) { :root { --gut: 48px; --sec: 144px; } }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { background: var(--cab); color: var(--ink); font: 400 1.0625rem/1.6 var(--text); overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
p, h2, h3 { text-wrap: pretty; }
img { height: auto; }
a { color: inherit; }
ol, ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gut); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--ink); color: var(--cab); padding: 12px 16px; font: 700 .9rem/1 var(--cond); text-decoration: none; }
.skip:focus { top: 12px; }

/* The small label voice: condensed caps, tracked, as on the bed rail. */
.label { font: 700 .8125rem/1.2 var(--cond); letter-spacing: .14em; text-transform: uppercase; }
.sec-label { display: flex; align-items: center; gap: 12px; color: var(--ink-2); margin-bottom: 20px; }
.sec-label::before { content: ""; width: 32px; height: 2px; background: var(--wine); }
.sec-label b { color: var(--wine); font-weight: 700; }
h2.big { font: 700 clamp(2.5rem, 9vw, 3.5rem)/1 var(--cond); letter-spacing: .01em; text-transform: uppercase; }

/* Credits: the same small line every time, white inside the photo's bottom-right corner, no box. */
.credit { display: block; margin-top: 6px; padding: 0 var(--gut); font: 500 .75rem/1.3 var(--cond); letter-spacing: .04em; color: var(--steel-d); }
.credit.on { position: absolute; z-index: 2; right: 16px; bottom: 8px; margin: 0; padding: 0; color: #fff; text-align: right; text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 0 8px rgba(0, 0, 0, .45); pointer-events: none; }
@media (min-width: 900px) { .credit.on { right: 16px; bottom: 12px; } }
.yard, .about-photo, .work-frame { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .hero-credit { animation: credit-in 300ms ease 900ms backwards; }
}
@keyframes credit-in { from { opacity: 0; } }

/* Demo note */
.preview { background: var(--ink); color: var(--steel); font: 500 .75rem/16px var(--cond); letter-spacing: .06em; text-align: center; padding: 8px var(--gut); }
.preview b { color: var(--cab); font-weight: 700; }

/* Header */
.top { position: sticky; top: 0; z-index: 30; background: var(--cab); border-bottom: 1px solid var(--rule); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; }
.wm { display: flex; align-items: baseline; gap: .45rem; text-decoration: none; min-height: 44px; padding-top: 6px; }
.wm .s { font: 400 2.1rem/1 var(--script); color: var(--wine); }
.wm .c { font: 700 .75rem/1.1 var(--cond); max-width: 9ch; letter-spacing: .16em; text-transform: uppercase; }
.nav { display: none; gap: 32px; }
.nav a { font: 700 .8125rem/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: 14px 0; }
.top-tel { white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; min-height: 44px; text-decoration: none; font: 700 1.05rem/1 var(--cond); letter-spacing: .03em; }
.top-tel small { font: 700 .75rem/1 var(--cond); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
@media (min-width: 900px) {
  .nav { display: flex; margin-left: auto; }
  .top-tel { padding-left: 32px; border-left: 1px solid var(--rule); }
  .wm { padding-top: 10px; }
  .wm .s { font-size: 2.875rem; }
}

/* Hero: the Dart alone, full bleed; the name in the door script over rail caps. The photo opens first (from the
   bottom on phones, from the right on desktop), then the name rises and the swash draws. */
.hero-photo { position: relative; height: clamp(280px, 46svh, 480px); overflow: hidden; background: var(--ink); }
.hero-photo picture { display: block; height: 100%; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 85%; }
@media (prefers-reduced-motion: no-preference) {
  .hero-photo { animation: open-up 850ms cubic-bezier(.2, .7, .2, 1) backwards; }
  /* The photo settles as it opens; the caps line follows the script; the rail lines come up last. */
  .hero-photo picture { animation: settle-in 1400ms cubic-bezier(.2, .7, .2, 1) backwards; }
  h1 .c { animation: rise-in 600ms cubic-bezier(.2, .7, .2, 1) 450ms backwards; }
  .rail .ln { animation: rise-in 500ms cubic-bezier(.2, .7, .2, 1) 1150ms backwards; }
  .rail .ln + .ln { animation-delay: 1230ms; }
}
@keyframes settle-in { from { transform: scale(1.06); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes open-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes open-left { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
.hero-name { padding: 20px var(--gut) 12px; }
h1 { display: flex; flex-direction: column; align-items: flex-start; font-weight: 400; }
h1 .s { font: 400 clamp(4.4rem, 21vw, 8.75rem)/.95 var(--script); color: var(--wine); margin-left: -.04em; padding-right: .1em; }
h1 .c { font: 700 clamp(1.45rem, 6.4vw, 2.5rem)/1 var(--cond); letter-spacing: .13em; text-transform: uppercase; margin-top: .62em; }
.swash { width: min(320px, 80vw); height: 22px; margin-top: 2px; overflow: visible; }
.swash path { fill: none; stroke: var(--wine); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .swash.is-in path { animation: draw 900ms cubic-bezier(.6, .05, .25, 1) 250ms both; }
}
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.lede { max-width: 34ch; margin-top: 6px; font-size: 1.0625rem; color: var(--ink-2); }
.hero-call { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 18px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 24px; background: var(--wine); color: #fff; text-decoration: none; font: 700 1.0625rem/1 var(--cond); letter-spacing: .05em; border: 0; border-radius: 0; --m-fill: var(--wine-d); }
.btn:hover { background: var(--wine-d); }
.btn:active { transform: translateY(1px); }
.quiet { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font: 700 .875rem/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
@media (min-width: 900px) {
  .hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: minmax(0, 1fr) auto; height: clamp(600px, calc(100svh - 64px - 32px - 64px), 860px); }
  .hero-name { grid-column: 1; grid-row: 1 / 3; align-self: end; padding: 48px 32px 64px var(--edge); }
  .hero-photo { grid-column: 2; grid-row: 1 / 3; height: auto; }
  .hero-photo img { object-position: 40% 60%; }
  .hero-call { flex-direction: row; align-items: center; gap: 28px; margin-top: 32px; }
  .lede { margin-top: 18px; font-size: 1.1875rem; }
  h1 .s { font-size: clamp(8.75rem, 11vw, 10.25rem); }
  h1 .c { font-size: clamp(2.25rem, 3vw, 2.75rem); letter-spacing: .11em; }
  .swash { width: min(400px, 90%); height: 26px; }
}
@media (min-width: 900px) {
  /* The script hangs into the margin so its last letter clears the photo. */
  h1 .s { margin-left: calc(-.04em - min(32px, var(--edge) - 24px)); }
}
/* Desktop entrance in three beats: photo, then the name, then the swash draws, then the line and buttons. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .hero-photo { animation-name: open-left; }
  .hero-name h1[data-reveal] { transition-delay: 450ms; }
  .hero-name .swash[data-reveal] { transition-delay: 700ms; }
  .hero-name .swash.is-in path { animation-delay: 750ms; }
  .hero-name .lede[data-reveal], .hero-name .hero-call[data-reveal] { transition-delay: 1100ms; }
}

/* The rail strip: the truck's bed rail, white condensed caps on black; two running lines on phones. */
.rail { background: var(--ink); color: var(--cab); }
.rail .wrap { padding-top: 10px; padding-bottom: 10px; font: 700 .8125rem/1.5 var(--cond); letter-spacing: .08em; text-transform: uppercase; }
.rail .ln { display: block; }
.rail .ln > * + *::before { content: "·"; color: var(--steel); margin: 0 .6em; letter-spacing: 0; }
.visit-foot > * { min-width: 0; }
.rail a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.rail .dim { color: var(--steel); }
@media (min-width: 900px) {
  .rail .wrap { display: flex; justify-content: center; align-items: center; height: 64px; padding-top: 0; padding-bottom: 0; font-size: .875rem; letter-spacing: .1em; }
  .rail .ln { display: flex; align-items: center; }
  .rail .ln > * + *::before, .rail .ln + .ln::before { content: "·"; color: var(--steel); margin: 0 18px; letter-spacing: 0; }
}

/* Services: set like the truck lettering. Number and tag small above, the name big in rail caps. */
.svc { padding: 56px 0 0; }
@media (min-width: 900px) { .svc { padding-top: var(--sec); } }
.svc-list { margin-top: 32px; border-top: 2px solid var(--ink); }
.svc-list li { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.svc-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.svc-list .tag { display: flex; align-items: baseline; gap: 12px; font: 700 .75rem/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--steel-d); }
.svc-list .n { color: var(--wine); letter-spacing: .1em; }
.svc-list h3 { margin-top: 8px; font: 700 clamp(1.875rem, 7.7vw, 3.5rem)/.98 var(--cond); text-transform: uppercase; letter-spacing: .005em; }
.svc-list .fact { margin-top: 6px; max-width: 52ch; font-size: 1rem; line-height: 1.45; color: var(--ink-2); }
@media (min-width: 900px) {
  .svc-list li { display: grid; grid-template-columns: 140px minmax(0, 1fr) 240px; gap: 0 24px; align-items: start; padding: 28px 0; }
  .svc-list .tag { grid-column: 1; padding-top: .45rem; font-size: .875rem; letter-spacing: .1em; }
    /* The two facts sit in a remarks column on the right, like a work order. */
  .svc-list h3 { grid-column: 2; }
  .svc-list .fact { grid-column: 3; grid-row: 1; justify-self: end; text-align: right; padding-top: .45rem; }
  .svc-list h3 { margin-top: 0; white-space: nowrap; font-size: clamp(3.25rem, 4.4vw, 4rem); line-height: .95; }
  .svc-list .fact { margin-top: 0; max-width: 24ch; font-size: 1.0625rem; color: var(--steel-d); }
}

/* The loading photo, full bleed, with a wine panel set into it. */
.work { position: relative; margin-top: 32px; }
.work-photo { position: relative; overflow: hidden; }
/* Phones get their own crop of the bed and its US DOT lettering (a <picture> source), shown whole. */
.work-photo img { width: 100%; aspect-ratio: 155 / 81; object-fit: cover; object-position: 50% 50%; }
.work-quote { position: relative; z-index: 2; margin-top: 0; background: var(--wine); color: #fff; padding: 28px var(--gut); }
.work-quote p { font: 700 clamp(1.5rem, 6vw, 2.25rem)/1.12 var(--cond); text-transform: uppercase; letter-spacing: .01em; }
.work-quote cite .d { display: block; margin-top: 4px; }
.work-quote cite { display: block; margin-top: 14px; font: 700 .75rem/1.3 var(--cond); letter-spacing: .14em; text-transform: uppercase; font-style: normal; color: rgba(255, 255, 255, .82); }
@media (min-width: 900px) {
  .work { margin-top: 48px; }
  .svc-list li:last-child { padding-bottom: 0; }
  .work-photo img { aspect-ratio: auto; height: 420px; object-position: 15% 100%; }
  /* The panel sits top right over the roofline, so the headboard, bed and US DOT carry the band on the left. */
  .work-quote { position: absolute; top: 0; right: var(--edge); width: 440px; margin: 0; padding: 36px 36px 32px; }
}

/* Reviews: the wine band; the score in the script is the heading. */
.rev { background: var(--wine); color: #fff; padding: var(--sec) 0; }
.score h2 { font-weight: 400; }
.score .num { display: block; font: 400 clamp(7rem, 34vw, 12rem)/.8 var(--script); padding: 0 .1em .1em 0; margin-left: -.04em; }
.score .of { display: block; margin-top: 12px; white-space: nowrap; }
.score a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin-top: 8px; text-decoration: none; color: #fff; }
.quotes { margin-top: 32px; }
.quotes blockquote { border-top: 1px solid rgba(255, 255, 255, .32); padding-top: 28px; }
.quotes blockquote + blockquote { margin-top: 32px; }
.quotes p { font: 400 1rem/1.45 var(--text); }
.quotes .cut { display: none; }
.quotes .lead p { font-size: 1.4375rem; line-height: 1.4; }
.quotes cite { display: block; margin-top: 8px; font: 700 .8125rem/1 var(--cond); letter-spacing: .16em; text-transform: uppercase; font-style: normal; color: rgba(255, 255, 255, .85); }
.quotes .lead cite { margin-top: 12px; }
.quotes .more { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin-top: 24px; text-decoration: none; color: #fff; }
@media (max-width: 899px) {
  .rev { padding-bottom: 48px; }
  .score .top-link { display: none; }
  /* Steve Phillips' review runs to its first two sentences on phones. */
  .quotes .rest { display: none; }
  .quotes .cut { display: inline; }
  .quotes .more { margin-top: 16px; }
}
/* Desktop: the 4.7 and the short lead quote share the top row; Carol and Steve run in two wide columns under both,
   so the band ends with the longest quote and no column is left empty. */
@media (min-width: 900px) {
  .quotes .more { display: none; }
  .quotes p { font-size: 1.0625rem; line-height: 1.6; }
  .rev-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; }
  .rev { padding: var(--sec) 0 80px; }
  .score { grid-column: 1 / 6; grid-row: 1; }
  .quotes { display: contents; }
  .quotes .lead { grid-column: 7 / 13; grid-row: 1; align-self: end; border-top: 0; padding: 0 0 14px; }
  .quotes .lead p { font-size: 1.75rem; line-height: 1.4; }
  /* 64px from the names on the score line to the column rules (the lead's 14px foot is part of it). */
  .quotes blockquote:not(.lead) { grid-row: 2; margin-top: 46px; padding-top: 32px; grid-column: 1 / 7; }
  .quotes blockquote:not(.lead) p { max-width: 62ch; text-wrap: wrap; }
  .quotes blockquote:not(.lead) + blockquote { grid-column: 7 / 13; }
  .quotes cite, .quotes .lead cite { margin-top: 14px; }
}

/* About: cab white, the reviewer's words as the heading, the white truck with the real door script beside it. */
.about { padding: var(--sec) 0; }
.about-head h2 { font: 700 clamp(2.4rem, 10.5vw, 4.5rem)/1 var(--cond); text-transform: uppercase; letter-spacing: .005em; }
.about-head h2 .q { color: var(--wine); }
.about-head .cite { margin-top: 16px; color: var(--ink-2); }
.about-photo { margin: 40px calc(-1 * var(--gut)) 0; }
/* Phones get a tighter crop of the cab and its door script (a <picture> source). */
.about-photo img { width: 100%; aspect-ratio: 5 / 3; object-fit: cover; object-position: 50% 50%; }
.about-text { margin-top: 32px; max-width: 60ch; }
.about-text p + p { margin-top: 16px; }
.spec { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--rule); color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 8px 24px; }
@media (min-width: 900px) {
  .about-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; align-items: start; }
  .about-head { grid-column: 1 / 11; }
  .about-head h2 { font-size: clamp(3.5rem, 5.6vw, 5rem); }
  .about { padding-bottom: 96px; }
  .about-text { grid-column: 1 / 6; grid-row: 2; align-self: stretch; display: flex; flex-direction: column; margin-top: 48px; max-width: 50ch; font-size: 1.1875rem; line-height: 1.6; }
  .about-text .spec { margin-top: auto; }
  .about-photo { grid-column: 6 / 13; grid-row: 2; align-self: start; justify-self: end; width: min(640px, calc(100% + var(--edge) - 32px)); margin: 48px calc(-1 * var(--edge)) 0 0; }
  /* Desktop crop starts past the shrub (cab, door script, the Dart); its foot and the spec line share one baseline. */
  .about-photo img { aspect-ratio: 980 / 520; object-position: 50% 50%; }
}

/* Visit: rail black. The flatbed full bleed, then the truck's lettering carried on: hours, phone, towns, plate. */
.visit { padding: 0 0 56px; background: var(--ink); color: var(--cab); }
.yard-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 55% 70%; }
.visit-in { padding-top: 48px; }
.hours-line { font: 700 clamp(2.5rem, 11vw, 5.5rem)/1 var(--cond); text-transform: uppercase; letter-spacing: .01em; }
.hours-line.tel { margin-top: 16px; }
.hours-line a { color: var(--cab); text-decoration: underline; text-decoration-color: #9A3442; text-decoration-thickness: 3px; text-underline-offset: 8px; text-decoration-skip-ink: none; white-space: nowrap; }
.hours-line a:hover { color: var(--wine-l); }
.visit-foot { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--rule-dk); }
.towns .label { color: var(--steel); }
.towns p { margin-top: 12px; display: grid; gap: 10px; font: 700 1.125rem/1.3 var(--cond); letter-spacing: .12em; text-transform: uppercase; }
.towns p span { white-space: nowrap; }
.plate { margin-top: 40px; background: var(--steel); color: var(--ink); padding: 22px 26px 14px; outline: 1px solid var(--steel-d); outline-offset: -7px; }
.plate .label { color: var(--ink); font-size: .75rem; letter-spacing: .16em; }
.plate address { font-style: normal; margin-top: 10px; font: 700 1.375rem/1.25 var(--cond); letter-spacing: .02em; }
.plate .dir { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin-top: 6px; font: 700 .8125rem/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.visit :focus-visible { outline-color: var(--cab); }
.plate :focus-visible { outline-color: var(--ink); }
@media (min-width: 900px) {
  .yard-photo img { aspect-ratio: 21 / 9; max-height: 640px; object-position: 40% 42%; }
  .hours-line.tel { margin-top: 20px; }
  .hours-line a { text-decoration-thickness: 4px; text-underline-offset: 12px; }
  /* Desktop flatbed credit sits under the photo on black: the wet asphalt in its corner is too light for white text. */
  .yard .credit.on { position: static; max-width: 1280px; margin: 8px auto 0; padding: 0 var(--gut); color: var(--steel); text-shadow: none; }
  .visit { padding-bottom: 64px; }
  .visit-in { padding-top: 72px; }
  .towns p { display: flex; flex-wrap: wrap; gap: 0; font-size: 1.1875rem; line-height: 1.9; }
  .towns p span { display: inline-flex; align-items: center; }
  .towns p span + span::before { content: ""; width: 4px; height: 4px; background: var(--steel); margin: 0 14px 0 calc(14px - .12em); }
  .visit-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; }
  .visit-in .hours-line { grid-column: 1 / 9; }
  /* The plate pairs with the call: its foot sits on the number's wine underline. */
  .plate { grid-column: 9 / 13; grid-row: 1 / 3; align-self: end; margin: 0 0 -7px; padding: 32px 30px; }
  .plate .label { font-size: .8125rem; }
  .plate address { font-size: 1.75rem; line-height: 1.2; }
  .visit-foot { grid-column: 1 / -1; margin-top: 64px; padding-top: 32px; }
}

/* Footer: rail black, the back of the truck. */
.foot { background: var(--wine); color: var(--cab); padding-bottom: calc(56px + 24px + env(safe-area-inset-bottom)); }
.foot-mark { padding: 72px 0 48px; }
.foot-mark a { display: inline-flex; flex-direction: column; align-items: flex-start; text-decoration: none; }
.foot-mark .s { font: 400 clamp(4.4rem, 20vw, 9rem)/.95 var(--script); color: var(--cab); padding-right: .1em; margin-left: -.04em; }
.foot-mark .c { font: 700 clamp(1.3rem, 5.4vw, 2.25rem)/1 var(--cond); letter-spacing: .13em; text-transform: uppercase; margin-top: .62em; }
.foot .swash path { stroke: rgba(244, 241, 236, .6); }
.foot-cols { display: grid; gap: 24px; padding-bottom: 40px; }
.foot-cols .label { color: rgba(244, 241, 236, .78); margin-bottom: 4px; }
.foot-cols p { font-size: 1.0625rem; line-height: 1.5; }
.foot-cols .ft-tel { font: 700 1.75rem/1 var(--cond); letter-spacing: .03em; }
.foot-cols .ft-tel a { align-items: center; }
.foot-cols a { text-decoration: none; display: inline-flex; align-items: flex-start; min-height: 44px; }
.foot-base { border-top: 1px solid rgba(244, 241, 236, .28); padding: 20px 0 0; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; font-size: .875rem; color: rgba(244, 241, 236, .82); }
.foot-base a { color: var(--cab); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.foot-base .legal { display: flex; gap: 20px; }
.foot-base .by { flex-basis: 100%; }
.foot :focus-visible { outline-color: var(--cab); }
.rev :focus-visible, .work-quote :focus-visible { outline-color: #fff; }
@media (min-width: 900px) {
  .foot { padding-bottom: 0; }
  .foot > .wrap { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; }
  .foot-mark { grid-column: 1 / 8; padding: 112px 0 72px; }
  .foot-cols { grid-column: 8 / 13; align-self: end; grid-template-columns: 1fr 1fr; gap: 32px; padding-bottom: 72px; }
  .foot-base { grid-column: 1 / -1; padding-bottom: 20px; }
  .foot-base .by { flex-basis: auto; margin-left: auto; }
}

/* Phone action bar */
.actionbar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1.4fr 1fr 1fr; background: var(--ink); border-top: 1px solid var(--rule-dk); padding-bottom: env(safe-area-inset-bottom); }
.actionbar a { display: flex; align-items: center; justify-content: center; min-height: 56px; color: var(--cab); font: 700 .875rem/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; --m-fill: rgba(244, 241, 236, .12); }
.actionbar a:first-child { background: var(--wine); color: #fff; --m-fill: var(--wine-d); }
.actionbar a + a { border-left: 1px solid var(--rule-dk); }
.actionbar :focus-visible { outline-color: var(--cab); outline-offset: -4px; }
@media (min-width: 900px) { .actionbar { display: none; } }

/* 404 */
.lost { padding: 96px 0 120px; }
.lost h1 .s { font-size: clamp(4.4rem, 20vw, 8rem); }
.lost .lede { margin-top: 24px; }
@media (min-width: 900px) { .lost { padding: 144px 0 176px; } }

.ad > span { display: block; white-space: nowrap; }

@media (min-width: 900px) and (max-width: 1199px) {
  .svc-list li { grid-template-columns: 140px minmax(0, 1fr); }
  .svc-list .fact { grid-column: 2; grid-row: auto; justify-self: start; text-align: left; padding-top: 0; margin-top: 14px; max-width: 62ch; }
}