/* Hampton Roads Towing & Recovery: "Night dispatch". Black ground lit like their dusk and night photos, logo red in
   big fields, Barlow Condensed road-sign caps over Atkinson Hyperlegible, their own truck photos as the structure of
   the page, the truck door's blue / ink pinstripe / silver where the page turns light, and the phone number set huge
   once, as the closing call. Square corners everywhere. */
:root {
  --ink: #0c0d0f; --ink-2: #16181c; --line: #2a2d33; --line-2: #3a3e45;
  --red: #d71920; --red-deep: #b3141a; --red-text: #f0444a;
  --blue: #196ebf; --silver: #c2c3bf; --on-silver: #26282c;
  --text: #e9e9e6; --soft: #c9cacc;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Atkinson Hyperlegible", system-ui, sans-serif;
  --pad: clamp(20px, 5vw, 64px); --max: 1280px;
  --edge: max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
  /* Motion feel: crisp and firm, like a dispatch call. */
  --m-dur: .8s; --m-ease: cubic-bezier(.2, .8, .2, 1); --m-rise: 24px; --m-word: 60ms;
}
@media (max-width: 719px) { :root { --m-dur: .65s; --m-rise: 16px; --m-word: 42ms; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
html { background: var(--ink); }
body { margin: 0; background: var(--ink); color: var(--text); font: 400 1.0625rem/1.5 var(--body); font-synthesis: none; }
@media (min-width: 960px) { body { font-size: 1.125rem; line-height: 1.55; } }
h1, h2, h3, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: #fff; color: var(--ink); padding: 12px 16px; font-weight: 700; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

/* Section label: a short red rule and a tabular index, the same everywhere. */
.label { display: inline-flex; align-items: center; gap: 12px; font: 600 .875rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--soft); }
.label::before { content: ""; width: 24px; height: 2px; background: var(--red); }
h2 { font: 800 clamp(2.75rem, 11vw, 4.25rem)/.92 var(--display); text-transform: uppercase; letter-spacing: .005em; margin-top: 16px; }

/* ---------- header ---------- */
.top { position: fixed; inset: 0 0 auto 0; z-index: 30; background: linear-gradient(180deg, rgba(5, 6, 8, .72), rgba(5, 6, 8, 0)); }
.top.is-scrolled { background: rgba(12, 13, 15, .96); box-shadow: 0 1px 0 var(--line); }
.preview { background: #000; color: #b9babc; font: 400 .8125rem/1.3 var(--body); text-align: center; padding: 6px 16px; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 8px var(--pad); max-width: calc(var(--max)); margin: 0 auto; }
.brand { display: block; padding: 4px 0; }
.brand img { width: 128px; transition: width .4s var(--m-ease); }
.top.is-scrolled .brand img { width: 96px; }
.nav { display: none; }
.topcall { font: 800 1.25rem/1 var(--display); letter-spacing: .04em; text-decoration: none; font-variant-numeric: tabular-nums; min-height: 44px; display: inline-flex; align-items: center; }
.topcall:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (min-width: 960px) {
  .label { font-size: 1.25rem; letter-spacing: .12em; }
  .bar { padding: 12px var(--pad); }
  .brand img { width: 186px; }
  .top.is-scrolled .brand img { width: 128px; }
  .nav { display: flex; gap: 32px; margin-left: auto; font: 600 1rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
  .nav a { padding: 14px 0; }
  .topcall { font-size: 1.5rem; margin-left: 24px; padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, .3); }
}

/* ---------- hero: photo on top (phones); on desktop the photo bleeds off the right edge beside the name ---------- */
.hero { position: relative; background: var(--ink); display: grid; overflow: hidden; }
.hero-media { position: relative; height: 50svh; min-height: 320px; max-height: 540px; overflow: hidden; background: #000; }
.slides { position: absolute; inset: 0; }
.slides img { object-position: 0% 60%; }
.slides > :nth-child(2) img { object-position: 55% 50%; }
/* The lights come on: a black veil lifts off the photo while it pushes in slightly (opacity and scale only). */
.hero-media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 70%, rgba(12, 13, 15, .9) 100%); }
.hero-media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #000; opacity: 0; }
.hero-rule { display: block; width: 64px; height: 4px; background: var(--red); margin-bottom: 18px; transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) {
  .hero-media::before { animation: lights-on 1.4s cubic-bezier(.4, 0, .2, 1) both; }
  .slides { animation: push-in 1.4s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-rule { animation: rule-in .7s var(--m-ease-io) .1s both; }
  /* The name rises line by line, then the line and the Call button. Pure CSS, so it plays from the first paint on
     every screen and never waits for the motion script. */
  .hero h1 .w { animation: rise .7s cubic-bezier(.2, .7, .2, 1) .18s both; }
  .hero h1 .ln:nth-child(1) .w:nth-child(2) { animation-delay: .27s; }
  .hero h1 .ln:nth-child(2) .w { animation-delay: .36s; }
  .hero h1 .ln:nth-child(3) .w { animation-delay: .45s; }
  .hero-line { animation: rise .7s cubic-bezier(.2, .7, .2, 1) .52s both; }
  .hero-acts { animation: rise .7s cubic-bezier(.2, .7, .2, 1) .64s both; }
}
@keyframes rise { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }
@keyframes lights-on { from { opacity: .8; } to { opacity: 0; } }
@keyframes push-in { from { transform: scale(1.1); } to { transform: none; } }
@keyframes rule-in { from { transform: scaleX(0); } to { transform: none; } }
.hero .m-pause { z-index: 2; border-radius: 0; background: rgba(0, 0, 0, .55); }
.hero-text { position: relative; z-index: 2; padding: 8px var(--pad) 40px; }
.hero h1 { font: 800 clamp(2.9rem, 13.6vw, 7.5rem)/.88 var(--display); text-transform: uppercase; letter-spacing: -.005em; }
.hero h1 .ln { display: block; }
.hero h1 .w { display: inline-block; }
.hero-line { margin-top: 16px; max-width: 34ch; color: var(--soft); }
.hero-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 22px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 24px; background: var(--red); color: #fff; text-decoration: none; font: 800 1.375rem/1 var(--display); letter-spacing: .05em; text-transform: uppercase; --m-fill: var(--red-deep); width: 100%; }
.btn .num { font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.btn svg { width: 20px; height: 20px; flex: none; }
.ghost { display: none; font: 600 1.0625rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; padding: 14px 0; }
@media (min-width: 560px) { .btn { width: auto; } }
@media (min-width: 960px) {
  /* One full-bleed frame of their truck, cut from the amber light bar down (no sky, no flag). The cab and door take
     the left of the frame, so the ink shade falls there and the name sits on it; the load on the bed stays clear. */
  .hero { display: block; height: min(100svh, 900px); min-height: 680px; }
  .hero-media { position: absolute; inset: 0; height: auto; min-height: 0; max-height: none; background: var(--ink); }
  .hero-media::after { background: linear-gradient(90deg, rgba(12, 13, 15, 1) 0, rgba(12, 13, 15, .985) max(34%, calc(var(--edge) + 340px)), rgba(12, 13, 15, .5) max(46%, calc(var(--edge) + 520px)), rgba(12, 13, 15, 0) max(60%, calc(var(--edge) + 720px))), linear-gradient(0deg, rgba(12, 13, 15, .82) 0, rgba(12, 13, 15, .5) 22%, rgba(12, 13, 15, 0) 42%), linear-gradient(180deg, rgba(5, 6, 8, .55) 0, rgba(5, 6, 8, 0) 22%); }
  .slides img { object-position: 50% 45%; }
  .slides > :nth-child(2) img { object-position: 50% 60%; }
  .hero-text { position: absolute; left: 0; bottom: 0; padding: 0 0 112px var(--edge); max-width: calc(var(--edge) + 560px); }
  .hero h1 { font-size: clamp(4.5rem, 7vw, 6.5rem); max-width: 560px; }
  .hero h1 .w { display: block; }
  .hero-rule { margin-bottom: 28px; }
  .hero-side { max-width: 30rem; }
  .hero-line { margin-top: 28px; font-size: 1.25rem; line-height: 1.45; color: #d6d7d9; }
  .hero-acts { margin-top: 32px; }
  .ghost { display: inline-block; }
}

/* ---------- services: a dispatch board ---------- */
.services { padding: 72px 0 72px; }
.svc { display: grid; }
.svc-photo { margin: 48px calc(var(--pad) * -1) 0; overflow: hidden; }
.svc-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 50%; }
.board { margin-top: 40px; border-top: 2px solid var(--text); }
/* Number and name share one baseline; the name is set big, like lettering on a door. */
.board li { position: relative; display: grid; grid-template-columns: 40px 1fr; align-items: baseline; column-gap: 8px; padding: 24px 0; }
.board li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line-2); transform-origin: 0 50%; }
.board .n { font: 600 1.125rem/1 var(--display); color: var(--red-text); font-variant-numeric: tabular-nums; letter-spacing: .06em; transition: transform .2s var(--m-ease); }
.board h3 { font: 800 clamp(2.25rem, 10vw, 2.75rem)/1 var(--display); text-transform: uppercase; letter-spacing: 0; }
.board p { grid-column: 2; margin-top: 6px; color: var(--soft); max-width: 34ch; line-height: 1.45; }
@media (hover: hover) {
  .board li:hover::after { background: var(--red); }
  .board li:hover .n { transform: translateX(4px); }
}
@media (prefers-reduced-motion: no-preference) {
  @media (scripting: enabled) {
    .board li::after { transform: scaleX(0); transition: transform 1.1s var(--m-ease-io) calc(var(--d, 0ms) + 120ms), background-color .2s; }
    .board li.is-in::after { transform: none; }
  }
}
@media (min-width: 960px) {
  /* The winch photo runs off the left edge as a tall panel and stays put while the big names scroll past it. */
  .services { padding: 136px 0 96px; }
  .svc { grid-template-columns: repeat(12, 1fr); grid-template-rows: auto 1fr; column-gap: 24px; align-items: start; }
  .svc-head { grid-column: 8 / 13; grid-row: 1; }
  .svc-photo { grid-column: 1 / 7; grid-row: 1 / span 2; margin: 0 0 0 calc(var(--edge) * -1); position: sticky; top: 96px; height: min(calc(100svh - 96px), 880px); background: var(--ink-2); }
  .svc-photo picture { display: block; height: 100%; }
  .svc-photo img { height: 100%; aspect-ratio: auto; object-position: 58% 30%; }
  .svc-list { grid-column: 8 / 13; grid-row: 2; }
  .board { margin-top: 48px; }
  .board li { grid-template-columns: 48px 1fr; padding: 28px 0; }
  .board h3 { font-size: 4rem; line-height: 1; }
  .board p { font-size: 1.25rem; line-height: 1.45; margin-top: 10px; max-width: 40ch; color: var(--soft); }
}

/* ---------- about: the truck door. Blue band, ink pinstripe, silver, as painted on the door. ---------- */
.about { background: linear-gradient(var(--blue) 0 14px, var(--ink) 14px 18px, var(--silver) 18px); padding-top: 18px; color: var(--ink); display: grid; }
.about-photo { overflow: hidden; }
.about-photo img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.about-text { padding: 56px var(--pad) 72px; }
.about .label { color: var(--on-silver); }
.about h2 { color: var(--ink); }
.about-text > p { margin-top: 20px; max-width: 46ch; color: var(--ink); }
.about blockquote { margin-top: 32px; border-left: 4px solid var(--red); padding-left: 18px; }
.about blockquote p:first-child { font: 600 clamp(1.625rem, 6.4vw, 2.5rem)/1.05 var(--display); text-transform: uppercase; letter-spacing: .01em; color: var(--ink); max-width: 22ch; }
.about blockquote .by { margin-top: 12px; font: 600 .9375rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--line); }
.about .usdot { white-space: nowrap; margin-top: 32px; font: 600 .9375rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--line); font-variant-numeric: tabular-nums; }
@media (min-width: 960px) {
  /* The door photo starts right under the pinstripe, square so the logo stays whole; the text is centred beside it. */
  .about { grid-template-columns: minmax(0, 46%) 1fr; align-items: start; }
  .about-photo { align-self: start; }
  .about-text { padding: 30px var(--pad) 48px clamp(56px, 7vw, 112px); align-self: start; max-width: calc(620px + clamp(56px, 7vw, 112px) + var(--pad)); }
  .about-text > p { font-size: 1.25rem; line-height: 1.5; max-width: 620px; }
  .about blockquote p:first-child { font-size: 3rem; line-height: 1.05; max-width: 18ch; }
  .about blockquote { margin-top: 40px; }
  .about blockquote .by { margin-top: 16px; }
  .about blockquote .by, .about .usdot { font-size: 1.25rem; letter-spacing: .12em; }
}

/* ---------- reviews: a full red band, two quotes staggered on the diagonal ---------- */
.reviews { background: var(--red); color: #fff; padding: 72px 0 80px; border-top: 4px solid var(--ink); }
.reviews .label { color: #fff; }
.reviews .label::before { background: #fff; }
.quotes { margin-top: 36px; display: grid; gap: 48px; }
.q { display: flex; flex-direction: column; }
.q blockquote { margin-bottom: 18px; }
.q blockquote p { font: 600 clamp(1.5rem, 6.2vw, 2.5rem)/1.15 var(--display); letter-spacing: .005em; max-width: 34ch; }
.q figcaption { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .45); font: 600 .9375rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.q figcaption { font-size: .9375rem; letter-spacing: .14em; }
.q .who { color: #fff; }
.q .src { opacity: .8; }
@media (min-width: 960px) {
  .reviews { padding: 120px 0 112px; }
  /* Side by side, top-aligned. */
  .quotes { margin-top: 56px; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: stretch; }
  .q blockquote p { font-size: 2.5rem; }
  .q figcaption { font-size: 1.25rem; letter-spacing: .12em; }
  /* Both top-aligned; the short quote is set larger so the two blocks are close in height. Rules stay on one line. */
  .q:first-child blockquote p { font-size: 2.25rem; line-height: 1.18; }
  .q:last-child blockquote p { font-size: 3rem; line-height: 1.08; }
  .q:first-child { grid-column: 1 / 7; }
  .q:last-child { grid-column: 8 / 13; }
}

/* ---------- work: their truck full-bleed, arriving with a wipe from the left ---------- */
.work { padding: 64px 0 0; }
.band { margin-top: 28px; overflow: hidden; background: var(--ink-2); }
.band img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 50%; }
@media (min-width: 720px) { .band img { aspect-ratio: 21 / 9; } }
@media (prefers-reduced-motion: no-preference) {
  @media (scripting: enabled) {
    .band img { transform: scale(1.06); transition: transform 1.3s cubic-bezier(.2, .7, .2, 1) .1s; }
    .band.is-in img { transform: none; }
  }
}
@media (min-width: 960px) {
  .work { padding: 96px 0 0; }
  .band { margin-top: 40px; }
}

/* ---------- hours & area: the night tow beside "Open 24 hours" ---------- */
.hours { padding: 56px 0 56px; }
.hrs { display: grid; }
.hrs-photo { margin: 40px calc(var(--pad) * -1) 0; }
.hrs-body { margin-top: 32px; }
.g-night { overflow: hidden; background: var(--ink-2); }
.g-night img { width: 100%; aspect-ratio: 2.4; object-fit: cover; object-position: 50% 70%; }
@media (min-width: 960px) { .g-night img { aspect-ratio: 1400 / 446; } }
.credit { margin-top: 12px; padding: 0 var(--pad); font: 600 .8125rem/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.hours h2 { max-width: 12ch; }
.area { max-width: 40ch; color: var(--soft); }
@media (min-width: 960px) { .area { font-size: 1.25rem; line-height: 1.5; } }
.mail { margin-top: 16px; overflow-wrap: anywhere; font: 600 .9375rem/1.3 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.mail a { display: inline-block; padding: 10px 0; }
@media (min-width: 960px) {
  .hours { padding: 112px 0 96px; }
  .hrs { grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; }
  .hrs-head { grid-column: 8 / 13; grid-row: 1; }
  .hours h2 { max-width: 14ch; }
  .hrs-photo { grid-column: 1 / 8; grid-row: 1 / span 2; margin: 0; }
  .credit { padding: 0; font-size: 1.25rem; letter-spacing: .12em; }
  .hrs-body { grid-column: 8 / 13; grid-row: 2; margin-top: 32px; }
}
@media (min-width: 1200px) {
  /* The email set like the other labels: condensed caps, so it reads as part of the board. */
  .mail { font: 600 1.125rem/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; }
}

/* ---------- the closing call: one red band, one tap-to-call link, the number at full container width ---------- */
.dial { display: block; background: var(--red); color: #fff; text-decoration: none; }
.dial-in { display: grid; gap: 14px; padding-top: 40px; padding-bottom: 48px; container-type: inline-size; }
.dial .k { font: 600 .9375rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; }
/* 12 characters of Barlow Condensed 800 run about 5.75em, so this fits the container's width. */
.dial .big { font: 800 3rem/.84 var(--display); font-size: min(calc(100cqi / 5.95), 14.5rem); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dial .g { display: inline-block; }
.dial:hover { background: var(--red-deep); }
/* The finale: the number itself never animates, so it reads in any state. On desktop the red field wipes in once behind
   it (a layer, not the link, so the number shows even mid-wipe); on hover the number shifts and the field darkens. */
@media (prefers-reduced-motion: no-preference) {
  .dial { transition: background-color .2s; }
  .dial .big { transition: transform .2s cubic-bezier(.2, .7, .2, 1); }
  @media (hover: hover) { .dial:hover .big, .dial:focus-visible .big { transform: translate3d(6px, 0, 0); } }
  @media (min-width: 960px) {
    .dial { position: relative; isolation: isolate; }
    .dial.is-pending, .dial.is-in { background: var(--ink); }
    .dial::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--red); transition: background-color .2s; }
    .dial:hover::before { background: var(--red-deep); }
    .dial.is-pending::before { clip-path: inset(0 100% 0 0); }
    .dial.is-in::before { animation: wipe-in .4s cubic-bezier(.2, .7, .2, 1) both; }
  }
}
@keyframes wipe-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.dial:focus-visible { outline-offset: -6px; }
@media (min-width: 960px) {
  .dial-in { padding-top: 80px; padding-bottom: 88px; gap: 24px; }
  .dial .k { font-size: 1.25rem; }
}

/* ---------- footer ---------- */
.foot { background: var(--ink); border-top: 1px solid var(--line); padding: 56px 0 96px; color: var(--soft); }
.foot-grid { display: grid; gap: 36px; }
.foot-logo { width: 220px; }
.foot-h { font: 600 .875rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--soft); margin: 0 0 12px; }
.foot-num { display: inline-block; font: 800 2.5rem/1 var(--display); letter-spacing: .01em; color: #fff; font-variant-numeric: tabular-nums; padding: 4px 0; }
.foot-mail { display: inline-block; margin-top: 4px; padding: 10px 0; color: #fff; overflow-wrap: anywhere; }
.foot-col p { margin-top: 6px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.foot-links li a { display: inline-block; padding: 12px 0; color: #fff; font: 600 .9375rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
/* The rule sits inside the container edges, like every other edge on the page. */
.foot-legal { margin-top: 40px; padding-top: 16px; background: linear-gradient(var(--line), var(--line)) var(--pad) 0 / calc(100% - var(--pad) * 2) 1px no-repeat; display: grid; gap: 4px; font: 600 .875rem/1.4 var(--display); letter-spacing: .1em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.legal-links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.legal-links a { display: inline-block; padding: 12px 0; min-width: 44px; }
.foot-links li a { min-width: 44px; }
@media (min-width: 960px) {
  .foot { padding: 88px 0 40px; }
  .foot-grid { grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; }
  .foot-logo { grid-column: 1 / 5; width: 280px; }
  .foot-grid .foot-col:nth-of-type(1) { grid-column: 6 / 10; }
  .foot-grid .foot-col:nth-of-type(2) { grid-column: 10 / 13; }
  .foot-legal { grid-template-columns: 1fr auto; align-items: center; font-size: 1.125rem; }
  .foot-h { font-size: 1.125rem; letter-spacing: .12em; color: var(--soft); }
  .foot-links { gap: 0 28px; }
  .foot-links li a { font-size: 1.125rem; letter-spacing: .1em; color: #E9E9E6; }
  .foot-mail { font-size: 1.125rem; }
}

/* ---------- phone action bar ---------- */
.actionbar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1.3fr 1fr 1fr; background: var(--ink); border-top: 1px solid var(--line-2); padding-bottom: env(safe-area-inset-bottom); }
.actionbar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 8px; text-decoration: none; font: 800 1.125rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.actionbar a + a { border-left: 1px solid var(--line-2); }
.actionbar .ab-call { background: var(--red); --m-fill: var(--red-deep); }
.actionbar svg { width: 18px; height: 18px; }
@media (min-width: 960px) { .actionbar { display: none; } }

/* ---------- 404 ---------- */
.lost { min-height: 100svh; display: grid; align-content: end; padding: 160px 0 96px; }
.lost h1 { font: 800 clamp(3rem, 14vw, 8rem)/.88 var(--display); text-transform: uppercase; }
.lost p { margin-top: 20px; max-width: 40ch; color: var(--soft); }
.lost .acts { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; margin-top: 28px; }
.lost .home { font: 600 1.0625rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; padding: 14px 0; display: inline-block; }