/* =========================================================================
   PitStop Garage MK - presentation site

   Visual direction: the block rhythm of a bold auto-repair layout (near-black,
   warm paper, a butter block, one coral accent, heavy condensed headlines),
   with the assembling engine as the hero instead of stock photography.

   The page deliberately alternates dark and light blocks. That is the identity
   of this layout, not an accident: each block is a full-width band, never a
   half-inverted section.
   ========================================================================= */

/* ---------- Fonts (self-hosted, no CDN) ---------------------------------- */

@font-face {
  font-family: "Anton";
  src: url("../fonts/anton-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Jakarta";
  src: url("../fonts/jakarta-variable-latin.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ------------------------------------------------------- */

:root {
  --ink: #0b0b0b;
  --ink-raised: #161616;
  --ink-card: #1d1d1d;

  --paper: #fcf9f3;
  --paper-pure: #ffffff;
  --butter: #fbdfa6;

  /* One accent hue, two documented uses:
     --coral fills surfaces, --coral-ink is the text tint that clears AA on light. */
  --coral: #e8452b;
  --coral-ink: #c4351c;

  --on-dark: #f5f2ed;
  --on-dark-2: #a9a5a0;
  --on-light: #0b0b0b;
  --on-light-2: #4a4643;

  --line-dark: rgba(245, 242, 237, 0.15);
  --line-light: rgba(11, 11, 11, 0.13);

  --font-display: "Anton", "Arial Narrow", "Haettenschweiler", Impact, sans-serif;
  --font-body: "Jakarta", ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;

  --r: 4px;
  --maxw: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --header-h: 76px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset -------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* The rule above sets display on img, which would otherwise beat the browser's
   own [hidden] rule and leave hidden images visible. */
[hidden] {
  display: none !important;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 2px;
}

/* A coral ring around a coral button is not a ring. These three controls are coral
   themselves, so the indicator moves inside and switches to paper. */
.btn--coral:focus-visible,
.to-top:focus-visible,
.skip-link:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: -6px;
}

::selection {
  background: var(--coral);
  color: #fff;
}

/* ---------- Type --------------------------------------------------------- */

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.94;
  text-wrap: balance;
}

.h-hero {
  font-size: clamp(3rem, 7.6vw, 6.1rem);
}

.h-section {
  font-size: clamp(2.15rem, 4.6vw, 3.9rem);
}

/* The missing step. Without it the service rows shouted at the same size as the
   heading that owns them, and the band read as five unrelated sections. */
.h-sub {
  font-size: clamp(1.65rem, 2.9vw, 2.5rem);
}

.h-card {
  font-size: clamp(1.3rem, 1.9vw, 1.6rem);
}

.lead {
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  max-width: 54ch;
}

/* ---------- Helpers ------------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  padding: 0.8rem 1.2rem;
  background: var(--coral);
  color: #fff;
  font-weight: 700;
  border-radius: var(--r);
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 1rem;
}

.icon {
  width: 1.2em;
  height: 1.2em;
  flex: none;
  fill: currentColor;
}

/* Small round label above a section heading. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.15rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  color: var(--coral-ink);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.band--dark .pill {
  color: var(--coral);
}

/* ---------- Bands (the alternating blocks) ------------------------------- */

.band {
  position: relative;
  z-index: 3;
  padding-block: clamp(4.5rem, 10vh, 8rem);
}

.band--dark {
  background: var(--ink);
  color: var(--on-dark);
}

.band--paper {
  background: var(--paper);
  color: var(--on-light);
}

.band--butter {
  background: var(--butter);
  color: var(--on-light);
}

.band--paper .lead,
.band--butter .lead {
  color: var(--on-light-2);
}

.band--dark .lead {
  color: var(--on-dark-2);
}

.band__head {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.band__head .lead {
  margin-top: 1.15rem;
}

/* ---------- Buttons ------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 56px;
  padding: 0 1.6rem;
  border-radius: var(--r);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform 0.16s var(--ease), background-color 0.16s var(--ease),
    color 0.16s var(--ease), border-color 0.16s var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

/* Coral fill with white label. At 18px/700 this clears WCAG AA for large text. */
.btn--coral {
  background: var(--coral);
  color: #fff;
}

.btn--coral:hover {
  background: #d43c22;
}

.btn--outline-light {
  border: 2px solid var(--on-dark);
  color: var(--on-dark);
}

.btn--outline-light:hover {
  background: var(--on-dark);
  color: var(--ink);
}

.btn--outline-dark {
  border: 2px solid var(--on-light);
  color: var(--on-light);
}

.btn--outline-dark:hover {
  background: var(--on-light);
  color: var(--paper);
}

.btn .icon {
  width: 1.1rem;
  height: 1.1rem;
}

/* ---------- Header ------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--paper);
  color: var(--on-light);
  border-bottom: 1px solid var(--line-light);
}

.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.menu-button {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: 46px;
  padding-inline: 0.85rem 1.1rem;
  border-radius: var(--r);
  background: var(--ink);
  color: var(--paper);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.menu-button .icon {
  width: 1.2rem;
  height: 1.2rem;
}

.brand {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: inherit;
}

.brand__mark {
  width: 32px;
  height: 32px;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 1.45rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
}

.brand__name em {
  font-style: normal;
  color: var(--coral-ink);
}

/* --coral-ink is the tint that clears AA on paper. On the dark bands it does not,
   so the brand mark switches to the brighter coral there. */
.footer .brand__name em,
.menu__top .brand__name em {
  color: var(--coral);
}

.header__contact {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1.75rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.header__contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.header__contact a:hover {
  color: var(--coral-ink);
}

.header__contact .icon {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--coral-ink);
}

/* ---------- Overlay menu ------------------------------------------------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--ink);
  color: var(--on-dark);
  padding: 1.5rem 0 3rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
  overflow-y: auto;
}

.menu[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
}

.menu__close {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: 46px;
  padding-inline: 0.85rem 1.1rem;
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.menu__links a {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.6rem);
  text-transform: uppercase;
  line-height: 1;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line-dark);
  transition: color 0.18s var(--ease), padding-left 0.24s var(--ease);
}

.menu__links a:hover {
  color: var(--coral);
  padding-left: 0.75rem;
}

.menu__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: auto;
}

/* ---------- Hero --------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100dvh - var(--header-h));
  display: flex;
  align-items: flex-end;
  padding-block: clamp(5rem, 16vh, 9rem) clamp(3rem, 9vh, 5.5rem);
  background: var(--ink);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 50%;
}

/* Two scrims rather than one: the horizontal pass buys contrast for the copy,
   the vertical pass hands the page over to the band below it. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(11, 11, 11, 0.95) 0%,
      rgba(11, 11, 11, 0.86) 34%,
      rgba(11, 11, 11, 0.42) 66%,
      rgba(11, 11, 11, 0.62) 100%
    ),
    linear-gradient(180deg, rgba(11, 11, 11, 0.6) 0%, transparent 26%, transparent 62%, var(--ink) 100%);
}

.hero__inner {
  position: relative;
}

.hero__title {
  max-width: 13ch;
}

.hero__lead {
  margin-top: 1.4rem;
  max-width: 42ch;
  color: var(--on-dark-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.25rem;
}

/* ---------- Steps -------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.step {
  padding-top: 1.5rem;
  border-top: 3px solid var(--on-light);
}

.step:nth-child(2) {
  border-top-color: var(--coral);
}

.step__no {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--coral-ink);
}

.step__title {
  margin-top: 0.75rem;
}

.step__body {
  margin-top: 0.6rem;
  color: var(--on-light-2);
  font-size: 0.98rem;
}

/* ---------- About -------------------------------------------------------- */

.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.about__body {
  margin-top: 1.25rem;
  color: var(--on-light-2);
  max-width: 46ch;
}

.about__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin-top: 2.25rem;
}

.fact__value {
  font-family: var(--font-display);
  font-size: 2.8rem;
  line-height: 1;
}

.fact__label {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--on-light-2);
  margin-top: 0.35rem;
}

/* ---------- Service rows ------------------------------------------------- */

.srv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line-dark);
}

.srv:first-of-type {
  border-top: 0;
}

.srv--flip .srv__media {
  order: 2;
}

/* Breaks the left-right-left rhythm halfway down, so five service rows do not
   read as one repeated block. */
.srv--wide {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 3vw, 2.75rem);
}

.srv--wide .shot {
  aspect-ratio: 21 / 8;
}

.srv--wide .srv__text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
}

.srv--wide .srv__body {
  margin-top: 0;
}

.srv__body {
  margin-top: 1.1rem;
  color: var(--on-dark-2);
  max-width: 46ch;
}

.srv__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.9rem;
}

.srv__icon {
  width: 2.4rem;
  height: 2.4rem;
  color: var(--coral);
  margin-bottom: 1.1rem;
}

/* ---------- Photo slots -------------------------------------------------- */

.shot {
  position: relative;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 1.5rem;
  aspect-ratio: 4 / 3;
  border-radius: var(--r);
  border: 1px dashed var(--line-dark);
  background: var(--ink-raised);
  color: var(--on-dark-2);
  font-size: 0.85rem;
  overflow: hidden;
}

.band--paper .shot,
.band--butter .shot {
  border-color: var(--line-light);
  background: rgba(11, 11, 11, 0.05);
  color: var(--on-light-2);
}

/* A slot that has a real picture in it stops looking like an empty slot.
   `display: block` matters: the empty slot is a centring grid, and a grid box with
   an aspect ratio refuses to stretch to its column, which left the gallery tiles
   sitting at 203px inside 283px columns. */
.shot--filled {
  display: block;
  border-style: solid;
  border-color: transparent;
  padding: 0;
  background: var(--ink);
}

.shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Gallery band ------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
}

.gallery .shot {
  /* Width has to be definite, otherwise the row height wins and the aspect ratio
     derives a narrower tile than its own column. */
  width: 100%;
  align-self: start;
  aspect-ratio: 3 / 4;
  border-radius: 0;
}

/* ---------- Reasons ------------------------------------------------------ */

.reasons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.reason {
  padding: 1.75rem 1.5rem;
  background: var(--paper-pure);
  border-radius: var(--r);
}

.reason__icon {
  width: 2.2rem;
  height: 2.2rem;
  color: var(--coral-ink);
  margin-bottom: 1.1rem;
}

.reason__body {
  margin-top: 0.6rem;
  color: var(--on-light-2);
  font-size: 0.96rem;
}

/* ---------- Reviews ------------------------------------------------------ */

.reviews {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.rating__score {
  font-family: var(--font-display);
  font-size: clamp(4rem, 9vw, 6.5rem);
  line-height: 0.9;
}

.rating__stars {
  display: flex;
  gap: 0.35rem;
  margin-top: 1rem;
  color: var(--coral);
}

.rating__stars .icon {
  width: 1.35rem;
  height: 1.35rem;
}

.rating__meta {
  margin-top: 1rem;
  color: var(--on-dark-2);
}

.rating__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.75rem;
  font-weight: 700;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--coral);
}

.quotes {
  display: grid;
  gap: 1rem;
}

.quote {
  padding: 1.6rem 1.75rem;
  background: var(--ink-raised);
  border-left: 3px solid var(--coral);
  border-radius: 0 var(--r) var(--r) 0;
}

.quote__body {
  font-size: 1.05rem;
}

.quote__by {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-dark-2);
}

/* ---------- Visit -------------------------------------------------------- */

.visit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.hours__status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.25rem;
  font-size: 1rem;
}

.hours__status .icon {
  color: var(--coral-ink);
}

.hours {
  border: 1px solid var(--line-light);
  border-radius: var(--r);
  background: var(--paper-pure);
  overflow: hidden;
}

.hours__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.05rem 1.4rem;
}

.hours__row + .hours__row {
  border-top: 1px solid var(--line-light);
}

.hours__row[data-today="true"] {
  background: var(--butter);
}

.hours__day {
  color: var(--on-light-2);
}

.hours__row[data-today="true"] .hours__day {
  color: var(--on-light);
  font-weight: 700;
}

.hours__time {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.contact-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line-light);
}

.contact-row:last-of-type {
  border-bottom: 0;
}

.contact-row .icon {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--coral-ink);
  margin-top: 0.15rem;
}

.contact-row__label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--on-light-2);
}

.contact-row__value {
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 0.2rem;
}

a.contact-row__value:hover {
  color: var(--coral-ink);
}

.visit__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.9rem;
}

/* ---------- Footer ------------------------------------------------------- */

.footer {
  position: relative;
  z-index: 3;
  background: var(--ink);
  color: var(--on-dark);
  padding-block: clamp(3rem, 6vh, 4.5rem);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2.5rem;
}

.footer .brand {
  justify-self: start;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-weight: 600;
}

.footer__links a:hover {
  color: var(--coral);
}

.footer__social {
  display: flex;
  gap: 0.7rem;
}

.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  color: var(--on-dark-2);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.social:hover {
  color: var(--paper);
  border-color: var(--paper);
  transform: translateY(-2px);
}

.social:active {
  transform: translateY(0);
}

.social .icon {
  width: 1.3rem;
  height: 1.3rem;
}

.footer__legal {
  width: 100%;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-dark);
  font-size: 0.87rem;
  color: var(--on-dark-2);
}

/* ---------- Back to top -------------------------------------------------- */

.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 45;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}

.to-top[data-shown="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ---------- Reveal ------------------------------------------------------- */

/* Gated on the `js` class set in the head. Without scripting the page must not
   render blank, so the hidden state only applies when something can reveal it. */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal[data-shown="true"] {
  opacity: 1;
  transform: none;
}

/* ---------- Plain page (account) ----------------------------------------- */

.plain {
  min-height: calc(100dvh - var(--header-h));
  display: flex;
  align-items: center;
  padding-block: clamp(3rem, 8vh, 6rem);
  background: var(--paper);
  color: var(--on-light);
}

.plain__inner {
  max-width: 44rem;
}

.plain__body {
  margin-top: 1.25rem;
  color: var(--on-light-2);
  max-width: 54ch;
}

.plain__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.25rem;
}

/* ---------- Responsive --------------------------------------------------- */

@media (max-width: 1080px) {
  .reasons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gallery .shot:nth-child(n + 4) {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 900px) {
  :root {
    --header-h: 68px;
  }

  .header__contact span {
    display: none;
  }

  .header__contact {
    gap: 0.75rem;
  }

  .header__contact a {
    width: 44px;
    height: 44px;
    justify-content: center;
    border: 1px solid var(--line-light);
    border-radius: var(--r);
  }

  .menu-button span {
    display: none;
  }

  .menu-button {
    padding-inline: 0.85rem;
  }

  .hero {
    min-height: 82vh;
    padding-block: clamp(4rem, 12vh, 6rem) clamp(2.5rem, 7vh, 4rem);
  }

  /* Portrait screens crop a landscape photograph badly. Sliding the focal point
     back towards the middle keeps the subject in frame. */
  .hero__media img {
    object-position: 58% 50%;
  }

  .hero__media::after {
    background:
      linear-gradient(90deg, rgba(11, 11, 11, 0.9) 0%, rgba(11, 11, 11, 0.55) 100%),
      linear-gradient(180deg, rgba(11, 11, 11, 0.7) 0%, transparent 22%, transparent 45%, var(--ink) 96%);
  }

  .steps,
  .about,
  .srv,
  .srv--wide .srv__text,
  .reviews,
  .visit {
    grid-template-columns: minmax(0, 1fr);
  }

  .srv--wide .shot {
    aspect-ratio: 16 / 10;
  }

  .srv--flip .srv__media {
    order: 0;
  }
}

@media (max-width: 620px) {
  .reasons,
  .gallery {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery .shot {
    aspect-ratio: 4 / 3;
  }

  .hero__actions .btn,
  .visit__actions .btn {
    flex: 1 1 100%;
  }
}

/* ---------- Reduced motion ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  /* Has to match `.js .reveal`, not `.reveal`. The hidden state is set by the more
     specific selector, so a plain `.reveal` override here never wins and the rule
     silently does nothing. Someone who asked for less motion should not be made to
     scroll before content appears. */
  .js .reveal,
  .reveal {
    opacity: 1;
    transform: none;
  }
}