/* Holland Road Auto Center: one plainly filled-in shop order. Paper ground, tan hairlines, Martian Mono field
   labels, sign red for the bars and actions, charcoal for the street side. Phones first. */
:root {
  --red: #9B1C24; --red-deep: #7A131A; --red-ink: #F6DFE0;
  --paper: #F7F3E8; --paper-2: #EFE8D6; --white: #fff;
  --rule: #CFC3A0; --ink: #1F1D1A; --ink-2: #4F493F;
  --char: #1F1D1A; --char-2: #171513; --char-rule: #45403A; --on-char: #E9E2CF; --on-char-2: #BFB69F;
  --text: "Familjen Grotesk", system-ui, sans-serif;
  --mono: "Martian Mono", ui-monospace, monospace;
  --gut: 20px; --hdr: 64px; --sec: 64px;
  --m-dur: .8s; --m-ease: cubic-bezier(.22, .8, .24, 1); --m-rise: 20px;
}
@media (max-width: 719px) { :root { --m-dur: .68s; --m-rise: 14px; } }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--text); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ol, ul { list-style: none; padding: 0; }
.wrap { width: min(1240px, 100% - var(--gut) * 2); margin-inline: auto; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.how-bar :focus-visible, .visit :focus-visible, .foot :focus-visible, .actionbar :focus-visible, .home .site:not(.is-scrolled) :focus-visible { outline-color: var(--white); }
.skip { position: absolute; left: 12px; top: -80px; z-index: 50; padding: 12px 16px; background: var(--ink); color: var(--white); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* Type roles: display / heading, body, and the mono field label. */
.lab { font: 500 .75rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
h1, h2, .statement, .job, .foot-mark, .big-tel { font-family: var(--text); font-weight: 700; letter-spacing: -.035em; }
h1 { font-size: clamp(2.75rem, 12.4vw, 4.75rem); line-height: .92; }
h2 { font-size: clamp(3rem, 12vw, 4.25rem); line-height: .92; letter-spacing: -.03em; }

/* Hairlines that draw across as their part of the order is filled in. */
.draw { position: relative; }
.draw::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) {
  @media (scripting: enabled) {
    .draw::before { transform: scaleX(0); transition: transform 1.1s var(--m-ease-io) var(--d, 0ms); }
    .draw.is-in::before, .is-in .draw::before { transform: none; }
    html:not(.m-on) .draw::before { animation: m-show 0s 1.8s forwards; }
  }
  /* The hero entrance runs on CSS keyframes from the first paint, on every width (the kit's observer could reveal it
     before the start state was ever painted on wide screens). The photo settles; the red address bar runs in left to
     right, then the white order opens down from it with everything already written on it; the two field rules draw
     last. Done by 1s. */
  .hero .photo { animation: hr-settle 1.4s cubic-bezier(.2, .7, .2, 1) both; }
  .ro { animation: hr-open .62s linear both; }
  .hero .ro .field::before { transform: scaleX(0); animation: hr-draw .3s var(--m-ease-io) 600ms forwards; }
  .hero .ro .field + .field::before { animation-delay: 700ms; }
}
@keyframes hr-settle { from { scale: 1.04; } to { scale: 1; } }
@keyframes hr-open {
  0% { clip-path: inset(0 100% calc(100% - var(--barh)) 0); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  35% { clip-path: inset(0 0 calc(100% - var(--barh)) 0); animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes hr-draw { to { transform: none; } }

/* Buttons and text links */
.btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 22px; background: var(--red); color: var(--white); text-decoration: none; font-weight: 600; font-size: 1.0625rem; --m-fill: var(--red-deep); }
.textlink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; }
.textlink.m-link { background-image: linear-gradient(var(--red), var(--red)); background-size: 100% 2px; background-position: 0 calc(100% - 8px); transition: color .3s ease; }
@media (hover: hover) { .textlink.m-link:hover { color: var(--red); } }

/* ---------- header ---------- */
.site { position: fixed; top: 0; left: 0; right: 0; z-index: 30; background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 var(--rule); transition: translate .5s var(--m-ease), background-color .35s ease, box-shadow .35s ease, color .35s ease; }
.home .site:not(.is-scrolled) { background: transparent; color: var(--white); box-shadow: none; }
.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--hdr); }
.mark { display: inline-block; padding: 13px 0; font: 700 1.125rem/1 var(--text); letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.mark span { font-weight: 400; }
@media (max-width: 519px) { .mark { padding: 12px 0; font-size: 1.0625rem; line-height: 1.02; } .mark span { display: block; } }
.site nav { display: flex; align-items: center; gap: 28px; }
.site nav a { display: inline-flex; align-items: center; min-height: 44px; font: 500 .75rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.site nav .tel { font: 600 .9375rem/1 var(--text); font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; white-space: pre; }
.site .nl { display: none; }

/* ---------- hero: the bay photo full-bleed, a white order clipped into its lower corner ---------- */
.hero { position: relative; overflow-x: clip; }
.hero .photo { height: 50svh; min-height: 340px; }
.hero .photo::after { content: ""; position: absolute; inset: 0 0 auto; height: 128px; background: linear-gradient(rgba(20, 18, 15, .6), rgba(20, 18, 15, 0)); pointer-events: none; }
.hero .photo img { object-position: 66% 42%; }
.hero .photo img[data-parallax] { scale: 1.06; }
@media (max-width: 1023px) { .hero .photo img[data-parallax] { scale: 1.28; transform-origin: 62% 80%; } }
.ro { position: relative; z-index: 2; margin: -104px 16px 0; background: var(--white); border: 1px solid var(--rule); --barh: 36px; }
.bar { display: flex; justify-content: space-between; gap: 12px; margin: -1px -1px 0; padding: 10px 18px; background: var(--red); color: var(--white); font: 500 .75rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.bar-city { display: none; }
.ro .body { padding: 24px 18px 24px; }
.lead { margin-top: 14px; max-width: 30ch; font-size: 1.125rem; line-height: 1.4; color: #3A3631; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 20px; }
.fields .field { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 18px; }
.fields dd { font-weight: 600; text-align: right; }

/* ---------- services: the order's line items, keyed to the bay doors.
   The real bay-signs strip stays pinned while the rows pass; the row at mid-screen lights its bay. ---------- */
.lines { padding: var(--sec) 0 calc(var(--sec) + var(--tail)); --tail: 300px; }
/* The pinned door elevation lets go 300px before the list ends, so Imports and Inspection are never left under it. */
.keygrid { display: flow-root; --sh: 150px; }
.keyside { display: contents; }
.signh { display: inline-block; margin-left: var(--gut); padding: 10px 16px 8px; background: var(--white); border: 1px solid var(--rule); border-bottom: 0; color: var(--red); font-size: 2.5rem; line-height: 1; letter-spacing: .01em; text-transform: uppercase; }
/* The photo is wider than its window: on phones it pans from door 01 to 06 as it scrolls by, on desktop to the lit bay. */
.win { position: relative; overflow: hidden; }
/* A hairline frame keeps the strip's corners square where the white truck in the photo meets the paper. */
.win::after { content: ""; position: absolute; inset: 0; z-index: 1; border: 1px solid rgba(31, 29, 26, .22); pointer-events: none; }
.win, .strip-ph, .strip-ph img { border-radius: 0; }
.pan { width: calc(var(--sh) * 2000 / 552); }
.strip-ph { height: var(--sh); }
.strip-ph img { width: 100%; height: 100%; object-fit: cover; }
/* All fourteen doors under one roofline, labelled with their painted signs; the row being read fills its doors red. */
/* 16px of paper under its 2px rule, so the rule never sits on a row's hairline. */
.elev { position: sticky; top: 0; z-index: 4; padding: 10px var(--gut) 28px; background: var(--paper); transition: top .5s var(--m-ease); }
.elev::after { content: ""; position: absolute; left: var(--gut); right: var(--gut); bottom: 16px; height: 2px; background: var(--ink); }
body:has(.site:not(.is-hidden)) .elev { top: var(--hdr); }
.elev-now { font: 500 .75rem/16px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--red); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.elev-sign { color: var(--ink); }
.elev-sign::before { content: "·"; margin: 0 .6em; color: var(--ink-2); }
.doors { display: grid; grid-template-columns: repeat(14, 1fr); align-items: end; gap: 3px; height: 34px; margin-top: 6px; padding-top: 4px; border-top: 2px solid var(--ink); }
.doors li { display: grid; align-items: end; height: 28px; }
.doors b { display: none; }
.doors i { position: relative; isolation: isolate; display: grid; place-items: end center; height: 28px; padding-bottom: 3px; border: 1px solid var(--rule); font: 500 .625rem/1 var(--mono); font-style: normal; font-variant-numeric: tabular-nums; color: var(--ink-2); transition: border-color .18s ease, color .18s ease; }
/* The lit door fills like a roll-up door coming down, and rolls back up when the next row is read. */
.doors i::after { content: ""; position: absolute; inset: -1px; z-index: -1; background: var(--red); clip-path: inset(0 0 100% 0); transition: clip-path .18s ease-in; }
.doors .is-on i { border-color: var(--red); color: var(--white); transition-duration: .26s; }
.doors .is-on i::after { clip-path: inset(0); transition: clip-path .26s cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) { .doors i, .doors i::after { transition: none; } }
.key-now { display: none; }
.keylist { margin-bottom: calc(var(--tail) * -1); padding-inline: var(--gut); }
.items { margin-top: 0; }
.item { display: grid; grid-template-columns: 4.25rem 1fr; align-items: baseline; gap: 8px; padding: 20px 0 18px; }
.item::before { top: auto; bottom: 0; }
.item .bay { font: 500 .75rem/1.4 var(--mono); color: var(--ink-2); transition: color .3s ease; }
.item .job { font-size: clamp(1.875rem, 8.4vw, 3.5rem); line-height: 1.02; letter-spacing: -.03em; }
.item.is-on .bay { color: var(--red); }
.items-note { margin-top: 20px; }

/* ---------- how it works: the red bar of the order, then its three steps ---------- */
.how { padding-bottom: var(--sec); }
.how-bar { padding: var(--sec) 0 120px; background: var(--red); color: var(--white); }
.how-lab { color: var(--red-ink); }
.statement { margin-top: 12px; font-size: clamp(3.5rem, 16vw, 9rem); line-height: .92; letter-spacing: -.045em; }
.steps { position: relative; margin-top: -56px; background: var(--white); border: 1px solid var(--rule); }
.step { padding: 24px 20px 28px; }
.step:first-child::before { display: none; }
.step .lab { color: var(--red); }
.step p { margin-top: 10px; font-size: 1.25rem; line-height: 1.4; }
.step-main p:first-of-type { font-size: clamp(1.625rem, 6.6vw, 2.75rem); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; }
.step-main .sub { margin-top: 14px; font-size: 1.0625rem; color: var(--ink-2); }
/* Desktop only: a ruled field at the foot of steps 1 and 3, like the hero order's fields. */
.sfield { display: none; }

/* ---------- reviews: two customer notes on the same order ---------- */
.notes { padding: var(--sec) 0; background: var(--paper-2); }
.quotes { display: grid; gap: 48px; margin-top: 40px; }
.quote { padding-top: 24px; }
.quote blockquote p { font-weight: 400; font-size: 1.5rem; line-height: 1.35; letter-spacing: -.012em; }
.quote strong { font-weight: 600; }
@media (max-width: 419px) { .q-long blockquote p { font-size: 1.375rem; line-height: 1.4; } }
.quote figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 20px; }
.who { font-weight: 600; }
.src { font: 400 .75rem/1.4 var(--mono); letter-spacing: .04em; color: var(--ink-2); }

/* ---------- visit: the street side in charcoal, hours on the sign's letter strips ---------- */
.visit { display: grid; overflow: clip; border-bottom: 3px solid var(--red); background: var(--char); color: var(--on-char); }
.visit-ph { aspect-ratio: 1; }
.visit-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 42%; }
.visit-tx { padding: 0 var(--gut) var(--sec); }
.visit-head { position: relative; z-index: 2; margin: -48px calc(var(--gut) * -1) 0; padding: 28px var(--gut) 0; background: var(--char); }
.visit .lab { color: var(--on-char-2); }
.visit h2 { color: var(--paper); }
.letters { display: grid; gap: 10px; margin-top: 32px; }
.letters li { display: flex; align-items: center; gap: 16px; }
.strip-l { display: inline-block; padding: .36em .55em .3em; background: var(--white); color: var(--ink); font: 700 clamp(1.375rem, 6vw, 2.125rem)/1 var(--text); letter-spacing: .05em; text-transform: uppercase; box-shadow: inset 0 3px 0 #DAD4C6, inset 0 -3px 0 #DAD4C6; }
.letters .today .strip-l { box-shadow: inset 8px 0 0 var(--red), inset 0 3px 0 #DAD4C6, inset 0 -3px 0 #DAD4C6; padding-left: calc(.55em + 8px); }
.today-mark { font: 500 .75rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-char); }
.big-tel { margin-top: 48px; font-size: clamp(2.5rem, 11vw, 4.5rem); line-height: 1; letter-spacing: -.035em; color: var(--white); }
.big-tel a { text-decoration: none; background-size: 0 3px; }
.big-tel a:focus-visible, .big-tel a:active { background-size: 100% 3px; }
@media (hover: hover) { .big-tel a:hover { background-size: 100% 3px; } }
.addr-block { margin-top: 18px; }
.addr { font-size: 1.125rem; }
.obtn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; margin-top: 20px; padding: 0 24px; border: 1px solid var(--on-char); color: var(--on-char); text-decoration: none; font-weight: 600; --m-fill: var(--on-char); transition: color .3s ease; }
@media (hover: hover) { .obtn:hover { color: var(--char); } }
.obtn:active { color: var(--char); }
.facts { margin-top: 32px; }
.facts div { display: grid; grid-template-columns: 6.5rem 1fr; align-items: baseline; gap: 12px; padding: 14px 0 0; }
.facts .draw::before { background: var(--char-rule); }
.facts dt { padding-top: 2px; }

/* ---------- footer: the bottom of the form ---------- */
.foot { background: var(--char-2); color: var(--on-char); padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
.foot-bar { display: flex; text-decoration: none; justify-content: space-between; gap: 12px; padding: 12px max(var(--gut), (100% - 1240px) / 2); background: var(--red); color: var(--white); font: 500 .75rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.foot-bar span + span { display: none; }
@media (hover: hover) { .foot-bar:hover { background: var(--red-deep); } }
.foot-mark { margin: 32px 0 8px; font-size: clamp(2rem, 8.2vw, 4rem); line-height: .92; color: var(--white); }
.foot-mark span { display: block; font-weight: 400; }
.foot-line { display: flex; flex-wrap: wrap; gap: 0 10px; font: 400 .8125rem/1.5 var(--mono); letter-spacing: .02em; }
.foot-line > a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-line .fl-hours { flex-basis: 100%; }
/* Martian Mono's en dash reads as a hyphen, so the hours are set in Familjen with the same dash Visit uses. */
.foot-line .fl-hours { font: 500 .9375rem/1.5 var(--text); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.foot-line .nd { margin: 0 .08em; }
@media (min-width: 420px) {
  .foot-line .fl-hours { flex-basis: auto; display: inline-flex; align-items: center; }
  .foot-line .fl-hours::before { content: "·"; margin-right: 10px; }
}
.foot-end { line-height: 1.5; }
.foot-end { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--char-rule); font-size: 1rem; color: var(--on-char-2); }
.legal-links { display: flex; flex-wrap: wrap; gap: 0 24px; color: var(--on-char); }
.legal-links a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- phone action bar: the order's red bar ---------- */
.actionbar { position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; background: var(--red); padding-bottom: env(safe-area-inset-bottom); }
.actionbar a { display: flex; align-items: center; justify-content: center; min-height: 56px; color: var(--white); text-decoration: none; font: 500 .8125rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; --m-fill: var(--red-deep); }
.actionbar a + a { border-left: 1px solid rgba(255, 255, 255, .35); }

/* ---------- policy pages and 404 (no hero under the fixed header) ---------- */
main.legal { padding-top: 104px; }
.lost { min-height: 100svh; display: grid; align-items: center; padding: 120px 0 96px; background: var(--paper); }
.lost .ro { margin: 0; max-width: 620px; }
.lost h1 { font-size: clamp(2.75rem, 11vw, 4.5rem); }

/* ---------- wider screens ---------- */
@media (min-width: 760px) {
  :root { --gut: 32px; }
  .site .nl { display: inline-flex; }
  .actionbar { display: none; }
  .foot { padding-bottom: 32px; }
  .foot-bar span + span { display: inline; }
}
@media (min-width: 1024px) {
  :root { --gut: 40px; }
  body { font-size: 18px; }
  .hero .photo { height: min(100svh, 940px); min-height: 640px; }
  /* Desktop rests on the whole receding row of doors at 1.0 (the 1440 file is never enlarged) and only settles in. */
  .hero .photo img { object-position: 55% 88%; }
  .hero .photo img[data-parallax] { scale: 1; translate: none !important; animation: none !important; }
  .ro { position: absolute; left: max(var(--gut), (100% - 1240px) / 2); bottom: 32px; width: 560px; margin: 0; --barh: 40px; }
  .bar { padding: 12px 32px; }
  .bar-city { display: inline; }
  .ro .body { padding: 28px 32px 24px; }
  h1 + .lead { margin-top: 16px; font-size: 1.375rem; line-height: 1.4; }
  .actions { margin-top: 28px; }
  .fields { display: grid; grid-template-columns: 1fr 1fr; }
  .fields .field { flex-direction: column; justify-content: flex-start; gap: 4px; padding: 14px 32px 16px; }
  .fields .field + .field { border-left: 1px solid var(--rule); }
  .fields dd { text-align: left; }

  /* Services: the key pinned in the left half, the line items in the right. */
  :root { --sec: 140px; }
  .lines { --tail: 0px; }
  .keygrid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; width: min(1240px, 100% - var(--gut) * 2); margin-inline: auto; }
  .keygrid { --sh: 200px; }
  .keyside { display: block; grid-column: 1 / 7; align-self: start; position: sticky; top: 32px; transition: top .5s var(--m-ease); }
  body:has(.site:not(.is-hidden)) .keyside { top: calc(var(--hdr) + 32px); }
  .signh { margin-left: 0; font-size: 3rem; padding: 12px 20px 10px; }
  .pan { transition: translate .7s var(--m-ease); }
  .elev { position: static; margin-top: 20px; padding: 0; background: none; border: 0; }
  .elev-now { display: none; }
  .elev::after { display: none; }
  .doors { gap: 6px; height: auto; margin-top: 0; padding-top: 6px; }
  .doors li { grid-template-rows: auto 56px; height: auto; order: 0; }
  .doors b { display: flex; align-items: center; height: 104px; margin-bottom: 8px; white-space: nowrap; writing-mode: vertical-rl; rotate: 180deg; justify-self: center; font: 500 .625rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); transition: color .3s ease; }
  .doors i { height: 56px; padding-bottom: 6px; font-size: .75rem; }
  .doors .is-on b { color: var(--red); }
  .key-now { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
  .key-num { font: 500 7.5rem/.9 var(--mono); letter-spacing: -.02em; color: var(--red); }
  .keylist { grid-column: 8 / 13; padding: 0; }
  .items { border-top: 2px solid var(--ink); }
  .item { grid-template-columns: 5rem 1fr; gap: 16px; padding: 30px 0 28px; }
  .item .job { font-size: clamp(2.5rem, 3.6vw, 3.5rem); }
  .items-note { margin-top: 24px; margin-left: calc(5rem + 16px); }

  .how { padding-bottom: 140px; }
  .how-bar { padding: 120px 0 176px; }
  .how-head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; align-items: start; }
  .how-lab { grid-column: 1 / 3; padding-top: 1.6rem; }
  .statement { grid-column: 3 / 13; margin-top: 0; }
  .steps { display: grid; grid-template-columns: 3fr 6fr 3fr; margin-top: -88px; }
  /* Step 2 sets the panel's height; steps 1 and 3 read from the top and end on a ruled field. */
  .step { display: flex; flex-direction: column; padding: 40px 32px; }
  .step p { margin-top: 16px; font-size: 1.5rem; line-height: 1.35; }
  .step-main p:first-of-type { font-size: 2.75rem; line-height: 1.12; }
  .step-main .sub { margin-top: 16px; font-size: 1.25rem; line-height: 1.45; color: #3A3631; }
  .sfield { display: flex; flex-direction: column; gap: 4px; margin: auto -32px -40px; padding: 14px 32px 16px; border-top: 1px solid var(--rule); }
  .step:has(.sfield) p:last-of-type { margin-bottom: 32px; }
  .sfield dd { font-size: 1.25rem; font-weight: 600; line-height: 1.35; }
  .step.draw::before { display: none; }
  .step + .step { border-left: 1px solid var(--rule); }

  .notes { padding: 140px 0; }
  /* One rule across the container under the heading; both quotes end on the same baseline. */
  .quotes { grid-template-columns: repeat(12, 1fr); align-items: end; gap: 24px; margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--rule); }
  .quote { padding-top: 0; }
  .quote.draw::before { display: none; }
  .q-long { grid-column: 1 / 9; }
  .q-short { grid-column: 9 / 13; padding-left: 24px; align-self: end; }
  .quote blockquote p { font-size: 2.125rem; }

  .visit { grid-template-columns: 480px 1fr; }
  .visit-ph { aspect-ratio: auto; position: relative; }
  .visit-ph img { position: absolute; inset: 0; object-position: 30% 40%; }
  /* The charcoal side sets the height (about 760px): address and directions on the left, the two facts beside them. */
  .visit-tx { padding: 96px max(var(--gut), (100vw - 1240px) / 2) 96px 80px; }
  .visit-head { margin: 0; padding: 0; background: none; }
  .letters { margin-top: 40px; }
  .where { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; align-items: start; margin-top: 48px; }
  .big-tel { grid-column: 1 / -1; margin-top: 0; }
  .addr-block { margin-top: 20px; }
  .addr { font-size: 1.375rem; font-weight: 500; line-height: 1.35; color: var(--paper); }
  .obtn { width: 100%; margin-top: 24px; }
  .facts { margin-top: 20px; }
  .facts div { grid-template-columns: 1fr; gap: 4px; padding: 14px 0 12px; }

  .foot-mark { margin-top: 64px; }
  .lost .ro { position: relative; left: auto; bottom: auto; width: auto; }
}

/* ---------- round 7 fixes ---------- */
.addr-lab { display: none; }
.foot-line { font: 500 .9375rem/1.5 var(--text); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.foot-cr { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 419px) { .q-short blockquote p { font-size: 1.25rem; line-height: 1.45; } }
@media (min-width: 1024px) {
  .foot-cr { display: block; }
  .foot-cr p { display: inline; }
  .lines { padding-bottom: 96px; }
  .item { grid-template-columns: 4.5rem 1fr; gap: 24px; }
  .item .bay { font-size: 1rem; }
  .items-note { margin-left: calc(4.5rem + 24px); }
  .visit .lab { letter-spacing: .12em; }
  .addr-lab { display: block; margin-bottom: 4px; }
  .addr-block { padding-top: 14px; border-top: 1px solid var(--char-rule); }
  .addr { font-size: 1.625rem; }
  .step-main .sub { font-size: 1.375rem; line-height: 1.45; }
  .facts dd { font-size: 1.375rem; line-height: 1.35; }
  .obtn { min-height: 64px; }
}

/* ---------- round 8 fixes (finish part) ---------- */
.foot-line .nd { margin: 0; }
.visit-tx { padding-bottom: 48px; }
.visit-ph { aspect-ratio: 4 / 5; }
.visit-ph img { object-position: 38% 22%; }
@media (max-width: 1023px) { .step:not(.step-main) p { font-size: 1.1875rem; line-height: 1.4; } }
@media (min-width: 1024px) {
  .visit-ph { aspect-ratio: auto; }
  .visit-ph img { object-position: 30% 25%; }
  .visit-tx { padding-bottom: 96px; }
  .foot-mark { margin-bottom: 20px; }
  .foot-line { gap: 0 24px; font-size: 1.0625rem; }
  .foot-line .fl-hours { font-size: 1.0625rem; }
  .foot-line .fl-hours::before { content: none; }
  .item .bay { color: #3A3631; }
  .item.is-on .bay { color: var(--red); }
}
@media (min-width: 1024px) { .item { align-items: baseline; } }