/* ============================================================================
   RR AESTHETIC CLINIC — DESIGN LAB
   Homepage replica. Local only, never deploys. Consumes the locked token set
   from ../design/rr-brand-tokens.css and adds nothing to it: if a value is not
   a token, it is a layout number (a column split, an aspect ratio), never a
   colour and never a typeface.

   Section order matches the client's mockup exactly:
   header · hero · stat band · rólunk · kezeléseink · eredmények · vélemények ·
   footer + map.
   ============================================================================ */

/* --------------------------------------------------------------- primitives */

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.sprite [id],
svg use {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#i-facebook,
#i-facebook path {
  fill: currentColor;
  stroke: none;
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -4rem;
  z-index: 100;
  padding: var(--space-1) var(--space-2);
  background: var(--color-primary-deep);
  color: var(--color-primary-contrast);
  font: var(--weight-label) var(--font-size-xs) / 1 var(--font-ui);
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus {
  top: var(--space-2);
}

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

/* Scroll rails and full-bleed art are the two things that reliably widen the
   document on a phone; this keeps the page honest at 390px. */
html,
body {
  overflow-x: clip;
}

/* Body text weight is token-driven, not the UA's `normal` default (defect
   D34 — --weight-body was declared with zero references, so the 400 held by
   coincidence). Applied here rather than in src/styles/brand-tokens.css
   because that file is mirrored byte-for-byte by a read-only master; this
   file has no master. */
body {
  font-weight: var(--weight-body);
}

.section {
  position: relative;
  padding-block: var(--section-pad);
}

/* The micro-caps label layer. This is where the brand book's tracking-300
   instruction lives — eyebrows, stat labels, nav, buttons, footer heads all
   descend from here. */
.eyebrow {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-label);
  line-height: 1.4;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.eyebrow--accent {
  color: var(--color-accent-deep);
}
/* accent-deep was measured on Linen (4.54:1) and fails AA on the deeper
   .about surface — 4.32:1 at 12px (defect D36, the third surface this token
   landed on after Linen and the footer field/D23). On --color-surface the
   accent takes the deepest step: 5.06:1 there. Rule of the class, not the
   instance: any accent-deep text on a surface deeper than Linen must use
   accent-deepest. */
.about .eyebrow--accent {
  color: var(--color-accent-deepest);
}
.eyebrow--section {
  color: var(--color-primary-deepest);
  text-align: center;
}

/* Hairline rules. One device, three placements — the mockup mixes a rule under
   the treatments eyebrow with em-dash flanks around the results eyebrow; that
   inconsistency is resolved here in favour of the rule. */
.rule {
  display: block;
  width: 2.75rem;
  height: 1px;
  margin-block: var(--space-2);
  background: var(--color-accent);
}
.rule--center {
  margin-inline: auto;
  margin-block: 0.875rem 0;
}

/* display/border reset: the token file's element-level header rule would
   otherwise turn any section head into a flex bar with a bottom hairline. */
.section__head {
  display: block;
  margin-bottom: var(--space-4);
  padding: 0;
  border: 0;
  text-align: center;
}
.section__head--split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: var(--space-3);
}
.section__head--split .section__head-center {
  grid-column: 2;
}
.section__head--split .textlink {
  grid-column: 3;
  justify-self: end;
}
.section__foot {
  margin-top: var(--space-4);
  text-align: center;
}

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem; /* 48px — the mockup's buttons are ~34px; raised to the
                       WCAG 2.5.8 target size. Deliberate upgrade. */
  padding: 0 var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.btn--sm {
  /* No min-height override: design-plan §7 states the house button height as
     48px (WCAG 2.5.8) with no desktop carve-out, so the modifier inherits
     .btn's 3rem at every width. The 2.5rem that stood here rendered the
     header booking CTA 40px above 900px (defect D38); adjudication A17
     overruled the "measured rail geometry" comment that defended it — a CSS
     comment is not an amendment to the design plan. --sm now means compact
     padding only. Fixed on the class, not per instance: both users (header
     CTA, map-card CTA) owe the same floor for the same reason. */
  padding: 0 var(--space-2);
}
.btn--solid {
  background: var(--color-primary-deep);
  color: var(--color-primary-contrast);
}
.btn--solid:hover,
.btn--solid:focus-visible {
  background: var(--color-primary-deepest);
}
.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary-deepest);
}

.textlink {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1); /* snapped from 0.625rem (D41) — down, per the house
    precedent of keeping tight pairings tight */
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text);
}
.textlink svg {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-accent-deep);
  transition: transform var(--dur) var(--ease);
}
.textlink:hover svg {
  transform: translateX(0.25rem);
}

/* -------------------------------------------------------------------- logo */

/* The client supplied a flat JPG only. assets/img/*-mask.png are alpha masters
   recovered from it, so the mark can be filled with the exact brand hex rather
   than the JPG's slightly-off sage. A vector master is a kickoff ask. */
.logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  text-decoration: none;
}
.logo__mark {
  display: block;
  width: 3.25rem;
  aspect-ratio: 369 / 336;
  background-color: var(--color-primary);
  -webkit-mask: url('img/logo-monogram-mask.png') left center / contain no-repeat;
  mask: url('img/logo-monogram-mask.png') left center / contain no-repeat;
}
.logo__mark--lg {
  width: 4.5rem;
}
.logo__word {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--font-size-xs); /* 12px label floor (defect D21), was 10px */
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap; /* the lockup never breaks into two lines */
  color: var(--color-text);
}

/* ------------------------------------------------------------------ header */

/* display:block overrides the token file's element-level header rule. Left as
   flex, the header became a flex container whose single child could not shrink
   below its min-content and pushed the document 3px wider than the phone. */
.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  display: block;
  padding: var(--space-2) 0;
  border: 0;
}
/* A linen wash under the header. The nav overlaps the hero photograph on the
   right; without this the type is at the mercy of whatever image is loaded. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(253, 245, 235, 0.92) 0%,
    rgba(253, 245, 235, 0.72) 55%,
    rgba(253, 245, 235, 0) 100%
  );
  pointer-events: none;
}
.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nav ul {
  display: flex;
  gap: clamp(1rem, 2vw, 1.9rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav a {
  display: block;
  padding-block: 0.5rem;
  font-family: var(--font-ui);
  font-size: var(--font-size-2xs);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text);
  position: relative;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0.25rem;
  width: 100%;
  height: 1px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav a:hover::after,
.nav a:focus-visible::after {
  transform: scaleX(1);
}

/* The language control is a native <details> dropdown (real switcher, no JS).
   min-height/min-width 3rem = the 48px WCAG 2.5.8 floor the system imposes on
   its own buttons (defect D15). */
.lang {
  position: relative;
}
.lang summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 3rem;
  min-width: 3rem;
  padding: 0 var(--space-1);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-ui);
  font-size: var(--font-size-2xs);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  color: var(--color-text);
}
.lang summary::-webkit-details-marker {
  display: none;
}
.lang__menu {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 30;
  min-width: 9rem;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background: var(--color-bg);
  border: var(--hairline);
  border-radius: var(--radius);
}
.lang__menu a {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  text-decoration: none;
  color: var(--color-text);
}
.lang__menu a:hover,
.lang__menu a:focus-visible {
  color: var(--color-primary-deepest);
}
.lang__menu a[aria-current='page'] {
  color: var(--color-primary-deepest);
  font-weight: var(--weight-strong);
}
.lang__caret {
  width: 0.75rem;
  height: 0.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 3rem; /* 48px touch floor (bar M7), was 2.75rem */
  height: 3rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 1.375rem;
  height: 1px;
  margin-inline: auto;
  background: var(--color-text);
}

/* ----------------------------------------------- site chrome (round-2 port) */
/* Added when Layout.astro adopted this file's header/footer (2026-08-13,
   design-gauntlet round 2). Everything below serves the Astro shell only —
   the design lab has no equivalent markup. */

/* Containing block for the absolute header: the draft banner sits above it in
   normal flow, so inset 0 0 auto lands on top of <main>'s hero, not on top of
   the banner. */
.shell {
  position: relative;
}
/* Pages without a full-bleed hero keep the same rail in normal flow. relative,
   not static, so the ::before wash keeps sizing against the header itself. */
.site-header--flow {
  position: relative;
  inset: auto;
  border-bottom: var(--hairline);
}

/* Mobile nav panel — the one NEW chrome piece (design-plan §5). Hidden above
   900px regardless of state; below it, the burger toggles the [hidden] attr. */
.nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  display: none;
  padding: var(--space-1) var(--gutter) var(--space-3);
  background: var(--color-bg);
  border-bottom: var(--hairline);
}
.nav-panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-panel a {
  display: flex;
  align-items: center;
  min-height: 3rem; /* 48px touch floor, bar M7 */
  font-family: var(--font-ui);
  font-size: var(--font-size-2xs);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text);
}
.nav-panel a:hover,
.nav-panel a:focus-visible {
  color: var(--color-primary-deepest);
}
.nav-panel__lang {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-1);
  border-top: var(--hairline);
}
.nav-panel__lang a {
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--font-size-sm);
}
.nav-panel__lang a[aria-current='page'] {
  color: var(--color-primary-deepest);
  font-weight: var(--weight-strong);
}

/* Header search — sitewide furniture behind a header control (bar M5): a
   48px toggle in the actions zone opening a constrained panel that hosts the
   Pagefind mount. Never a page-flow band. */
.search {
  position: relative;
}
.search summary {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  list-style: none;
  color: var(--color-text);
}
.search summary::-webkit-details-marker {
  display: none;
}
.search summary svg {
  width: 1.25rem;
  height: 1.25rem;
}
.search summary:hover,
.search summary:focus-visible {
  color: var(--color-primary-deepest);
}
.search__panel {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 30;
  width: min(24rem, calc(100vw - 2 * var(--gutter)));
  padding: var(--space-2);
  background: var(--color-bg);
  border: var(--hairline);
  border-radius: var(--radius);
}
.search__panel .search-box {
  margin: 0; /* overrides the template skeleton's page-flow margin */
}

/* -------------------------------------------------------------------- hero */

/* The mockup splits the hero 50/50. Measured, its label layer is sub-10px —
   the only reason the booking button and the film link share a line there. At a
   legible 12px the pair needs 442px, so the copy column takes 55% and the
   portrait keeps its mockup width (41% of 55% = 325px, the mockup's 323px).
   The interior photograph is the only thing that gives ground. */
.hero {
  display: grid;
  grid-template-columns: 55fr 45fr;
  min-height: clamp(34rem, 41vw, 41rem);
  background: var(--color-bg);
}
.hero__copy {
  position: relative;
  display: flex;
  /* Bottom-anchored, not centred: in the mockup the CTA row sits close to the
     stat band and the empty cream is above the eyebrow, not below the buttons. */
  align-items: flex-end;
  /* Header clearance lives on the container, not on the text block: as padding
     on the child it inflates the block's height and drags the whole column up.
     Snapped 4.5rem → --space-5 (D41): the copy is bottom-anchored, so this
     top padding binds only when the column is height-constrained — and the
     header itself measures 105.7px, so 72px never actually cleared the rail;
     the real clearance is the hero's min-height doing the work. 64px keeps
     the same safety role on-scale. */
  padding: var(--space-5) 0 var(--space-4);
  overflow: hidden;
}
.hero__portrait {
  position: absolute;
  /* The cream above the head, as in the mockup — and enough of it that the hair
     starts below the logo lockup instead of behind the wordmark. */
  inset: 4.25rem auto 0 0;
  width: 41%;
  margin: 0;
}
.hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 24%;
  /* The mockup dissolves the portrait into the cream field on its right rather
     than cutting it with an edge. The bottom stays hard: it meets the stat band. */
  -webkit-mask: linear-gradient(to right, black 56%, transparent 97%);
  mask: linear-gradient(to right, black 56%, transparent 97%);
}
/* The placeholder earns the same overlap the photograph did (defect D28) —
   but the dissolve lives on a background pseudo-layer, never on the flex
   container: .ph-image IS the box holding the caption, and round 4's
   container mask faded `Fotó helye — Phase 2 fotózás` to ~20% alpha across
   its trailing 40% (defect D35, that round's own regression). The hatch
   (duplicated from placeholders.css — the one place it repeats, because only
   this slot needs it on a maskable layer) moves to ::before and takes the
   mask; the caption stays unmasked at full opacity. isolation:isolate gives
   the z-index:-1 layer a stacking context so it paints above the page field
   but under the caption text. The hairline border stays suppressed in this
   one slot so no hard edge survives the fade to cross the H1 (D28); the
   55/45 split and the 41% portrait width stay untouched (§7). */
.hero__portrait .ph-image {
  border: 0;
  background: none;
  isolation: isolate;
}
.hero__portrait .ph-image::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(
    135deg,
    var(--color-surface),
    var(--color-surface) 10px,
    var(--color-surface-deep) 10px,
    var(--color-surface-deep) 20px
  );
  -webkit-mask: linear-gradient(to right, black 56%, transparent 97%);
  mask: linear-gradient(to right, black 56%, transparent 97%);
}
/* Explicit width, not content-sized: as a bare flex item the block sized itself
   to whatever the CTA row had already wrapped to, so the row could never
   un-wrap. Pinning the column breaks that circularity. */
.hero__text {
  position: relative;
  z-index: 1;
  flex: none;
  width: min(30rem, 100%);
  margin-left: 37%;
  padding-right: var(--space-3);
}
/* Capped below the global h1 so "TUDOMÁNYA" cannot cross into the photograph;
   the hero is the one place where the column, not the scale, has the last word. */
.hero h1 {
  margin-block: 0.5rem 0;
  font-size: clamp(2.25rem, 3.9vw, 3.4375rem);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display); /* snapped from 0.02em (D16/A5) */
}
.hero .rule {
  margin-block: var(--space-2); /* snapped from 1.375rem (D19/A5) */
}
.lead {
  margin: 0;
  max-width: 22rem;
  font-size: var(--font-size-lead);
  line-height: 1.65;
  color: var(--color-text-muted);
}
/* One row, as in the mockup: the booking button and the film link are a pair,
   and stacking them turns a single decision into two. */
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: var(--space-3);
}
.hero__cta .btn {
  padding-inline: var(--space-2); /* snapped from 1.25rem (D19/A5) — the play
    link the tight value existed for is not shipped (no RR film exists) */
}
.play {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1); /* snapped from 0.75rem (D41; 12px is equidistant
    between the 8/16 steps — down keeps the disc/label pair tight. Dead code:
    no play control ships until a real RR film exists, A1) */
  text-decoration: none;
}
.play__disc {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  transition: background-color var(--dur) var(--ease);
}
.play__disc svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: var(--color-accent-deep);
  transition: fill var(--dur) var(--ease);
}
.play:hover .play__disc {
  background: var(--color-accent);
}
.play:hover .play__disc svg {
  fill: var(--color-bg);
}
.play__label {
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-mid); /* snapped from 0.12em (A5; dead code —
    no play control ships until a real RR film exists) */
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-text);
}

.hero__scene {
  position: relative;
  margin: 0;
  overflow: hidden;
}
.hero__scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

/* --------------------------------------------------------------- stat band */

.stats {
  background: var(--color-primary-deep);
  color: var(--color-primary-contrast);
  padding-block: var(--space-3);
}
.stats__list {
  display: grid;
  /* width:fit-content + minmax(0,1fr), not minmax(0,1fr) alone and not
     minmax(0,max-content): with three cells on three full-container tracks the
     last cell's content filled only half its track, leaving 294px of bare band
     on the right against 136px on the left (defect D44 — the reference is
     symmetric only because its fifth cell fills its track).
     fit-content makes the track set shrink to its own content instead of
     spanning the container, and margin-inline:auto then centres it, so the
     band's bare margins are equal by construction (measured at 1440:
     244.4px left / 244.4px right). Sizing the tracks to max-content would
     centre the group too, but it also makes the cells UNEQUAL (measured
     311/312/231) and bar.md M3 requires equal cells on a single baseline —
     under an indefinite (fit-content) container the fr tracks all resolve to
     the widest cell's max-content contribution instead, so the cells stay
     equal (measured 312.06 / 312.06 / 312.06) AND the group is centred.
     minmax(0, …), not bare 1fr: the 0 floor lets tracks shrink under width
     pressure instead of taking min-content as a floor and pushing the band
     past the viewport (the blowout this rule already fixed once); once the
     container is the constraint, fit-content clamps to the available width and
     the layout degrades to exactly the old full-width behaviour. The shared
     minmax(3rem, auto) figure row on .stat keeps the labels on one y when a
     figure wraps (D04). --stat-count comes from the markup, so the track count
     always follows the actual cell count (defect D03) — never a hard-coded 5. */
  grid-template-columns: repeat(var(--stat-count, 3), minmax(0, 1fr));
  width: fit-content;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  list-style: none;
  padding-block: 0;
  margin-block: 0;
}
/* Grid, not flex (defect D04): the figure row is pinned to a shared minmax
   height, so a placeholder that wraps to two lines and a one-line figure
   produce the same cell depth and every label starts on the same y. The inner
   <div> wrapper is flattened with display:contents. */
.stat {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: minmax(3rem, auto) auto;
  column-gap: var(--space-2); /* snapped from 0.875rem (D19/A5) */
  align-items: start;
  padding-inline: clamp(0.5rem, 1.1vw, 1.125rem);
}
.stat > div {
  display: contents;
}
.stat + .stat {
  border-left: 1px solid rgba(253, 245, 235, 0.26);
}
.stat__icon {
  grid-row: 1 / span 2;
  width: 1.875rem;
  height: 1.875rem;
  margin-top: 0.35rem;
  color: rgba(253, 245, 235, 0.9);
}
.stat__figure {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--tracking-display);
}
.stat__figure--word {
  font-size: var(--font-size-lead); /* 18px — the 20px that stood here matched
    no step in the §3.4 scale (defect D45; the ≤900px override already snapped
    to --font-size-sm and the desktop rule was not brought along). Lead, not
    base: the word sits in the FIGURE slot of the band's display register,
    one step below it — 17px is the body-copy size and reads as a label. */
  letter-spacing: var(--tracking-display); /* snapped from 0.08em (D16/A5) */
  text-transform: uppercase;
  padding-top: var(--space-0); /* snapped from 0.28rem (D19/A5) */
}
.stat__label {
  margin: var(--space-1) 0 0; /* snapped from 0.6rem (D19/A5) */
  font-family: var(--font-ui);
  font-size: var(--font-size-2xs);
  font-weight: var(--weight-label);
  line-height: 1.75;
  letter-spacing: var(--tracking-mid); /* snapped from 0.155em (D16/A5) */
  text-transform: uppercase;
  color: var(--color-primary-contrast); /* solid Linen, 4.51:1 on the band.
    The rgba(253,245,235,0.94) that stood here blended to 4.20:1 at 11px —
    under AA; the 0.94 alpha was the entire failure (defect D37). Text never
    carries an alpha in this file: an alpha on text is a contrast failure
    hiding behind a colour that looks fine in the token list. */
}

/* ------------------------------------------------------------------ rólunk */

.about {
  display: grid;
  grid-template-columns: 43fr 57fr;
  background: var(--color-surface);
}
.about__copy {
  display: flex;
  align-items: center;
  padding: var(--section-pad) var(--space-4) var(--section-pad)
    max(var(--gutter), calc((100vw - var(--content-max)) / 2));
}
.about__text {
  width: min(26rem, 100%);
}
.about h2 {
  margin-block: var(--space-1) 0; /* snapped from 0.75rem (D19/A5; 12px is
    equidistant between the 8/16 steps — down keeps the reference's tight
    eyebrow-to-heading pairing) */
}
.about__body {
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
}
.about__signature {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-size: 1.875rem;
  line-height: 1.1;
  letter-spacing: var(--tracking-display); /* snapped from 0.06em (D16/A5) */
  color: var(--color-accent-deep);
}
.about__role {
  margin: 0.5rem 0 var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  color: var(--color-text);
}
.about__portrait {
  position: relative;
  margin: 0;
  min-height: 24rem;
  overflow: hidden;
}
.about__portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 46% 34%;
}

/* ------------------------------------------------------------- kezeléseink */

.cards {
  display: grid;
  /* Track count follows the card count from the markup (defect D08), and
     minmax(0,1fr) not bare 1fr — the min-content floor bug this file already
     fixed once in .stats__list. */
  grid-template-columns: repeat(var(--card-count, 4), minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.card {
  position: relative;
  display: block;
  aspect-ratio: 160 / 183;
  overflow: hidden;
  border-radius: var(--radius);
  text-decoration: none;
  isolation: isolate;
}
.card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.card:hover img,
.card:focus-visible img {
  transform: scale(1.045);
}
/* Deeper than the mockup's overlay on purpose: at the mockup's opacity the
   description text on the pale laser card sits under 3:1. */
.card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(24, 20, 17, 0.9) 0%,
    rgba(24, 20, 17, 0.72) 34%,
    rgba(24, 20, 17, 0.28) 62%,
    rgba(24, 20, 17, 0.12) 100%
  );
}
.card__body {
  position: absolute;
  inset: auto 0 0 0;
  display: block;
  padding: var(--space-2) 1.125rem 1.125rem;
  color: var(--color-on-image);
}
.card__icon {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: 0.875rem;
  color: var(--color-on-image);
}
.card__title {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.8125rem; /* D17 deferred by adjudication A4 — do not raise */
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-mid); /* snapped from 0.13em (D16/A5) */
  text-transform: uppercase;
  line-height: 1.35;
}
.card__desc {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  line-height: 1.55;
  /* Solid, not rgba(253,245,235,0.86): text never carries an alpha in this
     file (the rule stated at .stat__label after D37 — this was its one
     undocumented exception, defect D46). --color-border #E2DBD2 IS the colour
     the 0.86 alpha blended to at the description's position on the scrim
     (computed #E3DBD2–#E4DCD3 across the 0.75–0.81 alpha zone it occupies,
     ΔRGB ≤ 2) — an existing token, borrowed for its value: same warm near-
     Linen family, one step dimmer than the title's --color-on-image, which
     is the hierarchy the alpha was buying. Computed on the live scrim range
     (0.72–0.90 over both hatch stripes): 5.67:1 worst case, 10.45:1 at the
     card foot — AA everywhere the text can occupy, now with no backdrop
     dependency. */
  color: var(--color-border);
}
.card__arrow {
  display: block;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.875rem;
  color: var(--color-on-image);
  transition: transform var(--dur) var(--ease);
}
.card:hover .card__arrow,
.card:focus-visible .card__arrow {
  transform: translateX(0.3rem);
}

/* --------------------------------------------------------------- eredmények */

.results__viewport {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-2);
}
.results__nav {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--color-text);
  transition: color var(--dur) var(--ease);
}
.results__nav:hover {
  color: var(--color-primary-deepest);
}
.results__nav svg {
  width: 1.5rem;
  height: 1.5rem;
}
.results__track {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.results__track::-webkit-scrollbar {
  display: none;
}

/* A real comparison slider, not the mockup's decorative knob: draggable,
   keyboard-operable, and announced. */
.ba {
  position: relative;
  flex: none;
  height: clamp(12.5rem, 21vw, 18.75rem);
  aspect-ratio: var(--ratio) / 1;
  overflow: hidden;
  border-radius: var(--radius);
  scroll-snap-align: center;
  --pos: 50%;
}
.ba__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ba__after {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 var(--pos));
}
.ba__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: rgba(253, 245, 235, 0.95);
}
.ba__knob {
  position: absolute;
  top: 50%;
  left: var(--pos);
  display: grid;
  grid-auto-flow: column;
  place-items: center;
  gap: 1px;
  width: 2.125rem;
  height: 2.125rem;
  margin: -1.0625rem 0 0 -1.0625rem;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: 0 1px 6px rgba(43, 43, 43, 0.22);
}
.ba__knob svg {
  width: 0.75rem;
  height: 0.75rem;
}
/* The range input is the actual control: full-bleed, invisible, on top. */
.ba__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  appearance: none;
  -webkit-appearance: none;
}
.ba__range:focus-visible {
  opacity: 1;
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

/* --------------------------------------------------------------- vélemények */

.quotes {
  overflow: hidden;
  /* The closing section gets its own headroom so the signature mark has a
     place to stand instead of crossing the heading. 9rem, not the lab's
     6.5rem: measured against the shipped mask, 6.5rem left the glyph
     overlapping the eyebrow; 9rem lands the reference's ≈80px-above /
     ≈49px-below anchoring (defect D09). */
  padding-top: calc(var(--section-pad) + 9rem);
}
/* SIGNATURE ELEMENT — vaknyomás. The brand book lists blind emboss as one of
   four sanctioned logo applications; on screen that is a form with almost no
   colour of its own, revealed by a shadowed edge above and a lit edge below.
   Used once on the page, and never over a photograph. */
.emboss {
  position: absolute;
  /* D09: anchored to the section it opens — ≈80px air above the visible mark,
     ≈49px to the PÁCIENSEINK MONDTÁK eyebrow below (the reference ratio),
     measured against the mask's ~12px internal top inset. Works with the
     .quotes 9rem headroom above. */
  top: 0;
  left: 50%;
  z-index: 0;
  width: 11rem;
  aspect-ratio: 366 / 336;
  transform: translateX(-50%);
  /* A whisper below the page tone — enough to give the form a body, far too
     little to read as a printed mark. */
  /* stylelint-disable-next-line color-no-hex -- sanctioned one-off: the
     vaknyomás body tone is used exactly once, is documented above, and is
     deliberately not a token (a signature moment, not a system color). */
  background-color: #fbf2e6;
  -webkit-mask: url('img/logo-monogram-mask.png') center / contain no-repeat;
  mask: url('img/logo-monogram-mask.png') center / contain no-repeat;
  filter: drop-shadow(-1.5px -1.5px 1.5px rgba(43, 43, 43, 0.22))
    drop-shadow(1.5px 2px 1.5px rgba(255, 255, 255, 1));
}
.quotes .wrap {
  position: relative;
  z-index: 1;
}
.quotes__track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.quote {
  padding: var(--space-3); /* snapped from 1.75rem (D41) — 32px is the
    nearest step to §1.6's mockup-measured ~28px; the scale wins over a
    sampled value (same logic as A5). Dead code today: quote cards are
    consent-gated (A15) and no .quote markup ships. */
  background: var(--color-surface);
  border: var(--hairline);
  border-radius: var(--radius);
}
.quote__glyph {
  display: block;
  height: 1.25rem;
  font-family: var(--font-display);
  font-size: 4.25rem;
  font-weight: 400; /* §3.4: Cormorant runs 400 throughout (defect D20) */
  line-height: 0.34;
  color: var(--color-accent);
}
.quote blockquote {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-sm);
  line-height: 1.85;
  color: var(--color-text-muted);
}
.quote__by {
  margin: var(--space-3) 0 0;
  font-family: var(--font-ui);
  font-size: var(--font-size-2xs);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  color: var(--color-text);
}

.dots {
  display: flex;
  justify-content: center;
  gap: var(--space-1); /* snapped from 0.625rem (D41). Dead code today —
    the pager ships with the consent-gated quote rail (A15). */
  margin-top: var(--space-3);
}
.dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.dot.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* ------------------------------------------------------------------ footer */

.site-footer {
  position: relative;
  background: var(--color-surface-deep);
  border: 0;
  padding: 0;
  color: var(--color-text);
  font-size: var(--font-size-base);
  overflow: hidden;
}
/* Footer paragraphs never ride browser-default UA margins (defect D14).
   :where() keeps this at zero specificity so the classed paragraph rules
   below still set their own token margins. Scoped, not global — body copy
   keeps its reading rhythm. */
.site-footer :where(p) {
  margin: 0;
}
.site-footer__still {
  position: absolute;
  right: 0;
  bottom: 3.25rem;
  width: clamp(7rem, 12vw, 11.5rem);
  margin: 0;
  z-index: 0;
}
.site-footer__still img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask: linear-gradient(to left, black 62%, transparent 100%),
    linear-gradient(to top, black 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(to left, black 62%, transparent 100%),
    linear-gradient(to top, black 82%, transparent 100%);
  mask-composite: intersect;
}
.site-footer__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.05fr 0.8fr 1.35fr;
  gap: var(--space-4);
  padding-block: var(--space-5);
}
.fcol + .fcol {
  padding-left: var(--space-4);
  border-left: 1px solid rgba(43, 43, 43, 0.1);
}
.fcol__head {
  margin: 0 0 var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-label);
  line-height: 1.4;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text);
}
.logo__word--footer {
  margin: 0.625rem 0 0;
  /* No size override (defect D26): the lockup is one component — it inherits
     .logo__word's 12px label floor instead of re-shrinking to 11px. */
}
.footer-tagline {
  margin: 0.875rem 0 0;
  font-family: var(--font-ui);
  font-size: var(--font-size-2xs);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-mid); /* snapped from 0.22em (D16/A5) */
  color: var(--color-accent-deepest); /* accent-deep is 4.07:1 on the footer
    field — below AA at 11px (defect D23); this step measures 4.77:1 here */
  text-transform: uppercase;
}
.socials {
  display: flex;
  gap: 0.625rem;
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
/* span variant: RR's real social profiles are unknown, so the shell renders
   the marks as non-interactive placeholder discs — geometry, no dead links. */
.socials a,
.socials span {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  color: var(--color-accent-deep);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.socials a:hover {
  background: var(--color-accent);
  color: var(--color-bg);
}
.socials svg {
  width: 1.0625rem;
  height: 1.0625rem;
}

.contact,
.quick {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-sm);
}
.contact li {
  display: grid;
  grid-template-columns: 1.375rem 1fr;
  gap: 0.875rem;
  align-items: start;
  color: var(--color-text-muted);
}
.contact li + li {
  margin-top: var(--space-2);
}
.contact svg {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.28rem;
  color: var(--color-primary);
}
/* 48px rows — the same touch floor the header enforces by name on .lang
   summary, .burger, .search summary and .nav-panel a (defect D29; the footer
   lists were simply missed). The old 0.75rem sibling margin is retired with
   the row upgrade: the row height itself carries the list's pitch, exactly as
   .nav-panel a already does, so the column lengthens by the floor only. */
.quick a {
  display: flex;
  align-items: center;
  min-height: 3rem;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.quick a:hover {
  color: var(--color-primary-deepest);
}

.mapcard {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: var(--hairline);
  aspect-ratio: 300 / 132;
  background: var(--color-surface);
}
.mapcard__plan {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.mapcard__pin {
  position: absolute;
  left: 7%;
  top: 18%;
  width: 1.375rem;
  height: 1.375rem;
  color: var(--color-accent-deep);
}
.mapcard__pin svg {
  width: 100%;
  height: 100%;
}
.mapcard__label {
  position: absolute;
  left: 17%;
  top: 17%;
}
.mapcard__name,
.mapcard__addr {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--font-size-2xs); /* token, was the same 11px as a hardcoded
    0.6875rem literal (defect D40). The 12px floor was TRIED and measured: in
    the 4-column footer (1121–1400px) the two-line label block collides with
    the ÚTVONALTERVEZÉS CTA — at 1200px it overruns the button top by ~3px
    (label 2663+36 vs CTA 2695.9). So 11px stays, now via the token; this is
    a fourth acknowledged use outside §3.4's nav/legal reservation, flagged
    for the plan alongside the A8 stat-label carve-out. */
  line-height: 1.5;
  color: var(--color-text);
}
.mapcard__name {
  font-weight: var(--weight-strong);
}
.mapcard__addr {
  color: var(--color-text-muted);
}
.mapcard__cta {
  position: absolute;
  left: 17%;
  bottom: 13%;
  min-height: 3rem; /* 48px floor at every viewport (defect D30). Redundant
    since .btn--sm lost its 40px override (D38/A17), but kept: this control's
    floor should not silently depend on a modifier's default. */
}

.site-footer__base {
  position: relative;
  z-index: 1;
  background: var(--color-surface-deepest);
  border-top: 1px solid rgba(43, 43, 43, 0.08);
}
.site-footer__base-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-2);
}
.site-footer__base p {
  margin: 0;
  font-size: var(--font-size-2xs);
  letter-spacing: var(--tracking-display); /* snapped from 0.04em (D16/A5) */
  color: var(--color-text-muted);
}
.legal {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.legal a {
  display: inline-flex;
  align-items: center;
  min-height: 3rem; /* 48px touch floor (defect D29) — was line-height only, ≈19px */
  font-size: var(--font-size-2xs);
  letter-spacing: var(--tracking-mid); /* snapped from 0.1em (D16/A5) */
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-muted);
}
.legal a:hover {
  color: var(--color-primary-deepest);
}
.legal span {
  color: var(--color-border-strong);
}

/* ---------------------------------------------------------------- lab note */

.lab-note {
  background: var(--color-primary-deepest);
  color: var(--color-primary-contrast);
}
.lab-note p {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-2) var(--gutter);
  font-size: var(--font-size-2xs);
  line-height: 1.7;
  letter-spacing: var(--tracking-display); /* snapped from 0.04em (A5; dead —
    no .lab-note markup ships on the site) */
}

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

.reveal {
  animation: rise 620ms var(--ease) both;
  animation-delay: var(--d, 0ms);
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* -------------------------------------------------------------- responsive */

/* The rail collapses below 1400px, not at design-plan §2's 1120 tier:
   measured in the shipped build, the 7-item 11px rail plus the actions zone
   (search · booking · HU · at their 48px floors) ends at x≈1400 — at 1340 the
   booking button is already clipped. The rail is a 1440-design; every
   narrower width gets the burger, which keeps all 12 pages + locales
   reachable. The 900px block below keeps the phone-only header tweaks. */
@media (max-width: 1399px) {
  .nav,
  .lang {
    display: none;
  }
  .burger {
    display: flex;
  }
  .nav-panel:not([hidden]) {
    display: block;
  }
  /* Anchor the search panel to the header inner, not the toggle, once the
     rail is collapsed — it must never overrun the viewport edge. */
  .search {
    position: static;
  }
  .search__panel {
    right: var(--gutter);
  }
}

@media (max-width: 1120px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--space-4);
  }
  .fcol + .fcol {
    padding-left: 0;
    border-left: 0;
  }
  .fcol:nth-child(even) {
    padding-left: var(--space-4);
    border-left: 1px solid rgba(43, 43, 43, 0.1);
  }
}

@media (max-width: 900px) {
  /* The header is the tightest row on the page: at the 12px label floor the
     wordmark no longer fits 390px next to the booking button, the burger and
     the search control (defect D21 vs bar M7 — the floor and the no-overflow
     rule both bind, so the wordmark yields; the monogram mark stays). The
     lab's 9px/0.22em shrink is retired: sub-floor type is not an option. */
  .site-header__inner {
    gap: var(--space-2);
  }
  .logo__mark {
    width: 2.5rem;
  }
  .site-header .logo__word {
    display: none; /* header lockup only (defect D24) — the width pressure
      this hide answers exists only in the rail; the footer column has none,
      so its wordmark keeps all three lockup lines, as the reference does. */
  }
  .site-header__actions {
    gap: 0.25rem;
  }
  .site-header__actions .btn {
    /* 12px at reduced padding (defect D43, plan §3.4 carve-out #5): the site's
       primary conversion control reaches the 12px label floor after all.
       Round 3 measured 12px at FULL padding (≈194px vs a ≈190px budget) and
       stopped; the ledger's reduced-padding fallback was never tried. Tried
       and measured this round — the button fits the rail with air at 390,
       375 and 360 (scrollWidth = viewport at all three; figures in the
       round-06 build note), so the 11px carve-out is not needed. */
    padding-inline: var(--space-1);
    font-size: var(--font-size-xs);
    letter-spacing: var(--tracking-mid); /* back on-token (D22), was 0.1em */
    min-height: 3rem; /* 48px touch floor at touch sizes (bar M7) */
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  /* Art direction, not a fallback: on a phone the portrait is the hook and the
     interior shot is the one that survives being 390px wide the worst, so the
     order flips and the interior is dropped. */
  .hero__scene {
    display: none;
  }
  .hero__copy {
    flex-direction: column;
    align-items: stretch;
    padding: 0; /* merged from a second .hero__copy rule that sat 20 lines
      below in this same media block (defect D39 — the source-order pattern
      that produced D25) */
  }
  .hero__portrait {
    position: relative;
    inset: auto;
    width: 100%;
    height: 46vh;
    min-height: 17rem;
    padding-top: 0;
  }
  .hero__portrait img {
    object-position: 58% 18%;
    -webkit-mask: linear-gradient(to bottom, black 72%, transparent 100%);
    mask: linear-gradient(to bottom, black 72%, transparent 100%);
  }
  /* Same bottom fade for the placeholder's hatch layer (D28) — on the
     mask-carrying ::before, never on the caption's own box (D35). */
  .hero__portrait .ph-image::before {
    -webkit-mask: linear-gradient(to bottom, black 72%, transparent 100%);
    mask: linear-gradient(to bottom, black 72%, transparent 100%);
  }
  .hero__text {
    width: 100%;
    margin-left: 0;
    padding: var(--space-3) var(--gutter) var(--space-5);
  }
  .lead {
    max-width: none;
  }

  .stats__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* width:auto, undoing the desktop fit-content (D44): the 2-up phone band
       is meant to span the field — the even cell's left divider and the odd
       last cell's `grid-column: 1 / -1` full-width span below both depend on
       the track set filling the container, which is the reference's own mobile
       art direction. Centring is a desktop-only problem; there is no bare band
       to balance here. */
    width: auto;
    row-gap: var(--space-3);
  }
  .stat {
    padding-inline: 0 var(--space-2);
  }
  .stat + .stat {
    border-left: 0;
  }
  .stat:nth-child(even) {
    padding-left: var(--space-2);
    border-left: 1px solid rgba(253, 245, 235, 0.26);
  }
  /* Any odd last cell spans the full band (generalized from the lab's
     hard-coded :nth-child(5) so it tracks the real cell count, per D03). */
  .stat:nth-child(odd):last-child {
    grid-column: 1 / -1;
    padding-top: var(--space-3);
    border-top: 1px solid rgba(253, 245, 235, 0.26);
  }
  /* A word set as a figure is the one label too wide for a half-column. */
  .stat__figure--word {
    font-size: 0.9375rem;
    letter-spacing: var(--tracking-display); /* snapped from 0.03em (D16/A5) */
  }
  .stat__label {
    font-size: var(--font-size-2xs); /* 11px stat carve-out (defect D18), was 10px */
    letter-spacing: var(--tracking-mid); /* snapped from 0.1em (D16/A5) */
  }
  .stat__icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .about {
    grid-template-columns: 1fr;
  }
  /* height, not aspect-ratio + min-height: that pair resolves width from
     height and pushed the figure 44px past the viewport in round 1. */
  .about__portrait {
    order: -1;
    width: 100%;
    height: 62vw;
    min-height: 0;
    max-height: 20rem;
  }
  .about__copy {
    padding: var(--section-pad) var(--gutter);
  }
  .about__text {
    width: 100%;
  }

  /* Cards, results and quotes all become one scroll-snap rail. Peeking the next
     card is the affordance — no arrows needed at this width. */
  .cards,
  .quotes__track {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* without scroll-padding the snap aligns the first item to the scrollport
       edge and eats the gutter, so the rail starts flush and the button below
       it does not. */
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .cards::-webkit-scrollbar,
  .quotes__track::-webkit-scrollbar {
    display: none;
  }
  .cards > li,
  .quotes__track > li {
    flex: none;
    width: min(72vw, 17rem);
    scroll-snap-align: start;
  }

  .section__head--split {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--space-2);
  }
  .section__head--split .section__head-center,
  .section__head--split .textlink {
    grid-column: 1;
    justify-self: center;
  }
  .results__nav {
    display: none;
  }
  .results__viewport {
    grid-template-columns: 1fr;
  }
  .results__track {
    justify-content: flex-start;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }

  /* §9 phone geometry, owned by ONE rule (defect D25 deleted a second .emboss
     declaration in this same block — 8rem, dead by source order). The desktop
     .quotes 9rem headroom is a 1440-tuned constant, so the phone tier gets its
     own measured pair: at 390px (section-pad = 48px) a 10rem mark's solid
     glyph reads 75px below the Eredmények placeholder and 49px above the
     PÁCIENSEINK MONDTÁK eyebrow (the reference's ≈80/≈49 anchoring), and the
     emboss box ends 37px clear of the section's content box, so nothing rests
     on z-index. */
  .quotes {
    padding-top: calc(var(--section-pad) + 9.5rem);
  }
  .emboss {
    top: 1rem;
    width: 10rem;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
  }
  .fcol:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }
  .fcol + .fcol {
    padding-top: var(--space-3);
    border-top: 1px solid rgba(43, 43, 43, 0.1);
  }
  .site-footer__still {
    width: 7.5rem;
    bottom: 4.5rem;
    opacity: 0.85;
  }
  .mapcard {
    aspect-ratio: 242 / 110;
  }
  .site-footer__base-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}