/* George's Plumbing: lettered like the side of their van. Mohave italic for the sign lettering, Figtree for text. */
:root {
  --navy: #1b2b47; --navy-2: #14213a; --steel: #2e6496; --aqua: #2cc5f0; --porc: #eef3f7; --ink: #141a24;
  --mute: #4a5568; --line: #c9d5e1; --line-dk: rgba(255, 255, 255, .18); --on-navy: #d6e1ec;
  --disp: "Mohave", "Arial Narrow", sans-serif; --text: "Figtree", system-ui, sans-serif;
  --r: 4px; --gut: 20px; --sec: 80px;
  /* Crisp, sign-shop motion: quicker than the kit's default, firm landing. */
  --m-dur: .8s; --m-ease: cubic-bezier(.2, .75, .15, 1); --m-rise: 28px; --m-word: 70ms;
}
@media (min-width: 960px) { :root { --gut: 40px; --sec: 144px; } }
@view-transition { navigation: auto; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 17px/1.6 var(--text); color: var(--ink); background: #fff; }
@media (min-width: 960px) { body { font-size: 18px; } }
img { max-width: 100%; display: block; }
h1, h2, h3, p, figure, blockquote, dl, dd, ol { margin: 0; }
a { color: inherit; }
address { font-style: normal; }
.wrap { width: min(1240px, 100% - var(--gut) * 2); margin-inline: auto; }
.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; padding: 12px 16px; background: var(--navy); color: #fff; border-radius: var(--r); }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; }
.svc :focus-visible, .loc :focus-visible, .reviews :focus-visible { outline-color: var(--steel); }

/* Shared type roles: display (sign lettering), heading, body, label. */
.h2 { font: italic 700 clamp(2.75rem, 9vw, 4rem)/.92 var(--disp); text-transform: uppercase; letter-spacing: .005em; color: var(--navy); }
/* One section label everywhere; the display line under it carries the scale. */
.label-h { font: italic 700 1.375rem/1 var(--disp); text-transform: uppercase; letter-spacing: .04em; color: var(--steel); }
.label, dt { font: italic 600 .95rem/1.2 var(--disp); letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }

/* Photo tabs (job names, like a label on the truck) and credits. */
.tab { position: absolute; left: 0; top: 0; z-index: 2; padding: 7px 12px 6px; background: #fff; color: var(--navy);
  font: italic 700 .95rem/1 var(--disp); letter-spacing: .08em; text-transform: uppercase; }
.tab span { color: var(--steel); margin-right: .2em; }
.credit { position: absolute; right: 12px; bottom: 12px; z-index: 2; font: 500 12px/1.25 var(--text); color: #fff; text-align: right;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.brand { display: flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--navy); }
.brand span { font: italic 700 1.375rem/1 var(--disp); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; text-shadow: 1px 1px 0 var(--steel); }
.brand small { font-size: max(.56em, 12.5px); text-transform: none; margin-left: 3px; color: var(--steel); text-shadow: none; }
.nav { display: none; }
.topcall { display: inline-flex; align-items: center; min-height: 44px; font: italic 700 1.25rem/1 var(--disp); letter-spacing: .03em; color: var(--steel); text-decoration: none; white-space: nowrap; }
@media (max-width: 359px) { .brand span { font-size: 1.15rem; } .topcall { font-size: 1.05rem; } }
@media (max-width: 400px) { .actionbar { grid-template-columns: 1fr 1.25fr 1fr; } .actionbar a { font-size: 1.05rem; letter-spacing: .03em; gap: 6px; } }

/* ---------- hero ---------- */
.hero { background: var(--navy); color: #fff; overflow: hidden; }
.hero-photo { aspect-ratio: 13 / 9; }
.hero-photo picture { display: block; height: 100%; }
.hero-photo img { object-position: 50% 22%; }
.name { padding-top: 22px; font: italic 700 clamp(3.2rem, 18.6vw, 5.6rem)/.88 var(--disp); text-transform: uppercase; letter-spacing: .005em; }
.name .w { position: relative; display: inline-block; isolation: isolate; padding-right: .06em; margin-right: -.06em; }
/* A solid block shade, the way sign painters shadow van lettering. It sits on its own layer so it can land after the letter. */
.name .w[data-w]::before { content: attr(data-w); content: attr(data-w) / ""; position: absolute; left: 0; top: 0; z-index: -1; white-space: nowrap;
  color: transparent; pointer-events: none;
  text-shadow: .012em .012em 0 var(--steel), .024em .024em 0 var(--steel), .036em .036em 0 var(--steel), .046em .046em 0 var(--steel); }
.name .n2 { display: block; }
.name .inc { font-size: .3em; text-transform: none; letter-spacing: .02em; margin-left: .12em; color: var(--aqua); }
.slogan { margin-top: 16px; font: italic 500 1.4rem/1.2 var(--disp); color: var(--aqua); }
.hero-line { margin-top: 12px; font-size: 18px; line-height: 1.45; color: var(--on-navy); text-wrap: pretty; }
/* The entrance, painted like the van: the van settles, each word is lettered left to right, its shade lands just after,
   then the slogan, line and actions follow. Done by about 1.1s. The van is the LCP photo, so only its scale moves. */
@keyframes van-settle { from { scale: 1.1; translate: -1.5% 0; } to { scale: 1; translate: 0 0; } }
@keyframes van-settle-ph { from { scale: 1.16; translate: -4% 0; } to { scale: 1; translate: 0 0; } }
@keyframes paint { from { clip-path: inset(-.2em 100% -.3em 0); } to { clip-path: inset(-.2em -.3em -.3em -.2em); } }
@keyframes shade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-photo img { animation: van-settle 1.5s cubic-bezier(.2, .7, .2, 1) both; }
  /* Phones: a slower start, so the settle is still moving through the first second. */
  @media (max-width: 959px) { .hero-photo img { animation-name: van-settle-ph; animation-duration: 1.6s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); transform-origin: 60% 60%; } }
  .name .w { animation: paint .52s cubic-bezier(.3, .7, .25, 1) .12s both; }
  .name .w2 { animation-delay: .26s; }
  .name .inc { animation-duration: .3s; animation-delay: .62s; }
  .name .w[data-w]::before { animation: shade .16s ease-out .74s both; }
  .name .w2::before { animation-delay: .88s; }
  .slogan { animation: rise-in .42s ease-out .52s both; }
  .hero-line { animation: rise-in .42s ease-out .6s both; }
  .hero-actions { animation: rise-in .42s ease-out .68s both; }
}
.hero-photo img.wait { animation: none; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 22px; padding-bottom: 32px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 24px; border-radius: var(--r);
  background: var(--aqua); color: var(--navy); text-decoration: none; font: italic 700 1.4rem/1 var(--disp); letter-spacing: .03em;
  --m-fill: #fff; transition: transform .2s ease; }
.btn:active { transform: translateY(1px); }
.ghost { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #fff; font-weight: 600; }

/* ---------- services ---------- */
.svc { padding: 56px 0 64px; }
.lead { margin-top: 24px; max-width: 24em; font-size: 1.375rem; line-height: 1.3; font-weight: 500; color: var(--ink); text-wrap: pretty; }
.lead strong { font-weight: 700; color: var(--navy); }
/* All four job photos at once: a gapless grid, edge to edge on phones. */
.jobs { display: grid; grid-template-columns: 1fr 1fr; margin: 36px calc(var(--gut) * -1) 0; }
.job { aspect-ratio: 3 / 4; }
.job:nth-child(1) img { object-position: 50% 30%; }
.job:nth-child(2) img { object-position: 0% 20%; }
.job:nth-child(3) img { object-position: 50% 50%; }
.job:nth-child(4) img { object-position: 50% 75%; }
.job .tab { font-size: .8rem; padding: 6px 9px 5px; }
/* Credits close the section, under the last hairline, so the grid runs straight into the list. */
.credits { margin-top: 24px; font-size: 13px; line-height: 1.4; color: #5b6676; }
.svc-list { list-style: none; padding: 0; margin-top: 36px; border-top: 2px solid var(--navy); }
.svc-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 8px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.svc-list .num { grid-row: 1 / 3; font: italic 700 1.125rem/1.3 var(--disp); color: var(--steel); letter-spacing: .02em; }
.svc-list .nm { font: italic 700 1.375rem/.98 var(--disp); text-transform: uppercase; color: var(--navy); letter-spacing: .01em; }
.svc-list .ds { grid-column: 2; margin-top: 0; font-size: 15px; line-height: 1.3; color: #3a4556; }

/* ---------- 24-hour band ---------- */
.band { padding: var(--sec) 0 calc(var(--sec) - 16px); background: var(--navy); color: #fff; overflow: hidden; }
.band-pair { display: grid; gap: 22px; }
.statement { font: italic 700 clamp(2.6rem, 11.5vw, 5.4rem)/.94 var(--disp); text-transform: uppercase; letter-spacing: .005em; color: #fff; }
#band-h { font-size: clamp(2.6rem, 13.4vw, 3.25rem); }
.band-right .statement { font-size: clamp(1.9rem, 9.2vw, 2.25rem); color: #d5e0ec; }
.band-note { margin-top: 20px; max-width: 34ch; font-size: 19px; line-height: 1.35; font-weight: 500; color: #d5e0ec; }
.painted { display: block; width: max-content; max-width: 100%; margin-top: 40px; padding-right: .06em; font: italic 700 clamp(3.6rem, 17.4vw, 15rem)/.9 var(--disp);
  letter-spacing: -.005em; color: var(--aqua); text-decoration: none; white-space: nowrap;
  text-shadow: .012em .012em 0 var(--steel), .024em .024em 0 var(--steel), .034em .034em 0 var(--steel); transition: color .3s ease; }
@media (hover: hover) { .painted:hover { color: #fff; } }

/* ---------- reviews ---------- */
.reviews { padding: var(--sec) 0 64px; background: var(--porc); }
.rev-score { margin-top: 40px; padding-bottom: 28px; border-bottom: 1px solid var(--navy); }
.score { display: flex; align-items: flex-end; gap: 14px; }
.score .big { font: italic 700 clamp(5rem, 24vw, 9rem)/.8 var(--disp); color: var(--navy); letter-spacing: -.01em;
  text-shadow: .015em .015em 0 var(--steel), .03em .03em 0 var(--steel); }
.score .of { font-size: 1rem; line-height: 1.4; color: var(--mute); padding-bottom: 4px; }
.score .of a { color: var(--navy); font-weight: 600; display: inline-block; padding: 6px 0; }
.favorite { margin-top: 28px; font: italic 700 1.1rem/1.35 var(--disp); letter-spacing: .07em; text-transform: uppercase; color: var(--navy); }
.favorite span { display: block; margin-top: 2px; color: var(--steel); }
.quote blockquote { margin: 0; }
.quote figcaption { margin-top: 14px; font: italic 600 20px/1.2 var(--disp); letter-spacing: .04em; text-transform: uppercase; color: var(--navy); }
.quote figcaption span { color: var(--steel); }
.lead-quote { padding: 36px 0 32px; }
.lead-quote figcaption { margin-top: 32px; }
.lead-quote p { font-size: 1.25rem; line-height: 1.45; font-weight: 500; color: var(--ink); max-width: 34em; text-wrap: pretty; }
.lead-quote p::before { content: "“"; } .lead-quote p::after { content: "”"; }
.quotes { display: grid; gap: 0; }
.quotes .quote { padding: 32px 0; border-top: 1px solid var(--line); }
.quotes .quote:last-child { padding-bottom: 0; }
.quotes p { font-size: 1.0625rem; line-height: 1.6; color: var(--ink); }
.quotes p::before { content: "“"; } .quotes p::after { content: "”"; }

/* ---------- about: the trench photo beside a navy field ---------- */
.about { padding: 64px 0; background: var(--navy); color: #fff; overflow: hidden; }
.about-photo { width: calc(100% - var(--gut) * 2); margin-inline: auto; aspect-ratio: 4 / 5; }
.about-photo img { object-position: 50% 55%; }
.about-body { width: min(1240px, 100% - var(--gut) * 2); margin: 48px auto 0; }
.door { font: italic 700 clamp(40px, 13vw, 88px)/.92 var(--disp); text-transform: uppercase; letter-spacing: .01em; color: #fff;
  text-shadow: .015em .015em 0 var(--steel), .03em .03em 0 var(--steel), .042em .042em 0 var(--steel); }
.door > span { display: block; }
.about .label-h { color: var(--aqua); }
.door { margin-top: 24px; }
.about-text { margin-top: 32px; display: grid; gap: 14px; max-width: 52ch; }
.about-text p { color: var(--on-navy); }
.about-fb a { font-weight: 600; color: #fff; display: inline-block; padding: 6px 0; }

/* ---------- location: the address set as the sign ---------- */
.loc { padding: 64px 0; }
.addr { display: block; margin-top: 24px; color: var(--navy); }
.addr .street { display: block; font: italic 700 44px/.95 var(--disp); text-transform: uppercase; letter-spacing: .005em;
  text-shadow: .015em .015em 0 var(--steel), .03em .03em 0 var(--steel); }
.addr .city { display: block; margin-top: 10px; font: italic 600 24px/1.1 var(--disp); text-transform: uppercase; letter-spacing: .03em; color: var(--steel); }
.dir { display: inline-flex; gap: 8px; margin-top: 26px; padding: 6px 0; font-size: 18px; font-weight: 600; color: var(--steel); }
.contact { margin-top: 40px; display: grid; gap: 24px; border-top: 1px solid var(--line); padding-top: 24px; }
.contact dd { margin-top: 6px; font-size: 1.0625rem; }
.contact dd a { display: inline-block; padding: 4px 0; overflow-wrap: anywhere; }

/* ---------- footer ---------- */
.foot { padding: 72px 0 calc(80px + env(safe-area-inset-bottom)); background: var(--navy-2); color: var(--on-navy); }
.foot-grid { display: grid; gap: 40px; }
.decal { width: 140px; height: auto; padding: 6px; border-radius: 50%; background: #fff; }
.foot-slogan { margin-top: 20px; font: italic 500 1.625rem/1.2 var(--disp); color: var(--aqua); text-wrap: balance; }
.foot-num { display: inline-block; font: italic 700 2rem/1.1 var(--disp); color: #fff; text-decoration: none; letter-spacing: .02em; padding: 4px 0; }
.foot-facts { margin-top: 16px; font-size: 17px; line-height: 1.5; }
.foot-links { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 0 24px; }
@media (max-width: 959px) {
  .foot-links { flex-direction: column; align-items: flex-start; font-size: 17px; }
  .foot-links a { text-decoration: underline 1px; text-underline-offset: 4px; }
  .foot .foot-base { margin-top: 46px; }
}
.foot-links a { display: inline-block; padding: 10px 0; color: #fff; }
.foot-base { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--line-dk); display: grid; gap: 0; font-size: 15px; }
.legal-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.legal-links a, .foot-copy a { display: inline-block; padding: 12px 0; color: #c9d4e2; }
.foot-copy { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 24px; font-size: 15px; color: #c9d4e2; }

/* ---------- 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(--navy); border-top: 1px solid var(--line-dk); 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; color: #fff; text-decoration: none;
  font: italic 700 1.2rem/1 var(--disp); letter-spacing: .05em; text-transform: uppercase; --m-fill: rgba(255, 255, 255, .14); }
.actionbar a + a { border-left: 1px solid var(--line-dk); }
.actionbar .primary { background: var(--aqua); color: var(--navy); --m-fill: #fff; }
.actionbar svg { width: 20px; height: 20px; }

/* ---------- 404 and simple pages ---------- */
.lost { padding: var(--sec) 0; background: var(--navy); color: #fff; min-height: 70svh; }
.lost h1 { font: italic 700 clamp(3rem, 14vw, 7rem)/.9 var(--disp); text-transform: uppercase;
  text-shadow: .012em .012em 0 var(--steel), .024em .024em 0 var(--steel), .036em .036em 0 var(--steel); }
.lost p { margin-top: 20px; max-width: 34em; color: var(--on-navy); }
.lost .hero-actions { padding-bottom: 0; }

/* ---------- wider screens ---------- */
@media (min-width: 720px) {
  .quotes { grid-template-columns: 1fr 1fr; gap: 0 48px; }
  .jobs { grid-template-columns: repeat(4, 1fr); margin-inline: 0; }
  .job { aspect-ratio: auto; height: 340px; }
  .job .tab { font-size: .95rem; padding: 7px 12px 6px; }
}
@media (min-width: 960px) {
  .top .wrap { height: 64px; }
  .brand span { font-size: 1.625rem; }
  .nav { display: flex; gap: 32px; margin-left: auto; margin-right: 32px; }
  .nav a { padding: 12px 0; font-weight: 600; font-size: 1rem; color: var(--navy); }
  .topcall { font-size: 1.45rem; }

  /* One full-bleed van, the whole vehicle from the ladder rack to the tyres across the right two-thirds. The photo takes
     what's left of the first screen after the header (64) and the name panel (122 + the name's line). */
  .hero-photo { aspect-ratio: auto; height: clamp(440px, calc(100svh - 186px - min(1240px, 100vw - 96px) * .0977), 780px); }
  .hero-photo img { object-position: 50% 12%; }
  .name { padding-top: 24px; font-size: calc(min(1240px, 100vw - 96px) / 8.8); line-height: .86; white-space: nowrap; }
  .name .n2 { display: inline; }
  .name .inc { font-size: .26em; }
  .hero-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: last baseline; margin-top: 16px; padding-bottom: 24px; }
  .slogan { grid-column: 1 / 5; margin: 0; font-size: 1.75rem; text-wrap: balance; }
  .hero-line { grid-column: 5 / 9; max-width: 40ch; margin: 0; font-size: 18px; line-height: 1.45; text-wrap: balance; }
  .hero-photo .credit { right: auto; left: 24px; text-align: left; }
  .hero-actions { grid-column: 9 / 13; justify-content: flex-end; gap: 28px; margin: 0; padding: 0; flex-wrap: nowrap; }
  .hero-actions .btn { flex: none; min-height: 64px; padding: 0 32px; font-size: 24px; letter-spacing: .04em; white-space: nowrap; }
  .hero-actions .ghost { font-size: 18px; }

  .svc { padding-top: var(--sec); padding-bottom: 96px; }
  .job .tab { font-size: 18px; letter-spacing: .06em; padding: 10px 16px 8px; }
  .job .tab span { margin-right: 10px; }
  .lead { font-size: 2.25rem; line-height: 1.25; max-width: 26em; }
  .jobs { margin-top: 56px; }
  /* Two columns of four: 01-04 sit under the faucet and toilet tiles, 05-08 beside them. */
  .svc-list { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 48px;
    border-top: 0; }
  .svc-list li { grid-template-columns: 56px minmax(0, 1fr); column-gap: 8px; padding: 20px 0; }
  .svc-list li:nth-child(4n+1) { border-top: 2px solid var(--navy); }
  .svc-list .num { font-size: 1.45rem; line-height: 1.5; }
  .svc-list .nm { font-size: 2.25rem; }
  .svc-list .ds { margin-top: 6px; font-size: 17px; color: #3a4556; }

  .band-pair { grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
  .statement, #band-h { font-size: clamp(3.4rem, 5.3vw, 5rem); }
  .band-right .statement { font-size: clamp(2.6rem, 3.9vw, 3.6rem); }
  .band-note { margin-top: 20px; font-size: 24px; line-height: 1.3; }
  .painted { margin-top: 88px; font-size: clamp(8rem, 17.4vw, 15rem); }

  .reviews { padding: 96px 0; }
  .rev-score { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: last baseline; padding-bottom: 40px; }
  .score { grid-column: 1 / 6; }
  .favorite { grid-column: 7 / 13; margin: 0; font-size: 1.35rem; }
  .score .of { font-size: 20px; }
  .label-h { font-size: 1.75rem; }
  /* Tracey's quote in cols 1-9, her name in cols 10-12 on the quote's first baseline, under a hairline. */
  .lead-quote { padding: 56px 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: first baseline; }
  .lead-quote blockquote { grid-column: 1 / 10; }
  /* Mohave caps run small for their size: 22px matches the 18px Figtree of the quotes. */
  .quote figcaption { font-size: 22px; }
  .lead-quote figcaption { grid-column: 10 / 13; margin: 0; line-height: 1.2; }
  .lead-quote figcaption span { display: block; }
  .rev-score { margin-top: 44px; }
  .lead-quote p { max-width: none; font-size: 36px; line-height: 1.3; }
  .quotes { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; border-top: 0; }
  .quotes .quote { padding: 32px 0 0; border-bottom: 0; border-top: 1px solid var(--line); }
  .quotes .quote:first-child { grid-column: 1 / 6; }
  .quotes .quote:last-child { grid-column: 7 / 12; }
  .quotes p { font-size: 20px; line-height: 1.5; }
  .quotes .quote figcaption { margin-top: 20px; }

  .about { display: grid; grid-template-columns: 520px minmax(0, 1fr); padding: 0; }
  .about-text { gap: 16px; }
  .about-text p { line-height: 1.55; }
  .about-photo { width: 100%; height: 100%; min-height: 680px; aspect-ratio: auto; margin: 0; }
  .about-body { width: auto; margin: 0; padding: 96px max(var(--gut), calc((100vw - 1240px) / 2)) 82px 80px; align-self: end; }
  .door { font-size: clamp(40px, 6vw, 88px); }

  .loc { padding: 96px 0; }
  .loc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: last baseline; }
  .loc-main { grid-column: 1 / 8; }
  .addr .street { font-size: 88px; }
  .addr .city { font-size: 36px; margin-top: 14px; }
  /* The right column ends on the baseline of the Maps link. */
  .contact { grid-column: 8 / 13; margin: 0; gap: 28px; border-top: 0; padding: 0; }
  .contact dt { font-size: 18px; letter-spacing: .06em; }
  .contact dd { margin-top: 8px; font-size: 18px; color: var(--ink); }

  .foot-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .foot-mark { grid-column: 1 / 8; display: flex; align-items: center; gap: 40px; }
  .decal { width: 200px; padding: 8px; flex: none; }
  .foot-slogan { margin: 0; font-size: 1.9rem; max-width: 12em; }
  .foot-main { grid-column: 8 / 13; }
  .foot { padding-bottom: 40px; }
  .foot-base { grid-template-columns: 1fr auto; align-items: center; }
  .actionbar { display: none; }
}
.lost + .foot { padding-top: 32px; }
.lost + .foot .foot-base { margin-top: 0; border-top: 0; }