/* Hallmark · shape: Catalogue (the shop's services as a held index), swapped from Letter: no words from the owner to write it in · genre: editorial · theme: Specimen (deal 3/3, seed neighbourhood-laundry-dry-cleaning-c47a·99bad701·2026-11-10·r0) · redesign: full · draw: 457611 · job: visit
 * hero: Ledge · nav: edge-aligned (wordmark, live hours, one action) · footer: colophon block · imagery: the owner's Google Flow photographs and two films · signature: the Kye's wordmark as a window onto the wash, zoomed through the K on scroll
 * axes: light/high-contrast-serif/warm · posture: restrained · contrast: pass · fold: pass · brand: the red of the shop's sign replaces the theme's ink blue · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R3 V4 · weakest: R, the owner asked for motion on every scroll; each pattern sits on structure (the wordmark, the frame, the film, the guides), never on prose */
/* Hallmark · answered F8 · the owner's brief asks for scroll-linked motion in every section, so the page runs several patterns, each on one structural element */
/* Hallmark · waive 59 · the marquee band sits flush under the hero film · the seam between the wash and the services index is the point of the band */
/* Hallmark · waive 77 · one marquee band, once a page · the shop's service names in Bodoni at poster size, moving with the scroll between the film and the index */
/* Hallmark · dismissed 25 · the quote is one display line of seven words, not running prose */
/* Hallmark · dropped the in-page section links and the phone menu · the nav is edge-aligned: wordmark, live hours, WhatsApp */

@import url("./tokens.css");
@import url("./base.css");

/* ---------- Lenis ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

body { font-size: var(--text-md); }
h1, h2 { font-variation-settings: "opsz" var(--display-optical); line-height: 1.02; }
h3 { font-optical-sizing: auto; line-height: 1.15; }
/* Bodoni's hyphen is a hairline at display size; the body face's hyphen reads as one */
.hy { display: inline-block; font-family: var(--font-body); font-weight: 400; font-size: 0.6em; transform: translateY(-0.18em); margin-inline: 0.02em -0.06em; }
.lead { color: var(--color-ink-2); }

a { text-decoration-color: var(--color-accent); text-underline-offset: 0.18em; transition: text-decoration-thickness var(--dur-short) var(--ease-out); }
a:hover { text-decoration-thickness: 2px; }

.skip {
  position: fixed; left: var(--space-sm); top: var(--space-sm); z-index: var(--z-tooltip);
  padding: var(--space-sm) var(--space-md); background: var(--color-ink); color: var(--color-paper);
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

/* ---------- Controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--space-lg);
  border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-card);
  font-family: var(--font-body); font-size: var(--text-md); font-weight: 500; line-height: 1;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.btn--primary { background: var(--color-ink); color: var(--color-paper); }
.btn--secondary { background: transparent; color: var(--color-ink); }
.btn--nav { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
@media (hover: hover) {
  .btn--primary:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
  .btn--secondary:hover { background: var(--color-ink); color: var(--color-paper); }
}
.actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* ---------- Live hours ---------- */
.status { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.status.is-open::before, .status.is-closed::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--color-success); }
.status.is-closed::before { background: var(--color-muted); }
.status--lg { font-size: var(--text-md); }

/* ---------- Navigation ---------- */
.nav {
  --nav-fg: var(--color-ink);
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-sticky-nav);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg);
  height: var(--nav-h);
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  color: var(--nav-fg);
  transition: color var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out);
}
.nav[data-tone="ink"] { --nav-fg: var(--color-paper); --logo-ink: var(--color-paper); --logo-hook: var(--color-accent-on-ink); }
.nav.is-hidden { transform: translateY(-110%); }
.nav.is-solid { background: var(--color-paper); box-shadow: inset 0 -1px 0 var(--color-rule); }
.nav.is-solid[data-tone="ink"] { background: var(--color-ink); box-shadow: inset 0 -1px 0 var(--color-rule-ink); }
.nav__logo { display: block; color: inherit; }
.nav__logo svg { width: calc(34px * 2.4163); height: 34px; }
.nav__end { display: flex; align-items: center; gap: var(--space-lg); }
.nav__status { color: inherit; text-decoration: none; white-space: nowrap; }
.nav[data-tone="ink"] .btn--primary { background: var(--color-paper); border-color: var(--color-paper); color: var(--color-ink); }

/* ---------- Intro: the logo reveal ---------- */
.intro { display: none; }
.js .intro {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-content: center; justify-items: center; gap: var(--space-lg);
  background: var(--color-paper);
  animation: intro-failsafe 1ms 7s forwards;
}
.js.static .intro { display: none; }
.intro__mark { width: min(78vw, 920px); height: auto; aspect-ratio: 2420 / 1045; overflow: visible; }
.intro__letters path { fill: var(--color-ink); fill-opacity: 0; stroke: var(--color-ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.intro__hook path { fill: none; stroke: var(--color-accent); stroke-width: 34; stroke-linecap: round; }
.intro__hook circle { fill: var(--color-accent); }
.intro__line { font-size: var(--text-md); font-weight: 500; color: var(--color-muted); }
@keyframes intro-failsafe { to { visibility: hidden; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .js .intro { display: none; } }

/* ==========================================================================
   Hero: Ledge. The wordmark is a window onto the wash.
   ========================================================================== */
.hero { position: relative; }
.hero__stage { position: relative; min-height: 100svh; overflow: clip; background: var(--color-paper); }
.hero__video { display: none; position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__window { display: none; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.motion .hero__stage { background: var(--color-ink); color: var(--color-paper); }
.motion .hero__content { color: var(--color-ink); }
.motion .hero__video, .motion .hero__window { display: block; }
.hero__logo { display: block; width: 100%; height: auto; }
.motion .hero__logo { visibility: hidden; }
.hero__content {
  position: relative; z-index: 2;
  height: 100svh; min-height: 600px;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: var(--space-lg);
  padding-top: calc(var(--nav-h) + var(--space-xs));
  padding-bottom: var(--space-xl);
}
/* The mark fills the hero's tall field; the wordmark inside takes the largest size that fits it, centred top to bottom. */
.hero__mark { position: relative; width: 100%; height: 100%; container-type: size; display: grid; align-items: center; justify-items: start; }
.hero__mark .hero__logo { width: min(100cqw, 100cqh * 2.3158); aspect-ratio: 2420 / 1045; }
.hero__paper { fill: var(--color-paper); }
.hero__hook path { fill: none; stroke: var(--color-accent); stroke-width: 34; stroke-linecap: round; }
.hero__hook circle { fill: var(--color-accent); }
.hero__base { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; }
.hero__title { grid-column: 1 / span 8; max-width: 19ch; font-size: var(--text-display); }
.hero__aside { grid-column: 9 / span 4; display: grid; gap: var(--space-lg); }

.motion .hero { height: 320svh; }
.motion .hero__stage { position: sticky; top: 0; height: 100svh; min-height: 0; }

/* ---------- Marquee ---------- */
.marquee {
  position: relative; z-index: var(--z-base);
  overflow: clip; background: var(--color-paper-2);
  border-block: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-lg);
}
.marquee__row {
  display: flex; align-items: center; gap: var(--space-xl);
  width: max-content; white-space: nowrap;
  font-family: var(--font-display); font-variation-settings: "opsz" 96;
  font-size: clamp(3rem, 7vw, 7.5rem); line-height: 1.1; letter-spacing: var(--tracking-display);
  will-change: transform;
}
.marquee__hook { width: 0.3em; height: 0.4em; flex: none; overflow: visible; }
.marquee__hook path { fill: none; stroke: var(--color-accent); stroke-width: 30; stroke-linecap: round; }

/* ==========================================================================
   Services: a held frame beside the index
   ========================================================================== */
.services { position: relative; z-index: var(--z-base); background: var(--color-paper); padding-block: var(--section-gap) var(--section-gap-l); }
.services__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
.frame { grid-column: 1 / span 5; margin: 0; position: sticky; top: calc(var(--nav-h) + var(--space-lg)); }
.frame__stack { display: grid; gap: var(--space-md); }
.frame__stack img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; outline: var(--rule-hair) solid var(--color-rule); outline-offset: -1px; }
.motion .frame__stack { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-paper-2); }
.motion .frame__stack img { position: absolute; inset: 0; height: 100%; }
.services__body { grid-column: 7 / span 6; }
.services__head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.svc { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.svc__row {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-lg); align-items: baseline;
  padding-block: var(--space-xl);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.svc__row h3 { font-size: clamp(1.75rem, 1.6vw + 1rem, 2.6rem); line-height: 1.1; }
.svc__local { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); white-space: nowrap; }
.svc__text { grid-column: 1 / -1; margin-top: var(--space-xs); max-width: 46ch; color: var(--color-ink-2); }
.svc__row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-long) var(--ease-out);
}
.motion .svc__row h3 { color: var(--color-muted); transition: color var(--dur-long) var(--ease-out); }
.motion .svc__row.is-on h3 { color: var(--color-ink); }
.motion .svc__row.is-on::after { transform: scaleX(1); }
.services__ask { margin-top: var(--space-xl); max-width: 52ch; }

/* ==========================================================================
   Film: the dry-cleaning rail, on the ink band
   ========================================================================== */
.film { position: relative; z-index: var(--z-base); background: var(--color-ink); color: var(--color-paper); padding-block: var(--section-gap-s); }
.film .lead { color: var(--color-muted-ink); }
.film__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.film__head h2 { grid-column: 1 / span 7; }
.film__head .lead { grid-column: 9 / span 4; }
.film__frame { aspect-ratio: 21 / 9; overflow: hidden; background: var(--color-ink-2); }
.film__video { width: 100%; height: 100%; object-fit: cover; }
.film :focus-visible { outline-color: var(--color-accent-on-ink); }

/* ==========================================================================
   Steps: four numerals on their guides
   ========================================================================== */
.steps { position: relative; z-index: var(--z-base); background: var(--color-paper); padding-block: var(--section-gap-l) var(--section-gap); }
.steps h2 { margin-bottom: var(--space-2xl); }
.steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); }
.step { display: grid; align-content: start; gap: var(--space-sm); }
.step__num {
  position: relative; display: block; margin-bottom: var(--space-md);
  font-family: var(--font-display); font-variation-settings: "opsz" 96;
  font-size: clamp(6rem, 9vw, 10rem); line-height: 1;
  color: var(--color-ink);
}
.step__guide { position: absolute; left: 0; right: 0; height: 1px; background: var(--color-guide); transform-origin: left; }
/* Bodoni Moda's figure height (0.75em) and baseline (0.863em) inside a line-height of 1 */
.step__guide--cap { top: 0.113em; }
.step__guide--base { top: 0.863em; }
.step h3 { font-size: var(--text-title); }
.step p { color: var(--color-ink-2); max-width: 28ch; }
.motion .step__num { color: var(--color-rule); transition: color var(--dur-long) var(--ease-out); }
.motion .step.is-on .step__num { color: var(--color-ink); }

/* ==========================================================================
   Record: figures and the Bklit charts, on the paper band
   ========================================================================== */
.record { position: relative; z-index: var(--z-base); background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule); padding-block: var(--section-gap-s); }
.record__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; }
.record__head h2 { grid-column: 1 / span 7; }
.record__head .lead { grid-column: 9 / span 4; }
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--space-2xl) 0 var(--space-3xl); border-top: var(--rule-hair) solid var(--color-ink); }
.figure-cell { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--space-sm); padding: var(--space-lg) var(--space-lg) 0 0; border-right: var(--rule-hair) solid var(--color-rule); }
.figure-cell + .figure-cell { padding-left: var(--space-lg); }
.figure-cell:last-child { border-right: 0; }
.figure-cell dt { max-width: 30ch; font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.figure-cell dd { margin: 0; font-variant-numeric: tabular-nums; font-family: var(--font-display); font-variation-settings: "opsz" 96; font-size: var(--text-figure); line-height: 1; letter-spacing: var(--tracking-display); }
.charts { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.chart-fig { margin: 0; min-width: 0; display: grid; align-content: start; gap: var(--space-lg); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-ink); }
.chart-fig--growth { grid-column: 1 / -1; }
.chart-fig--topics { grid-column: 1 / span 5; }
.chart-fig--busy { grid-column: 6 / span 7; }
.chart-fig figcaption { display: grid; gap: var(--space-2xs); }
.chart-fig__title { font-family: var(--font-display); font-size: var(--text-title); line-height: 1.15; }
.chart-fig__note { font-size: var(--text-sm); color: var(--color-muted); }
.chart { position: relative; min-width: 0; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.chart__fallback { color: var(--color-muted); padding-block: var(--space-xl); }
.kc-busy { display: grid; gap: var(--space-md); }
.kc-tabs { display: inline-flex; flex-wrap: wrap; justify-self: start; border: var(--rule-hair) solid var(--color-ink); }
.kc-tab {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  min-height: 44px; padding: 0 var(--space-md);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted);
  background: transparent; border: 0; cursor: pointer;
  box-shadow: inset 0 -2px 0 transparent;
  transition: color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.kc-tab + .kc-tab { border-left: var(--rule-hair) solid var(--color-rule); }
.kc-tab[aria-selected="true"] { color: var(--color-ink); background: var(--color-paper); box-shadow: inset 0 -2px 0 var(--color-ink); }
.kc-tab:hover { color: var(--color-ink); }
.kc-tab:active { transform: translateY(1px); }
.kc-tab:disabled { opacity: 0.5; cursor: not-allowed; }
.kc-tab-dot { width: 6px; height: 6px; background: var(--color-accent); }
.kc-note { font-size: var(--text-sm); color: var(--color-muted); }
.kc-note b { font-weight: 500; color: var(--color-ink); }
.kc-swatch { display: inline-block; width: 9px; height: 9px; margin-right: var(--space-2xs); background: var(--color-accent); }

/* ==========================================================================
   Reviews
   ========================================================================== */
.reviews { position: relative; z-index: var(--z-base); background: var(--color-paper); padding-block: var(--section-gap-l) var(--section-gap); overflow: clip; }
.quote { margin: 0; }
.quote__text {
  max-width: 15ch;
  font-family: var(--font-display); font-variation-settings: "opsz" 96;
  font-size: clamp(3.25rem, 8.4vw, 9.5rem); line-height: 1.02; letter-spacing: -0.025em;
  overflow-wrap: break-word; min-width: 0; text-wrap: balance;
}
.quote__by { margin-top: var(--space-lg); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.reviews__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-md); margin-top: var(--space-3xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.reviews__note { color: var(--color-ink-2); }
.reviews__all { font-weight: 500; }
.rail { margin-top: var(--space-xl); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--color-rule-2) transparent; padding-bottom: var(--space-md); cursor: grab; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail__track {
  list-style: none; margin: 0;
  display: flex; gap: var(--gap-columns); width: max-content;
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
}
.note {
  width: clamp(270px, 26vw, 380px); min-height: 280px; scroll-snap-align: start;
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-md);
  padding: var(--space-xl);
  background: var(--color-paper-2); outline: var(--rule-hair) solid var(--color-rule); outline-offset: -1px;
}
.note__tag { font-size: var(--text-sm); font-weight: 500; color: var(--color-accent); }
.note__text { font-family: var(--font-display); font-optical-sizing: auto; font-size: var(--text-xl); line-height: 1.32; }
.note__when { font-size: var(--text-sm); color: var(--color-muted); }

/* ==========================================================================
   Visit: the close
   ========================================================================== */
.visit { position: relative; z-index: var(--z-base); background: var(--color-paper); padding-block: var(--section-gap) var(--section-gap-l); border-top: var(--rule-hair) solid var(--color-rule); }
.visit__address { max-width: none; font-size: clamp(2.75rem, 7.2vw, 8.5rem); line-height: 1.02; letter-spacing: -0.025em; }
.visit__line { display: block; white-space: nowrap; }
.visit__city { margin-top: var(--space-md); font-size: var(--text-lead); color: var(--color-ink-2); }
.visit__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); margin-top: var(--space-3xl); align-items: start; }
.visit__info { grid-column: 1 / span 5; display: grid; gap: var(--space-xl); justify-items: start; }
.visit__info > .hours { justify-self: stretch; }
.hours { width: 100%; border-collapse: collapse; border-top: 3px double var(--color-rule-2); }
.hours caption { caption-side: top; text-align: left; padding-bottom: var(--space-sm); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.hours th, .hours td { padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); font-weight: 400; }
.hours th { text-align: left; padding-right: var(--space-xl); }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr.is-today th, .hours tr.is-today td { font-weight: 500; }
.hours tr.is-today th::after { content: "Today"; margin-left: var(--space-sm); font-size: var(--text-sm); font-weight: 500; color: var(--color-accent); }
.visit__links { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.visit__map { grid-column: 7 / span 6; aspect-ratio: 4 / 3; background: var(--color-paper-2); outline: var(--rule-hair) solid var(--color-rule); outline-offset: -1px; overflow: hidden; }
.visit__map iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(1) sepia(0.12) contrast(1.02); mix-blend-mode: multiply; }

/* ==========================================================================
   Footer: the colophon on the ink band
   ========================================================================== */
.footer { position: relative; z-index: var(--z-base); background: var(--color-ink); color: var(--color-paper); padding-block: var(--section-gap-s) var(--space-2xl); overflow: clip; }
.footer__mark { width: 100%; height: auto; aspect-ratio: 2420 / 1045; overflow: visible; }
.footer__letters { fill: var(--color-paper); }
.footer__hook path { fill: none; stroke: var(--color-accent-on-ink); stroke-width: 34; stroke-linecap: round; }
.footer__hook circle { fill: var(--color-accent-on-ink); }
.footer__colophon { margin-top: var(--space-2xl); max-width: 62ch; color: var(--color-muted-ink); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-lg); }
.footer a { color: var(--color-paper); text-decoration-color: var(--color-accent-on-ink); }
.footer :focus-visible { outline-color: var(--color-accent-on-ink); }

/* ==========================================================================
   Smaller screens
   ========================================================================== */
@media (max-width: 60rem) {
  :root { --nav-h: 64px; }
  .nav__status { display: none; }
  .hero__mark { height: auto; container-type: normal; align-self: center; }
  .hero__mark .hero__logo { width: 100%; }
  .hero__base { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }
  .hero__title, .hero__aside { grid-column: 1 / -1; }
  .services__grid { grid-template-columns: minmax(0, 1fr); }
  .frame { grid-column: 1 / -1; position: static; margin-bottom: var(--space-2xl); }
  .frame__stack, .motion .frame__stack {
    display: flex; gap: var(--space-sm); aspect-ratio: auto; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); background: transparent;
  }
  .frame__stack img, .motion .frame__stack img { position: static; flex: none; width: 72%; height: auto; scroll-snap-align: start; }
  .services__body { grid-column: 1 / -1; }
  .motion .svc__row h3 { color: var(--color-ink); }
  .film__head, .record__head { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-md); }
  .film__head h2, .film__head .lead, .record__head h2, .record__head .lead { grid-column: 1 / -1; }
  .film__frame { aspect-ratio: 4 / 5; }
  .steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-2xl); }
  .figures { grid-template-columns: minmax(0, 1fr); }
  .figure-cell, .figure-cell + .figure-cell { padding: var(--space-lg) 0; border-right: 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
  .chart-fig--topics, .chart-fig--busy { grid-column: 1 / -1; }
  .visit__line { white-space: normal; }
  .visit__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xl); }
  .visit__info, .visit__map { grid-column: 1 / -1; }
  .visit__map { aspect-ratio: 1 / 1; }
}
@media (max-width: 40rem) {
  .steps__list { grid-template-columns: minmax(0, 1fr); }
  .actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .hero__aside .actions .btn, .visit__info .actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .btn:active, .kc-tab:active { transform: none; }
  .svc__row::after { transition: none; }
  .nav { transition: none; }
}