/* =========================================================================
   CARRIDA — Premium Car Wash
   Production stylesheet. Design system ported 1:1 from the Claude Design
   source of truth (design-source/), converted from inline styles.
   ========================================================================= */

/* ----- Design tokens ----------------------------------------------------- */
:root {
  --bg:          #050505;
  --bg-2:        #080808;
  --panel:       #121212;
  --panel-2:     #171717;

  --text:        #F2F0EC;
  --text-bright: #FAF9F7;
  --text-soft:   #C6C3BD;
  --muted:       #929292;
  --muted-2:     #7C7C7C;

  /* Bronze sampled directly from the CARRIDA logo (§3): shadow #6C4E18,
     core #C9A249, mid-high #F0CC72, blown highlight #FCEA9C. Muted, warm,
     metallic — never a generic bright gold. */
  --gold:        #C9A249;
  --gold-light:  #F0CC72;
  --gold-deep:   #6C4E18;
  --gold-hi:     #FCEA9C;
  --bronze-grad: linear-gradient(135deg, #6C4E18 0%, #C9A249 34%, #F0CC72 58%, #C9A249 100%);

  --graphite:    #121212;
  --graphite-2:  #171717;

  --line:        rgba(255,255,255,.06);
  --line-2:      rgba(255,255,255,.08);
  --line-3:      rgba(255,255,255,.10);
  --gold-line:   rgba(201,162,73,.28);

  --display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --sans:  'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono:  'SF Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --ease:  cubic-bezier(.22,.61,.36,1);

  --pad-x: clamp(20px, 5vw, 72px);
  --maxw:  1320px;
}

/* ----- Reset / base ------------------------------------------------------ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  background: var(--bg);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection { background: var(--gold); color: #0A0A0A; }

a { color: var(--text); text-decoration: none; transition: color .3s var(--ease); }
a:hover { color: var(--gold); }

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

h1, h2, h3 { font-weight: 600; letter-spacing: -.022em; }

:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

.shell { position: relative; width: 100%; overflow-x: hidden; background: var(--bg); }

/* Visually-hidden but accessible */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--gold); color: #0A0A0A; padding: 10px 18px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  transition: top .3s var(--ease);
}
.skip-link:focus { top: 16px; color: #0A0A0A; }

/* Shared placeholder "weave" — the elegant striped stand-in used wherever
   real footage/photography has not been dropped in yet. */
.weave { background: repeating-linear-gradient(112deg, #111 0 3px, #0B0B0B 3px 9px); }
.weave--hero { background: repeating-linear-gradient(115deg, #0C0C0C 0 3px, #090909 3px 9px); }
.weave--loc  { background: repeating-linear-gradient(105deg, #0E0E0E 0 3px, #090909 3px 10px); }

/* Small uppercase editorial label */
.eyebrow {
  font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold); font-weight: 400;
}
.mono-note {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(169,163,155,.68);
}
/* Accent words: strict & minimal — upright serif in gold, not swash italic */
em { font-style: normal; font-weight: inherit; color: var(--gold); }

/* =========================================================================
   Keyframes
   ========================================================================= */
@keyframes ca-veil   { from { opacity: 1; } to { opacity: 0; } }
@keyframes ca-glow   { from { opacity: 0; transform: scale(1.15); } to { opacity: 1; transform: scale(1); } }
@keyframes ca-emerge { from { opacity: 0; transform: scale(1.06); } to { opacity: .95; transform: scale(1); } }
@keyframes ca-rise   { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ca-sheen  { 0% { transform: translateX(-100%); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
@keyframes ca-intro-mark { 0% { opacity: 0; transform: translateY(14px) scale(.98); letter-spacing: .5em; } 100% { opacity: 1; transform: translateY(0) scale(1); letter-spacing: .28em; } }
@keyframes ca-intro-sweep { 0% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* =========================================================================
   Cinematic intro overlay (short, ~2.6s, skippable)
   ========================================================================= */
.intro {
  position: fixed; inset: 0; z-index: 100;
  background: #050505;
  display: grid; place-items: center;
  overflow: hidden;
  cursor: pointer;
}
.intro__glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 45% at 50% 42%, rgba(201,162,73,.16), transparent 60%),
    radial-gradient(90% 70% at 50% 120%, rgba(255,255,255,.04), transparent 60%);
  opacity: 0; animation: ca-glow 1.6s var(--ease) .1s forwards;
}
.intro__sweep {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(to right, transparent, rgba(240,204,114,.85), transparent);
  transform: translateX(-120%);
  animation: ca-intro-sweep 2.2s var(--ease) .2s forwards;
}
.intro__mark {
  position: relative; text-align: center;
  opacity: 0; animation: ca-intro-mark 1.5s var(--ease) .55s forwards;
}
.intro__logo { width: clamp(160px, 30vw, 300px); height: auto; margin: 0 auto; }
.intro__word {
  margin-top: 18px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .34em;
  text-transform: uppercase; color: rgba(201,162,73,.75);
}
.intro.is-leaving { animation: ca-veil .9s var(--ease) forwards; pointer-events: none; }

/* Legacy veil (kept subtle; harmless if intro is used) */
.veil {
  position: fixed; inset: 0; background: #050505; z-index: 60;
  pointer-events: none; opacity: 0;
}

/* When the intro has finished, stagger the first-view elements in. */
.stagger { opacity: 0; }
.play-intro-done .stagger { opacity: 1; }
.play-intro-done .stagger--header { animation: ca-rise 1s var(--ease) .05s backwards; }
.play-intro-done .stagger--kicker { animation: ca-rise 1.3s var(--ease) .1s backwards; }
.play-intro-done .stagger--title  { animation: ca-rise 1.3s var(--ease) .28s backwards; }
.play-intro-done .stagger--sub    { animation: ca-rise 1.3s var(--ease) .46s backwards; }
.play-intro-done .stagger--meta   { animation: ca-rise 1.2s var(--ease) .62s backwards; }

/* =========================================================================
   Header / navigation
   ========================================================================= */
.header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 20px var(--pad-x);
  background: rgba(6,6,6,.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(201,162,73,.14);
  transition: padding .4s var(--ease), background .4s var(--ease);
}
.header.is-condensed { padding-top: 12px; padding-bottom: 12px; background: rgba(6,6,6,.9); }
.header__sheen {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  overflow: hidden; pointer-events: none;
}
.header__sheen span {
  display: block; width: 42%; height: 1px;
  background: linear-gradient(to right, transparent, rgba(240,204,114,.95), transparent);
  animation: ca-sheen 9s cubic-bezier(.5,0,.5,1) 1.4s infinite;
}
.header__logo { display: block; flex: none; }
.header__logo img { width: 126px; height: auto; transition: width .4s var(--ease); }
.header.is-condensed .header__logo img { width: 104px; }

.nav {
  display: none; gap: clamp(20px, 3vw, 44px);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 300; color: var(--muted);
}
.nav a { position: relative; }
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0;
  background: var(--gold); transition: width .35s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="true"]::after { width: 100%; }

.btn-outline {
  flex: none; padding: 13px 24px;
  border: 1px solid rgba(201,162,73,.5); color: var(--gold-light);
  font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; font-weight: 400;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn-outline:hover { background: var(--gold); border-color: var(--gold); color: #0A0A0A; }

/* Right-side header cluster: language switch + Book */
.header__actions { display: flex; align-items: center; gap: clamp(12px, 2vw, 22px); flex: none; }
.lang { display: flex; align-items: center; gap: 9px; }
.lang__btn {
  background: none; border: 0; padding: 4px 1px; cursor: pointer; font-family: var(--sans);
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 400;
  color: var(--muted); transition: color .3s var(--ease);
}
.lang__btn:hover { color: var(--gold-light); }
.lang__btn.is-active { color: var(--gold); }
.lang__sep { width: 1px; height: 11px; background: rgba(201,162,73,.32); }

/* Language-swap fade */
[data-i18n] { transition: opacity .25s var(--ease); }
body.is-lang-anim [data-i18n] { opacity: 0; }

/* =========================================================================
   Hero
   ========================================================================= */
.hero {
  position: relative; min-height: min(92vh, 900px);
  display: grid; grid-template-rows: 1fr auto;
  overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.05);
}
.hero__media, .hero__weave, .hero__glow, .hero__scrim {
  position: absolute; inset: 0;
}
.hero__weave { animation: ca-emerge 2s var(--ease) .2s backwards; }
.hero__glow {
  background:
    radial-gradient(120% 80% at 72% 18%, rgba(201,162,73,.16), transparent 55%),
    radial-gradient(90% 70% at 20% 110%, rgba(255,255,255,.05), transparent 60%);
  animation: ca-glow 2.2s var(--ease) .1s backwards;
}
.hero__scrim {
  background: linear-gradient(to bottom, rgba(6,6,6,.55) 0%, rgba(6,6,6,.15) 45%, rgba(6,6,6,.92) 100%);
}
.hero__media { object-fit: cover; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--ease); }
.hero__media.is-ready { opacity: 1; }
/* Vertical (9:16) hero footage is not stretched — it sits centred as a
   cinematic panel with the weave/darkness as negative space around it. */
.hero[data-hero-ratio="9-16"] .hero__media {
  object-fit: contain; width: auto; height: 100%; left: 50%; transform: translateX(-50%);
}

.hero__tag {
  position: absolute; left: var(--pad-x); top: clamp(96px, 16vh, 170px);
  max-width: min(260px, 42vw);
  font-family: var(--mono); font-size: 10px; letter-spacing: .28em;
  color: rgba(237,233,227,.4); text-transform: uppercase; line-height: 2.1;
}
.hero__center {
  position: relative; z-index: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: clamp(48px, 9vh, 110px) var(--pad-x) 0;
}
.hero__kicker {
  margin: 0 0 clamp(26px, 4vh, 48px);
  font-size: 10.5px; letter-spacing: .34em; text-transform: uppercase;
  color: rgba(201,162,73,.85); font-weight: 400;
}
.hero h1 {
  margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.022em;
  font-size: clamp(38px, 7vw, 92px); line-height: 1.02; letter-spacing: .005em;
  color: var(--text-bright); text-wrap: balance;
}
.hero__sub {
  margin: 26px 0 0; max-width: 44ch;
  font-size: clamp(13px, 1.3vw, 15px); font-weight: 300; line-height: 1.85; color: var(--muted);
}
.hero__meta {
  position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding: clamp(28px, 6vh, 64px) var(--pad-x) clamp(24px, 4vh, 40px);
  font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(169,163,155,.75); font-weight: 300;
}
.hero__scroll { display: flex; align-items: center; gap: 12px; }
.hero__scroll-line {
  display: block; width: clamp(36px, 8vw, 86px); height: 1px;
  background: linear-gradient(to right, var(--gold), transparent);
}

/* Hero logo centrepiece + its reveal (fade/scale · gold halo · metallic sheen) */
.hero__logo { position: relative; display: inline-block; margin: 0 0 clamp(24px, 4vh, 44px); }
.hero__logo img { position: relative; z-index: 1; display: block; width: clamp(220px, 34vw, 460px); height: auto; }
.play-intro-done .hero__logo img { animation: ca-logo 1.5s var(--ease) .1s backwards; }
.hero__logo-glow {
  position: absolute; inset: -45% -25%; z-index: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(50% 50% at 50% 50%, rgba(201,162,73,.22), transparent 70%);
}
.play-intro-done .hero__logo-glow { animation: ca-logo-glow 2.6s var(--ease) .1s backwards; }
.hero__logo-sheen {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
  background-size: 240% 100%; background-position: 190% 0;
  -webkit-mask: url(../brand/logo.png) center/contain no-repeat;
          mask: url(../brand/logo.png) center/contain no-repeat;
}
.play-intro-done .hero__logo-sheen { animation: ca-logo-sheen 2.4s cubic-bezier(.5,0,.4,1) 1.15s 1 both; }
@keyframes ca-logo { from { opacity: 0; transform: scale(1.08) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes ca-logo-glow { 0% { opacity: 0; transform: scale(.82); } 60% { opacity: .85; } 100% { opacity: .5; transform: scale(1); } }
@keyframes ca-logo-sheen { from { background-position: 190% 0; } to { background-position: -90% 0; } }

/* =========================================================================
   Generic section rhythm + reveal
   ========================================================================= */
.section { padding: clamp(64px, 12vh, 140px) var(--pad-x); }
.section--statement { padding: clamp(96px, 18vh, 220px) var(--pad-x); }
.section--tall { padding: clamp(96px, 18vh, 200px) var(--pad-x); }
.section--bordered { border-top: 1px solid var(--line); }
.wrap { max-width: var(--maxw); margin: 0 auto; }

/* Offset anchor targets so the sticky header never covers a heading */
section[id] { scroll-margin-top: 96px; }

.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Brand statement */
.statement__grid { display: grid; gap: clamp(32px, 6vw, 96px); grid-template-columns: minmax(0,1fr); }
.statement h2 {
  margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.022em;
  font-size: clamp(34px, 6.6vw, 104px); line-height: 1.06; color: var(--text-bright); text-wrap: balance;
}
.statement__cols {
  display: grid; gap: clamp(24px, 4vw, 64px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  max-width: 900px; margin-left: auto;
}
.statement__cols p { margin: 0; font-size: clamp(14px, 1.4vw, 16px); font-weight: 300; line-height: 1.9; color: var(--muted); }

/* =========================================================================
   Services
   ========================================================================= */
.services__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; margin-bottom: clamp(40px, 7vh, 88px);
}
.services__head h2 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.022em; font-size: clamp(30px, 4.4vw, 60px); line-height: 1.1; color: var(--text-bright); }
.link-underline {
  font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold); border-bottom: 1px solid rgba(201,162,73,.4); padding-bottom: 5px;
}
.services__grid { display: grid; gap: clamp(32px, 5vw, 72px); grid-template-columns: minmax(0,1fr); }

.service {
  display: grid; grid-template-columns: 56px minmax(0,1fr); gap: clamp(12px, 3vw, 40px);
  align-items: baseline; padding: clamp(22px, 3vw, 34px) 0;
  border-top: 1px solid var(--line-2);
  transition: padding-left .4s var(--ease);
  cursor: default;
}
.service:last-of-type { border-bottom: 1px solid var(--line-2); }
.service:hover, .service.is-active { padding-left: 14px; }
.service__num { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--gold); }
.service__body { display: grid; gap: 10px; }
.service h3 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.022em; font-size: clamp(26px, 3.6vw, 48px); line-height: 1.15; color: var(--text-bright); }
.service p { margin: 0; max-width: 52ch; font-size: 14px; font-weight: 300; line-height: 1.8; color: var(--muted-2); }
.services__note { margin: 26px 0 0; }

/* Sticky media panel that reacts to the hovered service */
.services__panel { display: none; }
.panel {
  position: sticky; top: 130px; aspect-ratio: 9 / 16;
  border: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: flex-end; padding: 26px;
  overflow: hidden; transition: background .5s ease;
}
.panel__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); }
.panel__media.is-ready { opacity: 1; }
.panel__label {
  position: relative; z-index: 1;
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(237,233,227,.42); line-height: 2; white-space: pre-line;
  transition: color .4s ease;
}
.panel__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,6,6,.7), transparent 55%); opacity: 0; transition: opacity .5s ease; }
.panel.has-media .panel__scrim { opacity: 1; }
.panel.has-media .panel__label { color: rgba(237,233,227,.75); }

/* =========================================================================
   Experience
   ========================================================================= */
.experience { background: linear-gradient(to bottom, var(--bg), var(--bg-2) 60%, var(--bg)); }
.experience__grid { display: grid; gap: clamp(48px, 8vw, 110px); grid-template-columns: minmax(0,1fr); align-items: start; }
.experience h2 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.022em; font-size: clamp(34px, 6.2vw, 96px); line-height: 1.05; color: var(--text-bright); }
.principles { display: grid; gap: clamp(28px, 4vw, 48px); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.principle { display: grid; gap: 12px; padding-top: 22px; border-top: 1px solid var(--gold-line); }
.principle h3 { margin: 0; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; font-weight: 400; color: var(--gold-light); }
.principle p { margin: 0; font-size: 14px; font-weight: 300; line-height: 1.85; color: var(--muted-2); }

/* =========================================================================
   Location / experience-of-visit
   ========================================================================= */
.location__stage {
  position: relative; min-height: min(78vh, 720px);
  display: flex; align-items: flex-end; overflow: hidden;
}
.location__bg { position: absolute; inset: -6% -3%; will-change: transform; }
.location__bg img, .location__bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.1s var(--ease); }
.location__bg .is-ready { opacity: 1; }
.location__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,6,6,.96) 5%, rgba(6,6,6,.35) 60%, rgba(6,6,6,.7) 100%); }
.location__tag {
  position: absolute; top: clamp(28px, 6vw, 64px); left: var(--pad-x);
  font-family: var(--mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(237,233,227,.3); line-height: 2;
}
.location__inner {
  position: relative; width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(48px, 9vh, 96px) var(--pad-x);
  display: grid; gap: clamp(32px, 6vw, 80px); grid-template-columns: minmax(0,1fr);
}
.location h2 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.022em; font-size: clamp(32px, 5.6vw, 84px); line-height: 1.06; color: var(--text-bright); }
.location__facts { display: grid; gap: clamp(20px, 3vw, 40px); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-self: end; }
.fact { display: grid; gap: 8px; }
.fact__k { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.fact__v { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--text-soft); }
.fact__v--mono { font-family: var(--mono); font-size: 12px; color: rgba(169,163,155,.7); line-height: 1.8; }

.steps {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(56px, 10vh, 110px) var(--pad-x) clamp(72px, 12vh, 140px);
  display: grid; gap: clamp(28px, 4vw, 44px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.step { display: grid; gap: 14px; align-content: start; padding-top: 20px; border-top: 1px solid var(--line-3); }
.step__n { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--gold); }
.step__t { font-size: 14px; font-weight: 300; line-height: 1.8; color: var(--muted); }

/* =========================================================================
   Gallery — luxury automotive editorial, 9:16 first
   ========================================================================= */
.gallery__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; margin-bottom: clamp(32px, 6vh, 72px);
}
.gallery__head h2 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.022em; font-size: clamp(30px, 4.4vw, 60px); line-height: 1.1; color: var(--text-bright); }

/* Column count is capped deliberately. `auto-fit, minmax(210px, 1fr)` produced
   five columns on a wide screen, which put every 9:16 tile on screen at once —
   ten video decoders running together, and scrolling stuttered. Fewer, larger
   tiles keep the count on screen low (and read better editorially). */
.gallery__grid {
  display: grid; gap: clamp(12px, 1.6vw, 24px);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 640px)  { .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gallery__wide {
  display: grid; gap: clamp(12px, 1.6vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  margin-top: clamp(12px, 1.6vw, 24px);
}

.frame {
  position: relative; margin: 0; overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
}
.frame--v { aspect-ratio: 9 / 16; }
.frame--h { aspect-ratio: 16 / 9; }
/* Editorial variation: nudge alternating vertical frames for asymmetry */
.gallery__grid .frame--v:nth-child(2) { transform: translateY(clamp(0px, 3vw, 34px)); }
.gallery__grid .frame--v:nth-child(4) { transform: translateY(clamp(0px, 2vw, 22px)); }

.frame__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s var(--ease), transform 1.4s var(--ease); }
.frame__media.is-ready { opacity: 1; }
.frame:hover .frame__media.is-ready { transform: scale(1.04); }
.frame figcaption {
  position: absolute; left: 18px; bottom: 16px; z-index: 2;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(237,233,227,.42);
}
.frame--h figcaption { left: 20px; bottom: 18px; }
.frame__cue {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
  background: rgba(6,6,6,.55); color: var(--gold-light);
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  opacity: 0; transition: opacity .35s ease;
}
.frame:hover .frame__cue { opacity: 1; }
.frame.has-media .frame__cue { background: rgba(6,6,6,.28); }

/* =========================================================================
   Book / final CTA
   ========================================================================= */
.book { position: relative; padding: clamp(110px, 22vh, 260px) var(--pad-x); text-align: center; overflow: hidden; }
.book__glow { position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 12%, rgba(201,162,73,.13), transparent 60%); }
.book__inner { position: relative; max-width: 900px; margin: 0 auto; display: grid; gap: clamp(28px, 5vh, 52px); justify-items: center; }
.book h2 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.022em; font-size: clamp(34px, 6.4vw, 96px); line-height: 1.05; color: var(--text-bright); text-wrap: balance; }
.book__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.btn-gold {
  padding: 17px 40px; background: var(--gold); color: #0A0A0A;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase; font-weight: 500;
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.btn-gold:hover { background: var(--gold-light); color: #0A0A0A; transform: translateY(-2px); }
.btn-ghost {
  padding: 17px 40px; border: 1px solid rgba(237,233,227,.22); color: var(--text);
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase; font-weight: 400;
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-light); }

/* Book lead + contact block */
.book__lead {
  margin: 0; max-width: 46ch; font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 300; line-height: 1.85; color: var(--muted);
}
.contact {
  width: 100%; max-width: 860px; margin: clamp(20px, 4vh, 40px) auto 0;
  padding-top: clamp(28px, 4vh, 44px); border-top: 1px solid var(--line);
  display: grid; gap: clamp(22px, 3vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  text-align: center;
}
.contact__item { display: grid; gap: 9px; justify-items: center; }
.contact__k { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: rgba(201,162,73,.85); }
.contact__v { font-size: 14px; font-weight: 300; color: var(--text-soft); }
a.contact__v { transition: color .3s var(--ease); }
a.contact__v:hover { color: var(--gold); }

/* =========================================================================
   Booking modal
   ========================================================================= */
.modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: clamp(16px, 4vw, 40px); }
.modal[hidden] { display: none; }
.modal__backdrop {
  position: absolute; inset: 0; background: rgba(4,4,4,.82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .3s var(--ease);
}
.modal.is-open .modal__backdrop { opacity: 1; }
.modal__dialog {
  position: relative; width: min(560px, 100%); max-height: 92vh; overflow: auto;
  background-color: #0A0A0A;
  background-image: linear-gradient(180deg, #0C0C0C, #080808);
  border: 1px solid rgba(201,162,73,.18);
  box-shadow: 0 40px 120px rgba(0,0,0,.6);
  padding: clamp(30px, 5vw, 54px);
  opacity: 0; transform: translateY(18px) scale(.985);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.modal.is-open .modal__dialog { opacity: 1; transform: none; }
.modal__close {
  position: absolute; top: 16px; right: 16px; width: 40px; height: 40px;
  display: grid; place-items: center; background: none;
  border: 1px solid rgba(255,255,255,.12); color: var(--muted); cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.modal__close:hover { color: var(--gold-light); border-color: rgba(201,162,73,.5); }
.modal__title { margin: 10px 0 0; font-family: var(--display); font-weight: 600; letter-spacing: -.022em; font-size: clamp(26px, 4vw, 40px); line-height: 1.12; color: var(--text-bright); }
.modal__form { margin-top: clamp(22px, 4vh, 32px); display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.field { display: grid; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field__k { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.field__i {
  width: 100%; padding: 13px 14px; background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.12); color: var(--text); border-radius: 0;
  font-family: var(--sans); font-size: 14px; font-weight: 300;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.field__i:focus { outline: none; border-color: rgba(201,162,73,.6); background: rgba(255,255,255,.05); }
.field__i::placeholder { color: rgba(169,163,155,.5); }
.field__i.is-invalid { border-color: #b5545f; }
select.field__i {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C9A249' stroke-width='1.3' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
select.field__i option { background: #0C0C0C; color: var(--text); }
textarea.field__i { resize: vertical; min-height: 88px; }
.modal__submit { grid-column: 1 / -1; margin-top: 6px; justify-self: start; border: 0; cursor: pointer; }
.modal__hint { grid-column: 1 / -1; margin: 4px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: .03em; color: rgba(169,163,155,.6); line-height: 1.6; }
.modal__success { display: grid; gap: 14px; justify-items: center; text-align: center; padding: clamp(12px, 3vh, 26px) 0; }
.modal__success[hidden] { display: none; }
.modal__check { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(201,162,73,.5); color: var(--gold-light); }
.modal__success .modal__hint { max-width: 40ch; }
.modal__success-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

@media (max-width: 560px) {
  .modal__form { grid-template-columns: 1fr; }
  .modal__submit { justify-self: stretch; text-align: center; }
}

/* =========================================================================
   Footer
   ========================================================================= */
.footer { padding: clamp(96px, 18vh, 200px) var(--pad-x) clamp(40px, 6vh, 64px); border-top: 1px solid var(--line); }
.footer__grid { max-width: var(--maxw); margin: 0 auto; display: grid; gap: clamp(64px, 12vh, 130px); }
.footer__logo { width: clamp(170px, 22vw, 260px); height: auto; margin: 0 auto; opacity: .9; }
.footer__cols {
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  font-size: 13px; font-weight: 300; color: var(--muted-2); line-height: 2;
}
.footer__col { display: grid; gap: 10px; }
.footer__k { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: rgba(201,162,73,.85); }
.footer__bar {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(143,138,131,.6);
}

/* =========================================================================
   Custom cursor (desktop, pointer-fine only) — subtle "VIEW / EXPLORE"
   ========================================================================= */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor {
    display: grid; place-items: center; position: fixed; top: 0; left: 0;
    width: 74px; height: 74px; border-radius: 50%;
    border: 1px solid rgba(201,162,73,.5); background: rgba(6,6,6,.35);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    color: var(--gold-light); font-size: 9px; letter-spacing: .24em; text-transform: uppercase;
    z-index: 90; pointer-events: none;
    transform: translate(-50%, -50%) scale(.4); opacity: 0;
    transition: opacity .3s var(--ease), transform .3s var(--ease), background .3s ease;
    will-change: transform;
  }
  .cursor.is-active { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* =========================================================================
   Responsive — two intentional layouts (desktop >= 900px, mobile below)
   ========================================================================= */
@media (min-width: 900px) {
  .nav { display: flex; }
  .services__grid { grid-template-columns: minmax(0,1.35fr) minmax(0,.65fr); }
  .services__panel { display: block; }
  .experience__grid { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); }
  .location__inner { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}

/* Mobile-tuned vertical media: 9:16 frames get real presence on phones.
   Explicit width (not max-width + auto margins) so empty placeholder frames
   still stretch; justify-self gives an editorial left/right zigzag. */
@media (max-width: 640px) {
  .gallery__grid { grid-template-columns: 1fr; justify-items: stretch; }
  .gallery__grid .frame--v { width: 80vw; }
  .gallery__grid .frame--v:nth-child(even) { justify-self: end; }
  .gallery__grid .frame--v:nth-child(odd)  { justify-self: start; }
  .gallery__grid .frame--v:nth-child(2),
  .gallery__grid .frame--v:nth-child(4) { transform: none; }
}

/* =========================================================================
   Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001s !important; animation-delay: 0s !important;
    transition-duration: .001s !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .cursor { display: none !important; }
}

/* =========================================================================
   ===  BRIEF BUILD-OUT  ===================================================
   Sections added for the CARRIDA landing brief: About, Advantages, Service
   cards, Prices, Process, Quality, Before/After, Gallery filters, Reviews,
   Numbers, FAQ, Booking form, Contacts, Final CTA, sticky mobile CTA.
   Colour discipline (§4): ~80% black/graphite, ~15% imagery, ~5% bronze.
   ========================================================================= */

/* ----- Shared section head ------------------------------------------------ */
.sec-head { display: grid; gap: 18px; margin-bottom: clamp(40px, 7vh, 88px); max-width: 760px; }
.sec-head--center { margin-left: auto; margin-right: auto; justify-items: center; text-align: center; }
.sec-head h2 {
  margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.028em;
  font-size: clamp(30px, 5vw, 66px); line-height: 1.05; color: var(--text-bright); text-wrap: balance;
}
.sec-head__lead {
  margin: 0; max-width: 56ch; font-size: clamp(14px, 1.35vw, 17px);
  font-weight: 400; line-height: 1.8; color: var(--muted);
}
.sec-head__display {
  margin: 0; max-width: 24ch;
  font-family: var(--display); font-weight: 600; letter-spacing: -.024em;
  font-size: clamp(22px, 3vw, 38px); line-height: 1.2; color: var(--text-soft);
}

/* Hairline bronze rule used to open a section */
.rule { height: 1px; background: linear-gradient(to right, var(--gold), rgba(201,162,73,0)); width: min(140px, 30vw); }

/* ----- 02 · About / more than a wash (§9) --------------------------------- */
.about__grid {
  display: grid; gap: clamp(32px, 5vw, 80px); align-items: center;
  grid-template-columns: minmax(0,1fr);
}
.about__media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border: 1px solid var(--line-2);
}
.about__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s var(--ease), transform 6s var(--ease); }
.about__media img.is-ready { opacity: 1; }
.about:hover .about__media img.is-ready { transform: scale(1.04); }
.about__body { display: grid; gap: clamp(18px, 2.4vw, 28px); }
.about__body h2 {
  margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.028em;
  font-size: clamp(28px, 4.2vw, 56px); line-height: 1.08; color: var(--text-bright); text-wrap: balance;
}
.about__body p { margin: 0; max-width: 54ch; font-size: clamp(14px, 1.3vw, 16px); line-height: 1.85; color: var(--muted); }

/* ----- 03 · Advantages (§10) ---------------------------------------------- */
.adv__grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.adv__item {
  background: var(--bg); padding: clamp(26px, 3.4vw, 44px);
  display: grid; gap: 12px; align-content: start;
  transition: background .45s var(--ease);
}
.adv__item:hover { background: var(--graphite); }
.adv__n { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--gold); }
.adv__item h3 { margin: 4px 0 0; font-family: var(--display); font-weight: 600; letter-spacing: -.015em; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.25; color: var(--text-bright); }
.adv__item p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--muted); }

/* ----- 04 · Service cards (§11, §12) -------------------------------------- */
.svc__grid { display: grid; gap: clamp(16px, 2vw, 28px); grid-template-columns: minmax(0,1fr); }
.svc {
  position: relative; display: grid; grid-template-rows: auto 1fr; align-content: start;
  background: var(--graphite); border: 1px solid var(--line-2);
  transition: border-color .45s var(--ease), transform .45s var(--ease), background .45s var(--ease);
}
.svc:hover { border-color: rgba(201,162,73,.34); transform: translateY(-3px); background: var(--graphite-2); }
.svc__shot { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1px solid var(--line-2); }
.svc__shot img, .svc__shot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s var(--ease), transform 1.4s var(--ease); }
.svc__shot .is-ready { opacity: 1; }
.svc:hover .svc__shot .is-ready { transform: scale(1.05); }
.svc__n {
  position: absolute; left: 16px; top: 14px; z-index: 2;
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--gold);
  text-shadow: 0 1px 8px rgba(0,0,0,.8);
}
.svc__body { display: grid; gap: 12px; padding: clamp(22px, 2.6vw, 32px); align-content: start; }
.svc__body h3 {
  margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: .02em;
  font-size: clamp(15px, 1.5vw, 18px); line-height: 1.3; text-transform: uppercase; color: var(--text-bright);
}
.svc__desc { margin: 0; font-size: 14px; line-height: 1.8; color: var(--muted); }
.svc__price { font-family: var(--display); font-weight: 600; font-size: clamp(17px, 1.8vw, 22px); letter-spacing: -.01em; color: var(--gold); }
.svc__price--tbd { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.svc__foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--line-2); }

/* ----- 05 · Prices (§13) -------------------------------------------------- */
.prices { background: linear-gradient(to bottom, var(--bg), var(--graphite) 45%, var(--bg)); }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: clamp(26px, 4vh, 40px); }
.tab {
  padding: 11px 20px; background: none; cursor: pointer; font-family: var(--sans);
  border: 1px solid var(--line-3); color: var(--muted);
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500;
  transition: color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.tab:hover { color: var(--text); border-color: rgba(255,255,255,.22); }
.tab[aria-selected="true"] { color: var(--gold-light); border-color: rgba(201,162,73,.55); background: rgba(201,162,73,.07); }

.price-table__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.price-table { width: 100%; border-collapse: collapse; min-width: 320px; }
.price-table caption { text-align: left; padding-bottom: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.price-table th, .price-table td { padding: clamp(16px, 2vw, 22px) 14px; text-align: left; border-bottom: 1px solid var(--line-2); }
.price-table thead th {
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase; font-weight: 500;
  color: var(--gold); border-bottom-color: rgba(201,162,73,.3); white-space: nowrap;
}
.price-table thead th:not(:first-child), .price-table td:not(:first-child) { text-align: right; }
.price-table tbody tr { transition: background .35s var(--ease); }
.price-table tbody tr:hover { background: rgba(255,255,255,.02); }
.price-table td:first-child { font-size: clamp(14px, 1.4vw, 16px); font-weight: 500; color: var(--text); }
.price-table__val { font-family: var(--display); font-weight: 600; font-size: clamp(14px, 1.5vw, 17px); color: var(--text-bright); white-space: nowrap; }
.price-table__tbd { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.prices__foot { display: flex; align-items: center; gap: clamp(18px, 3vw, 36px); flex-wrap: wrap; margin-top: clamp(30px, 5vh, 48px); }
.prices__note { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; line-height: 1.7; color: var(--muted-2); max-width: 46ch; }

/* ----- 06 · Process (§14) ------------------------------------------------- */
.flow { display: grid; gap: clamp(24px, 3vw, 40px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.flow__item { position: relative; display: grid; gap: 12px; align-content: start; padding-top: 26px; border-top: 1px solid var(--gold-line); }
.flow__n { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--gold); }
.flow__item h3 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.015em; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.25; color: var(--text-bright); }
.flow__item p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--muted); }

/* ----- 07 · Quality in detail (§15) --------------------------------------- */
.quality__grid { display: grid; gap: clamp(12px, 1.6vw, 22px); grid-template-columns: minmax(0,1fr); }
.qfig { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--line-2); aspect-ratio: 3 / 4; }
.qfig:nth-child(1), .qfig:nth-child(4) { aspect-ratio: 4 / 3; }
.qfig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s var(--ease), transform 7s var(--ease); }
.qfig img.is-ready { opacity: 1; }
.qfig:hover img.is-ready { transform: scale(1.05); }
.qfig__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,5,5,.9) 0%, rgba(5,5,5,.1) 55%); }
.qfig figcaption {
  position: absolute; left: clamp(18px, 2.5vw, 30px); right: clamp(18px, 2.5vw, 30px); bottom: clamp(18px, 2.5vw, 28px); z-index: 2;
  font-family: var(--display); font-weight: 500; font-size: clamp(14px, 1.5vw, 18px);
  line-height: 1.4; color: var(--text-bright); text-wrap: balance;
}

/* ----- 08 · Before / After slider (§16) ----------------------------------- */
.ba__track { display: grid; gap: clamp(16px, 2.4vw, 32px); grid-template-columns: minmax(0,1fr); }
.ba-item { margin: 0; }
.ba {
  position: relative; overflow: hidden; aspect-ratio: 16 / 10;
  border: 1px solid var(--line-2); touch-action: pan-y; user-select: none; cursor: ew-resize;
}
.ba__layer { position: absolute; inset: 0; }
.ba__layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba__after { clip-path: inset(0 0 0 var(--ba, 50%)); }
.ba__handle {
  position: absolute; top: 0; bottom: 0; left: var(--ba, 50%); width: 2px; z-index: 3;
  background: linear-gradient(to bottom, transparent, var(--gold) 12%, var(--gold) 88%, transparent);
  transform: translateX(-1px); pointer-events: none;
}
.ba__grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(201,162,73,.75); background: rgba(5,5,5,.62);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: grid; place-items: center; color: var(--gold-light);
}
.ba__grip svg { display: block; }
.ba input[type="range"] {
  position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%;
  opacity: 0; cursor: ew-resize; margin: 0; appearance: none; -webkit-appearance: none; background: none;
}
.ba input[type="range"]:focus-visible { outline: 1px solid var(--gold); outline-offset: -3px; }
.ba__tag {
  position: absolute; z-index: 2; top: 14px; padding: 7px 14px;
  background: rgba(5,5,5,.7); border: 1px solid var(--line-3);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-soft);
}
.ba__tag--before { left: 14px; }
.ba__tag--after  { right: 14px; color: var(--gold-light); border-color: rgba(201,162,73,.4); }
.ba__label {
  margin-top: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted-2);
}

/* ----- 09 · Gallery filters (§17) ----------------------------------------- */
.gallery__filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: clamp(24px, 4vh, 40px); }
.frame.is-hidden { display: none; }
/* Editorial, deliberately asymmetric grid — never uniform squares (§17). */
.gallery__grid .frame--wide { grid-column: span 2; aspect-ratio: 16 / 9; }
.gallery__grid .frame--std  { aspect-ratio: 1 / 1; }

/* ----- 10 · Reviews (§19) ------------------------------------------------- */
.reviews__grid { display: grid; gap: clamp(16px, 2vw, 26px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.review { display: grid; gap: 16px; align-content: start; padding: clamp(26px, 3vw, 38px); background: var(--graphite); border: 1px solid var(--line-2); }
.review__stars { display: flex; gap: 3px; color: var(--gold); font-size: 13px; letter-spacing: .1em; }
.review__text { margin: 0; font-size: 15px; line-height: 1.85; color: var(--text-soft); }
.review__who { display: grid; gap: 4px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.review__name { font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--text-bright); }
.review__car { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.review__src { justify-self: start; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid rgba(201,162,73,.35); padding-bottom: 3px; }

/* ----- 11 · Numbers (§20) ------------------------------------------------- */
.stats { background: var(--graphite); }
.stats__grid { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.stat { display: grid; gap: 10px; }
.stat__v { font-family: var(--display); font-weight: 800; letter-spacing: -.04em; font-size: clamp(44px, 7vw, 96px); line-height: .95; color: var(--text-bright); }
.stat__k { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); line-height: 1.6; }

/* ----- 12 · FAQ (§22) ----------------------------------------------------- */
.faq__list { display: grid; border-top: 1px solid var(--line-2); max-width: 900px; }
.faq__item { border-bottom: 1px solid var(--line-2); }
.faq__q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: clamp(20px, 2.6vw, 28px) 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--display); font-weight: 500; letter-spacing: -.012em;
  font-size: clamp(15px, 1.6vw, 19px); line-height: 1.4; color: var(--text);
  transition: color .35s var(--ease);
}
.faq__q:hover, .faq__item.is-open .faq__q { color: var(--gold-light); }
.faq__ico { flex: none; position: relative; width: 14px; height: 14px; margin-top: 5px; }
.faq__ico::before, .faq__ico::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--gold);
  transform: translate(-50%,-50%); transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.faq__ico::before { width: 14px; height: 1px; }
.faq__ico::after  { width: 1px; height: 14px; }
.faq__item.is-open .faq__ico::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.faq__a { overflow: hidden; height: 0; transition: height .45s var(--ease); }
.faq__a > div { padding: 0 0 clamp(22px, 2.8vw, 30px); max-width: 68ch; }
.faq__a p { margin: 0; font-size: clamp(14px, 1.35vw, 16px); line-height: 1.85; color: var(--muted); }

/* ----- 13 · Booking form, stepped (§23) ----------------------------------- */
.booking { background: linear-gradient(to bottom, var(--bg), var(--graphite)); }
.booking__grid { display: grid; gap: clamp(36px, 6vw, 90px); grid-template-columns: minmax(0,1fr); align-items: start; }
.stepper { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: clamp(26px, 4vh, 38px); }
.stepper__i { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2); transition: color .35s var(--ease); }
.stepper__i.is-active { color: var(--gold); }
.stepper__i.is-done { color: var(--text-soft); }
.stepper__dot { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 10px; flex: none; }
.stepper__bar { width: clamp(16px, 4vw, 44px); height: 1px; background: var(--line-3); }

.step-panel { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.step-panel[hidden] { display: none; }
.step-panel__title { grid-column: 1 / -1; margin: 0 0 4px; font-family: var(--display); font-weight: 600; letter-spacing: -.02em; font-size: clamp(19px, 2.2vw, 26px); line-height: 1.25; color: var(--text-bright); }

/* Big tappable service choices for step 1 */
/* grid-auto-rows keeps every row as tall as the tallest tile, and the label
   is a grid so its <span> stretches to fill the cell — without both, a label
   that wraps to two lines ("Другое / пока не определился") leaves its
   neighbour short and the row ragged. */
.choice-grid {
  grid-column: 1 / -1; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  grid-auto-rows: 1fr;
}
.choice { position: relative; display: grid; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice span {
  display: flex; align-items: center; gap: 12px; padding: 17px 20px; height: 100%;
  border: 1px solid var(--line-3); color: var(--text-soft);
  font-size: 14px; font-weight: 500; line-height: 1.4;
  transition: border-color .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.choice span::before {
  content: ""; flex: none; width: 9px; height: 9px; border: 1px solid var(--muted-2); border-radius: 50%;
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.choice:hover span { border-color: rgba(255,255,255,.22); color: var(--text); }
.choice input:checked + span { border-color: rgba(201,162,73,.6); background: rgba(201,162,73,.07); color: var(--text-bright); }
.choice input:checked + span::before { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,73,.16); }
.choice input:focus-visible + span { outline: 1px solid var(--gold); outline-offset: 3px; }

.step-nav { grid-column: 1 / -1; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.btn-back {
  padding: 15px 26px; background: none; border: 1px solid var(--line-3); color: var(--muted);
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; cursor: pointer;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.btn-back:hover { color: var(--text); border-color: rgba(255,255,255,.24); }
button.btn-gold { border: 0; cursor: pointer; font-family: var(--sans); }
button.btn-ghost { border: 1px solid rgba(242,240,236,.22); cursor: pointer; font-family: var(--sans); }

.booking__aside { display: grid; gap: clamp(18px, 2.6vw, 26px); align-content: start; padding: clamp(26px, 3vw, 38px); background: var(--graphite-2); border: 1px solid var(--line-2); }
.booking__aside h3 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.015em; font-size: clamp(17px, 1.8vw, 21px); color: var(--text-bright); }
.booking__aside p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--muted); }

/* ----- 14 · Contacts + map (§24) ------------------------------------------ */
.contacts__grid { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0,1fr); align-items: stretch; }
.map {
  position: relative; min-height: clamp(300px, 46vh, 520px); overflow: hidden;
  border: 1px solid var(--line-2); background: var(--graphite);
}
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.92) contrast(.86) brightness(.94); }
.info { display: grid; gap: clamp(16px, 2.2vw, 24px); align-content: start; }
.info__logo { width: clamp(150px, 20vw, 200px); height: auto; }
.info__row { display: grid; gap: 6px; padding-bottom: 16px; border-bottom: 1px solid var(--line-2); }
.info__k { display: flex; align-items: center; gap: 9px; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.info__v { font-size: clamp(14px, 1.4vw, 16px); line-height: 1.7; color: var(--text-soft); }
a.info__v:hover { color: var(--gold-light); }
.info__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }

/* ----- 15 · Final CTA (§18, §25) ------------------------------------------ */
.final { position: relative; overflow: hidden; }
.final__bg { position: absolute; inset: 0; }
.final__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s var(--ease); }
.final__bg img.is-ready { opacity: 1; }
.final__scrim { position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 45%, rgba(201,162,73,.12), transparent 62%), linear-gradient(to bottom, rgba(5,5,5,.85), rgba(5,5,5,.7) 50%, rgba(5,5,5,.95)); }
.final__inner { position: relative; z-index: 2; max-width: 940px; margin: 0 auto; padding: clamp(96px, 20vh, 220px) var(--pad-x); display: grid; gap: clamp(24px, 4vh, 40px); justify-items: center; text-align: center; }
.final h2 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.03em; font-size: clamp(32px, 6vw, 84px); line-height: 1.03; color: var(--text-bright); text-wrap: balance; }
.final__sub { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.final__line { margin: 0; max-width: 44ch; font-size: clamp(14px, 1.4vw, 17px); line-height: 1.85; color: var(--muted); }

/* ----- Sticky mobile CTA (§28) -------------------------------------------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: none; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(5,5,5,.93); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(201,162,73,.22);
  transform: translateY(110%); transition: transform .45s var(--ease);
}
.sticky-cta.is-shown { transform: translateY(0); }
.sticky-cta a, .sticky-cta button {
  flex: 1 1 0; min-width: 0; padding: 15px 12px; text-align: center; cursor: pointer;
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sticky-cta__book { flex-grow: 2; background: var(--gold); color: #0A0A0A; border: 0; }
.sticky-cta__call { background: none; border: 1px solid rgba(242,240,236,.22); color: var(--text); }
@media (max-width: 899px) {
  .sticky-cta { display: flex; }
  .header__actions .btn-outline { display: none; } /* sticky CTA covers it; keeps the burger on-screen */
  .field__i { font-size: 16px; } /* <16px makes iOS Safari zoom in on focus */
  .footer { padding-bottom: 116px; }
}

/* Bronze-accented inline link */
.link-bronze { color: var(--gold); border-bottom: 1px solid rgba(201,162,73,.4); padding-bottom: 3px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; }
.link-bronze:hover { color: var(--gold-light); border-bottom-color: var(--gold-light); }

/* Mobile drawer nav */
.burger {
  display: grid; place-items: center; gap: 5px; width: 42px; height: 42px; flex: none;
  background: none; border: 1px solid var(--line-3); cursor: pointer; padding: 0;
}
.burger span { display: block; width: 16px; height: 1px; background: var(--text); transition: transform .35s var(--ease), opacity .35s var(--ease); }
.burger.is-open span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-3px) rotate(-45deg); }
.drawer {
  position: fixed; inset: 0; z-index: 70; background: rgba(5,5,5,.97);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  display: grid; align-content: center; gap: 4px; padding: var(--pad-x);
  opacity: 0; pointer-events: none; transition: opacity .35s var(--ease);
}
.drawer.is-open { opacity: 1; pointer-events: auto; }
.drawer a {
  padding: 15px 0; border-bottom: 1px solid var(--line-2);
  font-family: var(--display); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(22px, 6.4vw, 38px); color: var(--text-bright);
}
.drawer a:hover { color: var(--gold); }
@media (min-width: 900px) { .burger, .drawer { display: none; } }

/* =========================================================================
   Responsive build-out
   ========================================================================= */
@media (min-width: 640px) {
  .adv__grid    { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .svc__grid    { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .quality__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ba__track    { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 900px) {
  .about__grid    { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); }
  .adv__grid      { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .svc__grid      { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .contacts__grid { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); }
  .booking__grid  { grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); }
  .quality__grid  { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .step-panel { grid-template-columns: 1fr; }
  .price-table th, .price-table td { padding-left: 10px; padding-right: 10px; }
}

/* Reduced motion: kill the slow zooms added above */
@media (prefers-reduced-motion: reduce) {
  .about__media img, .qfig img, .svc__shot .is-ready, .frame__media { transition-duration: .001s !important; transform: none !important; }
  .faq__a { transition: none !important; }
}

/* =========================================================================
   Hero re-tune for the brief (§8)
   The H1 now leads the hero, so the logo mark steps back to a supporting
   role above it rather than being the centrepiece.
   ========================================================================= */
.hero__logo { margin: 0 0 clamp(18px, 3vh, 32px); }
.hero__logo img { width: clamp(150px, 20vw, 250px); }

.hero h1 {
  font-family: var(--display); font-weight: 700; letter-spacing: -.035em;
  font-size: clamp(32px, 5.6vw, 76px); line-height: 1.04;
}
.hero__sub { max-width: 52ch; color: var(--muted); }

.hero__cta {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  margin-top: clamp(26px, 4vh, 40px);
}
.hero__meta { font-weight: 500; }
@media (max-width: 560px) {
  .hero__cta { width: 100%; }
  .hero__cta .btn-gold, .hero__cta .btn-ghost { flex: 1 1 100%; text-align: center; }
  .hero__meta { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* The service card «Записаться» stays a quiet text link — bronze is reserved
   for the primary CTA on each screen (§4: ~5% bronze). */
.svc__foot .link-underline { color: var(--muted); border-bottom-color: var(--line-3); background: none; padding: 0 0 5px; cursor: pointer; font-family: var(--sans); }
.svc__foot .link-underline:hover { color: var(--text); border-bottom-color: rgba(255,255,255,.3); }
button.link-bronze { background: none; cursor: pointer; font-family: var(--sans); }

/* Invalid-state flash used by the stepped form */
.choice-grid.is-invalid { outline: 1px solid #b5545f; outline-offset: 8px; }

/* Section rhythm for the new blocks */
.about, .advantages, .services, .prices, .process, .quality,
.beforeafter, .gallery, .reviews, .stats, .faq, .booking, .contacts {
  padding-top: clamp(64px, 11vh, 130px);
  padding-bottom: clamp(64px, 11vh, 130px);
}

/* Contact rows inside the service detail modal read as a small key/value pair */
#service-modal .contact { max-width: none; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); text-align: left; }
#service-modal .contact__item { justify-items: start; }
#service-modal .modal__dialog { width: min(620px, 100%); }

/* A "wide" tile cannot span two columns when there is only one. */
@media (max-width: 639px) { .gallery__grid .frame--wide { grid-column: auto; } }

/* --- Scroll performance in the gallery ------------------------------------
   Offscreen tiles are skipped entirely by the renderer; the aspect-ratio and
   the intrinsic-size hint preserve their boxes, so nothing shifts while
   scrolling. Videos also opt out of the hover zoom: scaling a decoding video
   layer forces a re-raster on every frame of the 1.4s transition, and that
   fired constantly whenever the pointer sat over the grid during a scroll.
   Still images keep the zoom, where it costs nothing. */
.gallery__grid .frame {
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}
.frame:hover video.frame__media.is-ready { transform: none; }

/* =========================================================================
   Polish pass — card actions, booking stepper, gallery play affordance
   ========================================================================= */

/* ----- Service card actions ----------------------------------------------
   «Подробнее» and «Записаться» are <button>s. Earlier only background and
   font were reset, so the UA default border stayed and drew a box around
   each label. Full reset here, then one shared underline-grow treatment so
   the pair reads as a matched set rather than two stray controls. */
.svc__foot {
  gap: clamp(20px, 2.2vw, 30px);
  padding-top: clamp(18px, 2vw, 22px);
}
.svc__foot button {
  appearance: none; -webkit-appearance: none;
  margin: 0; padding: 0; border: 0; background: none;
  font-family: var(--sans); cursor: pointer;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600;
  line-height: 1; position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  /* Equal box height so the arrow on «Подробнее» cannot shift its label
     relative to the one next to it. */
  min-height: 14px;
  transition: color .35s var(--ease);
}
/* hairline that grows in from the left on hover */
.svc__foot button::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -7px;
  height: 1px; background: currentColor; opacity: .55;
  transition: right .4s var(--ease);
}
.svc__foot button:hover::after,
.svc__foot button:focus-visible::after { right: 0; }
.svc__foot button:focus-visible { outline: 1px solid var(--gold); outline-offset: 6px; }

/* Primary of the pair — bronze, with an arrow that eases outward */
.svc__foot .link-bronze { color: var(--gold); }
.svc__foot .link-bronze:hover { color: var(--gold-light); }
.svc__foot .link-bronze::before {
  content: "\2192"; order: 1;                 /* → after the label */
  font-size: 13px; line-height: 1;
  transition: transform .35s var(--ease);
}
.svc__foot .link-bronze:hover::before { transform: translateX(4px); }

/* Secondary — quiet until touched, so bronze stays scarce (§4).
   `padding: 0` repeated here to beat the earlier .svc__foot .link-underline
   rule, which left 5px underneath and knocked the pair out of alignment. */
.svc__foot .link-underline { color: var(--muted); padding: 0; border-bottom: 0; }
.svc__foot .link-underline:hover { color: var(--text-bright); }

/* ----- Booking stepper ----------------------------------------------------
   Was cramped against the heading and set in mono, which read thin at this
   size. Grotesk, more room, and a filled bronze dot for the active step. */
.stepper {
  margin-top: clamp(24px, 3.5vh, 34px);
  margin-bottom: clamp(30px, 4.5vh, 46px);
  gap: clamp(9px, 1.2vw, 14px);
}
.stepper__i {
  font-family: var(--sans);
  font-size: 9.5px; letter-spacing: .22em; font-weight: 600;
  gap: 11px;
}
.stepper__dot {
  width: 27px; height: 27px; flex: none;
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.stepper__i.is-active { color: var(--gold); }
.stepper__i.is-active .stepper__dot {
  background: var(--gold); border-color: var(--gold); color: #0A0A0A;
}
.stepper__i.is-done { color: var(--text-soft); }
.stepper__i.is-done .stepper__dot { border-color: rgba(201,162,73,.5); color: var(--gold); }
.stepper__bar { width: clamp(18px, 4vw, 48px); background: var(--line-3); }

/* Narrow screens: keep the dots, show only the current step's label */
@media (max-width: 430px) {
  .stepper__i > span:last-child { display: none; }
  .stepper__i.is-active > span:last-child { display: inline; }
}

/* ----- Gallery: hover-to-play affordance ----------------------------------
   Tiles rest on their first frame and only decode while hovered, so the cue
   is a quiet badge shown at rest and hidden once the clip runs — the inverse
   of the old full-cover overlay that appeared on hover. */
.gallery__grid .frame__cue {
  inset: 12px 12px auto auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px;
  background: rgba(5, 5, 5, .66);
  border: 1px solid rgba(201, 162, 73, .3);
  color: var(--gold-light);
  font-size: 9px; letter-spacing: .2em; font-weight: 600;
  opacity: 1;
  transition: opacity .3s ease;
}
.gallery__grid .frame__cue::before {
  content: "";
  width: 0; height: 0;
  border-left: 6px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.gallery__grid .frame:hover .frame__cue,
.gallery__grid .frame.is-playing .frame__cue { opacity: 0; }

/* No hover on touch: the cue would never clear, so drop it there */
@media (hover: none) {
  .gallery__grid .frame__cue { display: none; }
}

/* ----- Service card: align price and actions across a row -----------------
   Cards in a row already stretch to equal height, but the body packed to the
   top, so a one-line description and a four-line one put their price and
   buttons at different heights. Letting the description absorb the slack
   pins the price, the rule and the actions to the same baseline across the
   whole row. */
.svc__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.svc__price,
.svc__price--tbd { margin-top: auto; }
.svc__foot { margin-top: 0; }

/* =========================================================================
   Strict symmetry pass
   -------------------------------------------------------------------------
   The brief (§17) asked for a deliberately asymmetric editorial gallery, and
   that is what the rules above build: mixed tile shapes, a double-width
   frame, and two tiles nudged downward. The client asked instead for a fully
   regular grid, so everything below flattens that: one shape per tile, no
   column spans, no offsets, and rows that line up exactly.
   ========================================================================= */

/* Gallery — every tile identical 3:4, matching the re-cropped photography */
.gallery__grid .frame,
.gallery__grid .frame--v,
.gallery__grid .frame--std,
.gallery__grid .frame--wide {
  aspect-ratio: 3 / 4;
  grid-column: auto;
  width: auto;
  justify-self: stretch;
  transform: none;
}
/* beats the earlier nth-child offsets without needing !important elsewhere */
.gallery__grid .frame--v:nth-child(2),
.gallery__grid .frame--v:nth-child(4) { transform: none; }

/* Quality in detail — four equal squares */
.qfig,
.qfig:nth-child(1),
.qfig:nth-child(4) { aspect-ratio: 1 / 1; }

/* Service cards — every row the same height, not just every card in a row */
.svc__grid { grid-auto-rows: 1fr; }

/* Mobile: no zigzag, full-width tiles */
@media (max-width: 640px) {
  .gallery__grid .frame--v,
  .gallery__grid .frame--v:nth-child(even),
  .gallery__grid .frame--v:nth-child(odd) {
    width: auto;
    justify-self: stretch;
    transform: none;
  }
}

/* Text-driven grids too: equal row heights so nothing steps down mid-row */
.adv__grid { grid-auto-rows: 1fr; }
.flow       { grid-auto-rows: 1fr; }
.reviews__grid { grid-auto-rows: 1fr; }

/* Booking submit while the request is in flight */
button.btn-gold:disabled,
.btn-back:disabled { opacity: .55; cursor: progress; transform: none; }

/* ---- Section numbers are generated, not written into the copy ----------
   The brief numbers its blocks, but Reviews and Numbers stay out of the DOM
   until real data exists, so hard-coded numbers jumped 09 → 12. A counter
   counts only what is actually on the page. 01 is the hero. */
main { counter-reset: sec 1; }
main .eyebrow { counter-increment: sec; }
main .eyebrow::before { content: counter(sec, decimal-leading-zero) " — "; }

/* A single before/after pair spans the row instead of sitting in half of it */
.ba__track.ba__track--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 980px; margin-left: auto; margin-right: auto;
}

/* Photo credit in the footer — the quietest line on the page, but readable */
.footer__credits {
  flex: 0 0 100%; margin: 4px 0 0;
  font-family: var(--mono); font-size: 9.5px; line-height: 2;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(143,138,131,.5);
}
.footer__credits a { color: inherit; border-bottom: 1px solid rgba(143,138,131,.35); }
.footer__credits a:hover { color: var(--gold-light); border-bottom-color: currentColor; }

/* A <button class="btn-ghost"> picked up the browser's own light button face:
   the rule set a border and a colour but never a background, which shows on
   buttons and not on links. The success panel's «Заполнить заново» was a white
   slab with near-white text on it. */
.btn-ghost {
  background: none;
  appearance: none;
  -webkit-appearance: none;
}